/* ============================================================
   TAKHTE WEB — Persian Luxury (palette reused from takhte-site-v1)
   Marble greens #1a3024 / #0a1710 / #040805
   Gold gradient var(--gold-hi) -> var(--gold) -> var(--gold-deep) -> var(--gold-dark)
   Cream #f2e6c7 · Walnut #5c3b1f / #3b240d · NO PURPLE anywhere.
   ============================================================ */
/* ============================================================
   SITE THEMES (Sasan, 2026-11-01): the whole palette lives in
   the tokens below; html[data-theme] blocks at the end of
   this file re-skin EVERY screen by swapping the tokens —
   rooms, panels, buttons, medals, modals, the lot. The
   default (no attribute) is Marble & Gold. The ten level
   BOARDS keep their own designs under every theme.
   ============================================================ */
:root{
  --marble-2:#171310; --marble-1:#0d0a07; --marble-0:#050403;
  --walnut-2:#3b240d; --walnut-1:#1f1205; --walnut-0:#0d0803;
  --walnut-frame:#5c3b1f; --walnut-light:#7a5230;
  --gold-hi:#ffe680; --gold:#f2c76b; --gold-logo:#cda24e;
  --gold-deep:#c78c2b; --gold-dark:#734c0f;
  --acc:242,199,107; --acc-hi:255,233,168; --acc-deep:199,140,43;
  --acc-hex-hi:#ffe98a;
  --ink0:43,33,24; --ink1:26,20,14; --ink2:11,9,6; --ink3:5,4,3;
  --ink-hex:#171008; --walnut-glow:59,36,13; --on-acc:35,20,4;
  --glass-1:26,20,14; --glass-2:11,9,6; --glass-3:5,4,3;
  --cream:#f2e6c7; --cream-dim:#d9c4ab; --muted:#b3a284;
  --ink-on-gold:#291a05; --hairline:rgba(var(--acc),.38);
  --room-img:url('img/lobby-bg.jpg');
  --signin-img:url("img/signin-vault.jpg");
  --felt-a:#2b2118; --felt-c:#0b0703;
  --wood-a:#4a2c10; --wood-b:#241505;
  --board-felt:#173325; --point-a:#8a6136; --point-b:#e6d3a3;
  --point-a-base:#4e3016; --point-a-tip:#c09054;
  --point-b-base:#a9884f; --point-b-tip:#f8edd2;
  --danger:#d98a6a;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--cream); min-height:100vh;
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(var(--ink1),.85), rgba(var(--ink3),0) 62%),
    radial-gradient(900px 500px at 88% 34%, rgba(var(--walnut-glow),.35), rgba(var(--ink3),0) 60%),
    linear-gradient(180deg, var(--marble-1) 0%, var(--marble-0) 100%);
  background-color:var(--marble-0);
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
.muted{color:var(--muted);font-size:.9rem}
.gold-text{color:var(--gold)}
h1,h2,h3,.logo-text{font-family:Georgia,"Times New Roman",serif}
.logo-text{
  direction:ltr; unicode-bidi:isolate;
  font-size:clamp(2.6rem,8vw,4.2rem); font-weight:800; letter-spacing:.24em; text-indent:.24em;
  background:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold) 38%,var(--gold-logo) 62%,var(--gold-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; text-align:center;
}
.logo-text.small{font-size:1.5rem;text-align:left;text-indent:0}
.tagline{font-family:Georgia,serif;font-style:italic;text-align:center;color:var(--cream);margin-top:8px;font-size:1.15rem}
.rule{display:flex;align-items:center;gap:14px;max-width:420px;margin:22px auto}
.rule::before,.rule::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--hairline),transparent)}
.rule i{width:8px;height:8px;transform:rotate(45deg);background:linear-gradient(135deg,var(--gold-hi),var(--gold-deep))}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  font-weight:700;font-size:1rem;padding:13px 26px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;font-family:inherit;
}
.btn-gold{color:var(--ink-on-gold);background:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold) 45%,var(--gold-deep) 100%);
  box-shadow:0 10px 26px rgba(var(--acc-deep),.32), inset 0 1px 0 rgba(255,255,255,.55)}
.btn-gold:hover{transform:translateY(-1px)}
.btn-gold:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{color:var(--cream-dim);border-color:var(--hairline);background:linear-gradient(180deg,rgba(var(--ink1),.55),rgba(var(--ink2),.55))}
.btn-danger-ghost{color:var(--danger);border:1px solid rgba(217,138,106,.4);background:transparent;border-radius:999px;
  padding:13px 22px;font-weight:700;cursor:pointer;font-family:inherit;font-size:1rem}
.btn-small{padding:8px 18px;font-size:.9rem}
.btn.pulsing{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--acc),.55)}50%{box-shadow:0 0 0 12px rgba(var(--acc),0)}}

/* ---------- toast ---------- */
.toast{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:200;max-width:min(560px,92vw);
  background:linear-gradient(180deg,var(--walnut-2),var(--walnut-1));border:1px solid var(--hairline);
  color:var(--cream);padding:12px 22px;border-radius:999px;box-shadow:0 16px 40px rgba(0,0,0,.55);
  font-size:.95rem;text-align:center;
}

/* ---------- sign-in ---------- */
.screen{padding:26px 18px 44px}
#screen-signin{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.signin-card{
  width:min(560px,94vw);text-align:center;padding:44px 40px;border-radius:18px;
  background:linear-gradient(165deg,rgba(var(--ink1),.78),rgba(var(--ink2),.94) 60%,rgba(var(--ink3),.97));
  border:1px solid rgba(var(--acc),.25);box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.signin-sub{color:var(--cream-dim);margin:0 auto 26px;max-width:420px}
.btn-auth{
  display:flex;align-items:center;justify-content:center;gap:12px;width:100%;margin:10px 0;
  padding:15px 20px;border-radius:999px;font-size:1.02rem;font-weight:700;cursor:pointer;font-family:inherit;
  color:var(--ink-on-gold);background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-deep));
  border:none;box-shadow:0 8px 22px rgba(var(--acc-deep),.3);
}
.btn-auth .auth-mark{font-size:1.25rem;line-height:1}
.btn-auth.opens-soon{
  color:var(--muted);background:linear-gradient(180deg,rgba(var(--ink1),.6),rgba(var(--ink2),.7));
  border:1px solid var(--hairline);box-shadow:none;cursor:not-allowed;opacity:.75;
}
.signin-divider{display:flex;align-items:center;gap:14px;margin:22px 0 2px;color:var(--muted);font-size:.9rem}
.signin-divider::before,.signin-divider::after{content:"";flex:1;border-top:1px solid var(--hairline)}
.email-input{
  width:100%;margin:10px 0 0;background:rgba(var(--ink3),.55);border:1px solid var(--hairline);border-radius:999px;
  color:var(--cream);padding:13px 20px;font-size:1rem;font-family:inherit;text-align:center;
}
.email-input::placeholder{color:var(--muted)}
.btn-email{
  color:var(--cream);background:linear-gradient(180deg,rgba(var(--ink1),.85),rgba(var(--ink2),.9));
  border:1px solid var(--hairline);box-shadow:none;
}
.btn-email:disabled{opacity:.6;cursor:wait}
.form-title{font-size:1.35rem;color:var(--cream);font-weight:700;margin:4px 0 12px}
.btn-back{
  display:block;margin:0 auto 2px;padding:6px 12px;background:none;border:none;
  color:var(--muted);font-family:inherit;font-size:.95rem;cursor:pointer;
}
.btn-back:hover{color:var(--cream)}
.field-help{color:var(--muted);font-size:.82rem;margin:7px 0 1px}
.signin-status{margin-top:20px;color:var(--gold);min-height:1.4em;font-size:.98rem}
.fineprint{margin-top:14px;color:var(--muted);font-size:.84rem}

/* ---------- lobby ---------- */
#screen-lobby{max-width:1120px;margin:0 auto;position:relative;z-index:0}
/* The lobby wears the marble room too (Sasan, 2026-11-01:
   "Do the same thing for this as well" — the front page's
   room, fixed behind the whole screen under a soft veil,
   static like every large surface in Takhte). */
#screen-lobby::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:
    linear-gradient(rgba(var(--ink3),.38),rgba(var(--ink3),.55)),
    var(--room-img) center / cover no-repeat,
    var(--ink-hex);
}

/* The lobby hero: a walnut-and-marble banner carrying the
   player's identity — a level crest medallion, their name
   under the wordmark, and the coin / record chips — lit
   from above like the room's lamp pool. */
.lobby-hero{
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
  padding:20px 24px;margin-bottom:8px;border-radius:18px;position:relative;overflow:hidden;
  background:
    radial-gradient(560px 190px at 24% -30%, rgba(var(--acc-hi),.14), rgba(var(--acc-hi),0) 65%),
    linear-gradient(160deg, rgba(var(--walnut-glow),.45), rgba(var(--ink0),.30) 42%, rgba(var(--ink2),.90) 78%),
    linear-gradient(165deg, rgba(var(--ink1),.88), rgba(var(--ink3),.96));
  border:1px solid rgba(var(--acc),.32);
  box-shadow:0 20px 44px rgba(0,0,0,.48), inset 0 1px 0 rgba(var(--acc-hi),.22);
}
.lobby-hero::before{content:"";position:absolute;top:0;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-hi),transparent);opacity:.75;pointer-events:none}
.hero-id{display:flex;align-items:center;gap:18px;min-width:0}
.hero-crest{
  flex:none;width:92px;height:92px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;position:relative;
  background:radial-gradient(circle at 34% 28%, rgba(var(--ink0),.95), rgba(var(--ink2),.98) 72%);
  border:1px solid rgba(var(--acc),.55);
  box-shadow:inset 0 0 0 4px rgba(var(--ink3),.6), inset 0 0 0 5px rgba(var(--acc),.4),
    inset 0 10px 18px rgba(var(--acc-hi),.12), 0 12px 26px rgba(0,0,0,.5);
}
.hero-crest-num{font-family:Georgia,"Times New Roman",serif;font-size:2rem;font-weight:800;line-height:1;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-crest-cap{font-size:.56rem;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--cream-dim);margin-top:3px}
[dir="rtl"] .hero-crest-cap{letter-spacing:.08em;text-indent:0}
.hero-who{min-width:0}
.lobby-name{font-size:1.45rem;color:var(--cream);font-weight:800;line-height:1.15}
.hero-tag{font-family:Georgia,serif;font-style:italic;color:var(--muted);font-size:.95rem;margin-top:3px}
.lobby-stats{display:flex;gap:14px;flex-wrap:wrap}
.stat{background:linear-gradient(180deg,rgba(var(--ink3),.5),rgba(var(--ink3),.78));border:1px solid rgba(var(--acc),.28);
  border-radius:12px;padding:10px 18px;display:flex;flex-direction:column;min-width:112px;
  box-shadow:inset 0 1px 0 rgba(var(--acc-hi),.14), inset 0 -10px 18px rgba(0,0,0,.35)}
.stat-label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.stat-value{font-size:1.3rem;font-weight:800;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 60%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:820px){
  .lobby-hero{padding:16px}
  .hero-crest{width:76px;height:76px}
  .hero-crest-num{font-size:1.6rem}
}

/* Composed sections: a gold-caps band with a hairline rule
   names each room of the lobby — Play, Rewards, Showcase,
   Social, Glory — and each room's cards wear their own
   surface tint over the shared marble system. */
.lobby-section{margin-top:32px}
.lobby-section:first-of-type{margin-top:20px}
.section-band{display:flex;align-items:center;gap:14px;margin:0 6px 14px}
.section-band::before{content:"";width:8px;height:8px;flex:none;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--gold-hi),var(--gold-deep));
  box-shadow:0 0 10px rgba(var(--acc),.45)}
.section-band::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--hairline),rgba(var(--acc),.05))}
[dir="rtl"] .section-band::after{background:linear-gradient(270deg,var(--hairline),rgba(var(--acc),.05))}
.section-band-label{font-family:Georgia,serif;font-size:.82rem;font-weight:700;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
[dir="rtl"] .section-band-label{letter-spacing:.06em}
.lobby-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:22px}
@media (max-width:820px){.lobby-grid{grid-template-columns:1fr}}
/* Lobby surfaces wear warm black marble tones, not green —
   the green clashed with the marble room (Sasan, 2026-11-01:
   "the green doesn't look good with that background"). */
.card{background:linear-gradient(165deg,rgba(var(--ink1),.78),rgba(var(--ink2),.92) 60%,rgba(var(--ink3),.96));
  border:1px solid rgba(var(--acc),.22);border-radius:14px;padding:24px;box-shadow:0 14px 34px rgba(0,0,0,.4);
  position:relative;transition:transform .18s ease,box-shadow .18s ease}
.card::before{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;border-radius:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--acc-hi),.55),transparent);pointer-events:none}
.card:hover{transform:translateY(-2px);box-shadow:0 22px 44px rgba(0,0,0,.5)}
[data-section="play"] .tables-card{border-color:rgba(var(--acc),.34)}
[data-section="play"] .tournament-card{grid-column:auto}
[data-section="rewards"] .card{background:linear-gradient(165deg,rgba(64,46,16,.5),rgba(30,22,12,.72) 45%,rgba(var(--ink2),.92) 75%,rgba(var(--ink3),.96))}
[data-section="showcase"] .card{background:linear-gradient(165deg,rgba(var(--walnut-glow),.6),rgba(31,20,10,.55) 45%,rgba(10,18,12,.93) 78%,rgba(var(--ink3),.96))}
[data-section="social"] .card{background:linear-gradient(165deg,rgba(20,16,12,.85),rgba(var(--ink2),.94) 60%,rgba(var(--ink3),.96))}
.friends-card{grid-column:1/-1}
[data-section="glory"] .card{border-color:rgba(var(--acc),.34);
  background:linear-gradient(165deg,rgba(28,22,15,.82),rgba(var(--ink2),.94) 55%,rgba(var(--ink3),.96))}
.card h2{font-size:1.35rem;margin-bottom:6px}
.card-sub{color:var(--cream-dim);font-size:.94rem;margin-bottom:16px}

/* Card headers wear a medallion: a small gold glyph in a
   double ring, in the level tables' own material language. */
.card-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.card-head .card-sub{margin-bottom:0}
.card-head h2{margin-bottom:4px}
.card-title-wrap{display:flex;align-items:center;gap:12px;min-width:0}
.card-medal{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--gold);
  background:radial-gradient(circle at 34% 28%, rgba(var(--ink0),.95), rgba(var(--ink2),.98) 74%);
  border:1px solid rgba(var(--acc),.5);
  box-shadow:inset 0 0 0 3px rgba(var(--ink3),.55), inset 0 0 0 4px rgba(var(--acc),.35),
    inset 0 8px 12px rgba(var(--acc-hi),.12), 0 8px 18px rgba(0,0,0,.42)}
.card-medal svg{width:24px;height:24px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.lb-head .card-medal{width:42px;height:42px}
.lb-head .card-medal svg{width:22px;height:22px}
.tables-card{padding:26px}
.tables-card h2{font-size:1.5rem}

/* Entry and Win pays are their own columns so every row
   lines up (Sasan, 2026-11-01, circling the ragged text). */
.table-row{display:grid;grid-template-columns:36px 78px 124px 1fr auto;align-items:center;column-gap:12px;
  padding:11px 10px;border-bottom:1px solid rgba(var(--acc),.12);
  border-radius:10px;transition:background .15s ease}
.table-row:last-of-type{border-bottom:none}
.table-row:hover{background:linear-gradient(90deg,rgba(var(--acc),.07),rgba(var(--acc),.02))}
.t-medal{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  font-family:Georgia,serif;font-weight:800;font-size:1rem;color:var(--gold);
  background:radial-gradient(circle at 34% 28%, rgba(var(--ink0),.95), rgba(var(--ink2),.98) 74%);
  border:1px solid rgba(var(--acc),.45);
  box-shadow:inset 0 0 0 2px rgba(var(--ink3),.55), inset 0 0 0 3px rgba(var(--acc),.3), 0 5px 12px rgba(0,0,0,.4)}
.table-row .t-level{font-weight:800;color:var(--cream)}
.table-row .t-fee{color:var(--cream-dim);font-size:.94rem;white-space:nowrap}
.table-row .t-fee b{color:var(--gold)}
.table-row .t-win{color:var(--cream-dim);font-size:.94rem;white-space:nowrap}
.table-row .t-win b{color:var(--gold)}
.table-row .btn-play{width:160px;flex:none}
.queue-state{margin-top:16px;display:flex;align-items:center;gap:14px;color:var(--gold)}
.friend-add{display:flex;gap:10px}
.friend-add input,.challenge-level-row select{
  flex:1;background:rgba(var(--ink3),.55);border:1px solid var(--hairline);border-radius:999px;
  color:var(--cream);padding:10px 18px;font-size:.95rem;font-family:inherit;text-transform:uppercase;
}
.challenge-level-row select{text-transform:none;flex:none}
.friend-msg{min-height:1.3em;color:var(--gold);font-size:.9rem;margin:10px 0}
.friends-h{margin:18px 0 8px;font-size:1.02rem}
.challenge-level-row{display:flex;align-items:center;gap:10px;margin:8px 0 12px;color:var(--cream-dim);font-size:.92rem}
.friend-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid rgba(var(--acc),.1)}
.friend-row .fname{flex:1;font-weight:600}
.dot-online{width:9px;height:9px;border-radius:50%;background:#5f7a68;flex:none}
.dot-online.on{background:#7ed492;box-shadow:0 0 8px rgba(126,212,146,.8)}
.challenge-banner{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  border:1px solid var(--hairline);border-radius:14px;padding:16px 20px;margin-bottom:20px;
  background:linear-gradient(180deg,var(--walnut-2),var(--walnut-1));color:var(--cream);
}
.banner-actions{display:flex;gap:10px}

/* Leaderboard: the lobby strip + the full-board sheet.
   Rank metals echo the app sheet's podium (gold / silver /
   bronze); the player's own row wears a gold edge and a
   YOU chip, like the app's highlighted row. */
.leaderboard-card{grid-column:1 / -1}
.lb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lb-head h2{margin-bottom:0}
.lb-actions{display:flex;gap:8px;flex-wrap:wrap}
.lb-row{font-variant-numeric:tabular-nums;display:grid;grid-template-columns:18px 32px minmax(0,1fr) 46px 108px 96px;align-items:center;gap:8px;padding:8px 6px;border-bottom:1px solid rgba(var(--acc),.1)}
.lb-row:last-child{border-bottom:none}
.lb-rank{grid-column:2;font-weight:800;color:var(--muted);text-align:left;font-size:1rem;white-space:nowrap}
.lb-row.r1 .lb-rank{color:var(--gold)}
.lb-row.r2 .lb-rank{color:#dfe3ea}
.lb-row.r3 .lb-rank{color:#e0a370}
.lb-name{grid-column:3;min-width:0;font-weight:600;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-lvl{grid-column:4;color:var(--muted);font-size:.85rem;text-align:left;white-space:nowrap}
.lb-wl{grid-column:5;color:var(--cream-dim);font-size:.85rem;text-align:left;white-space:nowrap}
.lb-xp{grid-column:6;color:var(--gold);font-weight:800;text-align:left;white-space:nowrap}
.lb-xp-num{display:inline-block;text-align:left}
.lb-xp small{color:var(--muted);font-weight:600;font-size:.72rem;letter-spacing:.08em}
.lb-row.me{background:linear-gradient(180deg,rgba(var(--acc),.13),rgba(var(--acc),.05));
  box-shadow:inset 0 0 0 1px var(--hairline);border-radius:10px}
.lb-star{grid-column:1;color:var(--gold);font-size:.92rem;line-height:1;text-shadow:0 0 9px rgba(var(--acc),.6)}
#lb-me-pin{margin-top:10px}
#lb-me-pin .lb-row{border-bottom:none}
.lb-modal-card{width:min(520px,94vw);text-align:left}
.lb-modal-card h3,.lb-modal-card .card-sub{text-align:center}
.lb-list{max-height:52vh;overflow-y:auto;margin-top:6px}
#lb-full-me{margin-top:10px}
#lb-full-me .lb-row{border-bottom:none}
@media (max-width:480px){
  .modal-card.lb-modal-card{width:100%;padding:16px 12px}
  .lb-row{grid-template-columns:16px 26px minmax(0,1fr) 34px 78px 72px;gap:5px;padding-left:2px;padding-right:2px}
  .lb-name{font-size:.92rem}
  .lb-lvl,.lb-wl{font-size:.76rem}
  .lb-xp{font-size:.92rem}
}

/* ---------- game ---------- */
/* One viewport tall, always: header, board and controls share
   100dvh in a flex column and the board is sized to the wrap
   (fitBoard in app.js) — no page scroll in phone landscape. */
#screen-game{max-width:none;margin:0 auto;height:100dvh;padding:10px 14px 12px;
  display:flex;flex-direction:column;position:relative}
.game-header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:6px;flex-wrap:wrap;flex:none}
.player-chip{background:linear-gradient(165deg,rgba(var(--ink1),.72),rgba(var(--ink2),.9));border:1px solid rgba(var(--acc),.22);
  border-radius:12px;padding:12px 18px;font-weight:700;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;font-size:1.08rem}
.player-chip.mine{border-color:var(--hairline)}
.chip-meta{color:var(--muted);font-weight:500;font-size:.85rem}
.addfriend-btn{align-self:center;white-space:nowrap}
.addfriend-btn:disabled{opacity:.75;cursor:default}
.game-centre{display:flex;align-items:center;gap:14px}
.cube-display{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:1.15rem;
  color:var(--ink-on-gold);background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep));
  box-shadow:0 8px 20px rgba(var(--acc-deep),.35);transform:rotate(-6deg)}
.game-status{color:var(--gold);font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.9)}
.bot-note{text-align:center;color:var(--gold);margin-bottom:6px;flex:none}
.game-notice{text-align:center;color:var(--cream);background:rgba(var(--walnut-glow),.65);border:1px solid var(--hairline);
  border-radius:999px;padding:8px 18px;margin:0 auto 8px;max-width:640px;flex:none}

/* Board: walnut frame, green felt, 13 columns (6 + bar + 6) x 2 rows,
   plus the borne-off trays down the right side. */
/* The board hugs the TOP of its wrap (Sasan, 2026-11-01,
   red-boxed photo): the profiles come DOWN to the board and
   the rail buttons start level with the board's top edge —
   with the board centred, both floated ~40px above it and
   the slack pooled between the chips and the table. Any
   height slack now pools BELOW the board, in the room. */
#board-wrap{flex:1;min-width:0;min-height:0;display:flex;align-items:flex-start;justify-content:center;position:relative}
@media (max-height:480px){
  #screen-game{padding:4px 10px 4px}
  .game-header{margin-bottom:0;row-gap:2px}
  .bot-note{font-size:.72rem;line-height:1.15;margin-bottom:0}
  .player-chip{padding:0 10px}
  .cube-display{width:28px;height:28px;font-size:.9rem}
  /* The controls row needs real air below it: at a 390px-tall
     screen its pills used to sit 4px off the frame edge, so
     their lower arc + glow fell outside the visible frame and
     read as clipped. A 10px bottom margin lifts the whole row
     into the frame; the space is funded by the slimmer header
     (chip padding, 28px cube, tighter row gap), the note's
     margin and the controls' own top margin/min-height, so
     the board's wrap loses nothing. */
  .game-controls{margin-top:2px;min-height:36px;margin-bottom:10px}
  #screen-game .btn{padding:8px 20px}
  #board{padding:8px;gap:8px}
  #trays{width:64px}
}
.btn-ghost:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* Emotes: tray above the controls; bubbles float over the board
   corners and never take touches (pointer-events:none). */
.emote-tray{display:flex;flex-direction:column;gap:4px;align-items:center;
  width:fit-content;max-width:94vw;
  padding:8px 6px;border-radius:999px;border:1px solid var(--hairline);
  background:linear-gradient(180deg,var(--walnut-2),var(--walnut-1));box-shadow:0 14px 34px rgba(0,0,0,.45)}
/* The tray lives in the side rail (Sasan, 2026-11-01: "move the
   emojis") — a vertical pill under the controls; in the stacked
   layout it lies flat in the bar under the board instead. Either
   way it never floats over the board again. */
#game-rail .emote-tray{align-self:center}
.emote-btn{background:none;border:none;cursor:pointer;font-size:1.55rem;line-height:1;font-family:inherit;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  transition:transform .12s ease,background .12s ease}
.emote-btn:hover{background:rgba(var(--acc),.14);transform:translateY(-2px)}
.emote-bubble{position:absolute;z-index:30;width:66px;height:66px;border-radius:50%;pointer-events:none;
  display:grid;place-items:center;font-size:2.3rem;line-height:1;
  background:radial-gradient(circle at 38% 32%, rgba(var(--ink1),.94), rgba(var(--ink3),.94));
  border:1px solid var(--hairline);box-shadow:0 14px 30px rgba(0,0,0,.55)}
.emote-bubble.opp{top:12px;left:12px}
.emote-bubble.me{bottom:12px;right:12px}
.emote-bubble.pop{animation:emote-pop 2.2s ease forwards}
@keyframes emote-pop{0%{opacity:0;transform:scale(.4)}12%{opacity:1;transform:scale(1.12)}
  22%{transform:scale(1)}78%{opacity:1}100%{opacity:0;transform:scale(1) translateY(-8px)}}
/* Board: a themed case with a gold inlay, holding the level's
   field — 13 columns (6 + bar + 6) x 2 rows, plus the
   borne-off trays down the right side. The field is TALL now:
   aspect 1.55:1 (the fixed-pixel board it replaces measured
   ~2.2:1), points run 88% of each half, and a checker is sized
   off the FIELD (4.91% of its width = half-height / 5.5) so five
   checkers stack with air and taller stacks compress instead of
   spilling. #points-grid is the container every cqw measures.
   v2 texture pass: every surface carries a code-only SVG
   feTurbulence texture (no image assets) — walnut grain on
   the case, marble veining on the field, grain + pitting on
   the points, pearl clouds on the white checkers, pebble
   leather in the trays — layered under the v1 lighting.
   Alive pass: a thicker stepped case standing off the page, a
   warm lamp pool breathing over marble that drifts on a ~70s
   cycle, checkers grounded by a real contact shadow and a
   deeper-turned wall, and a bar recessed like a channel.
   Level themes: the MATERIALS are per-level custom properties
   (the ladder further down), designed from Sasan's reference
   photos — a match is played on the board of its own level,
   L1 Classic Khatam to L10 Takhte Royalty. app.js sets
   #board[data-level] from the matched frame; the 3-D
   treatment never changes, only the materials do. */
#board{
  /* Level 1 — Classic Khatam materials (photo 75548E60); other
     levels override below. */
    --case-0:#6a3f23;
    --case-1:#4c2e1a;
    --case-2:#2e1c0f;
    --metal:184 148 87;
    --accent:#d9b873;
    --bar-0:#774928;
    --bar-1:#5c381f;
    --bar-2:#392313;
    --field-0:#211c17;
    --field-1:#1a1612;
    --field-2:#120f0d;
    --glow-rgb:45 38 31;
    --shade-rgb:29 17 10;
    --lamp-rgb:255 214 160;
    --lamp-a:0.13;
    --point-a-base:#998d70;
    --point-a:#e6d4a8;
    --point-a-tip:#e9d7ad;
    --point-b-base:#362212;
    --point-b:#613d21;
    --point-b-tip:#7e5f41;
    --white-0:#fffcf0;
    --white-1:#efe4cb;
    --white-2:#dbc79e;
    --white-3:#ab9b7b;
    --white-wall:#d5c199;
    --white-ring:rgba(145,131,104,0.5);
    --white-ink:rgba(175,159,126,0.55);
    --black-0:#1d140e;
    --black-1:#291c14;
    --black-2:#18110c;
    --black-3:#0a0805;
    --die-0:#fff8c9;
    --die-1:#e6d6ad;
    --die-2:#a59a7d;
    --pip-0:#291a0d;
    --pip-1:#452b16;
    --pip-rgb:41 26 13;
    --tray-0:#3d2514;
    --tray-1:#2a190e;
    --board-glow:transparent;
    --field-veil:rgba(18,15,13,0.66);
    --case-pattern:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%3E%3Cpath%20d='M14%201.5%20L26.5%2014%20L14%2026.5%20L1.5%2014%20Z'%20fill='none'%20stroke='%23efe3c2'%20stroke-opacity='.75'%20stroke-width='1.6'/%3E%3Cpath%20d='M14%207.5%20L20.5%2014%20L14%2020.5%20L7.5%2014%20Z'%20fill='none'%20stroke='%23b98d54'%20stroke-opacity='.6'%20stroke-width='1.1'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'%20fill='%23efe3c2'%20fill-opacity='.8'/%3E%3Ccircle%20cx='0'%20cy='0'%20r='1.3'%20fill='%23b98d54'%20fill-opacity='.6'/%3E%3Ccircle%20cx='28'%20cy='0'%20r='1.3'%20fill='%23b98d54'%20fill-opacity='.6'/%3E%3Ccircle%20cx='0'%20cy='28'%20r='1.3'%20fill='%23b98d54'%20fill-opacity='.6'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='1.3'%20fill='%23b98d54'%20fill-opacity='.6'/%3E%3C/svg%3E");
    --case-pattern-size:26px;
    --field-pattern:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='none'%20stroke='%23efe3c2'%20stroke-opacity='.17'%20stroke-width='1.1'%3E%3Crect%20x='6.5'%20y='6.5'%20width='11'%20height='11'/%3E%3Crect%20x='6.5'%20y='6.5'%20width='11'%20height='11'%20transform='rotate(45%2012%2012)'/%3E%3C/g%3E%3Ccircle%20cx='0'%20cy='0'%20r='1.2'%20fill='%23efe3c2'%20fill-opacity='.15'/%3E%3Ccircle%20cx='24'%20cy='0'%20r='1.2'%20fill='%23efe3c2'%20fill-opacity='.15'/%3E%3Ccircle%20cx='0'%20cy='24'%20r='1.2'%20fill='%23efe3c2'%20fill-opacity='.15'/%3E%3Ccircle%20cx='24'%20cy='24'%20r='1.2'%20fill='%23efe3c2'%20fill-opacity='.15'/%3E%3C/svg%3E");
    --field-pattern-size:24px;
    --medallion:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='160'%20viewBox='0%200%20400%20160'%3E%3Cg%20transform='translate(96%2080)'%3E%3Cpolygon%20points='0.0,-56.0%208.0,-29.8%2028.0,-48.5%2021.8,-21.8%2048.5,-28.0%2029.8,-8.0%2056.0,0.0%2029.8,8.0%2048.5,28.0%2021.8,21.8%2028.0,48.5%208.0,29.8%200.0,56.0%20-8.0,29.8%20-28.0,48.5%20-21.8,21.8%20-48.5,28.0%20-29.8,8.0%20-56.0,0.0%20-29.8,-8.0%20-48.5,-28.0%20-21.8,-21.8%20-28.0,-48.5%20-8.0,-29.8'%20fill='none'%20stroke='%23efe3c2'%20stroke-opacity='.5'%20stroke-width='2.4'/%3E%3Cpolygon%20points='0.0,-30.0%204.3,-15.9%2015.0,-26.0%2011.7,-11.7%2026.0,-15.0%2015.9,-4.3%2030.0,0.0%2015.9,4.3%2026.0,15.0%2011.7,11.7%2015.0,26.0%204.3,15.9%200.0,30.0%20-4.3,15.9%20-15.0,26.0%20-11.7,11.7%20-26.0,15.0%20-15.9,4.3%20-30.0,0.0%20-15.9,-4.3%20-26.0,-15.0%20-11.7,-11.7%20-15.0,-26.0%20-4.3,-15.9'%20fill='none'%20stroke='%23c9a86a'%20stroke-opacity='.45'%20stroke-width='1.8'/%3E%3Ccircle%20r='5'%20fill='%23c9a86a'%20fill-opacity='.55'/%3E%3C/g%3E%3Cg%20transform='translate(304%2080)'%3E%3Cpolygon%20points='0.0,-56.0%208.0,-29.8%2028.0,-48.5%2021.8,-21.8%2048.5,-28.0%2029.8,-8.0%2056.0,0.0%2029.8,8.0%2048.5,28.0%2021.8,21.8%2028.0,48.5%208.0,29.8%200.0,56.0%20-8.0,29.8%20-28.0,48.5%20-21.8,21.8%20-48.5,28.0%20-29.8,8.0%20-56.0,0.0%20-29.8,-8.0%20-48.5,-28.0%20-21.8,-21.8%20-28.0,-48.5%20-8.0,-29.8'%20fill='none'%20stroke='%23efe3c2'%20stroke-opacity='.5'%20stroke-width='2.4'/%3E%3Cpolygon%20points='0.0,-30.0%204.3,-15.9%2015.0,-26.0%2011.7,-11.7%2026.0,-15.0%2015.9,-4.3%2030.0,0.0%2015.9,4.3%2026.0,15.0%2011.7,11.7%2015.0,26.0%204.3,15.9%200.0,30.0%20-4.3,15.9%20-15.0,26.0%20-11.7,11.7%20-26.0,15.0%20-15.9,4.3%20-30.0,0.0%20-15.9,-4.3%20-26.0,-15.0%20-11.7,-11.7%20-15.0,-26.0%20-4.3,-15.9'%20fill='none'%20stroke='%23c9a86a'%20stroke-opacity='.45'%20stroke-width='1.8'/%3E%3Ccircle%20r='5'%20fill='%23c9a86a'%20fill-opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
    --point-pattern:none;
    --point-pattern-size:12px;
  position:relative;display:flex;gap:10px;width:min(1080px,100%);
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='480'%20height='480'%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.005%200.1'%20numOctaves='3'%20seed='29'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%201%20%200%200%200%200%200.85%20%200%200%200%200%200.55%20%200%200%201%200%200'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='table'%20tableValues='0%200%200%200.4%200%200%200.3%200%200%200'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%201%20%200%200%200%200%200.85%20%200%200%200%200%200.55%20%200%200%200%200.48%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='480'%20height='480'%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.007%200.14'%20numOctaves='4'%20seed='11'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%201%200%200'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='table'%20tableValues='0%200%200.55%200%200%200.4%200%200%200.62%200%200%200'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200.72%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"),
    linear-gradient(115deg, rgba(var(--acc-hi),.14), rgba(var(--acc-hi),0) 42%),
    linear-gradient(165deg,var(--case-0) 0%,var(--case-1) 48%,var(--case-2) 100%);
  border:2px solid color-mix(in srgb, rgb(var(--metal)) 55%, #140a02);border-radius:18px;padding:14px;
  box-shadow:0 3px 0 color-mix(in srgb, var(--case-2), black 8%),
    0 6px 0 color-mix(in srgb, var(--case-2), black 26%),
    0 10px 0 color-mix(in srgb, var(--case-2), black 44%),
    0 14px 0 color-mix(in srgb, var(--case-2), black 60%),
    0 46px 84px rgba(0,0,0,.74), 0 0 54px var(--board-glow),
    inset 0 2px 2px rgba(var(--acc-hi),.4), inset 0 -4px 8px rgba(0,0,0,.6),
    inset 0 0 0 2px color-mix(in srgb, var(--case-2), black 30%),
    inset 0 0 42px rgba(0,0,0,.45);
}
#board::before{ /* the gold inlay inside the case rim, engraved:
   a hairline shadowed by a dark etch and a fainter twin line,
   with a small rosette punched through each corner */
  content:"";position:absolute;inset:5px;border:1px solid rgb(var(--metal)/.5);
  border-radius:13px;pointer-events:none;z-index:0;
  box-shadow:inset 0 0 0 2px rgba(23,12,2,.55), inset 0 0 0 3px rgb(var(--metal)/.22);
  background:
    var(--case-pattern),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 42%, var(--acc-hex-hi)) 0 1.6px, rgb(var(--metal)/.55) 2.6px, rgba(var(--on-acc),.85) 3.6px, rgba(0,0,0,0) 4.8px),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 42%, var(--acc-hex-hi)) 0 1.6px, rgb(var(--metal)/.55) 2.6px, rgba(var(--on-acc),.85) 3.6px, rgba(0,0,0,0) 4.8px),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 42%, var(--acc-hex-hi)) 0 1.6px, rgb(var(--metal)/.55) 2.6px, rgba(var(--on-acc),.85) 3.6px, rgba(0,0,0,0) 4.8px),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 42%, var(--acc-hex-hi)) 0 1.6px, rgb(var(--metal)/.55) 2.6px, rgba(var(--on-acc),.85) 3.6px, rgba(0,0,0,0) 4.8px);
  background-size:var(--case-pattern-size), 11px 11px, 11px 11px, 11px 11px, 11px 11px;background-repeat:repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position:0 0, -5px -5px, calc(100% + 5px) -5px, -5px calc(100% + 5px), calc(100% + 5px) calc(100% + 5px);
}
#points-grid{
  position:relative;z-index:1;flex:1;container-type:inline-size;
  display:grid;grid-template-columns:repeat(6,1fr) .55fr repeat(6,1fr);
  grid-template-rows:1fr 1fr;gap:3px 2px;aspect-ratio:1.55;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='560'%20height='360'%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.007%200.01'%20numOctaves='5'%20seed='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.93%20%200%200%200%200%200.87%20%200%200%200%200%200.66%20%201%200%200%200%200'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='table'%20tableValues='0%200%200%200%200.1%200.45%201%200.45%200.1%200%200%200%200'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.93%20%200%200%200%200%200.87%20%200%200%200%200%200.66%20%200%200%200%200.3%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='560'%20height='360'%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.009%200.006'%20numOctaves='4'%20seed='31'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.85%20%200%200%200%200%200.8%20%200%200%200%200%200.6%20%201%200%200%200%200'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='table'%20tableValues='0%200%200%200%200.8%200%200%200%200%200.6%200%200%200'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.85%20%200%200%200%200%200.8%20%200%200%200%200%200.6%20%200%200%200%200.22%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"),
    linear-gradient(var(--field-veil), var(--field-veil)),
    radial-gradient(120% 95% at 50% 42%, rgb(var(--shade-rgb)/0) 52%, rgb(var(--shade-rgb)/.38) 100%),
    linear-gradient(180deg, rgba(var(--acc-hi),.10), rgba(var(--acc-hi),0) 34%,
      rgba(0,0,0,.16) 88%, rgba(0,0,0,.30)),
    radial-gradient(90% 70% at 38% 30%, rgb(var(--lamp-rgb)/var(--lamp-a)), rgb(var(--lamp-rgb)/0) 55%),
    radial-gradient(120% 90% at 50% 42%, rgb(var(--glow-rgb)/.48), rgb(var(--glow-rgb)/0) 60%),
    var(--medallion),
    var(--field-pattern),
    radial-gradient(140% 120% at 50% 50%, var(--field-0) 0%, var(--field-1) 52%, var(--field-2) 100%);
  background-size:165% 165%, 185% 185%, auto, 150% 150%, auto, 135% 135%, auto, auto 62%, var(--field-pattern-size), auto;
  background-position:0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 25% 20%, 0% 0%, 50% 50%, 0% 0%, 0% 0%;
  background-repeat:repeat, repeat, no-repeat, repeat, repeat, repeat, repeat, no-repeat, repeat, repeat;
  border-radius:10px;padding:7px;border:1px solid rgba(0,0,0,.65);
  box-shadow:inset 0 0 0 1px rgb(var(--metal)/.14),
    inset 0 12px 26px rgba(0,0,0,.5), inset 0 -12px 26px rgba(0,0,0,.5),
    inset 14px 0 26px -8px rgba(0,0,0,.42), inset -14px 0 26px -8px rgba(0,0,0,.42),
    inset 0 0 64px rgba(0,0,0,.42);
}
/* Living light: the oversized marble layers and the lamp pool
   drift a few percent on a ~70s breath — barely perceptible,
   the way light moves across polished stone — and hold
   perfectly still for anyone whose system asks for that. */
/* marble-drift REMOVED (2026-11-01, Sasan: "a lot of people
   have old computers — this game should be easy enough to just
   play"). The drift animated background-position on the WHOLE
   playing field's ten layers, so the browser repainted the full
   board surface every frame, forever: measured 1 fps at idle in
   a matched game vs 60 fps in the lobby. A board game must run
   on anything — the marble now holds still (identical in every
   still frame, which is all anyone ever approved). */
/* ---------- the room behind the board (per level) ----------
   Sasan, 2026-11-01: "Use a background like this for every
   level behind the board just to make sure the background
   matches the boards color." Each game screen backdrop is
   built from ITS OWN board's field colours (the --field-0/1/2
   stops of the theme below): a soft halo of the field's
   lightest tone behind the board, sinking to a blackened
   shade of its deepest tone at the edges — so the room always
   wears the table's colours, on all ten levels. Static
   gradients only (one paint, no per-frame cost). */
#screen-game[data-level="1"]{background:radial-gradient(95% 70% at 50% 42%,color-mix(in srgb,#211c17 85%,transparent) 0%,rgba(0,0,0,0) 60%),radial-gradient(150% 120% at 50% 40%,color-mix(in srgb,#1a1612,black 30%) 0%,color-mix(in srgb,#120f0d,black 62%) 82%)}
#screen-game[data-level="2"]{background:radial-gradient(95% 70% at 50% 42%,color-mix(in srgb,#664021 85%,transparent) 0%,rgba(0,0,0,0) 60%),radial-gradient(150% 120% at 50% 40%,color-mix(in srgb,#58351b,black 30%) 0%,color-mix(in srgb,#472914,black 62%) 82%)}
#screen-game[data-level="3"]{background:radial-gradient(95% 70% at 50% 42%,color-mix(in srgb,#121f45 85%,transparent) 0%,rgba(0,0,0,0) 60%),radial-gradient(150% 120% at 50% 40%,color-mix(in srgb,#0e1938,black 30%) 0%,color-mix(in srgb,#0a1229,black 62%) 82%)}
#screen-game[data-level="4"]{background:radial-gradient(95% 70% at 50% 42%,color-mix(in srgb,#144c61 85%,transparent) 0%,rgba(0,0,0,0) 60%),radial-gradient(150% 120% at 50% 40%,color-mix(in srgb,#114052,black 30%) 0%,color-mix(in srgb,#0d3040,black 62%) 82%)}
#screen-game[data-level="5"]{background:radial-gradient(95% 70% at 50% 42%,color-mix(in srgb,#420f1c 85%,transparent) 0%,rgba(0,0,0,0) 60%),radial-gradient(150% 120% at 50% 40%,color-mix(in srgb,#370c17,black 30%) 0%,color-mix(in srgb,#290812,black 62%) 82%)}
#screen-game[data-level="6"]{background:radial-gradient(95% 70% at 50% 42%,color-mix(in srgb,#121214 85%,transparent) 0%,rgba(0,0,0,0) 60%),radial-gradient(150% 120% at 50% 40%,color-mix(in srgb,#0d0d10,black 30%) 0%,color-mix(in srgb,#08080a,black 62%) 82%)}
#screen-game[data-level="7"]{background:radial-gradient(95% 70% at 50% 42%,color-mix(in srgb,#14120f 85%,transparent) 0%,rgba(0,0,0,0) 60%),radial-gradient(150% 120% at 50% 40%,color-mix(in srgb,#100d0c,black 30%) 0%,color-mix(in srgb,#0a0808,black 62%) 82%)}
#screen-game[data-level="8"]{background:radial-gradient(95% 70% at 50% 42%,color-mix(in srgb,#1a5c38 85%,transparent) 0%,rgba(0,0,0,0) 60%),radial-gradient(150% 120% at 50% 40%,color-mix(in srgb,#154e2f,black 30%) 0%,color-mix(in srgb,#0f3d24,black 62%) 82%)}
#screen-game[data-level="9"]{background:radial-gradient(95% 70% at 50% 42%,color-mix(in srgb,#144c2e 85%,transparent) 0%,rgba(0,0,0,0) 60%),radial-gradient(150% 120% at 50% 40%,color-mix(in srgb,#104026,black 30%) 0%,color-mix(in srgb,#0a301c,black 62%) 82%)}
#screen-game[data-level="10"]{background:radial-gradient(95% 70% at 50% 42%,color-mix(in srgb,#1f4030 85%,transparent) 0%,rgba(0,0,0,0) 60%),radial-gradient(150% 120% at 50% 40%,color-mix(in srgb,#173224,black 30%) 0%,color-mix(in srgb,#0d2114,black 62%) 82%)}

/* ---------- level themes (Sasan's reference photos) ----------
   One designed table per level: L1 Classic Khatam · L2 Minakari
   Walnut · L3 Midnight Constellation · L4 Tile Mosaic · L5
   Burgundy Pearl · L6 Art Deco Noir · L7 Maki-e Noir · L8
   Emerald Khatam · L9 Royal Emerald · L10 Takhte Royalty
   (black-green marble + heavy gold). Geometry, light and motion
   are shared; materials + ornaments change. */
/* Level 2 — Minakari Walnut (ref FF0C0321) */
#board[data-level="2"] {
    --case-0:#633519;
    --case-1:#472612;
    --case-2:#2b170b;
    --metal:184 133 71;
    --accent:#e09438;
    --bar-0:#713f1e;
    --bar-1:#573017;
    --bar-2:#361e0e;
    --field-0:#664021;
    --field-1:#58351b;
    --field-2:#472914;
    --glow-rgb:138 86 45;
    --shade-rgb:27 15 7;
    --lamp-rgb:255 214 160;
    --lamp-a:0.14;
    --point-a-base:#834a0f;
    --point-a:#d97a1a;
    --point-a-tip:#de903b;
    --point-b-base:#0e2d44;
    --point-b:#1a527a;
    --point-b-tip:#688da7;
    --white-0:#faedd1;
    --white-1:#e8d3af;
    --white-2:#d1b285;
    --white-3:#a38b67;
    --white-wall:#cbad81;
    --white-ring:rgba(138,118,88,0.5);
    --white-ink:rgba(167,143,106,0.55);
    --black-0:#1b1009;
    --black-1:#26170d;
    --black-2:#150d07;
    --black-3:#080503;
    --die-0:#a36532;
    --die-1:#8c572b;
    --die-2:#653e1f;
    --pip-0:#eddbad;
    --pip-1:#ffffff;
    --pip-rgb:237 219 173;
    --tray-0:#391f0e;
    --tray-1:#27150a;
    --board-glow:transparent;
    --field-veil:rgba(71,41,20,0.12);
    --case-pattern:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%201.6%20L10.4%206%20L6%2010.4%20L1.6%206%20Z'%20fill='%237fae4c'%20fill-opacity='.8'/%3E%3Cpath%20d='M18%201.6%20L22.4%206%20L18%2010.4%20L13.6%206%20Z'%20fill='%23c96a2e'%20fill-opacity='.8'/%3E%3Cpath%20d='M6%2013.6%20L10.4%2018%20L6%2022.4%20L1.6%2018%20Z'%20fill='%23e8dcc0'%20fill-opacity='.8'/%3E%3Cpath%20d='M18%2013.6%20L22.4%2018%20L18%2022.4%20L13.6%2018%20Z'%20fill='%23a33f22'%20fill-opacity='.8'/%3E%3Cpath%20d='M12%207.6%20L16.4%2012%20L12%2016.4%20L7.6%2012%20Z'%20fill='%23c96a2e'%20fill-opacity='.8'/%3E%3Ccircle%20cx='12'%20cy='0'%20r='1.2'%20fill='%23e8dcc0'%20fill-opacity='.7'/%3E%3Ccircle%20cx='0'%20cy='12'%20r='1.2'%20fill='%23e8dcc0'%20fill-opacity='.7'/%3E%3Ccircle%20cx='24'%20cy='12'%20r='1.2'%20fill='%23e8dcc0'%20fill-opacity='.7'/%3E%3Ccircle%20cx='12'%20cy='24'%20r='1.2'%20fill='%23e8dcc0'%20fill-opacity='.7'/%3E%3C/svg%3E");
    --case-pattern-size:24px;
    --field-pattern:none;
    --field-pattern-size:24px;
    --medallion:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='160'%20viewBox='0%200%20400%20160'%3E%3Cg%20transform='translate(96%2080)'%3E%3Cellipse%20rx='57'%20ry='63'%20fill='none'%20stroke='%237fa8d8'%20stroke-opacity='.55'%20stroke-width='2.6'/%3E%3Cellipse%20rx='49'%20ry='55'%20fill='none'%20stroke='%237fa8d8'%20stroke-opacity='.3'%20stroke-width='1.2'/%3E%3Cpolygon%20points='0.0,-40.0%208.4,-20.3%2028.3,-28.3%2020.3,-8.4%2040.0,0.0%2020.3,8.4%2028.3,28.3%208.4,20.3%200.0,40.0%20-8.4,20.3%20-28.3,28.3%20-20.3,8.4%20-40.0,0.0%20-20.3,-8.4%20-28.3,-28.3%20-8.4,-20.3'%20fill='%23e0972f'%20fill-opacity='.4'/%3E%3Cpolygon%20points='0.0,-21.0%204.6,-11.1%2014.8,-14.8%2011.1,-4.6%2021.0,0.0%2011.1,4.6%2014.8,14.8%204.6,11.1%200.0,21.0%20-4.6,11.1%20-14.8,14.8%20-11.1,4.6%20-21.0,0.0%20-11.1,-4.6%20-14.8,-14.8%20-4.6,-11.1'%20fill='%234c9a58'%20fill-opacity='.5'/%3E%3Ccircle%20r='4'%20fill='%237fa8d8'%20fill-opacity='.6'/%3E%3C/g%3E%3Cg%20transform='translate(304%2080)'%3E%3Cellipse%20rx='57'%20ry='63'%20fill='none'%20stroke='%237fa8d8'%20stroke-opacity='.55'%20stroke-width='2.6'/%3E%3Cellipse%20rx='49'%20ry='55'%20fill='none'%20stroke='%237fa8d8'%20stroke-opacity='.3'%20stroke-width='1.2'/%3E%3Cpolygon%20points='0.0,-40.0%208.4,-20.3%2028.3,-28.3%2020.3,-8.4%2040.0,0.0%2020.3,8.4%2028.3,28.3%208.4,20.3%200.0,40.0%20-8.4,20.3%20-28.3,28.3%20-20.3,8.4%20-40.0,0.0%20-20.3,-8.4%20-28.3,-28.3%20-8.4,-20.3'%20fill='%23e0972f'%20fill-opacity='.4'/%3E%3Cpolygon%20points='0.0,-21.0%204.6,-11.1%2014.8,-14.8%2011.1,-4.6%2021.0,0.0%2011.1,4.6%2014.8,14.8%204.6,11.1%200.0,21.0%20-4.6,11.1%20-14.8,14.8%20-11.1,4.6%20-21.0,0.0%20-11.1,-4.6%20-14.8,-14.8%20-4.6,-11.1'%20fill='%234c9a58'%20fill-opacity='.5'/%3E%3Ccircle%20r='4'%20fill='%237fa8d8'%20fill-opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
    --point-pattern:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%3E%3Ccircle%20cx='3'%20cy='3'%20r='1.6'%20fill='%23ffe9b0'%20fill-opacity='.35'/%3E%3Ccircle%20cx='9'%20cy='9'%20r='1.6'%20fill='%230e3a2c'%20fill-opacity='.35'/%3E%3C/svg%3E");
    --point-pattern-size:12px;
}
/* Level 3 — Midnight Constellation (ref 5C7BEC1D) */
#board[data-level="3"] {
    --case-0:#152354;
    --case-1:#0f1a3d;
    --case-2:#090f25;
    --metal:199 209 224;
    --accent:#a8c2eb;
    --bar-0:#1b2b60;
    --bar-1:#14214a;
    --bar-2:#0d152e;
    --field-0:#121f45;
    --field-1:#0e1938;
    --field-2:#0a1229;
    --glow-rgb:24 41 93;
    --shade-rgb:6 10 23;
    --lamp-rgb:200 220 255;
    --lamp-a:0.12;
    --point-a-base:#9c937b;
    --point-a:#e8dbb8;
    --point-a-tip:#ebddba;
    --point-b-base:#58647c;
    --point-b:#8ca1c7;
    --point-b-tip:#b3c1da;
    --white-0:#f5f7fc;
    --white-1:#dee5f0;
    --white-2:#c2cfe0;
    --white-3:#97a1af;
    --white-wall:#bcc8da;
    --white-ring:rgba(128,136,148,0.5);
    --white-ink:rgba(155,165,180,0.55);
    --black-0:#0e1420;
    --black-1:#141c2e;
    --black-2:#0c111d;
    --black-3:#05080f;
    --die-0:#152353;
    --die-1:#121f47;
    --die-2:#0d1633;
    --pip-0:#d9e3f2;
    --pip-1:#ffffff;
    --pip-rgb:217 227 242;
    --tray-0:#0c1431;
    --tray-1:#080e22;
    --board-glow:transparent;
    --field-veil:rgba(10,18,41,0.28);
    --case-pattern:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='54'%20height='54'%20viewBox='0%200%2054%2054'%3E%3Cpath%20d='M7%2041%20L21%2027%20L35%2033%20L47%2015'%20fill='none'%20stroke='%23dfe6ee'%20stroke-opacity='.35'%20stroke-width='.8'/%3E%3Cpath%20d='M47%208%20L48.3%2013.7%20L54%2015%20L48.3%2016.3%20L47%2022%20L45.7%2016.3%20L40%2015%20L45.7%2013.7%20Z'%20fill='%23dfe6ee'%20fill-opacity='.9'/%3E%3Cpath%20d='M16%207.4%20L16.8%2011.2%20L20.6%2012%20L16.8%2012.8%20L16%2016.6%20L15.2%2012.8%20L11.4%2012%20L15.2%2011.2%20Z'%20fill='%23dfe6ee'%20fill-opacity='.75'/%3E%3Ccircle%20cx='7'%20cy='41'%20r='1.7'%20fill='%23dfe6ee'/%3E%3Ccircle%20cx='21'%20cy='27'%20r='1.4'%20fill='%23dfe6ee'/%3E%3Ccircle%20cx='35'%20cy='33'%20r='1.2'%20fill='%23dfe6ee'/%3E%3Ccircle%20cx='30'%20cy='8'%20r='1.1'%20fill='%23dfe6ee'%20fill-opacity='.8'/%3E%3Ccircle%20cx='10'%20cy='24'%20r='1'%20fill='%23dfe6ee'%20fill-opacity='.7'/%3E%3C/svg%3E");
    --case-pattern-size:54px;
    --field-pattern:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='46'%20height='46'%20viewBox='0%200%2046%2046'%3E%3Cpath%20d='M14%208.5%20L15.0%2013.0%20L19.5%2014%20L15.0%2015.0%20L14%2019.5%20L13.0%2015.0%20L8.5%2014%20L13.0%2013.0%20Z'%20fill='%23dfe6ee'%20fill-opacity='.5'/%3E%3Ccircle%20cx='33'%20cy='31'%20r='1.3'%20fill='%23dfe6ee'%20fill-opacity='.55'/%3E%3Ccircle%20cx='39'%20cy='9'%20r='1'%20fill='%23dfe6ee'%20fill-opacity='.45'/%3E%3Ccircle%20cx='8'%20cy='36'%20r='1'%20fill='%23dfe6ee'%20fill-opacity='.4'/%3E%3C/svg%3E");
    --field-pattern-size:46px;
    --medallion:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='160'%20viewBox='0%200%20400%20160'%3E%3Cg%20transform='translate(96%2080)'%3E%3Ccircle%20r='44'%20fill='none'%20stroke='%23dfe6ee'%20stroke-opacity='.55'%20stroke-width='2.2'/%3E%3Ccircle%20r='38'%20fill='none'%20stroke='%23dfe6ee'%20stroke-opacity='.3'%20stroke-width='1'/%3E%3Cpolygon%20points='0,-58%206,0%200,58%20-6,0'%20fill='%23dfe6ee'%20fill-opacity='.5'%20transform='rotate(0)'/%3E%3Cpolygon%20points='0,-58%206,0%200,58%20-6,0'%20fill='%23dfe6ee'%20fill-opacity='.5'%20transform='rotate(90)'/%3E%3Cpolygon%20points='0,-38%204.5,0%200,38%20-4.5,0'%20fill='%23dfe6ee'%20fill-opacity='.38'%20transform='rotate(45)'/%3E%3Cpolygon%20points='0,-38%204.5,0%200,38%20-4.5,0'%20fill='%23dfe6ee'%20fill-opacity='.38'%20transform='rotate(135)'/%3E%3Ccircle%20r='6'%20fill='%23dfe6ee'%20fill-opacity='.6'/%3E%3C/g%3E%3Cg%20transform='translate(304%2080)'%3E%3Ccircle%20r='44'%20fill='none'%20stroke='%23dfe6ee'%20stroke-opacity='.55'%20stroke-width='2.2'/%3E%3Ccircle%20r='38'%20fill='none'%20stroke='%23dfe6ee'%20stroke-opacity='.3'%20stroke-width='1'/%3E%3Cpolygon%20points='0,-58%206,0%200,58%20-6,0'%20fill='%23dfe6ee'%20fill-opacity='.5'%20transform='rotate(0)'/%3E%3Cpolygon%20points='0,-58%206,0%200,58%20-6,0'%20fill='%23dfe6ee'%20fill-opacity='.5'%20transform='rotate(90)'/%3E%3Cpolygon%20points='0,-38%204.5,0%200,38%20-4.5,0'%20fill='%23dfe6ee'%20fill-opacity='.38'%20transform='rotate(45)'/%3E%3Cpolygon%20points='0,-38%204.5,0%200,38%20-4.5,0'%20fill='%23dfe6ee'%20fill-opacity='.38'%20transform='rotate(135)'/%3E%3Ccircle%20r='6'%20fill='%23dfe6ee'%20fill-opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
    --point-pattern:none;
    --point-pattern-size:12px;
}
/* Level 4 — Tile Mosaic (ref 8CF7F11B) */
#board[data-level="4"] {
    --case-0:#6a3f20;
    --case-1:#4c2e17;
    --case-2:#2e1c0e;
    --metal:189 143 76;
    --accent:#4cccc7;
    --bar-0:#774924;
    --bar-1:#5c381c;
    --bar-2:#392311;
    --field-0:#144c61;
    --field-1:#114052;
    --field-2:#0d3040;
    --glow-rgb:28 103 131;
    --shade-rgb:29 17 9;
    --lamp-rgb:255 224 170;
    --lamp-a:0.14;
    --point-a-base:#14535e;
    --point-a:#218c9e;
    --point-a-tip:#6db3bf;
    --point-b-base:#876727;
    --point-b:#d6a33d;
    --point-b-tip:#dcb058;
    --white-0:#f7f0d9;
    --white-1:#e7d6b5;
    --white-2:#d4b88a;
    --white-3:#a58f6b;
    --white-wall:#cdb286;
    --white-ring:rgba(140,121,91,0.5);
    --white-ink:rgba(169,147,110,0.55);
    --black-0:#0c1215;
    --black-1:#121a1f;
    --black-2:#0b1013;
    --black-3:#05080a;
    --die-0:#1b7c94;
    --die-1:#176b80;
    --die-2:#114d5c;
    --pip-0:#f0e3b8;
    --pip-1:#ffffff;
    --pip-rgb:240 227 184;
    --tray-0:#3d2512;
    --tray-1:#2a190d;
    --board-glow:transparent;
    --field-veil:rgba(13,48,64,0.3);
    --case-pattern:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%3E%3Cpath%20d='M14%201.5%20L26.5%2014%20L14%2026.5%20L1.5%2014%20Z'%20fill='none'%20stroke='%23efe3c2'%20stroke-opacity='.75'%20stroke-width='1.6'/%3E%3Cpath%20d='M14%207.5%20L20.5%2014%20L14%2020.5%20L7.5%2014%20Z'%20fill='none'%20stroke='%23a8742c'%20stroke-opacity='.6'%20stroke-width='1.1'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'%20fill='%23efe3c2'%20fill-opacity='.8'/%3E%3Ccircle%20cx='0'%20cy='0'%20r='1.3'%20fill='%23a8742c'%20fill-opacity='.6'/%3E%3Ccircle%20cx='28'%20cy='0'%20r='1.3'%20fill='%23a8742c'%20fill-opacity='.6'/%3E%3Ccircle%20cx='0'%20cy='28'%20r='1.3'%20fill='%23a8742c'%20fill-opacity='.6'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='1.3'%20fill='%23a8742c'%20fill-opacity='.6'/%3E%3C/svg%3E");
    --case-pattern-size:26px;
    --field-pattern:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='26'%20viewBox='0%200%2026%2026'%3E%3Cpath%20d='M6.5%201.3%20L11.7%206.5%20L6.5%2011.7%20L1.3%206.5%20Z'%20fill='%232fa8b8'%20fill-opacity='.30'/%3E%3Cpath%20d='M19.5%201.3%20L24.7%206.5%20L19.5%2011.7%20L14.3%206.5%20Z'%20fill='%23e0aa3e'%20fill-opacity='.30'/%3E%3Cpath%20d='M6.5%2014.3%20L11.7%2019.5%20L6.5%2024.7%20L1.3%2019.5%20Z'%20fill='%232a5da8'%20fill-opacity='.30'/%3E%3Cpath%20d='M19.5%2014.3%20L24.7%2019.5%20L19.5%2024.7%20L14.3%2019.5%20Z'%20fill='%23173f2e'%20fill-opacity='.30'/%3E%3Cpath%20d='M13%209.5%20L16.5%2013%20L13%2016.5%20L9.5%2013%20Z'%20fill='%23e9dfc2'%20fill-opacity='.22'/%3E%3C/svg%3E");
    --field-pattern-size:26px;
    --medallion:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='160'%20viewBox='0%200%20400%20160'%3E%3Cg%20transform='translate(96%2080)'%3E%3Cpolygon%20points='0.0,-56.0%208.0,-29.8%2028.0,-48.5%2021.8,-21.8%2048.5,-28.0%2029.8,-8.0%2056.0,0.0%2029.8,8.0%2048.5,28.0%2021.8,21.8%2028.0,48.5%208.0,29.8%200.0,56.0%20-8.0,29.8%20-28.0,48.5%20-21.8,21.8%20-48.5,28.0%20-29.8,8.0%20-56.0,0.0%20-29.8,-8.0%20-48.5,-28.0%20-21.8,-21.8%20-28.0,-48.5%20-8.0,-29.8'%20fill='%23e8b83e'%20fill-opacity='.34'/%3E%3Cpolygon%20points='0.0,-30.0%204.3,-15.9%2015.0,-26.0%2011.7,-11.7%2026.0,-15.0%2015.9,-4.3%2030.0,0.0%2015.9,4.3%2026.0,15.0%2011.7,11.7%2015.0,26.0%204.3,15.9%200.0,30.0%20-4.3,15.9%20-15.0,26.0%20-11.7,11.7%20-26.0,15.0%20-15.9,4.3%20-30.0,0.0%20-15.9,-4.3%20-26.0,-15.0%20-11.7,-11.7%20-15.0,-26.0%20-4.3,-15.9'%20fill='none'%20stroke='%237fd4de'%20stroke-opacity='.45'%20stroke-width='1.8'/%3E%3Ccircle%20r='5'%20fill='%237fd4de'%20fill-opacity='.55'/%3E%3C/g%3E%3Cg%20transform='translate(304%2080)'%3E%3Cpolygon%20points='0.0,-56.0%208.0,-29.8%2028.0,-48.5%2021.8,-21.8%2048.5,-28.0%2029.8,-8.0%2056.0,0.0%2029.8,8.0%2048.5,28.0%2021.8,21.8%2028.0,48.5%208.0,29.8%200.0,56.0%20-8.0,29.8%20-28.0,48.5%20-21.8,21.8%20-48.5,28.0%20-29.8,8.0%20-56.0,0.0%20-29.8,-8.0%20-48.5,-28.0%20-21.8,-21.8%20-28.0,-48.5%20-8.0,-29.8'%20fill='%23e8b83e'%20fill-opacity='.34'/%3E%3Cpolygon%20points='0.0,-30.0%204.3,-15.9%2015.0,-26.0%2011.7,-11.7%2026.0,-15.0%2015.9,-4.3%2030.0,0.0%2015.9,4.3%2026.0,15.0%2011.7,11.7%2015.0,26.0%204.3,15.9%200.0,30.0%20-4.3,15.9%20-15.0,26.0%20-11.7,11.7%20-26.0,15.0%20-15.9,4.3%20-30.0,0.0%20-15.9,-4.3%20-26.0,-15.0%20-11.7,-11.7%20-15.0,-26.0%20-4.3,-15.9'%20fill='none'%20stroke='%237fd4de'%20stroke-opacity='.45'%20stroke-width='1.8'/%3E%3Ccircle%20r='5'%20fill='%237fd4de'%20fill-opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
    --point-pattern:none;
    --point-pattern-size:12px;
}
/* Level 5 — Burgundy Pearl (ref 5B3E5C03) */
#board[data-level="5"] {
    --case-0:#381c15;
    --case-1:#29140f;
    --case-2:#180c09;
    --metal:199 153 82;
    --accent:#e6ad57;
    --bar-0:#422117;
    --bar-1:#331a12;
    --bar-2:#20100b;
    --field-0:#420f1c;
    --field-1:#370c17;
    --field-2:#290812;
    --glow-rgb:90 21 38;
    --shade-rgb:16 8 6;
    --lamp-rgb:255 205 170;
    --lamp-a:0.14;
    --point-a-base:#a09686;
    --point-a:#eddec7;
    --point-a-tip:#efdfc6;
    --point-b-base:#390f1a;
    --point-b:#6b1c30;
    --point-b-tip:#87444e;
    --white-0:#fffaed;
    --white-1:#f0e1cc;
    --white-2:#dec2a3;
    --white-3:#ad977f;
    --white-wall:#d7bc9e;
    --white-ring:rgba(146,128,108,0.5);
    --white-ink:rgba(177,155,131,0.55);
    --black-0:#17070b;
    --black-1:#210a0f;
    --black-2:#13060a;
    --black-3:#080305;
    --die-0:#701b2c;
    --die-1:#611726;
    --die-2:#46111c;
    --pip-0:#e0ad4c;
    --pip-1:#ffff82;
    --pip-rgb:224 173 76;
    --tray-0:#21100c;
    --tray-1:#160b08;
    --board-glow:transparent;
    --field-veil:rgba(41,8,18,0.1);
    --case-pattern:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='34'%20height='34'%20viewBox='0%200%2034%2034'%3E%3Cpath%20d='M1%2029%20C9%2017%2025%2021%2033%207'%20fill='none'%20stroke='%23e7c268'%20stroke-opacity='.65'%20stroke-width='1.7'/%3E%3Cellipse%20rx='3'%20ry='7'%20cx='11'%20cy='21'%20fill='%23e7c268'%20fill-opacity='.55'%20transform='rotate(-38%2011%2021)'/%3E%3Cellipse%20rx='3'%20ry='7'%20cx='24'%20cy='15'%20fill='%23e7c268'%20fill-opacity='.55'%20transform='rotate(38%2024%2015)'/%3E%3Ccircle%20cx='19'%20cy='26'%20r='2.2'%20fill='%23e7c268'%20fill-opacity='.7'/%3E%3Ccircle%20cx='30'%20cy='28'%20r='1.4'%20fill='%23e7c268'%20fill-opacity='.6'/%3E%3C/svg%3E");
    --case-pattern-size:34px;
    --field-pattern:none;
    --field-pattern-size:24px;
    --medallion:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='160'%20viewBox='0%200%20400%20160'%3E%3Cg%20transform='translate(96%2080)'%3E%3Cellipse%20rx='57'%20ry='63'%20fill='none'%20stroke='%23e7c268'%20stroke-opacity='.55'%20stroke-width='2.4'/%3E%3Cellipse%20rx='7.5'%20ry='17'%20cy='-17'%20fill='%23e7c268'%20fill-opacity='.4'%20transform='rotate(0)'/%3E%3Cellipse%20rx='7.5'%20ry='17'%20cy='-17'%20fill='%23e7c268'%20fill-opacity='.4'%20transform='rotate(60)'/%3E%3Cellipse%20rx='7.5'%20ry='17'%20cy='-17'%20fill='%23e7c268'%20fill-opacity='.4'%20transform='rotate(120)'/%3E%3Cellipse%20rx='7.5'%20ry='17'%20cy='-17'%20fill='%23e7c268'%20fill-opacity='.4'%20transform='rotate(180)'/%3E%3Cellipse%20rx='7.5'%20ry='17'%20cy='-17'%20fill='%23e7c268'%20fill-opacity='.4'%20transform='rotate(240)'/%3E%3Cellipse%20rx='7.5'%20ry='17'%20cy='-17'%20fill='%23e7c268'%20fill-opacity='.4'%20transform='rotate(300)'/%3E%3Ccircle%20r='6'%20fill='%23e7c268'%20fill-opacity='.55'/%3E%3Ccircle%20r='26'%20fill='none'%20stroke='%23e7c268'%20stroke-opacity='.3'%20stroke-width='1.2'/%3E%3C/g%3E%3Cg%20transform='translate(304%2080)'%3E%3Cellipse%20rx='57'%20ry='63'%20fill='none'%20stroke='%23e7c268'%20stroke-opacity='.55'%20stroke-width='2.4'/%3E%3Cellipse%20rx='7.5'%20ry='17'%20cy='-17'%20fill='%23e7c268'%20fill-opacity='.4'%20transform='rotate(0)'/%3E%3Cellipse%20rx='7.5'%20ry='17'%20cy='-17'%20fill='%23e7c268'%20fill-opacity='.4'%20transform='rotate(60)'/%3E%3Cellipse%20rx='7.5'%20ry='17'%20cy='-17'%20fill='%23e7c268'%20fill-opacity='.4'%20transform='rotate(120)'/%3E%3Cellipse%20rx='7.5'%20ry='17'%20cy='-17'%20fill='%23e7c268'%20fill-opacity='.4'%20transform='rotate(180)'/%3E%3Cellipse%20rx='7.5'%20ry='17'%20cy='-17'%20fill='%23e7c268'%20fill-opacity='.4'%20transform='rotate(240)'/%3E%3Cellipse%20rx='7.5'%20ry='17'%20cy='-17'%20fill='%23e7c268'%20fill-opacity='.4'%20transform='rotate(300)'/%3E%3Ccircle%20r='6'%20fill='%23e7c268'%20fill-opacity='.55'/%3E%3Ccircle%20r='26'%20fill='none'%20stroke='%23e7c268'%20stroke-opacity='.3'%20stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E");
    --point-pattern:none;
    --point-pattern-size:12px;
}
/* Level 6 — Art Deco Noir (ref CA69E531) */
#board[data-level="6"] {
    --case-0:#0e0e0e;
    --case-1:#0a0a0a;
    --case-2:#060606;
    --metal:224 173 76;
    --accent:#ebbd5c;
    --bar-0:#141414;
    --bar-1:#0f0f0f;
    --bar-2:#090909;
    --field-0:#121214;
    --field-1:#0d0d10;
    --field-2:#08080a;
    --glow-rgb:24 24 28;
    --shade-rgb:4 4 4;
    --lamp-rgb:255 226 170;
    --lamp-a:0.14;
    --point-a-base:#846723;
    --point-a:#d1a338;
    --point-a-tip:#d8b054;
    --point-b-base:#2a200f;
    --point-b:#4c3b1c;
    --point-b-tip:#6e5d3d;
    --white-0:#fffaeb;
    --white-1:#efe3ca;
    --white-2:#dbc7a3;
    --white-3:#ab9b7f;
    --white-wall:#d5c19e;
    --white-ring:rgba(145,131,108,0.5);
    --white-ink:rgba(175,159,131,0.55);
    --black-0:#121212;
    --black-1:#1a1a1a;
    --black-2:#0e0e0e;
    --black-3:#050505;
    --die-0:#121212;
    --die-1:#0f0f0f;
    --die-2:#0b0b0b;
    --pip-0:#e6b857;
    --pip-1:#ffff93;
    --pip-rgb:230 184 87;
    --tray-0:#080808;
    --tray-1:#060606;
    --board-glow:transparent;
    --field-veil:rgba(8,8,10,0.45);
    --case-pattern:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4%2020%20V8%20H16%20V14%20H10'%20fill='none'%20stroke='%23e7c268'%20stroke-opacity='.85'%20stroke-width='2.1'%20stroke-linecap='square'/%3E%3Ccircle%20cx='20.5'%20cy='20.5'%20r='1.2'%20fill='%23e7c268'%20fill-opacity='.7'/%3E%3C/svg%3E");
    --case-pattern-size:24px;
    --field-pattern:none;
    --field-pattern-size:24px;
    --medallion:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='160'%20viewBox='0%200%20400%20160'%3E%3Cg%20transform='translate(96%2080)'%3E%3Cline%20x1='0'%20y1='36'%20x2='-40.2'%20y2='10.8'%20stroke='%23e7c268'%20stroke-opacity='.5'%20stroke-width='2'/%3E%3Cline%20x1='0'%20y1='36'%20x2='-30.6'%20y2='-8.6'%20stroke='%23e7c268'%20stroke-opacity='.5'%20stroke-width='2'/%3E%3Cline%20x1='0'%20y1='36'%20x2='-16.5'%20y2='-21.5'%20stroke='%23e7c268'%20stroke-opacity='.5'%20stroke-width='2'/%3E%3Cline%20x1='0'%20y1='36'%20x2='0.0'%20y2='-26.0'%20stroke='%23e7c268'%20stroke-opacity='.5'%20stroke-width='2'/%3E%3Cline%20x1='0'%20y1='36'%20x2='16.5'%20y2='-21.5'%20stroke='%23e7c268'%20stroke-opacity='.5'%20stroke-width='2'/%3E%3Cline%20x1='0'%20y1='36'%20x2='30.6'%20y2='-8.6'%20stroke='%23e7c268'%20stroke-opacity='.5'%20stroke-width='2'/%3E%3Cline%20x1='0'%20y1='36'%20x2='40.2'%20y2='10.8'%20stroke='%23e7c268'%20stroke-opacity='.5'%20stroke-width='2'/%3E%3Cpath%20d='M-43.2%2020.4%20A46%2046%200%200%201%2043.2%2020.4'%20fill='none'%20stroke='%23e7c268'%20stroke-opacity='.45'%20stroke-width='1.8'/%3E%3Cpath%20d='M-31.0%2024.8%20A33%2033%200%200%201%2031.0%2024.8'%20fill='none'%20stroke='%23e7c268'%20stroke-opacity='.45'%20stroke-width='1.8'/%3E%3Ccircle%20cy='36'%20r='4.5'%20fill='%23e7c268'%20fill-opacity='.6'/%3E%3C/g%3E%3Cg%20transform='translate(304%2080)'%3E%3Cline%20x1='0'%20y1='36'%20x2='-40.2'%20y2='10.8'%20stroke='%23e7c268'%20stroke-opacity='.5'%20stroke-width='2'/%3E%3Cline%20x1='0'%20y1='36'%20x2='-30.6'%20y2='-8.6'%20stroke='%23e7c268'%20stroke-opacity='.5'%20stroke-width='2'/%3E%3Cline%20x1='0'%20y1='36'%20x2='-16.5'%20y2='-21.5'%20stroke='%23e7c268'%20stroke-opacity='.5'%20stroke-width='2'/%3E%3Cline%20x1='0'%20y1='36'%20x2='0.0'%20y2='-26.0'%20stroke='%23e7c268'%20stroke-opacity='.5'%20stroke-width='2'/%3E%3Cline%20x1='0'%20y1='36'%20x2='16.5'%20y2='-21.5'%20stroke='%23e7c268'%20stroke-opacity='.5'%20stroke-width='2'/%3E%3Cline%20x1='0'%20y1='36'%20x2='30.6'%20y2='-8.6'%20stroke='%23e7c268'%20stroke-opacity='.5'%20stroke-width='2'/%3E%3Cline%20x1='0'%20y1='36'%20x2='40.2'%20y2='10.8'%20stroke='%23e7c268'%20stroke-opacity='.5'%20stroke-width='2'/%3E%3Cpath%20d='M-43.2%2020.4%20A46%2046%200%200%201%2043.2%2020.4'%20fill='none'%20stroke='%23e7c268'%20stroke-opacity='.45'%20stroke-width='1.8'/%3E%3Cpath%20d='M-31.0%2024.8%20A33%2033%200%200%201%2031.0%2024.8'%20fill='none'%20stroke='%23e7c268'%20stroke-opacity='.45'%20stroke-width='1.8'/%3E%3Ccircle%20cy='36'%20r='4.5'%20fill='%23e7c268'%20fill-opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
    --point-pattern:none;
    --point-pattern-size:12px;
}
/* Level 7 — Maki-e Noir (ref CA96D229) */
#board[data-level="7"] {
    --case-0:#0e0b0b;
    --case-1:#0a0808;
    --case-2:#060505;
    --metal:219 168 76;
    --accent:#e6b257;
    --bar-0:#171411;
    --bar-1:#120f0d;
    --bar-2:#0b0908;
    --field-0:#14120f;
    --field-1:#100d0c;
    --field-2:#0a0808;
    --glow-rgb:28 24 21;
    --shade-rgb:4 3 3;
    --lamp-rgb:255 222 160;
    --lamp-a:0.14;
    --point-a-base:#87672a;
    --point-a:#d6a342;
    --point-a-tip:#dcb05c;
    --point-b-base:#4c3516;
    --point-b:#855c26;
    --point-b-tip:#9b7745;
    --white-0:#fff7e0;
    --white-1:#eeddb9;
    --white-2:#d9bd8a;
    --white-3:#a9936b;
    --white-wall:#d2b786;
    --white-ring:rgba(143,125,91,0.5);
    --white-ink:rgba(173,151,110,0.55);
    --black-0:#1b1510;
    --black-1:#261f17;
    --black-2:#15110d;
    --black-3:#080505;
    --die-0:var(--gold);
    --die-1:var(--gold-deep);
    --die-2:var(--gold-deep);
    --pip-0:#140f08;
    --pip-1:#231a0d;
    --pip-rgb:20 15 8;
    --tray-0:#080606;
    --tray-1:#060404;
    --board-glow:transparent;
    --field-veil:rgba(10,8,8,0.45);
    --case-pattern:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='58'%20height='58'%20viewBox='0%200%2058%2058'%3E%3Cellipse%20rx='2.8'%20ry='8.5'%20cx='18'%20cy='24'%20fill='%23e7c268'%20fill-opacity='.5'%20transform='rotate(-32%2018%2032)'/%3E%3Cellipse%20rx='2.8'%20ry='8.5'%20cx='18'%20cy='24'%20fill='%23e7c268'%20fill-opacity='.5'%20transform='rotate(0%2018%2032)'/%3E%3Cellipse%20rx='2.8'%20ry='8.5'%20cx='18'%20cy='24'%20fill='%23e7c268'%20fill-opacity='.5'%20transform='rotate(32%2018%2032)'/%3E%3Ccircle%20cx='42'%20cy='13'%20r='1.6'%20fill='%23e7c268'%20fill-opacity='.7'/%3E%3Ccircle%20cx='49'%20cy='36'%20r='1.3'%20fill='%23e7c268'%20fill-opacity='.6'/%3E%3Ccircle%20cx='45'%20cy='47'%20r='3'%20fill='none'%20stroke='%23e7c268'%20stroke-opacity='.5'%20stroke-width='1'/%3E%3Ccircle%20cx='8'%20cy='8'%20r='1.1'%20fill='%23e7c268'%20fill-opacity='.55'/%3E%3C/svg%3E");
    --case-pattern-size:58px;
    --field-pattern:none;
    --field-pattern-size:24px;
    --medallion:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='160'%20viewBox='0%200%20400%20160'%3E%3Cg%20transform='translate(96%2080)'%3E%3Ccircle%20r='43'%20fill='none'%20stroke='%23e7c268'%20stroke-opacity='.6'%20stroke-width='2.6'/%3E%3Ccircle%20r='37'%20fill='none'%20stroke='%23e7c268'%20stroke-opacity='.32'%20stroke-width='1.2'/%3E%3Ccircle%20cx='9.2'%20cy='9.2'%20r='10.5'%20fill='%23e7c268'%20fill-opacity='.42'/%3E%3Ccircle%20cx='-9.2'%20cy='9.2'%20r='10.5'%20fill='%23e7c268'%20fill-opacity='.42'/%3E%3Ccircle%20cx='-9.2'%20cy='-9.2'%20r='10.5'%20fill='%23e7c268'%20fill-opacity='.42'/%3E%3Ccircle%20cx='9.2'%20cy='-9.2'%20r='10.5'%20fill='%23e7c268'%20fill-opacity='.42'/%3E%3Ccircle%20r='4.5'%20fill='%23e7c268'%20fill-opacity='.65'/%3E%3C/g%3E%3Cg%20transform='translate(304%2080)'%3E%3Ccircle%20r='43'%20fill='none'%20stroke='%23e7c268'%20stroke-opacity='.6'%20stroke-width='2.6'/%3E%3Ccircle%20r='37'%20fill='none'%20stroke='%23e7c268'%20stroke-opacity='.32'%20stroke-width='1.2'/%3E%3Ccircle%20cx='9.2'%20cy='9.2'%20r='10.5'%20fill='%23e7c268'%20fill-opacity='.42'/%3E%3Ccircle%20cx='-9.2'%20cy='9.2'%20r='10.5'%20fill='%23e7c268'%20fill-opacity='.42'/%3E%3Ccircle%20cx='-9.2'%20cy='-9.2'%20r='10.5'%20fill='%23e7c268'%20fill-opacity='.42'/%3E%3Ccircle%20cx='9.2'%20cy='-9.2'%20r='10.5'%20fill='%23e7c268'%20fill-opacity='.42'/%3E%3Ccircle%20r='4.5'%20fill='%23e7c268'%20fill-opacity='.65'/%3E%3C/g%3E%3C/svg%3E");
    --point-pattern:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='10'%20viewBox='0%200%2010%2010'%3E%3Cpath%20d='M2%203%20L6%202%20M4%208%20L8%207'%20stroke='%232a1a05'%20stroke-opacity='.25'%20stroke-width='1.1'/%3E%3C/svg%3E");
    --point-pattern-size:10px;
}
/* Level 8 — Emerald Khatam (ref E471C1AA) */
#board[data-level="8"] {
    --case-0:#125b38;
    --case-1:#0d4229;
    --case-2:#082818;
    --metal:204 158 76;
    --accent:#e0ad52;
    --bar-0:#176a42;
    --bar-1:#125233;
    --bar-2:#0b3320;
    --field-0:#1a5c38;
    --field-1:#154e2f;
    --field-2:#0f3d24;
    --glow-rgb:34 124 76;
    --shade-rgb:5 25 16;
    --lamp-rgb:255 226 170;
    --lamp-a:0.15;
    --point-a-base:#998f70;
    --point-a:#e6d6a8;
    --point-a-tip:#e9d9ad;
    --point-b-base:#3c2b11;
    --point-b:#6b4c1f;
    --point-b-tip:#876b3f;
    --white-0:#fffcf2;
    --white-1:#eee6cf;
    --white-2:#d9c9a3;
    --white-3:#a99d7f;
    --white-wall:#d2c39e;
    --white-ring:rgba(143,133,108,0.5);
    --white-ink:rgba(173,161,131,0.55);
    --black-0:#0b1910;
    --black-1:#0f2417;
    --black-2:#0a170f;
    --black-3:#050d08;
    --die-0:#125935;
    --die-1:#0f4c2e;
    --die-2:#0b3721;
    --pip-0:#e6bd5c;
    --pip-1:#ffff9c;
    --pip-rgb:230 189 92;
    --tray-0:#0a3521;
    --tray-1:#072416;
    --board-glow:transparent;
    --field-veil:rgba(15,61,36,0.15);
    --case-pattern:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%3E%3Cpath%20d='M14%201.5%20L26.5%2014%20L14%2026.5%20L1.5%2014%20Z'%20fill='none'%20stroke='%23e7c268'%20stroke-opacity='.75'%20stroke-width='1.6'/%3E%3Cpath%20d='M14%207.5%20L20.5%2014%20L14%2020.5%20L7.5%2014%20Z'%20fill='none'%20stroke='%23e8dcc0'%20stroke-opacity='.6'%20stroke-width='1.1'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'%20fill='%23e7c268'%20fill-opacity='.8'/%3E%3Ccircle%20cx='0'%20cy='0'%20r='1.3'%20fill='%23e8dcc0'%20fill-opacity='.6'/%3E%3Ccircle%20cx='28'%20cy='0'%20r='1.3'%20fill='%23e8dcc0'%20fill-opacity='.6'/%3E%3Ccircle%20cx='0'%20cy='28'%20r='1.3'%20fill='%23e8dcc0'%20fill-opacity='.6'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='1.3'%20fill='%23e8dcc0'%20fill-opacity='.6'/%3E%3C/svg%3E");
    --case-pattern-size:26px;
    --field-pattern:none;
    --field-pattern-size:24px;
    --medallion:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='160'%20viewBox='0%200%20400%20160'%3E%3Cg%20transform='translate(96%2080)'%3E%3Cg%20fill='%23e7c268'%20fill-opacity='.52'%3E%3Crect%20x='-9'%20y='-31'%20width='18'%20height='62'/%3E%3Crect%20x='-31'%20y='-9'%20width='62'%20height='18'/%3E%3Crect%20x='-16'%20y='-16'%20width='32'%20height='32'/%3E%3Crect%20x='-24'%20y='-24'%20width='13'%20height='13'/%3E%3Crect%20x='11'%20y='-24'%20width='13'%20height='13'/%3E%3Crect%20x='-24'%20y='11'%20width='13'%20height='13'/%3E%3Crect%20x='11'%20y='11'%20width='13'%20height='13'/%3E%3C/g%3E%3Cg%20fill='%230d3a22'%20fill-opacity='.45'%3E%3Crect%20x='-4.5'%20y='-19'%20width='9'%20height='38'/%3E%3Crect%20x='-19'%20y='-4.5'%20width='38'%20height='9'/%3E%3C/g%3E%3Ccircle%20r='47'%20fill='none'%20stroke='%23e7c268'%20stroke-opacity='.35'%20stroke-width='1.6'/%3E%3C/g%3E%3Cg%20transform='translate(304%2080)'%3E%3Cg%20fill='%23e7c268'%20fill-opacity='.52'%3E%3Crect%20x='-9'%20y='-31'%20width='18'%20height='62'/%3E%3Crect%20x='-31'%20y='-9'%20width='62'%20height='18'/%3E%3Crect%20x='-16'%20y='-16'%20width='32'%20height='32'/%3E%3Crect%20x='-24'%20y='-24'%20width='13'%20height='13'/%3E%3Crect%20x='11'%20y='-24'%20width='13'%20height='13'/%3E%3Crect%20x='-24'%20y='11'%20width='13'%20height='13'/%3E%3Crect%20x='11'%20y='11'%20width='13'%20height='13'/%3E%3C/g%3E%3Cg%20fill='%230d3a22'%20fill-opacity='.45'%3E%3Crect%20x='-4.5'%20y='-19'%20width='9'%20height='38'/%3E%3Crect%20x='-19'%20y='-4.5'%20width='38'%20height='9'/%3E%3C/g%3E%3Ccircle%20r='47'%20fill='none'%20stroke='%23e7c268'%20stroke-opacity='.35'%20stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E");
    --point-pattern:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%3E%3Cpath%20d='M7%201.5%20L12.5%207%20L7%2012.5%20L1.5%207%20Z'%20fill='none'%20stroke='%233a2a10'%20stroke-opacity='.30'%20stroke-width='1'/%3E'%3C/svg%3E");
    --point-pattern-size:14px;
}
/* Level 9 — Royal Emerald (ref E471C1AA, richer) */
#board[data-level="9"] {
    --case-0:#0e462a;
    --case-1:#0a331f;
    --case-2:#061f12;
    --metal:235 184 82;
    --accent:#f2c25c;
    --bar-0:#115332;
    --bar-1:#0d4026;
    --bar-2:#082818;
    --field-0:#144c2e;
    --field-1:#104026;
    --field-2:#0a301c;
    --glow-rgb:28 103 62;
    --shade-rgb:4 19 12;
    --lamp-rgb:255 230 175;
    --lamp-a:0.17;
    --point-a-base:#8e6f2c;
    --point-a:#dead45;
    --point-a-tip:#e2b95e;
    --point-b-base:#9e9375;
    --point-b:#ebdbad;
    --point-b-tip:#edddb1;
    --white-0:#fffcf0;
    --white-1:#f0e2c3;
    --white-2:#dec28c;
    --white-3:#ad976d;
    --white-wall:#d7bc88;
    --white-ring:rgba(146,128,93,0.5);
    --white-ink:rgba(177,155,112,0.55);
    --black-0:#09150e;
    --black-1:#0d1f14;
    --black-2:#07130c;
    --black-3:#030a05;
    --die-0:#fbbd4d;
    --die-1:#d9a342;
    --die-2:#9c7630;
    --pip-0:#0d4226;
    --pip-1:#167141;
    --pip-rgb:13 66 38;
    --tray-0:#082918;
    --tray-1:#061c11;
    --board-glow:rgba(var(--acc),.14);
    --field-veil:rgba(10,48,28,0.2);
    --case-pattern:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%3E%3Cpath%20d='M14%201.5%20L26.5%2014%20L14%2026.5%20L1.5%2014%20Z'%20fill='none'%20stroke='%23f2cd72'%20stroke-opacity='.75'%20stroke-width='1.6'/%3E%3Cpath%20d='M14%207.5%20L20.5%2014%20L14%2020.5%20L7.5%2014%20Z'%20fill='none'%20stroke='%23e7c268'%20stroke-opacity='.6'%20stroke-width='1.1'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'%20fill='%23f2cd72'%20fill-opacity='.8'/%3E%3Ccircle%20cx='0'%20cy='0'%20r='1.3'%20fill='%23e7c268'%20fill-opacity='.6'/%3E%3Ccircle%20cx='28'%20cy='0'%20r='1.3'%20fill='%23e7c268'%20fill-opacity='.6'/%3E%3Ccircle%20cx='0'%20cy='28'%20r='1.3'%20fill='%23e7c268'%20fill-opacity='.6'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='1.3'%20fill='%23e7c268'%20fill-opacity='.6'/%3E%3C/svg%3E");
    --case-pattern-size:28px;
    --field-pattern:none;
    --field-pattern-size:24px;
    --medallion:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='160'%20viewBox='0%200%20400%20160'%3E%3Cg%20transform='translate(96%2080)'%3E%3Cg%20fill='%23f2cd72'%20fill-opacity='.52'%3E%3Crect%20x='-9'%20y='-31'%20width='18'%20height='62'/%3E%3Crect%20x='-31'%20y='-9'%20width='62'%20height='18'/%3E%3Crect%20x='-16'%20y='-16'%20width='32'%20height='32'/%3E%3Crect%20x='-24'%20y='-24'%20width='13'%20height='13'/%3E%3Crect%20x='11'%20y='-24'%20width='13'%20height='13'/%3E%3Crect%20x='-24'%20y='11'%20width='13'%20height='13'/%3E%3Crect%20x='11'%20y='11'%20width='13'%20height='13'/%3E%3C/g%3E%3Cg%20fill='%230a2f1c'%20fill-opacity='.45'%3E%3Crect%20x='-4.5'%20y='-19'%20width='9'%20height='38'/%3E%3Crect%20x='-19'%20y='-4.5'%20width='38'%20height='9'/%3E%3C/g%3E%3Ccircle%20r='47'%20fill='none'%20stroke='%23f2cd72'%20stroke-opacity='.35'%20stroke-width='1.6'/%3E%3C/g%3E%3Cg%20transform='translate(304%2080)'%3E%3Cg%20fill='%23f2cd72'%20fill-opacity='.52'%3E%3Crect%20x='-9'%20y='-31'%20width='18'%20height='62'/%3E%3Crect%20x='-31'%20y='-9'%20width='62'%20height='18'/%3E%3Crect%20x='-16'%20y='-16'%20width='32'%20height='32'/%3E%3Crect%20x='-24'%20y='-24'%20width='13'%20height='13'/%3E%3Crect%20x='11'%20y='-24'%20width='13'%20height='13'/%3E%3Crect%20x='-24'%20y='11'%20width='13'%20height='13'/%3E%3Crect%20x='11'%20y='11'%20width='13'%20height='13'/%3E%3C/g%3E%3Cg%20fill='%230a2f1c'%20fill-opacity='.45'%3E%3Crect%20x='-4.5'%20y='-19'%20width='9'%20height='38'/%3E%3Crect%20x='-19'%20y='-4.5'%20width='38'%20height='9'/%3E%3C/g%3E%3Ccircle%20r='47'%20fill='none'%20stroke='%23f2cd72'%20stroke-opacity='.35'%20stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E");
    --point-pattern:none;
    --point-pattern-size:12px;
}
/* Level 10 — Takhte Royalty (ref brand royalty (emerald-informed)) */
#board[data-level="10"] {
    --case-0:#23150b;
    --case-1:#1a0f08;
    --case-2:#0f0905;
    --metal:250 204 92;
    --accent:#ffd666;
    --bar-0:#2b1b0d;
    --bar-1:#21140a;
    --bar-2:#150d06;
    --field-0:#1f4030;
    --field-1:#173224;
    --field-2:#0d2114;
    --glow-rgb:41 86 65;
    --shade-rgb:10 6 3;
    --lamp-rgb:255 222 160;
    --lamp-a:0.17;
    --point-a-base:#896b2a;
    --point-a:#d9a842;
    --point-a-tip:#deb55c;
    --point-b-base:#50381f;
    --point-b:#8a6136;
    --point-b-tip:#9f7b52;
    --white-0:#fffcf5;
    --white-1:#ede6d7;
    --white-2:#d6c9b2;
    --white-3:#a79d8b;
    --white-wall:#d0c3ad;
    --white-ring:rgba(141,133,118,0.5);
    --white-ink:rgba(171,161,143,0.55);
    --black-0:#121912;
    --black-1:#1a241a;
    --black-2:#0e140e;
    --black-3:#050805;
    --die-0:var(--gold);
    --die-1:var(--gold-deep);
    --die-2:var(--gold-deep);
    --pip-0:#331f0a;
    --pip-1:#573411;
    --pip-rgb:51 31 10;
    --tray-0:#140c06;
    --tray-1:#0e0804;
    --board-glow:rgba(var(--acc),.20);
    --field-veil:rgba(13,33,20,0.15);
    --case-pattern:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%3E%3Cpath%20d='M14%201.5%20L26.5%2014%20L14%2026.5%20L1.5%2014%20Z'%20fill='none'%20stroke='%23f2cd72'%20stroke-opacity='.75'%20stroke-width='1.6'/%3E%3Cpath%20d='M14%207.5%20L20.5%2014%20L14%2020.5%20L7.5%2014%20Z'%20fill='none'%20stroke='%23c9a227'%20stroke-opacity='.6'%20stroke-width='1.1'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'%20fill='%23f2cd72'%20fill-opacity='.8'/%3E%3Ccircle%20cx='0'%20cy='0'%20r='1.3'%20fill='%23c9a227'%20fill-opacity='.6'/%3E%3Ccircle%20cx='28'%20cy='0'%20r='1.3'%20fill='%23c9a227'%20fill-opacity='.6'/%3E%3Ccircle%20cx='0'%20cy='28'%20r='1.3'%20fill='%23c9a227'%20fill-opacity='.6'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='1.3'%20fill='%23c9a227'%20fill-opacity='.6'/%3E%3C/svg%3E");
    --case-pattern-size:28px;
    --field-pattern:none;
    --field-pattern-size:24px;
    --medallion:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='160'%20viewBox='0%200%20400%20160'%3E%3Cg%20transform='translate(96%2080)'%3E%3Ccircle%20r='31'%20fill='none'%20stroke='%23f2cd72'%20stroke-opacity='.6'%20stroke-width='3'/%3E%3Ccircle%20r='23'%20fill='none'%20stroke='%23f2cd72'%20stroke-opacity='.4'%20stroke-width='1.6'/%3E%3Cline%20x1='37.0'%20y1='0.0'%20x2='52.0'%20y2='0.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Cline%20x1='32.0'%20y1='18.5'%20x2='45.0'%20y2='26.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Cline%20x1='18.5'%20y1='32.0'%20x2='26.0'%20y2='45.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Cline%20x1='0.0'%20y1='37.0'%20x2='0.0'%20y2='52.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Cline%20x1='-18.5'%20y1='32.0'%20x2='-26.0'%20y2='45.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Cline%20x1='-32.0'%20y1='18.5'%20x2='-45.0'%20y2='26.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Cline%20x1='-37.0'%20y1='0.0'%20x2='-52.0'%20y2='0.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Cline%20x1='-32.0'%20y1='-18.5'%20x2='-45.0'%20y2='-26.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Cline%20x1='-18.5'%20y1='-32.0'%20x2='-26.0'%20y2='-45.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Cline%20x1='-0.0'%20y1='-37.0'%20x2='-0.0'%20y2='-52.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Cline%20x1='18.5'%20y1='-32.0'%20x2='26.0'%20y2='-45.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Cline%20x1='32.0'%20y1='-18.5'%20x2='45.0'%20y2='-26.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Ccircle%20r='5'%20fill='%23f2cd72'%20fill-opacity='.65'/%3E%3C/g%3E%3Cg%20transform='translate(304%2080)'%3E%3Ccircle%20r='31'%20fill='none'%20stroke='%23f2cd72'%20stroke-opacity='.6'%20stroke-width='3'/%3E%3Ccircle%20r='23'%20fill='none'%20stroke='%23f2cd72'%20stroke-opacity='.4'%20stroke-width='1.6'/%3E%3Cline%20x1='37.0'%20y1='0.0'%20x2='52.0'%20y2='0.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Cline%20x1='32.0'%20y1='18.5'%20x2='45.0'%20y2='26.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Cline%20x1='18.5'%20y1='32.0'%20x2='26.0'%20y2='45.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Cline%20x1='0.0'%20y1='37.0'%20x2='0.0'%20y2='52.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Cline%20x1='-18.5'%20y1='32.0'%20x2='-26.0'%20y2='45.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Cline%20x1='-32.0'%20y1='18.5'%20x2='-45.0'%20y2='26.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Cline%20x1='-37.0'%20y1='0.0'%20x2='-52.0'%20y2='0.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Cline%20x1='-32.0'%20y1='-18.5'%20x2='-45.0'%20y2='-26.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Cline%20x1='-18.5'%20y1='-32.0'%20x2='-26.0'%20y2='-45.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Cline%20x1='-0.0'%20y1='-37.0'%20x2='-0.0'%20y2='-52.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Cline%20x1='18.5'%20y1='-32.0'%20x2='26.0'%20y2='-45.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Cline%20x1='32.0'%20y1='-18.5'%20x2='45.0'%20y2='-26.0'%20stroke='%23f2cd72'%20stroke-opacity='.55'%20stroke-width='3'/%3E%3Ccircle%20r='5'%20fill='%23f2cd72'%20fill-opacity='.65'/%3E%3C/g%3E%3C/svg%3E");
    --point-pattern:none;
    --point-pattern-size:12px;
}

/* Gold pinstripes inlaid along the field's inner edge — a bright
   hairline and its fainter twin, tucked under the points. */
#points-grid::before,#points-grid::after{
  content:"";position:absolute;pointer-events:none;border-radius:7px;z-index:-1;
}
#points-grid::before{inset:4px;border:1px solid rgb(var(--metal)/.26)}
#points-grid::after{inset:7px;border:1px solid rgb(var(--metal)/.12)}
.point{position:relative;cursor:pointer;min-height:0}
.point .tri{position:absolute;left:50%;transform:translateX(-50%);width:86%;height:88%;pointer-events:none}
/* Carved point, the app's three-stop read: a deep base where it
   meets the rail, the body colour, a lit tip. */
.point.top .tri{top:0;clip-path:polygon(0 0,100% 0,50% 100%);
  background:var(--point-pattern), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.13%200.009'%20numOctaves='3'%20seed='19'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.1%20%200%200%200%200%200.05%20%200%200%200%200%200.01%20%200%200%201%200%200'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='table'%20tableValues='0%200%200.5%200%200%200.38%200%200%200'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.1%20%200%200%200%200%200.05%20%200%200%200%200%200.01%20%200%200%200%200.6%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20seed='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200.62%200%20-0.3'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"), linear-gradient(180deg,var(--point-a-base),var(--point-a) 55%,var(--point-a-tip))}
.point.bottom .tri{bottom:0;clip-path:polygon(50% 0,100% 100%,0 100%);
  background:var(--point-pattern), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.13%200.009'%20numOctaves='3'%20seed='19'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.1%20%200%200%200%200%200.05%20%200%200%200%200%200.01%20%200%200%201%200%200'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='table'%20tableValues='0%200%200.5%200%200%200.38%200%200%200'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.1%20%200%200%200%200%200.05%20%200%200%200%200%200.01%20%200%200%200%200.6%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20seed='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200.62%200%20-0.3'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"), linear-gradient(0deg,var(--point-a-base),var(--point-a) 55%,var(--point-a-tip))}
.point.alt .tri{background:var(--point-pattern), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.13%200.009'%20numOctaves='3'%20seed='19'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.1%20%200%200%200%200%200.05%20%200%200%200%200%200.01%20%200%200%201%200%200'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='table'%20tableValues='0%200%200.5%200%200%200.38%200%200%200'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.1%20%200%200%200%200%200.05%20%200%200%200%200%200.01%20%200%200%200%200.6%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20seed='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200.62%200%20-0.3'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"), linear-gradient(180deg,var(--point-b-base),var(--point-b) 55%,var(--point-b-tip))}
.point.bottom.alt .tri{background:var(--point-pattern), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.13%200.009'%20numOctaves='3'%20seed='19'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.1%20%200%200%200%200%200.05%20%200%200%200%200%200.01%20%200%200%201%200%200'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='table'%20tableValues='0%200%200.5%200%200%200.38%200%200%200'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.1%20%200%200%200%200%200.05%20%200%200%200%200%200.01%20%200%200%200%200.6%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20seed='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200.62%200%20-0.3'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"), linear-gradient(0deg,var(--point-b-base),var(--point-b) 55%,var(--point-b-tip))}
.point.top .tri,.point.bottom .tri{background-size:var(--point-pattern-size), auto, auto, auto;background-repeat:repeat, no-repeat, no-repeat, no-repeat}
/* Inner shadow hugging the base — the point reads cut into the field. */
.point .tri::before{content:"";position:absolute;inset:0}
.point.top .tri::before{clip-path:polygon(0 0,100% 0,50% 100%);
  background:linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,0) 42%)}
.point.bottom .tri::before{clip-path:polygon(50% 0,100% 100%,0 100%);
  background:linear-gradient(0deg, rgba(0,0,0,.34), rgba(0,0,0,0) 42%)}
/* A ridge of light down the spine. */
.point .tri::after{content:"";position:absolute;inset:0}
.point.top .tri::after{clip-path:polygon(43% 0,57% 0,50% 100%);
  background:linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.03))}
.point.bottom .tri::after{clip-path:polygon(50% 0,57% 100%,43% 100%);
  background:linear-gradient(0deg, rgba(255,255,255,.17), rgba(255,255,255,.03))}
.point.selected .tri{filter:brightness(1.45) drop-shadow(0 0 8px rgba(var(--acc),.8))}
.point .stack{position:absolute;left:0;right:0;display:flex;align-items:center;flex-direction:column;pointer-events:none}
.point.top .stack{top:2px}
.point.bottom .stack{bottom:2px;flex-direction:column-reverse}
/* Beveled checker, layered like the app's: a lit crown, a rim
   ring, a carved inner ring, a specular kiss top-left, and a
   cast shadow that grounds it. Stack spacing (the 2px breath,
   or the >5 overlap) is set per-disc by app.js, which measures
   the real point height in the browser. */
.checker{
  width:58%;width:4.91cqw;aspect-ratio:1;border-radius:50%;flex:none;position:relative;
  display:grid;place-items:center;font-size:.78rem;font-weight:800;
}
/* The recessed centre disc, turned on a lathe: concentric
   grooves catch the light differently on pearl and obsidian. */
.checker::before{content:"";position:absolute;inset:17%;border-radius:50%;pointer-events:none;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.28), inset 0 2px 3px rgba(0,0,0,.18),
    inset 0 1px 1px rgba(255,255,255,.25)}
.checker.white::before{background:
    radial-gradient(circle at 42% 36%, rgba(255,255,255,.5), rgba(255,255,255,0) 62%),
    repeating-radial-gradient(circle at 50% 50%, rgb(var(--white-wall)/0) 0 7px,
      rgb(var(--white-wall)/.09) 7px 8px, rgba(255,255,255,.07) 8px 9px, rgb(var(--white-wall)/0) 9px 15px)}
.checker.black::before{background:
    radial-gradient(circle at 42% 36%, rgba(255,255,255,.16), rgba(255,255,255,0) 62%),
    repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0 7px,
      rgba(0,0,0,.22) 7px 8px, rgb(var(--metal)/.08) 8px 9px, rgba(0,0,0,0) 9px 15px)}
.checker::after{content:"";position:absolute;width:32%;height:17%;left:16%;top:10%;border-radius:50%;
  pointer-events:none;filter:blur(1px);transform:rotate(-16deg);
  background:radial-gradient(closest-side, rgba(255,255,255,.7), rgba(255,255,255,0))}
.checker.white{background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.015%200.026'%20numOctaves='3'%20seed='13'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%201%20%200%200%200%200%200.94%20%200%200%200%200%200.8%20%200%200%200.7%200%20-0.13'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.008%200.02'%20numOctaves='3'%20seed='41'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%201%200%200%200%200%200.92%200%200%200%200%200.74%200%200%200%200.85%20-0.22'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23t%29'/%3E%3C/svg%3E"),
    conic-gradient(from 215deg at 36% 30%, rgba(255,255,255,0) 0deg, rgba(255,196,160,.34) 40deg,
      rgba(178,226,196,.30) 95deg, rgba(255,238,190,.38) 150deg, rgba(255,255,255,0) 205deg),
    radial-gradient(circle at 34% 28%, var(--white-0), var(--white-1) 42%, var(--white-2) 78%, var(--white-3));
  color:var(--white-ink);
  box-shadow:0 2px 3px rgba(0,0,0,.55), 2px 7px 13px rgba(0,0,0,.5),
    inset 0 6px 6px -4px rgba(255,255,255,.85),
    inset 0 -11px 11px -3px rgb(var(--white-wall)/.68), inset 0 2px 3px rgba(255,255,255,.75),
    inset 0 -6px 9px rgb(var(--white-wall)/.55), inset -4px -7px 9px -3px rgb(var(--white-wall)/.38),
    inset 0 0 0 3px rgb(var(--white-ring)/.6),
    0 0 0 1px rgb(var(--white-wall)/.30)}
.checker.black{background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.02%200.03'%20numOctaves='3'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.055%200%200%200%200%200.05%200%200%200%200%200.045%200%200%200%200.6%20-0.06'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23t%29'/%3E%3C/svg%3E"),
    radial-gradient(circle at 34% 28%, var(--black-0), var(--black-1) 42%, var(--black-2) 78%, var(--black-3));
  color:rgb(var(--metal));
  box-shadow:0 2px 3px rgba(0,0,0,.62), 2px 7px 13px rgba(0,0,0,.6),
    inset 0 6px 6px -4px rgba(255,255,255,.38),
    inset 0 -11px 11px -3px rgba(0,0,0,.88), inset 0 2px 3px rgba(255,255,255,.3),
    inset 0 -6px 9px rgba(0,0,0,.8), inset -4px -7px 9px -3px rgba(0,0,0,.6),
    inset 0 0 0 3px rgb(var(--metal)/.68),
    0 0 0 1px rgba(0,0,0,.5)}
.checker.black::after{opacity:.9;
  background:radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0))}
/* No two stones are cut alike: a whisper of per-checker variation
   in tone, so a stack reads as real pieces, not clones. */
.point .stack .checker.white:nth-child(2n),.bar-slot .checker.white:nth-child(2n){filter:brightness(1.035) hue-rotate(-7deg)}
.point .stack .checker.white:nth-child(3n),.bar-slot .checker.white:nth-child(3n){filter:brightness(.98) hue-rotate(6deg) saturate(1.05)}
.point .stack .checker.black:nth-child(2n),.bar-slot .checker.black:nth-child(2n){filter:brightness(1.13)}
.point .stack .checker.black:nth-child(3n),.bar-slot .checker.black:nth-child(3n){filter:brightness(.93)}
.point .stack .checker:nth-child(2n),.bar-slot .checker:nth-child(2n){background-position:14px 9px, -10px 6px, 0 0, 0 0}
.point .stack .checker:nth-child(3n),.bar-slot .checker:nth-child(3n){background-position:-12px 14px, 8px -8px, 0 0, 0 0}
.point .stack .checker:nth-child(4n),.bar-slot .checker:nth-child(4n){background-position:6px -12px, 12px 12px, 0 0, 0 0}
.checker .count-badge{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.point .dest-dot,.bar-slot .dest-dot,.tray .dest-dot{
  position:absolute;width:22px;height:22px;border-radius:50%;z-index:6;cursor:pointer;
  background:radial-gradient(circle,var(--gold-hi),var(--gold-deep));
  box-shadow:0 0 14px 5px rgba(var(--acc),.75);animation:pulse 1.1s ease-in-out infinite;
  left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:auto;
}
.bar-col{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='480'%20height='480'%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.007%200.14'%20numOctaves='4'%20seed='11'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%201%200%200'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='table'%20tableValues='0%200%200.55%200%200%200.4%200%200%200.62%200%200%200'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200.72%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"), linear-gradient(180deg,var(--bar-0),var(--bar-1) 60%,var(--bar-2));border-radius:6px;padding:4px 0;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),
    inset 7px 0 12px -5px rgba(0,0,0,.78), inset -7px 0 12px -5px rgba(0,0,0,.78),
    inset 0 12px 16px -8px rgba(0,0,0,.62), inset 0 -12px 16px -8px rgba(0,0,0,.62),
    inset 0 2px 2px rgba(255,220,160,.14), 0 0 16px rgba(0,0,0,.4)}
.bar-col.bottom{justify-content:flex-end}
/* Brass hinge plate where the top half meets the centre. */
.bar-col.top::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:3px;
  width:66%;height:9px;border-radius:3px;pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, var(--acc-hex-hi) 0 1.8px, #8a6524 2.7px, rgba(0,0,0,.4) 3.4px, rgba(0,0,0,0) 4.2px),
    radial-gradient(circle at 22% 50%, rgba(var(--acc-hi),.95) 0 .7px, #4a3512 .8px 1.7px, rgba(0,0,0,.55) 2.2px, rgba(0,0,0,0) 3px),
    radial-gradient(circle at 78% 50%, rgba(var(--acc-hi),.95) 0 .7px, #4a3512 .8px 1.7px, rgba(0,0,0,.55) 2.2px, rgba(0,0,0,0) 3px),
    linear-gradient(180deg,color-mix(in srgb, rgb(var(--metal)) 78%, #fff),color-mix(in srgb, rgb(var(--metal)) 72%, #000));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.5)}
.bar-slot{position:relative;width:100%;flex:1;display:flex;flex-direction:column;align-items:center}
.bar-col.top .bar-slot{justify-content:flex-end}
.bar-col.bottom .bar-slot{justify-content:flex-start}
.bar-col .checker{width:86%;width:3.9cqw}
#trays{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;width:86px}
.tray{position:relative;flex:1;border-radius:10px;border:1px solid var(--hairline);cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='turbulence'%20baseFrequency='0.16'%20numOctaves='3'%20seed='8'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200.9%20-0.3'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='gamma'%20amplitude='1'%20exponent='1.3'%20offset='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20seed='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200.62%200%20-0.3'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"), linear-gradient(180deg,var(--tray-0),var(--tray-1));
  box-shadow:inset 0 2px 8px rgba(0,0,0,.6), inset 0 0 0 1px rgba(var(--acc),.10);
  display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:4px;padding:8px 4px}
.tray-label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.tray-count{font-size:1.3rem;font-weight:800;color:var(--gold)}
/* The borne-off pile (Sasan, 2026-11-02: "trays be like the
   game — moving the checkers into the tray, shows the
   checkers from the top"): real full-size checkers, face-up,
   piled in the well — the first borne off at the bottom,
   each new one landing on top of the pile. The old 14px
   mini dots are gone. Disc positions (bottom offsets) are
   set by renderTray so 15 always fit the well. Because the
   pile uses real .checker discs, the move glide flies a
   borne-off checker into the tray and onto the pile. */
.tray .tray-stack{position:relative;flex:1;width:100%}
/* Centred by margin, not transform, so the move glide's
   transform flight is never fighting a centring transform. */
.tray .tray-stack .checker{position:absolute;left:50%;margin-left:-31px;
  width:62px;height:62px}

.game-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:4px;flex-wrap:wrap;min-height:42px;flex:none}
.dice-left{color:var(--muted);font-size:.9rem}

/* ---------- dice on the board ----------
   The pair lives on the field itself, centre of the right half,
   on the ROLLER's side (bottom = mine, top = theirs) — the
   app's placement. Each die is a true CSS cube: six pip faces,
   the app's Classic Gold skin (gold face, walnut pips), the
   app's resting tilts (-5° / +6°). A roll tosses them: the
   wrapper arcs and spins while the cube shuffles faces, then
   settles on the server's faces — the theatre lasts ~0.8s and
   input stays locked until it lands. Spent dice dim in place.
   Decorative: pointer-events none, always. */
/* The checker that follows your cursor while dragging
   * (Sasan's gesture — see app.js drag block). It must
   * never intercept the drop lookup. */
.drag-ghost{position:fixed;left:0;top:0;width:54px;height:54px;border-radius:50%;
  pointer-events:none;z-index:300;
  background:radial-gradient(circle at 34% 28%,#ffffff,#e9e2d2 55%,#b9ac8f);
  box-shadow:0 14px 28px rgba(0,0,0,.55),inset 0 0 0 3px rgba(120,100,60,.35),
    inset 0 -6px 10px rgba(0,0,0,.18)}
.drag-ghost.dark{background:radial-gradient(circle at 34% 28%,#5a5a60,#232326 55%,#0c0c0e);
  box-shadow:0 14px 28px rgba(0,0,0,.55),inset 0 0 0 3px rgba(200,170,90,.3),
    inset 0 -6px 10px rgba(0,0,0,.5)}
#board{touch-action:none}
.board-dice{
  /* The dice drop in the MIDDLE of the board — the middle
     of its right side, to be exact (Sasan, 2026-11-01).
     Both rollers share the one spot now. The spot is the
     right medallion's own centre: the medallion layer is
     centred on the field and its right medallion sits at
     304/400 = 76% across it — 74.5% left the dice visibly
     left of the flower (Sasan, 2026-11-02). */
  position:absolute;z-index:40;left:76%;top:50%;transform:translate(-50%,-50%);
  display:flex;gap:1.1cqw;pointer-events:none;perspective:700px;
}
.board-dice.opp{top:50%}
.bdie{
  --die:6.5cqw;width:var(--die);height:var(--die);position:relative;flex:none;
  perspective:600px;transition:opacity .3s ease, filter .3s ease;
}
#die-1{transform:rotate(-5deg)}
#die-2{transform:rotate(6deg)}
.bdie::before{ /* the ground shadow the die floats on */
  content:"";position:absolute;left:-3%;right:-3%;bottom:-16%;height:24%;z-index:-1;
  background:radial-gradient(closest-side, rgba(0,0,0,.38), rgba(0,0,0,0));
  border-radius:50%;filter:blur(5px);pointer-events:none;
}
.bdie.spent{opacity:.35;filter:saturate(.55)}
.die-toss{width:100%;height:100%;transform-style:preserve-3d}
.die-toss.tumbling-a{animation:die-toss-a .78s cubic-bezier(.2,.7,.3,1)}
.die-toss.tumbling-b{animation:die-toss-b .78s cubic-bezier(.2,.7,.3,1)}
.die-toss.settle{animation:die-settle .3s ease-out}
@keyframes die-toss-a{
  0%{transform:translate(0,-52%) rotate(0deg) scale(.7)}
  35%{transform:translate(10%,-10%) rotate(140deg) scale(1.06)}
  60%{transform:translate(-6%,4%) rotate(260deg) scale(1.12)}
  82%{transform:translate(3%,-4%) rotate(330deg) scale(1.02)}
  100%{transform:translate(0,0) rotate(360deg) scale(1)}
}
@keyframes die-toss-b{
  0%{transform:translate(0,-52%) rotate(0deg) scale(.7)}
  35%{transform:translate(-10%,-12%) rotate(-150deg) scale(1.06)}
  60%{transform:translate(6%,4%) rotate(-270deg) scale(1.12)}
  82%{transform:translate(-3%,-4%) rotate(-335deg) scale(1.02)}
  100%{transform:translate(0,0) rotate(-360deg) scale(1)}
}
@keyframes die-settle{0%{transform:scale(1)}35%{transform:scale(1.08) translateY(-4%)}100%{transform:scale(1)}}
.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .13s ease-out}
.cube.show-1{transform:rotateX(0deg) rotateY(0deg)}
.cube.show-2{transform:rotateX(90deg)}
.cube.show-3{transform:rotateY(-90deg)}
.cube.show-4{transform:rotateY(90deg)}
.cube.show-5{transform:rotateX(-90deg)}
.cube.show-6{transform:rotateY(180deg)}
.face{
  position:absolute;inset:0;border-radius:22%;backface-visibility:hidden;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:16%;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.65'%20numOctaves='2'%20seed='23'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%201%20%200%200%200%200%200.97%20%200%200%200%200%200.9%20%200%200%200.45%200%20-0.24'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20seed='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200.62%200%20-0.3'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"), linear-gradient(145deg,var(--die-0),var(--die-1) 58%,var(--die-2));
  box-shadow:inset 0 0 0 2px rgb(var(--pip-rgb)/.55),
    inset 0 3px 5px rgba(var(--acc-hi),.75), inset 0 -6px 9px rgb(var(--pip-rgb)/.5);
}
.face.f1{transform:rotateY(0deg) translateZ(calc(var(--die) / 2))}
.face.f2{transform:rotateX(-90deg) translateZ(calc(var(--die) / 2))}
.face.f3{transform:rotateY(90deg) translateZ(calc(var(--die) / 2))}
.face.f4{transform:rotateY(-90deg) translateZ(calc(var(--die) / 2))}
.face.f5{transform:rotateX(90deg) translateZ(calc(var(--die) / 2))}
.face.f6{transform:rotateY(180deg) translateZ(calc(var(--die) / 2))}
.pip{width:74%;height:74%;margin:auto;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, var(--pip-0), var(--pip-1) 70%);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.8), 0 1px 0 rgba(var(--acc-hi),.35)}
.die-num{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
@media (prefers-reduced-motion: reduce){
  .die-toss.tumbling-a,.die-toss.tumbling-b,.die-toss.settle{animation:none}
  .cube{transition:none}
}

/* ---------- modals ---------- */
.modal{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--ink3),.88);padding:20px}
/* Dialogs wear warm black marble tones like the lobby —
   the old green card clashed with the room (Sasan,
   2026-11-01, over the "Finding your opponent" pop-up). */
.modal-card{width:min(440px,94vw);text-align:center;padding:34px 28px;border-radius:16px;
  background:linear-gradient(165deg,rgba(var(--ink1),.94),rgba(var(--ink2),.98));
  border:1px solid var(--hairline);box-shadow:0 30px 70px rgba(0,0,0,.65)}
.modal-card h3{font-size:1.5rem;margin-bottom:10px}
.modal-card p{color:var(--cream-dim)}
.modal-actions{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap}
#result-title.win{color:var(--gold)}

/* ---------- tournaments ---------- */
.tournament-card{grid-column:1 / -1}
.tn-status{color:var(--cream-dim);font-size:.95rem;margin-bottom:12px}
.tn-note{margin-top:10px}
.tn-actions{display:flex;gap:8px;flex-wrap:wrap}
.tn-enter-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tn-enter-row select{background:rgba(var(--ink2),.85);color:var(--cream);
  border:1px solid var(--hairline);border-radius:10px;padding:9px 10px;
  font:inherit;font-size:.92rem;max-width:100%}
.modal-card.tn-modal-card{width:min(860px,96vw);text-align:left}
.modal-card.tn-modal-card h3,.modal-card.tn-modal-card .card-sub{text-align:center}
.tn-banner{text-align:center;color:var(--gold);font-weight:700;
  border:1px solid var(--hairline);border-radius:12px;padding:10px 12px;
  background:linear-gradient(180deg,rgba(var(--acc),.14),rgba(var(--acc),.05));
  margin-bottom:14px}
#tn-bracket{display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap}
.tn-round{flex:1 1 220px;min-width:200px}
.tn-round h4{color:var(--gold);font-size:.95rem;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:10px;text-align:center}
.tn-match{border:1px solid var(--hairline);border-radius:12px;padding:10px 12px;
  margin-bottom:12px;background:linear-gradient(165deg,rgba(var(--ink1),.55),rgba(var(--ink2),.8))}
.tn-entrant{display:flex;align-items:center;gap:8px;padding:3px 0;min-width:0}
.tn-entrant .tn-name{font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.tn-entrant .tn-lvl{color:var(--muted);font-size:.82rem;white-space:nowrap}
.tn-entrant.win .tn-name{color:var(--gold)}
.tn-entrant.out{opacity:.45;filter:saturate(.4)}
.tn-entrant.tbd{color:var(--muted);font-style:italic}
.tn-vs{text-align:center;color:var(--gold-deep);font-weight:800;font-size:.78rem;
  letter-spacing:.14em;padding:1px 0}
.tn-entrants{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}
@media (max-width:640px){
  .tn-entrants{grid-template-columns:1fr}
  .tn-round{flex-basis:100%}
}

/* Short-screen controls fit (continued): the base .game-controls
   rule lives near the end of this file and out-cascades the
   max-height block above at equal specificity, so the two
   declarations that must win at phone-landscape heights are
   repeated here, after it. Together with the slimmer header and
   the controls' 10px bottom margin up there, this keeps the
   board's wrap at least as tall as before the fit fix while
   the whole controls row sits inside the frame. */
@media (max-height:480px){
  .game-controls{margin-top:2px;min-height:36px}
}

/* ---------- cases ----------
   The app's standing cases (ContentView's lobby drum):
   closed portrait cases on a rolling drum, each wearing
   its frame wood, a gold pinstripe, its medallion emblem,
   hinges on the left edge and a clasp on the right —
   the drawn caseFront, in the web's materials. Locked
   cases wear the dim veil, the lock and the LEVEL badge.
   The preview reuses the same front as the lid that
   swings away from the board inside. */
.cases-card{grid-column:1/-1}
.cs-chip-row{text-align:center;margin-bottom:2px}
.cs-level-chip{display:inline-block;font-size:.68rem;font-weight:900;letter-spacing:.04em;
  color:#241a05;padding:3px 10px;border-radius:999px;
  background:linear-gradient(180deg,var(--acc-hex-hi),#d9a83f);
  border:1px solid rgba(0,0,0,.3);box-shadow:0 3px 8px rgba(0,0,0,.45)}
.cs-drum-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  perspective:720px;padding:14px 0 14px;scrollbar-width:none;
  max-width:620px;margin:0 auto;
  background:radial-gradient(ellipse 72% 92% at 50% 45%,rgba(var(--acc-hi),.07),transparent 70%)}
.cs-drum-viewport::-webkit-scrollbar{display:none}
.cs-drum{display:flex;gap:18px;width:max-content;margin:0 auto;
  padding:0 calc(50% - 48px);position:relative}
.cs-case{flex:none;width:96px;height:156px;scroll-snap-align:center;
  cursor:pointer;will-change:transform;position:relative}
.cs-case::after{content:"";position:absolute;left:7%;right:7%;bottom:-8px;height:12px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.6),rgba(0,0,0,0) 68%);
  filter:blur(2px)}
.cs-case-front{position:relative;width:100%;height:100%;border-radius:10px;overflow:hidden;
  background:linear-gradient(150deg,var(--cs-f1),var(--cs-f2));
  box-shadow:0 10px 22px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14)}
.cs-case-front::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 45%,rgba(0,0,0,.24))}
.cs-case-front::after{content:"";position:absolute;inset:5px;pointer-events:none;
  border:1.3px solid var(--cs-accent);border-radius:7px;opacity:.9}
.cs-hinges{position:absolute;left:2px;top:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;justify-content:space-evenly}
.cs-hinges i{width:4px;height:26px;border-radius:2px;background:var(--cs-accent);opacity:.85}
.cs-clasp{position:absolute;right:3px;top:50%;transform:translateY(-50%);z-index:2;
  width:7px;height:38px;border-radius:3px;
  background:linear-gradient(180deg,var(--cs-accent),rgba(0,0,0,.35))}
.cs-medallion{position:absolute;inset:0;z-index:1;display:flex;
  align-items:center;justify-content:center;color:var(--cs-accent)}
.cs-medallion svg{width:52px;height:52px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.cs-lock-veil{position:absolute;inset:0;z-index:3;background:rgba(0,0,0,.42);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.cs-lock{font-size:30px;line-height:1}
.cs-lock-lvl{font-size:.6rem;font-weight:900;letter-spacing:.08em;color:var(--acc-hex-hi)}
.cs-drum-label{text-align:center;margin-top:8px;font-weight:800;
  color:var(--cream);min-height:2.6em}
.cs-lock-line{display:block;font-size:.78rem;font-weight:700;
  color:rgba(255,255,255,.6);margin-top:2px}

/* Photo fronts: the app's real case photographs ride in
   the same front box — the studio backdrop of the photo
   becomes the front's own darkness, the case reads as a
   photograph of a hand-crafted case, and the lamp sheen
   (::before, above) still falls over it. The drawn parts
   (hinges, clasp, medallion, pinstripe) stand down while
   a photo is present; if the photo fails, app.js drops
   the cs-photo class and the drawing returns. The lock
   veil (z 3) rides over the photo untouched. */
.cs-case-front.cs-photo{background:linear-gradient(165deg,#1c1712,#0a0806)}
.cs-photo-img{position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:cover;object-position:50% 46%}
.cs-lid .cs-photo-img{object-position:50% 40%}
.cs-case-front.cs-photo::after{display:none}
.cs-case-front.cs-photo .cs-hinges,
.cs-case-front.cs-photo .cs-clasp,
.cs-case-front.cs-photo .cs-medallion{display:none}

/* The tap-to-open preview: the app's card — the board in
   its framed box, name / price / Play floating bare over
   the dimmed room — so the sheet itself wears nothing. */
.modal-card.cs-modal-card{background:transparent;border:none;box-shadow:none;
  width:min(560px,96vw);padding:10px 6px;perspective:1000px}
.cs-stage{animation:csRise .55s cubic-bezier(.2,.9,.25,1.15) both;
  transform-origin:50% 100%}
@keyframes csRise{from{opacity:0;transform:scale(.7) rotateX(-16deg) translateY(26px)}
  to{opacity:1;transform:scale(1) rotateX(0deg) translateY(0)}}
.cs-preview-board{position:relative;aspect-ratio:3/2;border-radius:20px;padding:12px;
  background:linear-gradient(150deg,var(--cs-f1),var(--cs-f2));
  box-shadow:0 18px 44px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.15);
  perspective:1100px}
.cs-board-surface{position:relative;height:100%;border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,var(--cs-s1),var(--cs-s2));
  display:flex;flex-direction:column;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),inset 0 10px 24px rgba(0,0,0,.18)}
.cs-points{display:flex;flex:1;padding:2px 8px;gap:2px}
.cs-points i{flex:1;height:94%}
.cs-points.top i{clip-path:polygon(12% 0,88% 0,50% 100%)}
.cs-points.bottom{align-items:flex-end}
.cs-points.bottom i{clip-path:polygon(50% 0,88% 100%,12% 100%)}
.cs-board-bar{flex:none;height:12px;margin:0 8px;border-radius:3px;
  background:linear-gradient(180deg,var(--cs-f1),var(--cs-f2));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 1px 0 rgba(255,215,130,.25)}
.cs-board-medallion{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:var(--cs-accent);opacity:.92;pointer-events:none}
.cs-board-medallion svg{width:88px;height:88px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}
.cs-lid{position:absolute;inset:0;z-index:3;border-radius:20px;
  transform-origin:left center;
  animation:csLidOpen .95s .3s cubic-bezier(.55,.02,.3,1) both}
.cs-lid .cs-case-front{position:absolute;inset:0;border-radius:20px}
.cs-lid .cs-medallion svg{width:118px;height:118px}
@keyframes csLidOpen{0%{transform:rotateY(0deg);opacity:1}
  72%{opacity:1}100%{transform:rotateY(-74deg);opacity:0}}
.cs-preview-info{text-align:center;margin-top:14px}
.cs-preview-name{font-size:1.3rem;font-weight:900;color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.75)}
.cs-price{display:inline-block;margin-top:7px;font-size:.8rem;font-weight:800;
  color:var(--acc-hex-hi);background:rgba(255,255,255,.08);
  border:1px solid rgba(255,222,128,.45);padding:3px 10px;border-radius:999px}
.cs-preview-lock{margin-top:9px;font-size:.86rem;font-weight:700;
  color:rgba(255,255,255,.82);text-shadow:0 2px 6px rgba(0,0,0,.7)}

/* The ceremony's light: a warm pool gathers behind the
   stage, light spills down the revealed board as the lid
   swings away, the board's inside glows up, a bright edge
   flashes across the lid's photograph, and the case's
   name rises in gold under it. Same flow, same timing
   family as the rise and the lid — only light is added. */
.cs-stage{position:relative;isolation:isolate}
.cs-stage::before{content:"";position:absolute;inset:-50px -40px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 62% 54% at 50% 36%,rgba(var(--acc-hi),.17),rgba(var(--acc-hi),0) 70%)}
.cs-preview-board::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--acc-hi),.22),rgba(var(--acc-hi),0) 46%);
  opacity:0;animation:csSpill 1.15s .45s ease-out both}
@keyframes csSpill{from{opacity:0}to{opacity:1}}
.cs-board-surface{animation:csGlow 1.3s .55s ease-out both}
@keyframes csGlow{
  from{box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),inset 0 10px 24px rgba(0,0,0,.18)}
  to{box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),inset 0 10px 24px rgba(0,0,0,.18),
    inset 0 0 48px rgba(255,205,110,.32)}}
.cs-lid::after{content:"";position:absolute;inset:0;z-index:4;border-radius:20px;pointer-events:none;
  background:linear-gradient(100deg,rgba(var(--acc-hi),0) 26%,rgba(var(--acc-hi),.38) 50%,rgba(var(--acc-hi),0) 74%);
  opacity:0;animation:csLidLight .95s .3s ease-out both}
@keyframes csLidLight{0%{opacity:0}38%{opacity:1}100%{opacity:0}}
.cs-preview-name{background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.75));
  animation:csNameRise .7s .8s cubic-bezier(.2,.9,.25,1.15) both}
.cs-price{animation:csNameRise .7s .95s cubic-bezier(.2,.9,.25,1.15) both}
.cs-preview-lock{animation:csNameRise .7s .95s cubic-bezier(.2,.9,.25,1.15) both}
@keyframes csNameRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .cs-stage{animation:none}
  .cs-lid{animation:none;opacity:0}
  .cs-lid::after,.cs-preview-board::after{animation:none}
  .cs-board-surface{animation:none}
  .cs-preview-name,.cs-price,.cs-preview-lock{animation:none}
}
@media (max-width:820px){
  .cs-case{width:84px;height:137px}
  .cs-drum{padding:0 calc(50% - 42px)}
  .cs-medallion svg{width:44px;height:44px}
  .cs-board-medallion svg{width:64px;height:64px}
  .cs-lid .cs-medallion svg{width:88px;height:88px}
}

/* ---------- rewards ----------
   The app's Lucky Spin + Welcome Bonus (SpinPopup +
   Welcome.swift): a lobby card with the two entries;
   the wheel sheet, where the wheel itself is the
   surface (black-green marble wedges, satin gold, the
   blazing 50K, the emerald ring inside a machined gold
   rim) and its hub is the spin control; and the
   calendar sheet — six day cards and the Day 7 grand
   prize under rotating-ray gold. Royalty colours:
   black-green marble + gold, nothing else. */
.rewards-card{grid-column:1/-1}
.rw-row{display:flex;align-items:center;gap:14px;padding:10px 2px}
.rw-row + .rw-row{border-top:1px solid var(--hairline)}
.rw-row-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.rw-row-title{font-weight:700;font-size:1.02rem}
.rw-row-sub{color:var(--cream-dim);font-size:.92rem}
.rw-ready{color:var(--gold);font-weight:700}
.rw-dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#e5484d;vertical-align:middle;margin-left:2px;
  box-shadow:0 0 0 0 rgba(229,72,77,.55);animation:rw-pulse 1.6s ease-out infinite}
@keyframes rw-pulse{
  0%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}
  70%{box-shadow:0 0 0 7px rgba(229,72,77,0)}
  100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}
}

/* the wheel sheet */
.rw-wheel-wrap{text-align:center;max-width:94vw}
.rw-wheel{position:relative;width:min(340px,92vw);margin:0 auto}
.rw-wheel svg{display:block;width:100%;height:auto;
  filter:drop-shadow(0 24px 44px rgba(0,0,0,.62))}
#rw-rotor{transform-box:fill-box;transform-origin:center}
.rw-pointer{position:absolute;top:-4px;left:50%;transform:translateX(-50%);
  width:30px;height:24px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,#fff194,#db9e29 60%,#7a540d);
  clip-path:polygon(8% 0,92% 0,50% 100%);
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.rw-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:29%;aspect-ratio:1;border-radius:50%;z-index:2;cursor:pointer;
  font:inherit;font-weight:900;font-size:1.02rem;letter-spacing:.08em;
  color:#291702;border:2px solid #75550c;
  background:radial-gradient(circle at 32% 28%,#fff394,#f0b840 52%,#9e700f);
  box-shadow:0 8px 20px rgba(0,0,0,.5),inset 0 2px 3px rgba(255,255,255,.65),
    inset 0 -6px 10px rgba(122,84,13,.45)}
.rw-hub:disabled{cursor:default;filter:saturate(.45) brightness(.82)}
.rw-hub:not(:disabled):hover{filter:brightness(1.07)}
.rw-wheel-status{min-height:1.5em;margin-top:16px;font-size:1.06rem;
  font-weight:700;color:rgba(255,255,255,.92)}
.rw-wheel-note{margin-top:5px;font-size:.82rem;font-weight:700;
  color:rgba(255,224,138,.85)}
@media (max-height:480px){
  .rw-wheel{width:min(228px,92vw)}
  .rw-wheel-status{margin-top:8px;font-size:.95rem}
  .rw-hub{font-size:.8rem}
}

/* the welcome calendar sheet */
.modal-card.rw-cal-card{width:min(580px,96vw);text-align:left}
.rw-cal-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.rw-cal-gift{font-size:2rem;line-height:1.1;
  filter:drop-shadow(0 4px 10px rgba(var(--acc),.45))}
.rw-cal-titles{flex:1 1 auto;min-width:0}
.rw-cal-titles h3{color:var(--gold);margin-bottom:4px;
  text-shadow:0 2px 12px rgba(var(--acc),.35)}
.rw-cal-titles .card-sub{margin:0}
.rw-cal-flag{font-size:.86rem;font-weight:700;color:#7ee787;white-space:nowrap;
  padding-top:6px}
.rw-cal-days{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rw-day{border-radius:12px;padding:0 8px 8px;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10)}
.rw-day.today{border-color:var(--gold);border-width:1.6px;
  box-shadow:0 0 14px rgba(var(--acc),.35)}
.rw-day.claimed{opacity:.78}
.rw-day-head{font-size:.72rem;font-weight:900;letter-spacing:.08em;
  color:rgba(255,255,255,.85);padding:4px 0;margin:0 -8px 6px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05))}
.rw-day.today .rw-day-head{color:#291702;
  background:linear-gradient(180deg,#ffe082,#c6902b)}
.rw-day-coins{font-size:1rem;color:var(--gold)}
.rw-day-coins b{font-weight:900}
.rw-day-spins{font-size:.78rem;font-weight:700;color:#bcd7ff}
.rw-day-state{height:32px;display:flex;align-items:center;justify-content:center;
  margin-top:4px}
.rw-day-check{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;font-weight:900;color:#0b2812;
  background:#7ee787;box-shadow:0 3px 7px rgba(0,0,0,.4)}
.rw-day-lock{opacity:.55;font-size:.92rem}
.rw-grand{margin-top:10px;border-radius:14px;padding:13px 15px;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  background:linear-gradient(140deg,rgba(23,51,37,.92),rgba(9,22,15,.96));
  border:1px solid rgba(var(--acc),.4);
  box-shadow:0 10px 26px rgba(0,0,0,.45),inset 0 0 34px rgba(var(--acc),.07)}
.rw-grand.today{border-color:var(--gold);
  box-shadow:0 0 18px rgba(var(--acc),.4),inset 0 0 34px rgba(var(--acc),.1)}
.rw-grand-main{flex:1 1 260px;min-width:0}
.rw-grand-title{font-size:1.04rem;font-weight:900;color:var(--gold);
  text-shadow:0 2px 10px rgba(var(--acc),.4);margin-bottom:5px}
.rw-grand-yours{color:#7ee787;font-size:.78rem;letter-spacing:.05em}
.rw-grand-bits{display:flex;gap:14px;flex-wrap:wrap;font-size:.84rem;
  font-weight:700;color:rgba(255,255,255,.92)}
@media (max-width:640px){
  .rw-cal-days{grid-template-columns:repeat(2,1fr)}
  .rw-row{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .rw-dot{animation:none}
}

/* ---------- phone gate (desktop-first web) ----------
   Hidden everywhere by default. Only the max-width:820px
   rule below + the phone-gate class (set in <head> by the
   coarse-pointer/small-screen check) shows it — and that
   same rule hides every game screen, so a phone sees the
   download gate instead of sign-in. Persian Luxury, reusing
   the sign-in card's marble-and-gold treatment. */
#screen-gate{display:none}
.gate-card{
  width:min(560px,94vw);text-align:center;padding:44px 40px;border-radius:18px;
  background:linear-gradient(165deg,rgba(var(--ink1),.78),rgba(var(--ink2),.94) 60%,rgba(var(--ink3),.97));
  border:1px solid rgba(var(--acc),.25);box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.gate-line{color:var(--cream-dim);margin:0 auto 26px;max-width:420px;line-height:1.55}
.btn-store{
  display:flex;align-items:center;justify-content:center;gap:14px;width:100%;margin:10px 0;
  padding:13px 20px;border-radius:999px;font-size:1.02rem;font-weight:700;cursor:pointer;font-family:inherit;
  color:var(--ink-on-gold);background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-deep));
  border:none;box-shadow:0 8px 22px rgba(var(--acc-deep),.3);text-decoration:none;
}
.btn-store .auth-mark{font-size:1.5rem;line-height:1}
.btn-store .store-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left}
.btn-store .store-text small{font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.75}
.btn-store .store-text strong{font-size:1.18rem}
.btn-store.soon{
  color:var(--muted);background:linear-gradient(180deg,rgba(var(--ink1),.6),rgba(var(--ink2),.7));
  border:1px solid var(--hairline);box-shadow:none;cursor:not-allowed;opacity:.75;
}
.gate-note{margin-top:20px;color:var(--gold);font-size:.95rem;line-height:1.5}
@media (max-width:820px){
  html.phone-gate #screen-gate{
    display:flex;align-items:center;justify-content:center;
    min-height:100vh;min-height:100dvh;padding:20px;
  }
  html.phone-gate .screen{display:none !important}
  html.phone-gate #toast{display:none !important}
}

/* ==================== i18n (EN / فارسی) ====================
 * The language toggle rides on all three screens (gate,
 * sign-in, lobby header) — the app's own pill pair: the
 * active language is solid gold, the other a bronze ghost.
 * In FA the page wears the Persian font stack (Vazirmatn
 * where the system has it, Tahoma everywhere else — no
 * downloads) and the document flips to RTL; the board wrap
 * carries dir="ltr" in the markup so the game surface never
 * mirrors. Persian script disconnects under letter-spacing
 * and has no uppercase, so the tracked-out labels relax. */
.lang-toggle{display:inline-flex;gap:6px;align-items:center}
.lang-btn{
  font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;
  padding:6px 14px;border-radius:999px;color:var(--gold);
  background:transparent;border:1px solid var(--gold-deep);
}
.lang-btn.active{
  color:var(--ink-on-gold);border-color:transparent;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-deep));
}
.signin-card .lang-toggle,.gate-card .lang-toggle{display:flex;justify-content:flex-end;margin-bottom:10px}
html[lang="fa"] body{font-family:"Vazirmatn",Tahoma,"Segoe UI",Arial,sans-serif}
html[lang="fa"] .tagline,html[lang="fa"] h2,html[lang="fa"] h3,html[lang="fa"] .form-title{font-family:inherit}
[dir="rtl"] .logo-text.small{text-align:right}
[dir="rtl"] .lb-modal-card{text-align:right}
[dir="rtl"] #friend-code-input{direction:ltr}
[dir="rtl"] .stat-label,[dir="rtl"] .lb-xp small,[dir="rtl"] .tray-label,
[dir="rtl"] .cs-lock-lvl,[dir="rtl"] .cs-level-chip,[dir="rtl"] .rw-day-head,
[dir="rtl"] .rw-grand-yours,[dir="rtl"] .btn-store .store-text small,
[dir="rtl"] .rw-hub{letter-spacing:0;text-transform:none}

/* ============================================================
   ROYAL CASINO — Example 1 remodel (Sasan's pick, 2026-11-01).
   A theme layer over the Persian Luxury base: Vegas marquee
   signage with a chasing bulb ring, a red-carpet strip, a floor
   ticker, and the Tables card rebuilt as a real casino table —
   polished wood rim, green felt, gold coin medallions. Board
   rendering is untouched; this is chrome and atmosphere only.
   ============================================================ */
body{
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(var(--walnut-glow),.50), rgba(var(--ink3),0) 62%),
    radial-gradient(720px 430px at 5% 18%, rgba(var(--acc),.11), rgba(var(--ink3),0) 60%),
    radial-gradient(720px 430px at 95% 18%, rgba(var(--acc),.11), rgba(var(--ink3),0) 60%),
    radial-gradient(900px 500px at 88% 34%, rgba(var(--walnut-glow),.35), rgba(var(--ink3),0) 60%),
    linear-gradient(180deg, var(--marble-1) 0%, var(--marble-0) 100%);
}

/* Display faces */
.logo-text{font-family:Cinzel,Georgia,"Times New Roman",serif;font-weight:900;letter-spacing:.12em}
#screen-signin .logo-text,.gate-card .logo-text{font-size:3.3rem}
.lobby-name{font-family:"Playfair Display",Georgia,serif;font-weight:900}
.card h2{font-family:Cinzel,Georgia,serif;font-weight:700;letter-spacing:.05em}
.section-band-label{font-family:Cinzel,Georgia,serif;font-size:.92rem}
.btn-gold{font-family:Cinzel,Georgia,serif;font-weight:700;letter-spacing:.1em}
html[lang="fa"] .section-band-label,html[lang="fa"] .floor-ticker,
html[lang="fa"] .btn-gold,html[lang="fa"] .table-row .btn-play{font-family:inherit}

/* Marquee bulb ring — one shared block for the three signs.
   Four repeating radial-gradient layers walk the edges; a slow
   brightness pulse gives the chase-light shimmer. */
.signin-card,.gate-card{position:relative}
.signin-card::after,.gate-card::after,.lobby-hero::after{
  content:"";position:absolute;inset:6px;border-radius:13px;pointer-events:none;
  background-image:
    radial-gradient(circle,var(--acc-hex-hi) 0 2.6px,var(--gold) 3.8px,rgba(var(--acc),0) 5.6px),
    radial-gradient(circle,var(--acc-hex-hi) 0 2.6px,var(--gold) 3.8px,rgba(var(--acc),0) 5.6px),
    radial-gradient(circle,var(--acc-hex-hi) 0 2.6px,var(--gold) 3.8px,rgba(var(--acc),0) 5.6px),
    radial-gradient(circle,var(--acc-hex-hi) 0 2.6px,var(--gold) 3.8px,rgba(var(--acc),0) 5.6px);
  background-position:3px 1px,3px calc(100% - 1px),1px 3px,calc(100% - 1px) 3px;
  background-size:38px 13px,38px 13px,13px 38px,13px 38px;
  background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;
  animation:royalBulbs 1.5s ease-in-out infinite alternate;
}
@keyframes royalBulbs{from{filter:brightness(.8)}to{filter:brightness(1.22)}}
@media (prefers-reduced-motion: reduce){
  .signin-card::after,.gate-card::after,.lobby-hero::after{animation:none}
}

/* Sign-in + gate: the casino entrance sign */
.signin-card,.gate-card{
  border:3px solid var(--gold-dark);
  box-shadow:0 0 0 5px rgba(var(--ink2),.92),0 0 46px rgba(var(--acc),.30),0 24px 60px rgba(0,0,0,.6);
}
/* The red-brown strip that used to hang under the sign-in
   card (::before) is REMOVED (Sasan, 2026-11-01: "I don't
   know what is this brown thingy at the bottom remove it"). */

/* Sign-in backdrop + glass card (Sasan, 2026-11-01): of the
   four pictures he sent he picked the TREASURE VAULT
   (option 4) for the sign-in and phone-gate screens, and the
   card itself is GLASS — the picture shows through it,
   blurred, so the box matches the background instead of
   contrasting with it ("change the green background on the
   small box too something to match the background"). */
#screen-signin,#screen-gate{
  background:var(--ink-hex) var(--signin-img) center/cover no-repeat;
}
.signin-card,.gate-card{
  background:linear-gradient(165deg,rgba(var(--glass-1),.52),rgba(var(--glass-2),.60) 60%,rgba(var(--glass-3),.66));
  backdrop-filter:blur(7px) brightness(.92);
  -webkit-backdrop-filter:blur(7px) brightness(.92);
}
/* Home link at the sign-in card's top-left (Sasan,
   2026-11-01: "add a home on top left side of the box") —
   it rides the SAME row as the language toggle, in the
   toggle's own metrics, so the two can never drift out of
   alignment (Sasan, 2026-11-01: "Home button is not aligned
   with English Farsi button make sure it is"). */
.card-toprow{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.card-toprow .lang-toggle{margin-bottom:0}
.home-link{
  font-size:.82rem;font-weight:700;letter-spacing:.03em;
  color:var(--gold);text-decoration:none;
  border:1px solid var(--gold-deep);border-radius:999px;padding:6px 14px;
  background:rgba(6,16,11,.45);
}
.home-link:hover{background:rgba(var(--acc),.16)}
/* Sign out lives under the profile panel's Save/Close row. */
.pf-signout{margin-top:14px;color:#e8a0a0;border-color:rgba(232,160,160,.35)}
.btn-auth{letter-spacing:.03em;box-shadow:0 8px 22px rgba(var(--acc-deep),.35),0 0 18px rgba(var(--acc),.22)}
.btn-email{border:1px solid rgba(var(--acc),.55)}

/* Lobby hero: the big marquee over the floor */
.lobby-hero{
  border:2px solid var(--gold-dark);
  box-shadow:0 0 0 5px rgba(var(--ink2),.9),0 0 44px rgba(var(--acc),.28),0 20px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(var(--acc-hi),.22);
}
.lobby-hero::before{display:none}
.hero-crest{
  background:radial-gradient(circle at 35% 30%,var(--acc-hex-hi),var(--gold) 48%,var(--gold-dark) 88%);
  border:2px solid var(--acc-hex-hi);
  box-shadow:0 0 20px rgba(var(--acc),.55),inset 0 -8px 13px rgba(0,0,0,.32),0 12px 26px rgba(0,0,0,.5);
}
.hero-crest-num{background:none;color:#2c1c02;-webkit-background-clip:initial;background-clip:initial}
.hero-crest-cap{color:#4a3204}

/* Red carpet + floor ticker */
/* The red-carpet strip under the hero is REMOVED (Sasan,
   2026-11-01, circling it in red: "Remove this red line"). */
.floor-ticker{margin:14px auto 2px;padding:10px 20px;text-align:center;border-radius:999px;
  border:1px solid rgba(var(--acc),.42);background:rgba(0,0,0,.48);
  font-family:Cinzel,Georgia,serif;font-weight:700;letter-spacing:.13em;font-size:.86rem;color:#ffe9a8;
  box-shadow:inset 0 1px 0 rgba(var(--acc-hi),.15),0 8px 20px rgba(0,0,0,.4)}

/* The Tables card is a casino table now: wood rim, green felt */
.tables-card{
  background:linear-gradient(180deg,var(--wood-a),var(--wood-b) 72%);
  border:1px solid var(--gold-deep);
  box-shadow:0 18px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(var(--acc-hi),.35);
}
.tables-card h2{color:#fff}
.tables-card .card-sub{color:#d8c391}
.tables-card .card-medal{color:var(--acc-hex-hi);border-color:rgba(var(--acc-hi),.6)}
#tables{
  background:radial-gradient(130% 125% at 50% 0%,var(--felt-a),var(--ink-hex) 55%,var(--felt-c));
  border-radius:14px;padding:8px 12px;
  box-shadow:inset 0 0 0 2px rgba(var(--acc-hi),.30),inset 0 14px 30px rgba(0,0,0,.5);
}
.table-row{border-bottom:1px solid rgba(var(--acc-hi),.16);padding:13px 8px}
.table-row:hover{background:linear-gradient(90deg,rgba(var(--acc-hi),.10),rgba(var(--acc-hi),.02))}
.t-medal{
  background:radial-gradient(circle at 35% 30%,var(--acc-hex-hi),var(--gold) 48%,var(--gold-dark) 88%);
  color:#2c1c02;border:2px solid var(--acc-hex-hi);
  box-shadow:0 0 12px rgba(var(--acc),.45),inset 0 -4px 7px rgba(0,0,0,.3);
  font-family:Cinzel,Georgia,serif;
}
.table-row .btn-play{
  font-family:Cinzel,Georgia,serif;font-weight:900;letter-spacing:.13em;
  padding:11px 24px;border-radius:999px;
  box-shadow:0 0 15px rgba(var(--acc),.5),0 4px 0 #7a5606;
}
.table-row .btn-play:disabled{filter:saturate(.35) brightness(.75);box-shadow:none}

/* Game screen: the header carries NO slab of its own —
   the level's room shows through on the left and right of
   the chips (Sasan, 2026-11-01: "the green background next
   to the profile picture still there" / "extend the
   background to the left and right"). The chips keep their
   own pills; the status floats over the room. */
.game-header{
  background:transparent;
  border:1px solid transparent;border-radius:16px;
  box-shadow:none;
  /* The chips' exact insets are set by fitBoard in app.js:
     it measures the fitted board and pads the header so each
     chip lands exactly on the board's edge (Sasan, 2026-11-01:
     "this profile picture is not aligned with the board"). */
}
.player-chip{
  background:linear-gradient(180deg,rgba(var(--ink0),.85),rgba(var(--ink2),.92));
  border:1px solid rgba(var(--acc),.5);border-radius:12px;
}
#board-wrap{
  /* Sasan (2026-11-01, photo-circled): the brown frame around
     the board is GONE — no background, border, shadow or
     padding. The board's own case is the only frame; the wrap
     is just the room it sits in. */
  background:none;border:none;border-radius:0;padding:0;
  box-shadow:none;
}

/* ============================================================
   PROFILE EDITOR + MATCHMAKING POP-UP (Sasan, 2026-11-01).
   Tap your name / picture / crest in the lobby hero and the
   profile window opens: new player name, new picture (a
   gold-ring roundel that then rides the hero and the
   leaderboard). Queueing for a table opens the searching
   pop-up — pulsing gold rings around the dice — instead of
   the old strip under the tables.
   ============================================================ */
.profile-tap{cursor:pointer}
#lobby-name::after{content:" ✎";color:var(--gold);font-size:.72em;vertical-align:.14em}
.hero-avatar{
  flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;
  border:2px solid var(--acc-hex-hi);background:var(--ink-hex);
  box-shadow:0 0 16px rgba(var(--acc),.5),0 8px 18px rgba(0,0,0,.5);
}
.profile-card{text-align:center;max-width:430px}
.pf-avatar-wrap{display:flex;justify-content:center;margin:14px 0 10px}
.pf-avatar{
  width:112px;height:112px;border-radius:50%;object-fit:cover;
  border:3px solid var(--acc-hex-hi);background:var(--ink-hex);
  box-shadow:0 0 22px rgba(var(--acc),.45),0 10px 22px rgba(0,0,0,.5);
}
.pf-avatar-fallback{display:grid;place-items:center;font-size:52px;color:#cdb872}
.pf-label{
  display:block;margin:20px 0 2px;text-align:left;
  font-family:Cinzel,Georgia,serif;font-weight:700;letter-spacing:.18em;
  font-size:.72rem;text-transform:uppercase;color:var(--gold);
}
html[lang="fa"] .pf-label{font-family:inherit;text-align:right}
.profile-card .signin-status{min-height:1.2em;margin-top:12px}
.lb-avatar{
  width:22px;height:22px;border-radius:50%;object-fit:cover;
  border:1.5px solid rgba(var(--acc-hi),.8);vertical-align:-6px;margin-right:7px;
}
[dir="rtl"] .lb-avatar{margin-right:0;margin-left:7px}

.search-card{text-align:center;max-width:430px;position:relative;overflow:hidden}
.search-rings{position:relative;width:120px;height:120px;margin:10px auto 2px}
.search-rings span{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(var(--acc),.65);
  animation:searchPulse 1.9s ease-out infinite;
}
.search-rings span:nth-child(2){animation-delay:.62s}
.search-rings span:nth-child(3){animation-delay:1.24s}
@keyframes searchPulse{
  from{transform:scale(.38);opacity:.95}
  to{transform:scale(1);opacity:0}
}
.search-dice{
  position:relative;margin-top:-86px;font-size:44px;line-height:1;
  animation:searchBounce 1.1s ease-in-out infinite alternate;
}
@keyframes searchBounce{
  from{transform:translateY(0) rotate(-7deg)}
  to{transform:translateY(-9px) rotate(7deg)}
}
@media (prefers-reduced-motion: reduce){
  .search-rings span,.search-dice{animation:none}
}
.search-text{
  font-family:"Playfair Display",Georgia,serif;font-weight:700;
  font-size:1.12rem;color:#fff;margin-top:16px;
}
html[lang="fa"] .search-text{font-family:inherit}
.search-sub{color:var(--cream-dim);margin-top:5px}
.search-card .modal-actions{justify-content:center;margin-top:20px}

/* Ready pictures row inside the profile window: the ten
   case portraits, tap to stage. */
.pf-presets-label{
  margin:18px 0 8px;text-align:left;
  font-family:Cinzel,Georgia,serif;font-weight:700;letter-spacing:.18em;
  font-size:.72rem;text-transform:uppercase;color:var(--gold);
}
html[lang="fa"] .pf-presets-label{font-family:inherit;text-align:right}
.pf-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.pf-preset{
  padding:0;border:2px solid rgba(var(--acc-hi),.25);border-radius:12px;
  background:none;cursor:pointer;overflow:hidden;line-height:0;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.pf-preset img{width:100%;height:52px;object-fit:cover;object-position:top}
.pf-preset:hover{transform:translateY(-1px)}
.pf-preset.sel{
  border-color:var(--acc-hex-hi);
  box-shadow:0 0 12px rgba(var(--acc),.65);
}

/* ============================================================
   GAME CONTROL BAR + SOUND (2026-11-01). The loose row of
   buttons under the board becomes a casino control bar in
   the tables' own language — wood rim, green felt, gold
   hairline — the same width as the board above it. Roll is
   the chunky glowing pill; the rest are felt chips with
   gold rims; Resign keeps its red warning inside the same
   pill family. Plus the speaker toggle's round gold chip.
   ============================================================ */
.game-controls{
  width:min(1080px,100%);margin:10px auto 12px;min-height:0;
  padding:10px 14px;gap:10px;border-radius:16px;
  /* Sasan (2026-11-01, photo-circled): NO panel behind the
     buttons — the green felt bar, its gold border and shadow
     ring are gone. The buttons keep their own styling and
     simply sit next to the board. */
  background:none;
  border:none;
  box-shadow:none;
}
.game-controls .btn{
  border-radius:999px;padding:10px 22px;
  font-family:Cinzel,Georgia,serif;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;font-size:.82rem;
}
html[lang="fa"] .game-controls .btn{font-family:inherit;letter-spacing:0}
.game-controls .btn-gold{
  color:#241a04;border:1px solid var(--acc-hex-hi);
  box-shadow:0 0 16px rgba(var(--acc),.55),0 6px 14px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.65);
}
.game-controls .btn-ghost{
  background:rgba(4,26,17,.55);color:var(--cream);
  border:1px solid rgba(var(--acc-hi),.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 10px rgba(0,0,0,.35);
}
.game-controls .btn-danger-ghost{
  background:rgba(46,10,10,.5);color:#ffb4a6;
  border:1px solid rgba(255,140,120,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 10px rgba(0,0,0,.35);
}
.game-controls .dice-left{
  font-family:Cinzel,Georgia,serif;font-weight:700;letter-spacing:.14em;
  font-size:.78rem;text-transform:uppercase;color:var(--acc-hex-hi);
  text-shadow:0 1px 0 rgba(0,0,0,.6);
}
html[lang="fa"] .game-controls .dice-left{font-family:inherit;letter-spacing:0}
.sound-btn{
  flex:none;width:42px;height:42px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:19px;line-height:1;
  color:var(--cream);background:linear-gradient(180deg,rgba(var(--ink0),.95),rgba(var(--ink2),.95));
  border:1.5px solid rgba(var(--acc-hi),.65);
  box-shadow:0 4px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.15);
}
.sound-btn:hover{border-color:var(--acc-hex-hi)}
.lobby-hero .sound-btn{margin-left:10px}
[dir="rtl"] .lobby-hero .sound-btn{margin-left:0;margin-right:10px}

/* ===== 2026-11-01 fix round: side rail, chip pictures, clearer
   destinations, flying dice ===== */
.game-main{display:flex;gap:6px;width:100%;flex:1;min-height:0;align-items:stretch;justify-content:center}
#game-rail{flex:0 0 118px;display:flex;flex-direction:column;gap:10px}
#game-rail .game-controls{
  /* NOT flex:1 (Sasan, 2026-11-01): the rail is one compact
     cluster hugging the board — buttons at the top, the emoji
     tray popping open directly under them, the speaker directly
     under that. Nothing stranded at the bottom of the rail. */
  width:100%;margin:0;min-height:0;height:auto;
  flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;
  /* No top padding: the first button's top edge sits exactly
     on the board's top edge (Sasan, 2026-11-01: "make the
     buttons on the right align with the board"). */
  gap:12px;padding:0 0 10px 0;
}
#game-rail .game-controls .btn{width:100%;padding:12px 6px;text-align:center}
#game-rail .game-controls .dice-left{text-align:center;min-height:1.1em;
  font-size:.68rem;letter-spacing:.05em;line-height:1.5}
#game-rail .sound-btn{align-self:center;margin-top:8px}
.player-chip{align-items:center}
.chip-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid rgba(var(--acc-hi),.85);background:#1d1408;
  box-shadow:0 2px 8px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.4)}
.point .dest-dot,.bar-slot .dest-dot,.tray .dest-dot{
  width:30px;height:30px;pointer-events:none;
  box-shadow:0 0 0 3px rgba(36,26,4,.55),0 0 18px 7px rgba(var(--acc),.85);
}
.point.dest-hint .tri{filter:brightness(1.45) saturate(1.3)}
.tray.dest-hint{box-shadow:0 0 0 2px var(--gold),0 0 18px rgba(var(--acc),.55)}
.die-toss.tumbling-a{animation-duration:.95s}
.die-toss.tumbling-b{animation-duration:.95s}
#dice-display[data-rolling="1"]{animation:dice-travel .95s cubic-bezier(.2,.7,.25,1)}
@keyframes dice-travel{
  /* Sasan (2026-11-01): "it hits the board, bounce, and hit
     the board again" — a real thrown-dice path: fly in high,
     HIT the board, bounce up, HIT again, one small hop, rest.
     Falls ease-in (gravity), rises ease-out; the cubes tumble
     on their own track the whole way. */
  0%{transform:translate(calc(-50% + 165px),calc(-50% - 105px)) rotate(-16deg) scale(.72);opacity:0;animation-timing-function:cubic-bezier(.5,0,1,1)}
  12%{opacity:1}
  30%{transform:translate(calc(-50% + 105px),calc(-50% + 8px)) rotate(6deg) scale(1.02);animation-timing-function:cubic-bezier(0,0,.4,1)}
  47%{transform:translate(calc(-50% + 62px),calc(-50% - 58px)) rotate(-4deg) scale(.97);animation-timing-function:cubic-bezier(.5,0,1,1)}
  62%{transform:translate(calc(-50% + 34px),calc(-50% + 5px)) rotate(2deg) scale(1.01);animation-timing-function:cubic-bezier(0,0,.4,1)}
  74%{transform:translate(calc(-50% + 16px),calc(-50% - 22px)) rotate(-1deg) scale(.99);animation-timing-function:cubic-bezier(.5,0,1,1)}
  85%{transform:translate(calc(-50% + 5px),calc(-50% + 2px)) rotate(0deg) scale(1);animation-timing-function:cubic-bezier(0,0,.4,1)}
  93%{transform:translate(calc(-50% + 1px),calc(-50% - 5px)) rotate(0deg) scale(1);animation-timing-function:cubic-bezier(.5,0,1,1)}
  100%{transform:translate(-50%,-50%) rotate(0deg) scale(1)}
}
#dice-display.opp[data-rolling="1"]{animation-name:dice-travel-opp}
@keyframes dice-travel-opp{
  /* The same bounce, mirrored for the opponent's throw. */
  0%{transform:translate(calc(-50% + 165px),calc(-50% + 105px)) rotate(16deg) scale(.72);opacity:0;animation-timing-function:cubic-bezier(.5,0,1,1)}
  12%{opacity:1}
  30%{transform:translate(calc(-50% + 105px),calc(-50% - 8px)) rotate(-6deg) scale(1.02);animation-timing-function:cubic-bezier(0,0,.4,1)}
  47%{transform:translate(calc(-50% + 62px),calc(-50% + 58px)) rotate(4deg) scale(.97);animation-timing-function:cubic-bezier(.5,0,1,1)}
  62%{transform:translate(calc(-50% + 34px),calc(-50% - 5px)) rotate(-2deg) scale(1.01);animation-timing-function:cubic-bezier(0,0,.4,1)}
  74%{transform:translate(calc(-50% + 16px),calc(-50% + 22px)) rotate(1deg) scale(.99);animation-timing-function:cubic-bezier(.5,0,1,1)}
  85%{transform:translate(calc(-50% + 5px),calc(-50% - 2px)) rotate(0deg) scale(1);animation-timing-function:cubic-bezier(0,0,.4,1)}
  93%{transform:translate(calc(-50% + 1px),calc(-50% + 5px)) rotate(0deg) scale(1);animation-timing-function:cubic-bezier(.5,0,1,1)}
  100%{transform:translate(-50%,-50%) rotate(0deg) scale(1)}
}
@media (max-width:860px){
  .game-main{flex-direction:column}
  #game-rail{flex:0 0 auto;width:100%;flex-direction:row;align-items:center}
  #game-rail .game-controls{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;height:auto}
  #game-rail .game-controls .btn{width:auto;padding:10px 18px}
  #game-rail .emote-tray{flex-direction:row}
  #game-rail .sound-btn{margin-top:0}
}
@media (prefers-reduced-motion: reduce){
  #dice-display[data-rolling="1"]{animation:none}
}

/* ============================================================
   THEME SWITCHER + THE THREE EXTRA THEMES (Sasan, 2026-11-01)
   ============================================================ */
.theme-switch{display:flex;gap:7px;align-items:center}
.theme-label{font-family:Cinzel,Georgia,serif;font-weight:700;letter-spacing:.14em;
  font-size:.72rem;color:var(--muted);text-transform:uppercase}
.theme-sw{width:26px;height:26px;border-radius:50%;flex:none;cursor:pointer;padding:0;
  border:2px solid rgba(var(--acc),.35);transition:transform .15s ease,box-shadow .15s ease}
.theme-sw:hover{transform:scale(1.12)}
.theme-sw.active{border-color:var(--acc-hex-hi);
  box-shadow:0 0 0 2px rgba(var(--acc),.45),0 0 12px rgba(var(--acc),.55)}
.sw-marble{background:linear-gradient(135deg,#14100b 52%,var(--gold) 52%)}
.sw-burgundy{background:linear-gradient(135deg,#2a0d10 52%,#e6b877 52%)}
.sw-sapphire{background:linear-gradient(135deg,#0a1626 52%,#a8c7e8 52%)}
.sw-ivory{background:linear-gradient(135deg,#f3ead9 52%,#a87c2e 52%)}

/* --- Royal Burgundy: wine marble, champagne accent --- */
html[data-theme="burgundy"]{
  --marble-2:#33141a; --marble-1:#1c0a0e; --marble-0:#0d0406;
  --walnut-2:#33160f; --walnut-1:#1c0b06; --walnut-0:#0f0503;
  --walnut-frame:#5f2a1a; --walnut-light:#86503a;
  --gold-hi:#ffe9bd; --gold:#e6b877; --gold-logo:#cfa15e;
  --gold-deep:#a87c3a; --gold-dark:#6e4d1c;
  --acc:230,184,119; --acc-hi:255,226,178; --acc-deep:168,124,58;
  --acc-hex-hi:#ffe2ae;
  --ink0:43,22,20; --ink1:30,14,13; --ink2:16,7,8; --ink3:8,3,4;
  --ink-hex:#1a0a0b; --walnut-glow:84,30,28; --on-acc:40,18,6;
  --glass-1:43,22,20; --glass-2:16,7,8; --glass-3:8,3,4;
  --cream:#f6e8d4; --cream-dim:#e3c9b4; --muted:#bd9d8d;
  --ink-on-gold:#33160a;
  --room-img:url('img/room-burgundy.jpg');
  --signin-img:url('img/room-burgundy.jpg');
  --felt-a:#2b1414; --felt-c:#0d0505;
  --wood-a:#4a1f16; --wood-b:#240f0a;
}

/* --- Midnight Sapphire: navy marble, platinum accent (no purple) --- */
html[data-theme="sapphire"]{
  --marble-2:#12233d; --marble-1:#0a1626; --marble-0:#04080f;
  --walnut-2:#16283f; --walnut-1:#0c1725; --walnut-0:#060c14;
  --walnut-frame:#2c4258; --walnut-light:#476a8a;
  --gold-hi:#e8f1fc; --gold:#a8c7e8; --gold-logo:#8fb0d8;
  --gold-deep:#6e8cb4; --gold-dark:#42597a;
  --acc:168,199,232; --acc-hi:214,232,250; --acc-deep:110,140,180;
  --acc-hex-hi:#dcecfb;
  --ink0:20,28,43; --ink1:13,19,30; --ink2:7,11,18; --ink3:3,5,9;
  --ink-hex:#0a1220; --walnut-glow:26,44,74; --on-acc:10,18,30;
  --glass-1:20,28,43; --glass-2:7,11,18; --glass-3:3,5,9;
  --cream:#e9eef6; --cream-dim:#c3cede; --muted:#93a3ba;
  --ink-on-gold:#0a1420;
  --room-img:url('img/room-sapphire.jpg');
  --signin-img:url('img/room-sapphire.jpg');
  --felt-a:#16222e; --felt-c:#05090f;
  --wood-a:#1d2c3e; --wood-b:#0e1620;
}

/* --- Ivory & Walnut: the light theme — cream marble, bronze accent --- */
html[data-theme="ivory"]{
  --marble-2:#f3ead9; --marble-1:#eadfc8; --marble-0:#e2d3b4;
  --walnut-2:#a97c46; --walnut-1:#8a6136; --walnut-0:#6e4a20;
  --walnut-frame:#8a6136; --walnut-light:#a97c46;
  --gold-hi:#ecd096; --gold:#c49a4a; --gold-logo:#a87f36;
  --gold-deep:#8a641f; --gold-dark:#5f4310;
  --acc:154,110,44; --acc-hi:190,150,84; --acc-deep:122,84,28;
  --acc-hex-hi:#e8cc8a;
  --ink0:250,246,238; --ink1:244,236,222; --ink2:236,226,206; --ink3:226,214,192;
  --ink-hex:#efe6d2; --walnut-glow:190,160,110; --on-acc:46,30,8;
  --glass-1:250,246,238; --glass-2:236,226,206; --glass-3:226,214,192;
  --cream:#2e2013; --cream-dim:#5d4930; --muted:#8a7355;
  --ink-on-gold:#2e2008;
  --room-img:url('img/room-ivory.jpg');
  --signin-img:url('img/room-ivory.jpg');
  --felt-a:#e9dcbc; --felt-c:#d9c69c;
  --wood-a:#a97c46; --wood-b:#7a5527;
}
html[data-theme="ivory"] .tables-card h2{color:#3a2410}
html[data-theme="ivory"] .tables-card .card-sub{color:#6b4e28}
html[data-theme="ivory"] .search-text{color:#2e2013}
html[data-theme="ivory"] .hero-crest-num{color:#2c1c02}
html[data-theme="ivory"] body{background-color:#e2d3b4}

/* ---------- the Roll button lives on the board now ----------
   Sasan, 2026-11-02: "move the roll button to the middle of
   right board" — it sits on the exact spot the dice land
   (centre of the right half, left:74.5% / top:50%, the
   .board-dice anchor), so tapping it swaps it for the dice
   in place. The rail's old Roll slot now holds Auto-roll. */
.board-roll{position:absolute;left:76%;top:50%;transform:translate(-50%,-50%);
  z-index:41;font-size:2.1cqw;padding:.5em 1.5em;letter-spacing:.14em;
  box-shadow:0 12px 26px rgba(0,0,0,.5)}
/* The generic gold-button hover lift must never replace this
   button's centring transform: translateY(-1px) alone drops the
   -50%,-50% centring, so on hover the button jumped half its own
   width right and half its height down — out from under the
   player's cursor — and clicks landed on the board instead
   (Sasan's video, 2026-11-02: five clicks dodged, the sixth
   caught an edge). Hover keeps the exact centred transform. */
.board-roll:hover,.board-roll:active,.board-roll:focus-visible{
  transform:translate(-50%,-50%)}
.autoroll .ar-state{font-size:.78em;font-weight:700;letter-spacing:.08em;
  padding:.14em .55em;border-radius:999px;border:1px solid currentColor;opacity:.75}
.autoroll.on{border-color:var(--acc);color:var(--acc-hi)}
.autoroll.on .ar-state{opacity:1;background:var(--acc);border-color:var(--acc);color:#241a05}

/* Private table card (2026-11-02) */
.table-code-label {
  text-align: center;
  color: var(--ink-dim);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 6px 0 2px;
}
.table-code {
  text-align: center;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: .35em;
  text-indent: .35em;
  color: var(--gold);
  line-height: 1.15;
}
.table-wait-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 8px 0 6px;
}
#table-wait .muted { text-align: center; }
#table-code-input { text-transform: uppercase; }

/* VIP advertisement card (2026-11-02) */
.vip-card { border-color: var(--gold); }
.vip-perks { list-style: none; margin: 8px 0 4px; padding: 0; }
.vip-perks li { padding: 3px 0 3px 24px; position: relative; }
.vip-perks li::before {
  content: "✓";
  position: absolute;
  left: 2px;
  color: var(--gold);
  font-weight: 800;
}
.vip-price {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--gold);
  margin: 8px 0;
}
.vip-cta { display: block; width: 100%; text-align: center; text-decoration: none; }
.vip-note { text-align: center; margin-top: 6px; }

/* The web shop (2026-11-02): the VIP card's active state
   and the Coin Store's pack tiles. */
.vip-active-line { text-align: center; font-weight: 700; color: var(--gold); margin: 2px 0 8px; }
.store-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 12px 0; }
.pack-tile { border: 1px solid var(--gold); border-radius: 12px; padding: 12px;
  text-align: center; background: rgba(255, 255, 255, 0.03); }
.pack-tile .pack-coins { font-size: 1.25rem; font-weight: 800; }
.pack-tile .pack-word { opacity: 0.75; font-size: 0.85rem; margin-bottom: 8px; }
.pack-tile .pack-name { font-weight: 800; color: var(--gold); margin-bottom: 2px; }
.pack-tile .pack-desc { font-size: 0.85rem; opacity: 0.8; margin-bottom: 8px; }
.pack-tile.pack-starter { grid-column: 1 / -1; }
.pack-tile .btn { width: 100%; }

/* Lobby right column: VIP card + Friends card stacked to match
   the Tables card's height (Sasan, 2026-11-02). */
.lobby-stack { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.lobby-stack .friends-card { flex: 1; }

/* Round 32: the Stripe popup's return page — a bare closing
 * note on a flat dark ground, shown instead of booting the
 * game inside the little window. */
.popup-return{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#0b0f0d;padding:24px}
.popup-return-card{text-align:center;color:#f3e9d2;font-size:19px;line-height:1.6;max-width:420px}
.popup-return-mark{font-family:Cinzel,Georgia,serif;font-weight:900;letter-spacing:.35em;color:var(--gold,#d4af37);font-size:22px;margin-bottom:14px}