/* The puzzle calendar shared by 13 Nights and the Advent Calendar (shared/calendar/engine.js): the header, the status
   lines, the puzzle screen and the five puzzle kinds. Each game's own sheet draws its picture and dresses the puzzles.
   Light inside a window, a lantern or a lit picture is the scene, not a surface, so it may glow. */
main { max-width: 1180px; }
.nh { display: flex; align-items: center; gap: 4px 10px; margin-bottom: 8px; }
.nh-title { flex: 1; min-width: 0; }
.nh .kicker { margin-bottom: 4px; }
.nh h1 { font-size: clamp(38px, 11vw, 72px); }
.nh #mute[aria-pressed="true"] { text-decoration: line-through; color: var(--muted); }
.status { font-size: 18px; font-weight: 600; margin: 0; line-height: 1.3; }
.countdown { margin: 6px 0 0; font-weight: 600; }
.tally { font-size: 28px; font-weight: 800; color: var(--accent); margin: 10px 0 0; }
.tally:empty, .countdown:empty { display: none; }

/* ---- the puzzle screen: everything a puzzle needs fits the screen, the stage takes what's left ---- */
body.playing .foot { display: none; }
body.playing .nh .kicker { display: none; }
body.playing .nh h1 { font-size: 20px; color: var(--muted); letter-spacing: 0; }
body.playing .nh { margin-bottom: 2px; }
body.playing main { display: flex; flex-direction: column; height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); padding-block: 6px 10px; }
body.playing.over main { height: auto; }
#play:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.play-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.play-title { font-size: clamp(24px, 6.4vw, 36px); color: var(--accent); }
.play-title:focus, .result .verdict-head:focus { outline: none; }
.play-info { margin: 0; font-weight: 800; font-size: 17px; color: var(--text); }
.play-help { margin: 4px 0 8px; color: var(--muted); font-size: 16px; line-height: 1.35; }
.stage { flex: 1 1 0; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.controls:empty { display: none; }
.controls .btn { flex: 1 1 0; min-width: 0; max-width: 220px; line-height: 1.15; padding: 6px 8px; }
.controls .btn.icon { flex: 0 0 52px; font-size: 24px; padding: 4px; }
.result { margin-top: 8px; }
.result-extra { margin-top: 12px; }
.result-extra:empty { display: none; }
.result .btn { margin-top: 16px; }
@media (min-width: 860px) { .result { max-width: 760px; } }
.tries { letter-spacing: 3px; }
@media (max-height: 600px) {
  .pick svg { height: 26px; }
  .pick label { padding: 3px 2px; font-size: 12px; }
  .pick fieldset { margin-bottom: 4px; }
  .play-help { font-size: 14px; margin: 2px 0 4px; }
  .controls { margin-top: 6px; gap: 6px; }
  body.playing .nh .btn.text { padding: 4px 8px; min-height: 44px; }
}

/* Pumpkin Carve */
.carve-canvas { touch-action: none; display: block; border-radius: 16px; cursor: crosshair; }
.carve-cover { position: absolute; inset: 0; display: grid; place-items: center; }
.carve-cover .btn { min-width: 220px; }
.look-bar { position: absolute; left: 10%; right: 10%; bottom: 4px; height: 8px; border-radius: 4px; background: var(--raised); overflow: hidden; }
.look-bar span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; animation: shrink 3s linear forwards; }
@keyframes shrink { to { transform: scaleX(0); } }
.pick { width: 100%; max-width: 640px; align-self: stretch; overflow: auto; }
.stage-carve.picking { align-items: flex-start; }
.pick fieldset { border: 0; padding: 0; margin: 0 0 8px; }
.pick legend { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 0; margin-bottom: 4px; }
.pick-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pick label { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border: 2px solid var(--edge); border-radius: 12px; cursor: pointer; font-size: 13px; font-weight: 600; text-align: center; min-height: 44px; }
.pick label:has(input:checked) { border-color: var(--accent); background: var(--raised); }
.pick label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick svg { width: 100%; height: 40px; }
.pick svg .bg { fill: #1E0D03; }
.pick svg .cut { fill: #FFC24A; fill-rule: evenodd; }
.pick svg .line { fill: none; stroke: #FFC24A; stroke-linecap: round; stroke-linejoin: round; }
.compare { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; align-items: end; }
.compare figure { margin: 0; }
.compare canvas { width: 100%; height: auto; display: block; border-radius: 12px; }
.compare figcaption { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-top: 4px; }
.match { font-size: 22px; font-weight: 800; }

/* Lantern Maze */
.maze-canvas { touch-action: none; display: block; border-radius: 12px; }
.pad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 420px; }
.pad .btn { max-width: none; font-size: 24px; min-height: 52px; padding: 4px; }
@media (max-height: 600px) { .pad .btn { min-height: 46px; } }
@media (min-width: 860px) and (min-height: 700px) {
  .controls-maze .pad { grid-template-columns: repeat(3, 64px); grid-template-areas: ". u ." "l d r"; width: auto; }
  .pad .up { grid-area: u; } .pad .left { grid-area: l; } .pad .down { grid-area: d; } .pad .right { grid-area: r; }
}

/* Bat Sequence */
.bat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(100%, 680px); height: 100%; max-height: 600px; }
.bat-btn { --c: #FFD23F; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 3px solid var(--c); border-radius: 16px; background: var(--ground); color: var(--text); font: inherit; font-weight: 800; font-size: 18px; cursor: pointer; padding: 6px; min-height: 0; }
.bat-btn svg { width: min(80%, 240px); height: auto; max-height: 62%; flex: 0 1 auto; min-height: 0; }
.bat-btn svg path { fill: var(--c); transition: transform 120ms; transform-origin: center; transform-box: fill-box; }
.bat-btn .key { font-size: 14px; color: var(--muted); font-weight: 600; }
.bat-btn.flash { background: var(--c); color: var(--ink); border-style: solid; outline: 4px solid var(--text); outline-offset: -8px; }
.bat-btn.flash svg path { fill: var(--ink); transform: scale(1.12, 0.9); }
.bat-btn.flash .key { color: var(--ink); }
.bat-btn.miss { border-style: dashed; }
.bat-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.bat-btn[aria-disabled="true"] { cursor: default; }
.b-gold { --c: #FFD23F; } .b-moss { --c: #5BE59A; } .b-frost { --c: #9FB4FF; } .b-rose { --c: #FF9BD6; }
@media (prefers-reduced-motion: reduce) { .bat-btn svg path { transition: none; } .bat-btn.flash svg path { transform: none; } }

/* Spot the Difference */
.stage-spot { flex-direction: column; gap: 6px; align-items: stretch; }
.scene-wrap { position: relative; flex: 1 1 0; min-height: 0; display: flex; }
.scene { width: 100%; height: 100%; display: block; }
.scene .tag { font: 600 9px "Lexend", system-ui, sans-serif; letter-spacing: 0.06em; fill: #F5F3EA; pointer-events: none; }
#spot-right { cursor: crosshair; touch-action: manipulation; border-radius: 10px; }
#spot-right:focus { outline: none; }
#spot-right:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.scene .hit-found { fill: none; stroke: var(--right); stroke-width: 3; }
.scene .hit-missed { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 6 5; }
.scene .hit-wrong { fill: none; stroke: var(--wrong); stroke-width: 3; stroke-dasharray: 6 5; }
.scene .marker { fill: none; stroke: var(--accent); stroke-width: 2; display: none; }
#spot-right:focus-visible .marker { display: inline; }
@media (min-width: 760px) and (min-aspect-ratio: 5/4) { .stage-spot { flex-direction: row; } }

/* Cipher */
.stage-cipher { flex-direction: column; justify-content: flex-start; align-items: stretch; overflow: auto; }
.code { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin: 4px 0 10px; }
.code-word { display: flex; gap: 4px; }
.tile { display: flex; flex-direction: column; align-items: center; width: clamp(28px, 7.4vw, 46px); border-radius: 8px; background: var(--raised); padding: 4px 0 2px; }
.tile .c { font-size: clamp(18px, 5vw, 28px); font-weight: 800; color: var(--muted); line-height: 1.1; }
.tile .p { font-size: clamp(18px, 5vw, 28px); font-weight: 800; color: var(--accent); line-height: 1.1; min-height: 1.1em; border-top: 2px solid var(--edge); width: 70%; text-align: center; }
.key-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; list-style: none; padding: 0; margin: 0 0 10px; }
.key-list li { border: 2px solid var(--edge); border-radius: 8px; padding: 2px 10px; font-weight: 800; font-size: 18px; }
.key-list li b { color: var(--accent); font-weight: 800; }
.cipher-form { display: flex; flex-wrap: wrap; gap: 8px; max-width: 560px; width: 100%; margin: 0 auto; }
.cipher-form label { flex: 1 1 100%; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.cipher-form input { flex: 1 1 200px; min-width: 0; font: inherit; font-size: 22px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 12px; min-height: 52px; border-radius: 12px; border: 2px solid var(--text); background: var(--ground); color: var(--text); }
.cipher-form .btn { flex: 0 0 auto; }
.cipher-msg { min-height: 1.5em; text-align: center; font-weight: 700; margin: 8px 0 0; }
.alpha { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 2px; max-width: 560px; width: 100%; margin: 0 auto 10px; font-size: 13px; font-weight: 700; text-align: center; color: var(--muted); }
@media (max-height: 600px) { .tile { padding: 2px 0 1px; } .code { margin-bottom: 6px; } .key-list { margin-bottom: 6px; } }
.tile .p.typed { color: var(--text); }
.maze-reveal { width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.answers-scene { max-width: 640px; }
.answers-scene .scene { height: auto; }