* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  body{
      margin:0;
      background: linear-gradient(#1a2130, #2b3550);
      display:flex;
      flex-direction: column;
      justify-content:center;
      align-items:center;
      min-height:100vh;
      font-family: 'Segoe UI', Arial, sans-serif;
      color: white;
      overflow: hidden;
      user-select: none;
  }

  h1 {
      margin: 10px 0;
      font-size: 22px;
      letter-spacing: 1px;
      text-shadow: 0 2px 6px rgba(0,0,0,.6);
  }

  #game-wrap {
      position: relative;
  }

  canvas{
      background:#6bbf59;
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0,0,0,.5);
      touch-action:none;
      display:block;
  }

  #hud{
      position:absolute;
      top:14px;
      left:14px;
      right:14px;
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      pointer-events:none;
  }

  #score, #best, #level {
      font-size:16px;
      font-weight:bold;
      color:white;
      text-shadow:1px 1px 4px black;
      background: rgba(0,0,0,.3);
      padding: 4px 10px;
      border-radius: 8px;
      margin-bottom: 6px;
  }

  #lives {
      font-size: 20px;
      text-shadow:1px 1px 4px black;
      background: rgba(0,0,0,.3);
      padding: 2px 8px;
      border-radius: 8px;
  }

  #weatherBadge {
      position:absolute;
      top:14px;
      left:50%;
      transform:translateX(-50%);
      font-size:13px;
      background: rgba(0,0,0,.35);
      padding: 3px 10px;
      border-radius: 8px;
      display:none;
  }

  #flash {
      position:absolute;
      inset:0;
      background: rgba(255,0,0,.35);
      border-radius: 10px;
      pointer-events:none;
      opacity:0;
  }

  #overlay, #startOverlay, #levelUpOverlay {
      position:absolute;
      inset:0;
      background: rgba(0,0,0,.72);
      display:none;
      flex-direction: column;
      justify-content:center;
      align-items:center;
      border-radius: 10px;
      text-align:center;
      padding: 20px;
  }

  #startOverlay { display:flex; }

  #overlay h2, #startOverlay h2, #levelUpOverlay h2 {
      font-size: 24px;
      margin-bottom: 6px;
  }

  #overlay button, #startOverlay button {
      margin-top: 10px;
      padding: 10px 22px;
      font-size: 15px;
      border:none;
      border-radius: 8px;
      background:#FFD54F;
      color:#222;
      font-weight:bold;
      cursor:pointer;
  }
  #overlay button:hover, #startOverlay button:hover { background:#ffca28; }

  .vehicleRow {
      display:flex;
      gap:10px;
      margin: 12px 0;
  }

  .vehicleBtn {
      padding: 12px 10px;
      border-radius: 10px;
      border: 2px solid rgba(255,255,255,.3);
      background: rgba(255,255,255,.08);
      color:white;
      cursor:pointer;
      font-size: 13px;
      width: 110px;
      transition: .15s;
  }
  .vehicleBtn:hover { border-color:#FFD54F; background: rgba(255,255,255,.16); }
  .vehicleBtn.selected { border-color:#FFD54F; background: rgba(255,213,79,.2); }
  .vehicleBtn .emoji { font-size: 26px; display:block; margin-bottom:4px; }
  .vehicleBtn .stats { opacity:.75; font-size:11px; margin-top:4px; }

  #levelUpOverlay {
      background: rgba(0,0,0,.5);
      pointer-events:none;
  }
  #levelUpOverlay h2 {
      font-size: 34px;
      color:#FFD54F;
      text-shadow: 0 0 20px rgba(255,213,79,.8);
  }

  #hint {
      margin-top: 10px;
      font-size: 13px;
      opacity: .75;
      text-align: center;
      max-width: 400px;
      line-height: 1.4;
  }

  small.desc { display:block; opacity:.7; font-size:12px; margin-top: -4px; margin-bottom: 8px; }