/* VERVAIN RAT RELAY — vaporwave
   Palette (3 colors + black/white ONLY):
   --pink #ff71ce · --cyan #01cdfe · --violet #b967ff · + #0d0221 black + white */
:root{
  --pink:#ff71ce;
  --cyan:#01cdfe;
  --violet:#b967ff;
  --ink:#0d0221;
  --paper:#fff;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;color:var(--paper);background:var(--ink);
  font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  overflow-x:hidden;
}
/* backdrop */
.sun{
  position:fixed;left:50%;top:96px;translate:-50% 0;width:min(560px,86vw);aspect-ratio:2/1;
  border-radius:999px 999px 0 0;z-index:0;opacity:.9;pointer-events:none;
  background:linear-gradient(var(--pink) 0%,var(--violet) 62%,var(--cyan) 100%);
  -webkit-mask:linear-gradient(#000 62%,transparent 62.5%) top/100% 100% no-repeat,
    repeating-linear-gradient(#000 0 9px,transparent 9px 13px) bottom/100% 42% no-repeat;
  mask:linear-gradient(#000 62%,transparent 62.5%) top/100% 100% no-repeat,
    repeating-linear-gradient(#000 0 9px,transparent 9px 13px) bottom/100% 42% no-repeat;
  filter:saturate(1.2);
}
.gridfloor{
  position:fixed;inset:auto 0 0 0;height:34vh;z-index:0;pointer-events:none;opacity:.55;
  background:
    repeating-linear-gradient(90deg,var(--violet) 0 2px,transparent 2px 64px),
    repeating-linear-gradient(0deg,var(--pink) 0 2px,transparent 2px 26px);
  transform:perspective(320px) rotateX(62deg) scale(1.6);transform-origin:bottom;
  -webkit-mask:linear-gradient(transparent,#000 45%);mask:linear-gradient(transparent,#000 45%);
  animation:gridscroll 6s linear infinite;
}
@keyframes gridscroll{to{background-position:0 0,0 26px}}
.scanlines{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.16;
  background:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 4px);}

#app{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:20px 16px 64px}

/* masthead */
.masthead{text-align:center;margin:6px 0 14px}
.kicker{letter-spacing:.35em;font-size:11px;color:var(--cyan);margin:0 0 6px;text-shadow:0 0 12px var(--cyan)}
.chrome{
  margin:0;font-size:clamp(44px,13vw,84px);line-height:.95;font-weight:900;letter-spacing:.04em;font-style:italic;
  background:linear-gradient(180deg,#fff 8%,var(--cyan) 34%,var(--violet) 52%,var(--pink) 66%,#fff 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,113,206,.55)) drop-shadow(0 3px 0 rgba(1,205,254,.6));
}
.sub{margin:10px auto 0;max-width:44ch;font-size:14px;opacity:.92}
kbd{background:#fff;color:var(--ink);border-radius:4px;padding:0 6px;font:700 12px/1.6 inherit}

/* HUD */
.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 8px}
.hud-card{background:rgba(13,2,33,.72);border:1px solid var(--cyan);border-radius:10px;
  padding:8px 6px;text-align:center;box-shadow:0 0 14px rgba(1,205,254,.35),inset 0 0 18px rgba(1,205,254,.12)}
.hud-card:nth-child(odd){border-color:var(--pink);box-shadow:0 0 14px rgba(255,113,206,.35),inset 0 0 18px rgba(255,113,206,.12)}
.hud-label{display:block;font-size:10px;letter-spacing:.25em;color:var(--cyan)}
.hud-card:nth-child(odd) .hud-label{color:var(--pink)}
.hud-card strong{font-size:clamp(15px,4.4vw,21px);font-variant-numeric:tabular-nums}
.freshbar{height:10px;border:1px solid var(--paper);border-radius:99px;overflow:hidden;background:rgba(0,0,0,.5);margin-bottom:12px}
.freshbar div{height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink));transition:width .2s linear}

/* panels */
.panel{background:rgba(13,2,33,.78);border:1px solid var(--violet);border-radius:16px;
  padding:16px;box-shadow:0 0 24px rgba(185,103,255,.35);backdrop-filter:blur(2px)}
.panel h2{margin:0 0 12px;font-size:13px;letter-spacing:.3em;color:var(--paper)}
.herbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.herb{cursor:pointer;background:transparent;color:var(--paper);border:2px solid var(--violet);
  border-radius:12px;padding:10px 6px;display:flex;flex-direction:column;gap:2px;align-items:center;
  transition:transform .12s,box-shadow .12s,border-color .12s}
.herb:hover{transform:translateY(-2px)}
.herb-glyph{font-size:28px}
.herb-name{font-weight:900;letter-spacing:.08em;font-size:13px}
.herb-stat{font-size:11px;opacity:.75}
.herb.selected{border-color:var(--pink);box-shadow:0 0 16px var(--pink);background:rgba(255,113,206,.12)}
.herb:focus-visible,.btn:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

/* buttons */
.btn{cursor:pointer;font:inherit;font-weight:900;letter-spacing:.12em;color:var(--ink);
  background:linear-gradient(180deg,#fff,var(--cyan));border:0;border-radius:12px;padding:12px 18px;
  box-shadow:0 4px 0 #fff,0 0 22px var(--cyan);transition:transform .08s,box-shadow .08s,filter .15s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #fff,0 0 12px var(--cyan)}
.btn.big{width:100%;font-size:17px}
.btn.pass{width:100%;font-size:clamp(19px,5.6vw,25px);padding:16px;
  background:linear-gradient(180deg,#fff,var(--pink));box-shadow:0 5px 0 #fff,0 0 28px var(--pink);
  animation:passpulse 1.1s ease-in-out infinite}
.btn.pass:active{box-shadow:0 1px 0 #fff,0 0 12px var(--pink)}
@keyframes passpulse{50%{filter:brightness(1.18)}}
.action-row{margin:14px 0 4px;text-align:center}
.hint{font-size:12px;opacity:.8;margin:8px 0 0}

/* tunnel legs */
.track{display:flex;flex-direction:column;gap:10px;margin:6px 0 4px}
.leg{background:rgba(13,2,33,.8);border:1px solid var(--violet);border-radius:14px;padding:10px 12px 12px;
  opacity:.55;transition:opacity .25s,box-shadow .25s,border-color .25s}
.leg.active{opacity:1;border-color:var(--cyan);box-shadow:0 0 20px rgba(1,205,254,.5)}
.leg.done{opacity:.95;border-color:var(--pink)}
.leg-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.leg-name{font-weight:900;letter-spacing:.14em;font-size:13px}
.leg-rat{font-size:12px;opacity:.85}
.tunnel{position:relative;height:44px;border-radius:99px;overflow:hidden;
  border:1px solid var(--paper);background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.18) 22px 24px),#000}
.gate{position:absolute;top:0;bottom:0;right:0;width:22%;
  background:linear-gradient(90deg,transparent,var(--pink));opacity:.55}
.leg.active .gate{opacity:1;animation:gateflash .7s ease-in-out infinite alternate;box-shadow:inset 0 0 24px var(--pink)}
@keyframes gateflash{to{filter:brightness(1.5)}}
.perfect{position:absolute;top:0;bottom:0;right:5%;width:7%;background:var(--cyan);opacity:.9;box-shadow:0 0 14px var(--cyan)}
.runner{position:absolute;top:50%;left:0;translate:0 -50%;font-size:26px;line-height:1;
  filter:drop-shadow(0 0 8px var(--cyan));transition:none}
.leg.active .runner{animation:bob .28s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-5px) rotate(-8deg)}}
.leg.done .runner{filter:none}
.wait{position:absolute;top:2px;right:24%;font-size:10px;font-weight:900;letter-spacing:.15em;
  color:var(--ink);background:var(--cyan);border-radius:99px;padding:2px 8px;animation:gateflash .5s infinite alternate}
.leg.fumble{animation:shake .35s}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.flash-perfect{box-shadow:0 0 26px var(--cyan)!important;border-color:var(--cyan)!important}
.flash-good{box-shadow:0 0 26px var(--pink)!important;border-color:var(--pink)!important}

/* toast + result */
.toast{min-height:30px;text-align:center;font-weight:900;letter-spacing:.2em;font-size:14px;margin:8px 0;
  text-shadow:0 0 12px var(--pink)}
.result{text-align:center;margin-top:14px;border-color:var(--pink)}
.final-score{font-size:56px;font-weight:900;margin:6px 0;font-style:italic;
  background:linear-gradient(180deg,#fff,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,113,206,.6))}
.final-score .pts{font-size:16px;margin-left:6px;letter-spacing:.3em}
.result-line{font-size:14px;opacity:.9;margin:0 0 10px}
.leg-log{text-align:left;margin:0 auto 10px;max-width:38ch;font-size:13px;padding-left:22px}
.leg-log li{margin:3px 0}
.best{letter-spacing:.2em;font-size:13px}
.newbest{color:var(--ink);background:var(--cyan);border-radius:99px;padding:2px 10px;margin-left:6px;animation:gateflash .5s infinite alternate}
.row{display:flex;gap:8px;margin-top:12px}
.hidden{display:none!important}

.foot{text-align:center;margin-top:26px;font-size:12px;letter-spacing:.12em;opacity:.85}
.foot .tiny{opacity:.6;font-size:11px}

@media (max-width:420px){
  .hud{grid-template-columns:repeat(2,1fr)}
  .herbs{grid-template-columns:1fr}
  .herb{flex-direction:row;gap:10px;justify-content:flex-start;padding:10px 12px;text-align:left}
  .herb-stat{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}