:root {
      --gold: #d4af37;
      --gold-bright: #f0d070;
      --dark: #0a0c14;
      --navy: #111827;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 0;
      background: #020306;
      color: #ccc;
      font-family: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow-x: hidden;
    }
    .page {
      width: 100%;
      max-width: 1100px;
      padding: 40px 20px;
    }
    .banner-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 1100 / 250;
      height: auto;
      border-radius: 10px;
      overflow: hidden;
      box-shadow:
        0 0 35px rgba(212, 175, 55, 0.25),
        0 0 80px rgba(212, 175, 55, 0.12),
        inset 0 0 18px rgba(0, 0, 0, 0.85),
        inset 0 0 0 1px rgba(212, 175, 55, 0.15);
      transition: box-shadow 160ms ease;
      background: #0a0c14;
      cursor: crosshair;
    }
    .banner-wrap:hover {
      box-shadow:
        0 0 45px rgba(212, 175, 55, 0.45),
        0 0 120px rgba(212, 175, 55, 0.25),
        inset 0 0 24px rgba(0, 0, 0, 0.92),
        inset 0 0 0 1px rgba(212, 175, 55, 0.25);
    }
    .banner-wrap::after {
      content: " ";
      display: block;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
      background: 
        radial-gradient(circle at 50% 10%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 65%),
        radial-gradient(circle, rgba(0,0,0,0) 65%, rgba(0,0,0,0.45) 100%);
      pointer-events: none;
      z-index: 12;
    }
    #game {
      display: block;
      width: 100%;
      height: 100%;
      image-rendering: pixelated;
      cursor: inherit;
    }
    .footer {
      margin-top: 22px;
      text-align: center;
      font-size: 11px;
      opacity: 0.45;
      letter-spacing: 0.5px;
    }
    .controls {
      display: flex;
      gap: 6px;
      justify-content: center;
      margin-top: 10px;
      flex-wrap: wrap;
    }
    .controls button {
      background: #0f121a;
      color: #d4af37;
      border: 1px solid #d4af37;
      padding: 5px 13px;
      font-size: 9.5px;
      font-family: monospace;
      letter-spacing: 0.5px;
      cursor: pointer;
      transition: all 80ms ease;
      border-radius: 2px;
    }
    .controls button:hover {
      background: #1a1f2e;
      color: #f0d070;
      border-color: #f0d070;
    }
    .controls button.active {
      background: #d4af37;
      color: #0a0c14;
      border-color: #d4af37;
    }

    /* Mobile D-pad styling */
    #ios-dpad .dpad-arrow {
      width: 44px;
      height: 44px;
      font-size: 16px;
      font-family: monospace;
      background: #0f121a;
      color: #f4d97a;
      border: 1px solid #d4af37;
      border-radius: 4px;
      padding: 0;
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.1s, transform 0.05s;
    }
    #ios-dpad .dpad-arrow:active {
      background: #d4af37;
      color: #0a0c14;
      transform: scale(0.92);
    }
    .scanlines {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: repeating-linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,0) 2px,
        rgba(0,0,0,0.07) 2px,
        rgba(0,0,0,0.07) 4px
      );
      z-index: 10;
      mix-blend-mode: multiply;
    }
    .mode-label {
      position: absolute;
      top: 6px;
      right: 8px;
      font-size: 7px;
      font-family: monospace;
      color: rgba(212,175,55,0.3);
      pointer-events: none;
      z-index: 11;
    }

    /* Mobile: give a taller (more playable) preferred ratio than the ultra-wide desktop banner,
       but cap the height so the banner stays a "banner" and doesn't eat the whole phone
       in landscape or dominate portrait. The JS measures the *actual* laid-out size after
       these rules and sets the canvas bitmap to an exact matching aspect → zero stretch/squish
       on any orientation, any iOS Safari quirk, any container constraint. */
    @media (max-width: 768px) {
      .banner-wrap {
        aspect-ratio: 2.45 / 1;   /* ~2.45:1 → more vertical room on portrait phones than 4.5:1 */
        max-height: 205px;        /* keeps it banner-sized in landscape too */
      }
      .controls button {
        font-size: 10px;
        padding: 6px 11px;
      }
    }
    @keyframes screen-shake {
      0% { transform: translate(0, 0); }
      10% { transform: translate(-2px, -1px); }
      20% { transform: translate(1px, 2px); }
      30% { transform: translate(-1px, -2px); }
      40% { transform: translate(2px, 1px); }
      50% { transform: translate(-1px, 2px); }
      60% { transform: translate(2px, -1px); }
      70% { transform: translate(-2px, -2px); }
      80% { transform: translate(1px, 2px); }
      90% { transform: translate(-2px, 1px); }
      100% { transform: translate(0, 0); }
    }
    .shake {
      animation: screen-shake 0.15s ease-in-out;
    }