/* ==========================================================================
   Guard the Tower 2D — game.css
   Canvas, app shell, menu background FX layers, minimap, loading screen,
   ad overlay, modal shells.
   ========================================================================== */

body {
  font-family: var(--font-ui);
  background: var(--c-bg-deep);
  color: var(--c-text);
  /*
    Deliberately NOT multiplied by --ui-scale. The accessibility scale is
    folded into --hud-scale / --menu-scale instead, so every surface is
    scaled once, as a whole, rather than having font size and box metrics
    scale independently.
  */
  font-size: 1rem;
}

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #15171b 0%, var(--c-bg-deep) 75%);
}

/* ---------------- Canvas ---------------- */
#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-canvas);
  cursor: crosshair;
}

body.in-menu #game-canvas { cursor: default; }

/* ---------------- Overlay container ---------------- */
#overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  pointer-events: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#screen-gameover,
#screen-victory {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(40, 44, 52, 0.5), transparent 60%),
    linear-gradient(180deg, rgba(6, 7, 9, 0.82) 0%, rgba(6, 7, 9, 0.95) 100%);
}

/* ==========================================================================
   MAIN MENU — siege atmosphere layers over the canvas fortress scene
   ========================================================================== */

#screen-main {
  padding: 0;
  background: transparent;   /* the canvas paints the animated scene */
}

.menu-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/*
  Watchfire glow. Two warm pools low on the screen, as if siege camps were
  burning off the edges of the shot. Radial gradients with a transparent
  falloff rather than a CSS blur: a large-radius blur forces a full-screen
  re-rasterization every frame. Only transform is animated, so these stay on
  the compositor and never re-rasterize.
*/
.fx-ember-glow {
  position: absolute;
  bottom: -14vh;
  width: 46vw;
  height: 40vh;
  border-radius: 50%;
  opacity: 0.5;
  will-change: transform;
}

.fx-ember-l {
  left: -12vw;
  background: radial-gradient(ellipse at 50% 60%, rgba(190, 96, 40, 0.3), transparent 68%);
  animation: ember-breathe 13s ease-in-out infinite;
}

.fx-ember-r {
  right: -14vw;
  background: radial-gradient(ellipse at 50% 60%, rgba(150, 70, 34, 0.26), transparent 68%);
  animation: ember-breathe 17s ease-in-out infinite reverse;
}

/* --- searching torch beams sweeping from the keep --- */
.fx-beam {
  position: absolute;
  top: -30%;
  width: 26vw;
  height: 170%;
  /* Wide gradient stops give the soft edge; no blur filter needed. */
  background: linear-gradient(100deg,
    transparent, rgba(214, 176, 112, 0.02) 30%, rgba(214, 176, 112, 0.055) 50%,
    rgba(214, 176, 112, 0.02) 70%, transparent);
  transform: rotate(14deg);
  will-change: transform;
}

.fx-beam-1 { left: -26vw; animation: beam-sweep 19s ease-in-out infinite; }
.fx-beam-2 { left: -26vw; animation: beam-sweep 27s ease-in-out infinite 7s; }

/*
  Vignette. Static, so it costs one paint; it is what pushes the corners of
  the menu down to near-black and keeps the panel the brightest thing on
  screen.
*/
.fx-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 44%, transparent 36%, rgba(0, 0, 0, 0.38) 76%, rgba(0, 0, 0, 0.66) 100%);
}

/* ---------------- Minimap ---------------- */
#minimap-wrap {
  position: relative;
  width: 260px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(8, 9, 11, 0.88);
  border: var(--border-ornate);
  box-shadow: var(--shadow-card), 0 0 22px rgba(196, 204, 216, 0.12);
  pointer-events: none;
}

#minimap {
  display: block;
  width: 100%;
  height: 86px;
}

/* Rides a dark plate so it stays legible over a bright daytime sky. */
#minimap-label {
  position: absolute;
  top: 4px;
  left: 5px;
  padding: 1px 5px 2px;
  border-radius: var(--radius-sm);
  background: rgba(6, 9, 18, 0.62);
  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: rgba(196, 204, 216, 0.9);
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
}

/* ---------------- Modal shells ---------------- */
.modal-shell {
  position: absolute;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  background: rgba(4, 6, 12, 0.82);
  pointer-events: auto;
}

.modal-box {
  position: relative;
  min-width: min(420px, calc(92vw / var(--menu-scale, 1)));
  max-width: min(560px, calc(94vw / var(--menu-scale, 1)));
  max-height: calc(90vh / var(--menu-scale, 1));
  transform: scale(var(--menu-scale, 1));
  transform-origin: center center;
  overflow-y: auto;
  background: var(--c-glass-strong);
  border: var(--border-ornate);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float), var(--glow-gold);
  padding: 26px 30px;
}

.modal-box.wide { max-width: min(760px, 96vw); }

/* ==========================================================================
   PORTRAIT LOCK — the game is landscape-only on touch devices
   ========================================================================== */

#portrait-lock {
  position: fixed;
  inset: 0;
  /* Above every other layer, including the loading screen and ad overlay,
     so nothing can be interacted with while the device is upright. */
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8vh 8vw;
  padding-top: calc(8vh + var(--safe-t));
  padding-bottom: calc(8vh + var(--safe-b));
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 32%, #1b1e24 0%, transparent 60%),
    linear-gradient(180deg, #0d0e11 0%, #030304 100%);
  pointer-events: auto;
  overscroll-behavior: none;
}

.portrait-inner { max-width: 420px; }

#portrait-lock h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-gold-bright);
  text-shadow: var(--shadow-text), var(--glow-text-gold);
  margin-bottom: 10px;
}

#portrait-lock p {
  font-size: var(--fs-md);
  color: var(--c-text-dim);
  line-height: 1.7;
  margin-bottom: 22px;
}

#portrait-lock .portrait-hint {
  margin-top: 18px;
  margin-bottom: 0;
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
  font-style: italic;
}

#portrait-lock .menu-btn { width: 100%; }

/* Animated phone that tips from upright to sideways */
.rotate-icon {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0 auto 26px;
}

.rotate-phone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 96px;
  margin: -48px 0 0 -29px;
  border: 3px solid var(--c-gold);
  border-radius: 10px;
  box-shadow: var(--glow-gold-lg), inset 0 0 18px rgba(196, 204, 216, 0.18);
  background: linear-gradient(160deg, rgba(196, 204, 216, 0.14), transparent 70%);
  animation: tip-to-landscape 2.8s var(--ease-out) infinite;
}

/* Speaker notch */
.rotate-phone::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 18px;
  height: 3px;
  margin-left: -9px;
  border-radius: 3px;
  background: rgba(196, 204, 216, 0.8);
}

.rotate-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  color: var(--c-gold-bright);
  text-shadow: var(--glow-text-gold);
  opacity: 0.35;
  animation: spin-slow 3.4s linear infinite;
  pointer-events: none;
}

/* Fullscreen button is only meaningful on touch devices */
.touch-only { display: none !important; }
body.is-touch .touch-only { display: block !important; }

/* ---------------- Loading screen ---------------- */
#loading-screen {
  position: absolute;
  inset: 0;
  z-index: var(--z-loading);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 20%, #1b1e24 0%, transparent 55%),
    linear-gradient(180deg, #0d0e11 0%, #040507 100%);
  transition: opacity var(--t-slow) ease, visibility var(--t-slow);
}

#loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-inner {
  text-align: center;
  max-width: 480px;
  padding: 0 24px;
}

.loading-emblem {
  font-size: 64px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 24px rgba(196, 204, 216, 0.5));
  animation: emblem-pulse 2.2s ease-in-out infinite;
}

.loading-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-wide);
  color: var(--c-parchment);
  text-shadow: var(--shadow-text), var(--glow-gold);
  margin-bottom: 26px;
}

.loading-title span { color: var(--c-gold); }

.loading-bar-wrap {
  width: 100%;
  height: 14px;
  border: 1px solid var(--c-panel-border);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  box-shadow: var(--shadow-inset);
}

#loading-bar {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-gold-dim), var(--c-gold), var(--c-gold-bright));
  box-shadow: var(--glow-gold);
  transition: width 220ms ease-out;
}

#loading-status {
  margin-top: 12px;
  color: var(--c-text-dim);
  font-size: var(--fs-sm);
  min-height: 1.3em;
}

.loading-tip {
  margin-top: 26px;
  color: var(--c-text-faint);
  font-size: var(--fs-xs);
  font-style: italic;
}

/* ---------------- Generic helpers ---------------- */
.hidden { display: none !important; }
.invisible { visibility: hidden !important; }

.gold-text { color: var(--c-gold); }
.danger-text { color: var(--c-danger); }
.dim-text { color: var(--c-text-dim); }

hr.ornate {
  border: none;
  height: 1px;
  margin: 14px 0;
  background: linear-gradient(90deg, transparent, var(--c-panel-border), transparent);
}