/* Chrome Diner skin on the shared game shell: a 1950s roadside diner at night. One key light — the enamel pendant lamp,
   top left — lights the symbols, the chrome and the cabinet; the jukebox's neon is the rim light on the lower right.
   Materials, not decals: chrome with a dark horizon, cream vitreous enamel, lacquered cabinet, glass, diner china.
   Motion is transform/opacity only (bubble tubes, the ticket, the plate's nudge); nothing blinks. */
:root{
  --enamel:#6EC3FF; --night:#1B2A3A; --cherry:#FF4F64; --night-hi:#2E3E4E; --enamel-lo:#2A5A80;
  --ink:#F4F8FC; --muted:#B9C8D6;
  --display:"Shrikhand",Georgia,serif; --ui:"Archivo",system-ui,sans-serif;
  --line:color-mix(in srgb,#C9D3DD 34%,transparent); --radius:16px; --radius-sm:10px;
  --chrome:linear-gradient(180deg,#FFFFFF 0%,#DCE4EC 26%,#8D9AA8 46%,#2E3844 52%,#7F8C9A 60%,#D5DDE6 84%,#9AA6B3 100%);
  --chrome-diag:linear-gradient(135deg,#FFFFFF 0%,#DCE4EC 20%,#8D9AA8 42%,#2E3844 50%,#9AA6B3 58%,#E6EDF3 78%,#6F7C8A 100%);
  --lacquer:linear-gradient(180deg,color-mix(in srgb,var(--night) 86%,#FFFFFF),color-mix(in srgb,var(--night) 72%,#000000));
  --panel-bg:linear-gradient(180deg,color-mix(in srgb,var(--night) 88%,#FFFFFF),color-mix(in srgb,var(--night) 80%,#000000)); --panel-border:color-mix(in srgb,#C9D6E2 45%,transparent);
  --ibtn-bg:linear-gradient(180deg,#F4F7FA,#C9D3DD 48%,#9AA6B3 54%,#DCE4EC); --ibtn-ink:#14202C;
  --btn-bg:var(--chrome); --btn-ink:#14202C;
  --window-bg:#F1E9DA; --window-radius:12px; --reel-sep:rgba(70,54,34,.2); --win-glow:var(--cherry); --focus:#FFD23F;
  --spin-ring:transparent; --veil-light:color-mix(in srgb,var(--cherry) 18%,transparent);
  --ov-plate:linear-gradient(180deg,#0E1720,#18242F); --ov-plate-line:color-mix(in srgb,#C9D3DD 55%,transparent);
}
body{background:var(--bg)}
/* the skin's display face has one weight: the shell's bold display headings would be faux-bold */
body[data-font="skin"] :is(.ovcard h2,.btn,.panel h2,.panel h3,.screen h2,.fsbar .fsx,.tablet .th){font-weight:400}

/* ---- scene: stainless wall under the lamp, the counter's chrome and cherry trim, the floor fading into the dark */
.scene .wall{background:
  radial-gradient(42% 52% at 50% 44%,color-mix(in srgb,var(--enamel) 13%,transparent),transparent 72%),
  radial-gradient(36% 50% at 13% 20%,rgba(255,214,160,.15),transparent 70%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,rgba(0,0,0,.12) 1px 2px,transparent 2px 112px),
  linear-gradient(180deg,color-mix(in srgb,var(--night) 84%,#FFFFFF),var(--night) 46%,color-mix(in srgb,var(--night) 78%,#000000))}
.scene .counter{inset:57% 0 20% 0;background:
  linear-gradient(180deg,#E6EDF3 0 2px,#5E6B7A 2px 3px,color-mix(in srgb,var(--cherry) 62%,#1A0A0E) 3px 10px,#C9D3DD 10px 11px,#2E3844 11px 13px,transparent 13px),
  linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.35)),
  repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 3px,rgba(0,0,0,.18) 3px 5px,transparent 5px 16px),
  color-mix(in srgb,var(--night) 70%,#000000)}
.scene .floor{inset:auto 0 0 0;height:20%;overflow:hidden;background:linear-gradient(180deg,#05090E,color-mix(in srgb,var(--night) 50%,#000000))}
.scene .floor::before{content:"";position:absolute;left:-40%;right:-40%;top:0;bottom:-80%;background:conic-gradient(#D9D2C4 25%,#141C24 0 50%,#D9D2C4 0 75%,#141C24 0) 0 0/72px 72px;
  transform:perspective(420px) rotateX(58deg);transform-origin:50% 0;opacity:.2;-webkit-mask:linear-gradient(180deg,transparent,#000 40%);mask:linear-gradient(180deg,transparent,#000 40%)}
.scene .lamp{inset:0 auto auto clamp(18px,8vw,140px);width:clamp(70px,8.5vw,128px);height:auto;z-index:1}
.scene .clock{inset:clamp(56px,9vh,96px) clamp(24px,7vw,120px) auto auto;width:clamp(84px,11vh,124px);height:auto;z-index:1}
.scene .clock .nb{stroke:var(--enamel)} .scene .clock .nc{stroke:var(--cherry)} .scene .clock .fc{fill:var(--cherry)}
/* the ambient dust canvas redraws every frame: above the static vignette and grain, so their blend is never redone */
.scene>canvas#bgfx{z-index:5}
.scene .vig{z-index:3;background:radial-gradient(120% 90% at 50% 42%,transparent 48%,rgba(4,8,12,.62) 100%)}
.scene .grain{z-index:4;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}
/* "roadside": the desert highway at dusk, a neon diner sign on its pole */
.scene .road,.scene .sign{opacity:0;transition:opacity .8s var(--ease-std)}
.scene .road svg{width:100%;height:100%;display:block}
.scene .sign{inset:auto auto 0 clamp(8px,5vw,90px);width:clamp(110px,15vw,220px);height:auto;z-index:1}
.scene .sign svg{width:100%;height:auto;display:block}
.scene .sign .nc{stroke:var(--cherry)} .scene .sign .sg{font:400 50px/1 var(--display);fill:#FFE9EC;paint-order:stroke;stroke:color-mix(in srgb,var(--cherry) 55%,transparent);stroke-width:5px}
body.bg-roadside .scene .road,body.bg-roadside .scene .sign{opacity:1}
body.bg-roadside .scene :is(.wall,.counter,.floor,.lamp,.clock){opacity:0}

/* ---- title: cream script with a cherry enamel edge and a soft neon spill */
/* Shrikhand's wide left bearing on the "C" puts the ink .043em right of its box at every size (measured 1280/768/390/360):
   .086em of padding on the right centres the glyphs themselves. Padding, not text-indent: fitTitle measures the text
   against the content box, so the fitted sizes stay exactly as they were. */
.logo h1{padding-right:.086em;font-weight:400;color:#FFF4EA;text-shadow:0 2px 0 color-mix(in srgb,var(--cherry) 62%,#2A0610),0 0 12px color-mix(in srgb,var(--cherry) 50%,transparent),0 0 30px color-mix(in srgb,var(--cherry) 24%,transparent)}
.ibtn{border:1px solid rgba(6,11,16,.7);box-shadow:inset 0 1px 0 #FFFFFF,0 2px 5px rgba(0,0,0,.35)}

/* ---- the jukebox arch: chrome bezel (light top left, dark horizon), lacquered cabinet, a neon tube following the arch,
   two glass bubble tubes lit from inside, a chrome crest. The board and the Blue Plate sit inside it. */
.frame{position:relative;display:grid;grid-template-columns:auto auto;align-items:center;gap:calc(var(--cell)*.18);padding:calc(var(--cell)*.36) calc(var(--cell)*.3) calc(var(--cell)*.16)}
.frame .board{grid-column:1;grid-row:1}.frame .plate{grid-column:2;grid-row:1}.frame .message{grid-column:1/-1;grid-row:2;position:relative;z-index:1}
.arch{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:calc(var(--cell)*1.2) calc(var(--cell)*1.2) 18px 18px;border:clamp(6px,calc(var(--cell)*.085),11px) solid transparent;
  background:radial-gradient(60% 34% at 26% 0%,rgba(255,236,210,.1),transparent 70%) padding-box,var(--lacquer) padding-box,var(--chrome-diag) border-box;
  box-shadow:0 0 0 1px rgba(5,9,14,.75),inset 0 18px 26px -12px rgba(0,0,0,.55),0 26px 54px rgba(0,0,0,.55)}
.arch::before{content:"";position:absolute;inset:clamp(4px,calc(var(--cell)*.05),7px);border-radius:calc(var(--cell)*1.2 - 10px) calc(var(--cell)*1.2 - 10px) 10px 10px;
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--enamel) 90%,#FFFFFF),0 0 9px 1px color-mix(in srgb,var(--enamel) 45%,transparent),inset 0 0 10px color-mix(in srgb,var(--enamel) 22%,transparent)}
.arch .tube{position:absolute;top:24%;bottom:9%;width:clamp(8px,calc(var(--cell)*.1),13px);border-radius:999px;overflow:hidden;
  background:linear-gradient(90deg,rgba(255,255,255,.55) 0 10%,rgba(255,255,255,.12) 24%,transparent 46%,rgba(0,0,0,.28) 84%,rgba(0,0,0,.42)),
    linear-gradient(180deg,#FFC870,color-mix(in srgb,var(--cherry) 82%,#FF9A3C) 55%,color-mix(in srgb,var(--cherry) 70%,#000000));
  box-shadow:0 0 0 1.5px rgba(8,13,18,.75),0 0 0 3px #AEB9C4,0 0 14px color-mix(in srgb,var(--cherry) 42%,transparent)}
.arch .tube.l{left:calc(var(--cell)*.09)}.arch .tube.r{right:calc(var(--cell)*.09)}
/* bubbles: a tall pattern moved by transform (one period of both rows: 374 px), never a background-position animation */
.arch .tube::after{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 374px);
  background:radial-gradient(circle at 50% 12px,rgba(255,255,255,.85) 0 1.6px,transparent 2.3px) 0 0/100% 34px,radial-gradient(circle at 34% 8px,rgba(255,255,255,.55) 0 1.1px,transparent 1.7px) 0 0/100% 22px;
  animation:cd-bubbles 7s linear infinite}
@keyframes cd-bubbles{to{transform:translateY(-374px)}}
.frame>.crown{position:absolute;z-index:1;left:50%;top:calc(var(--cell)*-.17);width:calc(var(--cell)*1.4);height:auto;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 4px 4px rgba(0,0,0,.4))}
.board{position:relative;z-index:1}
/* ---- the drums: cream enamel, each one shaded as a cylinder (dark at the top and bottom edge, the lamp's light on its
   upper third), behind curved glass that sits in a niche (shadow from the top, a light lip below) and a chrome ring */
.reels-board .window{box-shadow:0 0 0 2px #0A1016,0 0 0 4.5px #C9D3DD,0 0 0 5.5px #5E6B7A,0 0 0 6.5px rgba(255,255,255,.28)}
.reels-board .reel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(40,28,14,.36),rgba(40,28,14,.07) 16%,rgba(255,250,240,.16) 26%,rgba(255,250,240,0) 38%,transparent 68%,rgba(40,28,14,.09) 84%,rgba(40,28,14,.38));
  box-shadow:inset 1px 0 0 rgba(255,255,255,.5)}
.reels-board .window::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(174deg,rgba(255,255,255,.2) 0,rgba(255,255,255,.05) 16%,transparent 17%);
  box-shadow:inset 0 16px 18px -10px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(20,14,8,.3)}
.reels-board .window::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cherry) 85%,#000000) 6% 94%,transparent);opacity:.42}
.reels-board .cell.dim .sym{filter:none;opacity:.45}
.reels-board .cell.win::after{border-color:color-mix(in srgb,var(--cherry) 78%,#000000);box-shadow:0 0 0 1px rgba(255,255,255,.55),0 0 14px color-mix(in srgb,var(--cherry) 50%,transparent),inset 0 0 12px color-mix(in srgb,var(--cherry) 20%,transparent)}
/* mechanical detent: a short two-step drop into place, no bounce */
.reels-board .cell.landed .sym{animation:cd-detent .16s steps(2,end)}
@keyframes cd-detent{0%{transform:translateY(-4%)}100%{transform:none}}

/* ---- the Blue Plate: a neon script sign over diner china (raised rim with a cobalt band, the well recessed under the
   lamp), five order lamps for the step; the plate dims while the reels run and nudges once per step */
.plate{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:calc(var(--cell)*.08);width:calc(var(--cell)*1.05)}
.plate-sign{font:400 calc(var(--cell)*.2)/1.15 var(--display);white-space:nowrap;color:#EAF6FF;text-shadow:0 0 2px var(--enamel),0 0 9px var(--enamel),0 0 20px color-mix(in srgb,var(--enamel) 55%,transparent)}
.plate-dish{position:relative;width:calc(var(--cell)*.98);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(closest-side,transparent 0 66%,color-mix(in srgb,#2C5FB8 70%,transparent) 67% 68.4%,transparent 69% 75%,#2C5FB8 75.5% 85%,transparent 85.6%),
    radial-gradient(circle at 34% 28%,#FFFFFF,#F3EDE2 42%,#D8CEBF 92%,#C9BEAD);
  box-shadow:0 7px 12px rgba(0,0,0,.45),0 2px 3px rgba(0,0,0,.3),inset -2px -3px 2px -1px color-mix(in srgb,var(--enamel) 45%,transparent),inset 2px 2px 2px rgba(255,255,255,.8)}
.plate-dish::before{content:"";position:absolute;inset:21%;border-radius:50%;background:linear-gradient(135deg,#DCD2C2,#F5EFE5 46%,#FFFFFF);box-shadow:inset 2px 3px 5px rgba(80,60,36,.28),inset -1px -1px 0 rgba(255,255,255,.9)}
.plate-x{position:relative;font:400 calc(var(--cell)*.32)/1 var(--display);color:#16222E;transition:opacity var(--t-fast) var(--ease-std)}
.plate[data-tier="4"] .plate-x,.plate[data-tier="3"] .plate-x{color:#A3112F}
.plate.rolling .plate-x{opacity:.32}
.plate-dish.served{animation:cd-serve .26s var(--ease-out)}
@keyframes cd-serve{40%{transform:scale(1.06)}}
.plate-pips{display:flex;gap:6px}
.plate-pips i{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4A5868,#141C24 72%);box-shadow:0 0 0 1.5px #8D9AA8,inset 0 -1px 1px rgba(0,0,0,.5)}
.plate-pips i.on{background:radial-gradient(circle at 35% 30%,#FFFFFF,var(--enamel) 48%,color-mix(in srgb,var(--enamel) 55%,#000000));box-shadow:0 0 0 1.5px #DCE4EC,0 0 8px var(--enamel)}

/* ---- Order Up: a guest check (ruled paper, a torn top edge) rolls up over the middle reel */
.ticket{position:absolute;z-index:4;left:50%;top:40%;transform:translate(-50%,40%) scaleY(0);transform-origin:50% 100%;opacity:0;pointer-events:none;
  min-width:calc(var(--cell)*1.5);padding:calc(var(--cell)*.16) calc(var(--cell)*.2) calc(var(--cell)*.12);color:#16222E;text-align:center;border-radius:0 0 4px 4px;
  background:linear-gradient(180deg,transparent 0 calc(var(--cell)*.5),rgba(46,120,96,.22) 0 calc(var(--cell)*.5 + 1px),transparent 0) 0 0/100% calc(var(--cell)*.22),linear-gradient(180deg,#FBF6EA,#EEE5D0);
  box-shadow:0 14px 26px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.3);
  -webkit-mask:radial-gradient(circle at 5px 0,transparent 4px,#000 4.6px) 0 0/10px 8px repeat-x,linear-gradient(#000,#000) 0 7px/100% calc(100% - 7px) no-repeat;
  mask:radial-gradient(circle at 5px 0,transparent 4px,#000 4.6px) 0 0/10px 8px repeat-x,linear-gradient(#000,#000) 0 7px/100% calc(100% - 7px) no-repeat}
.ticket b{display:block;font:400 calc(var(--cell)*.24)/1.15 var(--display);color:#A3112F;padding-bottom:4px;margin-bottom:5px;border-bottom:1.5px solid rgba(46,120,96,.55)}
.ticket span{font:700 calc(var(--cell)*.2)/1.2 var(--ui);font-variant-numeric:tabular-nums}
.ticket.up{animation:cd-ticket .42s var(--ease-out) forwards}
@keyframes cd-ticket{to{transform:translate(-50%,-50%) scaleY(1);opacity:1}}

/* ---- the cabinet (labels --muted on its top edge ≥ 5.8:1): lacquer with a chrome trim; values in dark glass windows; SPIN is a chrome pill with a neon script
   label that goes dark while the reels run (no spinning ring round a pill) */
.hud{border:2px solid transparent;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 42%) padding-box,linear-gradient(180deg,color-mix(in srgb,var(--night) 90%,#FFFFFF),color-mix(in srgb,var(--night) 70%,#000000)) padding-box,var(--chrome) border-box;
  box-shadow:0 0 0 1px rgba(5,9,14,.7),0 16px 30px rgba(0,0,0,.45)}
.meter b{color:#CFEBFF;background:linear-gradient(180deg,#05080C,#0E1720);border-radius:7px;padding:2px 10px;display:inline-block;max-width:100%;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.14);text-shadow:0 0 7px color-mix(in srgb,var(--enamel) 50%,transparent)}
.meter.win b{color:#FFD58A;text-shadow:0 0 7px rgba(255,190,90,.4)}
.hud .meter.win.at-zero b{color:var(--muted);text-shadow:none}
.pm,.auto{box-shadow:inset 0 1px 0 #FFFFFF,0 2px 5px rgba(0,0,0,.35);border-color:rgba(6,11,16,.7)}
.spin{--s:clamp(78px,7.5vw,100px);width:calc(var(--s)*1.5);border-radius:calc(var(--s)/2);background:var(--chrome);
  box-shadow:0 0 0 1.5px #070C11,inset 0 1px 0 rgba(255,255,255,.85),0 10px 18px rgba(0,0,0,.5),0 2px 3px rgba(0,0,0,.4)}
.spin .pill-label{position:absolute;inset:15% 9%;display:grid;place-items:center;border-radius:999px;padding-bottom:.06em;
  background:radial-gradient(120% 90% at 32% 18%,color-mix(in srgb,var(--night) 88%,#FFFFFF),#070C11 78%);
  box-shadow:inset 0 3px 7px rgba(0,0,0,.75),inset 0 -1px 0 rgba(255,255,255,.16),0 1px 0 rgba(255,255,255,.65);
  font:400 calc(var(--s)*.34)/1 var(--display);color:#FFE6E9;text-shadow:0 0 2px var(--cherry),0 0 9px var(--cherry),0 0 18px color-mix(in srgb,var(--cherry) 50%,transparent);
  transition:color var(--t-fast) var(--ease-std),text-shadow var(--t-fast) var(--ease-std)}
.spin.busy .pill-label{color:#B9C8D6;text-shadow:none}
.spin.kick{transform:translateY(2px)}

/* ---- big wins: the tier word in the script with the title's enamel edge, the amount in a dark glass window */
.ovcard h2{color:#FFF4EA;text-shadow:0 3px 0 color-mix(in srgb,var(--cherry) 62%,#2A0610),0 0 16px color-mix(in srgb,var(--cherry) 55%,transparent),0 0 44px color-mix(in srgb,var(--cherry) 26%,transparent)}
.ovamt{color:#FFE2A8}

/* admin variant "Clean frame": the chrome arch and its neon without the bubble tubes and the crest (the crest keeps its
   box: fitArch measures it) */
body[data-variant="clean"] .arch .tube{display:none}
body[data-variant="clean"] .frame>.crown{visibility:hidden}
body.still .arch .tube::after,body.still .plate-dish.served{animation:none}
@media (prefers-reduced-motion:reduce){.arch .tube::after,.plate-dish.served,.ticket.up{animation:none!important}.ticket.up{transform:translate(-50%,-50%);opacity:1}}
@media (max-width:860px),(max-aspect-ratio:4/5){
  .frame{grid-template-columns:auto;justify-items:center;padding:calc(var(--cell)*.4) calc(var(--cell)*.22) calc(var(--cell)*.1)}
  .frame .plate{grid-column:1;grid-row:2}.frame .message{grid-row:3}
  .plate{flex-direction:row;width:auto;gap:calc(var(--cell)*.12)}
  .plate-dish{width:calc(var(--cell)*.62)}.plate-x{font-size:calc(var(--cell)*.21)}
  .plate-sign{font-size:calc(var(--cell)*.2)}
  .plate-pips{gap:5px}
  .scene .lamp,.scene .clock{display:none}
  .scene .counter{inset:66% 0 14% 0}.scene .floor{height:14%}
}
/* small phones (<=400px, incl. 320): keep the chrome pill but narrow it, tighten the bet meter so the bottom row
   (bet - / + , autoplay, SPIN) fits without clipping WIN/SPIN or squeezing the +/- buttons */
@media (max-width:400px){
  .spin{--s:72px;width:calc(var(--s)*1.2)}
  .spin .pill-label{font-size:24px}
  .betctl .meter{min-width:54px}
  .betctl .pm{flex:none}
  .meter b{padding:1px 5px}
}