@media (max-width: 768px) {
      #minimap { width: 120px; height: 120px; }
      #timerHud { font-size: 16px; }
      #debugInfo { font-size: 10px; width: 140px; }
      #mapIndicator { font-size: 12px; }
    }
    body { margin: 0; overflow: hidden; }
    canvas { display: block; }
    #instructions {
      position: absolute;
      top: 50%;
      width: 100%;
      text-align: center;
      font-size: 24px;
      color: white;
      font-family: sans-serif;
    }
    #startScreen {
      position: absolute;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0,0,0,0.85);
      color: white;
      font-family: sans-serif;
      text-align: center;
      padding-top: 25vh;
      z-index: 1000;
    }
    .startScreen {
      padding: 10px 20px;
      margin: 10px;
    }
    #winScreen, #deathScreen {
      display: none;
      position: absolute;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0,0,0,0.8);
      color: white;
      font-family: sans-serif;
      text-align: center;
      padding-top: 20vh;
      z-index: 100;
    }
    #restartButton {
      padding: 12px 24px;
      font-size: 18px;
      cursor: pointer;
      background: limegreen;
      border: none;
      border-radius: 8px;
    }
    #minimap {
      position:absolute;
      top:10px;
      left:10px;
      border:2px solid white;
      z-index:10;
    }
    #debugInfo {
      position: absolute;
      top: 10px;
      right: 10px;
      padding: 6px 10px;
      font-size: 12px;
      font-family: monospace;
      color: #ccc;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: 10;
      white-space: pre;
      border-radius: 6px;
      width: 180px;
      text-align: right;
    }
    #minimap, #debugInfo {
      transition: opacity 0.3s ease;
    }
    #minimap.hidden, #debugInfo.hidden {
      opacity: 0;mo
    }
    #mapIndicator {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(0, 0, 0, 0.6);
      color: white;
      font-family: monospace;
      font-size: 14px;
      padding: 5px 10px;
      border-radius: 6px;
      z-index: 12;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    #mapIndicator.visible {
      opacity: 1;
    }
    #countdown {
      display:none;
      position:fixed;
      top:0; left:0;
      width:100%; height:100%;
      background:rgba(0,0,0,0.8);
      color:white;
      font-family:sans-serif;
      font-size:100px;
      font-weight:bold;
      text-align:center;
      line-height:100vh;
      z-index:999;
      transition:opacity 0.5s ease;
    }
    .timeInfo {
      color: #ffd700;
      text-shadow: 1px 1px 2px black;
    }
    #timerHud {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      font-family: monospace;
      font-size: 20px;
      color: #00ffcc;
      background: rgba(0, 0, 0, 0.6);
      padding: 5px 12px;
      border-radius: 8px;
      z-index: 15;
      display: none;
      text-shadow: 1px 1px 2px black;
    }
    /* Touch joystick UI */
    #joystick {
      position: absolute;
      bottom: 10vh;
      left: 10vw;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.5);
      background: rgba(255, 255, 255, 0.1);
      touch-action: none;
      z-index: 20;
    }
    #stick {
      position: absolute;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: rgba(0, 255, 255, 0.6);
      left: 25px;
      top: 25px;
    }
    
/* Right joystick (for camera rotation) */
#lookJoystick {
  position: absolute;
  bottom: 10vh;
  right: 10vw;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
  touch-action: none;
  z-index: 20;
}

#lookStick {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 0, 100, 0.6);
  left: 25px;
  top: 25px;
}