/* PLAYER SELECT v1 — light pink princess / glam Genesis CRT pass */
:root{
  --bg:#0b0a18; --crt:#111026; --neon:#61ff9a; --pink:#ff2bd6;
  --cyan:#43eaff; --yellow:#ffe866; --purple:#7656d9; --chrome:#dbe5ff;
  --ink:#f3f2ff; --dim:#a8a7c8; --panel:#15142f; --edge:#36346b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:"Press Start 2P","Courier New",monospace;}
body{min-height:100vh;background:
  radial-gradient(ellipse at 50% -10%,rgba(77,48,142,.62) 0%,transparent 58%),
  radial-gradient(ellipse at 50% 110%,rgba(255,43,214,.13) 0%,transparent 48%),
  var(--bg);}
body::after{ /* pink-tinted CRT scanlines */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg,rgba(255,43,214,.045) 0 1px,rgba(0,0,0,.24) 1px 3px,transparent 3px 5px);
  mix-blend-mode:screen;opacity:.72;}
.crt{max-width:1024px;margin:0 auto;padding:24px 16px 64px;position:relative}
.crt::before{content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,10,.62) 100%);}
h1,h2,h3{letter-spacing:1px}
a{color:var(--cyan)}
.topbar{display:flex;justify-content:space-between;align-items:center;
  border:3px solid var(--edge);background:linear-gradient(110deg,rgba(24,19,52,.96),rgba(14,15,38,.96));padding:10px 14px;
  box-shadow:0 0 18px rgba(255,43,214,.16),0 0 28px rgba(67,234,255,.12),inset 0 0 24px rgba(0,0,0,.64);}
.logo{font-size:15px;color:var(--yellow);text-shadow:2px 2px 0 #7b145f,0 0 8px var(--pink),0 0 18px rgba(255,43,214,.68)}
.logo small{display:block;font-size:9px;color:var(--cyan);text-shadow:0 0 8px rgba(67,234,255,.45);margin-top:6px}
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav button{font-family:inherit;font-size:9px;background:#0c0c22;color:var(--ink);
  border:2px solid var(--purple);padding:8px 10px;cursor:pointer;transition:background .12s,box-shadow .12s,border-color .12s}
.nav button.active,.nav button:hover{background:var(--pink);border-color:#ff8be8;color:#19051a;
  box-shadow:0 0 8px var(--pink),inset 0 0 8px rgba(255,255,255,.2)}
.panel{border:3px solid var(--edge);background:linear-gradient(135deg,rgba(20,19,48,.95),rgba(13,14,35,.95));
  margin-top:16px;padding:20px;box-shadow:0 0 22px rgba(118,86,217,.18),0 0 12px rgba(255,43,214,.07),inset 0 0 30px rgba(0,0,0,.54);}
.panel h2{color:var(--neon);text-shadow:0 0 10px rgba(97,255,154,.58);font-size:14px;margin:0 0 14px}
.panel h2 .tag{color:var(--pink);text-shadow:0 0 8px rgba(255,43,214,.48)}
p,li{font-size:11px;line-height:1.9}
.dim{color:var(--dim)}
.blink{animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.btn{font-family:inherit;font-size:11px;background:var(--pink);color:#21051b;
  border:2px solid #ff9be9;padding:12px 18px;cursor:pointer;
  box-shadow:4px 4px 0 #78105f,0 0 14px rgba(255,43,214,.42);text-shadow:0 1px 0 rgba(255,255,255,.25)}
.btn:hover{filter:brightness(1.14);box-shadow:4px 4px 0 #78105f,0 0 20px rgba(255,43,214,.7)}
.btn.pink{background:var(--pink);color:#1c0416;box-shadow:4px 4px 0 #6e0a55,0 0 14px rgba(255,43,214,.4)}
.btn.ghost{background:transparent;color:var(--cyan);border:2px solid var(--cyan);box-shadow:none}
input[type=password],input[type=text]{font-family:inherit;font-size:12px;background:#0c0c22;
  color:var(--yellow);border:2px solid var(--cyan);padding:12px;width:100%;max-width:340px;
  box-shadow:0 0 10px rgba(67,234,255,.14),inset 0 0 10px rgba(0,0,0,.5)}
input[type=password]:focus,input[type=text]:focus{outline:2px solid var(--pink);border-color:#ff9be9;box-shadow:0 0 14px rgba(255,43,214,.38)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:12px}
.stat{border:2px solid var(--cyan);background:linear-gradient(135deg,#0e0e2c,#0b0b22);padding:14px;
  box-shadow:inset 3px 0 0 rgba(255,43,214,.15)}
.stat .k{font-size:9px;color:var(--cyan)}
.stat .v{font-size:16px;color:var(--yellow);margin-top:8px;text-shadow:2px 2px 0 #7a2b00,0 0 8px rgba(255,232,102,.25)}
.stat .s{font-size:9px;color:var(--dim);margin-top:8px;line-height:1.7}
.quest{border:2px solid var(--edge);padding:12px;margin:10px 0;background:#0d0d28;box-shadow:inset 3px 0 0 rgba(255,43,214,.08)}
.quest.high{border-color:var(--pink);box-shadow:0 0 10px rgba(255,43,214,.18),inset 4px 0 0 var(--pink)}
.quest .t{font-size:11px;color:var(--ink)}
.quest .meta{font-size:9px;color:var(--dim);margin-top:8px;line-height:1.8}
.pill{display:inline-block;font-size:8px;padding:4px 8px;margin-right:6px;border:2px solid}
.pill.high{color:var(--pink);border-color:var(--pink)}
.pill.medium{color:var(--yellow);border-color:var(--yellow)}
.pill.low{color:var(--cyan);border-color:var(--cyan)}
.pill.open{color:var(--neon);border-color:var(--neon)}
.pill.done{color:#0c0c22;background:var(--neon);border-color:var(--neon)}
.pill.deferred{color:var(--dim);border-color:var(--dim)}
.quest .row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.quest button{font-family:inherit;font-size:9px;padding:8px 10px;cursor:pointer;
  background:#1a1a44;color:var(--ink);border:2px solid var(--cyan)}
.quest button:hover{background:var(--cyan);color:#06121a;box-shadow:0 0 9px rgba(67,234,255,.45)}
.letter{background:#fdf6e3;color:#23233b;border:4px solid var(--yellow);
  padding:22px;box-shadow:6px 6px 0 var(--pink),0 0 18px rgba(255,43,214,.22);font-family:"Courier New",monospace}
.letter h3{font-family:inherit;font-size:15px;margin-top:0}
.letter p{font-size:13px;line-height:1.8;white-space:pre-line}
.tip{border:2px dashed var(--neon);padding:12px;margin-top:14px;font-size:10px;line-height:1.9}
.marquee{overflow:hidden;white-space:nowrap;border-top:3px solid var(--pink);
  border-bottom:3px solid var(--pink);background:linear-gradient(90deg,#160a24,#21102d,#160a24);margin-top:16px;padding:8px 0;
  box-shadow:0 0 12px rgba(255,43,214,.16)}
.marquee span{display:inline-block;animation:mq 18s linear infinite;font-size:10px;color:#ff72e1;text-shadow:0 0 7px rgba(255,43,214,.65)}
@keyframes mq{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
table.score{width:100%;border-collapse:collapse;font-size:10px}
table.score td,table.score th{border:2px solid var(--edge);padding:10px;text-align:left}
table.score th{color:var(--yellow)}
.check{display:flex;gap:10px;align-items:flex-start;padding:10px;border:2px solid var(--edge);margin:8px 0;background:#0d0d28}
.check input{width:22px;height:22px;accent-color:var(--pink);margin-top:2px}
.check.done{opacity:.75;border-color:var(--neon)}
.check .t{font-size:10px}
.check .n{font-size:9px;color:var(--dim);margin-top:6px;line-height:1.7}
footer{margin-top:28px;text-align:center;font-size:9px;color:var(--dim);line-height:2}
.screen{display:none}.screen.on{display:block}
#gate{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
#gate .coin{font-size:34px;color:var(--yellow);text-shadow:3px 3px 0 #7b145f,0 0 9px var(--pink),0 0 26px rgba(255,43,214,.76);position:relative}
#gate .coin::before,#gate .coin::after{content:"✦";position:absolute;color:#ff8be8;font-size:14px;text-shadow:0 0 9px var(--pink);animation:sparkle 1.8s steps(2) infinite}
#gate .coin::before{left:-28px;top:-12px}#gate .coin::after{right:-28px;bottom:-10px;animation-delay:.8s}
@keyframes sparkle{50%{opacity:.18;transform:scale(.7)}}
#gate .sub{font-size:10px;color:var(--cyan);margin:14px 0 22px;line-height:2}
.err{color:var(--pink);font-size:10px;margin-top:12px;min-height:18px}
.healerbar{margin-top:14px;border:2px solid var(--yellow);padding:12px;font-size:9px;line-height:2;color:var(--yellow);background:#1d1503}
@media(max-width:640px){.crt{padding:14px 10px 48px}#gate .coin{font-size:22px}#gate .coin::before{left:-18px}#gate .coin::after{right:-18px}}