html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background: #000;
      overflow: hidden;
      touch-action: none;
      font-family: 'Rajdhani', sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

    canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    /* CYBERPUNK UPGRADE */
    body {
      perspective: 1000px;
      /* 3D Grid Support */
    }

    /* 3D Grid Background */
    .cyber-grid {
      position: fixed;
      top: 0;
      left: 0;
      width: 120vw;
      height: 120vh;
      margin-left: -10vw;
      /* Center override */
      background:
        linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 1) 100%),
        linear-gradient(90deg, rgba(0, 224, 255, 0.07) 1px, transparent 1px),
        linear-gradient(rgba(0, 224, 255, 0.07) 1px, transparent 1px);
      background-size: 100% 100%, 60px 60px, 60px 60px;
      transform: rotateX(25deg) scale(1.2) translateY(-50px);
      transform-origin: center top;
      animation: grid-scroll 10s linear infinite;
      z-index: -2;
      pointer-events: none;
    }

    @keyframes grid-scroll {
      0% {
        background-position: 0 0, 0 0, 0 0;
      }

      100% {
        background-position: 0 0, 0 60px, 0 60px;
      }
    }

    /* Cyber Button (Angled) */
    .btn-cyber {
      background: rgba(0, 224, 255, 0.05);
      border: 0;
      /* Remove default border */
      color: #00e0ff;
      padding: 18px 45px;
      font-family: 'Orbitron', sans-serif;
      font-size: 24px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 3px;
      clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
      box-shadow: inset 0 0 20px rgba(0, 224, 255, 0.1);
      transition: all 0.2s ease-out;
      cursor: pointer;
      position: relative;
      margin-top: 0;
      text-decoration: none;
      display: inline-block;
      text-align: center;
    }

    .btn-cyber:hover {
      background: #00e0ff;
      color: #000;
      box-shadow: 0 0 40px #00e0ff, inset 0 0 10px #fff;
      text-shadow: 2px 0 rgba(255, 255, 255, 0.8), -2px 0 rgba(0, 0, 0, 0.5);
      /* Glitch text */
      transform: translateY(-2px) scale(1.02);
    }

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

    /* Enhanced Neon Overlay */
    .neon-overlay {
      background: rgba(0, 5, 10, 0.95) !important;
      backdrop-filter: blur(10px);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 100;
      padding: 20px;
      box-sizing: border-box;
      overflow-y: auto;
    }

    /* Enhanced Neon Panel */
    .neon-panel {
      background: rgba(0, 15, 30, 0.85);
      /* Deep Dark Blue */
      backdrop-filter: blur(10px);
      border: 1px solid rgba(0, 224, 255, 0.3);
      box-shadow: 0 0 50px rgba(0, 0, 0, 0.9), inset 0 0 40px rgba(0, 0, 0, 0.6);
      /* Red border override happens inline or via .red-alert */
      clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
      border-radius: 0 !important;
      /* Override rounded corners for clip-path */
    }

    .neon-panel.red-alert {
      border: 1px solid #ff0055;
      box-shadow: 0 0 30px rgba(255, 0, 85, 0.2), inset 0 0 30px rgba(255, 0, 85, 0.1);
    }

    /* Responsive Neon Title */
    .neon-title {
      font-family: 'Orbitron', sans-serif;
      font-size: clamp(50px, 10vw, 84px);
      color: #ff0055;
      text-shadow: 0 0 10px #ff0055, 0 0 40px #ff0055;
      margin: 0 0 20px 0;
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: 'Orbitron', sans-serif;
      color: #fff;
    }

    p,
    li {
      font-family: 'Rajdhani', sans-serif;
      color: #ddd;
    }

    /* Red Cyber Button */
    .btn-cyber-red {
      background: rgba(255, 0, 85, 0.1);
      border: 0;
      color: #ff0055;
      padding: 18px 45px;
      font-family: 'Orbitron', sans-serif;
      font-size: 24px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 3px;
      clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
      box-shadow: inset 0 0 20px rgba(255, 0, 85, 0.2);
      transition: all 0.2s ease-out;
      cursor: pointer;
      position: relative;
      margin-top: 30px;
    }

    .btn-cyber-red:hover {
      background: #ff0055;
      color: #fff;
      box-shadow: 0 0 40px #ff0055, inset 0 0 10px #fff;
      transform: scale(1.05);
    }

    /* Glitch Animation Helper */
    .glitch {
      position: relative;
    }

    .glitch::before,
    .glitch::after {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: transparent;
    }

    .glitch::before {
      left: 2px;
      text-shadow: -1px 0 #ff00de;
      clip: rect(24px, 550px, 90px, 0);
      animation: glitch-anim-1 2.5s infinite linear alternate-reverse;
    }

    .glitch::after {
      left: -2px;
      text-shadow: -1px 0 #00ffff;
      clip: rect(85px, 550px, 140px, 0);
      animation: glitch-anim-2 3s infinite linear alternate-reverse;
    }

    @keyframes glitch-anim-1 {
      0% {
        clip: rect(20px, 9999px, 80px, 0);
      }

      20% {
        clip: rect(80px, 9999px, 10px, 0);
      }

      40% {
        clip: rect(10px, 9999px, 90px, 0);
      }

      60% {
        clip: rect(60px, 9999px, 30px, 0);
      }

      80% {
        clip: rect(90px, 9999px, 20px, 0);
      }

      100% {
        clip: rect(30px, 9999px, 60px, 0);
      }
    }

    @keyframes glitch-anim-2 {
      0% {
        clip: rect(65px, 9999px, 100px, 0);
      }

      100% {
        clip: rect(10px, 9999px, 40px, 0);
      }
    }

    #start-screen {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.65);
      display: flex;
      flex-direction: column;
      align-items: center;
      /* justify-content: center;  <-- REMOVED for safe scrolling */
      color: white;
      z-index: 10;
      overflow-y: auto;
      /* Scrollable on small screens */
    }

    /* SAFE CENTERING FIX */
    #start-screen .container {
      margin: auto;
      /* Vertically centers if space permits, tops aligns if overflow */
    }

    .container {
      width: 90%;
      max-width: 1200px;
      text-align: center;
      padding: 20px 0;
    }

    /* Typography & Neon */
    .title {
      font-family: 'Orbitron', sans-serif;
      font-size: clamp(60px, 12vw, 90px);
      margin: 0;
      color: #fff;
      text-shadow:
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #ff00de,
        0 0 40px #ff00de,
        0 0 80px #ff00de;
      letter-spacing: 2px;
    }

    .neon-flicker {
      animation: flicker 2s infinite;
    }

    .subtitle {
      font-family: 'Orbitron', sans-serif;
      font-size: clamp(14px, 3vw, 24px);
      color: #00e0ff;
      margin-top: 10px;
      letter-spacing: 4px;
      text-shadow: 0 0 10px #00e0ff;
    }

    /* Button */
    .btn-neon {
      margin-top: 40px;
      background: rgba(0, 255, 0, 0.1);
      border: 2px solid #0f0;
      color: #fff;
      padding: 15px 50px;
      font-family: 'Orbitron', sans-serif;
      font-size: 24px;
      cursor: pointer;
      box-shadow: 0 0 10px #0f0, inset 0 0 10px #0f0;
      transition: all 0.2s;
      text-transform: uppercase;
    }

    .btn-blue {
      border-color: #00e0ff;
      color: #00e0ff;
      box-shadow: 0 0 10px #00e0ff, inset 0 0 10px #00e0ff;
      margin-top: 20px;
    }

    .btn-blue:hover {
      background: #00e0ff;
      color: #000;
      box-shadow: 0 0 40px #00e0ff;
    }

    .btn-neon:hover {
      background: #0f0;
      color: #000;
      box-shadow: 0 0 40px #0f0;
      transform: scale(1.05);
    }

    .mp-lobby {
      background: rgba(0, 10, 20, 0.95);
      border: 2px solid #00e0ff;
      padding: 20px;
      border-radius: 10px;
      margin: 20px auto;
      width: 100%;
      max-width: 480px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      box-shadow:
        0 0 10px #00e0ff,
        0 0 40px rgba(0, 224, 255, 0.6),
        inset 0 0 20px rgba(0, 224, 255, 0.2);
      animation: pulsate-border 2s infinite alternate;
    }

    @keyframes pulsate-border {
      0% {
        box-shadow: 0 0 10px #00e0ff, 0 0 20px rgba(0, 224, 255, 0.4);
        border-color: #00e0ff;
      }

      100% {
        box-shadow: 0 0 20px #00e0ff, 0 0 60px rgba(0, 224, 255, 0.8);
        border-color: #00ffff;
      }
    }

    .mp-lobby h3 {
      margin: 0;
      color: #00e0ff;
      font-family: 'Orbitron', sans-serif;
      font-size: 18px;
    }

    .btn-small {
      background: rgba(0, 224, 255, 0.1);
      border: 1px solid #00e0ff;
      color: #00e0ff;
      padding: 8px 20px;
      font-family: 'Orbitron', sans-serif;
      cursor: pointer;
      transition: all 0.2s;
      text-transform: uppercase;
      font-weight: bold;
    }

    .btn-small:hover {
      background: #00e0ff;
      color: #000;
      box-shadow: 0 0 10px #00e0ff;
    }

    .join-row {
      display: flex;
      gap: 10px;
      justify-content: center;
      align-items: center;
    }

    .separator {
      color: #555;
      font-size: 12px;
      margin: 5px 0;
    }

    #mp-code-input {
      background: rgba(0, 0, 0, 0.5);
      border: 1px solid #00e0ff;
      color: #fff;
      padding: 8px;
      font-family: 'Orbitron', sans-serif;
      font-size: 16px;
      width: 80px;
      text-align: center;
      text-transform: uppercase;
      outline: none;
    }

    #mp-code-input:focus {
      box-shadow: 0 0 10px rgba(0, 224, 255, 0.5);
    }

    .status-text {
      font-size: 14px;
      color: #fff;
      min-height: 20px;
      text-align: center;
      font-family: 'Rajdhani', sans-serif;
    }

    .btn-tiny {
      font-size: 12px;
      border: none;
      background: none;
      color: #555;
      cursor: pointer;
      text-decoration: underline;
      font-family: 'Rajdhani', sans-serif;
      margin-top: 5px;
    }

    .stats-panel {
      background: rgba(0, 0, 0, 0.6);
      border: 1px solid #333;
      padding: 20px;
      border-radius: 8px;
      width: 90%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-left: auto;
      margin-right: auto;
    }

    .settings-menu {
      background: rgba(0, 10, 20, 0.9);
      border: 1px solid #00e0ff;
      padding: 20px;
      border-radius: 8px;
      width: 100%;
      max-width: 480px;
      margin: 30px auto;
      box-sizing: border-box;
      box-shadow: 0 0 15px rgba(0, 224, 255, 0.15);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .setting-row {
      display: grid;
      grid-template-columns: 210px 1fr 30px;
      align-items: center;
      gap: 10px;
      color: #00e0ff;
      font-family: 'Orbitron', sans-serif;
      font-size: 16px;
    }

    .setting-row label,
    .setting-row span.label {
      text-align: left;
      white-space: nowrap;
    }

    .setting-row input {
      width: 100%;
      cursor: pointer;
    }

    .setting-row span {
      text-align: right;
      color: white;
      width: auto;
    }

    /* Range Input Customization */
    input[type=range] {
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      height: 16px;
      width: 16px;
      border-radius: 50%;
      background: #00e0ff;
      cursor: pointer;
      margin-top: -6px;
      box-shadow: 0 0 5px #00e0ff;
    }

    input[type=range]::-webkit-slider-runnable-track {
      width: 100%;
      height: 4px;
      cursor: pointer;
      background: #333;
      border-radius: 2px;
    }

    /* Checkbox Customization */
    input[type=checkbox] {
      appearance: none;
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      background: rgba(0, 0, 0, 0.5);
      border: 1px solid #00e0ff;
      border-radius: 4px;
      cursor: pointer;
      position: relative;
    }

    input[type=checkbox]:checked {
      background: #00e0ff;
      box-shadow: 0 0 10px #00e0ff;
    }

    input[type=checkbox]:checked::after {
      content: '✔';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #000;
      font-size: 14px;
      line-height: 1;
    }

    /* Grid Layout */
    .legend-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      margin-top: 50px;
      text-align: left;
      width: 100%;
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
    }

    .panel {
      background: rgba(0, 20, 40, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.1);
      padding: 20px;
      border-radius: 8px;
      backdrop-filter: blur(4px);
    }

    .panel h3 {
      margin-top: 0;
      border-bottom: 2px solid;
      padding-bottom: 5px;
      font-family: 'Orbitron', sans-serif;
      text-align: center;
    }

    .blue-glow {
      border-color: #00aaff;
      box-shadow: 0 0 15px rgba(0, 170, 255, 0.2);
    }

    .blue-glow h3 {
      color: #00aaff;
      border-color: #00aaff;
    }

    .green-glow {
      border-color: #00d76b;
      box-shadow: 0 0 15px rgba(0, 215, 107, 0.25);
    }

    .green-glow h3 {
      color: #00ff8a;
      border-color: #00ff8a;
    }

    /* Neon Overlay & Game Over Styles */
    .neon-overlay {
      display: none;
      /* Controlled by JS */
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(8px);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 200;
      overflow-y: auto;
      padding: 20px;
      box-sizing: border-box;
    }

    .neon-panel {
      background: rgba(0, 10, 20, 0.8);
      border: 1px solid rgba(255, 0, 85, 0.5);
      box-shadow: 0 0 30px rgba(255, 0, 85, 0.1), inset 0 0 20px rgba(255, 0, 85, 0.05);
      backdrop-filter: blur(10px);
      padding: 25px;
      border-radius: 4px;
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
      text-align: center;
      box-sizing: border-sizing;
      position: relative;
    }

    /* Decoration elements for panel */
    .neon-panel::before {
      content: '';
      position: absolute;
      top: -1px;
      left: -1px;
      width: 20px;
      height: 20px;
      border-top: 2px solid #ff0055;
      border-left: 2px solid #ff0055;
    }

    .neon-panel::after {
      content: '';
      position: absolute;
      bottom: -1px;
      right: -1px;
      width: 20px;
      height: 20px;
      border-bottom: 2px solid #ff0055;
      border-right: 2px solid #ff0055;
    }

    .btn-cyber-red {
      background: rgba(255, 0, 85, 0.1);
      border: 1px solid rgba(255, 0, 85, 0.5);
      /* Explicit border for red button */
      color: #ff0055;
      padding: 18px 45px;
      font-family: 'Orbitron', sans-serif;
      font-size: 24px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 3px;
      clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
      box-shadow: inset 0 0 20px rgba(255, 0, 85, 0.2);
      transition: all 0.2s ease-out;
      cursor: pointer;
      position: relative;
      margin-top: 30px;
      text-decoration: none;
    }

    .btn-cyber-red:hover {
      background: #ff0055;
      color: #fff;
      box-shadow: 0 0 40px #ff0055, inset 0 0 10px #fff;
      transform: translateY(-2px) scale(1.02);
      text-shadow: 0 0 10px #fff;
    }

    .btn-cyber-red:active {
      transform: translateY(1px);
    }

    .neon-title {
      font-family: 'Orbitron', sans-serif;
      font-size: 64px;
      color: #ff0055;
      text-shadow: 0 0 20px #ff0055;
      margin-bottom: 20px;
      margin-top: 20px;
      text-transform: uppercase;
      letter-spacing: 5px;
    }

    .neon-flicker {
      animation: neon-flow 4s ease-in-out infinite alternate;
    }

    .neon-title .neon-flicker {
      animation: neon-flow 4s ease-in-out infinite alternate;
    }

    /* Smooth Color Flow Animation */
    @keyframes neon-flow {
      0% {
        color: #fff;
        text-shadow:
          0 0 5px #fff,
          0 0 10px #fff,
          0 0 20px #ff00de,
          0 0 40px #ff00de,
          0 0 80px #ff00de;
      }

      100% {
        color: #d0ffff;
        text-shadow:
          0 0 5px #fff,
          0 0 10px #fff,
          0 0 20px #00e0ff,
          0 0 40px #00e0ff,
          0 0 80px #00e0ff;
      }
    }

    .stats-grid-responsive {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin: 20px 0;
    }

    @media (max-width: 600px) {
      .stats-grid-responsive {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .neon-title {
        font-size: 36px;
        margin-top: 20px;
      }

      .neon-panel {
        padding: 15px;
        width: 100%;
      }

      /* Adjust stats font size for mobile */
      #go-cashflow {
        font-size: 32px !important;
      }

      #go-score,
      #go-time {
        font-size: 20px !important;
      }
    }


    .red-glow {
      border-color: #ff3333;
      box-shadow: 0 0 15px rgba(255, 50, 50, 0.2);
    }

    .red-glow h3 {
      color: #ff3333;
      border-color: #ff3333;
    }

    /* Items */
    .item-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .item-list li {
      display: flex;
      align-items: center;
      font-size: 18px;
    }

    .item-list li span:nth-child(2) {
      flex: 1;
      padding-left: 10px;
      font-weight: 700;
    }

    .item-list .desc {
      color: #aaa;
      font-size: 14px;
      text-transform: uppercase;
      text-align: right;
    }

    /* Icons */
    .icon {
      display: inline-block;
      width: 14px;
      height: 14px;
      vertical-align: middle;
      box-shadow: 0 0 5px currentColor;
    }

    .circle {
      border-radius: 50%;
    }

    .square {
      border-radius: 2px;
    }

    .tri {
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 14px solid magenta;
      background: none;
      box-shadow: none;
      filter: drop-shadow(0 0 5px magenta);
    }

    .cross {
      background: transparent;
      box-shadow: none;
      position: relative;
      width: 16px;
      height: 16px;
    }

    .cross::before,
    .cross::after {
      content: '';
      position: absolute;
      background: white;
      box-shadow: 0 0 5px white;
    }

    .cross::before {
      width: 16px;
      height: 5px;
      top: 5.5px;
      left: 0;
    }

    .cross::after {
      width: 5px;
      height: 16px;
      left: 5.5px;
      top: 0;
    }

    /* Colors */
    .yellow {
      background: yellow;
      color: yellow;
    }

    .orange {
      background: orange;
      color: orange;
    }

    .blue {
      background: #0066ff;
      color: #0066ff;
    }

    .sky {
      background: #00e0ff;
      color: #00e0ff;
    }

    .gold {
      background: gold;
      color: gold;
    }

    .green {
      background: #0f0;
      color: #0f0;
    }

    .red {
      background: #f00;
      color: #f00;
    }

    .aqua {
      background: aquamarine;
      color: aquamarine;
    }

    .purple {
      background: #aa00ff;
      color: #aa00ff;
    }

    .gray {
      background: #888;
      color: #888;
    }

    .white {
      color: white;
    }

    .magenta {
      color: magenta;
    }

    .black-halo {
      background: black;
      border: 2px solid #a0f;
      box-shadow: 0 0 10px #a0f;
      width: 10px;
      height: 10px;
    }

    .big-red {
      width: 20px;
      height: 20px;
      background: #f00;
      color: #f00;
    }

    .footer {
      margin-top: 40px;
      color: #666;
      font-size: 14px;
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.5;
      }
    }

    /* Mobile Responsiveness */
    @media (max-width: 900px) {
      #start-screen {
        padding: 12px;
        overflow-y: auto;
      }

      .container {
        width: 100%;
        max-width: 100%;
        padding: 16px;
        box-sizing: border-box;
      }

      .title {
        font-size: 38px;
        line-height: 1.05;
        margin-bottom: 8px;
      }

      .subtitle {
        font-size: 16px;
      }

      .btn-neon,
      .btn-blue,
      .btn-small,
      .btn-tiny {
        width: 100%;
        max-width: none;
        font-size: 16px;
        padding: 12px 14px;
      }

      .mp-lobby {
        width: 100%;
        max-width: 100%;
        padding: 16px;
      }

      .join-row {
        flex-direction: column;
      }

      #mp-code-input {
        font-size: 20px !important;
      }

      .legend-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 20px;
      }

      .panel {
        padding: 12px;
        min-height: auto;
      }

      .item-list li {
        font-size: 16px;
      }

      .settings-menu {
        width: 100%;
        flex-direction: column;
        gap: 12px;
      }

      .setting-row {
        width: 100%;
      }

      .footer {
        font-size: 14px;
        text-align: center;
      }
    }


    /* Footer Navigation (Restored) */
    .footer-nav {
      margin-top: 20px;
      margin-bottom: 30px;
      font-size: 12px;
      font-family: 'Rajdhani', sans-serif;
      text-align: center;
      display: flex;
      justify-content: center;
      gap: 20px;
    }

    .footer-link {
      color: #888;
      text-decoration: none;
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 1px;
      position: relative;
    }

    .footer-link:hover {
      color: #00e0ff;
      text-shadow: 0 0 8px #00e0ff;
    }

    .footer-link.highlight {
      color: #ff0055;
      border-bottom: 1px solid rgba(255, 0, 85, 0.3);
    }

    .footer-link.highlight:hover {
      color: #ff0055;
      text-shadow: 0 0 8px #ff0055;
      border-bottom-color: #ff0055;
    }