/* Brass Lever 777 skin on the shared game shell: a 1930s pier-arcade one-armed bandit. A walnut cabinet (variant "cabinet";
   "plain" keeps only the reels in their nickel bezel) under a nickel crown whose glass holds the pay card, three paper
   reel bands on drums behind thick glass with the red thread of the centre line (boards/pull.css draws the structure;
   its colours are set here), HOLD lamps that glow steadily, nickel shutters, a side lever (wide screens), the message on
   a dark award plate, mechanical counters on a nickel bar and a celluloid PULL knob. Scenes: the pier arcade at dusk,
   the hotel lobby at night. Theme tokens (--ink, --muted, --title, --wood*, --grain, --cab-edge, --trim, --knob*,
   --sky-*, --sea*, --hall*, --plank*, --silhouette, --wall*, --marble*, --vig, --panel-bg, --ptc-bg, --scheme) come
   from skin.js themeMap: dark presets get light ink, the light preset (Cream & Cherry) dark ink and a cream lacquer
   cabinet. The nickel, the paper, the plate and the lamps keep their own colours on every preset, so every text on
   them reads at 4.5:1 or more. The accent (--trim / --knob) is decoration; the knob's label takes the ink that reads on
   it.
   Light (art bible §5.1): one key light, the string of bulbs over the arcade, top left — every bevel is lit on its
   top-left edge and dark on its bottom-right one; the reel window is recessed (the glass shades the top and bottom of
   the drums); one big shadow under the cabinet. Animated properties: transform and opacity only; nothing blinks; no
   filter on a cell. */
:root{
  --display:"Bevan","Bowlby One SC",Georgia,serif; --ui:"Oswald","Antonio","Arial Narrow",system-ui,sans-serif;
  --scheme:dark;
  --ink:#F6F2EA; --muted:#CDBFA8; --title:#F1EDE5;
  --wood:#3F2A14; --wood-hi:#6A4626; --wood-lo:#1A1107; --grain:rgba(0,0,0,.22); --cab-edge:#140D05; --trim:#DD698C;
  --knob:#DD698C; --knob-hi:#EEB4C5; --knob-lo:#6F3446; --knob-ink:#1C120A;
  --nk-hi:#FFFFFF; --nk:#C9CED3; --nk-mid:#9AA1A8; --nk-lo:#6E757C; --nk-ink:#1E1A16;
  /* polished nickel: sky, a dark horizon just below the middle, the floor's bounce */
  --nickel:linear-gradient(180deg,#FFFFFF 0,#E4E8EB 20%,#AFB6BD 44%,#5D656E 51%,#7D868F 58%,#D0D5DA 82%,#9AA1A8 100%);
  --print:#2A1B0E; --print-hi:#8E1A1A;
  --plate:#1C140D; --plate-ink:#F6EBD3; --plate-hi:#FFD27A;
  --sky-top:#13131F; --sky-low:#6E3F2A; --sea:#1F3A3D; --sea-lo:#10191A; --hall:#24170A; --hall-lo:#170F06; --plank:#4E3420; --plank-lo:#1C1208; --silhouette:#130C05;
  --wall:#3E1D1C; --wall-lo:#201409; --marble:#827462; --marble-lo:#261909; --vig:rgba(0,0,0,.5);
  --panel-bg:linear-gradient(180deg,#3B2918,#21160A); --ptc-bg:rgba(0,0,0,.25);
  --radius:12px; --radius-sm:8px;
  --hud-bg:linear-gradient(180deg,#F7F8F9 0,#DEE2E5 26%,#B4BBC1 56%,#A1A8AF 62%,#C9CED3 84%,#8E959C);
  --ibtn-bg:radial-gradient(circle at 36% 30%,#FFFFFF,#D9DDE1 38%,#9AA1A8 78%,#B9C0C6); --ibtn-ink:#1E1A16;
  --btn-bg:radial-gradient(circle at 35% 25%,var(--knob-hi),var(--knob) 50%,var(--knob-lo)); --btn-ink:var(--knob-ink);
  --win-glow:rgba(255,200,90,.5); --spin-ring:rgba(255,214,110,.9);
  /* the pull board (boards/pull.css): paper bands on drums behind a recessed glass */
  --paper:linear-gradient(90deg,rgba(110,72,28,.3),rgba(110,72,28,.07) 9%,transparent 20%,transparent 80%,rgba(110,72,28,.09) 91%,rgba(110,72,28,.32)),linear-gradient(180deg,#F7EDD4,#EDDDB8);
  --window-bg:linear-gradient(180deg,#060403,#1E140B 50%,#060403); --window-pad:8px; --window-radius:8px; --reel-gap-w:8px; --band-radius:2px;
  --off-shade:rgba(40,22,6,.32);
  --thread:linear-gradient(180deg,#E8505A,#B3151C 50%,#650A10); --thread-pin:radial-gradient(circle at 36% 32%,#FFFFFF,#C9CED3 45%,#5E656C);
  --glass:linear-gradient(180deg,rgba(14,8,2,.62) 0,rgba(14,8,2,.26) 8%,rgba(14,8,2,.07) 21%,transparent 33%,transparent 66%,rgba(14,8,2,.1) 80%,rgba(14,8,2,.48) 100%),
    linear-gradient(180deg,transparent 14%,rgba(255,247,226,.11) 18%,rgba(255,247,226,.03) 25%,transparent 30%),
    linear-gradient(108deg,transparent 14%,rgba(255,255,255,.12) 20%,transparent 29%,transparent 66%,rgba(255,255,255,.05) 71%,transparent 76%);
  --lamp-off:radial-gradient(ellipse 80% 95% at 50% 28%,#62421E,#2E1C0A 68%,#1C1005); --lamp-rim:#7D858D;
  --lamp-hold:radial-gradient(ellipse 85% 110% at 50% 26%,#FFF8DA,#FFD45C 46%,#E39A18); --lamp-hold-ink:#2A1A05; --lamp-hold-glow:rgba(255,200,80,.6);
  --lamp-pull:radial-gradient(ellipse 85% 110% at 50% 26%,#FFFFFF,#F1EBDD 55%,#C9BEA6); --lamp-pull-ink:#2A1A05;
  --shutter:linear-gradient(180deg,#F4F6F8,#D2D7DC 34%,#8C949C 52%,#A9B0B7 64%,#7D858D); --shutter-ink:#231B14; --win-ring:rgba(255,206,92,.95);
  color-scheme:var(--scheme,dark);
}
body{background:var(--sky-top);font-family:var(--ui);color:var(--ink)}

/* ---- scenes: masked silhouettes from skin.js (one viewBox, scaled alike); nothing moves ---- */
.scene{background:var(--sky-top)}
.scene .c7-pier,.scene .c7-lobby{display:none}
body.bg-arcade-pier .scene .c7-pier,body.bg-default .scene .c7-pier,body.bg-hotel-lobby .scene .c7-lobby{display:block}
.scene .c7-pier>i,.scene .c7-lobby>i{position:absolute;inset:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center bottom;mask-position:center bottom}
/* far: the dusk sky — the sun just under the horizon behind the machine — and the sea with its sun path */
.c7-pier .sky{background:radial-gradient(ellipse 46% 22% at 50% 58%,color-mix(in srgb,var(--sky-low) 45%,#FFD9A0),transparent 72%),radial-gradient(ellipse 90% 40% at 50% 62%,color-mix(in srgb,var(--sky-low) 80%,#FFB070),transparent 80%),linear-gradient(180deg,var(--sky-top) 0,var(--sky-top) 14%,color-mix(in srgb,var(--sky-top) 50%,var(--sky-low)) 36%,var(--sky-low) 58%,var(--sky-low))}
.c7-pier .sea{background:radial-gradient(ellipse 22% 60% at 50% 0,color-mix(in srgb,var(--sky-low) 55%,#FFD9A0),transparent 70%),repeating-linear-gradient(180deg,transparent 0 5px,rgba(255,232,196,.07) 5px 6px),linear-gradient(180deg,color-mix(in srgb,var(--sea) 70%,var(--sky-low)),var(--sea) 30%,var(--sea-lo));-webkit-mask-image:var(--c7-sea);mask-image:var(--c7-sea)}
/* middle: the hall, its window bars lit from the dusk side */
.c7-pier .hall{background:radial-gradient(ellipse 50% 40% at 50% 34%,color-mix(in srgb,var(--hall) 72%,#C88A50),transparent 70%),linear-gradient(180deg,var(--hall-lo),var(--hall) 48%,var(--hall-lo));-webkit-mask-image:var(--c7-hall);mask-image:var(--c7-hall)}
.c7-pier .mullions{background:linear-gradient(90deg,var(--hall-lo),color-mix(in srgb,var(--hall) 70%,#000));-webkit-mask-image:var(--c7-mullions);mask-image:var(--c7-mullions)}
/* near: the boardwalk floor in perspective (a static 3D plane), the window light lying on it */
.scene .c7-pier>.floor{top:auto;left:-70%;right:-70%;height:46%;transform-origin:50% 100%;transform:perspective(900px) rotateX(40deg);
  background:radial-gradient(ellipse 9% 46% at 33% 6%,rgba(255,196,140,.16),transparent 70%),radial-gradient(ellipse 9% 46% at 67% 6%,rgba(255,196,140,.16),transparent 70%),
    linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.1) 40%,rgba(0,0,0,.35)),
    repeating-linear-gradient(90deg,var(--plank) 0 58px,color-mix(in srgb,var(--plank) 86%,#000) 58px 92px,var(--plank-lo) 92px 96px)}
.scene .c7-pier>.haze{background:linear-gradient(180deg,transparent 44%,color-mix(in srgb,var(--sky-low) 30%,transparent) 66%,transparent 80%)}
.c7-pier .cabs{background:linear-gradient(180deg,color-mix(in srgb,var(--silhouette) 70%,#8A5A30) 62%,var(--silhouette) 70%);-webkit-mask-image:var(--c7-cabs);mask-image:var(--c7-cabs)}
.scene .c7-pier>.bulbs{bottom:auto;height:16%;background:var(--c7-bulbs) center top/auto 100% repeat-x;opacity:.95}
.c7-lobby .wall{background:linear-gradient(180deg,rgba(0,0,0,.42),transparent 26%,transparent 64%,rgba(0,0,0,.38)),radial-gradient(ellipse 70% 50% at 50% 40%,color-mix(in srgb,var(--wall) 70%,#FFE0A8),transparent 70%),repeating-linear-gradient(90deg,var(--wall) 0 34px,var(--wall-lo) 34px 37px,var(--wall) 37px 70px,color-mix(in srgb,var(--wall) 82%,#FFFFFF) 70px 71px)}
.c7-lobby .sconces{background:#FFC878;opacity:.32;-webkit-mask-image:var(--c7-sconces);mask-image:var(--c7-sconces)}
.c7-lobby .arms{background:var(--marble-lo);-webkit-mask-image:var(--c7-arms);mask-image:var(--c7-arms)}
.c7-lobby .cornice{background:linear-gradient(180deg,var(--marble),var(--marble-lo));-webkit-mask-image:var(--c7-cornice);mask-image:var(--c7-cornice);-webkit-mask-position:center top;mask-position:center top}
.c7-lobby .cols{background:linear-gradient(90deg,var(--marble-lo),var(--marble) 30%,color-mix(in srgb,var(--marble) 70%,var(--marble-lo)) 60%,var(--marble-lo));-webkit-mask-image:var(--c7-cols);mask-image:var(--c7-cols)}
/* the marble floor in perspective (a static 3D plane), the lamps' light pooled on it */
.scene .c7-lobby>.floor{top:auto;left:-70%;right:-70%;height:38%;transform-origin:50% 100%;transform:perspective(900px) rotateX(40deg);
  background:radial-gradient(ellipse 12% 50% at 50% 0,rgba(255,206,140,.16),transparent 70%),linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.12) 45%,rgba(0,0,0,.34)),repeating-conic-gradient(var(--marble) 0 25%,var(--marble-lo) 0 50%) 0 0/96px 96px}
/* the palms stand back in the room's half-light (atmospheric perspective), not as black cut-outs */
.c7-lobby .palms{background:linear-gradient(180deg,color-mix(in srgb,var(--silhouette) 62%,var(--wall)),var(--silhouette));opacity:.72;-webkit-mask-image:var(--c7-palms);mask-image:var(--c7-palms)}
/* the warm light the machine stands in, the vignette, one static grain layer */
.scene .c7-vig{pointer-events:none;background:radial-gradient(ellipse 34% 40% at 50% 46%,rgba(255,196,120,.14),transparent 72%),radial-gradient(ellipse at 50% 50%,transparent 52%,rgba(0,0,0,.26) 100%),radial-gradient(ellipse at 50% 46%,transparent 38%,var(--vig) 100%)}
.scene .c7-vig::after{content:"";position:absolute;inset:0;background:var(--c7-noise) 0 0/160px 160px;opacity:.07}

/* ---- header ---- */
.logo h1{font-family:var(--display);font-weight:400;font-size:clamp(24px,3.2vw,40px);letter-spacing:.02em;color:var(--title);
  text-shadow:0 2px 0 color-mix(in srgb,var(--sky-top) 60%,#000),0 6px 16px rgba(0,0,0,.45)}
.ibtn{border:1px solid var(--nk-lo);border-radius:50%;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 5px rgba(0,0,0,.45)}
.ibtn:hover{border-color:var(--nk-ink)}

/* ---- the cabinet: figured walnut, a nickel moulding, one big shadow ---- */
.frame{gap:8px}
body:not([data-variant="plain"]) .frame{padding:12px 16px;border-radius:26px 26px 12px 12px;
  background:radial-gradient(ellipse 70% 36% at 26% 0,rgba(255,224,176,.16),transparent 70%),
    linear-gradient(90deg,rgba(0,0,0,.32),transparent 7%,transparent 90%,rgba(0,0,0,.44)),
    var(--c7-grain) 0 0/220px 440px,
    linear-gradient(180deg,var(--wood-hi),var(--wood) 34%,var(--wood-lo));
  box-shadow:inset 1px 1px 0 rgba(255,232,196,.2),inset -1px -2px 0 rgba(0,0,0,.45),
    0 0 0 1px var(--cab-edge),0 0 0 3px #A9B0B6,-1px -1px 0 4px #F2F4F6,1px 1px 0 4px #4E555C,0 0 0 5px var(--cab-edge),
    0 34px 60px -12px rgba(0,0,0,.62),0 10px 20px rgba(0,0,0,.32)}
/* the crown: a nickel arch whose glass holds the pay card (phones: one line) */
.c7-crown{position:relative;align-self:stretch;margin:-12px -16px 0;padding:10px 16px 8px;border-radius:26px 26px 6px 6px;
  background:linear-gradient(180deg,#FFFFFF 0,#E8EBEE 18%,#B9C0C6 40%,#626A73 47%,#8C949C 56%,#CFD4D9 80%,#9AA1A8);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.85),inset 2px 0 0 rgba(255,255,255,.35),inset -2px 0 0 rgba(0,0,0,.18),0 3px 6px rgba(0,0,0,.35)}
.c7-crown::before{content:"";position:absolute;left:50%;top:-14px;width:84px;height:16px;margin-left:-42px;border-radius:42px 42px 0 0;background:var(--nickel);box-shadow:inset 0 2px 0 #FFFFFF,inset 2px 0 0 rgba(255,255,255,.5),0 -1px 0 var(--nk-lo)}
.c7-crown::after{content:"";position:absolute;left:50%;top:-10px;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#FFFFFF 0,var(--knob-hi) 12%,var(--knob) 46%,var(--knob-lo));box-shadow:1px 2px 2px rgba(0,0,0,.4)}
.c7-card,.c7-short{border-radius:7px;color:var(--print);background:radial-gradient(ellipse at 40% 30%,#FAF2DF,#EDDFBE 70%,#DCCAA0);box-shadow:inset 0 0 0 1px rgba(0,0,0,.42),inset 0 3px 7px rgba(0,0,0,.26),inset 0 -1px 0 rgba(255,255,255,.4)}
.c7-card{padding:5px 12px 6px}
.c7-card-h{font-family:var(--ui);font-weight:600;font-size:12px;line-height:1.2;letter-spacing:.04em;text-align:center;color:#5A3A1A;margin-bottom:3px}
.c7-rows{display:grid;grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:1px 18px;justify-content:center}
.c7-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.c7-ic{position:relative;display:flex;align-items:center;gap:1px}
.c7-ic img{width:21px;height:21px;display:block}
.c7-ic i{font-style:normal;font-family:var(--ui);font-weight:600;font-size:10px;letter-spacing:.06em;color:var(--print-hi);margin-left:3px}
.c7-row b{font-family:var(--display);font-weight:400;font-size:16px;line-height:1.15;color:var(--print-hi);min-width:3ch;text-align:right;font-variant-numeric:tabular-nums}
.c7-short{display:none;padding:4px 10px;text-align:center;font-family:var(--ui);font-size:14px;line-height:1.25;color:#3A2410}
.c7-short b{font-weight:600;color:var(--print-hi)}
/* the reels' nickel bezel, bevelled toward the light, set into the wood */
.pull-board .window{box-shadow:0 0 0 2px #23282D,0 0 0 5px #AAB1B8,-1px -1px 0 6px #F4F6F8,1px 1.5px 0 6px #474E55,0 0 0 8px var(--cab-edge),0 8px 18px 6px rgba(0,0,0,.32),inset 0 0 0 1px rgba(0,0,0,.7)}
.pull-board .lamps{margin-bottom:4px}
.pull-board .lamp{box-shadow:inset 0 2px 4px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,220,160,.12),0 0 0 1.5px var(--lamp-rim),0 1px 0 2px rgba(0,0,0,.35)}
.pull-board .preel.pulling{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--lamp-pull-ink) 30%,#F4EFE6)}
/* the symbols take a little more of the band (the art keeps its own margin and cast shadow) */
.pull-board .cell .sym{width:calc(var(--cell)*.92);height:calc(var(--cell)*.92)}
/* the paid cells: a lamp lights behind the paper, a thin amber ring, a gentle swell (no blinking) */
.pull-board .cell.win::before{inset:5% 4%;border:2px solid var(--win-ring);border-radius:10px;box-shadow:0 0 0 1px rgba(80,44,0,.3),0 0 16px var(--win-glow),inset 0 0 14px rgba(255,214,120,.32)}
.pull-board .cell.win .sym{border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,150,.7),rgba(255,214,120,.24) 62%,transparent);animation:c7-swell .62s cubic-bezier(.4,0,.2,1) infinite alternate}
@keyframes c7-swell{to{transform:scale(1.05)}}
.pull-board .cell.dim .sym{filter:none;opacity:.42}
/* the message: a dark award plate under the reels, a nickel bezel lit from above */
.frame .message{align-self:stretch;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:6px;min-height:30px;margin-top:6px;padding:3px 14px;border-radius:6px;
  background:linear-gradient(180deg,#120C07,var(--plate) 40%,#241A11);color:var(--plate-ink);font-family:var(--ui);font-weight:400;letter-spacing:.02em;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.8),0 0 0 2px #4E555C,-1px -1px 0 3px #E9ECEF,1px 1px 0 3px #6E757C}
.frame .message b{color:var(--plate-hi);font-weight:600}
.frame .message small{color:#E2D5BC;font-size:.85em}
/* the side lever (wide screens; mirrored for the left-handed layout) */
.c7-lever{position:absolute;left:calc(100% + 4px);top:20%;width:46px;height:48%;pointer-events:none}
.c7-boss{position:absolute;left:-6px;bottom:0;width:30px;height:40px;border-radius:0 9px 9px 0;background:linear-gradient(90deg,#8E959C,#FFFFFF 30%,#C9CED3 52%,#6E757C 86%,#9AA1A8);
  box-shadow:0 4px 8px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(0,0,0,.3)}
.c7-arm{position:absolute;left:9px;bottom:20px;width:9px;height:calc(100% - 20px);border-radius:5px;background:linear-gradient(90deg,#5E656C,#FFFFFF 38%,#C9CED3 55%,#7D858D);transform-origin:50% 100%;box-shadow:2px 3px 4px rgba(0,0,0,.4)}
.c7-rail{position:absolute;left:13.5px;bottom:20px;width:0;height:calc(100% - 20px)}
.c7-rail b{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;
  background:radial-gradient(circle at 32% 26%,#FFFFFF 0,color-mix(in srgb,var(--knob-hi) 60%,transparent) 7%,transparent 16%),radial-gradient(circle at 40% 34%,var(--knob) 0,color-mix(in srgb,var(--knob) 78%,var(--knob-lo)) 46%,var(--knob-lo) 86%,color-mix(in srgb,var(--knob-lo) 72%,#A8D6DB) 100%);box-shadow:2px 4px 6px rgba(0,0,0,.5)}
.c7-lever.pulled .c7-arm{animation:c7-arm var(--lever-ms,.56s) cubic-bezier(.35,0,.25,1)}
.c7-lever.pulled .c7-rail{animation:c7-rail var(--lever-ms,.56s) cubic-bezier(.35,0,.25,1)}
.c7-lever.pulled .c7-rail b{animation:c7-ball var(--lever-ms,.56s) cubic-bezier(.35,0,.25,1)}
@keyframes c7-arm{0%{transform:none}20%{transform:scaleY(.08)}38%,52%{transform:scaleY(-.8)}100%{transform:none}}
@keyframes c7-rail{0%{transform:none}20%{transform:translateY(92%)}38%,52%{transform:translateY(180%)}100%{transform:none}}
@keyframes c7-ball{20%{transform:scale(1.14)}38%,52%{transform:scale(1.04)}}
body.lefty .c7-lever{left:auto;right:calc(100% + 4px);transform:scaleX(-1)}
/* the plain variant: only the reels in their bezel */
body[data-variant="plain"] .c7-crown,body[data-variant="plain"] .c7-lever{display:none}

/* ---- HUD: a nickel bar with mechanical counters; the PULL knob ---- */
/* positioned (no z-index, so no stacking context): the bar paints above the cabinet's floor shadow, which on phones
   reaches the top of the bar */
.hud{position:relative;border:1px solid #5E656C;box-shadow:0 14px 28px rgba(0,0,0,.5),inset 0 1px 0 #FFFFFF,inset 0 -1px 0 rgba(0,0,0,.25)}
.meter span{color:#221C17;font-family:var(--ui);font-weight:600;font-size:13px;letter-spacing:.02em}
.meter b{display:inline-block;vertical-align:top;margin-top:2px;padding:1px 10px 2px;border-radius:5px;font-family:var(--ui);font-weight:600;letter-spacing:.03em;color:#F7ECD4;
  background:linear-gradient(180deg,#000 0,#231A13 22%,#2E241A 50%,#231A13 78%,#000 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.8),inset 0 2px 3px rgba(0,0,0,.6),0 0 0 2px #7D858D,-1px -1px 0 2px #4E555C,1px 1px 0 2px #F2F4F6}
.meter.win b{color:#FFD98A}
.hud .meter.win.at-zero b{color:#B9AE9A}
.meter small{color:#221C17;font-size:12px}
.pm,.auto{background:var(--ibtn-bg);color:#1E1A16;border:1px solid #5E656C;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 2px 4px rgba(0,0,0,.35)}
.pm{border-radius:50%}
/* the knob: lacquered celluloid under the bulbs — a small sharp specular top left, the core, a cool rim bottom right.
   The core stays at --knob (the colour --knob-ink is chosen against) under the whole PULL label; the shading turns
   only beyond it, toward the rim, and the turned sheen stays faint, so the label keeps 4.5:1 on every preset. */
.spin{background:radial-gradient(circle at 33% 27%,color-mix(in srgb,var(--knob-hi) 70%,transparent) 0,transparent 20%),
    conic-gradient(from 200deg at 54% 56%,transparent,rgba(0,0,0,.05) 18%,rgba(255,255,255,.07) 34%,transparent 52%,rgba(0,0,0,.04) 74%,transparent),
    radial-gradient(circle at 42% 38%,var(--knob) 0 52%,color-mix(in srgb,var(--knob) 78%,var(--knob-lo)) 72%,var(--knob-lo) 94%,color-mix(in srgb,var(--knob-lo) 72%,#A8D6DB) 100%);color:var(--knob-ink);
  box-shadow:0 0 0 3px #2E343A,0 0 0 5px #C9CED3,-1px -1px 0 6px #F4F6F8,1px 1px 0 6px #4E555C,0 12px 20px rgba(0,0,0,.5),inset 0 -6px 12px rgba(0,0,0,.25)}
.spin .c7-knob{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:calc(var(--s) * .2);letter-spacing:.06em;color:var(--knob-ink)}
.spin .c7-knob::before{content:"";position:absolute;left:25%;top:17%;width:15%;height:6%;border-radius:50%;background:rgba(255,255,255,.8);transform:rotate(-34deg)}
.spin.kick{animation:c7-knob .28s cubic-bezier(.2,.8,.2,1)}
@keyframes c7-knob{40%{transform:translateY(3px) scale(.96)}100%{transform:none}}
.btn{font-family:var(--display);font-weight:400;letter-spacing:.03em}

/* ---- overlays and panels ---- */
.ovcard h2{font-family:var(--display);font-weight:400;letter-spacing:.02em;color:var(--title)}
.overlay.bigwin h2{text-shadow:0 3px 0 color-mix(in srgb,var(--sky-top) 60%,#000),0 10px 26px rgba(0,0,0,.5)}
.panel h2,.panel h3{font-family:var(--display);font-weight:400;letter-spacing:.01em}
.ptc{background:var(--ptc-bg)}
.ptc h4{font-family:var(--ui);font-weight:600;font-size:17px;letter-spacing:.02em}
.ptc table{font-family:var(--ui)}
.symbox.c7-paper,.c7-ex{border-radius:6px;background:linear-gradient(90deg,rgba(110,72,28,.18),transparent 14%,transparent 86%,rgba(110,72,28,.2)),linear-gradient(180deg,#F8F0DC,#EADCB9);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),inset 0 2px 4px rgba(0,0,0,.18)}
.symbox .sym{position:absolute;inset:6%}
.symbox .sym img,.c7-ex .sym img{display:block;width:100%;height:100%}
.ptgrid.c7-combos{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.ptc.c7-combo{grid-template-columns:104px 1fr}
.ptc .symbox.group{width:104px;height:52px;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;padding:4px}
.ptc .symbox.group.n2{grid-template-columns:repeat(2,1fr);width:72px;justify-self:center}
.ptc .symbox.group .sym{position:relative;inset:auto;width:100%;aspect-ratio:1}
.c7-what{margin:0 0 4px;font-size:14px;color:var(--muted)}
.special.c7-special{grid-template-columns:auto 1fr}
.c7-pull-ex{display:flex;gap:8px}
.c7-ex{position:relative;width:58px;height:58px;margin-top:22px}
.c7-ex .sym{position:absolute;inset:8%}
.c7-ex i{position:absolute;left:50%;top:-22px;transform:translateX(-50%);padding:2px 7px;border-radius:999px;font-style:normal;font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.12em;color:#2A1A05;background:#FFD54A}
.c7-ex.again i{background:#F4EFE6;box-shadow:0 0 0 1px #6E757C}
.c7-ex b{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;color:#5A3A1A}
.special.c7-blank{grid-template-columns:70px 1fr}
.special.c7-blank .symbox{width:70px;height:70px;position:relative}

/* ---- big wins: paper serpentine ribbons, curled (two tones: the face and the back) — the tokens are the shell's ---- */
.c7-ribbons{position:fixed;inset:0;z-index:36;pointer-events:none;overflow:hidden}
.c7-ribbons i{position:absolute;left:var(--x);top:-14vh;width:16px;height:70px;opacity:0;background:linear-gradient(90deg,var(--c) 0 40%,color-mix(in srgb,var(--c) 62%,#000) 60%,var(--c));
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 70'%3E%3Cpath d='M8 2C15 9 1 15 8 23S1 37 8 45s7 15 0 23' fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 70'%3E%3Cpath d='M8 2C15 9 1 15 8 23S1 37 8 45s7 15 0 23' fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  animation:c7-fall 3.4s cubic-bezier(.3,.1,.6,1) var(--d,0ms) forwards}
@keyframes c7-fall{0%{opacity:1;transform:translate(0,0) rotate(var(--r)) scale(var(--s))}100%{opacity:.85;transform:translate(var(--dx),122vh) rotate(calc(var(--r) + 240deg)) scale(var(--s))}}

/* ---- phones and narrow screens: the slim banner, no side lever ---- */
@media (max-width:860px),(max-aspect-ratio:4/5){
  :root{--window-pad:6px;--reel-gap-w:6px}
  .c7-lever{display:none}
  .c7-card{display:none}
  .c7-short{display:block}
  .c7-crown{margin:-8px -8px 0;padding:6px 8px;border-radius:16px 16px 4px 4px}
  .c7-crown::before,.c7-crown::after{display:none}
  body:not([data-variant="plain"]) .frame{padding:8px;border-radius:16px 16px 10px 10px}
  .frame{gap:6px}
  .frame .message{margin-top:2px;min-height:28px;padding:2px 10px;font-size:15px}
  .meter span{font-size:12px}
}
/* tall phones have room for the whole pay card, in two columns */
@media (max-width:599px) and (min-height:780px){
  .c7-card{display:block;padding:4px 10px 5px}
  .c7-short{display:none}
  .c7-rows{grid-template-rows:repeat(5,auto);gap:0 22px}
  .c7-card-h{margin-bottom:2px}
}
/* a tall tablet in portrait has room for the whole pay card */
@media (max-aspect-ratio:4/5) and (min-width:600px) and (min-height:900px){
  .c7-card{display:block}
  .c7-short{display:none}
}
/* short phones (320 × 568): the banner gives its room to the reels */
@media (max-width:860px) and (max-height:620px),(max-aspect-ratio:4/5) and (max-height:620px){
  .c7-crown{display:none}
}
@media (max-width:400px){
  .meter b{padding:1px 6px 2px}
}
@media (max-width:520px){
  .special.c7-special{grid-template-columns:1fr}
}
body.still .c7-ribbons i{display:none}
/* the shutters: ribbed nickel, lit from above */
.pull-board .shutter{background:repeating-linear-gradient(180deg,rgba(255,255,255,.35) 0 1px,transparent 1px 9px,rgba(0,0,0,.12) 9px 10px),var(--shutter)}
.pull-board .shutter.sh-top{box-shadow:0 3px 5px rgba(0,0,0,.35)}
.pull-board .shutter.sh-bot{box-shadow:0 -2px 4px rgba(0,0,0,.3)}