/* Display + handwriting fonts, self-hosted (SIL Open Font License) */
@font-face{font-family:"Lilita One";src:url("fonts/lilita-one.woff2") format("woff2");font-display:swap;}
@font-face{font-family:"Patrick Hand";src:url("fonts/patrick-hand.woff2") format("woff2");font-display:swap;}
/* ═══════════════════════════════════════════════════════════════════════════
   Game Night kit: design system for the home screen and every game.
   One theme: a deep "night" backdrop with bright candy colours, rounded type,
   chunky buttons that press down, and springy motion.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Surfaces */
  --bg:#141029;
  --bg-2:#1c1638;
  --surface:#231c45;
  --surface-2:#2d2556;
  --surface-3:#3a3169;
  --line:var(--w08);
  --line-2:var(--w14);
  --shade:rgba(8,5,22,.55);

  /* Chrome fills, lines and wells: white-on-dark here, ink-on-light in the
     light themes (see "Themes" at the end). Games use these too. */
  --w03:rgba(255,255,255,.03); --w04:rgba(255,255,255,.04); --w05:rgba(255,255,255,.05);
  --w06:rgba(255,255,255,.06); --w07:rgba(255,255,255,.07); --w08:rgba(255,255,255,.08);
  --w09:rgba(255,255,255,.09); --w1:rgba(255,255,255,.1); --w12:rgba(255,255,255,.12);
  --w14:rgba(255,255,255,.14); --w15:rgba(255,255,255,.15); --w16:rgba(255,255,255,.16);
  --w18:rgba(255,255,255,.18); --w2:rgba(255,255,255,.2);
  --inset:rgba(0,0,0,.28); --inset-2:rgba(0,0,0,.38); --seg:rgba(0,0,0,.25);
  --glow-1:#3a2a7a; --glow-2:rgba(255,92,154,.18);
  --page-bg:
    radial-gradient(120% 60% at 50% -10%, var(--glow-1) 0%, transparent 60%),
    radial-gradient(80% 40% at 100% 0%, var(--glow-2) 0%, transparent 70%),
    var(--bg);
  --glass:rgba(20,16,41,.82);
  --win-shade:rgba(10,6,28,.7);
  --ho-glow:#2a1f5c;

  /* Text */
  --text:#fbf8ff;
  --text-2:#c9c1e6;
  --text-3:#8f86b3;

  /* Brand + candy palette */
  --accent:#ffc83d;          /* per-page accent (games override with their colour) */
  --accent-ink:#2b1a00;
  --yellow:#ffc83d; --yellow-fill:var(--yellow);
  --orange:#ff8a3d;
  --pink:#ff5c9a;
  --red:#ff4d5e;
  --purple:#9b7bff;
  --blue:#4da3ff;
  --teal:#2fd3c0;
  --green:#3ddc84;

  /* Player colours, in seat order */
  --p1:#ffc83d; --p2:#4da3ff; --p3:#ff5c9a; --p4:#3ddc84;
  --cw:64px; --ds:56px;
  --p5:#9b7bff; --p6:#ff8a3d; --p7:#2fd3c0; --p8:#ff4d5e;

  /* Table felt for card/casino games */
  --felt:#0f6b4a;
  --felt-2:#0a4f37;

  --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:24px; --r-xl:32px;
  --shadow:0 10px 30px rgba(5,2,20,.45);
  --shadow-sm:0 4px 12px rgba(5,2,20,.35);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.22,1,.36,1);
  --font:ui-rounded,"SF Pro Rounded","Nunito","Varela Round",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Lilita One",var(--font);
  --hand:"Patrick Hand","Bradley Hand","Segoe Print",cursive;
  --ink:#1f2a6b;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);

  /* Names older shared scripts (hist.js, players.js, arcade-hi.js) read */
  --gold:var(--yellow); --text-dim:var(--text-2);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;touch-action:manipulation;background:var(--bg);}
body{
  margin:0;min-height:100vh;min-height:100dvh;
  font-family:var(--font);font-size:16px;line-height:1.4;color:var(--text);
  background:var(--page-bg);
  background-attachment:scroll;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;-webkit-user-select:none;user-select:none;}
img,svg,canvas{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.01em;font-weight:800;}
p{margin:0;}
[hidden]{display:none!important;}
::selection{background:rgba(255,200,61,.35);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ── Buttons ──────────────────────────────────────────────────────────────
   Chunky, tactile: a solid "lip" underneath that the button presses into. */
.btn{
  --b:var(--surface-3); --b-ink:var(--text); --b-lip:rgba(0,0,0,.35);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 22px;border:0;border-radius:var(--r);
  background:var(--b);color:var(--b-ink);
  font-weight:800;font-size:1.05rem;letter-spacing:.01em;
  box-shadow:0 5px 0 var(--b-lip), inset 0 1px 0 var(--w18);
  transform:translateY(0);transition:transform .08s ease, box-shadow .08s ease, filter .15s, opacity .15s;
}
.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--b-lip), inset 0 1px 0 var(--w18);}
.btn:disabled{opacity:.4;cursor:default;filter:saturate(.4);}
.btn .ico{width:20px;height:20px;flex:none;}
.ico{display:inline-block;vertical-align:middle;width:1.15em;height:1.15em;flex:none;}
.btn:focus-visible{outline:3px solid color-mix(in srgb,var(--text) 60%,transparent);outline-offset:3px;}
.btn-primary{--b:var(--accent);--b-ink:var(--accent-ink);--b-lip:color-mix(in srgb,var(--accent) 55%,#000);}
.btn-yellow{--b:var(--yellow-fill);--b-ink:#2b1a00;--b-lip:#b8860b;}
.btn-green{--b:var(--green);--b-ink:#03290f;--b-lip:#1d8a4f;}
.btn-blue{--b:var(--blue);--b-ink:#03182f;--b-lip:#2464a8;}
.btn-pink{--b:var(--pink);--b-ink:#33001a;--b-lip:#b0306a;}
.btn-red,.btn-danger{--b:var(--red);--b-ink:#fff;--b-lip:#a8202e;}
.btn-ghost{--b:transparent;--b-lip:transparent;box-shadow:none;color:var(--text-2);}
.btn-ghost:active:not(:disabled){transform:scale(.96);box-shadow:none;}
.btn-soft{--b:var(--w08);--b-lip:rgba(0,0,0,.25);}
.btn-block{display:flex;width:100%;}
.btn-lg{min-height:60px;font-size:1.2rem;border-radius:var(--r-lg);}
.btn-sm{min-height:40px;padding:0 14px;font-size:.92rem;border-radius:var(--r-sm);box-shadow:0 3px 0 var(--b-lip), inset 0 1px 0 var(--w18);}
.btn-sm:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--b-lip);}
.btn-row{display:flex;gap:10px;}
.btn-row > .btn{flex:1;}

/* Round icon button (game bar, small actions) */
.icon-btn{
  display:inline-grid;place-items:center;width:42px;height:42px;flex:none;
  border:0;border-radius:50%;background:var(--w08);color:var(--text);
  transition:transform .15s var(--spring), background .15s;
}
.icon-btn:active{transform:scale(.88);background:var(--w16);}
.icon-btn svg{width:22px;height:22px;}

/* ── Chips & segmented controls ───────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  min-height:40px;padding:0 16px;border-radius:999px;border:0;
  background:var(--w07);color:var(--text-2);font-weight:700;font-size:.95rem;white-space:nowrap;
  transition:transform .15s var(--spring), background .15s, color .15s;
}
.chip:active{transform:scale(.94);}
.chip.on,.chip[aria-pressed="true"],.chip[aria-selected="true"]{background:var(--text);color:var(--bg);}
.chip .n{opacity:.7;font-weight:800;font-size:.85em;}

.seg{display:flex;padding:4px;gap:4px;border-radius:var(--r);background:var(--seg);}
.seg > button{
  flex:1;min-height:44px;border:0;border-radius:calc(var(--r) - 4px);background:transparent;
  color:var(--text-2);font-weight:800;font-size:.95rem;transition:background .2s, color .2s, transform .15s var(--spring);
}
.seg > button:active{transform:scale(.95);}
.seg > button.on,.seg > button[aria-pressed="true"]{background:var(--surface-3);color:var(--text);box-shadow:var(--shadow-sm);}
/* Light themes: the picked choice is a bright raised pill with an accent ring, so it reads at a glance against the tan or lilac track */
html[data-theme="light"] .seg:not(:is(.felt,.wood,.felt-in) *),html[data-theme="parchment"] .seg:not(:is(.felt,.wood,.felt-in) *){background:var(--seg-track);}
html[data-theme="light"] .seg:not(:is(.felt,.wood,.felt-in) *) > :is(button.on,button[aria-pressed="true"]),
html[data-theme="parchment"] .seg:not(:is(.felt,.wood,.felt-in) *) > :is(button.on,button[aria-pressed="true"]){
  background:var(--bg-2);color:var(--text);box-shadow:inset 0 0 0 2px var(--accent),0 2px 0 var(--line-2),0 4px 10px var(--line-2);}

/* ── Cards / panels ───────────────────────────────────────────────────── */
.panel{background:var(--surface);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow-sm);}
.panel-soft{background:var(--w05);border-radius:var(--r-lg);padding:16px;}
.label{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:0 0 8px;}
.muted{color:var(--text-2);}
.dim{color:var(--text-3);}
.center{text-align:center;}
.stack{display:flex;flex-direction:column;gap:12px;}
.row{display:flex;align-items:center;gap:10px;}
.grow{flex:1;min-width:0;}

/* ── Inputs ───────────────────────────────────────────────────────────── */
.input{
  width:100%;min-height:52px;padding:0 16px;border-radius:var(--r);
  border:2px solid transparent;background:var(--inset);color:var(--text);font-size:1.05rem;font-weight:600;
  outline:none;transition:border-color .15s, background .15s;
}
.input::placeholder{color:var(--text-3);font-weight:500;}
.input:focus{border-color:var(--accent);background:var(--inset-2);}

.stepper{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--inset);}
.stepper button{width:44px;height:44px;border:0;border-radius:50%;background:var(--surface-3);color:var(--text);font-size:1.4rem;font-weight:800;line-height:1;transition:transform .12s var(--spring);}
.stepper button:active{transform:scale(.85);}
.stepper button:disabled{opacity:.3;}
.stepper output{min-width:44px;text-align:center;font-size:1.3rem;font-weight:900;}

.switch{position:relative;display:inline-block;flex:none;width:52px;height:32px;}
.switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1;}
.switch i{position:absolute;inset:0;border-radius:999px;background:var(--surface-3);transition:background .2s;}
.switch i::after{content:"";position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .25s var(--spring);}
.switch input:checked + i{background:var(--green);}
.switch input:checked + i::after{transform:translateX(20px);}

/* ── Avatars / player pills ───────────────────────────────────────────── */
.avatar{
  --c:var(--p1);
  display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;
  background:var(--c);color:#16102e;font-weight:900;font-size:1rem;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);
}
.avatar .ico{width:58%;height:58%;}
.avatar.sm{width:28px;height:28px;font-size:.8rem;}
.avatar.lg{width:64px;height:64px;font-size:1.6rem;}
.avatar.xl{width:96px;height:96px;font-size:2.4rem;}
.avatar{overflow:hidden;}
.avatar{position:relative;padding:0 0 2px;line-height:1;}   /* letters sit centred above the bottom shade */
.avatar .av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
.av-tile img{width:100%;height:100%;object-fit:cover;display:block;}
.avatar.av-photo{background:#000;box-shadow:inset 0 0 0 1.5px var(--w12);}

/* Avatar editor */
.av-btn{border:0;padding:0;background:none;border-radius:50%;cursor:pointer;flex:none;position:relative;}
.av-btn::after{content:'';position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border-radius:50%;background:var(--gilt,#e3bd62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316102e' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center/9px no-repeat;box-shadow:0 0 0 2px var(--surface-2,#191d26);}
.av-ed .av-top{display:flex;align-items:center;gap:16px;margin:4px 0 14px;}
.avatar.xl.av-adj{cursor:pointer;}
.avatar.xl.av-adj::after{content:'';position:absolute;right:2px;bottom:2px;width:28px;height:28px;border-radius:50%;background:var(--gilt,#e3bd62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316102e' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 2v14a2 2 0 0 0 2 2h14'/%3E%3Cpath d='M18 22V8a2 2 0 0 0-2-2H2'/%3E%3C/svg%3E") center/15px no-repeat;box-shadow:0 0 0 3px var(--bg-2,#1d1836);}
.avatar.xl{overflow:visible;}
.avatar.xl .av-img{border-radius:50%;}
.av-ed .av-who{display:flex;flex-direction:column;gap:2px;min-width:0;}
.av-ed .av-who b{font-size:1.2rem;font-weight:900;}
.av-ed .av-who small{color:var(--text-2);font-size:.85rem;}
.av-ed .label{margin:12px 2px 8px;}
.av-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
.av-tile{position:relative;aspect-ratio:1;border:0;padding:0;border-radius:50%;cursor:pointer;background:var(--surface-3);color:var(--text);
  display:grid;place-items:center;overflow:visible;box-shadow:inset 0 0 0 1.5px var(--w1);transition:transform .12s;}
.av-tile:active{transform:scale(.94);}
.av-tile img{border-radius:50%;}
.av-tile .ico{width:52%;height:52%;}
.av-tile.mk{background:var(--c);}
.av-tile.mk b{font-weight:900;font-size:1.35rem;}
.av-tile.on{box-shadow:0 0 0 3px var(--bg-2,#141029),0 0 0 5px var(--gilt,#e3bd62);}
.av-tile.av-up{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--text) 28%,transparent);border:0;}
.av-tile.av-up .ico{width:40%;height:40%;}
.av-tile.av-up small{font-size:.56rem;font-weight:800;color:var(--text-2);}
.av-del{position:absolute;top:-4px;right:-4px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#2a2440;color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5);}
.av-del .ico{width:12px;height:12px;}
.av-cols{display:grid;grid-template-columns:repeat(11,1fr);gap:8px;margin:0 0 14px;}
.av-col{width:100%;max-width:34px;aspect-ratio:1;justify-self:center;border-radius:50%;border:0;padding:0;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--w18);}
.av-col.on{box-shadow:0 0 0 3px var(--bg-2,#141029),0 0 0 5px var(--gilt,#e3bd62);}
.av-col.av-rb{background:conic-gradient(#ff4d4d,#ffb84d,#fff04d,#5be36b,#4dd8ff,#5b7dff,#c06bff,#ff4d9e,#ff4d4d);position:relative;}
.av-col.av-rb.on::after{content:"";position:absolute;inset:22%;border-radius:50%;background:var(--cc);box-shadow:0 0 0 2px rgba(0,0,0,.35);}
.cw{display:flex;flex-direction:column;align-items:center;gap:16px;padding:2px 0 6px;}
.cw-top{display:flex;align-items:center;gap:14px;align-self:stretch;justify-content:center;}
.cw-hex{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.05rem;color:var(--text-2);letter-spacing:.06em;}
.cw-box{position:relative;touch-action:none;cursor:crosshair;}
.cw-wheel{width:100%;height:100%;border-radius:50%;display:block;box-shadow:0 8px 24px -8px rgba(0,0,0,.7);}
.cw-knob{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.6);pointer-events:none;}
.cw-dark{width:240px;height:28px;-webkit-appearance:none;appearance:none;border-radius:14px;background:linear-gradient(90deg,#111,var(--hue,#f00));outline:none;}
.cw-dark::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.5);}
.cw-dark::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:0;}

/* Photo cropper: the picture under a circle window; drag to move, pinch or slide to zoom */
.av-crop{position:fixed;inset:0;z-index:1200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);
  background:rgba(8,6,20,.94);opacity:0;transition:opacity .2s;}
.av-crop.show{opacity:1;}
.avc-head{color:var(--text-2);font-weight:700;font-size:.92rem;}
.avc-stage{position:relative;width:min(100%,360px);aspect-ratio:1;overflow:hidden;border-radius:18px;touch-action:none;cursor:grab;background:#000;}
.avc-img{position:absolute;left:50%;top:50%;max-width:none;transform-origin:center;user-select:none;-webkit-user-select:none;pointer-events:none;}
.avc-ring{position:absolute;left:8%;top:8%;width:84%;height:84%;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 999px rgba(8,6,20,.62),inset 0 0 0 2px rgba(255,255,255,.85);}
.avc-zoom{display:flex;align-items:center;gap:12px;width:min(100%,360px);color:var(--text-2);}
.avc-zoom input{flex:1;accent-color:var(--gilt,#e3bd62);}
.avc-zoom .ico{width:20px;height:20px;}
.avc-acts{display:flex;gap:10px;width:min(100%,360px);}

/* Scoreboard strip: one pill per player, the active one lifts and glows */
.scores{display:flex;flex:none;min-height:min-content;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 8px;margin:0 -2px;}
.scores::-webkit-scrollbar{display:none;}
.score{
  --c:var(--p1);
  flex:1 0 auto;min-width:76px;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 12px 10px;border-radius:var(--r);background:var(--w06);
  border:2px solid transparent;transition:transform .3s var(--spring), border-color .2s, background .2s;
}
.score .nm{font-size:.8rem;font-weight:800;color:var(--text-2);max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.score .pt{font-size:1.45rem;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.1;}
.score .sub{font-size:.72rem;font-weight:700;color:var(--text-3);}
.score.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 18%,transparent);transform:translateY(-2px);}
.score.on .nm{color:var(--c);}
.score.lead .pt{color:var(--yellow);}

/* ── Playing cards (shared by every card game) ────────────────────────────
   Kit.card('Q','h') builds one. Size with --cw on any ancestor.
   Kit.cardFace({rank, label, color}) builds non-standard cards (Flip 7, Rook…). */
.pcard{
  --ink:#1d1b2e;
  position:relative;flex:none;width:var(--cw);height:calc(var(--cw) * 1.4);
  border-radius:calc(var(--cw) * .1);color:var(--ink);
  background:linear-gradient(160deg,#ffffff 0%,#fbf7ee 60%,#f1ead9 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 0 0 1px rgba(0,0,0,.08), 0 2px 0 rgba(0,0,0,.15), 0 6px 14px rgba(0,0,0,.3);
  font-family:var(--font);font-weight:900;overflow:hidden;user-select:none;-webkit-user-select:none;
  transition:transform .25s var(--spring), box-shadow .2s, opacity .2s, filter .2s;
}
.pcard.red{--ink:#d81e3a;}
.pcard .ix{position:absolute;left:7%;top:5%;display:flex;flex-direction:column;align-items:center;line-height:.9;font-size:calc(var(--cw) * .24);letter-spacing:-.04em;}
.pcard .ix b{font-size:.78em;margin-top:1px;}
.pcard .ix.bot{left:auto;top:auto;right:7%;bottom:5%;transform:rotate(180deg);}
.pcard .pip{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--cw) * .5);line-height:1;}
.pcard[data-r="A"] .pip{font-size:calc(var(--cw) * .7);}
.pcard .face{position:absolute;inset:20% 18%;border-radius:calc(var(--cw) * .06);display:grid;place-items:center;
  background:linear-gradient(160deg, color-mix(in srgb,var(--ink) 10%,#fff), color-mix(in srgb,var(--ink) 22%,#fff));
  box-shadow:inset 0 0 0 calc(var(--cw) * .025) color-mix(in srgb,#c9a227 80%,var(--ink));}
.pcard .face span{font-family:var(--display);font-weight:400;font-size:calc(var(--cw) * .46);line-height:1;}
.pcard .face i{position:absolute;bottom:4%;font-style:normal;font-size:calc(var(--cw) * .2);}
.pcard.back{background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.18) 0 18%, transparent 19%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 3px,transparent 3px 8px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.14) 0 3px,transparent 3px 8px),
    linear-gradient(135deg,var(--back-a,#5b3fd1),var(--back-b,#c0367d));
  box-shadow:inset 0 0 0 calc(var(--cw) * .06) var(--back-edge,#fff), 0 0 0 1px rgba(0,0,0,.12), 0 2px 0 rgba(0,0,0,.15), 0 6px 14px rgba(0,0,0,.3);}
.pcard.back > *{display:none;}
.pcard.custom .big{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:400;font-size:calc(var(--cw) * .56);color:var(--ink);}
.pcard.custom .lbl{position:absolute;left:0;right:0;bottom:7%;text-align:center;font-size:calc(var(--cw) * .14);font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);}
.pcard.custom.solid{background:linear-gradient(160deg,color-mix(in srgb,var(--ink) 80%,#fff),var(--ink));}
.pcard.custom.solid .big,.pcard.custom.solid .lbl,.pcard.custom.solid .ix{color:#fff;}
.pcard.sel{transform:translateY(-16px);box-shadow:0 0 0 3px var(--yellow), 0 14px 22px rgba(0,0,0,.4);}
.pcard.dim{filter:brightness(.55) saturate(.6);}
.pcard.play{cursor:pointer;}
.pcard.play:hover{transform:translateY(-8px);}
.pcard.play:active{transform:translateY(-6px) scale(.97);}
.pcard.hint{box-shadow:0 0 0 3px var(--green), 0 8px 18px rgba(0,0,0,.35);}
.pcard.slot{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 2px rgba(255,255,255,.2);}
.pcard.slot > *{display:none;}
.hand{display:flex;justify-content:center;padding:20px 8px 6px;}
.hand > .pcard + .pcard{margin-left:var(--overlap, calc(var(--cw) * -.45));}
.felt{
  background:radial-gradient(120% 80% at 50% 30%, var(--felt) 0%, var(--felt-2) 100%);
  border-radius:var(--r-xl);box-shadow:inset 0 2px 24px rgba(0,0,0,.4), 0 0 0 6px rgba(0,0,0,.18);
}

/* ── Table materials ────────────────────────────────────────────────────
   Play areas should feel like a real table, not an app panel. */
.wood{
  background:
    repeating-linear-gradient(92deg, rgba(255,255,255,.05) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(88deg, rgba(0,0,0,.07) 0 1px, transparent 1px 14px),
    linear-gradient(180deg,var(--wood-a,#9a5b2e),var(--wood-b,#6e3d1c));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18), inset 0 -4px 0 rgba(0,0,0,.25), 0 14px 30px rgba(0,0,0,.45);
}
.felt-in{
  isolation:isolate;
  background:
    radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/4px 4px,
    radial-gradient(120% 90% at 50% 35%, var(--felt-a,#188a5c) 0%, var(--felt-b,#0d5c3c) 70%, var(--felt-c,#0a4a30) 100%);
  box-shadow:inset 0 6px 18px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.25);
}
.felt-in::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--felt-mark,none) center 46%/min(42%,200px) auto no-repeat;
  filter:brightness(0) invert(1);opacity:.07;
}
/* Felt and wood are the same table in every theme, so anything drawn on them uses
   the Night colours (the theme's ink-on-light values would vanish on a dark table). */
.felt,.wood,.felt-in{
  color:#fbf8ff;
  --bg:#141029; --bg-2:#1c1638; --surface:#231c45; --surface-2:#2d2556; --surface-3:#3a3169;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --shade:rgba(8,5,22,.55);
  --text:#fbf8ff; --text-2:#c9c1e6; --text-3:#8f86b3; --text-dim:#c9c1e6;
  --yellow:#ffc83d; --gold:#ffc83d; --yellow-fill:#ffc83d;
  --green:#3ddc84; --red:#ff4d5e; --orange:#ff8a3d; --blue:#4da3ff;
  --w03:rgba(255,255,255,.03); --w04:rgba(255,255,255,.04); --w05:rgba(255,255,255,.05); --w06:rgba(255,255,255,.06);
  --w07:rgba(255,255,255,.07); --w08:rgba(255,255,255,.08); --w09:rgba(255,255,255,.09); --w1:rgba(255,255,255,.1);
  --w12:rgba(255,255,255,.12); --w14:rgba(255,255,255,.14); --w15:rgba(255,255,255,.15); --w16:rgba(255,255,255,.16);
  --w18:rgba(255,255,255,.18); --w2:rgba(255,255,255,.2);
  --inset:rgba(0,0,0,.28); --inset-2:rgba(0,0,0,.38); --seg:rgba(0,0,0,.25); --glass:rgba(20,16,41,.82);
}
.paper{
  color:#2a2a3a;
  background:
    repeating-linear-gradient(180deg, transparent 0 39px, rgba(60,80,160,.16) 39px 40px),
    linear-gradient(180deg,#fffaf0,#f6eedb);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 16px 34px rgba(0,0,0,.45);
}
.ink{font-family:var(--hand);color:var(--ink);}
.display{font-family:var(--display);font-weight:400;letter-spacing:.01em;}

/* ── Dice ─────────────────────────────────────────────────────────────── */
.die{
  --ds:56px;
  position:relative;width:var(--ds);height:var(--ds);flex:none;border:0;padding:calc(var(--ds) * .14);
  display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);
  border-radius:calc(var(--ds) * .2);
  background:radial-gradient(120% 120% at 28% 22%, #ffffff 0%, #f7f3ea 45%, #ddd5c4 100%);
  box-shadow:inset 0 calc(var(--ds) * -.06) 0 rgba(0,0,0,.1), inset 0 2px 1px rgba(255,255,255,.9), 0 calc(var(--ds) * .07) calc(var(--ds) * .12) rgba(0,0,0,.45);
  transition:transform .2s var(--spring);
}
.die i{width:70%;height:70%;margin:auto;border-radius:50%;background:radial-gradient(circle at 35% 30%, #4a4660 0%, #15132a 70%);box-shadow:inset 0 1px 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.7);visibility:hidden;}
.die[data-v="1"] i:nth-child(5),
.die[data-v="2"] i:nth-child(1),.die[data-v="2"] i:nth-child(9),
.die[data-v="3"] i:nth-child(1),.die[data-v="3"] i:nth-child(5),.die[data-v="3"] i:nth-child(9),
.die[data-v="4"] i:nth-child(1),.die[data-v="4"] i:nth-child(3),.die[data-v="4"] i:nth-child(7),.die[data-v="4"] i:nth-child(9),
.die[data-v="5"] i:nth-child(1),.die[data-v="5"] i:nth-child(3),.die[data-v="5"] i:nth-child(5),.die[data-v="5"] i:nth-child(7),.die[data-v="5"] i:nth-child(9),
.die[data-v="6"] i:nth-child(1),.die[data-v="6"] i:nth-child(3),.die[data-v="6"] i:nth-child(4),.die[data-v="6"] i:nth-child(6),.die[data-v="6"] i:nth-child(7),.die[data-v="6"] i:nth-child(9)
{visibility:visible;}
.die[data-v="1"] i:nth-child(5){background:radial-gradient(circle at 35% 30%, #ff6b7a 0%, #c8102e 70%);width:82%;height:82%;}
.die.held{transform:translateY(-4px);box-shadow:0 0 0 3px var(--yellow), 0 0 18px rgba(255,200,61,.6), 0 10px 14px rgba(0,0,0,.45);}
.die.rolling{animation:die-roll .7s cubic-bezier(.2,.8,.3,1) both;}
@keyframes die-roll{0%{transform:translate(var(--dx,-40px),-30px) rotate(var(--dr,-200deg)) scale(.7);opacity:.2;}55%{transform:translate(calc(var(--dx,-40px) * -.15),6px) rotate(calc(var(--dr,-200deg) * -.08)) scale(1.05);opacity:1;}75%{transform:translateY(-6px) rotate(4deg);}100%{transform:none;}}

/* ── Motion helpers ───────────────────────────────────────────────────── */
.pop{animation:pop .45s var(--spring);}
@keyframes pop{0%{transform:scale(.6);opacity:0;}100%{transform:scale(1);opacity:1;}}
.shake{animation:shake .4s;}
@keyframes shake{0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-8px);}40%,80%{transform:translateX(8px);}}
.bounce{animation:bounce .6s var(--spring);}
@keyframes bounce{0%{transform:scale(1);}30%{transform:scale(1.18);}100%{transform:scale(1);}}
.rise{animation:rise .5s var(--ease) both;}
@keyframes rise{from{transform:translateY(16px);opacity:0;}to{transform:none;opacity:1;}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;}}

/* ═══════════════════════════════════════════════════════════════════════════
   Game page shell (built by kit.js)
   ═══════════════════════════════════════════════════════════════════════════ */
.gbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:8px;
  padding:calc(var(--safe-t) + 8px) 12px 8px;
  background:transparent;transition:background-color .2s, box-shadow .2s;
}
/* Sticky bars: clear over the page glow at rest, frosted once content scrolls
   under them, so there is never a dark band or a hard gradient edge. */
.gbar.stuck,.k-stick.stuck{
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 1px 0 var(--w06), 0 8px 20px -12px rgba(0,0,0,.6);
}

.gbar .ttl{flex:1;min-width:0;display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.2rem;padding-left:2px;}
.gbar .ttl::before{content:"";flex:none;width:4px;height:22px;border-radius:2px;background:var(--accent);}
.gbar .ttl.has-ic::before{display:none;}
.gbar .ttl .gi{display:flex;flex:none;}
.gbar .ttl .gi .gicon{width:34px;height:34px;}
.gbar .ttl span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gbar .ttl > span:not(.gi):not(.k-chev){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
/* Title as a switcher (Kit.titleSwitch): tap to go back to the game's own picker */
.gbar .ttl.k-switch{cursor:pointer;border-radius:12px;margin:-4px 0;padding:4px 6px 4px 2px;transition:background .15s;-webkit-tap-highlight-color:transparent;}
.gbar .ttl.k-switch:active{background:var(--w08);}
.gbar .ttl .k-chev{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;margin-left:-4px;border-radius:50%;background:var(--w08);color:var(--text-2);}
.gbar .ttl .k-chev .ico{width:15px;height:15px;}
@media (max-width:440px){.gbar .ttl.k-switch .gi{display:none;}}
.stage{max-width:620px;margin:0 auto;padding:4px 16px calc(var(--safe-b) + 24px);}
.stage.wide{max-width:980px;}
.stage.full{max-width:none;padding:0;}

/* Turn banner: "Sam's turn" pops in over the board */
.turn{
  --c:var(--p1);
  display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;margin:6px 0 10px;
  font-weight:900;font-size:1.05rem;color:var(--c);
}
.turn .dot{position:relative;width:10px;height:10px;border-radius:50%;}
/* The pulsing ring is a layer under the dot (::after) that scales and fades (GPU
   only, no repaint per frame). Drawn at its largest (8px ring), scaled to 4px. */
.turn .dot::before,.turn .dot::after{content:"";position:absolute;border-radius:50%;pointer-events:none;}
.turn .dot::before{inset:-8px;background:color-mix(in srgb,var(--c) 30%,transparent);transform:scale(.6923);animation:k-ring 1.4s infinite;}
.turn .dot::after{inset:0;background:var(--c);}
@keyframes k-ring{50%{transform:none;opacity:0;}}
@media (prefers-reduced-motion:reduce){.turn .dot::before{animation-duration:.01ms!important;}}
/* Older pages still use "pulse" by name; kept as it was. */
@keyframes pulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--c) 0%,transparent);}}

/* ── Sheets (bottom drawer dialogs) ───────────────────────────────────── */
.k-scrim{
  position:fixed;inset:0;z-index:400;display:flex;align-items:flex-end;justify-content:center;
  background:var(--shade);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .25s;
}
.k-scrim.show{opacity:1;}
.k-sheet{
  width:100%;max-width:560px;max-height:88vh;max-height:88dvh;overflow:auto;overscroll-behavior:contain;
  background:var(--bg-2);border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:10px 20px calc(var(--safe-b) + 20px);box-shadow:0 -10px 40px rgba(0,0,0,.4);
  transform:translateY(100%);transition:transform .38s var(--ease);
}
.k-scrim.show .k-sheet{transform:none;}
.k-sheet .grab{width:44px;height:5px;border-radius:3px;background:var(--w2);margin:0 auto 14px;}
/* The handle and title are a pull-down strip (closes the sheet); no page scroll starts there */
.k-sheet .grab,.k-sheet > h2{touch-action:none;cursor:grab;}
.k-sheet .grab{position:relative;}
.k-sheet .grab::before{content:'';position:absolute;inset:-14px -60px;}
.k-sheet h2{font-size:1.4rem;margin-bottom:6px;}
.k-sheet.k-sh-has-help{position:relative;}
.k-sheet.k-sh-has-help > h2{padding-right:48px;}
.k-sh-help{position:absolute;top:22px;right:14px;z-index:3;}
.k-sheet .k-acts{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
/* Long sheets keep their main buttons in view while the rest scrolls */
.k-sheet .k-acts{position:sticky;bottom:calc(-20px - var(--safe-b));margin:18px -20px calc(-20px - var(--safe-b));padding:12px 20px calc(var(--safe-b) + 16px);
  background:linear-gradient(rgba(0,0,0,0),var(--bg-2) 14px);z-index:2;}
@media (min-width:700px){
  .k-scrim{align-items:center;}
  .k-sheet{border-radius:var(--r-xl);transform:translateY(30px) scale(.96);opacity:0;transition:transform .3s var(--spring), opacity .2s;}
  .k-scrim.show .k-sheet{transform:none;opacity:1;}
}

/* Rules sheet content */
.rules h3{font-size:1rem;margin:18px 0 6px;color:var(--accent);}
.rules p,.rules li{color:var(--text-2);font-size:.98rem;line-height:1.5;}
.rules ul,.rules ol{padding-left:20px;margin:6px 0;}
.rules li{margin:4px 0;}
.rules b{color:var(--text);}
.rules .goal{font-size:1.08rem;color:var(--text);background:var(--w06);border-radius:var(--r);padding:12px 14px;margin-top:4px;}

/* Menu list inside a sheet */
.k-list{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.k-list button{
  display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:0 16px;border:0;border-radius:var(--r);
  background:var(--w06);color:var(--text);font-weight:700;font-size:1.02rem;text-align:left;
  transition:transform .12s var(--spring), background .15s;
}
.k-list button:active{transform:scale(.97);background:var(--w12);}
.k-list button .ic{display:grid;place-items:center;width:28px;color:var(--text-2);}
/* The top row of the menu: New game, Undo, Past games side by side */
.k-list .k-tiles{display:flex;gap:8px;margin-top:4px;}
.k-list .k-tiles .k-tile{flex:1 1 0;min-width:0;min-height:72px;flex-direction:column;justify-content:center;gap:6px;padding:8px 6px;text-align:center;font-size:.88rem;line-height:1.15;}
.k-list .k-tiles .k-tile .ic{width:auto;}
/* Menu groups: a small heading, then the group's rows joined into one rounded block */
.k-list .k-grp{display:flex;flex-direction:column;gap:2px;margin-top:6px;}
.k-list .k-grp h3{margin:4px 6px 4px;font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);}
.k-list .k-grp button{min-height:48px;border-radius:6px;font-size:.98rem;}
.k-list .k-grp h3 + button{border-top-left-radius:var(--r);border-top-right-radius:var(--r);}
.k-list .k-grp button:last-child{border-bottom-left-radius:var(--r);border-bottom-right-radius:var(--r);}
.k-list button .lbl{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2;}
.k-list button .lbl small{font-size:.76rem;font-weight:600;color:var(--text-3);margin-top:1px;}
/* on/off switch */
.k-list button.tg .sw{flex:none;position:relative;width:44px;height:26px;border-radius:13px;background:var(--w14);transition:background .2s;}
.k-list button.tg .sw::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .2s var(--spring);}
.k-list button.tg[aria-checked="true"] .sw{background:var(--green,#34c759);}
.k-list button.tg[aria-checked="true"] .sw::after{transform:translateX(18px);}
.k-list button .ic .ico{width:22px;height:22px;}
.k-list button.danger .ic{color:var(--red);}
.k-list button.danger{color:var(--red);}
.k-list button.hl{color:var(--yellow);font-weight:800;}
.k-list button.hl .ic{color:var(--yellow);}

/* ── Setup screen ─────────────────────────────────────────────────────── */
.setup{display:flex;flex-direction:column;gap:18px;padding-top:6px;}
.setup-hero{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:14px 0 4px;}
.setup-hero .k-hero-ic .gicon{width:96px;height:96px;filter:drop-shadow(0 12px 20px rgba(0,0,0,.35));animation:float 3.2s ease-in-out infinite;}
@keyframes float{50%{transform:translateY(-6px) rotate(-3deg);}}
.setup-hero .k-cat{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);}
.setup-hero .k-cat .ico{width:16px;height:16px;}
.setup-hero h1{font-family:var(--display);font-weight:400;font-size:2.8rem;letter-spacing:.01em;}
.setup-hero p{color:var(--text-2);max-width:320px;}
.setup .modes{display:flex;flex-direction:column;gap:8px;}
.setup .mode{
  display:flex;align-items:center;gap:14px;padding:12px 14px;border:2px solid transparent;border-radius:var(--r);
  background:var(--w06);text-align:left;color:var(--text);transition:transform .15s var(--spring), border-color .15s, background .15s;
}
.setup .mode:active{transform:scale(.98);}
.setup .mode .e{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--w08);color:var(--text-2);}
.setup .mode .e .ico{width:22px;height:22px;}
.setup .mode .tx{flex:1;min-width:0;display:flex;flex-direction:column;}
.setup .mode .t{font-weight:900;font-size:1.02rem;}
.setup .mode .d{font-size:.85rem;color:var(--text-2);line-height:1.3;}
.setup .mode .ok{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--w08);color:transparent;}
.setup .mode .ok .ico{width:16px;height:16px;}
.setup .mode.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);}
.setup .mode.on .e{background:var(--accent);color:var(--accent-ink);}
.setup .mode.on .ok{background:var(--accent);color:var(--accent-ink);}
.seat{display:flex;align-items:center;gap:10px;}
.seat .input{min-height:74px;font-size:1.45rem;padding-left:20px;border-radius:calc(var(--r) * 1.15);}
.seat > .avatar,.seat-av > .avatar{width:56px;height:56px;font-size:1.35rem;}
.seat:not(.cpu) > .avatar,.seat:not(.cpu) > .seat-av{cursor:pointer;}
.seat-av{position:relative;flex:none;display:inline-flex;}
.seat-tag{position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--gilt,#e3bd62);color:#16102e;box-shadow:0 0 0 2px var(--surface-2,#191d26);}
.seat-tag.link{background:#5b8cff;color:#fff;}
.seat-tag .ico{width:13px;height:13px;stroke-width:3;}
.seat-field{position:relative;flex:1;min-width:0;}
.seat-field .input{padding-right:80px;}
/* The players button: a real raised button (solid face, a lip under it, a soft top highlight) that presses down */
.seat-btn{position:absolute;right:6px;top:calc(50% - 2px);transform:translateY(-50%);width:60px;height:58px;border:0;border-radius:16px;
  display:grid;place-items:center;background:var(--surface-3);color:var(--text);cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--theme-accent,#ffc83d), 0 4px 0 color-mix(in srgb,var(--surface-3) 55%,#000), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .12s ease, box-shadow .12s ease;}
.seat-btn:active{transform:translateY(calc(-50% + 3px));box-shadow:inset 0 0 0 1px var(--theme-accent,#ffc83d), 0 1px 0 color-mix(in srgb,var(--surface-3) 55%,#000), inset 0 1px 0 rgba(255,255,255,.22);}
.seat-btn .ico{width:31px;height:31px;}
.seat{transition:transform .16s ease;}
.seat.drag{position:relative;z-index:3;transition:none;}
.seat.drag .seat-field .input{box-shadow:0 10px 26px rgba(0,0,0,.45),inset 0 0 0 2px var(--accent,rgba(255,255,255,.3));}
.seat-grip{flex:none;display:grid;place-items:center;width:44px;height:74px;margin-left:-4px;padding:0;border:0;border-radius:14px;background:transparent;color:var(--text-3);cursor:grab;touch-action:none;}
.seat-grip:active,.seat.drag .seat-grip{cursor:grabbing;color:var(--text);}
.seat-grip .ico{width:38px;height:38px;}
.seat.cpu .input{color:var(--text-2);background:var(--w04);}
.k-names{display:flex;flex-direction:column;gap:6px;}
.k-name{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:0 8px 0 10px;border:0;border-radius:var(--r);
  background:var(--w06);color:var(--text);font-weight:800;font-size:1.05rem;text-align:left;transition:transform .12s var(--spring), background .15s;}
button.k-name:active{transform:scale(.97);background:var(--w12);}
.k-name.used{opacity:.45;}
.k-name .grow{display:flex;flex-direction:column;}
.k-name .avatar{color:var(--text);}
.k-plays{font-size:.75rem;font-weight:700;color:var(--text-3);}
.k-you{width:44px;text-align:center;font-size:.75rem;font-weight:800;color:var(--text-3);letter-spacing:.04em;}
.k-name .icon-btn{width:44px;height:44px;}
.k-name .icon-btn .ico{width:20px;height:20px;}
.seat .cpu{font-size:.85rem;font-weight:800;color:var(--text-3);padding:0 6px;white-space:nowrap;}
.quick{display:flex;flex-wrap:wrap;gap:6px;}
.quick .chip{min-height:40px;padding:0 14px 0 5px;font-size:.95rem;color:var(--text);background:var(--w09);}
.quick .chip .avatar{color:var(--text);}

/* ── Win / result overlay ─────────────────────────────────────────────── */
.k-win{
  position:fixed;inset:0;z-index:450;display:flex;align-items:center;justify-content:center;padding:24px;
  background:var(--win-shade);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .3s;
}
.k-win.show{opacity:1;}
.k-win-notes{margin:12px 0 2px;padding:10px 12px;border-radius:14px;background:var(--w05);text-align:left;font-size:.84rem;color:var(--text-2);line-height:1.35;}
.k-win-notes b{display:block;margin-bottom:4px;font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);}
.k-win-notes div + div{margin-top:3px;}
.k-win .card{
  width:100%;max-width:380px;text-align:center;background:var(--bg-2);border-radius:var(--r-xl);padding:28px 22px 22px;
  box-shadow:var(--shadow);transform:scale(.7);transition:transform .5s var(--spring);
  max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain;
}
.k-win.show .card{transform:none;}
.k-win .trophy{display:grid;place-items:center;width:84px;height:84px;margin:0 auto;border-radius:50%;background:var(--yellow-fill);color:#3a2600;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.18), 0 0 0 8px color-mix(in srgb,var(--yellow) 20%,transparent);animation:bounce 1s var(--spring) .2s;}
.k-win .trophy .ico{width:42px;height:42px;}
.k-win .trophy.lose{background:var(--surface-3);color:var(--text-2);box-shadow:inset 0 -5px 0 rgba(0,0,0,.18);}
.k-win h2{font-family:var(--display);font-weight:400;font-size:2.2rem;margin:12px 0 4px;}
.k-win .sub{color:var(--text-2);margin-bottom:16px;}
.k-win .rank{display:flex;flex-direction:column;gap:6px;margin:0 0 18px;text-align:left;}
.k-win .rank div{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-sm);background:var(--w05);font-weight:700;}
.k-win .rank div:first-child{background:color-mix(in srgb,var(--yellow) 18%,transparent);}
.k-win .rank .place{width:18px;text-align:center;font-weight:900;color:var(--text-3);}
.k-win .rank div:first-child .place{color:var(--yellow);}
.k-win .rank .p{margin-left:auto;font-weight:900;font-variant-numeric:tabular-nums;}
.k-win .k-acts{display:flex;flex-direction:column;gap:10px;}
.k-confetti{position:fixed;inset:0;z-index:460;pointer-events:none;}

/* ── Toast ────────────────────────────────────────────────────────────── */
.k-toast{
  pointer-events:none;
  position:fixed;left:50%;bottom:calc(var(--safe-b) + 24px);z-index:500;
  padding:12px 20px;border-radius:24px;background:var(--text);color:var(--bg);font-weight:800;
  box-shadow:var(--shadow);transform:translate(-50%,30px);opacity:0;transition:transform .35s var(--spring), opacity .2s;
  width:max-content;max-width:min(520px, calc(100% - 32px));text-align:center;
}
.k-toast.show{transform:translate(-50%,0);opacity:1;}

/* Big centred callout ("Yahtzee!", "Gin!", "+50") */
.k-callout{
  position:fixed;left:50%;top:40%;z-index:470;pointer-events:none;
  font-family:var(--display);font-size:clamp(2rem,11vw,3.2rem);font-weight:400;color:var(--yellow);
  width:max-content;max-width:calc(100vw - 32px);text-align:center;line-height:1.05;text-shadow:0 4px 0 rgba(0,0,0,.35), 0 0 30px rgba(255,200,61,.5);
  transform:translate(-50%,-50%) scale(.4);opacity:0;white-space:normal;
  animation:callout 1.3s var(--spring) forwards;
}
@keyframes callout{
  20%{transform:translate(-50%,-50%) scale(1.1);opacity:1;}
  70%{transform:translate(-50%,-50%) scale(1);opacity:1;}
  100%{transform:translate(-50%,-90%) scale(.9);opacity:0;}
}

/* ── History ──────────────────────────────────────────────────────────── */
.k-hist{display:flex;flex-direction:column;gap:8px;}
.k-hist-i{border-radius:var(--r);background:var(--w05);overflow:hidden;}
.k-hist-h{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;border:0;background:none;color:var(--text);text-align:left;}
.k-hist-h b{display:block;font-weight:900;}
.k-hist-h small{display:block;color:var(--text-3);font-weight:700;font-size:.8rem;}
.k-hist-s{font-weight:900;color:var(--text-2);font-variant-numeric:tabular-nums;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.k-hist-h .chev{color:var(--text-3);transition:transform .2s;}
.k-hist-h .chev .ico{width:18px;height:18px;}
.k-hist-i.open .chev{transform:rotate(180deg);}
.k-hist-i:not(.open) .k-hd{display:none;}
.k-hd{padding:0 14px 14px;display:flex;flex-direction:column;gap:12px;}
.k-hd-meta{font-size:.8rem;font-weight:700;color:var(--text-3);}
.k-hd-players{display:flex;flex-direction:column;gap:5px;}
.k-hd-p{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:12px;background:var(--w04);font-weight:800;}
.k-hd-p.won{background:color-mix(in srgb,var(--yellow) 16%,transparent);}
.k-hd-p .place{width:16px;text-align:center;color:var(--text-3);font-weight:900;}
.k-hd-p .crown{color:var(--yellow);display:flex;}
.k-hd-p .crown .ico{width:16px;height:16px;}
.k-hd-p .sc{font-weight:900;font-variant-numeric:tabular-nums;min-width:32px;text-align:right;}
.k-hd-sum{font-weight:800;color:var(--text-2);}
.k-hd-hl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.k-hd-hl li{display:flex;gap:8px;align-items:flex-start;font-weight:700;color:var(--text);font-size:.92rem;}
.k-hd-hl .ico{width:16px;height:16px;flex:none;color:var(--yellow);margin-top:2px;}
.k-race-wrap{background:rgba(0,0,0,.2);border-radius:12px;padding:6px;}
.k-race{width:100%;height:auto;}
.k-hd-scroll{overflow-x:auto;}
.k-hd-rounds{width:100%;border-collapse:collapse;font-size:.85rem;font-variant-numeric:tabular-nums;}
.k-hd-rounds th,.k-hd-rounds td{padding:5px 6px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap;}
.k-hd-rounds th:first-child{text-align:left;color:var(--text-3);font-weight:800;}
.k-hd-rounds tr:first-child th{font-weight:900;}
.k-hd-rounds td{color:var(--text-2);font-weight:700;}
.k-hd-rounds tr.tot td,.k-hd-rounds tr.tot th{color:var(--text);font-weight:900;border-top:2px solid var(--line-2);}

/* Setup option help: a small "?" next to the label opens a plain-language note */
.k-opt .label{display:flex;align-items:center;gap:8px;}
.k-q{display:inline-grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;
  background:var(--w1);color:var(--text-2);font:900 .78rem/1 var(--font);cursor:pointer;position:relative;}
.k-q::before{content:"";position:absolute;inset:-10px;}
.k-q:active{transform:scale(.9);}
.k-opt.help-on .k-q{background:var(--accent);color:var(--accent-ink);}
.k-help{display:none;margin:8px 2px 0;padding:10px 12px;border-radius:12px;background:var(--w06);
  color:var(--text-2);font-size:.88rem;line-height:1.4;animation:rise .25s var(--ease);}
.k-opt.help-on .k-help{display:block;}

/* Clear-name button inside a seat field */
.seat-clear{position:absolute;right:76px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:50px;height:50px;padding:0;border:0;border-radius:50%;
  background:var(--w12);color:var(--text-2);cursor:pointer;}
.seat-field:has(.seat-clear:not([hidden])) .input{padding-right:136px;}
.seat-clear::before{content:"";position:absolute;inset:-12px -5px -12px -13px;}   /* a 68 x 74 tap area, stopping short of the players button */
.seat-clear .ico{width:22px;height:22px;}
.seat-clear[hidden]{display:none;}

/* Short landscape screens (iPad mini sideways): a compact setup hero keeps the start button in view */
@media (orientation:landscape) and (max-height:820px) and (min-width:700px){
  .setup-hero{flex-direction:row;justify-content:center;gap:16px;padding:6px 0 0;text-align:left;}
  .setup-hero .k-hero-ic .gicon{width:64px;height:64px;}
  .setup-hero h1{font-size:2.2rem;}
}

/* Tablets: sheets keep their main buttons in view, the win card is a little wider */
@media (min-width:700px){
  .k-sheet{max-width:600px;}
  .k-win .card{max-width:440px;}
}
@media (min-width:700px){ .stage:has(.spad){max-width:720px;} }

/* Short screens: the start button stays reachable at the bottom of a long setup */
@media (max-height:820px) and (min-width:700px){
  .setup .k-start{position:sticky;bottom:calc(var(--safe-b) + 12px);z-index:5;box-shadow:0 10px 30px rgba(0,0,0,.5), inset 0 -4px 0 rgba(0,0,0,.2);}
}

/* Pass-and-play hand-off cover: hold to reveal */
.k-ho{position:fixed;inset:0;z-index:49;display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 80% at 50% 20%, var(--ho-glow) 0%, var(--bg) 70%);opacity:1;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.k-ho.show{opacity:1;}
.k-ho.lift{opacity:0;transform:translateY(-12px);transition:opacity .3s, transform .3s var(--ease);}
.k-ho-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;max-width:360px;}
.k-ho-av{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--c);color:#fff;font:400 2.6rem/1 var(--display);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.2), 0 12px 30px rgba(0,0,0,.4);margin-bottom:8px;}
.k-ho-k{font-weight:900;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);}
.k-ho h2{font-family:var(--display);font-weight:400;font-size:2.6rem;line-height:1.05;}
.k-ho-msg{color:var(--text-2);margin-top:2px;}
.k-ho-btn{position:relative;width:140px;height:140px;margin-top:22px;border:0;border-radius:50%;padding:0;cursor:pointer;touch-action:none;
  background:radial-gradient(circle at 50% 35%, var(--surface-3), var(--surface));box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 -6px 0 rgba(0,0,0,.25);
  transition:transform .2s var(--spring);color:var(--text);}
.k-ho-btn.holding{transform:scale(.94);}
.k-ho-ring{position:absolute;top:-8px;left:-8px;width:calc(100% + 16px);height:calc(100% + 16px);display:block;pointer-events:none;}
.k-ho-ring svg{display:block;width:100%;height:100%;max-width:none;transform:rotate(-90deg);}
.k-ho-ring circle{fill:none;stroke-width:6;}
.k-ho-ring .tr{stroke:var(--w1);}
.k-ho-ring .pg{stroke:var(--ho,var(--accent));stroke-linecap:round;}
.k-ho-ic{position:absolute;inset:0;display:grid;place-items:center;}
.k-ho-ic .ico{width:46px;height:46px;}
.k-ho-hint{margin-top:16px;font-weight:800;color:var(--text-2);}

/* iPhone screens have rounded corners: things pinned to a bottom corner need
   extra room so they don't tuck into the curve. Games use these in their
   fixed/absolute bottom-corner controls and bottom bars. */
:root{--corner-x:0px;--corner-y:0px;}
@media (hover:none) and (pointer:coarse){
  :root{--corner-x:14px;--corner-y:10px;}
}
@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  :root{--corner-x:28px;--corner-y:8px;}
}
@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  .gbar{padding-left:calc(12px + var(--corner-x));padding-right:calc(12px + var(--corner-x));}
}
/* Phones sideways: iOS keeps the top edge for its own swipe (Notification Center, Safari's bars) and drops
   taps there, so the bar's back / help / menu buttons stay clear of it even where a game slims the bar down */
@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  .gbar{padding-top:max(16px, var(--safe-t, 0px)) !important;}
}

/* Page fits the screen: no page scroll or rubber-band (kit.js checkFit) */
html.k-fit,html.k-fit body{overscroll-behavior:none;}
html.k-fit body{overflow:hidden;}

/* No accidental text highlighting (long-press or drag on a phone); typing fields still work */
html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
input,textarea,select,[contenteditable],[contenteditable] *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;}

/* Player links: your profile code, linking someone, games to review */
.lk .lk-top{display:flex;align-items:center;gap:14px;margin:2px 0 12px;}
.lk .lk-top b{display:block;font-size:1.1rem;font-weight:900;}
.lk .lk-top small{display:block;color:var(--text-2);font-size:.84rem;line-height:1.3;margin-top:2px;}
.lk .lk-big{margin:6px 0 14px;text-align:center;font-family:var(--display);font-size:2.6rem;letter-spacing:.18em;color:var(--gilt-2,#f6e1a8);
  padding:12px 0;border-radius:16px;background:var(--surface-3);box-shadow:inset 0 0 0 1.5px rgba(227,189,98,.35);}
.lk .lk-code{text-transform:uppercase;letter-spacing:.3em;text-align:center;font-size:1.4rem;font-weight:900;margin-top:4px;}
.lk .lk-msg{min-height:1.2em;margin:8px 2px 0;color:var(--text-2);font-size:.88rem;}
.lk .lk-sw{display:flex;align-items:center;gap:12px;margin:16px 0 6px;cursor:pointer;}
.lk .lk-sw b{display:block;font-weight:800;}
.lk .lk-sw small{display:block;color:var(--text-2);font-size:.82rem;}
.lk-rev{display:flex;flex-direction:column;gap:10px;}
.lk-item{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:var(--surface-3);}
.lk-item b{display:block;font-weight:800;}
.lk-item small{display:block;color:var(--text-2);font-size:.8rem;margin-top:2px;}
.lk-btns{display:flex;flex-direction:column;gap:6px;flex:none;}
.icon-btn.lk-on{color:var(--gilt,#e3bd62);}
/* Linked players (account menu) and the remove choices */
.lk-people{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.lk-person{display:flex;align-items:center;gap:4px;border-radius:var(--r);background:var(--w06);padding-right:6px;}
.lk-who{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 12px;border:0;background:none;color:var(--text);text-align:left;border-radius:var(--r);}
.lk-who:active{background:var(--w08);}
.lk-who b{display:block;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lk-who small{display:block;color:var(--text-2);font-size:.8rem;margin-top:1px;}
.lk-none{margin:4px 2px 0;font-size:.88rem;}
.lk-opts{display:flex;flex-direction:column;gap:8px;}
.lk-opt{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:0;border-radius:var(--r);background:var(--w06);color:var(--text);text-align:left;transition:transform .12s var(--spring),background .15s;}
.lk-opt:active{transform:scale(.98);background:var(--w12);}
.lk-opt .ic{display:grid;place-items:center;width:28px;flex:none;color:var(--text-2);}
.lk-opt b{display:block;font-weight:800;}
.lk-opt small{display:block;color:var(--text-2);font-size:.82rem;line-height:1.3;margin-top:2px;}
.lk-opt.danger b,.lk-opt.danger .ic{color:var(--red,#ff6b6b);}
.k-sec{margin:16px 2px 0;}
.k-ini{margin-left:auto;font-family:var(--display);letter-spacing:.14em;color:var(--gilt-2,#f6e1a8);}
/* Game history detail views (hist-view.js) */
.hv{display:flex;flex-direction:column;gap:14px;}
.hv-sec{display:flex;flex-direction:column;gap:8px;min-width:0;}
.hv-h{margin:0;display:flex;align-items:center;gap:7px;font-size:.74rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);}
.hv-h .ico{width:15px;height:15px;}
.hv-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px;}
.hv-stat{display:flex;flex-direction:column;gap:1px;padding:9px 10px;border-radius:12px;background:var(--w05);min-width:0;}
.hv-stat b{font-size:1.15rem;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.15;overflow-wrap:anywhere;}
.hv-stat small{font-size:.72rem;font-weight:800;color:var(--text-3);}
.hv-stat i{font-style:normal;font-size:.72rem;color:var(--text-2);}
.hv-facts{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0;font-size:.9rem;}
.hv-facts dt{color:var(--text-3);font-weight:800;}
.hv-facts dd{margin:0;font-weight:700;min-width:0;}
.hv-snap{align-self:center;width:100%;max-width:340px;border-radius:14px;padding:8px;line-height:0;}
.hv-snap svg{width:100%;height:auto;display:block;}
.hv-snap.f-wood{background:linear-gradient(135deg,#8a5a2b,#5b3716);box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),0 6px 16px -6px rgba(0,0,0,.6);}
.hv-snap.f-felt{background:radial-gradient(120% 120% at 50% 0%,#1f7a4a,#0e4a2b);box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),0 6px 16px -6px rgba(0,0,0,.6);}
.hv-snap.f-blue{background:linear-gradient(180deg,#2457d6,#173b9c);box-shadow:inset 0 0 0 2px rgba(0,0,0,.2),0 6px 16px -6px rgba(0,0,0,.6);}
.hv-snap.f-paper{background:#f6f1e3;box-shadow:0 6px 16px -6px rgba(0,0,0,.6);}
.hv-snap.f-dark{background:#0b0d14;box-shadow:inset 0 0 0 1px var(--w08);}
.hv-cards{display:flex;flex-wrap:wrap;gap:5px;--cw:44px;}
.hv-cards.sm{--cw:38px;}
.hv-cards.fan .pcard+.pcard{margin-left:calc(var(--cw) * -.45);}
.hv-cards .pcard{box-shadow:0 2px 5px rgba(0,0,0,.35);}
.hv-hl{outline:2.5px solid var(--yellow);outline-offset:1px;}
.hv-dice{display:flex;flex-wrap:wrap;gap:6px;--ds:32px;}
.hv-dice .die{pointer-events:none;}
.hv-tiles{display:flex;gap:4px;flex-wrap:wrap;}
.hv-tile{display:grid;place-items:center;width:30px;height:30px;border-radius:6px;font-weight:900;font-size:1rem;background:var(--w08);color:var(--text);box-shadow:inset 0 0 0 1.5px var(--w12);}
.hv-tile.s-g{background:#22a55a;box-shadow:none;color:#fff;}
.hv-tile.s-y{background:#d9a514;box-shadow:none;color:#fff;}
.hv-tile.s-b{background:#3a3f4b;box-shadow:none;color:#fff;}
.hv-tile.s-x{background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--text) 25%,transparent);color:var(--text-3);}
.hv-tile.s-r{background:#c2304b;box-shadow:none;color:#fff;}
.hv-tile.s-w{background:#f4efe1;color:#1b1b1b;box-shadow:none;}
.hv-scroll{overflow-x:auto;}
.hv-tbl{width:100%;border-collapse:collapse;font-size:.84rem;font-variant-numeric:tabular-nums;}
.hv-tbl th,.hv-tbl td{padding:5px 6px;text-align:center;border-bottom:1px solid var(--w06);white-space:nowrap;}
.hv-tbl th:first-child{text-align:left;color:var(--text-3);font-weight:800;}
.hv-tbl tr:first-child th{font-weight:900;color:var(--text-2);}
.hv-tbl td{color:var(--text-2);font-weight:700;}
.hv-tbl td.good{color:#4ade80;} .hv-tbl td.bad{color:#f87171;} .hv-tbl td.hi{color:var(--yellow);font-weight:900;}
.hv-tbl tr.tot td,.hv-tbl tr.tot th{color:var(--text);font-weight:900;border-top:2px solid var(--w15);}
.hv-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:.88rem;}
.hv-log li{display:flex;gap:8px;align-items:baseline;color:var(--text-2);font-weight:600;}
.hv-log li.dot::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--lc);transform:translateY(-1px);}
.hv-log li b{color:var(--text);font-weight:800;flex:none;}
.hv-log.num{counter-reset:hv;}
.hv-log.num li::before{counter-increment:hv;content:counter(hv);flex:none;min-width:18px;color:var(--text-3);font-weight:900;font-size:.78rem;text-align:right;}
.hv-bars{display:flex;flex-direction:column;gap:6px;}
.hv-bar{display:grid;grid-template-columns:minmax(60px,auto) 1fr auto;align-items:center;gap:8px;font-size:.86rem;}
.hv-bar .l{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;}
.hv-bar .t{height:10px;border-radius:5px;background:var(--w07);overflow:hidden;}
.hv-bar .t i{display:block;height:100%;border-radius:5px;}
.hv-bar b{font-weight:900;font-variant-numeric:tabular-nums;}
.hv-chips{display:flex;flex-wrap:wrap;gap:5px;}
.hv-chip{padding:4px 10px;border-radius:999px;font-size:.8rem;font-weight:800;background:color-mix(in srgb,var(--cc,#ffffff) 16%,transparent);color:color-mix(in srgb,var(--cc,#ffffff) 80%,#fff);}
.hv-chip.on{background:var(--cc,var(--yellow));color:#16102e;}
.hv-chip.off{opacity:.45;text-decoration:line-through;}
.hv-who{display:inline-flex;align-items:center;gap:6px;font-weight:800;}

/* ═══════════════════════════════════════════════════════════════════════════
   Themes (Kit.theme). Colours only: surfaces, text, fills, glows. Fonts, the
   candy palette, player colours and table materials stay the same.
   kit.js sets html[data-theme] before first paint from localStorage fgh_theme.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f3f1f9; --bg-2:#ffffff; --surface:#ffffff; --surface-2:#ebe8f5; --surface-3:#dcd8ec;
  --line:rgba(27,23,51,.09); --line-2:rgba(27,23,51,.16); --shade:rgba(30,25,60,.42);
  --text:#1b1733; --text-2:#4b4669; --text-3:#7f7899;
  --yellow:#a06c00; --gold:#a06c00;   /* deep gold: yellow text reads on the pale page (fills use --yellow-fill) */
  --w03:rgba(27,23,51,.03); --w04:rgba(27,23,51,.04); --w05:rgba(27,23,51,.05); --w06:rgba(27,23,51,.06);
  --w07:rgba(27,23,51,.07); --w08:rgba(27,23,51,.08); --w09:rgba(27,23,51,.09); --w1:rgba(27,23,51,.1);
  --w12:rgba(27,23,51,.12); --w14:rgba(27,23,51,.14); --w15:rgba(27,23,51,.15); --w16:rgba(27,23,51,.16);
  --w18:rgba(27,23,51,.18); --w2:rgba(27,23,51,.2);
  --inset:rgba(27,23,51,.07); --inset-2:rgba(27,23,51,.1); --seg:rgba(27,23,51,.08); --seg-track:rgba(27,23,51,.1);
  --glow-1:#d6cdf7; --glow-2:rgba(255,92,154,.16);
  --glass:rgba(243,241,249,.84); --win-shade:rgba(40,35,70,.5); --ho-glow:#dcd4f6;
  --shadow:0 10px 30px rgba(40,30,90,.14); --shadow-sm:0 4px 12px rgba(40,30,90,.1);
  --gilt:#c9962a; --gilt-2:#8d6a1c;
}
html[data-theme="dark"]{
  --bg:#0b0b0f; --bg-2:#141418; --surface:#1a1a20; --surface-2:#23232b; --surface-3:#2f2f39;
  --text:#f4f4f7; --text-2:#b8b8c4; --text-3:#7e7e8c;
  --glow-1:#25252e; --glow-2:rgba(255,255,255,.04);
  --glass:rgba(11,11,15,.82); --win-shade:rgba(0,0,0,.7); --ho-glow:#202028; --shade:rgba(0,0,0,.6);
  --shadow:0 10px 30px rgba(0,0,0,.5); --shadow-sm:0 4px 12px rgba(0,0,0,.4);
}
html[data-theme="midnight"]{
  --bg:#050a18; --bg-2:#0b1530; --surface:#10204a; --surface-2:#162a5c; --surface-3:#1f376f;
  --text:#f1f5ff; --text-2:#b4c3e6; --text-3:#7b8db5;
  --page-bg:linear-gradient(180deg,#123a7c 0%,#0a1f4a 34%,#050a18 100%);
  --glass:rgba(8,20,50,.82); --win-shade:rgba(3,8,24,.72); --ho-glow:#143a78; --shade:rgba(3,8,24,.6);
}
html[data-theme="forest"]{
  --bg:#04110b; --bg-2:#0a1f15; --surface:#0f2b1d; --surface-2:#153a28; --surface-3:#1d4a34;
  --text:#eef8f1; --text-2:#b2d0bd; --text-3:#78a088;
  --page-bg:linear-gradient(180deg,#0f5234 0%,#083322 34%,#04110b 100%);
  --glass:rgba(6,24,15,.82); --win-shade:rgba(2,10,6,.72); --ho-glow:#0f4a30; --shade:rgba(2,10,6,.6);
}
html[data-theme="velvet"]{
  --bg:#1f060e; --bg-2:#2d0a16; --surface:#3a0f1f; --surface-2:#4b1529; --surface-3:#601c35;
  --text:#fff3f5; --text-2:#e6bcc7; --text-3:#b3808f;
  --red:#ff6b7a;
  --page-bg:
    radial-gradient(120% 70% at 50% -10%, #7a1a34 0%, transparent 60%),
    radial-gradient(90% 50% at 50% 110%, #4a0f22 0%, transparent 70%),
    var(--bg);
  --glass:rgba(31,6,14,.82); --win-shade:rgba(20,4,10,.72); --ho-glow:#5a1428; --shade:rgba(20,4,10,.6);
}
html[data-theme="parchment"]{
  color-scheme:light;
  --bg:#eee3c6; --bg-2:#f7efdc; --surface:#f7efdc; --surface-2:#e7d9b6; --surface-3:#d8c59a;
  --line:rgba(70,45,10,.12); --line-2:rgba(70,45,10,.2); --shade:rgba(60,40,10,.45);
  --text:#2c2212; --text-2:#4d3d20; --text-3:#6e5a36;
  --yellow:#a06c00; --gold:#a06c00;
  --w03:rgba(70,45,10,.03); --w04:rgba(70,45,10,.04); --w05:rgba(70,45,10,.05); --w06:rgba(70,45,10,.06);
  --w07:rgba(70,45,10,.07); --w08:rgba(70,45,10,.08); --w09:rgba(70,45,10,.09); --w1:rgba(70,45,10,.1);
  --w12:rgba(70,45,10,.12); --w14:rgba(70,45,10,.14); --w15:rgba(70,45,10,.15); --w16:rgba(70,45,10,.16);
  --w18:rgba(70,45,10,.18); --w2:rgba(70,45,10,.2);
  --inset:rgba(70,45,10,.08); --inset-2:rgba(70,45,10,.12); --seg:rgba(70,45,10,.1); --seg-track:rgba(70,45,10,.14);
  --glow-1:#f8efd6; --glow-2:rgba(190,120,40,.18);
  --glass:rgba(238,227,198,.85); --win-shade:rgba(70,50,20,.5); --ho-glow:#e4d3a6;
  --shadow:0 10px 30px rgba(80,55,15,.16); --shadow-sm:0 4px 12px rgba(80,55,15,.12);
  --gilt:#b8862a; --gilt-2:#7d5a12;
}
/* Light themes (Light, Parchment): ink that reads on a pale page. Tables (felt, wood) keep their own
   bright colours above. Colours that were picked for a dark page (green, red, orange, blue) go deeper,
   yellow fills stay bright, and text in a player's colour is blended toward the text colour. */
html[data-theme="light"],html[data-theme="parchment"]{--green:#1c8a4a;--red:#cc2f3f;--orange:#c0561a;--blue:#2668c9;--yellow-fill:#f2b62a;}
html[data-theme="light"] :is(.btn-green,.btn-blue):not(:is(.felt,.wood,.felt-in) *),html[data-theme="parchment"] :is(.btn-green,.btn-blue):not(:is(.felt,.wood,.felt-in) *){--b-ink:#fff;}
html[data-theme="light"] :is(.turn,.score.on .nm,.pbar.on .sub,.pchip.on .sub,.readout .who,.turnline,.mtag.on .st,.mtag .cnt),
html[data-theme="parchment"] :is(.turn,.score.on .nm,.pbar.on .sub,.pchip.on .sub,.readout .who,.turnline,.mtag.on .st,.mtag .cnt){color:color-mix(in srgb,var(--c,var(--accent)) 45%,var(--text));}
html[data-theme="light"] .rules h3,html[data-theme="parchment"] .rules h3{color:color-mix(in srgb,var(--accent) 50%,var(--text));}
/* the card sort toggle (cards.js) off the table */
html[data-theme="light"] .csort:not(:is(.felt,.wood,.felt-in) *),html[data-theme="parchment"] .csort:not(:is(.felt,.wood,.felt-in) *){background:var(--seg-track);box-shadow:none;}
html[data-theme="light"] .csort:not(:is(.felt,.wood,.felt-in) *) button,html[data-theme="parchment"] .csort:not(:is(.felt,.wood,.felt-in) *) button{color:var(--text-2);}
html[data-theme="light"] .csort:not(:is(.felt,.wood,.felt-in) *) button[aria-pressed="true"]::before,html[data-theme="parchment"] .csort:not(:is(.felt,.wood,.felt-in) *) button[aria-pressed="true"]::before{background:var(--bg-2);box-shadow:inset 0 0 0 1.5px var(--accent);}
html[data-theme="light"] .csort:not(:is(.felt,.wood,.felt-in) *) .csg-s i,html[data-theme="parchment"] .csort:not(:is(.felt,.wood,.felt-in) *) .csg-s i{color:var(--red) !important;}
/* Theme picker (Kit.theme.pick): one swatch per theme, painted in its own colours */
.k-themes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px;}
.k-theme{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;border:0;background:none;color:var(--text);font-weight:800;font-size:.86rem;}
.k-theme .sw{width:100%;aspect-ratio:1/.78;border-radius:16px;position:relative;overflow:hidden;background:var(--t-bg);
  box-shadow:inset 0 0 0 1.5px var(--line-2), var(--shadow-sm);transition:transform .15s var(--spring);}
.k-theme .sw i{position:absolute;left:12%;right:12%;height:14%;border-radius:999px;background:var(--t-s);}
.k-theme .sw i:nth-child(1){top:18%;width:40%;right:auto;background:var(--t-t);height:11%;}
.k-theme .sw i:nth-child(2){top:40%;}
.k-theme .sw i:nth-child(3){top:62%;right:auto;width:50%;}
.k-theme .sw b{position:absolute;right:10%;bottom:12%;width:22px;height:22px;border-radius:50%;background:var(--t-a);}
.k-theme:active .sw{transform:scale(.95);}
.k-theme.on .sw{box-shadow:0 0 0 3px var(--bg-2),0 0 0 6px var(--accent);}
.k-theme .ck{display:none;position:absolute;left:10%;bottom:10%;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-ink);place-items:center;}
.k-theme .ck .ico{width:14px;height:14px;stroke-width:3;}
.k-theme.on .ck{display:grid;}

/* Turn-your-phone cover (Kit.init orient): over everything, game paused behind it */
.k-rotate{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;
  background:rgba(8,6,20,.94);color:#fbf8ff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.k-rotate b{font-size:1.3rem;font-weight:900;margin-top:14px;}
.k-rotate span{color:#c9c1e6;font-weight:700;font-size:.95rem;max-width:300px;}
.k-rot-home{margin-top:22px;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 20px;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fbf8ff;font:inherit;font-weight:800;font-size:.95rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);}
.k-rot-home span{color:inherit;font-size:inherit;}
.k-rot-home .ico{width:18px;height:18px;}
.k-rot-home:active{transform:scale(.96);background:rgba(255,255,255,.2);}
.k-rot-ph{width:54px;height:92px;border-radius:12px;border:4px solid #fbf8ff;position:relative;animation:k-rot 2.4s var(--ease) infinite;}
.k-rot-ph i{position:absolute;left:50%;bottom:6px;width:16px;height:4px;margin-left:-8px;border-radius:2px;background:#fbf8ff;}
.k-rotate-portrait .k-rot-ph{animation-name:k-rot-back;}
@keyframes k-rot{0%,20%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
@keyframes k-rot-back{0%,20%{transform:rotate(-90deg)}55%,100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.k-rot-ph{animation:none;}}
/* Preferences: home screen section order (Favorites fixed first) */
.k-ord{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.k-ord-row{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 6px 0 12px;border-radius:var(--r);background:var(--w06);}
.k-ord-row .ic{display:grid;place-items:center;width:28px;color:var(--text-2);}
.k-ord-row .ic svg{width:20px;height:20px;}
.k-ord-row b{display:block;font-weight:800;}
.k-ord-row small{display:block;color:var(--text-3);font-size:.78rem;}
.k-ord-row.fixed{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);}
.k-ord-b{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:12px;background:var(--w08);color:var(--text);}
.k-ord-b svg{width:20px;height:20px;stroke-width:2.6;}
.k-ord-b.up svg{transform:rotate(180deg);}
.k-ord-b:disabled{opacity:.25;}
.k-ord-b:active:not(:disabled){transform:scale(.9);background:var(--w16);}
.k-ord-reset{margin-top:4px;}
/* Game defaults (profile menu): a findable list of games, each with how it starts */
.k-defs .k-sec{margin:16px 0 4px;}
.k-defs button{align-items:center;gap:12px;text-align:left;}
.k-defs button .gic{width:38px;height:38px;flex:none;}
.k-defs button .gic svg{width:100%;height:100%;display:block;}
.k-defs button b{display:block;font-weight:800;}
.k-defs button small{display:block;color:var(--text-3);font-size:.8rem;line-height:1.3;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.k-defs button .grow{min-width:0;}
.k-defs button .chev{color:var(--text-3);display:grid;place-items:center;}
.k-defs button .chev svg{width:18px;height:18px;}
.setup-hero .k-defs-tag{display:inline-block;margin:0 auto 6px;padding:3px 12px;border-radius:99px;background:var(--accent);color:#14102a;font-weight:900;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;}