/* Shared table + card styles for krischambers.co.uk/games */
:root{
  --felt:#146b43; --felt-dark:#0c4a2e; --felt-deep:#082f1d;
  --back:#7b1f2c; --suit-h:#c62828; --suit-d:#c62828; --suit-s:#1b1b1b; --suit-c:#1b1b1b; --ink:#f3f7f4; --muted:#a9c9b7;
  --gold:#ffd54f; --card:#fffdf8; --red:#c62828; --black:#1b1b1b;
  --panel:rgba(0,0,0,.2);
  /* card width: scales with the shorter screen side so landscape phones fit too */
  --cw:clamp(46px, min(11vw, 10.5vh), 84px);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
html{overscroll-behavior:none}
/* the same felt on the root as on the body: the root's background paints the whole screen (under the status bar and the home indicator in the installed app),
   so if a page ever ends short of the edge nothing mismatched can show */
html{background:radial-gradient(ellipse at 50% 40%, var(--felt) 0%, var(--felt-dark) 75%, var(--felt-deep) 100%) fixed;background-color:var(--felt-dark)}
/* app feel: the page never pans sideways */
html,body{overflow-x:hidden;max-width:100%;overscroll-behavior-x:none}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);
  background:radial-gradient(ellipse at 50% 40%, var(--felt) 0%, var(--felt-dark) 75%, var(--felt-deep) 100%) fixed;
  background-color:var(--felt-dark);
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  padding-left:var(--safe-l);padding-right:var(--safe-r);padding-bottom:calc(var(--safe-b) * .4);   /* 40% of the home-indicator inset (like the floating bar), not all of it: the full inset was a dead dark-green band on pages without a bottom bar */
}

/* header */
.gh{display:flex;align-items:center;gap:10px;padding:calc(8px + var(--safe-t)) 16px 8px;background:none}
.gh a.back{color:var(--muted);text-decoration:none;font-size:15px;padding:6px 4px;white-space:nowrap}
.gh h1{margin:0;font-size:20px;letter-spacing:.3px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gh h1 small{font-weight:400;color:var(--muted);font-size:13px;margin-left:8px}
/* no game subtitle in the header ("#3 · today's word", "Beginner", …): it wraps messily on a phone. The daily-challenge tag is the one exception. */
.gh h1 small:not(:has(.dailytag)){display:none}
@media (max-width:480px){ .gh{gap:6px;padding-left:10px;padding-right:10px} .gh h1{font-size:18px} .gh h1 small{display:none} .gh a.back .txt{display:none} }

/* buttons */
button{
  font:inherit;font-size:14px;font-weight:600;border:0;border-radius:10px;padding:10px 14px;min-height:40px;cursor:pointer;
  background:#f3f7f4;color:#0c4a2e;transition:transform .1s, opacity .2s, background .2s;white-space:nowrap;
}
button:active{transform:scale(.96)}
button:disabled{opacity:.35;cursor:default}
button.ghost{background:rgba(255,255,255,.12);color:var(--ink)}
button.ghost.on{background:rgba(255,255,255,.3)}
button.gold{background:var(--gold);color:#3b2a00}
button.red{background:#e57373;color:#3a0000}
nav.bar button.ghost.safe{background:rgba(129,199,132,.3);color:#e8f5e9;box-shadow:inset 0 0 0 1px rgba(165,214,167,.75)}
nav.bar button.ghost.danger{background:rgba(229,115,115,.3);color:#ffebee;box-shadow:inset 0 0 0 1px rgba(255,138,128,.8)}
@media (max-width:480px){ button{padding:9px 11px;font-size:13px} }

main.table{flex:1;display:flex;flex-direction:column;gap:10px;padding:10px 16px 14px;max-width:1100px;width:100%;margin:0 auto;min-height:0}
@media (max-width:640px){ main.table{padding:8px 10px 10px;gap:8px} }

.panel{background:var(--panel);border-radius:var(--r-md,12px);padding:8px 10px}
.status{min-height:40px;text-align:center;line-height:1.45;font-size:14px;background:var(--panel);border-radius:10px;padding:8px 12px}
.status b{color:var(--gold)}
.status.warn{color:#ffab91}

/* cards */
.card{
  width:var(--cw);height:calc(var(--cw)*1.4);border-radius:calc(var(--cw)*.09);background:var(--card);color:var(--black);
  position:relative;flex:none;box-shadow:0 2px 5px rgba(0,0,0,.35);font-weight:700;
  font-family:Georgia,"Times New Roman",serif;transition:transform .15s, box-shadow .15s, margin .15s;
}
.card.red{color:var(--red)}
.card .tl{position:absolute;top:5%;left:6%;line-height:.95;text-align:center;font-size:calc(var(--w,var(--cw))*.26)}
.card .tl span{display:block;font-size:.85em}
.card .br{position:absolute;bottom:5%;right:6%;line-height:.95;text-align:center;font-size:calc(var(--w,var(--cw))*.26);transform:rotate(180deg)}
.card .br span{display:block;font-size:.85em}
.card .c{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--w,var(--cw))*.52)}
.card .c.face{font-size:calc(var(--w,var(--cw))*.36);letter-spacing:-1px}
.card.back,.cardback{
  background:var(--back-img, 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)), var(--back);
  background-size:var(--back-size, auto);
  background-position:var(--back-pos, 0 0);
  border:3px solid #fffdf8;
}
/* card face styles (Settings → Card design; Theme sets html[data-face]). Classic is the :root defaults above. Lowered with :where() so .sel / .hint glows still win. */
html[data-face="cream"]{--card:#f6ebd0}
html[data-face="sepia"]{--card:#efe0c0;--black:#3b2a1a;--red:#8a2f1e;--suit-h:#8a2f1e;--suit-d:#8a2f1e;--suit-s:#3b2a1a;--suit-c:#3b2a1a}
html[data-face="gilded"]{--card:#fff8e1;--red:#b3261e;--suit-h:#b3261e;--suit-d:#b3261e;--suit-s:#1a2238;--suit-c:#1a2238;--black:#1a2238}
html[data-face="gilded"] .card:where(:not(.back,.sel,.hint)){box-shadow:inset 0 0 0 calc(var(--cw)*.035) #d4a72c,0 2px 5px rgba(0,0,0,.35)}
html[data-face="midnight"]{--card:#1c2333;--black:#e8ecf4;--red:#ff7676;--suit-h:#ff7070;--suit-d:#ffa24d;--suit-s:#e8ecf4;--suit-c:#6fe0a2}
html[data-face="neon"]{--card:#0d0f1a;--black:#35e0ff;--red:#ff3d9a;--suit-h:#ff3d9a;--suit-d:#ffb300;--suit-s:#35e0ff;--suit-c:#7dff6b}
html[data-face="neon"] .card:where(:not(.back,.sel,.hint)){box-shadow:inset 0 0 0 calc(var(--cw)*.025) rgba(53,224,255,.7),0 0 8px rgba(53,224,255,.35),0 2px 5px rgba(0,0,0,.35)}
html[data-face="neon"] .card:where(:not(.back)) :is(.tl,.br,.c){text-shadow:0 0 6px currentColor}
/* suit colours (four-colour faces are switched on by Theme via html[data-suits="4"]) */
html[data-suits="4"]{--suit-d:#1565c0;--suit-c:#2e7d32}
.card.s-h{color:var(--suit-h)}.card.s-d{color:var(--suit-d)}.card.s-s{color:var(--suit-s)}.card.s-c{color:var(--suit-c)}
.card.back > *{display:none}
.card.sel{box-shadow:0 0 0 3px var(--gold),0 8px 16px rgba(0,0,0,.45)}
.card.hint{box-shadow:0 0 0 3px #81d4fa,0 0 18px #81d4fa}
.slot{width:var(--cw);height:calc(var(--cw)*1.4);border:2px dashed rgba(255,255,255,.25);border-radius:calc(var(--cw)*.09);flex:none;position:relative}
.slot .glyph{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.25);font-size:calc(var(--cw)*.45)}
/* compact card: only the corner index (for overlapped rows) */
.card.small .c,.card.small .br{display:none}
/* picture cards (J Q K): framed figure panel inset from the corners; the art is Cards.courtArt()'s SVG backgrounds.
   The corner indices come after it and sit on a card-coloured patch, so they stay exactly as readable. */
.card .fig{position:absolute;left:18%;right:18%;top:6%;bottom:6%;border-radius:calc(var(--w,var(--cw))*.04);
  box-shadow:inset 0 0 0 max(1px,calc(var(--w,var(--cw))*.014)) currentColor;background-position:center;background-size:100% 100%;background-repeat:no-repeat;pointer-events:none}
.card .fig ~ .tl,.card .fig ~ .br{background:var(--card);box-shadow:0 0 0 calc(var(--w,var(--cw))*.025) var(--card);border-radius:calc(var(--w,var(--cw))*.03)}
html[data-large="1"] #board .card .fig{top:34%;left:12%;right:12%;bottom:5%}   /* larger cards: big index on top, single bust below */
.card.small .fig,.minis .card .fig{display:none}

/* chips / money */
.chip{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;font-weight:800;font-size:13px;
  border:4px dashed rgba(255,255,255,.75);box-shadow:0 3px 6px rgba(0,0,0,.4);color:#fff;cursor:pointer;flex:none}
.chip:active{transform:scale(.94)}
.chip[data-v="1"]{background:#eceff1;color:#263238;border-color:#90a4ae}
.chip[data-v="5"]{background:#e53935}
.chip[data-v="10"]{background:#1e88e5}
.chip[data-v="25"]{background:#43a047}
.chip[data-v="50"]{background:#fb8c00}
.chip[data-v="100"]{background:#212121}
.chip[data-v="500"]{background:#8e24aa}
.money{font-variant-numeric:tabular-nums;font-weight:700;color:var(--gold)}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;
  padding:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(6px + var(--safe-b) * .3) calc(16px + var(--safe-l));z-index:50}   /* bottom: only 30% of the home-indicator inset, like the floating bar, so a tall pop-up doesn't leave a dead strip under it in the installed app */
.modal.hidden{display:none}
/* while any pop-up is open it owns the whole screen: the floating bottom bar / site tabs would otherwise show dimly through the overlay (a dark green band that makes the
   pop-up look like it stops short of the bottom edge, worst in the installed iPhone app) */
body:has(> .modal:not(.hidden)) > nav.bar, body:has(> .modal:not(.hidden)) > nav.nav,
body:has(> .amodal) > nav.bar, body:has(> .amodal) > nav.nav{visibility:hidden;pointer-events:none}
.box{background:#fdfcf8;color:#1b2a22;border-radius:var(--r-lg,16px);padding:20px 22px;max-width:520px;width:100%;max-height:calc(100dvh - 22px - var(--safe-t) - var(--safe-b) * .3);overflow:auto;box-shadow:0 20px 50px rgba(0,0,0,.5);-webkit-user-select:text;user-select:text}
/* a "sheet"-flavoured box docks to the bottom of the screen (a mobile action-sheet), rather than floating centred */
.modal:has(> .box.sheet){align-items:flex-end;padding-left:0;padding-right:0;padding-bottom:0}
.box.sheet{border-radius:var(--r-lg,16px) 16px 0 0;max-height:calc(85dvh - var(--safe-t));padding-bottom:calc(20px + var(--safe-b))}
.box h2{margin:0 0 12px;color:#0c4a2e}
.box h3{margin:16px 0 6px;font-size:15px;color:#0c4a2e}
.box p,.box li{font-size:14px;line-height:1.5}
.box ul{padding-left:20px;margin:6px 0}
.box button{background:#0c4a2e;color:#fff}
.box button.ghost{background:#e4ece7;color:#0c4a2e}
.field{margin:12px 0}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:#3b5347}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{background:#e4ece7;color:#0c4a2e;flex:1;min-width:64px}
.seg button.on{background:#0c4a2e;color:#fff}
.box input[type=text]{font:inherit;font-size:16px;padding:9px 10px;border-radius:var(--r-sm,8px);border:1px solid #c6d4cc;width:100%}
.btnrow{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.btnrow > button:only-child{flex:1 1 100%}
/* a link that sits in a button row and looks like a ghost button (e.g. the post-game "Checkers" link back to the game's page) */
.btnrow a.btnlink{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:600;border-radius:10px;padding:10px 14px;min-height:40px;background:rgba(255,255,255,.12);color:var(--ink);text-decoration:none;white-space:nowrap;transition:transform .1s,background .2s}
.btnrow a.btnlink:active{transform:scale(.96)}
/* on a phone the Home button is just the house icon (the word stays in the page for screen readers) */
@media (max-width:560px){
  .btnrow{gap:6px}
  /* the post-game row with the game's hub link: Home / hub / Review share the first row, the main action (Rematch) gets a full-width row of its own */
  .btnrow:has(#mHub){justify-content:stretch}
  .btnrow:has(#mHub) > :not(#mAgain):not([data-home]){flex:1 1 auto}
  .btnrow:has(#mHub) > #mAgain{flex:1 1 100%}
  .btnrow a.btnlink{padding:9px 11px;font-size:13px}
  .btnrow [data-home],.btnrow #mHome{font-size:0;gap:0;min-width:46px;padding-left:12px;padding-right:12px}
  .btnrow [data-home] i,.btnrow #mHome i{font-size:17px;margin:0}
}
table.res{width:100%;border-collapse:collapse;font-size:14px}
table.res td,table.res th{padding:7px 4px;border-bottom:1px solid #e3e8e5;text-align:left;vertical-align:middle}
table.res th{font-size:12px;color:#5a6f63}
table.res td.n{text-align:right;font-variant-numeric:tabular-nums}
.minis{display:flex;flex-wrap:wrap;gap:2px}
.minis .card{--w:28px;width:28px;height:38px;border-radius:4px;box-shadow:0 0 0 1px #ddd}
.minis .card .c,.minis .card .br{display:none}
.minis .card .tl{font-size:12px;top:3px;left:3px}
.banner{font-size:18px;font-weight:700;margin:4px 0 12px}
.badge{display:inline-block;background:var(--gold);color:#3b2a00;border-radius:6px;padding:1px 6px;font-size:12px;margin-left:6px}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(20px + var(--safe-b));transform:translateX(-50%);background:rgba(0,0,0,.8);color:#fff;padding:10px 16px;border-radius:var(--r-md,12px);font-size:14px;z-index:60;pointer-events:none;opacity:0;transition:opacity .25s}
.toast.show{opacity:1}
.toast{border:1px solid rgba(255,255,255,.85);box-shadow:0 8px 24px rgba(0,0,0,.4)}
@media (max-width:640px){.toast{width:70vw;box-sizing:border-box;text-align:center;white-space:normal}}

@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }

/* dark, high-contrast game dialogs (win, stats, rules, new game) */
.modal{background:rgba(0,0,0,.72)}
.box{background:#121a16;color:#f4f8f5;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px rgba(0,0,0,.7)}
.box h2,.box h3{color:#f4f8f5}
.box p,.box li{color:#dfe8e2}
.box b{color:#fff}
.box button{background:#ffd54f;color:#1d1500}
.box button.ghost{background:#26352d;color:#f4f8f5;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.box button:focus-visible{outline:3px solid #ffd54f;outline-offset:2px}
/* a consistent look for anything that offers a guided tour/walkthrough — the same sky-blue this site already
   uses for in-game hints (e.g. checkers' hint squares), so "this is help" reads the same way everywhere */
.box button.help{background:rgba(129,212,250,.16);color:#81d4fa;box-shadow:inset 0 0 0 1px rgba(129,212,250,.45)}
.box button.help i{margin-right:2px}
@media (hover:hover) and (pointer:fine){ .box button.help:hover{background:rgba(129,212,250,.26)} }
.field label{color:#f4f8f5}
.seg button{background:#26352d;color:#f4f8f5}
.seg button.on{background:#ffd54f;color:#1d1500}
.box input[type=text]{background:#0b110e;color:#f4f8f5;border-color:#5d7a6b}
table.res td,table.res th{border-bottom-color:rgba(255,255,255,.12)}
table.res th{color:#b9c9bf}
.minis .card{box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.badge{background:#ffd54f;color:#1d1500}

/* close (×) on every game dialog */
.box{position:relative}
.box h2{padding-right:40px}
.box button.mx{position:absolute;top:10px;right:10px;width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;background:rgba(255,255,255,.12);color:#d3e0d8;font-size:18px;box-shadow:none}
.box button.mx:hover,.box button.mx:focus-visible{background:rgba(255,255,255,.22);color:#fff}

/* slim dark scrollbars everywhere (no chunky grey system bars) */
@supports not selector(::-webkit-scrollbar){   /* Firefox: standard properties (Chrome would show arrow buttons with these) */
  html,*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}
}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.45)}
::-webkit-scrollbar-button{display:none;width:0;height:0}
/* Beat Pete ladder: locked opponents on the setup sheet */
.box button.lv.locked{opacity:.62;cursor:not-allowed;background:#161d19 !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) !important}
.box button.lv.locked .badge2,.box button.lv.locked .av{filter:grayscale(1) brightness(.75)}
.box button.lv.locked .lockmsg{color:#c4d6cb;font-style:normal}
.box button.lv.locked .lockmsg i{color:#ffd54f;margin-right:4px}
/* guests: Levels 1-3 open, a sign-up banner above the level list */
.guestbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:8px 0 10px;padding:10px 12px;border-radius:var(--r-md,12px);background:linear-gradient(135deg,rgba(255,213,79,.14),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(255,213,79,.35);font-size:13px;line-height:1.4;color:#dfe9e3;white-space:normal}
.guestbar > i{color:#ffd54f;flex:none}
.guestbar > span{flex:1 1 180px;min-width:0}
.guestbar b{color:#ffd54f}
.guestbar button{flex:none;margin-left:auto}
button.guestlink{display:inline;background:none;border:0;box-shadow:none;padding:0;min-height:0;font:inherit;font-weight:700;color:#ffd54f;text-decoration:underline;cursor:pointer;white-space:normal}
/* daily challenge */
.dailytag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;letter-spacing:.3px;color:#1d1500;background:#ffd54f;border-radius:20px;padding:2px 8px;vertical-align:2px}
.dailyhero{display:flex;align-items:center;gap:14px;margin:10px 0 12px;padding:12px;border-radius:14px;background:linear-gradient(135deg,rgba(255,213,79,.14),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(255,213,79,.35)}
.dailyhero b{display:block;font-size:18px;color:#fff}
.dailyhero small{display:block;color:#b9c9bf;font-size:13px;margin-top:2px}
.dailyhero .av.cav{width:64px;height:64px;flex:none}
/* logo in the game header */
.gh a.back{display:inline-flex;align-items:center;gap:6px}
.gh .glogo,.gh .glogo img{display:block}
.gh .glogo img{height:34px;width:auto;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
@media (max-width:480px){ .gh .glogo img{height:30px} }
@media (max-width:420px){ .gh .glogo{display:none} }   /* phones: the game's name needs the room */
/* info-page variant: a small gold badge with the game's own FA icon, in place of the logo image */
.gh .glogo.gicon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--gold);color:#3b2a00;font-size:15px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
@media (max-width:480px){ .gh .glogo.gicon{width:30px;height:30px;font-size:13px} }
/* ---------- coin toss ---------- */
.cointoss{text-align:center}
.cointoss .lead{margin:0 0 16px;color:#b9c9bf;font-size:14px}
.coincall{display:flex;gap:14px;justify-content:center;margin:0 0 14px;flex-wrap:wrap}
.ccbtn{display:flex;flex-direction:column;align-items:center;gap:8px;background:#1a2420 !important;color:#f4f8f5 !important;padding:16px 22px;border-radius:var(--r-lg,16px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);min-width:110px}
.ccbtn:hover,.ccbtn:focus-visible{box-shadow:inset 0 0 0 2px #ffd54f}
.ccbtn b{font-size:15px}
.cf{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;font:800 26px Georgia,"Times New Roman",serif;box-shadow:0 3px 8px rgba(0,0,0,.3),inset 0 0 0 3px rgba(255,255,255,.35)}
.cf-h{background:radial-gradient(circle at 35% 30%,#fff3c4,#e0ad3a 60%,#a8761c);color:#5c3d09}
.cf-t{background:radial-gradient(circle at 35% 30%,#3a4a41,#12201a 70%);color:#ffd54f}
.coinwrap{position:relative;height:120px;display:flex;align-items:center;justify-content:center;margin:6px 0 4px;perspective:600px}
.coin{position:relative;width:88px;height:88px;transform-style:preserve-3d;transform:rotateY(0deg)}
.coin.flip{animation:coinflip 1.25s cubic-bezier(.3,.1,.35,1) forwards}
.coin .cf{position:absolute;inset:0;width:88px;height:88px;backface-visibility:hidden}
.coin .cf-h{transform:rotateY(0deg)}
.coin .cf-t{transform:rotateY(180deg)}
@keyframes coinflip{
  0%{transform:translateY(0) rotateY(0deg) rotateX(0deg)}
  45%{transform:translateY(-46px) rotateY(calc(var(--spins,6) * 180deg * 0.55)) rotateX(10deg)}
  100%{transform:translateY(0) rotateY(calc(var(--spins,6) * 180deg)) rotateX(0deg)}
}
.coinshadow{position:absolute;bottom:6px;width:70px;height:14px;border-radius:50%;background:rgba(0,0,0,.4);filter:blur(3px);transform:scale(1);opacity:.6}
.coinshadow.go{animation:coinshadow 1.25s cubic-bezier(.3,.1,.35,1) forwards}
@keyframes coinshadow{45%{transform:scale(.55);opacity:.25}100%{transform:scale(1);opacity:.6}}
.coinres{min-height:1.6em;margin:8px 0 0;font-size:16px;color:#dfe8e2;opacity:0;transition:opacity .25s}
.coinres.show{opacity:1}
.coinres b{color:#ffd54f;font-size:18px}
@media (prefers-reduced-motion:reduce){.coin.flip,.coinshadow.go{animation:none;transform:none}}

/* ---- pool / snooker: full-screen ("immersive") toggle. Chrome hides; only the table + essential controls remain ---- */
body.imm .gh{min-height:0;height:0;padding:0;margin:0;gap:0;border:0;background:none;overflow:visible;flex:none}
body.imm .gh > *:not(#fsBtn){display:none!important}
body.imm #fsBtn{position:fixed;z-index:40;top:calc(6px + var(--safe-t));right:calc(6px + var(--safe-r));width:40px;min-width:40px;min-height:40px;height:40px;padding:0;background:rgba(0,0,0,.45)}
body.imm main.table{max-width:none;padding-top:calc(6px + var(--safe-t))}
body.imm .rotatehint{display:none}
/* full screen also hides the New / Resign bar (leave full screen with the button to get it back) */
body.imm nav.bar{display:none!important}
.rotatehint{display:none}
@media (orientation:portrait){
  body.imm .rotatehint{display:flex;position:fixed;z-index:39;left:50%;transform:translateX(-50%);bottom:calc(4px + var(--safe-b));align-items:center;gap:6px;padding:4px 12px;border-radius:var(--r-pill,999px);background:rgba(0,0,0,.6);color:#fff;font-size:12px;pointer-events:none}
  body.imm.hint-off .rotatehint{display:none}
}

#bihBtn[hidden]{display:none!important}

/* the bottom bar's New button stays out of the way (solo games); online modes un-hide it as Menu / Resign */
nav.bar button[hidden]{display:none!important}

/* ==========================================================================================================
   COLOUR-BLIND FRIENDLY (opt-in: Settings > Accessibility; Theme sets html[data-cb="1"]; default look unchanged)
   Okabe-Ito palette (vermillion #D55E00, orange #E69F00, sky #56B4E9, bluish green #009E73, blue #0072B2,
   yellow #F0E442, reddish purple #CC79A7) + a non-colour cue (symbol / ring / pattern) wherever colour carried meaning.
   Per-game colours that are drawn in JS (ludo, snakes, darts, dominoes) listen to the kcg:design event instead.
   ========================================================================================================== */
/* playing cards: four distinct suit colours (black / vermillion / blue / teal); suit symbols are unchanged */
html[data-cb="1"]{--suit-h:#c4510a;--suit-d:#0072b2;--suit-s:#1b1b1b;--suit-c:#007a5a}
html[data-cb="1"] .card.red{color:var(--suit-h)}
html[data-cb="1"] .card.s-h,html[data-cb="1"] .card.s-d{color:var(--suit-h)}
html[data-cb="1"] .card.s-d{color:var(--suit-d)}
html[data-cb="1"] .card.s-c{color:var(--suit-c)}
html[data-cb="1"] .pc.r,html[data-cb="1"] .cl.r{color:#c4510a}
html[data-cb="1"] .cl.r{color:#ffb27a}
/* checkers: orange men (solid light ring) vs black men (dashed ring) */
html[data-cb="1"] .pc.red .disc{background:radial-gradient(circle at 35% 30%,#ffd27a,#e69f00 52%,#8a5a00)}
html[data-cb="1"] .mini.red{background:#e69f00;box-shadow:inset 0 0 0 3px #e69f00,inset 0 0 0 5px rgba(255,255,255,.9)}
/* chess: blue legal-move dots / last-move tint instead of green / olive; check gets a ring as well as red */
html[data-cb="1"] #board .sq.dest::after{background:rgba(0,70,140,.6)}
html[data-cb="1"] #board .sq.dest.capdest::after{background:transparent;border-color:rgba(0,70,140,.75)}
html[data-cb="1"] #board .sq.light.last{background-color:#a9d4f0}
html[data-cb="1"] #board .sq.dark.last{background-color:#4f8fbd}
html[data-cb="1"] #board .sq.check{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px #b00020}
/* connect 4: ivory discs (solid ring) vs orange discs (dashed ring) */
html[data-cb="1"]{--red1:#ffffff;--red2:#ececec;--red3:#a3a3a3;--yel1:#ffd27a;--yel2:#e69f00;--yel3:#8a5a00}
html[data-cb="1"] .disc.red i::before{border-color:rgba(20,45,110,.75);border-style:solid;border-width:max(3px,calc(var(--cell)*.07))}
/* backgammon: the dark side gets a blue ring / blue dice instead of red */
html[data-cb="1"] .mini.b{box-shadow:inset 0 0 0 2px #262626,inset 0 0 0 3.5px #56b4e9}
html[data-cb="1"] .ck.b.off{box-shadow:inset 0 0 0 1px #56b4e9}
html[data-cb="1"] .die.b{background:linear-gradient(145deg,#2a86c0,#0b4a76)}
/* battleships: hit = orange fire + a white X, sunk = darker X, miss = open circle; placement preview blue / orange */
html[data-cb="1"] .cell.hit::after,html[data-cb="1"] .cell.sunk::after{content:'\2715';position:absolute;inset:0;display:grid;place-items:center;border-radius:0;background:none;animation:none;
  font:900 calc(var(--c)*.55)/1 system-ui,sans-serif;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000}
html[data-cb="1"] .cell.sunk::after{color:#ffd8b0}
html[data-cb="1"] .cell.miss::before{background:none;border:max(2px,calc(var(--c)*.07)) solid var(--miss);inset:30%;opacity:1}
html[data-cb="1"] .cell.pv{background:rgba(86,180,233,.5)}
html[data-cb="1"] .cell.pvbad{background:rgba(230,159,0,.55)}
/* minesweeper numbers: blue / teal / vermillion / navy ... the digit itself is always shown */
html[data-cb="1"] .c.n1{color:#0072b2}html[data-cb="1"] .c.n2{color:#007a5a}html[data-cb="1"] .c.n3{color:#b8460a}
html[data-cb="1"] .c.n4{color:#1a237e}html[data-cb="1"] .c.n5{color:#7a3b00}html[data-cb="1"] .c.n6{color:#005f73}
html[data-cb="1"] #flagBtn[aria-pressed="true"]{background:#e69f00;color:#1d1500}
/* word: orange = right place, blue = elsewhere (same as the game's own colour-blind option) + a mark on each */
html[data-cb="1"]{--w-g:#f5793a;--w-y:#85c0f9;--w-gi:#1d0d00;--w-yi:#06203a}
html[data-cb="1"] .t.s2,html[data-cb="1"] .t.s1{position:relative}
html[data-cb="1"] .t.s2::after,html[data-cb="1"] .t.s1::after{position:absolute;top:2px;right:4px;font:700 .32em/1 system-ui,sans-serif;pointer-events:none}
html[data-cb="1"] .t.s2::after{content:'\25CF'}html[data-cb="1"] .t.s1::after{content:'\25CB'}
/* snakes & ladders: up / down text gets an arrow and non-red/green colours; golf under / over par likewise */
html[data-cb="1"] #banner .sl-t2 .sl-up{color:#8ecbf0}html[data-cb="1"] #banner .sl-t2 .sl-dn{color:#ffb74d}
html[data-cb="1"] #banner .sl-t2 .sl-up::before{content:'\25B2 '}html[data-cb="1"] #banner .sl-t2 .sl-dn::before{content:'\25BC '}
html[data-cb="1"] table.sctab .u{color:#8ecbf0}html[data-cb="1"] table.sctab .u::before{content:'\25BC '}
html[data-cb="1"] table.sctab .o{color:#ffb74d}html[data-cb="1"] table.sctab .o::before{content:'\25B2 '}
html[data-cb="1"] .rec .rw b{color:#8ecbf0}html[data-cb="1"] .rec .rl b{color:#ffb74d}
/* ========================== end colour-blind friendly ========================== */

/* ===== tap targets (44x44 CSS px) on touch screens and phones. Padding / min-size only; board canvases untouched ===== */
@media (pointer:coarse),(max-width:480px){
  a.sbtn,button.sbtn{min-height:44px}
}
/* ===== end tap targets ===== */
@media (pointer:coarse),(max-width:480px){ .box button.mx{width:44px;height:44px;min-height:44px;top:8px;right:8px} }   /* game dialogs' close button */
/* colour-blind palette on the dark card faces: the spade / club colours must stay readable on a dark card */
html[data-cb="1"][data-face="midnight"],html[data-cb="1"][data-face="neon"]{--suit-s:#e8ecf4;--suit-h:#ff9a52;--suit-d:#6cc4ff;--suit-c:#5fe3b4}
/* the dialog box itself is focused when a sheet opens (so keys and screen readers land in it): it isn't interactive, so no focus ring round it — the buttons inside keep theirs */
.box:focus,.box:focus-visible{outline:none}