/* HASHSPINNERS — whitelist precampaign. Win95 / synthwave skin matched to the
   game theme (Press Start 2P pixel chrome, magenta/cyan/sun palette, beveled
   windows over the neon-arena key-art). Self-contained, no build step. NO green. */

:root{
  --bg:#06040b; --face:#2a1a5e; --light:#7a5cff; --dark:#0c0626; --deep:#160a36;
  --magenta:#ff2d9b; --magenta2:#ff5fc8; --cyan:#3ff0ff; --cyan2:#2b9bff;
  --purple:#9b6bff; --sun:#ffd34e; --red:#ff3b5f; --red2:#ff7a3b;
  --ink:#eee6ff; --dim:#bda9ff; --dimmer:#8a7ad0;
  --pix:'Press Start 2P',monospace; --mono:'Space Mono',ui-monospace,monospace;
  --term:'VT323',monospace; --disp:'Orbitron',sans-serif; --body:'Chakra Petch',sans-serif;
  --title:linear-gradient(90deg,#ff2d9b,#9b6bff);
  /* the canonical Win95 raised-bevel + drop shadow used by every window/button */
  --bevel:inset -2px -2px 0 var(--dark),inset 2px 2px 0 var(--light),inset -3px -3px 0 #000,inset 3px 3px 0 rgba(255,255,255,0.12),0 0 0 1px #000;
  --bevel-in:inset 2px 2px 0 var(--dark),inset -2px -2px 0 var(--light),0 0 0 1px #000;
  --drop:6px 6px 0 rgba(6,2,18,0.55);
}

*{box-sizing:border-box;margin:0;padding:0}
/* no text selection (immersion) — inputs stay editable */
*{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
input{-webkit-user-select:text;user-select:text}
html,body{height:100%}
body{
  min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
  display:flex;flex-direction:column;
}
img{display:block}
a{color:inherit;text-decoration:none}

/* ---------- backdrop ---------- */
.bgimg,.grid-bg,.scan,.vignette,.glow{position:fixed;inset:0;pointer-events:none;z-index:0}
.bgimg{background:url('/home-bg.jpg') center top/cover no-repeat;filter:brightness(0.5) saturate(1.1)}
.glow{background:
  radial-gradient(ellipse 52% 42% at 50% 24%,rgba(255,45,155,0.22),transparent 70%),
  radial-gradient(ellipse 56% 46% at 50% 82%,rgba(63,240,255,0.14),transparent 72%)}
.grid-bg{background-image:
    repeating-linear-gradient(90deg,rgba(63,240,255,0.10) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(0deg,rgba(255,45,155,0.08) 0 1px,transparent 1px 46px);
  mask-image:radial-gradient(ellipse 85% 75% at 50% 45%,#000 30%,transparent 88%);
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 45%,#000 30%,transparent 88%);
  animation:drift 30s linear infinite}
@keyframes drift{to{background-position:46px 0,0 46px}}
.scan{background:repeating-linear-gradient(0deg,rgba(0,0,0,0.18) 0 1px,transparent 2px 3px);mix-blend-mode:multiply;z-index:50}
.vignette{box-shadow:inset 0 0 240px 70px rgba(0,0,0,0.92);z-index:51}

/* ---------- top bar ---------- */
.topbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;gap:12px}
.brand{display:flex;align-items:baseline;gap:9px;font-family:var(--disp);font-weight:900;font-style:italic;
  font-size:20px;letter-spacing:0.5px;line-height:1}
.brand .h{color:#fff;text-shadow:2px 2px 0 var(--magenta),0 0 16px rgba(63,240,255,0.4)}
.brand .s{background:linear-gradient(92deg,var(--cyan),var(--magenta) 70%,var(--sun));
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 12px rgba(255,45,155,0.5))}
.brand .jp{font-family:var(--pix);font-size:9px;color:var(--cyan);letter-spacing:2px;
  -webkit-text-fill-color:var(--cyan);filter:none;margin-left:2px}
.socials{display:flex;gap:8px}
.soc{width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--face);box-shadow:var(--bevel);color:#fff;font-family:var(--pix);font-size:11px;transition:filter .1s}
.soc:hover{color:var(--cyan);filter:brightness(1.2)}
.soc:active{box-shadow:var(--bevel-in);transform:translate(1px,1px)}
.soc svg{width:18px;height:18px;fill:currentColor}

/* ---------- hero ---------- */
.stage{position:relative;z-index:10;flex:1;display:flex;align-items:center;justify-content:center;
  padding:10px 18px 40px;min-height:0}
.win{position:relative;background:var(--face);box-shadow:var(--bevel),var(--drop);padding:3px}
.win__bar{height:22px;background:var(--title);box-shadow:inset 0 1px 0 rgba(255,255,255,0.35);
  display:flex;align-items:center;justify-content:space-between;padding:0 5px 0 8px}
.win__title{display:flex;align-items:center;gap:7px;font-family:var(--pix);font-size:8px;color:#fff;
  letter-spacing:1px;text-shadow:1px 1px 0 rgba(0,0,0,0.6);overflow:hidden;white-space:nowrap}
.win__title .ico{width:11px;height:11px;background:#fff;box-shadow:inset -1px -1px 0 rgba(0,0,0,0.4);flex:none}
.win__btns{display:flex;gap:3px;flex:none}
.win__btns b{width:16px;height:14px;display:flex;align-items:center;justify-content:center;
  font-family:var(--pix);font-size:6px;color:#000;background:#cdbcff;box-shadow:inset -1px -1px 0 #4a3a8a,inset 1px 1px 0 #fff,0 0 0 1px #000}
.win__body{background:linear-gradient(180deg,rgba(43,26,110,0.72),rgba(16,7,42,0.85));
  box-shadow:inset 1px 1px 0 rgba(0,0,0,0.5);padding:26px 26px 22px}

.hero{width:min(680px,94vw);text-align:center}
.hero .kicker{font-family:var(--pix);font-size:8px;letter-spacing:3px;color:var(--cyan);
  text-shadow:0 0 10px rgba(63,240,255,0.6);margin-bottom:18px}
.hero h1{font-family:var(--disp);font-weight:900;font-style:italic;font-size:clamp(30px,7vw,52px);
  line-height:0.95;letter-spacing:0;margin-bottom:6px;color:#fff;
  text-shadow:3px 3px 0 var(--magenta),0 0 24px rgba(63,240,255,0.45)}
.hero h1 .l2{display:block;background:linear-gradient(180deg,#fff,#d8f6ff 30%,#7ad8ff 50%,#ff8fd6 62%,#ff2d9b 86%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-family:var(--body);font-size:clamp(13px,2.6vw,16px);line-height:1.6;color:var(--dim);
  max-width:460px;margin:16px auto 24px}
.btn-apply{font-family:var(--pix);font-size:13px;color:#fff;letter-spacing:1px;cursor:pointer;
  padding:16px 30px;background:linear-gradient(180deg,var(--red2),var(--red));
  box-shadow:inset -2px -2px 0 #7a1228,inset 2px 2px 0 #ffb39b,inset -3px -3px 0 #000,inset 3px 3px 0 rgba(255,255,255,0.3),0 0 0 1px #000,0 0 24px rgba(255,59,95,0.5);
  text-shadow:2px 2px 0 rgba(0,0,0,0.5);transition:filter .1s;animation:applypulse 1.8s steps(2) infinite}
.btn-apply:hover{filter:brightness(1.12)}
.btn-apply:active{box-shadow:var(--bevel-in);transform:translate(1px,1px)}
@keyframes applypulse{0%,100%{box-shadow:inset -2px -2px 0 #7a1228,inset 2px 2px 0 #ffb39b,inset -3px -3px 0 #000,inset 3px 3px 0 rgba(255,255,255,0.3),0 0 0 1px #000,0 0 14px rgba(255,59,95,0.4)}
  50%{box-shadow:inset -2px -2px 0 #7a1228,inset 2px 2px 0 #ffb39b,inset -3px -3px 0 #000,inset 3px 3px 0 rgba(255,255,255,0.3),0 0 0 1px #000,0 0 30px rgba(255,59,95,0.85)}}
.hero .count{font-family:var(--pix);font-size:8px;letter-spacing:1px;color:var(--sun);margin-top:18px;min-height:10px;
  text-shadow:0 0 8px rgba(255,211,78,0.4)}

/* ---------- footer ---------- */
.foot{position:relative;z-index:10;text-align:center;padding:14px;font-family:var(--pix);font-size:7px;
  letter-spacing:1px;color:var(--dimmer)}

/* ---------- cassette widget ---------- */
.cassette{position:fixed;right:18px;bottom:18px;z-index:30;width:150px;cursor:pointer;
  background:var(--face);box-shadow:var(--bevel),4px 4px 0 rgba(6,2,18,0.5);padding:6px;user-select:none}
.cassette .tape{background:#160a36;box-shadow:var(--bevel-in);padding:8px 7px 7px;position:relative}
.cassette .tname{font-family:var(--pix);font-size:6px;color:var(--magenta2);letter-spacing:0.5px;margin-bottom:7px;text-align:center}
.cassette .reels{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:6px}
.cassette .reel{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#3a2a6e 30%,#0c0626 32%);
  box-shadow:inset 0 0 0 2px #7a5cff,0 0 0 1px #000;position:relative}
.cassette .reel::after{content:'';position:absolute;inset:7px;border-radius:50%;border:2px dashed var(--cyan);opacity:0.7}
.cassette.on .reel::after{animation:spin 1.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cassette .snd{font-family:var(--pix);font-size:7px;letter-spacing:1px;text-align:center;color:var(--sun);
  background:var(--face);box-shadow:var(--bevel);padding:5px;margin-top:1px}
.cassette.on .snd{color:var(--cyan)}

/* ---------- apply modal ---------- */
.overlay{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(2,2,10,0.55);backdrop-filter:blur(2px)}
.overlay.open{display:flex;animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.app{width:min(560px,96vw);max-height:92vh;overflow:auto}
.app .win__body{padding:18px}

/* progress */
.prog{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.prog .barwrap{flex:1;height:16px;background:#160a36;box-shadow:var(--bevel-in);padding:2px;overflow:hidden}
.prog .bar{height:100%;width:0;background:repeating-linear-gradient(90deg,#5ff7ff 0 6px,#2b9bff 6px 9px);
  box-shadow:0 0 8px rgba(63,240,255,0.6);transition:width .3s steps(8)}
.prog .pct{font-family:var(--pix);font-size:8px;color:#fff;white-space:nowrap}

/* steps */
.step{margin-bottom:14px}
.step__h{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.step__n{font-family:var(--pix);font-size:8px;color:#fff;background:linear-gradient(180deg,var(--magenta2),var(--magenta));
  box-shadow:inset -1px -1px 0 #8a1259,inset 1px 1px 0 #ffaede,0 0 0 1px #000;padding:4px 5px;flex:none}
.step__n.done{background:linear-gradient(180deg,#5ff7ff,#2b9bff);box-shadow:inset -1px -1px 0 #134a6e,inset 1px 1px 0 #cdf6ff,0 0 0 1px #000;color:#06121a}
.step__t{font-family:var(--pix);font-size:8px;letter-spacing:1px;color:var(--dim)}
.step__row{display:flex;gap:8px}
.step__row.col{flex-direction:column}

.tbtn{font-family:var(--pix);font-size:8px;color:#fff;letter-spacing:0.5px;cursor:pointer;text-align:left;
  padding:11px 12px;background:var(--face);box-shadow:var(--bevel);transition:filter .1s;line-height:1.5;white-space:nowrap}
.tbtn.full{flex:1;text-align:center}
.tbtn:hover{filter:brightness(1.18);color:var(--cyan)}
.tbtn:active{box-shadow:var(--bevel-in);transform:translate(1px,1px)}
.tbtn.is-done{color:#06121a;background:linear-gradient(180deg,#5ff7ff,#2b9bff);box-shadow:var(--bevel)}
.tbtn .chk{color:inherit}

input.fld{flex:1;min-width:0;background:#160a36;box-shadow:var(--bevel-in);color:#fff;border:0;outline:none;
  font-family:var(--body);font-size:14px;padding:11px 12px}
input.fld::placeholder{color:#6a5aa0}
input.fld:focus{box-shadow:var(--bevel-in),0 0 0 1px var(--cyan),0 0 10px rgba(63,240,255,0.4)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* actions */
.app__actions{display:flex;gap:10px;margin-top:18px}
.btn-cancel,.btn-submit{font-family:var(--pix);font-size:9px;letter-spacing:0.5px;cursor:pointer;padding:13px 16px;color:#fff;
  box-shadow:var(--bevel);transition:filter .1s}
.btn-cancel{background:var(--face);color:var(--dim)}
.btn-cancel:hover{filter:brightness(1.2);color:#fff}
.btn-submit{flex:1;background:linear-gradient(180deg,var(--red2),var(--red));
  box-shadow:inset -2px -2px 0 #7a1228,inset 2px 2px 0 #ffb39b,0 0 0 1px #000;text-shadow:1px 1px 0 rgba(0,0,0,0.5)}
.btn-submit:hover{filter:brightness(1.12)}
.btn-cancel:active,.btn-submit:active{box-shadow:var(--bevel-in);transform:translate(1px,1px)}
.btn-submit:disabled{cursor:not-allowed;filter:grayscale(0.7) brightness(0.7);color:#6a5aa0;
  background:var(--face);box-shadow:var(--bevel-in);text-shadow:none}

/* status bar */
.app__status{display:flex;justify-content:space-between;gap:8px;margin-top:14px;padding:6px 8px;
  background:#160a36;box-shadow:var(--bevel-in);font-family:var(--pix);font-size:6px;color:var(--dimmer);letter-spacing:0.5px}
.app__status .ok{color:var(--cyan)}
.msg{min-height:12px;margin-top:10px;font-family:var(--pix);font-size:7px;line-height:1.6;letter-spacing:0.5px}
.msg.err{color:var(--red)}
.msg.info{color:var(--cyan)}

/* done state */
.done{text-align:center;padding:14px 6px 8px}
.done .mark{font-family:var(--pix);font-size:30px;color:var(--cyan);text-shadow:0 0 14px rgba(63,240,255,0.6);margin-bottom:14px}
.done h2{font-family:var(--pix);font-size:13px;color:#fff;letter-spacing:1px;margin-bottom:12px;
  text-shadow:2px 2px 0 var(--magenta),0 0 16px rgba(63,240,255,0.4)}
.done p{font-family:var(--body);font-size:14px;color:var(--dim);margin-bottom:18px;line-height:1.5}
.done .follow{display:inline-block;font-family:var(--pix);font-size:9px;color:#fff;cursor:pointer;padding:12px 18px;
  background:linear-gradient(180deg,var(--magenta2),var(--magenta));box-shadow:var(--bevel)}
.done .follow:hover{filter:brightness(1.12)}

@media (max-width:480px){
  .win__body{padding:16px}
  .cassette{width:124px}
  .step__row{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .grid-bg,.cassette .reel::after,.btn-apply{animation:none !important}
}