:root {
  --obsidian: #111111;
  --slate: #222831;
  --silver: #BFC1C2;
  --blue: #89CFF0;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--obsidian); color: var(--silver);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  touch-action: none; user-select: none; -webkit-user-select: none; overscroll-behavior: none;
}
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

#touch[hidden], .overlay[hidden] { display: none; }
#touch button, #btnAim {
  position: fixed; border-radius: 50%; padding: 0; display: grid; place-items: center;
  background: rgba(17, 17, 17, 0.55); border: 1.5px solid var(--silver); color: var(--silver);
  touch-action: none;
}
#touch button svg, #btnAim svg { width: 42%; height: 42%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#touch button.on, #btnAim.on { background: rgba(137, 207, 240, 0.28); }
#btnAim { right: calc(22px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); width: 100px; height: 100px; border: 2px solid var(--blue) !important; color: var(--blue) !important; background: rgba(137, 207, 240, 0.1) !important; }
#btnJump { right: calc(134px + env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); width: 64px; height: 64px; }
#btnReload { right: calc(122px + env(safe-area-inset-right)); bottom: calc(100px + env(safe-area-inset-bottom)); width: 50px; height: 50px; }
#btnDraw { right: calc(52px + env(safe-area-inset-right)); bottom: calc(128px + env(safe-area-inset-bottom)); width: 50px; height: 50px; }
#stickZone { position: fixed; left: 0; top: 0; bottom: 0; width: 45%; touch-action: none; }
#stickBase {
  position: absolute; left: calc(34px + env(safe-area-inset-left)); bottom: calc(22px + env(safe-area-inset-bottom));
  width: 96px; height: 96px; border-radius: 50%; border: 1.5px solid rgba(191, 193, 194, 0.4);
  display: grid; place-items: center; pointer-events: none;
}
#stickKnob { width: 40px; height: 40px; border-radius: 50%; background: rgba(191, 193, 194, 0.4); }

.overlay {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px;
  background: rgba(17, 17, 17, 0.86); overflow: auto;
}
.card { max-width: 520px; width: 100%; padding: 20px 24px; border-radius: 14px; background: var(--slate); text-align: center; }
.card h1 { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 26px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
.card p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; }
.eyebrow { font-size: 11px !important; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); }
.keys { font-size: 12px !important; color: var(--silver); }
.primary {
  margin-top: 6px; min-height: 48px; padding: 0 28px; border: 0; border-radius: 10px;
  background: var(--blue); color: var(--obsidian); font: inherit; font-size: 15px; font-weight: 600;
}
dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 4px 0 12px; font-size: 14px; }
dt { text-align: right; } dd { margin: 0; text-align: left; color: #fff; font-weight: 600; }

#rotate { display: none; z-index: 20; background: var(--obsidian); }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: grid; } }
@media (pointer: coarse) { #howKeys { display: none; } }
@media (pointer: fine) { #howTouch { display: none; } }

#btnAim { pointer-events: none; }
#aimZone { position: fixed; right: 0; top: 0; bottom: 0; width: 55%; touch-action: none; }
#touch button { z-index: 2; }
#aimRing, #aimDot { position: fixed; left: 0; top: 0; pointer-events: none; border-radius: 50%; z-index: 3; }
#aimRing { width: 104px; height: 104px; margin: -52px 0 0 -52px; border: 1.5px solid rgba(137, 207, 240, 0.55); }
#aimDot { width: 30px; height: 30px; margin: -15px 0 0 -15px; background: rgba(137, 207, 240, 0.6); }
#aimRing[hidden], #aimDot[hidden] { display: none; }