/* Puzzle close-ups: a heavy, worn workbench look. Dark stained wood framed in riveted iron,
   brass controls with real bevels, parchment notes and gritty texture. Loaded after main.css. */
.closeup.pz {
  --brass-hi: #f3d999; --brass: #c79a48; --brass-lo: #6d4a1c; --iron: #1b1714;
  width: min(1060px, 100%);
  padding: 0; border: 0; border-radius: 6px; overflow: visible;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255,170,90,.10), rgba(0,0,0,0) 60%),
    radial-gradient(ellipse at 50% 120%, rgba(0,0,0,.65), rgba(0,0,0,0) 60%),
    repeating-linear-gradient(92deg, rgba(0,0,0,.18) 0 2px, rgba(0,0,0,0) 2px 7px, rgba(255,220,170,.03) 7px 9px, rgba(0,0,0,0) 9px 15px),
    linear-gradient(180deg, #2a1810, #170c08 60%, #0f0705);
  box-shadow: 0 0 0 3px #0a0806, 0 0 0 9px #2b2420, 0 0 0 11px #0a0806, inset 0 0 60px rgba(0,0,0,.85), inset 0 0 0 1px rgba(201,164,92,.25), 0 40px 90px rgba(0,0,0,.9), 0 0 120px rgba(160,20,30,.18);
}
.closeup.pz.wide { width: min(1240px, 100%); }
/* brass rivets in the corners of the iron frame */
.closeup.pz::before, .closeup.pz::after { content: ''; position: absolute; left: -7px; right: -7px; height: 14px; pointer-events: none; z-index: 3;
  background: radial-gradient(circle at 7px 7px, var(--brass-hi) 0, var(--brass) 3px, var(--brass-lo) 5px, transparent 6px) left / 14px 14px no-repeat,
              radial-gradient(circle at 7px 7px, var(--brass-hi) 0, var(--brass) 3px, var(--brass-lo) 5px, transparent 6px) right / 14px 14px no-repeat,
              radial-gradient(circle at 7px 7px, var(--brass-hi) 0, var(--brass) 3px, var(--brass-lo) 5px, transparent 6px) center / 14px 14px no-repeat; }
.closeup.pz::before { top: -7px; } .closeup.pz::after { bottom: -7px; }
.closeup.pz .closeup-body { position: relative; padding: 34px 48px 34px; }
/* film grain over everything */
.closeup.pz .closeup-body::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: overlay; border-radius: 6px;
  background-image: 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.closeup.pz .closeup-title { position: relative; margin: 0 50px 6px 0; font-size: 56px; letter-spacing: .02em; color: #f1e3c4;
  text-shadow: 0 0 24px rgba(200,20,30,.55), 0 3px 0 #000, 0 0 2px #000; }
.closeup.pz .closeup-title::after { content: ''; display: block; height: 3px; margin-top: 8px; width: 220px;
  background: linear-gradient(90deg, #b3121f, rgba(179,18,31,0)); box-shadow: 0 0 10px rgba(179,18,31,.7); }
.closeup.pz .closeup-x { right: 14px; top: 14px; width: 52px; height: 52px; border-radius: 50%; font-size: 34px; line-height: 1; color: #2a1608;
  background: radial-gradient(circle at 35% 30%, var(--brass-hi), var(--brass) 45%, var(--brass-lo)); box-shadow: 0 3px 0 #000, inset 0 -3px 6px rgba(0,0,0,.4); }
.closeup.pz .closeup-x:hover { filter: brightness(1.15); color: #000; }
.closeup.pz .pz-intro { position: relative; font-size: 22px; line-height: 1.45; color: #d6c7a6; margin: 10px 0 22px; max-width: 900px; }
.closeup.pz .pz-intro i { color: #f3e2b8; }
.closeup.pz .pz-msg { position: relative; font-size: 24px; margin: 18px 0 0; color: #ff8a4a; text-shadow: 0 2px 0 #000; }
.closeup.pz.pz-ok .pz-msg { color: #6dffb8; text-shadow: 0 0 14px rgba(69,245,168,.6), 0 2px 0 #000; }
.closeup.pz.pz-ok { box-shadow: 0 0 0 3px #0a0806, 0 0 0 9px #2b2420, 0 0 0 11px #0a0806, inset 0 0 60px rgba(0,0,0,.85), 0 40px 90px rgba(0,0,0,.9), 0 0 140px rgba(69,245,168,.35); }
.closeup.pz .row-btns { justify-content: center; margin-top: 26px; }

/* the big action button: a blood-red enamel plate */
.closeup.pz .btn-plain.primary { position: relative; padding: 16px 44px; font: 400 30px var(--f-display); letter-spacing: .04em; text-align: center; color: #fff3e0; border-radius: 6px;
  border: 2px solid #1a0306; background: linear-gradient(#b51b28, #7a0d17 55%, #4d060d);
  box-shadow: inset 0 2px 0 rgba(255,160,160,.45), inset 0 -4px 8px rgba(0,0,0,.5), 0 5px 0 #200205, 0 10px 24px rgba(0,0,0,.6); text-shadow: 0 2px 0 #000; }
.closeup.pz .btn-plain.primary:hover { filter: brightness(1.15); }
.closeup.pz .btn-plain.primary:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,160,160,.3), 0 2px 0 #200205; }

/* brass push buttons used by wheels, arrows, valves and the clock */
.closeup.pz .wheel button, .closeup.pz .clock-ctrl button, .closeup.pz .maze-pad button, .closeup.pz .valve-row button {
  border: 1px solid #3a2408; color: #2a1606; font-size: 22px; cursor: pointer; border-radius: 8px;
  background: linear-gradient(var(--brass-hi), var(--brass) 45%, #8a6428);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 5px rgba(0,0,0,.35), 0 4px 0 #24160a, 0 6px 12px rgba(0,0,0,.5); text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.closeup.pz .wheel button:hover, .closeup.pz .clock-ctrl button:hover, .closeup.pz .maze-pad button:hover, .closeup.pz .valve-row button:hover { filter: brightness(1.12); }
.closeup.pz .wheel button:active, .closeup.pz .clock-ctrl button:active, .closeup.pz .maze-pad button:active, .closeup.pz .valve-row button:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 #24160a; }

/* ---------- combination lock: brass drums in an iron housing */
.pz-combo .combo-body { display: flex; justify-content: center; gap: 22px; padding: 30px 40px; margin: 0 auto; width: max-content; border-radius: 14px;
  background: linear-gradient(#2b2622, #120f0d); box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -10px 30px rgba(0,0,0,.7), 0 0 0 4px #0a0807, 0 0 0 7px #3a2c18, 0 18px 40px rgba(0,0,0,.7); }
.pz-combo .wheel { gap: 10px; }
.pz-combo .wheel button { width: 86px; height: 46px; }
.pz-combo .wheel-face { width: 96px; height: 128px; border: 0; border-radius: 10px; font: 76px var(--f-type); color: #1c0f04;
  background: linear-gradient(180deg, #4a3210 0%, #a27a36 12%, #f2d690 42%, #fff2c4 50%, #e0b864 60%, #8a6226 88%, #3a2408 100%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.5), inset 0 14px 14px -8px rgba(0,0,0,.6), inset 0 -14px 14px -8px rgba(0,0,0,.6), 0 0 0 4px #120d08;
  text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.pz-combo .wheel-face svg { width: 72px; height: 72px; filter: drop-shadow(0 1px 0 rgba(255,255,255,.4)); }
.pz-combo .combo-body.sym .wheel-face svg * { fill: #2a1606 !important; stroke: #2a1606 !important; }

/* ---------- pressing things in order: stone or brass tiles */
.pz-seq .seq-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; padding: 28px; border-radius: 10px;
  background: radial-gradient(ellipse at 50% 30%, #3a3430, #1a1614 70%); box-shadow: inset 0 0 50px rgba(0,0,0,.8), 0 0 0 3px #0a0807; }
.pz-seq .seq-btn { min-width: 150px; padding: 18px 14px 14px; gap: 10px; border-radius: 10px; font: 22px var(--f-body); color: #e8dcc0; border: 0;
  background: linear-gradient(160deg, #5a524a, #2c2622 60%, #1c1815); box-shadow: inset 0 2px 0 rgba(255,255,255,.12), inset 0 -6px 14px rgba(0,0,0,.6), 0 6px 0 #0c0a08, 0 12px 22px rgba(0,0,0,.6);
  transition: transform .12s, box-shadow .2s, filter .2s; }
.pz-seq .seq-btn svg { width: 96px !important; height: auto !important; max-height: 150px; filter: drop-shadow(0 4px 4px rgba(0,0,0,.7)); }
.pz-seq .seq-btn:hover { filter: brightness(1.15); transform: translateY(-2px); }
.pz-seq .seq-btn.lit { box-shadow: inset 0 0 0 2px #6dffb8, inset 0 0 30px rgba(69,245,168,.35), 0 6px 0 #0c0a08, 0 0 30px rgba(69,245,168,.45); }
.pz-books .seq-row { background: linear-gradient(#2a160c, #160a06); box-shadow: inset 0 -16px 0 #3a2010, inset 0 0 50px rgba(0,0,0,.8); }
.pz-books .seq-btn { background: none; box-shadow: none; min-width: 0; padding: 6px; }
.pz-bells .seq-btn { background: linear-gradient(160deg, #3a3028, #1a1410); }

/* ---------- the great clock */
.pz-clock .clock-wrap { padding: 10px; }
.pz-clock .clockface { width: 420px; height: 420px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.8)); }
.pz-clock .clock-ctrl { gap: 14px; margin-top: 18px; font: 22px var(--f-body); color: #d6c7a6; }
.pz-clock .clock-ctrl span { margin: 0 4px 0 18px; }
.pz-clock .clock-ctrl button { width: 64px; height: 54px; font-size: 30px; }

/* ---------- piano: ivory and ebony in a lacquered case */
.pz-piano .piano-keys { position: relative; display: flex; justify-content: center; gap: 0; padding: 50px 30px 26px; margin: 0 auto; width: max-content; border-radius: 10px 10px 6px 6px;
  background: linear-gradient(#1a0d08, #050202 40%), #000; box-shadow: inset 0 3px 0 rgba(255,255,255,.12), inset 0 0 0 2px #2a1810, 0 18px 40px rgba(0,0,0,.8); }
.pz-piano .piano-keys::before { content: 'FORTISSIMO & SONS'; position: absolute; top: 14px; left: 0; right: 0; text-align: center; font: 18px var(--f-display); letter-spacing: .3em; color: #c9a45c; text-shadow: 0 0 6px rgba(201,164,92,.5); }
.pz-piano .pkey { width: 76px; height: 290px; border: 1px solid #1a1208; border-top: 0; border-radius: 0 0 8px 8px; font: 22px var(--f-type); color: #6a5a40; padding-bottom: 14px;
  background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,0) 20%), linear-gradient(#cfc4a8 0, #fffaea 12%, #f5ecd2 80%, #d9cdb0);
  box-shadow: inset 0 -8px 0 #cbbf9e, 0 4px 6px rgba(0,0,0,.6); }
.pz-piano .pkey:hover { background: linear-gradient(#cfc4a8 0, #fff7e0 12%, #ffeec8 80%, #e0d0a8); }
.pz-piano .bk { position: absolute; top: 50px; width: 46px; height: 178px; pointer-events: none; z-index: 1; border-radius: 0 0 5px 5px;
  background: linear-gradient(90deg, #000, #2a2a30 40%, #111), linear-gradient(#000, #333); box-shadow: inset 0 -10px 0 #3a3a40, 0 6px 8px rgba(0,0,0,.7); }

/* ---------- boiler valves */
.pz-valves .gauges { gap: 40px; padding: 26px; border-radius: 12px; background: linear-gradient(#3a1a12, #1a0a06); box-shadow: inset 0 0 40px rgba(0,0,0,.8), 0 0 0 3px #0a0504; }
.pz-valves .gauge { width: 230px; filter: drop-shadow(0 10px 14px rgba(0,0,0,.8)); }
.pz-valves .valve-row { gap: 60px; margin-top: 26px; }
.pz-valves .valve-ctl { display: grid; grid-template-columns: 56px 150px 56px; grid-template-rows: 150px auto; align-items: center; justify-items: center; gap: 6px 12px; }
.pz-valves .valve-ctl span { grid-column: 1 / -1; font: 24px var(--f-display); letter-spacing: .08em; color: #e8d2a0; text-shadow: 0 2px 0 #000; }
.pz-valves .valve-row button { width: 56px; height: 56px; padding: 0; font-size: 30px; }
.pz-valves .valve-wheel-ui { width: 150px; height: 150px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.8)); }
.pz-valves .valve-wheel-ui svg { width: 100%; height: 100%; }

/* ---------- wiring */
.pz-wires .wire-board { max-width: 960px; border-radius: 12px; box-shadow: 0 0 0 4px #0a0a0c, 0 0 0 8px #2e3a30, 0 18px 40px rgba(0,0,0,.8); }
.pz-wires .wire-board .term:hover { filter: brightness(1.3); }
.pz-wires .wire-board .term.picked circle { stroke: #fff; stroke-width: 5; }

/* ---------- turning statues and mirrors: carved stone plinths */
.pz-rotate .rot-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
.pz-rotate .rot { padding: 20px 14px 18px; gap: 14px; border: 0; border-radius: 10px; font: 21px var(--f-body); color: #e2d5b8;
  background: radial-gradient(circle at 50% 42%, #4a443e 0, #2a2522 55%, #161311 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.1), inset 0 -8px 18px rgba(0,0,0,.6), 0 6px 0 #0c0a08, 0 14px 26px rgba(0,0,0,.6); transition: filter .2s, transform .12s; }
.pz-rotate .rot:hover { filter: brightness(1.15); }
.pz-rotate .rot:active { transform: translateY(4px); }
.pz-rotate .rot b { color: #ffd38a; }
.pz-rotate .rot-inner { width: 170px; height: 180px; transition: none; filter: drop-shadow(0 8px 8px rgba(0,0,0,.7)); }
.pz-rotate .rot-inner::before { content: ''; }

/* ---------- the hedge maze and the telescope */
.pz-maze .maze-wrap, .pz-scope .scope-wrap { gap: 40px; }
.pz-maze .maze { width: min(620px, 82vw); border-radius: 10px; box-shadow: 0 0 0 4px #0a0806, 0 0 0 9px #2a3a20, 0 18px 40px rgba(0,0,0,.8); }
.pz-maze .maze-pad, .pz-scope .maze-pad { grid-template-columns: repeat(3, 76px); grid-template-rows: repeat(3, 76px); gap: 8px; }
.pz-scope .maze-pad [data-m="0,-40"] { grid-column: 2; grid-row: 1; } .pz-scope .maze-pad [data-m="-40,0"] { grid-column: 1; grid-row: 2; } .pz-scope .maze-pad [data-m="40,0"] { grid-column: 3; grid-row: 2; } .pz-scope .maze-pad [data-m="0,40"] { grid-column: 2; grid-row: 3; }
.pz-maze .maze-pad button, .pz-scope .maze-pad button { font-size: 28px; border-radius: 12px; }
.pz-scope .scope-view { width: min(520px, 80vw); box-shadow: 0 0 0 10px #0a0806, 0 0 0 22px #b48a3e, 0 0 0 26px #4a3010, 0 22px 50px rgba(0,0,0,.9); }
.pz-scope .scope-read { position: relative; text-align: center; font-size: 26px; color: #b9d0ff; text-shadow: 0 0 10px rgba(143,176,255,.6); }

/* ---------- Graveyard Shift: a 16-bit horror cabinet on a real CRT.
   Painted sprites in assets/arcade: moonlit graveyard backdrop, holes, markers, zombies, ghost, goo, dizzy head, skull coin.
   The field is a fixed-ratio stage; each grave is placed by row (perspective) and column with --x/--y/--s. */
.pz-arcade .arc-screen { --fw: min(100%, max(480px, calc((100vh - 360px) * 16 / 9)));
  position: relative; display: grid; grid-template-areas: 'f'; justify-items: center; container-type: inline-size;
  padding: 18px; border: 0; border-radius: 26px; color: #6dfff0; font: 24px 'VT323', var(--f-type);
  background: radial-gradient(ellipse at 50% 45%, #10202a 0%, #04080c 70%, #000 100%);
  box-shadow: inset 0 0 80px rgba(0,0,0,.95), inset 0 0 0 3px #000, 0 0 0 16px #1a0a24, 0 0 0 20px #5a1a7a, 0 0 60px rgba(150,40,255,.4); overflow: hidden; will-change: transform; }
.pz-arcade .arc-screen > .arc-hud, .pz-arcade .arc-screen > .arc-field, .pz-arcade .arc-screen > .arc-start { grid-area: f; }
/* scanlines + RGB aperture grille + glass glare, over everything */
.pz-arcade .arc-screen::after { content: ''; position: absolute; inset: 0; z-index: 30; pointer-events: none; border-radius: 26px;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.26) 0 2px, rgba(0,0,0,0) 2px 4px),
              repeating-linear-gradient(90deg, rgba(255,40,40,.035) 0 1px, rgba(40,255,80,.035) 1px 2px, rgba(60,80,255,.035) 2px 3px),
              radial-gradient(ellipse at 28% 12%, rgba(255,255,255,.09), rgba(255,255,255,0) 38%); }
/* rolling refresh bar */
.pz-arcade .arc-screen::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 120px; z-index: 31; pointer-events: none;
  background: linear-gradient(rgba(109,255,240,0), rgba(109,255,240,.06) 50%, rgba(109,255,240,0)); animation: crtRoll 5.5s linear infinite; }
@keyframes crtRoll { from { transform: translateY(-140px); } to { transform: translateY(820px); } }
.pz-arcade .arc-screen > * { animation: crtFlick 4s steps(1) infinite; }
@keyframes crtFlick { 0%, 100% { opacity: 1; } 31% { opacity: .9; } 32% { opacity: 1; } 67% { opacity: .94; } 68% { opacity: 1; } 89% { opacity: .86; } 90% { opacity: 1; } }
.pz-arcade .arc-screen.boot { animation: crtBoot .5s ease-out; }
@keyframes crtBoot { 0% { filter: brightness(3) contrast(.5); transform: scaleY(.02); } 40% { transform: scaleY(1.03); filter: brightness(1.6); } 100% { transform: none; filter: none; } }
.pz-arcade .arc-screen.arc-bad { animation: arcBad .4s ease-out; }
@keyframes arcBad { 0% { box-shadow: inset 0 0 120px rgba(255,0,40,.8), inset 0 0 0 3px #000, 0 0 0 16px #1a0a24, 0 0 0 20px #ff2a5a, 0 0 80px rgba(255,40,80,.7); } }

/* the stage: painted backdrop, phosphor glow, vignette */
.pz-arcade .arc-field { position: relative; display: block; width: var(--fw); aspect-ratio: 16 / 9; isolation: isolate; overflow: hidden; border-radius: 18px / 16px;
  background: #07040c url(../assets/arcade/arc-bg.webp) center / cover no-repeat; filter: contrast(1.06) saturate(1.15);
  box-shadow: 0 0 0 2px #000, 0 0 26px rgba(120,255,190,.18); --gw: 17%; }
.pz-arcade .arc-field::after { content: ''; position: absolute; inset: 0; z-index: 40; pointer-events: none; border-radius: inherit;
  background: radial-gradient(ellipse 60% 40% at 50% 2%, rgba(140,255,150,.12), rgba(140,255,150,0) 70%),
              radial-gradient(ellipse 75% 70% at 50% 52%, rgba(0,0,0,0) 55%, rgba(0,0,0,.62) 100%);
  box-shadow: inset 0 0 50px rgba(0,0,0,.75), inset 0 0 3px 1px rgba(160,255,220,.2); }
/* attract mode: dim the yard until a token goes in */
.pz-arcade .arc-field::before { content: ''; position: absolute; inset: 0; z-index: 39; pointer-events: none; background: rgba(6,2,16,.5); transition: opacity .4s; }
.pz-arcade .arc-screen.live .arc-field::before { opacity: 0; }

/* cabinet HUD laid over the sky */
.pz-arcade .arc-hud { position: relative; z-index: 2; align-self: start; width: var(--fw); box-sizing: border-box; margin: 0; display: flex; justify-content: space-between; align-items: flex-start;
  padding: 1.4cqw 2.6cqw 3cqw; border-radius: 18px 18px 0 0; pointer-events: none; font-size: clamp(16px, 2.3cqw, 30px); line-height: .9; letter-spacing: .06em;
  background: linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.35) 60%, rgba(0,0,0,0)); text-shadow: none; }
.pz-arcade .arc-h { display: flex; align-items: center; gap: .35em; }
.pz-arcade .arc-h > span, .pz-arcade .arc-h-time { display: flex; flex-direction: column; align-items: flex-start; }
.pz-arcade .arc-h-time, .pz-arcade .arc-h-hi > span { align-items: center; }
.pz-arcade .arc-h-hi > span { align-items: flex-end; }
.pz-arcade .arc-hud i { font-style: normal; color: #ff3b4e; text-shadow: 0 0 6px rgba(255,40,60,.85), 2px 2px 0 #000; }
.pz-arcade .arc-h-time i { color: #6dfff0; text-shadow: 0 0 6px rgba(109,255,240,.85), 2px 2px 0 #000; }
.pz-arcade .arc-hud b { display: inline-block; font-weight: 400; font-size: 2em; line-height: .85; color: #ffe95a; font-variant-numeric: tabular-nums;
  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 3px 3px 0 #7a2a00, 0 0 14px rgba(255,220,60,.75); }
.pz-arcade .arc-h-time b { font-size: 2.5em; min-width: 1.3em; text-align: center; }
.pz-arcade .arc-h-hi b { color: #fff; text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 3px 3px 0 #3a1a6a, 0 0 12px rgba(200,180,255,.7); }
.pz-arcade .arc-coin { width: 2.3em; height: auto; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.8)) drop-shadow(0 0 8px rgba(255,200,60,.55)); animation: arcCoin 2.6s ease-in-out infinite; }
@keyframes arcCoin { 0%, 70%, 100% { transform: scaleX(1); } 80% { transform: scaleX(.35); } 90% { transform: scaleX(1); } }
.pz-arcade .arc-score.bump { animation: hudBump .3s cubic-bezier(.3,1.8,.5,1); }
@keyframes hudBump { 0% { transform: scale(1.7); color: #fff; } 100% { transform: none; } }
.pz-arcade .arc-time.low { color: #ff4a5a; animation: timeLow .5s ease-in-out infinite alternate; }
@keyframes timeLow { to { transform: scale(1.2); } }

/* INSERT TOKEN, centred on the yard */
.pz-arcade .arc-start { align-self: center; z-index: 3; margin: 0; padding: .35em 1.1em !important; font: 400 clamp(22px, 3.6cqw, 42px) 'VT323', var(--f-type) !important; letter-spacing: .08em;
  background: linear-gradient(#ffe95a, #e0a020) !important; color: #2a1000 !important; border: 3px solid #000 !important; border-radius: 4px !important;
  box-shadow: 0 5px 0 #6a3a00, 0 0 0 6px rgba(0,0,0,.55), 0 0 34px rgba(255,220,80,.6) !important; animation: arcBlink 1.1s steps(2) infinite; }
@keyframes arcBlink { 50% { filter: brightness(.72); } }

/* graves: back row small and high, front row big and low */
.pz-arcade .grave { --x: 50; --y: 97; --s: 1; position: absolute; left: calc(var(--x) * 1%); bottom: calc(100% - var(--y) * 1%);
  width: calc(var(--gw) * var(--s)); margin: 0 0 0 calc(var(--gw) * var(--s) / -2); height: auto; aspect-ratio: 1 / 1.3; padding: 0; border: 0; border-radius: 0;
  background: none; overflow: visible; pointer-events: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; transition: transform .1s; }
.pz-arcade .grave::before, .pz-arcade .grave::after { content: none !important; }
.pz-arcade .grave[data-r="0"] { --y: 46; --s: .66; z-index: 1; } .pz-arcade .grave[data-r="1"] { --y: 69; --s: .82; z-index: 2; } .pz-arcade .grave[data-r="2"] { --y: 97; --s: 1; z-index: 3; }
.pz-arcade .grave[data-r="0"][data-c="0"] { --x: 30; } .pz-arcade .grave[data-r="0"][data-c="2"] { --x: 70; }
.pz-arcade .grave[data-r="1"][data-c="0"] { --x: 19; } .pz-arcade .grave[data-r="1"][data-c="2"] { --x: 81; }
.pz-arcade .grave[data-r="2"][data-c="0"] { --x: 13; } .pz-arcade .grave[data-r="2"][data-c="2"] { --x: 87; }
.pz-arcade .grave img { position: absolute; display: block; height: auto; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.pz-arcade .grave .arc-hole { left: 0; bottom: 0; width: 100%; z-index: 1; }
.pz-arcade .grave .arc-lip { z-index: 3; clip-path: inset(77% 0 0 0); }
.pz-arcade .grave[data-f="1"] .arc-hole { transform: scaleX(-1); }
.pz-arcade .grave .arc-tomb { bottom: 49%; left: 5%; width: 46%; z-index: 0; filter: drop-shadow(-3px 4px 0 rgba(0,0,0,.45)); }
.pz-arcade .grave .arc-cross { width: 40%; bottom: 50%; }
.pz-arcade .grave[data-f="1"] .arc-tomb { left: auto; right: 5%; }
.pz-arcade .grave[data-r="0"] :is(.arc-tomb, .arc-hole) { filter: brightness(.72) saturate(.85) drop-shadow(-2px 3px 0 rgba(0,0,0,.4)); }
.pz-arcade .grave[data-r="1"] :is(.arc-tomb, .arc-hole) { filter: brightness(.86) saturate(.92) drop-shadow(-2px 3px 0 rgba(0,0,0,.4)); }
/* the pit clips whatever climbs out at the hole's front lip */
.pz-arcade .grave .arc-pit { position: absolute; left: -12%; right: -12%; top: -45%; bottom: 14%; z-index: 2; overflow: hidden; pointer-events: none; }
.pz-arcade .grave .arc-pit::after { content: ''; position: absolute; left: 20%; right: 20%; bottom: 0; height: 16%; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(12,5,2,.9), rgba(12,5,2,0)); }
.pz-arcade .grave .arc-mob { left: 50%; bottom: 0; width: 66%; margin-left: -33%; translate: 0 104%; transform-origin: 50% 100%;
  transition: translate .2s ease-in, opacity .25s; }
.pz-arcade .grave[data-m="1"] .arc-mob { scale: -1 1; }
.pz-arcade .grave.up .arc-mob { translate: 0 10%; transition: translate .2s cubic-bezier(.25,1.55,.5,1), opacity .2s; animation: arcSway .46s ease-in-out .2s infinite alternate; }
@keyframes arcSway { from { transform: rotate(-3deg) scale(1.02, .98); } to { transform: rotate(3deg) scale(.98, 1.02); } }
/* ghosts drift up translucent and glowing, never fully solid */
.pz-arcade .grave[data-kind="ghost"] .arc-mob { width: 60%; margin-left: -30%; opacity: 0; mix-blend-mode: screen; filter: drop-shadow(0 0 10px rgba(170,210,255,.9)); }
.pz-arcade .grave[data-kind="ghost"][data-v="1"] .arc-mob { filter: hue-rotate(45deg) saturate(1.4) drop-shadow(0 0 10px rgba(210,170,255,.9)); }
.pz-arcade .grave[data-kind="ghost"][data-v="2"] .arc-mob { filter: hue-rotate(-40deg) saturate(1.3) drop-shadow(0 0 10px rgba(150,255,230,.9)); }
.pz-arcade .grave.up[data-kind="ghost"] .arc-mob { opacity: .92; translate: 0 -6%; transition: translate .5s cubic-bezier(.2,.9,.3,1), opacity .3s; animation: arcGhost .8s ease-in-out infinite alternate; }
@keyframes arcGhost { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-7%) rotate(2deg) scale(1.03, .97); } }
/* bonked: dizzy head, goo, then it sinks back in */
.pz-arcade .grave.up.hit[data-kind="zombie"] .arc-mob { bottom: 16%; translate: 0 150%; transition: translate .28s ease-in .4s; animation: arcBonk .4s ease-out; }
@keyframes arcBonk { 0% { transform: scale(1.28, .72); filter: brightness(2.2); } 35% { transform: scale(.9, 1.12) rotate(-7deg); filter: brightness(1.3); } 70% { transform: rotate(5deg); } 100% { transform: none; } }
.pz-arcade .grave.up.hit[data-kind="ghost"] .arc-mob { opacity: 0; translate: 0 -30%; transition: translate .5s ease-out, opacity .5s ease-out; animation: none; }
.pz-arcade .grave .arc-goo { left: 36%; top: 30%; width: 42%; margin-left: -21%; z-index: 4; opacity: 0; }
.pz-arcade .grave.hit[data-kind="zombie"] .arc-goo { animation: arcGoo .75s ease-out forwards; }
@keyframes arcGoo { 0% { opacity: 1; transform: scale(.25) rotate(-20deg); } 18% { transform: scale(1.12) rotate(4deg); } 55% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05) translateY(18%); } }
/* touch target: the hole, plus whatever is up out of it */
.pz-arcade .grave .arc-hit { position: absolute; left: 4%; right: 4%; top: 32%; bottom: 0; z-index: 5; pointer-events: auto; cursor: pointer; border-radius: 30%; }
.pz-arcade .grave.up .arc-hit { top: 4%; }
.pz-arcade .grave:hover .arc-hole:not(.arc-lip) { filter: brightness(1.25); }
.pz-arcade .grave:active { transform: scale(.97); }
.pz-arcade .grave:focus-visible { outline: none; }
.pz-arcade .grave:focus-visible .arc-hit { box-shadow: 0 0 0 3px #6dfff0, 0 0 14px #6dfff0; }
.pz-arcade .arc-pts { position: absolute; left: 50%; top: -4%; z-index: 6; pointer-events: none; font: 400 clamp(26px, 5cqw, 60px) 'VT323', var(--f-type); color: #fff36a;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 16px rgba(255,233,90,.9); transform: translateX(-50%); animation: ptsUp .9s cubic-bezier(.2,1.2,.4,1) forwards; }
.pz-arcade .arc-pts.bad { color: #ff5a78; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 16px rgba(255,40,80,.9); }
@keyframes ptsUp { 0% { transform: translate(-50%, 20px) scale(.4); opacity: 0; } 25% { transform: translate(-50%, -6px) scale(1.35); opacity: 1; } 100% { transform: translate(-50%, -40px) scale(1); opacity: 0; } }

/* phones: a taller yard (the backdrop crops to its open middle) with bigger graves */
@media (max-width: 720px) {
  .pz-arcade .arc-screen { --fw: 100%; padding: 8px; border-radius: 16px;
    box-shadow: inset 0 0 40px rgba(0,0,0,.95), inset 0 0 0 2px #000, 0 0 0 6px #1a0a24, 0 0 0 9px #5a1a7a, 0 0 30px rgba(150,40,255,.4); }
  .pz-arcade .arc-screen::after { border-radius: 16px; }
  .pz-arcade .arc-field { aspect-ratio: 3 / 4; --gw: 30%; border-radius: 12px; }
  .pz-arcade .arc-hud { font-size: clamp(14px, 4.6cqw, 22px); padding: 2.4cqw 3cqw 6cqw; border-radius: 12px 12px 0 0; }
  .pz-arcade .grave[data-r="0"] { --y: 52; } .pz-arcade .grave[data-r="1"] { --y: 74; } .pz-arcade .grave[data-r="2"] { --y: 98; }
  .pz-arcade .grave[data-r="0"][data-c="0"] { --x: 26; } .pz-arcade .grave[data-r="0"][data-c="2"] { --x: 74; }
  .pz-arcade .grave[data-r="1"][data-c="0"] { --x: 19; } .pz-arcade .grave[data-r="1"][data-c="2"] { --x: 81; }
  .pz-arcade .grave[data-r="2"][data-c="0"] { --x: 16; } .pz-arcade .grave[data-r="2"][data-c="2"] { --x: 84; }
  .pz-arcade .arc-pts { font-size: clamp(22px, 8cqw, 36px); }
}

/* ---------- music box */
.pz-mbox .mbox { padding: 30px 50px 26px; border-radius: 12px; width: max-content; margin: 0 auto;
  background: linear-gradient(#5a2a14, #2a1208); box-shadow: inset 0 2px 0 rgba(255,200,150,.2), inset 0 0 0 3px #1a0a04, inset 0 0 0 7px #a07a3a, inset 0 0 0 9px #1a0a04, 0 18px 40px rgba(0,0,0,.8); }
.pz-mbox .mbox-dancer svg { width: 120px; height: 120px; filter: drop-shadow(0 0 16px rgba(255,220,140,.6)); }
.pz-mbox .mbox-pins span { width: 64px; height: 64px; font-size: 28px; color: #2a1606; border: 0; background: radial-gradient(circle at 35% 30%, #f3d999, #c79a48 50%, #6d4a1c); box-shadow: 0 4px 0 #1a0c04; }
.pz-mbox .mbox-pins span.on { background: radial-gradient(circle at 35% 30%, #fffbe0, #ffd860 50%, #c08a20); box-shadow: 0 0 22px rgba(255,220,100,.9); }

/* the painted fallboard (assets/puzzles/piano-top.webp, P5): FORTISSIMO & SONS and the red felt, with the keys laid in below the felt */
@media (min-width: 721px) {
  .pz-piano .piano-keys { --kpad: 100px; padding: 222px var(--kpad) 26px; border-radius: 6px;
    background: url(../assets/puzzles/piano-top.webp) center top / 961px auto no-repeat, linear-gradient(#0a0504, #050202 60%), #000; }
  .pz-piano .piano-keys::before { content: none; }
  .pz-piano .piano-keys::after { top: 214px; left: var(--kpad); right: var(--kpad); opacity: .55; }
  .pz-piano .bk { top: 222px; }
}
@media (max-width: 720px) {
  .closeup.pz .closeup-body { padding: 22px 18px; }
  .closeup.pz .closeup-title { font-size: 38px; }
  .pz-piano .pkey { width: 44px; height: 200px; }
  .pz-piano .bk { display: none; }
}

/* =====================================================================================
   MOTION & JUICE. Candle-light, dust, tactile controls and big feedback, layered over the
   iron-and-wood look above. The particle canvas (.pz-fx) is drawn by puzzles.js.
   ===================================================================================== */
.closeup.pz .closeup-body { z-index: 1; }
.closeup.pz .closeup-x { z-index: 6; transition: transform .25s cubic-bezier(.3,1.6,.5,1), filter .2s; }
.closeup.pz .closeup-x:hover { transform: rotate(90deg) scale(1.06); }
.pz-amb, .pz-top { position: absolute; inset: 0; pointer-events: none; border-radius: 6px; overflow: hidden; }
.pz-amb { z-index: 0; }
.pz-top { z-index: 4; }
.pz-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.pz-amb i, .pz-top i { position: absolute; display: block; }
/* warm candle light pooling from above, flickering */
.pz-amb .pz-candle { inset: -10%;
  background: radial-gradient(ellipse 55% 45% at 28% 4%, rgba(255,168,78,.26), rgba(255,140,60,0) 70%),
              radial-gradient(ellipse 45% 40% at 82% 10%, rgba(255,150,70,.16), rgba(255,140,60,0) 70%),
              radial-gradient(ellipse 70% 50% at 50% 50%, rgba(255,190,120,.06), rgba(0,0,0,0) 70%);
  animation: pzCandle 4.3s linear infinite; will-change: opacity; }
.pz-amb .pz-vig { inset: 0; box-shadow: inset 0 0 140px 30px rgba(0,0,0,.75); animation: pzBreath 7.5s ease-in-out infinite; will-change: opacity; }
.pz-top .pz-light { inset: 0; mix-blend-mode: soft-light;
  background: radial-gradient(ellipse 60% 55% at 30% 0%, rgba(255,190,110,.55), rgba(255,190,110,0) 70%), radial-gradient(ellipse 50% 50% at 80% 8%, rgba(255,170,90,.35), rgba(255,170,90,0) 70%);
  animation: pzCandle 3.1s linear infinite reverse; will-change: opacity; }
@keyframes pzCandle { 0% { opacity: .82 } 6% { opacity: .62 } 9% { opacity: .95 } 17% { opacity: .78 } 31% { opacity: 1 } 34% { opacity: .66 } 37% { opacity: .9 } 52% { opacity: .8 } 61% { opacity: .97 } 64% { opacity: .7 } 79% { opacity: .88 } 90% { opacity: .74 } 100% { opacity: .82 } }
@keyframes pzBreath { 0%, 100% { opacity: .75 } 50% { opacity: 1 } }

/* wrong: red flash + shake + the message jolts */
.pz-top .pz-flash { inset: 0; opacity: 0; box-shadow: inset 0 0 0 3px rgba(255,60,60,.8), inset 0 0 140px 30px rgba(210,10,25,.55); background: radial-gradient(ellipse at 50% 50%, rgba(200,0,20,0) 40%, rgba(200,0,20,.18)); }
.closeup.pz.pz-bad .pz-flash { animation: pzFlash .55s ease-out; }
@keyframes pzFlash { 0% { opacity: 0 } 15% { opacity: 1 } 100% { opacity: 0 } }
.closeup.pz.shake { animation: pzShake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes pzShake { 10%, 90% { transform: translate(-2px, 0) } 20%, 80% { transform: translate(5px, 1px) rotate(.2deg) } 30%, 50%, 70% { transform: translate(-10px, -1px) rotate(-.3deg) } 40%, 60% { transform: translate(10px, 1px) rotate(.3deg) } }
.closeup.pz .pz-msg.pz-msg-bad { animation: pzMsgBad .5s ease-out; }
@keyframes pzMsgBad { 0% { transform: scale(1.25); color: #ff3a3a; text-shadow: 0 0 18px rgba(255,40,40,.9), 0 2px 0 #000; } 100% { transform: none; } }

/* right: light burst from the puzzle, the frame glows green, the message springs in */
.pz-top .pz-burst { left: var(--bx, 50%); top: var(--by, 50%); width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255,255,235,.95) 0, rgba(255,230,150,.6) 12%, rgba(120,255,190,.25) 34%, rgba(120,255,190,0) 62%); mix-blend-mode: screen; }
.closeup.pz.pz-win .pz-burst { animation: pzBurst 1.3s cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes pzBurst { 0% { opacity: 0; transform: scale(.05) } 12% { opacity: 1 } 100% { opacity: 0; transform: scale(1.6) } }
.closeup.pz.pz-win .pz-candle { background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(110,255,180,.22), rgba(0,0,0,0) 70%), radial-gradient(ellipse 55% 45% at 28% 4%, rgba(255,168,78,.22), rgba(0,0,0,0) 70%); }
.closeup.pz.pz-ok { animation: pzWinGlow 1.6s ease-out; }
@keyframes pzWinGlow {
  0% { box-shadow: 0 0 0 3px #0a0806, 0 0 0 9px #2b2420, 0 0 0 11px #0a0806, inset 0 0 60px rgba(0,0,0,.85), 0 40px 90px rgba(0,0,0,.9), 0 0 0 rgba(69,245,168,0); }
  25% { box-shadow: 0 0 0 3px #0a0806, 0 0 0 9px #3a6a48, 0 0 0 11px #0a0806, inset 0 0 90px rgba(69,245,168,.35), 0 40px 90px rgba(0,0,0,.9), 0 0 220px rgba(69,245,168,.75); }
  100% { box-shadow: 0 0 0 3px #0a0806, 0 0 0 9px #2b2420, 0 0 0 11px #0a0806, inset 0 0 60px rgba(0,0,0,.85), 0 40px 90px rgba(0,0,0,.9), 0 0 140px rgba(69,245,168,.35); } }
.closeup.pz.pz-ok .closeup-title::after { background: linear-gradient(90deg, #45f5a8, rgba(69,245,168,0)); box-shadow: 0 0 14px rgba(69,245,168,.8); width: 320px; transition: width .6s cubic-bezier(.2,1.4,.4,1), background .3s; }
.closeup.pz .closeup-title::after { transition: width .6s, background .3s; }
.closeup.pz.pz-ok .pz-msg { animation: pzMsgIn .8s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes pzMsgIn { 0% { opacity: 0; transform: translateY(14px) scale(.7); letter-spacing: .25em; filter: blur(6px); } 60% { opacity: 1; filter: blur(0); } 100% { transform: none; letter-spacing: normal; } }

/* ---------- hover / press life on every control */
.closeup.pz .btn-plain.primary { overflow: hidden; transition: transform .15s, filter .2s, box-shadow .2s; }
.closeup.pz .btn-plain.primary::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,230,200,.35), rgba(255,255,255,0)); transition: left .6s ease; }
.closeup.pz .btn-plain.primary:hover { transform: translateY(-2px); box-shadow: inset 0 2px 0 rgba(255,160,160,.45), inset 0 -4px 8px rgba(0,0,0,.5), 0 7px 0 #200205, 0 14px 30px rgba(0,0,0,.6), 0 0 34px rgba(220,40,50,.45); }
.closeup.pz .btn-plain.primary:hover::after, .closeup.pz .btn-plain.primary:focus-visible::after { left: 130%; }
.closeup.pz .wheel button, .closeup.pz .clock-ctrl button, .closeup.pz .maze-pad button, .closeup.pz .valve-row button { transition: transform .1s, filter .2s, box-shadow .2s; }
.closeup.pz .wheel button:hover, .closeup.pz .clock-ctrl button:hover, .closeup.pz .maze-pad button:hover, .closeup.pz .valve-row button:hover {
  transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 5px rgba(0,0,0,.35), 0 5px 0 #24160a, 0 8px 16px rgba(0,0,0,.5), 0 0 22px rgba(255,200,110,.45); }
.closeup.pz button:focus-visible, .closeup.pz .term:focus-visible { outline: 3px solid #ffcf6a; outline-offset: 3px; }

/* ---------- combination drums that roll */
.pz-combo .wheel-face { position: relative; overflow: hidden; display: block; }
.pz-combo .wheel-face .drum { position: absolute; inset: 0; will-change: transform; }
.pz-combo .wheel-face .dn { position: absolute; left: 0; right: 0; height: 88px; margin-top: -44px; display: grid; place-items: center; line-height: 1; }
.pz-combo .wheel-face .dn:not(.cur) { opacity: .55; filter: blur(.4px); }
.pz-combo .wheel-face::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; border-radius: 10px;
  background: linear-gradient(180deg, rgba(20,10,2,.85) 0%, rgba(20,10,2,.35) 16%, rgba(255,255,255,0) 32%, rgba(255,250,220,.18) 47%, rgba(255,255,255,0) 60%, rgba(20,10,2,.35) 84%, rgba(20,10,2,.85) 100%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.5); }
.pz-combo .wheel-face::before { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; margin-top: -46px; z-index: 2; pointer-events: none; background: rgba(0,0,0,.35); box-shadow: 0 90px 0 rgba(0,0,0,.35); }
.pz-combo .wheel-face.tick { animation: pzTick .3s ease-out; }
@keyframes pzTick { 0% { box-shadow: inset 0 0 0 2px rgba(0,0,0,.5), 0 0 0 4px #120d08, 0 0 26px rgba(255,210,120,.65); } 100% { box-shadow: inset 0 0 0 2px rgba(0,0,0,.5), 0 0 0 4px #120d08, 0 0 0 rgba(255,210,120,0); } }
.pz-combo .wheel:hover .wheel-face { box-shadow: inset 0 0 0 2px rgba(0,0,0,.5), 0 0 0 4px #120d08, 0 0 18px rgba(255,200,110,.35); }
.pz-combo.pz-ok .wheel-face { animation: pzDrumWin .9s ease-out both; animation-delay: calc(var(--i) * 90ms); }
@keyframes pzDrumWin { 30% { box-shadow: inset 0 0 0 2px rgba(0,0,0,.5), 0 0 0 4px #1d5a38, 0 0 40px rgba(69,245,168,.9); filter: brightness(1.35); } 100% { box-shadow: inset 0 0 0 2px rgba(0,0,0,.5), 0 0 0 4px #1d5a38, 0 0 20px rgba(69,245,168,.5); } }

/* ---------- sequence buttons */
.pz-seq .seq-btn { position: relative; transition: transform .18s cubic-bezier(.3,1.5,.5,1), box-shadow .25s, filter .2s; }
.pz-seq .seq-btn:hover { box-shadow: inset 0 2px 0 rgba(255,255,255,.16), inset 0 -6px 14px rgba(0,0,0,.6), 0 8px 0 #0c0a08, 0 16px 26px rgba(0,0,0,.6), 0 0 26px rgba(255,190,110,.3); }
.pz-seq .seq-btn.pressed { animation: pzSeqPress .38s cubic-bezier(.3,1.5,.5,1); }
@keyframes pzSeqPress { 0% { transform: translateY(0) } 25% { transform: translateY(6px) scale(.95); box-shadow: inset 0 2px 0 rgba(255,255,255,.1), inset 0 -2px 8px rgba(0,0,0,.6), 0 1px 0 #0c0a08, 0 0 30px rgba(255,200,120,.5); } 100% { transform: translateY(0) } }
.pz-seq .seq-btn.lit { animation: pzLit .6s ease-out; }
@keyframes pzLit { 0% { filter: brightness(1.6); } 100% { filter: none; } }
.pz-seq .seq-btn.lit.pressed { animation: pzSeqPress .38s cubic-bezier(.3,1.5,.5,1), pzLit .6s ease-out; }
.pz-seq.pz-ok .seq-btn { animation: pzSeqWin .8s ease-out both; animation-delay: calc(var(--i) * 80ms); }
@keyframes pzSeqWin { 40% { transform: translateY(-8px) scale(1.04); filter: brightness(1.4); } 100% { transform: none; } }
/* skulls: eyes flare red */
.pz-skulls .sk-eye, .pz-skulls .sk-glow { transform-box: fill-box; transform-origin: center; }
.pz-skulls .sk-glow { opacity: .25; animation: skIdle 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); }
@keyframes skIdle { 50% { opacity: .5; } }
.pz-skulls .seq-btn:hover .sk-glow { opacity: .7; }
.pz-skulls .seq-btn.pressed .sk-glow { animation: skFlare 1s ease-out; }
.pz-skulls .seq-btn.pressed .sk-eye { animation: skEye 1s ease-out; }
@keyframes skFlare { 0% { opacity: .3; transform: scale(1); } 15% { opacity: 1; transform: scale(2.4); } 100% { opacity: .35; transform: scale(1); } }
@keyframes skEye { 15% { transform: scale(1.9); fill: #ffe0b0; } 100% { transform: scale(1); } }
.pz-skulls .seq-btn.lit .sk-glow { opacity: .95; animation: skLit 1.4s ease-in-out infinite; }
.pz-skulls .seq-btn.lit .sk-eye { fill: #ffb070; }
@keyframes skLit { 50% { opacity: .6; transform: scale(1.3); } }
.pz-skulls .seq-btn.pressed svg { animation: skPush .45s ease-out; }
@keyframes skPush { 25% { transform: scale(.9) translateY(4px); } 60% { transform: scale(1.03); } }
/* bells: swing and ring */
.pz-bells .seq-btn svg { transform-origin: 50% 0; }
.pz-bells .seq-btn:hover svg { animation: bellNudge 1.2s ease-in-out infinite; }
@keyframes bellNudge { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(3deg) } 75% { transform: rotate(-3deg) } }
.pz-bells .seq-btn.pressed svg { animation: bellSwing 1.5s cubic-bezier(.3,.1,.3,1); }
@keyframes bellSwing { 0% { transform: rotate(0) } 10% { transform: rotate(18deg) } 26% { transform: rotate(-14deg) } 42% { transform: rotate(9deg) } 58% { transform: rotate(-6deg) } 74% { transform: rotate(3deg) } 88% { transform: rotate(-1deg) } 100% { transform: rotate(0) } }
.pz-bells .seq-btn.pressed .bl-clap { animation: bellClap 1.5s cubic-bezier(.3,.1,.3,1); }
@keyframes bellClap { 0% { transform: none } 12% { transform: translateX(-14px) } 28% { transform: translateX(12px) } 44% { transform: translateX(-7px) } 60% { transform: translateX(4px) } 100% { transform: none } }
.pz-bells .seq-btn.pressed { animation: pzSeqPress .38s cubic-bezier(.3,1.5,.5,1), bellGlow 1.2s ease-out; }
@keyframes bellGlow { 10% { filter: brightness(1.5) drop-shadow(0 0 18px rgba(255,220,140,.8)); } 100% { filter: none; } }
/* books: slide off the shelf */
.pz-books .seq-btn { transition: transform .35s cubic-bezier(.3,1.4,.5,1), filter .2s; }
.pz-books .seq-btn:hover { transform: translateY(-6px) rotate(-1.5deg); box-shadow: none; filter: brightness(1.2) drop-shadow(0 0 10px rgba(255,200,120,.35)); }
.pz-books .seq-btn.pressed { animation: bookPull .7s cubic-bezier(.3,1.2,.5,1); }
@keyframes bookPull { 0% { transform: none } 30% { transform: translateY(-26px) rotate(-6deg) scale(1.08); filter: brightness(1.3) drop-shadow(0 14px 10px rgba(0,0,0,.8)); } 100% { transform: none } }
.pz-books .seq-btn.lit { transform: translateY(-12px) rotate(-3deg); filter: drop-shadow(0 0 14px rgba(255,210,120,.65)); box-shadow: none; animation: none; }
.pz-books .seq-btn.lit.pressed { animation: bookPullStay .7s cubic-bezier(.3,1.2,.5,1); }
@keyframes bookPullStay { 0% { transform: none } 35% { transform: translateY(-28px) rotate(-7deg) scale(1.08); filter: brightness(1.4) drop-shadow(0 0 20px rgba(255,210,120,.9)); } 100% { transform: translateY(-12px) rotate(-3deg) } }
.pz-books.pz-ok .seq-btn { animation: pzSeqWin .8s ease-out both; animation-delay: calc(var(--i) * 80ms); }

/* ---------- the clock: second hand ticking, a glint sweeping the glass */
.pz-clock .ch-glint { animation: clkGlint 6s ease-in-out infinite; }
@keyframes clkGlint { 0%, 55% { transform: rotate(28deg) translateX(-160px); } 85%, 100% { transform: rotate(28deg) translateX(200px); } }
.pz-clock .clockface { transition: filter .4s; }
.pz-clock .clock-wrap:hover .clockface { filter: drop-shadow(0 18px 30px rgba(0,0,0,.8)) drop-shadow(0 0 24px rgba(255,200,120,.25)); }
.pz-clock.pz-ok .clockface { animation: clkWin 1.4s ease-out; }
@keyframes clkWin { 0%, 100% { transform: none; } 10%, 30%, 50% { transform: rotate(-1.4deg) scale(1.02); filter: drop-shadow(0 0 40px rgba(255,220,140,.8)); } 20%, 40%, 60% { transform: rotate(1.4deg) scale(1.02); } }

/* ---------- piano */
.pz-piano .pkey { position: relative; transform-origin: 50% 0; transition: transform .12s, background .2s, box-shadow .25s; }
.pz-piano .pkey:hover { box-shadow: inset 0 -8px 0 #cbbf9e, 0 4px 6px rgba(0,0,0,.6), inset 0 0 22px rgba(255,200,110,.35); }
.pz-piano .pkey::after { content: ''; position: absolute; inset: 0; border-radius: 0 0 8px 8px; pointer-events: none; opacity: 0;
  background: linear-gradient(rgba(255,170,60,0) 30%, rgba(255,180,80,.55) 80%, rgba(255,220,140,.8)); box-shadow: 0 0 34px rgba(255,180,80,.8); }
.pz-piano .pkey.down { animation: pkeyDown .6s cubic-bezier(.2,.8,.3,1); }
.pz-piano .pkey.down::after { animation: pkeyGlow .8s ease-out; }
@keyframes pkeyDown { 0% { transform: translateY(6px) scaleY(.985); box-shadow: inset 0 -2px 0 #cbbf9e, inset 0 14px 18px -8px rgba(0,0,0,.45); } 60% { transform: translateY(1px); } 100% { transform: none; } }
@keyframes pkeyGlow { 0% { opacity: 1; } 100% { opacity: 0; } }
.pz-piano .piano-keys::after { content: ''; position: absolute; left: 30px; right: 30px; top: 46px; height: 4px; background: linear-gradient(90deg, transparent, #a80d18 20%, #e0303a 50%, #a80d18 80%, transparent); box-shadow: 0 0 10px rgba(220,30,40,.6); }
.pz-piano.pz-ok .pkey { animation: pkeyWin .9s ease-out both; }
@keyframes pkeyWin { 30% { background: linear-gradient(#cfe8d8, #f4fff8 30%, #b8ffd8); box-shadow: inset 0 -3px 0 #9fd8b8, 0 0 30px rgba(69,245,168,.6); } }

/* ---------- valves & gauges */
.pz-valves .valve-wheel-ui { will-change: transform; }
.pz-valves .valve-ctl:hover .valve-wheel-ui { filter: drop-shadow(0 8px 10px rgba(0,0,0,.8)) drop-shadow(0 0 14px rgba(255,90,60,.4)); }
.pz-valves .gauge { transition: filter .4s; }
.pz-valves .gauge .g-green { transition: stroke .3s; }
.pz-valves .gauge.ok { filter: drop-shadow(0 10px 14px rgba(0,0,0,.8)) drop-shadow(0 0 18px rgba(69,245,168,.55)); }
.pz-valves .gauge.ok .g-green { stroke: #5dffa0; animation: gOk 1.2s ease-in-out infinite; }
@keyframes gOk { 50% { stroke: #2f9a50; } }
.pz-valves .gauge.hot { animation: gHot .14s linear infinite; filter: drop-shadow(0 10px 14px rgba(0,0,0,.8)) drop-shadow(0 0 16px rgba(255,40,30,.55)); }
.pz-valves .gauge.hot .g-red { stroke: #ff2a2a; }
@keyframes gHot { 0% { transform: translate(0,0) } 25% { transform: translate(1px,-1px) } 50% { transform: translate(-1px,1px) } 75% { transform: translate(1px,1px) } }

/* ---------- wires: live current, picked halos, the big zap */
.pz-wires .wire-board .term { transition: filter .2s; }
.pz-wires .wire-board .t-halo { opacity: 0; transition: opacity .2s; }
.pz-wires .wire-board .term.L:hover .t-halo { opacity: .45; }
.pz-wires .wire-board .term.picked .t-halo { stroke: none; opacity: 1; animation: wPick .7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes wPick { 50% { transform: scale(1.25); opacity: .55; } }
.pz-wires .wire-board.picking .term.R { animation: wWant 1s ease-in-out infinite; }
@keyframes wWant { 50% { filter: brightness(1.35) drop-shadow(0 0 6px rgba(190,230,255,.9)); } }
.pz-wires .wire-board .w-flow { stroke-dasharray: 3 26; stroke-linecap: round; opacity: .85; animation: wFlow .7s linear infinite; filter: drop-shadow(0 0 3px #bfe4ff); }
@keyframes wFlow { to { stroke-dashoffset: -29; } }
.pz-wires .wire-board.zap { animation: wZap .9s steps(1); }
@keyframes wZap { 0% { filter: brightness(3) saturate(.3); } 10% { filter: brightness(1); } 18% { filter: brightness(2.4) hue-rotate(20deg); } 28% { filter: brightness(1.1); } 40% { filter: brightness(1.8); } 55%, 100% { filter: none; } }
.pz-wires .wire-board.fizzle { animation: wFizzle .5s steps(2); }
@keyframes wFizzle { 0%, 40% { filter: brightness(.6) sepia(1) hue-rotate(-40deg) saturate(3); } 100% { filter: none; } }

/* ---------- turning stones */
.pz-rotate .rot { transition: filter .2s, transform .15s, box-shadow .25s; }
.pz-rotate .rot:hover { box-shadow: inset 0 2px 0 rgba(255,255,255,.14), inset 0 -8px 18px rgba(0,0,0,.6), 0 6px 0 #0c0a08, 0 14px 26px rgba(0,0,0,.6), 0 0 28px rgba(255,200,120,.25); }
.pz-rotate .rot:hover .rot-inner { filter: drop-shadow(0 8px 8px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(255,210,140,.35)); }
.pz-rotate .rot b { display: inline-block; transition: color .3s; }
.pz-rotate.pz-ok .rot { animation: pzSeqWin .9s ease-out both; animation-delay: calc(var(--i) * 90ms); }
.pz-rotate.pz-ok .rot-inner { filter: drop-shadow(0 0 20px rgba(150,220,255,.75)) drop-shadow(0 8px 8px rgba(0,0,0,.7)); }

/* ---------- maze: the lantern breathes, you glide */
.pz-maze .maze .mz-move { transition: transform .17s cubic-bezier(.3,.9,.4,1); }
.pz-maze .maze .mz-flick { animation: mzFlick 2.6s linear infinite; }
@keyframes mzFlick { 0% { opacity: 1 } 8% { opacity: .9 } 11% { opacity: 1 } 34% { opacity: .94 } 52% { opacity: 1 } 55% { opacity: .88 } 60% { opacity: 1 } 81% { opacity: .95 } 100% { opacity: 1 } }
.pz-maze .maze .mz-lamp { transform-box: fill-box; transform-origin: center; animation: mzLamp 1.9s ease-in-out infinite; }
@keyframes mzLamp { 0%, 100% { transform: scale(1); opacity: .95; } 20% { transform: scale(.94); opacity: .8; } 45% { transform: scale(1.06); opacity: 1; } 70% { transform: scale(.98); opacity: .85; } }
.pz-maze .maze .mz-exit { transform-box: fill-box; transform-origin: center; animation: mzExit 1.6s ease-in-out infinite; }
@keyframes mzExit { 50% { transform: scale(1.5); opacity: .6; } }
.pz-maze.pz-ok .maze { box-shadow: 0 0 0 4px #0a0806, 0 0 0 9px #3a7a40, 0 18px 40px rgba(0,0,0,.8), 0 0 60px rgba(150,220,255,.5); }

/* ---------- telescope: twinkling, slewing, drifting */
.pz-scope .scope-view { border-radius: 50%; }
.pz-scope .scope-view .sky-pan { transition: transform .6s cubic-bezier(.25,.8,.3,1); }
.pz-scope .scope-view .sky-drift { animation: skyDrift 18s ease-in-out infinite; }
@keyframes skyDrift { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-6px, 3px) rotate(.6deg); } }
.pz-scope .scope-view .tw { animation: twinkle 2s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .9; } 40% { opacity: .25; } 55% { opacity: 1; } }
.pz-scope .scope-view .rv-halo { opacity: .35; animation: twinkle 2.4s ease-in-out infinite; }
.pz-scope .scope-view .raven-line { stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; filter: drop-shadow(0 0 4px #8fb0ff); }
.pz-scope .scope-view.solved .raven-line { opacity: 1; transition: stroke-dashoffset 1.2s ease-out .3s, opacity .2s; stroke-dashoffset: 0; }
.pz-scope .scope-view.solved .rv-halo { opacity: 1; animation: none; }
.pz-scope .scope-view .shoot { stroke-dasharray: 70 200; stroke-dashoffset: 70; animation: shoot 1s ease-out forwards; filter: drop-shadow(0 0 3px #cfe0ff); }
@keyframes shoot { 0% { stroke-dashoffset: 70; opacity: 0; } 15% { opacity: 1; } 100% { stroke-dashoffset: -130; opacity: 0; } }
.pz-scope .scope-view .reticle { animation: reticle 3.5s ease-in-out infinite; }
@keyframes reticle { 50% { stroke-opacity: .55; } }

/* ---------- music box */
.pz-mbox .mbox-dancer { animation: mbBob 3s ease-in-out infinite; }
@keyframes mbBob { 50% { transform: translateY(-5px); } }
.pz-mbox .mbox-dancer.spin { animation: mbSpin 3s cubic-bezier(.4,0,.3,1); }
@keyframes mbSpin { 0% { transform: rotate(0) } 50% { transform: rotate(200deg) translateY(-8px) } 100% { transform: rotate(360deg) } }
.pz-mbox .mbox-pins span { transition: transform .2s cubic-bezier(.3,1.8,.5,1), box-shadow .2s, background .2s; }
.pz-mbox .mbox-pins span.on { transform: translateY(-8px) scale(1.15); }

/* ---------- reduced motion: keep the state changes, lose the big movement */
@media (prefers-reduced-motion: reduce) {
  .pz-amb .pz-candle, .pz-amb .pz-vig, .pz-top .pz-light, .pz-arcade .arc-screen::before, .pz-arcade .arc-screen > *, .pz-arcade .arc-coin, .pz-arcade .grave.up .arc-mob, .pz-scope .scope-view .sky-drift,
  .pz-scope .scope-view .tw, .pz-maze .maze .mz-flick, .pz-maze .maze .mz-lamp, .pz-clock .ch-glint, .pz-mbox .mbox-dancer { animation: none !important; }
  .closeup.pz.shake, .pz-top .pz-burst, .pz-valves .gauge.hot { animation: none !important; }
  .pz-scope .scope-view .sky-pan, .pz-maze .maze .mz-move { transition: none !important; }
  .closeup.pz.pz-bad .pz-flash { animation: none !important; }
}

/* the painted music box (assets/puzzles/musicbox.webp, P13): the box itself is the picture; the dancing moon is the
   painted crescent on its spindle, cut out of a copy of the picture and turned about its own centre; the note pins
   sit on the front panel */
.pz-mbox .mbox.painted { position: relative; display: block; width: min(560px, 82vw); aspect-ratio: 937 / 799; padding: 0; margin: 0 auto; box-shadow: none; border-radius: 0;
  background: url(../assets/puzzles/musicbox.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 18px 24px rgba(0,0,0,.8)); }
.pz-mbox .mbox.painted .mbox-dancer { position: absolute; inset: 0; background: inherit; transform-origin: 45.7% 48.8%; clip-path: ellipse(6.6% 7.6% at 45.7% 48.8%); filter: drop-shadow(0 0 10px rgba(255,220,140,.55)); }
.pz-mbox .mbox.painted .mbox-dancer svg { display: none; }
.pz-mbox .mbox.painted .mbox-pins { position: absolute; left: 0; right: 4%; top: 72%; justify-content: center; gap: 14px; }
@media (max-width: 720px) { .pz-mbox .mbox.painted .mbox-pins span { width: 44px; height: 44px; font-size: 20px; } }

/* the painted panel (assets/ui/panel.webp, P14): dark aged wood in a tarnished brass border with a rivet in each
   corner, nine-sliced over puzzle and plain pop-up panels so the corners keep their shape */
.closeup.pz, .closeup.plain { border: 0 solid transparent; border-image: url(../assets/ui/panel.webp) 130 fill / 50px stretch; }
.closeup.pz { background: radial-gradient(ellipse at 50% 35%, rgba(255,170,90,.08), rgba(0,0,0,0) 60%); box-shadow: 0 40px 90px rgba(0,0,0,.9), 0 0 120px rgba(160,20,30,.18); }
.closeup.pz::before, .closeup.pz::after { content: none; }
.closeup.plain { background: none; border-radius: 0; box-shadow: 0 30px 80px rgba(0,0,0,.85); }
.closeup.plain .closeup-body { padding: 34px 40px 34px; }
/* the painted note paper (assets/ui/paper.webp, I4) */
.paper-note { background: url(../assets/ui/paper.webp) center / 100% 100% no-repeat; padding: 10% 11% 9% 12%; box-shadow: none; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); color: #1e1004; text-shadow: 0 0 6px rgba(255,240,200,.55); }