:root {
  --bg: #06080f;
  --ink: #f3f6ff;
  --muted: #9fb0d6;
  --glow: rgba(56, 120, 255, 0.35);
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(40, 90, 220, 0.22), transparent 70%),
    var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3.5vw, 32px);
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

header { text-align: center; }

h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(34px, 7vw, 72px);
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-shadow: 0 0 28px rgba(80, 140, 255, 0.55);
}

.credit {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: clamp(14px, 2.2vw, 18px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.screen {
  width: min(1120px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(120, 160, 255, 0.18), 0 18px 60px var(--glow);
}

video {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
}

.fallback { margin: 0; color: var(--muted); text-align: center; max-width: 520px; }

@media (max-width: 600px) {
  .screen { border-radius: 10px; }
}

/* ---- Movie / Game tabs ---------------------------------------------------- */

.tabs {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(120, 160, 255, 0.18);
}

.tabs button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  font-size: clamp(15px, 2.4vw, 18px);
  letter-spacing: 0.06em;
  min-height: 44px;
  padding: 8px 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.tabs button svg { width: 1.3em; height: 1.3em; }
.tabs button:hover { color: var(--ink); }

.tabs button[aria-selected="true"] {
  background: linear-gradient(180deg, #3a75ff, #1d4fd8);
  color: #fff;
  box-shadow: 0 6px 22px rgba(56, 120, 255, 0.45);
}

.tabs button:focus-visible { outline: 2px solid #9fc0ff; outline-offset: 2px; }

/* Three tabs still fit on one line on a narrow phone. */
@media (max-width: 440px) {
  .tabs { gap: 4px; padding: 5px; }
  .tabs button { padding: 8px 12px; gap: 6px; font-size: 14px; letter-spacing: 0.02em; white-space: nowrap; }
}

@media (max-width: 350px) {
  .tabs button svg { display: none; }
}

.panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.panel[hidden] { display: none; }

.game-help {
  margin: 0;
  max-width: 640px;
  color: var(--muted);
  font-size: clamp(13px, 2vw, 15px);
  text-align: center;
}

/* ---- The game ----------------------------------------------------------------- */

/* On a sideways phone the game fits the screen's height. */
.game-screen { position: relative; width: min(1120px, 100%, calc((100vh - 24px) * 16 / 9)); }

.game-stage {
  --u: 11.2px; /* 1% of the stage's width; the game keeps it up to date */
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
}

.game-screen:fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-screen:fullscreen .game-stage {
  position: relative;
  inset: auto;
  width: min(100vw, 177.78vh);
  aspect-ratio: 16 / 9;
}

.g-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.g-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: #fff;
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.25;
  text-align: center;
}

.g-ui [hidden] { display: none !important; }
.g-ui button { pointer-events: auto; font-family: inherit; cursor: pointer; }
.g-ui button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.g-hud {
  position: absolute;
  top: calc(var(--u) * 1.4);
  left: calc(var(--u) * 1.6);
  right: calc(var(--u) * 1.6);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.4);
}

.g-gems {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.25em 0.75em 0.25em 0.5em;
  border-radius: 999px;
  background: rgba(8, 16, 44, 0.6);
  box-shadow: inset 0 0 0 1px rgba(160, 210, 255, 0.35);
  font-size: max(14px, calc(var(--u) * 2.4));
  font-weight: 800;
}

.g-gems svg { height: 1.35em; width: auto; }
.g-bump { animation: g-bump 0.25s ease-out; }

.g-progress { flex: 1; display: flex; justify-content: center; }

.g-progress-track {
  position: relative;
  width: min(100%, calc(var(--u) * 42));
  height: max(8px, calc(var(--u) * 1.1));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.g-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #7ee05b, #3fbf3a);
}

.g-progress-flag {
  position: absolute;
  right: -0.5em;
  top: 50%;
  transform: translateY(-62%);
  font-size: max(16px, calc(var(--u) * 2.6));
}

.g-buttons { margin-left: auto; display: flex; gap: calc(var(--u) * 0.8); }

.g-icon {
  width: max(30px, calc(var(--u) * 4.4));
  height: max(30px, calc(var(--u) * 4.4));
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(8, 16, 44, 0.6);
  color: #fff;
}

.g-icon svg { width: 58%; height: 58%; }

.g-prompt {
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  font-size: max(15px, calc(var(--u) * 3.1));
  font-weight: 900;
  text-shadow: 0 0.09em 0 #2a1140, 0 0 0.6em rgba(0, 0, 0, 0.6);
  animation: g-pulse 1s ease-in-out infinite;
}

.g-sub {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * 7.4);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(88%, calc(var(--u) * 78));
  padding: calc(var(--u) * 1) calc(var(--u) * 2.2);
  border-radius: calc(var(--u) * 1.8);
  background: rgba(8, 12, 32, 0.74);
  box-shadow: 0 0.4em 1.4em rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  font-size: max(13px, calc(var(--u) * 2.55));
  font-weight: 650;
}

.g-sub-narrator { background: rgba(28, 18, 52, 0.7); }
.g-sub-narrator .g-sub-text { font-style: italic; }

.g-sub-name {
  font-size: 0.78em;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.15em;
}

.g-choices {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--u) * 3);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2);
}

.g-choice,
.g-big {
  font-size: max(14px, calc(var(--u) * 3));
  font-weight: 900;
  padding: 0.5em 1.3em;
  min-height: 40px;
  border-radius: 999px;
  border: 0.14em solid #fff;
  background: linear-gradient(#ffe066, #ffb703);
  color: #4a2500;
  box-shadow: 0 0.22em 0 #c26a00, 0 0.5em 1.2em rgba(0, 0, 0, 0.35);
  transition: transform 0.08s, box-shadow 0.08s;
  animation: g-pop 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.g-choice:active,
.g-big:active { transform: translateY(0.14em); box-shadow: 0 0.08em 0 #c26a00, 0 0.3em 0.8em rgba(0, 0, 0, 0.35); }

.g-alt {
  background: linear-gradient(#a6dcff, #4aa8ff);
  color: #062a4d;
  box-shadow: 0 0.22em 0 #1d5e9e, 0 0.5em 1.2em rgba(0, 0, 0, 0.35);
}

.g-alt:active { box-shadow: 0 0.08em 0 #1d5e9e, 0 0.3em 0.8em rgba(0, 0, 0, 0.35); }

.g-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(6, 8, 15, 0.62), rgba(6, 8, 15, 0.25));
  animation: g-fade 0.4s ease-out;
}

.g-card.g-out { animation: g-fade-out 0.45s ease-in forwards; }

.g-card-kicker {
  color: #ffe56a;
  font-size: max(13px, calc(var(--u) * 2.3));
  font-weight: 900;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.g-card-title,
.g-theend,
.g-end-title,
.g-paused-title {
  margin: 0;
  font-size: max(34px, calc(var(--u) * 8.5));
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0.06em 0 #2a1140, 0 0.1em 0 #2a1140, 0 0.2em 0.5em rgba(0, 0, 0, 0.5);
  animation: g-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.g-theend {
  position: absolute;
  top: 9%;
  left: 0;
  right: 0;
  color: #ffe56a;
  font-size: max(44px, calc(var(--u) * 12));
}

.g-screen {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.8);
}

.g-start {
  align-items: flex-start;
  justify-content: flex-start;
  padding: calc(var(--u) * 3.5) calc(var(--u) * 4.5);
  gap: 0;
  text-align: left;
  background: linear-gradient(160deg, rgba(6, 14, 40, 0.62) 0%, rgba(6, 14, 40, 0.25) 32%, transparent 50%);
}

.g-start-title {
  margin: 0;
  font-size: max(22px, calc(var(--u) * 7.6));
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0.06em 0 #1d3b8a, 0 0.1em 0 #1d3b8a, 0 0.2em 0.5em rgba(0, 0, 0, 0.45);
}

.g-five { color: #a4ff7c; }

.g-start-by {
  margin: 0.6em 0 0;
  color: #f1f5ff;
  font-size: max(12px, calc(var(--u) * 1.9));
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.g-start .g-big,
.g-load {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9%;
  margin-inline: auto;
}

.g-start .g-big { width: max-content; font-size: max(17px, calc(var(--u) * 4.2)); }

.g-load {
  width: min(60%, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: max(13px, calc(var(--u) * 1.9));
  font-weight: 800;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.g-load-bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.g-load-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #7fd8ff, #3aa0ff);
  transition: width 0.2s;
}

.g-start-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3%;
  margin: 0;
  text-align: center;
  font-size: max(11px, calc(var(--u) * 1.6));
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.g-small .g-start-hint { display: none; }

.g-paused { background: rgba(6, 8, 15, 0.62); }

.g-end { background: radial-gradient(ellipse at center, rgba(6, 8, 15, 0.45), rgba(6, 8, 15, 0.75)); }

.g-end-title { color: #ffe56a; }

.g-end .g-start-by { margin: 0; }

.g-end-score {
  margin: 0;
  font-size: max(16px, calc(var(--u) * 3));
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.g-end-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--u) * 2);
}

.g-end-row .g-big { font-size: max(14px, calc(var(--u) * 2.5)); }

@keyframes g-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes g-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes g-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes g-pulse { 50% { transform: translateX(-50%) scale(1.08); } }
@keyframes g-bump { 50% { transform: scale(1.18); } }

@media (prefers-reduced-motion: reduce) {
  .g-prompt, .g-choice, .g-big, .g-card-title, .g-theend, .g-end-title { animation: none; }
}

/* ---- The Secret Level: Firebomb Shark ------------------------------------------
   The realistic one: thin lines, glassy panels, a clean font and a little glow. */

.secret-screen { position: relative; width: min(1120px, 100%, calc((100vh - 24px) * 16 / 9)); background: #02060c; }

.secret-stage {
  --u: 11.2px; /* 1% of the stage's width; the game keeps it up to date */
  --hud: #eaf6ff;
  --hud-dim: rgba(200, 228, 255, 0.66);
  --accent: #5fd4ff;
  --line: rgba(150, 215, 255, 0.24);
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  font-family: "Segoe UI Variable Display", "SF Pro Display", -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.secret-stage.s-playing { touch-action: none; cursor: crosshair; }

.secret-screen:fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.secret-screen:fullscreen .secret-stage {
  position: relative;
  inset: auto;
  width: min(100vw, 177.78vh);
  aspect-ratio: 16 / 9;
}

.s-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.s-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--hud);
  line-height: 1.2;
  text-align: center;
}

.s-ui [hidden] { display: none !important; }
.s-ui button { pointer-events: auto; font-family: inherit; cursor: pointer; }
.s-ui button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.s-glass {
  background: linear-gradient(180deg, rgba(18, 34, 52, 0.58), rgba(6, 14, 24, 0.46));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 6px 22px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  backdrop-filter: blur(8px) saturate(1.3);
}

/* The HUD */
.s-hud { position: absolute; inset: 0; }

.s-boss {
  position: absolute;
  top: calc(var(--u) * 1.6);
  left: 50%;
  transform: translateX(-50%);
  width: min(46%, calc(var(--u) * 46));
  padding: calc(var(--u) * 0.7) calc(var(--u) * 1.2) calc(var(--u) * 0.9);
  border-radius: calc(var(--u) * 0.5);
}

.s-boss-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: calc(var(--u) * 0.55);
  font-size: max(9px, calc(var(--u) * 1.1));
  font-weight: 700;
  letter-spacing: 0.28em;
}

.s-boss-name { color: #fff; text-shadow: 0 0 10px rgba(255, 120, 60, 0.6); }
.s-boss-level { color: #ffb38a; font-variant-numeric: tabular-nums; letter-spacing: 0.18em; }

.s-boss-bar {
  position: relative;
  height: max(5px, calc(var(--u) * 0.7));
  background: rgba(255, 255, 255, 0.1);
  clip-path: polygon(0.8% 0, 100% 0, 99.2% 100%, 0 100%);
}

.s-boss-trail,
.s-boss-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; }
.s-boss-trail { background: rgba(255, 236, 220, 0.8); transition: width 0.7s ease-in 0.35s; }

.s-boss-fill {
  background: linear-gradient(90deg, #ff2a2a, #ff6a2b 60%, #ffb347);
  box-shadow: 0 0 12px rgba(255, 90, 40, 0.8);
  transition: width 0.12s linear;
}

.s-tick { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(6, 12, 20, 0.9); }
.s-tick-1 { left: 33%; }
.s-tick-2 { left: 66%; }
.s-boss.s-hurt .s-boss-fill { filter: brightness(1.6); }
.s-boss.s-levelup { animation: s-levelup 0.9s ease-out; }

.s-drone {
  position: absolute;
  top: calc(var(--u) * 1.6);
  left: calc(var(--u) * 1.6);
  min-width: max(120px, calc(var(--u) * 17));
  padding: calc(var(--u) * 0.7) calc(var(--u) * 1.1) calc(var(--u) * 0.85);
  border-radius: calc(var(--u) * 0.5);
  transition: border-color 0.2s;
}

.s-drone-head {
  display: flex;
  justify-content: space-between;
  gap: 0.8em;
  margin-bottom: 0.55em;
  font-size: max(8px, calc(var(--u) * 0.9));
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--hud-dim);
  white-space: nowrap;
}

.s-drone-state { color: var(--accent); }
.s-shield-bar { height: max(4px, calc(var(--u) * 0.45)); background: rgba(255, 255, 255, 0.1); }

.s-shield-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #3aa8ff, #8eeaff);
  box-shadow: 0 0 10px rgba(95, 212, 255, 0.75);
  transition: width 0.25s;
}

.s-drone.s-alert { border-color: rgba(255, 130, 90, 0.65); }
.s-drone.s-alert .s-drone-state { color: #ff9466; animation: s-blink 0.4s steps(2) infinite; }
.s-drone.s-alert .s-shield-fill { background: linear-gradient(90deg, #ff6a3d, #ffc06a); box-shadow: 0 0 10px rgba(255, 110, 60, 0.8); }

.s-buttons {
  position: absolute;
  top: calc(var(--u) * 1.6);
  right: calc(var(--u) * 1.6);
  display: flex;
  gap: calc(var(--u) * 0.7);
}

.s-icon {
  width: max(32px, calc(var(--u) * 3.8));
  height: max(32px, calc(var(--u) * 3.8));
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: calc(var(--u) * 0.5);
  color: var(--hud);
  transition: border-color 0.2s, background 0.2s;
}

.s-icon:hover { border-color: rgba(150, 215, 255, 0.55); }
.s-icon svg { width: 56%; height: 56%; }

.s-stats {
  position: absolute;
  left: calc(var(--u) * 1.6);
  bottom: calc(var(--u) * 1.6);
  display: flex;
  gap: calc(var(--u) * 1.8);
  padding: calc(var(--u) * 0.7) calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 0.5);
  text-align: left;
}

.s-stat { display: flex; flex-direction: column; gap: 0.2em; }
.s-stat small { font-size: max(8px, calc(var(--u) * 0.8)); letter-spacing: 0.22em; color: var(--hud-dim); font-weight: 700; }
.s-stat b { font-size: max(12px, calc(var(--u) * 1.65)); font-weight: 600; font-variant-numeric: tabular-nums; }

.s-missile {
  position: absolute;
  right: calc(var(--u) * 2);
  bottom: calc(var(--u) * 2);
  width: max(66px, calc(var(--u) * 10.5));
  height: max(66px, calc(var(--u) * 10.5));
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--hud);
  background: radial-gradient(circle at 50% 38%, rgba(44, 76, 108, 0.66), rgba(6, 14, 24, 0.74) 70%);
  box-shadow: 0 0 0 1px var(--line), 0 8px 26px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  touch-action: none;
  transition: transform 0.08s;
}

.s-missile:active { transform: scale(0.94); }
.s-missile-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.s-ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 3; }
.s-ring { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; }
.s-missile-icon { width: 40%; height: 40%; margin-top: -12%; transition: opacity 0.2s; }
.s-missile-icon svg { width: 100%; height: 100%; display: block; }

.s-missile-label {
  position: absolute;
  bottom: 20%;
  font-size: max(7px, calc(var(--u) * 0.8));
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--hud-dim);
}

.s-missile:not(.s-ready) .s-missile-icon { opacity: 0.4; }
.s-missile:not(.s-ready) .s-ring { stroke: rgba(160, 205, 235, 0.75); }
.s-missile.s-ready { animation: s-ready 1.6s ease-in-out infinite; }
.s-missile.s-ready .s-missile-label { color: var(--accent); }
.s-missile.s-ready .s-ring { filter: drop-shadow(0 0 3px rgba(95, 212, 255, 0.9)); }

.s-vignette,
.s-shieldflash { position: absolute; inset: 0; opacity: 0; }
.s-vignette { background: radial-gradient(ellipse at center, transparent 50%, rgba(255, 50, 20, 0.42)); }
.s-shieldflash { background: radial-gradient(ellipse at center, transparent 35%, rgba(120, 205, 255, 0.5)); }
.s-vignette.s-danger { animation: s-danger 1.8s ease-out; }
.s-shieldflash.s-flash { animation: s-fadeaway 0.6s ease-out; }

.s-warn {
  position: absolute;
  top: 21%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3em 1.6em 0.3em 1.9em;
  font-size: max(16px, calc(var(--u) * 3.3));
  font-weight: 800;
  letter-spacing: 0.3em;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(60, 0, 0, 0.9), 0 0 14px rgba(255, 80, 40, 0.95);
  background: linear-gradient(90deg, transparent, rgba(220, 40, 15, 0.62) 18%, rgba(220, 40, 15, 0.62) 82%, transparent);
  border-top: 1px solid rgba(255, 140, 100, 0.7);
  border-bottom: 1px solid rgba(255, 140, 100, 0.7);
}

.s-warn.s-warn-on { animation: s-blink 0.3s steps(2) 6; }

.s-banner {
  position: absolute;
  top: 13%;
  left: 0;
  right: 0;
  font-size: max(18px, calc(var(--u) * 4));
  font-weight: 800;
  letter-spacing: 0.4em;
  padding-left: 0.4em;
  color: #fff;
  text-shadow: 0 0 18px rgba(255, 120, 60, 0.85);
}

.s-banner.s-banner-on { animation: s-banner 2.6s ease-out forwards; }

.s-hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 13);
  transform: translateX(-50%);
  padding: 0.55em 1.3em;
  border-radius: 999px;
  font-size: max(11px, calc(var(--u) * 1.4));
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.s-hint.s-hint-in { animation: s-hint 7.5s ease forwards; }

.s-reticle {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  margin: calc(var(--u) * -4.5) 0 0 calc(var(--u) * -4.5);
  color: rgba(130, 228, 255, 0.9);
  filter: drop-shadow(0 0 4px rgba(95, 212, 255, 0.7));
  will-change: transform;
  transition: color 0.2s;
}

.s-reticle svg { width: 100%; height: 100%; display: block; animation: s-lock 0.35s ease-out; }

.s-reticle-tag {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 0.5em;
  font-size: max(8px, calc(var(--u) * 0.8));
  letter-spacing: 0.22em;
  font-weight: 700;
}

.s-reticle.s-hot { color: #ff7a4d; filter: drop-shadow(0 0 5px rgba(255, 90, 40, 0.85)); }

.s-pops { position: absolute; inset: 0; }

/* Where a firebomb will cross the drones' path, and the player's own drone */
.s-marks { position: absolute; inset: 0; }
.s-mark {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 150, 100, 0.95);
  box-shadow: 0 0 7px 1px rgba(255, 80, 30, 0.75), inset 0 0 7px rgba(255, 80, 30, 0.6);
  background: radial-gradient(circle, rgba(255, 90, 40, 0.14), rgba(255, 90, 40, 0) 70%);
  will-change: transform, opacity;
}

.s-you {
  position: absolute;
  left: 0;
  top: 0;
  width: max(16px, calc(var(--u) * 1.8));
  height: max(10px, calc(var(--u) * 1.08));
  margin: calc(max(10px, calc(var(--u) * 1.08)) * -1) 0 0 calc(max(16px, calc(var(--u) * 1.8)) * -0.5);
  color: var(--accent);
  filter: drop-shadow(0 0 4px rgba(95, 212, 255, 0.9)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  will-change: transform;
}
.s-you svg { width: 100%; height: 100%; display: block; animation: s-bob 1.1s ease-in-out infinite alternate; }

.s-pop {
  position: absolute;
  font-weight: 800;
  font-size: max(12px, calc(var(--u) * 1.8));
  font-variant-numeric: tabular-nums;
  color: #ffd9a8;
  text-shadow: 0 0 8px rgba(255, 120, 40, 0.9), 0 1px 2px rgba(0, 0, 0, 0.6);
  animation: s-rise 0.9s ease-out forwards;
}

.s-pop-big { font-size: max(16px, calc(var(--u) * 2.6)); color: #fff; }

/* Captions */
.s-caption {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 2.4);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(52%, calc(var(--u) * 60));
  padding: calc(var(--u) * 0.8) calc(var(--u) * 1.8);
  border-radius: calc(var(--u) * 0.5);
  background: rgba(4, 10, 18, 0.68);
  border: 1px solid rgba(150, 215, 255, 0.16);
  font-size: max(12px, calc(var(--u) * 1.7));
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.s-caption-name { font-size: 0.66em; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.3em; }
.s-caption-story .s-caption-text { font-style: italic; }
.s-caption.s-caption-in { animation: s-capin 0.25s ease-out; }

/* The cinematics */
.s-cine { position: absolute; inset: 0; background: #000; pointer-events: auto; }
.s-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }

.s-skip {
  position: absolute;
  right: calc(var(--u) * 2);
  bottom: calc(var(--u) * 2);
  min-height: 36px;
  padding: 0.5em 1.2em;
  border-radius: 999px;
  color: var(--hud);
  font-size: max(12px, calc(var(--u) * 1.35));
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Screens */
.s-screen {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.6);
  overflow: hidden;
}

.s-art { position: absolute; inset: 0; background: #02060c center / cover no-repeat; transform-origin: 62% 45%; }
.s-art.s-push { animation: s-push 26s cubic-bezier(0.25, 0.6, 0.3, 1) forwards; }

.s-load { background: radial-gradient(ellipse at 50% 62%, #0d2236 0%, #02060c 72%); }

.s-load-title {
  font-size: max(18px, calc(var(--u) * 3.4));
  font-weight: 800;
  letter-spacing: 0.32em;
  padding-left: 0.32em;
  color: #fff;
  text-shadow: 0 0 22px rgba(255, 110, 50, 0.55);
}

.s-load-bar { width: min(56%, 420px); height: 2px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.s-load-fill { height: 100%; width: 0; background: linear-gradient(90deg, #5fd4ff, #ffb347); box-shadow: 0 0 10px rgba(95, 212, 255, 0.8); transition: width 0.25s; }
.s-load-text { max-width: 86%; font-size: max(11px, calc(var(--u) * 1.25)); letter-spacing: 0.16em; color: var(--hud-dim); text-transform: uppercase; font-variant-numeric: tabular-nums; }

.s-title { justify-content: flex-start; align-items: flex-start; }

.s-title-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(2, 6, 12, 0.72) 0%, rgba(2, 6, 12, 0.34) 30%, transparent 52%),
    linear-gradient(0deg, rgba(2, 6, 12, 0.6) 0%, transparent 32%);
}

.s-title-box { position: relative; max-width: 46%; padding: calc(var(--u) * 3.6) calc(var(--u) * 4.4); text-align: left; }

.s-kicker {
  margin: 0 0 0.7em;
  font-size: max(10px, calc(var(--u) * 1.15));
  font-weight: 700;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: #ffb38a;
  text-shadow: 0 0 12px rgba(255, 110, 50, 0.6), 0 1px 3px rgba(0, 0, 0, 0.6);
}

.s-title-name,
.s-end-title {
  margin: 0;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, #ffffff 0%, #e8f0fa 48%, #ffb070 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(255, 100, 40, 0.35));
}

.s-title-name { font-size: max(30px, calc(var(--u) * 7)); }

.s-title-by {
  margin: 0.9em 0 0;
  font-size: max(10px, calc(var(--u) * 1.35));
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(235, 244, 255, 0.92);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}

.s-play {
  min-height: 44px;
  padding: 0.75em 2em;
  border-radius: 999px;
  border: 1px solid rgba(255, 190, 140, 0.75);
  background: linear-gradient(180deg, rgba(255, 122, 52, 0.9), rgba(196, 48, 20, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 28px rgba(255, 100, 40, 0.5), 0 10px 30px rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: max(15px, calc(var(--u) * 2.1));
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.1s, filter 0.2s, opacity 0.3s;
}

.s-play:hover { filter: brightness(1.1); }
.s-play:active { transform: scale(0.97); }

.s-alt {
  border-color: rgba(150, 215, 255, 0.5);
  background: linear-gradient(180deg, rgba(30, 60, 92, 0.8), rgba(10, 24, 40, 0.8));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 30px rgba(0, 0, 0, 0.4);
}

.s-title .s-play { position: absolute; left: calc(var(--u) * 4.4); bottom: calc(var(--u) * 7.5); }

.s-title-hint {
  position: absolute;
  left: calc(var(--u) * 4.4);
  bottom: calc(var(--u) * 3.4);
  margin: 0;
  font-size: max(11px, calc(var(--u) * 1.25));
  letter-spacing: 0.04em;
  color: rgba(235, 244, 255, 0.85);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

.s-going .s-play,
.s-going .s-title-hint { opacity: 0; pointer-events: none; }

.s-paused { background: rgba(2, 6, 12, 0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

.s-paused-title {
  margin: 0;
  font-size: max(26px, calc(var(--u) * 5.2));
  font-weight: 800;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  text-transform: uppercase;
  color: #fff;
}

.s-end-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 46%, rgba(2, 6, 12, 0.3), rgba(2, 6, 12, 0.78)); }

.s-end-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  padding-bottom: calc(var(--u) * 4);
}

.s-end .s-kicker { margin: 0; }
.s-end-title { font-size: max(26px, calc(var(--u) * 6)); }
.s-end .s-title-by { margin: 0; }
.s-end-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 1.1); }

.s-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  min-width: calc(var(--u) * 12.5);
  padding: calc(var(--u) * 1) calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 0.5);
}

.s-tile b { font-size: max(16px, calc(var(--u) * 2.9)); font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.s-tile small { font-size: max(8px, calc(var(--u) * 0.9)); letter-spacing: 0.2em; text-transform: uppercase; color: var(--hud-dim); font-weight: 700; }
.s-end-row { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 1.1); }
.s-end-row .s-play { font-size: max(12px, calc(var(--u) * 1.5)); padding: 0.7em 1.4em; letter-spacing: 0.1em; }

.s-fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.5s; }

.s-end-line { display: none; }

/* A phone held sideways: the stats panel would crowd the captions. */
.s-mid .s-stats { display: none; }

/* A small stage (a phone held upright): only what matters. */
.s-small .s-reticle-tag,
.s-small .s-hint,
.s-small .s-title-hint,
.s-small .s-kicker,
.s-small .s-end .s-title-by,
.s-small .s-end-tiles { display: none; }
/* the health bar sits up top between the shield and the buttons, so the drones stay clear */
.s-small .s-boss { top: 6px; left: 78px; right: 138px; width: auto; transform: none; padding: 4px 7px 6px; }
.s-small .s-boss-name { display: none; }
.s-small .s-boss-head { justify-content: flex-end; }
.s-small .s-caption-name { display: none; }
.s-small .s-warn { top: 38%; }
.s-small .s-boss-head { letter-spacing: 0.14em; margin-bottom: 3px; }
.s-small .s-drone { top: 6px; left: 6px; width: auto; min-width: 0; padding: 4px 7px 6px; }
.s-small .s-drone-head { gap: 0.4em; letter-spacing: 0.1em; }
.s-small .s-drone-name { display: none; }
.s-small .s-buttons { top: 6px; right: 6px; gap: 4px; }
.s-small .s-icon { width: 28px; height: 28px; }
.s-small .s-missile { right: 8px; bottom: 8px; width: 56px; height: 56px; }
.s-small .s-missile-label { display: none; }
.s-small .s-missile-icon { margin-top: 0; }
.s-small .s-hint { bottom: 70px; white-space: normal; width: max-content; max-width: 80%; }
.s-small .s-caption { left: 8px; right: 8px; bottom: 8px; transform: none; width: auto; max-width: none; padding: 5px 10px; }
.s-small.s-playing .s-caption { right: 72px; }
.s-small .s-title-box { max-width: 60%; padding: 12px 14px; }
.s-small .s-title .s-play { left: 14px; bottom: 14px; }
.s-small .s-end { justify-content: flex-start; padding-top: 12px; }
.s-small .s-end-box { gap: 7px; padding-bottom: 0; }
.s-small .s-end-line { display: block; margin: 0; font-size: 11px; letter-spacing: 0.06em; color: var(--hud); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }
.s-small .s-end-row { gap: 6px; }
.s-small .s-end-row .s-play { min-height: 30px; padding: 0.45em 0.8em; font-size: 11px; letter-spacing: 0.05em; }

@keyframes s-blink { 50% { opacity: 0.3; } }
@keyframes s-ready { 50% { box-shadow: 0 0 0 1px rgba(95, 212, 255, 0.85), 0 0 30px rgba(95, 212, 255, 0.55), 0 8px 26px rgba(0, 0, 0, 0.35); } }
@keyframes s-danger { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@keyframes s-fadeaway { from { opacity: 1; } to { opacity: 0; } }
@keyframes s-levelup { 30% { box-shadow: 0 0 0 1px rgba(255, 140, 90, 0.8), 0 0 34px rgba(255, 100, 40, 0.8); } }
@keyframes s-banner { 0% { opacity: 0; letter-spacing: 0.9em; } 14% { opacity: 1; letter-spacing: 0.4em; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes s-hint { 0% { opacity: 0; translate: 0 8px; } 6% { opacity: 1; translate: 0 0; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes s-capin { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes s-lock { from { opacity: 0; transform: scale(1.7) rotate(45deg); } to { opacity: 1; transform: none; } }
@keyframes s-rise { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.7); } 15% { opacity: 1; transform: translate(-50%, -70%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -260%); } }
@keyframes s-push { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes s-bob { from { transform: translateY(-15%); } to { transform: translateY(15%); } }

@media (prefers-reduced-motion: reduce) {
  .s-art.s-push, .s-missile.s-ready, .s-warn.s-warn-on, .s-drone.s-alert .s-drone-state, .s-you svg { animation: none; }
}