/* Alien Invasion: one wide screen. The problem sits in a window along the TOP, clear of the
 * fight; everything below it is the battle, seen from the side — city, hills, cratered ground,
 * the human line with its tank on the left, the alien line on the right, the mothership above
 * firing death lasers down. rootClass "ai-root", appClass "full-bleed" so the game gets the
 * whole width and the companion sits underneath it.
 */

.game-app .ai-root { position: relative; height: 100%; min-height: 0; overflow: hidden; }

.game-app .ai-stage {
  position: relative; height: 100%; width: 100%; overflow: hidden;
  border-radius: var(--radius, 12px);
  --ai-glow: #8ff7d2; --ai-laser: #6bff9e;
}
.game-app .ai-stage[data-theme="zombies"] { --ai-glow: #d9f08a; --ai-laser: #c6ff6b; }
.game-app .ai-stage[data-theme="robots"]  { --ai-glow: #bfe9ff; --ai-laser: #7fd4ff; }
.game-app .ai-stage[data-theme="storm"]   { --ai-glow: #efe9ff; --ai-laser: #d9c9ff; }

/* The art fills the stage and is cropped by it, so the field runs off both sides. */
.game-app .ai-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---- THE WINDOW ALONG THE TOP ----
 * Not over the fight and not a floating card: it spans the full width, sits flush against the
 * top edge, and is lit like a command feed — the frame the battle is being watched through.
 */
.game-app .ai-window {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px clamp(14px, 3vw, 40px) 14px;
  color: #d8f4ec; text-align: center;
  background: linear-gradient(180deg, rgba(6,14,20,.96) 0%, rgba(6,14,20,.90) 72%,
                                      rgba(6,14,20,0) 100%);
  border-bottom: 2px solid rgba(143,247,210,.35);
  box-shadow: 0 10px 34px rgba(0,0,0,.5);
  max-height: 58%; overflow-y: auto;
  /* the shared character cells read these four, so they come out as part of the feed */
  --text: #d8f4ec; --muted: #6f9a93; --accent: var(--ai-glow); --panel: rgba(143,247,210,.08);
}
/* the scan line along the bottom edge, so it reads as a live feed rather than a panel */
.game-app .ai-window::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ai-glow), transparent);
  animation: ai-scan 3.4s linear infinite;
}
@keyframes ai-scan { 0% { opacity: .25; } 50% { opacity: .9; } 100% { opacity: .25; } }
.game-app .ai-stage[data-calm] .ai-window::after { animation: none; opacity: .5; }

.game-app .ai-where {
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: #6f9a93;
}
.game-app .ai-prompt {
  font-size: clamp(1rem, 2.3vh, 1.26rem); font-weight: 600; line-height: 1.3; max-width: 60ch;
}

.game-app .ai-steps {
  display: flex; flex-direction: column; gap: 4px;
  width: min(100%, 620px); margin-top: 2px;
}
.game-app .ai-step {
  display: grid; grid-template-columns: 1.5em 1fr; align-items: baseline; gap: 10px;
  padding: 3px 6px; border-radius: 7px; border-left: 2px solid transparent; text-align: left;
}
.game-app .ai-step-n { font-size: .7rem; text-align: right; color: #6f9a93; font-variant-numeric: tabular-nums; }
.game-app .ai-step-body { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; }
.game-app .ai-step.ai-solved .ai-step-n { color: var(--ai-glow); }
.game-app .ai-step-answer { color: var(--ai-glow); font-weight: 600; font-variant-numeric: tabular-nums; }
.game-app .ai-step-label { font-size: .76rem; color: #6f9a93; }
.game-app .ai-step.ai-open { background: rgba(143,247,210,.12); border-left-color: var(--ai-glow); }
.game-app .ai-step.ai-open .ai-step-n { color: var(--ai-glow); font-weight: 700; }
.game-app .ai-step.ai-locked { opacity: .40; }
.game-app .ai-step-ghost { letter-spacing: .2em; color: #6f9a93; white-space: pre; }

.game-app .ai-hint {
  width: min(100%, 620px); font-size: .82rem; line-height: 1.4; color: #ffd9a8; text-align: left;
  padding: 6px 9px; border-radius: 8px;
  background: rgba(232,163,92,.14); border-left: 2px solid rgba(232,163,92,.6);
}

.game-app .ai-submit {
  font: inherit; font-weight: 700; letter-spacing: .05em; padding: 8px 30px; cursor: pointer;
  color: #06231d; background: var(--ai-glow); border: none; border-radius: 999px;
  box-shadow: 0 0 18px rgba(143,247,210,.45); transition: filter .12s, box-shadow .12s;
}
.game-app .ai-submit:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 0 26px rgba(143,247,210,.6); }
.game-app .ai-submit:disabled { opacity: .45; cursor: default; box-shadow: none; }

/* ---- the two gauges, bottom corners, out of the way of both lines ---- */
.game-app .ai-hud {
  position: absolute; bottom: 10px; left: 14px; right: 14px; z-index: 2;
  display: flex; justify-content: space-between; gap: 14px; pointer-events: none;
}
.game-app .ai-gauge {
  display: flex; align-items: center; gap: 8px;
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.85); text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.game-app .ai-gauge b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.game-app .ai-track {
  width: clamp(70px, 15vw, 190px); height: 8px; border-radius: 5px;
  background: rgba(0,0,0,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); overflow: hidden;
}
.game-app .ai-track i { display: block; height: 100%; width: 0; transition: width .5s ease; }
.game-app .ai-gauge-army .ai-track i { background: linear-gradient(90deg, #ffd9a8, #e8a35c); }
.game-app .ai-gauge-horde .ai-track i {
  background: linear-gradient(90deg, var(--ai-glow), #2bb389); margin-left: auto;
}
.game-app .ai-gauge-army.ai-low .ai-track i { animation: ai-pulse .9s ease-in-out infinite; }
@keyframes ai-pulse { 0%, 100% { filter: none; } 50% { filter: brightness(1.9); } }

/* ---- the mothership ---- */
.game-app .ai-ship {
  --press: 0;
  animation: ai-hover 6s ease-in-out infinite;
  translate: 0 calc(var(--press) * 46px);
}
.game-app .ai-ship-beam { opacity: calc(.22 + var(--press) * .6); }
.game-app .ai-ship-mouth { opacity: calc(.4 + var(--press) * .6); }
@keyframes ai-hover { 0%, 100% { rotate: -.6deg; } 50% { rotate: .6deg; } }
.game-app .ai-ports circle {
  animation: ai-port 2.6s ease-in-out infinite; animation-delay: calc(var(--n) * .11s);
}
@keyframes ai-port { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.game-app .ai-ship.ai-struck { animation: ai-ship-hit .46s ease-out; }
@keyframes ai-ship-hit { 30% { filter: brightness(2.4) saturate(.4); } }
.game-app .ai-ship.ai-descend { animation: ai-descend 1s ease-in forwards; }
@keyframes ai-descend { to { translate: -240px 300px; filter: brightness(1.4); } }
.game-app .ai-ship.ai-blow { animation: ai-blow .82s ease-out forwards; }
@keyframes ai-blow {
  35% { filter: brightness(3.2); scale: 1.07; }
  100% { filter: brightness(1); opacity: .2; scale: .55; translate: 0 -90px; }
}

.game-app .ai-stars circle { animation: ai-twinkle 4s ease-in-out infinite; animation-delay: calc(var(--n) * .06s); }
@keyframes ai-twinkle { 0%, 100% { opacity: .2; } 50% { opacity: .9; } }
.game-app .ai-smoke path { animation: ai-drift 9s ease-in-out infinite; animation-delay: calc(var(--n) * 1.4s); }
@keyframes ai-drift { 0%, 100% { translate: 0 0; opacity: .8; } 50% { translate: 14px -10px; opacity: 1; } }

/* ---- the tank ---- */
.game-app .ai-turret { transform-box: fill-box; transform-origin: 22% 60%; }
.game-app .ai-tank.ai-recoil .ai-turret { animation: ai-recoil .34s ease-out; }
@keyframes ai-recoil { 30% { translate: -14px 2px; rotate: -4deg; } 100% { translate: 0 0; } }
.game-app .ai-tank.ai-struck { animation: ai-hit .46s ease-out; }
@keyframes ai-hit { 25% { filter: brightness(2.2) saturate(.3); } }

/* ---- the two lines of figures ---- */
.game-app .ai-unit { animation: ai-sway 3.4s ease-in-out infinite; animation-delay: calc(var(--n, 0) * .18s); }
@keyframes ai-sway { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
.game-app .ai-unit.ai-landing { animation: ai-land .6s cubic-bezier(.2,.8,.3,1) backwards; animation-delay: var(--d, 0ms); }
@keyframes ai-land { from { translate: 0 -420px; opacity: .2; } to { translate: 0 0; opacity: 1; } }
.game-app .ai-unit.ai-firing { animation: ai-fire .4s ease-out; animation-delay: var(--d, 0ms); }
@keyframes ai-fire { 40% { translate: -4px 0; filter: brightness(1.6); } }
.game-app .ai-unit.ai-fallen { animation: ai-fall .6s ease-in forwards; animation-delay: var(--d, 0ms); }
@keyframes ai-fall { to { rotate: -74deg; opacity: 0; translate: 0 6px; } }
.game-app .ai-unit.ai-charge { animation: ai-charge 1s ease-in forwards; animation-delay: var(--d, 0ms); }
@keyframes ai-charge { to { translate: -620px 0; } }
.game-app .ai-stage[data-calm] .ai-unit { animation: none; }

/* ---- fire ---- */
.game-app .ai-tracer {
  transition: all .2s linear; transition-delay: var(--d, 0ms);
  filter: drop-shadow(0 0 7px currentColor);
}
/* the death lasers: thick beams straight down the screen onto the human line */
.game-app .ai-death {
  animation: ai-death .7s ease-out forwards; animation-delay: var(--d, 0ms);
  transform-box: fill-box; transform-origin: 50% 0;
  filter: drop-shadow(0 0 16px var(--ai-laser));
}
@keyframes ai-death {
  0% { scale: .2 0; opacity: 0; }
  18% { scale: 1.25 1; opacity: 1; }
  70% { scale: 1 1; opacity: .95; }
  100% { scale: .4 1; opacity: 0; }
}
.game-app .ai-burst {
  animation: ai-pop .72s ease-out forwards; animation-delay: var(--d, 0ms);
  transform-box: fill-box; transform-origin: 50% 50%;
}
@keyframes ai-pop { 0% { scale: .2; opacity: 1; } 100% { scale: 6; opacity: 0; } }

.game-app .ai-stage.ai-shake { animation: ai-shake .4s ease-in-out; }
@keyframes ai-shake { 0%, 100% { translate: 0 0; } 25% { translate: -6px 3px; } 75% { translate: 6px -3px; } }
.game-app .ai-flash {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 2;
  background: radial-gradient(circle at 70% 28%, rgba(255,255,255,.9), transparent 60%);
  transition: opacity .2s;
}
.game-app .ai-flash.ai-flash-on { opacity: 1; }
.game-app .ai-stage[data-calm] .ai-flash { display: none; }

@media (max-width: 620px) {
  .game-app .ai-window { padding: 9px 12px 11px; max-height: 64%; }
  .game-app .ai-gauge span:first-child, .game-app .ai-gauge span:last-child { display: none; }
}

/* ---- the teacher panel's preview ---- */
.ai-preview { display: flex; flex-direction: column; gap: 12px; }
.ai-preview-p { padding: 8px 10px; background: var(--panel, rgba(255,255,255,.04)); border-radius: 8px; }
.ai-preview-prompt { font-weight: 600; }
.ai-preview-steps { margin: 6px 0 0 1.2em; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ai-preview-answer { color: var(--accent, #5be8bd); font-weight: 600; }
.ai-preview-label { margin-left: 8px; font-size: .86rem; color: var(--muted, #8b98ad); }
.ai-preview-hint { display: block; font-size: .84rem; color: var(--muted, #8b98ad); }