/* Drum Six — a TV-studio lottery set on the table shell. Theme colours come from skin.js themeMap (--ink, --muted,
   --surface, --well, --line, --on-accent… with measured contrast); the materials on top of them follow one studio key
   light from the top left (art-direction §5): lacquered balls (form shading, a sharp specular over the printed number
   disc), an acrylic drum in a chrome cage (art.js drumSVG), a moulded ball tray with recessed sockets, a quiet ticket
   whose chosen numbers turn into balls, a cyclorama studio behind it all. Balls keep their band colours on every theme.
   Sizes: --d (drum width), --c (one tray place), --cols (tray places a row), --g (ticket numbers a row) and --sb (a ball
   of the phone strip) come from main.js layout(), which also picks data-layout — the paddings, borders and gaps it
   counts (tray 19 px, a ticket number 44 + 6 px) must not change here. Motion: transform / opacity only. */
:root{--display:"Lilita One",system-ui,sans-serif;--ui:"IBM Plex Sans",system-ui,sans-serif;--prim-radius:14px;--radius:14px;--radius-sm:10px;
  --surface:#063B52;--well:#04293A;--line-soft:color-mix(in srgb,var(--ink) 20%,transparent);--on-accent:#084E6D;--glass:#20607C;
  /* the material tones of the dark studio (body[data-tone="light"] below for the ticket-paper preset) */
  --ds-shade:rgb(0 10 20 / .5);--ds-drop:rgb(0 8 16 / .55);--ds-lip:rgb(255 255 255 / .1);--ds-hole:color-mix(in srgb,var(--well) 70%,#000);
  --glass-tint:#BFE6F7;--glass-edge:#FFFFFF;--glass-rim:#7FD3F0;
  --lamp:rgb(220 240 255 / .05);--room-vignette:.42}
body[data-tone="light"]{--ds-shade:rgb(40 50 30 / .2);--ds-drop:rgb(60 60 20 / .22);--ds-lip:rgb(255 255 255 / .6);--ds-hole:color-mix(in srgb,var(--well) 84%,var(--ink));
  --glass-tint:color-mix(in srgb,var(--ink) 55%,#fff);--glass-edge:#FFFFFF;--glass-rim:var(--ink);--lamp:rgb(255 255 255 / .35);--room-vignette:.12}

/* the board fills the frame; the game lays itself out inside it */
.table-game .board.tboard{flex:1 1 auto;align-items:stretch}
/* layout() sizes everything to fit; if a box is ever too small anyway, the board scrolls inside itself instead of
   painting over the header, the message or the HUD */
.ds{--c:44px;--d:120px;--cols:7;--g:6;--sb:30px;position:relative;width:100%;height:100%;overflow:auto;display:grid;gap:18px;align-content:safe center;justify-content:safe center;align-items:center;color:var(--ink)}
.ds[data-layout="wide"]{grid-template-columns:auto auto auto;grid-template-areas:"drum tray ticket"}
.ds[data-layout="mid"]{grid-template-columns:auto auto;grid-template-areas:"drum tray" "ticket ticket";row-gap:14px}
.ds[data-layout="narrow"]{grid-template-columns:auto minmax(0,420px);grid-template-areas:"drum ticket" "tray tray";gap:10px}
/* phones held sideways and short windows: the drum at the left, the strip and Quick pick over a long, low tray */
.ds[data-layout="row"]{grid-template-columns:auto auto;grid-template-areas:"drum ticket" "drum tray";gap:10px 14px}

/* ---- lottery balls: lacquered spheres lit from the top left — lit side, band colour, core shadow and a lighter band
   of reflected light at the far edge; the number is printed on a white disc, the gloss and its sharp specular sit
   over the print (::after); a soft contact shadow below. The same shading paints a chosen ticket number. ---- */
.ball,.ds-num>b{--ball-shade:radial-gradient(circle farthest-corner at 36% 30%,color-mix(in srgb,var(--ball) 58%,#fff) 0,var(--ball) 25%,color-mix(in srgb,var(--ball) 22%,var(--rim)) 60%,color-mix(in srgb,var(--rim) 50%,var(--ball)) 77%);
  --ball-gloss:radial-gradient(circle at 32% 22%,rgb(255 255 255 / .95) 0 3.6%,rgb(255 255 255 / 0) 8.5%),radial-gradient(ellipse 46% 30% at 40% 18%,rgb(255 255 255 / .26),rgb(255 255 255 / 0) 100%)}
.ball{--bs:32px;--ball:#E4572E;--rim:#9E3417;position:relative;display:grid;place-items:center;flex:none;width:var(--bs);height:var(--bs);border-radius:50%;
  background:var(--ball-shade);box-shadow:0 calc(var(--bs)*.07) calc(var(--bs)*.12) rgb(0 0 0 / .3)}
.ball::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:var(--ball-gloss)}
.ball>b{display:grid;place-items:center;width:64%;height:64%;border-radius:50%;background:radial-gradient(circle at 42% 34%,#FFFFFF 0 46%,#EDF1F4 74%,#CDD5DC 100%);
  box-shadow:0 calc(var(--bs)*-.01) 0 rgb(0 0 0 / .06);color:#14202B;font:400 calc(var(--bs)*.4)/1 var(--display);letter-spacing:0}
.b0{--ball:#E4572E;--rim:#9E3417}.b1{--ball:#F29E1F;--rim:#A8650A}.b2{--ball:#E9CF2B;--rim:#A08A0E}
.b3{--ball:#3BA55C;--rim:#22693A}.b4{--ball:#2F80D1;--rim:#1B528C}.b5{--ball:#8E5BD0;--rim:#5B3492}
.ball.q{background:var(--well);box-shadow:inset 0 0 0 1.5px var(--line),inset 0 2px 4px var(--ds-shade)}
.ball.q>b{background:none;box-shadow:none;color:var(--ink);font-size:calc(var(--bs)*.5)}
.ball.empty{background:var(--ds-hole);box-shadow:inset 0 calc(var(--bs)*.08) calc(var(--bs)*.12) var(--ds-shade),0 1px 0 var(--ds-lip)}
.ball.empty>b{background:none;box-shadow:none}
.ball:is(.q,.empty)::after{content:none}
.ball.fly{position:absolute;z-index:5;transform-origin:0 0;pointer-events:none;will-change:transform}

/* ---- the drum (art.js drumSVG): acrylic, chrome, lacquered knob in the theme's accent ---- */
.ds-drumbox{grid-area:drum;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.ds-drumwrap{position:relative;width:var(--d);aspect-ratio:220/250}
.ds-drum{display:block;width:100%;height:100%;overflow:visible}
.ds-drum .gt{stop-color:var(--glass-tint)}.ds-drum .ge{stop-color:var(--glass-edge)}.ds-drum .gr{stop-color:var(--glass-rim)}
.ds-drum .k0{stop-color:color-mix(in srgb,var(--accent) 45%,#fff)}.ds-drum .k1{stop-color:var(--accent)}
.ds-drum .k2{stop-color:color-mix(in srgb,var(--accent) 52%,#000)}.ds-drum .k3{stop-color:color-mix(in srgb,var(--accent) 72%,#000)}
.ds-drum .ds-stand .lg{fill:none;stroke:#7D8D98;stroke-width:8;stroke-linecap:round}
.ds-drum .ds-stand .lh{fill:none;stroke:#F2F6F8;stroke-opacity:.75;stroke-width:1.8;stroke-linecap:round}
.ds-drum .ds-chute .tb{fill:none;stroke:var(--glass-tint);stroke-opacity:.2;stroke-width:22;stroke-linecap:round}
.ds-drum .ds-chute .te{fill:none;stroke:var(--glass-edge);stroke-opacity:.5;stroke-width:1.6;stroke-linecap:round}
.ds-drum .ds-chute .ts{fill:none;stroke:#000;stroke-opacity:.22;stroke-width:1.4;stroke-linecap:round}
.ds-drum .ds-cage .sp{fill:none;stroke:#DCE5EA;stroke-opacity:.42;stroke-width:1.5}
.ds-drum .ds-shine .rf{fill:none;stroke:var(--glass-edge);stroke-opacity:.16;stroke-width:3;stroke-linecap:round}
.ds-drum .rl{stroke:var(--glass-rim);stroke-opacity:.35}
.ds-drum .ds-crankarm .ca{fill:none;stroke:#8F9EA9;stroke-width:7;stroke-linecap:round}
.ds-drum .ds-crankarm .ch{fill:none;stroke:#F4F8FA;stroke-opacity:.8;stroke-width:2;stroke-linecap:round}
.ds-drum .ib{transition:opacity .25s,cx .5s var(--ease-in,ease-in),cy .5s var(--ease-in,ease-in)}
.ds-drum .ib.gone{opacity:0}
/* mixing: the balls tumble, the cage (spokes and rivets) and the crank turn about the hub, one turn in 1.1 s */
.ds-drum.mixing .ib{animation:ds-mix var(--t,400ms) ease-in-out var(--w,0ms) infinite alternate}
.ds-drum.mixing :is(.ds-crankarm,.ds-cage){animation:ds-turn 1.1s linear infinite}
@keyframes ds-mix{to{transform:translate(var(--dx),var(--dy))}}
@keyframes ds-turn{to{transform:rotate(360deg)}}
/* the last ball out sits at the chute's mouth (an empty mouth: a dark opening) */
.ds-now{--bs:max(28px,calc(var(--d)*.22));position:absolute;left:87%;top:88%;width:var(--bs);height:var(--bs);border-radius:50%;transform:translate(-50%,-50%)}
.ds-now:not(.ball){background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--ds-hole) 70%,transparent) 0 58%,transparent 72%);box-shadow:inset 0 0 0 1.5px var(--line-soft)}
.ds-now.mine{box-shadow:0 0 0 2px var(--bg),0 0 0 4.5px var(--accent),0 calc(var(--bs)*.07) calc(var(--bs)*.12) rgb(0 0 0 / .3)}
.ds-count{margin:0;font-weight:600;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
/* during a draw the drum says it can be skipped (a tap on the drum or the tray, or Space / Enter / Escape); a drum
   under 70 px has no room for it (the help panel says it) */
.ds-drumwrap::after{content:attr(data-hint);position:absolute;left:50%;top:21%;transform:translateX(-50%);padding:3px 9px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line-soft);color:var(--ink);font:600 11px/1.25 var(--ui);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--t-base,.2s) var(--ease-std,ease)}
.ds.drawing:not(.skipped,[data-small]) .ds-drumwrap::after{opacity:1}
.ds[data-layout="narrow"] .ds-count,.ds[data-layout="row"] .ds-count{display:none}

/* ---- the ball tray: a moulded tray lit from above (a light top lip, a darker lower edge, its shadow on the set) with
   35 recessed sockets, 7 a row (12 or 18 when sideways), each with its pay; a row is the ball and its pay line
   (main.js rowH uses the same sum) ---- */
.ds-traybox{grid-area:tray;display:flex;justify-content:center;min-width:0}
.ds-tray{list-style:none;margin:0;padding:8px;display:grid;grid-template-columns:repeat(var(--cols),var(--c));grid-auto-rows:max(calc(var(--c)*1.24),calc(var(--c)*.87 + 12.5px));border-radius:var(--radius);
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 80%,var(--bg)) 0,var(--surface) 26%,color-mix(in srgb,var(--surface) 72%,var(--well)) 100%);border:1.5px solid var(--line-soft);
  box-shadow:inset 0 1px 0 var(--ds-lip),inset 0 -2px 0 rgb(0 0 0 / .14),0 24px 36px -20px var(--ds-drop)}
.ds-sock{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:calc(var(--c)*.04);padding-top:calc(var(--c)*.05);min-width:0}
.ds-slot{--bs:calc(var(--c)*.78);display:grid;place-items:center;width:var(--bs);height:var(--bs);border-radius:50%;
  background:radial-gradient(circle at 50% 62%,var(--well) 0 50%,var(--ds-hole) 100%);box-shadow:inset 0 calc(var(--c)*.05) calc(var(--c)*.08) var(--ds-shade),0 1px 0 var(--ds-lip)}
.ds-slot>.ball{--bs:calc(var(--c)*.72)}
.ds-slot>i{font-style:normal;font-weight:600;font-size:max(11px,calc(var(--c)*.3));color:var(--muted);font-variant-numeric:tabular-nums}
.ds-sock em{font-style:normal;font-weight:700;font-size:max(11px,calc(var(--c)*.27));line-height:1.1;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;padding:0 3px;border-radius:5px}
.ds[data-tight] .ds-sock em{padding:0;letter-spacing:-.02em}.ds[data-tight] .ds-sock em>span{display:none}
.ds-sock:nth-child(-n+5) em{letter-spacing:.1em}
/* the place the next ball drops into: a thin ring in the accent that breathes (transform only) */
.ds-sock.next .ds-slot{box-shadow:inset 0 calc(var(--c)*.05) calc(var(--c)*.08) var(--ds-shade),0 0 0 2px var(--accent);animation:ds-pulse .45s var(--ease-std,ease-in-out) infinite alternate}
.ds-sock.next em{color:var(--ink)}
.ds-sock.full:not(.mine) .ball{filter:saturate(.72) brightness(.94)}
.ds-sock.mine .ball{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent),0 calc(var(--bs)*.07) calc(var(--bs)*.12) rgb(0 0 0 / .3)}
/* the ball that completes the ticket: its socket lit from inside, the pay on an accent plate */
.ds-sock.sixth .ds-slot{box-shadow:0 0 0 2.5px var(--accent),0 0 22px 3px color-mix(in srgb,var(--accent) 42%,transparent)}
.ds-sock.sixth em{background:var(--accent);color:var(--on-accent)}
/* the round's end: your six balls rise from their sockets in the order they came out and settle (≤ 6 % overshoot) */
.ds-sock.lineup .ball{animation:ds-hop .56s var(--ease-out,cubic-bezier(.2,.8,.2,1)) calc(var(--k,0)*90ms) both}
@keyframes ds-pulse{to{transform:scale(1.05)}}
@keyframes ds-hop{0%{transform:none}38%{transform:translateY(-24%) scale(1.06)}72%{transform:translateY(3%) scale(.99)}100%{transform:none}}

/* ---- the ticket: 48 quiet dimples printed on the set; a chosen number becomes a ball ---- */
.ds-ticketbox{grid-area:ticket;display:grid;gap:8px;min-width:0;align-content:center}
.ds[data-layout="wide"] .ds-ticketbox{grid-template-areas:"head" "grid" "tools"}
/* mid, and wide on a low desktop window (8 or 12 numbers a row): the tools beside the heading */
.ds[data-layout="mid"] .ds-ticketbox,.ds[data-layout="wide"][data-compact] .ds-ticketbox{grid-template-columns:1fr auto;grid-template-areas:"head tools" "grid grid";justify-self:center}
.ds[data-layout="narrow"] .ds-ticketbox{grid-template-areas:"strip" "tools";gap:8px}
.ds[data-layout="row"] .ds-ticketbox{grid-template-columns:auto auto;grid-template-areas:"strip tools";justify-content:center;align-self:end}
.ds-thead{grid-area:head;display:flex;align-items:baseline;gap:10px}
.ds-thead h2{margin:0;font:400 22px/1.1 var(--display);color:var(--ink);letter-spacing:.01em}
/* the ticket's state sits on the studio (lighter than the grounds --muted is measured on, under the key light): the
   text colour, set apart from the heading by its face and weight */
.ds-tcount{font-weight:500;font-size:15px;color:var(--ink)}
.ds-grid{grid-area:grid;display:grid;grid-template-columns:repeat(var(--g),44px);gap:6px}
.ds[data-layout="mid"] .ds-grid{grid-template-columns:repeat(12,44px)}
/* phones and sideways: the ticket is the strip (the 48 numbers and Clear open in a sheet) */
.ds:is([data-layout="narrow"],[data-layout="row"]) :is(.ds-grid,.ds-thead,.ds-tools [data-act="clear"]),.ds:is([data-layout="wide"],[data-layout="mid"]) .ds-strip{display:none}
.ds[data-layout="wide"][data-compact] .ds-thead h2{font-size:20px}
.ds-num{position:relative;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;display:grid;place-items:center;color:var(--ink)}
.ds-num>b{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--well) 26%,transparent);
  box-shadow:inset 0 0 0 1px var(--line-soft),inset 0 1.5px 2px var(--ds-shade);font:400 17px/1 var(--display);
  transition:transform var(--t-press,.09s) var(--ease-out,ease-out)}
.ds-num:hover:not(:disabled)>b{box-shadow:inset 0 0 0 1.5px var(--line),inset 0 1.5px 2px var(--ds-shade)}
.ds-num:active:not(:disabled)>b{transform:scale(.95)}
.ds-num.on>b{background:radial-gradient(circle closest-side,#FFFFFF 0 44%,#E8EDF1 58%,rgb(232 237 241 / 0) 60.5%),var(--ball-shade);color:#14202B;
  box-shadow:0 2px 5px rgb(0 0 0 / .32)}
.ds-num.on>b::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:var(--ball-gloss)}
/* a number the drum has drawn (not on your ticket) lights up on the board: a lit, raised disc instead of a dimple —
   opaque, so its contrast never depends on the studio light behind it */
.ds-num.drawn>b{background:color-mix(in srgb,var(--ink) 22%,var(--surface));box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 var(--ds-lip)}
body[data-tone="light"] .ds-num.drawn>b{background:#FFFFFF}
.ds-num.hit>b{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent),0 2px 5px rgb(0 0 0 / .32)}
.ds-num.hit::after{content:"\2713";position:absolute;top:-3px;right:-3px;width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--on-accent);font:700 12px/18px var(--ui);text-align:center;box-shadow:0 0 0 1.5px var(--bg)}
.ds-num:disabled{cursor:default}
.ds-tools{grid-area:tools;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ds[data-layout="narrow"] .ds-tools .ds-quick{flex:1}
.ds[data-layout="row"] .ds-tools{flex-wrap:nowrap}
.ds[data-short]{gap:8px}
.ds[data-short] .ds-ticketbox{grid-template-areas:"strip"}.ds[data-short] .ds-ticketbox>.ds-tools{display:none}
.ds-tool{min-height:44px;padding:0 16px;border-radius:22px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:600 15px/1 var(--ui);
  box-shadow:inset 0 1px 0 var(--ds-lip);transition:border-color var(--t-fast,.14s) var(--ease-std,ease),transform var(--t-press,.09s) var(--ease-out,ease-out)}
.ds-tool:hover:not(:disabled){border-color:var(--ink)}
.ds-tool:active:not(:disabled){transform:translateY(1px)}
.ds-tool[aria-pressed="true"]{border-color:var(--accent);background:var(--well);box-shadow:none}
.ds-tool[aria-pressed="true"]::before{content:"\2713\00a0";color:var(--accent)}
body[data-tone="light"] .ds-tool[aria-pressed="true"]::before{color:var(--ink)}
.ds-tool:disabled{opacity:.55;cursor:default}
.ds-strip{grid-area:strip;display:flex;align-items:center;gap:4px;width:100%;min-height:44px;padding:5px 6px 5px 5px;border-radius:24px;border:1.5px solid var(--line);
  background:linear-gradient(180deg,var(--well),var(--surface) 70%);box-shadow:inset 0 2px 4px var(--ds-shade);color:var(--ink);transition:border-color var(--t-fast,.14s) var(--ease-std,ease)}
.ds-strip:hover:not(:disabled){border-color:var(--ink)}
.ds-strip:disabled{cursor:default}
.ds-sballs{display:flex;flex:1;justify-content:space-between;gap:3px;min-width:0}
.ds-sballs .ball{--bs:var(--sb)}
.ds-sballs .ball.hit{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.ds-strip svg{flex:none;width:18px;height:18px}

/* the phone's number sheet */
.ds-editor .ds-sheetgrid{grid-template-columns:repeat(auto-fill,44px);gap:6px;justify-content:center;max-width:314px;margin:10px auto 0}
.ds-editor .ds-tools{justify-content:center;margin-top:10px}
.ds-editor .lead{margin:10px 0 0;text-align:center}
.ds-editor .ds-done{background:var(--ink);border-color:var(--ink);color:var(--surface)}

/* ---- the title: the set's sign, lit from above (a soft shadow under the letters; the shell keeps it centred) ---- */
.table-game .logo h1{text-shadow:0 1px 0 rgb(0 0 0 / .18),0 6px 18px rgb(0 0 0 / .32)}
body[data-tone="light"] .table-game .logo h1{text-shadow:0 1px 0 rgb(255 255 255 / .6)}

/* ---- the main button is a crank: the accent lacquer lit from above (a bright top, the colour, a darker foot), the
   shell's press (2 px down, 90 ms) ---- */
.spin.tprim{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--btn-ink);
  background:linear-gradient(180deg,color-mix(in srgb,var(--btn-bg) 70%,#fff) 0,var(--btn-bg) 44%,color-mix(in srgb,var(--btn-bg) 88%,#000) 100%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .6),inset 0 -2px 0 rgb(0 0 0 / .16),0 2px 3px rgb(0 0 0 / .3),0 12px 22px -10px rgb(0 0 0 / .6)}
#spinBtn .ds-crank{position:static;transform:none;width:24px;height:24px;flex:none}
body.ds-drawing #spinBtn .ds-crank g{animation:ds-turn 1.1s linear infinite;transform-origin:12px 12px}
.hud.thud{position:relative}
.tstrip li.won{border-color:var(--accent)}

/* ---- the studio around it: a cyclorama that falls dark towards the rig, the key light's pool behind the set, a cove
   of light where the cyc meets the floor, a dark glossy floor, one static grain layer; the shell's lamp and vignette
   (--lamp, --room-vignette) sit on top. Static, no filter on anything that moves. "Plain colour" and the clean
   variant leave it out. ---- */
.ds-scene{position:absolute;inset:0;overflow:hidden;
  --sc-top:color-mix(in srgb,var(--bg) 50%,#000);--sc-mid:color-mix(in srgb,var(--bg) 80%,#000);--sc-cove:color-mix(in srgb,var(--bg) 84%,#BFE6F7);
  --sc-floor:color-mix(in srgb,var(--bg) 52%,#000);--sc-pool:color-mix(in srgb,var(--bg) 74%,#E6F4FF);
  background:radial-gradient(ellipse 54% 44% at 50% 46%,color-mix(in srgb,var(--sc-pool) 55%,transparent),transparent 74%),
    linear-gradient(180deg,var(--sc-top) 0,var(--sc-mid) 34%,var(--bg) 62%,var(--sc-cove) 76%,var(--sc-floor) 84%,color-mix(in srgb,var(--sc-floor) 72%,#000) 100%)}
body[data-tone="light"] .ds-scene{--sc-top:color-mix(in srgb,var(--bg) 84%,var(--ink));--sc-mid:color-mix(in srgb,var(--bg) 94%,var(--ink));--sc-cove:color-mix(in srgb,var(--bg) 70%,#fff);
  --sc-floor:color-mix(in srgb,var(--bg) 86%,var(--ink));--sc-pool:color-mix(in srgb,var(--bg) 40%,#fff)}
.ds-scene .ds-floor{position:absolute;left:0;right:0;bottom:0;height:22%;background:radial-gradient(ellipse 46% 60% at 50% 0,color-mix(in srgb,var(--sc-pool) 30%,transparent),transparent 72%)}
.ds-scene .ds-grain{position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;background: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='.8' 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 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px}
body.bg-plain .ds-scene,body[data-variant="clean"] .ds-scene{display:none}
body[data-variant="clean"] .ds-drum .ds-stand,body[data-variant="clean"] .ds-drum .ds-shine,body[data-variant="clean"] .ds-drum .ds-ao{display:none}

/* ---- rules panel: the pay ladder ---- */
.ds-paylist{list-style:none;padding:0;margin:8px 0 14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.ds-paylist li{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:0 8px;padding:7px 10px;border-radius:8px;background:var(--well)}
.ds-paylist span{font-weight:600}
.ds-paylist b{text-align:right;font:400 18px/1.2 var(--display)}
.ds-paylist small{grid-column:1/-1;color:var(--muted);font-size:13px}

/* ---- the big-win party: the player's own balls ---- */
.ds-party{position:fixed;inset:0;z-index:45;pointer-events:none;overflow:hidden}
.ds-party .ball{--bs:46px;position:absolute;bottom:-52px}

@media (max-width:400px){.ds-thead h2{font-size:19px}.ds-tool{padding:0 12px;font-size:14px}}
/* phones upright: the message line keeps room for two lines, so a long message (a result, "one number to go") never
   takes height from the board in the middle of a draw; it stays one block (a grid would put the win amount's <b> on a
   line of its own) and centres itself vertically with align-content */
@media (max-width:639px) and (orientation:portrait){.table-game .message{min-height:calc(2lh + 2px);display:block;align-content:center;text-wrap:balance}}
/* the smallest phones: the stake's ticket line goes (the strip on the board shows the ticket) */
@media (max-width:340px){.thud #mBetSub{display:none}}
/* short phones (320 × 568, 360 × 640): the results strip gives its height to the tray (the HUD and the message show
   the last result, the history panel all of them) */
@media (max-width:639px) and (max-height:700px){.tstrip{display:none}}
/* a phone held sideways (568 × 320 … 932 × 430): the HUD on one row, no results strip, a smaller message line —
   the board needs every pixel of height for the drum and the tray */
@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"}
  .table-game .spin.tprim{min-width:112px;height:46px}
  .thud .meter b{font-size:18px}
  .thud #mBetSub{display:none}
  .tstrip{display:none}
  .table-game .message{min-height:22px;font-size:14px}
}
/* a small phone sideways (568–700 px wide): the compact HUD of small phones, so the one-row HUD fits */
@media (max-height:500px) and (orientation:landscape) and (max-width:700px){
  .hud.thud{column-gap:8px;padding-left:10px;padding-right:10px}
  .betctl{gap:6px}.betctl .meter{min-width:64px}.pm{width:34px;height:34px;font-size:20px}
  .spinbox{gap:8px}.auto{width:46px;height:46px}.auto svg{width:21px;height:21px}
  .table-game .spin.tprim{min-width:104px}
  .thud .meter b{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .ds-drum.mixing .ib,.ds-drum.mixing :is(.ds-crankarm,.ds-cage),body.ds-drawing #spinBtn .ds-crank g,.ds-sock.next .ds-slot,.ds-sock.lineup .ball{animation:none}
  .ds-drum .ib,.ds-num>b,.ds-tool,.ds-strip{transition:none}
}
body.still .ds-drum.mixing .ib,body.still .ds-drum.mixing :is(.ds-crankarm,.ds-cage),body.still.ds-drawing #spinBtn .ds-crank g,body.still .ds-sock.next .ds-slot,body.still .ds-sock.lineup .ball{animation:none}