:root{
    --ink:#14131c;
    --surface:#1f1d2b;
    --surface-2:#262436;
    --surface-3:#2d2a3f;
    --hairline:#3a3750;
    --brass:#c9a54c;
    --brass-dim:#8a733a;
    --brass-glow:#e6c579;
    --ivory:#ece6d6;
    --muted:#948fa8;
    --good:#7fae72;
    --bad:#b25646;
    --badge-text:#14131c;
    --btn-primary-text:#211c0f;

    --brass-rgb:201,165,76;
    --brass-glow-rgb:230,197,121;
    --bad-rgb:178,86,70;

    --el-fire:#d1633a;
    --el-blade:#9fb0c3;
    --el-ice:#6fc2d0;
    --el-lightning:#a888e0;
    --el-nature:#7fa363;
    --el-earth:#ab8558;
    --el-shadow:#8a78c2;
    --el-undead:#b9c17a;

    --font-display:'Cinzel', Georgia, 'Times New Roman', serif;
    --font-body:'Archivo', -apple-system, 'Segoe UI', sans-serif;
    --font-mono:'JetBrains Mono', 'Courier New', monospace;
  }

  /* light palette — "illuminated manuscript" companion to the dark grimoire */
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]){
      --ink:#ede4d1;
      --surface:#e2d6bd;
      --surface-2:#d8c8a8;
      --surface-3:#ccba95;
      --hairline:#b39d68;
      --brass:#8a5a1f;
      --brass-dim:#6b4517;
      --brass-glow:#a9711f;
      --ivory:#241d12;
      --muted:#69593e;
      --good:#3c7a34;
      --bad:#9c3a2b;
      --badge-text:#f7f0de;
      --btn-primary-text:#f7f0de;

      --brass-rgb:138,90,31;
      --brass-glow-rgb:169,113,31;
      --bad-rgb:156,58,43;

      --el-fire:#b8451c;
      --el-blade:#46586b;
      --el-ice:#1c7885;
      --el-lightning:#6238a0;
      --el-nature:#3c6b28;
      --el-earth:#7a5220;
      --el-shadow:#453169;
      --el-undead:#65701f;
    }
  }
  :root[data-theme="light"]{
    --ink:#ede4d1;
    --surface:#e2d6bd;
    --surface-2:#d8c8a8;
    --surface-3:#ccba95;
    --hairline:#b39d68;
    --brass:#8a5a1f;
    --brass-dim:#6b4517;
    --brass-glow:#a9711f;
    --ivory:#241d12;
    --muted:#69593e;
    --good:#3c7a34;
    --bad:#9c3a2b;
    --badge-text:#f7f0de;
    --btn-primary-text:#f7f0de;

    --brass-rgb:138,90,31;
    --brass-glow-rgb:169,113,31;
    --bad-rgb:156,58,43;

    --el-fire:#b8451c;
    --el-blade:#46586b;
    --el-ice:#1c7885;
    --el-lightning:#6238a0;
    --el-nature:#3c6b28;
    --el-earth:#7a5220;
    --el-shadow:#453169;
    --el-undead:#65701f;
  }
  :root[data-theme="dark"]{
    --ink:#14131c;
    --surface:#1f1d2b;
    --surface-2:#262436;
    --surface-3:#2d2a3f;
    --hairline:#3a3750;
    --brass:#c9a54c;
    --brass-dim:#8a733a;
    --brass-glow:#e6c579;
    --ivory:#ece6d6;
    --muted:#948fa8;
    --good:#7fae72;
    --bad:#b25646;
    --badge-text:#14131c;
    --btn-primary-text:#211c0f;

    --brass-rgb:201,165,76;
    --brass-glow-rgb:230,197,121;
    --bad-rgb:178,86,70;

    --el-fire:#d1633a;
    --el-blade:#9fb0c3;
    --el-ice:#6fc2d0;
    --el-lightning:#a888e0;
    --el-nature:#7fa363;
    --el-earth:#ab8558;
    --el-shadow:#8a78c2;
    --el-undead:#b9c17a;
  }
  :root[data-theme="ember"]{
    --ink:#1a0f0d;
    --surface:#2b1512;
    --surface-2:#3a1c17;
    --surface-3:#45211a;
    --hairline:#5c2f22;
    --brass:#e0793a;
    --brass-dim:#a8552a;
    --brass-glow:#ff9552;
    --ivory:#f5e4d6;
    --muted:#b58a72;
    --good:#8fbf6a;
    --bad:#e0453a;
    --badge-text:#1a0f0d;
    --btn-primary-text:#1a0f0d;

    --brass-rgb:224,121,58;
    --brass-glow-rgb:255,149,82;
    --bad-rgb:224,69,58;
  }
  :root[data-theme="frost"]{
    --ink:#e8eef2;
    --surface:#d7e3ea;
    --surface-2:#c3d5e0;
    --surface-3:#aec5d3;
    --hairline:#8fa8b8;
    --brass:#2a6f8a;
    --brass-dim:#1f5468;
    --brass-glow:#3888a8;
    --ivory:#132228;
    --muted:#54707d;
    --good:#2f7a3f;
    --bad:#a13a2e;
    --badge-text:#eef5f8;
    --btn-primary-text:#eef5f8;

    --brass-rgb:42,111,138;
    --brass-glow-rgb:56,136,168;
    --bad-rgb:161,58,46;

    --el-fire:#b8451c;
    --el-blade:#46586b;
    --el-ice:#1c7885;
    --el-lightning:#6238a0;
    --el-nature:#3c6b28;
    --el-earth:#7a5220;
    --el-shadow:#453169;
    --el-undead:#65701f;
  }

  *{ box-sizing:border-box; }

  /* ---------- theme-matched scrollbars ---------- */
  *{ scrollbar-width:thin; scrollbar-color:var(--brass-dim) var(--surface-2); }
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-track{ background:var(--surface-2); }
  ::-webkit-scrollbar-thumb{ background:var(--brass-dim); border-radius:6px; border:2px solid var(--surface-2); }
  ::-webkit-scrollbar-thumb:hover{ background:var(--brass); }
  ::-webkit-scrollbar-corner{ background:var(--surface-2); }
  html,body{ margin:0; padding:0; }
  html{ background:var(--ink); }
  body{
    background:var(--ink);
    color:var(--ivory);
    font-family:var(--font-body);
    min-height:100vh;
    padding:28px 20px 60px;
    position:relative;
    overflow-x:hidden;
    transition:background .25s, color .25s;
  }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  }

  /* faint octagon watermark */
  body::before{
    content:"";
    position:fixed;
    top:50%; left:50%;
    width:min(1100px, 140vw);
    height:min(1100px, 140vw);
    transform:translate(-50%,-50%);
    background:
      radial-gradient(circle at 50% 50%, transparent 0 38%, var(--hairline) 38% 38.3%, transparent 38.3%),
      radial-gradient(circle at 50% 50%, transparent 0 60%, var(--hairline) 60% 60.2%, transparent 60.2%);
    opacity:.16;
    pointer-events:none;
    z-index:0;
  }

  .wrap{ position:relative; z-index:1; max-width:980px; margin:0 auto; }

  .top-controls{
    position:fixed;
    top:14px; right:60px; /* 14px + the 46px sidebar column it must clear (see .lobby-sidebar) */
    z-index:25;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px;
    max-width:min(560px, calc(100vw - 66px));
  }
  /* Below 640px the sidebar collapses to a small floating corner button
     instead of a persistent 46px column (see .lobby-sidebar's own 640px
     rule), so top-controls no longer needs to dodge it here. */
  @media (max-width:640px){
    .top-controls{ right:14px; max-width:min(560px, calc(100vw - 20px)); }
  }
  /* top-bar controls — minimal, uniform-height pills rather than hard boxes */
  .top-controls .icon-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    height:34px; padding:0 14px;
    background:color-mix(in srgb, var(--ivory) 11%, transparent);
    -webkit-backdrop-filter:blur(14px) saturate(1.4);
    backdrop-filter:blur(14px) saturate(1.4);
    border:1px solid color-mix(in srgb, var(--ivory) 18%, transparent);
    border-radius:999px;
    color:var(--ivory);
    font-size:12.5px; font-weight:600; letter-spacing:.02em; line-height:1;
    box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ivory) 14%, transparent);
    transition:background .16s ease, color .16s ease, border-color .16s ease;
  }
  .top-controls .icon-btn:hover,
  .top-controls .icon-btn[aria-expanded="true"]{
    background:color-mix(in srgb, var(--ivory) 14%, transparent);
    color:var(--ivory);
    border-color:color-mix(in srgb, var(--brass) 50%, transparent);
  }
  .top-controls .sound-ic{ display:inline-flex; }
  @supports not (background: color-mix(in srgb, white, black)){
    .top-controls .icon-btn{ background:var(--surface-2); border-color:transparent; }
  }
  .top-controls .icon-btn:active{ transform:none; }
  .icon-btn{ display:inline-flex; align-items:center; gap:7px; }
  .icon-btn svg{ width:14px; height:14px; flex:none; }
  .swatch-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; flex:none; }
  .avatar-img{ width:20px; height:20px; border-radius:50%; flex:none; background:var(--surface-3); margin-left:-4px; }
  .top-controls .nav-logo{ width:16px; height:16px; border-radius:4px; margin-left:-3px; }

  .theme-picker{ position:relative; }
  .theme-menu{
    position:absolute; top:calc(100% + 8px); right:0;
    background:color-mix(in srgb, var(--surface-2) 78%, transparent);
    -webkit-backdrop-filter:blur(20px) saturate(1.4);
    backdrop-filter:blur(20px) saturate(1.4);
    border:1px solid color-mix(in srgb, var(--ivory) 14%, transparent); border-radius:12px;
    padding:6px; display:none; flex-direction:column; gap:2px; min-width:158px;
    box-shadow:0 18px 44px -12px rgba(0,0,0,.5);
    z-index:26;
  }
  .theme-menu.open{ display:flex; }
  .theme-option{
    display:flex; align-items:center; gap:9px;
    background:none; border:none; color:var(--ivory);
    padding:9px 10px; border-radius:8px; font-size:12.5px; text-align:left; width:100%;
    font-family:var(--font-body);
    transition:background .13s;
  }
  .theme-option:hover{ background:color-mix(in srgb, var(--ivory) 12%, transparent); }
  .theme-option.active{ color:var(--brass-glow); font-weight:700; }

  @media (max-width:520px){
    .top-controls{ top:10px; right:10px; gap:6px; }
    .top-controls .icon-btn{ height:32px; padding:0 10px; }
    .icon-btn .btn-label{ display:none; }
  }

  header{ text-align:center; margin-bottom:22px; }
  h1{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(28px, 5vw, 40px);
    letter-spacing:.06em;
    margin:0 0 6px;
    color:var(--ivory);
    text-wrap:balance;
  }
  h1 .accent{ color:var(--brass); }
  .subtitle{
    font-size:13px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
    margin:0;
  }

  button{ font-family:var(--font-body); cursor:pointer; }
  button:focus-visible, .card:focus-visible{
    outline:2px solid var(--brass-glow);
    outline-offset:2px;
  }

  /* ---------- buttons: frosted glass ---------- */
  .btn{
    background:color-mix(in srgb, var(--ivory) 8%, transparent);
    -webkit-backdrop-filter:blur(12px) saturate(1.35);
    backdrop-filter:blur(12px) saturate(1.35);
    border:1px solid color-mix(in srgb, var(--ivory) 15%, transparent);
    color:var(--ivory);
    padding:9px 17px;
    border-radius:11px;
    font-size:13px;
    font-weight:600;
    letter-spacing:.02em;
    box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ivory) 13%, transparent);
    transition:border-color .16s, transform .1s, background .16s, box-shadow .16s, filter .16s;
  }
  .btn:hover{
    background:color-mix(in srgb, var(--ivory) 14%, transparent);
    border-color:color-mix(in srgb, var(--brass) 55%, transparent);
  }
  .btn:active{ transform:translateY(1px); }
  .btn.primary{
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--brass-glow) 90%, transparent),
      color-mix(in srgb, var(--brass) 86%, transparent));
    border-color:color-mix(in srgb, var(--brass) 70%, transparent);
    color:var(--btn-primary-text);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
      0 6px 20px -8px color-mix(in srgb, var(--brass) 55%, transparent);
  }
  .btn.primary:hover{ filter:brightness(1.07); border-color:color-mix(in srgb, var(--brass) 85%, transparent); }
  .btn:disabled{ opacity:.35; cursor:not-allowed; filter:none; }
  @supports not (background: color-mix(in srgb, white, black)){
    .btn{ background:var(--surface-2); border-color:var(--hairline); }
    .btn.primary{ background:linear-gradient(180deg, var(--brass-glow), var(--brass)); }
  }

  /* ---------- player zones ---------- */
  .table-frame{
    position:relative;
    border:1px solid var(--hairline);
    border-radius:10px;
    background:linear-gradient(180deg, rgba(255,255,255,.015), transparent 40%);
    padding:2px;
  }
  .table-frame.board-shake{ animation:board-shake .32s ease; }
  .table-frame.board-shake-strong{ animation:board-shake-strong .42s ease; }
  @keyframes board-shake{
    0%,100%{ transform:translateX(0); }
    20%{ transform:translateX(-5px); }
    40%{ transform:translateX(4px); }
    60%{ transform:translateX(-3px); }
    80%{ transform:translateX(2px); }
  }
  @keyframes board-shake-strong{
    0%,100%{ transform:translate(0,0); }
    15%{ transform:translate(-8px,1px); }
    30%{ transform:translate(7px,-1px); }
    45%{ transform:translate(-6px,1px); }
    60%{ transform:translate(5px,0); }
    75%{ transform:translate(-3px,0); }
    90%{ transform:translate(2px,0); }
  }

  /* Full-screen shake on top of the board-local one above — extra weight
     behind a card actually dying, not just a wheel outcome. */
  body.screen-shake{ animation:screen-shake .32s ease; }
  body.screen-shake-strong{ animation:screen-shake-strong .42s ease; }
  @keyframes screen-shake{
    0%,100%{ transform:translate(0,0); }
    20%{ transform:translate(-7px,4px); }
    40%{ transform:translate(6px,-5px); }
    60%{ transform:translate(-5px,5px); }
    80%{ transform:translate(4px,-3px); }
  }
  @keyframes screen-shake-strong{
    0%,100%{ transform:translate(0,0) rotate(0); }
    15%{ transform:translate(-11px,6px) rotate(-.4deg); }
    30%{ transform:translate(10px,-8px) rotate(.4deg); }
    45%{ transform:translate(-9px,8px) rotate(-.3deg); }
    60%{ transform:translate(8px,-6px) rotate(.3deg); }
    75%{ transform:translate(-6px,4px) rotate(-.2deg); }
    90%{ transform:translate(4px,-2px) rotate(.1deg); }
  }

  body.dragging-active{ user-select:none; -webkit-user-select:none; cursor:grabbing; }
  body.dragging-active *{ cursor:grabbing !important; }

  .zone{
    padding:16px 18px;
    position:relative;
    transition:background .3s;
  }
  .zone.active-turn{
    background:radial-gradient(ellipse at center, rgba(var(--brass-rgb),.08), transparent 70%);
  }
  .zone-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin-bottom:10px;
    flex-wrap:wrap;
    gap:6px;
  }
  .player-name{
    font-family:var(--font-display);
    font-size:15px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--muted);
    display:flex;
    align-items:center;
    gap:8px;
  }
  .zone.active-turn .player-name{ color:var(--brass); }
  .turn-dot{
    width:7px; height:7px; border-radius:50%;
    background:var(--hairline);
  }
  .zone.active-turn .turn-dot{
    background:var(--brass-glow);
    box-shadow:0 0 6px var(--brass-glow);
  }
  .stats{ display:flex; align-items:center; gap:12px; }
  .card-tally{ font-family:var(--font-mono); font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
  .momentum{
    display:flex; align-items:center; gap:4px;
    font-family:var(--font-mono); font-size:12px;
    color:var(--el-lightning);
    font-variant-numeric:tabular-nums;
  }
  .momentum svg{ width:12px; height:12px; }
  .momentum.ready{ font-weight:700; text-shadow:0 0 8px rgba(var(--brass-rgb),.4); }

  /* ---------- chess clocks ---------- */
  .clock{
    font-family:var(--font-mono); font-size:12px; font-weight:600;
    color:var(--muted); font-variant-numeric:tabular-nums;
    padding:2px 7px; border-radius:4px; border:1px solid transparent;
  }
  .clock.active{ color:var(--ivory); background:var(--surface-3); border-color:var(--hairline); }
  .clock.low{ color:var(--bad); }
  .clock.low.active{ animation:clock-pulse 1s ease infinite; border-color:var(--bad); }
  @keyframes clock-pulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(var(--bad-rgb),0); }
    50%{ box-shadow:0 0 0 3px rgba(var(--bad-rgb),.35); }
  }

  .turn-clock{
    text-align:center;
    font-family:var(--font-mono); font-size:13px; font-weight:600;
    color:var(--muted); font-variant-numeric:tabular-nums;
    letter-spacing:.04em;
    margin-top:2px;
  }
  .turn-clock.low{ color:var(--bad); animation:clock-pulse 0.6s ease infinite; }

  /* ---------- draw offer ---------- */
  .draw-offer-banner{
    display:flex; align-items:center; justify-content:center; gap:10px;
    flex-wrap:wrap;
    margin:10px 18px 0;
    padding:10px 14px;
    border:1px solid var(--brass-dim);
    border-radius:8px;
    background:rgba(var(--brass-rgb),.08);
    font-size:13px;
    color:var(--ivory);
    animation:enter-in .3s ease;
  }
  .draw-offer-banner .btn{ padding:6px 12px; font-size:12px; }

  /* ---------- incoming-challenge toast ---------- */
  .challenge-toast{
    position:fixed;
    top:16px; left:50%;
    transform:translateX(-50%);
    z-index:90;
    display:flex; flex-wrap:wrap; align-items:center; gap:12px;
    background:var(--surface-2);
    border:1px solid var(--brass);
    border-radius:10px;
    padding:12px 16px;
    box-shadow:0 16px 40px rgba(0,0,0,.4);
    animation:toast-in .35s cubic-bezier(.2,.9,.3,1.2);
    max-width:min(420px, calc(100vw - 24px));
  }
  .challenge-toast.busy{ border-color:var(--bad); }
  @keyframes toast-in{
    0%{ transform:translateX(-50%) translateY(-24px); opacity:0; }
    100%{ transform:translateX(-50%) translateY(0); opacity:1; }
  }
  .challenge-toast img{ width:36px; height:36px; border-radius:50%; background:var(--surface-3); flex:none; }
  .challenge-toast .toast-text{ font-size:13.5px; color:var(--ivory); flex:1; min-width:0; }
  .challenge-toast .toast-warning{ flex-basis:100%; font-size:11.5px; color:var(--bad); }
  .challenge-toast .toast-actions{ display:flex; gap:6px; flex:none; }
  .challenge-toast .btn{ padding:7px 12px; font-size:12px; }

  .info-toast{
    position:fixed; top:16px; left:50%; transform:translateX(-50%);
    z-index:90; background:var(--surface-2); border:1px solid var(--hairline);
    border-radius:10px; padding:12px 18px; box-shadow:0 16px 40px rgba(0,0,0,.4);
    animation:toast-in .35s cubic-bezier(.2,.9,.3,1.2), toast-out .35s ease 3.6s forwards;
    max-width:min(420px, calc(100vw - 24px));
    font-size:13.5px; color:var(--ivory); text-align:center;
  }
  @keyframes toast-out{
    0%{ opacity:1; transform:translateX(-50%) translateY(0); }
    100%{ opacity:0; transform:translateX(-50%) translateY(-16px); }
  }

  /* ---------- collapsible "add a friend by code" ---------- */
  .add-friend-details{ margin-top:18px; }
  .add-friend-details summary{
    cursor:pointer;
    font-size:12px;
    letter-spacing:.05em;
    color:var(--muted);
    padding:4px 0;
  }
  .add-friend-details summary:hover{ color:var(--ivory); }
  .add-friend-details p{ color:var(--muted); font-size:13.5px; line-height:1.6; }

  .row-label{
    font-size:10px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
    margin:10px 0 6px;
  }
  .row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    min-height:112px;
    overflow-x:auto;
    padding-bottom:2px;
  }
  .shared-table{
    padding:14px 18px 4px;
    margin:4px 0;
    border-top:1px dashed var(--hairline);
    border-bottom:1px dashed var(--hairline);
    background:radial-gradient(ellipse at center, rgba(var(--brass-rgb),.04), transparent 75%);
  }
  .center-label{ text-align:center; }
  .table-row{ min-height:96px; justify-content:center; }
  .table-divider{
    height:1px;
    margin:6px 0;
    background:linear-gradient(90deg, transparent, var(--hairline) 20%, var(--hairline) 80%, transparent);
  }
  .row.empty::after{
    content:"—";
    color:var(--hairline);
    align-self:center;
    font-size:13px;
  }

  /* ---------- cards ---------- */
  .card{
    width:98px;
    min-width:98px;
    flex-shrink:0;
    height:132px;
    border-radius:6px;
    border:1px solid var(--hairline);
    background:linear-gradient(180deg, var(--surface-2), var(--surface));
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:0;
    position:relative;
    color:var(--ivory);
    transition:transform .12s, border-color .12s, box-shadow .12s, opacity .3s, background .25s;
    overflow:hidden;
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
  }
  .card .bar{ width:100%; height:5px; background:var(--el, var(--brass)); }
  .card .glyph{
    width:34px; height:34px;
    margin-top:16px;
    color:var(--el, var(--brass));
  }
  .card .glyph svg{ width:100%; height:100%; }
  .card .name{
    font-family:var(--font-display);
    font-size:11.5px;
    line-height:1.25;
    text-align:center;
    padding:8px 6px 0;
    letter-spacing:.01em;
  }
  .card .tag{
    margin-top:auto;
    margin-bottom:8px;
    font-size:9px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--muted);
  }

  .card.playable{ cursor:pointer; }
  .card.playable:hover{ transform:translateY(-4px); border-color:var(--el, var(--brass)); }
  .card.selected{
    border-color:var(--brass-glow);
    box-shadow:0 0 0 1px var(--brass-glow), 0 6px 18px rgba(var(--brass-glow-rgb),.25);
    transform:translateY(-6px);
  }
  .card.targetable{ cursor:pointer; --ring:var(--brass-glow); }
  .card.targetable.win{ --ring:var(--good); }
  .card.targetable.lose{ --ring:var(--bad); }
  .card.targetable.neutral{ --ring:var(--muted); }
  .card.targetable.wild{ --ring:var(--el-lightning); }
  .card.targetable::after{
    content:"";
    position:absolute; inset:0;
    border-radius:6px;
    box-shadow:inset 0 0 0 2px var(--ring);
    animation:pulse-ring 1.4s ease-in-out infinite;
  }
  .card.targetable:hover{ transform:translateY(-5px); }
  .card.targetable:hover::after{ animation:none; box-shadow:inset 0 0 0 3px var(--ring); }
  @keyframes pulse-ring{
    0%,100%{ box-shadow:inset 0 0 0 2px var(--ring); }
    50%{ box-shadow:inset 0 0 0 2px transparent; }
  }
  .outcome-badge{
    position:absolute;
    bottom:0; left:0; right:0;
    text-align:center;
    font-family:var(--font-body);
    font-size:9.5px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:3px 0;
    color:var(--badge-text);
    background:var(--ring);
  }
  .card.static{ opacity:.94; }
  .card.destroyed{
    animation:destroy-out 1.15s cubic-bezier(.36,.07,.19,.97) forwards;
    z-index:5;
  }
  @keyframes destroy-out{
    0%{ transform:scale(1) rotate(0); opacity:1; filter:brightness(1) saturate(1); }
    6%{ transform:scale(1.22) rotate(-3deg); filter:brightness(1.9) saturate(1.4); box-shadow:0 0 0 3px var(--bad), 0 0 32px rgba(var(--bad-rgb),.8); border-color:var(--bad); }
    16%{ transform:scale(.85) rotate(4deg) translate(-4px,-2px); }
    26%{ transform:scale(1.02) rotate(-4deg) translate(4px,1px); box-shadow:0 0 0 2px var(--bad), 0 0 18px rgba(var(--bad-rgb),.5); }
    38%{ transform:scale(.88) rotate(3deg) translate(-3px,2px); }
    52%{ transform:scale(.94) rotate(-2deg) translate(2px,3px); opacity:1; box-shadow:0 0 0 1px var(--bad), 0 0 10px rgba(var(--bad-rgb),.3); }
    68%{ transform:scale(.7) rotate(14deg) translate(6px,14px); opacity:.75; }
    100%{ transform:scale(.2) rotate(42deg) translate(24px,58px); opacity:0; filter:brightness(.5); }
  }
  .card.destroyed-wild{
    animation:destroy-out-wild 1.25s cubic-bezier(.36,.07,.19,.97) forwards;
    z-index:5;
  }
  @keyframes destroy-out-wild{
    0%{ transform:scale(1) rotate(0); opacity:1; filter:brightness(1); }
    6%{ transform:scale(1.3) rotate(-4deg); filter:brightness(2.1); box-shadow:0 0 0 4px var(--el-lightning), 0 0 46px rgba(168,136,224,.9); border-color:var(--el-lightning); }
    18%{ transform:scale(.82) rotate(6deg) translate(-5px,-3px); }
    30%{ transform:scale(1.08) rotate(-6deg) translate(5px,2px); box-shadow:0 0 0 3px var(--el-lightning), 0 0 26px rgba(168,136,224,.6); }
    44%{ transform:scale(.86) rotate(5deg) translate(-4px,3px); opacity:1; }
    60%{ transform:scale(.9) rotate(-4deg) translate(3px,4px); opacity:.9; }
    100%{ transform:scale(.16) rotate(-46deg) translate(-22px,62px); opacity:0; filter:brightness(.4); }
  }
  .card.entering{ animation:enter-in .35s cubic-bezier(.2,.9,.32,1.3); }
  @keyframes enter-in{
    0%{ transform:translateY(14px) scale(.9) rotate(-3deg); opacity:0; }
    60%{ transform:translateY(-3px) scale(1.04) rotate(1deg); opacity:1; }
    100%{ transform:translateY(0) scale(1) rotate(0); opacity:1; }
  }
  .card.leaving{ animation:leave-out .28s ease forwards; pointer-events:none; }
  @keyframes leave-out{
    0%{ transform:scale(1) translateY(0); opacity:1; }
    100%{ transform:scale(.82) translateY(-16px); opacity:0; }
  }

  .card.playable{ touch-action:none; }

  .card.impact-win{ animation:impact-win-pulse .5s ease; }
  @keyframes impact-win-pulse{
    0%{ box-shadow:0 0 0 0 rgba(127,174,114,0); transform:scale(1); }
    35%{ box-shadow:0 0 0 5px rgba(127,174,114,.55); transform:scale(1.07); }
    100%{ box-shadow:0 0 0 0 rgba(127,174,114,0); transform:scale(1); }
  }
  .card.impact-neutral{ animation:impact-neutral-pulse .4s ease; }
  @keyframes impact-neutral-pulse{
    0%{ box-shadow:0 0 0 0 rgba(148,143,168,0); }
    40%{ box-shadow:0 0 0 4px rgba(148,143,168,.45); }
    100%{ box-shadow:0 0 0 0 rgba(148,143,168,0); }
  }

  .card.dragging{
    position:fixed;
    margin:0;
    z-index:80;
    pointer-events:none;
    cursor:grabbing;
    box-shadow:0 22px 42px rgba(0,0,0,.45), 0 0 0 1px var(--brass-glow);
    transition:box-shadow .15s;
    will-change:transform;
  }

  .card.drag-hover-win, .card.drag-hover-lose, .card.drag-hover-neutral{
    transform:scale(1.07);
    transition:transform .1s, box-shadow .1s;
  }
  .card.drag-hover-win{ box-shadow:0 0 0 3px var(--good), 0 10px 22px rgba(0,0,0,.3); }
  .card.drag-hover-lose{ box-shadow:0 0 0 3px var(--bad), 0 10px 22px rgba(0,0,0,.3); }
  .card.drag-hover-neutral{ box-shadow:0 0 0 3px var(--muted), 0 10px 22px rgba(0,0,0,.3); }

  .shared-table.drop-zone-hint{
    background:radial-gradient(ellipse at center, rgba(var(--brass-rgb),.14), transparent 75%);
    outline:2px dashed var(--brass-dim);
    outline-offset:-6px;
  }

  .turn-banner{
    text-align:center;
    font-family:var(--font-display);
    font-size:19px;
    letter-spacing:.05em;
    color:var(--brass-glow);
    padding-top:16px;
    text-shadow:0 0 16px rgba(var(--brass-glow-rgb),.35);
  }

  /* ---------- console ---------- */
  .console{
    margin:18px 0;
    padding:14px 18px;
    border-top:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    align-items:center;
    justify-content:space-between;
  }
  .console-left{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
  .turn-counter{ font-family:var(--font-mono); font-size:12px; color:var(--muted); }
  .turn-counter b{ color:var(--ivory); font-weight:600; }
  .console-right{ display:flex; gap:8px; flex-wrap:wrap; }

  .combo-btn{
    background:var(--surface-3);
    border:1px solid var(--brass-dim);
    color:var(--brass-glow);
    padding:8px 12px;
    border-radius:5px;
    font-size:12px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:6px;
    animation:combo-glow 1.8s ease-in-out infinite;
  }
  @keyframes combo-glow{
    0%,100%{ box-shadow:0 0 0 rgba(var(--brass-rgb),0); }
    50%{ box-shadow:0 0 12px rgba(var(--brass-rgb),.35); }
  }
  .combo-btn:hover{ border-color:var(--brass-glow); }

  .wild-btn{
    background:var(--surface-3);
    border:1px solid var(--el-lightning);
    color:var(--el-lightning);
    padding:8px 12px;
    border-radius:5px;
    font-size:12px;
    font-weight:600;
  }
  .wild-btn:hover{ filter:brightness(1.15); }
  .wild-btn.armed{ background:var(--el-lightning); color:var(--surface); }

  /* ---------- log ---------- */
  .log{
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--muted);
    max-height:88px;
    overflow-y:auto;
    padding:10px 14px;
    background:var(--surface);
    border:1px solid var(--hairline);
    border-radius:6px;
    line-height:1.6;
  }
  .log .entry.destroy{ color:var(--bad); }
  .log .entry.win{ color:var(--good); }
  .log .entry.reckoning{ color:var(--brass-glow); font-weight:600; letter-spacing:.04em; }
  .log .entry.pass{ color:var(--muted); font-style:italic; }
  .log .entry b{ color:var(--ivory); font-weight:500; }

  /* ---------- rules panel ---------- */
  .overlay{
    position:fixed; inset:0;
    background:rgba(10,9,14,.72);
    backdrop-filter:blur(2px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:20;
    padding:20px;
  }
  .overlay.open{ display:flex; }
  .panel{
    background:var(--surface);
    border:1px solid var(--hairline);
    border-radius:10px;
    max-width:720px;
    width:100%;
    max-height:88vh;
    overflow-y:auto;
    padding:26px 28px 24px;
  }
  .panel-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
  .panel h2{ font-family:var(--font-display); letter-spacing:.05em; font-size:22px; margin:0; }
  .panel .close{ background:none; border:none; color:var(--muted); font-size:20px; line-height:1; padding:4px 8px; }
  .panel .close:hover{ color:var(--ivory); }
  .panel p{ color:var(--muted); font-size:13.5px; line-height:1.6; }
  .panel p b{ color:var(--ivory); }

  .wheel-wrap{ display:flex; justify-content:center; margin:18px 0 8px; }
  #wheelSvg text{ font-family:var(--font-body); }
  #wheelSvg .wnode{ cursor:pointer; }
  #wheelSvg .wnode circle.bg{ transition:stroke .15s, stroke-width .15s; }
  #wheelSvg .wnode:hover circle.bg{ stroke:var(--brass-glow); }

  .wheel-hint{ text-align:center; font-size:11.5px; color:var(--muted); margin-top:2px; }

  .combo-list{ margin-top:18px; }
  .combo-row{
    display:flex; align-items:center; gap:8px;
    font-size:13px; color:var(--ivory);
    padding:7px 0;
    border-bottom:1px solid var(--hairline);
  }
  .combo-row:last-child{ border-bottom:none; }
  .combo-row .arrow{ color:var(--muted); }
  .swatch{ width:9px; height:9px; border-radius:50%; display:inline-block; }

  .rules-text ul{ padding-left:18px; font-size:13px; color:var(--muted); line-height:1.7; }
  .rules-text li b{ color:var(--ivory); }

  /* ---------- end screen ---------- */
  .end-overlay{
    position:fixed; inset:0;
    background:rgba(10,9,14,.82);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:30;
  }
  .end-overlay.open{ display:flex; }
  .end-close{
    position:absolute; top:22px; right:26px;
    font-size:26px; color:var(--muted);
  }
  .end-close:hover{ color:var(--ivory); }
  .seal{
    width:220px; height:220px;
    border-radius:50%;
    border:2px solid var(--brass);
    box-shadow:0 0 0 6px var(--ink), 0 0 0 7px var(--hairline), 0 0 40px rgba(var(--brass-rgb),.25);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:radial-gradient(circle at 50% 35%, var(--surface-2), var(--surface));
    text-align:center;
    animation:seal-in .5s cubic-bezier(.2,.9,.3,1.2);
  }
  @keyframes seal-in{ 0%{ transform:scale(.6); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
  .seal .kicker{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
  .seal .verdict{ font-family:var(--font-display); font-size:22px; color:var(--brass-glow); margin:8px 0 4px; letter-spacing:.03em; padding:0 14px; text-wrap:balance; }
  .end-actions{ margin-top:22px; display:flex; gap:10px; }

  .banner{
    font-family:var(--font-mono);
    font-size:12px;
    text-align:center;
    color:var(--brass-glow);
    padding:6px 0;
    min-height:18px;
  }
  .ring-legend{ display:inline-flex; align-items:center; gap:5px; margin-left:12px; color:var(--muted); }
  .ring-legend .dot{
    display:inline-block; width:8px; height:8px; border-radius:50%;
    margin-left:8px;
  }
  .ring-legend .dot:first-child{ margin-left:0; }
  .ring-legend .dot.win{ background:var(--good); }
  .ring-legend .dot.lose{ background:var(--bad); }
  .ring-legend .dot.neutral{ background:var(--muted); }

  footer{
    text-align:center;
    margin-top:26px;
    font-size:11.5px;
    color:var(--hairline);
  }

  /* Placed after every rule it touches on purpose — a media query gets no
     cascade priority over a later plain rule of equal specificity, so this
     used to sit near the .card/.row definitions and silently lose to the
     unconditional .card{width:98px} etc. declared further down the file.
     Keep any future override here, past its base rule, or it'll be dead. */
  @media (max-width:600px){
    body{ padding:56px 8px 30px; }
    .card{ width:68px; min-width:68px; height:96px; }
    .card .glyph{ width:22px; height:22px; margin-top:8px; }
    .card .name{ font-size:8.5px; padding:4px 3px 0; }
    .card .tag{ font-size:7.5px; margin-bottom:4px; }
    .row{ gap:6px; min-height:78px; overflow-x:visible; }
    .row-label{ margin:6px 0 4px; }
    h1{ font-size:24px; }
    .console{ flex-direction:column; align-items:stretch; gap:8px; margin:10px 0; padding:10px 12px; }
    .console-left, .console-right{ justify-content:center; }
    .console-right .btn{ padding:7px 10px; font-size:11.5px; }
    .zone{ padding:10px 12px; }
    .zone-head{ margin-bottom:6px; }
    .turn-banner{ font-size:16px; padding-top:10px; }
    .shared-table{ padding:10px 12px 4px; margin:2px 0; }
    .table-row{ min-height:78px; }
    .log{ max-height:66px; font-size:10.5px; padding:8px 10px; line-height:1.5; }
    footer{ margin-top:16px; font-size:11px; }
  }

  /* ---------- online: friends / challenges ---------- */
  .badge-dot{
    width:7px; height:7px; border-radius:50%;
    background:var(--bad); display:inline-block; margin-left:6px;
  }
  .code-row{ display:flex; gap:8px; align-items:center; }
  .code-display{
    font-family:var(--font-mono); font-size:18px; letter-spacing:.15em;
    background:var(--surface-2); border:1px solid var(--hairline); border-radius:6px;
    padding:8px 14px; color:var(--brass-glow); flex:1;
  }
  .code-input{
    font-family:var(--font-mono); font-size:15px; letter-spacing:.1em; text-transform:uppercase;
    background:var(--surface-2); border:1px solid var(--hairline); border-radius:6px;
    padding:8px 12px; color:var(--ivory); flex:1; min-width:0;
  }
  .code-input:focus{ outline:2px solid var(--brass-glow); outline-offset:-1px; }
  .online-status{ font-size:12.5px; min-height:16px; margin:6px 0 0; }
  .online-status.error{ color:var(--bad); }
  .online-status.ok{ color:var(--good); }

  .person-row{
    display:flex; align-items:center; gap:10px;
    padding:9px 0; border-bottom:1px solid var(--hairline);
  }
  .person-row:last-child{ border-bottom:none; }
  .person-row img{ width:28px; height:28px; border-radius:50%; background:var(--surface-3); flex:none; }
  .avatar-glyph{
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:50%; flex:none;
    font-size:15px; line-height:1; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  }
  .person-row .person-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; cursor:pointer; }
  .person-row .person-name{ font-size:13.5px; color:var(--ivory); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .person-row .person-name .rating-chip{ margin-left:6px; font-family:var(--font-mono); font-size:10.5px; color:var(--brass-glow); }
  .person-row .person-meta{ font-size:10.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .person-row .person-meta.in-match{ color:var(--brass-glow); font-weight:600; }
  .person-row .btn{ padding:6px 12px; font-size:12px; flex:none; }
  .person-row .btn:disabled{ opacity:.5; }
  /* Click a friend row to expand a small actions drawer (match history +
     remove friend). The drawer is a flex item with a full-width basis so it
     wraps onto its own line below the name/challenge row. */
  .person-row.expandable{ cursor:pointer; flex-wrap:wrap; }
  .person-row .friend-drawer{
    flex-basis:100%; display:none; gap:8px; align-items:center;
    padding:8px 0 2px; padding-left:18px;
  }
  .person-row.expanded .friend-drawer{ display:flex; }
  .person-row .friend-drawer .btn{ padding:5px 10px; font-size:11.5px; }
  .person-row .unfriend-btn{
    flex:none; padding:5px 10px; font-size:11.5px; line-height:1;
    background:transparent; border:1px solid var(--hairline); border-radius:6px;
    color:var(--muted); cursor:pointer; transition:color .15s, border-color .15s;
  }
  .person-row .unfriend-btn:hover{ color:var(--bad); border-color:var(--bad); }
  .person-row .unfriend-btn:disabled{ opacity:.5; cursor:default; }
  .presence-dot{
    width:8px; height:8px; border-radius:50%; flex:none;
    background:var(--hairline);
  }
  .presence-dot.online{ background:var(--good); box-shadow:0 0 5px var(--good); }

  /* ---------- ready-check / countdown / play-later ---------- */
  .ready-overlay{
    position:fixed; inset:0; background:rgba(10,9,14,.88);
    display:none; align-items:center; justify-content:center; z-index:31;
  }
  .ready-overlay.open{ display:flex; }
  .ready-card{
    width:280px; padding:30px 26px; border-radius:16px;
    border:1px solid var(--hairline); background:var(--surface-2);
    box-shadow:0 0 40px rgba(var(--brass-rgb),.18);
    text-align:center; animation:seal-in .4s cubic-bezier(.2,.9,.3,1.2);
  }
  .ready-card .kicker{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
  .ready-card h3{ font-family:var(--font-display); font-size:19px; color:var(--brass-glow); margin:8px 0 4px; }
  .ready-card p{ font-size:12.5px; color:var(--muted); min-height:16px; margin:6px 0 18px; }
  .ready-actions{ display:flex; flex-direction:column; gap:10px; }
  .ready-countdown-num{
    font-family:var(--font-display); font-size:64px; color:var(--brass-glow);
    margin:6px 0 4px; animation:countdown-pulse .9s ease;
  }
  @keyframes countdown-pulse{ 0%{ transform:scale(1.5); opacity:0; } 40%{ opacity:1; } 100%{ transform:scale(1); } }

  /* ---------- profile: avatar picker + match history ---------- */
  .profile-header{ display:flex; align-items:center; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--hairline); margin-bottom:14px; }
  .profile-header .avatar-glyph, .profile-header img{ width:56px; height:56px; font-size:28px; }
  .profile-header .profile-id{ flex:1; min-width:0; }
  .profile-header .profile-name-row{ display:flex; align-items:center; gap:8px; }
  .profile-header .profile-name{ font-family:var(--font-display); font-size:18px; color:var(--ivory); }
  .profile-header .profile-rating{ font-family:var(--font-mono); font-size:12px; color:var(--brass-glow); }
  .profile-edit-link{ background:none; border:none; color:var(--muted); font-size:11px; text-decoration:underline; cursor:pointer; padding:0; }
  .avatar-picker{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
  .avatar-pick-btn{
    width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:18px; border:2px solid transparent; cursor:pointer; background:var(--surface-2);
  }
  .avatar-pick-btn.selected{ border-color:var(--brass); }
  .nickname-row{ display:flex; gap:8px; margin:10px 0; }
  .nickname-row input{
    flex:1; background:var(--surface-2); border:1px solid var(--hairline); border-radius:6px;
    color:var(--ivory); font-family:var(--font-body); font-size:13px; padding:8px 10px;
  }
  .stat-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0; }
  .stat-tile{ background:var(--surface-2); border-radius:8px; padding:10px; text-align:center; }
  .stat-tile .stat-num{ font-family:var(--font-display); font-size:19px; color:var(--brass-glow); }
  .stat-tile .stat-label{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
  .match-row{
    display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px;
    border-left:3px solid var(--hairline); background:var(--surface-2); margin-bottom:6px; cursor:pointer;
  }
  .match-row:hover{ background:var(--surface-3); }
  .match-row.win{ border-left-color:var(--good); }
  .match-row.loss{ border-left-color:var(--bad); }
  .match-row.draw{ border-left-color:var(--muted); }
  .match-row .match-outcome{ font-family:var(--font-mono); font-weight:700; font-size:11.5px; width:34px; flex:none; }
  .match-row.win .match-outcome{ color:var(--good); }
  .match-row.loss .match-outcome{ color:var(--bad); }
  .match-row.draw .match-outcome{ color:var(--muted); }
  .match-row .match-info{ flex:1; min-width:0; font-size:12px; color:var(--ivory); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .match-game-tag{
    display:inline-block; font-size:9px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--muted); background:var(--surface-3); border-radius:4px;
    padding:1px 5px; margin-right:6px; vertical-align:1px;
  }
  .match-row .match-when{ font-size:10.5px; color:var(--muted); flex:none; }

  .match-group{ margin-bottom:8px; }
  .match-group-header{
    width:100%; display:flex; align-items:center; gap:10px;
    background:var(--surface-2); border:1px solid var(--hairline); border-radius:8px;
    padding:10px 12px; cursor:pointer; text-align:left;
  }
  .match-group-header:hover{ background:var(--surface-3); }
  .match-group-name{ font-family:var(--font-display); font-size:13.5px; color:var(--ivory); }
  .match-group-count{ flex:1; font-size:11px; color:var(--muted); }
  .match-group-chevron{ color:var(--muted); transition:transform .15s; flex:none; }
  .match-group-header.open .match-group-chevron{ transform:rotate(90deg); }
  .match-group-body{ padding-top:8px; }
  .match-detail-overlay{
    position:fixed; inset:0; background:rgba(10,9,14,.85); display:none;
    align-items:center; justify-content:center; z-index:40; padding:20px;
  }
  .match-detail-overlay.open{ display:flex; }
  .match-detail-card{
    width:100%; max-width:460px; max-height:80vh; overflow-y:auto;
    background:var(--surface); border:1px solid var(--hairline); border-radius:14px; padding:22px;
  }
  .match-log-line{ padding:6px 0; border-bottom:1px solid var(--hairline); font-size:12.5px; color:var(--ivory); }
  .match-log-line:last-child{ border-bottom:none; }
  .match-log-line.destroy{ color:var(--bad-glow, var(--bad)); }
  .match-log-line.reckoning{ color:var(--brass-glow); }
  .match-log-line.pass{ color:var(--muted); }

  /* ---------- online match: opponent identity + chat ---------- */
  .opp-identity{ display:flex; align-items:center; gap:8px; }
  .opp-identity img{ width:20px; height:20px; border-radius:50%; background:var(--surface-3); }

  .chat-strip{
    display:none;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border-top:1px solid var(--hairline);
    overflow-x:auto;
  }
  .chat-strip.active{ display:flex; }
  .chat-strip .emoji-btn{
    background:none; border:none; font-size:19px; padding:4px 6px;
    border-radius:5px; flex:none; line-height:1;
  }
  .chat-strip .emoji-btn:hover{ background:var(--surface-2); }
  .chat-strip .quick-msg-btn{
    background:var(--surface-2); border:1px solid var(--hairline); border-radius:14px;
    padding:6px 12px; font-size:11.5px; color:var(--ivory); flex:none; white-space:nowrap;
  }
  .chat-strip .quick-msg-btn:hover{ border-color:var(--brass-dim); background:var(--surface-3); }
  .chat-strip .chat-divider{ width:1px; align-self:stretch; background:var(--hairline); flex:none; margin:2px 2px; }

  .floating-text{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%) scale(.5);
    background:var(--surface-2); border:1px solid var(--brass-dim); border-radius:20px;
    padding:9px 18px; font-size:13.5px; font-weight:600; color:var(--ivory);
    white-space:nowrap; opacity:0;
    animation:float-text 2.1s cubic-bezier(.22,.85,.32,1) forwards;
    box-shadow:0 10px 22px rgba(0,0,0,.3);
  }
  @keyframes float-text{
    0%{ transform:translate(-50%,-50%) scale(.5); opacity:0; }
    15%{ transform:translate(-50%,-50%) scale(1.06); opacity:1; }
    30%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
    100%{ transform:translate(-50%,-180px) scale(.92); opacity:0; }
  }

  .reaction-layer{
    position:absolute; inset:0;
    pointer-events:none;
    overflow:visible;
    z-index:45;
  }
  .floating-emoji{
    position:absolute;
    top:50%; left:50%;
    font-size:46px;
    line-height:1;
    transform:translate(-50%,-50%) scale(.3);
    opacity:0;
    animation:float-emoji 1.8s cubic-bezier(.22,.85,.32,1) forwards;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));
  }
  @keyframes float-emoji{
    0%{ transform:translate(-50%,-50%) scale(.3); opacity:0; }
    18%{ transform:translate(-50%,-50%) scale(1.35); opacity:1; }
    32%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
    100%{ transform:translate(-50%,-160px) scale(.85); opacity:0; }
  }


  .view-fade-in{ animation:view-fade-in .4s cubic-bezier(.2,.85,.3,1); }
  @keyframes view-fade-in{
    0%{ opacity:0; transform:translateY(10px); }
    100%{ opacity:1; transform:translateY(0); }
  }

  /* ---------- lobby sidebar (CS:GO/Valorant style, collapsible) ---------- */
  .lobby-sidebar{
    position:fixed; top:0; right:0; height:100vh;
    width:46px;
    background:var(--surface);
    border-left:1px solid var(--hairline);
    z-index:70;
    display:flex; flex-direction:column;
    transition:width .22s cubic-bezier(.2,.85,.3,1);
    box-shadow:-8px 0 24px rgba(0,0,0,.15);
  }
  .lobby-sidebar.expanded{ width:340px; max-width:90vw; }
  .lobby-collapsed-tab{
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    gap:10px; padding:18px 0; width:46px; flex:1;
    background:none; border:none; color:var(--muted); cursor:pointer;
    transition:color .15s, background .15s;
  }
  .lobby-collapsed-tab:hover{ color:var(--brass-glow); background:var(--surface-2); }
  .lobby-sidebar.expanded .lobby-collapsed-tab{ display:none; }
  .lobby-collapsed-tab svg{ width:18px; height:18px; }
  .lobby-collapsed-tab .lobby-vert{
    writing-mode:vertical-rl;
    font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  }
  .lobby-collapsed-tab .badge-dot{ position:relative; }
  .lobby-panel{ display:none; flex-direction:column; height:100%; min-height:0; }
  .lobby-sidebar.expanded .lobby-panel{ display:flex; }
  .lobby-panel-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; border-bottom:1px solid var(--hairline); flex:none;
  }
  .lobby-panel-head h3{ font-family:var(--font-display); font-size:15px; margin:0; letter-spacing:.04em; }
  .lobby-panel-head .close{ background:none; border:none; color:var(--muted); font-size:20px; padding:2px 6px; }
  .lobby-panel-body{ padding:14px 16px 24px; overflow-y:auto; flex:1; min-height:0; }

  .mode-picker{ display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
  .mode-pick-btn{
    display:flex; align-items:center; gap:10px;
    background:color-mix(in srgb, var(--ivory) 7%, transparent);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border:1px solid color-mix(in srgb, var(--ivory) 13%, transparent); border-radius:11px;
    padding:12px 13px; color:var(--ivory); font-size:13px; font-weight:600; text-align:left;
    box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ivory) 11%, transparent);
    transition:border-color .15s, background .15s;
  }
  .mode-pick-btn:hover{
    border-color:color-mix(in srgb, var(--brass) 55%, transparent);
    background:color-mix(in srgb, var(--ivory) 13%, transparent);
  }
  .mode-pick-btn svg{ width:18px; height:18px; flex:none; color:var(--brass); }
  .lobby-online-highlight{
    animation:lobby-flash 1.4s ease 2;
    border-radius:8px;
  }
  @keyframes lobby-flash{
    0%,100%{ box-shadow:0 0 0 0 rgba(var(--brass-rgb),0); }
    50%{ box-shadow:0 0 0 3px rgba(var(--brass-rgb),.4); }
  }

  /* ---------- landing page (Duel Hall hub) ---------- */
  .hub-header{ text-align:center; margin:38px 0 30px; }
  .hub-logo-img{
    width:min(180px, 40vw);
    height:auto;
    display:block;
    margin:0 auto 6px;
    filter:drop-shadow(0 8px 24px rgba(0,0,0,.35));
  }
  .nav-logo{ width:16px; height:16px; flex:none; border-radius:3px; }
  .hub-logo{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(34px, 6vw, 52px);
    letter-spacing:.06em;
    margin:0 0 8px;
    color:var(--ivory);
  }
  .hub-logo .accent{ color:var(--brass); }
  .hub-tagline{
    font-size:13px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
    margin:0;
  }
  .game-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:18px;
    max-width:760px;
    margin:0 auto;
    perspective:1200px;   /* gives the cursor-tracking card tilt its depth */
  }
  .game-card{
    position:relative;
    border:1px solid var(--hairline);
    border-radius:12px;
    background:linear-gradient(180deg, var(--surface-2), var(--surface));
    padding:26px 22px;
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height:190px;
    text-align:left;
    color:var(--ivory);
    overflow:hidden;
  }
  a.game-card{ text-decoration:none; transition:transform .2s cubic-bezier(.2,.8,.2,1), border-color .15s, box-shadow .2s; transform-style:preserve-3d; }
  a.game-card:hover{ border-color:var(--brass-dim); box-shadow:0 18px 40px rgba(0,0,0,.32); }
  .game-card::after{
    content:''; position:absolute; inset:0; border-radius:inherit;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%), var(--brass-glow), transparent 65%);
    opacity:0; transition:opacity .3s ease; pointer-events:none; mix-blend-mode:soft-light;
  }
  a.game-card:hover::after{ opacity:.6; }
  .game-card .game-glyphs{ display:flex; gap:6px; }
  .game-card .game-glyphs .glyph-chip{ width:26px; height:26px; padding:5px; border-radius:6px; background:var(--surface-3); }
  .game-card .game-glyphs .glyph-chip svg{ width:100%; height:100%; }
  .game-card .game-glyphs .glyph-chip.rps-emoji{ display:flex; align-items:center; justify-content:center; font-size:15px; line-height:1; }
  .rps-card .game-glyphs{ gap:4px; }
  .rps-card:hover{ box-shadow:0 14px 34px rgba(232,85,92,.18), 0 14px 34px rgba(62,198,224,.1); }
  .game-card .game-title{ font-family:var(--font-display); font-size:20px; letter-spacing:.03em; margin-top:6px; }
  .game-card .game-desc{ font-size:12.5px; color:var(--muted); line-height:1.6; flex:1; }
  .game-card .game-cta{
    font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
    color:var(--brass-glow); display:flex; align-items:center; gap:6px;
  }
  .game-card.locked{ opacity:.55; }
  .game-card.locked .game-cta{ color:var(--muted); }
  .game-card .players-badge{
    position:absolute; top:16px; right:16px;
    font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--muted); border:1px solid var(--hairline); border-radius:20px;
    padding:3px 9px;
  }
  .hub-footer-cta{
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    margin-top:40px; padding:18px 24px; border-radius:12px;
    background:linear-gradient(135deg, var(--surface-2), var(--surface));
    border:1px solid var(--hairline);
  }
  .hub-footer-text{ display:flex; flex-direction:column; gap:2px; }
  .hub-footer-text b{ font-family:var(--font-display); font-size:15px; color:var(--ivory); letter-spacing:.02em; }
  .hub-footer-text span{ font-size:12px; color:var(--muted); }
  .hub-footer{
    text-align:center; margin-top:18px;
    font-size:11.5px; color:var(--hairline);
  }
  .back-to-hub{
    display:inline-flex; align-items:center; gap:6px;
    font-size:11.5px; color:var(--muted); text-decoration:none;
    letter-spacing:.05em;
  }
  .back-to-hub:hover{ color:var(--brass-glow); }
  .back-to-hub svg{ width:12px; height:12px; }

  .page-has-sidebar{ padding-right:46px; }
  @media (max-width:640px){ .page-has-sidebar{ padding-right:0; } }

  /* On narrow screens the always-on 46px-wide, full-height sidebar strip
     ate into the right edge of every panel (buttons/text clipped behind
     it) since content padding was zeroed but the fixed strip itself never
     was. Swap it for a small floating round button instead — same toggle,
     none of the permanently-occupied real estate. */
  @media (max-width:640px){
    .lobby-sidebar{ width:0; height:0; border-left:none; box-shadow:none; background:none; }
    .lobby-sidebar.expanded{
      width:100vw; max-width:100vw; height:100vh;
      border-left:1px solid var(--hairline); box-shadow:-8px 0 24px rgba(0,0,0,.15); background:var(--surface);
    }
    .lobby-collapsed-tab{
      position:fixed; bottom:18px; right:18px; z-index:75;
      width:48px; height:48px; padding:0; flex:none;
      flex-direction:row; align-items:center; justify-content:center; gap:0;
      border-radius:50%; background:var(--surface-2); border:1px solid var(--hairline);
      box-shadow:0 6px 18px rgba(0,0,0,.35);
    }
    .lobby-collapsed-tab .lobby-vert{ display:none; }
  }

  /* ---------- card duel info/landing view ---------- */
  .info-view{ padding-right:46px; }
  .info-hero{ text-align:center; margin:30px 0 26px; }
  .info-hero h1{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(30px, 5.5vw, 46px); letter-spacing:.05em; margin:0 0 8px; color:var(--ivory);
  }
  .info-hero .accent{ color:var(--brass); }
  .info-hero .info-tagline{
    font-size:14px; color:var(--muted); max-width:560px; margin:0 auto 18px; line-height:1.6;
  }
  .char-strip{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:0 auto 4px; max-width:640px; }
  .char-chip{
    width:44px; height:44px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background:var(--surface-2); border:1px solid var(--hairline);
    transition:transform .15s, border-color .15s, box-shadow .15s;
    cursor:pointer; padding:0; font:inherit;
  }
  .char-chip:hover{ transform:translateY(-3px); border-color:var(--el, var(--brass)); box-shadow:0 6px 16px rgba(0,0,0,.2), 0 0 0 2px rgba(var(--brass-rgb),.25); }
  .char-chip:active{ transform:translateY(-1px) scale(.96); }
  .char-chip svg{ width:22px; height:22px; color:var(--el, var(--brass)); pointer-events:none; }
  .char-strip-hint{ text-align:center; font-size:11.5px; color:var(--muted); margin:0 auto 18px; }

  .feature-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
    gap:14px; max-width:920px; margin:0 auto 34px;
  }
  .feature-card{
    background:linear-gradient(180deg, var(--surface-2), var(--surface));
    border:1px solid var(--hairline); border-radius:10px; padding:18px 16px;
  }
  .feature-card .feature-icon{ width:26px; height:26px; color:var(--brass); margin-bottom:10px; }
  .feature-card .feature-icon svg{ width:100%; height:100%; }
  .feature-card h3{ font-family:var(--font-display); font-size:15px; margin:0 0 6px; letter-spacing:.02em; }
  .feature-card p{ font-size:12.5px; color:var(--muted); line-height:1.6; margin:0; }

  .wheel-section{ max-width:920px; margin:0 auto 30px; text-align:center; }
  .wheel-section h2{ font-family:var(--font-display); font-size:20px; margin:0 0 6px; }
  .wheel-section > p{ color:var(--muted); font-size:13.5px; max-width:560px; margin:0 auto 6px; }

  .info-cta{ display:flex; justify-content:center; gap:12px; margin:0 0 40px; flex-wrap:wrap; }
  .info-cta .btn{ padding:13px 26px; font-size:14px; }

  /* ---------- character lore ---------- */
  .lore-panel{ text-align:center; max-width:520px; }
  .lore-glyph{
    width:64px; height:64px; margin:6px auto 4px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    background:var(--surface-2); border:1px solid var(--hairline);
  }
  .lore-glyph svg{ width:32px; height:32px; }
  .lore-tag{
    font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:2px 0 18px;
  }
  .lore-text{
    font-size:14.5px; line-height:1.75; color:var(--ivory); text-align:left;
    animation:view-fade-in .3s ease;
  }
  .lore-nav{
    display:flex; align-items:center; justify-content:space-between;
    margin-top:22px; padding-top:16px; border-top:1px solid var(--hairline);
  }
  .lore-progress{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); }

  /* ============================================================
     Rock Paper Scissors — loud, colorful, fast. Deliberately a
     different register from Card Duel's moody parchment-and-brass
     look: bright primaries, bounce, punch. Still respects the site's
     light/dark theme tokens for backgrounds/text — only the game's
     own accent colors (rock/paper/scissors) stay fixed regardless
     of theme, the same way Card Duel's --el-* colors do.
     ============================================================ */
  :root{
    --rps-rock:#e8555c; --rps-rock-dim:#8f3338;
    --rps-paper:#f2b134; --rps-paper-dim:#8f6b18;
    --rps-scissors:#3ec6e0; --rps-scissors-dim:#276a78;
  }

  .rps-hero{
    text-align:center; position:relative; padding:6px 0 10px; border-radius:18px; overflow:hidden;
  }
  .rps-hero::before{
    content:""; position:absolute; inset:-40% -10%; z-index:-1;
    background:
      radial-gradient(circle at 18% 20%, rgba(232,85,92,.20), transparent 42%),
      radial-gradient(circle at 82% 15%, rgba(242,177,52,.18), transparent 42%),
      radial-gradient(circle at 50% 85%, rgba(62,198,224,.18), transparent 46%);
    animation:rps-hero-drift 14s ease-in-out infinite alternate;
  }
  @keyframes rps-hero-drift{
    0%{ transform:translate(0,0) scale(1); }
    100%{ transform:translate(2%,-3%) scale(1.08); }
  }
  .rps-hero-icons{ display:flex; justify-content:center; gap:22px; margin:6px 0 18px; }
  .rps-hero-icon{
    font-size:44px; line-height:1; display:inline-block;
    animation:rps-bounce 2.2s ease-in-out infinite;
    filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));
  }
  .rps-hero-icon:nth-child(1){ animation-delay:0s; }
  .rps-hero-icon:nth-child(2){ animation-delay:.22s; }
  .rps-hero-icon:nth-child(3){ animation-delay:.44s; }
  @keyframes rps-bounce{
    0%,100%{ transform:translateY(0) rotate(-4deg); }
    50%{ transform:translateY(-14px) rotate(4deg); }
  }

  .rps-matchup-diagram{
    display:flex; align-items:center; justify-content:center; gap:14px;
    flex-wrap:wrap; margin:18px auto 6px; max-width:520px;
  }
  .rps-matchup-item{ display:flex; flex-direction:column; align-items:center; gap:6px; }
  .rps-matchup-item .rps-glyph-badge{ font-size:30px; }
  .rps-matchup-item span{ font-size:11px; color:var(--muted); letter-spacing:.04em; }
  .rps-matchup-arrow{ font-size:20px; color:var(--brass-glow); }

  /* ---------- in-game: score, choices, reveal ---------- */
  .rps-scoreboard{
    display:flex; align-items:center; justify-content:center; gap:22px;
    margin:6px 0 10px; font-family:var(--font-display);
  }
  .rps-score-side{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:90px; }
  .rps-score-name{ font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  .rps-score-num{ font-size:38px; line-height:1; color:var(--ivory); transition:color .2s, transform .2s; }
  .rps-score-side.leading .rps-score-num{ color:var(--brass-glow); transform:scale(1.08); }
  .rps-score-mid{ font-size:13px; color:var(--muted); text-align:center; }
  .rps-round-pip-row{ display:flex; gap:5px; margin-top:4px; }
  .rps-round-pip{ width:8px; height:8px; border-radius:50%; background:var(--hairline); }
  .rps-round-pip.won{ background:var(--good); }
  .rps-round-pip.lost{ background:var(--bad); }

  .rps-arena{
    display:flex; align-items:center; justify-content:center; gap:26px;
    padding:26px 10px; min-height:140px;
  }
  .rps-pick-slot{
    width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:46px; background:var(--surface-2); border:3px solid var(--hairline);
    transition:border-color .2s, box-shadow .2s, transform .3s;
  }
  .rps-pick-slot.waiting{ opacity:.5; }
  .rps-pick-slot.locked{ border-color:var(--brass-dim); }
  .rps-pick-slot.revealed{ animation:rps-pop-in .4s cubic-bezier(.2,.9,.3,1.3); }
  .rps-pick-slot.win-slot{ border-color:var(--good); box-shadow:0 0 26px rgba(120,200,140,.45); animation:rps-pulse-glow .9s ease-in-out infinite; }
  .rps-pick-slot.lose-slot{ opacity:.4; transform:scale(.88); }
  @keyframes rps-pop-in{
    0%{ transform:scale(.3) rotate(-25deg); opacity:0; }
    60%{ transform:scale(1.15) rotate(6deg); opacity:1; }
    100%{ transform:scale(1) rotate(0); }
  }
  @keyframes rps-pulse-glow{
    0%,100%{ box-shadow:0 0 16px rgba(120,200,140,.35); }
    50%{ box-shadow:0 0 34px rgba(120,200,140,.65); }
  }
  .rps-vs-mid{ font-family:var(--font-display); font-size:15px; color:var(--muted); letter-spacing:.1em; }

  .rps-status-text{ text-align:center; font-size:13.5px; color:var(--brass-glow); min-height:18px; margin-bottom:4px; }
  .rps-pick-timer{ text-align:center; font-family:var(--font-mono); font-size:12px; color:var(--muted); min-height:16px; }
  .rps-pick-timer.low{ color:var(--bad); }

  .rps-choice-row{ display:flex; justify-content:center; gap:18px; margin:14px 0 6px; flex-wrap:wrap; }
  .rps-choice-btn{
    width:84px; height:84px; border-radius:50%; font-size:36px;
    display:flex; align-items:center; justify-content:center;
    background:var(--surface-2); border:3px solid var(--hairline); cursor:pointer;
    transition:transform .15s, border-color .15s, box-shadow .15s;
  }
  .rps-choice-btn[data-choice="rock"]{ --rc:var(--rps-rock); }
  .rps-choice-btn[data-choice="paper"]{ --rc:var(--rps-paper); }
  .rps-choice-btn[data-choice="scissors"]{ --rc:var(--rps-scissors); }
  .rps-choice-btn:hover{ border-color:var(--rc); transform:translateY(-5px) scale(1.06); box-shadow:0 10px 20px rgba(0,0,0,.25); }
  .rps-choice-btn:active{ transform:scale(.92); }
  .rps-choice-btn.chosen{ border-color:var(--rc); background:var(--surface-3); box-shadow:0 0 0 4px color-mix(in srgb, var(--rc) 30%, transparent); }
  .rps-choice-btn:disabled{ opacity:.35; cursor:not-allowed; transform:none; }

  .rps-pass-card{ text-align:center; padding:30px 10px; }
  .rps-pass-card .rps-pass-icon{ font-size:52px; display:block; margin-bottom:10px; animation:rps-bounce 2.2s ease-in-out infinite; }
  .rps-pass-card h3{ font-family:var(--font-display); font-size:19px; color:var(--ivory); margin:6px 0; }
  .rps-pass-card p{ color:var(--muted); font-size:13px; margin-bottom:16px; }

  /* full-screen color flash on a round result — RPS's answer to Card
     Duel's shake, tuned toward "colorful" rather than "impact" */
  body.rps-flash-win::after, body.rps-flash-lose::after, body.rps-flash-tie::after{
    content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
    animation:rps-flash-pulse .6s ease-out forwards;
  }
  body.rps-flash-win::after{ background:radial-gradient(circle at 50% 40%, rgba(110,220,150,.35), transparent 70%); }
  body.rps-flash-lose::after{ background:radial-gradient(circle at 50% 40%, rgba(232,85,92,.3), transparent 70%); }
  body.rps-flash-tie::after{ background:radial-gradient(circle at 50% 40%, rgba(242,177,52,.25), transparent 70%); }
  @keyframes rps-flash-pulse{ 0%{ opacity:1; } 100%{ opacity:0; } }

  .rps-confetti-piece{
    position:fixed; top:-20px; width:8px; height:14px; z-index:61; pointer-events:none;
    animation:rps-confetti-fall linear forwards;
  }
  @keyframes rps-confetti-fall{
    0%{ transform:translateY(0) rotate(0deg); opacity:1; }
    100%{ transform:translateY(105vh) rotate(540deg); opacity:0; }
  }

  @media (max-width:600px){
    .rps-hero-icon{ font-size:34px; }
    .rps-pick-slot{ width:72px; height:72px; font-size:34px; }
    .rps-choice-btn{ width:66px; height:66px; font-size:28px; }
    .rps-scoreboard{ gap:14px; }
    .rps-score-num{ font-size:28px; }
    .rps-arena{ gap:14px; padding:16px 6px; }
  }

  /* ================= Vanguard (hidden-rank board game) ================= */
  .vg-rank-flag{ --vg-c: var(--brass-glow); }
  .vg-rank-bomb{ --vg-c: var(--bad); }
  .vg-rank-infiltrator{ --vg-c: var(--el-shadow); }
  .vg-rank-sapper{ --vg-c: var(--el-earth); }
  .vg-rank-scout{ --vg-c: var(--el-ice); }
  .vg-rank-soldier{ --vg-c: var(--el-nature); }
  .vg-rank-sergeant{ --vg-c: var(--el-lightning); }
  .vg-rank-lieutenant{ --vg-c: var(--el-undead); }
  .vg-rank-captain{ --vg-c: var(--el-blade); }
  .vg-rank-commander{ --vg-c: var(--brass-glow); }

  .vg-board-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:14px auto; }
  .vg-board{
    display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); grid-template-rows:repeat(8, minmax(0,1fr));
    width:min(92vw, 520px); aspect-ratio:1/1; gap:3px; background:var(--hairline); border:1px solid var(--hairline);
    border-radius:8px; padding:3px; box-shadow:0 10px 30px rgba(0,0,0,.25);
  }
  .vg-sq{
    position:relative; background:var(--surface-2); border-radius:3px; display:flex; align-items:center; justify-content:center;
    cursor:default; transition:background .15s ease, box-shadow .15s ease;
  }
  .vg-sq.lake{ background:repeating-linear-gradient(135deg, var(--surface), var(--surface) 6px, var(--surface-3) 6px, var(--surface-3) 12px); }
  .vg-sq.home0{ background:color-mix(in srgb, var(--surface-2) 85%, var(--good) 15%); }
  .vg-sq.home1{ background:color-mix(in srgb, var(--surface-2) 85%, var(--bad) 15%); }
  .vg-sq.selectable{ cursor:pointer; }
  .vg-sq.selectable:hover{ background:color-mix(in srgb, var(--surface-2) 70%, var(--brass) 30%); }
  .vg-sq.selected{ box-shadow:inset 0 0 0 2px var(--brass-glow); }
  .vg-sq.legal-move::after{
    content:""; position:absolute; width:28%; height:28%; border-radius:50%; background:rgba(var(--brass-rgb),.55);
  }
  .vg-sq.legal-attack{ box-shadow:inset 0 0 0 2px var(--bad); cursor:pointer; }
  .vg-sq.last-move{ box-shadow:inset 0 0 0 2px rgba(var(--brass-rgb),.6); }

  .vg-piece{
    width:86%; height:86%; border-radius:5px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:linear-gradient(160deg, color-mix(in srgb, var(--vg-c) 28%, var(--surface-3)), var(--surface-3));
    border-top:2px solid var(--vg-c); color:var(--ivory); font-family:var(--font-body); user-select:none;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
  }
  .vg-piece.mine{ cursor:pointer; }
  .vg-piece.enemy-hidden{
    background:repeating-linear-gradient(45deg, var(--surface-3), var(--surface-3) 5px, var(--ink) 5px, var(--ink) 10px);
    border-top-color:var(--hairline);
  }
  .vg-piece.enemy-hidden .vg-piece-glyph, .vg-piece.enemy-hidden .vg-piece-label{ opacity:.35; }
  .vg-piece-glyph{ width:46%; height:46%; }
  .vg-piece-glyph svg{ width:100%; height:100%; }
  .vg-piece-label{ font-size:9px; letter-spacing:.03em; margin-top:1px; text-transform:uppercase; opacity:.85; }
  .vg-piece.revealed-flash{ animation:vg-reveal-pulse .5s ease; }
  @keyframes vg-reveal-pulse{ 0%{ transform:scale(1); } 40%{ transform:scale(1.12); } 100%{ transform:scale(1); } }

  .vg-setup-layout{ display:flex; flex-wrap:wrap; gap:22px; justify-content:center; align-items:flex-start; margin:14px auto; max-width:760px; }
  .vg-tray{ display:flex; flex-direction:column; gap:8px; min-width:220px; }
  .vg-tray-head{ font-family:var(--font-display); color:var(--brass); font-size:14px; letter-spacing:.04em; }
  .vg-tray-list{ display:flex; flex-wrap:wrap; gap:6px; }
  .vg-tray-piece{
    width:52px; height:52px; border-radius:6px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:linear-gradient(160deg, color-mix(in srgb, var(--vg-c) 28%, var(--surface-3)), var(--surface-3));
    border-top:2px solid var(--vg-c); color:var(--ivory); cursor:pointer; user-select:none; position:relative;
  }
  .vg-tray-piece.selected{ box-shadow:0 0 0 2px var(--brass-glow); }
  .vg-tray-piece .vg-piece-glyph{ width:40%; height:40%; }
  .vg-tray-piece-count{
    position:absolute; top:-6px; right:-6px; background:var(--surface); border:1px solid var(--hairline); border-radius:50%;
    width:18px; height:18px; font-size:10px; display:flex; align-items:center; justify-content:center; color:var(--ivory);
  }
  .vg-tray-piece[data-count="0"]{ opacity:.25; pointer-events:none; }
  .vg-setup-actions{ display:flex; gap:8px; flex-wrap:wrap; }
  .vg-setup-hint{ color:var(--muted); font-size:13px; max-width:260px; }
  .vg-legend{ display:flex; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--muted); margin-top:4px; }
  .vg-legend-item{ display:flex; align-items:center; gap:5px; }
  .vg-legend-dot{ width:10px; height:10px; border-radius:3px; background:var(--vg-c); }

  @media (max-width:640px){
    .vg-setup-layout{ flex-direction:column; align-items:center; }
    .vg-piece-label{ display:none; }
    .vg-tray-piece{ width:44px; height:44px; }
  }