/* ==========================================================================
   2D Football Wars — game.css
   Stage layout, canvas, loading screen, announcer and full-screen overlays.
   ========================================================================== */

body {
  font-family: var(--font-body);
  color: var(--c-text);
  background:
    radial-gradient(120% 90% at 50% 0%, #12204a 0%, transparent 55%),
    radial-gradient(90% 70% at 50% 115%, #0c2b1c 0%, transparent 60%),
    var(--c-bg-0);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Stage: 16:9 letterboxed play area ---------------------------------- */
#stage {
  position: relative;
  /* The stage fills the window outright. The canvas underneath renders the
     window's own shape (see VIEW in utilities.js), so the pitch is never
     stretched and there are no black bars left at the sides or the top —
     the surplus is drawn as more stadium instead. */
  width: 100vw;
  height: 100vh;
  height: 100svh;
  /* Everything inside the stage is sized in `em`, and the stage's own font
     size is the stage unit — so the entire interface scales with the play
     area instead of with the browser window. Desktop is unchanged (16px at
     the 1280px reference width); a phone in landscape gets the identical
     layout at a smaller scale. */
  font-size: var(--u);
}

/* Device safe areas (notches, rounded corners, dynamic islands).
   Gameplay stays edge-to-edge; only interactive/important UI is inset. */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-canvas);
  background: #060913;
  /* Edge to edge: a rounded corner would show the page behind it. */
  border-radius: 0;
}

/* Subtle CRT-ish vignette above the canvas */
#stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 0;
  box-shadow: inset 0 0 120px rgba(0, 0, 10, 0.55);
}
html.high-contrast #stage::after {
  display: none;
}

/* ---- Loading screen ------------------------------------------------------ */
#loading-screen {
  position: absolute;
  inset: 0;
  z-index: var(--z-loading);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(38, 80, 190, 0.25) 0%, transparent 60%),
    linear-gradient(180deg, #070b18 0%, #04060d 100%);
  transition: opacity var(--t-slow) var(--ease-out), visibility var(--t-slow);
}
#loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-logo {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 800;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.05;
  background: linear-gradient(180deg, #ffffff 20%, #9cc8ff 55%, #38e08c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 24px rgba(56, 224, 140, 0.35));
}
.loading-logo small {
  display: block;
  font-size: 0.32em;
  letter-spacing: var(--ls-huge);
  color: var(--c-text-dim);
  -webkit-text-fill-color: var(--c-text-dim);
  margin-top: 0.4em;
}

.loading-ball {
  width: calc(var(--u) * 3.4);
  height: calc(var(--u) * 3.4);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #ffffff 0%, #dfe8f5 55%, #9fb0c8 100%);
  position: relative;
  box-shadow: 0 0.9em 1.5em rgba(0, 0, 0, 0.5), inset -0.38em -0.5em 0.9em rgba(30, 40, 70, 0.35);
  animation: ball-bounce 0.9s var(--ease-in-out) infinite;
}
.loading-ball::after {
  content: "";
  position: absolute;
  inset: 30%;
  background: #23304a;
  clip-path: polygon(50% 0%, 95% 35%, 78% 90%, 22% 90%, 5% 35%);
  animation: ball-spin 1.8s linear infinite;
}

.loading-bar {
  width: min(calc(var(--u) * 26), 60%);
  height: calc(var(--u) * 0.62);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  border: 1px solid var(--c-line);
}
.loading-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-accent-2), var(--c-accent));
  box-shadow: var(--glow-accent);
  transition: width 180ms var(--ease-out);
}

.loading-status {
  font-size: var(--fs-small);
  color: var(--c-text-dim);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  min-height: 1.4em;
}

.loading-tip {
  position: absolute;
  bottom: 7%;
  max-width: 70%;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--c-text-faint);
}
.loading-tip strong {
  color: var(--c-accent-2);
}

#press-start {
  display: none;
  font-family: var(--font-display);
  font-size: var(--fs-big);
  letter-spacing: var(--ls-huge);
  text-transform: uppercase;
  color: var(--c-text);
  padding: 0.6em 1.6em;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05);
  animation: pulse-soft 1.6s ease-in-out infinite;
}
#loading-screen.ready .loading-bar,
#loading-screen.ready .loading-status,
#loading-screen.ready .loading-ball {
  display: none;
}
#loading-screen.ready #press-start {
  display: block;
}

/* ---- Announcer (countdowns, GOAL banner, big center text) ---------------- */
#announcer {
  position: absolute;
  inset: 0;
  z-index: var(--z-announcer);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}

.announce-text {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1;
  will-change: transform, opacity;
}
.announce-text.size-huge { font-size: calc(var(--u) * 11); }
.announce-text.size-big  { font-size: calc(var(--u) * 4.6); }
.announce-text.size-med  { font-size: calc(var(--u) * 2.6); }

.announce-text .sub {
  display: block;
  font-size: 0.28em;
  letter-spacing: var(--ls-huge);
  color: var(--c-text-dim);
  margin-top: 0.5em;
  -webkit-text-fill-color: var(--c-text-dim);
}

.announce-goal {
  background: linear-gradient(180deg, #fff 10%, var(--c-gold) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 30px rgba(255, 207, 77, 0.65));
}
.announce-count {
  color: #fff;
  text-shadow: 0 0 40px var(--c-accent-2), 0 8px 30px rgba(0, 0, 0, 0.7);
}
.announce-p1 { filter: drop-shadow(0 0 34px var(--c-p1-glow)); color: var(--c-p1); }
.announce-p2 { filter: drop-shadow(0 0 34px var(--c-p2-glow)); color: var(--c-p2); }

/* Replay cinematic letterbox */
#replay-frame {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-hud) - 1);
  pointer-events: none;
  display: none;
}
#replay-frame.active { display: block; }
#replay-frame::before,
#replay-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 9%;
  background: #04060c;
}
#replay-frame::before { top: 0; }
#replay-frame::after { bottom: 0; }
.replay-label {
  position: absolute;
  top: 10.5%;
  right: 3%;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: var(--ls-huge);
  text-transform: uppercase;
  color: var(--c-danger);
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.replay-label::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  background: var(--c-danger);
  animation: pulse-soft 1s ease-in-out infinite;
}
.replay-skip-hint {
  position: absolute;
  bottom: 2.4%;
  right: 3%;
  font-size: var(--fs-tiny);
  color: var(--c-text-dim);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* ---- Debug overlay ------------------------------------------------------- */
#debug-overlay {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: var(--z-toast);
  font-family: var(--font-mono);
  font-size: max(10px, calc(var(--u) * 0.7));
  color: #8dffb8;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(141, 255, 184, 0.3);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  pointer-events: none;
  white-space: pre;
  display: none;
}
#debug-overlay.visible { display: block; }