:root{--bg:#1a0b2e;--bg2:#2a1450;--panel:#24113f;--ink:#f4ecff;--dim:#a99bc9;--pink:#ff4fd8;--cyan:#3cf2ff;--yellow:#ffdd57;--green:#3cf2a0;--red:#ff3860;--px:4px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Courier New",ui-monospace,Menlo,Consolas,monospace;font-size:15px;line-height:1.4}
body{min-height:100vh;background:radial-gradient(ellipse at top,#3a1670 0%,var(--bg) 60%) fixed}
.crt{pointer-events:none;position:fixed;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);z-index:999}
h1,h2,h3{font-weight:900;text-transform:uppercase;letter-spacing:2px;margin:.3em 0}
h2{color:var(--yellow);text-shadow:3px 3px 0 #000}
h3{color:var(--cyan);font-size:1em}
a{color:var(--cyan)}
.btn,button{font:inherit;font-weight:900;color:#1a0b2e;background:var(--yellow);border:0;padding:.55em .9em;cursor:pointer;text-transform:uppercase;letter-spacing:1px;
  box-shadow:inset -4px -4px 0 rgba(0,0,0,.35),inset 4px 4px 0 rgba(255,255,255,.45),0 0 0 3px #000;margin:4px;transition:transform .05s}
button:hover:not(:disabled),.btn:hover{filter:brightness(1.12)}
button:active:not(:disabled){transform:translate(2px,2px)}
button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,.dropzone:focus-visible,label.opt:focus-within{outline:3px dashed var(--cyan);outline-offset:3px}
button:disabled{background:#5d4f78;color:#2a1d42;cursor:not-allowed}
button.pink{background:var(--pink)}button.cyan{background:var(--cyan)}button.green{background:var(--green)}button.red{background:var(--red);color:#fff}
button.small{padding:.25em .5em;font-size:.8em}
kbd{display:inline-block;background:#000;color:var(--yellow);padding:0 .35em;font-size:.8em;margin-right:.3em;border:1px solid var(--dim)}
input[type=text],select{font:inherit;background:#0b0420;color:var(--ink);border:3px solid var(--cyan);padding:.45em;width:100%;max-width:420px}
.panel{background:var(--panel);border:4px solid #000;box-shadow:0 0 0 3px var(--bg2),6px 6px 0 6px rgba(0,0,0,.4);padding:12px;margin:10px 0}
.muted{color:var(--dim)}.good{color:var(--green)}.bad{color:var(--red)}.warn{color:var(--yellow)}
.center{text-align:center}
/* title */
.title-screen{max-width:760px;margin:0 auto;padding:30px 14px;text-align:center}
.logo{font-size:clamp(28px,6.5vw,58px);line-height:1.05;color:var(--pink);text-shadow:4px 4px 0 #000,8px 8px 0 var(--cyan);margin:10px 0 20px}
.logo small{display:block;font-size:.35em;color:var(--yellow);text-shadow:2px 2px 0 #000;margin-top:12px;letter-spacing:3px}
.hero{display:flex;justify-content:center;align-items:flex-end;gap:16px;margin:10px 0 20px}
.hero .robot{font-size:76px;animation:chomp .6s steps(2) infinite}
@keyframes chomp{50%{transform:translateY(-6px) rotate(-6deg)}}
.hero svg{width:120px;image-rendering:pixelated;animation:shiver .3s steps(2) infinite}
@keyframes shiver{50%{transform:translateX(3px)}}
.menu{display:flex;flex-direction:column;align-items:center;gap:6px}
.menu button{min-width:280px;font-size:1.05em}
.foot{margin-top:24px;font-size:.8em;color:var(--dim)}
/* layout */
.topbar{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;background:#000;padding:8px 12px;border-bottom:4px solid var(--pink);position:sticky;top:0;z-index:5}
.topbar .brand{color:var(--pink);font-weight:900}
.stat{white-space:nowrap}.stat b{color:var(--yellow)}
.bar{display:inline-block;width:80px;height:12px;background:#333;vertical-align:middle;border:2px solid #000;box-shadow:0 0 0 1px var(--dim)}
.bar i{display:block;height:100%;background:var(--green)}
.bar.h i{background:var(--pink)}.bar.e i{background:var(--cyan)}.bar.m i{background:var(--yellow)}
.slots span{display:inline-block;width:12px;height:12px;background:var(--yellow);margin-right:3px;border:2px solid #000}
.slots span.used{background:#444}
.grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(280px,1.15fr) minmax(280px,1.2fr);gap:12px;padding:6px 12px 30px;max-width:1400px;margin:0 auto}
@media (max-width:1000px){.grid{grid-template-columns:1fr 1fr}.col-songs{grid-column:1/-1}}
@media (max-width:680px){.grid{grid-template-columns:1fr}.col-actions{order:-1}.topbar{font-size:.85em}.menu button{min-width:0;width:100%}}
.member{display:flex;gap:10px;padding:8px;border:3px solid #000;background:#1b0c33;margin-bottom:8px;position:relative}
.member .av{font-size:40px;line-height:1;width:52px;text-align:center}
.member.dead{opacity:.5;filter:grayscale(1)}.member.rehab{opacity:.75}
.member .tag{position:absolute;right:6px;top:4px;font-size:.75em;padding:0 4px;background:var(--red);color:#fff}
.member .tag.rehab{background:var(--yellow);color:#000}
.stats{display:grid;grid-template-columns:auto 1fr;gap:0 8px;font-size:.8em}
.pips{letter-spacing:-1px;color:var(--cyan)}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.actions button{text-align:left;margin:3px;font-size:.88em}
.actions .next{grid-column:1/-1;text-align:center;font-size:1.1em;background:var(--pink)}
.song{border:3px solid #000;background:#1b0c33;padding:8px;margin-bottom:8px}
.song .t{font-weight:900;color:var(--yellow)}
.song .meta{font-size:.8em;color:var(--dim)}
.q{display:inline-block;padding:0 6px;background:var(--cyan);color:#000;font-weight:900}
.news{max-height:260px;overflow:auto;font-size:.85em}
.news p{margin:4px 0;border-bottom:1px dashed #44306b;padding-bottom:4px}
.news .wk{color:var(--pink)}
/* chart */
table.chart{width:100%;border-collapse:collapse;font-size:.88em}
table.chart td,table.chart th{padding:3px 6px;border-bottom:1px solid #3a2560;text-align:left}
table.chart th{color:var(--cyan)}
table.chart tr.me{background:var(--pink);color:#000;font-weight:900}
table.chart td.pos{font-weight:900;color:var(--yellow);width:2.5em}
table.chart tr.me td.pos{color:#000}
.mv-up{color:var(--green)}.mv-down{color:var(--red)}.mv-new{color:var(--yellow)}
/* modal */
#modal-root .backdrop{position:fixed;inset:0;background:rgba(5,0,15,.78);display:flex;align-items:center;justify-content:center;z-index:50;padding:10px}
.modal{background:var(--panel);border:4px solid #000;box-shadow:0 0 0 4px var(--cyan),10px 10px 0 4px #000;max-width:620px;width:100%;max-height:92vh;overflow:auto;padding:16px;animation:pop .15s steps(3)}
.modal.wide{max-width:900px}
@keyframes pop{from{transform:scale(.85)}to{transform:none}}
.modal .emoji{font-size:48px;text-align:center}
.modal .btns{display:flex;flex-wrap:wrap;justify-content:flex-end;margin-top:12px}
.modal .btns.col{flex-direction:column;align-items:stretch}
.modal .btns.col button{text-align:left}
.opts{display:flex;flex-direction:column;gap:6px;margin:6px 0}
label.opt{display:flex;gap:8px;align-items:flex-start;border:3px solid #000;background:#1b0c33;padding:6px 8px;cursor:pointer}
label.opt:hover{background:#2c1650}
label.opt.disabled{opacity:.45;cursor:not-allowed}
label.opt input{margin-top:4px;accent-color:var(--pink)}
.dropzone{border:4px dashed var(--cyan);padding:18px;text-align:center;margin:8px 0;background:#0b0420;cursor:pointer}
.dropzone.over{background:#103040;border-color:var(--yellow)}
.report td{padding:2px 8px}.report td.n{text-align:right}
/* stage */
.stage{background:linear-gradient(#0b0420,#2a0f4a);border:4px solid #000;padding:10px;text-align:center;position:relative;overflow:hidden}
.stage .lights{position:absolute;inset:0;background:conic-gradient(from 0deg at 50% -10%,transparent 0 40%,rgba(255,79,216,.25) 45%,transparent 50%,rgba(60,242,255,.2) 55%,transparent 60%);animation:sweep 3s linear infinite;pointer-events:none}
@keyframes sweep{50%{transform:rotate(8deg)}}
.stage .band{font-size:44px;display:flex;justify-content:center;gap:14px;margin:10px 0;position:relative}
.stage .band span{display:inline-block;transition:transform .08s}
.stage canvas{width:100%;height:120px;image-rendering:pixelated;display:block;background:#0b0420;border:3px solid #000}
.stage .cap{font-size:1.2em;font-weight:900;color:var(--yellow);text-shadow:2px 2px 0 #000;position:relative}
.big1{font-size:64px;color:var(--yellow);text-shadow:4px 4px 0 var(--pink);animation:chomp .5s steps(2) infinite}
#toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#000;color:var(--yellow);padding:8px 14px;border:3px solid var(--yellow);display:none;z-index:60;max-width:90vw}
.cand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.cand{border:3px solid #000;background:#1b0c33;padding:8px;cursor:pointer;position:relative}
.cand.sel{background:#3a1460;box-shadow:0 0 0 3px var(--pink)}
.cand .bio{font-size:.8em;color:var(--dim);min-height:2.6em}
.help{max-width:820px;margin:0 auto;padding:20px 14px}
.help li{margin:4px 0}
/* --- v2: recruiting, firing, editor --- */
input[type=text],input[type=number],select,textarea{font-size:16px}
textarea{font:inherit;font-size:16px;background:#0b0420;color:var(--ink);border:3px solid var(--cyan);padding:.45em;width:100%;resize:vertical}
.member .fire{display:block;margin:6px 0 0 auto}
.former{font-size:.8em;margin:6px 0}.former .tag2{background:#3a2560;padding:0 4px}
.cand .hire{width:100%;margin:8px 0 0;min-height:44px}
.newsbox{border:3px dashed var(--yellow);padding:6px 8px;margin:8px 0;background:#1b0c33}
.fxsum{color:var(--cyan);font-size:.9em;border-top:1px dashed #44306b;padding-top:6px}
.small{font-size:.82em}
.ed-tabs,.ed-tools{display:flex;flex-wrap:wrap;gap:2px;margin:4px 0}
.ed-tabs button{min-height:44px;flex:1;font-size:.9em}.ed-tabs button.on{background:var(--pink);box-shadow:inset -4px -4px 0 rgba(0,0,0,.35),0 0 0 3px #fff}
.ed-tools button{min-height:40px}
.ed-list{margin-top:6px}
.ed-item{display:flex;gap:8px;align-items:center;border:3px solid #000;background:#1b0c33;padding:6px;margin-bottom:6px}
.ed-item.off{opacity:.55}
.ed-item .ed-main{flex:1;min-width:0;overflow-wrap:anywhere}
.ed-item .ed-btns{display:flex;flex-direction:column}
.ed-item .ed-btns button{min-height:36px;min-width:84px;margin:2px}
.sw{display:flex;flex-direction:column;align-items:center;font-size:.75em;min-width:44px;cursor:pointer}
.sw input,.chk input{width:26px;height:26px;accent-color:var(--pink)}
.chk{display:flex;gap:8px;align-items:center;margin:4px 0}
.ed-form label{display:block;margin:6px 0}
.ed-form label input,.ed-form label select,.ed-form label textarea{display:block;margin-top:2px;max-width:none}
.ed-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ed-form fieldset{border:3px solid #44306b;margin:8px 0;padding:6px 8px}
.ed-form legend{color:var(--yellow);font-weight:900;padding:0 4px}
.fx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:4px 8px}
.fx-grid label{margin:2px 0;font-size:.85em}
.ed-form details summary{cursor:pointer;color:var(--cyan);padding:6px 0;min-height:32px}
.filebtn{display:inline-block}
@media (max-width:680px){.ed-form .row2{grid-template-columns:1fr}.ed-item{flex-wrap:wrap}.ed-item .ed-btns{flex-direction:row;width:100%}}
@media (pointer:coarse){button{min-height:40px}button.small{min-height:36px}.actions button{min-height:48px}}
.modal .btns button{min-height:44px}
.ed-form label.chk{display:flex}
.modal .btns{position:sticky;bottom:-16px;background:var(--panel);padding:6px 0 8px;margin-bottom:-8px;z-index:2}
/* v12: Faimouse™ the mascot (pixel-art sprites in /img/mouse) */
.mascot{image-rendering:auto;height:auto;max-width:100%;user-select:none;pointer-events:none}
.hero .mascot-hero{width:150px;height:auto;animation:shiver .6s steps(2) infinite}
.mascot-side{float:right;width:88px;margin:0 0 6px 10px}
.mascot-side .mascot{width:88px;height:auto;display:block}
.bent .mascot-bent{float:right;width:64px;height:auto;margin:0 0 4px 8px}
.mascot-run{width:56px;height:auto}
@media (max-width:520px){.mascot-side{width:64px}.mascot-side .mascot{width:64px}.hero .mascot-hero{width:120px}}
#toast{pointer-events:none}@media (max-width:520px){#toast{bottom:auto;top:12px}}
/* v12.1: clean logo on iPhone (no ghost copy) + the mouse alone on the title screen */
.logo{text-shadow:.07em .07em 0 #000}
@media (min-width:700px){.logo{text-shadow:.07em .07em 0 #000,.14em .14em 0 var(--cyan)}}
.hero.solo{justify-content:center}