*, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; min-height: 100vh; background: #04070f; color: #e6e9f2;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
    a { color: #ff7050; }
    .wrap { max-width: 1100px; margin: 0 auto; padding: 1rem; }
    .topbar { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap;
      padding: .5rem .25rem 1rem; font-size: .85rem; }
    .topbar a, .topbar button { text-decoration: none; opacity: .75; color: inherit;
      background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
    .topbar a:hover, .topbar button:hover { opacity: 1; }
    .topbar .sep { opacity: .35; }
    .topbar .pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
      background: #ff5025; box-shadow: 0 0 12px #ff5025;
      animation: pulse 2.4s ease-in-out infinite; vertical-align: middle; margin-right: .35rem; }
    @keyframes pulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } }
    h1 { margin: 0 0 .25rem; font-size: clamp(1.3rem, 4vw, 1.8rem); font-weight: 700;
      letter-spacing: .02em; }
    .lead { color: #a3aabb; margin: 0 0 1rem; font-size: .95rem; line-height: 1.55; }
    .game-frame { position: relative; background: #050810; border: 1px solid #1b2a44;
      border-radius: 12px; overflow: hidden; box-shadow: 0 14px 40px -16px rgba(0,0,0,0.8); }
    canvas { display: block; width: 100%; height: auto; image-rendering: pixelated;
      image-rendering: crisp-edges; }
    .hud { position: absolute; inset: 0; pointer-events: none; padding: .65rem .85rem;
      display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem;
      font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8rem; line-height: 1.3;
      color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
    .hud > div { background: rgba(0,0,0,0.5); padding: .35rem .55rem; border-radius: 6px;
      border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(4px); }
    .hud .style { min-width: 170px; }
    .hud .style h4 { margin: 0 0 .25rem; font-size: .65rem; letter-spacing: .08em;
      text-transform: uppercase; color: #ff9c70; font-weight: 600; }
    .hud .style .bar { display: grid; grid-template-columns: 70px 1fr; gap: .35rem;
      align-items: center; font-size: .68rem; margin: .12rem 0; }
    .hud .style .bar .lab { color: #c0c7d6; }
    .hud .style .bar .track { background: rgba(255,255,255,0.08); border-radius: 4px;
      height: 6px; overflow: hidden; }
    .hud .style .bar .fill { height: 100%; background: linear-gradient(90deg, #ff5025, #ff8c50);
      transition: width 0.3s; }
    .hud .dash { display: flex; align-items: center; gap: .4rem; margin-top: .25rem; }
    .hud .dash .dlabel { font-size: .65rem; color: #ff9c70; letter-spacing: .08em; text-transform: uppercase; }
    .hud .dash .dring { width: 14px; height: 14px; border-radius: 50%;
      background: conic-gradient(#ff5025 var(--d, 100%), rgba(255,255,255,0.1) 0); border: 1px solid rgba(255,255,255,0.15); }
    .hud .record { display: block; font-size: .65rem; color: #80ddff; margin-top: .25rem; }
    .dlg { position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
      background: rgba(10, 14, 26, 0.92); border: 1px solid #2a3a5a; border-radius: 14px;
      padding: .8rem 1rem .8rem 3.4rem; backdrop-filter: blur(8px); color: #e6e9f2;
      pointer-events: auto; cursor: pointer;
      transform: translateY(110%); opacity: 0; transition: transform .35s ease, opacity .35s ease;
      max-width: 720px; margin: 0 auto; font-size: .9rem; line-height: 1.5; }
    .dlg.is-on { transform: translateY(0); opacity: 1; }
    .dlg::before { content: ''; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
      width: 32px; height: 32px; border-radius: 50%;
      background: radial-gradient(circle at 50% 48%, #fff8e0 0%, #ffd060 12%, #ff5025 38%, #a8121a 78%, #3a0509 100%);
      box-shadow: 0 0 14px rgba(255,80,30,0.55), inset 0 0 6px rgba(255,200,80,0.5);
      animation: pulse 2.4s ease-in-out infinite; }
    .dlg .speaker { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
      color: #ff8a30; margin-bottom: .15rem; font-weight: 600; }
    .dlg .text { color: #e6e9f2; }
    .dlg .hint { display: block; margin-top: .25rem; font-size: .7rem; color: #6c7589; }
    .dlg .caret { display: inline-block; width: 6px; height: 14px; background: #ff8a30;
      margin-left: 2px; vertical-align: middle; animation: caret 1.1s steps(1) infinite; }
    @keyframes caret { 0%, 60% { opacity: 1; } 60%, 100% { opacity: 0; } }
    .controls-mobile { position: absolute; left: 0; right: 0; bottom: 0; display: none;
      justify-content: space-between; pointer-events: auto; user-select: none; }
    .controls-mobile button { width: 22%; height: 100px; background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12); border-radius: 0; color: #fff;
      font-size: 1.5rem; touch-action: none; -webkit-tap-highlight-color: transparent; font-weight: 600; }
    .controls-mobile button:active { background: rgba(255, 80, 30, 0.25); }
    .controls-mobile button.jump { width: 34%; background: rgba(255, 80, 30, 0.12);
      border-top: 1px solid rgba(255,80,30,0.4); }
    .controls-mobile button.dash { width: 22%; background: rgba(80, 180, 255, 0.12);
      border-top: 1px solid rgba(80,180,255,0.4); font-size: 1.2rem; }
    .overlay { position: absolute; inset: 0; display: grid; place-items: center;
      background: rgba(0,0,0,0.78); backdrop-filter: blur(8px); padding: 2rem;
      text-align: center; pointer-events: auto; }
    .overlay.hidden { display: none; }
    .overlay h2 { margin: 0 0 .5rem; font-size: clamp(1.4rem, 4vw, 2rem); }
    .overlay p  { margin: 0 0 1rem; color: #b8bfd0; max-width: 32rem; line-height: 1.55; }
    .overlay button { background: linear-gradient(135deg, #ff5025, #ff7050); color: #fff;
      border: 0; padding: .8rem 1.6rem; font-size: 1rem; font-weight: 600;
      border-radius: 999px; cursor: pointer; letter-spacing: .02em;
      box-shadow: 0 6px 20px -6px rgba(255,80,30,0.6); }
    .overlay button:hover { transform: translateY(-1px); }
    .keys { display: inline-flex; gap: .35rem; font-size: .75rem; color: #a3aabb;
      margin-top: 1rem; font-family: ui-monospace, monospace; flex-wrap: wrap; justify-content: center; }
    .keys kbd { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
      border-radius: 4px; padding: .15rem .45rem; font-size: .75rem; }
    .panel { margin: 1.5rem 0; background: #0a1322; border: 1px solid #1b2a44;
      border-radius: 12px; padding: 1.1rem 1.25rem; font-size: .92rem; line-height: 1.6;
      color: #c0c7d6; }
    .panel h3 { margin: 0 0 .6rem; color: #e6e9f2; font-size: 1rem; }
    .panel ul { padding-left: 1.2rem; margin: .25rem 0; }
    .panel code { background: rgba(255,255,255,0.06); padding: .05rem .35rem; border-radius: 3px;
      font-size: .85em; }

    /* ghost replay */
    .game-frame { /* keep, positions are set elsewhere */ }
    /* whisper (HAL observer) */
    .whisper { position: absolute; right: 1rem; bottom: 1rem;
      max-width: 320px; padding: .5rem .8rem .5rem 2.2rem;
      background: rgba(10,14,26,0.92); border: 1px solid #2a3a5a;
      border-radius: 12px; color: #e6e9f2; font-size: .8rem; line-height: 1.45;
      backdrop-filter: blur(6px); pointer-events: none;
      transform: translateY(20px); opacity: 0;
      transition: transform .3s ease, opacity .3s ease; z-index: 25; }
    .whisper.is-on { transform: translateY(0); opacity: 1; }
    .whisper::before { content: ''; position: absolute; left: .5rem; top: 50%;
      transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%;
      background: radial-gradient(circle at 50% 48%, #fff8e0 0%, #ffd060 18%, #ff5025 45%, #a8121a 85%, #3a0509 100%);
      box-shadow: 0 0 10px rgba(255,80,30,0.55); animation: pulse 2.4s ease-in-out infinite; }
    @media (max-width: 720px) {
      .whisper { bottom: 110px; right: .5rem; left: .5rem; max-width: none; }
    }

    @media (max-width: 720px) {
      .hud { font-size: .7rem; padding: .4rem .5rem; }
      .hud .style { min-width: 140px; }
      .controls-mobile { display: flex; }
      .dlg { font-size: .82rem; bottom: 110px; padding: .65rem .8rem .65rem 3rem; }
      .dlg::before { width: 26px; height: 26px; left: .8rem; }
    }