:root{
  --bg:#03050b; --panel:rgba(8,14,26,.72); --line:rgba(120,170,255,.22); --txt:#cfe0ff; --dim:#7d92b8;
  --ally:#5cc8ff; --raid:#ff6a4a; --warn:#ffcc55;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000;color:var(--txt);font-family:'Saira Condensed','Rajdhani','Segoe UI',Arial,sans-serif;user-select:none;-webkit-user-select:none}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
canvas#ov{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.mono{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace}

/* ---------- top bar ---------- */
#top{position:fixed;top:0;left:0;right:0;display:flex;justify-content:center;align-items:stretch;gap:0;pointer-events:none;padding-top:10px;z-index:5}
.side{width:min(34vw,430px);padding:8px 14px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(6px)}
.side.ally{border-right:none;clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,0 100%);border-left:3px solid var(--ally)}
.side.raid{border-left:none;clip-path:polygon(18px 0,100% 0,100% 100%,0 100%);border-right:3px solid var(--raid);text-align:right}
.side h2{font-size:15px;letter-spacing:.28em;font-weight:700}
.ally h2{color:var(--ally)} .raid h2{color:var(--raid)}
.bar{height:7px;background:rgba(255,255,255,.08);margin:5px 0 4px;position:relative;overflow:hidden}
.bar i{position:absolute;inset:0;width:100%;transition:width .3s}
.ally .bar i{background:linear-gradient(90deg,#2a8fd1,var(--ally))}
.raid .bar i{background:linear-gradient(270deg,#c8391e,var(--raid));right:0;left:auto}
.side small{font-size:12px;color:var(--dim);letter-spacing:.12em}
#clock{width:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--line);border-left:none;border-right:none}
#clock b{font-size:22px;font-weight:500;letter-spacing:.06em}
#clock span{font-size:11px;color:var(--dim);letter-spacing:.2em}

/* ---------- bottom bar ---------- */
#bottom{position:fixed;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:8px;z-index:5;pointer-events:none}
.btn{pointer-events:auto;cursor:pointer;background:var(--panel);border:1px solid var(--line);color:var(--txt);padding:8px 14px;font:600 13px 'Saira Condensed',sans-serif;letter-spacing:.2em;text-transform:uppercase;transition:.15s;backdrop-filter:blur(6px)}
.btn:hover{border-color:var(--ally);color:#fff;background:rgba(30,60,100,.6)}
.btn[aria-pressed=true],.btn.on{border-color:var(--ally);color:#fff;box-shadow:inset 0 0 14px rgba(92,200,255,.28)}
.btn kbd{font:500 10px 'IBM Plex Mono',monospace;color:var(--dim);margin-left:8px;border:1px solid var(--line);padding:0 4px}

/* ---------- camera label / feed ---------- */
#camlabel{position:fixed;left:18px;bottom:62px;z-index:5;pointer-events:none}
#camlabel .k{font-size:11px;letter-spacing:.3em;color:var(--dim)}
#camlabel .v{font-size:22px;font-weight:700;letter-spacing:.18em}
#feed{position:fixed;right:16px;top:86px;width:340px;z-index:5;pointer-events:none;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.fe{padding:4px 10px;background:var(--panel);border-right:3px solid var(--dim);font-size:14px;letter-spacing:.06em;animation:fe 7s forwards;max-width:100%}
.fe.a{border-color:var(--ally)} .fe.r{border-color:var(--raid)} .fe.w{border-color:var(--warn)}
@keyframes fe{0%{opacity:0;transform:translateX(30px)}5%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0}}
#msg{position:fixed;top:21%;left:0;right:0;text-align:center;font-size:30px;font-weight:700;letter-spacing:.35em;pointer-events:none;z-index:6;opacity:0;text-shadow:0 0 18px currentColor}
#msg.show{animation:msg 3.2s forwards}
@keyframes msg{0%{opacity:0;letter-spacing:.6em}12%{opacity:1;letter-spacing:.35em}80%{opacity:1}100%{opacity:0}}

/* ---------- selected panel ---------- */
#sel{position:fixed;right:16px;bottom:62px;width:290px;background:var(--panel);border:1px solid var(--line);padding:10px 14px;z-index:5;display:none;pointer-events:none;backdrop-filter:blur(6px)}
#sel h3{font-size:20px;letter-spacing:.14em;font-weight:700}
#sel .t{font-size:11px;letter-spacing:.3em;color:var(--dim)}
#sel .row{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;letter-spacing:.15em;color:var(--dim)}
#sel .row .bar{flex:1;margin:0}
#sel .row .bar i{background:linear-gradient(90deg,#c8a02a,#ffd45c)}
#sel .row.sh .bar i{background:linear-gradient(90deg,#2a8fd1,#8fe0ff)}

/* ---------- pilot HUD ---------- */
#pilot{position:fixed;inset:0;z-index:4;pointer-events:none;display:none}
#pilot .ret{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border:1.5px solid rgba(92,200,255,.8);border-radius:50%;box-shadow:0 0 8px rgba(92,200,255,.5)}
#pilot .ret:after{content:'';position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;background:#bfeaff;border-radius:50%}
#pilot .stick{position:absolute;width:18px;height:18px;margin:-9px;border:1.5px solid #fff;transform:rotate(45deg);box-shadow:0 0 8px #5cc8ff}
#pilot .info{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);text-align:center;font-size:13px;letter-spacing:.25em;color:var(--ally)}
#pilot .gauge{position:absolute;bottom:110px;width:160px}
#pilot .gauge.l{left:6vw} #pilot .gauge.r{right:6vw;text-align:right}
#pilot .gauge .bar{height:8px} #pilot .gauge .bar i{background:linear-gradient(90deg,#2a8fd1,var(--ally))}
#pilot .gauge.r .bar i{background:linear-gradient(90deg,#c8a02a,#ffd45c)}
#pilot .gauge span{font-size:12px;letter-spacing:.2em;color:var(--dim)}
#help{position:fixed;left:50%;top:100px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--line);padding:6px 16px;font-size:13px;letter-spacing:.14em;color:var(--dim);display:none;z-index:5;pointer-events:none}
#help b{color:var(--txt);font-weight:600}

/* ---------- title / load / end overlays ---------- */
.screen{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at 50% 40%,rgba(10,22,50,.55),rgba(0,0,0,.92));transition:opacity .6s}
.screen.hide{opacity:0;pointer-events:none}
.screen h1{font-size:clamp(44px,8vw,104px);letter-spacing:.32em;font-weight:700;text-indent:.32em;background:linear-gradient(180deg,#fff,#7ab4ff 70%,#3a5fa8);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(92,160,255,.45))}
.screen h2.sub{font-size:clamp(14px,2vw,22px);letter-spacing:.7em;text-indent:.7em;color:var(--dim);margin:6px 0 40px;font-weight:500}
.screen .opts{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}
.card{pointer-events:auto;cursor:pointer;width:210px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);transition:.15s;text-align:left}
.card:hover,.card.sel{border-color:var(--ally);background:rgba(25,55,95,.55);transform:translateY(-3px)}
.card h4{font-size:19px;letter-spacing:.2em;font-weight:700}
.card p{font-size:13px;color:var(--dim);margin-top:4px;line-height:1.35;letter-spacing:.04em}
.go{pointer-events:auto;cursor:pointer;padding:14px 56px;border:1px solid var(--ally);background:rgba(40,100,160,.35);color:#fff;font:700 20px 'Saira Condensed',sans-serif;letter-spacing:.5em;text-indent:.5em;transition:.2s}
.go:hover{background:rgba(70,150,230,.55);box-shadow:0 0 30px rgba(92,200,255,.5)}
.go[disabled]{opacity:.4;pointer-events:none}
#loadbar{width:min(420px,70vw);height:3px;background:rgba(255,255,255,.1);margin-top:14px}
#loadbar i{display:block;height:100%;width:0;background:var(--ally);transition:width .2s}
.credits{position:absolute;bottom:18px;font-size:12px;letter-spacing:.2em;color:var(--dim);text-align:center;padding:0 20px}
#end h1{font-size:clamp(40px,7vw,90px)}
#end .stats{font-size:15px;letter-spacing:.2em;color:var(--dim);margin:6px 0 30px;text-align:center;line-height:1.9}
#end .stats b{color:var(--txt);font-weight:600}
@media (max-width:760px){.side{width:40vw;padding:6px 8px}.side h2{font-size:11px;letter-spacing:.14em}#clock{width:70px}#feed{display:none}#sel{display:none!important}.btn{padding:6px 8px;font-size:11px;letter-spacing:.1em}.btn kbd{display:none}}

body:not(.live) #top,body:not(.live) #bottom,body:not(.live) #camlabel{opacity:0;pointer-events:none!important}
#top,#bottom,#camlabel{transition:opacity .8s}
.endless{display:block;margin:14px auto 6px;font:500 13px 'IBM Plex Mono',monospace;color:#cfe0ff;letter-spacing:.04em;cursor:pointer;text-align:center}
.endless input{vertical-align:-2px;margin-right:6px;accent-color:#5cc8ff}