* { box-sizing: border-box; }
body { margin: 0; background: #0b101a; color: #f4ebd6; font: 1rem system-ui, sans-serif; }
main { width: min(100%, 1100px); margin: auto; padding: 12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); }
header, .hud, .touch, .touch > div, .actions { display: flex; align-items: center; gap: 8px; }
header, .hud, .touch { justify-content: space-between; }
header { margin-bottom: 8px; flex-wrap: wrap; }
h1 { margin: 0; font: 700 clamp(1.4rem, 4vw, 2.25rem) Georgia, serif; }
small { color: #dfb67a; letter-spacing: .16em; font-size: .66rem; }
button { color: inherit; background: #202d42; border: 1px solid #79849b; border-radius: 6px; min-height: 44px; padding: 0 10px; font: inherit; cursor: pointer; }
button:active, button[aria-pressed="true"] { background: #465b7b; }
button:focus-visible { outline: 2px solid #ffd681; outline-offset: 2px; }
.arena { position: relative; border: 1px solid #776349; overflow: hidden; }
canvas { display: block; width: 100%; }
.hud { position: absolute; top: 2%; inset-inline: 3%; pointer-events: none; }
.hud label { display: grid; gap: 1px; text-shadow: 0 2px 3px #000; font-size: clamp(.7rem, 2vw, 1rem); }
meter { width: min(24vw, 170px); height: 1rem; }
#status { position: absolute; top: max(15%, 40px); inset-inline: 0; width: fit-content; max-width: 90%; margin: auto; padding: .28em .65em; background: #0a101bea; border-radius: 4px; text-align: center; font-size: clamp(.7rem, 2vw, 1rem); pointer-events: none; }
.touch { margin-top: 8px; touch-action: none; user-select: none; }
.touch[hidden] { display: none; }
.touch button { min-width: 44px; min-height: 48px; padding-inline: 7px; touch-action: none; }
.hint { margin: 8px 0; color: #c1cada; font-size: .82rem; }
@media (orientation: landscape) and (max-height: 560px) {
  main { padding-block: 4px; }
  header { margin-bottom: 4px; }
  header small { display: block; font-size: .6rem; }
  .hint { display: none; }
  .arena, .touch { width: min(100%, max(280px, calc((100dvh - 116px) * 1.76))); margin-inline: auto; }
  .touch { margin-top: 4px; }
}

#escape-timer {
  background: #12192a;
  color: #ffe0a1;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: .3em .55em;
  font-size: clamp(.7rem, 2.5vw, 1rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#escape-timer.sealing { color: #ffb4a4; background: #361b22; }