/* Tunnel Rush - presentation. One page, no framework, no external font: the type is whatever the
   system has, in a stack that keeps the wordmark heavy and condensed wherever possible.          */
:root {
  --ink: #f2f0ff;
  --dim: #a8a2c8;
  --edge: rgba(255, 255, 255, 0.14);
  --panel: rgba(10, 8, 24, 0.88);
  --hot: #e0349b;
  --hot2: #f08a24;
  --ok: #3fbf5f;
}
* { box-sizing: border-box; }
/* An id selector that sets `display` beats the user agent's `[hidden] { display: none }`, and the
   symptom is an invisible panel that still swallows every click on the game behind it. #menu,
   #over, #won and #pausemsg all set display:flex, so the override has to be explicit and global.
   tools-harness-page.js checks that every element the code toggles is actually covered by it. */
[hidden] { display: none !important; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #05040d; color: var(--ink);
  font-family: "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
body { touch-action: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#app { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---- heads-up display -------------------------------------------------------------------- */
#hud {
  position: absolute; inset: 0 0 auto 0; display: flex; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) 18px 0 18px;
  pointer-events: none; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}
#hud-left { min-width: 0; }
#hud-right { text-align: right; }
#ofhundred { opacity: 0.55; }
#levelnote { opacity: 0.7; }
#metres { font-size: clamp(30px, 6vw, 58px); font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
#metres .unit, #bestline .unit { font-size: 0.42em; font-weight: 600; opacity: 0.72; margin-left: 2px; }
#levelline { margin-top: 4px; font-size: clamp(12px, 2vw, 16px); font-weight: 600; color: var(--dim); letter-spacing: 0.06em; text-transform: uppercase; }
#bestline { font-size: clamp(13px, 2.2vw, 19px); font-weight: 700; color: var(--dim); }
#diffline { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); opacity: 0.75; margin-top: 3px; }
#fps { font-size: 11px; color: var(--dim); opacity: 0.6; margin-top: 3px; font-variant-numeric: tabular-nums; }

#shapename {
  position: absolute; left: 50%; top: 14%; transform: translateX(-50%);
  font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--dim); pointer-events: none; opacity: 0.8;
}
#levelbanner {
  position: absolute; left: 50%; top: 38%; transform: translateX(-50%);
  text-align: center; pointer-events: none;
  animation: pop 900ms ease-out both;
}
#levelbanner strong { display: block; font-size: clamp(28px, 6vw, 54px); font-weight: 800; letter-spacing: 0.04em; }
#levelbanner em { display: block; font-style: normal; font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--dim); margin-top: 6px; }
@keyframes pop { 0% { opacity: 0; transform: translateX(-50%) scale(0.86); } 22% { opacity: 1; transform: translateX(-50%) scale(1); } 78% { opacity: 1; } 100% { opacity: 0; } }
body.reduce #levelbanner { animation: none; }

#pausemsg {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  background: rgba(5, 4, 13, 0.7); backdrop-filter: blur(3px);
}
#pausemsg strong { font-size: clamp(30px, 7vw, 62px); letter-spacing: 0.2em; }
#pausemsg em { font-style: normal; color: var(--dim); letter-spacing: 0.1em; }

/* ---- menu, panels ------------------------------------------------------------------------- */
#menu, #over, #won {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center;
  padding: 24px; background: radial-gradient(70% 70% at 50% 45%, rgba(6, 4, 18, 0.5), rgba(4, 3, 11, 0.93));
}
#wordmark { font-size: clamp(40px, 11vw, 104px); font-weight: 900; letter-spacing: -0.03em; line-height: 0.92; }
#wordmark span { display: block; color: var(--hot); }
#tagline { margin: 2px 0 14px; color: var(--dim); font-size: clamp(13px, 2.4vw, 17px); max-width: 30ch; }
#diffpick, #optdiff { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
button {
  font: inherit; font-weight: 700; color: var(--ink); cursor: pointer;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--edge);
  border-radius: 10px; padding: 11px 20px;
}
button:hover { background: rgba(255, 255, 255, 0.16); }
button:focus-visible { outline: 2px solid var(--hot2); outline-offset: 2px; }
button.diff { padding: 9px 16px; font-size: 14px; letter-spacing: 0.04em; }
button.diff[aria-pressed="true"] { background: var(--hot); border-color: var(--hot); color: #fff; }
button.ghost { background: transparent; }
#play, #again, #wonagain {
  background: var(--hot); border-color: var(--hot); color: #fff;
  padding: 14px 42px; font-size: 19px; letter-spacing: 0.06em; margin-top: 6px;
}
#play:hover, #again:hover, #wonagain:hover { background: #f04fae; }
.hint { color: var(--dim); font-size: 13px; margin: 4px 0; }
.byline { color: var(--dim); opacity: 0.6; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 18px; }
kbd {
  display: inline-block; padding: 1px 6px; border: 1px solid var(--edge);
  border-bottom-width: 2px; border-radius: 5px; font: inherit; font-size: 0.9em;
  background: rgba(255, 255, 255, 0.07);
}
.panel { max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.panel h2 { margin: 0; font-size: clamp(22px, 5vw, 34px); letter-spacing: 0.02em; }
.bigscore { margin: 2px 0; font-size: clamp(38px, 9vw, 72px); font-weight: 900; line-height: 1; }
.bigscore .unit { font-size: 0.36em; opacity: 0.7; margin-left: 3px; }
#over-detail, #won-detail { margin: 0; color: var(--dim); }
#won h2 { color: var(--ok); }

#toolbar { position: absolute; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; gap: 8px; }
#toolbar button { padding: 8px 14px; font-size: 13px; font-weight: 600; }

/* ---- sheets -------------------------------------------------------------------------------
   NOTE: nothing in this file may set `display` on .sheet or on any class a hidden element also
   carries. `[hidden]` loses to any class rule that sets display, and the symptom is an invisible
   panel that still swallows every click. The sheet is laid out with position/opacity only.     */
.sheet {
  position: absolute; inset: 0; overflow-y: auto; z-index: 5;
  background: rgba(4, 3, 11, 0.9); backdrop-filter: blur(6px);
  padding: 28px 18px 60px;
}
.sheet[hidden] { display: none !important; }
.sheet-body {
  max-width: 720px; margin: 0 auto; background: var(--panel);
  border: 1px solid var(--edge); border-radius: 16px; padding: 24px 26px 30px;
}
.sheet h2 { margin: 0 0 14px; font-size: 26px; }
.sheet h3 { margin: 22px 0 8px; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hot2); }
.sheet p, .sheet li { line-height: 1.55; font-size: 15px; color: #ded9f5; }
.sheet ul { padding-left: 20px; }
.sheet li { margin-bottom: 6px; }
.sheet strong { color: #fff; }
.sheet .note { color: var(--dim); font-size: 13px; }
.sheet hr { border: 0; border-top: 1px solid var(--edge); margin: 18px 0; }
.sheet label { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: 15px; cursor: pointer; }
.sheet label input[type="checkbox"] { width: 18px; height: 18px; flex: none; accent-color: var(--hot); }
.seedline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; font-size: 14px; }
.seedline code { background: rgba(255, 255, 255, 0.09); padding: 3px 9px; border-radius: 6px; font-size: 13px; }
.seedline button { padding: 7px 13px; font-size: 13px; }
.seedline input[type="number"], .seedline select {
  font: inherit; font-size: 14px; color: var(--ink); padding: 6px 9px;
  background: rgba(255, 255, 255, 0.09); border: 1px solid var(--edge); border-radius: 8px;
}
.seedline input[type="number"] { width: 82px; }
#copystatus, #clearstatus { font-size: 13px; color: var(--ok); }
.sheet .close { margin-top: 24px; }

/* the high-contrast option only affects the page chrome; the tunnel's own palette is swapped in
   the renderer, where the colours actually live */
body.contrast { --dim: #d6d2f0; --edge: rgba(255, 255, 255, 0.3); --panel: rgba(2, 1, 8, 0.96); }

@media (max-width: 620px) {
  #toolbar { left: 14px; right: 14px; justify-content: center; }
  .sheet-body { padding: 20px 16px 24px; }
  #hud { padding-left: 12px; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #levelbanner { animation: none; }
}