/* 야추 다이스 — 항해 신호기 팔레트 */
:root {
  --navy: #1b2f5b;
  --navy-deep: #13234a;
  --sail: #f4f6f3;
  --paper: #ffffff;
  --ink: #16213a;
  --ink-soft: #5b6478;
  --line: #d9dee6;
  --filled: #e2e8f2;
  --signal-yellow: #f5c518;
  --signal-red: #d83a2e;
  --sea-blue: #2e6fd8;
  --kelp: #2a9d6a;

  /* 자리별 깃발 색: 빨강, 파랑, 노랑, 초록 */
  --p0: #d83a2e;
  --p1: #2e6fd8;
  --p2: #e0a800;
  --p3: #2a9d6a;
  /* 2:2 팀 색 */
  --t0: #d83a2e;
  --t1: #2e6fd8;

  --die: #fbfbf8;
  --pip: #1b2f5b;

  --display: 'Do Hyeon', 'IBM Plex Sans KR', system-ui, sans-serif;
  --body: 'IBM Plex Sans KR', system-ui, -apple-system, 'Apple SD Gothic Neo', sans-serif;

  --radius-s: 8px;
  --radius-m: 14px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sail: #0f1830;
    --paper: #182445;
    --ink: #eef1f7;
    --ink-soft: #a7b0c4;
    --line: #2c3a60;
    --filled: #24345e;
    --navy: #0b1530;
    --navy-deep: #060d22;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--sail);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--signal-yellow); outline-offset: 2px; }

h1, h2, h3 { margin: 0; font-weight: 400; font-family: var(--display); letter-spacing: 0; }

/* ---------- 버튼 ---------- */
.btn {
  border: 0;
  border-radius: var(--radius-s);
  padding: 12px 20px;
  font-weight: 700;
  min-height: 48px;
  transition: transform .08s ease, background-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--navy-deep); }
.btn-secondary { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--navy); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-danger { background: var(--signal-red); color: #fff; }
.btn-big { font-size: 18px; min-height: 58px; padding: 14px 28px; }
.wide { width: 100%; }
.link { background: none; border: 0; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; padding: 8px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary { background: var(--signal-yellow); color: #13234a; }
  :root:not([data-theme="light"]) .btn-primary:hover:not(:disabled) { background: #ffd43b; }
  :root:not([data-theme="light"]) .btn-secondary { box-shadow: inset 0 0 0 2px var(--signal-yellow); }
}

.icon-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: transparent; display: grid; place-items: center;
}
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { background: rgba(127, 140, 170, .16); }

/* ---------- 깃발(페넌트) ---------- */
.pen {
  display: inline-block;
  width: 22px; height: 14px;
  background: var(--pc, var(--ink-soft));
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  flex: none;
}
.c0 { --pc: var(--p0); } .c1 { --pc: var(--p1); } .c2 { --pc: var(--p2); } .c3 { --pc: var(--p3); }
.t0 { --pc: var(--t0); } .t1 { --pc: var(--t1); }

/* ---------- 홈 ---------- */
.home { min-height: 100dvh; display: flex; flex-direction: column; }
.home-hero {
  background: var(--navy);
  padding: max(56px, 14vh) 16px 36px;
  text-align: center;
}
.home-inner { width: min(440px, 100%); margin: 0 auto; padding: 24px 16px 40px; text-align: center; }
.logo {
  font-size: clamp(96px, 30vw, 148px);
  line-height: .9;
  color: #fff;
}
.home-dice {
  display: flex; justify-content: center; gap: 10px;
  margin-top: 28px;
}
.home-dice .die { --size: clamp(44px, 13vw, 58px); }
.home-lead { color: var(--ink-soft); margin: 0 auto 24px; max-width: 30ch; }
.home-actions { display: grid; gap: 12px; }
.home-actions .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.home-actions .btn-ghost .pen { width: 18px; height: 12px; }
.home-inner .link { display: block; margin: 0 auto; }
.home-best { min-height: 1.5em; margin: 18px 0 4px; color: var(--ink-soft); font-size: 14px; }

/* ---------- 패널 화면 (같이 하기, 대기실) ---------- */
.panel-screen { min-height: 100dvh; }
.topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--navy); color: #fff;
}
.topbar h2 { font-size: 24px; }
.panel { width: min(520px, 100%); margin: 0 auto; padding: 24px 16px 40px; }
.block { margin-top: 28px; }
.block h3 { font-size: 22px; margin-bottom: 12px; }

.field { display: grid; gap: 6px; font-weight: 500; }
.field input, .code-input {
  border: 2px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  min-height: 50px;
}
.field input:focus, .code-input:focus { border-color: var(--navy); outline: none; }

.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.mode {
  display: grid; justify-items: center; gap: 2px;
  padding: 14px 6px 12px;
  border: 2px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--paper);
}
.mode b { font-family: var(--display); font-weight: 400; font-size: 22px; }
.mode small { color: var(--ink-soft); font-size: 13px; }
.mode[aria-checked="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.mode-flags { display: flex; gap: 3px; height: 16px; margin-bottom: 4px; }
.mode-flags .pen { width: 16px; height: 12px; }

.join-row { display: flex; gap: 8px; }
.code-input {
  flex: 1; min-width: 0;
  font-family: var(--display); font-size: 26px; letter-spacing: .3em; text-transform: uppercase; text-align: center;
}
.form-error { color: var(--signal-red); min-height: 1.5em; margin-top: 16px; font-weight: 500; }

/* 대기실 */
.room-code-box {
  display: grid; justify-items: center; gap: 4px;
  padding: 20px 16px;
  background: var(--paper);
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
}
.room-code-box span { color: var(--ink-soft); font-size: 14px; }
.room-code-box strong { font-family: var(--display); font-weight: 400; font-size: 56px; letter-spacing: .18em; line-height: 1.1; margin-right: -.18em; }
.room-code-box .btn { margin-top: 8px; min-height: 44px; padding: 8px 18px; display: inline-flex; align-items: center; gap: 8px; }
.room-code-box .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }


.seats { display: grid; gap: 8px; margin: 20px 0 8px; }
.seats.teams { grid-template-columns: 1fr 1fr; gap: 12px; }
.team-col { display: grid; gap: 8px; align-content: start; }
.team-col h3 { display: flex; align-items: center; gap: 8px; font-size: 20px; }
.seat {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.seat.empty { background: transparent; border-style: dashed; color: var(--ink-soft); }
.seat .name { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--sail); color: var(--ink-soft); white-space: nowrap; }
.tag.me { background: var(--signal-yellow); color: #13234a; font-weight: 700; }
.team-col .btn { min-height: 40px; padding: 8px; }
.lobby-note { color: var(--ink-soft); text-align: center; min-height: 1.5em; }

/* ---------- 게임 ---------- */
.game { min-height: 100dvh; display: flex; flex-direction: column; }
.game-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--navy); color: #fff;
  position: sticky; top: 0; z-index: 5;
}
.round { font-family: var(--display); font-size: 26px; line-height: 1; white-space: nowrap; }
.round small { font-size: 16px; opacity: .7; margin-left: 2px; }
.turn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; overflow: hidden; }
.turn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timer {
  position: relative; width: 74px; height: 28px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); overflow: hidden; flex: none;
}
.timer i { position: absolute; inset: 0 auto 0 0; width: 100%; background: rgba(255, 255, 255, .28); transform-origin: left; }
.timer.low i { background: var(--signal-red); }
.timer span { position: relative; display: grid; place-items: center; height: 100%; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

.game-body {
  flex: 1;
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 16px;
  display: grid;
  gap: 16px;
}
@media (min-width: 900px) {
  .game-body { grid-template-columns: minmax(360px, 420px) 1fr; align-items: start; padding: 28px 24px; gap: 28px; }
  .tray-area { position: sticky; top: 88px; }
}

.tray {
  position: relative;
  background: var(--navy);
  border-radius: var(--radius-m);
  padding: 26px 12px 16px;
  box-shadow: inset 0 0 0 6px var(--navy-deep);
  overflow: hidden; /* 굴러 들어오는 주사위가 트레이 밖으로 나가지 않게 */
}
.dice { display: flex; justify-content: center; gap: clamp(6px, 2.4vw, 12px); }
.tray-hint { color: rgba(255, 255, 255, .72); text-align: center; font-size: 14px; margin: 34px 0 0; min-height: 1.55em; }

/* 주사위 */
.die {
  --size: clamp(52px, 15vw, 64px);
  width: var(--size); height: var(--size);
  border-radius: calc(var(--size) * .2);
  background: var(--die);
  border: 0;
  padding: calc(var(--size) * .14);
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  box-shadow: inset 0 -4px 0 rgba(27, 47, 91, .16);
  position: relative;
  transition: transform .14s ease, box-shadow .14s ease;
}
.die i { width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--pip); place-self: center; }
.die[data-face="0"] { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
button.die:not(:disabled):hover { transform: translateY(-2px); }
button.die:disabled { cursor: default; }
.die.held {
  transform: translateY(-8px);
  box-shadow: inset 0 -4px 0 rgba(27, 47, 91, .16), 0 0 0 4px var(--signal-yellow);
}
.die.held::after {
  content: '고정';
  position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
  font-size: 12px; font-weight: 700; color: var(--signal-yellow); white-space: nowrap;
}
/* 굴리기: 왼쪽 위에서 굴러 들어와 두세 번 튀고 멈춘다. 방향·회전·길이는 주사위마다 JS가 정한다. */
.die.rolling {
  animation: roll var(--roll-ms, 760ms) cubic-bezier(.22, .61, .36, 1) both;
  box-shadow: inset 0 -4px 0 rgba(27, 47, 91, .16), 0 10px 14px rgba(0, 0, 0, .28);
}
@keyframes roll {
  0% { transform: translate(var(--from-x, -60px), -20px) rotate(var(--spin, -540deg)) scale(.82); }
  30% { transform: translate(calc(var(--from-x, -60px) * .45), 0) rotate(calc(var(--spin, -540deg) * .5)) scale(1.05, .92); }
  46% { transform: translate(calc(var(--from-x, -60px) * .25), -16px) rotate(calc(var(--spin, -540deg) * .26)); }
  62% { transform: translate(calc(var(--from-x, -60px) * .1), 0) rotate(calc(var(--spin, -540deg) * .1)) scale(1.04, .95); }
  76% { transform: translate(0, -5px) rotate(calc(var(--spin, -540deg) * .02)); }
  88% { transform: translate(0, 0) scale(1.02, .98); }
  100% { transform: none; }
}
.tray.landing { animation: thud .76s ease-out; }
/* 서버 결과를 기다리는 동안 제자리에서 흔들린다 */
.die.waiting { animation: wobble .22s ease-in-out infinite alternate; }
@keyframes wobble {
  from { transform: rotate(-7deg) translateY(-2px); }
  to { transform: rotate(7deg) translateY(0); }
}
@keyframes thud {
  0%, 25% { transform: none; }
  32% { transform: translateY(2px); }
  40%, 100% { transform: none; }
}
.home-dice .die.rolling { animation-name: tumble; }

/* 야추 축하 */
.tray.yacht .die {
  animation: hop .55s cubic-bezier(.3, .7, .4, 1) var(--hop-delay, 0ms) backwards;
  box-shadow: inset 0 -4px 0 rgba(27, 47, 91, .16), 0 0 0 4px var(--signal-yellow);
}
@keyframes hop {
  0% { transform: none; }
  40% { transform: translateY(-20px) rotate(-6deg); }
  70% { transform: translateY(0) scale(1.06, .94); }
  100% { transform: none; }
}
.yacht-stamp {
  position: absolute; left: 50%; top: 46%;
  display: grid; justify-items: center;
  font-family: var(--display);
  color: var(--signal-yellow);
  text-shadow: 0 4px 0 var(--navy-deep), 0 0 18px rgba(0, 0, 0, .35);
  pointer-events: none;
  white-space: nowrap;
  line-height: 1;
  transform: translate(-50%, -50%) rotate(-8deg);
  animation: stamp 2.1s ease both;
}
.yacht-stamp span { font-size: clamp(56px, 18vw, 84px); -webkit-text-stroke: 6px var(--navy-deep); paint-order: stroke fill; }
.yacht-stamp small { font-size: 22px; color: #fff; margin-bottom: 4px; }
@keyframes stamp {
  0% { transform: translate(-50%, -50%) rotate(-8deg) scale(2.4); opacity: 0; }
  14% { transform: translate(-50%, -50%) rotate(-8deg) scale(.92); opacity: 1; }
  22% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
  82% { opacity: 1; }
  100% { transform: translate(-50%, -58%) rotate(-8deg); opacity: 0; }
}
.confetti { position: fixed; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; }
.confetti .pen {
  position: absolute; top: -24px;
  width: 18px; height: 12px;
  animation: fall var(--fall-ms, 1800ms) cubic-bezier(.25, .6, .4, 1) var(--fall-delay, 0ms) both;
}
@keyframes fall {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(var(--drift, 0), 105vh) rotate(var(--turn, 360deg)); opacity: 0; }
}
@keyframes tumble {
  0% { transform: translateY(-18px) rotate(-30deg) scale(.86); }
  45% { transform: translateY(4px) rotate(14deg) scale(1.04); }
  70% { transform: translateY(-3px) rotate(-5deg); }
  100% { transform: none; }
}
.home-dice .die { box-shadow: inset 0 -4px 0 rgba(27, 47, 91, .16), 0 6px 0 rgba(0, 0, 0, .18); }

.roll-row { margin-top: 14px; }
.btn-roll {
  width: 100%; min-height: 60px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--signal-yellow); color: #13234a; font-size: 20px;
  border-radius: var(--radius-m);
}
.btn-roll:hover:not(:disabled) { background: #ffd43b; }
.roll-pips { display: flex; gap: 6px; }
.roll-pips i { width: 10px; height: 10px; border-radius: 50%; background: #13234a; }
.roll-pips i.used { background: transparent; box-shadow: inset 0 0 0 2px rgba(19, 35, 74, .45); }

.toast { min-height: 1.55em; margin: 10px 0 0; text-align: center; color: var(--ink-soft); font-size: 14px; }

/* 점수판 */
.sheet-area { overflow-x: auto; }
.sheet {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.sheet th, .sheet td { padding: 0; border-bottom: 1px solid var(--line); }
.sheet tr:last-child > * { border-bottom: 0; }
.sheet thead th {
  padding: 10px 8px 8px;
  font-size: 14px; font-weight: 700; text-align: center;
  vertical-align: bottom;
  border-bottom: 2px solid var(--ink);
}
.sheet thead th:first-child { text-align: left; padding-left: 14px; }
.ph { display: grid; justify-items: center; gap: 4px; }
.ph .pen { width: 20px; height: 12px; }
.ph .nm { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph .st { font-size: 11px; font-weight: 500; color: var(--ink-soft); }
.sheet th.cat {
  text-align: left; padding: 8px 8px 8px 14px; font-weight: 500;
  white-space: nowrap;
}
.cat-name { display: block; }
.cat-hint { display: block; font-size: 12px; color: var(--ink-soft); font-weight: 400; white-space: normal; max-width: 22ch; }
@media (max-width: 520px) { .cat-hint { display: none; } }
.sheet td { text-align: center; width: var(--col-w, 18%); }
.cell {
  width: 100%; min-height: 44px; padding: 6px 4px;
  border: 0; background: none;
  font-size: 17px; font-weight: 700;
  display: grid; place-items: center;
}
/* 적은 점수: 진한 굵은 글자. 적을 수 있는 점수(미리보기): 점선 테두리 안의 흐린 글자. */
.cell.preview { cursor: pointer; }
.cell.preview .pv {
  min-width: 2.6em;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1.5px dashed color-mix(in srgb, var(--ink-soft) 70%, transparent);
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}
.cell.preview.zero .pv { opacity: .5; }
button.cell.preview:hover .pv { border-style: solid; background: color-mix(in srgb, var(--signal-yellow) 25%, transparent); color: var(--ink); opacity: 1; }
.cell.armed .pv, button.cell.armed:hover .pv {
  border: 1.5px solid #13234a;
  background: var(--signal-yellow);
  color: #13234a;
  font-weight: 700;
  opacity: 1;
}
.cell.just { animation: ink .9s ease; }
@keyframes ink { 0% { background: var(--signal-yellow); } 100% { background: transparent; } }
.sheet .team-start { border-left: 2px solid var(--ink); }
/* 기록한 칸: 연한 남색 배경. 차례 표시는 머리글 위 노란 띠만 쓴다. */
.sheet td.filled { background: var(--filled); }
th.now { box-shadow: inset 0 4px 0 var(--signal-yellow); }
.sheet .sub th, .sheet .sub td { background: var(--sail); }
.sheet .sub .cell { font-size: 14px; font-weight: 500; min-height: 34px; }
.sheet .sub th.cat { font-size: 14px; color: var(--ink-soft); padding-top: 6px; padding-bottom: 6px; }
.bonus-got { color: var(--kelp); }
.sheet .total th, .sheet .total td { border-top: 2px solid var(--ink); }
.sheet .total th.cat { font-family: var(--display); font-size: 20px; }
.sheet .total .cell { font-family: var(--display); font-size: 24px; font-weight: 400; }
.sheet .team-total .cell { font-size: 20px; }
.sheet .divider th, .sheet .divider td { border-bottom: 2px solid var(--ink); }

/* ---------- 오버레이 ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(10, 18, 40, .6);
  display: grid; place-items: center;
  grid-template-columns: minmax(0, 1fr); /* 안의 내용이 창보다 넓어지지 않게 */
  padding: 16px;
  overflow-y: auto;
}
.sheet-card {
  width: min(440px, 100%);
  background: var(--paper);
  border-radius: var(--radius-m);
  padding: 26px 22px 22px;
}
.result-card h2 { font-size: 36px; text-align: center; line-height: 1.15; }
.result-sub { text-align: center; color: var(--ink-soft); margin: 6px 0 18px; }
.standings { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.standings li {
  display: grid; grid-template-columns: 32px auto 1fr auto; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius-s); background: var(--sail);
}
.standings li.first { background: color-mix(in srgb, var(--signal-yellow) 30%, var(--paper)); }
.standings .rk { font-family: var(--display); font-size: 22px; }
.standings .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standings .nm small { font-weight: 400; color: var(--ink-soft); margin-left: 6px; }
.standings .sc { font-family: var(--display); font-size: 26px; }
.result-actions { display: flex; gap: 8px; margin-top: 20px; }
/* 결과: 랭킹 등록 */
.rank-form { margin: 4px 0 6px; padding: 16px; border-radius: var(--radius-m); background: var(--sail); }
.rank-form label { display: block; font-weight: 700; margin-bottom: 10px; }
.rank-form .row { display: flex; gap: 8px; }
.rank-form input {
  flex: 1; min-width: 0; width: 100%; min-height: 52px;
  border: 2px solid var(--line); border-radius: var(--radius-s); background: var(--paper);
  font-family: var(--display); font-size: 30px; letter-spacing: .4em; text-align: center; text-transform: uppercase;
  padding: 4px 0 4px .4em;
}
.rank-form input:focus { outline: none; border-color: var(--navy); }
.rank-form .btn { min-width: 84px; }
.rank-form .err { color: var(--signal-red); font-size: 14px; margin: 8px 0 0; min-height: 1.3em; }
.rank-form .err:empty { display: none; }
.rank-form small { display: block; color: var(--ink-soft); font-size: 13px; margin-top: 8px; }
.rank-done { margin: 4px 0 12px; padding: 14px 16px; border-radius: var(--radius-m); background: color-mix(in srgb, var(--signal-yellow) 26%, var(--paper)); text-align: center; }
.rank-done strong { font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: .12em; display: block; }

/* 랭킹 화면 */
.tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.tabs button { border: 0; background: none; border-radius: 999px; min-height: 42px; font-weight: 700; color: var(--ink-soft); }
.tabs button[aria-selected="true"] { background: var(--navy); color: #fff; }
.rank-range { color: var(--ink-soft); font-size: 14px; text-align: center; margin: 12px 0 14px; min-height: 1.5em; white-space: pre-line; }
.rank-list { list-style: none; margin: 0 0 20px; padding: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; }
.rank-list:empty { display: none; }
.rank-list li {
  display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
}
.rank-list li:last-child { border-bottom: 0; }
.rank-list .rk { font-family: var(--display); font-size: 24px; text-align: center; }
.rank-list li:nth-child(-n + 3) .rk { color: var(--navy); }
.rank-list .medal { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #13234a; font-size: 20px; }
.rank-list .m1 { background: var(--signal-yellow); }
.rank-list .m2 { background: #cfd6e2; }
.rank-list .m3 { background: #e7b98f; }
.rank-list .ini { font-family: var(--display); font-size: 26px; letter-spacing: .14em; display: flex; align-items: center; gap: 8px; }
.rank-list .ini .tag { font-family: var(--body); letter-spacing: 0; }
.rank-list .dt { color: var(--ink-soft); font-size: 13px; }
.rank-list .sc { font-family: var(--display); font-size: 26px; min-width: 3ch; text-align: right; }
.rank-list li.mine { background: color-mix(in srgb, var(--signal-yellow) 18%, var(--paper)); }
.rank-list li.focus { box-shadow: inset 4px 0 0 var(--signal-yellow); }
.rank-empty { text-align: center; color: var(--ink-soft); padding: 36px 16px; margin-bottom: 20px; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius-m); }

.result-note { margin: 12px 0 0; text-align: center; color: var(--ink-soft); font-size: 14px; }
.result-note:empty { display: none; }
.result-actions .btn { flex: 1; }
.big-score { font-family: var(--display); font-size: 80px; text-align: center; line-height: 1; margin: 6px 0 4px; }

.rules-card { width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; }
.rules-card h2 { font-size: 30px; margin-bottom: 8px; }
.rules-card h3 { font-size: 20px; margin-top: 18px; }
.rules-card p { margin: 8px 0; }
.rules-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.rules-table th, .rules-table td { text-align: left; padding: 7px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rules-table th { white-space: nowrap; padding-right: 12px; }
.confirm-card p { font-size: 17px; margin: 0; }

.conn-banner {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 30;
  margin: 0; padding: 10px 18px; border-radius: 999px;
  background: var(--ink); color: var(--sail); font-size: 14px; font-weight: 500;
  max-width: calc(100% - 32px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 계정 ---------- */
.home-hero { position: relative; }
.account-bar { position: absolute; top: 12px; right: 12px; left: 12px; display: flex; justify-content: flex-end; min-height: 40px; }
.account-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 4px 14px 4px 4px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: #fff; font-weight: 700; font-size: 14px;
  max-width: 100%;
}
.account-btn:hover { background: rgba(255, 255, 255, .2); }
.account-btn.login { padding: 8px 16px; }
.account-btn .av { width: 32px; height: 32px; flex: none; border-radius: 50%; overflow: hidden; display: block; }
.account-btn .av svg { display: block; width: 100%; height: 100%; }
.account-btn .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.points-chip {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 2px 10px; border-radius: 999px; background: var(--signal-yellow); color: #13234a;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.points-chip:empty { display: none; }
.topbar .points-chip { margin-left: auto; }

/* 작은 아바타 (랭킹, 대기실, 결과) */
.mini-av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none; display: inline-block; }
.mini-av svg { display: block; width: 100%; height: 100%; }

/* 로그인·닉네임 창 */
.login-card, .nickname-card { text-align: center; }
.login-card h2, .nickname-card h2 { font-size: 28px; margin-top: 4px; }
.login-avatars { display: flex; justify-content: center; margin-bottom: 8px; }
.login-avatars .mini-av { width: 56px; height: 56px; margin: 0 -6px; box-shadow: 0 0 0 3px var(--paper); }
.login-lead { color: var(--ink-soft); margin: 8px 0 18px; }
.google-btn { display: flex; justify-content: center; min-height: 44px; margin-bottom: 10px; }
.login-note { font-size: 13px; color: var(--ink-soft); margin: 4px 0 14px; }
.login-note a { color: inherit; }
#dev-login { margin-bottom: 8px; }
.nickname-avatar { display: flex; justify-content: center; margin-bottom: 4px; }
.nickname-avatar svg { width: 96px; height: 96px; }
#nickname-input {
  width: 100%; min-height: 52px; border: 2px solid var(--line); border-radius: var(--radius-s); background: var(--paper);
  text-align: center; font-size: 20px; font-weight: 700; padding: 6px 12px;
}
#nickname-input:focus { outline: none; border-color: var(--navy); }
.nickname-card .form-error { margin: 8px 0; min-height: 1.4em; }

/* ---------- 내 아바타 ---------- */
.closet { padding-bottom: 120px; }
.closet-stage {
  display: grid; justify-items: center; gap: 10px;
  padding: 20px 16px 16px; margin-bottom: 18px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m);
}
.closet-preview svg { width: 168px; height: 168px; display: block; }
.closet-name { display: grid; justify-items: center; }
.closet-name strong { font-family: var(--display); font-weight: 400; font-size: 28px; }
.closet-name .link { padding: 2px 8px; font-size: 14px; }
.slot-tabs { grid-template-columns: repeat(5, 1fr); margin-bottom: 14px; }
.slot-tabs button { min-height: 40px; font-size: 14px; }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.item {
  display: grid; justify-items: center; gap: 4px;
  padding: 8px 4px 10px; border: 2px solid var(--line); border-radius: var(--radius-m); background: var(--paper);
  font-size: 13px; color: var(--ink); position: relative;
}
.item svg { width: 72px; height: 72px; display: block; }
.item-art { position: relative; display: block; }
.item.locked .item-art > svg { opacity: .45; filter: grayscale(.85); }
.item .lock {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.item .lock svg {
  width: 34px; height: 34px; padding: 7px; border-radius: 50%;
  background: rgba(22, 33, 58, .82); color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.item.locked:hover .lock svg, .item.locked[aria-pressed="true"] .lock svg { background: var(--navy); }
.item .item-name { font-weight: 700; }
.item .item-state { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.item.locked .item-state { color: var(--ink); font-weight: 700; }
.item.short .item-state { color: var(--signal-red); }
.item[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.item.worn::after {
  content: '착용'; position: absolute; top: 6px; right: 6px;
  font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--signal-yellow); color: #13234a;
}
.item .none-mark { width: 72px; height: 72px; display: grid; place-items: center; color: var(--ink-soft); font-size: 13px; border: 2px dashed var(--line); border-radius: 18px; }
.closet-help { color: var(--ink-soft); font-size: 13px; text-align: center; margin: 18px 0 6px; }
.closet-logout { display: block; margin: 0 auto; font-size: 14px; }
.closet-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(10, 18, 40, .08);
}
.closet-bar p { margin: 0 auto 8px; max-width: 520px; font-size: 14px; color: var(--ink-soft); text-align: center; }
.closet-bar-actions { display: flex; gap: 8px; max-width: 520px; margin: 0 auto; }
.closet-bar-actions .btn-primary { flex: 1; }

/* 결과: 포인트 */
.reward { display: grid; justify-items: center; gap: 6px; margin: 2px 0 12px; padding: 14px 16px; border-radius: var(--radius-m); background: var(--sail); text-align: center; }
.reward .points-chip { font-size: 18px; padding: 4px 14px; }
.reward small { color: var(--ink-soft); font-size: 13px; }
.reward .btn { margin-top: 6px; }

/* 랭킹: 닉네임 + 아바타 */
.rank-list .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rank-list .who .nick { font-weight: 700; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flash {
  position: fixed; left: 50%; top: 76px; transform: translateX(-50%); z-index: 40;
  margin: 0; padding: 10px 18px; border-radius: 999px; max-width: calc(100% - 32px);
  background: var(--ink); color: var(--sail); font-size: 14px; font-weight: 500; text-align: center;
  box-shadow: 0 6px 18px rgba(10, 18, 40, .2);
}

/* 홈: 내 아바타 카드 */
.home-card {
  width: 100%; display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
  padding: 10px 16px 10px 10px; border: 1px solid var(--line); border-radius: var(--radius-m);
  background: var(--paper); color: var(--ink); text-align: left;
}
.home-card:hover { border-color: var(--navy); }
.home-card-av svg { display: block; width: 76px; height: 76px; }
.home-card-info { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 4px; }
.home-card-info strong { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-card-go { font-size: 14px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.home-card-go::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg) translateY(-1px); }

/* 게임: 점수판 머리글 아바타 (자리 색 테두리) */
.ph .mini-av.ring { box-shadow: 0 0 0 3px var(--pc, var(--line)); margin: 3px 0 2px; }
.turn .mini-av { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.tray-hint.with-av { display: flex; align-items: center; justify-content: center; gap: 10px; }
.tray-hint.with-av .mini-av { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); animation: think 1.6s ease-in-out infinite; }
@keyframes think { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* 처음 로그인: 캐릭터 고르기 */
.pick-char { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 2px 0 14px; }
.pick {
  display: grid; justify-items: center; gap: 4px; padding: 8px 2px 6px;
  border: 2px solid var(--line); border-radius: var(--radius-m); background: var(--paper); color: var(--ink);
  font-size: 13px; font-weight: 700;
}
.pick-art svg { display: block; width: 56px; height: 56px; }
.pick[aria-checked="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: color-mix(in srgb, var(--signal-yellow) 16%, var(--paper)); }

/* ---------- 관전 ---------- */
.turn .tag.watch { flex-shrink: 0; margin-left: 4px; background: var(--sail); color: var(--ink-soft); font-size: 11px; padding: 2px 7px; }
#sit-down { margin-top: 4px; }

/* ---------- 관전 응원 ---------- */
.cheer-row { display: grid; grid-template-columns: repeat(min(var(--n, 2), 3), minmax(0, 1fr)); gap: 8px; }
.btn-cheer {
  min-height: 60px; padding: 8px 10px; gap: 8px;
  background: var(--paper); color: var(--ink); font-size: 16px;
  border-radius: var(--radius-m);
  box-shadow: inset 0 0 0 2px var(--pc), 0 3px 0 var(--pc);
  transition: transform .12s ease;
}
.btn-cheer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-cheer:active, .btn-cheer.cooling { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--pc); }
.btn-cheer.cooling { opacity: .7; }
.pen.gold { --pc: var(--signal-yellow); }
.cheer-burst { position: fixed; z-index: 16; width: 0; height: 0; pointer-events: none; }
.cheer-burst .pen {
  position: absolute; left: -7px; top: -5px; width: 14px; height: 10px;
  animation: burst 1.3s cubic-bezier(.15, .75, .35, 1) var(--delay, 0ms) both;
}
@keyframes burst {
  0% { transform: translate(0, 0) scale(.3) rotate(0); opacity: 1; }
  65% { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--turn) * .7)); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 40px)) rotate(var(--turn)); opacity: 0; }
}
.cheer-burst .shout {
  position: absolute; left: 0; top: -14px;
  font-family: var(--display); font-size: 26px; line-height: 1; white-space: nowrap;
  color: var(--pc); -webkit-text-stroke: 5px var(--paper); paint-order: stroke fill;
  animation: shout 1.5s ease-out both;
}
@keyframes shout {
  0% { transform: translate(-50%, 6px) scale(.5); opacity: 0; }
  18% { transform: translate(-50%, -18px) scale(1.12); opacity: 1; }
  30% { transform: translate(-50%, -16px) scale(1); }
  75% { opacity: 1; }
  100% { transform: translate(-50%, -40px); opacity: 0; }
}