/* 요트 다이스 — 말랑 젤리
   도톰하게 둥근 모서리에 아래로 깔리는 단색 그림자(0 Npx 0)가 이 화면의 전부다.
   흐린 그림자·유리·그러데이션은 쓰지 않는다. 테마는 라이트 · 다크 · 터미널 셋. */

:root {
  --paper: #fff4e8;
  --paper-2: #ffe9d6;
  --card: #fffdf8;
  --ink: #5b4a52;
  --ink-soft: #7d6a74;
  --muted: #b7a3ab;

  --drop: #f0dfd2;            /* 카드 아래 단색 그림자 */
  --line: #f4e6da;

  --pink: #ff8fa3; --pink-2: #e8628a; --pink-soft: #ffe3ec; --pink-edge: #ffc9d8;
  --cream: #ffe9d6; --cream-edge: #f3d3b6;
  --mint: #e6f6ef; --mint-edge: #c8e8da; --mint-ink: #3ba97c;
  --sun: #fff6da; --sun-edge: #f4dfa4;
  --orange: #f28f4b;

  --p0: #ff8fa3; --p1: #6fb6d8; --p2: #f2b705; --p3: #7fc8a0; --p4: #b49ae0; --p5: #f0936b;

  /* 작은 주사위 그림(장식·자리 표시)에 쓰는 색 */
  --die-face: #fffdf8; --die-edge: rgba(214, 190, 206, .5); --pip: #584766;

  --radius: 20px;
  --sans: 'Jua', 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  --num: 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  --die: 62px;
}

:root[data-theme="dark"] {
  --paper: #2b2331;
  --paper-2: #362c3d;
  --card: #3a2f42;
  --ink: #f7ecf1;
  --ink-soft: #d9c7d2;
  --muted: #a892a4;

  --drop: #221b28;
  --line: #473a50;

  --pink: #ff8fa3; --pink-2: #ff8fa3; --pink-soft: #4a3244; --pink-edge: #5e3f55;
  --cream: #46374a; --cream-edge: #372c3c;
  --mint: #2f4a42; --mint-edge: #263b35; --mint-ink: #7fd8ab;
  --sun: #4a3f2e; --sun-edge: #3a3123;
  --orange: #ffb27a;

  --die-face: #f4e9f0; --die-edge: rgba(90, 70, 88, .6); --pip: #4a3c58;
}

/* 터미널 — 글자만으로 그리는 화면 */
:root[data-theme="term"] {
  --paper: #0b0e0c;
  --paper-2: #121712;
  --card: #0f1410;
  --ink: #b8f0b8;
  --ink-soft: #7ed07e;
  --muted: #3f8a4a;

  --drop: transparent;
  --line: #2a5c33;

  --pink: #d8ff8a; --pink-2: #b8f06a; --pink-soft: #16221a; --pink-edge: #2a5c33;
  --cream: #16221a; --cream-edge: #2a5c33;
  --mint: #16221a; --mint-edge: #2a5c33; --mint-ink: #8ef58e;
  --sun: #1c2a1c; --sun-edge: #2a5c33;
  --orange: #d8ff8a;

  --p0: #8ef58e; --p1: #7ed0c0; --p2: #d8ff8a; --p3: #6fd07e; --p4: #9ee0a0; --p5: #c8ffb8;

  --radius: 2px;
  --sans: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --num: 'IBM Plex Mono', ui-monospace, monospace;

  --die-face: #16221a; --die-edge: #2a5c33; --pip: #8ef58e;
}

/* 옛날 보드게임 판을 고르면 화면도 그 결로 — 실크스크린 인쇄물 */
:root[data-skin="retro"] {
  --paper: #f2e4c4;
  --paper-2: #e6d5ae;
  --card: #fbf3e0;
  --ink: #241d14;
  --ink-soft: #4f4128;
  --muted: #8d7a54;

  --drop: #d8c49a;
  --line: #e0cda4;

  --pink: #c0392b; --pink-2: #96291e; --pink-soft: #f5e0c8; --pink-edge: #e2c79e;
  --cream: #e8a33d; --cream-edge: #c07f24;
  --mint: #dfeee2; --mint-edge: #b9d8bf; --mint-ink: #0f7b6c;
  --sun: #ffe9a8; --sun-edge: #e0c163;
  --orange: #c0392b;

  --p0: #c0392b; --p1: #2f6f8f; --p2: #e8a33d; --p3: #0f7b6c; --p4: #7a4a8c; --p5: #6b8e23;
  --die-face: #fdf6e3; --die-edge: rgba(150, 125, 80, .5); --pip: #241f1a;
  --radius: 6px;
  --sans: 'Jua', 'Pretendard Variable', Pretendard, system-ui, sans-serif;
}
:root[data-theme="dark"][data-skin="retro"] {
  --paper: #241c12;
  --paper-2: #2f2418;
  --card: #33291b;
  --ink: #f2e4c4;
  --ink-soft: #d8c49a;
  --muted: #9c855c;

  --drop: #1a140c;
  --line: #463824;

  --pink: #e06a52; --pink-2: #e06a52; --pink-soft: #3d2b1c; --pink-edge: #4d3823;
  --cream: #4a3a22; --cream-edge: #3a2d1a;
  --mint: #26382c; --mint-edge: #1d2b21; --mint-ink: #7fc8a0;
  --sun: #4a3a1e; --sun-edge: #3a2d17;
  --orange: #e8a33d;
  --die-face: #e8dcc0; --die-edge: rgba(60, 46, 26, .6); --pip: #241f1a;
}
/* 인쇄물답게 모서리는 조금만, 테두리는 또렷하게 */
:root[data-skin="retro"] .btn,
:root[data-skin="retro"] .cell,
:root[data-skin="retro"] .seat,
:root[data-skin="retro"] .code-card,
:root[data-skin="retro"] .sheet-wrap,
:root[data-skin="retro"] .choice,
:root[data-skin="retro"] .how li,
:root[data-skin="retro"] .facts li,
:root[data-skin="retro"] .turn-pill,
:root[data-skin="retro"] .over-card,
:root[data-skin="retro"] .rules-card,
:root[data-skin="retro"] .view-pop,
:root[data-skin="retro"] .rank li,
:root[data-skin="retro"] table.sheet thead th { border-radius: 6px; }
:root[data-skin="retro"] .logo { text-shadow: 3px 3px 0 var(--drop); }
:root[data-skin="retro"] .sheet-head { background: var(--cream); }
:root[data-skin="retro"] .board { background: var(--paper-2); box-shadow: inset 0 -7px 0 var(--drop); }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  letter-spacing: -.01em;
}

/* 종이결 — 터미널에서는 주사라인으로 */
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
:root[data-theme="term"] .grain {
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .34) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 140px rgba(0, 255, 90, .07);
}
:root[data-theme="term"] body { text-shadow: 0 0 6px rgba(126, 240, 126, .35); }

[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--pink-2); }

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

.screen { display: none; position: relative; z-index: 2; min-height: 100dvh; }
.screen.on { display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 14px 8px;
}
.tools { display: flex; gap: 4px; margin-left: auto; }
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px;
  color: var(--ink-soft); transition: background .16s, color .16s, transform .12s;
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { background: var(--paper-2); color: var(--ink); }
.icon-btn:active { transform: scale(.92); }
.icon-btn.sm { width: 32px; height: 32px; border-radius: 11px; }
/* 테마 단추 밑 말풍선 — 처음 온 사람한테만. 통통 튀며 가리킨다 */
.icon-btn[data-theme-btn] { position: relative; }
.nudge {
  position: absolute; top: calc(100% + 10px); right: -6px; z-index: 40;
  white-space: nowrap; pointer-events: none;
  padding: 7px 12px; border-radius: 12px;
  background: var(--pink); color: #fff; font-family: var(--sans); font-size: 13.5px; line-height: 1.2;
  box-shadow: 0 3px 0 var(--pink-2);
  animation: nudgeIn .45s .6s cubic-bezier(.3, 1.6, .5, 1) both, nudgeBob 1.8s 1.05s ease-in-out infinite;
}
.nudge::before {
  content: ''; position: absolute; top: -6px; right: 20px;
  border: 7px solid transparent; border-top: 0; border-bottom-color: var(--pink);
}
@keyframes nudgeIn { from { opacity: 0; transform: translateY(-6px) scale(.7); } }
@keyframes nudgeBob { 50% { transform: translateY(4px); } }
:root[data-theme="term"] .nudge { display: none; }
@media (prefers-reduced-motion: reduce) { .nudge { animation: none; } }
.icon-btn.sm svg { width: 18px; height: 18px; }
.brand-mini {
  font-size: 15px; text-decoration: none; color: var(--muted);
  padding: 6px 14px; border-radius: 999px; background: var(--card); box-shadow: 0 3px 0 var(--drop);
}
.brand-mini:hover { color: var(--pink-2); }

/* ───────────────── 단추 ───────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border-radius: 18px; font-size: 16px;
  background: var(--card); color: var(--ink); box-shadow: 0 4px 0 var(--drop);
  transition: transform .1s, box-shadow .1s;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--drop); }
.btn.primary { background: var(--pink); color: #fff; box-shadow: 0 5px 0 var(--pink-2); }
.btn.primary:active { box-shadow: 0 1px 0 var(--pink-2); }
.btn.ghost { background: transparent; box-shadow: none; color: var(--ink-soft); }
.btn.ghost:active { transform: none; }
.btn.small { padding: 8px 14px; font-size: 14px; border-radius: 14px; }
.btn.big { padding: 16px 24px; font-size: 19px; border-radius: 22px; width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 var(--drop); }
.link-btn { color: var(--muted); font-size: 15px; padding: 6px 2px; }
.link-btn:hover { color: var(--pink-2); }
:root[data-theme="term"] .btn { box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="term"] .btn.primary { background: transparent; color: var(--pink); box-shadow: inset 0 0 0 1px var(--pink); }

/* ───────────────── 주사위판 ───────────────── */

.board {
  /* 가로가 넓으면 판이 세로로도 커져서 굴리기 단추가 화면 밖으로 밀린다.
     16:9 는 지키되 화면 높이에 맞춰 폭을 묶고 가운데로 모은다. */
  position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 148px;
  max-width: calc((100dvh - 300px) * 16 / 9); margin-inline: auto;
  border-radius: 28px; perspective: 900px; overflow: visible;
  background: var(--pink-soft);
  box-shadow: inset 0 -7px 0 var(--pink-edge);
}
.board::after {
  content: ''; position: absolute; inset: 12px; border-radius: 18px;
  border: 2px dashed rgba(255, 255, 255, .5); pointer-events: none;
}
/* 3D 판을 쓰면 판 그림은 three.js 가 그린다 — CSS 판은 자리만 잡아 준다 */
.board.d3 { background: none; box-shadow: none; }
.board.d3::after { display: none; }
.dice-canvas {
  /* 캔버스는 칸보다 크게 잡아 두고(둘레 여백) 판은 가운데에 그린다. 누름은 .board 에서 받는다 */
  position: absolute; left: -16%; top: -16%; width: 132%; height: 132%;
  display: block; pointer-events: none;
}
/* 남긴 주사위 위에 뜨는 '고정' 딱지 — 캔버스와 같은 자리에 겹쳐 둔다 */
.dice-tags { position: absolute; left: -16%; top: -16%; width: 132%; height: 132%; pointer-events: none; }
.dice-tag {
  position: absolute; transform: translate(-50%, -100%);
  background: var(--pink); color: #fff; font-size: 12px; line-height: 1;
  padding: 4px 9px 5px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 3px 0 var(--pink-2); animation: tag-in .18s ease both;
}
.dice-tag::after {
  content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--pink);
}
@keyframes tag-in { from { opacity: 0; transform: translate(-50%, -80%) scale(.8); } }
:root[data-skin="retro"] .dice-tag { border-radius: 4px; }

.board.rolled-flash { animation: flash .5s ease; }
/* 난장판 — 판을 엎을 때 판이 통째로 들썩인다 */
.board.quake { animation: quake .6s cubic-bezier(.36, .07, .19, .97); }
@keyframes quake {
  10%, 90% { transform: translate(-2px, 1px) rotate(-.4deg); }
  20%, 80% { transform: translate(4px, -2px) rotate(.7deg); }
  30%, 50%, 70% { transform: translate(-6px, 2px) rotate(-.9deg); }
  40%, 60% { transform: translate(6px, -1px) rotate(.9deg); }
}
@keyframes flash { 0% { box-shadow: inset 0 0 0 4px var(--pink); } }

/* 판 엎기 — 손이 쓱 들어와 주사위를 다 흐트러뜨린다. 지나가는 동안은 아무것도 못 누른다 */
/* 손이 흔드는 박자에 맞춰 판도 네 번 들썩인다 */
.board.swept { animation: swept .3s ease-in-out .3s 4 both; }
@keyframes swept {
  0%   { transform: none; }
  24%  { transform: translateX(-9px) rotate(-1.1deg); }
  48%  { transform: translateX(6px) rotate(.7deg); }
  72%  { transform: translateX(-3px) rotate(-.3deg); }
  100% { transform: none; }
}
/* 손은 판 둘레까지만 보인다 — 캔버스가 이미 쓰는 여백 안이라 화면이 밀리지 않는다 */
.sweep-clip { position: absolute; inset: -12% -16%; overflow: hidden; pointer-events: none; z-index: 8; }
.flip-hand {
  /* 그림은 팔뚝을 길게 늘려 둔 것(손바닥은 그대로) — 폭·기준점·이동 거리를 그 비율로 맞춘다 */
  position: absolute; left: 0; top: 4%; width: 90.2%; height: auto;
  transform-origin: 56.6% 55%; will-change: transform;
  filter: drop-shadow(0 12px 10px rgba(80, 50, 60, .22));
}
.flip-hand.go { animation: sweep 1.9s ease-in-out both; }
/* 옆에서 손이 들어와 판 위에서 흔들흔들 네 번 왔다 갔다 하고 다시 빠진다.
   투명도는 들어올 때와 나갈 때만 바뀌니 가운데 칸에도 1 을 박아 둔다 */
@keyframes sweep {
  0%   { opacity: 0; transform: translate(88.7%, 10%) rotate(12deg); }
  8%   { opacity: 1; }
  16%  { opacity: 1; transform: translate(21.9%, 4%) rotate(0deg); }
  24%  { transform: translate(3.9%, 7%) rotate(-10deg); }
  32%  { transform: translate(28.3%, 1%) rotate(7deg); }
  40%  { transform: translate(3.9%, 7%) rotate(-10deg); }
  48%  { transform: translate(28.3%, 1%) rotate(7deg); }
  56%  { transform: translate(3.9%, 7%) rotate(-10deg); }
  64%  { transform: translate(28.3%, 1%) rotate(7deg); }
  72%  { transform: translate(3.9%, 7%) rotate(-10deg); }
  80%  { transform: translate(23.1%, 4%) rotate(0deg); }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translate(90.0%, 12%) rotate(12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .flip-hand.go { animation-duration: 1s; }
}

/* CSS 주사위 (WebGL 이 없을 때) */
.die {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%);
  width: var(--die); height: var(--die);
  transform-style: preserve-3d; transition: transform .2s ease;
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
}
.die.pick { cursor: pointer; }
.die.pick:hover { transform: translate(-50%, -50%) translateY(-5px) rotate(var(--tilt, 0deg)); }
.cube {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .72s cubic-bezier(.2, .8, .26, 1);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.face {
  position: absolute; inset: 0; border-radius: 26%;
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 15%;
  background: var(--die-face); box-shadow: inset 0 -5px 0 var(--die-edge);
}
.face i { width: 56%; aspect-ratio: 1; border-radius: 50%; background: var(--pip); place-self: center; }
.f1 { transform: translateZ(calc(var(--die) / 2)); }
.f6 { transform: rotateY(180deg) translateZ(calc(var(--die) / 2)); }
.f3 { transform: rotateY(90deg) translateZ(calc(var(--die) / 2)); }
.f4 { transform: rotateY(-90deg) translateZ(calc(var(--die) / 2)); }
.f5 { transform: rotateX(90deg) translateZ(calc(var(--die) / 2)); }
.f2 { transform: rotateX(-90deg) translateZ(calc(var(--die) / 2)); }
.die.held { transform: translate(-50%, -50%) rotate(var(--tilt, 0deg)) scale(.88); }
.die.held .face { box-shadow: inset 0 0 0 3px var(--pink), inset 0 -5px 0 var(--die-edge); }
.die.held::after {
  content: '콕'; position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%);
  font-size: 12px; color: var(--pink-2); white-space: nowrap;
}
.die.throwing { animation: throwin .78s cubic-bezier(.22, .78, .3, 1); }
@keyframes throwin {
  0% { transform: translate(-50%, -50%) translate(var(--fx, 120px), var(--fy, -90px)) rotate(var(--spin0, 60deg)) scale(1.12); }
  55% { transform: translate(-50%, -50%) translate(0, -12px) rotate(calc(var(--tilt, 0deg) + 12deg)) scale(1.04); }
  80% { transform: translate(-50%, -50%) translate(0, 4px) rotate(var(--tilt, 0deg)) scale(.97); }
  100% { transform: translate(-50%, -50%) rotate(var(--tilt, 0deg)); }
}
.die.blank .face { background: rgba(255, 255, 255, .35); box-shadow: none; }
.die.blank .face i { opacity: 0; }

/* ───────────────── 타이틀 ───────────────── */

#title .hero {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 36px; align-items: center; padding: 10px clamp(16px, 5vw, 56px) 20px;
  max-width: 1100px; margin: 0 auto; width: 100%;
}
.hero-tray { position: relative; }
.hero-tray .board { --die: 46px; }
.live {
  position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px; font-size: 14px;
  background: var(--card); color: var(--ink-soft); padding: 6px 16px; border-radius: 999px;
  box-shadow: 0 4px 0 var(--drop); white-space: nowrap;
}
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .25; } }

.eyebrow {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: 15px; color: var(--muted);
}
.eb-dot { width: 10px; height: 10px; border-radius: 4px; background: var(--pink); }
.logo {
  font-size: clamp(44px, 8vw, 72px); line-height: 1.05; margin: 0 0 12px;
  color: var(--pink-2); text-shadow: 0 4px 0 var(--pink-edge);
}
:root[data-theme="term"] .logo { text-shadow: none; }
.tagline { margin: 0 0 18px; color: var(--ink-soft); font-size: clamp(16px, 2vw, 19px); line-height: 1.65; }

.facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; }
.facts li {
  font-size: 14px; color: var(--ink-soft); background: var(--card);
  border-radius: 999px; padding: 7px 14px; box-shadow: 0 3px 0 var(--drop);
}
.facts b { color: var(--pink-2); font-weight: 400; }

.cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.begin {
  display: inline-flex; align-items: center; gap: 12px; padding: 15px 20px 15px 16px;
  border-radius: 24px; font-size: 20px; background: var(--pink); color: #fff;
  box-shadow: 0 6px 0 var(--pink-2); transition: transform .1s, box-shadow .1s;
}
.begin:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--pink-2); }
.begin-die {
  width: 32px; height: 32px; border-radius: 11px; flex: none; background: var(--die-face);
  box-shadow: inset 0 -4px 0 var(--die-edge); position: relative;
  animation: tumble 3.4s ease-in-out infinite;
}
.begin-die::before, .begin-die::after {
  content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--pip);
}
.begin-die::before { top: 7px; left: 7px; }
.begin-die::after { bottom: 7px; right: 7px; }
@keyframes tumble { 0%, 60% { transform: rotate(0); } 72% { transform: rotate(-16deg) scale(1.08); } 84% { transform: rotate(12deg); } 100% { transform: rotate(0); } }
.begin-go { display: grid; place-items: center; width: 26px; height: 26px; }
.begin-arrow { width: 22px; height: 22px; }
.rules-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 18px; border-radius: 20px;
  color: var(--ink-soft); background: var(--card); box-shadow: 0 4px 0 var(--drop); font-size: 16px;
}
.rules-btn svg { width: 19px; height: 19px; }
.rules-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--drop); }

.setup { animation: rise .3s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.name-field { display: block; margin: 12px 0 14px; }
.name-field span { display: block; font-size: 14px; color: var(--muted); margin-bottom: 5px; }
.name-field input, .join-row input, .chat-in input {
  width: 100%; padding: 13px 16px; border-radius: 16px; background: var(--card);
  border: 0; outline: none; box-shadow: inset 0 0 0 2px var(--line);
  transition: box-shadow .15s;
}
.name-field input:focus, .join-row input:focus, .chat-in input:focus { box-shadow: inset 0 0 0 2px var(--pink); }
/* 열린 방 목록 — 코드를 몰라도 눌러서 들어간다 */
.rooms { margin-bottom: 12px; }
.rooms-head { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 7px; font-size: 15px; }
.rooms-head b { font-weight: 400; }
.rooms-n { font-size: 13px; color: var(--muted); }
.rooms-head .link-btn { margin-left: auto; font-size: 13.5px; }
.rooms-list { display: flex; flex-direction: column; gap: 7px; max-height: 188px; overflow-y: auto; }
.room-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px;
  background: var(--card); box-shadow: 0 3px 0 var(--drop); text-align: left; width: 100%;
  transition: transform .1s, box-shadow .1s;
}
.room-row:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--drop); }
.room-row.off { opacity: .55; cursor: default; }
.room-row.off:active { transform: none; box-shadow: 0 3px 0 var(--drop); }
.room-row .rc { font-family: var(--num); font-weight: 800; letter-spacing: .12em; color: var(--pink-2); }
.room-row .rn { font-size: 13.5px; color: var(--ink-soft); }
.room-row .rn { min-width: 0; }
.room-row .rt { margin-left: auto; font-size: 12.5px; color: var(--muted); text-align: right; }
.room-row .rw { font-size: 12.5px; color: var(--muted); }
.room-row .rt.priv { color: var(--ink-soft); }
.rooms-none { font-size: 13.5px; color: var(--muted); text-align: center; padding: 12px 0; }

.card-choice { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.choice {
  background: var(--card); border-radius: var(--radius); padding: 16px;
  display: flex; flex-direction: column; gap: 11px; box-shadow: 0 4px 0 var(--drop);
}
.choice-head { display: flex; align-items: center; gap: 10px; }
.choice-ico { font-size: 24px; width: 36px; height: 36px; display: grid; place-items: center; }
.choice-ico img { border-radius: 10px; }
.choice-head b { display: block; font-size: 17px; font-weight: 400; }
.choice-head small { display: block; color: var(--muted); font-size: 13.5px; }
.join-row { display: flex; gap: 8px; }
.join-row input { text-transform: uppercase; letter-spacing: .2em; text-align: center; }
.join-row .btn { flex: none; }

.seg { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--paper-2); }
.seg button {
  flex: 1; padding: 9px 6px; border-radius: 12px; font-size: 14.5px;
  color: var(--muted); transition: background .14s, color .14s; white-space: nowrap;
}
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 3px 0 var(--drop); }
.seg.locked { opacity: .55; pointer-events: none; }

.deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
/* 떠다니는 주사위는 늘 글자 뒤로 — 글이 가려지지 않게 */
#title > .topbar, #title > .hero, #title > .foot { position: relative; z-index: 1; }
.d-die {
  position: absolute; left: var(--x); top: var(--y); opacity: .5;
  transform: scale(var(--s)) rotate(var(--r, 0deg));
  animation: float 15s ease-in-out infinite; animation-delay: var(--d);
}
:root[data-theme="dark"] .d-die { opacity: .16; }
:root[data-theme="term"] .d-die { opacity: .1; }
@keyframes float {
  33% { transform: scale(var(--s)) rotate(calc(var(--r, 0deg) + 9deg)) translateY(-16px); }
  66% { transform: scale(var(--s)) rotate(calc(var(--r, 0deg) - 6deg)) translateY(8px); }
}

.foot { padding: 18px 20px 40px; text-align: center; }
/* 만든 사람 — 오른쪽 아래 구석에 아주 작고 흐리게. 채팅 단추 아래 틈에 앉는다 */
.sig {
  position: fixed; right: 10px; bottom: calc(2px + env(safe-area-inset-bottom)); z-index: 1;
  font-size: 9px; letter-spacing: .06em; color: var(--muted); opacity: .32;
  pointer-events: none; user-select: none;
}
.legal { font-size: 12px; line-height: 1.85; color: var(--muted); }
.legal a { color: var(--muted); }

/* ───────────────── 방 만들기 화면 ───────────────── */

.enter-wrap {
  flex: 1; width: 100%; max-width: 1020px; margin: 0 auto;
  padding: 4px clamp(16px, 3vw, 26px) 34px;
  display: grid; grid-template-columns: minmax(300px, 1fr) minmax(280px, .9fr);
  gap: clamp(18px, 3vw, 30px); align-items: start;
}
.enter-left { display: flex; flex-direction: column; gap: 12px; }
.enter-right { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 10px; }
.enter-h { font-size: 26px; margin: 2px 0 2px; color: var(--pink-2); }
.enter-tip { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.enter-left .rooms-list { max-height: none; }
.enter-right .rooms-list { max-height: 60dvh; }

/* ───────────────── 대기방 ───────────────── */

.lobby-wrap {
  flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 8px clamp(16px, 3vw, 26px) 34px;
  display: grid; grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.05fr); gap: clamp(18px, 3vw, 32px);
  align-items: start;
}
.lobby-left { display: flex; flex-direction: column; gap: 14px; }
.lobby-right { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 10px; }
.code-card { background: var(--card); border-radius: var(--radius); padding: 18px; text-align: center; box-shadow: 0 4px 0 var(--drop); }
.code-card .eyebrow { justify-content: center; margin-bottom: 2px; }
.code { font-size: 46px; letter-spacing: .2em; margin: 2px 0 10px; text-indent: .2em; color: var(--pink-2); }
.code-acts { display: flex; align-items: center; justify-content: center; gap: 10px; }
.code-cnt { font-family: var(--num); font-size: 13px; color: var(--muted); font-weight: 700; }

.seats { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; }
.seat {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 18px;
  background: var(--card); box-shadow: 0 3px 0 var(--drop); animation: rise .28s ease both;
  border-left: 5px solid var(--pc, var(--line));
}
.seat.empty {
  justify-content: center; color: var(--muted); font-size: 14.5px; background: transparent;
  box-shadow: inset 0 0 0 2px var(--line); border-left-color: transparent;
}
.seat.empty button { color: var(--pink-2); font-size: 14.5px; padding: 4px 6px; }
.seat.me { background: var(--sun); box-shadow: 0 3px 0 var(--sun-edge); }
.seat .who { min-width: 0; flex: 1; }
.seat .nm { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .sub { font-size: 12.5px; color: var(--muted); }
.mini-die {
  width: 34px; height: 34px; border-radius: 12px; flex: none; background: var(--die-face);
  box-shadow: inset 0 -4px 0 var(--die-edge); display: grid; place-items: center;
}
.mini-die svg { display: block; }
.mini-die.bot { background: var(--cream); box-shadow: inset 0 -4px 0 var(--cream-edge); font-size: 17px; }
.seat .kick { margin-left: auto; color: var(--muted); }
.seat .kick svg { width: 16px; height: 16px; }
.seat-hint { margin: -2px 2px 0; font-size: 14px; color: var(--muted); text-align: center; }

.opts { display: flex; flex-direction: column; gap: 10px; }
.opt { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.opt > span { font-size: 15px; color: var(--ink-soft); flex: none; }
.opt .seg { flex: 1; max-width: 340px; }
.wait-host { display: none; text-align: center; color: var(--muted); font-size: 14.5px; margin: 0; }
.wait-host.on { display: block; }

.practice { margin: 0; font-size: 14px; color: var(--muted); text-align: center; }
.practice b { color: var(--pink-2); background: var(--pink-soft); border-radius: 999px; padding: 2px 10px; font-size: 12.5px; margin-right: 6px; font-weight: 400; }
.how { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.how li {
  display: flex; align-items: baseline; gap: 10px; font-size: 15px; color: var(--ink-soft);
  background: var(--card); border-radius: 16px; padding: 10px 14px; box-shadow: 0 3px 0 var(--drop);
}
.how i {
  font-style: normal; flex: none; width: 22px; height: 22px; border-radius: 8px; font-size: 13px;
  display: grid; place-items: center; background: var(--pink); color: #fff;
}
.how em { font-style: normal; color: var(--muted); font-size: 13.5px; }
.how-more { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); text-align: center; }
.how-more b { color: var(--mint-ink); font-weight: 400; }
.how-more .link-btn { font-size: 13.5px; text-decoration: underline; }

/* ───────────────── 판 ───────────────── */

#game .table {
  flex: 1; display: grid; gap: clamp(14px, 2vw, 26px); width: 100%; max-width: 1560px; margin: 0 auto;
  padding: 4px clamp(8px, 1.2vw, 16px) calc(14px + env(safe-area-inset-bottom));
  grid-template-columns: minmax(260px, max-content) minmax(360px, 1fr);
  align-items: start;
}
.turn-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  background: var(--card); font-size: 15px; box-shadow: 0 3px 0 var(--drop);
  max-width: 62vw; overflow: hidden; white-space: nowrap;
}
.turn-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.turn-pill.mine { background: var(--sun); box-shadow: 0 3px 0 var(--sun-edge); }
.turn-pill.mine .dot { background: var(--orange); }
.turn-pill .round { color: var(--muted); font-size: 13px; font-family: var(--num); }
.timebar { height: 4px; }
.timebar i { display: block; height: 100%; width: 0; border-radius: 0 4px 4px 0; background: var(--pink); transition: width .12s linear; }

/* 차례 시계 — 주사위판 바로 위. 동그란 판이 조금씩 줄어들고, 바늘이 줄어드는 끝을 따라간다.
   넉넉할 땐 민트, 절반 밑이면 주황, 10초 밑이면 빨강에 흔들흔들.
   봇 차례엔 자리만 비워 둔다(visibility) — 판이 들썩이지 않게 */
/* 판 테두리에 살짝 걸치게 내려 앉힌다 — 판보다 위에 그려지도록 z-index */
.clock-row { display: flex; justify-content: center; margin: 4px 0 -22px; position: relative; z-index: 9; }
.clock {
  --p: 100; --c: var(--mint-ink);
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 18px 7px 8px; border-radius: 999px;
  background: var(--card); box-shadow: 0 4px 0 var(--drop);
  font-family: var(--num); font-weight: 800; font-size: 20px; color: var(--ink);
  transform-origin: 50% 60%;
}
.clock-who { font-family: var(--sans); font-weight: 400; font-size: 16.5px; color: var(--ink-soft); }
.clock.mine { background: var(--sun); box-shadow: 0 3px 0 var(--sun-edge); }
.clock-face {
  position: relative; width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--line) 0);
}
.clock-face::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--card); }
.clock.mine .clock-face::before { background: var(--sun); }
.clock-face i {
  position: absolute; left: calc(50% - 1.5px); top: 6px; width: 3px; height: 12px; border-radius: 2px;
  background: var(--c); transform-origin: 50% 12px; transform: rotate(calc(var(--p) * 3.6deg));
}
.clock-face::after {                     /* 가운데 꼭지 */
  content: ''; position: absolute; left: calc(50% - 3px); top: calc(50% - 3px);
  width: 6px; height: 6px; border-radius: 50%; background: var(--c);
}
.clock b { min-width: 2.6em; text-align: right; font-variant-numeric: tabular-nums; }
.clock.warn { --c: var(--orange); }
.clock.hurry { --c: #ef5a6f; color: #ef5a6f; animation: clockWobble 1s ease-in-out infinite; }
@keyframes clockWobble {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-7deg) scale(1.07); }
  30% { transform: rotate(6deg) scale(1.07); }
  45% { transform: rotate(-3deg); }
  60% { transform: rotate(0); }
}
:root[data-skin="retro"] .clock { border-radius: 6px; }
@media (max-width: 900px) {
  .clock-row { margin: 0 0 -16px; }
  .clock { font-size: 17px; padding: 5px 14px 5px 6px; }
  .clock-who { font-size: 15px; }
  .clock-face { width: 30px; height: 30px; }
  .clock-face i { top: 5px; height: 10px; transform-origin: 50% 10px; }
}
@media (prefers-reduced-motion: reduce) { .clock.hurry { animation: none; } }

/* 점수표 */
/* 시작 전 왼쪽 칸 — 점수판 자리에 방 설정이 앉는다 */
.set-panel {
  background: var(--card); border-radius: var(--radius); box-shadow: 0 4px 0 var(--drop);
  padding: 14px; display: flex; flex-direction: column; gap: 12px;
}
.set-panel .code-card { box-shadow: none; background: var(--pink-soft); padding: 12px; }
.set-panel .code { font-size: 38px; margin: 0 0 8px; }
.set-panel .seats { grid-template-columns: 1fr 1fr; }
.set-panel .opt > span { font-size: 14px; }

.sheet-wrap { background: var(--card); border-radius: var(--radius); box-shadow: 0 4px 0 var(--drop); overflow: hidden; }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--pink-soft); }
.logo-sm { font-size: 18px; color: var(--pink-2); }
.room-tag { margin-left: auto; font-family: var(--num); font-size: 12.5px; color: var(--muted); letter-spacing: .12em; font-weight: 700; }
.sheet-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding: 6px; }
table.sheet {
  border-collapse: separate; border-spacing: 5px; table-layout: fixed;
  /* 둘이면 좁게, 여섯이면 넓게 — 사람 수(--n)만큼만 자리를 쓴다 */
  width: 100%; max-width: calc(120px + var(--n, 6) * 78px);
}
table.sheet col.c-cat { width: 116px; }
table.sheet th, table.sheet td { padding: 0; text-align: center; }
table.sheet thead th {
  position: sticky; top: 0; z-index: 3; background: var(--card);
  padding: 6px 2px 4px; font-size: 13px; color: var(--ink-soft); vertical-align: bottom;
}
table.sheet thead th .nm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.sheet thead th .tot { display: block; font-family: var(--num); font-size: 17px; font-weight: 800; color: var(--pink-2); line-height: 1.2; }
/* 사람 얼굴 — 사람 색 말랑 방울. 지금 차례면 꿈틀꿈틀 */
table.sheet thead th .blob {
  width: 38px; height: 34px; margin: 0 auto 3px; display: grid; place-items: center;
  border-radius: 48% 52% 44% 56% / 55% 50% 50% 45%;
  background: var(--pc); color: #fff; font-size: 15px; box-shadow: 0 3px 0 color-mix(in srgb, var(--pc) 70%, #000 12%);
}
table.sheet thead th.turn .blob { animation: wob 1.8s ease-in-out infinite; outline: 3px solid var(--sun-edge); outline-offset: 2px; }
table.sheet thead th.turn .nm { color: var(--ink); }
table.sheet thead th.gone .blob { filter: grayscale(1); opacity: .5; }
@keyframes wob { 50% { border-radius: 55% 45% 52% 48% / 45% 55% 45% 55%; transform: translateY(-2px); } }
table.sheet th.cat {
  text-align: left; padding: 4px 4px; font-size: 14.5px; color: var(--ink-soft);
  position: sticky; left: 0; z-index: 2; background: var(--card); min-width: 104px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
table.sheet thead th.cat { z-index: 4; }
/* 칸 아이콘 — 위 칸은 작은 주사위 눈, 아래 칸은 글자 딱지 */
table.sheet th.cat .ci { display: flex; align-items: center; gap: 7px; overflow: hidden; }
.ico {
  flex: none; display: inline-grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  width: 22px; height: 22px; padding: 3px; border-radius: 6px; background: #fff;
  box-shadow: 0 2px 0 var(--drop), inset 0 0 0 1.5px var(--line);
}
.ico i { width: 4px; height: 4px; border-radius: 50%; background: var(--pip); place-self: center; }
.ico i.o { background: none; }
.ico.w { display: inline-grid; place-items: center; grid-template: none; padding: 0; font-family: var(--num); font-weight: 800; font-size: 11px; color: var(--pink-2); background: var(--pink-soft); box-shadow: 0 2px 0 var(--pink-edge); }
.ico.w.b { background: var(--mint); color: var(--mint-ink); box-shadow: 0 2px 0 var(--mint-edge); font-size: 10px; }
:root[data-theme="dark"] .ico { background: #efe3ea; }

/* 칸 — 적힌 점수는 사람 색 방울, 빈칸은 점, 고를 칸은 노란 점선 */
.cell {
  width: min(100%, 48px); height: 30px; margin: 0 auto; display: grid; place-items: center;
  font-family: var(--num); font-weight: 700; font-size: 14.5px; color: var(--ink);
  border-radius: 999px; transition: transform .1s, box-shadow .1s;
}
.cell.f {
  background: color-mix(in srgb, var(--pc) 24%, var(--card)); color: color-mix(in srgb, var(--pc) 62%, var(--ink));
  box-shadow: 0 2px 0 color-mix(in srgb, var(--pc) 45%, var(--card));
  border-radius: 48% 52% 50% 50% / 55% 55% 45% 45%;
}
.cell.zero { background: var(--paper); color: var(--muted); }
.cell.empty { width: 8px; height: 8px; background: var(--line); }
td.turn .cell.empty { background: var(--sun-edge); }
.cell.pick { cursor: pointer; background: var(--sun); border: 2px dashed var(--sun-edge); width: min(100%, 52px); }
.cell.pick .ghost { color: var(--orange); }
.cell.pick.nil .ghost { color: var(--muted); }
.cell.pick:hover { transform: translateY(-2px); }
.cell.pick.on { background: var(--pink); border: 0; box-shadow: 0 3px 0 var(--pink-2); animation: pulse 1s ease infinite; }
.cell.pick.on .ghost { color: #fff; }
@keyframes pulse { 50% { transform: translateY(-3px); } }
.cell.fresh { animation: pop-in .6s ease; }
@keyframes pop-in { 0% { transform: scale(.5) rotate(-10deg); } 60% { transform: scale(1.15); } }
tr.sum .cell { width: auto; padding: 0 8px; background: var(--mint); box-shadow: 0 2px 0 var(--mint-edge); font-size: 12.5px; color: var(--mint-ink); }
tr.sum .cell.got { background: var(--mint-ink); color: #fff; }
tr.sum th, tr.sum td { padding-bottom: 6px; }
tr.sum th.cat { color: var(--mint-ink); font-size: 13.5px; }
tr.total th, tr.total td { padding-top: 6px; }
tr.total th.cat { color: var(--pink-2); font-size: 16px; }
tr.total .cell { width: auto; height: 36px; border-radius: 16px; background: var(--pink-soft); box-shadow: 0 3px 0 var(--pink-edge); font-size: 18px; font-weight: 800; color: var(--pink-2); }
td.gone .cell { opacity: .45; }

/* 굴리는 자리 */
.play { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 8px; z-index: 6; }
.play .btn.roll { max-width: 520px; align-self: center; }
.hint { margin: 0; text-align: center; font-size: 15px; color: var(--muted); min-height: 21px; }
.acts { display: flex; flex-direction: column; gap: 8px; }
/* 난장판 모드 */
.opt-note { margin: -2px 2px 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.opt-note b { color: var(--ink-soft); font-weight: 400; }
.chaos-bar { display: flex; gap: 8px; justify-content: center; width: 100%; max-width: 520px; align-self: center; }
.btn.chaos { background: var(--mint); box-shadow: 0 3px 0 var(--mint-edge); color: var(--ink); }
.btn.chaos:active { box-shadow: 0 1px 0 var(--mint-edge); }
.btn.chaos.on { background: var(--pink); color: #fff; box-shadow: 0 3px 0 var(--pink-2); }
.btn.chaos i { font-style: normal; font-family: var(--num); font-weight: 800; font-size: 12px;
  background: rgba(0, 0, 0, .1); border-radius: 999px; padding: 1px 7px; margin-left: 2px; }
.face-pick { display: flex; gap: 7px; justify-content: center; }
.face-pick button {
  width: 44px; height: 44px; border-radius: 13px; background: var(--card); box-shadow: 0 3px 0 var(--drop);
  display: grid; place-items: center;
}
.face-pick button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--drop); }
.face-pick svg { display: block; }

/* 굴릴 수 있는 횟수 — 숫자 대신 불 세 개 */
.lamps { display: flex; gap: 12px; justify-content: center; align-items: center; height: 22px; }
.lamps i {
  width: 15px; height: 15px; border-radius: 50%; background: var(--line);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .05);
  transition: background .2s, box-shadow .2s, transform .2s;
}
.lamps i.on {
  background: var(--orange); box-shadow: 0 0 0 5px rgba(242, 143, 75, .2), inset 0 -3px 0 rgba(0, 0, 0, .12);
}
.lamps i.spent { animation: lamp-off .5s ease; }
@keyframes lamp-off { 0% { transform: scale(1.4); background: var(--orange); } }
.lamps.idle i { opacity: .45; }
:root[data-theme="term"] .lamps i { border-radius: 0; box-shadow: inset 0 0 0 1px var(--line); background: transparent; }
:root[data-theme="term"] .lamps i.on { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
/* 적기 줄 — 점수판 바로 밑에 붙는 띠. 가운데로 모으고 너무 넓어지지 않게 묶는다 */
.confirm {
  display: flex; gap: 8px; align-items: center; justify-content: center;
  padding: 10px 12px 12px; border-top: 2px solid var(--line);
}
.confirm .btn { flex: 0 1 340px; min-width: 0; }
/* 좁은 화면에서는 굴리기 단추 곁으로 옮겨 온다(app.js placeConfirm) — 띠 모양은 빼고 단추 폭에 맞춘다 */
.acts .confirm { padding: 0; border-top: 0; width: 100%; max-width: 520px; align-self: center; }
.acts .confirm .btn { flex: 1; }

/* ───────────────── 덮는 창 ───────────────── */

.overlay {
  position: fixed; inset: 0; z-index: 30; display: none; place-items: center; padding: 18px;
  background: rgba(70, 40, 55, .42);
}
:root[data-theme="dark"] .overlay, :root[data-theme="term"] .overlay { background: rgba(0, 0, 0, .6); }
.overlay.on { display: grid; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } }
#confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.over-card, .rules-card {
  position: relative; background: var(--card); border-radius: 28px; padding: 24px;
  width: min(560px, 100%); max-height: 88dvh; overflow: auto; box-shadow: 0 8px 0 var(--drop);
  animation: rise .28s ease both;
}
.over-card { text-align: center; padding-top: 24px; }
.over-top {
  /* 카드 안쪽 여백만큼만 옆으로 늘린다. 위로 당기면 넘침에 물려 아이콘이 잘린다. */
  margin: 0 -24px 16px; padding: 22px 24px 18px; border-radius: 26px 26px 22px 22px;
  background: var(--pink-soft);
}
.crown {
  font-size: 46px; line-height: 1.2; padding: 2px 0 4px;
  animation: crown-in .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes crown-in { from { transform: scale(.4) rotate(-14deg); opacity: 0; } }
.over-card h2 { font-size: 34px; margin: 2px 0 4px; color: var(--pink-2); }
.over-sub { color: var(--ink-soft); margin: 0; font-size: 15.5px; }
.rank { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.rank li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 62px; align-items: center;
  gap: 10px; padding: 10px 14px 11px; border-radius: 18px; background: var(--paper-2); font-size: 16px;
  animation: rise .3s ease both;
}
.rank li.win { background: var(--sun); box-shadow: 0 3px 0 var(--sun-edge); }
.rank .pos { flex: none; color: var(--muted); text-align: center; font-family: var(--num); font-weight: 800; }
.rank .who { min-width: 0; }
.rank .who b { font-weight: 400; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .who i { font-style: normal; font-size: 12px; color: var(--muted); }
.rank .bar { grid-column: 2 / 4; height: 7px; border-radius: 99px; background: rgba(0, 0, 0, .07); overflow: hidden; }
.rank .bar i { display: block; height: 100%; border-radius: 99px; background: var(--pink); animation: bar-in .7s ease both; }
:root[data-theme="dark"] .rank .bar { background: rgba(255, 255, 255, .1); }
@keyframes bar-in { from { width: 0 !important; } }
.rank .pts { text-align: right; font-family: var(--num); font-weight: 800; font-size: 19px; }
.over-badges { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 14px; }
.badge {
  font-size: 13px; padding: 6px 12px; border-radius: 999px;
  background: var(--mint); color: var(--mint-ink); box-shadow: 0 3px 0 var(--mint-edge);
}
.badge.gold { background: var(--sun); color: var(--orange); box-shadow: 0 3px 0 var(--sun-edge); }
.over-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.over-acts .btn { flex: 1; min-width: 120px; }

.sheet-bg { align-items: end; }
.sheet-menu {
  width: 100%; max-width: 420px; background: var(--card); border-radius: 26px; padding: 10px;
  display: flex; flex-direction: column; animation: up .24s ease both;
  margin-bottom: env(safe-area-inset-bottom); box-shadow: 0 6px 0 var(--drop);
}
@keyframes up { from { transform: translateY(16px); opacity: 0; } }
.sheet-item { display: flex; align-items: center; gap: 10px; padding: 15px; border-radius: 18px; font-size: 17px; text-align: left; }
.sheet-item svg { width: 20px; height: 20px; }
.sheet-item:hover { background: var(--paper-2); }
.sheet-item.muted { color: var(--muted); justify-content: center; }

.rules-card h2 { font-size: 28px; margin: 2px 0 12px; color: var(--pink-2); }
.rules-card .close { position: absolute; right: 14px; top: 14px; }
.rule-flow { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.rule-flow div { display: flex; align-items: center; gap: 11px; font-size: 15px; color: var(--ink-soft); background: var(--paper-2); border-radius: 16px; padding: 10px 14px; }
.rule-flow b { width: 24px; height: 24px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--pink); color: #fff; font-size: 13px; font-weight: 400; }
table.rule-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.rule-table td { padding: 8px 6px; border-bottom: 2px dotted var(--line); }
table.rule-table td.k { white-space: nowrap; }
table.rule-table td.v { color: var(--muted); font-size: 13px; }
table.rule-table td.e { text-align: right; white-space: nowrap; color: var(--ink-soft); font-family: var(--num); }
table.rule-table tr.gap td { border-top: 3px solid var(--line); }
.rules-tip { font-size: 14.5px; color: var(--ink-soft); background: var(--mint); border-radius: 16px; padding: 12px 14px; }
.rules-tip b { color: var(--mint-ink); font-weight: 400; }
.rules-legal { margin-top: 14px; }

/* 보기 설정 아코디언 */
.view-pop {
  position: fixed; top: 56px; right: 12px; z-index: 28; width: 252px;
  background: var(--card); border-radius: 22px; padding: 12px 13px 13px;
  box-shadow: 0 6px 0 var(--drop); animation: rise .18s ease both;
}
:root[data-theme="term"] .view-pop { border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line); }
.vp-t { margin: 6px 2px 6px; font-size: 13px; color: var(--muted); }
.vp-t:first-child { margin-top: 0; }
.view-pop .seg button { font-size: 13.5px; padding: 8px 4px; }
.vp-note { margin: 9px 2px 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* 소리 조절 — 한 줄에 그림 단추 · 이름 · 막대 · 숫자 */
.sound-pop { width: 280px; }
.vol { display: grid; grid-template-columns: 34px 44px 1fr 30px; align-items: center; gap: 8px; padding: 5px 0; }
.vol-ico {
  width: 34px; height: 34px; border-radius: 12px; font-size: 17px; line-height: 1;
  background: var(--pink-soft); box-shadow: 0 3px 0 var(--pink-edge); transition: transform .12s, filter .12s;
}
.vol-ico:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pink-edge); }
.vol.off .vol-ico { background: var(--paper-2); box-shadow: 0 3px 0 var(--drop); filter: grayscale(1); opacity: .7; }
.vol-n { font-size: 14px; color: var(--ink-soft); }
.vol-v { font-family: var(--num); font-weight: 800; font-size: 13px; text-align: right; color: var(--pink-2); }
.vol.off .vol-v { color: var(--muted); font-family: var(--sans); font-weight: 400; }
.vol input[type=range] {
  --p: 0%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 999px; margin: 0;
  background: linear-gradient(to right, var(--pink) var(--p), var(--paper-2) var(--p));   /* 채운 만큼 분홍 — 두 색 경계만 */
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .05); cursor: pointer;
}
.vol input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 3px solid var(--pink); box-shadow: 0 2px 0 var(--pink-2);
}
.vol input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--pink); box-shadow: 0 2px 0 var(--pink-2);
}
.vol.off input[type=range]::-webkit-slider-thumb { border-color: var(--muted); box-shadow: 0 2px 0 var(--drop); }
:root[data-theme="term"] .vol-ico { border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line); background: none; }

/* 터미널 — 주사위도 글자로 */
.t-dice {
  margin: 0; font-family: var(--num); font-size: clamp(13px, 3.4vw, 19px); line-height: 1.5; color: var(--ink);
  text-align: center; white-space: pre; user-select: none;
}
.board.term {
  background: none; box-shadow: none; display: grid; place-items: center;
  aspect-ratio: auto; min-height: 0; padding: 10px 0 14px;
}
.board.term::after { display: none; }
/* three.js 가 캔버스에 display:block 을 직접 박아 둬서 !important 가 필요하다 */
.board.term .dice-canvas { display: none !important; }
.t-frame { color: var(--muted); }
.t-caret { color: var(--orange); }
.t-die { padding: 0 1px; }
.t-die.hot { cursor: pointer; }
.t-die.held { background: var(--ink); color: var(--paper); }

/* ───────────────── 터미널 화면 ───────────────── */

.tui {
  position: fixed; inset: 0; z-index: 22; display: grid; gap: 0;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) clamp(11em, 31vh, 17em);
  padding: clamp(10px, 2vw, 20px) clamp(8px, 2vw, 22px);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(11px, 1.05vw, 14px); line-height: 1.6;
  color: #7ed07e; background: #0b0e0c;
  text-shadow: 0 0 6px rgba(126, 240, 126, .35);
}
/* 칸 크기는 고정, 넘치면 그 칸만 구른다 — 새 줄이 와도 화면이 밀리지 않게 */
.tui-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.tui-pane.main { grid-area: 1 / 1; max-width: 100%; }
.tui-pane.main .tui-body { overflow-x: auto; }
.tui-pane.log { grid-area: 1 / 2; }
.tui-pane.sys { grid-area: 1 / 3; }
.tui-pane.cmd { grid-area: 2 / 1; }
.tui-pane.tchat { grid-area: 2 / 2 / 3 / 4; }
.tui-pane.log, .tui-pane.sys {
  margin-left: 18px; padding-left: 18px; border-left: 1px solid #1f4a27;
}
/* 아래 두 칸 — 커맨드(좌하단)와 대화(우하단). 위쪽 칸과 줄로 갈라 둔다 */
.tui-pane.cmd, .tui-pane.tchat { border-top: 1px solid #1f4a27; padding-top: 8px; margin-top: 8px; }
.tui-pane.tchat { margin-left: 18px; padding-left: 18px; border-left: 1px solid #1f4a27; }
.tui-pane.cmd .tui-body { white-space: pre-wrap; }
.tui-pane.tchat .tui-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.tui-say { display: flex; align-items: baseline; gap: 6px; padding-top: 6px; border-top: 1px dashed #1f4a27; margin-top: 6px; }
.tui-say .tui-in.say { flex: 1; width: auto; min-width: 0; }
.tui-say:focus-within { background: rgba(142, 245, 142, .08); }
.tui-h { color: #3f8a4a; padding-bottom: 6px; border-bottom: 1px solid #1f4a27; margin-bottom: 6px; }
.tui-body { margin: 0; flex: 1; overflow: auto; white-space: pre; overscroll-behavior: contain; }
/* 기록·시스템 칸은 긴 줄을 가로로 밀지 않고 접는다 — 진짜 터미널처럼 */
.tui-pane.log .tui-body, .tui-pane.sys .tui-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.tui-pane.main .tui-body { overflow: auto; }
.tui-body::-webkit-scrollbar { width: 8px; }
.tui-body::-webkit-scrollbar-thumb { background: #1f4a27; }
.tui-body::-webkit-scrollbar-track { background: transparent; }

.tui .big { color: #d8ffd8; font-weight: 600; }
.tui .hi { color: #d8ff8a; }
.tui .dim { color: #3f8a4a; }
.tui .good { color: #8ef58e; }
.tui .you { color: #b8f0b8; }
.tui .k { color: #d8ff8a; }
.tui .inv { background: #8ef58e; color: #06210c; text-shadow: none; }
/* 고정한 주사위 — 한눈에 갈리게 밝은 바탕에 굵게. 안 고정한 것은 흐린 쪽 */
.tui .held { background: #e8ff7a; color: #06210c; font-weight: 700; text-shadow: none; box-shadow: 0 0 0 2px #e8ff7a; }
.tui .heldlbl { color: #e8ff7a; font-weight: 700; }
.tui .free { color: #4f9d58; }
/* 한글·이모지 한 글자 = 정확히 두 칸. 칸 맞춤이 어긋나지 않게 */
.tui .w { display: inline-block; width: calc(var(--cw, 1ch) * 2); text-align: center; font-size: 1.14em; line-height: 1; vertical-align: baseline; }
/* 난장판 단추 — 쓸 수 있을 때만 주황 바탕으로 도드라지게 */
.tui .cbtn { background: #ffb347; color: #2a1600; font-weight: 700; text-shadow: none; box-shadow: 0 0 0 1px #ffb347; cursor: pointer; }
.tui .cbtn:hover { background: #ffd08a !important; }
.tui .off { color: #27522e; text-shadow: none; }
.tui .t { color: #2f6b38; }
.tui .warn { color: #ff7a6b; }
.tui .warn.blink { animation: caret 1s steps(1) infinite; }
/* 기록 칸의 대화 — 판 기록(초록)과 한눈에 갈리게 색을 바꾼다 */
.tui .tc-n { color: #ffb347; font-weight: 600; }
.tui .tc { color: #ffe0a3; }
.tui .tc-me-n { color: #6fd3ff; font-weight: 600; }
.tui .tc-me { color: #c6ecff; }
.tui [data-act] { cursor: pointer; }
.tui [data-act]:hover { background: rgba(142, 245, 142, .18); }
.tui .caret { animation: caret 1.05s steps(1) infinite; color: #8ef58e; }
@keyframes caret { 50% { opacity: 0; } }
.tui-in {
  font: inherit; color: #d8ffd8; background: transparent; border: 0; outline: none;
  border-bottom: 1px solid #2a5c33; width: 14ch; padding: 0 2px; text-shadow: inherit;
}
.tui-in.code { width: 6ch; text-transform: uppercase; letter-spacing: .2em; }
.tui-in.say { width: 26ch; }
.tui-in::placeholder { color: #2f6b38; }

/* 좁아지면 시스템 잡담부터 접고, 더 좁으면 기록도 접는다 */
@media (max-width: 1180px) {
  .tui { grid-template-columns: auto minmax(0, 1fr); }
  .tui-pane.sys { display: none; }
  .tui-pane.tchat { grid-area: 2 / 2 / 3 / 3; }
}
@media (max-width: 860px) {
  .tui { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto clamp(8.5em, 26vh, 13em); }
  .tui-pane.log { display: none; }
  .tui-pane.main { grid-area: 1 / 1; }
  .tui-pane.cmd { grid-area: 2 / 1; }
  .tui-pane.tchat { grid-area: 3 / 1; margin-left: 0; padding-left: 0; border-left: 0; }
}

/* 글자판이 켜지면 보통 화면은 통째로 감춘다 */
html.tui-on .screen,
html.tui-on .chat-btn,
html.tui-on .chat,
html.tui-on .chat-peek,
html.tui-on .view-pop { display: none !important; }
html.tui-on .grain { z-index: 23; }

/* ───────────────── 채팅 ───────────────── */

.chat-btn {
  position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 25;
  width: 50px; height: 50px; border-radius: 50%; font-size: 22px; background: var(--card);
  box-shadow: 0 4px 0 var(--drop); display: grid; place-items: center;
}
.chat-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--drop); }
.chat-n {
  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--pink-2); color: #fff; font-size: 11.5px;
  display: grid; place-items: center; font-family: var(--num); font-weight: 700;
}
.chat-n.pop { animation: pop .3s ease; }
@keyframes pop { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } }
.chat-peek {
  position: fixed; right: 72px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 25;
  max-width: min(60vw, 280px); background: var(--card); border-radius: 18px; padding: 10px 14px;
  font-size: 14px; box-shadow: 0 4px 0 var(--drop); animation: rise .22s ease both;
}
.chat-peek b { display: block; font-size: 12.5px; color: var(--muted); }
.chat-peek.bye { animation: fadeout .26s ease both; }
@keyframes fadeout { to { opacity: 0; transform: translateY(6px); } }
.chat {
  position: fixed; right: 14px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 26;
  width: min(320px, calc(100vw - 28px)); height: min(60dvh, 400px); display: flex; flex-direction: column;
  background: var(--card); border-radius: 22px; box-shadow: 0 6px 0 var(--drop); overflow: hidden;
  animation: rise .22s ease both;
}
.chat-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--pink-soft); }
.chat-sub { font-size: 12.5px; color: var(--muted); }
.chat-x { margin-left: auto; color: var(--muted); font-size: 16px; }
.chat-log { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.chat-msg { margin: 0; font-size: 15px; line-height: 1.5; }
.chat-msg b { color: var(--pink-2); margin-right: 4px; font-weight: 400; }
.chat-msg.mine b { color: var(--mint-ink); }
.chat-msg.sys { color: var(--muted); font-size: 13.5px; text-align: center; }
.chat-in { display: flex; gap: 6px; padding: 10px; }
.chat-in .btn { flex: none; }

.toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px);
  z-index: 40; background: var(--ink); color: var(--paper); padding: 12px 20px; border-radius: 18px;
  font-size: 15px; box-shadow: 0 4px 0 rgba(0, 0, 0, .12); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; max-width: min(90vw, 460px); text-align: center;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 터미널 모드 — 둥근 데를 전부 각지게 */
:root[data-theme="term"] .cell,
:root[data-theme="term"] .btn,
:root[data-theme="term"] .seat,
:root[data-theme="term"] .seg,
:root[data-theme="term"] .seg button,
:root[data-theme="term"] .turn-pill,
:root[data-theme="term"] .brand-mini,
:root[data-theme="term"] .facts li,
:root[data-theme="term"] .how li,
:root[data-theme="term"] .how i,
:root[data-theme="term"] .rule-flow div,
:root[data-theme="term"] .rule-flow b,
:root[data-theme="term"] .rules-tip,
:root[data-theme="term"] .rank li,
:root[data-theme="term"] .sheet-wrap,
:root[data-theme="term"] .code-card,
:root[data-theme="term"] .choice,
:root[data-theme="term"] .over-card,
:root[data-theme="term"] .rules-card,
:root[data-theme="term"] .sheet-menu,
:root[data-theme="term"] .sheet-item,
:root[data-theme="term"] .chat,
:root[data-theme="term"] .chat-btn,
:root[data-theme="term"] .chat-peek,
:root[data-theme="term"] .toast,
:root[data-theme="term"] .icon-btn,
:root[data-theme="term"] .mini-die,
:root[data-theme="term"] .name-field input,
:root[data-theme="term"] .join-row input,
:root[data-theme="term"] .chat-in input,
:root[data-theme="term"] table.sheet thead th,
:root[data-theme="term"] .begin,
:root[data-theme="term"] .rules-btn { border-radius: 2px; }
:root[data-theme="term"] .cell,
:root[data-theme="term"] .seat,
:root[data-theme="term"] .sheet-wrap,
:root[data-theme="term"] .code-card,
:root[data-theme="term"] .choice,
:root[data-theme="term"] .how li,
:root[data-theme="term"] .facts li,
:root[data-theme="term"] table.sheet thead th { box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="term"] .cell.pick { box-shadow: inset 0 0 0 1px var(--orange); }
:root[data-theme="term"] .cell.pick.on { background: var(--orange); color: #0b0e0c; }
:root[data-theme="term"] .chat-btn, :root[data-theme="term"] .chat-n { border-radius: 2px; }
:root[data-theme="term"] .sheet-head, :root[data-theme="term"] .chat-head { border-bottom: 1px solid var(--line); }

/* ───────────────── 좁은 화면 ───────────────── */

@media (max-width: 900px) {
  #title .hero { grid-template-columns: 1fr; gap: 26px; padding-top: 4px; }
  .hero-tray { order: 2; }
  .hero-copy { order: 1; }
  #game .table { grid-template-columns: 1fr; }
  .play {
    position: sticky; bottom: 0; top: auto; order: 2; padding: 10px 0 calc(4px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, var(--paper) 22%);
  }
  /* 좁은 화면에서는 점수판이 위에 있으니 판을 조금 더 작게 */
  .board { max-width: calc((52dvh) * 16 / 9); }
  .sheet-wrap { order: 1; }
  .board { --die: 46px; }
  table.sheet th.cat { padding: 4px 6px; font-size: 14.5px; }
  .cell { min-height: 30px; }
  .lobby-wrap, .enter-wrap { grid-template-columns: 1fr; }
  .enter-right { position: static; }
  .enter-right .rooms-list { max-height: 240px; }
  .lobby-right { position: static; }
  .card-choice { grid-template-columns: 1fr; }
  .opt { flex-direction: column; align-items: stretch; gap: 6px; }
  .opt .seg { max-width: none; }
}
@media (max-width: 460px) {
  table.rule-table td.v { display: none; }
  .rule-flow div { font-size: 14px; }
}
@media (max-width: 400px) {
  .board { --die: 40px; }
  .seats { grid-template-columns: 1fr; }
  .seg { flex-wrap: wrap; }
  .seg button { flex: 1 0 40%; }
  .code { font-size: 38px; }
  .lobby-wrap, #game .table { padding-left: 12px; padding-right: 12px; }
  table.sheet col.c-cat { width: 104px; }
  table.sheet th.cat { min-width: 104px; font-size: 14px; }
  table.sheet { border-spacing: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* 관전 — 만들 때 체크, 관전자 안내 띠 */
.spec-check { display: flex; align-items: flex-start; gap: 9px; padding: 2px 4px 8px; cursor: pointer; font-size: 15px; color: var(--ink-soft); line-height: 1.45; }
.spec-check input { margin: 4px 0 0; width: 18px; height: 18px; accent-color: var(--pink-2); flex: none; }
.spec-check i { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); }
.spec-bar {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  margin: 8px auto 0; padding: 7px 8px 7px 16px; max-width: calc(100% - 32px); border-radius: 16px;
  background: var(--sun); box-shadow: 0 3px 0 var(--sun-edge); color: var(--ink); font-size: 14.5px; line-height: 1.4;
}
.spec-bar[hidden] { display: none; }
.spec-bar.peek { background: var(--paper-2); box-shadow: 0 3px 0 var(--drop); color: var(--ink-soft); font-size: 13.5px; padding: 6px 16px; justify-content: center; }
.spec-bar .btn { flex: none; }
:root[data-skin="retro"] .spec-bar { border-radius: 6px; }
:root[data-theme="term"] .spec-bar { border-radius: 0; }
.chat-msg .sp { color: var(--muted); font-size: 12.5px; margin-right: 4px; }

/* 버전 표기 — 우하단에 작게. 배포 직전 scripts/stamp.js 가 만든 값. 보통 화면에서는 아래쪽 만든 사람 줄 앞에 붙고, 터미널 화면에서는 구석에 따로 뜬다 */
.sig { opacity: .5; }
.ver { display: none; position: fixed; right: 6px; bottom: 3px; z-index: 60; font: 10px/1 ui-monospace, Menlo, monospace; color: #3f8a4a; opacity: .85; pointer-events: none; user-select: none; }
.ver:empty { display: none !important; }
html.tui-on .ver { display: block; }