/* THE RUN - standalone page styles.
   Extracted from an inline <style> block so the deploy CSP can be
   `style-src 'self'` instead of `'unsafe-inline'`. That matters and it is
   not cosmetic: a local `python3 -m http.server` sends NO CSP header, so an
   inline block that a strict production CSP would refuse renders perfectly
   in dev and ships an unstyled page. Invisible in dev by construction. */

:root { color-scheme: dark; }
  html, body {
    height: 100%; margin: 0; padding: 0;
    background: #0d0d0d;
    overscroll-behavior: none;
  }
  /*
    NO `overflow: hidden` HERE, deliberately.
    Clipping the document would hide a real overflow AND make a scrollWidth-based probe
    report clean while content sits off screen, which is a false green. Instead the body is
    a FIXED box the size of the viewport: nothing can scroll because nothing is in flow, and
    anything that did overflow would still be visible to a rect measurement.
  */
  body {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    touch-action: none;
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
    font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #f2f2f2;
  }
  /* The game fits an INTEGER device-pixel scale inside #stage. #stage therefore needs a real
     box of its own, and it is where room for the touch controls is reserved. */
  #stage {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
  }
  #game {
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    background: #0d0d0d;
  }
  #boot {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: .18em; color: #d4fc50; background: #0d0d0d;
  }

  /* ---- touch controls. Shown only on a coarse pointer, and always OUTSIDE the canvas. */
  .ctl { display: none; position: fixed; z-index: 5; }
  body.touch .ctl { display: block; }

  #pad {
    width: 150px; height: 150px; border-radius: 50%;
    background: #161616; border: 2px solid #2a3a14;
    left: 18px; bottom: 26px;
    box-shadow: 0 0 0 1px #0d0d0d;
  }
  #pad::before, #pad::after {
    content: ""; position: absolute; background: #242424;
  }
  #pad::before { left: 12%; right: 12%; top: 50%; height: 1px; }
  #pad::after { top: 12%; bottom: 12%; left: 50%; width: 1px; }
  #knob {
    position: absolute; left: 50%; top: 50%;
    width: 54px; height: 54px; margin: -27px 0 0 -27px;
    border-radius: 50%;
    background: #1c1c1c; border: 2px solid #d4fc50;
    pointer-events: none;
  }
  #btnA {
    width: 106px; height: 106px; border-radius: 50%;
    right: 24px; bottom: 48px;
    background: #1c2610; border: 2px solid #d4fc50;
    color: #d4fc50; font: 700 22px/106px ui-monospace, Menlo, monospace;
    text-align: center; letter-spacing: .1em;
  }
  #btnA.on { background: #d4fc50; color: #0d0d0d; }
  #btnPause, #btnMute {
    width: 42px; height: 42px; top: 10px;
    background: #161616; border: 1px solid #687868; color: #A0A8A0;
    font: 700 13px/42px ui-monospace, Menlo, monospace; text-align: center;
    border-radius: 4px;
  }
  #btnPause { right: 10px; }
  #btnMute { right: 60px; }
  #btnPause.on, #btnMute.on { border-color: #d4fc50; color: #d4fc50; }
  /* #687868 on #0d0d0d is 4.14:1 and fails WCAG AA for text. #A0A8A0 is 7.96:1.
     The 1px #687868 BORDERS on the buttons below stay: a UI boundary needs 3:1, not 4.5:1. */
  #rotate {
    display: none; position: fixed; left: 0; right: 0; bottom: 8px;
    text-align: center; color: #A0A8A0; letter-spacing: .1em; font-size: 13px;
  }
  body.touch.portrait #rotate { display: block; }

  /* Reserve the control area by shrinking the STAGE, so the pad can never sit over the game. */
  body.touch.portrait #stage { bottom: 262px; top: 8px; }
  @media (orientation: landscape) {
    body.touch #stage { left: 172px; right: 152px; }
    body.touch #pad { left: 20px; bottom: auto; top: 50%; transform: translateY(-50%); width: 132px; height: 132px; }
    body.touch #btnA { right: 20px; bottom: auto; top: 50%; transform: translateY(-50%); width: 96px; height: 96px; line-height: 96px; }
  }
  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }