/* ============================================================
   CRYPTO ARCADE  //  UI theme
   Cute Arcade Design System v2 — Mochi Coin Crew
   토큰 단일 출처. 텍스트는 반드시 *-text, 면·테두리는 *-surface.
   ============================================================ */

:root{
  /* ---- Background & surface ---- */
  --ca-bg:#eff8ff;
  --ca-bg-warm:#fff8e8;
  --ca-surface:#ffffff;
  --ca-surface-blue:#f4faff;
  --ca-surface-cream:#fffdf6;
  --ca-line:#bfd7f1;
  --ca-line-strong:#7fb0e2;

  /* ---- Neutral text ---- */
  --ca-ink:#1c3553;
  --ca-ink-muted:#526a85;
  --ca-outline:#27466f;

  /* ---- Orange / core action ---- */
  --ca-orange-surface:#ffb43b;
  --ca-orange-soft:#fff0bd;
  --ca-orange-text:#7a3e00;

  /* ---- Cyan / info & sealed ---- */
  --ca-cyan-surface:#55d9ee;
  --ca-cyan-soft:#dffaff;
  --ca-cyan-text:#00627a;

  /* ---- Violet / AI & secondary ---- */
  --ca-violet-surface:#b29af7;
  --ca-violet-soft:#eee9ff;
  --ca-violet-text:#5538a8;

  /* ---- Green / ready & escape ---- */
  --ca-green-surface:#74dc98;
  --ca-green-soft:#e6faec;
  --ca-green-text:#126633;

  /* ---- Red / danger ---- */
  --ca-red-surface:#ff7089;
  --ca-red-soft:#ffe5ea;
  --ca-red-text:#9c1b36;

  /* 채도 높은 *-surface 위의 라벨 전용.
     원 토큰(--ca-cyan-text 4.14:1 / --ca-green-text 4.18:1)이 § 10.1 의 4.5:1 에
     못 미쳐, 면 위에서만 한 단계 어둡게 쓴다. 흰 배경 텍스트는 원 토큰 그대로. */
  --ca-cyan-on:#005567;    /* cyan-surface 위 5.03:1 */
  --ca-green-on:#0f5a2c;   /* green-surface 위 4.94:1 */

  /* ---- UI 킷 팔레트 (8색) ---- */
  --k-cream:#f7efdb;
  --k-blue:#5cc6f0;
  --k-teal:#45cbc0;
  --k-purple:#a17ceb;
  --k-orange:#f5894a;
  --k-gold:#ffc93c;
  --k-red:#e8483f;
  --k-navy:#22304c;
  --k-navy-2:#2c3d5e;
  --k-navy-line:#16223a;

  /* 킷 기준 진한 카드 위 텍스트 */
  --k-on-navy:#ffffff;
  --k-on-navy-dim:#9db0cd;

  --ca-yellow:#ffc83d;
  --ca-shadow-rgb:69 103 145;

  /* ---- Spacing / radius ---- */
  --ca-space-1:4px;  --ca-space-2:6px;  --ca-space-3:8px;
  --ca-space-4:12px; --ca-space-5:16px; --ca-space-6:22px; --ca-space-7:26px;
  --ca-radius-xs:5px; --ca-radius-sm:8px;  --ca-radius-md:12px;
  --ca-radius-lg:16px; --ca-radius-xl:22px; --ca-radius-pill:999px;

  /* ---- Shadow ---- */
  --ca-shadow-panel:0 18px 44px rgb(var(--ca-shadow-rgb) / .16);
  --ca-shadow-card:0 8px 20px rgb(var(--ca-shadow-rgb) / .14);
  --ca-shadow-button:0 5px 0 #31577f,0 10px 18px rgb(var(--ca-shadow-rgb) / .16);
  --ca-shadow-board:0 0 0 2px #fff,0 0 0 3px #8db8e1,0 22px 56px rgb(var(--ca-shadow-rgb) / .22);

  --ca-mono:ui-monospace,SFMono-Regular,Consolas,"D2Coding","Nanum Gothic Coding",monospace;
  --ca-sans:Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;

  /* ---- 레거시 별칭 : 기존 셀렉터를 그대로 두고 값만 v2 로 흘려보낸다 ---- */
  --bg:var(--ca-bg);
  --bg2:var(--ca-surface);
  --panel:var(--ca-surface);
  --line:var(--ca-line);
  --line2:var(--ca-line-strong);
  --txt:var(--ca-ink);
  --dim:var(--ca-ink-muted);
  --gold:var(--ca-orange-text);
  --gold-bright:var(--ca-orange-surface);
  --cyan:var(--ca-cyan-text);
  --violet:var(--ca-violet-text);
  --green:var(--ca-green-text);
  --red:var(--ca-red-text);
  --mono:var(--ca-mono);
  --sans:var(--ca-sans);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--txt);
  background:
    radial-gradient(1000px 640px at 14% -8%,var(--ca-bg-warm) 0%,transparent 58%),
    radial-gradient(880px 600px at 88% 0%,#e2f6ff 0%,transparent 58%),
    linear-gradient(180deg,#f7fcff 0%,var(--ca-bg) 100%);
  background-attachment:fixed;
  font-family:var(--sans);overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
  background:radial-gradient(130% 95% at 50% 0%,transparent 58%,rgb(var(--ca-shadow-rgb) / .09) 100%);
}

#app{height:100%;position:relative}
.screen{
  position:absolute;inset:0;display:none;
  padding:16px;overflow:auto;
}
/* align-items:center 를 쓰면 내용이 화면보다 클 때 위쪽이 잘리고 스크롤로도 닿지 않는다.
   자식에 margin:auto 를 주면 중앙정렬은 유지하면서 넘칠 때 스크롤이 정상 동작한다. */
.screen.show{display:flex}
.title-wrap,.lobby,.game-wrap{margin:auto}

/* ---------------- 타이틀 ---------------- */
.title-wrap{width:min(760px,100%);text-align:center}

.chain-strip{
  height:22px;margin-bottom:18px;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;color:rgba(10,158,194,.5);
  white-space:nowrap;line-height:22px;
}

.logo{margin:0 0 22px;line-height:1}
.logo-crypto,.logo-arcade{
  font-family:var(--mono);font-weight:800;letter-spacing:.02em;
  font-size:clamp(34px,8vw,64px);display:inline-block;
}
.logo-crypto{color:var(--ca-orange-surface);-webkit-text-stroke:3px var(--ca-outline);paint-order:stroke fill;text-shadow:0 5px 0 rgb(var(--ca-shadow-rgb) / .18)}
.logo-arcade{color:var(--ca-cyan-surface);-webkit-text-stroke:3px var(--ca-outline);paint-order:stroke fill;text-shadow:0 5px 0 rgb(var(--ca-shadow-rgb) / .18);margin-left:.25em}
.logo-sub{
  display:block;margin-top:10px;font-style:normal;font-family:var(--mono);
  font-size:12px;letter-spacing:.28em;color:var(--dim);
}

.panel{
  background:var(--ca-surface);border:2px solid var(--ca-line);border-radius:var(--ca-radius-xl);
  padding:var(--ca-space-6);
  box-shadow:var(--ca-shadow-panel);
}
.field{display:block;text-align:left;margin-bottom:16px}
.field-label{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  color:var(--dim);margin-bottom:7px;
}
input{
  width:100%;height:46px;padding:0 14px;border-radius:var(--ca-radius-md);
  background:var(--ca-surface);border:2px solid var(--ca-line-strong);color:var(--ca-ink);
  font-family:var(--ca-mono);font-size:15px;font-weight:600;outline:none;
  transition:border-color 140ms ease-out,box-shadow 140ms ease-out;
}
input::placeholder{color:#9db4cc;font-weight:500}
input:focus{border-color:var(--ca-cyan-surface);box-shadow:0 0 0 3px var(--ca-cyan-soft)}
input.error{border-color:var(--ca-red-surface);box-shadow:0 0 0 3px var(--ca-red-soft)}

.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
/* Jelly Button — 누르면 4px 내려앉고 하단 굽이 사라진다 */
.btn{
  cursor:pointer;min-height:44px;
  border:2px solid var(--ca-outline);border-radius:13px;
  background:var(--ca-surface);color:var(--ca-ink);padding:11px 14px;
  font:800 14px/1.15 var(--ca-sans);
  display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;
  box-shadow:var(--ca-shadow-button);
  transform:translateY(0);
  transition:transform 140ms ease-out,filter 140ms ease-out;
}
.btn b{font-size:15px;font-weight:800}
.btn i{font-style:normal;font-size:11px;font-weight:600;opacity:.72}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #31577f}
.btn:disabled{opacity:.42;filter:saturate(.35);cursor:not-allowed;transform:none;box-shadow:none}
/* 킷 버튼 — 색 채움 + 흰 글자 + 두꺼운 흰 테두리 */
.btn-primary,.btn-cyan,.btn-ready,.btn-danger{
  color:#fff;border-color:rgba(255,255,255,.9);
  text-shadow:0 1px 0 rgb(var(--ca-shadow-rgb) / .45);
}
.btn-primary i,.btn-cyan i,.btn-ready i,.btn-danger i{color:rgb(255 255 255 / .85)}
.btn-primary{background:linear-gradient(180deg,#f9a063,var(--k-orange));box-shadow:0 5px 0 #c25f26,0 10px 18px rgb(var(--ca-shadow-rgb) / .18)}
.btn-cyan   {background:linear-gradient(180deg,#79d4f5,var(--k-blue));box-shadow:0 5px 0 #2b8fbd,0 10px 18px rgb(var(--ca-shadow-rgb) / .18)}
.btn-ready  {background:linear-gradient(180deg,#8fdc7a,#5cb85c);box-shadow:0 5px 0 #3a8340,0 10px 18px rgb(var(--ca-shadow-rgb) / .18)}
.btn-danger {background:linear-gradient(180deg,#f0716a,var(--k-red));box-shadow:0 5px 0 #a92d26,0 10px 18px rgb(var(--ca-shadow-rgb) / .18)}
.btn-primary:active,.btn-cyan:active,.btn-ready:active,.btn-danger:active{box-shadow:0 1px 0 rgb(var(--ca-shadow-rgb) / .5)}
/* CANCEL 계열 — 흰 바탕 + 진한 글자 */
.btn-ghost{background:#fff;color:var(--ca-ink);border-color:var(--ca-outline)}
/* 비활성 : 채도를 빼고 옅게 */
.btn:disabled{opacity:.5;filter:saturate(.2) brightness(1.12);box-shadow:none;transform:none}
.btn.big{flex-direction:row;padding:0 26px;min-height:50px;font-size:15px}

.join-row{display:grid;grid-template-columns:1fr auto;gap:10px}
.join-row input{text-transform:uppercase;letter-spacing:.3em;text-align:center}

.note{margin:14px 0 0;font-family:var(--mono);font-size:11px;color:var(--dim)}
.note.err{color:var(--red)}
.note.ok{color:var(--green)}

.howto{
  margin-top:20px;text-align:left;background:var(--ca-surface-blue);
  border:2px solid var(--ca-line);border-radius:var(--ca-radius-lg);padding:16px 18px;
}
.howto h3{margin:0 0 10px;font-size:12px;letter-spacing:.2em;color:var(--cyan);font-family:var(--mono)}
.howto ul{margin:0;padding-left:16px;font-size:13px;line-height:1.9;color:#33456a}
.howto em{color:var(--dim);font-style:normal;font-size:12px}
kbd{
  display:inline-block;min-width:22px;text-align:center;padding:1px 6px;margin:0 1px;
  background:var(--ca-surface);border:2px solid var(--ca-line-strong);border-bottom-width:3px;
  border-radius:5px;font-family:var(--mono);font-size:11px;
}
.disclaimer{margin:14px 0 0;font-size:11px;color:#7286a3;line-height:1.6}

/* ---------------- 대기실 ---------------- */
.lobby{
  width:min(980px,100%);background:var(--ca-surface);border:2px solid var(--ca-line);
  border-radius:var(--ca-radius-xl);overflow:hidden;box-shadow:var(--ca-shadow-panel);
}
.lobby-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--line);background:rgba(247,250,255,.9);
}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--dim);margin-right:8px}
.room-code{
  display:inline-block;font:900 22px/1 var(--ca-mono);color:var(--k-on-navy);
  letter-spacing:.22em;padding:7px 14px;border-radius:var(--ca-radius-md);
  background:var(--k-navy);border:2px solid var(--k-navy-line);
  box-shadow:0 3px 0 rgb(var(--ca-shadow-rgb) / .3);
}
.btn-mini{
  cursor:pointer;margin-left:10px;padding:6px 12px;border-radius:var(--ca-radius-sm);
  background:var(--ca-surface);border:2px solid var(--ca-line-strong);
  color:var(--ca-ink);font:700 12px/1 var(--ca-sans);
  transition:transform 140ms ease-out;
}
.btn-mini:hover{border-color:var(--ca-cyan-surface);color:var(--ca-cyan-text)}
.btn-mini:active{transform:translateY(2px)}
.btn-mini.danger:hover{border-color:var(--ca-red-surface);color:var(--ca-red-text)}

.lobby-body{display:grid;grid-template-columns:1fr 320px;gap:16px;padding:16px}
.seats{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.seat{
  border:2px solid var(--ca-line);border-radius:var(--ca-radius-lg);padding:14px;
  background:var(--ca-surface);min-height:112px;display:flex;flex-direction:column;gap:8px;
  box-shadow:var(--ca-shadow-card);
}
.seat.empty{
  border-style:dashed;background:rgb(255 255 255 / .55);box-shadow:none;
  justify-content:center;align-items:center;font:700 12px/1 var(--ca-mono);
  letter-spacing:.14em;color:#9db4cc;
}
.seat .who{display:flex;align-items:center;gap:10px}
.seat .dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:9px;font-weight:800;color:#2b1a00}
.seat .nm{font-weight:700;font-size:15px}
.seat .meta{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.12em}
.badge{
  align-self:flex-start;display:inline-flex;align-items:center;gap:4px;
  font:800 11px/1 var(--ca-mono);letter-spacing:.12em;
  padding:4px 9px;border-radius:var(--ca-radius-pill);
  border:2px solid var(--ca-line);background:var(--ca-surface-blue);color:var(--ca-ink-muted);
}
/* 킷 배지 — 색으로 채우고 흰 글자 + 아이콘 */
.badge.ready,.badge.host,.badge.bot{
  color:#fff;border-color:rgba(255,255,255,.85);
  box-shadow:0 3px 0 rgb(var(--ca-shadow-rgb) / .28);
  text-shadow:0 1px 0 rgb(var(--ca-shadow-rgb) / .4);
}
.badge.ready{background:linear-gradient(180deg,#8fdc7a,#5cb85c)}
.badge.host {background:linear-gradient(180deg,#ffc06a,var(--k-orange))}
.badge.bot  {background:linear-gradient(180deg,#bda2f5,var(--k-purple))}
.badge canvas{display:block}

.lobby-side{display:flex;flex-direction:column;gap:12px;min-height:0}
.settings{border:2px solid var(--ca-line);border-radius:var(--ca-radius-lg);padding:14px;background:var(--ca-surface-blue)}
.settings h3{margin:0 0 12px;font-size:11px;letter-spacing:.18em;color:var(--cyan);font-family:var(--mono)}
.settings h3 em{color:var(--dim);font-style:normal;letter-spacing:0}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;font-size:12px}
.seg{display:flex;gap:4px}
.seg button{
  cursor:pointer;padding:6px 10px;border-radius:var(--ca-radius-sm);
  font:700 11px/1 var(--ca-sans);
  background:var(--ca-surface);border:2px solid var(--ca-line);color:var(--ca-ink-muted);
  transition:transform 140ms ease-out;
}
.seg button:active{transform:translateY(2px)}
.seg button.on{background:var(--ca-orange-soft);border-color:var(--ca-orange-surface);color:var(--ca-orange-text)}
.settings.locked{opacity:.55;pointer-events:none}

.chat{flex:1;display:flex;flex-direction:column;min-height:160px;
  border:2px solid var(--ca-line);border-radius:var(--ca-radius-lg);overflow:hidden;background:var(--ca-surface-blue)}
.chat-log{flex:1;overflow-y:auto;padding:10px;font-size:12.5px;line-height:1.7}
.chat-log.small{font-size:11.5px}
.chat-log .sys{color:var(--dim);font-family:var(--mono);font-size:11px}
.chat-log .nick{font-weight:700;margin-right:5px}
.chat-in{border-top:1px solid var(--line)}
.chat-in input{border:0;border-radius:0;background:transparent;font-family:var(--sans);font-size:13px}
.chat-in input:focus{box-shadow:none}

.lobby-foot{
  display:flex;align-items:center;gap:10px;padding:14px 18px;
  border-top:1px solid var(--line);background:rgba(247,250,255,.9);
}
.hint{font-family:var(--mono);font-size:11px;color:var(--dim)}

/* ---------------- 게임 ---------------- */
.game-wrap{
  width:min(1080px,100%);display:flex;flex-direction:column;gap:10px;align-items:center;
}
.hud{
  width:100%;display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;
  background:var(--ca-surface);border:2px solid var(--ca-line);
  border-radius:var(--ca-radius-lg);padding:10px 14px;box-shadow:var(--ca-shadow-card);
}
.hud-left{display:flex;gap:8px;flex-wrap:wrap}
.hud-right{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.hud-center{text-align:center}
.timer{
  font:900 28px/1 var(--ca-mono);letter-spacing:.06em;color:var(--k-on-navy);
  padding:6px 16px;border-radius:var(--ca-radius-md);
  background:var(--k-navy);border:2px solid var(--k-navy-line);display:inline-block;
  box-shadow:0 4px 0 rgb(var(--ca-shadow-rgb) / .35);
}
.timer.warn{color:var(--k-gold)}
.timer.danger{color:#ff8a80;animation:caPulse .7s ease-in-out infinite}
@keyframes caPulse{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.timer.danger{animation:none}}
.blockinfo{
  font:800 10px/1.5 var(--ca-mono);letter-spacing:.14em;margin-top:5px;
  color:var(--ca-ink-muted);
}
.blockinfo .mode{display:block;color:var(--ca-orange-text);font-size:11px;letter-spacing:.16em}

/* 킷 HUD 카드 — 진한 네이비 + 흰 글자 */
.pcard{
  display:flex;align-items:center;gap:7px;padding:6px 10px;
  border-radius:var(--ca-radius-md);
  background:var(--k-navy);border:2px solid var(--k-navy-line);
  font:800 12px/1 var(--ca-sans);color:var(--k-on-navy);
  box-shadow:0 3px 0 rgb(var(--ca-shadow-rgb) / .35);
}
.pcard .st{color:var(--k-on-navy-dim);font-weight:700}
/* 상태 점 */
.pcard .st::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:5px;vertical-align:1px;background:#5cd07a;
}
.pcard.sealed{border-color:var(--k-blue);box-shadow:0 0 0 2px rgb(92 198 240 / .35),0 3px 0 rgb(var(--ca-shadow-rgb) / .35)}
.pcard.sealed .st{color:#8fdcff}
.pcard.sealed .st::before{background:var(--k-blue)}
.pcard.dead{background:#4a5468;border-color:#39415270;filter:grayscale(1);opacity:.62}
.pcard.dead .st::before{background:#9aa3b3}
.pcard .dot{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:8px;font-weight:800;color:#2b1a00}
.pcard .st{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.08em}

.stat-chips{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
/* 킷 스탯 칩 — 네이비 사각 카드 + 아이콘 + 숫자 */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  font:900 12px/1 var(--ca-mono);letter-spacing:.02em;
  padding:5px 9px;border-radius:var(--ca-radius-sm);
  border:2px solid var(--k-navy-line);color:var(--k-on-navy);background:var(--k-navy);
  box-shadow:0 3px 0 rgb(var(--ca-shadow-rgb) / .32);
}
.chip .lb{font:800 8px/1 var(--ca-sans);letter-spacing:.1em;color:var(--k-on-navy-dim)}
.chip canvas{display:block}
.chip.on{border-color:var(--k-navy-line)}
.chip.buff{border-color:#4aa860;box-shadow:0 0 0 1px rgb(92 208 122 / .5),0 3px 0 rgb(var(--ca-shadow-rgb) / .32)}
.chip.debuff{border-color:var(--k-red);box-shadow:0 0 0 1px rgb(232 72 63 / .5),0 3px 0 rgb(var(--ca-shadow-rgb) / .32)}
.chip.expiring{animation:caPulse .5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.chip.expiring{animation:none}}

.stage{position:relative;line-height:0;width:100%;max-width:600px}
#cv{
  border-radius:var(--ca-radius-xl);border:0;
  box-shadow:var(--ca-shadow-board);
  background:var(--ca-surface-blue);
  display:block;width:100%;max-width:600px;height:auto;touch-action:none;
}
.stage-msg{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  font-family:var(--mono);font-weight:800;text-align:center;line-height:1.4;
}
.stage-msg .big{
  display:grid;place-items:center;width:108px;height:108px;margin:0 auto;
  border-radius:50%;font-size:58px;line-height:1;color:#fff;
  background:linear-gradient(180deg,#79d4f5,var(--k-blue));
  border:5px solid #fff;
  box-shadow:0 7px 0 #2b8fbd,0 16px 30px rgb(var(--ca-shadow-rgb) / .3);
  text-shadow:0 3px 0 rgb(var(--ca-shadow-rgb) / .35);
}
.stage-msg .mid{font-size:32px;font-weight:900;color:var(--ca-cyan-surface);-webkit-text-stroke:3px var(--ca-outline);paint-order:stroke fill;letter-spacing:.08em}
/* 경고 배너 */
.stage-msg .banner{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;border-radius:var(--ca-radius-lg);
  font:900 20px/1 var(--ca-sans);letter-spacing:.04em;color:#fff;
  border:3px solid rgba(255,255,255,.92);
  box-shadow:0 6px 0 rgb(var(--ca-shadow-rgb) / .35),0 14px 26px rgb(var(--ca-shadow-rgb) / .25);
  text-shadow:0 2px 0 rgb(var(--ca-shadow-rgb) / .4);
}
.stage-msg .banner.danger{background:linear-gradient(180deg,#f0716a,var(--k-red))}
.stage-msg .banner.dead{background:linear-gradient(180deg,#8c95a6,#5f6878)}
.stage-msg .banner canvas{display:block}
.stage-msg .sub{font-size:12px;font-weight:700;color:var(--ca-ink);letter-spacing:.18em;margin-top:8px;background:rgb(255 255 255 / .82);padding:4px 10px;border-radius:var(--ca-radius-pill);display:inline-block}

.game-chat{width:100%;max-width:600px;display:flex;flex-direction:column;gap:6px}
.game-chat .chat-log{
  height:64px;background:var(--ca-surface);border:2px solid var(--ca-line);
  border-radius:10px;padding:7px 10px;
}
.game-chat input{padding:8px 12px;font-size:12px}

/* 터치 컨트롤 */
.touch{display:none;width:100%;justify-content:space-between;padding:6px 4px 14px;gap:20px}
/* ---------------- 가상 조이스틱 ---------------- */
/* 플로팅 조이스틱 —
   고정 위치를 정확히 눌러야 하는 불편을 없앤다. 이 영역 어디를 잡아도
   그 자리에 조이스틱이 생기고, 손을 떼면 대기 위치로 되돌아간다. */
.stick-zone{
  position:relative;
  flex:1 1 auto;align-self:stretch;min-height:150px;
  touch-action:none;user-select:none;-webkit-user-select:none;
  cursor:grab;
}
.stick-zone:active{cursor:grabbing}

.stick{
  --stick-size:120px;
  --knob-size:54px;
  --rest-x:calc(var(--stick-size) / 2 + 10px);
  --rest-y:50%;
  position:absolute;
  left:var(--rest-x);top:var(--rest-y);
  transform:translate(-50%,-50%);
  display:grid;place-items:center;
  width:var(--stick-size);height:var(--stick-size);
  opacity:.66;pointer-events:none;
  transition:opacity 140ms ease-out,left 200ms ease-out,top 200ms ease-out;
}
/* 잡고 있는 동안엔 위치가 즉시 따라붙어야 하므로 트랜지션을 끈다 */
.stick.active{opacity:1;transition:opacity 140ms ease-out}
@media (prefers-reduced-motion:reduce){ .stick{transition:none} }

.stick-base{
  position:relative;
  width:var(--stick-size);height:var(--stick-size);border-radius:50%;
  background:
    radial-gradient(circle at 50% 42%,rgb(255 255 255 / .96),rgb(244 250 255 / .9));
  border:2px solid var(--ca-outline);
  box-shadow:
    inset 0 3px 10px rgb(var(--ca-shadow-rgb) / .16),
    0 4px 0 #31577f,
    0 10px 20px rgb(var(--ca-shadow-rgb) / .18);
  transition:box-shadow 140ms ease-out;
}
.stick.active .stick-base{box-shadow:inset 0 3px 12px rgb(var(--ca-shadow-rgb) / .22),0 2px 0 #31577f}

/* 4방향 표시 삼각형 — 눌린 방향만 골드로 켜진다 */
.stick-dir{
  position:absolute;width:0;height:0;
  border:7px solid transparent;
  opacity:.42;transition:opacity 140ms ease-out,border-color 140ms ease-out;
}
.stick-dir-up{top:6px;left:50%;margin-left:-7px;border-bottom-color:var(--ca-line-strong);border-top-width:0}
.stick-dir-down{bottom:6px;left:50%;margin-left:-7px;border-top-color:var(--ca-line-strong);border-bottom-width:0}
.stick-dir-left{left:6px;top:50%;margin-top:-7px;border-right-color:var(--ca-line-strong);border-left-width:0}
.stick-dir-right{right:6px;top:50%;margin-top:-7px;border-left-color:var(--ca-line-strong);border-right-width:0}
.stick.dir-up .stick-dir-up,
.stick.dir-down .stick-dir-down,
.stick.dir-left .stick-dir-left,
.stick.dir-right .stick-dir-right{opacity:1}
.stick.dir-up .stick-dir-up{border-bottom-color:var(--ca-orange-surface)}
.stick.dir-down .stick-dir-down{border-top-color:var(--ca-orange-surface)}
.stick.dir-left .stick-dir-left{border-right-color:var(--ca-orange-surface)}
.stick.dir-right .stick-dir-right{border-left-color:var(--ca-orange-surface)}

.stick-knob{
  position:absolute;left:50%;top:50%;
  width:var(--knob-size);height:var(--knob-size);
  margin-left:calc(var(--knob-size) / -2);
  margin-top:calc(var(--knob-size) / -2);
  border-radius:50%;
  background:linear-gradient(180deg,#ffffff,#e8f2ff);
  border:2px solid var(--ca-outline);
  box-shadow:0 3px 0 #31577f,0 6px 12px rgb(var(--ca-shadow-rgb) / .22);
  transition:background 140ms ease-out;
  will-change:transform;
}
.stick.active .stick-knob{
  background:linear-gradient(180deg,var(--ca-orange-soft),var(--ca-orange-surface));
}
/* 노브 가운데 손잡이 표시 */
.stick-knob::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:12px;height:12px;border-radius:50%;
  background:rgb(var(--ca-shadow-rgb) / .22);
}
@media (prefers-reduced-motion:reduce){
  .stick-base,.stick-knob,.stick-dir{transition:none}
}
.acts{display:flex;gap:10px;align-items:flex-end}
.touch button{
  width:58px;height:58px;border-radius:14px;font-size:16px;font-weight:700;
  background:var(--ca-surface);border:2px solid var(--ca-outline);color:var(--ca-ink);
  box-shadow:0 4px 0 #31577f;
  user-select:none;-webkit-user-select:none;touch-action:none;
  transition:transform 140ms ease-out;
}
.touch button:active{background:var(--ca-orange-soft);transform:translateY(3px);box-shadow:0 1px 0 #31577f}
.act-bomb{background:var(--ca-orange-surface)!important;color:var(--ca-orange-text)!important}
.act-throw{font-size:13px!important}
body.touchmode .touch{display:flex}

/* 결과 */
.result-overlay{
  position:absolute;inset:0;display:none;place-items:center;z-index:20;
  background:rgb(239 248 255 / .84);backdrop-filter:blur(6px);
}
.result-overlay.show{display:grid}
.result-card{
  width:min(460px,92vw);background:var(--panel);border:1px solid var(--line2);
  border-radius:var(--ca-radius-xl);padding:var(--ca-space-7);text-align:center;
  border:2px solid var(--ca-line);
  box-shadow:var(--ca-shadow-panel);
}
.result-card h2{
  margin:0 0 18px;font-family:var(--mono);font-size:22px;letter-spacing:.14em;color:var(--gold);
}
.result-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.rrow{
  display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;
  padding:10px 12px;border-radius:var(--ca-radius-md);background:var(--ca-surface);border:2px solid var(--ca-line);
  font-size:13px;text-align:left;
}
.rrow.win{border-color:var(--ca-orange-surface);background:var(--ca-orange-soft)}
.rrow .rk{font:900 14px/1 var(--ca-mono);color:var(--ca-ink-muted)}
.rrow.win .rk{color:var(--gold)}
.rrow .sc{font-family:var(--mono);font-size:11px;color:var(--dim)}
.result-note{margin:0;font-family:var(--mono);font-size:11px;color:var(--dim)}

/* ---------------- 좁은 화면 ---------------- */
@media (max-width:900px){
  .lobby-body{grid-template-columns:1fr}
  .hud{grid-template-columns:1fr;gap:6px;text-align:center;padding:8px 10px}
  .hud-left,.hud-right{justify-content:center}
  .game-wrap{gap:8px}
  .timer{font-size:22px}
  .pcard{padding:4px 7px;font-size:11px;gap:5px}
  .pcard .dot{width:17px;height:17px;font-size:7px}
  .chip{font-size:9px;padding:3px 7px}
  .game-chat .chat-log{height:46px}
  .game-chat input{padding:6px 10px}
}

/* 휴대폰 세로 — 보드와 조작 패드가 한 화면에 들어와야 한다 */
@media (max-width:480px){
  .screen{padding:8px}
  .hud{padding:6px 8px;border-radius:10px}
  .blockinfo{display:none}          /* 장식 정보 — 공간 확보 우선 */
  .pcard .st{display:none}          /* 상태는 테두리·그레이스케일로 이미 보인다 */
  .timer{font-size:20px}
  .game-chat .chat-log{height:34px;flex:0 0 auto}
  .touch{padding:2px 0 8px;gap:12px}
  .stick{--stick-size:106px;--knob-size:48px}
  .stick-zone{min-height:132px}
  .touch button{width:54px;height:54px;border-radius:12px}
  .stage-msg .big{font-size:44px}
  .stage-msg .mid{font-size:16px}
  .stage-msg .sub{font-size:10px}
  .logo-sub{letter-spacing:.16em}
  .btn-row{grid-template-columns:1fr}
  .lobby-body{padding:12px;gap:12px}
  .seats{grid-template-columns:1fr}
  .seat{min-height:auto;padding:10px}
}

/* 세로 공간이 부족한 기기 — 보드와 조작 패드가 최우선 */
@media (max-height:660px){
  .game-chat{display:none}
  .screen{height:100dvh}
  .hud{padding:5px 8px}
  .touch{padding:0 0 6px}
}

/* 가로 모드 — 조작 패드를 보드 양옆으로 보낸다.
   아래에 두면 세로 공간을 잡아먹어 패드가 화면 밖으로 밀려난다. */
/* ============================================================
   모바일 가로 — 배그 모바일식 오버레이 레이아웃
   컨트롤이 자리를 "차지"하지 않고 화면 위에 떠 있다.
   덕분에 보드가 화면 높이를 꽉 채운다.

   터치 기기(body.touchmode)에만 적용한다. pointer:coarse 는 기기·에뮬레이터마다
   보고값이 달라 신뢰할 수 없어서, JS 가 직접 붙이는 클래스를 기준으로 삼는다.
   ============================================================ */
@media (orientation:landscape) and (max-height:600px){
  body.touchmode .screen{padding:0}
  body.touchmode .game-chat{display:none}

  body.touchmode .game-wrap{
    display:block;width:100%;margin:0;position:relative;
    height:100vh;            /* dvh 미지원 브라우저 폴백 */
    height:100dvh;           /* 주소창을 뺀 실제 보이는 높이 */
  }

  /* --- 보드 : 화면 높이를 꽉 채우고 가운데 --- */
  body.touchmode .stage{
    position:absolute;inset:0;
    display:grid;place-items:center;
    width:auto;max-width:none;padding-top:0;
  }
  body.touchmode #cv{
    width:auto;height:auto;
    /* HUD 가 보드 위로 떠 있으므로 높이를 거의 다 쓴다 */
    max-height:calc(100vh - 12px);
    max-height:calc(100dvh - 12px);
    /* 조작부는 반투명 오버레이라 보드 가장자리에 살짝 걸쳐도 된다.
       예약 폭을 줄인 만큼 보드가 커진다. */
    max-width:calc(100vw - 150px);
    border-radius:var(--ca-radius-lg);
    box-shadow:0 0 0 2px #fff,0 0 0 3px #8db8e1,0 10px 26px rgb(var(--ca-shadow-rgb) / .28);
  }
  body.touchmode .stage-msg{position:absolute;inset:0}

  /* --- HUD : 상단에 얇게 떠 있는 바 --- */
  body.touchmode .hud{
    position:fixed;top:0;left:0;right:0;z-index:12;
    grid-template-columns:auto 1fr auto;
    align-items:center;gap:8px;
    padding:3px calc(10px + env(safe-area-inset-right)) 3px calc(10px + env(safe-area-inset-left));
    background:rgb(255 255 255 / .72);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:0;border-bottom:1px solid rgb(191 215 241 / .6);
    border-radius:0;box-shadow:none;
    pointer-events:none;                 /* 보드 위를 덮어도 조작을 막지 않는다 */
  }
  body.touchmode .hud-left{justify-content:flex-start;flex-wrap:nowrap;gap:4px}
  body.touchmode .hud-right{justify-content:flex-end;flex-wrap:nowrap;gap:4px;overflow:hidden}
  body.touchmode .hud-center{display:flex;align-items:center;gap:8px}
  body.touchmode .blockinfo{display:none}
  body.touchmode .timer{font-size:16px;padding:2px 8px;border-width:1px;border-radius:var(--ca-radius-sm)}
  body.touchmode .pcard{padding:2px 5px;font-size:10px;gap:4px;border-width:1px}
  body.touchmode .pcard .dot{width:15px;height:15px;font-size:6px}
  body.touchmode .pcard span:not(.dot):not(.st){display:none}  /* 이름 접기 — 색+태그로 식별 */
  body.touchmode .pcard .st{font-size:9px}
  body.touchmode .chip{font-size:8px;padding:2px 6px;border-width:1px;gap:3px}
  body.touchmode .chip canvas{width:10px;height:10px}

  /* --- 컨트롤 : 화면 위에 떠 있는 오버레이 --- */
  body.touchmode .touch{
    display:block;position:fixed;inset:0;z-index:15;
    padding:0;pointer-events:none;
  }
  /* 왼쪽 절반 아무 데나 잡으면 그 자리에 조이스틱이 생긴다 */
  body.touchmode .stick-zone{
    position:absolute;left:0;top:0;
    width:46%;bottom:0;min-height:0;
    pointer-events:auto;
  }
  body.touchmode .stick{
    --stick-size:102px;--knob-size:46px;
    --rest-x:calc(88px + env(safe-area-inset-left));
    --rest-y:calc(100% - 66px - env(safe-area-inset-bottom));
  }
  body.touchmode .acts{
    position:absolute;bottom:calc(10px + env(safe-area-inset-bottom));
    pointer-events:auto;
  }
  body.touchmode .acts{
    right:calc(30px + env(safe-area-inset-right));
    display:block;width:106px;height:90px;
  }
  /* 엄지 궤적에 맞춘 배치 — 주 행동(밤)이 가장 크고 가장 가깝다 */
  body.touchmode .acts .act-bomb{
    position:absolute;right:0;bottom:0;
    width:58px!important;height:58px!important;border-radius:50%!important;
    font-size:15px!important;
  }
  body.touchmode .acts .act-throw{
    position:absolute;right:62px;bottom:26px;
    width:44px!important;height:44px!important;border-radius:50%!important;
    font-size:11px!important;
  }
  body.touchmode .touch button{
    width:50px;height:50px;border-radius:14px;
    opacity:.9;box-shadow:0 3px 0 #31577f;
  }
  body.touchmode .touch button:active{opacity:1;transform:translateY(2px);box-shadow:0 1px 0 #31577f}

  body.touchmode .result-overlay{position:fixed}
}

/* 데스크톱인데 창 높이가 낮을 때 — 보드를 줄여 스크롤을 없앤다 */
@media (orientation:landscape) and (max-height:760px){
  body:not(.touchmode) #cv{width:auto;height:auto;max-height:calc(100vh - 200px);max-height:calc(100dvh - 200px)}
}

/* 가로인데 화면이 큰 태블릿 — 컨트롤만 하단 오버레이 */
@media (orientation:landscape) and (min-height:601px) and (max-width:1100px){
  body.touchmode .touch{
    position:fixed;inset:auto 0 0 0;z-index:15;
    padding:0 16px calc(14px + env(safe-area-inset-bottom));
    pointer-events:none;justify-content:space-between;
  }
  body.touchmode .stick-zone,
  body.touchmode .acts{pointer-events:auto}
}

/* ---------------- 옵션 토글 ---------------- */
.opts{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.opt{
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:36px;
  padding:7px 14px;border-radius:var(--ca-radius-pill);font:700 12px/1 var(--ca-sans);
  background:var(--ca-surface);border:2px solid var(--ca-line);color:var(--ca-ink-muted);
  transition:transform 140ms ease-out;
}
.opt i{font-style:normal}
.opt{
  color:#fff;border-color:rgba(255,255,255,.85);
  background:linear-gradient(180deg,#a8b2c2,#7d8798);
  box-shadow:0 3px 0 rgb(var(--ca-shadow-rgb) / .28);
  text-shadow:0 1px 0 rgb(var(--ca-shadow-rgb) / .35);
}
.opt.on{background:linear-gradient(180deg,#79d4f5,var(--k-blue));color:#fff}
.opt:active{transform:translateY(2px)}
.opt .state{font-family:var(--mono);font-size:10px;letter-spacing:.1em}


/* ============================================================
   가로 전환 안내 — 터치 기기 + 세로 + 게임 중일 때만
   ============================================================ */
.rotate-hint{
  display:none;position:fixed;inset:0;z-index:30;
  place-items:center;padding:24px;
  background:rgb(239 248 255 / .94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
@media (orientation:portrait){
  body.touchmode.ingame:not(.portrait-ok) .rotate-hint{display:grid}
}
.rotate-card{
  width:min(320px,100%);text-align:center;
  background:var(--ca-surface);border:2px solid var(--ca-line);
  border-radius:var(--ca-radius-xl);padding:26px 22px;
  box-shadow:var(--ca-shadow-panel);
}
.rotate-card h3{margin:16px 0 8px;font:800 18px/1.3 var(--ca-sans);color:var(--ca-ink)}
.rotate-card p{margin:0 0 18px;font:500 13px/1.7 var(--ca-sans);color:var(--ca-ink-muted)}

/* 회전하는 휴대폰 (이모지 대신 도형) */
.rotate-phone{
  width:64px;height:96px;margin:0 auto;position:relative;
  border:3px solid var(--ca-outline);border-radius:12px;
  background:var(--ca-surface-blue);
  animation:caRotate 2.4s ease-in-out infinite;
  transform-origin:50% 50%;
}
.rotate-phone::after{
  content:"";position:absolute;left:50%;bottom:5px;transform:translateX(-50%);
  width:20px;height:3px;border-radius:2px;background:var(--ca-outline);opacity:.55;
}
.rotate-phone i{
  position:absolute;inset:9px 7px 14px;border-radius:5px;
  background:linear-gradient(180deg,var(--ca-orange-soft),var(--ca-cyan-soft));
}
@keyframes caRotate{
  0%,32%   {transform:rotate(0deg)}
  58%,88%  {transform:rotate(-90deg)}
  100%     {transform:rotate(0deg)}
}
@media (prefers-reduced-motion:reduce){
  .rotate-phone{animation:none;transform:rotate(-90deg)}
}

/* ============================================================
   2026-08-26 목업 5장 적용
   ① 로고 이미지 ② 타이틀(세로 목업) ③ 대기실 카드
   ④ 인게임 HUD 네이비 필 + 스톤 보드 프레임 ⑤ 결과 리본 카드
   ============================================================ */

/* ---------- ① 로고 ---------- */
.logo-img{
  display:block;margin:0 auto 18px;
  width:min(430px,86%);height:auto;
  filter:drop-shadow(0 10px 22px rgb(var(--ca-shadow-rgb) / .25));
  user-select:none;-webkit-user-drag:none;
}

/* ---------- ② 타이틀 ---------- */
.home-panel{max-width:480px;margin:0 auto}

.nick-card{
  display:flex;align-items:center;gap:12px;
  background:var(--ca-surface-cream);
  border:2px solid var(--ca-line);border-radius:var(--ca-radius-xl);
  padding:10px 14px;margin-bottom:14px;
  box-shadow:0 4px 0 rgb(var(--ca-shadow-rgb) / .08);
}
.nick-avatar{
  flex:0 0 56px;width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#ffe9c9);
  border:2px solid var(--ca-orange-surface);
  display:grid;place-items:center;overflow:hidden;
}
.nick-avatar canvas{width:48px;height:48px}
.nick-card .field{flex:1;margin:0}

/* 히어로 버튼 — 목업의 큰 오렌지/블루 캡슐 */
.btn-hero{
  display:flex;align-items:center;gap:14px;width:100%;
  min-height:74px;padding:10px 18px;margin-bottom:12px;
  border-radius:26px;border:3px solid rgb(255 255 255 / .85);
  cursor:pointer;font-family:var(--sans);text-align:left;
  transition:transform 90ms ease,box-shadow 90ms ease,filter 120ms ease;
}
.btn-hero .hero-ic{width:38px;height:38px;flex:0 0 38px;filter:drop-shadow(0 2px 2px rgb(0 0 0 / .18))}
.btn-hero .hero-tx{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}
.btn-hero .hero-tx b{font-size:22px;font-weight:900;color:#fff;letter-spacing:.04em;
  text-shadow:0 2px 0 rgb(0 0 0 / .22)}
.btn-hero .hero-tx i{font-style:normal;font-size:12px;font-weight:700;color:rgb(255 255 255 / .92)}
.btn-hero .hero-arrow{
  flex:0 0 12px;width:12px;height:12px;
  border-top:4px solid rgb(255 255 255 / .95);border-right:4px solid rgb(255 255 255 / .95);
  border-radius:2px;transform:rotate(45deg);
  filter:drop-shadow(0 1px 0 rgb(0 0 0 / .2));
}
.hero-orange{
  background:linear-gradient(180deg,#ffb54a 0%,#f78f1e 58%,#ef7f12 100%);
  box-shadow:0 6px 0 #c2610d,0 14px 26px rgb(var(--ca-shadow-rgb) / .22),
    inset 0 3px 0 rgb(255 255 255 / .38);
}
.hero-blue{
  background:linear-gradient(180deg,#7cc0f8 0%,#3f92ea 58%,#3184dd 100%);
  box-shadow:0 6px 0 #1f5faa,0 14px 26px rgb(var(--ca-shadow-rgb) / .22),
    inset 0 3px 0 rgb(255 255 255 / .38);
}
.btn-hero:hover{filter:brightness(1.05)}
.btn-hero:active{transform:translateY(5px);box-shadow:0 1px 0 rgb(0 0 0 / .3)}

/* 방 코드 줄 — 목업: 크림 인풋 + 청록 입장 */
.join-row{margin-top:2px}
.join-row input{
  border:2px solid var(--ca-line);border-radius:var(--ca-radius-lg);
  background:var(--ca-surface-cream);
}
.btn-join{
  min-width:96px;border-radius:var(--ca-radius-lg);
  border:3px solid rgb(255 255 255 / .85);cursor:pointer;
  background:linear-gradient(180deg,#5fd4d2,#2fb3bd);
  color:#fff;font:900 16px var(--sans);letter-spacing:.06em;
  box-shadow:0 5px 0 #1d7f88,0 10px 18px rgb(var(--ca-shadow-rgb) / .16);
  text-shadow:0 1px 0 rgb(0 0 0 / .2);
  transition:transform 90ms ease,box-shadow 90ms ease;
}
.btn-join:active{transform:translateY(4px);box-shadow:0 1px 0 #1d7f88}

/* 조작 방법 — 접이식 (목업 하단 바) */
details.howto{
  width:min(480px,100%);margin:16px auto 0;text-align:left;
  background:var(--ca-surface-cream);
  border:2px solid var(--ca-line);border-radius:var(--ca-radius-xl);
  padding:0;overflow:hidden;
}
details.howto summary{
  list-style:none;cursor:pointer;user-select:none;
  padding:13px 18px;text-align:center;
  font:800 14px var(--sans);color:var(--ca-ink);
}
details.howto summary::-webkit-details-marker{display:none}
details.howto summary::after{content:"▾";margin-left:8px;color:var(--ca-ink-muted)}
details.howto[open] summary::after{content:"▴"}
details.howto .howto-ic{color:var(--ca-ink-muted);margin-right:4px}
details.howto ul{margin:0;padding:2px 22px 14px 34px;font-size:13px;line-height:1.9;color:#33456a}
details.howto em{color:var(--dim);font-style:normal;font-size:12px}

/* ---------- ③ 대기실 ---------- */
.lobby-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(180deg,var(--k-navy-2),var(--k-navy));
  border-bottom:3px solid var(--k-navy-line);
  border-radius:var(--ca-radius-xl) var(--ca-radius-xl) 0 0;
  padding:12px 16px;
}
.lobby-title{
  margin:0;font:900 19px var(--sans);color:#fff;letter-spacing:.08em;
  text-shadow:0 2px 0 rgb(0 0 0 / .3);
}
.lobby-title .star{color:var(--k-gold);font-size:13px;vertical-align:2px}
.room-pill{
  display:flex;align-items:center;gap:8px;
  background:rgb(0 0 0 / .28);border:2px solid rgb(255 255 255 / .18);
  border-radius:var(--ca-radius-pill);padding:5px 6px 5px 16px;
}
.room-pill .room-code{
  font:900 18px/1 var(--mono);letter-spacing:.28em;color:var(--k-gold);
  border:0;background:none;padding:0;
}
.btn-copy{
  border:2px solid rgb(255 255 255 / .8);border-radius:var(--ca-radius-pill);
  background:linear-gradient(180deg,#79d4f5,var(--k-blue));
  color:#fff;font:800 12px var(--sans);padding:6px 14px;cursor:pointer;
  box-shadow:0 3px 0 #2b8fbd;transition:transform 80ms ease,box-shadow 80ms ease;
}
.btn-copy:active{transform:translateY(3px);box-shadow:none}

/* 좌석 카드 — 캐릭터 초상 + 배지 (목업 그대로) */
.seats{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.seat{
  position:relative;display:flex;flex-direction:column;align-items:center;
  gap:2px;padding:30px 12px 14px;min-height:200px;
  border-radius:var(--ca-radius-xl);
  border:2.5px solid var(--ca-line);background:var(--ca-surface-cream);
  box-shadow:0 5px 0 rgb(var(--ca-shadow-rgb) / .08);
}
.seat-BTC {background:#fff4de;border-color:#f0b264}
.seat-ETH {background:#e9f6ff;border-color:#7cc5ef}
.seat-SOL {background:#f2ecff;border-color:#b89ff0}
.seat-DOGE{background:#eef8e5;border-color:#93d276}
.seat.empty{
  border-style:dashed;background:rgb(255 255 255 / .55);
  box-shadow:none;justify-content:center;
}
.seat .corner{
  position:absolute;top:10px;
  font:900 10px/1 var(--sans);letter-spacing:.1em;color:#fff;
  padding:5px 10px;border-radius:var(--ca-radius-pill);
  border:2px solid rgb(255 255 255 / .85);
  text-shadow:0 1px 0 rgb(0 0 0 / .25);
}
.seat .corner-l{left:10px}
.seat .corner-r{right:10px;background:linear-gradient(180deg,var(--k-navy-2),var(--k-navy));box-shadow:0 2px 0 var(--k-navy-line)}
.seat .corner-l.host{background:linear-gradient(180deg,#ffc06a,var(--k-orange));box-shadow:0 2px 0 #c2610d}
.seat .corner-l.pl{background:linear-gradient(180deg,var(--k-navy-2),var(--k-navy));box-shadow:0 2px 0 var(--k-navy-line)}
.seat .corner-l.ai{background:linear-gradient(180deg,#79d4f5,var(--k-blue));box-shadow:0 2px 0 #2b8fbd}
.seat-face{width:96px;height:96px}
.seat-face-empty{
  width:72px;height:72px;border-radius:50%;margin:12px 0;
  border:3px dashed var(--ca-line-strong);
  background:rgb(255 255 255 / .6);
}
.seat-nm{font:800 15px var(--sans);color:var(--ca-ink)}
.seat-nm.dim{color:var(--ca-ink-muted)}
.seat-meta{font:700 10px var(--mono);letter-spacing:.12em;color:var(--ca-ink-muted)}
.seat-badge{
  margin-top:6px;padding:6px 18px;border-radius:var(--ca-radius-pill);
  font:900 12px var(--sans);letter-spacing:.06em;color:#fff;
  border:2px solid rgb(255 255 255 / .85);
  text-shadow:0 1px 0 rgb(0 0 0 / .22);
}
.seat-badge.ready{background:linear-gradient(180deg,#8fdc7a,#4fae4f);box-shadow:0 3px 0 #3a8340}
.seat-badge.ai   {background:linear-gradient(180deg,#79d4f5,var(--k-blue));box-shadow:0 3px 0 #2b8fbd}
.seat-badge.wait {background:linear-gradient(180deg,#c3cddd,#9fACc4);box-shadow:0 3px 0 #7c8aa5}
.seat-badge.empty{
  background:none;border:2px dashed var(--ca-line-strong);
  color:var(--ca-ink-muted);text-shadow:none;box-shadow:none;
}

/* 대기실 하단 — 나가기 / 준비 완료 / 게임 시작(HOST 전용) */
.btn-leave{background:var(--ca-surface-cream);color:var(--ca-ink);min-height:46px;padding:0 20px}
.btn-start{position:relative;overflow:visible}
.btn-start .host-tag{
  position:absolute;top:-9px;right:-6px;
  background:linear-gradient(180deg,#ffd76a,var(--k-gold));
  color:#6b4b00;font:900 9px/1 var(--sans);letter-spacing:.08em;
  padding:4px 8px;border-radius:var(--ca-radius-pill);
  border:2px solid #fff;box-shadow:0 2px 4px rgb(var(--ca-shadow-rgb) / .3);
}

/* ---------- ④ 인게임 HUD + 보드 프레임 ---------- */
.timer{
  display:inline-block;
  background:linear-gradient(180deg,var(--k-navy-2),var(--k-navy));
  border:2px solid var(--k-navy-line);border-radius:var(--ca-radius-pill);
  color:#fff;padding:5px 20px;
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .12),0 3px 0 rgb(var(--ca-shadow-rgb) / .3);
}

/* 스톤 프레임 — 목업의 돌담 테두리를 링 섀도로 */
body:not(.touchmode) #cv{
  border-radius:14px;
  box-shadow:
    0 0 0 3px #f2f5f9,
    0 0 0 10px #c3cbd9,
    0 0 0 13px #9aa5ba,
    0 0 0 15px #77839c,
    0 18px 36px rgb(var(--ca-shadow-rgb) / .28);
}
body:not(.touchmode) .stage{padding:16px 16px 20px}

/* ---------- ⑤ 결과 카드 (목업 '탈락!') ---------- */
.result-card{
  position:relative;
  background:#fff9e9;
  border:3px solid var(--k-navy-2);border-radius:26px;
  box-shadow:0 24px 60px rgb(0 0 0 / .35);
  padding:34px 26px 18px;
  width:min(480px,92vw);
}
.result-ribbon{
  position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  padding:9px 30px;border-radius:12px;
  font:900 15px var(--sans);letter-spacing:.18em;color:#fff;
  text-shadow:0 2px 0 rgb(0 0 0 / .28);
  border:2px solid rgb(255 255 255 / .7);
  white-space:nowrap;
}
.result-ribbon.lose{background:linear-gradient(180deg,#f0605a,#d63b35);box-shadow:0 4px 0 #a92d26,0 8px 18px rgb(0 0 0 / .25)}
.result-ribbon.win {background:linear-gradient(180deg,#ffc06a,var(--k-orange));box-shadow:0 4px 0 #c2610d,0 8px 18px rgb(0 0 0 / .25)}
.result-ribbon.draw{background:linear-gradient(180deg,var(--k-navy-2),var(--k-navy));box-shadow:0 4px 0 var(--k-navy-line),0 8px 18px rgb(0 0 0 / .25)}

.result-hero{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.result-face{width:110px;height:110px;flex:0 0 110px}
.result-main{flex:1;text-align:center}
.result-big{
  font:900 42px/1.1 var(--sans);letter-spacing:.02em;
  -webkit-text-stroke:0;margin-bottom:4px;
  text-shadow:0 3px 0 rgb(255 255 255 / .9);
}
.result-big.lose{color:#d63b35}
.result-big.win{color:#3a8340}
.result-big.draw{color:var(--ca-ink)}
.result-sub{font:700 14px var(--sans);color:var(--ca-ink);margin-bottom:12px}
.result-stats{display:flex;gap:8px;justify-content:center}
.rstat{
  flex:0 1 86px;display:flex;flex-direction:column;gap:2px;align-items:center;
  background:#fffdf6;border:2px solid #e8ddc2;border-radius:var(--ca-radius-lg);
  padding:8px 10px;box-shadow:0 3px 0 rgb(var(--ca-shadow-rgb) / .08);
}
.rstat i{font:800 10px var(--sans);font-style:normal;letter-spacing:.1em;color:var(--ca-ink-muted)}
.rstat b{font:900 18px var(--sans);color:#d63b35}

.result-list{max-height:180px;overflow-y:auto}
.result-note{
  margin:14px auto 0;display:block;text-align:center;
  background:linear-gradient(180deg,var(--k-navy-2),var(--k-navy));
  border-radius:var(--ca-radius-pill);border:2px solid var(--k-navy-line);
  color:#fff;font:800 12px var(--sans);letter-spacing:.04em;
  padding:9px 18px;width:fit-content;
}

/* 결과 카드 — 좁은 화면 */
@media (max-width:520px){
  .result-hero{flex-direction:column;gap:6px}
  .result-big{font-size:34px}
}

/* 대기실 좁은 화면 — 카드 초상 축소 */
@media (max-width:900px){
  .seat{min-height:170px;padding-top:34px}
  .seat-face{width:76px;height:76px}
}
/* 캔버스(600px)가 패딩을 더한 폭에 들어가도록 */
body:not(.touchmode) .stage{max-width:636px}
.nick-card .field-label{font-family:var(--sans);letter-spacing:.02em;font-size:12px;color:var(--ca-ink-muted)}

/* ============================================================
   타이틀 히어로 아트 (2026-08-27)
   로고 → 히어로 → 패널 순서. 흐름상 로고 다음이라 겹칠 수 없다.
   원본 비율 887 : 1774 = 1 : 2. 위 절반이 캐릭터·보드, 아래는 빈 잔디라
   음수 마진으로 패널을 잔디 위로 끌어올린다 (목업 구성 그대로).
   ============================================================ */
.title-hero{
  --hero-w:min(560px,100vw);
  width:var(--hero-w);
  /* height 에 퍼센트를 쓰면 부모 '높이' 기준이라 0 이 된다. 비율로 잡는다. */
  aspect-ratio:887 / 1774;
  /* 좌우 패딩을 뚫고 화면 폭까지 채운다 (가장자리 잘린 선 방지).
     컨테이너보다 넓을 때 margin:auto 는 가운데로 오지 않으므로 50% + translate 로 맞춘다.
     위쪽 음수 마진 : 아트 상단은 빈 하늘이라 로고를 그 위로 겹쳐 여백을 줄인다.
     캐릭터 머리는 원본 높이의 약 16% 지점(= 폭의 0.32배)부터라 0.26 까지만 당긴다. */
  margin:calc(var(--hero-w) * -0.26) 0 calc(var(--hero-w) * -1.08) 50%;
  transform:translateX(-50%);
  max-width:none;
  background:url("/assets/title-hero.webp") center top / 100% auto no-repeat;
  /* 네 가장자리를 페이지 배경으로 흐린다 — 잘린 선이 보이지 않게 */
  -webkit-mask-image:
    linear-gradient(180deg,transparent 0,#000 5%,#000 84%,transparent 99%),
    linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:
    linear-gradient(180deg,transparent 0,#000 5%,#000 84%,transparent 99%),
    linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  pointer-events:none;
}

/* 패널·조작법·고지문은 히어로 위에 올라온다 */
.title-wrap .panel,
.title-wrap details.howto,
.title-wrap .disclaimer{position:relative;z-index:1}

/* 히어로의 잔디색과 이어지도록 타이틀 화면 배경만 따뜻하게 */
#scr-title{
  background:linear-gradient(180deg,
    #f6fbe9 0%,
    #e6f4dd 30%,
    #eaf6ef 62%,
    var(--ca-bg) 100%);
}

/* 아트가 밝아 흰 패널이 묻힌다 — 테두리와 그림자를 조금 더 준다 */
.title-wrap .home-panel{
  border:2px solid rgb(255 255 255 / .9);
  box-shadow:0 10px 30px rgb(var(--ca-shadow-rgb) / .22);
  background:rgb(255 255 255 / .92);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.title-wrap details.howto{
  background:rgb(255 253 246 / .92);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

/* 블록 티커는 하늘 위 장식이므로 테두리를 없애고 아주 옅게 */
.title-wrap .chain-strip{
  border:0;color:rgb(96 138 118 / .42);
  font-size:10px;margin-bottom:10px;
}

/* 화면이 낮으면 히어로를 줄여 스크롤을 아낀다 */
@media (max-height:720px){
  .title-hero{--hero-w:min(420px,86%)}
}
@media (max-height:560px){
  .title-hero{display:none}
}

/* ============================================================
   타이틀 : 로고 겹침 · PC 2단 배치 · 캐릭터 선택 (2026-08-27)
   ============================================================ */

/* 로고가 히어로 아트 위에 올라와야 한다 */
.logo-img{position:relative;z-index:2}
.title-art{position:relative}

/* ---------- PC / 가로가 넓은 화면 : 2단 ----------
   휴대폰용 세로 배치를 그대로 쌓으면 화면 밖으로 넘쳐 다 잘려 보인다.
   넓은 화면에서는 아트와 입력을 좌우로 나눠 세로를 절반으로 줄인다. */
@media (min-width:920px) and (min-height:600px){
  .title-wrap{width:min(1140px,100%)}
  .title-cols{
    display:grid;
    grid-template-columns:minmax(0,1fr) 470px;
    column-gap:44px;
    align-items:center;
  }
  .title-art{min-width:0}
  .title-forms{min-width:0;text-align:left}
  .title-hero{--hero-w:min(500px,100%)}
  /* 2단에서는 아트가 자기 칸 안에서 가운데 정렬된다 */
  .title-cols .title-hero{
    margin-left:auto;margin-right:auto;
    transform:none;
  }
  .title-cols .home-panel{margin-left:0;margin-right:0}
  .title-cols details.howto{margin-left:0;margin-right:0;width:100%}
  .title-cols .disclaimer{text-align:left}
}

/* ---------- 캐릭터 선택 ---------- */
.btn-char{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  padding:9px 13px;border-radius:var(--ca-radius-lg);
  border:3px solid rgb(255 255 255 / .9);cursor:pointer;
  background:linear-gradient(180deg,#79d4f5,var(--k-blue));
  color:#fff;font-family:var(--sans);font-size:11px;font-weight:800;line-height:1.15;
  text-shadow:0 1px 0 rgb(0 0 0 / .22);
  box-shadow:0 4px 0 #2b8fbd,0 8px 14px rgb(var(--ca-shadow-rgb) / .16);
  transition:transform 80ms ease,box-shadow 80ms ease;
}
.btn-char .ic{font-size:15px;line-height:1}
.btn-char b{font-weight:800}
.btn-char:active{transform:translateY(4px);box-shadow:0 1px 0 #2b8fbd}
.btn-char[aria-expanded="true"]{background:linear-gradient(180deg,#ffc06a,var(--k-orange));box-shadow:0 4px 0 #c2610d}

.char-picker{
  margin:0 0 14px;padding:12px;
  background:var(--ca-surface-cream);
  border:2px solid var(--ca-line);border-radius:var(--ca-radius-xl);
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .8);
}
.char-picker[hidden]{display:none}
.char-title{margin:0 0 10px;font:800 12px var(--sans);color:var(--ca-ink);text-align:center;letter-spacing:.04em}
.char-note{margin:10px 0 0;font:600 10.5px var(--sans);color:var(--ca-ink-muted);text-align:center;line-height:1.5}
.char-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.char-opt{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 4px 7px;cursor:pointer;
  border:2.5px solid var(--ca-line);border-radius:var(--ca-radius-lg);
  background:#fff;font-family:var(--sans);
  transition:transform 90ms ease,box-shadow 90ms ease,border-color 120ms ease;
}
.char-opt canvas{width:52px;height:52px;display:block}
.char-opt .tg{font:900 10px var(--mono);letter-spacing:.1em;color:var(--ca-ink-muted)}
.char-opt:active{transform:translateY(2px)}
.char-opt.on{
  border-color:var(--ca-orange-surface);
  background:var(--ca-orange-soft);
  box-shadow:0 4px 0 rgb(var(--ca-shadow-rgb) / .12);
}
.char-opt.on .tg{color:var(--ca-orange-text)}
/* 각 캐릭터 색을 은은하게 */
.char-opt[data-tag="BTC"] {background:#fff8ec}
.char-opt[data-tag="ETH"] {background:#eff8ff}
.char-opt[data-tag="SOL"] {background:#f5f0ff}
.char-opt[data-tag="DOGE"]{background:#f2fae9}
.char-opt.on[data-tag]{background:var(--ca-orange-soft)}