/* Gunners SC — game page */
:root {
  --bg: #0b0e13;
  --red: #d42020;
  --blue: #2f6bff;
  --ink: #ffffff;
  --btn: clamp(64px, 15vmin, 104px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: dark;
}
html, body {
  margin: 0; height: 100%; background: var(--bg); overflow: hidden;
  touch-action: none; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
body { display: flex; align-items: center; justify-content: center; }
canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; outline: none; }

/* ---------- touch controls ---------- */
#touch { position: fixed; inset: 0; pointer-events: none; z-index: 5; font-family: ui-monospace, Menlo, Consolas, monospace; }
#touch[hidden] { display: none; }
#joyZone { position: absolute; left: 0; top: 12%; bottom: 0; width: 50%; pointer-events: auto; }
#joyBase {
  position: absolute; width: calc(var(--btn) * 1.25); height: calc(var(--btn) * 1.25);
  margin: calc(var(--btn) * -0.625) 0 0 calc(var(--btn) * -0.625);
  border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
#joyKnob {
  position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; margin: -23% 0 0 -23%;
  border-radius: 50%; background: rgba(255, 255, 255, 0.7); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
#touch button {
  position: absolute; pointer-events: auto; border: 3px solid rgba(0, 0, 0, 0.55); border-radius: 50%;
  color: var(--ink); font: 700 clamp(11px, 2.4vmin, 15px)/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.06em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.25), 0 3px 0 rgba(0, 0, 0, 0.35);
  touch-action: none; padding: 0; opacity: 0.8;
}
#touch button.down { transform: translateY(3px) scale(0.96); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25); opacity: 1; }
#btnPass {
  width: var(--btn); height: var(--btn); background: var(--blue);
  right: calc(var(--btn) * 1.15 + var(--safe-r) + 12px); bottom: calc(14px + var(--safe-b));
}
#btnShoot {
  width: calc(var(--btn) * 1.12); height: calc(var(--btn) * 1.12); background: var(--red);
  right: calc(12px + var(--safe-r)); bottom: calc(var(--btn) * 0.62 + 14px + var(--safe-b));
}
#btnPause {
  width: 44px; height: 44px; right: calc(10px + var(--safe-r)); top: calc(10px + var(--safe-t));
  background: rgba(20, 26, 36, 0.8); font-size: 14px; border-radius: 10px;
}

/* tablets: pitch docked to the top, controls in a strip underneath */
body.dock-bottom { align-items: flex-start; padding-top: var(--safe-t); box-sizing: border-box; }
body.dock-bottom #btnPass { bottom: calc(10px + var(--safe-b)); right: calc(var(--btn) + 28px + var(--safe-r)); }
body.dock-bottom #btnShoot { width: var(--btn); height: var(--btn); bottom: calc(10px + var(--safe-b)); }
body.dock-bottom #btnPause { top: auto; bottom: calc(10px + var(--safe-b) + (var(--btn) - 44px) / 2); right: auto; left: 50%; transform: translateX(-50%); }
body.dock-bottom #joyZone { top: 0; }

/* ---------- portrait phones: ask to rotate ---------- */
#rotate {
  display: none; position: fixed; inset: 0; z-index: 10; background: var(--bg); color: var(--ink);
  align-items: center; justify-content: center; text-align: center;
  font: 700 16px/1.6 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.08em; padding: 24px;
}
#rotate .phone {
  width: 44px; height: 72px; margin: 0 auto 18px; border: 4px solid var(--ink); border-radius: 8px;
  animation: tilt 1.8s ease-in-out infinite;
}
@keyframes tilt { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (pointer: coarse) and (max-width: 820px) {
  #rotate { display: flex; }
}
@media (prefers-reduced-motion: reduce) { #rotate .phone { animation: none; transform: rotate(-90deg); } }