:root{
  --tape:#000000;
  --phosphor:#ecebe4;
  --dim:#9a988f;
  --eas-red:#d42020;
  --eas-blue:#1b2fd6;
  --warn:#f2d300;
  --lilac:#d9c6ec;
  --ink:#1c1024;
  --osd:'VT323', 'Courier New', monospace;
  --shout:'Anton', 'Impact', 'Arial Narrow', sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --tape:#000000; --phosphor:#ecebe4; --dim:#9a988f; --lilac:#d9c6ec; --ink:#1c1024;
  }
}
:root[data-theme="dark"]{ --tape:#000000; --phosphor:#ecebe4; --dim:#9a988f; }

:root{ box-sizing:border-box; }
*,*::before,*::after{ box-sizing:inherit; }
html, body{
  margin:0;
   padding:0;
  width:100%;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  background:var(--tape);
  color:var(--phosphor);
  font-family:var(--osd);
  font-size:clamp(18px, 2.4dvh, 22px);
  line-height:1.2;
  -webkit-font-smoothing:none;
}
button{ font:inherit; color:inherit; cursor:pointer; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--warn); outline-offset:3px; }

/* ---------- camadas de fita ---------- */
#noise{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:50;
  opacity:.13; image-rendering:pixelated; mix-blend-mode:screen; }
.scanlines{ position:fixed; inset:0; pointer-events:none; z-index:51;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 2px 3px); }
.vignette{ position:fixed; inset:0; pointer-events:none; z-index:52;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.75) 100%); }
#tracking{ position:fixed; left:0; right:0; height:9vh; top:-20vh; pointer-events:none; z-index:53;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,.18) 30%, rgba(255,255,255,.05) 50%, rgba(255,255,255,.22) 70%, transparent);
  mix-blend-mode:screen; filter:blur(1px); }
body.glitching main{ animation:jolt .45s steps(6) both; }
body.glitching #noise{ opacity:.6; }
@keyframes jolt{
  0%{ transform:translate(0,0) skewX(0); filter:none; }
  20%{ transform:translate(-14px,6px) skewX(8deg); filter:url(#rgb) contrast(2); }
  40%{ transform:translate(10px,-4px) skewX(-6deg); filter:invert(1); }
  60%{ transform:translate(-6px,2px) skewX(3deg); filter:url(#rgb) brightness(1.6); }
  80%{ transform:translate(4px,0) skewX(-2deg); }
  100%{ transform:none; filter:none; }
}

.ab{ text-shadow:-2px 0 rgba(255,30,60,.75), 2px 0 rgba(30,220,255,.7); }

/* OSD do videocassete */
.osd{ position:absolute; font-family:var(--osd); font-size:clamp(19px, 2.8dvh, 26px); letter-spacing:1px;
  color:var(--phosphor); text-shadow:-2px 0 rgba(255,30,60,.6), 2px 0 rgba(30,220,255,.6), 0 0 6px rgba(255,255,255,.4); z-index:5; }
.osd.tl{ top:calc(10px + env(safe-area-inset-top,0px)); left:16px; }
.osd.tr{ top:calc(10px + env(safe-area-inset-top,0px)); right:16px; }
.osd.bl{ bottom:calc(10px + env(safe-area-inset-bottom,0px)); left:16px; }
.osd.br{ bottom:calc(10px + env(safe-area-inset-bottom,0px)); right:16px; }
.osd, .clock{ white-space:nowrap; }
@media (max-width:480px){ .osd.br{ right:auto; left:16px; } }
.rec::before{ content:"●"; color:var(--eas-red); margin-right:6px; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

main{ position:relative; width:100%; height:100vh; height:100dvh; overflow:hidden; }
.screen{
  display:none;
  position:relative;
  width:100%;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  padding:calc(36px + env(safe-area-inset-top,0px)) 16px calc(38px + env(safe-area-inset-bottom,0px));
}
.screen.active{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.wrap{
  width:100%;
  max-width:540px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-height:100%;
}

/* ---------- boot ---------- */
#boot.active{ text-align:center; }
#boot .blinky{ font-size:clamp(26px, 4dvh, 32px); animation:blink 1.1s steps(1) infinite; margin:0 0 clamp(16px, 3dvh, 28px); }
#start{ background:transparent; border:2px solid var(--phosphor); padding:clamp(10px, 1.8dvh, 14px) 26px; font-size:clamp(24px, 3.8dvh, 30px); }
#start:hover{ background:var(--phosphor); color:var(--tape); text-shadow:none; }
#boot .hint{ color:var(--dim); margin-top:clamp(12px, 2dvh, 18px); font-size:clamp(18px, 2.5dvh, 20px); }

/* ---------- barras ---------- */
#bars.active{ align-items:stretch; justify-content:stretch; padding:0; }
.bars-top{ flex:1; display:flex; }
.bars-top span{ flex:1; }
.bars-mid{ height:9%; display:flex; }
.bars-mid span{ flex:1; }
.bars-low{ height:18%; display:flex; }
.bars-low span{ flex:1; }
.bars-label{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:var(--tape); padding:8px 18px; font-size:clamp(22px, 3.8dvh, 30px); white-space:nowrap; }

/* ---------- convite ---------- */
#invite{ background:
  radial-gradient(ellipse at 50% 30%, #3a2350 0%, #160a20 60%, #000 100%); }
.stage{
  position:relative;
  margin:0 auto clamp(6px, 1.4dvh, 14px);
  width:min(250px, 52vw, 22dvh);
  aspect-ratio:1;
  flex-shrink:1;
  background:var(--lilac);
  border:clamp(4px, 0.7dvh, 6px) solid #f4ecdc;
  border-radius:24px 24px 30px 30px / 30px 30px 24px 24px;
  box-shadow:0 0 0 3px #000, 0 0 32px rgba(217,198,236,.35);
  overflow:hidden;
}
.stage img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply;
  animation:bob 3.2s ease-in-out infinite; filter:url(#rgb) saturate(1.15); }
.stage.neg img{ filter:invert(1) hue-rotate(180deg) contrast(1.6); mix-blend-mode:normal; }
@keyframes bob{ 50%{ transform:translateY(-6px) rotate(-2deg); } }
.stage::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.18), transparent 35%); }

.kids-title{
  font-family:var(--osd);
  font-size:clamp(34px, min(10vw, 6.2dvh), 62px);
  line-height:.95;
  text-align:center;
  color:var(--warn);
  margin:0 0 clamp(6px, 1.2dvh, 12px);
  letter-spacing:1px;
  text-shadow:4px 4px 0 #b43b9a, -2px 0 rgba(30,220,255,.7);
  transform:rotate(-2deg);
}
.lead{
  text-align:center;
  margin:0 auto clamp(6px, 1.4dvh, 14px);
  max-width:32ch;
  font-size:clamp(18px, 2.5dvh, 23px);
}
.info{
  border-top:2px dashed rgba(236,235,228,.35);
  border-bottom:2px dashed rgba(236,235,228,.35);
  padding:clamp(6px, 1.1dvh, 11px) 4px;
  margin:0 0 clamp(8px, 1.5dvh, 16px);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2px 14px;
  font-size:clamp(18px, 2.5dvh, 23px);
}
.info dt{ color:var(--dim); } .info dd{ margin:0; }
.ask{ text-align:center; font-size:clamp(20px, 2.8dvh, 26px); margin:0 0 clamp(6px, 1.1dvh, 12px); }
.name-field{ width:100%; margin:0 auto clamp(4px, 0.8dvh, 10px); max-width:340px; }
.name-field label{ display:block; color:var(--dim); font-size:clamp(17px, 2.2dvh, 21px); margin-bottom:2px; }
.name-field input{
  width:100%;
  font:inherit;
  font-size:clamp(20px, 2.8dvh, 26px);
  color:var(--phosphor);
  background:rgba(0,0,0,.45);
  border:2px solid var(--phosphor);
  padding:clamp(4px, 0.8dvh, 8px) 12px;
  border-radius:0;
}
.name-field input::placeholder{ color:#6f6d66; }
.name-field.err input{ border-color:var(--eas-red); animation:shake .3s steps(4); }
.name-msg{ min-height:1.1em; color:var(--eas-red); font-size:clamp(16px, 2dvh, 19px); margin:2px 0 0; }
@keyframes shake{ 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.choices{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn{
  border:3px solid var(--phosphor);
  background:transparent;
  padding:clamp(6px, 1.1dvh, 10px) 20px;
  font-size:clamp(20px, 2.8dvh, 26px);
  min-width:140px;
}
.btn.yes{ background:var(--warn); color:var(--ink); border-color:var(--warn); box-shadow:4px 4px 0 #b43b9a; }
.btn.yes:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 #b43b9a; }
.btn.no:hover{ background:rgba(236,235,228,.12); }
.fine{ margin:clamp(8px, 1.6dvh, 18px) 0 0; text-align:center; color:var(--dim); font-size:clamp(15px, 2dvh, 18px); min-height:1.2em; }
.fine.wrong{ color:var(--eas-red); }

#subliminal{ position:fixed; inset:0; z-index:40; display:none; align-items:center; justify-content:center;
  background:#000; color:#fff; font-family:var(--shout); font-size:clamp(34px, 10vw, 72px); text-align:center; padding:20px; }
#subliminal.on{ display:flex; }

/* ---------- sim ---------- */
#yes{ background:#000; }
.monitor{
  position:relative;
  width:min(300px, 68vw, 27dvh);
  aspect-ratio:1;
  margin:0 auto clamp(8px, 1.4dvh, 16px);
  background:#000;
  border:3px solid #2a2a2a;
  overflow:hidden;
  flex-shrink:1;
}
.monitor img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.monitor img.on{ opacity:1; filter:url(#rgb) contrast(1.25) saturate(1.2); }
.monitor img.zoom{ transform:scale(1.35); }
.monitor .tag{ position:absolute; left:8px; bottom:8px; font-size:clamp(15px, 2dvh, 19px); z-index:2; background:rgba(0,0,0,.75); padding:1px 6px; }
.big-msg{ font-family:var(--osd); font-size:clamp(28px, min(8vw, 4.8dvh), 48px); text-align:center; line-height:1; margin:0 0 clamp(4px, 0.8dvh, 8px); }
.sub-msg{ text-align:center; color:var(--dim); margin:0 auto clamp(8px, 1.6dvh, 18px); max-width:34ch; font-size:clamp(17px, 2.3dvh, 21px); }
.place{ border:2px solid var(--phosphor); padding:clamp(10px, 1.6dvh, 16px); margin-bottom:clamp(8px, 1.4dvh, 14px); }
.place h2{ font-family:var(--shout); font-weight:400; font-size:clamp(24px, 3.6dvh, 32px); letter-spacing:.5px; margin:0 0 2px; }
.place p{ margin:0 0 2px; font-size:clamp(17px, 2.3dvh, 21px); }
.place .when{ color:var(--warn); margin-top:clamp(4px, 0.8dvh, 8px); }
.routes{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:clamp(8px, 1.4dvh, 14px); }
.route{ display:block; text-align:center; text-decoration:none; border:2px solid var(--phosphor); padding:clamp(6px, 1dvh, 10px) 6px; font-size:clamp(18px, 2.5dvh, 24px); white-space:nowrap; }
.route.uber{ background:var(--phosphor); color:#000; }
.route:hover{ background:var(--warn); color:var(--ink); border-color:var(--warn); }
@media (max-width:440px){
  .routes{ grid-template-columns:1fr 1fr; }
  .route.uber{ grid-column:1 / -1; }
}
.closing{ text-align:center; color:var(--dim); font-size:clamp(16px, 2.1dvh, 20px); margin:0; }

/* ---------- não (EAS) ---------- */
#no{ background:#020208; padding:0; }
#no.active{ justify-content:flex-start; align-items:stretch; }
.eas-bar{
  background:var(--eas-red);
  color:#fff;
  font-family:var(--shout);
  font-size:clamp(24px, min(8vw, 4.4dvh), 46px);
  text-align:center;
  padding:calc(clamp(8px, 1.8dvh, 20px) + env(safe-area-inset-top,0px)) 12px clamp(4px, 0.8dvh, 8px);
  letter-spacing:1px;
  animation:pulse 1s steps(1) infinite;
  flex-shrink:0;
}
@keyframes pulse{ 50%{ background:#7a0d0d; } }
.eas-sub{ background:var(--eas-blue); color:#fff; text-align:center; padding:clamp(3px, 0.7dvh, 6px) 10px; font-size:clamp(16px, 2.2dvh, 21px); flex-shrink:0; }
.crawl{ overflow:hidden; white-space:nowrap; background:#000; border-top:2px solid #fff; border-bottom:2px solid #fff; padding:clamp(3px, 0.7dvh, 6px) 0; font-size:clamp(17px, 2.3dvh, 22px); flex-shrink:0; }
.crawl span{ display:inline-block; padding-left:100%; animation:crawl 38s linear infinite; }
@keyframes crawl{ to{ transform:translateX(-100%); } }
.eas-body{
  flex:1;
  min-height:0;
  padding:clamp(8px, 1.5dvh, 16px) 16px calc(clamp(32px, 4.5dvh, 44px) + env(safe-area-inset-bottom,0px));
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.figure{
  position:relative;
  height:min(260px, 29dvh);
  width:auto;
  aspect-ratio:3/4;
  margin:0 auto clamp(8px, 1.4dvh, 14px);
  background:#000;
  overflow:hidden;
  border:2px solid #333;
  flex-shrink:1;
}
.figure img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  filter:grayscale(1) contrast(1.6) brightness(.85); }
.figure img.on{ opacity:1; }
.figure img.flick{ filter:grayscale(1) contrast(2.4) brightness(1.3) url(#rgb); transform:scale(1.08) translateX(-3%); }
.figure .tc{ position:absolute; right:8px; top:6px; font-size:clamp(15px, 2dvh, 20px); z-index:2; color:#fff; }
.eas-msg{ font-family:var(--shout); font-weight:400; font-size:clamp(20px, min(6.5vw, 3.6dvh), 34px); text-align:center; margin:0 0 clamp(6px, 1.2dvh, 12px); line-height:1.1; }
ol.orders{ margin:0 auto clamp(8px, 1.6dvh, 18px); padding-left:1.3em; max-width:30ch; font-size:clamp(17px, 2.3dvh, 22px); }
ol.orders li{ margin-bottom:clamp(2px, 0.5dvh, 5px); }
ol.orders li:last-child{ color:var(--warn); }
.reconsider{ display:block; margin:0 auto; background:var(--warn); color:var(--ink); border:0; padding:clamp(8px, 1.2dvh, 12px) 22px; font-size:clamp(20px, 2.8dvh, 26px); }
#flashfig{ position:fixed; inset:0; z-index:45; background:#000 center/cover no-repeat; display:none;
  filter:grayscale(1) contrast(2) brightness(.9); }
#flashfig.on{ display:block; }

/* som */
#mute{ opacity:.75; position:fixed; right:12px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); z-index:60;
  background:rgba(0,0,0,.6); border:2px solid var(--phosphor); padding:3px 10px; font-size:clamp(16px, 2.2dvh, 20px); display:none; }
body.started #mute{ display:block; }

@media (prefers-reduced-motion: reduce){
  .stage img, .crawl span, .eas-bar, .rec::before, #boot .blinky{ animation:none !important; }
  body.glitching main{ animation:none; }
  .crawl span{ padding-left:0; white-space:normal; }
}