/* LostMan: an arcade cabinet in the phosphor terminal style: HUD on top, maze in the middle, an IRC-style event log underneath. Single dark look on purpose. */
:root {
  --void: #07090c;
  --panel: #0b0f14;
  --rule: #222b34;
  --amber: #ffb547;
  --amber-dim: #9a7038;
  --paper: #f3dcb6;
  --cyan: #6fd3d8;
  --rose: #ff7a7a;
  --display: "VT323", "Courier New", monospace;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--void); color: var(--paper); font: 13px/1.5 var(--mono); overflow: hidden; touch-action: none; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px); }
.cab { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.hud { width: var(--bw, 100%); max-width: 100%; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 8px; font: 22px/1 var(--display); color: var(--amber-dim); letter-spacing: .06em; }
.hud b { display: block; color: var(--amber); font-weight: 400; font-variant-numeric: tabular-nums; text-shadow: 0 0 8px rgba(255,181,71,.4); }
.board { position: relative; flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
canvas { display: block; }
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; pointer-events: none; }
.overlay h1 { font: clamp(44px, 10vw, 72px)/1 var(--display); color: var(--amber); margin: 0; text-shadow: 0 0 16px rgba(255,181,71,.5); }
.overlay p { margin: 0; font: 22px var(--display); color: var(--paper); background: rgba(7,9,12,.8); padding: 2px 10px; }
.overlay .blink { animation: blink 1s steps(1) infinite; color: var(--cyan); }
.overlay small { font: 12px var(--mono); color: var(--amber-dim); background: rgba(7,9,12,.8); padding: 2px 8px; }
@keyframes blink { 50% { opacity: 0; } }
.log { width: var(--bw, 100%); max-width: 100%; height: 4.6em; overflow: hidden; font-size: 12px; color: var(--amber-dim); border-top: 1px solid var(--rule); padding-top: 4px; display: flex; flex-direction: column; justify-content: flex-end; }

.log div { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log .hi { color: var(--cyan); }
.log .bad { color: var(--rose); }
.pad { display: none; grid-template-columns: repeat(3, 54px); grid-template-rows: repeat(2, 44px); gap: 6px; }
.pad button { font: 22px var(--display); color: var(--amber); background: var(--panel); border: 1px solid var(--rule); touch-action: none; }
.pad button:active { background: #1a2028; }
.pad .up { grid-column: 2; }
.pad .left { grid-column: 1; grid-row: 2; } .pad .down { grid-column: 2; grid-row: 2; } .pad .right { grid-column: 3; grid-row: 2; }
@media (pointer: coarse) { .pad { display: grid; } .log { height: 3.2em; } }
@media (prefers-reduced-motion: reduce) { .overlay .blink { animation: none; } }
.back { font-size: 12px; color: var(--amber-dim); flex: none; }
.embed .back { display: none; }