:root{
    color-scheme: dark;
    --bg: #0f1119;
    --surface: #1a1d2b;
    --surface-2: #232739;
    --surface-3: #2c3146;
    --border: #343a52;
    --text: #f1f2fb;
    --text-dim: #9297b3;
    --text-faint: #656b87;
    --accent: #f5b942;
    --accent-ink: #241a04;
    --liar: #b98cff;
    --good: #4cd48a;
    --bad: #ff6b5b;
    --font-display: "Bricolage Grotesque", "Manrope", sans-serif;
    --font-body: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: "Space Mono", ui-monospace, SFMono-Regular, monospace;
    --radius: 20px;
    --radius-sm: 12px;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  *{ box-sizing:border-box; }
  [hidden]{ display:none!important; }
  html,body{ height:100%; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size:15px;
    line-height:1.5;
    -webkit-tap-highlight-color: transparent;
    overflow-x:hidden;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  h1,h2,h3{ font-family: var(--font-display); font-weight:700; text-wrap:balance; margin:0; }
  p{ margin:0; }
  button{ font-family:inherit; }
  input{ font-family:inherit; }
  .mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

  .glow{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
  .glow::before{
    content:""; position:absolute; top:-30%; left:50%; width:140vw; height:90vh;
    transform:translateX(-50%);
    background: radial-gradient(closest-side, rgba(245,185,66,0.16), rgba(245,185,66,0.05) 45%, transparent 70%);
    animation: sway 14s ease-in-out infinite;
  }
  .glow::after{
    content:""; position:absolute; bottom:-40%; right:-10%; width:100vw; height:80vh;
    background: radial-gradient(closest-side, rgba(185,140,255,0.12), transparent 65%);
    animation: sway 18s ease-in-out infinite reverse;
  }
  @keyframes sway{
    0%,100%{ transform:translateX(-50%) translateY(0) scale(1); }
    50%{ transform:translateX(-46%) translateY(2%) scale(1.06); }
  }
  @media (prefers-reduced-motion: reduce){ .glow::before,.glow::after{ animation:none; } }

  #app{ position:relative; z-index:1; min-height:100%; display:flex; flex-direction:column; }

  #topbar{
    position:sticky; top:env(safe-area-inset-top,0px); z-index:5;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 16px; background:rgba(15,17,25,0.82); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  #topbar .code-chip{
    display:flex; align-items:center; gap:8px; background:var(--surface-2);
    border:1px solid var(--border); border-radius:999px; padding:6px 12px;
    font-family:var(--font-mono); font-size:13px; color:var(--text-dim);
  }
  #topbar .code-chip b{ color:var(--text); letter-spacing:2px; font-size:14px; }
  #topbar .status{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-dim); }
  #topbar .phase-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(245,185,66,0.18); }

  main{ flex:1; display:flex; flex-direction:column; padding:20px 16px calc(28px + env(safe-area-inset-bottom,0px)); gap:18px; max-width:520px; width:100%; margin:0 auto; }

  section.screen{ display:flex; flex-direction:column; gap:18px; flex:1; animation:rise .35s ease both; }
  @keyframes rise{ from{ opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

  .eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
  .lede{ color:var(--text-dim); font-size:14.5px; }

  .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; gap:14px; }
  .card.tight{ padding:16px; gap:10px; }

  .btn{
    appearance:none; border:none; border-radius:999px; padding:15px 20px; font-size:15.5px; font-weight:700;
    display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
    transition:transform .12s ease, filter .12s ease; width:100%;
  }
  .btn:active{ transform:scale(.97); }
  .btn-primary{ background:var(--accent); color:var(--accent-ink); }
  .btn-primary:disabled{ background:var(--surface-3); color:var(--text-faint); cursor:not-allowed; }
  .btn-ghost{ background:var(--surface-2); color:var(--text); border:1px solid var(--border); }
  .btn-outline{ background:transparent; color:var(--accent); border:1.5px solid var(--accent); }
  .btn-danger{ background:transparent; color:var(--bad); border:1.5px solid rgba(255,107,91,0.5); }
  .btn-sm{ padding:9px 14px; font-size:13.5px; width:auto; }

  label.field{ display:flex; flex-direction:column; gap:6px; }
  label.field span{ font-size:12.5px; color:var(--text-dim); font-weight:600; }
  input.text-input{
    background:var(--surface-2); border:1px solid var(--border); color:var(--text);
    border-radius:var(--radius-sm); padding:13px 14px; font-size:16px; outline:none;
  }
  input.text-input:focus{ border-color:var(--accent); }
  input.code-input{ font-family:var(--font-mono); letter-spacing:8px; text-transform:uppercase; text-align:center; font-size:20px; }

  .divider{ display:flex; align-items:center; gap:10px; color:var(--text-faint); font-size:12px; }
  .divider::before,.divider::after{ content:""; flex:1; height:1px; background:var(--border); }

  .player-row{ display:flex; align-items:center; gap:12px; padding:10px 4px; }
  .avatar{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:#151626; flex-shrink:0; }
  .player-name{ font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .badge{ font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; }
  .badge-host{ background:rgba(245,185,66,0.16); color:var(--accent); }
  .badge-me{ background:var(--surface-3); color:var(--text-dim); }

  .chip-grid{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip{ padding:9px 14px; border-radius:999px; border:1.5px solid var(--border); background:var(--surface-2); color:var(--text-dim); font-size:13.5px; font-weight:600; cursor:pointer; user-select:none; }
  .chip.on{ border-color:var(--accent); color:var(--accent-ink); background:var(--accent); }

  .stepper{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .stepper .stepper-btn{ width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-size:18px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .stepper .stepper-val{ font-family:var(--font-mono); font-size:16px; min-width:64px; text-align:center; }

  .room-code-display{ text-align:center; }
  .room-code-display .code{ font-family:var(--font-mono); font-size:44px; letter-spacing:10px; font-weight:700; color:var(--accent); }

  .center-stage{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; }

  .timer-ring{ position:relative; width:120px; height:120px; }
  .timer-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
  .timer-ring circle{ fill:none; stroke-width:8; }
  .timer-ring .track{ stroke:var(--surface-3); }
  .timer-ring .bar{ stroke:var(--accent); stroke-linecap:round; transition:stroke-dashoffset .4s linear; }
  .timer-ring .num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:26px; font-weight:700; }

  .speaker-name{ font-size:30px; font-family:var(--font-display); }
  .speaker-glow{ animation:pulse 1.6s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{ text-shadow:0 0 0 rgba(245,185,66,0);} 50%{ text-shadow:0 0 24px rgba(245,185,66,0.55);} }

  .turn-strip{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
  .turn-pip{ padding:6px 11px; border-radius:999px; background:var(--surface-2); color:var(--text-faint); font-size:12.5px; border:1px solid var(--border); }
  .turn-pip.current{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700; }
  .turn-pip.done{ color:var(--text-dim); text-decoration:line-through; }

  .word-card{
    position:relative; border-radius:24px; padding:32px 20px; text-align:center; min-height:180px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    background:linear-gradient(160deg,var(--surface-2),var(--surface)); border:1px solid var(--border);
  }
  .word-card .cat{ font-size:13px; color:var(--text-dim); letter-spacing:.06em; }
  .word-card .word{ font-family:var(--font-display); font-size:36px; font-weight:800; }
  .veil-btn{ background:none; border:none; color:var(--text-dim); font-size:14px; display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer; }
  .veil-icon{ width:56px; height:56px; border-radius:50%; background:var(--surface-3); display:flex; align-items:center; justify-content:center; font-size:22px; }

  .vote-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
  .vote-tile{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 8px; border-radius:16px; border:1.5px solid var(--border); background:var(--surface-2); cursor:pointer; }
  .vote-tile.selected{ border-color:var(--accent); background:rgba(245,185,66,0.1); }
  .vote-tile .avatar{ width:46px; height:46px; font-size:16px; }
  .vote-tile .vname{ font-size:13.5px; font-weight:600; text-align:center; }

  .bar-row{ display:flex; align-items:center; gap:10px; }
  .bar-row .bname{ width:74px; font-size:13px; font-weight:600; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bar-track{ flex:1; height:14px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
  .bar-fill{ height:100%; background:var(--accent); border-radius:999px; width:0%; transition:width .6s ease; }
  .bar-count{ width:22px; text-align:right; font-family:var(--font-mono); font-size:13px; color:var(--text-dim); }

  .result-banner{ text-align:center; border-radius:var(--radius); padding:26px 18px; }
  .result-banner.win-citizens{ background:rgba(76,212,138,0.14); border:1px solid rgba(76,212,138,0.4); }
  .result-banner.win-liar{ background:rgba(185,140,255,0.14); border:1px solid rgba(185,140,255,0.4); }
  .result-banner h2{ font-size:26px; margin-bottom:6px; }
  .result-banner.win-citizens h2{ color:var(--good); }
  .result-banner.win-liar h2{ color:var(--liar); }

  .word-compare{ display:flex; gap:10px; }
  .word-compare .side{ flex:1; text-align:center; padding:14px 8px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); }
  .word-compare .side .lbl{ font-size:11.5px; color:var(--text-dim); margin-bottom:4px; }
  .word-compare .side .val{ font-weight:800; font-size:17px; }

  .score-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
  .score-row:last-child{ border-bottom:none; }
  .score-rank{ font-family:var(--font-mono); color:var(--text-faint); width:22px; }
  .score-delta{ font-family:var(--font-mono); font-size:13px; font-weight:700; }
  .score-delta.pos{ color:var(--good); }
  .score-delta.zero{ color:var(--text-faint); }
  .score-total{ font-family:var(--font-mono); font-weight:700; margin-left:auto; }

  .guess-options{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
  .guess-opt{ text-align:center; padding:11px 8px; border-radius:12px; border:1.5px solid var(--border); background:var(--surface-2); color:var(--text); font-size:13.5px; font-weight:600; cursor:pointer; line-height:1.3; }
  .guess-opt.selected{ border-color:var(--liar); background:rgba(185,140,255,0.12); color:var(--liar); }

  .my-word-strip{
    display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:14px;
    background:var(--surface-2); border:1px solid var(--border); text-align:center;
  }
  .my-word-strip .cat{ font-size:12px; color:var(--text-dim); }
  .my-word-strip .word{ font-family:var(--font-display); font-size:18px; font-weight:800; color:var(--accent); }

  .liar-reveal-banner{
    text-align:center; padding:14px 16px; border-radius:16px; font-weight:800; font-size:15.5px;
    opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease;
  }
  .liar-reveal-banner.show{ opacity:1; transform:none; }
  .liar-reveal-banner.is-liar{ background:rgba(185,140,255,0.16); border:1px solid rgba(185,140,255,0.45); color:var(--liar); }
  .liar-reveal-banner.is-citizen{ background:rgba(76,212,138,0.14); border:1px solid rgba(76,212,138,0.4); color:var(--good); }

  #toast{
    position:fixed; left:16px; right:16px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:20;
    background:var(--surface-3); border:1px solid var(--border); color:var(--text); padding:13px 16px; border-radius:14px;
    font-size:13.5px; text-align:center; transition:opacity .25s ease, transform .25s ease;
  }
  #toast[hidden]{ display:none; }

  .footnote{ font-size:12px; color:var(--text-faint); text-align:center; }
  .waiting-list{ font-size:13px; color:var(--text-dim); text-align:center; }
  .spinner{ width:34px; height:34px; border-radius:50%; border:3px solid var(--surface-3); border-top-color:var(--accent); animation:spin .8s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg);} }
  @media (prefers-reduced-motion: reduce){ .spinner{ animation-duration:1.6s; } }

  /* ================= 종합게임 공통 (v2) ================= */

  .brand{ display:flex; flex-direction:column; gap:6px; }
  .brand h1{ font-size:32px; line-height:1.15; }
  .brand h1 .hl{ color:var(--accent); }

  .game-strip{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
  .game-strip::-webkit-scrollbar{ display:none; }
  .game-mini{ flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:9px 14px 9px 10px; border-radius:999px; background:var(--surface); border:1px solid var(--border); font-size:13.5px; font-weight:700; }
  .game-mini .em{ font-size:18px; }
  .game-mini.soon{ color:var(--text-faint); font-weight:600; border-style:dashed; }

  .game-grid{ display:grid; grid-template-columns:1fr; gap:10px; }
  .game-card{ display:flex; align-items:center; gap:14px; text-align:left; padding:16px; border-radius:16px; border:1.5px solid var(--border); background:var(--surface-2); color:var(--text); cursor:pointer; width:100%; font:inherit; }
  .game-card .em{ font-size:30px; width:48px; height:48px; border-radius:14px; background:var(--surface-3); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .game-card .gname{ font-family:var(--font-display); font-weight:800; font-size:17px; }
  .game-card .gdesc{ font-size:13px; color:var(--text-dim); margin-top:2px; }
  .game-card .gmeta{ font-size:11.5px; color:var(--text-faint); margin-top:4px; font-family:var(--font-mono); }
  .game-card.on{ border-color:var(--accent); background:rgba(245,185,66,0.08); }
  .game-card.on .em{ background:rgba(245,185,66,0.18); }
  .game-card:disabled{ cursor:default; }

  .online-dot{ width:9px; height:9px; border-radius:50%; background:var(--good); flex-shrink:0; }
  .online-dot.off{ background:var(--text-faint); }
  .player-row.offline .player-name{ color:var(--text-faint); }
  .badge-game{ background:rgba(185,140,255,0.16); color:var(--liar); }

  .row-btns{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

  .banner{ border-radius:16px; padding:14px 16px; background:rgba(185,140,255,0.1); border:1px solid rgba(185,140,255,0.35); display:flex; flex-direction:column; gap:8px; }
  .banner b{ font-family:var(--font-display); font-size:16px; }

  #menuBtn{ appearance:none; border:1px solid var(--border); background:var(--surface-2); color:var(--text); width:36px; height:36px; border-radius:50%; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  #topbar .status{ flex:1; justify-content:flex-end; min-width:0; }
  #topbarLabel{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .sheet-backdrop{ position:fixed; inset:0; z-index:30; background:rgba(5,6,10,0.6); display:flex; align-items:flex-end; justify-content:center; animation:fade .2s ease both; }
  @keyframes fade{ from{opacity:0} to{opacity:1} }
  .sheet{ width:100%; max-width:520px; background:var(--surface); border:1px solid var(--border); border-bottom:none; border-radius:22px 22px 0 0; padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:10px; animation:rise .25s ease both; }
  .sheet h3{ font-size:18px; margin-bottom:4px; }
  .sheet p{ color:var(--text-dim); font-size:14px; margin-bottom:6px; }

  .seg{ display:flex; gap:8px; }
  .seg .chip{ flex:1; text-align:center; }

  /* ================= 왕게임 ================= */
  .king-card{ position:relative; border-radius:24px; min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:28px 20px;
    background:linear-gradient(160deg,var(--surface-2),var(--surface)); border:1px solid var(--border); }
  .king-card.is-king{ background:linear-gradient(160deg,rgba(255,207,90,0.22),rgba(255,207,90,0.04)); border-color:rgba(255,207,90,0.55); }
  .king-card .big{ font-family:var(--font-display); font-size:64px; font-weight:800; line-height:1; }
  .king-card.is-king .big{ color:#ffcf5a; }
  .king-card .sub{ color:var(--text-dim); font-size:14px; }
  .flip-in{ animation:flip .45s ease both; }
  @keyframes flip{ from{ transform:rotateY(90deg); opacity:.2 } to{ transform:none; opacity:1 } }

  .num-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
  .num-btn{ appearance:none; font:inherit; font-family:var(--font-mono); font-weight:700; font-size:18px; padding:14px 0; border-radius:14px; border:1.5px solid var(--border); background:var(--surface-2); color:var(--text); cursor:pointer; position:relative; }
  .num-btn.on{ border-color:var(--accent); background:var(--accent); color:var(--accent-ink); }
  .num-btn .ord{ position:absolute; top:3px; right:6px; font-size:10px; font-family:var(--font-body); }

  .mission-list{ display:flex; flex-direction:column; gap:8px; }
  .mission-opt{ appearance:none; font:inherit; text-align:left; padding:12px 14px; border-radius:12px; border:1.5px solid var(--border); background:var(--surface-2); color:var(--text); cursor:pointer; font-size:14px; line-height:1.4; }
  .mission-opt.on{ border-color:var(--accent); background:rgba(245,185,66,0.1); }
  textarea.text-input{ resize:none; min-height:84px; line-height:1.45; }

  .mission-preview{ border-radius:16px; padding:16px; background:rgba(255,207,90,0.08); border:1px dashed rgba(255,207,90,0.5); font-size:15.5px; font-weight:700; line-height:1.45; }
  .mission-preview.empty{ color:var(--text-faint); font-weight:500; border-color:var(--border); background:transparent; }

  .mission-big{ border-radius:22px; padding:24px 20px; text-align:center; background:linear-gradient(160deg,rgba(255,207,90,0.18),rgba(255,207,90,0.03)); border:1px solid rgba(255,207,90,0.5); display:flex; flex-direction:column; gap:10px; }
  .mission-big .who{ font-size:13px; color:#ffcf5a; font-weight:700; letter-spacing:.04em; }
  .mission-big .txt{ font-family:var(--font-display); font-size:22px; font-weight:800; line-height:1.35; }

  .target-row{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:16px; background:var(--surface-2); border:1px solid var(--border); opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease; }
  .target-row.show{ opacity:1; transform:none; }
  .target-row .tnum{ font-family:var(--font-mono); font-weight:700; font-size:20px; color:var(--accent); min-width:48px; }
  .target-row .tname{ font-family:var(--font-display); font-weight:800; font-size:20px; flex:1; }
  .target-row.me{ border-color:var(--accent); }

  .card-table{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px 12px; font-size:13.5px; }
  .card-table div{ display:flex; justify-content:space-between; gap:6px; padding:6px 0; border-bottom:1px solid var(--border); }
  .card-table .n{ font-family:var(--font-mono); color:var(--text-dim); }

  .hist-item{ padding:10px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
  .hist-item:last-child{ border-bottom:none; }
  .hist-item .h-meta{ font-size:11.5px; color:var(--text-faint); margin-bottom:2px; }

  .link-btn{ appearance:none; background:none; border:none; color:var(--text-dim); font:inherit; font-size:13px; text-decoration:underline; cursor:pointer; padding:6px; align-self:center; }

  .title-row{ display:flex; gap:10px; }
  .title-card{ flex:1; border-radius:14px; padding:12px; background:var(--surface-2); border:1px solid var(--border); text-align:center; }
  .title-card .tt{ font-size:11.5px; color:var(--text-dim); }
  .title-card .tn{ font-weight:800; font-size:15px; margin-top:2px; }

  /* ================= 빙고 ================= */
  .bingo-board{ display:grid; gap:6px; }
  .bingo-board.s3{ grid-template-columns:repeat(3,1fr); }
  .bingo-board.s4{ grid-template-columns:repeat(4,1fr); }
  .bingo-board.s5{ grid-template-columns:repeat(5,1fr); }
  .bcell{ appearance:none; font:inherit; aspect-ratio:1; border-radius:12px; border:1.5px solid var(--border); background:var(--surface-2); color:var(--text);
    font-family:var(--font-mono); font-weight:700; font-size:20px; display:flex; align-items:center; justify-content:center; padding:0; position:relative; cursor:default; transition:background .2s ease, border-color .2s ease, transform .12s ease; }
  .bingo-board.s3 .bcell{ font-size:28px; }
  .bcell.pickable{ cursor:pointer; border-color:rgba(245,185,66,0.45); }
  .bcell.pickable:active{ transform:scale(.94); }
  .bcell.sel{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
  .bcell.hit{ background:rgba(76,212,138,0.16); border-color:rgba(76,212,138,0.55); color:var(--good); }
  .bcell.hit::after{ content:""; position:absolute; inset:18%; border-radius:50%; border:2.5px solid rgba(76,212,138,0.7); }
  .bcell.line{ background:rgba(76,212,138,0.32); color:#eafff2; border-color:var(--good); }
  .bcell.last{ box-shadow:0 0 0 3px var(--accent); }
  .bcell.pop{ animation:bpop .45s ease; }
  @keyframes bpop{ 0%{ transform:scale(1);} 40%{ transform:scale(1.14);} 100%{ transform:scale(1);} }

  .bingo-turn{ border-radius:18px; padding:14px 16px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .bingo-turn.mine{ border-color:var(--accent); background:rgba(245,185,66,0.1); }
  .bingo-turn .bt-label{ font-family:var(--font-display); font-weight:800; font-size:17px; line-height:1.3; }
  .bingo-turn .bt-last{ display:flex; flex-direction:column; align-items:flex-end; gap:0; flex-shrink:0; }
  .bingo-turn .bt-last .lbl{ font-size:11px; color:var(--text-dim); }
  .bingo-turn .bt-last .num{ font-size:30px; font-weight:700; color:var(--accent); line-height:1.1; }
  .bingo-turn .bt-last .by{ font-size:11px; color:var(--text-faint); }

  .bingo-lines{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:13px; color:var(--text-dim); }
  .bingo-lines .pip{ width:28px; height:8px; border-radius:999px; background:var(--surface-3); }
  .bingo-lines .pip.on{ background:var(--good); }

  .stand-row{ display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--border); font-size:14px; }
  .stand-row:last-child{ border-bottom:none; }
  .stand-row.turn .player-name{ color:var(--accent); }
  .stand-row .lines{ margin-left:auto; font-family:var(--font-mono); font-weight:700; }
  .stand-row .lines.near{ color:var(--bad); }

  .bingo-all{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
  .bingo-mini{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:10px; display:flex; flex-direction:column; gap:6px; }
  .bingo-mini.win{ border-color:var(--good); }
  .bingo-mini .mh{ font-size:12.5px; font-weight:700; display:flex; justify-content:space-between; }
  .bingo-mini .bingo-board{ gap:3px; }
  .bingo-mini .bcell{ font-size:11px; border-radius:6px; border-width:1px; }
  .bingo-mini .bcell.hit::after{ display:none; }

  /* ================= 야추 ================= */
  .y-turn{ border-radius:18px; padding:14px 16px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .y-turn.mine{ border-color:var(--accent); background:rgba(245,185,66,0.1); }
  .y-turn-name{ font-family:var(--font-display); font-weight:800; font-size:18px; }
  .y-turn-sub{ font-size:12.5px; color:var(--text-dim); margin-top:2px; }
  .y-rolls{ display:flex; gap:5px; }
  .y-rolls .r{ width:12px; height:12px; border-radius:50%; background:var(--accent); }
  .y-rolls .r.used{ background:var(--surface-3); }

  .y-dice{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
  .die{ appearance:none; font:inherit; aspect-ratio:1; border-radius:14px; background:#f4f1ea; border:3px solid transparent; padding:14%;
    display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); cursor:default; position:relative; transition:transform .15s ease, border-color .15s ease; }
  .die span{ border-radius:50%; margin:14%; }
  .die span.p{ background:#1c1d26; }
  .die.blank{ background:var(--surface-2); border:1.5px dashed var(--border); }
  .die.clickable{ cursor:pointer; }
  .die.held{ border-color:var(--accent); transform:translateY(-6px); box-shadow:0 6px 0 rgba(245,185,66,0.35); }
  .die.held::after{ content:"고정"; position:absolute; left:50%; bottom:-22px; transform:translateX(-50%); font-size:11px; font-weight:700; color:var(--accent); }
  .die.rolling{ animation:dieshake .32s linear infinite; }
  @keyframes dieshake{ 0%{ transform:rotate(0) translateY(0);} 25%{ transform:rotate(-14deg) translateY(-5px);} 50%{ transform:rotate(8deg) translateY(2px);} 75%{ transform:rotate(16deg) translateY(-3px);} 100%{ transform:rotate(0) translateY(0);} }
  .die.landed{ animation:dieland .45s ease; }
  @keyframes dieland{ 0%{ transform:scale(1.25);} 60%{ transform:scale(.92);} 100%{ transform:scale(1);} }
  @media (prefers-reduced-motion: reduce){ .die.rolling{ animation:none; opacity:.7; } .die.landed{ animation:none; } }
  #yHoldHint{ margin-top:10px; }

  .y-card-wrap{ overflow-x:auto; border-radius:16px; border:1px solid var(--border); background:var(--surface); }
  .y-card{ width:100%; border-collapse:collapse; font-size:13.5px; }
  .y-card th, .y-card td{ padding:7px 4px; text-align:center; border-bottom:1px solid var(--border); }
  .y-card th{ font-size:12px; color:var(--text-dim); font-weight:700; }
  .y-card th.me{ color:var(--accent); }
  .y-card th .hname{ display:block; max-width:48px; margin:0 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .y-card td.cat{ text-align:left; padding-left:12px; white-space:nowrap; }
  .y-card td.cat b{ font-weight:700; display:block; font-size:13.5px; }
  .y-card td.cat small{ color:var(--text-faint); font-size:10.5px; }
  .y-card td.v{ font-family:var(--font-mono); font-weight:700; min-width:34px; }
  .y-card td.cur{ background:rgba(245,185,66,0.07); }
  .y-card td.pot{ color:var(--text-faint); font-weight:400; }
  .y-card td.pot.good{ color:var(--good); }
  .y-card td.just{ color:var(--accent); }
  .y-card tr.pickable td.cat{ cursor:pointer; }
  .y-card tr.pickable{ cursor:pointer; }
  .y-card tr.sel td{ background:rgba(245,185,66,0.2); }
  .y-card tr.sum td{ background:var(--surface-2); font-size:12.5px; }
  .y-card tr.total td{ background:var(--surface-2); font-weight:800; font-size:15px; border-bottom:none; }
  .y-card tr.gap td{ padding:2px; background:var(--surface-2); }
  #yScoreBtn{ position:sticky; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:4; box-shadow:0 6px 24px rgba(0,0,0,0.45); }

  /* ================= 라스베가스 ================= */
  .v-turn{ position:relative; overflow:hidden; border-radius:18px; padding:14px 16px 18px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .v-turn.mine{ border-color:var(--accent); background:rgba(245,185,66,0.1); }
  .v-turn-name{ font-family:var(--font-display); font-weight:800; font-size:18px; display:flex; align-items:center; gap:8px; }
  .v-turn-name .sw{ width:14px; height:14px; border-radius:4px; flex-shrink:0; }
  .v-turn-sub{ font-size:12.5px; color:var(--text-dim); margin-top:2px; }
  .v-timer{ font-size:22px; font-weight:700; color:var(--text-dim); flex-shrink:0; }
  .v-timer.low{ color:var(--bad); }
  .v-timebar{ position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--surface-3); }
  .v-timebar div{ height:100%; background:var(--accent); width:100%; transition:width .25s linear; }

  .v-roll{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; min-height:52px; }
  .v-roll .die{ width:48px; flex:0 0 48px; border-radius:11px; padding:9px; }
  .v-roll .die.colored span.p, .v-cas .die.colored span.p{ background:#fff; }
  .v-roll .die.dim{ opacity:.28; }
  .v-roll .die.pick{ transform:translateY(-4px); box-shadow:0 0 0 3px var(--accent); }
  .v-roll .empty{ color:var(--text-faint); font-size:13px; align-self:center; }

  .v-choices{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
  .v-choice{ appearance:none; font:inherit; font-size:14px; font-weight:700; padding:10px 14px; border-radius:999px; border:1.5px solid var(--accent); background:rgba(245,185,66,0.1); color:var(--text); cursor:pointer; }
  .v-choice:active{ transform:scale(.96); }

  .v-casinos{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .v-cas{ appearance:none; font:inherit; color:var(--text); text-align:left; background:var(--surface); border:1.5px solid var(--border); border-radius:14px; padding:10px 8px; display:flex; flex-direction:column; gap:6px; min-height:150px; cursor:default; }
  .v-cas.can{ border-color:var(--accent); background:rgba(245,185,66,0.08); cursor:pointer; }
  .v-cas.flash{ animation:casflash 1.2s ease; }
  @keyframes casflash{ 0%,100%{ box-shadow:none;} 30%{ box-shadow:0 0 0 3px var(--good);} }
  .v-cas .ch{ display:flex; align-items:center; gap:6px; font-weight:800; font-size:13px; }
  .v-cas .ch .die{ width:24px; height:24px; aspect-ratio:auto; padding:3px; border-radius:6px; border-width:1px; }
  .v-cas .bills{ display:flex; flex-direction:column; gap:3px; }
  .v-bill{ font-family:var(--font-mono); font-size:11.5px; font-weight:700; padding:3px 6px; border-radius:6px; background:rgba(76,212,138,0.14); color:var(--good); border:1px solid rgba(76,212,138,0.35); text-align:center; }
  .v-bill.big{ background:rgba(245,185,66,0.16); color:var(--accent); border-color:rgba(245,185,66,0.4); }
  .v-cas .stakes{ display:flex; flex-wrap:wrap; gap:4px; margin-top:auto; }
  .v-stake{ font-family:var(--font-mono); font-size:11.5px; font-weight:700; color:#fff; border-radius:6px; padding:2px 6px; }

  .v-prow{ display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--border); font-size:14px; }
  .v-prow:last-child{ border-bottom:none; }
  .v-prow .sw{ width:12px; height:12px; border-radius:3px; flex-shrink:0; }
  .v-prow .hand{ font-size:12.5px; color:var(--text-dim); }
  .v-prow .money{ margin-left:auto; font-family:var(--font-mono); font-weight:700; }
  .v-prow.turn .player-name{ color:var(--accent); }

  .v-set{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:10px 12px; display:flex; flex-direction:column; gap:5px; font-size:13.5px; }
  .v-set .sh{ display:flex; align-items:center; gap:8px; font-weight:800; }
  .v-set .sh .die{ width:22px; height:22px; aspect-ratio:auto; padding:3px; border-radius:6px; border-width:1px; }
  .v-set .aw{ display:flex; align-items:center; gap:8px; }
  .v-set .aw .sw{ width:10px; height:10px; border-radius:3px; }
  .v-set .aw .amt{ margin-left:auto; font-family:var(--font-mono); font-weight:700; color:var(--good); }
  .v-set .void{ color:var(--bad); font-size:12.5px; }
  .v-set .none{ color:var(--text-faint); font-size:12.5px; }
  .v-timebar.static{ position:relative; border-radius:999px; height:6px; overflow:hidden; }
  .v-colors{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
  .v-color{ appearance:none; font:inherit; color:var(--text); display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px; border-radius:14px; border:2px solid var(--border); background:var(--surface); cursor:pointer; }
  .v-color .die{ width:44px; height:44px; padding:8px; border-radius:10px; }
  .v-color .cn{ font-size:13px; font-weight:700; }
  .v-color .owner{ font-size:11px; color:var(--text-dim); min-height:14px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .v-color.mine{ border-color:var(--accent); background:rgba(245,185,66,0.12); }
  .v-color.taken{ opacity:.45; cursor:not-allowed; }
  .die.colored span.p{ background:var(--ink,#fff) !important; }

  .v-cas.facedown{ align-items:center; justify-content:center; background:repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 8px, var(--surface-3) 8px, var(--surface-3) 16px); color:var(--text-faint); font-family:var(--font-display); font-size:26px; font-weight:800; }
  .v-cas.dealing{ border-color:var(--good); box-shadow:0 0 0 3px rgba(76,212,138,0.25); }
  .v-cas.opened{ animation:casopen .45s ease; }
  @keyframes casopen{ from{ transform:rotateY(90deg); } to{ transform:none; } }
  .v-bill.pop{ animation:billpop .45s ease; }
  @keyframes billpop{ 0%{ transform:translateY(-14px) scale(1.2); opacity:0; } 60%{ opacity:1; } 100%{ transform:none; } }
  .v-cas .sum{ font-size:11px; color:var(--text-dim); font-family:var(--font-mono); }
  .v-cas .sum.ok{ color:var(--good); }

  /* ================= 거짓말쟁이 주사위 ================= */
  .d-bid{ border-radius:18px; padding:16px; text-align:center; background:var(--surface); border:1px solid var(--border); display:flex; flex-direction:column; align-items:center; gap:6px; }
  .d-bid .who{ font-size:12.5px; color:var(--text-dim); }
  .d-bid .claim{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:26px; }
  .d-bid .claim .die{ width:40px; height:40px; padding:7px; border-radius:9px; }
  .d-bid .note{ font-size:12px; color:var(--text-faint); }
  .d-bid.new{ animation:bidpop .5s ease; }
  @keyframes bidpop{ 0%{ transform:scale(.92); border-color:var(--accent);} 100%{ transform:none; } }
  .d-mydice{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
  .d-mydice .die{ width:48px; flex:0 0 48px; padding:9px; border-radius:11px; }
  .d-mydice .die.wild{ box-shadow:0 0 0 2px var(--liar); }
  .d-faces{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
  .d-face{ appearance:none; border:2px solid transparent; background:none; padding:0; border-radius:12px; cursor:pointer; }
  .d-face .die{ width:100%; padding:18%; border-radius:10px; }
  .d-face.on{ border-color:var(--accent); }
  .d-face:disabled{ opacity:.3; cursor:not-allowed; }
  .d-prow{ display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--border); font-size:14px; }
  .d-prow:last-child{ border-bottom:none; }
  .d-prow.turn .player-name{ color:var(--accent); }
  .d-prow.out{ opacity:.4; }
  .d-cups{ margin-left:auto; display:flex; gap:3px; }
  .d-cups span{ width:12px; height:12px; border-radius:3px; background:var(--text-dim); }
  .d-cups span.lost{ background:var(--surface-3); }
  .d-hist{ display:flex; align-items:center; gap:8px; padding:5px 0; font-size:13.5px; border-bottom:1px solid var(--border); }
  .d-hist:last-child{ border-bottom:none; }
  .d-hist .die{ width:22px; height:22px; padding:3px; border-radius:5px; border-width:1px; }
  .d-rrow{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:10px 12px; display:flex; flex-direction:column; gap:6px; opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease; }
  .d-rrow.show{ opacity:1; transform:none; }
  .d-rrow .rn{ font-size:13px; font-weight:700; display:flex; justify-content:space-between; }
  .d-rrow .rd{ display:flex; gap:6px; flex-wrap:wrap; }
  .d-rrow .die{ width:34px; height:34px; padding:6px; border-radius:8px; }
  .d-rrow .die.match{ box-shadow:0 0 0 3px var(--accent); }
  .d-rrow .die.nomatch{ opacity:.35; }

  /* ================= 큐윅스 ================= */
  .q-dice{ display:flex; justify-content:center; gap:7px; flex-wrap:wrap; }
  .q-dice .die{ width:46px; flex:0 0 46px; padding:9px; border-radius:11px; }
  .q-dice .die.colored span.p{ background:var(--ink,#fff) !important; }
  .q-dice .gone{ width:46px; height:46px; border-radius:11px; border:1.5px dashed var(--border); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--text-faint); }
  .q-sheet{ display:flex; flex-direction:column; gap:5px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:10px 8px; }
  .q-row{ display:grid; grid-template-columns:repeat(12,1fr); gap:3px; border-radius:10px; padding:4px; position:relative; }
  .q-cell{ appearance:none; font:inherit; aspect-ratio:1; border-radius:6px; border:none; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:12.5px; padding:0; background:rgba(255,255,255,0.88); color:#1c1d26; position:relative; cursor:default; }
  .q-cell.lock{ background:rgba(255,255,255,0.35); color:#1c1d26; font-size:12px; }
  .q-cell.skip{ opacity:.35; }
  .q-cell.x::after{ content:"✕"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; color:#1c1d26; }
  .q-cell.x{ color:transparent; }
  .q-cell.opt{ cursor:pointer; box-shadow:0 0 0 2.5px #fff, 0 0 0 5px rgba(0,0,0,0.35); animation:qopt 1.2s ease-in-out infinite; }
  @keyframes qopt{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.1);} }
  .q-cell.sel{ background:#1c1d26; color:#fff; box-shadow:0 0 0 3px var(--accent); animation:none; }
  .q-cell.just::after{ color:var(--accent); }
  .q-row.closed{ filter:grayscale(.75) brightness(.7); }
  .q-row.closed::after{ content:"🔒 잠김"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:11px; font-weight:800; background:rgba(0,0,0,0.6); color:#fff; padding:2px 6px; border-radius:6px; }
  .q-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 4px 0; font-size:12.5px; color:var(--text-dim); }
  .q-pen{ display:flex; gap:4px; align-items:center; }
  .q-pen span{ width:16px; height:16px; border-radius:4px; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--bad); font-weight:800; }
  .q-score{ font-family:var(--font-mono); font-weight:800; color:var(--text); font-size:14px; }
  .q-mini{ padding:8px 0; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:4px; }
  .q-mini:last-child{ border-bottom:none; }
  .q-mini .mh{ display:flex; align-items:center; gap:8px; font-size:13.5px; }
  .q-mini .mh .st{ margin-left:auto; font-size:12px; color:var(--text-dim); }
  .q-mini .mh .ok{ color:var(--good); font-weight:700; }
  .q-mini .q-row{ gap:2px; padding:2px; }
  .q-mini .q-cell{ font-size:0; border-radius:3px; }
  .q-mini .q-cell.x::after{ font-size:10px; }
  .q-mini .q-row.closed::after{ font-size:9px; padding:1px 4px; }

  /* ---------- 앱 설치 (PWA) ---------- */
  .install-cta{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
    background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius); padding:12px 14px; color:var(--text); font:inherit; }
  .install-cta img{ width:44px; height:44px; border-radius:11px; flex:none; }
  .install-cta span{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
  .install-cta b{ font-size:15px; }
  .install-cta small{ font-size:12px; color:var(--text-dim); }
  .install-cta i{ font-style:normal; font-size:22px; color:var(--text-faint); }
  .install-steps{ list-style:none; margin:0 0 6px; padding:0; display:flex; flex-direction:column; gap:10px; counter-reset:st; }
  .install-steps li{ counter-increment:st; display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.5; color:var(--text); }
  .install-steps li::before{ content:counter(st); flex:none; width:22px; height:22px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
    font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; margin-top:1px; }
  .install-steps .ic{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 5px; border-radius:6px;
    background:var(--surface-3); font-size:13px; vertical-align:middle; }