/* Clockwork Menagerie skin on the shared game shell: a Victorian inventor's workshop at night, the reels mounted like a
   watch movement. One key light for the whole game — the gas lamp high on the left — and a cool verdigris rim from the
   blueprint window behind. The back wall in four planes (far plaster lit by the lamp, the shelves of automata with a lit
   top edge, the clock, the dark bench in front) with a warm light behind the board, a vignette and one static grain
   layer; or a blueprint grid that drifts. The board: a brass movement plate with Geneva stripes and a bevel (lit edge top
   left), four corner cogs with ruby jewels, the reel window sunk into it; the 3×3 core on its turntable (rotate.css,
   coloured here); two dial gauges for the balance and the win; a knurled bet knob and a wind-up key spin button; the
   machine hall of the Wind-Up Spins (flywheels, pistons, dim steam) and the gear-mesh veil between them.
   Theme tokens (--brass, --soot, --verd, --ink, --muted, --gloss, --plate*, --rim*, --wall*, --silhouette, --lamp,
   --blue*, --hall*, --veil*, --rot-*, --sp-*, --cog-deep) come from skin.js themeMap: light cream ink on dark plates
   (≥ 4.5:1), or dark ink on light plates when an admin picks a light ground. The accent (verdigris) is decoration and
   rim light only, never text. Animated properties: transform and opacity only; no filter on anything that moves. */
:root{
  --brass:#B5752B; --soot:#1E1A17; --verd:#559A91;
  --ink:#FFF3D6; --muted:#C9BBA0; --gloss:#DABA95; --plate:#15120F; --plate-hi:#35291D; --rim:#A3692A; --rim-hi:#D3AC80;
  --wall-top:#141110; --wall-low:#36291C; --silhouette:#0F0D0B; --lamp:#D9B48D;
  --blue-bg:#232A26; --blue-line:#426C64; --hall:#2D2419; --hall-mid:#171310; --veil:#46341F; --veil-gear:#8A5D2B;
  --rot-plate:#3D2F21; --rot-rim:#C59358; --rot-hub:#5B442B; --rot-arrow:#E3CBA7; --rot-arrow-ink:#0F0D0B; --rot-gear:#559A91; --rot-key:#DFC5A1;
  --sp-rim:#88581F; --sp:#C08840; --sp-edge:#100E0D; --sp-key:#E2CBAA; --sp-hi:#E8CFA8; --cog-deep:#4A2E10;
  --display:"Federant",Georgia,"Times New Roman",serif; --ui:"Overpass",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:8px; --radius-sm:5px; --line:color-mix(in srgb,var(--rim) 55%,transparent); --panel-border:var(--rim);
  /* the reel window: sunk into the plate, a little lighter at the bottom, the lamp's pool high on the left */
  --window-bg:radial-gradient(ellipse 70% 55% at 22% 0,color-mix(in srgb,var(--brass) 13%,transparent),transparent 70%),
    linear-gradient(180deg,color-mix(in srgb,var(--plate) 88%,#000),color-mix(in srgb,var(--plate-hi) 62%,var(--plate)));
  --window-radius:3px; --reel-sep:color-mix(in srgb,var(--rim-hi) 14%,transparent); --win-glow:color-mix(in srgb,var(--brass) 70%,#FFF3D6); --win-radius:8px;
  --corner-bg:linear-gradient(180deg,var(--plate-hi),var(--plate)); --focus:var(--gloss);
  /* quiet line markers: a dark brass plate, the number in cream */
  --peg-bg:color-mix(in srgb,var(--plate) 80%,var(--brass)); --peg-ink:color-mix(in srgb,var(--ink) 86%,var(--plate));
  --spin-ring:color-mix(in srgb,var(--gloss) 80%,transparent); --veil-light:color-mix(in srgb,var(--brass) 22%,transparent);
  color-scheme:var(--scheme,dark);
}
body{background:var(--wall-top);font-family:var(--ui)}

/* ---- scene: the workshop (default), the blueprint, the machine hall of the free spins; silhouettes are masks from
   skin.js. Only the pendulum, the grid, the flywheels and the pistons move (slowly), and the layers fade. */
.scene{background:var(--wall-top)}
.scene .cm-shop,.scene .cm-blue,.scene .cm-hall{transition:opacity .9s ease}
.scene .cm-shop>i,.scene .cm-blue>i,.scene .cm-hall>i{position:absolute;inset:0}
/* far plane: plaster boards lit by the lamp on the left; a warm light behind the board separates it from the wall */
.scene .cm-shop .wall{background:
  radial-gradient(ellipse 34% 40% at 50% 46%,color-mix(in srgb,var(--lamp) 13%,transparent),transparent 100%),
  radial-gradient(ellipse 60% 70% at 6% 10%,color-mix(in srgb,var(--lamp) 20%,transparent),transparent 70%),
  linear-gradient(180deg,var(--wall-top) 0,var(--wall-low) 74%,color-mix(in srgb,var(--wall-low) 60%,var(--wall-top)) 100%),
  repeating-linear-gradient(90deg,transparent 0 9vw,color-mix(in srgb,#000 18%,transparent) 9vw calc(9vw + 1px),color-mix(in srgb,var(--lamp) 5%,transparent) calc(9vw + 1px) calc(9vw + 2px))}
.scene .cm-shop .shelves,.scene .cm-shop .shelf-lit,.scene .cm-shop .face,.scene .cm-hall .fly,.scene .cm-hall .pistons,.scene .cm-hall .cyl{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}
/* middle plane: the shelves and their automata — a lamp-lit top edge (the same mask 2 px higher), then the dark shapes,
   lighter towards the top (atmospheric depth) */
.scene .cm-shop .shelf-lit{background:color-mix(in srgb,var(--lamp) 26%,var(--wall-low));-webkit-mask-image:var(--cm-shelves);mask-image:var(--cm-shelves);transform:translate(1px,-2px);opacity:.5}
.scene .cm-shop .shelves{background:linear-gradient(180deg,color-mix(in srgb,var(--silhouette) 45%,var(--wall-low)),color-mix(in srgb,var(--silhouette) 75%,var(--wall-low)) 70%);-webkit-mask-image:var(--cm-shelves);mask-image:var(--cm-shelves)}
.scene .cm-shop .face{background:color-mix(in srgb,var(--brass) 30%,var(--silhouette));-webkit-mask-image:var(--cm-clockface);mask-image:var(--cm-clockface);opacity:.6}
/* the gas lamp: one warm pool high on the left (the key light), a faint second one on the right */
.scene .cm-shop .lamp{inset:auto;top:2%;width:56vmin;height:56vmin;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--lamp) 30%,transparent) 0 14%,color-mix(in srgb,var(--lamp) 10%,transparent) 42%,transparent 70%)}
.scene .cm-shop .lamp.l{left:-10vmin}.scene .cm-shop .lamp.r{right:-8vmin;top:10%;width:40vmin;height:40vmin;opacity:.45}
/* the wall clock's pendulum (it swings under the clock in the middle of the wall) */
.scene .cm-shop .pendulum{left:50%;top:0;bottom:auto;right:auto;width:0;height:0;overflow:visible}
.scene .cm-shop .pendulum::before{content:"";position:absolute;left:-2px;top:calc(min(100vw*.5625,100vh)*.25);width:4px;height:13vh;transform-origin:50% 0;background:linear-gradient(180deg,var(--silhouette),color-mix(in srgb,var(--brass) 45%,var(--silhouette)));
  border-radius:0 0 50% 50%;box-shadow:0 13vh 0 6px color-mix(in srgb,var(--brass) 34%,var(--silhouette));animation:cm-swing 2.4s ease-in-out infinite alternate}
/* near plane: the workbench, darkest, with a lit front edge */
.scene .cm-shop .bench{top:auto;bottom:0;height:14%;background:linear-gradient(180deg,color-mix(in srgb,var(--lamp) 22%,var(--silhouette)) 0 1px,color-mix(in srgb,var(--brass) 14%,var(--silhouette)) 2px,var(--silhouette) 34%)}
.scene .cm-blue{opacity:0;background:var(--blue-bg);overflow:hidden}
.scene .cm-blue .grid{position:absolute;inset:-64px 0 0 -64px;will-change:transform;
  background:linear-gradient(90deg,var(--blue-line) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(0deg,var(--blue-line) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,color-mix(in srgb,var(--blue-line) 45%,transparent) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(0deg,color-mix(in srgb,var(--blue-line) 45%,transparent) 1px,transparent 1px) 0 0/16px 16px;
  opacity:.45;animation:cm-drift 18s linear infinite}
.scene .cm-blue .plan{opacity:.32;background:var(--blue-line);-webkit-mask:var(--cm-flywheels) center/cover no-repeat;mask:var(--cm-flywheels) center/cover no-repeat}
body.bg-blueprint .scene .cm-blue{opacity:1}
body.bg-blueprint .scene .cm-shop{opacity:0}
/* the machine hall of the Wind-Up Spins: slow flywheels, pistons that rise and fall, a dim haze of steam */
.scene .cm-hall{opacity:0;background:radial-gradient(ellipse at 50% 30%,var(--hall),var(--hall-mid) 75%)}
.scene .cm-hall .fly{background:linear-gradient(160deg,color-mix(in srgb,var(--brass) 34%,var(--hall-mid)),color-mix(in srgb,var(--brass) 16%,var(--hall-mid)));-webkit-mask-image:var(--cm-flywheels);mask-image:var(--cm-flywheels);-webkit-mask-position:center;mask-position:center;opacity:.75}
.scene .cm-hall .pistons{background:linear-gradient(90deg,color-mix(in srgb,var(--brass) 22%,var(--hall-mid)),color-mix(in srgb,var(--brass) 48%,var(--hall-mid)) 40%,color-mix(in srgb,var(--brass) 20%,var(--hall-mid)));-webkit-mask-image:var(--cm-pistons);mask-image:var(--cm-pistons);will-change:transform;animation:cm-piston 1.8s ease-in-out infinite alternate}
.scene .cm-hall .cyl{background:linear-gradient(90deg,var(--hall-mid),color-mix(in srgb,var(--brass) 30%,var(--hall-mid)) 50%,var(--hall-mid));-webkit-mask-image:var(--cm-cylinders);mask-image:var(--cm-cylinders)}
.scene .cm-hall .steam{background:radial-gradient(ellipse at 30% 78%,color-mix(in srgb,#E8E2D6 10%,transparent),transparent 45%),radial-gradient(ellipse at 74% 70%,color-mix(in srgb,#E8E2D6 8%,transparent),transparent 40%)}
body.fs .scene .cm-hall{opacity:1}
body.fs .scene .cm-shop,body.fs .scene .cm-blue{opacity:0}
/* vignette (the corners ≈ 45 % darker) and ONE static grain layer over the whole scene, never on the cells */
.scene .cm-vig{background:radial-gradient(ellipse at 50% 44%,transparent 46%,rgba(0,0,0,.46) 100%)}
.scene .cm-vig::after{content:"";position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;background:var(--cm-grain) 0 0/160px 160px}
/* the shell's governed screen flash (big-win tiers): a faint warm tint, never white (peaks ≈ 15 %) */
.flash{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--brass) 22%,transparent),color-mix(in srgb,var(--verd) 6%,transparent) 45%,transparent 75%)}
@keyframes cm-swing{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@keyframes cm-drift{to{transform:translate(64px,64px)}}
@keyframes cm-piston{from{transform:translateY(0)}to{transform:translateY(5%)}}

/* ---- title (Federant, embossed brass: a lit edge above, a cast shadow below; the shell centres it and balances its
   tracking) and round buttons */
.logo h1{font-family:var(--display);font-weight:400;letter-spacing:.05em;color:var(--gloss);text-shadow:0 -1px 0 color-mix(in srgb,#FFF3D6 30%,transparent),0 2px 0 var(--sp-edge),0 4px 10px rgba(0,0,0,.55)}
.ibtn{border:1px solid var(--rim);border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--plate-hi) 80%,var(--brass)),var(--plate) 75%);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--rim-hi) 40%,transparent),0 2px 6px rgba(0,0,0,.45)}
.ibtn:hover{border-color:var(--rim-hi)}

/* ---- the frame: a brass movement plate under the reels with Geneva stripes, a bevel (lit edge top left, shadow edge
   bottom right), a drop shadow and four corner cogs with ruby jewels (variant "cog-square"); "clean" keeps a thin brass
   rim. The decoration (.cm-frame) lies exactly over the reels (size from skin.js onConfig), behind the board; the reel
   window sits on top of the plate and is sunk into it (.window::after). Padding in px: the board measures its area. */
.frame{--fpt:14px;padding:var(--fpt) 18px 8px;gap:6px}
.cm-frame{position:absolute;z-index:0;left:50%;top:var(--fpt);width:calc(var(--cell)*var(--cm-reels,5));height:calc(var(--cell)*var(--cm-rows,5));transform:translateX(-50%);pointer-events:none}
.cm-frame .plate{position:absolute;inset:-13px;border-radius:7px;
  background:repeating-linear-gradient(-58deg,color-mix(in srgb,#FFF3D6 0%,transparent) 0,color-mix(in srgb,#FFF3D6 6%,transparent) 9px,color-mix(in srgb,#FFF3D6 0%,transparent) 18px),
    linear-gradient(162deg,var(--rim-hi) 0,var(--brass) 24%,color-mix(in srgb,var(--rim) 55%,#000) 48%,var(--brass) 58%,var(--rim) 84%,color-mix(in srgb,var(--rim) 45%,#000) 100%);
  box-shadow:inset 1.5px 1.5px 0 color-mix(in srgb,var(--rim-hi) 70%,#FFF3D6),inset -1.5px -1.5px 0 color-mix(in srgb,var(--rim) 40%,#000),inset 0 0 0 4px color-mix(in srgb,#000 8%,transparent),
    0 2px 0 color-mix(in srgb,var(--rim) 30%,#000),0 22px 44px rgba(0,0,0,.55)}
.cm-frame .bezel{display:none}
.cm-frame .corner{position:absolute;width:46px;height:46px;margin:-29px}
.cm-frame .corner.tl{left:0;top:0}.cm-frame .corner.tr{right:0;top:0}.cm-frame .corner.bl{left:0;bottom:0}.cm-frame .corner.br{right:0;bottom:0}
.cm-frame .corner svg{width:100%;height:100%;display:block;animation:cm-cog 24s linear infinite;overflow:visible}
.cm-frame .corner.tr svg,.cm-frame .corner.bl svg{animation-direction:reverse}
.cm-frame .corner .cog{fill:url(#cmCogG);stroke:color-mix(in srgb,var(--cog-deep) 80%,transparent);stroke-width:1.2}
.cm-frame .corner .chaton{fill:url(#cmCogG)}
.cm-frame .corner .hub{fill:url(#cmRuby)}
.cm-frame .corner .shade{fill:rgba(0,0,0,.35)}
.cm-defs{position:absolute;width:0;height:0;overflow:hidden}
/* the cogs turn faster while the core turns */
.frame:has(.rot-board.rot-turning) .cm-frame .corner svg{animation-duration:2.4s}
@keyframes cm-cog{to{transform:rotate(360deg)}}
.board,.message{position:relative;z-index:1}
/* the window sunk into the plate: the plate's top edge throws a shadow into it, a fine lit lip along its bottom */
.reels-board .window::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 16px 18px -12px rgba(0,0,0,.75),inset 10px 0 14px -12px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.55),inset 0 -1px 0 1px color-mix(in srgb,var(--rim-hi) 30%,transparent)}
body[data-variant="clean"] .cm-frame .corner{display:none}
body[data-variant="clean"] .cm-frame .plate{inset:-5px;background:linear-gradient(162deg,var(--rim-hi),var(--brass) 40%,var(--rim));box-shadow:0 10px 26px rgba(0,0,0,.45)}

/* ---- the reels: winning cells in a lit brass ring, the rest step back by opacity (no filter on the cells) */
.reels-board .cell.win::after{border-color:var(--gloss)}
.reels-board .cell.dim .sym{filter:none;opacity:.42}
/* the turntable under the 3×3 core: a dark brass plate with a fine lit rim; its dial ticks stay quiet between the cells */
.rot-table .rot-dial{opacity:.32}
.rot-table .rot-plate{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--rot-rim) 70%,transparent),inset 0 10px 18px -10px rgba(0,0,0,.6)}

.message{font-family:var(--ui);font-weight:600;letter-spacing:.01em;color:var(--ink);max-width:100%;padding:2px 12px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 .35em;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.message b{color:var(--gloss)}

/* ---- the Wind-Up bar: the spin, the mainspring gauge (pips), the total won */
.fsbar{gap:16px;padding:5px 16px;border-radius:999px;background:linear-gradient(180deg,var(--plate-hi),var(--plate));border:1px solid var(--rim);color:var(--ink);font-family:var(--ui);font-weight:700;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--rim-hi) 35%,transparent),0 4px 12px rgba(0,0,0,.4)}
.fsbar b{color:var(--gloss)}
.fsbar .cm-spring{display:flex;align-items:center;gap:6px}
.fsbar .cm-spring small{font-size:13px;font-weight:600;color:var(--muted)}
.fsbar .cm-pips{display:flex;gap:4px}
.fsbar .cm-pip{display:block;width:11px;height:11px;border-radius:50%;border:2px solid var(--gloss);opacity:.6}
.fsbar .cm-pip.on{background:radial-gradient(circle at 35% 30%,#FFF3D6,var(--gloss) 55%,var(--brass));opacity:1}
.fsbar .cm-spring.wound .cm-pips{animation:cm-wound .5s var(--ease-back,cubic-bezier(.34,1.4,.64,1))}
@keyframes cm-wound{0%{transform:scale(1.18)}100%{transform:none}}

/* ---- HUD "corners" (wide screens): balance and win as dial gauges high on either side, the bet as a knob plate below */
.hud{border:1px solid var(--rim);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--rim-hi) 30%,transparent),0 6px 18px rgba(0,0,0,.4);border-radius:10px}
@media (min-width:861px) and (min-aspect-ratio:4/5){
  .hud-corners .hud>.bal,.hud-corners .hud>.win{position:fixed;padding:10px 18px 10px 64px;border:1px solid var(--rim);border-radius:40px 12px 12px 40px;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--rim-hi) 35%,transparent),0 6px 16px rgba(0,0,0,.45)}
  .hud-corners .hud>.win{border-radius:12px 40px 40px 12px;padding:10px 64px 10px 18px}
  /* the dial: a brass bezel with ticks and a needle (decoration; the amount is the text beside it) */
  .hud-corners .hud>.bal::before,.hud-corners .hud>.win::before{content:"";position:absolute;top:50%;width:42px;height:42px;margin-top:-21px;border-radius:50%;
    background:repeating-conic-gradient(from 225deg,color-mix(in srgb,var(--gloss) 80%,transparent) 0 2deg,transparent 2deg 27deg) border-box,radial-gradient(circle at 40% 35%,color-mix(in srgb,var(--plate-hi) 70%,var(--brass)) 0,var(--plate) 58%,var(--rim-hi) 61%,var(--brass) 70%,var(--cog-deep) 100%);
    -webkit-mask:radial-gradient(circle,#000 0 70%,transparent 71%);mask:radial-gradient(circle,#000 0 70%,transparent 71%);box-shadow:0 0 0 2px var(--rim)}
  .hud-corners .hud>.bal::before{left:12px}.hud-corners .hud>.win::before{right:12px}
  .hud-corners .hud>.bal::after,.hud-corners .hud>.win::after{content:"";position:absolute;top:50%;width:2px;height:15px;margin-top:-14px;border-radius:2px;background:var(--verd);transform-origin:50% 14px}
  .hud-corners .hud>.bal::after{left:32px;transform:rotate(-38deg)}.hud-corners .hud>.win::after{right:32px;transform:rotate(34deg)}
  .hud-corners .betctl{border:1px solid var(--rim);border-radius:12px;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--rim-hi) 30%,transparent)}
}
.meter span{font-family:var(--ui);font-weight:600;color:var(--muted)}
.meter b{font-family:var(--ui);font-weight:700;color:var(--ink)}.meter.win b{color:var(--gloss)}
.meter small{color:var(--muted)}
.demo{background:var(--gloss);color:var(--plate)}
/* the bet knob: knurled round brass buttons, lit from the top left */
.pm,.auto{background:radial-gradient(circle at 36% 30%,color-mix(in srgb,var(--rim-hi) 26%,transparent),transparent 62%),repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--rim) 45%,var(--plate)) 0 7deg,var(--plate-hi) 7deg 14deg);border:1.5px solid var(--rim);color:var(--ink);border-radius:50%;box-shadow:inset 0 0 0 5px var(--plate-hi),0 2px 6px rgba(0,0,0,.4)}
.auto[aria-pressed="true"]{box-shadow:inset 0 0 0 5px var(--plate-hi),0 0 0 2px var(--gloss)}
.auto span{background:var(--gloss);color:var(--plate)}
/* the wind-up key: drawn by the SVG (skin.js), which fills the button; a press winds a quarter turn, the spin keeps
   winding it in clicks. A contact shadow (box-shadow, no filter: the key turns inside it). */
.spin{background:none;color:var(--sp-edge);box-shadow:0 10px 18px -4px rgba(0,0,0,.6),0 3px 5px rgba(0,0,0,.35)}
.spin svg{width:100%;height:100%}
.spin .wk-key{transform-box:view-box;transform-origin:50% 50%}
.spin.kick .wk-key{animation:cm-kick .32s var(--ease-back,cubic-bezier(.34,1.4,.64,1))}
.spin.busy .wk-key{animation:cm-wind 2s cubic-bezier(.5,0,.5,1) infinite}
.spin:disabled{filter:none;opacity:.72}
@keyframes cm-kick{from{transform:rotate(-8deg)}to{transform:rotate(90deg)}}
@keyframes cm-wind{0%{transform:rotate(0)}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)}75%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}
.side .tablet{background:linear-gradient(180deg,var(--plate-hi),var(--plate));border:1px solid var(--rim);border-radius:10px;color:var(--ink);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--rim-hi) 30%,transparent),0 4px 12px rgba(0,0,0,.35)}
.tablet .th{font-family:var(--display);font-weight:400;letter-spacing:.03em;color:var(--gloss)}
.tablet .price{color:var(--ink)}
.tablet small{color:var(--muted)}

/* ---- panels, paytable and overlays */
.panel{color:var(--ink)}
.panel h2,.panel h3,.ovcard h2,.screen h2{font-family:var(--display);font-weight:400;letter-spacing:.03em}
.panel h2,.screen h2{color:var(--gloss)}
.panel h3{color:var(--gloss)}
.panel .lead{color:var(--muted)}
.btn{font-family:var(--display);font-weight:400;letter-spacing:.04em;border-radius:999px}
.ptc{background:color-mix(in srgb,var(--plate) 55%,transparent);border-color:var(--line)}
.ptc .symbox,.special .symbox{border-radius:8px;background:radial-gradient(ellipse 80% 60% at 30% 10%,color-mix(in srgb,var(--brass) 14%,transparent),transparent 70%),linear-gradient(180deg,var(--plate-hi),var(--plate));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--rim-hi) 30%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--rim) 45%,transparent)}
.special .symbox{position:relative;width:96px;height:96px;--cell:96px}
.ptc .sym,.special .sym{position:relative;width:100%;height:100%}
.symbox .sym img{position:absolute;inset:4%;width:92%;height:92%;pointer-events:none}
.special p{margin:0 0 6px}
.cm-fig{display:flex;align-items:center;gap:14px;margin:6px 0 10px}
.cm-fig-g{display:grid;grid-template-columns:repeat(3,30px);gap:3px;padding:5px;border-radius:8px;background:var(--plate);box-shadow:inset 0 0 0 1px var(--rim)}
.cm-fig-g i{display:grid;place-items:center;height:30px;border-radius:4px;font-style:normal;font-weight:700;color:var(--ink);background:var(--plate-hi)}
.cm-fig-g i.mid{background:transparent;color:var(--muted)}
.cm-fig-a{width:30px;height:30px;color:var(--gloss)}
.cm-fig-a svg{width:100%;height:100%}
.ovcard h2{color:var(--gloss);text-shadow:0 -1px 0 color-mix(in srgb,#FFF3D6 30%,transparent),0 3px 0 var(--sp-edge),0 6px 18px rgba(0,0,0,.5)}
.ovamt{color:var(--ink)}
.ovcard p{color:var(--muted)}

/* ---- the gear-mesh veil: a dark brass backing and two giant striped gears that roll in from the sides, mesh in the
   middle and roll on out (skin.js). Mid-tone (never white); transform and opacity only. */
.cm-mesh{position:fixed;inset:0;z-index:36;pointer-events:none;display:none;overflow:hidden}
.cm-mesh.show{display:block}
.cm-mesh-back{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at 50% 50%,var(--veil),color-mix(in srgb,var(--veil) 55%,#000) 80%)}
.cm-mesh-g{position:absolute;top:50%;width:max(110vh,64vw);height:max(110vh,64vw);margin-top:calc(max(110vh,64vw)/-2);will-change:transform;
  background:repeating-radial-gradient(circle at 50% 50%,color-mix(in srgb,#FFF3D6 0%,transparent) 0,color-mix(in srgb,#FFF3D6 3.5%,transparent) 2%,color-mix(in srgb,#FFF3D6 0%,transparent) 4%),
    radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--veil-gear) 70%,#FFF3D6) 0,var(--veil-gear) 40%,color-mix(in srgb,var(--veil-gear) 70%,#000) 72%,var(--veil-gear) 86%,color-mix(in srgb,var(--veil-gear) 55%,#000) 100%);
  -webkit-mask:var(--cm-big-gear) center/contain no-repeat;mask:var(--cm-big-gear) center/contain no-repeat}
.cm-mesh-g.l{right:calc(50% - 4vw);transform:translateX(-105%)}
.cm-mesh-g.r{left:calc(50% - 4vw);transform:translateX(105%)}
.cm-mesh.calm .cm-mesh-g{display:none}
.cm-mesh.calm .cm-mesh-back{opacity:1}

/* ---- big wins: cogs and springs fly up from the lower corners and fall (shapes that fade, never a light); two depths:
   the far ones (.far) smaller and dimmer */
.cm-fly{position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden}
.cm-fly>i{position:absolute;left:var(--x);bottom:-6vh;width:calc(30px*var(--s));height:calc(30px*var(--s));opacity:0;will-change:transform,opacity;animation:cm-fly 2.8s cubic-bezier(.2,.6,.4,1) var(--d) forwards;
  background:radial-gradient(circle at 50% 50%,#FFF3D6 0,var(--gloss) 30%,var(--brass) 62%,color-mix(in srgb,var(--brass) 55%,#000) 100%)}
.cm-fly>i.far{--o:.55}
.cm-fly .cog{-webkit-mask:var(--cm-cog) center/contain no-repeat;mask:var(--cm-cog) center/contain no-repeat}
.cm-fly .spring{width:calc(18px*var(--s));height:calc(34px*var(--s));background:linear-gradient(90deg,color-mix(in srgb,var(--brass) 55%,#000),#FFE0C0 35%,#CF8546 60%,color-mix(in srgb,#CF8546 50%,#000));-webkit-mask:var(--cm-spring) center/contain no-repeat;mask:var(--cm-spring) center/contain no-repeat}
@keyframes cm-fly{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:var(--o,1)}55%{opacity:var(--o,1);transform:translate(calc(var(--dx)*.6),calc(var(--h)*-1)) rotate(calc(var(--r)*.6))}100%{opacity:0;transform:translate(var(--dx),-6vh) rotate(var(--r))}}

/* ---- reduced motion: no pendulum, drifting grid, pistons, turning cogs or key, no flying cogs; shell.css caps every
   other animation */
body.still .scene .cm-shop .pendulum::before,body.still .scene .cm-blue .grid,body.still .scene .cm-hall .pistons,body.still .cm-frame .corner svg,body.still .spin .wk-key,body.still .fsbar .cm-spring.wound .cm-pips{animation:none}
body.still .cm-fly{display:none}
@media (prefers-reduced-motion:reduce){
  .scene .cm-shop .pendulum::before,.scene .cm-blue .grid,.scene .cm-hall .pistons,.cm-frame .corner svg,.spin .wk-key,.fsbar .cm-spring.wound .cm-pips{animation:none!important}
  .cm-fly{display:none}
  .scene .cm-shop,.scene .cm-blue,.scene .cm-hall{transition-duration:.12s}
}

/* ---- phones: a thin plate and small corner cogs, so five columns of ≈ 60 px fit in 344 px */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .frame{--fpt:9px;padding:var(--fpt) 9px 4px;gap:5px}
  .cm-frame .plate{inset:-7px;border-radius:5px}
  .cm-frame .corner{width:28px;height:28px;margin:-17px}
  .reels-board .window::after{box-shadow:inset 0 10px 12px -8px rgba(0,0,0,.75),inset 0 0 0 1px rgba(0,0,0,.55),inset 0 -1px 0 1px color-mix(in srgb,var(--rim-hi) 30%,transparent)}
  .hud{background:var(--hud-bg)}
  .logo h1{letter-spacing:.03em;font-size:clamp(17px,5.2vw,30px)}
}
@media (max-width:400px){
  .fsbar{gap:8px;padding:4px 10px;font-size:13px}
  .fsbar .cm-spring small{display:none}
  .message{font-size:14px;padding:2px 10px}
}