/* =====================================================================
   TOKENS — Leylines palette (violet-tinted darks from the logo kit;
   light theme is derived from it). --ley-* are the raw palette values.
   ===================================================================== */
:root{
  --ley-bg:#0E0A1F; --ley-surface:#140C33; --ley-raised:#1E1450; --ley-border:#3A2C6E;
  --ley-text:#F1ECFF; --ley-text-muted:#B9AEDD; --ley-text-subtle:#8E82B8;
  --ley-violet-700:#6A2BAE; --ley-violet-500:#8B6CFF; --ley-violet-300:#B894FF; --ley-violet-100:#EDE6FF;
  --ley-pink-700:#C2469A; --ley-pink-500:#FF5FA8; --ley-pink-300:#FF86C4;
  /* Player colours: you are blue, the opponent is red (shades tuned to sit with the violet darks) */
  --ley-blue-700:#2F5FD0; --ley-blue-300:#8CB4FF; --ley-red-700:#C8344F; --ley-red-300:#FF8A9A;
  --ley-success:#5EE6B0; --ley-warning:#FFC45C; --ley-danger:#FF5470;

  --bg0:#08061a; --bg1:var(--ley-bg); --surf:var(--ley-surface); --surf2:var(--ley-raised); --seg-on:#2a1d66;
  --line:rgba(184,148,255,.13); --line2:rgba(184,148,255,.26);
  --text:var(--ley-text); --muted:var(--ley-text-muted);
  --accent:var(--ley-violet-500); --accent-hi:var(--ley-violet-300); --on-accent:var(--ley-surface); --accent-ink:var(--ley-violet-300); --accent-glow:rgba(139,108,255,.4);
  --cta:var(--ley-pink-500); --cta-hi:var(--ley-pink-300); --on-cta:#1e0b2a; --cta-glow:rgba(255,95,168,.4);
  --blue1:var(--ley-blue-700); --blue2:#142a6e; --red1:var(--ley-red-700); --red2:#5c1224; --blue-ink:var(--ley-blue-300); --red-ink:var(--ley-red-300);
  --glow-a:rgba(106,43,174,.32); --glow-b:rgba(194,70,154,.12);
  --board:#110a29;
  --hot:var(--ley-violet-100); --hot-glow:rgba(237,230,255,.35);
  --danger:var(--ley-danger); --warn:var(--ley-warning); --crit:var(--ley-danger);
  --sh:4,2,14; --shk:1; --tint:255,255,255; --well:rgba(0,0,0,.28); --dim:.62; --grain:.07;
  --title-grad:linear-gradient(180deg,#fff 10%,var(--ley-violet-100) 45%,var(--ley-violet-300));
  --cell:110px; --hc:68px;
  --display:'Saira',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --body:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.22,1,.36,1);
  --z-ghost:60; --z-banner:80; --z-how:85; --z-modal:90; --z-toast:95; --z-grain:100;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg0:#e9e4f7; --bg1:#f6f3ff; --surf:#ffffff; --surf2:#f0ebff; --seg-on:#ffffff;
  --line:rgba(40,20,90,.12); --line2:rgba(40,20,90,.22);
  --text:#1a1238; --muted:#54497a;
  --accent:var(--ley-violet-700); --accent-hi:var(--ley-violet-500); --on-accent:#fff; --accent-ink:var(--ley-violet-700); --accent-glow:rgba(106,43,174,.3);
  --cta:var(--ley-pink-700); --cta-hi:#dc5aad; --on-cta:#fff; --cta-glow:rgba(194,70,154,.35);
  --blue1:#3a6bdb; --blue2:#1e3f99; --red1:#d24560; --red2:#8e1f36; --blue-ink:#2553c0; --red-ink:#b3304a;
  --glow-a:rgba(139,108,255,.16); --glow-b:rgba(255,95,168,.12);
  --board:#e4ddf7;
  --hot:var(--ley-violet-700); --hot-glow:rgba(106,43,174,.3);
  --danger:#c8324f; --warn:#a8660a; --crit:#c8324f;
  --sh:40,20,90; --shk:.3; --tint:0,0,0; --well:rgba(0,0,0,.05); --dim:.35; --grain:.05;
  --title-grad:linear-gradient(180deg,var(--text) 25%,var(--accent-ink));
  color-scheme:light;
}
/* --cell is used for the board square size; the colour lives in --cell-bg */
:root{--cell-bg:#0b0720} :root[data-theme="light"]{--cell-bg:#d6cdf0}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{
  color:var(--text);font:400 15px/1.5 var(--body);touch-action:manipulation;
  background:
    radial-gradient(120% 70% at 0% 0%,var(--glow-a),transparent 60%),
    radial-gradient(110% 70% at 100% 100%,var(--glow-b),transparent 60%),
    linear-gradient(var(--bg1),var(--bg0));
  background-color:var(--bg0);
  overscroll-behavior:none;user-select:none;-webkit-user-select:none;
}
body::after{content:"";position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
button{font:inherit;color:inherit}
p{text-wrap:pretty}
.hidden{display:none!important}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
h2[tabindex="-1"]:focus,.mbox:focus{outline:none}
.sc,.bigscore,.codebox,.stat b,.meta,#deckMeta,.timer span{font-variant-numeric:tabular-nums}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- screens ---------- */
/* Big monitors: every screen is laid out at a ~1440x900 design size and zoomed up to fill the window.
   --ui is set by layout(); anything sized in vw/vh inside a zoomed box divides by it to stay viewport-true. */
:root{--ui:1}
.screen,#modal,#how,#toast{zoom:var(--ui)}
.screen{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;overflow-y:auto;
  padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.screen.on{display:flex}
.screen.on .wrap>*,.screen.on .topbar,#scr-menu.on .menu>*{animation:rise .4s var(--ease) both}
.screen.on .wrap>*:nth-child(2),#scr-menu.on .menu>*:nth-child(2){animation-delay:.04s}
.screen.on .wrap>*:nth-child(3),#scr-menu.on .menu>*:nth-child(3){animation-delay:.08s}
.screen.on .wrap>*:nth-child(n+4){animation-delay:.12s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.wrap{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:stretch;gap:16px}
.topbar{display:flex;align-items:center;gap:12px;width:100%;max-width:560px;margin:6px 0 12px}
.topbar h2{margin:0;font:800 24px/1.1 var(--display);letter-spacing:-.01em;flex:1;text-wrap:balance}
h3,.lbl{margin:0 0 8px;font:600 12.5px var(--body);color:var(--muted);letter-spacing:.02em}
.note{margin:8px 2px 0;color:var(--muted);font-size:13px;line-height:1.5}
.note b{color:var(--text);font-weight:600}

/* ---------- buttons ---------- */
.iconbtn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:rgba(var(--tint),.04);color:var(--text);
  cursor:pointer;display:grid;place-items:center;flex:none;padding:0;transition:background .18s,border-color .18s,transform .2s var(--spring)}
.iconbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.iconbtn:hover{background:rgba(var(--tint),.08);border-color:var(--line2)}
.iconbtn:active{transform:scale(.94)}
.btn{appearance:none;border:1px solid var(--line);background:var(--surf2);color:var(--text);padding:10px 18px;border-radius:14px;
  font:600 15px var(--body);cursor:pointer;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 2px 6px rgba(var(--sh),calc(.35*var(--shk)));transition:transform .2s var(--spring),filter .18s,border-color .18s,background .18s}
.btn:hover{border-color:var(--line2);filter:brightness(1.06);transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.98);transition-duration:.06s}
.btn:disabled{opacity:.42;cursor:default;filter:none;transform:none}
.btn.primary{background:linear-gradient(180deg,var(--cta-hi),var(--cta));color:var(--on-cta);border-color:transparent;
  font:700 16px var(--display);letter-spacing:.02em;box-shadow:0 8px 24px -8px var(--cta-glow),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.danger{background:none;border-color:color-mix(in srgb,var(--danger) 55%,transparent);color:var(--danger);box-shadow:none}
.btn.danger:hover{background:color-mix(in srgb,var(--danger) 10%,transparent)}
.btn.small{min-height:40px;padding:6px 14px;font-size:14px;border-radius:12px}
.btn.text{background:none;border-color:transparent;box-shadow:none;color:var(--muted);font-weight:500}
.btn.text:hover{color:var(--text)}
@media (pointer:coarse){.btn.small,.seg button{min-height:44px}}

/* segmented control */
.seg{display:flex;gap:2px;padding:4px;border-radius:14px;background:var(--well);border:1px solid var(--line)}
.seg button{flex:1 1 0;border:0;background:none;border-radius:10px;padding:6px 10px;cursor:pointer;font-weight:500;min-height:38px;color:var(--muted);transition:background .18s,color .18s,transform .15s}
.seg button:hover:not(.on){color:var(--text)}
.seg button:active{transform:scale(.97)}
.seg button.on{background:var(--seg-on);color:var(--text);font-weight:600;box-shadow:0 2px 8px rgba(var(--sh),calc(.45*var(--shk))),inset 0 0 0 1px var(--line2)}

/* switch row (rules + settings) */
.rules,.setlist{border-radius:16px;background:var(--surf);border:1px solid var(--line);overflow:hidden}
.rule,.setrow{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:0;border-top:1px solid var(--line);background:none;text-align:left;color:var(--text)}
.rule{cursor:pointer;transition:background .15s}
.rule:hover{background:rgba(var(--tint),.03)}
.rule:first-child,.setrow:first-child{border-top:0}
.rule .rt,.setrow .rt{flex:1;min-width:0}
.rule b,.setrow b{display:block;font:600 14.5px var(--body)}
.rule small,.setrow small{display:block;color:var(--muted);font-size:12.5px;line-height:1.35}
.rule.dim .rt{opacity:.5}
.switch{width:42px;height:26px;border-radius:13px;background:rgba(var(--tint),.16);position:relative;flex:none;transition:background .2s}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .25s var(--spring)}
[aria-checked="true"] .switch{background:var(--accent)}
[aria-checked="true"] .switch::after{transform:translateX(16px)}
.setrow .seg{flex:0 0 auto}
.setrow .seg button{min-height:34px;padding:4px 10px;font-size:13px}
button.setrow{cursor:pointer}
button.setrow:hover{background:rgba(var(--tint),.03)}