:root {
  color-scheme: dark;
  --acid: #d7ff31;
  --pink: #ff2f8d;
  --paper: #ead6a8;
  --ink: #100d0a;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #090705;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}

#stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  isolation: isolate;
  background: #160e08;
  cursor: default;
  perspective: 1200px;
  overflow: hidden;
}

/* Cold-open image plate */
#battle {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  z-index: 1;
  transform-origin: 50% 52%;
  filter: saturate(.85) contrast(1.12);
  transition: opacity .8s ease, clip-path .8s cubic-bezier(.7,0,.3,1), transform .8s ease;
  will-change: transform, opacity, clip-path;
}
#battle.dropped {
  opacity: 0;
  clip-path: inset(0 0 0 100%);
  transform: scale(1.08) translateX(-3%);
}

/* Vector scene canvas */
#vec {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
}

/* Tactical map */
#mapWrap {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  transition: opacity .4s ease;
}
#mapWrap.live { opacity: 1; }
#mapSvg {
  width: 118vw;
  height: 118vh;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.7));
  transform-origin: 50% 55%;
  transform: rotateX(66deg) scale(1.15);
  transition: transform 2.4s cubic-bezier(.2,.9,.2,1);
}
#mapWrap.flat #mapSvg {
  transform: rotateX(0deg) scale(1.34);
}

/* Additive FX + grain */
#fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  mix-blend-mode: screen;
  pointer-events: none;
}

#grain {
  position: absolute;
  inset: -80%;
  z-index: 7;
  opacity: .14;
  pointer-events: none;
  animation: grain .18s steps(2) infinite;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
@keyframes grain {
  0% { transform: translate(1%,2%); }
  25% { transform: translate(-2%,-1%); }
  50% { transform: translate(2%,-3%); }
  75% { transform: translate(-3%,2%); }
  100% { transform: translate(1%,1%); }
}

/* Cold-open cards */
.card {
  position: absolute;
  z-index: 8;
  opacity: 0;
  pointer-events: none;
}
.card p { margin: 0; font: 700 clamp(11px,1.15vw,22px)/1.2 ui-monospace,monospace; letter-spacing:.15em; text-transform: uppercase; }
.card h1 { margin: .25em 0 .12em; color: var(--paper); font-size: clamp(58px,11vw,190px); line-height: .72; letter-spacing: -.045em; }
.card h1 span { color: var(--acid); }
.credit { color: var(--pink); font-size: clamp(22px,3vw,56px) !important; }
#titleCard { left: 6vw; top: 9vh; padding: 2.4vw; background: rgba(13,10,7,.88); border: 5px solid var(--paper); box-shadow: 12px 12px 0 var(--pink); transform: rotate(-2deg) scale(.86); }
.tactical { left: auto; right: 6vw; top: 12vh; color: var(--ink); background: rgba(234,214,168,.94); border-color: var(--ink); box-shadow: -12px 12px 0 var(--acid); max-width: 38vw; }
.tactical h2 { margin: .15em 0; font-size: clamp(42px,6.4vw,120px); line-height: .78; }
.diagram { display: flex; align-items: center; gap: 1vw; padding: .6em 0; font-size: clamp(24px,3.4vw,64px); white-space: nowrap; }
.diagram b { color: #5b251d; }
.diagram i { color: var(--pink); }
.diagram strong { color: #20201a; }
.show { animation: slam .32s cubic-bezier(.15,1.4,.35,1) forwards; }
.hide { animation: out .22s ease-in forwards; }
@keyframes slam { to { opacity: 1; transform: rotate(-2deg) scale(1); } }
@keyframes out { to { opacity: 0; transform: scale(1.5) rotate(4deg); } }

/* Wipe + flash */
#wipe {
  position: absolute;
  inset: 0;
  z-index: 9;
  background: var(--acid);
  transform: translateX(-101%);
  pointer-events: none;
}
#wipe.go { animation: wipe .6s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes wipe {
  0% { transform: translateX(-101%); }
  45% { transform: translateX(0); }
  100% { transform: translateX(101%); }
}
#flash {
  position: absolute;
  inset: 0;
  z-index: 9;
  background: radial-gradient(circle at 50% 50%, #fff 0%, var(--pink) 40%, transparent 75%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
#flash.go { animation: flash .45s ease-out forwards; }
@keyframes flash {
  0% { opacity: .95; transform: scale(.4); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* Stamp + controls */
#stamp {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 7vh;
  padding: .12em .32em;
  transform: translateX(-50%) rotate(-3deg) scale(0);
  white-space: nowrap;
  color: var(--ink);
  background: var(--acid);
  border: 8px solid var(--ink);
  box-shadow: 9px 9px 0 var(--pink);
  font-size: clamp(44px,8.6vw,160px);
  pointer-events: none;
}
#stamp.show { animation: stamp .3s cubic-bezier(.1,1.7,.25,1) forwards; }
@keyframes stamp { to { opacity: 1; transform: translateX(-50%) rotate(-3deg) scale(1); } }

#play {
  position: absolute;
  z-index: 11;
  left: 50%;
  bottom: 5vh;
  transform: translateX(-50%);
  padding: .75em 1.1em;
  border: 4px solid #111;
  color: #111;
  background: var(--acid);
  box-shadow: 8px 8px 0 var(--pink);
  font: 900 clamp(18px,2vw,36px)/1 Impact, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
}
#play:hover { transform: translate(-50%,-3px); }
#time {
  position: absolute;
  z-index: 11;
  right: 2vw;
  bottom: 2vh;
  color: #fff;
  font: 700 14px/1 ui-monospace, monospace;
  text-shadow: 1px 1px #000;
}

@media (max-width: 700px) {
  .tactical { max-width: 78vw; }
  .card { left: 4vw; }
  #mapSvg { width: 150vw; height: 150vh; }
}