/* Case board (shared by case-board games, case.js): the darkroom over the reels window (edges darken, a shutter over the
   developed reel — never a light brighter than the board) and the cork board of case files that replaces the window
   during the bonus. Art comes from the game (symbolHTML, fileHTML); colours from the skin:
   --dr-vignette (the darkened edges), --dr-blade, --dr-edge (the shutter), --dr-rim (the developed reel's rim),
   --cork, --cork-dot (the board), --file-back, --file-edge, --file-ink (a face-down file), --file-front (an open one),
   --card-bg, --card-ink, --card-edge (suspect cards), --pin-on, --pin-off (matched files), --solved (the resolved
   suspect), --lucky (the lucky file's card). --fw, a file's width, is set by the board. */
.case-board .dr-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 72% 78% at 50% 50%,transparent 52%,var(--dr-vignette,rgba(0,0,0,.55)) 100%);animation:cb-fade .3s ease-out both}
.case-board .reel.developed{box-shadow:inset 0 0 0 2px var(--dr-rim,#F2A900),inset 0 0 18px color-mix(in srgb,var(--dr-rim,#F2A900) 45%,transparent)}
.case-board .dr-shutter{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.case-board .dr-shutter i{position:absolute;left:0;right:0;height:50%;display:block;background:var(--dr-blade,#0B0E14);box-shadow:0 0 0 1px var(--dr-edge,#2A3140)}
.case-board .dr-shutter .t{top:0;transform-origin:top;animation:cb-close .19s cubic-bezier(.7,0,.2,1) both}
.case-board .dr-shutter .b{bottom:0;transform-origin:bottom;animation:cb-close .19s cubic-bezier(.7,0,.2,1) both}
.case-board .dr-shutter.open .t,.case-board .dr-shutter.open .b{animation:cb-open .23s cubic-bezier(.7,0,.2,1) both}
.case-board .cell.xfade .sym{animation:cb-fade .15s ease-out}
@keyframes cb-close{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes cb-open{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@keyframes cb-fade{from{opacity:0}to{opacity:1}}

/* the case board replaces the reels window (and the payline markers) */
.case-board.casing{grid-template-columns:auto}
.case-board.casing>.pegs,.case-board.casing>.window{display:none}
.case-board .caseboard{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(var(--fw)*.1);padding:calc(var(--fw)*.14) calc(var(--fw)*.16);
  border-radius:6px;animation:cb-fade .35s ease-out;
  background:radial-gradient(circle,var(--cork-dot,rgba(60,36,14,.5)) 0 1px,transparent 1.6px) 0 0/7px 7px,radial-gradient(circle,var(--cork-dot,rgba(60,36,14,.35)) 0 1px,transparent 1.4px) 3px 4px/9px 9px,var(--cork,#9C7444);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.35),inset 0 0 26px rgba(0,0,0,.45)}
.case-board .ctitle{margin:0;font:400 calc(var(--fw)*.24)/1 var(--display);letter-spacing:.06em;padding:2px 10px;border-radius:2px;color:var(--card-ink,#14100A);background:var(--card-bg,#E9EDF1)}
.case-board .suspects{display:grid;grid-template-columns:repeat(var(--cards,5),calc(var(--fw)*1.04));gap:calc(var(--fw)*.08);margin:0;padding:0;list-style:none}
.case-board .suspect{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:calc(var(--fw)*.05) 2px calc(var(--fw)*.06);border-radius:3px;
  background:var(--card-bg,#E9EDF1);color:var(--card-ink,#14100A);box-shadow:0 0 0 1px var(--card-edge,#7D8898),0 3px 6px rgba(0,0,0,.45);transition:transform .18s}
.case-board .suspect::before{content:"";position:absolute;top:-4px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--pin-on,#B3261E);box-shadow:0 1px 2px rgba(0,0,0,.6)}
.case-board .suspect .mug{display:block;width:calc(var(--fw)*.62);height:calc(var(--fw)*.5)}
.case-board .suspect .mug img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.case-board .suspect .nm{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 max(10px,calc(var(--fw)*.15))/1.15 var(--ui)}
.case-board .suspect .pins{display:flex;gap:3px}
.case-board .suspect .pins i{display:block;width:max(7px,calc(var(--fw)*.1));height:max(7px,calc(var(--fw)*.1));border-radius:50%;border:1.5px solid var(--card-ink,#14100A);background:var(--pin-off,transparent)}
.case-board .suspect .pins i.on{background:var(--pin-on,#B3261E)}
.case-board .suspect .pz{font:700 max(10px,calc(var(--fw)*.15))/1.15 var(--ui);font-variant-numeric:tabular-nums;white-space:nowrap}
.case-board .suspect .pz s{font-weight:400;opacity:.8}
.case-board .suspect.near{box-shadow:0 0 0 2px var(--pin-on,#B3261E),0 3px 6px rgba(0,0,0,.45)}
.case-board .suspect.solved{box-shadow:0 0 0 3px var(--solved,#F2A900),0 0 16px var(--solved,#F2A900)}
/* the lucky card before its file turns up: the art is faint and the edge dashed (its text keeps full contrast); the dash
   runs at the card's rim, outside the name's box (padding 2px), so it never crosses a letter */
.case-board .suspect.lucky:not(.on){box-shadow:0 0 0 1.5px var(--card-edge,#7D8898),0 3px 6px rgba(0,0,0,.45);outline:1.5px dashed var(--card-ink,#14100A);outline-offset:-2px}
.case-board .suspect.lucky:not(.on) .mug{opacity:.45}
.case-board .suspect.lucky.on{box-shadow:0 0 0 3px var(--lucky,#F2A900),0 3px 6px rgba(0,0,0,.45)}
.case-board .suspect.hit{animation:cb-hit .5s ease-out}
.case-board .files{display:grid;grid-template-columns:repeat(var(--cols,5),var(--fw));gap:calc(var(--fw)*.08);margin:0;padding:0;list-style:none}
.case-board .file{position:relative;width:var(--fw);height:calc(var(--fw)*.8);perspective:calc(var(--fw)*6)}
.case-board .file .flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .25s cubic-bezier(.7,0,.2,1)}
.case-board .file.open .flip{transform:rotateY(180deg)}
.case-board .file .back,.case-board .file .front{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:3px}
.case-board .file .back{display:flex;align-items:flex-end;justify-content:flex-start;padding:0 0 4px 6px;
  background:linear-gradient(180deg,transparent 0 16%,var(--file-back,#D8B878) 16%),linear-gradient(90deg,var(--file-back,#D8B878) 0 46%,transparent 46%);
  box-shadow:inset 0 0 0 1.5px var(--file-edge,#5A4420),0 3px 5px rgba(0,0,0,.4)}
.case-board .file .back span{font:700 max(11px,calc(var(--fw)*.2))/1 var(--ui);color:var(--file-ink,#1E1608)}
.case-board .file .front{transform:rotateY(180deg);background:var(--file-front,transparent)}
.case-board .file .front img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.case-board .file.pinned .flip{transition:none}
.case-board .file.pinned::after,.case-board .file.seen::after{content:"";position:absolute;top:-3px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;z-index:2;background:var(--pin-on,#B3261E);box-shadow:0 1px 2px rgba(0,0,0,.6)}
.case-board .file.hit{animation:cb-hit .5s ease-out}
.case-board .caseboard.solved .file.open:not(.match){filter:saturate(.5) brightness(.7)}
.case-board .file.match .front{box-shadow:0 0 0 3px var(--solved,#F2A900),0 0 12px var(--solved,#F2A900)}
.case-board .lead{margin:0;padding:2px 10px;border-radius:2px;font:700 max(12px,calc(var(--fw)*.17))/1.3 var(--ui);text-align:center;color:var(--card-ink,#14100A);background:var(--card-bg,#E9EDF1)}
.case-board .lead b{color:inherit}
@keyframes cb-hit{0%{transform:scale(1)}35%{transform:scale(1.08)}100%{transform:scale(1)}}
/* reduced motion: no shutter, no flip and no bump; an open file cross-fades (150 ms) */
body.still .case-board .file .flip{transition:none}
body.still .case-board .file.xfade .front{animation:cb-fade .15s ease-out}
body.still .case-board .suspect.hit,body.still .case-board .file.hit,body.still .case-board .dr-vignette,body.still .case-board .caseboard{animation:none}
@media (prefers-reduced-motion:reduce){
  .case-board .file .flip{transition:none}
  .case-board .suspect.hit,.case-board .file.hit,.case-board .dr-shutter i,.case-board .caseboard{animation:none!important}
}