/* STACK PANIC cinematic presentation layer
   Inspired by game-UI low-chrome guidance and CRT / bloom / lens-warp / liquid shader language. */
:root{
  --hud-edge:rgba(67,239,255,.34);
  --hud-glow:rgba(67,239,255,.16);
  --incident-accent:#43efff;
  --incident-hot:#ff5f68;
}

/* Make the chrome feel like an arcade instrument panel instead of a dashboard. */
.intro{margin:8px 0 18px}
.intro h1{font-size:clamp(2.4rem,6vw,4.7rem)}
.panel{
  border-radius:10px;
  background:linear-gradient(180deg,rgba(10,14,28,.72),rgba(5,8,18,.82));
  border-color:rgba(67,239,255,.16);
  box-shadow:inset 0 1px rgba(255,255,255,.03),0 18px 60px rgba(0,0,0,.22);
  backdrop-filter:blur(12px);
}
.stats-panel,.side-panel{position:relative;overflow:hidden}
.stats-panel:before,.side-panel:before{
  content:"";position:absolute;inset:0 auto 0 0;width:2px;
  background:linear-gradient(transparent,var(--cyan),transparent);opacity:.5
}
.stat{padding:9px 0}.stat strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.event-card{border:1px solid rgba(255,255,255,.045);background:rgba(255,255,255,.022)}
.legend span{border:1px solid rgba(255,255,255,.035);background:rgba(255,255,255,.02)}

/* CRT language: subtle when calm, aggressive only during reality failure. */
.screen-fx:after{
  content:"";position:absolute;inset:-2%;pointer-events:none;opacity:.28;
  background:
    radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.42) 100%),
    linear-gradient(90deg,rgba(255,0,92,.018),rgba(0,255,255,.018));
  mix-blend-mode:screen;
  animation:crt-breathe 7s ease-in-out infinite;
}
@keyframes crt-breathe{50%{opacity:.4;transform:scale(1.006)}}

/* DOM stage used for event actors. It sits above game/overlay but below modal UI. */
.event-stage{position:absolute;z-index:6;inset:14px;overflow:hidden;border-radius:13px;pointer-events:none;transform:translateZ(0)}
.event-stage .fx-layer{position:absolute;inset:0;pointer-events:none}
.event-stage .fx-wash{opacity:0;transition:opacity .25s ease;mix-blend-mode:screen}
.event-stage.live .fx-wash{opacity:1}

/* Event telegraph deliberately covers the center only briefly. */
.incident-cinematic{
  position:absolute;z-index:8;inset:14px;display:grid;place-items:center;pointer-events:none;
  opacity:0;transform:scale(.96);transition:opacity .16s ease,transform .18s ease;
}
.incident-cinematic.show{opacity:1;transform:scale(1)}
.incident-cinematic:before,.incident-cinematic:after{
  content:"";position:absolute;left:0;right:0;height:15%;background:rgba(2,4,9,.88);transform:scaleY(0);transition:transform .2s ease
}
.incident-cinematic:before{top:0;transform-origin:top}.incident-cinematic:after{bottom:0;transform-origin:bottom}
.incident-cinematic.show:before,.incident-cinematic.show:after{transform:scaleY(1)}
.incident-copy{position:relative;text-align:center;padding:18px 26px;max-width:86%;filter:drop-shadow(0 0 24px rgba(0,0,0,.8))}
.incident-copy small{display:block;font:900 10px/1 ui-monospace,monospace;letter-spacing:.28em;color:var(--incident-hot);margin-bottom:8px}
.incident-copy strong{display:block;font-size:clamp(1.6rem,5vw,2.8rem);line-height:.9;letter-spacing:-.045em;text-transform:uppercase;color:#fff;text-shadow:0 0 24px color-mix(in srgb,var(--incident-accent) 70%,transparent)}
.incident-copy span{display:block;margin-top:10px;color:#b8c2d8;font:700 11px/1.35 ui-monospace,monospace;letter-spacing:.08em}
.incident-copy .severity{margin:10px auto 0;width:140px;height:3px;background:rgba(255,255,255,.12);overflow:hidden}
.incident-copy .severity i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--incident-accent),var(--incident-hot));transform-origin:left;animation:severity-scan .85s cubic-bezier(.2,.7,.2,1)}
@keyframes severity-scan{from{transform:scaleX(0)}}

/* Impact feedback: bloom + lens punch. */
.fx-flash{position:absolute;inset:0;opacity:0;background:white;mix-blend-mode:screen}
.fx-flash.fire{animation:fx-flash .38s ease-out}
@keyframes fx-flash{0%{opacity:.94}16%{opacity:.58}100%{opacity:0}}
.fx-shockwave{position:absolute;width:34px;height:34px;margin:-17px;border:3px solid rgba(255,255,255,.95);border-radius:50%;box-shadow:0 0 30px var(--incident-hot),inset 0 0 20px var(--incident-accent);mix-blend-mode:screen;animation:shockwave .75s cubic-bezier(.05,.65,.2,1) forwards}
@keyframes shockwave{to{transform:scale(9);opacity:0;border-width:.5px}}
.cabinet.impact-punch{animation:impact-punch .36s cubic-bezier(.1,.9,.2,1)}
@keyframes impact-punch{0%{transform:scale(1)}18%{transform:scale(1.035) rotate(.35deg)}45%{transform:scale(.992) rotate(-.2deg)}100%{transform:scale(1)}}

/* Liquid event: visible refraction/wobble and animated waterline. */
.event-stage .liquid-field{opacity:0;background:linear-gradient(180deg,transparent 0 28%,rgba(37,192,255,.08) 45%,rgba(26,117,255,.24) 100%);transition:opacity .35s ease}
.event-stage.liquid .liquid-field{opacity:1}
.event-stage.liquid .liquid-field:before,.event-stage.liquid .liquid-field:after{
  content:"";position:absolute;left:-20%;width:140%;height:90px;border-radius:45%;background:rgba(67,239,255,.12);filter:blur(3px);animation:wave-drift 2.2s ease-in-out infinite alternate
}
.event-stage.liquid .liquid-field:before{bottom:26%;transform:rotate(-3deg)}
.event-stage.liquid .liquid-field:after{bottom:14%;animation-delay:-.8s;transform:rotate(3deg)}
@keyframes wave-drift{to{translate:6% 12px;scale:1.08 1.18}}
.cabinet.water #game,.cabinet.water #overlay{filter:url(#stack-liquid-warp) saturate(1.55) contrast(1.08)}

/* Sheep are actual animated actors rather than emoji stamped into the canvas. */
.fx-sheep{position:absolute;width:44px;height:30px;filter:drop-shadow(0 7px 5px rgba(0,0,0,.32));will-change:transform}
.fx-sheep .body{position:absolute;left:6px;top:5px;width:28px;height:20px;border-radius:45%;background:#eff5ff;box-shadow:-7px 1px 0 -2px #eff5ff,6px -4px 0 -3px #eff5ff}
.fx-sheep .head{position:absolute;right:0;top:8px;width:15px;height:14px;border-radius:4px;background:#171a24}.fx-sheep .eye{position:absolute;right:3px;top:4px;width:3px;height:3px;background:#43efff;box-shadow:0 0 8px #43efff}
.fx-sheep .legs{position:absolute;left:11px;top:23px;width:4px;height:9px;background:#777f91;box-shadow:15px 0 #777f91;transform-origin:top;animation:sheep-legs .16s steps(2) infinite}
@keyframes sheep-legs{50%{transform:skewX(18deg)}}

/* The tank is intentionally oversized. It invades the playfield instead of politely decorating it. */
.fx-tank{position:absolute;left:-45%;bottom:4%;width:210px;height:92px;filter:drop-shadow(0 18px 20px rgba(0,0,0,.5));animation:tank-cross 7.6s linear forwards}
.fx-tank .track{position:absolute;left:8px;bottom:2px;width:176px;height:30px;border-radius:16px;background:#11180f;border:5px solid #55623c;box-shadow:inset 0 0 0 4px #1b2416}
.fx-tank .hull{position:absolute;left:25px;bottom:20px;width:140px;height:43px;clip-path:polygon(8% 15%,85% 0,100% 68%,87% 100%,0 100%);background:linear-gradient(#8a9958,#59673b)}
.fx-tank .turret{position:absolute;left:73px;bottom:53px;width:70px;height:27px;border-radius:8px 13px 4px 4px;background:#738149;transform-origin:28px 18px;animation:turret-hunt 1.2s ease-in-out infinite alternate}
.fx-tank .barrel{position:absolute;left:122px;bottom:68px;width:105px;height:9px;background:#849454;border-radius:3px;transform-origin:left center;animation:turret-hunt 1.2s ease-in-out infinite alternate}
.fx-tank .muzzle{position:absolute;left:220px;bottom:56px;width:42px;height:42px;opacity:0;background:radial-gradient(circle,#fff 0 15%,#ffd166 16% 38%,#ff5f68 39% 58%,transparent 60%);filter:blur(.4px)}
.fx-tank.fire .muzzle{animation:muzzle .24s ease-out}
@keyframes muzzle{0%{opacity:1;transform:scale(.45) rotate(20deg)}100%{opacity:0;transform:scale(1.65) rotate(-10deg)}}
@keyframes tank-cross{0%{transform:translateX(0)}12%{transform:translateX(45%)}68%{transform:translateX(150%)}100%{transform:translateX(330%)}}
@keyframes turret-hunt{to{transform:rotate(-6deg)}}

/* Meteor actors are long, bright and land with a distinct flash. */
.fx-meteor{position:absolute;width:12px;height:86px;border-radius:99px;background:linear-gradient(#fff,#ffd166 25%,#ff5f68 50%,transparent);filter:drop-shadow(0 0 10px #ffd166) drop-shadow(0 0 28px #ff5f68);transform-origin:50% 100%;will-change:transform,opacity}
.fx-impact-debris{position:absolute;width:5px;height:5px;background:var(--incident-accent);box-shadow:0 0 10px currentColor;animation:debris .7s ease-out forwards}
@keyframes debris{to{translate:var(--dx) var(--dy);rotate:var(--rot);opacity:0;scale:.5}}

/* Reality breach now gets a literal screen tear before Three.js takes over. */
.breach-tear{position:absolute;inset:-10%;opacity:0;pointer-events:none;background:
  linear-gradient(78deg,transparent 0 45%,rgba(255,255,255,.95) 46% 46.6%,rgba(67,239,255,.8) 46.7% 47.2%,transparent 47.3%),
  radial-gradient(circle at 52% 53%,rgba(143,124,255,.8),transparent 22%);mix-blend-mode:screen;filter:blur(.3px)}
.breach-tear.fire{animation:breach-tear .9s cubic-bezier(.2,.7,.1,1)}
@keyframes breach-tear{0%{opacity:0;transform:scale(.8)}22%{opacity:1}68%{opacity:.92;transform:scale(1.25) rotate(-2deg)}100%{opacity:0;transform:scale(2.2) rotate(4deg)}}

/* Catastrophic state deforms the whole cabinet for a few beats without hiding play. */
.cabinet.reality-pressure{animation:reality-pressure .7s steps(2,end) infinite}
@keyframes reality-pressure{
  0%,100%{filter:none;transform:none}
  25%{filter:hue-rotate(8deg) saturate(1.18);transform:translateX(-1px) skewX(.15deg)}
  50%{filter:hue-rotate(-8deg) contrast(1.1);transform:translateX(2px) skewX(-.2deg)}
  75%{filter:saturate(1.35);transform:translateY(1px)}
}

/* Give event classes a distinct screen language. */
.cabinet.meteor{--incident-accent:#ffd166;--incident-hot:#ff5f68}
.cabinet.tank{--incident-accent:#b9ff66;--incident-hot:#ffd166}
.cabinet.water{--incident-accent:#43efff;--incident-hot:#8f7cff}
.cabinet.sheep{--incident-accent:#ffffff;--incident-hot:#ff5ab7}
.cabinet.miniworld{--incident-accent:#8f7cff;--incident-hot:#43efff}
.cabinet.acid{--incident-accent:#b9ff66;--incident-hot:#eaff5c}
.cabinet.gravity{--incident-accent:#d17cff;--incident-hot:#43efff}

@media(max-width:760px){
  .panel{border-radius:8px}.event-stage,.incident-cinematic{inset:14px}
  .incident-copy strong{font-size:1.75rem}.incident-copy span{font-size:10px}
  .fx-tank{width:170px;height:76px}.fx-tank .track{width:145px}.fx-tank .hull{width:118px}.fx-tank .turret{left:60px}.fx-tank .barrel{left:104px;width:88px}.fx-tank .muzzle{left:186px}
}

@media(prefers-reduced-motion:reduce){
  .screen-fx:after,.fx-sheep .legs,.fx-tank,.fx-tank .turret,.fx-tank .barrel,.cabinet.reality-pressure{animation:none!important}
  .incident-cinematic,.fx-wash{transition:none!important}
}