/* Corn Maze (maze.html, mazeapp.js), on top of style.css: the slide puzzle's one-screen layout (.slide-app:
   head, status, stage, actions; More panel; size pills), so the page never scrolls, and goes field-left,
   controls-right on wide screens and TV. As the approved mockups (previews/games/corn-maze). */
.mz-app [hidden] { display: none !important; }
.mz-app .levels .btn { padding: 10px 14px; }
.mz-status .count span:first-child { color: var(--primary); }

/* the field: as big as the stage allows, keeping the maze's shape (--mw x --mh cells) */
.mz-field {
  --mw: 9; --mh: 13; position: relative; aspect-ratio: var(--mw) / var(--mh);
  width: min(100cqw, calc(100cqh * var(--mw) / var(--mh))); border-radius: 14px; overflow: hidden;
  border: 3px solid color-mix(in srgb, var(--pw-ink) 55%, #6b4a1f); box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; outline: none; cursor: pointer;
}
.mz-field svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the way walked: a soft unbroken line on a dark edge, so it reads on every season's painted path
   (dots got lost among the pebbles); cranberry by day, cream at night */
.mz-trail, .mz-trail-case { stroke-linecap: round; stroke-linejoin: round; }
.mz-trail-case { stroke: var(--pw-ink); stroke-opacity: .45; stroke-width: .2; }
.mz-trail { stroke: var(--pw-cranberry); stroke-opacity: .9; stroke-width: .11; }
.mz-field.night .mz-trail { stroke: var(--pw-cream); }
.mz-glow { stroke: var(--pw-honey); stroke-width: .38; stroke-linecap: round; stroke-linejoin: round; opacity: 0;
  filter: drop-shadow(0 0 .2px var(--pw-honey)); }
.mz-glow.on { animation: mz-glow 3.2s ease-out forwards; }
@keyframes mz-glow { 0% { opacity: 0; } 15% { opacity: .85; } 70% { opacity: .7; } 100% { opacity: 0; } }
.mz-night { fill: #06100D; fill-opacity: .55; }
.mz-char { position: absolute; transform: translate(-50%, -100%); pointer-events: none; z-index: 2;
  transition: left .11s linear, top .11s linear; }
.mz-char.instant { transition: none; }
.mz-lantern { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle, rgba(255, 214, 120, .7), rgba(255, 190, 80, .22) 45%, transparent 70%); }
.mz-field.solved { border-color: var(--pw-honey);
  box-shadow: 0 0 0 4px var(--pw-honey), 0 0 28px 6px color-mix(in srgb, var(--pw-honey) 55%, transparent); animation: glow 1.6s ease-in-out 2; }
/* keys in use: a clear ring on the field while it has focus */
body.keys .mz-field:focus { outline: 4px solid var(--focus); outline-offset: 4px; }

.mz-note { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); z-index: 6; margin: 0; padding: 8px 14px; border-radius: 18px;
  max-width: calc(100% - 16px); width: max-content; text-align: center; background: var(--surface); color: var(--ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3); font-size: 14px; pointer-events: none; }

.mz-actions { flex-direction: column; align-items: stretch; gap: 10px; flex-wrap: nowrap; }
.mz-tools { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.mz-tools .btn { padding: 10px 14px; }
body.keys .mz-app .btn:focus, body.keys .mz-app summary:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.mz-done { position: static; margin: 0; padding: 14px 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); max-width: none; }
.mz-done h2 { margin: 0; font-size: 26px; }
.mz-done p { margin: 4px 0 0; }
.mz-done-actions { margin: 12px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.mz-done-actions .btn { text-decoration: none; display: inline-flex; align-items: center; }

@media (orientation: landscape) and (min-aspect-ratio: 5/4) {
  .mz-tools { justify-content: flex-start; }
}
@media (orientation: landscape) and (min-aspect-ratio: 5/4) and (max-height: 500px) {
  .mz-app .slide-status .count { font-size: 18px; }
  .mz-done { padding: 8px 12px; }
  .mz-done h2 { font-size: 21px; }
  .mz-done p { font-size: 14px; line-height: 1.3; margin-top: 0; }
  .mz-done-actions { margin-top: 8px; gap: 6px; flex-wrap: nowrap; }
  .mz-done-actions .btn, .mz-tools .btn { min-height: 36px; padding: 6px 11px; font-size: 13px; white-space: nowrap; }
}
/* TV (body.tv, from the app's tvplay.js): sized in vh/vw so 1920x1080 and Fire TV's 960x540 look the same;
   no text under 2.25vh (12 px at 960x540, 24 px at 1080p: readable across a room) */
body.tv .mz-app { grid-template: "stage head" auto "stage status" auto "stage actions" auto "stage ." minmax(0, 1fr)
                  / minmax(0, 1fr) 17vw; column-gap: 1.8vw; row-gap: 1.2vh; }
body.tv .mz-app .slide-head .brand { font-size: 2.25vh; padding: .4vh 0; }
body.tv .mz-app .slide-head h1 { font-size: 3.4vh; }
body.tv .mz-app .more summary { font-size: 2.25vh; min-height: 4.2vh; min-width: 0; padding: .9vh 1.6vh; }
body.tv .mz-app .levels { gap: .8vh; }
body.tv .mz-app .levels .btn, body.tv .mz-tools .btn, body.tv .mz-done-actions .btn { font-size: 2.25vh; padding: 1.1vh 1.6vh; min-height: 4.8vh; min-width: 0; }
body.tv .mz-app .count { font-size: 2.4vh; }
body.tv .mz-tools { justify-content: flex-start; gap: .8vh; }
body.tv .mz-app .btn:focus, body.tv .mz-app summary:focus { outline: 4px solid var(--focus); outline-offset: 4px; }
body.tv .mz-app .btn:focus:not(:disabled) { background: var(--focus); border-color: var(--focus); color: var(--on-focus); }
body.tv .mz-app .more-panel, body.tv .mz-app .more-panel .btn { font-size: 2.25vh; }
body.tv .mz-note { font-size: 2.25vh; padding: .8vh 1.4vh; }
body.tv .mz-done { padding: 1.4vh 1.8vh; }
body.tv .mz-done h2 { font-size: 2.6vh; }
body.tv .mz-done p { font-size: 2.25vh; }
body.tv .mz-done-actions { gap: .8vh; margin-top: 1.2vh; }
@media (prefers-reduced-motion: reduce) {
  .mz-char { transition: none; }
  .mz-glow.on { animation: none; opacity: .8; }
  .mz-field.solved { animation: none; }
}