:root{
  --bg:#07080b;
  --panel:#0d0f14;
  --panel2:#0a0c10;
  --text:#e7e9ee;
  --muted:#a7adbb;
  --line:rgba(255,255,255,.08);

  --red:#ff3b3b;
  --yellow:#f7d154;
  --blue:#4ea2ff;
  --green:#2dff8e;

  --shadow: 0 24px 80px rgba(0,0,0,.55);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(1200px 800px at 50% 20%, rgba(78,162,255,.10), transparent 55%),
              radial-gradient(900px 650px at 80% 70%, rgba(45,255,142,.08), transparent 55%),
              var(--bg);
  color:var(--text);
  overflow:hidden;
}

.app{
  height:100%;
  display:grid;
  place-items:center;
  padding:24px;
}

.screen{
  width:min(720px, 92vw);
  opacity:0;
  transform: translateY(16px) scale(.98);
  pointer-events:none;
  transition: opacity .35s ease, transform .35s ease;
  position:absolute;
}
.screen.active{
  opacity:1;
  transform: translateY(0) scale(1);
  pointer-events:auto;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  position:relative;
  overflow:hidden;
}

.kicker{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}
.kicker.danger{ color: rgba(255,59,59,.9); }

.title{
  margin:0 0 8px 0;
  font-weight:800;
  letter-spacing:.01em;
}
.subtitle{
  margin:0 0 18px 0;
  color:rgba(231,233,238,.78);
  line-height:1.35;
}
.subtitle.subtle{ color:rgba(231,233,238,.62); }
.micro{
  margin:14px 0 18px 0;
  color:rgba(231,233,238,.60);
  font-size:13px;
}

.imageWrap{
  margin:16px 0 6px;
  display:flex;
  justify-content:center;
}
.heroImg{
  width:min(360px, 78%);
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 80px rgba(0,0,0,.55);
}
.imgFallback{
  width:min(360px, 78%);
  height:200px;
  display:grid;
  place-items:center;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,.18);
  color:rgba(231,233,238,.7);
  background: rgba(0,0,0,.25);
}

.fieldRow{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:8px;
}
.input{
  flex:1;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 14px 14px;
  color:var(--text);
  outline:none;
}
.input:focus{
  border-color: rgba(78,162,255,.55);
  box-shadow: 0 0 0 4px rgba(78,162,255,.15);
}
.hint{ margin-top:10px; color:rgba(231,233,238,.55); font-size:13px; }
.muted{ color:rgba(231,233,238,.72); }

.choiceRow{
  display:flex;
  gap:12px;
  margin-top:14px;
}

.btn{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color:var(--text);
  padding: 12px 14px;
  border-radius: 14px;
  cursor:pointer;
  font-weight:700;
  letter-spacing:.02em;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, filter .12s ease;
  user-select:none;
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); }
.btn:active{ transform: translateY(0px) scale(.99); }

.btn.primary{
  background: linear-gradient(180deg, rgba(78,162,255,.22), rgba(78,162,255,.10));
  border-color: rgba(78,162,255,.40);
}
.btn.primary:hover{ filter: brightness(1.05); }
.btn.ghost{
  background: rgba(0,0,0,.20);
}

.arrow{ opacity:.85; margin-left:6px; }

.status{
  margin-top:12px;
  min-height:20px;
  font-size:13px;
  color:rgba(231,233,238,.70);
}

.meterWrap{ margin-top:10px; }
.meterBar{
  position:relative;
  height:16px;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      rgba(255,59,59,.35) 0%,
      rgba(255,59,59,.35) 40%,
      rgba(247,209,84,.35) 40%,
      rgba(247,209,84,.35) 70%,
      rgba(78,162,255,.35) 70%,
      rgba(78,162,255,.35) 90%,
      rgba(45,255,142,.35) 90%,
      rgba(45,255,142,.35) 100%);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.meterFill{
  height:100%;
  width:50%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.22));
  border-right:1px solid rgba(255,255,255,.16);
}
.meterGlow{
  position:absolute;
  inset:-18px;
  opacity:.0;
  pointer-events:none;
  background: radial-gradient(closest-side, rgba(45,255,142,.24), transparent 60%);
  filter: blur(10px);
}
.meterMeta{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.meterValue{
  font-size:18px;
  font-weight:800;
}
.zoneLabel{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(231,233,238,.62);
}
#meter{
  width:100%;
  margin-top:10px;
}
.liveText{
  margin-top:10px;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color:rgba(231,233,238,.78);
  min-height:44px;
  display:flex;
  align-items:center;
}

#to5{ margin-top:14px; width:100%; }

.finalReveal{
  display:none;
  margin-top:16px;
  padding:18px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}
.revealText{
  font-size:18px;
  font-weight:800;
  line-height:1.25;
  text-align:center;
}

/* Modal */
.modal{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  background: rgba(0,0,0,.55);
  z-index:50;
}
.modalCard{
  width:min(520px, 92vw);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 20px;
}
.modalTitle{
  font-weight:900;
  letter-spacing:.06em;
  color: rgba(255,255,255,.92);
  margin-bottom:8px;
}
.modalBody{
  color: rgba(231,233,238,.75);
  margin-bottom:14px;
}

/* Glitch */
.glitch{
  animation: glitch .38s linear 1;
}
@keyframes glitch{
  0%{ filter:none; transform:none; }
  20%{ filter: contrast(1.2) saturate(1.2); transform: translateX(2px); }
  40%{ filter: hue-rotate(12deg); transform: translateX(-2px); }
  60%{ filter: contrast(1.15); transform: translateY(1px); }
  80%{ filter: hue-rotate(-10deg); transform: translateY(-1px); }
  100%{ filter:none; transform:none; }
}

/* Pulse at 100% */
.pulse{
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow: 0 0 0 rgba(45,255,142,0); }
  50%{ box-shadow: 0 0 22px rgba(45,255,142,.30); }
}

/* Scanlines + vignette */
#scanlines{
  position:fixed; inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.03),
    rgba(255,255,255,.03) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity:.12;
  pointer-events:none;
  z-index:1;
}
#vignette{
  position:fixed; inset:0;
  background: radial-gradient(closest-side, transparent 55%, rgba(0,0,0,.65) 100%);
  opacity:.7;
  pointer-events:none;
  z-index:2;
}

/* Canvas on top, but only visible when firing */
#fxCanvas{
  position:fixed;
  inset:0;
  z-index: 40;
  pointer-events:none;
  display:none;
}