/* Drone Down — HUD and menu styling
 *
 *  1. Theme and base
 *  2. Screens (menu, game over, upgrade pick)
 *  3. Buttons
 *  4. HUD layout and top bar
 *  5. Crosshair
 *  6. Center messages
 *  7. Health, deflector and boss bars
 *  8. Floor scan
 *  9. Indicators (edge arrows, score pop-ups, radar)
 * 10. Screen flashes and the pause banner
 * 11. Upgrade cards
 * 12. Leaderboard (screen, name entry, on-screen keyboard)
 */

/* ---------- 1. Theme and base ---------- */

:root {
  --cyan: #3ff3ff;
  --red: #ff4a3d;
  --magenta: #ff3fd2;
  --blue: #4a7dff;
  --purple: #c77dff;
  --panel: rgba(8, 12, 20, 0.78);
  --text: #e8f6ff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #05070b;
  color: var(--text);
  font-family: "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

#app canvas { display: block; }

/* Look-around mode only: the phone's camera feed behind the (transparent) game
   view. The layering is switched on by body.look-mode (look-around.js) so it
   never touches full AR, where Chrome stacks the camera and overlay itself. */
#camera-feed { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
#world-feed { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }   /* iPhone AR camera (world-tracker.js) */
body.look-mode #app { position: relative; z-index: 1; }
body.look-mode #overlay { z-index: 2; }

#overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;   /* let taps fall through except on buttons */
}

.hidden { display: none !important; }

/* ---------- 2. Screens ---------- */

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(10, 20, 35, 0.92), rgba(3, 5, 9, 0.97));
  pointer-events: auto;
}
.screen.dim { background: rgba(3, 5, 9, 0.72); }   /* upgrade pick: game stays visible */

h1 {
  margin: 0;
  font-size: clamp(42px, 12vw, 72px);
  letter-spacing: 0.08em;
  font-weight: 800;
}
h1 span, h2 span { color: var(--red); }
h2 { margin: 0 0 8px; letter-spacing: 0.06em; }

.tagline { margin: 0; opacity: 0.85; }
.status { margin: 6px 0; color: var(--cyan); max-width: 340px; }
.event-blurb { margin: 4px 0 0; font-weight: 700; max-width: 320px; }   /* holiday mode line (colored by its css) */
.hint { margin-top: 10px; font-size: 13px; opacity: 0.6; max-width: 320px; }

/* Menu: QR code (desktop only) and version label */
#qr-block { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6px; }
#qr-block img { border-radius: 10px; background: #fff; padding: 8px; box-sizing: content-box; }
#qr-block p { margin: 0; font-size: 13px; opacity: 0.8; }
.version { margin: 0; font-size: 11px; opacity: 0.4; }
.engine-credit { flex-basis: 100%; order: -1; margin: 0; font-size: 10px; opacity: 0.45; text-align: left; }
.engine-credit a { color: inherit; }
.privacy-link { font-size: 11px; color: var(--text); opacity: 0.5; }
/* Last error note (safety.js) — small, so players barely notice it */
.last-error { flex-basis: 100%; order: -2; margin: 0; font-size: 11px; color: var(--red); opacity: 0.75; text-align: left; }

/* Title screen layout: the main block is centered when it fits; on short
   phones the screen scrolls instead of cutting off the top and bottom.
   The small print sits under everything rather than on top of the buttons. */
#menu { justify-content: flex-start; gap: 0; overflow-y: auto; touch-action: pan-y;
  padding: max(18px, env(safe-area-inset-top)) 20px max(8px, env(safe-area-inset-bottom)); }
.menu-main { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.menu-footer { width: 100%; margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }

/* Shorter screens: tighter spacing so the whole menu fits without scrolling */
@media (max-height: 860px) {
  .menu-main { gap: 10px; }
  #menu h1 { font-size: clamp(38px, 11vw, 56px); }
  #menu .btn, #menu .support-link { padding-top: 11px; padding-bottom: 11px; }
  #menu .status { margin: 0; }
  #menu .hint { margin-top: 0; font-size: 12px; }
}
@media (max-height: 700px) {
  .menu-main { gap: 8px; }
  #menu .tagline { display: none; }
  #menu .btn, #menu .support-link { padding-top: 9px; padding-bottom: 9px; font-size: 16px; }
  #menu .status, #menu .event-blurb { font-size: 14px; }
}
@media (max-height: 600px) {
  #menu .hint { display: none; }      /* the safety tips are also on the Privacy & Safety page */
}

/* ---------- 3. Buttons ---------- */

.btn {
  pointer-events: auto;
  min-width: 220px;
  padding: 14px 22px;
  border: 1px solid rgba(63, 243, 255, 0.5);
  border-radius: 10px;
  background: rgba(20, 30, 45, 0.9);
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.btn.primary { background: var(--cyan); color: #04121a; border-color: var(--cyan); }
.btn:active { transform: scale(0.97); }

/* Tip button (title + game over): gold, with a slow glow so it's easy to spot */
.support-link {
  pointer-events: auto;
  min-width: 220px;
  margin-top: 4px;
  padding: 13px 22px;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffe39a, #f5b942);
  color: #2a1a00;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 0 0 rgba(255, 196, 92, 0);
  animation: supportGlow 3s ease-in-out infinite;
}
@keyframes supportGlow {
  50% { box-shadow: 0 0 18px rgba(255, 196, 92, 0.55); }
}
.support-link:active { transform: scale(0.97); }

/* "Still loading?" panel (boot-watchdog.js) */
.load-trouble {
  max-width: 330px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 210, 122, 0.6);
  border-radius: 12px;
  background: var(--panel);
  font-size: 14px;
  pointer-events: auto;
}
.load-trouble p { margin: 6px 0 10px; }
.load-trouble .load-error { color: var(--red); font-size: 12px; word-break: break-word; }
.load-trouble .btn { min-width: 120px; padding: 10px 14px; margin: 4px; }

/* iPhone "Add to Home Screen" instructions (install.js) */
.install-help {
  max-width: 320px;
  padding: 12px 16px;
  border: 1px solid rgba(63, 243, 255, 0.45);
  border-radius: 12px;
  background: var(--panel);
  text-align: left;
  font-size: 14px;
  pointer-events: auto;
}
.install-help ol { margin: 8px 0; padding-left: 20px; }
.install-help li { margin: 4px 0; }
.install-help small { opacity: 0.55; }
.share-glyph { display: inline-block; padding: 0 4px; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; }

/* Round icon buttons: exit (top-right), sound and music (top-left) */
.btn.icon {
  position: absolute;
  top: 12px;
  right: 12px;
  min-width: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 18px;
  border-radius: 50%;
  background: var(--panel);
}
.btn.icon.left { right: auto; left: 12px; }
.btn.icon.left2 { right: auto; left: 60px; }
.btn.icon.below { top: 60px; }    /* vibration: under the exit button, clear of the top bar */
.btn.icon.off { opacity: 0.45; text-decoration: line-through; }

/* Speaker button pulses when the browser is blocking sound */
.btn.icon.warn { border-color: var(--red); animation: warnPulse 1s infinite; font-size: 14px; }
@keyframes warnPulse { 50% { box-shadow: 0 0 14px var(--red); } }

/* ---------- 4. HUD layout and top bar ---------- */

#hud { position: absolute; inset: 0; }

/* While scanning the floor, only the scan UI is shown */
#hud.scanning #topbar, #hud.scanning #hpbar, #hud.scanning #deflector, #hud.scanning #radar { display: none; }

#topbar {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 6px 16px;
  border-radius: 20px;
  background: var(--panel);
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
#wave { color: var(--cyan); }
#score { font-size: 20px; min-width: 60px; text-align: center; }
#mult { color: var(--magenta); }

@media (max-width: 440px) {
  #topbar { gap: 10px; padding: 6px 12px; }
  #score { min-width: 44px; }
}
/* Narrow phones: keep the top bar clear of the sound/music buttons (left) and ✕ (right) */
@media (max-width: 380px) {
  #topbar { left: 106px; right: 58px; transform: none; justify-content: center; gap: 8px; padding: 6px 8px; font-size: 13px; letter-spacing: 0.03em; }
  #score { font-size: 17px; min-width: 0; }
}

/* ---------- 5. Crosshair ---------- */

#crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84px;
  height: 84px;
  transform: translate(-50%, -50%);
}
#crosshair svg { width: 100%; height: 100%; overflow: visible; }
#crosshair line { stroke: var(--text); stroke-width: 3; stroke-linecap: round; }

/* Lock ring: fills as lock-on progresses (stroke-dashoffset set from hud.js) */
.ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 4; }
.ring {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 251.3;      /* 2 * PI * 40 */
  stroke-dashoffset: 251.3;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
#crosshair.locked .ring { stroke: var(--red); }
#crosshair.locked line { stroke: var(--red); }
#crosshair.blocked .ring { stroke: var(--blue); }

/* Hit marker X (must stay after "#crosshair line" to override it) */
#hitmark line { stroke: #fff; stroke-width: 4; opacity: 0; }
#crosshair.hit #hitmark line { opacity: 1; }
#crosshair.kill #hitmark line { opacity: 1; stroke: var(--red); stroke-width: 5; }

/* "SHIELDED" note under the crosshair */
#shieldnote {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #8fb4ff;
  white-space: nowrap;
}

/* ---------- 6. Center messages ---------- */

#message {
  position: absolute;
  top: 30%;
  width: 100%;
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.25s;
}
#message.show { opacity: 1; }

/* Sub-text under the big message (hints, "NEW DRONE", scan status) */
#subtext {
  position: absolute;
  top: calc(30% + 40px);
  width: 100%;
  padding: 0 24px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 0.25s;
}
#subtext.show { opacity: 1; }

/* ---------- 7. Health, deflector and boss bars ---------- */

#hpbar {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: min(70vw, 320px);
  height: 16px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
#hpfill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #22e07a, var(--cyan));
  transition: width 0.15s;
}
#hpfill.low { background: linear-gradient(90deg, var(--red), #ff9a3d); }
#hptext {
  position: absolute;
  inset: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* Deflector charges, just above the health bar */
#deflector {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.pip {
  width: 18px;
  height: 8px;
  border-radius: 4px;
  background: var(--blue);
  box-shadow: 0 0 6px var(--blue);
}
.pip.used { background: rgba(74, 125, 255, 0.2); box-shadow: none; }

/* Carrier boss health, under the top bar */
#bossbar {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: min(78vw, 360px);
  height: 12px;
  border-radius: 6px;
  background: var(--panel);
  border: 1px solid rgba(255, 63, 210, 0.6);
  overflow: hidden;
}
#bossbar span {
  position: absolute;
  inset: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
  line-height: 12px;
  text-align: center;
  z-index: 1;
}
#bossfill { height: 100%; width: 100%; background: var(--magenta); transition: width 0.15s; }

/* ---------- 8. Floor scan ---------- */

#scanbar {
  position: absolute;
  top: calc(30% + 84px);
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 8px;
  border-radius: 4px;
  background: var(--panel);
  border: 1px solid rgba(63, 243, 255, 0.4);
  overflow: hidden;
}
#scanfill { height: 100%; width: 0; background: var(--cyan); transition: width 0.1s linear; }
#btn-est-floor { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); min-width: 0; white-space: nowrap; }

/* ---------- 9. Indicators ---------- */

/* Edge arrows pointing at off-screen drones (color set per drone type) */
#arrows { position: absolute; inset: 0; }
.arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 20px solid var(--red);
  filter: drop-shadow(0 0 4px rgba(255, 74, 61, 0.8));
  transform-origin: 50% 50%;
}

/* Floating "+100" score pop-ups */
#popups { position: absolute; inset: 0; overflow: hidden; }
.popup {
  position: absolute;
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
  transform: translate(-50%, -50%);
  animation: popup 0.9s ease-out forwards;
}
.popup.combo { color: var(--magenta); font-size: 22px; }
.popup.dodge { color: #ffd27a; font-size: 26px; letter-spacing: 0.06em; text-shadow: 0 0 12px rgba(255, 210, 122, 0.8); }
@keyframes popup {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(1); }
}

/* Radar mini-map (Radar upgrade) */
#radar {
  position: absolute;
  top: 62px;
  left: 12px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(8, 12, 20, 0.6);
  border: 1px solid rgba(63, 243, 255, 0.4);
}

/* ---------- 10. Screen flashes and the pause banner ---------- */

/* Red flash on the side you were hit from */
.hitflash {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  opacity: 0;
  transition: opacity 0.35s;
}
.hitflash.left { left: 0; background: linear-gradient(90deg, rgba(255, 40, 30, 0.6), transparent); }
.hitflash.right { right: 0; background: linear-gradient(-90deg, rgba(255, 40, 30, 0.6), transparent); }
.hitflash.on { opacity: 1; transition: none; }

/* Blue frame when the Deflector blocks a hit */
#shieldflash {
  position: absolute;
  inset: 0;
  border: 6px solid var(--blue);
  box-shadow: inset 0 0 60px rgba(74, 125, 255, 0.7);
  opacity: 0;
  transition: opacity 0.4s;
}
#shieldflash.on { opacity: 1; transition: none; }

/* "TRACKING LOST" / "PAUSED" banner */
/* Low-light note: tracking is struggling but the game keeps going (tracking-pause.js) */
#lowlight {
  position: absolute;
  bottom: 84px;             /* above the health bar and deflector pips */
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(40, 28, 4, 0.8);
  color: #ffd27a;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  max-width: calc(100vw - 24px);
}
/* Narrow phones: the note wraps instead of running off the screen, and sits above the Skip button */
@media (max-width: 380px) {
  #lowlight { white-space: normal; text-align: center; width: calc(100vw - 32px); border-radius: 14px; }
}
#hud.scanning #lowlight { bottom: 132px; }

#paused {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  background: rgba(3, 5, 9, 0.55);
  text-align: center;
}
#paused b { font-size: 24px; letter-spacing: 0.08em; }
#paused span { font-size: 15px; opacity: 0.85; max-width: 320px; }

/* ---------- 11. Upgrade cards ---------- */

#cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(90vw, 380px);
}
.card {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(63, 243, 255, 0.45);
  border-radius: 12px;
  background: rgba(14, 24, 38, 0.95);
  color: var(--text);
  text-align: left;
  font: inherit;
  animation: cardIn 0.3s ease-out backwards;
}
.card:nth-child(2) { animation-delay: 0.08s; }
.card:nth-child(3) { animation-delay: 0.16s; }
.card.rare { border-color: var(--purple); box-shadow: 0 0 14px rgba(199, 125, 255, 0.35); }
.card:active { transform: scale(0.97); }
.card .icon {
  flex: 0 0 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(63, 243, 255, 0.15);
  color: var(--cyan);
  font-size: 24px;
}
.card.rare .icon { background: rgba(199, 125, 255, 0.18); color: #d9a6ff; }
.card b { display: block; font-size: 17px; }
.card small { display: block; opacity: 0.75; font-size: 13px; margin-top: 2px; }
.card .stack { margin-left: auto; font-size: 12px; opacity: 0.6; white-space: nowrap; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 12. Leaderboard ---------- */

/* Screens can get taller than the phone when the keyboard is up: scroll, and
   keep content centered only while it fits ("safe" stops it cutting off the top). */
#gameover, #leaderboard { justify-content: safe center; overflow-y: auto; }
#leaderboard { background: #05070b; }          /* fully covers the title screen */
#gameover > p { margin: 0; }                    /* compact stats leave room for name entry */

.btn.small { min-width: 0; padding: 10px 16px; font-size: 15px; }

.lb-tabs { display: flex; gap: 8px; }
.lb-tab {
  pointer-events: auto;
  padding: 8px 18px;
  border: 1px solid rgba(63, 243, 255, 0.4);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  opacity: 0.7;
}
.lb-tab.active { background: var(--cyan); color: #04121a; border-color: var(--cyan); opacity: 1; font-weight: 700; }

.lb-list { list-style: none; margin: 4px 0; padding: 0; width: min(360px, 100%); }
.lb-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(232, 246, 255, 0.08);
  text-align: left;
}
.lb-list li:nth-child(-n+3) .rank { color: var(--cyan); font-weight: 800; }
.lb-list li.me { background: rgba(255, 210, 122, 0.12); border-radius: 8px; }
.lb-list li.me .who { color: #ffd27a; }
.lb-list .rank { width: 24px; opacity: 0.8; }
.lb-list .who { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-list .wave { font-size: 12px; opacity: 0.55; }
.lb-list .pts { min-width: 80px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.lb-status { margin: 0; min-height: 1.2em; font-size: 14px; opacity: 0.7; }
.lb-legend { margin: 0; font-size: 12px; opacity: 0.45; }

/* Name entry on the game-over screen */
.lb-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(360px, 100%);
  padding: 12px;
  border: 1px solid rgba(255, 210, 122, 0.45);
  border-radius: 12px;
  background: rgba(255, 210, 122, 0.06);
  pointer-events: auto;
}
.lb-made { margin: 0; color: #ffd27a; font-weight: 700; }
.lb-name {
  min-width: 200px;
  min-height: 34px;
  padding: 4px 12px;
  border-bottom: 2px solid #ffd27a;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: pre;
}
.lb-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.lb-msg { margin: 0; min-height: 1.2em; font-size: 14px; }

/* On-screen keyboard (the phone's own keyboard isn't reliable in AR) */
.lb-keys { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.lb-row { display: flex; justify-content: center; gap: 4px; }
.lb-key {
  pointer-events: auto;
  flex: 0 1 30px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(232, 246, 255, 0.25);
  border-radius: 6px;
  background: rgba(20, 30, 45, 0.95);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
}
.lb-key:active { background: var(--cyan); color: #04121a; }
.lb-key.wide { flex-basis: 48px; }
.lb-key.wider { flex-basis: 110px; font-size: 13px; }
.lb-key.shift.on { border-color: #ffd27a; color: #ffd27a; }