/* 곱절 — 게임 화면과 판.
 *
 * 판은 정사각형이고, 타일은 판 크기에 대한 '비율'로 움직인다.
 * 그래서 화면 크기가 바뀌어도 자바스크립트가 위치를 다시 계산할 필요가 없다.
 *
 * ⚠ --tile / --step / .cells 의 gap 은 한 세트다. 하나만 바꾸면 타일이 칸에서 어긋난다. */

.play{
  flex:1; min-height:0; width:100%; display:grid; gap:10px;
  grid-template-columns:1fr;
  grid-template-rows:auto auto 1fr auto;
  grid-template-areas:"top" "notice" "stage" "dock";
}

.top{grid-area:top}

.notice{grid-area:notice}

.stage{grid-area:stage}

.dock{grid-area:dock}

.side{grid-area:side; display:none; min-height:0}

.side .panel{height:100%; display:flex; flex-direction:column}

.side .ranks{flex:1; max-height:none}

/* ── 출발 신호 ──────────────────────────────────
   시작을 누르면 잠깐 뜬다. "눌렀다 → 시작됐다" 사이를 눈에 보이게 만드는 장치다.
   ⚠ 이 이름은 이 덮개 전용이다. 다른 곳에서 클래스로 'go' 를 쓰지 말 것. */

#go{
  position:fixed; inset:0; z-index:30; display:flex;
  align-items:center; justify-content:center; pointer-events:none;
  background:var(--goscreen);
  font-size:44px; font-weight:800; letter-spacing:-.04em; color:var(--goldtext);
  animation:goFlash .62s ease-out forwards;
}

/* 게임판이 등장하는 연출 */

@keyframes boardsIn{from{opacity:0; transform:scale(.9)}to{opacity:1; transform:none}}

.boards.enter{animation:boardsIn .34s cubic-bezier(.2,.9,.3,1.3)}

/* ── 상단 ───────────────────────────────────────── */

.top{display:flex; align-items:center; gap:9px; flex:none}

.brand{font-size:23px; font-weight:800; letter-spacing:-.03em}

.scores{display:flex; gap:7px}

.score{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:5px 12px; min-width:70px; text-align:center;
}

.lab{font-size:9.5px; font-weight:700; color:var(--dim); letter-spacing:.04em}

.val{font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:1px}

.val.done{color:var(--goldtext)}

/* 오늘의 과제를 달성한 칸 */
/* ── 모드 탭 ────────────────────────────────────── */

.meta{
  flex:1; min-width:0; font-size:11.5px; font-weight:700; color:var(--dim);
  font-variant-numeric:tabular-nums; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}

/* ── 하단 조작대 ─────────────────────────────────── */

.dock{
  flex:none; display:flex; align-items:center; gap:6px; overflow:hidden;
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:6px;
}

.dockinfo{flex:1; text-align:center; font-size:11.5px; font-weight:700; color:var(--dim);
          white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.tab{
  appearance:none; border:0; background:transparent; color:var(--dim); cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:700; letter-spacing:-.02em;
  padding:8px 11px; border-radius:9px; white-space:nowrap;
}

.tab.on{background:var(--cell); color:var(--fg)}

/* 기록이 저장되지 않는 창에서만 뜨는 안내 — 조용히 삼키지 않는다 */

.notice{
  font-size:12px; line-height:1.5; color:var(--goldtext);
  background:var(--goldtint); border:1px solid var(--goldline); border-radius:9px;
  padding:8px 11px; margin-top:-4px;
}

/* 처음 온 사람에게 한 번만. 아무 데나 누르면 사라진다. */

.coach{
  position:fixed; inset:0; z-index:20; display:flex;
  align-items:center; justify-content:center; padding:28px;
  background:var(--scrim); backdrop-filter:blur(3px);
  font-size:16px; line-height:1.7; font-weight:600; text-align:center; color:var(--fg);
}

.coach span{max-width:300px}

.coach b{display:block; margin-top:14px; font-size:12.5px; color:var(--dim); font-weight:700}

/* ── 판 ────────────────────────────────────────── */
/* 무대 = 판 4개 + 그 위를 덮는 결과창 */

.stage{
  position:relative; width:100%; min-height:0;
  display:flex; align-items:center; justify-content:center;
  touch-action:none; user-select:none;
  container-type:size;      /* 아래 100cqh = 이 무대의 세로. 판 크기 계산의 기준이다 */
}

/* 판 개수에 따라 배치가 달라진다. 1판은 크게, 2판은 나란히, 4판은 2×2.
   가로는 화면을 꽉 채우되, 세로가 모자라면 비율을 지키며 같이 줄어든다 —
   잘려서 안 보이느니 작아지는 게 낫다. */
/* 가로·세로 둘 다에 맞춘다 — 폭이 좁으면 폭에, 높이가 낮으면 높이에 맞춰 줄어든다.
   한쪽 기준만 쓰면 반대쪽에서 넘쳤다(둘 다 실측으로 확인). */

.boards{display:grid; gap:9px; margin:0 auto}

.boards[data-n="1"]{grid-template-columns:1fr;     aspect-ratio:1;    width:min(100%, 100cqh)}

.boards[data-n="2"]{grid-template-columns:1fr 1fr; aspect-ratio:2.05; width:min(100%, calc(100cqh * 2.05))}

.boards[data-n="4"]{grid-template-columns:1fr 1fr; aspect-ratio:1;    width:min(100%, 100cqh)}

/* ── 끝 화면 ────────────────────────────────────── */

.overlay{
  position:absolute; inset:0; border-radius:14px;
  background:var(--ovbg); backdrop-filter:blur(2px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  z-index:5;
}

.ov-title{font-size:27px; font-weight:800}

.ov-title.win{color:var(--goldtext)}

.ov-sub{font-size:13.5px; color:var(--dim); text-align:center; line-height:1.6; white-space:pre-line}

.ov-btns{display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:9px}

.ov-btns .btn{flex:none; padding:11px 20px}

/* 화면이 낮으면 설명을 접어 판을 지킨다 */

@media (max-height:660px){
  .brand{font-size:19px}
  .score{padding:4px 10px; min-width:62px}
  .val{font-size:16px}
  .meta{display:none}
}

@media (min-width:768px){
  /* 게임: 가운데 판 · 오른쪽 순위표 */
  .play{
    grid-template-columns:1fr 268px;
    grid-template-areas:"top side" "notice side" "stage side" "dock side";
  }
  .side{display:block}
  .stage{padding:0 4px}
}

@media (min-width:1200px){
  .play{grid-template-columns:1fr 330px; gap:16px}
  .side{grid-area:side}
}

/* ── 세로 화면: 판 아래 빈 자리를 순위표가 가져간다 ───────
   판은 정사각형이라 세로로 긴 화면에서는 아래가 반드시 남는다.
   특히 태블릿 세로(820×1180)에서 순위표를 오른쪽에 붙이면 판이 폭에 눌려
   510px 밖에 안 되는데 무대는 1031px 이라 가운데가 520px 비었다(실측).
   그래서 세로 화면에서는 순위표를 오른쪽이 아니라 판 아래에 깐다.

   ⚠ 이 블록은 폭 규칙(min-width:768px)보다 뒤에 있어야 한다 — 뒤에 오는 쪽이 이긴다.
   ⚠ 판 높이는 화면 높이의 58%로 묶는다. 폭만 보고 키우면 세로로 긴 창(예: 1000×1200)
      에서 판이 화면 밖으로 넘친다. 예전에 폭만·높이만 봤다가 양쪽 다 터졌다. */

@media (orientation:portrait) and (min-height:720px){
  .play{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto minmax(0,1fr) auto;
    grid-template-areas:"top" "notice" "stage" "side" "dock";
  }
  /* 무대 높이를 판이 정하게 한다. 무대를 크기 컨테이너로 두면
     '무대가 판을, 판이 무대를' 서로 참조해 버린다. */
  .stage{container-type:normal}
  .boards[data-n="1"],.boards[data-n="4"]{width:min(100%, 58vh); width:min(100%, 58svh)}
  .boards[data-n="2"]{width:min(100%, calc(58vh * 2.05)); width:min(100%, calc(58svh * 2.05))}
  /* 세로 배치에서는 순위판이 가로를 꽉 채워야 한다.
     flex 로만 두면 상자가 글자 길이만큼만 좁아진다(실측: 폭의 45%). */
  .side{display:flex; flex-direction:column}
  .side .panel{width:100%; flex:1}
  .side .ranks{max-height:none}
}