@font-face {
      font-family: 'Press Start 2P';
      src: url('./assets/fonts/press-start-2p-latin-400-normal.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background: #0a0a0a;
      color: #00ff41;
      font-family: 'Press Start 2P', monospace;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 24px 16px 40px;
      overflow-x: hidden;
    }

    /* CRT scanline overlay */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0,0,0,0.04) 3px,
        rgba(0,0,0,0.04) 4px
      );
      pointer-events: none;
      z-index: 9999;
    }

    /* ── Title ─────────────────────────────────────────────────────────────── */
    #title {
      font-size: clamp(16px, 2vw, 20px);
      text-align: center;
      color: #ff3131;
      text-shadow: 0 0 12px #ff3131, 0 0 30px rgba(255,49,49,0.4);
      letter-spacing: 0.5px;
      line-height: 1.9;
      margin-bottom: 22px;
      white-space: nowrap;
    }

    /* ── Top bar ────────────────────────────────────────────────────────────── */
    #topbar {
      width: 100%;
      max-width: 920px;
      display: flex;
      gap: 16px;
      background: #0d0d0d;
      border: 2px solid #00ff41;
      box-shadow: 0 0 16px rgba(0,255,65,0.15);
      padding: 16px 20px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }

    #mobile-hud-summary {
      display: none;
      width: 100%;
      max-width: 920px;
      border: 2px solid #00ff41;
      background: #0d0d0d;
      color: #00ff41;
      box-shadow: 0 0 16px rgba(0,255,65,0.12);
      padding: 10px 12px;
      margin-bottom: 8px;
      font-family: 'Press Start 2P', monospace;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      cursor: pointer;
    }

    .mobile-hud-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
      align-items: flex-start;
      flex: 1 1 0;
    }

    .mobile-hud-k {
      font-size: 7px;
      letter-spacing: 1px;
      color: #5f7d5f;
    }

    #mobile-hud-summary span:not(.mobile-hud-item):not(.mobile-hud-k) {
      font-size: 11px;
      line-height: 1.1;
    }

    #mobile-hud-chevron {
      flex: 0 0 auto;
      color: #8dc98d;
      font-size: 12px;
      margin-left: 4px;
    }

    .stat-block {
      display: flex;
      flex-direction: column;
      gap: 7px;
      min-width: 130px;
    }

    .stat-block:first-child {
      min-width: 100px;
      max-width: 120px;
    }

    #score-block {
      display: flex;
      flex-direction: column;
      gap: 7px;
      min-width: 140px;
      align-items: flex-end;
      justify-content: center;
      border-left: 1px solid #1a1a1a;
      padding-left: 16px;
      margin-left: auto;
    }

    #score-label {
      font-size: 10px;
      color: #555;
      letter-spacing: 2px;
    }

    #score-live {
      font-size: 18px;
      color: #ffb300;
      text-shadow: 0 0 10px rgba(255,179,0,0.3);
      transition: color 0.2s;
    }

    #score-high {
      font-size: 10px;
      color: #7b8d7b;
      letter-spacing: 1px;
      text-align: right;
      line-height: 1.5;
    }

    .stat-block:not(:first-child) {
      flex: 1;
    }

    .stat-label {
      font-size: 10px;
      color: #555;
      letter-spacing: 2px;
    }

    .stat-value {
      font-size: 18px;
      line-height: 1;
    }

    .bar-track {
      width: 100%;
      height: 9px;
      background: #1a1a1a;
      border: 1px solid #333;
      overflow: hidden;
    }

    .bar-fill {
      height: 100%;
      transition: width 0.35s ease, background-color 0.35s ease;
    }

    /* ── Week progress strip ────────────────────────────────────────────────── */
    #week-strip {
      width: 100%;
      max-width: 920px;
      height: 5px;
      background: #111;
      border: 1px solid #222;
      margin-bottom: 18px;
      overflow: hidden;
    }

    #week-strip-fill {
      height: 100%;
      background: #00ff41;
      transition: width 0.35s ease;
      box-shadow: 0 0 6px rgba(0,255,65,0.5);
    }

    /* ── Scene canvas ───────────────────────────────────────────────────────── */
    #scene {
      width: 100%;
      max-width: 920px;
      height: auto;
      image-rendering: pixelated;
      display: block;
      margin-bottom: 12px;
      border: 2px solid #254625;
      box-shadow: 0 0 0 1px #091109, 0 20px 40px rgba(0,0,0,0.35), inset 0 0 30px rgba(0,0,0,0.28);
      background:
        linear-gradient(180deg, rgba(0,255,65,0.04), rgba(0,0,0,0) 32%),
        linear-gradient(180deg, #071107, #040804);
    }

    /* ── Log wrapper ────────────────────────────────────────────────────────── */
    #log-wrapper {
      width: 100%;
      max-width: 920px;
      height: 170px;
      overflow: hidden;
      background: #080f08;
      border: 2px solid #1a3a1a;
      margin-bottom: 18px;
    }

    #log {
      padding: 12px 16px;
      font-size: 12px;
      color: #88cc88;
      line-height: 1.8;
      overflow-y: auto;
      height: 100%;
    }

    .log-entry {
      margin-bottom: 4px;
      word-break: break-word;
    }

    /* ── Action area ────────────────────────────────────────────────────────── */
    #action-area {
      width: 100%;
      max-width: 920px;
    }

    #action-label {
      font-size: 12px;
      color: #444;
      text-align: center;
      letter-spacing: 3px;
      margin-bottom: 16px;
    }

    #cards {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .card {
      flex: 1;
      min-width: 260px;
      max-width: 320px;
      background: #0d0d0d;
      border: 2px solid #00ff41;
      padding: 20px 16px 18px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 0;
      transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s, background 0.15s;
      position: relative;
    }

    .card:hover {
      background: #091209;
      border-color: #ffb300;
      transform: translateY(-4px);
      box-shadow: 0 6px 24px rgba(255,179,0,0.25);
    }

    .card:active {
      transform: translateY(-1px);
    }

    .card-selected {
      background: #101710;
      border-color: #ffb300;
      transform: translateY(-3px);
      box-shadow: 0 8px 28px rgba(255,179,0,0.22);
    }

    .card-dimmed {
      opacity: 0.5;
      filter: saturate(0.7);
    }

    .card-num {
      font-size: 10px;
      color: #333;
      margin-bottom: 12px;
    }

    .card-name {
      font-size: 13px;
      color: #00ff41;
      line-height: 1.8;
      margin-bottom: 14px;
      flex: 1;
    }

    .card-badge {
      display: inline-block;
      font-size: 9px;
      color: #ff3131;
      border: 1px solid #ff3131;
      padding: 3px 6px;
      margin-bottom: 12px;
      letter-spacing: 1px;
    }

    .card-effects {
      display: flex;
      flex-direction: column;
      gap: 5px;
      border-top: 1px solid #1a1a1a;
      padding-top: 12px;
    }

    .effect-line {
      font-size: 11px;
      line-height: 1.4;
    }

    .eff-oil    { color: #ffb300; }
    .eff-app    { color: #00aaff; }
    .eff-drift  { color: #555; }
    .eff-bonus  { color: #00ddaa; }

    /* ── Game over overlay ──────────────────────────────────────────────────── */
    #gameover {
      position: fixed;
      inset: 0;
      background: rgba(10,10,10,0.97);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 28px;
      padding: 40px 24px;
      z-index: 100;
      overflow-y: auto;
    }

    #go-title {
      font-size: 24px;
      text-align: center;
      line-height: 1.7;
    }

    .go-win    { color: #00ff41; text-shadow: 0 0 24px #00ff41, 0 0 50px rgba(0,255,65,0.3); }
    .go-lose   { color: #ff3131; text-shadow: 0 0 24px #ff3131, 0 0 50px rgba(255,49,49,0.3); }
    .go-amber  { color: #ffb300; text-shadow: 0 0 24px #ffb300, 0 0 50px rgba(255,179,0,0.3); }

    #go-msg {
      font-size: 13px;
      color: #888;
      text-align: center;
      line-height: 2.4;
      max-width: 580px;
      white-space: pre-line;
    }

    #go-loading {
      color: #7f9f7f;
      font-size: 11px;
      letter-spacing: 1px;
      text-align: center;
      min-height: 16px;
    }

    #go-detail-stack {
      width: 100%;
      max-width: 640px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
    }

    #go-summary {
      max-width: 620px;
      border: 1px solid #243824;
      background: #0a120a;
      padding: 14px 18px;
      text-align: center;
    }

    #go-summary-headline {
      color: #9ec79e;
      font-size: 12px;
      line-height: 1.8;
      margin-bottom: 8px;
    }

    #go-summary-stat {
      color: #6f8f6f;
      font-size: 10px;
      line-height: 1.8;
    }

    #go-stats {
      width: 100%;
      font-size: 13px;
      color: #00ff41;
      line-height: 2.6;
      text-align: center;
      border: 1px solid #1a3a1a;
      padding: 18px 30px;
      background: #080f08;
    }

    #go-performance {
      width: 100%;
      max-width: 520px;
      border: 1px solid #3b3417;
      background: #131005;
      color: #ffcf57;
      text-align: center;
      padding: 14px 20px;
      line-height: 1.9;
      font-size: 11px;
      box-shadow: 0 0 14px rgba(255, 179, 0, 0.08);
    }

    #go-leaderboard {
      width: 100%;
      max-width: 640px;
      border: 1px solid #1a3a1a;
      background: #080f08;
      padding: 16px 18px 14px;
    }

    #go-leaderboard-title {
      color: #9ec79e;
      font-size: 11px;
      margin-bottom: 10px;
      text-align: center;
      letter-spacing: 1px;
    }

    .leaderboard-tabs {
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }

    .leaderboard-tab {
      font-family: 'Press Start 2P', monospace;
      font-size: 9px;
      background: #0c0d0f;
      color: #7f9f7f;
      border: 1px solid #355235;
      padding: 8px 10px;
      cursor: pointer;
      letter-spacing: 1px;
      transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    }

    .leaderboard-tab:hover {
      border-color: #9ec79e;
      color: #c2dec2;
    }

    .leaderboard-tab-active {
      background: #152215;
      color: #00ff41;
      border-color: #00ff41;
      box-shadow: 0 0 14px rgba(0,255,65,0.14);
    }

    #go-leaderboard-subtitle,
    #start-leaderboard-subtitle {
      min-height: 28px;
      margin: 0 auto 10px;
      max-width: 520px;
      color: #7f9f7f;
      font-size: 9px;
      line-height: 1.6;
      text-align: center;
      white-space: normal;
    }

    #go-leaderboard-status {
      color: #6f8f6f;
      font-size: 10px;
      text-align: center;
      line-height: 1.8;
      min-height: 18px;
      margin-bottom: 8px;
    }

    #go-leaderboard-list {
      font-size: 11px;
      color: #c2dec2;
    }

    .go-leaderboard-row {
      display: grid;
      grid-template-columns: 34px 1fr auto;
      gap: 12px;
      padding: 6px 0;
      border-bottom: 1px solid rgba(42, 69, 42, 0.35);
      align-items: center;
    }

    .go-leaderboard-row:last-child {
      border-bottom: none;
    }

    .go-leaderboard-rank {
      color: #6f8f6f;
    }

    .go-leaderboard-name {
      color: #9ec79e;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .go-leaderboard-score {
      color: #00ff41;
    }

    #go-actions {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
    }

    #go-share-btn,
    #go-btn {
      font-family: 'Press Start 2P', monospace;
      font-size: 15px;
      background: #0a0a0a;
      padding: 16px 32px;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, box-shadow 0.15s, border-color 0.15s;
      letter-spacing: 2px;
    }

    #go-btn {
      color: #00ff41;
      border: 2px solid #00ff41;
    }

    #go-share-btn {
      color: #9ec79e;
      border: 2px solid #9ec79e;
    }

    #go-share-btn:hover {
      background: #9ec79e;
      color: #0a0a0a;
      box-shadow: 0 0 24px rgba(158,199,158,0.5);
    }

    #go-share-btn:disabled {
      opacity: 0.45;
      cursor: default;
      box-shadow: none;
      background: #0a0a0a;
      color: #6f8f6f;
      border-color: #6f8f6f;
    }

    #go-btn:hover {
      background: #00ff41;
      color: #0a0a0a;
      box-shadow: 0 0 24px rgba(0,255,65,0.5);
    }

    /* Blink animation for cursor */
    @keyframes blink {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0; }
    }
    .blink { animation: blink 1s step-start infinite; }

    @keyframes title-screen-burst {
      0% {
        opacity: 0;
        transform: scale(0.55) rotate(-4deg);
        filter: blur(8px);
      }
      55% {
        opacity: 1;
        transform: scale(1.14) rotate(1deg);
        filter: blur(0);
      }
      100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0);
      }
    }

    /* ── Title screen ─────────────────────────────────────────────────────── */
    #start-screen {
      position: fixed;
      inset: 0;
      background:
        radial-gradient(circle at top, rgba(120, 20, 20, 0.18), transparent 34%),
        linear-gradient(180deg, #090b10 0%, #060708 58%, #050505 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 340;
      padding: 28px 20px 34px;
    }

    #start-screen-inner {
      width: 100%;
      max-width: 760px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      position: relative;
    }

    #start-title-wrap {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .start-title-line {
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.7s ease, transform 0.7s ease;
      text-align: center;
      width: 100%;
    }

    .start-title-line.visible {
      opacity: 1;
      transform: translateY(0);
    }

    #start-title-main {
      color: #e7e1cd;
      font-size: clamp(24px, 5vw, 42px);
      letter-spacing: 4px;
      line-height: 1.35;
      text-shadow: 0 0 18px rgba(231, 225, 205, 0.18);
    }

    #start-title-sub {
      color: #ff5638;
      font-size: clamp(26px, 6vw, 52px);
      letter-spacing: 5px;
      line-height: 1.15;
      text-shadow: 0 0 14px rgba(255, 86, 56, 0.45), 0 0 34px rgba(255, 86, 56, 0.22);
    }

    #start-title-sub.visible {
      animation: title-screen-burst 0.95s cubic-bezier(.18,.84,.18,1);
      opacity: 1;
      transform: none;
      filter: none;
    }

    #start-canvas {
      width: 100%;
      max-width: 760px;
      height: auto;
      display: block;
      border: 2px solid #314431;
      box-shadow: 0 0 0 1px #0b120b, 0 22px 54px rgba(0,0,0,0.46), inset 0 0 34px rgba(0,0,0,0.3);
      background:
        linear-gradient(180deg, rgba(255,86,56,0.05), rgba(0,0,0,0) 28%),
        linear-gradient(180deg, #11161d, #07090c 62%, #090605);
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 1s ease, transform 1s ease;
    }

    #start-canvas.visible {
      opacity: 1;
      transform: translateY(0);
    }

    #start-high-score {
      min-height: 16px;
      color: #a8bf9d;
      font-size: 11px;
      letter-spacing: 1px;
      text-align: center;
      opacity: 0;
      transition: opacity 0.8s ease;
    }

    #start-high-score.visible {
      opacity: 1;
    }

    #start-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    #start-btn {
      font-family: 'Press Start 2P', monospace;
      font-size: 14px;
      background: #0c0d0f;
      color: #00ff41;
      border: 2px solid #00ff41;
      padding: 16px 34px;
      cursor: pointer;
      letter-spacing: 2px;
      transition: background 0.15s, color 0.15s, box-shadow 0.15s, opacity 0.5s ease;
      opacity: 0;
      pointer-events: none;
    }

    #start-btn.visible {
      opacity: 1;
      pointer-events: auto;
    }

    #start-leaderboard-btn {
      font-family: 'Press Start 2P', monospace;
      font-size: 11px;
      background: #0c0d0f;
      color: #9ec79e;
      border: 2px solid #476247;
      padding: 14px 20px;
      cursor: pointer;
      letter-spacing: 1px;
      transition: background 0.15s, color 0.15s, box-shadow 0.15s, opacity 0.5s ease, border-color 0.15s;
      opacity: 0;
      pointer-events: none;
    }

    #start-leaderboard-btn.visible {
      opacity: 1;
      pointer-events: auto;
    }

    #start-leaderboard-btn:hover {
      color: #0a0a0a;
      background: #9ec79e;
      border-color: #9ec79e;
      box-shadow: 0 0 20px rgba(158,199,158,0.28);
    }

    #start-btn:hover {
      background: #00ff41;
      color: #0a0a0a;
      box-shadow: 0 0 24px rgba(0,255,65,0.45);
    }

    #start-leaderboard {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(640px, calc(100vw - 24px));
      border: 1px solid #1a3a1a;
      background: #080f08;
      padding: 14px 16px 12px;
      display: none;
      max-height: min(72vh, 520px);
      overflow-y: auto;
      box-shadow: 0 22px 54px rgba(0,0,0,0.5);
      z-index: 2;
    }

    #start-leaderboard.visible {
      display: block;
    }

    #start-leaderboard-title {
      color: #9ec79e;
      font-size: 11px;
      margin-bottom: 10px;
      text-align: center;
      letter-spacing: 1px;
    }

    #start-leaderboard-list {
      font-size: 11px;
      color: #c2dec2;
    }

    /* Flash animation when log updates */
    @keyframes flashIn {
      0%   { opacity: 0.3; }
      100% { opacity: 1; }
    }
    .flash { animation: flashIn 0.25s ease-out; }

    /* ── Intro screen ──────────────────────────────────────────────────────── */
    #name-entry {
      position: fixed;
      inset: 0;
      background: #060606;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      z-index: 320;
      padding: 40px 24px 24px;
    }

    #name-entry-inner {
      width: 100%;
      max-width: 640px;
      display: flex;
      flex-direction: column;
      align-items: center;
      opacity: 1;
      transition: opacity 0.55s ease;
    }

    #name-entry-inner.fade-out {
      opacity: 0;
    }

    #name-canvas {
      width: 100%;
      max-width: 640px;
      height: auto;
      display: block;
      margin-bottom: 18px;
      border: 2px solid #203620;
      box-shadow: 0 0 0 1px #081008, 0 18px 40px rgba(0,0,0,0.45), inset 0 0 20px rgba(0,0,0,0.28);
      background:
        linear-gradient(180deg, rgba(0,255,65,0.02), rgba(0,0,0,0) 36%),
        linear-gradient(180deg, #080b08, #040604);
    }

    #name-prompt {
      width: 100%;
      margin: 0 0 18px;
      color: #9ec79e;
      font-size: 13px;
      line-height: 2.1;
      text-align: left;
    }

    #name-form {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    #name-prefix {
      flex: 0 0 auto;
      color: #6fa06f;
      font-size: 12px;
      letter-spacing: 1px;
    }

    #name-input {
      flex: 1;
      min-width: 0;
      background: #090d09;
      color: #00ff41;
      border: 2px solid #315031;
      padding: 14px 16px;
      font-family: 'Press Start 2P', monospace;
      font-size: 18px;
      text-transform: uppercase;
      outline: none;
      box-shadow: inset 0 0 12px rgba(0,0,0,0.35);
    }

    #name-input:focus {
      border-color: #7ec97e;
      box-shadow: 0 0 18px rgba(0,255,65,0.14), inset 0 0 12px rgba(0,0,0,0.35);
    }

    #name-btn {
      margin-top: 22px;
      align-self: center;
      font-family: 'Press Start 2P', monospace;
      font-size: 14px;
      background: #0a0a0a;
      color: #00ff41;
      border: 2px solid #00ff41;
      padding: 14px 28px;
      cursor: pointer;
      letter-spacing: 2px;
      transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    }

    #name-btn:hover {
      background: #00ff41;
      color: #0a0a0a;
      box-shadow: 0 0 20px rgba(0,255,65,0.35);
    }

    #intro {
      position: fixed;
      inset: 0;
      background: #0a0a0a;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      z-index: 300;
      padding: 40px 24px 24px;
    }

    #intro-inner {
      width: 100%;
      max-width: 640px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      position: relative;
    }

    #intro-skip {
      position: fixed;
      top: calc(env(safe-area-inset-top, 0px) + 14px);
      right: calc(env(safe-area-inset-right, 0px) + 14px);
      font-family: 'Press Start 2P', monospace;
      font-size: 9px;
      letter-spacing: 1px;
      color: rgba(116, 145, 116, 0.75);
      background: transparent;
      border: 1px solid rgba(78, 106, 78, 0.22);
      padding: 6px 8px;
      cursor: pointer;
      text-transform: uppercase;
      transition: color 0.18s, border-color 0.18s, background 0.18s;
      z-index: 360;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    #intro-skip:hover {
      color: #9ec79e;
      border-color: rgba(158, 199, 158, 0.45);
      background: rgba(17, 27, 17, 0.55);
    }

    #intro-caption {
      width: 100%;
      margin: 0 0 12px;
      color: rgba(176, 207, 176, 0.9);
      font-size: 10px;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      text-align: left;
      text-shadow: 0 0 10px rgba(126, 174, 126, 0.18);
    }

    #intro-caption,
    #intro-text {
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.75s ease, transform 0.75s ease;
    }

    #intro-canvas {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 1.1s ease, transform 1.1s ease;
    }

    #intro-caption.reveal-visible,
    #intro-canvas.reveal-visible,
    #intro-text.reveal-visible {
      opacity: 1;
      transform: translateY(0);
    }

    #intro-canvas {
      width: 100%;
      max-width: 640px;
      height: auto;
      image-rendering: auto;
      display: block;
      margin-bottom: 14px;
      border: 2px solid #203620;
      box-shadow: 0 0 0 1px #081008, 0 18px 40px rgba(0,0,0,0.45), inset 0 0 20px rgba(0,0,0,0.25);
      background:
        linear-gradient(180deg, rgba(0,255,65,0.03), rgba(0,0,0,0) 30%),
        linear-gradient(180deg, #081008, #050905);
    }

    #intro-text {
      font-size: 13px;
      color: #00ff41;
      line-height: 2.4;
      min-height: 154px;
      width: 100%;
      text-align: left;
      white-space: pre-wrap;
      word-break: break-word;
      margin-bottom: 18px;
    }

    #intro-text .dim { color: #1a4a1a; }

    #intro-btn {
      font-family: 'Press Start 2P', monospace;
      font-size: 14px;
      background: #0a0a0a;
      color: #00ff41;
      border: 2px solid #00ff41;
      padding: 14px 30px;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, box-shadow 0.15s;
      letter-spacing: 2px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s, background 0.15s, color 0.15s, box-shadow 0.15s;
    }

    #intro-btn.visible {
      opacity: 1;
      pointer-events: auto;
    }

    #intro-btn:hover {
      background: #00ff41;
      color: #0a0a0a;
      box-shadow: 0 0 20px rgba(0,255,65,0.4);
    }

    /* ── Phase alert overlay ────────────────────────────────────────────────── */
    #phase-alert {
      position: fixed;
      inset: 0;
      background: rgba(10,10,10,0.96);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 200;
    }

    #phase-alert-box {
      border: 2px solid #ffb300;
      background: #0a0800;
      padding: 40px 48px;
      max-width: 560px;
      width: 90%;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 24px;
      box-shadow: 0 0 40px rgba(255,179,0,0.3);
    }

    #phase-alert-title {
      font-size: 18px;
      color: #ffb300;
      text-shadow: 0 0 16px #ffb300;
      line-height: 1.8;
    }

    #phase-alert-msg {
      font-size: 12px;
      color: #cc9900;
      line-height: 2.6;
    }

    #phase-alert-btn {
      font-family: 'Press Start 2P', monospace;
      font-size: 14px;
      background: #0a0800;
      color: #ffb300;
      border: 2px solid #ffb300;
      padding: 14px 28px;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      letter-spacing: 2px;
      align-self: center;
    }

    #phase-alert-btn:hover {
      background: #ffb300;
      color: #0a0800;
    }

    /* ── Score display ──────────────────────────────────────────────────────── */
    #go-score {
      font-size: 28px;
      color: #ffb300;
      text-shadow: 0 0 20px #ffb300, 0 0 40px rgba(255,179,0,0.3);
      text-align: center;
      letter-spacing: 2px;
    }

    #go-bonuses {
      font-size: 11px;
      color: #888;
      text-align: center;
      line-height: 2.6;
    }

    .bonus-line   { color: #00ff41; }
    .penalty-line { color: #ff3131; }

    /* ── Breaking news modal ────────────────────────────────────────────────── */
    #breaking-modal {
      position: fixed;
      inset: 0;
      background: rgba(5,5,5,0.88);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 250;
      padding: 24px;
    }

    #breaking-box {
      width: 100%;
      max-width: 600px;
      background: #0a0000;
      border: 3px solid #ff3131;
      box-shadow: 0 0 0 1px #550000, 0 0 40px rgba(255,49,49,0.4), inset 0 0 30px rgba(80,0,0,0.3);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    #breaking-ticker {
      background: #ff3131;
      color: #0a0000;
      font-size: 9px;
      letter-spacing: 3px;
      padding: 7px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    #breaking-ticker-dot {
      width: 8px;
      height: 8px;
      background: #0a0000;
      border-radius: 50%;
      flex-shrink: 0;
      animation: blink 0.7s step-start infinite;
    }

    #breaking-body {
      padding: 28px 28px 24px;
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

    #breaking-week {
      font-size: 9px;
      color: #661111;
      letter-spacing: 2px;
    }

    #breaking-headline {
      font-size: 13px;
      color: #ff6666;
      line-height: 2.0;
      text-shadow: 0 0 10px rgba(255,49,49,0.3);
    }

    #breaking-effects {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .breaking-stat {
      font-size: 11px;
      padding: 8px 14px;
      border: 1px solid;
      letter-spacing: 1px;
    }

    .breaking-stat.bad-oil   { color: #ffb300; border-color: #664400; background: #110800; }
    .breaking-stat.good-oil  { color: #00ff41; border-color: #004400; background: #001100; }
    .breaking-stat.bad-app   { color: #ff4444; border-color: #660000; background: #0d0000; }
    .breaking-stat.good-app  { color: #44ddff; border-color: #004466; background: #000d11; }

    #breaking-btn {
      font-family: 'Press Start 2P', monospace;
      font-size: 11px;
      background: #0a0000;
      color: #ff3131;
      border: 2px solid #ff3131;
      padding: 13px 24px;
      cursor: pointer;
      letter-spacing: 2px;
      align-self: flex-end;
      transition: background 0.15s, color 0.15s;
    }

    #breaking-btn:hover {
      background: #ff3131;
      color: #0a0000;
    }

    /* ── Visual effects ─────────────────────────────────────────────────────── */
    #vfx {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9998; /* just below CRT overlay */
    }

    @keyframes vfx-shake {
      0%   { transform: translate(0,0) rotate(0deg); }
      15%  { transform: translate(-6px, 4px) rotate(-0.4deg); }
      30%  { transform: translate(7px, -5px) rotate(0.3deg); }
      45%  { transform: translate(-5px, 6px) rotate(-0.3deg); }
      60%  { transform: translate(6px, -3px) rotate(0.2deg); }
      75%  { transform: translate(-4px, 4px) rotate(-0.2deg); }
      90%  { transform: translate(3px, -2px) rotate(0.1deg); }
      100% { transform: translate(0,0) rotate(0deg); }
    }

    @keyframes vfx-red-flash {
      0%   { background: radial-gradient(ellipse at center, transparent 40%, rgba(180,0,0,0.0) 100%); }
      20%  { background: radial-gradient(ellipse at center, transparent 30%, rgba(200,0,0,0.55) 100%); }
      100% { background: radial-gradient(ellipse at center, transparent 40%, rgba(180,0,0,0.0) 100%); }
    }

    @keyframes vfx-green-pulse {
      0%   { background: radial-gradient(ellipse at center, rgba(0,255,65,0.0) 0%, transparent 70%); }
      25%  { background: radial-gradient(ellipse at center, rgba(0,255,65,0.18) 0%, transparent 70%); }
      100% { background: radial-gradient(ellipse at center, rgba(0,255,65,0.0) 0%, transparent 70%); }
    }

    @keyframes vfx-amber-flare {
      0%   { background: radial-gradient(ellipse at top, rgba(255,140,0,0.0) 0%, transparent 60%); }
      30%  { background: radial-gradient(ellipse at top, rgba(255,140,0,0.35) 0%, transparent 60%); }
      100% { background: radial-gradient(ellipse at top, rgba(255,140,0,0.0) 0%, transparent 60%); }
    }

    @keyframes vfx-whiteout {
      0%   { background: rgba(255,255,255,0); }
      10%  { background: rgba(255,255,255,0.7); }
      100% { background: rgba(255,255,255,0); }
    }

    @keyframes vfx-glitch-bg {
      0%   { opacity: 0; }
      10%  { opacity: 1; clip-path: inset(10% 0 80% 0); transform: translateX(-4px); }
      25%  { clip-path: inset(60% 0 20% 0); transform: translateX(6px); }
      40%  { clip-path: inset(30% 0 50% 0); transform: translateX(-3px); }
      55%  { clip-path: inset(70% 0 10% 0); transform: translateX(5px); }
      70%  { clip-path: inset(5%  0 85% 0); transform: translateX(-2px); }
      85%  { opacity: 0.3; }
      100% { opacity: 0; transform: translateX(0); }
    }

    body.vfx-shake { animation: vfx-shake     0.28s ease-out; }
    .vfx-shake     { animation: vfx-shake     0.28s ease-out; }
    .vfx-red-flash { animation: vfx-red-flash  0.5s ease-out forwards; }
    .vfx-green     { animation: vfx-green-pulse 0.6s ease-out forwards; }
    .vfx-amber     { animation: vfx-amber-flare 0.55s ease-out forwards; }
    .vfx-whiteout  { animation: vfx-whiteout   0.4s ease-out forwards; }
    .vfx-glitch    { animation: vfx-glitch-bg  0.35s steps(1) forwards; background: rgba(0,255,65,0.08); }

    @media (max-width: 900px) {
      body {
        padding: 16px 12px 28px;
      }

      #title {
        font-size: clamp(14px, 3.8vw, 18px);
        line-height: 1.5;
        white-space: normal;
        margin-bottom: 14px;
      }

      #topbar {
        gap: 12px;
        padding: 14px;
      }

      .stat-block,
      .stat-block:first-child {
        min-width: 0;
        max-width: none;
        flex: 1 1 calc(50% - 6px);
      }

      #score-block {
        flex: 1 1 100%;
        align-items: flex-start;
        border-left: none;
        border-top: 1px solid #1a1a1a;
        padding-left: 0;
        padding-top: 12px;
        margin-left: 0;
      }

      #score-high {
        text-align: left;
      }

      #log-wrapper {
        height: 150px;
        margin-bottom: 14px;
      }

      #log {
        font-size: 11px;
        line-height: 1.7;
        padding: 10px 12px;
      }

      #action-label {
        font-size: 10px;
        letter-spacing: 2px;
        margin-bottom: 12px;
      }

      #cards {
        gap: 12px;
      }

      .card {
        min-width: calc(50% - 6px);
        max-width: none;
        padding: 16px 14px;
      }

      #gameover,
      #start-screen,
      #name-entry,
      #intro {
        padding-left: 16px;
        padding-right: 16px;
      }

      #go-msg,
      #go-stats,
      #go-leaderboard,
      #phase-alert-box,
      #breaking-box {
        width: 100%;
      }

      #go-msg {
        font-size: 11px;
        line-height: 2.1;
      }

      #go-stats,
      #go-leaderboard {
        font-size: 11px;
      }
    }

    @media (max-width: 640px) {
      body {
        padding: 10px 10px 22px;
      }

      #title {
        font-size: clamp(9px, 3vw, 12px);
        line-height: 1.2;
        white-space: nowrap;
        letter-spacing: 0;
        margin-bottom: 10px;
      }

      #topbar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 10px;
        padding: 10px 8px;
        margin-bottom: 8px;
      }

      #mobile-hud-summary {
        display: flex !important;
      }

      body.mobile-hud-collapsed #topbar {
        display: none;
      }

      body.mobile-hud-expanded #topbar {
        display: grid;
      }

      .stat-block,
      .stat-block:first-child,
      #score-block {
        min-width: 0;
        max-width: none;
        width: 100%;
      }

      .stat-block {
        gap: 4px;
      }

      .stat-label,
      #score-label {
        font-size: 7px;
        letter-spacing: 1px;
      }

      .stat-value,
      #score-live {
        font-size: 13px;
      }

      #score-block {
        grid-column: auto;
        border-top: none;
        padding-top: 0;
        align-items: flex-start;
        gap: 3px;
      }

      #score-high {
        display: none;
      }

      .bar-track {
        height: 7px;
      }

      #scene {
        margin-bottom: 10px;
      }

      #log-wrapper {
        height: 128px;
        margin-bottom: 12px;
      }

      #log {
        font-size: 10px;
        line-height: 1.65;
        padding: 10px;
      }

      #cards {
        flex-direction: column;
        align-items: stretch;
      }

      .card {
        min-width: 100%;
        max-width: 100%;
        padding: 14px 12px;
      }

      .card-num {
        font-size: 9px;
        margin-bottom: 10px;
      }

      .card-name {
        font-size: 11px;
        line-height: 1.6;
        margin-bottom: 10px;
      }

      .card-badge,
      .effect-line {
        font-size: 9px;
      }

      #go-title {
        font-size: 16px;
        line-height: 1.55;
      }

      #go-msg {
        font-size: 10px;
        line-height: 1.95;
        max-width: 100%;
      }

      #go-score {
        font-size: 18px;
        letter-spacing: 1px;
      }

      #go-bonuses {
        font-size: 9px;
        line-height: 2.1;
      }

      #go-stats {
        font-size: 10px;
        line-height: 2.1;
        padding: 14px 16px;
      }

      #go-loading,
      #go-performance {
        font-size: 9px;
        line-height: 1.8;
      }

      #go-leaderboard {
        padding: 12px;
      }

      #go-leaderboard-title {
        font-size: 9px;
      }

      #go-leaderboard-status,
      #go-leaderboard-list {
        font-size: 9px;
      }

      .go-leaderboard-row {
        grid-template-columns: 28px 1fr auto;
        gap: 8px;
        padding: 5px 0;
      }

      #go-btn,
      #start-btn,
      #name-btn,
      #intro-btn,
      #phase-alert-btn,
      #breaking-btn {
        width: 100%;
        max-width: 320px;
        font-size: 12px;
        padding: 14px 16px;
      }

      #start-screen,
      #name-entry,
      #intro,
      #gameover {
        padding: 14px 12px 18px;
      }

      #start-screen-inner,
      #name-entry-inner,
      #intro-inner {
        max-width: 100%;
        gap: 14px;
      }

      #start-title-wrap {
        gap: 8px;
      }

      #start-title-main {
        font-size: clamp(20px, 7vw, 28px);
        letter-spacing: 2px;
      }

      #start-title-sub {
        font-size: clamp(24px, 8vw, 34px);
        letter-spacing: 2px;
      }

      #start-high-score {
        font-size: 9px;
        line-height: 1.6;
        word-break: break-word;
      }

      #name-canvas,
      #intro-canvas,
      #start-canvas {
        margin-bottom: 10px;
      }

      #name-prompt,
      #intro-text {
        font-size: 10px;
        line-height: 1.9;
      }

      #intro-caption {
        font-size: 8px;
        letter-spacing: 1px;
        margin-bottom: 8px;
      }

      #intro-text {
        min-height: 120px;
        margin-bottom: 10px;
      }

      #intro-skip {
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        right: calc(env(safe-area-inset-right, 0px) + 10px);
        font-size: 8px;
        padding: 8px 10px;
      }

      #name-form {
        gap: 8px;
      }

      #name-prefix {
        font-size: 10px;
      }

      #name-input {
        font-size: 16px;
        padding: 12px 12px;
      }

      #phase-alert-box {
        padding: 18px 16px;
        gap: 16px;
      }

      #phase-alert-title {
        font-size: 13px;
        line-height: 1.55;
      }

      #phase-alert-msg {
        font-size: 10px;
        line-height: 2;
      }

      #breaking-modal {
        padding: 12px;
      }

      #breaking-body {
        padding: 16px 14px 14px;
        gap: 14px;
      }

      #breaking-headline {
        font-size: 10px;
        line-height: 1.8;
      }

      #breaking-effects {
        gap: 10px;
      }

      .breaking-stat {
        font-size: 9px;
        padding: 7px 10px;
      }
    }

    @media (max-width: 400px) {
      body {
        padding-left: 8px;
        padding-right: 8px;
      }

      #topbar {
        padding: 10px 8px;
      }

      .stat-label,
      #score-label {
        font-size: 7px;
      }

      .stat-value,
      #score-live {
        font-size: 12px;
      }

      #score-high,
      #action-label,
      #go-leaderboard-status,
      #go-leaderboard-list,
      #start-high-score {
        font-size: 8px;
      }

      .card-name {
        font-size: 10px;
      }

      .effect-line,
      .card-badge {
        font-size: 8px;
      }

      #name-input {
        font-size: 14px;
      }
    }

    @media (max-height: 760px) and (orientation: landscape) {
      body {
        padding-top: 8px;
      }

      #title {
        margin-bottom: 8px;
      }

      #log-wrapper {
        height: 96px;
      }

      #gameover,
      #start-screen,
      #name-entry,
      #intro {
        padding-top: 10px;
        padding-bottom: 10px;
      }

      #intro-text {
        min-height: 88px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }