/* ============================================================
   Mech Battle - page, HUD and touch control styling.
   The 3D battle is rendered by Three.js onto the <canvas>; this
   file styles the page frame, the HUD overlay, the on-screen
   joystick and buttons, and the menu screens.

   Mobile-first, tuned for iPad landscape. Touch controls scale
   with viewport units and respect safe-area insets.
   ============================================================ */

:root {
  --bg-0: #1a0f08;
  --bg-1: #3a2418;
  --panel: rgba(20, 14, 30, 0.86);
  --neon-cyan: #2ff3ff;
  --neon-amber: #ffb13d;
  --neon-green: #59ff8f;
  --neon-red: #ff5a4d;
  --text: #f3ecdf;
  --text-dim: #c6b7a6;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  height: 100%;
  background: var(--bg-0);
  color: var(--text);
  font-family: "Orbitron", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---- The 3D view fills the screen ------------------------ */

#game-wrap { position: fixed; inset: 0; overflow: hidden; background: #0a0705; }

#game {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;            /* no scroll / zoom while playing */
}

/* ---- HUD -------------------------------------------------- */

#hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#hud.hidden { display: none; }

/* Centre crosshair */
#crosshair {
  position: absolute;
  left: 50%; top: 48%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid rgba(89, 255, 143, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(89, 255, 143, 0.5);
}
#crosshair::before, #crosshair::after {
  content: ""; position: absolute; background: rgba(89, 255, 143, 0.85);
}
#crosshair::before { left: 50%; top: -10px; width: 2px; height: 8px; margin-left: -1px; }
#crosshair::after  { top: 50%; left: -10px; height: 2px; width: 8px; margin-top: -1px; }

/* Player armour bar, top-left */
#player-health {
  position: absolute;
  left: calc(env(safe-area-inset-left, 0px) + 16px);
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  width: clamp(160px, 26vw, 280px);
}
#player-health-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; color: var(--neon-cyan); }
#player-health-track {
  margin-top: 4px; height: 16px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.2); overflow: hidden;
}
#player-health-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--neon-green), #b6ff5a); transition: width 0.12s linear; }

/* Enemy markers + health bars (positioned from JS) */
#markers { position: absolute; inset: 0; }
.enemy-marker {
  position: absolute;
  transform: translate(-50%, -100%);
  text-align: center;
  width: 84px;
}
.enemy-marker .chevron { font-size: 0.9rem; color: var(--neon-red); text-shadow: 0 0 8px rgba(255, 90, 77, 0.8); line-height: 1; }
.enemy-marker .ebar { margin-top: 2px; height: 7px; border-radius: 4px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.25); overflow: hidden; }
.enemy-marker .efill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff5a4d, #ffb13d); }
.enemy-marker .ename { margin-top: 2px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; color: #fff; text-shadow: 0 0 6px rgba(0,0,0,0.8); }

/* ---- Virtual joystick (bottom-left) ---------------------- */

#joystick { position: absolute; left: 0; bottom: 0; width: 46%; height: 62%; pointer-events: auto; }
#joystick-base {
  position: absolute;
  left: calc(env(safe-area-inset-left, 0px) + 26px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
  width: clamp(120px, 26vw, 190px);
  height: clamp(120px, 26vw, 190px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 243, 255, 0.10), rgba(0, 0, 0, 0.22));
  border: 2px solid rgba(47, 243, 255, 0.4);
  box-shadow: 0 0 20px rgba(47, 243, 255, 0.25);
}
#joystick-thumb {
  position: absolute; left: 50%; top: 50%;
  width: 44%; height: 44%;
  margin: 0; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d9fbff, var(--neon-cyan));
  box-shadow: 0 0 16px rgba(47, 243, 255, 0.6);
}

/* ---- Action buttons (bottom-right) ----------------------- */

.action-btn {
  position: absolute;
  pointer-events: auto;
  border: none; border-radius: 50%;
  color: #1a0f08; font-family: inherit; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.03em;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.action-btn:active, .action-btn.pressed { transform: scale(0.93); filter: brightness(1.15); }

#shoot-btn {
  right: calc(env(safe-area-inset-right, 0px) + 24px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
  width: clamp(104px, 21vw, 150px);
  height: clamp(104px, 21vw, 150px);
  font-size: clamp(0.85rem, 2.4vw, 1rem);
  background: radial-gradient(circle at 35% 30%, #ffe1b0, var(--neon-amber));
  box-shadow: 0 0 24px rgba(255, 177, 61, 0.6);
}
#jump-btn {
  right: calc(env(safe-area-inset-right, 0px) + 24px + clamp(120px, 23vw, 168px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
  width: clamp(78px, 15vw, 110px);
  height: clamp(78px, 15vw, 110px);
  font-size: clamp(0.7rem, 2vw, 0.85rem);
  background: radial-gradient(circle at 35% 30%, #d9fbff, var(--neon-cyan));
  box-shadow: 0 0 18px rgba(47, 243, 255, 0.5);
}

/* ---- Overlay screens ------------------------------------- */

.overlay {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(8, 5, 4, 0.6);
  backdrop-filter: blur(4px); text-align: center; overflow-y: auto;
}
.overlay.hidden { display: none; }

.panel {
  width: min(560px, 100%); max-height: 100%; overflow-y: auto;
  padding: 1.8rem 1.4rem;
  background: var(--panel);
  border: 1px solid rgba(47, 243, 255, 0.35); border-radius: 18px;
  box-shadow: 0 0 30px rgba(47, 243, 255, 0.15), inset 0 0 30px rgba(255, 177, 61, 0.06);
}

.kicker { font-size: clamp(0.66rem, 2vw, 0.8rem); letter-spacing: 0.28em; text-transform: uppercase; color: var(--neon-amber); margin-bottom: 0.6rem; }
.title {
  font-size: clamp(2rem, 7vw, 3.4rem); font-weight: 900; line-height: 1.04;
  text-transform: uppercase; letter-spacing: 0.02em; color: #fff;
  text-shadow: 0 0 12px rgba(47, 243, 255, 0.7), 0 0 30px rgba(255, 177, 61, 0.4);
}
.lead {
  margin: 0.9rem auto 1.4rem; max-width: 44ch;
  font-size: clamp(0.9rem, 2.4vw, 0.98rem); line-height: 1.55; color: var(--text-dim);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.result { font-size: clamp(2rem, 8vw, 3.4rem); font-weight: 900; text-transform: uppercase; color: #fff; }
.result.win { text-shadow: 0 0 16px var(--neon-green), 0 0 36px rgba(89, 255, 143, 0.5); }
.result.lose { text-shadow: 0 0 16px var(--neon-red), 0 0 36px rgba(255, 90, 77, 0.5); }

.btn {
  font-family: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: #1a0f08; background: linear-gradient(180deg, #ffe1b0, var(--neon-amber));
  border: none; border-radius: 999px; cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
  box-shadow: 0 0 18px rgba(255, 177, 61, 0.55); touch-action: manipulation;
}
.btn-big { padding: clamp(0.8rem, 2.4vw, 1rem) clamp(1.8rem, 6vw, 2.6rem); font-size: clamp(1rem, 2.6vw, 1.1rem); min-height: 52px; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 26px rgba(255, 177, 61, 0.8); }
.btn:active { transform: translateY(0); }

/* ---- Portrait rotate prompt ------------------------------ */

#rotate-notice {
  position: fixed; inset: 0; z-index: 50; display: none;
  align-items: center; justify-content: center; text-align: center; padding: 2rem;
  background: linear-gradient(160deg, var(--bg-1), var(--bg-0));
}
@media (orientation: portrait) { body.is-touch #rotate-notice { display: flex; } }
.rotate-inner { width: min(88vw, 420px); }
.rotate-icon { font-size: clamp(3rem, 16vw, 5rem); animation: rotateHint 2.2s ease-in-out infinite; }
@keyframes rotateHint { 0%, 45% { transform: rotate(0deg); } 70%, 100% { transform: rotate(90deg); } }
.rotate-text { margin-top: 1.2rem; font-size: clamp(1.2rem, 6vw, 1.9rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; text-shadow: 0 0 14px var(--neon-cyan); }

/* ---- Footnote (desktop only) ----------------------------- */

.footnote { display: none; }
@media (min-width: 1000px) {
  body:not(.is-touch) .footnote {
    display: block; position: fixed; left: 0; right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    text-align: center; font-size: 0.76rem; color: var(--text-dim); pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
}

/* Touch HUD controls only appear on touch devices */
body:not(.is-touch) #joystick,
body:not(.is-touch) #shoot-btn,
body:not(.is-touch) #jump-btn { display: none; }