:root{
  --bg:#05070f;--panel:rgba(12,20,38,0.85);--accent:#00dcb4;--danger:#e63946;--imp:#e63946;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;background:var(--bg);font-family:'Chakra Petch',sans-serif;color:#e8eefc;user-select:none;}
canvas{display:block;position:fixed;inset:0;}

.hidden{display:none !important;}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;}
#hud button{pointer-events:auto;}

#taskPanel{position:absolute;top:12px;left:12px;background:var(--panel);border:1px solid #22355c;border-radius:10px;padding:10px 12px;max-width:210px;backdrop-filter:blur(6px);}
.panel-title{font-family:'Orbitron';font-weight:700;font-size:12px;letter-spacing:2px;color:var(--accent);margin-bottom:6px;}
.titem{font-size:12px;padding:2px 0;color:#cbd6ee;}
.titem.d{color:var(--accent);text-decoration:line-through;opacity:.7;}
.titem small{color:#7288b0;font-size:10px;}
.titem.fake{color:#8896a6;}
.fake{font-size:10px;color:#66748e;margin-bottom:2px;}

#progressWrap{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:min(280px,50vw);}
#progressBar{height:14px;background:#0d1526;border:1px solid #22355c;border-radius:8px;overflow:hidden;}
#progressFill{height:100%;width:0;background:linear-gradient(90deg,#00dcb4,#3ef0c8);transition:width .4s;}

#topRight{position:absolute;top:12px;right:12px;display:flex;gap:8px;}
.hud-icon{background:var(--panel);border:1px solid #22355c;color:#cbd6ee;border-radius:8px;padding:8px 12px;font-family:'Orbitron';font-size:11px;font-weight:700;cursor:pointer;}
.hud-icon:active{background:#1a2745;}

#alertBanner{position:absolute;top:70px;left:50%;transform:translateX(-50%);background:rgba(230,57,70,0.92);color:#fff;padding:10px 18px;border-radius:8px;font-weight:600;font-size:13px;max-width:90vw;text-align:center;animation:pulseB 1s infinite;}
@keyframes pulseB{50%{opacity:.75;}}

#actionButtons{position:absolute;bottom:24px;right:20px;display:flex;flex-direction:column;gap:10px;align-items:flex-end;}
.act-btn{width:66px;height:66px;border-radius:50%;border:2px solid #33507a;background:rgba(15,25,45,0.7);color:#5a6b8e;font-family:'Orbitron';font-weight:700;font-size:11px;cursor:pointer;transition:.15s;}
.act-btn.active{color:#fff;border-color:#fff;background:rgba(30,50,90,0.9);transform:scale(1.05);}
.act-btn.kill.active{background:var(--danger);border-color:#ff8a95;}
.act-btn.kill{border-color:#5c2a30;color:#8a5a5f;}
.act-btn.report.active{background:#f4a300;border-color:#ffd280;color:#111;}
.act-btn.vent.active,.act-btn.sab.active{background:#4b3a6e;border-color:#a78bd6;color:#fff;}

#dpad{position:absolute;bottom:24px;left:20px;display:flex;flex-direction:column;align-items:center;gap:4px;}
#dpad button{width:54px;height:54px;border-radius:12px;background:rgba(15,25,45,0.6);border:1px solid #33507a;color:#8ba0c8;font-size:18px;cursor:pointer;}
#dpad button:active{background:#1e3358;color:#fff;}
.dpad-mid{display:flex;gap:4px;}

/* Overlays */
#overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#0d1830,#03050c);}
.screen{width:100%;max-width:520px;padding:28px;text-align:center;max-height:100vh;overflow-y:auto;}

.title{font-family:'Orbitron';font-weight:900;font-size:clamp(34px,9vw,58px);line-height:.95;letter-spacing:2px;background:linear-gradient(180deg,#fff,#00dcb4);-webkit-background-clip:text;background-clip:text;color:transparent;}
.title span{display:block;color:var(--danger);-webkit-text-fill-color:var(--danger);font-size:.62em;}
.tag{color:#7d90b8;margin:14px 0 26px;font-size:14px;}

.setup{display:flex;flex-direction:column;gap:14px;margin-bottom:24px;}
.setup label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#9fb0d4;text-align:left;font-weight:600;}
.setup b{color:var(--accent);}
input[type=range]{width:100%;accent-color:var(--accent);height:6px;}

.big-btn{background:linear-gradient(135deg,#00dcb4,#0093c4);color:#04121c;border:none;padding:16px 30px;font-family:'Orbitron';font-weight:900;font-size:16px;border-radius:12px;cursor:pointer;width:100%;letter-spacing:1px;box-shadow:0 6px 22px rgba(0,220,180,0.35);transition:.15s;}
.big-btn:active{transform:translateY(2px);}
.ghost-btn{background:none;border:1px solid #33507a;color:#9fb0d4;padding:12px;border-radius:10px;margin-top:12px;cursor:pointer;width:100%;font-family:'Chakra Petch';font-weight:600;}
.settings{margin-top:22px;font-size:13px;color:#8ba0c8;}
.settings label{display:flex;gap:10px;align-items:center;justify-content:center;}
.settings input{width:120px;}

.help ul{text-align:left;line-height:1.8;color:#bfcdea;font-size:14px;margin:16px 0 24px;list-style:none;}
.help li{padding:6px 0;border-bottom:1px solid #1a2740;}
.help b{color:var(--accent);}
.help h2{font-family:'Orbitron';color:#fff;}

/* Role reveal */
.reveal{animation:fadeIn .4s;}
.reveal h1{font-family:'Orbitron';font-weight:900;font-size:clamp(40px,12vw,72px);letter-spacing:3px;animation:pop .5s;}
.reveal.crew h1{color:#5ad6ff;text-shadow:0 0 30px #2aa0ff;}
.reveal.imp h1{color:var(--danger);text-shadow:0 0 30px #ff2a3a;}
.reveal p{color:#aebbdc;margin-top:14px;font-size:15px;}
.role-icon{width:70px;height:90px;border-radius:35px 35px 30px 30px;margin:0 auto 18px;position:relative;animation:pop .5s;}
.role-icon:after{content:'';position:absolute;top:24px;left:16px;width:44px;height:26px;background:#a7d3e8;border-radius:14px;}
.countdown{margin-top:26px;color:#5a6b8e;font-family:'Orbitron';font-size:12px;letter-spacing:2px;animation:pulseB 1s infinite;}
@keyframes pop{0%{transform:scale(.3);opacity:0;}70%{transform:scale(1.15);}100%{transform:scale(1);opacity:1;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* Meeting */
.meeting{max-width:640px;}
.meeting-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.mtitle{font-family:'Orbitron';font-weight:900;font-size:24px;color:#f4a300;letter-spacing:2px;}
.mtimer{font-family:'Orbitron';font-weight:900;font-size:26px;color:var(--danger);}
.meeting-body{display:flex;gap:14px;flex-wrap:wrap;}
.chatbox{flex:1;min-width:200px;background:#0a1120;border:1px solid #22355c;border-radius:10px;padding:12px;height:240px;overflow-y:auto;text-align:left;font-size:13px;}
.chatline{padding:4px 0;color:#c3d0ec;display:flex;align-items:center;gap:6px;}
.cdot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0;}
.chatline b{color:#fff;}
.voters{flex:1;min-width:180px;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start;}
.voter{background:#0e1830;border:1px solid #22355c;border-radius:8px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;cursor:pointer;transition:.12s;position:relative;}
.voter:active,.voter.sel{border-color:var(--accent);background:#123048;}
.vbean{width:26px;height:34px;border-radius:13px 13px 11px 11px;position:relative;}
.vbean:after{content:'';position:absolute;top:9px;left:6px;width:16px;height:9px;background:#a7d3e8;border-radius:5px;}
.skipbean{background:#33507a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;}
.skipbean:after{display:none;}
.vcount{color:var(--danger);font-size:10px;letter-spacing:-2px;}
.quickchat{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px;}
.quickchat button{background:#123048;border:1px solid #22355c;color:#bfcdea;border-radius:20px;padding:8px 14px;font-size:12px;cursor:pointer;font-family:'Chakra Petch';}
.quickchat button:active{background:#1a4360;}
.votehint{margin-top:16px;color:#8ba0c8;font-size:13px;}

/* Ejection */
.ejection{animation:fadeIn .3s;}
.airlock{width:120px;height:120px;margin:0 auto 20px;position:relative;overflow:hidden;}
.ejbean{width:44px;height:58px;border-radius:22px 22px 18px 18px;margin:0 auto;position:relative;animation:eject 3s ease-in forwards;}
.ejbean:after{content:'';position:absolute;top:15px;left:11px;width:26px;height:15px;background:#a7d3e8;border-radius:8px;}
.ejbean.empty{background:#33507a;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;animation:none;}
@keyframes eject{0%{transform:translateY(30px) rotate(0);}100%{transform:translateY(-140px) rotate(180deg);opacity:0;}}
.ejection h2{font-family:'Orbitron';font-size:22px;color:#fff;}
.ejection p{color:#aebbdc;margin-top:8px;}
.ejcount{margin-top:14px;color:var(--danger);font-weight:600;font-size:13px;}

/* End screen */
.endscreen h1{font-family:'Orbitron';font-weight:900;font-size:clamp(34px,10vw,60px);letter-spacing:2px;}
.endscreen.crew h1{color:#5ad6ff;text-shadow:0 0 30px #2aa0ff;}
.endscreen.imp h1{color:var(--danger);text-shadow:0 0 30px #ff2a3a;}
.reason{color:#aebbdc;margin:12px 0 20px;}
.crewline{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:18px;}
.ecrew{display:flex;flex-direction:column;align-items:center;font-size:12px;color:#c3d0ec;}
.ecrew.dead{opacity:.4;}
.eb{width:30px;height:40px;border-radius:15px 15px 12px 12px;margin-bottom:4px;position:relative;}
.eb:after{content:'';position:absolute;top:10px;left:7px;width:18px;height:10px;background:#a7d3e8;border-radius:6px;}
.ecrew small{color:var(--danger);}
.verdict{font-family:'Orbitron';font-weight:700;font-size:18px;margin-bottom:20px;color:#fff;}

/* Pause */
.pause h2{font-family:'Orbitron';font-size:28px;margin-bottom:20px;}
.pvol{display:flex;gap:10px;justify-content:center;align-items:center;margin-bottom:20px;color:#9fb0d4;}
.pvol input{width:140px;}

/* Task modals */
.taskmodal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.7);}
.taskcard{background:#0e1830;border:2px solid #22355c;border-radius:16px;padding:26px;width:min(400px,90vw);position:relative;text-align:center;}
.taskcard h3{font-family:'Orbitron';color:var(--accent);margin-bottom:8px;font-size:18px;}
.taskcard p{color:#9fb0d4;font-size:13px;margin-bottom:18px;}
.xbtn{position:absolute;top:10px;right:10px;background:none;border:none;color:#7288b0;font-size:20px;cursor:pointer;}

.swipetrack{background:#0a1120;border:1px solid #22355c;border-radius:8px;height:70px;position:relative;margin-bottom:12px;}
.card{position:absolute;left:6px;top:12px;width:46px;height:46px;background:#f4a300;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:grab;}
.swmsg{color:var(--accent);font-weight:600;min-height:18px;}

.wires{display:flex;justify-content:space-between;gap:40px;}
.wcol{display:flex;flex-direction:column;gap:16px;flex:1;}
.wnode{background:#0a1120;border:1px solid #22355c;border-radius:8px;padding:10px;cursor:pointer;display:flex;justify-content:center;}
.wnode span{width:34px;height:20px;border-radius:4px;display:block;}
.wnode.active{border-color:#fff;}
.wnode.matched{opacity:.35;}

.codein{width:120px;text-align:center;font-size:24px;padding:8px;background:#0a1120;border:1px solid #22355c;border-radius:8px;color:#fff;margin-bottom:14px;letter-spacing:8px;font-family:'Orbitron';}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.keypad button{padding:14px;background:#123048;border:1px solid #22355c;border-radius:8px;color:#fff;font-size:18px;cursor:pointer;font-family:'Orbitron';}
.keypad button:active{background:#1a4360;}
.keypad button:last-child{grid-column:span 3;}

.dlbar{background:#0a1120;border:1px solid #22355c;border-radius:8px;height:26px;overflow:hidden;}
.dlbar>div{height:100%;width:0;background:linear-gradient(90deg,#00dcb4,#3ef0c8);transition:width .1s;}

.fueltank{width:60px;height:120px;background:#0a1120;border:1px solid #22355c;border-radius:8px;margin:0 auto 14px;overflow:hidden;display:flex;align-items:flex-end;}
.fueltank>div{width:100%;height:0;background:linear-gradient(0deg,#f4a300,#ffd280);transition:height .06s;}
.holdbtn{background:#123048;border:1px solid #22355c;color:#fff;padding:14px 26px;border-radius:10px;font-family:'Orbitron';font-weight:700;cursor:pointer;margin-bottom:12px;}
.holdbtn:active{background:#1a4360;}

.hexgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.hex{aspect-ratio:1;border-radius:10px;background:#0a1120;border:1px solid #22355c;cursor:pointer;}
.hex.lit{background:#f4a300;box-shadow:0 0 14px #f4a300;}
.hex.done{background:#1a3020;}

.sabmenu .sab-opt{display:block;width:100%;background:#4b3a6e;border:1px solid #a78bd6;color:#fff;padding:14px;border-radius:10px;margin-bottom:10px;font-family:'Chakra Petch';font-weight:600;font-size:15px;cursor:pointer;}
.sabmenu .sab-opt:active{background:#5c4a80;}

#footer{position:fixed;bottom:4px;left:0;width:100%;text-align:center;z-index:5;pointer-events:none;}
#footer a{color:rgba(120,140,180,0.5);font-size:10px;text-decoration:none;pointer-events:auto;}
#footer a:hover{color:var(--accent);}

@media(max-width:600px){
  .act-btn{width:58px;height:58px;font-size:10px;}
  #dpad button{width:48px;height:48px;}
  .meeting-body{flex-direction:column;}
  #taskPanel{max-width:150px;font-size:11px;}
}
</parameter>
</invoke>