/* "modern reset" */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Increase line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

/* ============================================================
   spaceworm — three layers: #bg (plate) → #space (three.js) → #worm (svg)
   ============================================================ */
html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background: #000 var(--plate-url, url(assets/bg-75.webp)) center / cover; /* --plate-url: CDN or local, set in index.html */
  cursor: crosshair;
  /* animation: 372s infinite freakout; */
  /* animation-play-state: paused; */
}

body ::selection,
body::selection {
  background: 0 0;
}

/* z=1 — the plate. Same slow zoom as before. max-width:100% from the reset must not clip it. */
#bg {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: max(104vw, 104vh);
  height: max(104vw, 104vh);
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  opacity: 0.825;
  transform: translate(-50%, -50%) scale(1.125);
  animation: 320s linear infinite zoom;
  will-change: transform;
}

@keyframes zoom {
  0%   { transform: translate(-50%, -50%) scale(1.125); }
  25%  { transform: translate(-50%, -50%) scale(1.8); }
  50%  { transform: translate(-50%, -50%) scale(2.6); }
  75%  { transform: translate(-50%, -50%) scale(3.4); }
  100% { transform: translate(-50%, -50%) scale(4); }
}

/* z=2 — the one WebGL canvas. Receives all pointer input (orbit / zoom / pan). */
#space {
  position: fixed;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* z=3 — the worm. Inert to input; SVG user units = CSS px. */
#worm {
  position: fixed;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  shape-rendering: optimizespeed;
}

#worm path {
  /* = max(2svw, 5svh) × WORM_SCALE (src/sim/worm.js); ?dev panel sets --worm-stroke; --worm-bite is the gulp pulse */
  stroke-width: calc(var(--worm-stroke, max(1.5svw, 3.75svh)) * var(--worm-bite, 1) * var(--worm-grow, 1));
}

/* stage 4: the flock — half-size worms */
#worm path.flock {
  stroke-width: calc(var(--worm-stroke, max(1.5svw, 3.75svh)) * 0.5); /* babies don't gulp or grow */
}

/* z=4 — the Super Mario World status bar (src/view/hud.js). Sprites are cut from the SNES sheets by
   background-position; every element carries bare SOURCE-pixel numbers in --sx/--sy/--sw/--sh and all
   the scaling maths lives here: --u is the length of ONE source pixel, so the whole HUD rescales with
   zero JS. `pixelated` keeps the SNES art crisp. */
/* #hud {
  --k: 3;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(18px * var(--k));
  padding-top: calc(7px * var(--k));
  pointer-events: none;
} */

#hud {
  --u: 2px; /* fallback where CSS round() is missing (pre-2023 browsers): the old 2 / 3 / 4 steps below */
  --u-step: 1px; /* snap --u to whole DEVICE pixels: 1 CSS px on 1x screens, finer on dense ones (below) */
  --gutter: max(8px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  /* the SMW strip: glyphs scale with --u, only the gaps stretch, and never wider than 300 source px */
  width: min(100% - 2 * var(--gutter), 300 * var(--u));
  margin-inline: auto;
  display: grid;
  /* item box dead centre, as in SMW. max-content means a tight phone lets the box drift a few px
     left rather than squashing the right-hand cluster */
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  column-gap: calc(6 * var(--u));
  padding-top: calc(env(safe-area-inset-top, 0px) + 4 * var(--u));
  pointer-events: none;
}
@media (min-width: 900px) { #hud { --u: 3px; } }
@media (min-width: 1800px) { #hud { --u: 4px; } }
@media (min-resolution: 2dppx) { #hud { --u-step: 0.5px; } }
@media (min-resolution: 3dppx) { #hud { --u-step: calc(1px / 3); } }

/* The fluid scale: the SMALLEST of what fits across (the bar's content needs ~176 source px), SNES
   proportion (a 256 px wide screen — floored at 2px so a phone stays legible), and SNES height (a
   224-line screen, which stops a landscape phone drowning in HUD). Snapped down to --u-step, clamped
   to 1–5 px. */
@supports (width: round(down, 1px, 1px)) {
  #hud {
    --u: clamp(1px, round(down, min((100vw - 2 * var(--gutter)) / 176, max(100vw / 256, 2px), 100svh / 224), var(--u-step)), 5px);
  }
}

#hud i {
  display: block;
  flex: none;
  width: calc(var(--sw) * var(--u));
  height: calc(var(--sh) * var(--u));
  background-image: var(--hud-sheet, url(assets/snes-smw-hud.png)); /* CDN or local, set in index.html */
  background-repeat: no-repeat;
  background-size: calc(390 * var(--u)) calc(226 * var(--u));
  background-position: calc(var(--sx) * var(--u) * -1) calc(var(--sy) * var(--u) * -1);
  image-rendering: pixelated;
}
/* beats `#hud i { display: block }`, which would otherwise defeat the hidden attribute */
#hud i[hidden] { display: none; }

#hud i.coin {
  background-image: var(--coin-sheet, url(assets/snes-smw-coin.png));
  background-size: calc(182 * var(--u)) calc(300 * var(--u));
}

/* the four spin frames are different widths — a fixed box keeps the digits beside it from jiggling */
#hud .coinbox {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(16 * var(--u));
  height: calc(25 * var(--u));
}
#hud .mt-25 { margin-top: 25px; }
/* Every offset is in --u now, so rows stay aligned at every scale (the old fixed 10/12px margins drifted
   as --k changed). Blocks are centred on the item box by the grid's align-items. */
#hud .block { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u)); }
#hud .name { justify-self: start; } /* "× 9" centred under the name, the way SMW sits it under MARIO */
#hud .time { align-items: flex-end; } /* digits right-align under TIME as the countdown loses a digit */
#hud .tally { align-items: flex-end; } /* "× 67" over "65450", right edges together, as in SMW */
/* right of the box: TIME a few source px off it, the coin tally flush right */
#hud .cluster {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(6 * var(--u));
  padding-left: calc(8 * var(--u));
}
#hud .cluster > .line { gap: calc(3 * var(--u)); } /* the coin to the tally */
#hud .line { display: flex; align-items: center; gap: calc(1 * var(--u)); }
#hud .word { display: flex; }
#hud .num { display: flex; justify-content: flex-end; }

/* the gulp pop when a mushroom lands in the box — app.js tweens --pop */
#hud i.box { transform: scale(var(--pop, 1)); transform-origin: center; }

@keyframes freakout {
  0%, 100%, 23%, 28%, 32% { filter: invert(0) hue-rotate(0); }
  24% { filter: invert(0) hue-rotate(60deg); }
  25% { filter: invert(0) hue-rotate(180deg); }
  26% { filter: invert(0) hue-rotate(270deg); }
  27% { filter: invert(0) hue-rotate(360deg); }
  29%, 31% { filter: invert(0.5) hue-rotate(0); }
  30% { filter: invert(1) hue-rotate(0); }
}

/* ?dev mode only — GSDevTools scrubber, tweak panel, visible cursor */
#devpanel { position: fixed; top: 8px; left: 8px; z-index: 10; display: grid; gap: 4px; padding: 8px 10px; background: rgba(0, 0, 0, .6); color: #ddd; font: 12px/1.2 system-ui, sans-serif; border-radius: 6px; }
#devpanel label { display: grid; grid-template-columns: 110px 140px 48px; align-items: center; gap: 6px; }
#devpanel select { font: inherit; background: #222; color: #ddd; border: 1px solid #555; border-radius: 3px; }
html.dev body {
  cursor: pointer !important;
}

html.dev .gs-dev-tools {
  z-index: 9999999;
  opacity: 0.85;
}

html.dev .gs-dev-tools .progress-bar {
  background: linear-gradient(114.41deg, #0ae44896 20.74%, #abff8494 65.5%);
  height: 6px;
}

/* ============================================================
   Merged in from the inline <style> that sat at the bottom of index.html
   (2026-09-07). Kept LAST and in its original order on purpose — these
   rules deliberately override the reset and the spaceworm block above:
     body line-height 1        (not the reset's 1.5)
     body height   100svh      (not the 100% on line 61)
     background-color #040431  layers under the bg-75.webp shorthand on line 66
   Reordering this section changes the rendered page.
   ============================================================ */
html, body {
  margin: 0;
  padding: 0;
}
body {
  font-size: 16px;
  line-height: 1;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #ddd;
  background-color: #040431;
  min-height: 100svh;
  height: 100svh;
  max-height: 100svh;
  overflow: hidden;
  width: 100%;
}
#main {
  display: flex;
  width: 100%;
  height: 100%;
}
.btn {
  z-index: 9999999;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  width: 32px;
  height: 32px;
  background-color: #040431;
  border: 2px solid #666;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
  font-weight: 600;
  font-family: Helvetica, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #aaa;
  padding: 0;
  transition: color 0.2s ease-out, border 0.2s ease-out;
  cursor: pointer;
}

.btn:hover,
.btn:active,
.btn:focus {
  color: #ccc;
  border-color: #777;
}

#fullscreen-btn {
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  left: calc(8px + env(safe-area-inset-left, 0px));
}

#sensor-btn {
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  right: calc(8px + env(safe-area-inset-right, 0px));
}