body {
  margin: 0;
  background: radial-gradient(
    circle at top,
    #2b1a4a 0%,
    #0b0b12 60%,
    #050508 100%
  );
  color: #f2d8ff;
  text-align: center;
  font-family: sans-serif;
  min-height: 100svh;
  overflow: hidden;
  overscroll-behavior: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-shell {
  position: relative;
  width: min(100vw, calc(100svh * 4 / 3));
  aspect-ratio: 4 / 3;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: linear-gradient(180deg, #110b1f 0%, #05050a 100%);
  border: 2px solid #6b4cff;
  box-shadow: 0 0 24px rgba(107, 76, 255, 0.25);
}

#touchControls { display: none; }

@media (pointer: coarse), (max-width: 820px) {
  body { touch-action: none; }
  #touchControls { display: block; position: fixed; inset: 0; pointer-events: none; }
  .touch-zone { position: absolute; top: 0; bottom: 0; width: calc((100vw - min(100vw, calc(100svh * 4 / 3))) / 2); pointer-events: auto; touch-action: none; }
  .move-zone { left: 0; background: linear-gradient(90deg, rgba(10,8,18,.7), rgba(30,18,50,.22)); border-right: 1px solid rgba(107,76,255,.2); }
  .aim-zone { right: 0; background: linear-gradient(270deg, rgba(10,8,18,.7), rgba(50,20,30,.2)); border-left: 1px solid rgba(255,116,92,.18); }
  .joystick { display: none; position: absolute; width: 112px; height: 112px; transform: translate(-50%,-50%); }
  .joystick.visible { display: block; }
  .joystick-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(205,220,255,.5); background: rgba(12,12,22,.32); box-shadow: inset 0 0 20px rgba(107,76,255,.25); }
  .joystick-knob { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px; border-radius: 50%; background: rgba(190,205,255,.65); border: 2px solid rgba(255,255,255,.75); box-shadow: 0 0 15px rgba(107,76,255,.55); }
  .aim-joystick .joystick-ring { border-color: rgba(255,150,125,.6); }
  .aim-joystick .joystick-knob { background: rgba(255,116,92,.7); }
  .hud-button { position: absolute; pointer-events: auto; touch-action: none; user-select: none; top: max(10px, env(safe-area-inset-top)); height: 38px; border-radius: 12px; color: #fff; border: 1px solid rgba(255,255,255,.5); background: rgba(10,10,18,.72); font-weight: 800; -webkit-tap-highlight-color: transparent; }
  .hud-button:active { transform: scale(.94); }
  .auto-button { left: 8px; width: 72px; font-size: 11px; color: #78e9ad; }
  .auto-button.off { color: #aaa; }
  .pause-button { right: max(9px, env(safe-area-inset-right)); width: 42px; }
  .touch-hint { position: absolute; left: 0; right: 0; bottom: 5%; text-align: center; color: rgba(255,255,255,.35); font-size: 11px; font-weight: 700; text-shadow: 0 1px 3px #000; }
  .rotate-hint { display: none; }
  #touchControls:not([data-state="playing"]):not([data-state="village"]) .touch-hint,
  #touchControls:not([data-state="playing"]) .auto-button { display: none; }
  #touchControls:not([data-state="playing"]):not([data-state="paused"]) .pause-button { display: none; }
}

@media (pointer: coarse) and (orientation: portrait) {
  .touch-zone { display: none; }
  .rotate-hint { display: block; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: max-content; padding: 9px 14px; border-radius: 12px; background: rgba(8,8,15,.78); color: #ddd; font-size: 12px; }
}