/* Keno Hall — a 1960s keno lounge in mid-century print (see js/skin.js for the colour tokens, set from the admin colours).
   One key light: the lamp over the card table (top centre, the table shell's --lamp pool). It lights the printed
   wallpaper, the fleck-formica table top inside one machined aluminium edge and a newsprint keno ticket (1–40 over 41–80,
   punched holes along its top) with paper tooth; marks are wax-crayon loops, drawn numbers ink-dot impressions, the round
   ends with a rubber card stamp. The main button is a wax crayon lit from above; the HUD is the lounge's dark number
   board with lit numerals. Static textures only (one grain tile, one speckle mask, no SVG filter is ever animated);
   motion is transform / opacity. Fallback colours below are the "Lounge cream" preset; skin.js replaces them on load. */
:root{--display:"Abril Fatface",Georgia,serif;--ui:"IBM Plex Sans",system-ui,sans-serif;--radius:10px;--radius-sm:6px;--prim-radius:4px;
  --paper:#FFF9F1;--paper-edge:#F3E9DC;--laminate:#EADDD0;--fleck:#CDBDB8;--fleck2:#D2BF86;--fleck3:#F7EFE6;--print:#3B3259;--rule:#C3BBCB;--print-faint:#EEDFCE;
  --crayon:#7C6A21;--drawn-bg:#D8D2E0;--drawn-rim:#CEC7D8;--drawn-ink:#3B3259;--hit-bg:#3B3259;--hit-rim:#2A2340;--hit-ink:#FFF9F1;--stamp:#6A5A1B;--stamp-none:#5D566C;
  --board:#342C4E;--board-hi:#40375E;--board-ink:#FFF4E2;--board-lit:#E5D9AC;--board-muted:#D1C9DD;--board-line:#5F5779;
  --btn-face:#806D23;--btn-ink:#FFFFFF;--btn-band:#5A4C18;--btn-tip:#A6985E;--btn-wrap:#6E5E1E;--edge-hi:#E9EAED;--edge-mid:#B9BCC2;--edge-lo:#8D9098;
  --wall-shade:#BFA582;--lamp:#FFFCF4B3;--room-vignette:0;
  --kh-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --kh-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cg fill='%23000'%3E%3Ccircle cx='7' cy='9' r='1.3'/%3E%3Ccircle cx='23' cy='41' r='.9'/%3E%3Ccircle cx='38' cy='17' r='1.1'/%3E%3Ccircle cx='51' cy='52' r='.7'/%3E%3Ccircle cx='64' cy='8' r='.8'/%3E%3Ccircle cx='77' cy='33' r='1.4'/%3E%3Ccircle cx='92' cy='12' r='.9'/%3E%3Ccircle cx='104' cy='47' r='1.1'/%3E%3Ccircle cx='115' cy='24' r='.7'/%3E%3Ccircle cx='14' cy='30' r='.6'/%3E%3Ccircle cx='58' cy='29' r='.9'/%3E%3Ccircle cx='85' cy='55' r='.7'/%3E%3Ccircle cx='30' cy='56' r='1'/%3E%3Ccircle cx='110' cy='6' r='1'/%3E%3Cpath d='M2 47h9M60 20h6M88 42h5' stroke='%23000' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E")}
body{font-feature-settings:"tnum" 1}
.logo h1,.panel h2,.panel h3,.ovcard h2,.screen h2{font-weight:400}

/* ---- the lounge wall: printed wallpaper (starbursts, boomerangs) with paper grain; the lamp's pool is the table shell's
   (--lamp), the corners fall off to a warm shade (no grey vignette on a cream wall) ---- */
.kh-wall{background:var(--kh-grain) 0 0/160px,var(--bg);background-blend-mode:soft-light}
.kh-wall::before{content:"";position:absolute;inset:0;background:var(--print-faint);-webkit-mask:var(--kh-print) 0 0/264px 264px repeat;mask:var(--kh-print) 0 0/264px 264px repeat}
.kh-wall::after{content:"";position:absolute;inset:0;background:radial-gradient(farthest-corner at 50% 40%,transparent 40%,color-mix(in srgb,var(--wall-shade) 40%,transparent))}

/* ---- the card table: fleck formica under the lamp, one machined aluminium edge lit from above ---- */
.table-game #board{flex:1 1 auto;align-self:stretch;min-height:0}
.kh{width:100%;height:100%;min-height:0;display:flex;justify-content:center;container:kh/inline-size}
.kh-table{position:relative;display:flex;gap:14px;width:calc(100% - 16px);max-width:960px;height:calc(100% - 16px);min-height:0;margin:8px;padding:12px;border-radius:16px;
  background:radial-gradient(ellipse 70% 60% at 50% 0,rgb(255 255 255 / .32),transparent 72%),
    linear-gradient(180deg,transparent 55%,rgb(0 0 0 / .07)),
    radial-gradient(circle,var(--fleck) .8px,transparent 1.4px) 3px 2px/23px 19px,
    radial-gradient(circle,var(--fleck) .6px,transparent 1.1px) 14px 9px/31px 29px,
    radial-gradient(circle,var(--fleck2) .7px,transparent 1.3px) 9px 7px/19px 17px,
    radial-gradient(circle,var(--fleck3) 1px,transparent 1.6px) 6px 4px/13px 11px,var(--laminate);
  outline:1px solid color-mix(in srgb,var(--edge-lo) 70%,#000);outline-offset:0;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),inset 0 -1px 0 rgb(0 0 0 / .08),0 22px 36px -18px rgb(0 0 0 / .5)}
.kh-table::before{content:"";position:absolute;inset:-8px;padding:8px;border-radius:24px;pointer-events:none;
  background:linear-gradient(180deg,var(--edge-hi),var(--edge-mid) 46%,var(--edge-lo));outline:1px solid rgb(255 255 255 / .4);outline-offset:-4px;
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .2);
  -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)}

/* ---- the ticket: newsprint, lit from above, its edges a shade older; punched holes along the top ---- */
.kh-ticket{position:relative;flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;padding:9px 8px 8px;border-radius:3px;color:var(--print);
  background:linear-gradient(180deg,rgb(255 255 255 / .3),transparent 36%),radial-gradient(farthest-corner at 50% 38%,var(--paper) 60%,var(--paper-edge)),var(--paper);
  box-shadow:0 1px 1px rgb(0 0 0 / .16),0 12px 20px -12px rgb(0 0 0 / .45)}
.kh-ticket::before{content:"";position:absolute;left:10px;right:10px;top:-3px;height:7px;
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--laminate) 80%,#000) 1.5px,var(--laminate) 2.3px,transparent 2.8px) 0 0/12px 7px repeat-x}
.kh-head{display:none;flex:none;align-items:center;gap:8px;min-height:26px;padding:0 2px 6px;font:600 14px/1.2 var(--ui)}
.kh-status{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kh-now{flex:none;font:700 16px/1 var(--ui)}
.kh-now.paid{color:var(--stamp)}

/* small screens (main.js layout()): the ticket by halves; the view buttons above it (beside it on a phone held sideways),
   printed tabs: outlined, the open one inked */
.kh-views{display:none;flex:1 1 auto;gap:6px}
.kh-view{position:relative;flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:44px;padding:0 8px;border:1.5px solid var(--print);border-radius:6px;
  background:var(--paper);color:var(--print);font:700 15px/1 var(--ui);white-space:nowrap;touch-action:manipulation;
  transition:background-color var(--t-fast,140ms) var(--ease-std,ease),color var(--t-fast,140ms) var(--ease-std,ease),translate var(--t-press,90ms) var(--ease-out,ease-out)}
.kh-view:active{translate:0 1px}
.kh-view i{min-width:20px;height:20px;padding:0 5px;border-radius:10px;display:grid;place-items:center;background:var(--drawn-bg);color:var(--drawn-ink);font:700 12px/1 var(--ui);font-style:normal}
.kh-view i:empty{display:none}
.kh-view[aria-pressed="true"]{background:var(--hit-bg);border-color:var(--hit-bg);color:var(--hit-ink)}
.kh-view[aria-pressed="true"] i{background:var(--hit-ink);color:var(--hit-bg)}
.kh-ticket.compact .kh-head{display:flex;min-height:50px}
.kh-ticket.compact .kh-views{display:flex}

/* 80 numbers: 1–40 over 41–80, the halves split by a dashed line. The rows never fold below 12 px (24 px on a half): a
   ticket too short for that scrolls inside its border (.scroll, main.js fit()) instead of spilling over the buttons. */
.kh-grid{flex:1 1 0;min-height:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(4,minmax(12px,1fr)) 22px repeat(4,minmax(12px,1fr));
  gap:1px;background:var(--rule);border:2px solid var(--print);border-radius:2px;container:khg/size}
.kh-grid.scroll{overflow:hidden auto;overscroll-behavior:contain}
/* one half: 40 numbers in the shape layout() picked (--hc × --hr); the rules are drawn round each number, so a shape
   with two spare places (7 × 6, 6 × 7) ends in plain paper */
.kh-ticket.compact:not([data-view="all"]) .kh-grid{grid-template-columns:repeat(var(--hc,8),minmax(0,1fr));grid-template-rows:repeat(var(--hr,5),minmax(24px,1fr));background:var(--paper)}
.kh-ticket.compact:not([data-view="all"]) .kh-n{box-shadow:0 0 0 1px var(--rule)}
.kh-ticket.compact:not([data-view="all"]) .kh-split,.kh-ticket.compact[data-view="0"] .kh-split~.kh-n,.kh-ticket.compact[data-view="1"] .kh-n:nth-child(-n+40){display:none}
.kh-ticket.compact[data-view="all"] .kh-grid:not(.locked) .kh-n{cursor:zoom-in}
.kh-split{position:relative;grid-column:1/-1;display:flex;align-items:center;justify-content:center;min-width:0;background:var(--paper)}
.kh-split::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;translate:0 -50%;background:repeating-linear-gradient(90deg,var(--print) 0 7px,transparent 7px 12px)}
/* the band on the split line (phones): the latest ball and the status, cut out of the dashed line */
.kh-band{position:relative;z-index:1;display:flex;align-items:center;gap:6px;max-width:94%;padding:0 8px;background:var(--paper);font:600 12px/1 var(--ui);white-space:nowrap}
.kh-band em{min-width:0;font-style:normal;overflow:hidden;text-overflow:ellipsis}
.kh-ballmini{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--print);background:var(--paper);color:var(--print);font:700 10.5px/1 var(--ui)}
.kh-ballmini:empty{display:none}
.kh-ballmini.hit{background:var(--hit-bg);color:var(--hit-ink)}
/* a number: newsprint with tooth (the grain tile blended into the paper colour; static, painted once) */
.kh-n{position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:0;border:0;border-radius:0;
  background:var(--kh-grain) 0 0/160px,var(--paper);background-blend-mode:soft-light;color:var(--print);
  font:400 16px/1 var(--display);container-type:size;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--t-fast,140ms) var(--ease-std,ease)}
.kh-n span{position:relative;z-index:1;font-size:clamp(12px,50cqmin,30px)}
.kh-grid:not(.locked) .kh-n:hover{background-color:color-mix(in srgb,var(--drawn-bg) 45%,var(--paper))}
.kh-grid.locked .kh-n{cursor:default}
.kh-n:focus-visible{outline-offset:-3px;z-index:3}
/* drawn: an ink-dot impression (the ink pools a shade darker at its rim); a hit: the dot in full ink, the number in
   paper; the latest ball has a thin crayon ring */
.kh-n::before{content:"";position:absolute;left:50%;top:50%;width:80cqmin;height:80cqmin;translate:-50% -50%;border-radius:50%;opacity:0;scale:.4;
  background:radial-gradient(circle,var(--drawn-bg) 0 62%,var(--drawn-rim) 68%)}
.kh-n.drawn::before{opacity:1;scale:1;animation:kh-punch .22s cubic-bezier(.2,1.5,.45,1)}
.kh-n.drawn{color:var(--drawn-ink)}
.kh-n.hit{color:var(--hit-ink)}
.kh-n.hit::before{background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--hit-bg) 90%,var(--hit-ink)) 0 16%,var(--hit-bg) 48%,var(--hit-bg) 60%,var(--hit-rim) 68%)}
.kh-n.last::before{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--crayon)}
@keyframes kh-punch{from{opacity:0;scale:1.5}}
/* the wax-crayon loop of a marked number: the wax line, then the paper's tooth showing through it (drawn in 180 ms when
   new; on a Quick Pick the loops follow one another, main.js sets --kh-d) */
.kh-loop{position:absolute;left:50%;top:50%;z-index:2;width:104cqmin;height:104cqmin;translate:-50% -50%;overflow:visible;pointer-events:none}
.kh-loop path{fill:none;stroke:var(--crayon);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.kh-loop .kh-tooth{stroke:var(--paper);stroke-width:.75;stroke-dasharray:.014 .03 .007 .045 .011 .021 .005 .05;opacity:.38;transform-origin:20px 20px;scale:.966}
.kh-n.fresh .kh-loop path:first-child{stroke-dasharray:1;animation:kh-loop .18s ease-out var(--kh-d,0ms) both}
.kh-n.fresh .kh-loop .kh-tooth{animation:kh-show .12s linear calc(var(--kh-d,0ms) + 160ms) both}
@keyframes kh-loop{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* phone: the pay card as one row under the ticket, its line lit as the hits come */
.kh-pays{flex:none;display:flex;gap:3px;justify-content:center;align-items:stretch;padding-top:5px;min-height:33px}
.kh-pays span{flex:1 1 0;max-width:64px;min-width:0;display:grid;place-items:center;padding:2px 1px;border-radius:3px;border:1px solid var(--rule);font:600 11px/1.15 var(--ui);
  transition:background-color var(--t-fast,140ms) var(--ease-std,ease),color var(--t-fast,140ms) var(--ease-std,ease)}
.kh-pays i{font-style:normal;color:var(--muted)}
.kh-pays span.on{background:var(--hit-bg);border-color:var(--hit-bg);color:var(--hit-ink)}
.kh-pays span.on i{color:inherit}
.kh-pays em{align-self:center;font:italic 500 12px/1.2 var(--ui);color:var(--muted)}

/* wide: the draw board and the pay card beside the ticket — two more newsprint slips on the table */
.kh-side{display:none;flex:0 0 clamp(196px,26%,250px);min-height:0;flex-direction:column;gap:12px;overflow:auto}
@container kh (min-width:640px){
  .kh-side,.kh-head{display:flex}.kh-pays,.kh-band{display:none}
  .kh-grid{grid-template-rows:repeat(4,minmax(12px,1fr)) 9px repeat(4,minmax(12px,1fr))}
  .kh-ticket.compact .kh-views{flex:0 1 330px}
}
/* a phone: the view buttons take the head's row (the band on the ticket and the message carry the status) */
@container kh (max-width:639px){.kh-status,.kh-now{display:none}}
.kh-drawbox,.kh-card{position:relative;padding:10px 12px 12px;border-radius:3px;color:var(--print);
  background:linear-gradient(180deg,rgb(255 255 255 / .3),transparent 40%),var(--kh-grain) 0 0/160px,var(--paper);background-blend-mode:normal,soft-light;
  box-shadow:0 1px 1px rgb(0 0 0 / .14),0 10px 18px -12px rgb(0 0 0 / .45)}
.kh-side h3{margin:0 0 8px;font:400 19px/1.15 var(--display);letter-spacing:.005em}
.kh-drawbox h3{min-height:48px;display:flex;align-items:center;margin-bottom:6px}
/* the latest ball: a lacquered keno ball under the lamp — the highlight on top, the shade below, a printed ring */
.kh-ball{position:absolute;top:8px;right:12px;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:var(--print);font:400 24px/1 var(--display);
  background:radial-gradient(ellipse 34% 22% at 50% 17%,rgb(255 255 255 / .85),transparent),radial-gradient(circle at 50% 36%,var(--paper) 48%,color-mix(in srgb,var(--paper) 74%,var(--print)) 100%);
  box-shadow:inset 0 0 0 2.5px var(--print),inset 0 -4px 6px rgb(0 0 0 / .12),0 3px 4px -1px rgb(0 0 0 / .35)}
.kh-ball b{font-weight:400}
.kh-ball.hit{color:var(--hit-ink);
  background:radial-gradient(ellipse 34% 22% at 50% 17%,rgb(255 255 255 / .5),transparent),radial-gradient(circle at 50% 36%,color-mix(in srgb,var(--hit-bg) 86%,var(--hit-ink)) 30%,var(--hit-rim) 100%);
  box-shadow:inset 0 0 0 2.5px var(--hit-rim),0 3px 4px -1px rgb(0 0 0 / .4)}
.kh-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.kh-tiles li{height:27px;display:grid;place-items:center;border:1px dashed var(--rule);border-radius:3px;font:400 15px/1 var(--display)}
.kh-tiles li.drawn{border-style:solid;border-color:var(--drawn-rim);background:var(--drawn-bg);color:var(--drawn-ink);animation:kh-tile var(--t-base,220ms) var(--ease-out,ease-out) both}
.kh-tiles li.hit{border-style:solid;border-color:var(--hit-rim);background:var(--hit-bg);color:var(--hit-ink);animation:kh-tile var(--t-base,220ms) var(--ease-out,ease-out) both}
@keyframes kh-tile{from{opacity:0;scale:.72}}
.kh-card table{width:100%;border-collapse:collapse;font:600 14px/1.3 var(--ui)}
.kh-card th{padding:0 6px 4px;font-size:12px;font-weight:600;color:var(--muted);text-align:left}
.kh-card td{padding:3px 6px;border-top:1px solid var(--rule);transition:background-color var(--t-fast,140ms) var(--ease-std,ease),color var(--t-fast,140ms) var(--ease-std,ease)}
.kh-card td:last-child,.kh-card th:last-child{text-align:right}
.kh-card tr.on td{background:var(--hit-bg);color:var(--hit-ink)}
.kh-card p{margin:4px 0 0;font:500 13px/1.35 var(--ui);color:var(--muted)}
.kh-card p:empty{display:none}

/* the card stamp at the end of a draw: in, held, then lifted (the result stays in the head and the message). Rubber ink:
   a double rule and an uneven impression (a static speckle mask) */
.kh-stamp{position:absolute;left:50%;top:55%;z-index:5;display:grid;justify-items:center;padding:5px 16px 8px;translate:-50% -50%;rotate:-6deg;border:4px double var(--stamp);border-radius:10px;
  background:color-mix(in srgb,var(--paper) 94%,transparent);color:var(--stamp);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;
  -webkit-mask:var(--kh-ink) 0 0/120px 60px,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:var(--kh-ink) 0 0/120px 60px exclude,linear-gradient(#000 0 0)}
.kh-stamp:not(.paid){--stamp:var(--stamp-none)}
.kh-stamp small{font:700 12px/1.3 var(--ui);letter-spacing:.14em}
.kh-stamp b{font:400 clamp(24px,7cqw,42px)/1.05 var(--display);letter-spacing:.03em}
.kh-stamp.on{visibility:visible;animation:kh-stamp .26s cubic-bezier(.2,1.4,.45,1) both,kh-lift .3s var(--ease-in,ease-in) 1.9s both}
@keyframes kh-stamp{from{opacity:0;scale:1.6}60%{opacity:1}to{opacity:1;scale:1}}
@keyframes kh-lift{from{opacity:1}to{opacity:0;visibility:hidden}}

/* controls under the table: Quick Pick (with its count picker) and Clear — printed slips: a ruled edge, a soft contact
   shadow under the lamp, pressed 1 px */
.kh-ctl{position:relative;display:flex;gap:12px;justify-content:center}
.kh-btn{min-height:44px;min-width:110px;padding:8px 18px;border:1.5px solid var(--print);border-radius:8px;color:var(--print);font:700 15px/1.1 var(--ui);letter-spacing:.01em;
  background:linear-gradient(180deg,rgb(255 255 255 / .35),transparent 55%),var(--paper);box-shadow:0 1px 1px rgb(0 0 0 / .14),0 8px 14px -10px rgb(0 0 0 / .5);
  transition:translate var(--t-press,90ms) var(--ease-out,ease-out),box-shadow var(--t-press,90ms) var(--ease-out,ease-out),background-color var(--t-fast,140ms) var(--ease-std,ease),opacity var(--t-fast,140ms) var(--ease-std,ease)}
.kh-btn:hover:not(:disabled){background-color:color-mix(in srgb,var(--drawn-bg) 40%,var(--paper))}
.kh-btn:active:not(:disabled){translate:0 1px;box-shadow:0 0 0 rgb(0 0 0 / 0),0 3px 6px -4px rgb(0 0 0 / .45)}
.kh-btn:disabled{opacity:.5;box-shadow:none}
.kh-btn[aria-expanded="true"]{background-color:var(--drawn-bg)}
.kh-pop{position:absolute;bottom:calc(100% + 10px);left:50%;z-index:25;translate:-50% 0;padding:10px 12px 12px;border:1.5px solid var(--print);border-radius:10px;background:var(--paper);color:var(--print);
  box-shadow:0 2px 3px rgb(0 0 0 / .16),0 18px 30px -14px rgb(0 0 0 / .55)}
.kh-pop:not([hidden]){animation:kh-pop var(--t-base,220ms) var(--ease-out,ease-out) both}
@keyframes kh-pop{from{opacity:0;translate:-50% 8px}}
.kh-pop p{margin:0 0 8px;font:700 14px/1.2 var(--ui);text-align:center}
.kh-pop div{display:grid;grid-template-columns:repeat(5,44px);gap:6px}
.kh-pop button{height:44px;padding:0;border:1.5px solid var(--print);border-radius:6px;background:var(--paper);color:var(--print);font:400 20px/1 var(--display);transition:background-color var(--t-fast,140ms) var(--ease-std,ease)}
.kh-pop button:hover{background:var(--drawn-bg)}

/* the rules panel's pay cards: slips with a ruled edge */
.kh-rcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:12px}
.kh-rcard{padding:8px 10px;border:1.5px solid var(--print);border-radius:6px;color:var(--print);box-shadow:0 1px 1px rgb(0 0 0 / .12),0 8px 14px -10px rgb(0 0 0 / .4)}
.kh-rcard h4{margin:0 0 4px;font:400 19px/1.1 var(--display)}
.kh-rcard table{width:100%;border-collapse:collapse;font:600 14px/1.45 var(--ui)}
.kh-rcard td:last-child{text-align:right}

/* the HUD as the lounge's number board: a dark lacquered bar lit from above, one aluminium rim, numerals that glow */
.hud.thud{--ink:var(--board-ink);--muted:var(--board-muted);--primary:var(--board-lit);--primary-hi:var(--board-lit);--line:var(--board-line);--ibtn-bg:transparent;--ibtn-ink:var(--board-ink);--focus:var(--board-lit);
  color:var(--ink);background:linear-gradient(180deg,var(--board-hi),var(--board) 45%);border:0;border-radius:12px;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .14),inset 0 -2px 0 rgb(0 0 0 / .22),0 0 0 1.5px var(--edge-lo),0 0 0 3px var(--edge-hi),0 0 0 4px color-mix(in srgb,var(--edge-lo) 70%,#000),0 14px 26px -14px rgb(0 0 0 / .55)}
.thud .meter b{font-family:var(--ui);font-weight:700;letter-spacing:.01em;text-shadow:0 0 14px color-mix(in srgb,var(--board-lit) 30%,transparent)}
/* the main button is a wax crayon lit from above: a round body (highlight along the top, the shade under it, light
   bounced back at the bottom), a paper wrapper between two printed double rules, a sharpened cone */
.spin.tprim{min-width:158px;height:58px;padding:0 calc(22% + 12px) 0 22px;border-radius:4px;background:none;box-shadow:none;color:var(--btn-ink);font:400 23px/1 var(--display);letter-spacing:.05em;isolation:isolate;
  text-shadow:0 1px 0 color-mix(in srgb,var(--btn-band) 70%,transparent)}
.spin.tprim::before{content:"";position:absolute;inset:6px 0;z-index:-1;border-radius:3px 0 0 3px;clip-path:polygon(0 0,78% 0,100% 50%,78% 100%,0 100%);
  background:linear-gradient(180deg,rgb(255 255 255 / .4) 0,rgb(255 255 255 / .1) 18%,transparent 34%,rgb(0 0 0 / .18) 76%,rgb(0 0 0 / .06) 92%,rgb(255 255 255 / .1) 100%),
    linear-gradient(90deg,var(--btn-face) 0 8%,var(--btn-wrap) 8% 69%,var(--btn-face) 69% 78%,var(--btn-tip) 78% 95%,var(--btn-band) 95%)}
.spin.tprim::after{content:"";position:absolute;top:6px;bottom:6px;left:8%;right:31%;z-index:-1;border-left:3px double var(--btn-band);border-right:3px double var(--btn-band)}
.spin.tprim:hover:not(:disabled){filter:brightness(1.07)}
.spin.tprim:active:not(:disabled){box-shadow:none}
.spin.tprim span{max-width:none}

/* results strip: ticket stubs, the newest first at the left even when they overflow the row */
.tstrip{justify-content:safe center}
.tstrip li{border-radius:3px;border:1px dashed var(--rule);background:var(--paper);color:var(--muted);font-family:var(--ui)}
.tstrip li.won{border-style:solid;border-color:var(--print);color:var(--print)}

/* narrow screens: a thinner table edge, so seven numbers of a half ticket get 44 px at 360 px */
@container kh (max-width:440px){
  .kh-table{width:calc(100% - 8px);height:calc(100% - 8px);margin:4px;padding:4px;border-radius:12px}
  .kh-table::before{inset:-4px;padding:4px;border-radius:16px;outline:0}
  .kh-ticket{padding:6px 3px 3px}
  .kh-stamp{padding:4px 12px 6px}
}
/* phones: the crayon and the autoplay key share half of the HUD row (≈ 158 px at 360, 143 px at 320) */
@media (max-width:400px){
  .spin.tprim{min-width:100px;height:52px;padding:0 calc(22% + 4px) 0 10px;font-size:18px;letter-spacing:.03em}
  .spin.tprim::after{left:6%;right:30%}
  .spin.tprim::before{background:linear-gradient(180deg,rgb(255 255 255 / .4) 0,rgb(255 255 255 / .1) 18%,transparent 34%,rgb(0 0 0 / .18) 76%,rgb(0 0 0 / .06) 92%,rgb(255 255 255 / .1) 100%),
    linear-gradient(90deg,var(--btn-face) 0 6%,var(--btn-wrap) 6% 70%,var(--btn-face) 70% 78%,var(--btn-tip) 78% 95%,var(--btn-band) 95%)}
  .kh-btn{min-width:96px;padding:8px 12px}
}
/* short phones (360 × 640, 375 × 667 and below): the pay row and the results strip give their height to the numbers
   (the band on the whole ticket and the message name the pay, the HUD and the message the last result) */
@media (max-height:700px){.kh-pays{display:none}}
@media (max-width:639px) and (max-height:700px){.tstrip{display:none}}
@media (max-width:340px){.spin.tprim{min-width:86px;font-size:16px;padding:0 calc(22% + 2px) 0 8px}}

/* a phone held sideways (568 × 320 … 932 × 430): the HUD on one row and no results strip; the view buttons in a column
   at the ticket's left, Quick Pick and Clear in a column at its right. No draw board or pay card beside the ticket: the
   band on the whole ticket names the ball and the hits, and from 800 px the pay row stands at the ticket's right */
@media (max-height:500px) and (orientation:landscape){
  .hud.thud{grid-template-columns:1fr auto 1fr auto;grid-template-areas:"acts acts acts acts" "bal bet win spin";padding-top:5px;padding-bottom:5px;row-gap:0}
  body.lefty .hud.thud{grid-template-columns:auto 1fr auto 1fr;grid-template-areas:"acts acts acts acts" "spin bal bet win"}
  .spin.tprim{min-width:112px;height:46px;padding:0 calc(22% + 6px) 0 12px;font-size:19px}
  .thud .meter b{font-size:18px}
  .tstrip{display:none}
  .table-game .stage.tstage{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);column-gap:10px;align-items:stretch}
  .table-game .boardarea.tboardarea{height:100%}
  .table-game .message{min-height:22px;font-size:14px}
  .tcontrols{width:auto;margin:0}
  .kh-ctl{flex-direction:column;justify-content:center;gap:12px}
  .kh-btn{min-width:100px;padding:8px 12px}
  .kh-pop{bottom:auto;top:50%;left:auto;right:calc(100% + 10px);translate:0 -50%}
  .kh-pop:not([hidden]){animation:none}
  .kh-side,.kh-pays,.kh-status,.kh-now,.kh-ticket .kh-head{display:none}
  .kh-band{display:flex}
  .kh-table{width:calc(100% - 8px);height:calc(100% - 8px);margin:4px;padding:4px}
  .kh-table::before{inset:-4px;padding:4px;border-radius:20px;outline:0}
  .kh-ticket{flex-direction:row;gap:6px;padding:5px}
  .kh-ticket.compact .kh-head{display:flex;flex:0 0 84px;flex-direction:column;justify-content:center;min-height:0;padding:0}
  .kh-ticket.compact .kh-views{flex:none;flex-direction:column}
  .kh-grid{grid-template-rows:repeat(4,minmax(12px,1fr)) 22px repeat(4,minmax(12px,1fr))}
}
@media (max-height:500px) and (orientation:landscape) and (min-width:800px){
  .kh-ticket .kh-pays{display:flex;flex:0 0 84px;flex-direction:column;justify-content:center;gap:3px;min-height:0;padding:0}
  .kh-pays span{flex:none;max-width:none;display:flex;justify-content:space-between;gap:4px;padding:4px 7px;font-size:12px}
  .kh-pays em{font-size:12px;text-align:center}
}

/* reduced motion: colour changes and fades only */
@media (prefers-reduced-motion:reduce){
  .kh-n.drawn::before,.kh-tiles li.drawn,.kh-tiles li.hit,.kh-pop:not([hidden]){animation:none}
  .kh-n.fresh .kh-loop path:first-child,.kh-n.fresh .kh-loop .kh-tooth{animation:none}
  .kh-stamp.on{animation:kh-show .2s both,kh-lift .3s ease-in 2.2s both}
  .kh-btn:active:not(:disabled),.kh-view:active{translate:none}
}
body.still .kh-n.drawn::before,body.still .kh-n.fresh .kh-loop path,body.still .kh-tiles li,body.still .kh-pop:not([hidden]){animation:none}
@keyframes kh-show{from{opacity:0}to{opacity:1}}