/* Shared styling for every game's info page (/<game>/): hero, play buttons, ladder card, leaderboard preview,
   "continue" row. Extracted from pool/index.html (the pilot) once the same pattern was proven across games.
   Needs: shared/cards.css (for --ink/--muted/--gold/--panel) loaded first. */
[data-mode="info"] main.table, [data-mode="info"] nav.bar, [data-mode="info"] #modebar{display:none}
/* pool/snooker/golf/darts lock html,body to a fixed, non-scrolling viewport for their live canvas view (own inline
   <style>) — that same rule ships on the info page too since both share one HTML file, so it must be undone here
   or the info page's content (taller than one screen) is simply clipped with no way to reach it. */
html[data-mode="info"], html[data-mode="info"] body{overflow:visible;height:auto}
:root{--line:rgba(255,255,255,.08);--navh:64px}
/* site-wide bottom nav, mirrored from index.html's own — bottom bar on phones, tabs under the header on wide screens */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;background:rgba(8,40,25,.97);background:color-mix(in srgb,var(--felt-deep) 97%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:var(--navh);text-decoration:none;color:var(--muted);
  font-size:11px;font-weight:600;position:relative;transition:color .15s,background .15s}
.nav a i{font-size:19px}
.nav a.on{color:var(--gold)}
@media (hover:hover) and (pointer:fine){ .nav a:not(.on):hover{color:var(--ink);background:rgba(255,255,255,.06)} .nav a.on:hover{background:rgba(255,213,79,.08)} }
[data-mode="info"] #info{padding-bottom:calc(24px + var(--navh))}
.gxcard{background:var(--panel);border-radius:var(--r-lg,16px);border:1px solid var(--line)}
h2.sec{font-size:15px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:26px 2px 10px;display:flex;align-items:center;gap:8px}
h2.sec a{margin-left:auto;text-transform:none;letter-spacing:0;font-size:13px;color:var(--gold);text-decoration:none;font-weight:600}
#info{max-width:640px;margin:0 auto;padding:4px 14px 24px;min-width:0;width:100%}
.gx-hero{padding:16px 16px 16px;margin-top:6px;text-align:center;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(0,0,0,.18))}
.gx-art{height:140px;display:flex;align-items:center;justify-content:center;pointer-events:none;transform:scale(1.8);margin-bottom:60px}
.gx-intro{margin:0 auto 14px;max-width:34em;color:var(--muted);font-size:15px;line-height:1.55}
.gx-how{list-style:none;margin:0 auto;padding:0;display:flex;flex-direction:column;gap:8px;text-align:left;max-width:30em}
.gx-how li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-md,12px);background:rgba(0,0,0,.18);font-size:14px;line-height:1.35}
.gx-hi{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;background:rgba(255,213,79,.14);color:var(--gold);font-size:15px}
.gx-play{display:flex;flex-direction:column;gap:10px}
.gx-slot{display:contents}
.gx-btn{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:72px;padding:12px 16px;border-radius:var(--r-lg,16px);border:1px solid var(--line);background:var(--panel);color:var(--ink);text-decoration:none;text-align:left;font:inherit;cursor:pointer;white-space:normal}
.gx-btn[hidden]{display:none}   /* a button the page script reveals later (e.g. #duelBtn once you are logged in) */
.gx-btn:active{transform:scale(.99)}
/* desktop hover: a bright white edge chases round the button's border, same effect as the home page's game cards (index.html .gcard) */
@property --gang{syntax:'<angle>';inherits:false;initial-value:0deg}
.gx-btn::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;opacity:0;transition:opacity .25s;
  background:conic-gradient(from var(--gang),transparent 0 62%,rgba(255,255,255,.35) 72%,#fff 80%,rgba(255,255,255,.35) 88%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@media (hover:hover) and (pointer:fine){
  .gx-btn:hover::before,.gx-btn:focus-visible::before,.gx-btn.gfade::before{opacity:1;animation:gspin 2.4s linear infinite}
  .gx-btn.gfade:not(:hover)::before{opacity:0;transition:opacity 1s ease-out}   /* moving off: keep it spinning while it fades */
  .gx-btn:hover{border-color:rgba(255,255,255,.18)}
}
@keyframes gspin{to{--gang:360deg}}
@media (prefers-reduced-motion:reduce){.gx-btn:hover::before,.gx-btn:focus-visible::before,.gx-btn.gfade::before{animation:none;background:rgba(255,255,255,.6)}}
.gx-btn.main{background:var(--gold);color:#3b2a00;border-color:transparent;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.gx-btn.daily:not(.main){background:linear-gradient(135deg,rgba(255,213,79,.18),rgba(255,255,255,.04));border-color:rgba(255,213,79,.45)}
.gx-btn.soft{background:rgba(255,255,255,.04)}
.gx-bi{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.1);color:var(--gold);font-size:18px}
.gx-btn.main .gx-bi{background:rgba(0,0,0,.12);color:#3b2a00}
.gx-bi.face{background:none;overflow:hidden}
.gx-btn.main .gx-bi.face{background:none}
.guestgrp{padding:18px 16px;margin:0 0 14px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.gg-faces{display:flex}
.gg-faces .av{margin-left:-10px;border-radius:50%;box-shadow:0 0 0 3px var(--panel)}
.gg-faces .av:first-child{margin-left:0}
.gg-t{margin:0;font-size:14.5px;line-height:1.4;max-width:38em}
.gg-t b{color:var(--gold)}
.guestgrp .gold{padding:11px 18px}
.gx-bt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gx-bt b{font-size:17px;line-height:1.25}
.gx-bt small{font-size:12.5px;color:var(--muted);line-height:1.35}
.gx-btn.main .gx-bt small{color:#5a4300}
.gx-bc{flex:none;color:var(--muted);font-size:13px}
.gx-btn.main .gx-bc{color:#3b2a00}
.gx-next{margin:14px 0;position:relative;overflow:hidden;padding:16px 18px 18px;border-radius:20px;border:2px solid color-mix(in srgb,var(--c,var(--gold)) 70%,#fff 10%);
  background:radial-gradient(130% 90% at 0% 0%,color-mix(in srgb,var(--c,var(--gold)) 38%,transparent),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.07),rgba(0,0,0,.25)),var(--panel);
  box-shadow:0 12px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12)}
.gx-next.pete{border-color:var(--gold);background:radial-gradient(130% 90% at 0% 0%,rgba(255,213,79,.4),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.08),rgba(0,0,0,.28)),var(--panel)}
.gx-nk{position:relative;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--gold)}
.gx-nlv{margin-left:auto;font-size:11px;letter-spacing:0;text-transform:none;font-weight:700;color:#10200f;background:var(--c,var(--gold));border-radius:var(--r-pill,999px);padding:3px 9px}
.gx-ntop{position:relative;display:flex;align-items:center;gap:16px;margin-bottom:12px}
.gx-nface{position:relative;flex:none;line-height:0;border-radius:50%;box-shadow:0 0 0 4px color-mix(in srgb,var(--c,var(--gold)) 85%,#fff),0 10px 24px rgba(0,0,0,.45);animation:gxbob 3.4s ease-in-out infinite}
.gx-nface .av{width:96px;height:96px}
.gx-ncrown{position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-8deg);color:var(--gold);font-size:22px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));z-index:1}
.gx-nbub{position:relative;flex:1;min-width:0;background:#fffdf5;color:#1d2a20;border-radius:var(--r-lg,16px);padding:10px 14px;font-size:15px;line-height:1.35;font-style:italic;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.gx-nbub::before{content:"";position:absolute;left:-9px;top:50%;margin-top:-9px;border:9px solid transparent;border-left:0;border-right-color:#fffdf5}
.gx-nname{position:relative;margin:0;font-size:21px;line-height:1.25}
.gx-nname a{color:var(--ink);text-decoration:none}
.gx-nsub{position:relative;font-size:13px;color:var(--muted);margin-top:4px}
.gx-nacts{position:relative;display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.gx-nacts .sbtn{min-height:44px;justify-content:center}
@keyframes gxbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.gx-guest .gx-nsub{font-size:14px;line-height:1.45;color:var(--ink);margin-top:2px}
.gx-guest .gx-nsub b{color:var(--gold)}
/* the ten-opponent ladder strip (cards.js ladderStripHTML): filled = beaten, gold = play next, padlock = locked */
.gx-lad{position:relative;display:flex;align-items:center;gap:4px;margin:10px 0 0}
.gx-lad>i{flex:1 1 0;min-width:0;height:26px;border-radius:8px;display:grid;place-items:center;font:800 11px/1 system-ui,sans-serif;font-style:normal;border:1px solid rgba(255,255,255,.22);color:var(--muted)}
.gx-lad>i>i{font-size:10px;font-style:normal}
.gx-lad>i.done{background:rgba(76,209,122,.22);border-color:#4cd17a;color:#4cd17a}
.gx-lad>i.open{background:rgba(255,255,255,.1);color:var(--ink)}
.gx-lad>i.now{background:var(--gold);border-color:var(--gold);color:#3b2a00;box-shadow:0 0 0 3px rgba(255,213,79,.28)}
.gx-lad>i.lock{opacity:.6;background:rgba(0,0,0,.18)}
.gx-lad-e{flex:none;font-size:11px;font-weight:800;color:var(--gold);margin-left:2px}
.gx-lnote{position:relative;margin:8px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink)}
.gx-lnote b{color:var(--gold)}
.gx-lnote .guestlink{background:none;border:0;padding:0;color:var(--gold);font:inherit;font-weight:800;text-decoration:underline;cursor:pointer}
.gx-btn.daily.gxp{cursor:default;background:#2e8b57;border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.25)}   /* played: a solid colour, not a tint */
a.gx-btn.daily.gxp{cursor:pointer}
.gx-btn.daily.gxp .gx-bi{background:rgba(255,255,255,.24);color:#fff}
.gx-btn.daily.gxp small{color:rgba(255,255,255,.9)}
.gx-btn.daily.gxp.gxp-lost{background:#c0443f;color:#fff}
.gx-opt-b{display:block;text-align:center;align-self:auto;margin-top:-2px}
.gx-opt{align-self:center;color:var(--ink);font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px;padding:12px 6px;opacity:.9}
.gx-gfaces{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.gx-gfaces .gg-faces{flex:none}
.gx-gfaces .gg-faces .av{filter:grayscale(.7) brightness(.72)}
.gx-gt{flex:1 1 150px;min-width:0;font-size:12.5px;line-height:1.35;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.gx-nface{animation:none}}
@media (max-width:420px){.gx-next{padding:14px}.gx-nface .av{width:72px;height:72px}.gx-ntop{gap:12px}.gx-nbub{font-size:14px}.gx-nname{font-size:18px}}
.gx-podc{overflow:hidden;padding:14px}
.gx-cap{margin:0 0 10px;text-align:center;font-size:12.5px;font-weight:700;color:var(--muted)}
.gx-cap i{color:var(--gold);margin-right:4px}
.gx-row{display:flex;align-items:center;gap:12px;padding:8px 2px;color:var(--ink);text-decoration:none}
.gx-row b{font-weight:700}
.gx-row .v{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:800}
.gx-pod{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:8px;align-items:end;margin:4px 0 2px}
.gx-ps{display:flex;flex-direction:column;align-items:stretch;min-width:0;color:var(--ink);text-decoration:none;text-align:center}
.gx-pp{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:0 2px 8px;min-width:0}
.gx-pav{display:block;border-radius:50%;line-height:0}.gx-ps.r1 .gx-pav{box-shadow:0 0 0 3px var(--gold)}.gx-ps.r2 .gx-pav{box-shadow:0 0 0 3px #cfd8dc}.gx-ps.r3 .gx-pav{box-shadow:0 0 0 3px #d08a4e}
.gx-ps.empty .gx-pav{width:46px;height:46px;background:rgba(255,255,255,.06);box-shadow:none}
.gx-pc{color:var(--gold);font-size:18px;margin-bottom:-2px}
.gx-pn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:13.5px}
.gx-pv{font-variant-numeric:tabular-nums;font-weight:800;font-size:13px;color:var(--gold)}
.gx-pb{display:grid;place-items:center;border-radius:10px 10px 0 0;font-size:22px;font-weight:900;color:rgba(0,0,0,.45)}
.gx-ps.r1 .gx-pb{height:78px;background:linear-gradient(var(--gold),#c99a1a)}
.gx-ps.r2 .gx-pb{height:56px;background:linear-gradient(#e3e9ec,#aab4ba)}
.gx-ps.r3 .gx-pb{height:40px;background:linear-gradient(#dba06a,#a8693a)}
.gx-ps.empty .gx-pb{background:rgba(255,255,255,.07);color:rgba(255,255,255,.25)}
a.gx-ps:hover .gx-pn{text-decoration:underline}
.gx-wait{padding:10px 12px;border-radius:var(--r-lg,16px);border:2px solid color-mix(in srgb,var(--c,var(--gold)) 70%,#fff 10%);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(0,0,0,.18))}
.gx-wface{flex:none;line-height:0;border-radius:50%;box-shadow:0 0 0 3px var(--c,var(--gold)),0 4px 12px rgba(0,0,0,.4);animation:gxbob 3.2s ease-in-out infinite}
.gx-wface .av{width:56px;height:56px}
.gx-wt{display:flex;flex-direction:column;gap:2px;min-width:0}
.gx-wt b{font-size:16px}
.gx-wt small{color:var(--gold);font-style:italic;font-size:13px;line-height:1.3}
.gx-wgo{flex:none;display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:#1d1500;border-radius:var(--r-pill,999px);padding:8px 14px;font-size:14px}
@keyframes gxbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.gx-wface{animation:none}}
.gx-note{margin:10px 2px 0;text-align:center;color:var(--muted);font-size:13px;line-height:1.45}
.gx-note a,.gx-link{color:var(--gold);text-decoration:none;font-weight:700;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.sbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:var(--r-xl,22px);background:var(--gold);color:#1d1500;font-weight:700;text-decoration:none;border:0}
@media (max-width:420px){ .gx-art{height:118px;transform:scale(1.5);margin-bottom:36px} .gx-hero{padding:12px 14px 14px} .gx-intro{font-size:14.5px;margin-bottom:12px} .gx-how li{padding:8px 10px;font-size:13.5px} }

/* ---------- page chrome: the Beat Pete bar, the back link, and the slimmed game header + its menu sheet ----------
   (ported from index.html's .top/.brand/.bword and hub.js's own .back button, so every game page matches the home
   page and the in-app profile/matches pages exactly, instead of each defining its own header). */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--felt-deep) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:calc(8px + env(safe-area-inset-top,0px)) 16px 8px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:1;min-width:0}
.brand picture{display:block;flex:none}
.brand img{width:auto;height:44px;border-radius:0;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.brand small{display:block;color:var(--muted);font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:380px){ .brand small{display:none} }
.onl[hidden]{display:none}
.onl{flex:none;position:relative;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);color:var(--ink);font-size:17px;display:grid;place-items:center;text-decoration:none}
.onl i{color:var(--ink);font-size:17px}
.onl:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.onl .c{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;border-radius:9px;background:#2e9e4f;color:#fff;font:700 11px/18px system-ui,sans-serif;text-align:center;padding:0 4px;box-shadow:0 0 0 2px var(--felt-dark)}
.bell[hidden]{display:none}
.bell{flex:none;position:relative;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:var(--ink);font-size:17px;display:grid;place-items:center;padding:0}
.bell.on i{color:var(--gold)}
.bell:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.bell .n[hidden]{display:none}
.bell .n{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;border-radius:9px;background:#e53935;color:#fff;font:700 11px/18px system-ui,sans-serif;text-align:center;padding:0 4px;box-shadow:0 0 0 2px var(--felt-dark)}
.lang{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.1);display:grid;place-items:center;padding:0}
.lang .flag svg{display:block;width:22px;height:auto;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.lang:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.langpop{position:fixed;z-index:55;min-width:170px;background:var(--m-raise,#1d2923);color:var(--m-text,#f4f8f5);border-radius:14px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:2px}
.langpop .li{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:9px;border:0;background:none;color:inherit;font:600 14px/1.2 system-ui,sans-serif;text-align:left;cursor:pointer}
.langpop .li .flag svg{display:block;width:20px;height:auto;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.langpop .li:hover,.langpop .li:focus-visible{background:rgba(255,255,255,.09)}
.langpop .li.on{color:var(--gold)}
.nlist{display:flex;flex-direction:column;gap:8px}
.nrow{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:14px;background:var(--m-raise,#1d2923);color:var(--m-text,#f4f8f5);min-width:0}
.nrow.new{box-shadow:inset 3px 0 0 var(--m-accent,#ffd54f);background:var(--m-raise2,#26352d)}
.nrow .nface{flex:none;display:block;border-radius:50%}
.nrow .nic{width:40px;height:40px;display:grid;place-items:center;background:var(--m-input,#0b110e);color:var(--m-accent,#ffd54f)}
.nrow .nb{flex:1;min-width:0}
.nrow .nt{font-size:14.5px;line-height:1.35;overflow-wrap:anywhere}
.nrow .nt a{color:inherit;text-decoration:none}
.nrow .ns{font-size:12.5px;color:var(--m-muted,#b9c9bf);margin-top:4px;line-height:1.5}
.nrow .ns a{color:var(--m-accent,#ffd54f);font-weight:700;text-decoration:none;white-space:nowrap}
.nnone{margin:6px 0;color:var(--m-muted,#b9c9bf);font-size:14px;line-height:1.45;display:flex;gap:10px;align-items:center}
.nall{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:10px;border-radius:var(--r-md,12px);background:var(--m-raise,#1d2923);color:var(--m-accent,#ffd54f);font-weight:700;font-size:14px;text-decoration:none}
.bword{display:flex;flex-direction:column;min-width:0}
.bword b{font-size:20px;line-height:1.1;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.back{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-size:14px;padding:10px 0;background:none;border:0;min-height:44px}
.crumbs{display:flex;align-items:center;gap:8px;padding:10px 0;font-size:14px;color:var(--muted);min-height:44px}
.crumbs a{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{font-size:10px;opacity:.6}
.crumbs .cur{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gh{position:relative;display:flex;align-items:center;gap:10px;padding:2px 0 10px;background:none}
.gh h1{flex:1;min-width:0;font-size:22px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gh h1 small{display:block;font-size:12.5px;font-weight:500;color:var(--muted);white-space:normal}
.hbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 11px;border-radius:10px;border:0;flex:none;
  background:rgba(255,255,255,.12);color:var(--ink);font:600 14px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
/* the info page's Rules button always says the word — even on a phone there's plenty of room (each game's inline CSS hides it for the in-game header) */
#info .gh #rulesBtn .txt{display:inline !important}
#info .gh #rulesBtn{width:auto !important;padding:0 11px !important}

/* ---------- generic board/piece customiser sheet (checkers is the pilot; any future game's own theme picker can
   reuse this rather than copying pool/index.html's separate, pool-only .pt* block) ---------- */
.box.cxbox{max-width:560px}
.cxprev{display:flex;align-items:center;justify-content:center;gap:16px;margin:4px 0 6px;padding:14px;border-radius:var(--r-md,12px);background:#0b0f0d}
.cxprev .cxboard{display:grid;grid-template-columns:repeat(4,28px);grid-template-rows:repeat(4,28px);border-radius:6px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.cxprev .cxsq{width:28px;height:28px;position:relative}
.cxprev .cxpc{position:absolute;inset:3px;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.4)}
.cxsec h3{display:flex;align-items:center;gap:8px}
.cxsec h3 i{color:#ffd54f}
.cxopt{margin:0 0 10px}
.cxlbl{font-size:12.5px;color:#b9c9bf;margin:0 0 6px}
.cxgrid,.cxgrid.choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

.box button.cxc{overflow:hidden;white-space:normal;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;padding:10px 8px;border-radius:var(--r-md,12px);background:#1b2620;color:#f4f8f5;
  border:0;font:inherit;text-align:center;min-height:0;width:100%;min-width:0}
.cxc .sw{display:block;width:100%;height:64px;border-radius:var(--r-sm,8px);box-shadow:inset 0 0 0 2px rgba(0,0,0,.3)}
.cxc .nm{display:block;width:100%;overflow-wrap:break-word;word-break:break-word;line-height:1.25;font-size:14px;white-space:normal;text-wrap:balance}
.box button.cxc.on{box-shadow:inset 0 0 0 2px #ffd54f;background:#27331f}
.cxc.locked .sw{filter:grayscale(.8) brightness(.7);opacity:.55}
.cxc.locked .nm{color:#b9c9bf}
.cxc .lk{display:block;width:100%;overflow-wrap:break-word;word-break:break-word;font-size:12.5px;line-height:1.35;color:#e3ecd0;font-weight:600;white-space:normal;text-wrap:balance;margin-top:2px}
.cxc .lk i{color:#ffd54f}
.cxtier{display:block;font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:#ffd54f}
.cxtier.legendary{color:#ffb74d}
.cx-dots{display:flex;gap:5px;margin-top:6px}
.cx-dots i{display:block;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.12)}
.box button#cxSave:disabled{opacity:.45;cursor:not-allowed}

/* card-fan hero art (rummy, switch, …): prefixed hx- so it never collides with a game's own card-rendering CSS */
.hx-fan7{display:flex}
.hx-fan7 .hx-mc{width:30px;height:42px;font-size:12px;margin:0 -4px;position:relative;border-radius:6px;background:#fffdf8;box-shadow:0 3px 8px rgba(0,0,0,.4);font-family:Georgia,serif;font-weight:700;color:#1b1b1b;padding:4px 5px;flex:none}
.hx-fan7 .hx-mc.r{color:#c62828}
.hx-fan7 .hx-mc:nth-child(1){transform:rotate(-14deg) translateY(6px)}.hx-fan7 .hx-mc:nth-child(2){transform:rotate(-7deg) translateY(2px)}
.hx-fan7 .hx-mc:nth-child(4){transform:rotate(7deg) translateY(2px)}.hx-fan7 .hx-mc:nth-child(5){transform:rotate(14deg) translateY(6px)}

.gx-flash{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px 12px;border-radius:14px;background:rgba(255,213,79,.14);border:1px solid rgba(255,213,79,.35);font-size:14px;line-height:1.35}
.gx-flash>i:first-child{color:var(--gold);flex:none}
.gx-flash span{flex:1;min-width:0}
.gx-flash button{flex:none;width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:var(--ink);cursor:pointer}

/* ---- "carry on" row: same look as the home page's .item.cont (hub.js contRowHTML); gxc- prefixed so nothing collides ---- */
.gxc-list{margin-bottom:14px;background:var(--panel);border-radius:var(--r-lg,16px);border:1px solid var(--line);overflow:hidden}
.gxc-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line);min-height:62px;text-decoration:none;color:inherit;cursor:pointer}
.gxc-item:first-child{border-top:0}
.gxc-item:active{background:rgba(255,255,255,.05)}
.gxc-grow{flex:1;min-width:0}
.gxc-t{font-size:15px;line-height:1.35;overflow-wrap:anywhere;min-width:0}
.gxc-t b{font-weight:700}
.gxc-vs{font-size:13px;font-weight:600;color:var(--muted)}
.gxc-s{font-size:12.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gxc-s.gxc-w{color:var(--gold);font-style:italic}
.gxc-s i{margin-right:4px}
.gxc-s.gxc-idle{font-size:11.5px;margin-top:3px}
.gxc-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.08);color:var(--gold);font-size:15px}
.gxc-wait{flex:none;line-height:0;border-radius:50%;box-shadow:0 0 0 3px var(--c,var(--gold)),0 4px 12px rgba(0,0,0,.4);animation:gxbob 3.2s ease-in-out infinite}
.gxc-wait .av{width:52px;height:52px}
.gxc-go{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 13px;border-radius:20px;background:var(--gold);color:#3b2a00;font-weight:700;font-size:13.5px;white-space:nowrap}
@media (max-width:480px){ .gxc-go span{display:none} .gxc-go{width:44px;padding:0;justify-content:center} }
@media (prefers-reduced-motion:reduce){.gxc-wait{animation:none}}

/* the solo Continue row's Forfeit button: green when it costs nothing, red when it would count as a loss (same as the home page) */
.gxc-ff{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 12px;border-radius:var(--r-xl,22px);border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:var(--muted);font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.gxc-ff.safe{color:#c8e6c9;border-color:rgba(129,199,132,.45)}
.gxc-ff.danger{color:#ffcdd2;border-color:rgba(229,115,115,.5)}
.gxc-ff:hover,.gxc-ff:focus-visible{background:rgba(255,255,255,.14)}
@media (max-width:480px){ .gxc-ff span{display:none} .gxc-ff{width:40px;padding:0} }

/* "More games you might like" strip + the small site footer (both stamped in by .claude/build.py) */
.gx-more{margin-top:26px}
.gx-more h2.sec{margin-top:0}
.gx-moreall{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;color:var(--gold);text-decoration:none}
.gx-morelist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gx-morelist a{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 12px;border-radius:14px;background:var(--panel);border:1px solid var(--line);color:var(--ink);text-decoration:none}
.gx-morelist a:active{transform:scale(.98)}
/* phones: two neat rows of two — drop the fifth */
@media (max-width:600px){.gx-morelist{grid-template-columns:repeat(2,minmax(0,1fr))}.gx-morelist a.gx-x{display:none}}
.gx-mi{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,213,79,.14);color:var(--gold);font-size:17px}
.gx-mt{display:flex;flex-direction:column;min-width:0}
.gx-mt b{font-size:14.5px;line-height:1.25}
.gx-mt small{font-size:12px;line-height:1.3;color:var(--muted)}
.sitefoot{text-align:center;font-size:13px;color:var(--muted);padding:28px 12px 6px}
.sitefoot p{margin:0 0 8px;color:var(--muted)}
.sitefoot .foot-copy{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);font-size:12px}
.sitefoot .foot-site{margin-bottom:10px}
.sitefoot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px}
.sitefoot a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.sitefoot .foot-rules{margin-bottom:10px}.sitefoot .foot-rules span{font-weight:700;color:var(--ink)}
.gx-rules{margin:12px 0 0}
/* the pending-friend-requests count on the bottom bar's Friends tab (shared/account.js paintNavBadge) */
.nav a .n.on{background:#2e9e4f}
.nav a .n{position:absolute;top:8px;left:calc(50% + 6px);min-width:17px;height:17px;border-radius:9px;background:#e53935;color:#fff;font-size:10.5px;line-height:17px;text-align:center;padding:0 4px}

/* carry-on row graphic: face + game logo badge (or logo + your avatar) */
.gxc-lead{position:relative;flex:none;display:inline-grid;place-items:center;width:56px;height:56px}
.gxc-lead .gxc-main{width:52px;height:52px;font-size:22px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.gxc-badge{position:absolute;right:-5px;bottom:-4px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--felt-dark);box-shadow:0 0 0 2px var(--felt-dark),0 0 0 3px rgba(255,255,255,.22);color:var(--gold);font-size:12px;overflow:hidden}
.gxc-badge .av{--s:24px;width:24px;height:24px;font-size:10px}
.gx-review{padding:12px 14px 14px;margin-top:12px}.gx-review .sec{margin:0 0 8px}.gx-review .gx-intro{text-align:left;margin:0 0 10px;max-width:none}

/* loading placeholders keep roughly the final height so the page doesn't jump when the real content arrives */
.gx-next>.skel{height:230px!important}
.gx-podc>.skel{height:150px!important}
/* hub / puzzles 'about' text + FAQ (build.py hub-about marker; data in .claude/hub_content.json) */
.gx-about{padding:14px 16px 6px;margin-top:16px;line-height:1.55;font-size:var(--fs-md,15px)}
.gx-about .sec{margin:0 0 8px}
.gx-about p{margin:0 0 10px;color:var(--ink)}
.gx-about a{color:var(--gold);font-weight:600}
.gx-qh{margin:14px 0 6px;font-size:var(--fs-lg,18px)}
.gx-q{border-top:1px solid var(--line);padding:10px 0 2px}
.gx-q h3{margin:0 0 4px;font-size:var(--fs-md,15px)}
.gx-q p{color:var(--muted)}
/* ---- Tablet layout for game info pages (iPad), no HTML changes ----
   768-899px: one column, a wider card.  >=900px: two columns. Left = hero (art, intro, how-to); right = Carry on / guest sign-up /
   daily puzzle / next opponent / Play buttons / customise / leaderboard. Everything else (review, about, more games, footer) spans both below.
   Rows are explicit so the columns stack independently (the 1fr row soaks up whichever column is taller). */
@media (min-width:768px){
  #info{max-width:720px;padding-left:20px;padding-right:20px}
}
@media (min-width:900px){
  #info:has(>.gx-hero){max-width:1100px;padding-left:24px;padding-right:24px;display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);grid-template-rows:repeat(11,auto) 1fr;column-gap:24px;align-items:start}
  #info:has(>.gx-hero)>*{grid-column:1/-1;min-width:0}
  #info:has(>.gx-hero)>.crumbs{grid-row:1}
  #info:has(>.gx-hero)>header.gh{grid-row:2}
  #info:has(>.gx-hero)>.gx-hero{grid-column:1;grid-row:3/13;margin-top:6px}
  #info:has(>.gx-hero)>#infoCont{grid-column:2;grid-row:3}
  #info:has(>.gx-hero)>#guestGroup{grid-column:2;grid-row:4;margin-top:6px}
  #info:has(>.gx-hero)>.dpz{grid-column:2;grid-row:5;margin-top:6px}
  #info:has(>.gx-hero)>#infoNextSec{grid-column:2;grid-row:6}
  #info:has(>.gx-hero)>h2.sec:has(+ .gx-play){grid-column:2;grid-row:7;margin-top:8px}
  #info:has(>.gx-hero)>.gx-play{grid-column:2;grid-row:8}
  #info:has(>.gx-hero)>#infoCustomise{grid-column:2;grid-row:9}
  #info:has(>.gx-hero)>h2.sec:has(+ #infoPod){grid-column:2;grid-row:10}
  #info:has(>.gx-hero)>#infoPod{grid-column:2;grid-row:11}
  #info:has(>.gx-hero)>#bzToday,#info:has(>.gx-hero)>#wgToday{grid-column:2;grid-row:12}
  #info:has(>.gx-hero)>.gxcard:not(.gx-hero):not(.dpz):not(.gx-about){grid-row:13}
  #info:has(>.gx-hero)>.gx-about{grid-row:14}
  #info:has(>.gx-hero)>.gx-more{grid-row:15}
  #info:has(>.gx-hero)>.sitefoot{grid-row:16}
  #info:has(>.gx-hero)>.gxcard:not(.gx-hero):not(.dpz):not(.gx-about),#info:has(>.gx-hero)>.gx-about,#info:has(>.gx-hero)>.gx-more{margin-top:26px}
}
.gx-stabs{display:flex;gap:6px;margin:0 0 8px}
.gx-stabs button{flex:1;min-height:40px;border:0;border-radius:20px;background:rgba(255,255,255,.08);color:var(--ink);font-weight:700;font-size:14px;cursor:pointer}
.gx-stabs button.on{background:var(--ink);color:#0c4a2e}
.gx-scar{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;align-items:stretch}
.gx-scar::-webkit-scrollbar{display:none}
.gx-scar>section{flex:0 0 100%;scroll-snap-align:start;min-width:0}
.gx-scar>section>h2.sec{display:none}
.gx-scar>section{display:flex;flex-direction:column}   /* both panels as tall as the taller one, so swiping doesn't change the height */
.gx-scar>section>.gxcard{flex:1;margin:0}
.gx-bcar{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.gx-bcar::-webkit-scrollbar{display:none}
.gx-bs{flex:0 0 100%;scroll-snap-align:start;min-width:0}
.gx-bdots{display:flex;justify-content:center;gap:2px;margin-top:8px}
.gx-bdots button{width:28px;height:22px;border:0;background:none;padding:0;display:grid;place-items:center;cursor:pointer}
.gx-bdots button::before{content:"";width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.35);transition:width .25s,background .25s}
.gx-bdots button.on::before{width:20px;background:var(--gold)}
.gx-lb li.gx-you a{background:rgba(76,209,122,.16);box-shadow:inset 0 0 0 1px #4cd17a}
.gx-lb li.gx-you small{color:#8be0a4;font-weight:600}
.gx-lb li.gx-gap{text-align:center;color:var(--muted);line-height:.7;letter-spacing:3px;padding:0}
.gx-lb{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.gx-lb a{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:12px;background:rgba(255,255,255,.05);text-decoration:none;color:inherit;min-width:0}
.gx-lb li:first-child a{background:rgba(255,213,79,.12)}
.gx-lr{width:22px;flex:none;text-align:center;font-weight:800;opacity:.8}.gx-la{flex:none;display:inline-flex}
.gx-ln{flex:1;min-width:0;font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-lv{font-variant-numeric:tabular-nums;font-weight:800;font-size:13px;color:var(--gold);white-space:nowrap}
.gx-podc>.skel{height:150px!important}

/* played today and lost (Word not found, a missed daily): red, still counts as played */
.gx-flash.dpx-played.gx-lost{color:#ff6b6b;border-color:#ef5350}
.gx-flash.dpx-played.gx-lost i{color:#ff6b6b}

/* @stats-card */
/* ---- "Your stats" card on the solo games' info pages (shared/gamepage.js) ---- */
.gx-stats{padding:12px}
.gx-spills{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.gx-spills button{font:inherit;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);cursor:pointer}
.gx-spills button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#1b1b1b}
.gx-sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gx-st{background:rgba(255,255,255,.05);border-radius:12px;padding:10px 4px;text-align:center;min-width:0}
.gx-st b{display:block;font-size:19px;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-st span{display:block;margin-top:2px;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.gx-st.hi b{color:var(--gold)}
.gx-sdist{display:grid;gap:4px;margin-top:12px}
.gx-sdist>div{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.gx-sdist i{display:block;height:16px;min-width:18px;border-radius:4px;background:rgba(255,255,255,.18);font-style:normal;color:var(--ink);font-weight:700;padding:0 6px;line-height:16px;text-align:right;box-sizing:border-box}
.gx-sdist i.top{background:var(--gold);color:#1b1b1b}
@media (max-width:340px){.gx-sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gx-sgrid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.gx-sgrid.four .gx-st b{font-size:17px}
.gx-sgrid.four .gx-st span{font-size:10px}
.gx-crowd{display:block;width:100%;height:auto;margin-top:12px}
.gx-sd{font-size:9px;fill:var(--muted)}
/* @/stats-card */