/* Riddle10 Maze (v41): the game page. One full-screen view, a slim bar on top, the fork card under it, one message line, tip
   lines above the pad, the walking pad bottom left and Paint bottom right, all inside the safe area. No site header, footer or
   tab bar. Colours here are the maze's own; the player colours live only in maze.js and never reach any page UI. */
:root {
  --mz-bg: #0a1210; --mz-panel: #15201d; --mz-panel-2: #1f2d28; --mz-ink: #e6eee8; --mz-ink-2: #9fb0a6; --mz-line: #2a3a34;
  --mz-action: #f2bd2c; --mz-action-ink: #1e1600; --mz-ok: #7ec0e6; --mz-sign: #c99363; --mz-sign-ink: #2b1a0e;
  --mz-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mz-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mz-top: env(safe-area-inset-top, 0px); --mz-right: env(safe-area-inset-right, 0px); --mz-bottom: env(safe-area-inset-bottom, 0px); --mz-left: env(safe-area-inset-left, 0px);
  --mz-tap: 48px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
body.mz-body { margin: 0; background: var(--mz-bg); color: var(--mz-ink); font: 400 16px/1.4 var(--mz-body); overflow: hidden; position: fixed; inset: 0; width: 100%;
  -webkit-tap-highlight-color: transparent; touch-action: none; }
button { font: inherit; color: inherit; }
.mz-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ----- the app: bar on top, the view fills the rest ----- */
.mz-app { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--mz-bg); }
.mz-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 48px; padding: calc(var(--mz-top) + 4px) max(10px, var(--mz-right)) 4px max(10px, var(--mz-left));
  background: var(--mz-panel); border-bottom: 1px solid var(--mz-line); font: 600 15px/1.3 var(--mz-body); }
.mz-bar .mz-grow { min-width: 0; display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; justify-content: center; text-align: center; }
.mz-bar .mz-region { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mz-bar .mz-clock { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .02em; }
.mz-bar .mz-count { color: var(--mz-ink-2); white-space: nowrap; }
.mz-bar .mz-closing { color: var(--mz-action); font-variant-numeric: tabular-nums; }
.mz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--mz-tap); min-width: var(--mz-tap); padding: 0 14px; border-radius: 12px;
  border: 1.5px solid #ffffff44; background: #ffffff10; color: var(--mz-ink); font: 700 15px/1 var(--mz-body); cursor: pointer; }
.mz-btn:active { background: #ffffff2a; }
.mz-btn.mz-primary { background: var(--mz-action); color: var(--mz-action-ink); border-color: transparent; }
.mz-btn.mz-primary:active { filter: brightness(.95); }
.mz-btn.mz-glow { animation: mz-glow 1.6s ease 1; }
@keyframes mz-glow { 30% { box-shadow: 0 0 0 6px #f2bd2c66; } }
.mz-btn:disabled { opacity: .5; cursor: default; }
@media (max-width: 389px) { .mz-bar .mz-region-name { display: none; } }
@media (max-width: 479px) { .mz-bar { font-size: 14px; gap: 4px; } .mz-bar .mz-btn { padding: 0 10px; } }
@media (max-height: 430px) and (orientation: landscape) { .mz-bar { min-height: 40px; padding-top: calc(var(--mz-top) + 2px); padding-bottom: 2px; } .mz-bar .mz-btn { min-height: 36px; } }

/* ----- the view ----- */
.mz-view { position: relative; overflow: hidden; background: #0b1618; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; }
.mz-view:focus-visible { box-shadow: inset 0 0 0 3px #fff; }
.mz-view canvas.mz-fp { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: auto; }
.mz-view.is-blur canvas.mz-fp { filter: blur(6px) brightness(.7); }
@media (prefers-reduced-motion: no-preference) { .mz-view canvas.mz-fp { transition: filter .25s ease; } }

/* the player badge (kept from the prototype): "You are Player N" with your own colour and shape */
.mz-you { position: absolute; left: max(10px, var(--mz-left)); top: 10px; display: inline-flex; align-items: center; gap: 7px; background: #0d1513cc; color: #fff; border: 2px solid #ffffff55;
  border-radius: 999px; padding: 4px 12px 4px 8px; font: 700 14px var(--mz-body); pointer-events: none; }
.mz-you svg { width: 20px; height: 20px; }

/* the fork card: under the bar, centred. "Fork 41 of 120" + mark + ▶, or the letter list */
.mz-fork { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); max-width: calc(100% - 140px); background: #0d1513ee; color: #fff; border: 2px solid #ffffff66;
  border-radius: 16px; padding: 6px 10px 6px 14px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: center;
  font: 800 clamp(18px, 4.6vw, 20px)/1.35 var(--mz-display); z-index: 4; }
.mz-fork.is-dead { animation: mz-shake .3s ease; border-color: var(--mz-action); }
@keyframes mz-shake { 20% { transform: translateX(calc(-50% - 7px)); } 40% { transform: translateX(calc(-50% + 6px)); } 60% { transform: translateX(calc(-50% - 4px)); } 80% { transform: translateX(calc(-50% + 2px)); } }
@media (prefers-reduced-motion: reduce) { .mz-fork.is-dead { animation: none; outline: 3px solid var(--mz-action); } }
.mz-fork .mz-fork-no { white-space: nowrap; }
.mz-fork .mz-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #ffffff18; }
.mz-fork .mz-mark svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mz-fork .mz-play { min-width: 56px; min-height: var(--mz-tap); border-radius: 12px; background: var(--mz-action); color: var(--mz-action-ink); border: 0; font: 800 22px/1 var(--mz-display); cursor: pointer; }
.mz-fork .mz-letters { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-variant-numeric: tabular-nums; }
.mz-fork .mz-letters b { display: inline-flex; align-items: center; gap: 4px; }
.mz-fork .mz-letters b i { font-style: normal; display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 7px; background: var(--mz-sign); color: var(--mz-sign-ink); }
.mz-fork .mz-letters b.is-past { opacity: .45; }
.mz-fork .mz-letters .mz-tick { color: var(--mz-ok); font-size: 22px; }
.mz-fork .mz-dead { width: 100%; text-align: center; font: 600 16px/1.35 var(--mz-body); color: #ffe7b0; }
@media (max-height: 430px) and (orientation: landscape) { .mz-fork { max-width: 60%; } }
@media (max-width: 420px) { .mz-fork { max-width: calc(100% - 20px); top: 86px; } .mz-you { top: 10px; } }

/* one message line, top of the view, one message at a time */
.mz-msg { position: absolute; left: 50%; top: 104px; transform: translateX(-50%); max-width: calc(100% - 24px); background: #0d1513e6; color: #fff; border-radius: 999px; padding: 8px 16px;
  font: 500 16px/1.35 var(--mz-body); text-align: center; pointer-events: none; opacity: 0; z-index: 3; }
.mz-msg.on { opacity: 1; }
.mz-msg.is-stay { border: 1.5px solid #ffffff66; }
@media (prefers-reduced-motion: no-preference) { .mz-msg { transition: opacity .25s; } }
@media (max-width: 420px) { .mz-msg { top: 150px; } }

/* tip lines of the first 60 seconds: bottom, above the pad */
.mz-tip { position: absolute; left: 50%; bottom: calc(var(--mz-bottom) + 150px); transform: translateX(-50%); max-width: calc(100% - 24px); background: #f2bd2cee; color: #1e1600; border-radius: 12px;
  padding: 8px 14px; font: 600 16px/1.35 var(--mz-body); text-align: center; pointer-events: none; opacity: 0; z-index: 3; }
.mz-tip.on { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .mz-tip { transition: opacity .25s; } }
.mz-view:not(.is-touch) .mz-tip { bottom: 92px; }

/* the walking pad (touch only): 120 px, bottom left; a touch anywhere in the lower-left 45% starts it under the thumb */
.mz-pad { position: absolute; left: max(18px, var(--mz-left)); bottom: max(28px, calc(var(--mz-bottom) + 14px)); width: 120px; height: 120px; border-radius: 50%; background: #ffffff1f; border: 2px solid #ffffff55;
  display: none; touch-action: none; pointer-events: none; }
.mz-pad .mz-knob { position: absolute; left: 34px; top: 34px; width: 48px; height: 48px; border-radius: 50%; background: #ffffffb0; }
.mz-view.is-touch .mz-pad { display: block; }
.mz-padzone { position: absolute; left: 0; bottom: 0; width: 45%; height: 45%; touch-action: none; }
.mz-view:not(.is-touch) .mz-padzone { display: none; }

/* the tool buttons: Paint bottom right; the checkpoint button above it; the act button (station or wall) */
.mz-tools { position: absolute; right: max(18px, var(--mz-right)); bottom: max(28px, calc(var(--mz-bottom) + 14px)); display: grid; gap: 8px; justify-items: end; z-index: 2; }
.mz-tools .mz-btn { background: #0d1513c8; border-color: #ffffff66; min-height: 56px; min-width: 56px; border-radius: 28px; font-size: 16px; }
.mz-tools .mz-btn svg { width: 20px; height: 24px; }
.mz-tools .mz-btn[aria-pressed="true"] { background: var(--mz-action); color: var(--mz-action-ink); border-color: #fff; }
.mz-tools .mz-btn kbd { font: 700 11px var(--mz-body); background: #fff; color: #0d1513; border-radius: 6px; padding: 0 4px; }
.mz-view.is-touch .mz-tools kbd { display: none; }
.mz-ret { position: relative; }
.mz-ret::after { content: ""; position: absolute; inset: -3px; border-radius: 32px; border: 3px solid #fff; clip-path: inset(0 100% 0 0); }
.mz-ret.hold::after { clip-path: inset(0 0 0 0); transition: clip-path .6s linear; }
.mz-act { position: absolute; left: 50%; bottom: max(28px, calc(var(--mz-bottom) + 14px)); transform: translateX(-50%); min-height: 52px; min-width: 150px; padding: 0 20px; border-radius: 26px;
  background: var(--mz-action); color: var(--mz-action-ink); border: 0; font: 700 17px/1.2 var(--mz-body); cursor: pointer; box-shadow: 0 8px 20px -8px #000a; z-index: 2; }
.mz-act:disabled { background: #59635e; color: #e8ece6; box-shadow: none; }
.mz-view.is-touch .mz-act { left: auto; right: max(18px, var(--mz-right)); transform: none; bottom: max(96px, calc(var(--mz-bottom) + 82px)); }

/* sky view: the small map top right; a tap opens the big map */
.mz-skybtn { position: absolute; right: max(10px, var(--mz-right)); top: 10px; width: 64px; height: 64px; padding: 0; border-radius: 14px; border: 2px solid #ffffff80; background: #0a1210; overflow: hidden; cursor: pointer; z-index: 4; }
.mz-skybtn canvas { width: 100%; height: 100%; display: block; }
.mz-skybig { position: absolute; inset: 0; z-index: 20; background: #0a1210f4; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 16px; }
.mz-skybig canvas { width: min(88vw, 60vh, 560px); height: min(88vw, 60vh, 560px); border-radius: 14px; background: #0a1210; display: block; }
.mz-skybig .mz-skyclose { position: absolute; top: calc(var(--mz-top) + 12px); right: max(14px, var(--mz-right)); }
.mz-skybig .mz-skynote { color: var(--mz-ink-2); font-size: 15px; text-align: center; max-width: 420px; margin: 0; }
.mz-skybig .mz-skykey { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; color: var(--mz-ink-2); font-size: 14px; }
.mz-skybig .mz-skykey b { color: #fff; font-weight: 800; }

/* ----- cards over the view: level, station, more, help, restart, finish, closed, replaced, offline ----- */
.mz-over { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: #0a1210c8; padding: 12px; overflow: auto; }
.mz-card { width: min(520px, 100%); background: var(--mz-panel); color: var(--mz-ink); border-radius: 18px; padding: 16px; display: grid; gap: 12px; box-shadow: 0 20px 40px -18px #000; max-height: 100%; overflow: auto; }
.mz-card h2 { font: 800 22px/1.25 var(--mz-display); margin: 0; }
.mz-card p { margin: 0; }
.mz-card .mz-kicker { font: 700 12px var(--mz-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mz-ink-2); }
.mz-card .mz-muted { color: var(--mz-ink-2); font-size: 15px; }
.mz-card .mz-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mz-card .mz-row.mz-end { justify-content: flex-end; }
.mz-card .mz-head { display: flex; align-items: center; gap: 10px; }
.mz-card .mz-head .mz-grow { flex: 1; min-width: 0; }
.mz-card .mz-head .mz-mark { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #ffffff14; flex: none; }
.mz-card .mz-head .mz-mark svg { width: 24px; height: 24px; }
.mz-mark svg { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mz-skip { min-width: var(--mz-tap); min-height: var(--mz-tap); border-radius: 12px; border: 1.5px solid #ffffff55; background: #ffffff10; color: #fff; font: 800 22px/1 var(--mz-display); cursor: pointer; }
.mz-level .mz-game { background: #0a0e1a; border-radius: 14px; padding: 8px; }
.mz-level .pl-game.is-challenge .pl-intro { color: #b8b2a5; font-size: 14px; margin-bottom: 8px; }
.mz-level .pl-stage { min-height: 200px; }
.mz-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 16px; line-height: 1.4; }
.mz-list li { display: flex; gap: 10px; align-items: flex-start; }
.mz-list kbd { font: 700 13px var(--mz-body); background: #ffffff1a; border: 1px solid #ffffff33; border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.mz-keys { width: 100%; border-collapse: collapse; font-size: 15px; }
.mz-keys td { padding: 5px 6px; border-top: 1px solid var(--mz-line); vertical-align: top; }
.mz-keys td:first-child { white-space: nowrap; font-weight: 700; }
.mz-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: var(--mz-tap); padding: 4px 0; border-top: 1px solid var(--mz-line); }
.mz-switch .mz-btn { min-width: 72px; }
.mz-code { font: 800 clamp(22px, 7vw, 30px)/1.2 var(--mz-display); letter-spacing: .12em; text-align: center; font-variant-numeric: tabular-nums; }
.mz-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mz-stats div { background: var(--mz-panel-2); border-radius: 12px; padding: 8px 12px; }
.mz-stats small { display: block; color: var(--mz-ink-2); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.mz-stats b { font: 800 22px/1.2 var(--mz-display); font-variant-numeric: tabular-nums; }
.mz-place { font: 800 clamp(34px, 9vw, 48px)/1.1 var(--mz-display); }
.mz-marks { display: flex; gap: 10px; flex-wrap: wrap; }
.mz-marks a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--mz-tap); padding: 0 12px 0 8px; border-radius: 12px; border: 1.5px solid #ffffff33; background: #ffffff10; color: #fff; text-decoration: none; font: 800 18px/1 var(--mz-display); }
.mz-marks a svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mz-copytext { background: var(--mz-panel-2); border-radius: 12px; padding: 10px 12px; font-size: 14px; color: var(--mz-ink-2); word-break: break-word; }
.mz-pic { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font: 800 30px/1 var(--mz-display); padding: 10px 0; }
.mz-pic .mz-mark { width: 56px; height: 56px; border-radius: 14px; }
.mz-pic .mz-mark svg { width: 34px; height: 34px; }
.mz-pic .mz-sign { display: inline-grid; place-items: center; min-width: 56px; height: 56px; padding: 0 12px; border-radius: 12px; background: var(--mz-sign); color: var(--mz-sign-ink); font-size: 34px; }
.mz-pic .mz-door { display: inline-grid; place-items: center; width: 56px; height: 68px; border: 3px solid #fff; border-bottom: 0; border-radius: 28px 28px 0 0; position: relative; }
.mz-pic .mz-door span { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: var(--mz-sign); color: var(--mz-sign-ink); font-size: 18px; border-radius: 6px; padding: 0 6px; line-height: 1.3; }
.mz-pic .mz-arrow { color: var(--mz-ink-2); }
.mz-pic .mz-tickbig { color: var(--mz-ok); font-size: 40px; }
/* on a phone the whole picture stays on one line: mark → ✓ → B → doorway */
@media (max-width: 420px) {
  .mz-pic { gap: 6px; font-size: 22px; }
  .mz-pic .mz-mark { width: 44px; height: 44px; border-radius: 11px; } .mz-pic .mz-mark svg { width: 27px; height: 27px; }
  .mz-pic .mz-sign { min-width: 44px; height: 44px; padding: 0 8px; font-size: 27px; }
  .mz-pic .mz-door { width: 44px; height: 54px; border-radius: 22px 22px 0 0; }
  .mz-pic .mz-tickbig { font-size: 32px; }
}

/* loading and error full screens */
.mz-full { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: var(--mz-bg); padding: 20px; text-align: center; }
.mz-full .mz-card { background: transparent; box-shadow: none; }
.mz-full h2 { font: 800 24px/1.3 var(--mz-display); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mz-msg, .mz-tip, .mz-view canvas.mz-fp { transition: none; }
  .mz-btn.mz-glow { animation: none; box-shadow: 0 0 0 4px #f2bd2c66; }
}
/* the player's own text size: at 200 % the counts move into More (maze.js watches the bar's height) */
.mz-bar.is-tight .mz-count, .mz-bar.is-tight .mz-gems { display: none; }