/* 현생 OFF 테마 (2026-10-30): 화면 전체의 분위기를 한 벌로 맞추는 마지막 층.
   - 바탕은 거의 검정에 가까운 잉크색, 면은 얇은 선으로만 나눈다(유리·안개 효과 제거).
   - 강조색은 보라 하나. 연두(signal)는 접속·준비 같은 "살아 있음" 표시에만, 금색은 coin에만 쓴다.
   - 버튼은 한 가지 모양: 기본(어두운 면) · primary(보라) · danger(빨강). 눌렀을 때 짧게 줄어든다.
   게임판 자체(카드, 타일, 보드)는 게임별 파일이 그대로 그린다. 여기서는 그 주변의 틀만 바꾼다.
   index.html에서 다른 모든 스타일 뒤에 불러온다. 문서 전체를 다시 계산하게 만드는 has 선택자는 쓰지 않는다(scripts/test-no-document-has.mjs). */

:root {
  --ink-0:#07080b;
  --ink-1:#0e1015;
  --ink-2:#14171e;
  --ink-3:#1b1f28;
  --ink-4:#232835;
  --hair:#ffffff12;
  --hair-2:#ffffff1f;
  --text-1:#eef0f5;
  --text-2:#a3a9b7;
  --text-3:#6b7180;
  --violet:#7c6cff;
  --violet-hi:#958aff;
  --violet-lo:#7c6cff24;
  --signal:#c6ff4a;
  --gold:#ffcf5a;
  --red:#ff5c72;
  --ease-snap:cubic-bezier(.2,.9,.25,1);

  /* 기존 토큰을 새 값으로 */
  --bg:var(--ink-0);
  --surface:var(--ink-1);
  --surface-2:var(--ink-2);
  --surface-3:var(--ink-3);
  --line:#262a35;
  --line-soft:var(--hair);
  --text:var(--text-1);
  --muted:var(--text-2);
  --accent:var(--violet);
  --accent-2:var(--signal);
  --danger:var(--red);
  --gs-surface:var(--ink-1);
  --gs-surface-2:var(--ink-2);
  --gs-line:var(--hair-2);
  --gs-text:var(--text-1);
  --gs-text-dim:var(--text-2);
  --gs-accent:var(--violet);
  --gs-danger:var(--red);

  /* 라틴 글꼴을 먼저 둔다: 한글 글꼴(맑은 고딕)이 영문까지 그리면 글자 폭이 넓어져 줄바꿈과 배치가 바뀐다.
     Windows Chrome은 -apple-system·BlinkMacSystemFont를 시스템 글꼴(맑은 고딕)로 바꾸므로 "Segoe UI"가 그보다 앞에 와야 한다. */
  font-family:Inter,"Pretendard Variable",Pretendard,"Segoe UI",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  color:var(--text-1);
  background:var(--ink-0);
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}

/* 바탕: 위쪽에 아주 옅은 보라 빛 하나, 나머지는 잉크. 격자 무늬는 점 무늬로 줄인다. */
body {
  background:
    radial-gradient(120% 60% at 50% -18%,#7c6cff1f 0,transparent 60%),
    var(--ink-0);
  background-attachment:fixed;
}
body::before {
  opacity:.5;
  background-image:radial-gradient(#ffffff0d 1px,transparent 1.2px);
  background-size:22px 22px;
  mask-image:linear-gradient(to bottom,#000,transparent 70%);
}
::selection { background:#7c6cff66; color:#fff; }

/* 숫자는 자리가 흔들리지 않게 */
.coin-wallet strong,#timer,.mine-led,[class*="score"],[class*="count"],[class*="price"] { font-variant-numeric:tabular-nums; }

/* 제목 */
h1,h2,h3 { letter-spacing:-.03em; }
.eyebrow { color:var(--violet-hi); font-size:10px; font-weight:800; letter-spacing:.2em; }
header b { color:var(--text-1); text-shadow:none; }

/* 면 */
.panel {
  border:1px solid var(--hair);
  border-radius:16px;
  background:var(--ink-1);
  box-shadow:0 1px 0 #ffffff08 inset,0 24px 48px -24px #000c;
  /* backdrop-filter는 끄지 않는다: 휴대폰 대기방의 방 버튼(position:fixed)이 이 면을 기준으로 놓이도록 원래 스타일이 기대고 있다.
     끄면 버튼이 화면 맨 위로 올라가 관전 전환 버튼을 가린다(test-rummikub-browser). */
}
.auth { border-color:var(--hair-2); box-shadow:0 1px 0 #ffffff0a inset,0 40px 90px -30px #000; }
.auth::before { height:2px; background:linear-gradient(90deg,transparent,var(--violet),transparent); }

/* 입력 */
button,input,select,textarea {
  border-color:#262a35;
  border-radius:10px;
  color:var(--text-1);
  background:var(--ink-2);
  transition:border-color .12s ease,background-color .12s ease,color .12s ease,box-shadow .12s ease,transform .09s var(--ease-snap);
}
input,select,textarea { background:#0b0d11; }
input::placeholder,textarea::placeholder { color:var(--text-3); }
input:focus,select:focus,textarea:focus { border-color:var(--violet); background:#0b0d11; box-shadow:0 0 0 3px var(--violet-lo); }

/* 버튼: 한 가지 모양 */
/* 글자 굵기는 바꾸지 않는다: 버튼 폭이 넓어지면 방 머리글 버튼이 줄을 넘어 관전 전환 버튼을 가린다(test-rummikub-browser). */
button { background:var(--ink-2); }
button:hover:not(:disabled) { border-color:#353b4a; background:var(--ink-3); transform:none; }
button:active:not(:disabled) { transform:scale(.97); }
button:focus-visible { outline:2px solid var(--violet-hi); outline-offset:2px; }
.primary,button.primary {
  border-color:transparent;
  color:#fff;
  background:var(--violet);
  box-shadow:0 1px 0 #ffffff33 inset,0 8px 20px -8px #7c6cffaa;
  font-weight:750;
}
.primary:hover:not(:disabled) { border-color:transparent; background:var(--violet-hi); }
.danger { border-color:#ff5c7240; color:#ff8b9b; background:#ff5c7212; }
.danger:hover:not(:disabled) { border-color:#ff5c7280; background:#ff5c7222; }
.link { color:var(--violet-hi); }
.error { color:#ff8b9b; }

/* 상단 막대 */
.coin-wallet { border-color:#ffcf5a33; color:var(--gold); background:#ffcf5a0d; }
.coin-wallet strong { color:var(--gold); }
#system-inbox-button,#open-settings { border-color:#262a35; color:var(--text-1); background:var(--ink-2); }
#daily-quest-button { border-color:#262a35; color:var(--text-1); background:var(--ink-2); }
#daily-quest-button.has-claimable { border-color:#c6ff4a88; box-shadow:0 0 0 3px #c6ff4a1a; }
#system-inbox-badge { border-color:var(--ink-0); background:var(--red); box-shadow:none; }
#system-inbox-button.attention { border-color:#ff5c72aa; background:#ff5c7226; box-shadow:none; }

/* 로비 */
.section-title h2 { font-size:22px; font-weight:800; }
.game-guide-button,.patch-note-button,.onboarding-open,#open-game-rules,#open-patch-notes,#open-onboarding {
  border-color:#262a35;
  color:var(--text-1);
  background:var(--ink-2);
  box-shadow:none;
}
.golden-slot-button,#open-slot {
  border-color:#ffcf5a55;
  color:var(--gold);
  background:#ffcf5a12;
  box-shadow:none;
  text-shadow:none;
}
.golden-slot-button:hover:not(:disabled),#open-slot:hover:not(:disabled) { border-color:#ffcf5a99; background:#ffcf5a1f; }
.room-card {
  border-color:var(--hair);
  border-radius:14px;
  background:var(--ink-2);
  box-shadow:none;
}
.room-card:hover { border-color:#353b4a; background:var(--ink-3); transform:none; }
.room-watch-button { border-color:#262a35; color:var(--text-1); background:var(--ink-3); }
.room-watch-button:hover:not(:disabled) { border-color:#353b4a; background:var(--ink-4); box-shadow:none; }
.rooms > p,.rooms > .empty,#rooms:empty::before { color:var(--text-3); }

.online-button { border-color:#c6ff4a33; color:var(--signal); background:#c6ff4a10; }
.messages { border-color:var(--hair); background:#0b0d11; }
.messages > div { border:0; border-left:2px solid var(--violet); border-radius:8px; color:var(--text-1); background:var(--ink-2); }
.messages b { color:var(--violet-hi); }
.messages > div.system-message { border-left-color:#5b6272; color:var(--text-2); background:transparent; }
.messages > div.system-message b { color:var(--text-2); }
.messages .whisper-message { border-left-color:#e48cff; background:#e48cff10; }
.messages .whisper-message b { color:#f0b4ff; }

.lobby-marketplace-button {
  border-color:var(--hair);
  background:var(--ink-1);
  box-shadow:none;
}
.lobby-marketplace-button:hover { border-color:#353b4a; box-shadow:none; }
.lobby-marketplace-button>span:first-child { border-color:var(--hair-2); background:var(--ink-3); }
.lobby-marketplace-button b { color:var(--text-1); }
.lobby-marketplace-button small { color:var(--text-3); }
.lobby-marketplace-button em { border-color:#c6ff4a33; color:var(--signal); background:#c6ff4a10; }
.lobby-shortcuts button {
  border-color:var(--hair);
  background:var(--ink-1);
  box-shadow:none;
}
.lobby-shortcuts button::before { opacity:.07; }
.lobby-shortcuts button:hover { border-color:#353b4a; box-shadow:none; transform:none; }
.lobby-shortcuts button:hover::before { opacity:.14; }

/* 대화상자 */
dialog {
  border:1px solid var(--hair-2);
  border-radius:18px;
  color:var(--text-1);
  background:var(--ink-1);
  box-shadow:0 1px 0 #ffffff0a inset,0 40px 100px -20px #000;
}
dialog::backdrop { background:#040508cc; backdrop-filter:blur(6px); }
.dialog-close { border-color:#262a35; background:var(--ink-2); }

/* 공개 페이지 바닥글 */
.public-site-footer { border-top-color:var(--hair); color:var(--text-3); }
.public-site-footer a { color:var(--text-2); }

@media (prefers-reduced-motion: reduce) {
  button:active:not(:disabled) { transform:none; }
}

/* 더 구체적인 기존 규칙을 덮는 부분 */
.game-guide-button,.patch-note-button { border-color:#262a35!important; color:var(--text-1)!important; background:var(--ink-2)!important; box-shadow:none!important; }
.game-guide-button:hover:not(:disabled),.patch-note-button:hover:not(:disabled) { border-color:#353b4a!important; background:var(--ink-3)!important; }
#lobby-chat,#room-chat,.messages { border-color:var(--hair); background:#0b0d11; }
#lobby-chat>.chat-mentioned,#room-chat>.chat-mentioned { border-color:#958aff66; border-left-color:var(--violet-hi); background:#7c6cff1c; }
.guest-notice,.guest-quick-play { border-color:var(--hair-2); color:var(--text-2); background:var(--ink-2); }
.guest-quick-play p { color:var(--text-2); }
html.mobile-layout body.has-lobby:not(#_) #open-create { border-color:transparent; background:var(--violet); box-shadow:0 1px 0 #ffffff33 inset,0 6px 16px -6px #7c6cffaa; }

/* 방 화면 */
.room-spectator-panel { border-color:var(--hair); background:var(--ink-1); }
.room-spectator-panel>section { border-color:var(--hair); background:#0b0d11; }
.room-spectator-panel>section>header>span { border-color:var(--hair-2); color:var(--text-2); background:var(--ink-2); }
.room-spectator-toggle { border-color:#262a35; color:var(--text-1); background:var(--ink-2); box-shadow:none; }
.room-spectator-toggle:hover:not(:disabled) { border-color:#353b4a; background:var(--ink-3); box-shadow:none; }
.room-spectator-toggle.join-mode { border-color:transparent; color:#fff; background:var(--violet); }
.room-friend-button,.room-my-room-button { border-color:var(--hair); background:var(--ink-2); box-shadow:none; }
.room-friend-button:hover:not(:disabled),.room-my-room-button:hover { border-color:#353b4a; background:var(--ink-3); box-shadow:none; }
.room-friend-button small { color:var(--text-3); }
.onboarding-nudge { border-color:var(--hair-2); background:var(--ink-2); box-shadow:inset 2px 0 0 var(--violet); }
.waiting-participants { border-color:var(--hair); background:#0b0d11; }
@media (min-width:851px) {
  .waiting-participants .player { border-color:var(--hair); background:var(--ink-2); }
  .waiting-participants .player.inspectable:hover { border-color:#353b4a; background:var(--ink-3); }
}
.waiting-participants .player-empty:hover,.waiting-participants .player-empty:focus-visible { border-color:#7c6cff88; color:var(--violet-hi); background:#7c6cff12; box-shadow:none; }

/* 마감: 얇은 스크롤바, 짧은 등장 효과, 방 카드 강조 */
* { scrollbar-width:thin; scrollbar-color:#2a2f3b transparent; }
/* 면(.panel)에는 넣지 않는다: 방 화면이 다시 그려질 때마다 등장 효과가 재생되어 오른쪽 클릭 메뉴가 가려졌다(test-room-management-browser). */
dialog[open] { animation:theme-enter .18s var(--ease-snap) both; }
@keyframes theme-enter { from { opacity:0; transform:translateY(4px); } }
.room-card:hover { border-color:#7c6cff66; box-shadow:inset 2px 0 0 var(--violet); }
.room-card b,.room-card strong { letter-spacing:-.02em; }

@media (prefers-reduced-motion: reduce) {
  dialog[open] { animation:none; }
}

/* 로비 방 목록: 게임별 색 띠, 인원 막대, 진행 중 표시, 빈 목록 안내 */
.room-card { position:relative; overflow:hidden; padding-left:18px; --room-accent:var(--violet); }
.room-card::before { content:""; position:absolute; top:12px; bottom:12px; left:0; width:3px; border-radius:0 3px 3px 0; background:var(--room-accent); }
.room-card:hover { box-shadow:none; }
.room-card[data-game="minesweeper"] { --room-accent:#a78bfa; }
.room-card[data-game="applegame"] { --room-accent:#ff6b5b; }
.room-card[data-game="tetris"] { --room-accent:#3fd0ff; }
.room-card[data-game="poker"],.room-card[data-game="sevenpoker"] { --room-accent:#34d399; }
.room-card[data-game="wordchain"] { --room-accent:#60a5fa; }
.room-card[data-game="yutnori"] { --room-accent:#f5a524; }
.room-card[data-game="worldmarble"] { --room-accent:#38bdf8; }
.room-card[data-game="territory"] { --room-accent:#c6ff4a; }
.room-card[data-game="skybattle"] { --room-accent:#7dd3fc; }
.room-card[data-game="rummikub"] { --room-accent:#fb7185; }
.room-card .badge { color:var(--room-accent); }
.room-card-fill { display:block; width:min(160px,100%); height:3px; margin-top:8px; overflow:hidden; border-radius:999px; background:var(--ink-4); }
.room-card-fill::after { content:""; display:block; width:calc(var(--fill,0) * 100%); height:100%; border-radius:inherit; background:var(--room-accent); transition:width .3s var(--ease-snap); }
.room-card[data-phase="playing"] .badge::after { content:"LIVE"; display:inline-block; margin-left:7px; padding:1px 6px; border-radius:999px; color:#0b0d11; background:var(--signal); font-size:9px; font-weight:900; letter-spacing:.08em; vertical-align:1px; animation:room-live 1.6s ease-in-out infinite; }
@keyframes room-live { 50% { opacity:.55; } }

.rooms-empty { display:grid; justify-items:center; gap:6px; margin:6vh auto 0; padding:28px 20px; max-width:340px; border:1px dashed var(--hair-2); border-radius:16px; color:var(--text-2); text-align:center; }
.rooms-empty-icon { display:grid; width:52px; height:52px; margin-bottom:4px; place-items:center; border:1px solid var(--hair-2); border-radius:14px; background:var(--ink-2); font-size:26px; }
.rooms-empty b { color:var(--text-1); font-size:15px; font-weight:750; }
.rooms-empty small { color:var(--text-3); font-size:12px; }
.rooms-empty .primary { min-height:40px; margin-top:8px; padding:8px 16px; }

@media (prefers-reduced-motion: reduce) {
  .room-card[data-phase="playing"] .badge::after { animation:none; }
}
html.mobile-layout .rooms-empty { margin:2vh auto 0; padding:18px 16px; }
html.mobile-layout .rooms-empty .primary { display:none; }

/* 결과 창: 1위 띠, 1~3위 표시, 내 줄 강조 */
.result-winner { position:relative; display:flex; align-items:center; gap:10px; margin:0 0 10px; padding:12px 14px; overflow:hidden; border:1px solid #ffcf5a55; border-radius:12px; background:linear-gradient(100deg,#ffcf5a1f,#ffcf5a08 60%); }
.result-winner::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,#ffffff26 50%,transparent 70%); transform:translateX(-100%); animation:result-shine 1.4s .25s var(--ease-snap) both; pointer-events:none; }
@keyframes result-shine { to { transform:translateX(100%); } }
.result-winner span { font-size:26px; line-height:1; animation:result-pop .45s var(--ease-snap) both; }
@keyframes result-pop { from { transform:scale(.4) rotate(-12deg); opacity:0; } 70% { transform:scale(1.15); } }
.result-winner b { min-width:0; overflow:hidden; color:var(--gold); font-size:17px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.result-winner small { margin-left:auto; padding:3px 8px; border-radius:999px; color:#1a1405; background:var(--gold); font-size:10px; font-weight:900; letter-spacing:.04em; }
#results table { border-collapse:separate; border-spacing:0 3px; }
#results th { color:var(--text-3); font-weight:700; }
#results tbody td { background:var(--ink-2); }
#results tbody td:first-child { border-radius:8px 0 0 8px; font-weight:850; }
#results tbody td:last-child { border-radius:0 8px 8px 0; }
#results tr.result-rank-1 td { background:#ffcf5a14; }
#results tr.result-rank-1 td:first-child { color:var(--gold); }
#results tr.result-rank-2 td:first-child { color:#d7dbe4; }
#results tr.result-rank-3 td:first-child { color:#e0a26b; }
#results tr.is-me td { box-shadow:inset 0 1px 0 #7c6cff55,inset 0 -1px 0 #7c6cff55; }
#results tr.is-me td:first-child { box-shadow:inset 2px 0 0 var(--violet),inset 0 1px 0 #7c6cff55,inset 0 -1px 0 #7c6cff55; }
@media (prefers-reduced-motion: reduce) { .result-winner::after,.result-winner span { animation:none; } }