/* ─────────────────────────────────────────────────────────────
   스크래블 프론트엔드 — 대기실 화면 스타일(CSS)

   HTML = 화면의 "뼈대", CSS = 화면의 "겉모습", JS = 화면의 "동작".
   디자인만 고칠 때는 이 파일만 열면 되고, index.html 의 백엔드
   호출 코드는 건드리지 않아도 됩니다.

   색·글꼴 같은 공통값(토큰)은 design/styles.css 한 곳에만 적어두고
   여기서 불러 씁니다. 색을 바꾸려면 그 파일만 고치면 디자인 원본과
   실제 화면이 같이 바뀝니다.
   ───────────────────────────────────────────────────────────── */
@import url("design/styles.css");

*{box-sizing:border-box}
body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--font-text);line-height:1.6;-webkit-font-smoothing:antialiased}
.board{min-height:100vh;padding:40px 20px 72px}

/* ── 대기실 본체 — 좁은 한 줄로 세웁니다. ─────────────────
   가로로 벌리면 눈이 좌우로 왔다갔다 하게 됩니다.
   순서대로 밟는 화면은 위에서 아래로 한 줄이 제일 빠릅니다. */
.lobby{max-width:520px;margin:0 auto;background:var(--paper-2);border:1.5px solid var(--rule)}

/* ── 머리 ──────────────────────────────────────────────── */
.crown{padding:26px 26px 22px;border-bottom:1.5px solid var(--rule);text-align:center}
.tiles{display:flex;justify-content:center;margin:0 0 14px}
.tile{width:34px;height:38px;display:grid;place-items:center;background:var(--theme);border:1px solid var(--rule);margin-left:-1px;font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink)}
.tile:first-child{margin-left:0}
.crown h1{margin:0;font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-soft)}

/* ── 진행 표시 ─────────────────────────────────────────── */
.stepper{display:flex;border-bottom:1.5px solid var(--rule)}
.pip{flex:1;margin-left:-1px;padding:9px 6px;display:flex;align-items:center;justify-content:center;gap:7px;
  background:transparent;border-left:1px solid var(--grid);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-faint)}
.pip:first-child{border-left:none}
.pip-no{width:17px;height:17px;flex:none;display:grid;place-items:center;border:1px solid var(--grid);font-size:9px}
.pip.is-now{background:var(--theme-tint);color:var(--ink)}
.pip.is-now .pip-no{background:var(--theme);border-color:var(--rule)}
.pip.is-done{color:var(--ok)}
.pip.is-done .pip-no{background:var(--ok);border-color:var(--rule);color:#fff}

/* ── 단계 ──────────────────────────────────────────────── */
.step{padding:24px 26px;border-top:1px solid var(--grid)}
.step:first-of-type{border-top:none}
.step.is-locked{opacity:.4;pointer-events:none}
.step-head{display:flex;align-items:center;gap:9px;margin:0 0 14px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink)}
.step-no{width:19px;height:19px;flex:none;display:grid;place-items:center;background:var(--theme);border:1px solid var(--rule);font-size:10px}
.step.is-locked .step-no{background:transparent;border-color:var(--grid)}

/* 끝난 단계는 한 줄로 접습니다. */
.done-row{display:flex;align-items:center;gap:9px;font-size:14px}
.done-row .tick{width:18px;height:18px;flex:none;display:grid;place-items:center;background:var(--ok);border:1px solid var(--rule);color:#fff;font-family:var(--font-display);font-size:11px;font-weight:700}
.done-row b{font-weight:600}
.btn-link{margin-left:auto;padding:4px 9px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--ink-soft);background:transparent;border:1px solid var(--grid);border-radius:0;cursor:pointer}
.btn-link:hover{color:var(--ink);border-color:var(--rule)}

/* ── ① 닉네임 ──────────────────────────────────────────── */
.field-row{display:flex;align-items:stretch}
.field{flex:1;min-width:0;height:48px;margin-right:-1px;padding:0 14px;font:inherit;font-size:16px;color:var(--ink);
  background:#fff;border:1.5px solid var(--rule);border-radius:0;outline:none;transition:background .15s,box-shadow .15s}
.field::placeholder{color:var(--ink-faint)}
.field:focus{box-shadow:inset 0 -3px 0 var(--theme)}
.field.is-ok{background:var(--ok-tint)}
.field.is-bad{background:var(--bad-tint)}
.btn-check{flex:none;height:48px;padding:0 18px;
  font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:var(--track-caps);text-transform:uppercase;white-space:nowrap;
  color:var(--ink);background:var(--theme);border:1.5px solid var(--rule);border-radius:0;cursor:pointer;transition:background .15s}
.btn-check:hover:not(:disabled){background:var(--theme-deep)}
.btn-check:disabled{cursor:not-allowed;background:transparent;color:var(--ink-faint);border-color:var(--grid)}
/* 버튼이 둘 이상이면 테두리를 겹쳐 한 줄로 붙입니다. */
.btn-check + .btn-check{margin-left:-1px}
/* '새로 만들기'는 한 번만 하는 일이라 조용한 모양으로 둡니다.
   둘 다 꽉 찬 색이면 어느 쪽이 보통 길인지 알 수 없습니다. */
.btn-check.is-plain{background:transparent}
.btn-check.is-plain:hover:not(:disabled){background:var(--theme-tint)}
.counter{margin-left:auto;font-family:var(--font-mono);font-size:11px;font-variant-numeric:tabular-nums;color:var(--ink-faint)}

/* ── 모드 선택 ─────────────────────────────────────────── */
.modes{display:flex;align-items:stretch}
.mode{position:relative;flex:1;min-width:0;margin-left:-1px;padding:16px 12px;display:block;text-align:center;cursor:pointer;
  background:#fff;border:1.5px solid var(--rule);transition:background .15s}
.mode:first-child{margin-left:0}
.mode:hover{background:var(--theme-tint)}
.mode-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mode:has(.mode-input:checked){background:var(--theme)}
.mode:has(.mode-input:focus-visible){box-shadow:inset 0 0 0 3px var(--theme-deep)}
.mode-pics{display:flex;justify-content:center;margin:0 0 10px}
.mode-pic{width:27px;height:32px;margin-left:-1px;display:grid;place-items:center;background:var(--paper-2);border:1px solid var(--rule);
  font-family:var(--font-display);font-size:14px;font-weight:700}
.mode-pic:first-child{margin-left:0}
.mode-pic.is-any{background:transparent;border-style:dashed;border-color:var(--grid);color:var(--ink-faint)}
.mode:has(.mode-input:checked) .mode-pic{background:#fff}
.mode:has(.mode-input:checked) .mode-pic.is-any{background:transparent;border-color:var(--rule);color:var(--ink)}
.mode-name{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:var(--track-caps);text-transform:uppercase}
.mode-desc{margin-top:3px;font-size:12px;color:var(--ink-soft)}

/* ── 친구 모드 안의 두 갈래 ────────────────────────────── */
.split{margin-top:18px;padding-top:16px;border-top:1px solid var(--grid)}
.split-label{margin:0 0 10px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-soft)}
.or{display:flex;align-items:center;gap:10px;margin:16px 0;
  font-family:var(--font-mono);font-size:10px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-faint)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--grid)}

.code-row{display:flex}
.code-cell{width:44px;height:52px;margin-left:-1px;padding:0;
  font-family:var(--font-display);font-size:22px;font-weight:700;text-align:center;text-transform:uppercase;
  color:var(--ink);background:#fff;border:1.5px solid var(--rule);border-radius:0;outline:none;transition:background .15s,box-shadow .15s}
.code-cell:first-child{margin-left:0}
.code-cell:focus{box-shadow:inset 0 -4px 0 var(--theme)}
.code-row.is-bad .code-cell{background:var(--bad-tint)}
.code-row.is-shake{animation:shake .3s ease-in-out}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.entry-row{display:flex;align-items:stretch}
.btn-enter{flex:none;margin-left:-1px;height:52px;padding:0 18px;
  font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--ink);background:var(--theme);border:1.5px solid var(--rule);border-radius:0;cursor:pointer;transition:background .15s}
.btn-enter:hover:not(:disabled){background:var(--theme-deep)}
.btn-enter:disabled{cursor:not-allowed;background:transparent;color:var(--ink-faint);border-color:var(--grid)}

.btn-wide{width:100%;height:52px;
  font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--ink);background:var(--theme);border:1.5px solid var(--rule);border-radius:0;cursor:pointer;transition:background .15s}
.btn-wide:hover:not(:disabled){background:var(--theme-deep)}
.btn-wide:disabled{cursor:not-allowed;background:transparent;color:var(--ink-faint);border-color:var(--grid)}
.btn-wide.is-quiet{background:transparent}
.btn-wide.is-quiet:hover:not(:disabled){background:var(--bad-tint);border-color:var(--bad);color:var(--bad)}

/* 발급된 코드 (호스트) */
.code-show{display:flex;justify-content:center;margin:0 0 12px}
.show-cell{width:52px;height:64px;margin-left:-1px;display:grid;place-items:center;background:var(--theme);border:1.5px solid var(--rule);
  font-family:var(--font-display);font-size:28px;font-weight:700}
.show-cell:first-child{margin-left:0}
.share-row{display:flex;align-items:stretch;margin-bottom:14px}
.btn-copy{flex:1;height:42px;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--ink);background:transparent;border:1.5px solid var(--rule);border-radius:0;cursor:pointer;transition:background .15s}
.btn-copy:hover{background:var(--theme-tint)}
.btn-copy.is-done{background:var(--ok-tint);border-color:var(--ok);color:var(--ok)}
.btn-cancel{flex:none;margin-left:-1px;height:42px;padding:0 14px;
  font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--ink-soft);background:transparent;border:1.5px solid var(--grid);border-radius:0;cursor:pointer}
.btn-cancel:hover{color:var(--bad);border-color:var(--bad)}

/* ── 두 사람 자리 — 친구·랜덤이 같이 씁니다. ───────────── */
.versus{display:flex;align-items:stretch;margin-bottom:12px}
.player{flex:1;min-width:0;margin-left:-1px;padding:13px 10px;background:#fff;border:1.5px solid var(--rule);text-align:center}
.player:first-child{margin-left:0}
.player.is-empty{background:transparent;border-style:dashed;border-color:var(--grid)}
.player.is-found{background:var(--ok-tint)}
.player-tile{width:38px;height:44px;margin:0 auto 8px;display:grid;place-items:center;background:var(--theme);border:1.5px solid var(--rule);
  font-family:var(--font-display);font-size:19px;font-weight:700}
.player.is-empty .player-tile{background:transparent;border-style:dashed;border-color:var(--grid);color:var(--ink-faint)}
.player.is-found .player-tile{background:var(--ok);color:#fff;border-color:var(--rule)}
.player.is-hunting .player-tile{animation:flip 1s steps(2,end) infinite}
.player-name{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player.is-empty .player-name{color:var(--ink-faint);font-weight:400}
.player-role{margin-top:2px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-faint)}
.vs{flex:none;width:34px;margin-left:-1px;display:grid;place-items:center;background:var(--paper);border:1.5px solid var(--rule);
  font-family:var(--font-display);font-size:11px;font-weight:700;color:var(--ink-soft)}

.elapsed{margin:0 0 12px;text-align:center;font-family:var(--font-mono);font-size:22px;font-variant-numeric:tabular-nums;color:var(--ink)}
.queue{display:flex;align-items:center;justify-content:center;gap:7px;margin:12px 0 0;font-size:12.5px;color:var(--ink-soft)}
.queue b{color:var(--ink);font-variant-numeric:tabular-nums}
.queue-dot{width:8px;height:8px;flex:none;background:var(--ok);border:1px solid var(--rule)}
.queue.is-lonely .queue-dot{background:transparent;border-color:var(--grid)}

/* ── 안내 한 줄 ────────────────────────────────────────── */
.hint{display:flex;align-items:center;gap:7px;margin:11px 0 0;min-height:22px;font-size:13px;color:var(--ink-soft)}
.hint.is-ok{color:var(--ok)}
.hint.is-bad{color:var(--bad)}
.hint.is-wait{color:var(--ink)}
.hint.is-mid{justify-content:center;text-align:center}
.hint-icon{flex:none;width:18px;height:18px;display:grid;place-items:center;
  font-family:var(--font-display);font-size:11px;font-weight:700;color:#fff}
.is-ok>.hint-icon{background:var(--ok)}
.is-bad>.hint-icon{background:var(--bad)}
.waiting{flex:none;width:14px;height:14px;background:var(--theme);border:1px solid var(--rule);animation:flip 1s steps(2,end) infinite}
@keyframes flip{50%{background:transparent}}
@media (prefers-reduced-motion:reduce){.waiting,.player.is-hunting .player-tile{animation-duration:3s}.code-row.is-shake{animation:none}}

/* ── ③ 시작 ──────────────────────────────────────────────
   상대가 정해져도 저절로 넘어가지 않습니다. 방장이 문을 열어야
   시작됩니다. 그래서 이 칸은 상황에 따라 셋 중 하나가 됩니다.
     · 방장       → 누를 수 있는 문
     · 들어간 쪽  → 방장이 열기를 기다리는 안내
     · 아직 혼자  → 잠긴 칸 */
.leaving{padding:18px 14px;text-align:center;background:var(--ok-tint);border:1.5px solid var(--rule)}
.leaving.is-idle{background:transparent;border-style:dashed;border-color:var(--grid)}
.leaving .hint{margin:0}

/* ── 게임 시작 — 타일 문 ─────────────────────────────────
   여기는 대기실의 마지막 칸이자 게임으로 넘어가는 유일한 문입니다.
   그래서 화면에서 제일 눈에 띄어야 합니다.

   다만 요란한 색을 새로 칠하는 대신, 이 화면이 원래 쓰던 스크래블
   타일을 그대로 크게 씁니다. 없던 것을 가져다 붙이면 이 화면만
   따로 노는데, 원래 있던 것을 키우면 "쭉 오던 길의 끝"으로 읽힙니다. */
.gate{display:block;width:100%;padding:20px 14px 18px;font:inherit;
  background:var(--paper-2);border:1.5px solid var(--rule);cursor:pointer;
  transition:background .3s ease,box-shadow .3s ease;-webkit-tap-highlight-color:transparent}
.gate:disabled{cursor:default}
.gate:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--theme-deep)}

.gate-label{margin:0 0 13px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-soft)}
.gate-tiles{display:flex;justify-content:center}

/* 타일 한 장 — 앞면(하늘색)과 뒷면(금색)이 등을 맞대고 붙어 있습니다.
   perspective 는 "보는 사람의 눈 위치"입니다. 이게 있어야 뒤집힐 때
   납작하게 찌그러지지 않고 입체로 돌아갑니다. */
.gate-tile{position:relative;width:46px;height:54px;margin-left:-1px;
  perspective:620px;transition:transform .22s ease}
.gate-tile:first-child{margin-left:0}

.gate-face{position:absolute;inset:0;display:grid;place-items:center;
  border:1.5px solid var(--rule);backface-visibility:hidden;
  transition:transform .5s cubic-bezier(.62,.03,.3,1);
  font-family:var(--font-text);font-size:18px;font-weight:700;color:var(--ink)}
.gate-front{background:var(--theme)}
.gate-back{background:var(--gold);transform:rotateY(180deg)}

/* 타일 구석의 작은 숫자 — 진짜 스크래블 타일에 있는 점수입니다.
   기능은 없고, 이게 게임 타일이라는 것만 말해줍니다. */
.gate-pip{position:absolute;right:4px;bottom:2px;font-family:var(--font-mono);
  font-size:8.5px;font-weight:400;color:var(--ink-soft)}

/* 마우스를 올리면 왼쪽부터 차례로 떠오릅니다. 한꺼번에 뜨면 그냥
   커진 것처럼 보이는데, 차례로 뜨면 줄지어 선 물건으로 읽힙니다. */
.gate:hover:not(:disabled) .gate-tile{transform:translateY(-5px)}
.gate:hover:not(:disabled) .gate-tile:nth-child(2){transition-delay:.04s}
.gate:hover:not(:disabled) .gate-tile:nth-child(3){transition-delay:.08s}
.gate:hover:not(:disabled) .gate-tile:nth-child(4){transition-delay:.12s}
.gate:hover:not(:disabled) .gate-tile:nth-child(5){transition-delay:.16s}
.gate:active:not(:disabled) .gate-tile{transform:translateY(0);transition-delay:0s}

/* 보내놓고 대답을 기다리는 동안 — 타일이 제자리에서 옅게 숨쉽니다.
   여기서 금색으로 뒤집지 않는 이유: 뒤집힌 금색은 "정말 시작됐다"는
   뜻입니다. 미리 뒤집으면 시작된 줄 알았다가 거절당했을 때 되돌려야
   하고, 그 순간 화면이 거짓말을 한 셈이 됩니다. */
.gate.is-waiting .gate-front{animation:gate-wait 1.4s ease-in-out infinite}
.gate.is-waiting .gate-tile:nth-child(2) .gate-front{animation-delay:.12s}
.gate.is-waiting .gate-tile:nth-child(3) .gate-front{animation-delay:.24s}
.gate.is-waiting .gate-tile:nth-child(4) .gate-front{animation-delay:.36s}
.gate.is-waiting .gate-tile:nth-child(5) .gate-front{animation-delay:.48s}
@keyframes gate-wait{50%{background:var(--theme-tint)}}

/* 누른 뒤 — 왼쪽부터 0.1초 간격으로 뒤집히고, 뒤집힌 면은 금색입니다. */
.gate.is-going{background:var(--gold-tint);box-shadow:inset 0 0 0 1.5px var(--gold-deep)}
.gate.is-going .gate-front{transform:rotateY(180deg)}
.gate.is-going .gate-back{transform:rotateY(360deg)}
.gate.is-going .gate-tile:nth-child(2) .gate-face{transition-delay:.1s}
.gate.is-going .gate-tile:nth-child(3) .gate-face{transition-delay:.2s}
.gate.is-going .gate-tile:nth-child(4) .gate-face{transition-delay:.3s}
.gate.is-going .gate-tile:nth-child(5) .gate-face{transition-delay:.4s}

/* 문이 다 열리면 대기실이 위로 떠오르며 사라집니다. */
.lobby.is-opening{animation:gate-open .5s cubic-bezier(.5,0,.75,0) forwards}
@keyframes gate-open{to{opacity:0;transform:translateY(-16px) scale(1.03)}}

/* 기다리는 쪽 — 방장이 열어주기를 기다립니다. 버튼을 보여주고
   눌러도 안 되게 막는 대신, 아예 다른 것을 보여줍니다.
   눌리지 않는 버튼은 고장 난 것처럼 보이기 때문입니다. */
.await{padding:22px 14px;text-align:center;background:var(--theme-tint);border:1.5px solid var(--rule)}
.await .hint{margin:0;justify-content:center}
.await-tiles{display:flex;justify-content:center;margin:0 0 12px}
.await-tile{width:26px;height:30px;margin-left:-1px;display:grid;place-items:center;
  background:var(--theme);border:1px solid var(--grid);
  font-family:var(--font-display);font-size:12px;font-weight:700;color:var(--ink-soft);
  animation:await-pulse 1.8s ease-in-out infinite}
.await-tile:first-child{margin-left:0}
.await-tile:nth-child(2){animation-delay:.15s}
.await-tile:nth-child(3){animation-delay:.3s}
.await-tile:nth-child(4){animation-delay:.45s}
@keyframes await-pulse{0%,60%,100%{background:var(--theme)}30%{background:var(--gold)}}

/* ── 게임 화면 (/game) ───────────────────────────────────
   아직 게임판은 없습니다. 지금은 "정말 시작됐다"는 것과 누구
   차례인지만 보여주는 껍데기입니다. 없는 것을 그려두면 되는
   것처럼 보이므로, 없는 것은 없다고 적어둡니다. */
/* 게임 화면은 대기실보다 넓습니다. 대기실은 위에서 아래로 한 단계씩
   밟는 화면이라 좁은 편이 빠르지만, 게임판은 15칸이 가로로 늘어서 있어
   좁히면 칸이 손톱만 해집니다. */
.stage{max-width:680px;margin:0 auto;background:var(--paper-2);border:1.5px solid var(--rule);
  animation:stage-in .5s cubic-bezier(.2,.7,.3,1) both}
#boardBox{margin:0 0 14px}
@keyframes stage-in{from{opacity:0;transform:translateY(18px)}}

.stage-body{padding:20px 26px 24px}

/* ── 상단 이름 바 ────────────────────────────────────────
   두 사람의 이름을 양끝에 두고 가운데를 비웁니다. 대결하는 화면은
   양쪽으로 갈라 놓아야 누가 누구인지 한눈에 들어옵니다.

   가운데 칸은 나중에 스코어와 남은 시간이 들어올 자리입니다. 지금은
   방 코드만 놓아 자리를 잡아둡니다. */
.namebar{display:flex;align-items:stretch;background:var(--gold-tint);
  border-bottom:1.5px solid var(--rule)}

.nb-side{flex:1;min-width:0;padding:14px 16px;display:flex;align-items:center;gap:11px}
/* 상대 쪽은 좌우를 뒤집어 바깥쪽에 세웁니다. 두 사람이 가운데를 사이에
   두고 마주 본 모양이 됩니다. */
.nb-side.is-foe{flex-direction:row-reverse;text-align:right}

.nb-tile{width:36px;height:42px;flex:none;display:grid;place-items:center;
  background:var(--paper-2);border:1.5px solid var(--rule);
  font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--ink)}

.nb-who{min-width:0;display:flex;flex-direction:column;gap:3px}
.nb-name{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb-role{font-family:var(--font-mono);font-size:9.5px;font-style:normal;
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-soft)}

/* 지금 둘 차례인 쪽. 이름 옆에 '차례'라고 적히고 바탕이 진해집니다.
   색만으로 알리면 색을 구분하기 어려운 사람은 알 수 없습니다. */
.nb-side.is-turn{background:var(--gold)}
.nb-side.is-turn .nb-tile{background:var(--paper-2);box-shadow:2px 2px 0 var(--gold-deep)}
.nb-side.is-turn .nb-role{color:var(--ink)}

.nb-mid{flex:none;width:92px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;
  border-left:1.5px solid var(--rule);border-right:1.5px solid var(--rule);background:var(--paper-2)}
.nb-vs{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--ink-soft)}
.nb-room{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--track-caps);color:var(--ink-faint)}

/* 좁은 화면에서는 타일을 줄이고 여백을 좁힙니다. 이름이 잘리는 것보다
   낫습니다 — 누구와 하는지가 이 바의 전부이기 때문입니다. */
@media (max-width:520px){
  .nb-side{padding:11px 10px;gap:8px}
  .nb-tile{width:28px;height:33px;font-size:14px}
  .nb-name{font-size:13px}
  .nb-mid{width:64px}
}
/* 더 좁아지면 타일을 뺍니다. 타일에 적힌 글자는 이름의 첫 글자라
   바로 옆에서 이미 읽히는 것이고, 빼면 그만큼 이름이 더 들어갑니다.
   장식과 이름 중 하나를 골라야 한다면 이름입니다. */
@media (max-width:420px){
  .nb-tile{display:none}
  .nb-side{padding:11px 12px}
}

.stage-foot{display:flex;align-items:center;gap:12px;margin-top:18px}
.stage-foot .btn-cancel{flex:1;height:40px}
#rackBox{margin:0 0 14px}

/* ── 알림 한 줄 (대기실 맨 위) ───────────────────────────
   주소창에 /game 을 직접 쳐서 들어온 것처럼, 단계와 상관없이
   알려야 할 일이 있을 때 씁니다. */
.note{display:flex;align-items:center;gap:8px;margin:0;padding:12px 26px;
  background:var(--bad-tint);border-bottom:1.5px solid var(--rule);font-size:12.5px;color:var(--ink)}
.note-icon{flex:none;width:18px;height:18px;display:grid;place-items:center;background:var(--bad);
  font-family:var(--font-display);font-size:11px;font-weight:700;color:#fff}

/* 움직임을 줄여달라고 설정한 사람에게는 뒤집기와 떠오름을 없앱니다.
   연출은 거들 뿐이라, 없어도 기능은 그대로 동작해야 합니다. */
@media (prefers-reduced-motion:reduce){
  .gate-tile,.gate-face,.lobby.is-opening,.stage,.await-tile,
  .gate.is-waiting .gate-front{animation:none;transition:none}
  .gate:hover:not(:disabled) .gate-tile{transform:none}
}

/* ── 빈 칩의 글자 고르기 ─────────────────────────────── */
.blank-pick{width:100%;max-width:380px;padding:22px;
  background:var(--paper-2);border:1.5px solid var(--rule);border-radius:16px;
  box-shadow:6px 6px 0 rgba(21,18,14,.2)}
.blank-say{margin:0 0 14px;font-size:14px;font-weight:600;text-align:center}
.blank-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:0 0 14px}
.blank-b{aspect-ratio:1;display:grid;place-items:center;
  background:var(--theme);border:1.5px solid var(--rule);border-radius:8px;cursor:pointer;
  font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--ink)}
.blank-b:hover{background:var(--gold)}
.blank-pick .btn-cancel{width:100%;height:40px;border-radius:11px}

@media (max-width:560px){
  .blank-grid{grid-template-columns:repeat(6,1fr)}
}

/* ═══════════════════════════════════════════════════════════
   게임 중 행동 줄

   화면의 나머지는 종이에 인쇄된 letterpress 입니다 — 각지고, 얇은
   선이고, 조용합니다. 그 위에서 "지금 누를 것"만 다르게 생겨야
   손이 갑니다.

   그래서 버튼만 모서리를 둥글리고 두껍게 만들었습니다. 색은 새로
   들여오지 않고 원래 쓰던 크림·하늘색·금색·주홍을 그대로 쓰되
   면적을 키웠습니다. 낯선 색을 새로 칠하면 이 줄만 다른 앱에서
   오려붙인 것처럼 보입니다.
   ═══════════════════════════════════════════════════════════ */
.acts{
  margin:0 0 14px;
  border:1.5px solid var(--rule);
  background:var(--paper-2);
}
.acts-top{
  display:flex;align-items:center;gap:9px;
  padding:10px 12px;
  border-bottom:1px solid var(--grid);
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
}
.acts-main{display:flex;align-items:center;gap:9px;padding:12px}

/* ── 신호등 ─────────────────────────────────────────────
   세 번 연속 넘어가면 게임이 끝납니다. 숫자로만 적으면 읽어야
   알지만, 불이 켜지면 곁눈으로도 보입니다. */
.lamps{
  display:flex;align-items:center;gap:6px;
  flex:1;min-width:0;
  padding:5px 10px 5px 8px;
  background:var(--paper-2);
  border:1.5px solid var(--rule);
  border-radius:999px;
}
.lamp{
  width:11px;height:11px;flex:none;border-radius:50%;
  background:transparent;
  border:1.5px solid var(--grid);
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
/* 켜지는 순서대로 초록 → 노랑 → 빨강. 마지막 불이 켜지면 끝납니다. */
.lamp.is-on.l1{background:var(--ok);border-color:var(--rule);box-shadow:0 0 0 3px rgba(31,107,74,.18)}
.lamp.is-on.l2{background:var(--gold);border-color:var(--rule);box-shadow:0 0 0 3px rgba(217,169,60,.22)}
.lamp.is-on.l3{background:var(--bad);border-color:var(--rule);box-shadow:0 0 0 3px rgba(178,58,58,.2);
  animation:lamp-last 1.1s ease-in-out infinite}
@keyframes lamp-last{50%{box-shadow:0 0 0 7px rgba(178,58,58,0)}}
.lamps-say{
  margin-left:4px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.03em;color:var(--ink-soft);
}

/* ── 버튼 ───────────────────────────────────────────────
   둥근 모서리와 두께는 여기서만 씁니다. 누르면 아래로 눌리는
   느낌이 나도록 밑에 깔린 그림자를 줄입니다 — 칩과 같은 방식이라
   화면 안에서 같은 물성으로 읽힙니다. */
.btn-soft,.btn-put{
  flex:none;
  height:40px;padding:0 16px;
  font-family:var(--font-text);font-size:13px;font-weight:600;letter-spacing:-.01em;
  border:1.5px solid var(--rule);border-radius:11px;cursor:pointer;
  transition:transform .1s ease,box-shadow .1s ease,background .15s ease;
}
.btn-soft{background:var(--paper-2);color:var(--ink);box-shadow:0 3px 0 var(--grid)}
.btn-soft:hover:not(:disabled){background:var(--theme-tint)}
.btn-soft.is-quit{color:var(--bad)}
.btn-soft.is-quit:hover:not(:disabled){background:var(--bad-tint)}

.btn-put{background:var(--theme);color:var(--ink);box-shadow:0 3px 0 var(--theme-deep);padding:0 22px}
.btn-put:hover:not(:disabled){background:var(--theme-deep)}
/* 확정 단계에서는 금색으로 바뀝니다. 되돌릴 수 없는 버튼은
   방금 전과 달라 보여야 손이 한 번 멈춥니다.

   ⚠️ hover 규칙도 함께 적어야 합니다. 위의 :hover:not() 은 선택자가
   셋이라 .btn-put.is-sure 보다 세서, 마우스를 올리는 순간 색이
   원래대로 돌아가 버립니다. */
.btn-put.is-sure,
.btn-put.is-sure:hover:not(:disabled){background:var(--gold);box-shadow:0 3px 0 var(--gold-deep)}
.btn-put.is-sure:hover:not(:disabled){background:var(--gold-deep)}
.btn-put.is-quit,
.btn-put.is-quit:hover:not(:disabled){background:var(--bad);color:#fff;box-shadow:0 3px 0 #7E2828}
.btn-put.is-quit:hover:not(:disabled){background:#9C3131}

.btn-soft:active:not(:disabled),.btn-put:active:not(:disabled){
  transform:translateY(3px);box-shadow:0 0 0 var(--grid);
}
.btn-soft:disabled,.btn-put:disabled{
  cursor:not-allowed;background:transparent;color:var(--ink-faint);
  border-color:var(--grid);box-shadow:none;
}

.move-say{flex:1;min-width:0;font-size:13px;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.move-say.is-bad{color:var(--bad)}
.move-say.is-ok{color:var(--ok)}
.move-say.is-ask{color:var(--ink);font-weight:600}

/* ── 점수판 (이름 바 가운데) ───────────────────────────── */
.nb-score{display:flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums}
.nb-score b{font-family:var(--font-display);font-size:19px;font-weight:700}
.nb-score i{font-style:normal;font-size:12px;color:var(--ink-faint)}

/* ── 물어보는 창 (나가기 확인) ─────────────────────────── */
.ask{
  width:100%;max-width:360px;padding:24px;
  background:var(--paper-2);border:1.5px solid var(--rule);border-radius:16px;
  box-shadow:6px 6px 0 rgba(21,18,14,.2);text-align:center;
}
.ask-head{margin:0 0 8px;font-size:17px;font-weight:700}
.ask-say{margin:0 0 20px;font-size:13.5px;line-height:1.7;color:var(--ink-soft)}
.ask-row{display:flex;gap:9px}
.ask-row>*{flex:1}

/* ── 끝났을 때 ─────────────────────────────────────────
   판 위에 덮지 않고 아래에 붙입니다. 마지막 판을 보면서 결과를
   읽을 수 있어야 "어쩌다 이렇게 됐는지"가 남습니다. */
.over{
  margin:0 0 14px;padding:20px;text-align:center;
  background:var(--paper);border:1.5px solid var(--rule);border-radius:16px;
  animation:over-in .4s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes over-in{from{opacity:0;transform:translateY(10px)}}
.over.is-win{background:var(--gold-tint)}
.over.is-lose{background:var(--paper)}
.over-tag{margin:0 0 4px;font-size:22px;font-weight:800;letter-spacing:-.02em}
.over.is-win .over-tag{color:var(--gold-deep)}
.over-why{margin:0 0 16px;font-size:13px;color:var(--ink-soft)}
.over-score{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 18px}
.over-score span{display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:var(--ink-soft)}
.over-score b{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.over-score i{font-style:normal;font-size:16px;color:var(--ink-faint)}
.over-wait{margin:0;font-size:12.5px;color:var(--ink-soft)}

@media (max-width:560px){
  .acts-top{flex-wrap:wrap}
  .lamps{flex:1 1 100%;order:-1}
  .acts-top .btn-soft{flex:1}
  .acts-main{flex-wrap:wrap}
  .move-say{flex:1 1 100%;order:-1;white-space:normal}
  .acts-main .btn-soft,.acts-main .btn-put{flex:1;padding:0 10px}
}
@media (prefers-reduced-motion:reduce){
  .lamp.is-on.l3,.over{animation:none}
  .btn-soft,.btn-put{transition:none}
}

/* ── 턴이 넘어간 순간을 눈에 띄게 ─────────────────────────
   소리를 꺼둔 사람도 있고, 다른 곳을 보고 있었을 수도 있습니다.
   색이 바뀌는 것만으로는 눈이 안 갑니다 — 색은 바뀐 뒤에야
   알아차리기 때문에, 움직임이 한 번 있어야 합니다. */

/* 행동 줄 전체가 한 번 번쩍합니다. */
.acts.is-passed{ animation:acts-flash 1.1s ease-out }
@keyframes acts-flash{
  0%   { background:var(--gold-tint); box-shadow:0 0 0 0 rgba(217,169,60,.55) }
  60%  { background:var(--gold-tint) }
  100% { background:var(--paper-2);   box-shadow:0 0 0 16px rgba(217,169,60,0) }
}
/* 방금 켜진 불이 크게 튀어오릅니다. */
.acts.is-passed .lamp.is-on:last-of-type{ animation:lamp-pop .55s cubic-bezier(.2,1.5,.4,1) }
@keyframes lamp-pop{ 40%{ transform:scale(1.9) } }

/* 차례가 넘어온 쪽 이름이 한 번 뜁니다. */
.nb-side.is-moved{ animation:nb-pop .6s cubic-bezier(.2,1.3,.4,1) }
@keyframes nb-pop{ 35%{ transform:translateY(-5px) } }

/* ── 행동 줄 버튼을 키웁니다 ─────────────────────────────
   차례 넘기기는 게임 중에 제일 자주 누르게 되는 버튼인데 제일
   작았습니다. 자주 누르는 것이 커야 합니다. */
.acts-top{padding:12px}
.acts-top .btn-soft{
  height:48px; padding:0 20px;
  font-size:14.5px; font-weight:700;
  box-shadow:0 4px 0 var(--grid);
}
.acts-top .btn-soft.is-quit{box-shadow:0 4px 0 #D9BCBC}
.acts-top .btn-soft:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 var(--grid)}
/* 잠긴 버튼은 그림자를 뺍니다. 위의 .acts-top .btn-soft 는 선택자가
   둘이라 .btn-soft:disabled 와 힘이 같은데 뒤에 있어서 이깁니다.
   그대로 두면 못 누르는 버튼이 눌릴 것처럼 떠 있습니다. */
.acts-top .btn-soft:disabled{box-shadow:none}

/* 신호등도 함께 키웁니다. 버튼만 커지면 옆의 불이 더 작아 보입니다. */
.lamps{padding:8px 14px 8px 11px;gap:8px}
.lamp{width:16px;height:16px;border-width:2px}
.lamps-say{font-size:12px;font-weight:600;color:var(--ink)}

@media (max-width:560px){
  .acts-top .btn-soft{height:46px;padding:0 12px;font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .acts.is-passed,.acts.is-passed .lamp.is-on:last-of-type,.nb-side.is-moved{animation:none}
}