/* =====================================================================
   GAMES NIGHT HQ — "NEON GLASS" LOOK (chosen 5 Nov 2026)
   One shared stylesheet for every game. Change the look here.
   ===================================================================== */
:root{
  /* THE LOOK'S COLOURS. Every cyan, pink and gold in every game comes from here: never type one anywhere else.
     PUB COLOURS (pub version stage): a pub's two main colours replace the cyan family (colour 1) and the pink family (colour 2).
     neonColours(c1,c2) in neon.js sets every line of both families from just two colours. Each colour also has an "-rgb"
     copy (its red, green, blue numbers) so see-through glows can be made from it: rgba(var(--cyan-rgb),.6). */
  --cyan:#22d3ee; --cyan-rgb:34,211,238; --cyan-hi:#7ff0ff; --cyan-hi-rgb:127,240,255; --cyan-pale:#bff8ff; --cyan-pale-rgb:191,248,255;
  --cyan-deep:#0ea5c6; --cyan-deeper:#0e8aa3;
  --pink:#ff3d81; --pink-rgb:255,61,129; --pink-hi:#ff8fb5; --pink-hi-rgb:255,143,181; --pink-pale:#ffe3f0; --pink-deep:#d61e63; --pink-deep-rgb:214,30,99; --pink-deeper:#b81a55;
  --gold:#f5c76a; --gold-rgb:245,199,106; --gold-hi:#ffe7a6; --gold-hi-rgb:255,231,166;
  --bg:#04060c; --text:#e8f1ff; --soft:#9fb3cf; --warn:#ff8a8a;
  --cyan-glow:rgba(var(--cyan-rgb),.55); --pink-glow:rgba(var(--pink-rgb),.55); --gold-glow:rgba(var(--gold-rgb),.6);
  --title:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* 1u = 1% of the 16:9 stage width on main screens (the stage always fits the screen) */
  --u:max(1vw,1.7778vh); --vt:0%; --vl:0%;
  --neon:'Tilt Neon','Bebas Neue',sans-serif;
  /* default sizes of the pieces; each screen area can set its own */
  --cw:60px; --b:48px; --s:28px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--body);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
p{line-height:1.45}
.soft{color:var(--soft)}
.err{color:var(--warn);min-height:1.2em}
.center{text-align:center}
.num{font-family:var(--title);letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* ---------- backgrounds ---------- */
.bg-poker{background-image:url("bg-poker.jpg");background-image:image-set(url("bg-poker.webp") type("image/webp"),url("bg-poker.jpg") type("image/jpeg"))}
.bg-dominoes{background-image:url("bg-dominoes.jpg");background-image:image-set(url("bg-dominoes.webp") type("image/webp"),url("bg-dominoes.jpg") type("image/jpeg"))}
.bg-pool{background-image:url("bg-pool.jpg");background-image:image-set(url("bg-pool.webp") type("image/webp"),url("bg-pool.jpg") type("image/jpeg"))}
.bg-menu{background-image:url("bg-menu.jpg");background-image:image-set(url("bg-menu.webp") type("image/webp"),url("bg-menu.jpg") type("image/jpeg"))}
.bg-darts{background-image:url("bg-darts.jpg");background-image:image-set(url("bg-darts.webp") type("image/webp"),url("bg-darts.jpg") type("image/jpeg"))}
.bg-snooker{background-image:url("bg-snooker.jpg");background-image:image-set(url("bg-snooker.webp") type("image/webp"),url("bg-snooker.jpg") type("image/jpeg"))}
.bg-dice{background-image:url("bg-dice.jpg");background-image:image-set(url("bg-dice.webp") type("image/webp"),url("bg-dice.jpg") type("image/jpeg"))}
.bg-quiz{background-image:url("bg-quiz.jpg");background-image:image-set(url("bg-quiz.webp") type("image/webp"),url("bg-quiz.jpg") type("image/jpeg"))}
.bg-beerpong{background-image:url("bg-beerpong.jpg");background-image:image-set(url("bg-beerpong.webp") type("image/webp"),url("bg-beerpong.jpg") type("image/jpeg"))}
.bg-tables{background-image:url("bg-tables.jpg");background-image:image-set(url("bg-tables.webp") type("image/webp"),url("bg-tables.jpg") type("image/jpeg"))}
.bgb-darts{background-image:url("bg-darts-blur.jpg");background-image:image-set(url("bg-darts-blur.webp") type("image/webp"),url("bg-darts-blur.jpg") type("image/jpeg"))}
.bgb-snooker{background-image:url("bg-snooker-blur.jpg");background-image:image-set(url("bg-snooker-blur.webp") type("image/webp"),url("bg-snooker-blur.jpg") type("image/jpeg"))}
.bgb-dice{background-image:url("bg-dice-blur.jpg");background-image:image-set(url("bg-dice-blur.webp") type("image/webp"),url("bg-dice-blur.jpg") type("image/jpeg"))}
.bgb-quiz{background-image:url("bg-quiz-blur.jpg");background-image:image-set(url("bg-quiz-blur.webp") type("image/webp"),url("bg-quiz-blur.jpg") type("image/jpeg"))}
.bgb-beerpong{background-image:url("bg-beerpong-blur.jpg");background-image:image-set(url("bg-beerpong-blur.webp") type("image/webp"),url("bg-beerpong-blur.jpg") type("image/jpeg"))}
.bgb-tables{background-image:url("bg-tables-blur.jpg");background-image:image-set(url("bg-tables-blur.webp") type("image/webp"),url("bg-tables-blur.jpg") type("image/jpeg"))}
.bgb-poker{background-image:url("bg-poker-blur.jpg");background-image:image-set(url("bg-poker-blur.webp") type("image/webp"),url("bg-poker-blur.jpg") type("image/jpeg"))}
.bgb-dominoes{background-image:url("bg-dominoes-blur.jpg");background-image:image-set(url("bg-dominoes-blur.webp") type("image/webp"),url("bg-dominoes-blur.jpg") type("image/jpeg"))}
.bgb-pool{background-image:url("bg-pool-blur.jpg");background-image:image-set(url("bg-pool-blur.webp") type("image/webp"),url("bg-pool-blur.jpg") type("image/jpeg"))}
.bgb-menu{background-image:url("bg-menu-blur.jpg");background-image:image-set(url("bg-menu-blur.webp") type("image/webp"),url("bg-menu-blur.jpg") type("image/jpeg"))}

/* full-screen backdrop: a small blurred copy of the game's picture, darkened (cheap, used on phones and around the TV stage) */
.backdrop{position:fixed;inset:0;z-index:-1;background-size:cover;background-position:center}
.backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(4,6,12,.55),rgba(4,6,12,.86))}

/* ---------- the TV stage: the 16:9 picture always FILLS the screen edge to edge (any screen shape). The game is laid out on the picture;
   whatever part of the picture is off-screen is given by --vt (top and bottom) and --vl (left and right), so titles, buttons and seats
   are moved in from the edges and are never cut off (set by assets/neon.js) ---------- */
.stagewrap{position:fixed;inset:0;overflow:hidden}
.stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(var(--u)*100);height:calc(var(--u)*56.25);background-size:100% 100%;overflow:hidden;font-size:calc(var(--u)*1.25)}
body.tall .stagewrap{position:static;overflow:visible}
body.tall .stage{position:relative;left:auto;top:auto;transform:none}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(3,5,10,.45) 0%,rgba(3,5,10,.12) 22%,rgba(3,5,10,.12) 75%,rgba(3,5,10,.42) 100%),radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.45) 100%)}
.stage>*,.stage>.glass{position:absolute}
.stage .fit{overflow:hidden}

/* ---------- chrome title (the pub name / game name) ---------- */
.chrome{font-family:var(--title);font-weight:400;letter-spacing:.03em;line-height:.92;margin:0;
  background:linear-gradient(180deg,#ffffff 0%,#e9eef6 34%,#8d9ab0 50%,#f7faff 62%,#b4c0d3 82%,#eef3fb 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 .06em 0 rgba(0,0,0,.65)) drop-shadow(0 0 .25em rgba(var(--cyan-rgb),.28))}
.subtitle{font-weight:600;color:#cfdcf0;letter-spacing:.01em}

/* ---------- glass ---------- */
.glass{position:relative;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 42%,rgba(6,10,20,.30) 100%),rgba(10,14,26,.58);
  border:1px solid rgba(255,255,255,.17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 0 0 1px rgba(255,255,255,.03),0 .6em 1.6em rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
/* the shine: only ever a thin strip along the top edge, and always under the panel's buttons and words (isolation keeps it inside the panel) */
.glass{isolation:isolate}
.glass::before{content:"";position:absolute;left:6%;right:6%;top:1px;height:min(38%,.9em);border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0))}
.glass.on{border-color:rgba(var(--cyan-rgb),.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px rgba(var(--cyan-rgb),.7),0 0 1.4em var(--cyan-glow),0 0 3em rgba(var(--cyan-rgb),.25)}
.glass.hot{border-color:rgba(var(--pink-rgb),.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px rgba(var(--pink-rgb),.7),0 0 1.4em var(--pink-glow)}
.glass.gold{border-color:rgba(var(--gold-rgb),.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px rgba(var(--gold-rgb),.7),0 0 1.6em var(--gold-glow)}
.glass.dim{opacity:.5;filter:saturate(.35)}
.pill{display:inline-flex;align-items:center;gap:.4em;padding:.35em 1em;border-radius:999px;font-weight:700;white-space:nowrap}
.pill.cy{border-color:rgba(var(--cyan-rgb),.85);color:var(--cyan-hi);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 .9em rgba(var(--cyan-rgb),.35)}
.pill.pk{border-color:rgba(var(--pink-rgb),.85);color:var(--pink-hi);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 .9em rgba(var(--pink-rgb),.35)}
.badge{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;border-radius:50%;font-weight:800;font-size:.8em;background:var(--pink);color:#fff;box-shadow:0 0 .8em var(--pink-glow),inset 0 1px 0 rgba(255,255,255,.5)}

/* ---------- buttons ---------- */
button{font-family:var(--body);font-size:1.2rem;font-weight:700;padding:.7em 1.25em;min-height:48px;border-radius:14px;cursor:pointer;color:#03141a;
  border:1px solid rgba(var(--cyan-hi-rgb),.9);
  background:linear-gradient(180deg,var(--cyan-hi) 0%,var(--cyan) 48%,var(--cyan-deep) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 0 1em rgba(var(--cyan-rgb),.45),0 .35em .9em rgba(0,0,0,.4);
  transition:transform .12s ease,box-shadow .2s ease,filter .2s ease}
button:hover{filter:brightness(1.08)}
button:active{transform:translateY(1px) scale(.98)}
button.quiet,.seg button.off{color:var(--text);border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 50%,rgba(0,0,0,.12) 100%),rgba(12,16,28,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 .3em .8em rgba(0,0,0,.35)}
button.red{color:#fff;border-color:rgba(var(--pink-hi-rgb),.9);background:linear-gradient(180deg,var(--pink-hi) 0%,var(--pink) 50%,var(--pink-deep) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 1em var(--pink-glow),0 .35em .9em rgba(0,0,0,.4)}
button:disabled{opacity:.35;cursor:default;filter:none}
button:focus-visible,input:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* TV remote (arrow keys): the lit-up button is unmistakable from the sofa */
body.kbnav :is(button,a,input,select,textarea,[tabindex]):focus{outline:4px solid var(--gold);outline-offset:3px;box-shadow:0 0 0 7px rgba(var(--gold-rgb),.35),0 0 1.4em var(--gold-glow)!important}
input{font:inherit;font-size:1.15rem;padding:.6em .8em;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(6,10,20,.65);color:var(--text);width:100%;box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
input::placeholder{color:#7f8fa8}
textarea{font:inherit;font-size:1.05rem;line-height:1.4;padding:.6em .8em;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(6,10,20,.65);color:var(--text);width:100%;resize:vertical;box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
textarea::placeholder{color:#7f8fa8}
.kitoffline{position:fixed;left:50%;bottom:max(10px,2vh);transform:translateX(-50%);z-index:30;background:rgba(var(--gold-rgb),.16);border:1px solid var(--gold);color:var(--text);padding:.45em 1em;border-radius:999px;font-size:clamp(.85rem,1.1vw,1.15rem);box-shadow:0 0 1em rgba(0,0,0,.6);backdrop-filter:blur(6px);max-width:92vw;text-align:center}
.kitoffline b{color:var(--gold)}
/* house rules (KIT.houseHTML): the pub's own rules on the lobby screen, and the owner's editor */
.houserules{display:flex;flex-direction:column;gap:.15em;padding:.5em .8em;margin:0 0 .6em;border-radius:14px;border:1px solid var(--gold);background:rgba(var(--gold-rgb),.09);box-shadow:0 0 .9em rgba(var(--gold-rgb),.25);text-align:left;line-height:1.35}
.houserules b{color:var(--gold);font-size:.95em;letter-spacing:.08em;text-transform:uppercase}
.houserules span{color:var(--text);overflow-wrap:anywhere;font-size:1.45em;font-weight:600}
body.tall .houserules span{font-size:1.15em}
.kithouse .body>*+*,.kitpin .body>*+*{margin-top:.7em}
.kitcheck{display:flex;gap:.6em;align-items:flex-start;font-weight:600;cursor:pointer}.kitcheck input{width:1.3em;height:1.3em;flex:none;margin-top:.1em}
.kitpin input{max-width:10em}
label{display:block;margin-bottom:6px;color:var(--soft);font-weight:600;font-size:.92em}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{font-size:1em;padding:.6em 1.05em}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- PLAYING CARDS (drawn for Games Night HQ; see docs/design/README.md) ---------- */
.card{width:var(--cw);height:calc(var(--cw)*1.4);border-radius:calc(var(--cw)*.09);position:relative;display:inline-block;vertical-align:middle;padding:0;margin:0;border:0;cursor:default;
  font-family:var(--body);color:#121419;overflow:hidden;
  background:linear-gradient(160deg,#ffffff 0%,#f6f8fb 45%,#e4e9f1 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.95),inset 0 calc(var(--cw)*-.03) calc(var(--cw)*.06) rgba(0,0,0,.07),0 calc(var(--cw)*.05) calc(var(--cw)*.14) rgba(0,0,0,.6),0 calc(var(--cw)*.01) calc(var(--cw)*.02) rgba(0,0,0,.5)}
button.card{border:0;background:linear-gradient(160deg,#ffffff 0%,#f6f8fb 45%,#e4e9f1 100%);box-shadow:0 0 0 1px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.95),0 calc(var(--cw)*.05) calc(var(--cw)*.14) rgba(0,0,0,.6);color:#121419;filter:none;transition:transform .18s ease}
button.card:disabled{opacity:1;cursor:default}
.card.r,button.card.r{color:#d3112b}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,.15) 26%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 72%,rgba(255,255,255,.22) 100%)}
.card .ix{position:absolute;left:6%;top:4%;display:flex;flex-direction:column;align-items:center;width:28%;line-height:.86;font-weight:800;font-size:calc(var(--cw)*.27);letter-spacing:-.05em}
.card .ix.b{left:auto;top:auto;right:6%;bottom:4%;transform:rotate(180deg)}
.card .ix svg{width:calc(var(--cw)*.19);height:calc(var(--cw)*.19);margin-top:calc(var(--cw)*.025)}
.card .pip{position:absolute;left:50%;top:52%;width:48%;transform:translate(-50%,-50%);filter:drop-shadow(0 calc(var(--cw)*.012) 0 rgba(0,0,0,.18))}
.card .pip svg{display:block;width:100%;height:auto}
.card .court{position:absolute;left:31%;right:31%;top:21%;bottom:21%;border-radius:calc(var(--cw)*.05);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;
  border:calc(var(--cw)*.018) solid #c9a24a;background:linear-gradient(160deg,#fff8e6,#f3e6c4);box-shadow:inset 0 0 0 calc(var(--cw)*.012) #fff}
.card .court b{font-family:var(--title);font-weight:400;font-size:calc(var(--cw)*.42);line-height:.8}
.card .court svg{width:calc(var(--cw)*.2);height:calc(var(--cw)*.2)}
svg.suit{fill:currentColor}
/* the back: dark with a cyan pattern */
.card.back{background:
    radial-gradient(circle at 50% 50%,rgba(var(--cyan-rgb),.35) 0,rgba(var(--cyan-rgb),0) 34%),
    repeating-linear-gradient(45deg,rgba(var(--cyan-rgb),.32) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(-45deg,rgba(var(--cyan-rgb),.32) 0 1px,transparent 1px 6px),
    linear-gradient(160deg,#13213a 0%,#08101f 60%,#050912 100%);
  box-shadow:inset 0 0 0 calc(var(--cw)*.045) #0a1222,inset 0 0 0 calc(var(--cw)*.06) rgba(var(--cyan-rgb),.85),inset 0 0 calc(var(--cw)*.2) rgba(var(--cyan-rgb),.25),0 0 0 1px rgba(0,0,0,.5),0 calc(var(--cw)*.05) calc(var(--cw)*.14) rgba(0,0,0,.6)}
.card.back::before{content:"";position:absolute;left:50%;top:50%;width:34%;height:24%;transform:translate(-50%,-50%) rotate(45deg);border:calc(var(--cw)*.02) solid rgba(var(--cyan-hi-rgb),.9);border-radius:calc(var(--cw)*.03);box-shadow:0 0 calc(var(--cw)*.12) rgba(var(--cyan-rgb),.9),inset 0 0 calc(var(--cw)*.08) rgba(var(--cyan-rgb),.6)}
.card.back::after{background:linear-gradient(118deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 35%)}
.card.empty{background:rgba(var(--cyan-rgb),.05);border:1.5px dashed rgba(var(--cyan-rgb),.5);box-shadow:inset 0 0 1em rgba(var(--cyan-rgb),.12)}
.card.empty::after{display:none}
.card.sel{transform:translateY(-14%);box-shadow:0 0 0 3px var(--cyan),0 0 1.4em var(--cyan-glow),0 .5em 1em rgba(0,0,0,.6)}
.card.win{box-shadow:0 0 0 3px var(--gold),0 0 1.4em var(--gold-glow),0 .4em 1em rgba(0,0,0,.6)}
.card.dim{opacity:.4;filter:saturate(.4)}
.cards{display:flex;gap:calc(var(--cw)*.12);justify-content:center;flex-wrap:wrap}
/* dealt: slides out and flips over */
.card.deal{animation:cardDeal .55s cubic-bezier(.2,.8,.25,1) both;animation-delay:var(--d,0s)}
@keyframes cardDeal{0%{opacity:0;transform:translate(var(--fx,0),var(--fy,-80%)) rotateY(90deg) scale(.75)}55%{opacity:1;transform:translate(0,0) rotateY(35deg) scale(.95)}100%{transform:none}}

/* ---------- CASINO CHIPS (stacks seen from the side) ---------- */
.chips3d{display:inline-flex;align-items:flex-end;gap:calc(var(--chip,24px)*.08);vertical-align:bottom}
.stk{position:relative;width:var(--chip,24px);height:calc(var(--chip,24px)*(.34 + .12*var(--n)))}
.pc{position:absolute;left:0;width:100%;height:calc(var(--chip,24px)*.34);bottom:calc(var(--chip,24px)*.12*var(--i));border-radius:50%;
  background:repeating-linear-gradient(90deg,var(--c) 0 13%,#f2f4f8 13% 19%,var(--c) 19% 31%),var(--c);
  box-shadow:inset 0 calc(var(--chip,24px)*-.05) 0 rgba(0,0,0,.45),inset 0 calc(var(--chip,24px)*.03) 0 rgba(255,255,255,.35),0 1px 1px rgba(0,0,0,.5)}
.pc.top{background:
    radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.0) 0 33%,rgba(255,255,255,.9) 34% 37%,rgba(255,255,255,0) 38%),
    radial-gradient(ellipse at 50% 50%,var(--c2) 0 33%,transparent 34%),
    repeating-conic-gradient(var(--c) 0 26deg,#f4f6fa 26deg 34deg),var(--c);
  box-shadow:inset 0 calc(var(--chip,24px)*-.05) 0 rgba(0,0,0,.4),inset 0 calc(var(--chip,24px)*.04) calc(var(--chip,24px)*.03) rgba(255,255,255,.55),0 0 calc(var(--chip,24px)*.25) var(--g,transparent)}
.chips3d .stk:nth-child(1){--c:var(--cyan);--c2:var(--cyan-deeper);--g:rgba(var(--cyan-rgb),.35)}
.chips3d .stk:nth-child(2){--c:var(--pink);--c2:var(--pink-deeper);--g:rgba(var(--pink-rgb),.35)}
.chips3d .stk:nth-child(3){--c:#1b1e26;--c2:#0b0d12;--g:rgba(255,255,255,.12)}
.chips3d .stk:nth-child(4){--c:var(--gold);--c2:#b8862e;--g:rgba(var(--gold-rgb),.35)}
.chips3d.slide{animation:chipSlide .6s cubic-bezier(.2,.8,.3,1) both}
@keyframes chipSlide{0%{opacity:0;transform:translate(var(--sx,0),var(--sy,0)) scale(.8)}100%{opacity:1;transform:none}}
.chips3d.pop{animation:chipPop .5s ease-out both}
@keyframes chipPop{0%{transform:scale(.7);filter:brightness(1.8)}100%{transform:none}}

/* ---------- DOMINOES: glossy black tiles, glowing white spots ---------- */
.tile{display:inline-flex;position:relative;border:0;padding:calc(var(--s)*.07);border-radius:calc(var(--s)*.2);
  background:linear-gradient(180deg,#454b58 0%,#1c1f26 12%,#0c0d11 55%,#16181e 88%,#2a2e37 100%);
  box-shadow:inset 0 calc(var(--s)*.04) 0 rgba(255,255,255,.55),inset 0 calc(var(--s)*-.05) calc(var(--s)*.06) rgba(0,0,0,.9),
    inset 0 0 0 calc(var(--s)*.03) rgba(205,222,245,.42),0 0 0 1px rgba(0,0,0,.95),
    0 calc(var(--s)*.14) calc(var(--s)*.3) rgba(0,0,0,.7),0 calc(var(--s)*.04) calc(var(--s)*.06) rgba(0,0,0,.6)}
.tile::after{content:"";position:absolute;left:8%;right:8%;top:3%;height:30%;border-radius:calc(var(--s)*.16) calc(var(--s)*.16) 40% 40%;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0))}
.tile.h{flex-direction:row}.tile.v{flex-direction:column}
.half{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);width:var(--s);height:var(--s);padding:13%}
.tile.h .half+.half{border-left:max(1px,calc(var(--s)*.045)) solid rgba(200,215,235,.55)}
.tile.v .half+.half{border-top:max(1px,calc(var(--s)*.045)) solid rgba(200,215,235,.55)}
.half span{border-radius:50%;margin:17%}
.half span.p{background:radial-gradient(circle at 38% 32%,#ffffff 0%,#f2fbff 45%,#bfe9ff 100%);box-shadow:0 0 calc(var(--s)*.1) rgba(var(--cyan-pale-rgb),.95),0 0 calc(var(--s)*.22) rgba(var(--cyan-hi-rgb),.45)}
.tile.end{box-shadow:inset 0 calc(var(--s)*.04) 0 rgba(255,255,255,.6),inset 0 0 0 calc(var(--s)*.03) rgba(var(--cyan-hi-rgb),.9),0 0 0 calc(var(--s)*.05) var(--cyan),0 0 calc(var(--s)*.45) var(--cyan-glow),0 calc(var(--s)*.14) calc(var(--s)*.3) rgba(0,0,0,.7)}
.tile.back{background:repeating-linear-gradient(45deg,rgba(var(--cyan-rgb),.22) 0 1px,transparent 1px 5px),linear-gradient(180deg,#1d2a3c,#0a1019)}
.tile.back .half{border-color:rgba(var(--cyan-rgb),.4)!important}
.tile.new{animation:tileIn .5s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes tileIn{0%{transform:scale(1.35) translateY(-8%);filter:brightness(2.2) drop-shadow(0 0 10px var(--cyan))}60%{transform:scale(.97);filter:brightness(1.3) drop-shadow(0 0 8px var(--cyan))}100%{transform:none;filter:none}}

/* ---------- POOL BALLS ---------- */
.ball{width:var(--b);height:var(--b);border-radius:50%;border:0;padding:0;position:relative;cursor:pointer;flex:none;
  box-shadow:inset calc(var(--b)*-.1) calc(var(--b)*-.14) calc(var(--b)*.24) rgba(0,0,0,.6),inset calc(var(--b)*.05) calc(var(--b)*.05) calc(var(--b)*.1) rgba(255,255,255,.25),
    0 calc(var(--b)*.16) calc(var(--b)*.14) calc(var(--b)*-.04) rgba(0,0,0,.7),0 0 calc(var(--b)*.3) rgba(0,0,0,.35)}
.ball::before{content:"";position:absolute;left:20%;top:12%;width:34%;height:24%;border-radius:50%;transform:rotate(-28deg);background:radial-gradient(ellipse at center,rgba(255,255,255,.98) 0%,rgba(255,255,255,.55) 40%,rgba(255,255,255,0) 72%)}
.ball.red{background:radial-gradient(circle at 36% 30%,#ff8a8a 0%,#e8192f 30%,#a80a1c 68%,#4d0209 100%)}
.ball.yellow{background:radial-gradient(circle at 36% 30%,#fff7c2 0%,#ffd21f 32%,#c99400 70%,#5a4000 100%)}
.ball.black{background:radial-gradient(circle at 36% 30%,#6d7380 0%,#22252c 32%,#08090b 70%,#000 100%)}
.ball.black::after{content:"8";position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffffff,#e6e9ef);color:#111;font:800 calc(var(--b)*.3)/1 var(--body);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -1px 2px rgba(0,0,0,.3)}
.ball.gone{opacity:.16;filter:grayscale(.6);cursor:default;box-shadow:none}
.ball.mini{--b:18px;cursor:default}
/* pieces keep their own shape and size whatever a screen's button style says */
.ball,button.ball,.stage button.ball{border-radius:50%!important;padding:0!important;font-size:0}
button.card,.stage button.card{border-radius:calc(var(--cw)*.09)!important;padding:0!important}
.ball:not(.gone):not(.mini):not(:disabled):active{transform:scale(.92)}

/* ---------- coin toss ---------- */
.coinbox{position:fixed;inset:0;background:radial-gradient(ellipse at center,rgba(6,10,20,.82),rgba(2,3,8,.94));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:30;padding:16px;text-align:center}
.coinstage{perspective:900px;width:min(40vmin,240px);height:min(40vmin,240px)}
.coin3d{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 1.8s cubic-bezier(.15,.65,.25,1)}
.coinf{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;justify-content:center;font:400 clamp(1.6rem,8vmin,3rem) var(--title);letter-spacing:.04em;color:#5a3a0c;
  background:radial-gradient(circle at 35% 28%,#fff6cf 0%,var(--gold) 38%,#c18b2c 72%,#7a5212 100%);
  box-shadow:inset 0 0 0 .5em #b8862e,inset 0 0 0 .7em #f8dc8f,inset 0 0 1.2em rgba(0,0,0,.35),0 0 2.2em var(--gold-glow),0 1em 2em rgba(0,0,0,.6)}
.coinf.t{transform:rotateY(180deg)}
.coinjump{animation:coinjump 1.8s cubic-bezier(.3,.6,.4,1)}
@keyframes coinjump{0%{transform:translateY(0)}40%{transform:translateY(-20vmin)}100%{transform:translateY(0)}}
.coinres{font:400 clamp(2.6rem,11vmin,5rem) var(--neon);letter-spacing:.02em;color:var(--pink-pale);text-shadow:0 0 .04em #fff,0 0 .12em var(--pink),0 0 .3em var(--pink),0 0 .7em rgba(var(--pink-rgb),.7),0 0 1.3em rgba(var(--pink-rgb),.4);min-height:1.1em}
.coincap{color:var(--text);font-weight:600;font-size:clamp(1rem,3.5vmin,1.5rem);max-width:30em}

/* ---------- winner moment ---------- */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.confetti i{position:absolute;top:-4vh;width:.8vmin;height:1.6vmin;border-radius:2px;opacity:.95;animation:fall var(--t) cubic-bezier(.25,.6,.4,1) var(--d) forwards}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--x),110vh) rotate(var(--r))}}
.winglow{animation:winglow 1.4s ease-in-out infinite alternate}
@keyframes winglow{0%{text-shadow:0 0 .2em var(--gold-glow);filter:brightness(1)}100%{text-shadow:0 0 .8em var(--gold-glow),0 0 1.6em rgba(var(--gold-rgb),.35);filter:brightness(1.15)}}
.bigwin{font-family:var(--title);font-weight:400;letter-spacing:.03em;color:var(--gold);text-align:center;line-height:1;margin:.15em 0}

/* ---------- LETTERING to match the logo ----------
   .neon  : glowing neon-tube lettering (Tilt Neon) for headings and big moments, pink glow
   .neon.cy : cyan glow, for "your turn" moments
   Scores and big numbers stay Bebas Neue (.num / --title); venue names in shiny .chrome; small text stays Inter. */
.neon{font-family:var(--neon);font-weight:400;letter-spacing:.02em;line-height:1.05;color:var(--pink-pale);
  text-shadow:0 0 .04em #fff,0 0 .12em var(--pink),0 0 .3em var(--pink),0 0 .7em rgba(var(--pink-rgb),.7),0 0 1.3em rgba(var(--pink-rgb),.4)}
.neon.cy{color:var(--cyan-pale);text-shadow:0 0 .04em #fff,0 0 .12em var(--cyan),0 0 .3em var(--cyan),0 0 .7em rgba(var(--cyan-rgb),.7),0 0 1.3em rgba(var(--cyan-rgb),.4)}
.neon.gd{color:#fff6dc;text-shadow:0 0 .04em #fff,0 0 .12em var(--gold),0 0 .3em var(--gold),0 0 .7em rgba(var(--gold-rgb),.7),0 0 1.3em rgba(var(--gold-rgb),.4)}
@media (prefers-reduced-motion:no-preference){.neon.flicker{animation:flicker 2.4s ease-in-out 1}}
@keyframes flicker{0%,6%,10%{opacity:.25}4%,8%,14%,100%{opacity:1}}

/* ---------- logo, venue name and the opening splash ---------- */
.logo{display:inline-block;line-height:0}
.logo img{display:block;width:auto;height:100%;filter:drop-shadow(0 0 .3em rgba(var(--pink-rgb),.25))}
.brand{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.15em}
.brand .logo{height:calc(var(--u)*7.6)}
.brand.has-venue{flex-direction:row;align-items:center;gap:calc(var(--u)*.9)}
.brand.has-venue .logo{height:calc(var(--u)*4.6)}
.brand .venue{font-size:calc(var(--u)*4.4);white-space:nowrap;min-width:0;overflow:hidden;padding-bottom:.08em}
.brand .logo{flex:none}
.brand.has-venue{max-width:100%}
.brand small{display:block;font-weight:600;color:#cfdcf0;font-size:calc(var(--u)*1.2)}
.brand.has-venue small{position:absolute;left:0;top:100%;margin-top:.2em;white-space:nowrap}
body.tall .brand .logo{height:64px}
body.tall .brand .venue{font-size:2.6rem}
.splash{position:fixed;inset:0;z-index:50;background:#04060c center/cover no-repeat;cursor:pointer;transition:opacity .5s ease}
.splash.bye{opacity:0}
.splash span{position:absolute;bottom:4vh;left:0;right:0;text-align:center;color:#cfdcf0;font-weight:600;font-size:clamp(.9rem,1.4vw,1.2rem);opacity:.8}
.venuebox label{margin-bottom:4px}
.venuebox input{max-width:18em}

/* ---------- rules sheet ---------- */
.modal{position:fixed;inset:0;background:rgba(2,4,10,.72);display:flex;align-items:center;justify-content:center;padding:14px;z-index:20}
.sheet{color:var(--text);border-radius:18px;max-width:780px;width:100%;max-height:92vh;display:flex;flex-direction:column;font-size:1.05rem}
.sheet header{display:flex;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
.sheet header h2{margin:0;flex:1;font:400 2rem var(--title);letter-spacing:.03em;color:#fff}
.sheet .body{overflow:auto;padding:6px 18px 18px}
.sheet h3{margin:1em 0 .3em;color:var(--cyan-hi);font-size:1.1rem}
.sheet p{margin:.3em 0;max-width:72ch;color:#d5e1f3}
mark{background:var(--gold);color:#1a1200;border-radius:3px;padding:0 2px}

/* ---------- phones: same look, lighter (no blur effects) ---------- */
body.phone .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 45%,rgba(6,10,20,.2) 100%),rgba(12,17,30,.88)}

/* ---------- switch movement off for anyone whose device asks for less motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .confetti{display:none}
}

/* =====================================================================
   TOOLKIT PARTS (assets/kit.js): big, easy-to-tap buttons, settings rows, robot "thinking" sign, turn-timer rings, sound panel
   ===================================================================== */
.bigbtn{font-size:1.55rem;padding:.6em 1.6em;border-radius:999px;min-height:60px}
body.phone button{min-height:52px}
body.phone .bigbtn{min-height:64px;font-size:1.65rem}
.joinlogo{height:clamp(110px,26vw,170px)}
.stage input:not([type=range]){font-size:calc(var(--u)*1.4);padding:.5em .8em}
body.tall .stage input:not([type=range]){font-size:1.2rem}
.kitset{display:flex;flex-direction:column;gap:6px}
.kitset label{margin:0}
select{font:inherit;font-size:1.05rem;padding:.55em .7em;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(6,10,20,.85);color:var(--text);max-width:100%}
input[type=range]{accent-color:var(--cyan);width:100%;min-height:36px;padding:0;border:0;background:none;box-shadow:none}
.kitsound .body{display:flex;flex-direction:column;gap:16px;padding:16px 18px 20px}
.thinking{color:var(--cyan-hi);font-weight:700;white-space:nowrap}
.thinking i{font-style:normal;animation:dots 1.2s infinite both}
.thinking i:nth-child(2){animation-delay:.2s}.thinking i:nth-child(3){animation-delay:.4s}
@keyframes dots{0%,20%{opacity:.15}50%{opacity:1}100%{opacity:.15}}
.kitring{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.6em;height:2.6em;flex:none}
.kitring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.kitring circle{fill:none;stroke-width:9}
.kitring .bg{stroke:rgba(255,255,255,.15)}
.kitring .fg{stroke:var(--cyan);stroke-linecap:round;filter:drop-shadow(0 0 4px var(--cyan));transition:stroke-dashoffset .25s linear}
.kitring b{font-family:var(--title);font-weight:400;font-size:1.15em;color:#fff;position:relative}
.kitring.low .fg{stroke:var(--pink);filter:drop-shadow(0 0 5px var(--pink))}
.kitring.low b{color:var(--pink-hi)}

/* =====================================================================
   TOOLKIT: Tap to start, keep-awake light, sound note, reconnecting sign, winner announcement, setup wizard and Settings
   ===================================================================== */
.kitstart{cursor:pointer}
.kitstartin{position:absolute;left:0;right:0;bottom:7vh;display:flex;flex-direction:column;align-items:center;gap:1.4vh;text-align:center}
.kitstartin p{margin:0;color:#e8f1ff;font-weight:600;font-size:clamp(1rem,2.2vmin,1.6rem);text-shadow:0 2px 8px #000}
.kitgo{font-size:clamp(2rem,6vmin,4.2rem)!important;padding:.35em 1.4em!important;min-height:0!important;letter-spacing:.04em;
  background:linear-gradient(180deg,rgba(var(--cyan-rgb),.28),rgba(var(--cyan-rgb),.08)),rgba(4,10,20,.85)!important;border:2px solid rgba(var(--cyan-hi-rgb),.95)!important;
  box-shadow:0 0 0 1px rgba(var(--cyan-rgb),.6),0 0 1.4em var(--cyan-glow),inset 0 1px 0 rgba(255,255,255,.4)!important}
@media (prefers-reduced-motion:no-preference){.kitgo{animation:kitpulse 1.8s ease-in-out infinite}}
@keyframes kitpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
/* keep-awake status light (main screens, bottom left) */
.kitawake{position:fixed;left:8px;bottom:8px;z-index:25;display:inline-flex;align-items:center;gap:.5em;min-height:0!important;padding:.3em .8em!important;
  font:700 clamp(.85rem,1.6vmin,1.35rem) var(--body)!important;border-radius:999px;background:rgba(4,8,16,.72)!important;border:1px solid rgba(255,255,255,.18)!important;color:#cfdcf0!important;box-shadow:none!important;letter-spacing:0}
.kitawake i,.kitstat i{width:.75em;height:.75em;border-radius:50%;background:#3ee07a;box-shadow:0 0 .6em #3ee07a;flex:none;display:inline-block}
.kitawake.tap i,.kitstat.tap i{background:var(--gold);box-shadow:0 0 .6em var(--gold)}
.kitawake.off,.kitawake.tap{color:#fff!important;border-color:rgba(255,138,138,.6)!important}
.kitawake.off i,.kitstat.off i{background:#ff5470;box-shadow:0 0 .7em #ff5470}
@media (prefers-reduced-motion:no-preference){.kitawake.off i{animation:dots 1.2s infinite}}
.kitstat{display:flex;align-items:center;gap:.6em;font-weight:700}
/* phones and small tablets: just the dot (tap it for the steps), in the top bar beside the icons, or tucked in the bottom-left corner */
.kawslot{display:contents}
.kitawake.mini{font-size:0!important;gap:0;padding:0!important;width:30px;height:30px;justify-content:center;left:4px;bottom:4px}
.kitawake.mini i{width:12px;height:12px}
.kitawake.mini.inbar{position:static;flex:none;background:rgba(4,8,16,.5)!important}
.kitnosleep{position:fixed;left:0;bottom:0;width:2px;height:2px;opacity:.01;pointer-events:none;z-index:-1}
/* the sound is blocked: a clear note */
.kittoast{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:45;width:min(760px,calc(100vw - 24px));padding:14px 18px;border-radius:16px;font-size:clamp(1rem,1.6vmin,1.25rem);border-color:rgba(255,138,138,.7)!important}
.kittoast ol{margin:.4em 0 .6em 1.2em;padding:0}.kittoast li{margin:.25em 0}
/* a phone reconnecting */
.kitnet{position:fixed;left:50%;top:8px;transform:translateX(-50%);z-index:45;padding:.45em 1.1em;border-radius:999px;background:rgba(10,14,26,.94);border:1px solid rgba(var(--gold-rgb),.8);color:var(--gold-hi);font-weight:700;font-size:1rem;box-shadow:0 0 1em rgba(var(--gold-rgb),.35);white-space:nowrap}
.reconn{color:var(--gold-hi)!important;font-weight:700}
/* ---------- the winner announcement ---------- */
.kitwin{position:fixed;inset:0;z-index:35;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 50%,rgba(2,4,10,.55),rgba(2,4,10,.85));padding:2vmin}
.kwband{width:100%;max-width:min(96vw,170vmin);text-align:center;padding:3vmin 4vmin;border-radius:3vmin;display:flex;flex-direction:column;align-items:center;gap:1.4vmin;
  background:linear-gradient(180deg,rgba(var(--gold-rgb),.16),rgba(var(--gold-rgb),.03) 40%,rgba(4,8,16,.6)),rgba(6,10,20,.88);border:2px solid rgba(var(--gold-rgb),.85);
  box-shadow:0 0 0 1px rgba(var(--gold-hi-rgb),.4),0 0 3vmin var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.35)}
@media (prefers-reduced-motion:no-preference){.kwband:not(.still){animation:kwin .55s cubic-bezier(.2,1.4,.4,1) both}}
@keyframes kwin{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.kwtitle{font-size:clamp(2.2rem,9vmin,8.5rem);line-height:1.1;width:100%;white-space:nowrap;padding:0 .1em}
.kwsub{font:400 clamp(1.5rem,5.4vmin,4.6rem) var(--title);letter-spacing:.03em;color:#fff;text-shadow:0 0 .4em rgba(var(--gold-rgb),.6)}
.kwline{font-weight:700;font-size:clamp(1.05rem,3vmin,2.3rem);color:var(--gold-hi)}
.kwcards{display:flex;gap:4vmin;flex-wrap:wrap;justify-content:center;--cw:clamp(52px,11vmin,150px);margin-top:1vmin}
.kwhand{display:flex;flex-direction:column;align-items:center;gap:1vmin}
.kwhand small{font-weight:700;color:#cfdcf0;font-size:clamp(.9rem,2.2vmin,1.6rem)}
.kwcards .cards{gap:calc(var(--cw)*.12);flex-wrap:nowrap;padding-top:calc(var(--cw)*.18)}
.kwcards .card{opacity:.55;filter:saturate(.6)}
.kwcards .card.win{opacity:1;filter:none;transform:translateY(-14%);box-shadow:0 0 0 3px var(--gold),0 0 1.6em var(--gold-glow),0 .6em 1.2em rgba(0,0,0,.7)}
@media (prefers-reduced-motion:no-preference){.kwcards .card.win{animation:kwglow 1.3s ease-in-out infinite alternate}}
@keyframes kwglow{0%{box-shadow:0 0 0 3px var(--gold),0 0 .8em var(--gold-glow),0 .6em 1.2em rgba(0,0,0,.7)}100%{box-shadow:0 0 0 3px var(--gold-hi),0 0 2.2em var(--gold-glow),0 .6em 1.2em rgba(0,0,0,.7)}}
.kwbtns{display:flex;gap:1.6vmin;flex-wrap:wrap;justify-content:center;margin-top:1vmin}
.kwband .kwbtns button{font-size:clamp(1.2rem,3vmin,2.4rem);padding:.5em 1.6em;min-height:0}
.kitwin.small{align-items:flex-start;padding:8px}
.kitwin.small .kwband{padding:14px 12px;gap:8px;border-radius:18px}
.kitwin.small .kwtitle{font-size:clamp(1.7rem,8.5vw,3rem)}
.kitwin.small .kwsub{font-size:clamp(1.3rem,6vw,2.2rem)}
.kitwin.small .kwline{font-size:1rem}
.kitwin.small .kwcards{--cw:clamp(40px,10.5vw,64px);gap:12px}
.kitwin.small .kwband .kwbtns{width:100%}
.kitwin.small .kwband .kwbtns button{font-size:1.25rem;min-height:56px;flex:1 1 40%}
@media (orientation:landscape) and (max-height:560px){.kitwin.small .kwcards{--cw:clamp(34px,9vh,52px)}.kitwin.small .kwband{gap:4px;padding:8px 12px}.kitwin.small .kwtitle{font-size:2rem}}
/* ---------- Settings ("Setup and help") and help sheets ---------- */
.sheet.wide{max-width:min(1500px,96vw)}
.kitsettings .sheet header button{font-size:1.05rem}
.kitsetgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 26px;padding:6px 20px 18px!important}
.kitsetgrid section{display:flex;flex-direction:column;gap:10px;min-width:0}
.kitsetgrid h3{margin:.4em 0 0}
@media (max-width:900px){.kitsetgrid{grid-template-columns:1fr}}
.kithelpbtns{display:flex;flex-direction:column;gap:8px}
.kithelpbtns button{text-align:left}
.kitsteps{margin:.3em 0 .5em 1.3em;padding:0;display:flex;flex-direction:column;gap:.45em;line-height:1.4;color:#e1ebf8}
.kithelp{z-index:62}
.kitvoices{display:flex;flex-direction:column;gap:6px}
.kv{display:flex;align-items:center;gap:10px;padding:4px 6px;border-radius:12px;border:1px solid transparent}
.kv span{flex:1;min-width:0;font-weight:600}
.kv.on{border-color:rgba(var(--cyan-rgb),.7);background:rgba(var(--cyan-rgb),.08)}
.kv button{padding:.35em .9em;font-size:.95rem;min-height:0}
/* ---------- the setup wizard ---------- */
.kitwiz{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:10px;background:rgba(2,4,10,.82)}
.kitwiz.marks{background:rgba(2,4,10,.9)}
.kwcard{width:min(1280px,96vw);padding:clamp(14px,2.4vmin,34px) clamp(16px,3vmin,44px);border-radius:24px;display:flex;flex-direction:column;gap:clamp(8px,1.4vmin,18px);font-size:clamp(1.05rem,1.9vmin,1.6rem)}
.kwhead{display:flex;align-items:center;gap:14px;color:var(--soft);font-weight:700;font-size:.85em}
.kwhead span:first-child{white-space:nowrap}
.kwdots{flex:1;display:flex;gap:6px}
.kwdots i{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.15)}
.kwdots i.done{background:rgba(var(--cyan-rgb),.5)}.kwdots i.on{background:var(--cyan);box-shadow:0 0 .6em var(--cyan-glow)}
.kwhead button{font-size:.9em;padding:.35em .9em;min-height:0}
.kwcard h2{margin:0;font-size:clamp(2rem,5.4vmin,4.4rem)}
.kwbody{display:flex;flex-direction:column;gap:.6em}
.kwbody p{margin:0}
.kwbody h3{margin:.3em 0 0;color:var(--cyan-hi);font-size:1em}
.kwbody label{font-size:.85em}
.kwbody input:not([type=range]){font-size:1em;max-width:30em}
.kwbody .seg button{font-size:.95em}
.kwlead{font-size:1.05em;color:#e8f1ff;max-width:60em}
.kwq{font-weight:800;font-size:1.15em;color:#fff}
.kwtwo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,3vmin,40px);align-items:start}
.kwtwo>div{display:flex;flex-direction:column;gap:.6em;min-width:0}
@media (max-width:760px),(orientation:portrait){.kwtwo{grid-template-columns:1fr}}
.kwresult{display:flex;gap:.8em;align-items:flex-start;padding:.7em 1em;border-radius:16px;border:1px solid rgba(62,224,122,.6);background:rgba(62,224,122,.08)}
.kwresult.warn{border-color:rgba(var(--gold-rgb),.75);background:rgba(var(--gold-rgb),.08)}
.kwresult p{margin:.2em 0 0}
.kok,.kwarn,.kskip{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.7em;height:1.7em;border-radius:50%;font-weight:900;color:#04150a;background:#3ee07a;box-shadow:0 0 .7em rgba(62,224,122,.6)}
.kwarn{color:#1a1200;background:var(--gold);box-shadow:0 0 .7em var(--gold-glow)}
.kskip{color:#cfdcf0;background:rgba(255,255,255,.15);box-shadow:none}
.kwfix{padding:.6em 1em;border-radius:16px;border:1px solid rgba(255,138,138,.55);background:rgba(255,84,112,.07)}
.kwcard .kwbtns{justify-content:flex-start}
.kwgap{flex:1}
.kwcard .kwbtns button{font-size:1em;padding:.6em 1.3em}
.kwqr{display:flex;flex-direction:column;align-items:center;gap:.5em}
.kwqr .qr{background:#fff;padding:12px;border-radius:14px;box-shadow:0 0 0 2px rgba(var(--cyan-rgb),.8),0 0 1.6em var(--cyan-glow)}
.kwqr .link{font-size:.7em;word-break:break-all;color:var(--soft);text-align:center}
.kwsums{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
@media (max-width:760px),(orientation:portrait){.kwsums{grid-template-columns:1fr}}
.kwsum{display:flex;align-items:center;gap:.7em}
.kwsum span{flex:1}
.kwsum button{font-size:.85em;padding:.3em .9em;min-height:0}
.kwmarks i{position:fixed;font-style:normal;font:400 clamp(2.4rem,7vmin,6rem)/1 var(--title);color:var(--cyan-hi);text-shadow:0 0 .3em var(--cyan);z-index:61;pointer-events:none;padding:2px 6px}
.kwmarks .tl{left:0;top:0}.kwmarks .tr{right:0;top:0}.kwmarks .bl{left:0;bottom:0}.kwmarks .br{right:0;bottom:0}
.kwmarks .tc{left:50%;top:0;transform:translateX(-50%)}.kwmarks .bc{left:50%;bottom:0;transform:translateX(-50%)}
.kwmarks .lc{left:0;top:50%;transform:translateY(-50%)}.kwmarks .rc{right:0;top:50%;transform:translateY(-50%)}
.kwsafe{position:fixed;left:5vw;right:5vw;top:5vh;bottom:5vh;border:2px dashed rgba(var(--pink-rgb),.75);border-radius:6px;pointer-events:none;z-index:61}
.kitwiz.marks::before{content:"";position:fixed;inset:0;border:4px solid var(--cyan);box-shadow:inset 0 0 1.4em var(--cyan-glow);pointer-events:none;z-index:61}
.kitphonetest{max-width:520px;margin:0 auto;padding:12px;display:flex;flex-direction:column;gap:12px}

/* ---------- chips and settle-up (toolkit: KIT.settle, KIT.openSettle) ---------- */
.kitsettle{width:100%;border-collapse:collapse;font-size:1.05em}
.kitsettle th,.kitsettle td{text-align:left;padding:.45em .5em;border-bottom:1px solid rgba(255,255,255,.1)}
.kitsettle tr.up b{color:#7dffb0}.kitsettle tr.down b{color:var(--pink-hi)}
.kitpays li,.kitlog li{margin:.3em 0}

/* =====================================================================
   TEST VERSION 11: fixes from the real TV and phones
   ===================================================================== */
/* ---- safe margin on main screens (TV overscan): every word, logo, button and seat sits inside the middle 90% of the screen;
   only the background picture runs to the edges. The game layer is shrunk to 90% and the picture is drawn 1/0.9 bigger behind it. ---- */
body.mainscreen:not(.tall) .stage{transform:translate(-50%,-50%) scale(.9);overflow:visible}
body.mainscreen:not(.tall) .stage::after{content:"";position:absolute;inset:-5.5556%;z-index:-1;pointer-events:none;background-image:inherit;background-size:100% 100%;background-position:center}
body.mainscreen:not(.tall) .stage::before{inset:-5.5556%}
body.mainscreen .kitawake{left:5vw;bottom:5vh}
body.mainscreen:not(.phone) .modal,body.mainscreen:not(.phone) .coinbox{padding:5vh 5vw}
body.mainscreen:not(.phone) .kittoast{top:5vh;width:min(760px,90vw)}
body.mainscreen .sheet{max-height:90vh}

/* ---- main screens: one small Menu button (Rules, Setup and help...), and Coin toss only in the lobby and between games ---- */
.kmenu{position:relative;display:inline-flex}
.kmenub{display:inline-flex;align-items:center;gap:.5em}
.kburger{display:inline-block;width:1em;height:.75em;flex:none;background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat}
.kmenul{display:none;position:absolute;right:0;top:calc(100% + .45em);z-index:40;flex-direction:column;gap:.45em;padding:.6em;min-width:11em;border-radius:14px;background:rgba(8,12,22,.96)!important}
.kmenu.open .kmenul{display:flex}
.kmenul button{width:100%;text-align:left;white-space:nowrap}
.kmenu.open .kmenub{border-color:rgba(var(--cyan-rgb),.9);box-shadow:0 0 0 1px rgba(var(--cyan-rgb),.6),0 0 1em var(--cyan-glow)}

/* ---- phones: Coin toss and Rules are two small round icons in the corner (big buttons are only for play) ---- */
.krow{display:flex;justify-content:flex-end;margin:0 0 -4px}
.kicons{display:inline-flex;gap:8px;flex:none;align-items:center;margin-left:auto}
button.kicon,body.phone button.kicon{width:40px;height:40px;min-height:0!important;padding:0!important;border-radius:50%!important;flex:none;display:inline-flex;align-items:center;justify-content:center;
  color:var(--text);border:1px solid rgba(255,255,255,.28);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04)),rgba(12,17,30,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 .2em .5em rgba(0,0,0,.4)}
button.kicon svg{width:24px;height:24px;display:block}
button.kicon.q{font:400 1.45rem/1 var(--title)!important;color:var(--cyan-pale);text-shadow:0 0 .4em var(--cyan-glow)}

/* ---- players who are out (no chips left, or knocked out): faded, "Out", skipped ---- */
.seat.out{opacity:.38;filter:grayscale(.85)}
.seat.out .st{color:#ffb0b0!important;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.seat.out .mystack,.seat.out .hole{display:none}

/* ---- the winner announcement: big neon across the middle of the main screen, stays up until Next ---- */
body.mainscreen:not(.phone) .kitwin:not(.small){padding:5vh 5vw}
.kitwin:not(.small) .kwband{max-width:90vw;padding:4vmin 5vmin;gap:2vmin}
.kitwin:not(.small) .kwtitle{font-size:clamp(2.6rem,11.5vmin,11rem)}
.kitwin:not(.small) .kwsub{font-size:clamp(1.7rem,6.6vmin,6rem)}
.kitwin:not(.small) .kwband .kwbtns button{font-size:clamp(1.3rem,3.6vmin,2.8rem)}