/* ---------------------------------------------------------------- base --- */
:root{
  --red:#b00d17;
  --red-deep:#6d0209;
  --red-bright:#ff2d38;
  --ink:#f6f1e6;
  --amber:#ffc300;
  --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:#000;
  color:var(--ink);
  font-family:var(--sans);
  overflow:hidden;
  cursor:none;
  -webkit-font-smoothing:antialiased;
}
body.show-cursor{cursor:default}

.screen{
  position:fixed;
  inset:0;
  display:none;
  opacity:0;
  transition:opacity .35s ease;
}
.screen.is-active{display:block;opacity:1}
.screen.is-fading{opacity:0}

/* ------------------------------------------------------------- phase 0 --- */
#screen-unlock{
  background:radial-gradient(ellipse at 50% 45%,#131313 0%,#050505 70%);
  display:none;
  place-items:center;
}
#screen-unlock.is-active{display:grid}

.unlock-box{
  display:block;
  text-align:center;
  padding:24px;
  margin:0;
  background:none;
  border:0;
  color:inherit;
  font:inherit;
  cursor:pointer;
  touch-action:manipulation;              /* no 300 ms tap delay on iOS */
  -webkit-tap-highlight-color:transparent;
  animation:soft-flicker 6s infinite;
}
.unlock-box:focus-visible{outline:2px solid var(--amber);outline-offset:8px}
.unlock-bars{display:flex;gap:2px;justify-content:center;margin:0 auto 28px;width:min(420px,70vw);height:56px}
.unlock-bars i{flex:1;opacity:.85}
.unlock-bars i:nth-child(1){background:#c8c8c8}
.unlock-bars i:nth-child(2){background:#c8c800}
.unlock-bars i:nth-child(3){background:#00c8c8}
.unlock-bars i:nth-child(4){background:#00c800}
.unlock-bars i:nth-child(5){background:#c800c8}
.unlock-bars i:nth-child(6){background:#c80000}
.unlock-bars i:nth-child(7){background:#0000c8}

#unlock-title{
  display:block;
  font-family:var(--mono);
  font-size:clamp(18px,3.4vw,38px);
  letter-spacing:.32em;
  margin:0 0 14px;
  font-weight:500;
  text-indent:.32em;
}
#unlock-hint{visibility:hidden}
body.is-armed #unlock-hint{visibility:visible}
.unlock-hint{
  display:block;
  font-family:var(--mono);
  font-size:clamp(11px,1.5vw,16px);
  letter-spacing:.22em;
  color:#8d8d8d;
  margin:0;
  animation:blink 1.4s steps(1,end) infinite;
}
.unlock-status{
  display:block;
  font-family:var(--mono);
  font-size:clamp(10px,1.2vw,13px);
  letter-spacing:.18em;
  color:#4a4a4a;
  margin:34px 0 0;
  min-height:1.2em;
}
.unlock-status.is-nudge{color:var(--amber);animation:blink .35s steps(1,end) 3}

@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:.15}}
@keyframes soft-flicker{0%,97%{opacity:1}97.5%{opacity:.82}98%{opacity:1}99%{opacity:.9}100%{opacity:1}}

/* ------------------------------------------------------------- phase 1 --- */
#screen-alert{
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse at 50% 38%,#c8121d 0%,var(--red) 42%,var(--red-deep) 100%);
  animation:alert-pulse 3.6s ease-in-out infinite;
}
@keyframes alert-pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.1)}}

.crawl{
  position:absolute;top:0;left:0;right:0;
  height:clamp(34px,5.4vh,60px);
  background:#14060a;
  border-bottom:2px solid rgba(255,255,255,.28);
  overflow:hidden;
  display:flex;align-items:center;
  z-index:3;
}
.crawl-track{
  display:flex;
  white-space:nowrap;
  will-change:transform;
  animation:crawl 34s linear infinite;
}
.crawl-track span{
  font-family:var(--mono);
  font-size:clamp(12px,1.9vh,20px);
  letter-spacing:.2em;
  color:var(--amber);
  padding-right:3ch;
}
@keyframes crawl{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.alert-body{
  position:absolute;
  inset:clamp(34px,5.4vh,60px) 0 0 0;
  display:flex;
  flex-direction:column;
  padding:clamp(18px,4vh,48px) clamp(20px,5vw,80px) 0;
}

.alert-head{
  display:flex;
  gap:clamp(14px,2.4vw,34px);
  align-items:center;
  flex:0 0 auto;
  flex-wrap:wrap;
}
.alert-titles{flex:1 1 auto;min-width:0}

.alert-count{
  flex:0 0 auto;
  margin-left:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.3em;
  padding:clamp(8px,1.2vh,16px) clamp(12px,1.4vw,22px);
  border:2px solid rgba(255,255,255,.35);
  background:rgba(20,6,10,.55);
}
.alert-count-label{
  font-family:var(--mono);
  font-size:clamp(9px,1.05vw,14px);
  letter-spacing:.28em;
  text-indent:.28em;
  color:rgba(255,255,255,.75);
  white-space:nowrap;
}
.alert-count-value{
  font-family:var(--mono);
  font-size:clamp(28px,3.9vw,62px);
  font-weight:700;
  line-height:1;
  color:var(--amber);
  font-variant-numeric:tabular-nums;
}
.alert-count.is-urgent .alert-count-value{
  color:var(--red-bright);
  animation:blink 1s steps(1,end) infinite;
}
.warn-triangle{
  width:clamp(56px,8vw,118px);
  flex:0 0 auto;
  color:var(--ink);
  filter:drop-shadow(0 0 14px rgba(0,0,0,.45));
  animation:tri-pulse 1.1s steps(1,end) infinite;
}
@keyframes tri-pulse{0%,60%{opacity:1}61%,100%{opacity:.35}}

.alert-authority{
  display:flex;
  align-items:center;
  gap:clamp(8px,1vw,14px);
  margin-bottom:clamp(6px,1vh,12px);
}
.alert-crest{
  width:clamp(18px,1.9vw,30px);
  height:auto;
  flex:0 0 auto;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.45));
}
.alert-subhead{
  font-family:var(--mono);
  font-size:clamp(10px,1.5vw,17px);
  letter-spacing:.34em;
  font-weight:400;
  margin:0;
  color:rgba(255,255,255,.72);
}
.alert-headline{
  font-family:var(--mono);
  font-size:clamp(24px,4.7vw,68px);
  line-height:1;
  letter-spacing:.06em;
  font-weight:700;
  margin:0;
  text-shadow:2px 0 0 rgba(255,60,60,.45),-2px 0 0 rgba(60,60,255,.3);
}
.alert-severity{
  font-family:var(--mono);
  font-size:clamp(12px,1.9vw,24px);
  letter-spacing:.24em;
  margin:.6em 0 0;
  color:var(--amber);
  font-weight:700;
}

.alert-lines{
  flex:1 1 auto;
  min-height:0;                 /* let overflow:hidden actually clip */
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(8px,1.5vh,20px);
  padding:clamp(8px,2vh,26px) 0;
  overflow:hidden;
}
.alert-line{
  font-size:clamp(16px,2.1vw,33px);
  line-height:1.28;
  font-weight:600;
  opacity:.3;
  transform:translateY(4px);
  transition:opacity .45s ease,transform .45s ease,color .45s ease;
  max-width:min(100%,40ch);
  flex:0 0 auto;
}
.alert-line.is-past{opacity:.3}
.alert-line.is-standby{
  opacity:1;
  font-family:var(--mono);
  font-size:clamp(13px,1.7vw,24px);
  letter-spacing:.24em;
  font-weight:500;
  color:var(--amber);
  animation:blink 1s steps(1,end) infinite;
}
.alert-line.is-live{
  opacity:1;
  transform:none;
  text-shadow:0 2px 22px rgba(0,0,0,.5);
}
.alert-line.is-live::before{
  content:"▍";
  color:var(--amber);
  margin-right:.45em;
  animation:blink .8s steps(1,end) infinite;
}

.alert-foot{
  flex:0 0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:clamp(10px,1.8vh,20px) 0 clamp(14px,2.4vh,26px);
  border-top:1px solid rgba(255,255,255,.22);
  font-family:var(--mono);
  font-size:clamp(10px,1.35vw,16px);
  letter-spacing:.2em;
  color:rgba(255,255,255,.8);
}
.alert-drill{color:var(--amber);font-weight:700;animation:blink 1.6s steps(1,end) infinite}

/* ------------------------------------------------------------- phase 2 --- */
#screen-testcard{background:#000}
#testcard-canvas{display:block;width:100%;height:100%}

/* ------------------------------------------------------------- phase 3 --- */
#screen-impact{background:#000}
#static-canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity 2s ease}
#static-canvas.is-on{opacity:.38}
.impact-flash{
  position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:45;
}
.impact-flash.is-firing{animation:impact-flash 7s cubic-bezier(.1,.7,.2,1) forwards}
@keyframes impact-flash{
  0%{opacity:0}
  0.4%{opacity:1}
  6%{opacity:1}
  22%{opacity:.85}
  100%{opacity:0}
}
.impact-caption{
  position:absolute;inset:0;
  display:grid;place-items:center;
  opacity:0;
  transition:opacity 3s ease 1s;
  z-index:6;
}
.impact-caption span{
  font-family:var(--mono);
  font-size:clamp(12px,1.8vw,20px);
  letter-spacing:.4em;
  text-indent:.4em;
  color:#c9c9c9;
  background:#000;
  border:1px solid #3a3a3a;
  padding:.85em 1.4em;
  box-shadow:0 0 40px rgba(0,0,0,.9);
}
.impact-caption.is-on{opacity:1}

/* ------------------------------------------------------------ overlays --- */
.crt{
  position:fixed;inset:0;pointer-events:none;z-index:40;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,rgba(0,0,0,0) 1px 3px),
    radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%);
  mix-blend-mode:multiply;
}
.crt::after{
  content:"";
  position:absolute;left:0;right:0;top:0;height:26vh;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.035) 50%,rgba(255,255,255,0) 100%);
  /* transform, not top: animating `top` relayouts and repaints the whole
     viewport every frame */
  animation:roll 7.5s linear infinite;
  will-change:transform;
  mix-blend-mode:screen;
}
@keyframes roll{from{transform:translateY(-30vh)}to{transform:translateY(100vh)}}

.sim-badge{
  position:fixed;right:10px;bottom:8px;z-index:50;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.3em;
  color:rgba(255,255,255,.35);
  text-shadow:0 1px 3px rgba(0,0,0,.8);
  pointer-events:none;
}
.hud{
  position:fixed;left:10px;bottom:8px;z-index:50;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:rgba(255,255,255,.28);
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
body.show-cursor .hud{opacity:1}
.hud kbd{
  font:inherit;border:1px solid rgba(255,255,255,.3);
  border-radius:3px;padding:0 4px;margin-right:2px;
}

@media (max-width:640px){
  .alert-drill{display:none}
  .alert-foot{font-size:10px}
  .alert-count{padding:6px 10px;border-width:1px}
  .alert-count-label{font-size:8px;letter-spacing:.2em}
}

@media (prefers-reduced-motion:reduce){
  .crt::after,.warn-triangle,.alert-drill,.unlock-hint,.alert-line.is-live::before{animation:none}
  #screen-alert{animation:none}
}