* { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      background: #020205;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      font-family: 'Segoe UI', Tahoma, sans-serif;
      color: #666;
      overflow: hidden;
    }
    canvas {
      background: #050510;
      display: block;
      border: 2px solid #151525;
      border-radius: 6px;
      image-rendering: pixelated;
    }
    #ui {
      margin-top: 10px;
      text-align: center;
      font-size: 13px;
      font-family: monospace;
    }
    kbd {
      background: #101020;
      border: 1px solid #333;
      border-radius: 3px;
      padding: 2px 6px;
      color: #6cc;
      font-family: monospace;
    }
    #touchControls {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-top: 12px;
      touch-action: none;
    }
    #touchControls button {
      width: 52px;
      height: 46px;
      border: 1px solid #6cc;
      border-radius: 6px;
      background: #101c2b;
      color: #fff;
      font-size: 22px;
      touch-action: none;
    }
    @media (max-width: 800px) {
      body { justify-content: flex-start; padding-top: 12px; }
      canvas { width: 100vw; height: auto; max-height: 76vh; }
      #ui { max-width: 96vw; }
    }
    @media (min-width: 801px) {
      #touchControls { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); }
    }