* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }
    body, html {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #050508;
      font-family: 'Courier New', Courier, monospace;
      color: #00ffcc;
    }
    #game-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
    }
    canvas#render-canvas {
      width: 100%;
      height: 100%;
      display: block;
      touch-action: none;
    }

    /* Crosshair & Hit Marker */
    #crosshair-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 10;
    }
    .crosshair {
      width: 18px;
      height: 18px;
      position: relative;
    }
    .crosshair::before, .crosshair::after {
      content: '';
      position: absolute;
      background: rgba(0, 255, 204, 0.85);
      box-shadow: 0 0 6px #00ffcc;
    }
    .crosshair::before {
      top: 8px; left: 0; width: 18px; height: 2px;
    }
    .crosshair::after {
      top: 0; left: 8px; width: 2px; height: 18px;
    }
    #hitmarker {
      position: absolute;
      top: -12px;
      left: -12px;
      width: 42px;
      height: 42px;
      border: 2px solid #ff0055;
      border-radius: 50%;
      opacity: 0;
      transform: scale(0.6);
      transition: opacity 0.05s, transform 0.05s;
    }
    #hitmarker.active {
      opacity: 1;
      transform: scale(1.1);
    }

    /* Damage & Secret Vignettes */
    #damage-flash {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background: radial-gradient(circle, transparent 40%, rgba(255, 0, 40, 0.65) 100%);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.1s ease-out;
      z-index: 9;
    }
    #pickup-flash {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background: radial-gradient(circle, transparent 50%, rgba(0, 255, 180, 0.35) 100%);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.15s ease-out;
      z-index: 9;
    }

    /* Dead-end extraction prompt. Its own element so it can persist while
       showHudMessage keeps timing itself out underneath. */
    #hud-deadend {
      position: absolute;
      top: 64px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 16px;
      font-weight: 900;
      letter-spacing: 2px;
      color: #ffd166;
      text-shadow: 0 0 10px #ff8a00;
      background: rgba(30, 12, 0, 0.8);
      border: 1px solid #ff8a00;
      padding: 6px 18px;
      border-radius: 4px;
      opacity: 0;
      transition: opacity 0.15s;
      pointer-events: none;
      z-index: 13;
      text-transform: uppercase;
      white-space: nowrap;
    }

    /* Message Banner */
    #hud-message {
      position: absolute;
      top: 24px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 2px;
      text-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffff;
      color: #ffffff;
      background: rgba(10, 15, 20, 0.75);
      border: 1px solid #00ffcc;
      padding: 6px 20px;
      border-radius: 4px;
      opacity: 0;
      transition: opacity 0.2s;
      pointer-events: none;
      z-index: 12;
      text-transform: uppercase;
    }

    /* Classic Cyber HUD (Bottom Bar) */
    #hud-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 90px;
      background: linear-gradient(180deg, #11151c 0%, #080a0f 100%);
      border-top: 3px solid #00e5ff;
      box-shadow: 0 -4px 20px rgba(0, 229, 255, 0.3);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      gap: 12px;
      z-index: 11;
      font-family: 'Impact', 'Arial Black', sans-serif;
    }
    .hud-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 110px;
      background: #0d1117;
      padding: 6px 14px;
      border: 2px solid #202b38;
      border-radius: 4px;
      box-shadow: inset 0 0 8px rgba(0,0,0,0.8);
    }
    .hud-label {
      font-size: 11px;
      color: #00ffcc;
      letter-spacing: 2px;
      font-family: 'Courier New', monospace;
      margin-bottom: 2px;
    }
    .hud-val {
      font-size: 32px;
      line-height: 32px;
      color: #ffffff;
      text-shadow: 0 0 10px rgba(255,255,255,0.6);
    }
    .hud-val.health-good { color: #00ff99; text-shadow: 0 0 10px #00ff99; }
    .hud-val.health-warn { color: #ffcc00; text-shadow: 0 0 10px #ffcc00; }
    .hud-val.health-crit { color: #ff0055; text-shadow: 0 0 10px #ff0055; animation: blink 0.5s infinite; }
    @keyframes blink { 50% { opacity: 0.4; } }

    /* Doom Face Canvas */
    #face-container {
      width: 68px;
      height: 68px;
      background: #141b24;
      border: 2px solid #00e5ff;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
    }
    #face-canvas {
      width: 100%;
      height: 100%;
      image-rendering: pixelated;
    }

    /* Weapon Selector & Automap HUD items */
    .weapon-selector {
      display: flex;
      gap: 8px;
      /* Six slots no longer fit one row on narrow desktops, so wrap to two
         rows and let the labels shrink before the bar overflows. */
      flex-wrap: wrap;
      justify-content: flex-end;
      min-width: 0;
    }
    .weap-slot {
      padding: 6px 10px;
      background: #0d121a;
      border: 1px solid #283747;
      font-family: 'Courier New', monospace;
      font-size: 12px;
      color: #5d6d7e;
      border-radius: 3px;
      font-weight: bold;
    }
    .weap-slot:not(.owned) { opacity: 0.4; }
    .weap-slot.owned { color: #8fa6bd; }
    .weap-slot.active {
      color: #00ffff;
      border-color: #00ffff;
      background: #1a2530;
      box-shadow: 0 0 8px #00ffff88;
    }

    /* Automap Canvas Overlay (Doom TAB map) */
    #automap-modal {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(3, 8, 12, 0.88);
      backdrop-filter: blur(4px);
      z-index: 20;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    #automap-canvas {
      border: 2px solid #00ffcc;
      box-shadow: 0 0 25px rgba(0, 255, 204, 0.3);
      background: #050b11;
      border-radius: 6px;
    }
    .automap-header {
      margin-bottom: 12px;
      font-size: 20px;
      letter-spacing: 4px;
      color: #00ffcc;
      text-shadow: 0 0 8px #00ffcc;
    }

    /* Start / Pause / Game Over / Victory Screen Overlays */
    #overlay-screen {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background: radial-gradient(circle, rgba(10, 15, 25, 0.94) 0%, rgba(2, 4, 8, 0.98) 100%);
      z-index: 30;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* CH-QA-01: plain `center` on an overflowing column clips BOTH ends with no
         way to scroll to them, which is what put ENTER THE ABYSS under the
         viewport edge at 1280x800. `safe center` falls back to start-alignment
         once the content is taller than the overlay. */
      justify-content: safe center;
      text-align: center;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      /* Nothing is docked over the overlay any more - the menu-side MIDI widget
         is gone - so the CTA only has to clear the overlay's own padding. */
      padding: 20px;
    }

    /* Overlay modes. The overlay is the title screen, the pause menu and the
       end-of-mission card, and they do not want the same content:
         mode-title  no music controls (music belongs to the level, not the menu)
         mode-pause  the ONLY track switcher in the game
         mode-end    neither
       Driving this off one class is what keeps the track switcher out of the
       title screen and the end card.

       The briefing card stays up on pause: it is the control reference, which
       is exactly what a player wants mid-mission, and it measures as fitting.
       At 1280x800 it adds 289px and RESUME lands at y=745 of 800; at the
       1046x640 the same window actually leaves for the page it adds 190px and
       RESUME lands at y=578 of 640. Both fully in the viewport, hit-testable at
       all nine probe points, with the overlay not overflowing. Only the cheat
       TIP is dropped - it is a title-screen aside, and the player is already
       in-game by the time they see this screen. */
    #overlay-screen:not(.mode-pause) #pause-music { display: none; }
    #overlay-screen.mode-pause .title-tip { display: none; }
    #overlay-screen.mode-end #pause-music { display: none; }

    #pause-music {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
      background: rgba(0, 0, 0, 0.6);
      border: 1px solid #00ffcc;
      border-radius: 4px;
      padding: 10px 16px;
      max-width: 760px;
      font-family: 'Courier New', monospace;
    }
    #pause-music .pm-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }
    #pause-music .pm-label {
      color: #88ccff;
      font-size: 10px;
      font-weight: bold;
      letter-spacing: 1px;
    }
    #pause-music #pause-music-now {
      color: #ffffff;
      font-size: 13px;
      font-weight: bold;
    }
    #pause-music #pause-music-meta {
      color: #00ffaa;
      font-size: 10px;
      font-style: italic;
    }
    #pause-music select {
      background: #081018;
      border: 1px solid #00ffcc;
      color: #00ffcc;
      padding: 4px 6px;
      font-family: monospace;
      font-size: 11px;
      border-radius: 3px;
      cursor: pointer;
      max-width: 320px;
    }
    #pause-music button {
      background: #0a1b24;
      border: 1px solid #00ffcc;
      color: #00ffcc;
      cursor: pointer;
      min-width: 30px;
      height: 26px;
      line-height: 1;
      padding: 0 8px;
      font-size: 12px;
      border-radius: 3px;
      flex: 0 0 auto;
    }
    #pause-music input[type="range"] {
      accent-color: #00ffcc;
      cursor: pointer;
      width: 96px;
    }
    .title-glitch {
      font-size: 54px;
      font-weight: 900;
      letter-spacing: 6px;
      color: #00ffff;
      text-shadow: 3px 3px #ff0055, -3px -3px #00ffcc, 0 0 30px #00ffff;
      margin-bottom: 8px;
      font-family: 'Impact', 'Arial Black', sans-serif;
    }
    .subtitle {
      font-size: 16px;
      color: #a0aec0;
      letter-spacing: 3px;
      margin-bottom: 28px;
    }
    .instructions-card {
      background: rgba(16, 24, 38, 0.85);
      border: 1px solid #00e5ff55;
      padding: 20px 30px;
      border-radius: 8px;
      max-width: 580px;
      margin-bottom: 26px;
      box-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
      line-height: 1.6;
      font-size: 14px;
      color: #d1d5db;
    }
    .instructions-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 20px;
      text-align: left;
      margin-top: 10px;
    }
    .key-badge {
      display: inline-block;
      padding: 2px 7px;
      background: #00e5ff22;
      border: 1px solid #00e5ff;
      border-radius: 3px;
      color: #00ffff;
      font-weight: bold;
      font-size: 12px;
    }
    #fs-hud-btn {
      position: absolute; top: 8px; right: 8px; width: 40px; height: 40px;
      display: none; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.45); border: 1px solid #00e5ff; color: #00e5ff;
      border-radius: 6px; font-size: 20px; z-index: 16; touch-action: manipulation;
    }
    .touch-only { display: none; }
    @media (pointer: coarse) {
      .touch-only { display: inline-block; }
      #fs-hud-btn { display: flex; }
    }
    .start-btn {
      padding: 16px 44px;
      font-size: 22px;
      font-weight: 900;
      letter-spacing: 3px;
      color: #000;
      background: linear-gradient(90deg, #00ffcc, #00bfff);
      border: none;
      border-radius: 4px;
      cursor: pointer;
      box-shadow: 0 0 25px #00ffccaa;
      transition: transform 0.1s, box-shadow 0.1s;
      font-family: 'Impact', 'Arial Black', sans-serif;
    }
    .start-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 0 35px #00ffff;
    }

    /* CH-QA-01: a 1280x800 desktop leaves Chrome roughly 620-640px of page
       height. Compact the title screen there so the whole thing fits without
       scrolling and the CTA stays fully on screen. */
    @media (max-height: 740px) {
      .title-glitch { font-size: 36px; letter-spacing: 4px; margin-bottom: 4px; }
      .subtitle { font-size: 13px; letter-spacing: 2px; margin-bottom: 12px; }
      .instructions-card {
        padding: 12px 22px;
        margin-bottom: 12px;
        font-size: 13px;
        line-height: 1.35;
      }
      .instructions-grid { gap: 4px 16px; margin-top: 6px; }
      .key-badge { font-size: 11px; padding: 1px 5px; }
      .start-btn { padding: 12px 34px; font-size: 19px; }
      #pause-music { padding: 8px 12px; gap: 6px; }
    }

    /* ==========================================================================
       TOUCH CONTROL LAYER (landscape phones)
       Layout follows Delta Touch / Quad Touch: the whole right half is a look
       surface, a translucent crosshair FIRE pad sits under the right thumb and
       looks while it fires, the left third spawns a floating move stick, and
       the utility icons live along the top edge clear of the HUD corners.
       Opacity is a single custom property so Settings can dim the whole layer.
       ========================================================================== */
    #mobile-controls {
      position: absolute;
      inset: 0;
      pointer-events: none;
      display: none;
      z-index: 15;
      --tc-op: 0.55;
      /* Absolutely positioned children resolve against the padding box, so one
         declaration here keeps every pad inside the notch/home-bar safe area. */
      padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
               env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    }
    /* Invisible input surfaces. They sit under the visible pads so a finger
       that lands on a pad never also registers as a bare look/move touch. */
    #tc-look, #tc-move {
      position: absolute;
      pointer-events: auto;
      touch-action: none;
      background: none;
    }
    #tc-look { top: 0; bottom: 0; left: 34%; right: 0; z-index: 1; }
    #tc-move { top: 56px; bottom: 0; left: 0; width: 34%; z-index: 2; }

    /* Floating move stick: hidden until a thumb lands in #tc-move, then drawn
       under that thumb wherever it landed. */
    #tc-stick {
      position: absolute;
      width: 132px; height: 132px;
      margin: -66px 0 0 -66px;
      border-radius: 50%;
      border: 2px solid rgba(0, 229, 255, 0.85);
      background: radial-gradient(circle, rgba(0,229,255,0.14) 40%, rgba(0,229,255,0.05) 100%);
      pointer-events: none;
      /* Always drawn, faint, at its resting home so a new player can see where
         the stick lives; it brightens and re-homes under the thumb on contact. */
      opacity: calc(var(--tc-op) * 0.5);
      z-index: 3;
    }
    #tc-stick.on { opacity: var(--tc-op); }
    #tc-knob {
      position: absolute;
      left: 50%; top: 50%;
      width: 56px; height: 56px;
      margin: -28px 0 0 -28px;
      border-radius: 50%;
      border: 2px solid rgba(0, 255, 204, 0.9);
      background: rgba(0, 255, 204, 0.22);
    }

    /* Round translucent action pads. */
    .tc-pad {
      position: absolute;
      pointer-events: auto;
      touch-action: none;
      border-radius: 50%;
      border: 2px solid rgba(0, 229, 255, 0.85);
      background: radial-gradient(circle, rgba(0,229,255,0.16) 45%, rgba(0,229,255,0.06) 100%);
      color: #dffbff;
      font-family: 'Impact', 'Arial Black', sans-serif;
      letter-spacing: 1px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: var(--tc-op);
      z-index: 4;
      user-select: none;
      -webkit-user-select: none;
    }
    .tc-pad.on { background: rgba(0, 255, 204, 0.34); border-color: #00ffcc; }

    #tc-fire {
      right: 96px; bottom: 22px;
      width: 116px; height: 116px;
      border-color: rgba(255, 0, 85, 0.85);
      background: radial-gradient(circle, rgba(255,0,85,0.18) 45%, rgba(255,0,85,0.06) 100%);
    }
    #tc-fire.on { background: rgba(255, 0, 85, 0.38); border-color: #ff3b76; }
    /* Crosshair glyph, drawn in CSS so it scales with the pad. */
    #tc-fire::before, #tc-fire::after {
      content: '';
      position: absolute;
      background: rgba(255, 210, 225, 0.9);
    }
    #tc-fire::before { left: 22%; right: 22%; height: 3px; }
    #tc-fire::after  { top: 22%; bottom: 22%; width: 3px; }
    #tc-lock {
      position: absolute;
      left: -6px; top: -6px;
      width: 34px; height: 34px;
      border-radius: 50%;
      border: 2px solid rgba(255, 210, 225, 0.8);
      background: rgba(10, 4, 8, 0.72);
      color: #ffd2e1;
      font-size: 15px;
      line-height: 1;
      display: flex; align-items: center; justify-content: center;
      pointer-events: auto;
      touch-action: none;
      z-index: 5;
    }
    #tc-lock.on { background: rgba(255, 0, 85, 0.75); color: #fff; border-color: #fff; }

    #tc-use  { right: 14px; bottom: 100px; width: 70px; height: 70px; font-size: 14px; }
    #tc-jump { right: 14px; bottom: 22px;  width: 70px; height: 70px; font-size: 13px; }

    /* Weapon prev/next on the right edge: the left third is the stick zone. */
    .tc-arrow {
      position: absolute;
      right: 10px;
      width: 52px; height: 52px;
      pointer-events: auto;
      touch-action: none;
      border-radius: 8px;
      border: 2px solid rgba(0, 229, 255, 0.8);
      background: rgba(0, 229, 255, 0.14);
      color: #bffcff;
      font-size: 19px;
      display: flex; align-items: center; justify-content: center;
      opacity: var(--tc-op);
      z-index: 4;
      user-select: none;
      -webkit-user-select: none;
    }
    /* Kept above the USE pad's top edge (bottom:100px + 70px tall) so the two
       never share a pixel at 393px of height. */
    #tc-wprev { top: 70px; }
    #tc-wnext { top: 150px; }
    #tc-wname {
      position: absolute;
      right: 4px; top: 128px;
      width: 64px;
      text-align: center;
      font-size: 9px;
      letter-spacing: 1px;
      color: #bffcff;
      text-shadow: 0 0 5px #00e5ff;
      pointer-events: none;
      opacity: var(--tc-op);
      z-index: 4;
    }

    /* Utility icons along the top edge, centred between the HUD corner blocks
       (top-left) and the fullscreen button (top-right). */
    #tc-top {
      position: absolute;
      top: 6px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 4;
    }
    .tc-icon {
      pointer-events: auto;
      touch-action: none;
      width: 48px; height: 48px;
      border-radius: 8px;
      border: 2px solid rgba(0, 229, 255, 0.8);
      background: rgba(6, 10, 14, 0.5);
      color: #bffcff;
      font-size: 18px;
      display: flex; align-items: center; justify-content: center;
      opacity: var(--tc-op);
      user-select: none;
      -webkit-user-select: none;
    }

    /* Left-handed swap: mirror the two thumb zones and the pad cluster. */
    #mobile-controls.lefty #tc-look { left: 0; right: 34%; }
    #mobile-controls.lefty #tc-move { left: auto; right: 0; }
    #mobile-controls.lefty #tc-fire { right: auto; left: 96px; }
    #mobile-controls.lefty #tc-use  { right: auto; left: 14px; }
    #mobile-controls.lefty #tc-jump { right: auto; left: 14px; }
    #mobile-controls.lefty .tc-arrow { right: auto; left: 10px; }
    #mobile-controls.lefty #tc-wname { right: auto; left: 4px; }
    #mobile-controls.lefty #tc-lock { left: auto; right: -6px; }

    /* Touch settings sheet. Opened by the gear; freezes the sim while open. */
    #tc-settings-panel {
      position: absolute;
      inset: 0;
      z-index: 34;
      display: none;
      flex-direction: column;
      gap: 8px;
      padding: 14px 18px;
      background: rgba(3, 6, 10, 0.93);
      overflow-y: auto;
      font-size: 13px;
      color: #bffcff;
      text-align: left;
    }
    #tc-settings-panel.on { display: flex; }
    #tc-settings-panel h3 {
      margin: 0 0 2px; font-size: 15px; letter-spacing: 3px; color: #00ffcc;
      font-family: 'Impact', 'Arial Black', sans-serif;
    }
    .tc-row {
      display: flex; align-items: center; gap: 12px;
      min-height: 34px;
    }
    .tc-row label { flex: 0 0 150px; letter-spacing: 1px; }
    .tc-row input[type=range] { flex: 1 1 auto; accent-color: #00ffcc; min-width: 90px; }
    .tc-row input[type=checkbox] { width: 22px; height: 22px; accent-color: #00ffcc; }
    .tc-row .tc-val { width: 46px; text-align: right; color: #00ffcc; }
    #tc-settings-close {
      align-self: flex-start;
      margin-top: 4px;
      min-height: 48px;
      padding: 10px 28px;
      background: #00e5ff; color: #000; border: none; border-radius: 4px;
      font-weight: 900; letter-spacing: 2px; font-size: 15px;
    }

    /* Portrait is not a supported layout. Prompt, do not reflow. */
    #rotate-nudge {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background: #050508;
      z-index: 40;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      font-size: 18px;
      letter-spacing: 3px;
      text-align: center;
      padding: 24px;
    }
    @media (pointer: coarse) and (orientation: portrait) {
      #rotate-nudge { display: flex; }
    }

    /* ---- Landscape touch layout (landscape only, no portrait reflow) ---- */
    @media (pointer: coarse) and (orientation: landscape) {
      /* Controls become a transparent full-screen layer instead of stealing a
         140px band off the bottom of the play view. */
      #mobile-controls { display: block; }

      /* HUD off the play view: no opaque 90px bar, thin translucent top strip
         that reads over the world instead of hiding it. */
      #hud-bar {
        top: 0;
        bottom: auto;
        height: auto;
        padding: 5px 10px;
        background: none;
        border-top: none;
        box-shadow: none;
        pointer-events: none;
        align-items: flex-start;
      }
      .hud-block {
        min-width: 0;
        padding: 2px 8px;
        border: none;
        background: rgba(6, 10, 14, 0.42);
        box-shadow: none;
      }
      .hud-label { font-size: 9px; letter-spacing: 1px; margin-bottom: 0; }
      .hud-val { font-size: 18px; line-height: 19px; }
      #face-container { display: none; }
      /* The six-slot selector wrapped to two rows and ate the whole top-right,
         which is where the touch layer's icons and fullscreen button live. The
         touch build switches weapons with the edge arrows, and those carry the
         current weapon's name, so the slot list is redundant here. */
      .weapon-selector { display: none; }
      /* space-between would fling ARMOR to the far right with the selector
         gone; keep the readouts clustered in the top-left corner. */
      #hud-bar { justify-content: flex-start; gap: 6px; }

      /* Banner sat at top:24px, straight under the new HUD strip. */
      #hud-message { top: auto; bottom: 34%; font-size: 14px; padding: 4px 12px; }

      /* Start/pause overlay has to fit a ~360px-tall viewport and stay
         scrollable, or the ENTER/RESUME button is unreachable. */
      #overlay-screen { justify-content: flex-start; overflow-y: auto; padding: 10px 14px; }
      .title-glitch { font-size: 26px; letter-spacing: 3px; margin-bottom: 2px; }
      .subtitle { font-size: 11px; letter-spacing: 1px; margin-bottom: 8px; }
      .instructions-card { padding: 8px 12px; font-size: 11px; line-height: 1.35; margin-bottom: 10px; max-width: none; }
      .instructions-grid { display: none; }
      .start-btn { padding: 12px 30px; font-size: 17px; }
    }