:root{
  --ink:#000000;
  --green:#00ff41;
  --green-dim:#0b7a29;
  --bone:#e8ece6;
  --blood:#c8102e;
  --mono:"Share Tech Mono", ui-monospace, monospace;
  --display:"Archivo Black", Impact, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--mono);
  min-height:100vh;
  overflow-x:hidden;
  cursor:crosshair;
}
a{color:var(--green);text-decoration:none;border-bottom:1px solid rgba(0,255,65,.35)}
a:hover{color:var(--bone);border-bottom-color:var(--bone)}
img{display:block;max-width:100%}

/* ---------- fundo ---------- */
#rain{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.5}
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle at 50% 42%, rgba(0,255,65,.07), transparent 46%),
    radial-gradient(circle at 50% 50%, transparent 38%, rgba(0,0,0,.86) 88%);
}
.scanlines{
  position:fixed;inset:0;z-index:2;pointer-events:none;mix-blend-mode:overlay;opacity:.35;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.10) 0 1px, transparent 1px 3px);
  animation:drift 9s linear infinite;
}
@keyframes drift{to{transform:translateY(3px)}}

/* ---------- cano do revólver ---------- */
#barrel{
  position:fixed;inset:0;z-index:60;background:#000;
  display:grid;place-items:center;overflow:hidden;
}
#barrel.gone{animation:barrelOut .9s ease forwards}
@keyframes barrelOut{to{opacity:0;visibility:hidden;transform:scale(1.15)}}
.barrel-iris{
  width:38vmin;height:38vmin;border-radius:50%;
  border:2px solid var(--bone);
  box-shadow:0 0 0 100vmax #000, inset 0 0 60px rgba(255,255,255,.12);
  animation:iris 2.4s cubic-bezier(.6,0,.3,1) forwards;
}
@keyframes iris{
  0%{transform:scale(.05);opacity:0}
  25%{opacity:1}
  60%{transform:scale(1)}
  100%{transform:scale(.62)}
}
.barrel-rings{position:absolute;inset:0;display:grid;place-items:center}
.barrel-rings span{
  position:absolute;border:1px solid rgba(232,236,230,.35);border-radius:50%;
  width:38vmin;height:38vmin;
  animation:ringPulse 2.6s ease-out infinite;
}
.barrel-rings span:nth-child(2){animation-delay:.35s}
.barrel-rings span:nth-child(3){animation-delay:.7s}
.barrel-rings span:nth-child(4){animation-delay:1.05s}
@keyframes ringPulse{
  0%{transform:scale(.5);opacity:.9}
  100%{transform:scale(2.6);opacity:0}
}
.barrel-blood{
  position:absolute;top:0;left:50%;width:6vmin;height:0;margin-left:-3vmin;
  background:linear-gradient(var(--blood), rgba(200,16,46,0));
  filter:blur(2px);
  animation:blood 1.6s .9s ease-in forwards;
}
@keyframes blood{to{height:70vh}}
.barrel-tag{
  position:absolute;bottom:8vh;left:0;right:0;text-align:center;
  font-size:.72rem;letter-spacing:.5em;color:var(--green);
  opacity:0;animation:fadeUp .8s 1.7s ease forwards;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:.9;transform:none}}

/* ---------- palco ---------- */
#stage{
  position:relative;z-index:3;
  max-width:1080px;margin:0 auto;
  padding:clamp(48px,9vh,120px) clamp(20px,5vw,56px) 96px;
  display:flex;flex-direction:column;align-items:center;gap:clamp(40px,7vh,88px);
  opacity:0;
}
#stage.live{animation:stageIn 1.2s ease forwards}
@keyframes stageIn{to{opacity:1}}

.head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.eyebrow{
  margin:0;font-size:clamp(.6rem,1.5vw,.78rem);letter-spacing:.55em;
  color:var(--green);text-transform:uppercase;
}
.title{
  margin:0;font-family:var(--display);
  font-size:clamp(3rem,13vw,8.5rem);line-height:.86;letter-spacing:-.02em;
  color:var(--bone);
  text-shadow:0 0 42px rgba(0,255,65,.22);
}
.title.glitch{animation:glitch .32s steps(2,end) 2}
@keyframes glitch{
  0%{transform:none;text-shadow:0 0 42px rgba(0,255,65,.22)}
  30%{transform:translate(-3px,1px) skewX(-3deg);text-shadow:3px 0 var(--blood),-3px 0 var(--green)}
  60%{transform:translate(3px,-1px);text-shadow:-2px 0 var(--green),2px 0 var(--blood)}
  100%{transform:none}
}
.sub{margin:0;font-size:clamp(.85rem,2.2vw,1.05rem);letter-spacing:.22em;color:rgba(232,236,230,.66)}

/* ---------- sigilo ---------- */
.sigil{position:relative;display:grid;place-items:center;width:min(74vw,360px);aspect-ratio:1}
.sigil-ring{position:absolute;border-radius:50%;inset:0}
.r1{border:1px solid rgba(0,255,65,.5);border-style:dashed;animation:spin 34s linear infinite}
.r2{inset:9%;border:1px solid rgba(232,236,230,.22);animation:spin 22s linear infinite reverse}
.r3{inset:-9%;border:1px dotted rgba(200,16,46,.45);animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sigil-core{
  position:relative;width:66%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:#000;
  border:1px solid rgba(0,255,65,.35);
  box-shadow:0 0 70px rgba(0,255,65,.2), inset 0 0 40px #000;
  animation:breathe 6s ease-in-out infinite;
}
@keyframes breathe{50%{box-shadow:0 0 110px rgba(0,255,65,.32), inset 0 0 40px #000}}
.sigil-core img{width:100%;height:100%;object-fit:cover;filter:contrast(1.15) saturate(.7)}
.sigil-scan{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom, transparent 45%, rgba(0,255,65,.35) 50%, transparent 55%);
  animation:scan 3.4s linear infinite;
}
@keyframes scan{from{transform:translateY(-100%)}to{transform:translateY(100%)}}
.sigil-cap{
  position:absolute;bottom:-34px;margin:0;text-align:center;width:120%;
  font-size:.62rem;letter-spacing:.34em;color:rgba(0,255,65,.6);
}

/* ---------- regras ---------- */
.rules{width:100%;display:flex;flex-direction:column;gap:0;border-top:1px solid rgba(232,236,230,.14)}
.rule{
  position:relative;padding:clamp(20px,3.4vh,34px) 0 clamp(20px,3.4vh,34px) clamp(64px,12vw,120px);
  border-bottom:1px solid rgba(232,236,230,.14);
  opacity:0;transform:translateY(14px);
}
.rule.in{animation:ruleIn .7s ease forwards}
@keyframes ruleIn{to{opacity:1;transform:none}}
.rule::before{
  content:"REGRA " attr(data-n);
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  font-size:.64rem;letter-spacing:.3em;color:var(--green);
  writing-mode:horizontal-tb;
}
.rule h2{
  margin:0;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.1rem,4.2vw,2.15rem);line-height:1.08;letter-spacing:-.01em;
  color:var(--bone);text-wrap:balance;
}
.rule:hover{background:rgba(0,255,65,.04)}
.rule:hover h2{color:var(--green);text-shadow:0 0 24px rgba(0,255,65,.4)}

/* ---------- rodapé ---------- */
.foot{
  display:flex;align-items:center;gap:12px;
  font-size:.66rem;letter-spacing:.36em;color:rgba(232,236,230,.5);
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--blood);animation:blink 1.6s steps(1,end) infinite}
@keyframes blink{50%{opacity:.15}}

@media (max-width:520px){
  .sigil-cap{font-size:.54rem;letter-spacing:.2em}
  .rule{padding-left:0;padding-top:44px}
  .rule::before{top:16px;transform:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;animation-iteration-count:1 !important}
}