/* Noir Case Files skin on the shared game shell: a duotone of fog grey and ink with one amber spot colour, lit like a
   film noir — one warm desk lamp from the top left (the pier lamp in the scene, the pool of light on the cork board, the
   highlights of every symbol, the brass badge), cool fog light everywhere else. A harbour at night (or the detective's
   office), a manila case folder round the recessed cork-board reels, the brass shield badge as the spin button, dark
   plates in the HUD corners, a cork wall with red string for the Case Board, venetian blinds between them.
   The theme tokens (--panel, --ink, --muted, --fog, --amber, --spot, --btn-ink, scene colours) come from skin.js
   themeMap; manila, cork, paper and ink are materials. Every text sits on a panel whose contrast skin.js guarantees, or
   on paper (dark ink on light paper, fixed). Nothing here is a flash: the beam, the fog and the blinds are shapes; the
   only animations are transform/opacity. */
:root{
  --panel:#04060A; --panel-hi:#0E1216; --ink:#EEF1F4; --muted:#A9B2BD; --fog:#C7CED7; --amber:#FCA900; --spot:#FCA900; --btn-ink:#05080B;
  --sky-top:#04060A; --sky-low:#3F454C; --far:#22272D; --near:#020304; --mist:#8D949C; --wall:#191D22; --stripe:#666C73;
  --paper:#E9EDF1; --paper-ink:#14100A; --manila:#D8B878; --manila-lo:#A98A4E; --cork:#9C7444; --string:#B3261E; --string-edge:var(--paper);
  --type-ink:#2A1F10; --stamp-ink:#5C100C;
  --display:"Bebas Neue",Impact,"Arial Narrow",sans-serif; --ui:"Courier Prime","Courier New",monospace;
  --line:color-mix(in srgb,var(--fog) 30%,transparent); --radius:4px; --radius-sm:3px;
  --panel-bg:linear-gradient(180deg,var(--panel-hi),var(--panel)); --panel-border:color-mix(in srgb,var(--fog) 40%,transparent);
  --hud-bg:linear-gradient(180deg,var(--panel-hi),var(--panel)); --corner-bg:var(--panel);
  --ibtn-bg:var(--panel); --ibtn-ink:var(--ink); --focus:var(--amber);
  --btn-bg:linear-gradient(180deg,color-mix(in srgb,var(--spot) 78%,#fff),var(--spot) 55%,color-mix(in srgb,var(--spot) 82%,#000));
  /* the badge: banded brass (a dark "horizon" below the middle), lit from the lamp at the top left */
  --badge-bg:linear-gradient(160deg,color-mix(in srgb,var(--spot) 50%,#fff) 0%,var(--spot) 30%,color-mix(in srgb,var(--spot) 52%,#000) 49%,var(--spot) 57%,color-mix(in srgb,var(--spot) 82%,#fff) 82%,color-mix(in srgb,var(--spot) 58%,#000) 100%);
  /* the reel window: cork (three speckle layers over cork brown) in the desk lamp's pool of light, darker at the edges */
  --window-bg:radial-gradient(90% 80% at 22% 10%,rgba(255,226,170,.3),transparent 62%),radial-gradient(ellipse 85% 95% at 50% 50%,transparent 58%,rgba(24,12,2,.5)),
    radial-gradient(circle,rgba(60,36,14,.5) 0 1px,transparent 1.6px) 0 0/7px 7px,radial-gradient(circle,rgba(60,36,14,.32) 0 1px,transparent 1.4px) 3px 4px/9px 9px,
    radial-gradient(circle,rgba(255,226,180,.12) 0 .8px,transparent 1.2px) 5px 2px/11px 11px,#86633A;
  --window-radius:2px; --reel-sep:rgba(40,24,8,.32); --win-glow:color-mix(in srgb,var(--spot) 60%,transparent); --win-radius:3px; --spin-blur:1px;
  --spin-ring:transparent; --veil-light:color-mix(in srgb,#FFD9A0 14%,transparent);
  /* line markers: little paper labels on the manila folder, typed in ink; the line's colour is a strip along the bottom */
  --peg-bg:#F1EADA; --peg-ink:var(--type-ink);
  --dr-vignette:rgba(2,3,5,.62); --dr-blade:#06080B; --dr-edge:#2A3140; --dr-rim:var(--spot);
  --cork-dot:rgba(60,36,14,.5); --file-back:var(--manila); --file-edge:#5A4420; --file-ink:#1E1608; --card-bg:var(--paper); --card-ink:var(--paper-ink); --card-edge:#7D8898;
  --pin-on:var(--string); --solved:var(--spot); --lucky:var(--spot);
}
body{background:var(--bg)}

/* scene: the waterfront pier (default), the office, the cork wall of the Case Board. Far → near: sky and the lighthouse
   halo, the beam, warehouses and cranes (low contrast), the water, the pier (darkest), the lamps, two fog banks, the lamp
   pool behind the board, a vignette and one static grain layer. Only transform and opacity move. */
.scene .sky{background:radial-gradient(30% 24% at 86% 46%,color-mix(in srgb,var(--mist) 22%,transparent),transparent 72%),
  linear-gradient(180deg,var(--sky-top) 0%,var(--sky-top) 24%,color-mix(in srgb,var(--sky-low) 70%,var(--sky-top)) 62%,var(--sky-low) 80%,var(--far) 100%)}
.scene .harbour,.scene .pier,.scene .office .room,.scene .office .fan,.scene .cork .string{-webkit-mask-position:center bottom;mask-position:center bottom;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.scene .harbour{background:linear-gradient(180deg,color-mix(in srgb,var(--far) 80%,var(--mist)),var(--far) 70%);-webkit-mask-image:var(--nc-harbour);mask-image:var(--nc-harbour)}
.scene .water{top:auto;height:22%;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--mist) 12%,transparent) 0 1px,transparent 1px 9px),linear-gradient(180deg,var(--far),var(--near))}
.scene .pier{background:var(--near);-webkit-mask-image:var(--nc-pier);mask-image:var(--nc-pier)}
.scene .lights{background:var(--nc-lights) center bottom/cover no-repeat}
/* the lighthouse beam: a soft cone that swings slowly through the fog from the lamp room (skin.js places it) */
.scene .beam{overflow:hidden}
.scene .beam i{position:absolute;left:var(--beam-x,83%);top:var(--beam-y,45%);width:120vmax;height:16vmax;margin-top:-8vmax;transform-origin:0 50%;
  background:linear-gradient(90deg,color-mix(in srgb,var(--mist) 24%,transparent),transparent 80%);clip-path:polygon(0 46%,100% 0,100% 100%,0 54%);animation:nc-beam 16s ease-in-out infinite alternate}
/* fog banks: soft ellipses (no blur filter) drifting slowly */
.scene .fog i{position:absolute;left:-25%;right:-25%;display:block}
.scene .fog .f1{top:54%;height:28%;background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--mist) 20%,transparent),transparent);animation:nc-drift 46s ease-in-out infinite alternate}
.scene .fog .f2{top:68%;height:32%;background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--mist) 16%,transparent),transparent);animation:nc-drift 62s ease-in-out -20s infinite alternate-reverse}
.scene .office,.scene .cork{opacity:0;transition:opacity .4s}
.scene .office{background:radial-gradient(60% 50% at 30% 30%,color-mix(in srgb,#FFD9A0 8%,transparent),transparent 70%),var(--wall)}
.scene .office i,.scene .cork i{position:absolute;inset:0;display:block}
.scene .office .light{left:52%;right:4%;top:12%;bottom:26%;transform:skewX(-14deg);background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--stripe) 40%,transparent) 0 14px,transparent 14px 30px)}
.scene .office .room{background:var(--near);-webkit-mask-image:var(--nc-office);mask-image:var(--nc-office)}
.scene .office .fan{left:50%;top:0;right:auto;bottom:auto;width:180px;height:150px;margin-left:-90px;background:var(--near);-webkit-mask-image:var(--nc-fan);mask-image:var(--nc-fan);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center top;mask-position:center top;animation:nc-fan 9s ease-in-out infinite alternate}
.scene .cork{background:radial-gradient(60% 50% at 30% 25%,rgba(255,226,170,.16),transparent 70%),radial-gradient(circle,rgba(40,24,8,.45) 0 1.2px,transparent 1.8px) 0 0/9px 9px,radial-gradient(circle,rgba(40,24,8,.3) 0 1px,transparent 1.5px) 4px 5px/11px 11px,
  radial-gradient(ellipse at 50% 40%,#8E6A3E,#4A3418 85%)}
.scene .cork .string{background:var(--string);opacity:.55;-webkit-mask-image:var(--nc-string);mask-image:var(--nc-string);-webkit-mask-size:100% 100%;mask-size:100% 100%}
.scene .cork .notes{background:var(--nc-notes) center/cover no-repeat;opacity:.85}
body.bg-office .scene .office{opacity:1}
body.bg-office .scene .harbour,body.bg-office .scene .pier,body.bg-office .scene .water,body.bg-office .scene .beam,body.bg-office .scene .fog,body.bg-office .scene .lights{opacity:0}
body.fs .scene .cork,body.bg-cork-board .scene .cork{opacity:1}
/* the desk lamp's pool behind the board (separates the folder from the night), then the vignette and the film grain */
.scene .pool{background:radial-gradient(46% 44% at 46% 44%,rgba(255,222,160,.08),transparent 72%)}
.scene .grade{background:radial-gradient(130% 110% at 50% 45%,transparent 52%,rgba(0,0,0,.55))}
.scene .grain{opacity:.07;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}
@keyframes nc-beam{from{transform:rotate(166deg)}to{transform:rotate(204deg)}}
@keyframes nc-drift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
@keyframes nc-fan{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}

/* the title: the film's title card — condensed, tracked, fog white, a hard shadow away from the lamp; no plate */
.logo h1{font-family:var(--display);font-weight:400;letter-spacing:.08em;color:var(--fog);text-shadow:1px 2px 0 rgba(0,0,0,.65),0 0 22px rgba(0,0,0,.75)}
.ibtn{border-color:color-mix(in srgb,var(--fog) 35%,transparent)}.ibtn:hover{border-color:var(--fog)}
.demo,.auto span{background:var(--spot);color:var(--btn-ink)}
.screen{background:var(--bg)}.screen h2{color:var(--fog);font-weight:400}
.btn{font-weight:400;letter-spacing:.06em}
.spinner{border-color:color-mix(in srgb,var(--fog) 20%,transparent);border-top-color:var(--spot)}
/* the shell's governed flash, should one fire (big win): a faint amber tint, never white */
.flash{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--spot) 18%,transparent),transparent 70%)}

/* the case folder: manila card in the lamp's light (lighter top left, aged darker edges, paper fibres) with a typed tab,
   two paper clips and a rubber-stamped EVIDENCE; its shadow falls to the bottom right */
.frame{isolation:isolate;padding:calc(min(var(--cell)*.32,36px) + 10px) min(calc(var(--cell)*.2),24px) min(calc(var(--cell)*.14),16px)}
.folder{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:3px 3px 4px 4px;
  background:radial-gradient(70% 60% at 20% 8%,rgba(255,246,220,.4),transparent 70%),repeating-linear-gradient(90deg,rgba(90,60,20,.05) 0 1px,transparent 1px 5px),
    linear-gradient(165deg,color-mix(in srgb,var(--manila) 86%,#fff),var(--manila) 45%,color-mix(in srgb,var(--manila) 80%,var(--manila-lo)));
  box-shadow:inset 0 0 0 1px rgba(60,40,10,.45),inset 0 0 24px rgba(110,74,24,.35),inset 0 1px 0 rgba(255,255,255,.45),14px 24px 44px rgba(0,0,0,.6),4px 8px 12px rgba(0,0,0,.35)}
.folder .tab{position:absolute;left:6%;top:4px;height:min(var(--cell)*.24,28px);padding:0 16px;display:flex;align-items:center;border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--manila) 80%,#fff),color-mix(in srgb,var(--manila) 94%,#fff));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 -1px 0 rgba(60,40,10,.45);
  font:700 max(12px,min(var(--cell)*.14,16px))/1 var(--ui);letter-spacing:.02em;color:var(--type-ink);white-space:nowrap;max-width:70%;overflow:hidden}
.folder .clip{position:absolute;top:-8px;width:14px;height:min(var(--cell)*.5,52px);border:2.5px solid #A7B0BC;border-radius:7px;box-shadow:2px 3px 2px rgba(0,0,0,.35),inset 1px 1px 0 rgba(255,255,255,.5)}
.folder .clip::after{content:"";position:absolute;left:2px;right:2px;top:6px;bottom:8px;border:2px solid #8E98A6;border-radius:5px}
.folder .c1{right:14%}.folder .c2{right:calc(14% + 26px)}
.folder .stamp{position:absolute;right:3%;bottom:calc(min(var(--cell)*.02,4px));font:400 max(12px,min(var(--cell)*.16,20px))/1 var(--display);letter-spacing:.12em;color:var(--stamp-ink);
  border:2px solid currentColor;outline:1px solid currentColor;outline-offset:2px;padding:1px 6px;transform:rotate(-4deg)}
/* the board: the pegs stand on the folder; the cork window sits in it, recessed (the lamp throws the shadow of the
   folder's edge down into it, a lit lip below) */
#board.reels-board{padding:3px;border-radius:2px;background:none}
.reels-board .window{box-shadow:0 0 0 2px #5A4022,0 0 0 3px rgba(255,236,200,.35),inset 0 14px 16px -8px rgba(0,0,0,.6),inset 12px 0 14px -10px rgba(0,0,0,.4),inset 0 -1px 0 rgba(255,236,200,.3)}
.reels-board .peg{border-color:rgba(60,40,10,.35);box-shadow:inset 0 -3px 0 var(--pc),0 1px 2px rgba(60,40,10,.35)}
.reels-board .peg.on,.reels-board .peg:focus-visible{color:var(--peg-ink);box-shadow:inset 0 -3px 0 var(--pc),0 0 0 2px var(--pc),0 0 10px color-mix(in srgb,var(--pc) 60%,transparent)}
/* variant "clean": no folder, a thin ink-and-fog frame */
body[data-variant="clean"] .frame{padding:6px 6px 4px}
body[data-variant="clean"] .folder{display:none}
body[data-variant="clean"] #board.reels-board{background:#3A2812;box-shadow:0 0 0 2px var(--fog),0 0 0 4px var(--panel),0 16px 36px rgba(0,0,0,.5)}
body[data-variant="clean"] .reels-board .peg{--peg-bg:var(--panel);--peg-ink:var(--ink)}

/* the message: typed on the folder itself (dark ink on manila, the amount in red ink); on the clean frame a dark slip */
.message{padding:0 12px;color:var(--type-ink);font-family:var(--ui);font-weight:700}
.message b{color:var(--stamp-ink)}
body[data-variant="clean"] .message{border-radius:2px;background:var(--panel);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
body[data-variant="clean"] .message b{color:var(--amber)}
body[data-variant="clean"] .message:empty{background:none;box-shadow:none}

/* the cells: evidence pinned to the cork; a pin's wobble as a reel lands (no squash) */
.reels-board .reel+.reel{box-shadow:inset 1px 0 0 rgba(40,24,8,.3),inset 2px 0 0 rgba(255,232,190,.08)}
.reels-board .sym{width:90%;height:90%}
.reels-board .cell.landed .sym{animation:nc-pin .22s var(--ease-out,ease-out)}
@keyframes nc-pin{0%{transform:rotate(-2.5deg) translateY(-4%)}55%{transform:rotate(1.2deg) translateY(1%)}100%{transform:none}}
.reels-board .reel.tease{box-shadow:inset 0 0 0 2px var(--spot),inset 0 0 24px color-mix(in srgb,var(--spot) 40%,transparent)}
.reels-board .cell.win::after{border-color:var(--spot);box-shadow:0 0 12px var(--win-glow),inset 0 0 10px color-mix(in srgb,var(--spot) 22%,transparent)}
/* the rest step back into the dark (opacity, not a filter: art direction §3.3) */
.reels-board .cell.dim .sym{filter:none;opacity:.42}
/* the winning lines are red string pinned across the prints (GDD §8): the reels board draws a wide soft stroke, then the
   line; here the soft stroke is a pale paper edge (the string reads at 3.5:1 or more on it, over cork and over dimmed prints) and the line
   is the string. */
.case-board svg.lines polyline:nth-of-type(odd){stroke:var(--string-edge);stroke-opacity:.8}
.case-board svg.lines polyline:nth-of-type(even){stroke:var(--string)}
/* the Fedora's art carries the word WILD: the tag stays as text for screen readers only */
.sym.wild .tag{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* the Case Board bar: a dark slip with the files face down, the lead and the total */
.fsbar{flex-wrap:wrap;justify-content:center;background:var(--panel);border-color:color-mix(in srgb,var(--fog) 45%,transparent);color:var(--ink);font-family:var(--ui)}
.fsbar b{color:var(--amber)}
.fsbar .lk{font-style:normal;font-weight:700;padding:0 4px;border-radius:2px;background:var(--spot);color:var(--btn-ink)}
/* the case board on the cork wall: titles and suspect names in the condensed display face (long names fit a card) */
.case-board .ctitle{font-family:var(--display)}
.case-board .suspect .nm{font:400 max(12px,calc(var(--fw)*.21))/1.1 var(--display);letter-spacing:.04em}
/* the lucky card's name is the longest: a smaller size and no tracking keep it inside the dashed edge on phones */
.case-board .suspect.lucky .nm{font-size:max(11px,calc(var(--fw)*.18));letter-spacing:0}
/* the suspect row uses the cork's width when the files are small (a short phone screen sizes the files by its height):
   each card grows to 64 px when there is room, so every name fits whole; on larger boards the cards keep the files'
   width. After a Lucky Hunch the struck old prize stands on its own line above the new one, so neither leaves the card
   (a very long amount wraps inside it rather than spill onto the next card). */
.case-board .suspects{width:100%;justify-content:center;grid-template-columns:repeat(var(--cards,5),minmax(calc(var(--fw)*1.04),max(calc(var(--fw)*1.04),64px)))}
.case-board .suspect .pz{max-width:100%;font-size:max(11px,calc(var(--fw)*.15));line-height:1.1;white-space:normal;overflow-wrap:anywhere;text-align:center}
.case-board .suspect .pz s{display:block}
.case-board .caseboard{background:radial-gradient(80% 70% at 22% 12%,rgba(255,226,170,.26),transparent 64%),radial-gradient(circle,var(--cork-dot) 0 1px,transparent 1.6px) 0 0/7px 7px,
  radial-gradient(circle,rgba(60,36,14,.32) 0 1px,transparent 1.4px) 3px 4px/9px 9px,#86633A;
  box-shadow:inset 0 14px 16px -8px rgba(0,0,0,.55),inset 0 0 26px rgba(0,0,0,.4),0 0 0 2px #5A4022,0 0 0 6px var(--manila),10px 18px 36px rgba(0,0,0,.55)}
.case-board .file .back{box-shadow:inset 0 0 0 1.5px var(--file-edge),inset 0 1px 0 rgba(255,255,255,.35),2px 4px 6px rgba(0,0,0,.4)}
.case-board .suspect{box-shadow:0 0 0 1px var(--card-edge),2px 4px 7px rgba(0,0,0,.45)}

/* the HUD corners: dark plates (balance and win high, bet and the badge low); labels in sentence case */
.hud{position:relative;font-family:var(--ui)}
.hud>.bal,.hud>.win,.hud .betctl{box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 rgba(255,255,255,.05),0 8px 18px rgba(0,0,0,.45)}
.meter span{font-family:var(--ui);font-weight:700;letter-spacing:.02em;text-transform:none}
.meter b{color:var(--ink);font-family:var(--ui)}.meter.win b{color:var(--amber)}
.pm,.auto{border-color:color-mix(in srgb,var(--fog) 40%,transparent)}
/* the bet buttons never shrink under 30 px wide (the typewriter "per line" text wraps in the meter instead) */
.pm{min-width:30px}
.auto[aria-pressed="true"]{box-shadow:0 0 14px color-mix(in srgb,var(--spot) 70%,transparent)}
/* the spin button: the brass shield badge (the spot colour as metal) with an engraved arrow that turns once per spin;
   its contact shadow falls to the bottom right. The shield is cut on a layer under the button (::before), not on the
   button: a clip-path there would also cut the shell's focus outline and the drop shadow. The button's own corners are
   rounded to the shield's outline, so the focus ring follows the badge at its offset. */
.spin{isolation:isolate;background:none;border-radius:14% 14% 50% 50%/10% 10% 58% 58%;clip-path:none;box-shadow:none;filter:drop-shadow(3px 7px 8px rgba(0,0,0,.6))}
.spin::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--badge-bg);clip-path:polygon(50% 0,96% 14%,96% 46%,88% 72%,50% 100%,12% 72%,4% 46%,4% 14%);pointer-events:none}
.spin svg{width:66%;height:66%}
.spin svg .arrow{transform-box:view-box;transform-origin:24px 23.7px}
.spin.kick svg .arrow{animation:nc-turn .5s cubic-bezier(.7,0,.2,1)}
@keyframes nc-turn{to{transform:rotate(360deg)}}
.spin:hover:not(:disabled){filter:drop-shadow(3px 7px 8px rgba(0,0,0,.6)) brightness(1.06)}
.spin:disabled{filter:drop-shadow(3px 7px 8px rgba(0,0,0,.6)) brightness(.65) saturate(.5)}
.side .tablet{background:var(--panel-bg);border:1px solid color-mix(in srgb,var(--fog) 40%,transparent);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 18px rgba(0,0,0,.4)}
.tablet .th{font-weight:400;color:var(--fog)}
.tablet small{color:var(--muted)}

/* panels and overlays: dark plates, titles in the display face */
.panel{font-family:var(--ui)}
.panel h2,.panel h3{color:var(--fog);font-weight:400;letter-spacing:.05em}
.panel .lead{color:var(--muted)}
.ptc{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.ptc .symbox{border-radius:2px;background:radial-gradient(90% 80% at 22% 10%,rgba(255,226,170,.28),transparent 64%),#86633A}
.ptc .sym{width:100%;height:100%}
.ptc.case-face .symbox img{position:absolute;inset:0;width:100%;height:100%}
.ptc.case-face p{margin:0;font-size:14px}
.mini{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
.mini .g i{background:color-mix(in srgb,var(--ink) 14%,transparent)}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
table.hist .won{color:var(--amber)}
.overlay{background:radial-gradient(circle at 50% 42%,color-mix(in srgb,#FFD9A0 6%,var(--panel) 88%),color-mix(in srgb,var(--panel) 97%,#000) 74%)}
.ovcard{position:relative;z-index:1}
.ovcard h2{font-weight:400;letter-spacing:.04em;color:var(--fog);text-shadow:1px 3px 0 rgba(0,0,0,.45)}
.ovamt{color:var(--amber)}.ovcard p{color:var(--muted)}
/* a big win's card is an opaque plate pinned on the front page: its title, amount and skip hint sit on --panel (one of
   themeMap's grounds), never on the faint sheet behind it, so every preset and admin colour keeps text at 4.5:1 */
.overlay.bigwin .ovcard{background:var(--panel);padding:12px 22px 14px;border-radius:3px;box-shadow:0 0 0 1px color-mix(in srgb,var(--fog) 22%,transparent),8px 14px 34px rgba(0,0,0,.55)}

/* big wins: a newspaper front page tilts in behind the card; printed evidence tags drift down (paper, not light) */
.overlay .np{position:absolute;left:50%;top:50%;width:min(560px,88vw);height:max(min(400px,60vh),calc(var(--ch,0px) + 240px));z-index:0;pointer-events:none;padding:14px 18px;
  transform:translate(-50%,-50%) rotate(-3deg);animation:nc-paper .5s cubic-bezier(.2,1.1,.4,1) both}
/* the sheet and its columns are faint (.32); the masthead sits on a full-opacity paper strip, so its text keeps dark ink
   on light paper (12.7:1) and never shows at a low contrast. The page is the card's height (--ch, set by skin.js) plus
   240 px, so the strip (≤ 91 px with the padding, ±15 px for the tilt) stays above the big-win title. */
.overlay .np::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:2px;opacity:.32;
  background:repeating-linear-gradient(180deg,transparent 0 9px,rgba(20,16,10,.08) 9px 10px),#D9D4C6;box-shadow:12px 20px 50px rgba(0,0,0,.6)}
.overlay .np .head{display:block;padding:6px 10px 0;border-radius:2px;background:#D9D4C6;box-shadow:3px 4px 10px rgba(0,0,0,.45)}
.overlay .np .mast{display:block;font:400 clamp(20px,4vw,38px)/1 var(--display);letter-spacing:.06em;color:#14100A;border-bottom:3px double #14100A;padding-bottom:6px;text-align:center}
.overlay .np .ed{display:block;font:700 12px/2 var(--ui);font-style:normal;color:#14100A;text-align:center}
.overlay .np .cols{position:absolute;left:18px;right:18px;bottom:16px;top:40%;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;opacity:.32}
.overlay .np .cols i{display:block;background:repeating-linear-gradient(180deg,rgba(20,16,10,.35) 0 3px,transparent 3px 8px)}
.overlay .ptag{position:absolute;left:var(--x);top:-8%;z-index:0;padding:3px 8px 3px 16px;pointer-events:none;white-space:nowrap;font:700 12px/1.2 var(--ui);font-style:normal;color:#14100A;background:var(--manila);
  border-radius:2px;clip-path:polygon(0 50%,10px 0,100% 0,100% 100%,10px 100%);animation:nc-tag 2.8s ease-in var(--d,0ms) both}
/* the page and the tags belong to the big win only: once the overlay is anything else (the Case Board summary opens in
   the same element right after it) they are gone at once, whatever their timers say */
.overlay:not(.bigwin) .np,.overlay:not(.bigwin) .ptag{display:none}
@keyframes nc-paper{from{transform:translate(-50%,-30%) rotate(-12deg) scale(.7);opacity:0}to{transform:translate(-50%,-50%) rotate(-3deg);opacity:1}}
@keyframes nc-tag{0%{transform:translateY(0) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateY(105vh) rotate(var(--r,12deg));opacity:.9}}

/* the venetian blinds between the reels and the Case Board: twelve slats of shadow close and open (no light); each
   slat has a faint lit top edge, as the lamp catches it */
.blindsfx{position:fixed;inset:0;z-index:40;pointer-events:none;display:none;flex-direction:column}
.blindsfx.show{display:flex}
.blindsfx i{flex:1;display:block;transform:scaleY(0);background:linear-gradient(180deg,#262C34 0,#14181E 8%,#05070A 70%,#1A1F26);box-shadow:0 1px 0 rgba(0,0,0,.6)}
.blindsfx.still{background:#05070A;opacity:0}
.blindsfx.still i{display:none}

/* reduced motion: nothing swings, drifts, wobbles, turns or falls; the shell keeps fades short */
body.still .scene .beam i,body.still .scene .fog i,body.still .scene .office .fan,body.still .reels-board .cell.landed .sym,body.still .spin.kick svg .arrow,body.still .overlay .np,body.still .overlay .ptag{animation:none}
body.still .overlay .ptag{display:none}
@media (prefers-reduced-motion:reduce){
  .scene .beam i,.scene .fog i,.scene .office .fan,.reels-board .cell.landed .sym,.spin.kick svg .arrow,.overlay .np{animation:none!important}
  .overlay .ptag{display:none}
}
/* phones: a slimmer folder (no clips, no stamp), a compact bar; the case board takes the reels' place. A tall screen
   leaves sky above the board: a small moon (a lit core and a soft fog halo, never brighter than the fog-white title)
   sits in it, away from the title and the board. */
@media (max-aspect-ratio:4/5){
  .scene .sky{background:radial-gradient(circle at 24% 15%,rgba(234,238,242,.56) 0,rgba(222,228,234,.42) 1.45vmax,rgba(214,222,230,.18) 1.7vmax,rgba(214,222,230,.07) 4.5vmax,rgba(214,222,230,.025) 9vmax,transparent 18vmax),
    radial-gradient(30% 24% at 86% 46%,color-mix(in srgb,var(--mist) 22%,transparent),transparent 72%),
    linear-gradient(180deg,var(--sky-top) 0%,var(--sky-top) 24%,color-mix(in srgb,var(--sky-low) 70%,var(--sky-top)) 62%,var(--sky-low) 80%,var(--far) 100%)}
}
@media (max-width:860px),(max-aspect-ratio:4/5){
  .frame{padding:calc(min(var(--cell)*.3,30px) + 6px) 6px 6px}
  .folder .clip,.folder .stamp{display:none}
  .folder .tab{left:4%;max-width:86%}
  .fsbar{gap:10px;padding:4px 10px;font-size:13px}
  /* the HUD is one dark panel here and the shell gives its meters no padding: the corner plates' hairline would sit
     on the text (and next to the bet buttons' own edges), so the meters stand on the panel without it */
  .hud>.bal,.hud>.win,.hud .betctl{box-shadow:none}
}
@media (max-height:520px){.folder .tab{display:none}.frame{padding-top:8px}}
@media (max-width:400px){.betctl{gap:4px}}