:root {
      --bg1: #090014;
      --bg2: #1b0038;
      --neon-pink: #ff4fd8;
      --neon-cyan: #3dfdff;
      --neon-yellow: #ffe45c;
      --text: #f9f7ff;
      --panel: rgba(8, 8, 28, 0.78);
      --line: rgba(255, 255, 255, 0.14);
      --shadow-pink: 0 0 18px rgba(255,79,216,.55);
      --shadow-cyan: 0 0 22px rgba(61,253,255,.55);
    }
    * { box-sizing: border-box; }
    html, body {
      width: 100%;
      min-height: 100%;
    }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 20% 20%, rgba(255,79,216,.18), transparent 30%),
        radial-gradient(circle at 80% 10%, rgba(61,253,255,.16), transparent 25%),
        linear-gradient(180deg, var(--bg2), var(--bg1));
      padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
      overflow-x: hidden;
      overflow-y: auto;
    }
    .wrap {
      width: min(980px, 100%);
      margin: 0 auto;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 24px;
      box-shadow: 0 24px 60px rgba(0,0,0,.45), var(--shadow-cyan);
      overflow: hidden;
      backdrop-filter: blur(8px);
    }
    .top {
      padding: 20px 22px 14px;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
    }
    h1 {
      margin: 0;
      font-size: clamp(26px, 5vw, 40px);
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--neon-pink);
      text-shadow: 0 0 12px rgba(255,79,216,.8), 0 0 28px rgba(255,79,216,.35);
    }
    .sub {
      margin-top: 8px;
      color: #d9d6ff;
      font-size: 14px;
      line-height: 1.5;
    }
    .content {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 0;
    }
    .game-col {
      padding: 18px;
      border-right: 1px solid var(--line);
    }
    .side-col {
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
    }
    .canvas-wrap {
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(61,253,255,.35);
      box-shadow: inset 0 0 40px rgba(0,0,0,.35), var(--shadow-cyan);
      background: #05000b;
    }
    canvas {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
      background:
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
        repeating-linear-gradient(
          to bottom,
          rgba(255,255,255,.015),
          rgba(255,255,255,.015) 2px,
          transparent 2px,
          transparent 4px
        ),
        #080010;
    }
    .hud {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }
    .score {
      font-size: clamp(24px, 4vw, 40px);
      font-weight: bold;
      text-align: center;
      color: var(--neon-cyan);
      text-shadow: 0 0 12px rgba(61,253,255,.9);
    }
    .name {
      font-size: 12px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: #ddd7ff;
    }
    .pill {
      padding: 8px 12px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 999px;
      font-size: 12px;
      color: #f5f2ff;
      background: rgba(255,255,255,.04);
      text-align: center;
    }
    .panel {
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 14px;
      background: rgba(255,255,255,.03);
      box-shadow: inset 0 0 18px rgba(255,255,255,.02);
    }
    .panel h2 {
      margin: 0 0 10px;
      font-size: 14px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--neon-yellow);
      text-shadow: 0 0 10px rgba(255,228,92,.45);
    }
    .controls-list {
      margin: 0;
      padding-left: 18px;
      line-height: 1.7;
      color: #f0eeff;
      font-size: 14px;
    }
    .buttons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    button {
      appearance: none;
      border: 0;
      cursor: pointer;
      border-radius: 14px;
      padding: 14px 16px;
      font-weight: bold;
      letter-spacing: .04em;
      color: #13051f;
      background: linear-gradient(135deg, var(--neon-yellow), #fff5a0);
      box-shadow: 0 8px 18px rgba(255,228,92,.25);
      transition: transform .08s ease, filter .15s ease;
    }
    button.alt {
      color: white;
      background: linear-gradient(135deg, var(--neon-pink), #ff8ae7);
      box-shadow: 0 8px 18px rgba(255,79,216,.24);
    }
    button:active { transform: translateY(1px) scale(.995); }
    button:hover { filter: brightness(1.04); }
    .mobile-help {
      display: none;
      font-size: 13px;
      color: #dad4ff;
      line-height: 1.6;
    }
    .footer-note {
      font-size: 12px;
      color: #bbb4ec;
      text-align: center;
      margin-top: 4px;
    }
    @media (max-width: 860px) {
      body {
        padding: 0 max(0px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(0px, env(safe-area-inset-left));
      }
      .wrap {
        width: 100%;
        border-radius: 0;
      }
      .top {
        padding: 14px 14px 10px;
      }
      .sub {
        font-size: 12px;
      }
      .content {
        grid-template-columns: 1fr;
      }
      .game-col {
        padding: 12px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }
      .side-col {
        padding: 12px;
        gap: 12px;
      }
      canvas {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
      }
      .mobile-help {
        display: block;
      }
      .buttons {
        order: -1;
        grid-template-columns: 1fr 1fr;
      }
      button {
        padding: 12px 14px;
        font-size: 13px;
      }
    }

.back-link { display:inline-block; margin-bottom:10px; color:var(--neon-cyan); text-decoration:none; font-size:12px; font-weight:800; letter-spacing:.14em; }
.back-link:hover, .back-link:focus-visible { color:#fff; text-shadow:var(--shadow-cyan); }
.name-right { text-align:right; }
.retro-copy { margin:0; color:#efeaff; }