:root{
  --bg:#0d0f0e; --p1:#1a1d1b; --p2:#262a27; --line:#3a403b;
  --matcha:#9BC53D; --matcha2:#B5D86B; --red:#FF4D5E; --blue:#4DA8FF;
  --txt:#e6efe0; --mut:#8c9a8a; --crt:#e9e1c8;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--txt);font-family:'VT323',monospace;font-size:20px}
canvas#canvas{position:fixed;inset:0;display:block;image-rendering:pixelated}
button{font-family:inherit;cursor:pointer}
.hidden{display:none!important}
.screen{position:fixed;inset:0;display:none;z-index:10;overflow:auto}
.screen.show{display:flex}
.btn{font-family:'Press Start 2P',monospace;font-size:11px;padding:12px 16px;background:var(--matcha);color:#10140c;border:none;border-radius:8px;box-shadow:0 4px 0 #5d7d1f,0 0 20px #9BC53D44;transition:transform .08s;letter-spacing:1px}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #5d7d1f}
.btn.big{font-size:14px;padding:16px 22px}
.btn.ghost{background:transparent;color:var(--matcha2);border:2px solid var(--matcha);box-shadow:none}
.btn.red{background:var(--red);color:#fff;box-shadow:0 4px 0 #9a2230}
.btn:disabled{opacity:.4}

/* title */
#title{align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at 50% 120%,transparent 40%,#0d0f0ecc 80%)}
.logo-wrap{text-align:center;padding:20px;animation:rise .8s ease-out}
.logo-kicker{font-family:'Press Start 2P';font-size:9px;color:var(--mut);letter-spacing:3px;margin-bottom:18px}
.logo{font-family:'Press Start 2P';font-size:clamp(30px,7vw,72px);color:var(--matcha);text-shadow:4px 4px 0 #1f2a10,0 0 30px #9BC53D66;line-height:1.1;position:relative}
.logo.sub{color:var(--txt);font-size:clamp(20px,4.5vw,44px);margin-top:8px;text-shadow:3px 3px 0 #3a1015,0 0 20px #FF4D5E44}
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-t);position:absolute;left:0;right:0;top:0;opacity:.7;pointer-events:none}
.glitch::before{color:var(--red);animation:gl1 3s infinite steps(1)}
.glitch::after{color:var(--blue);animation:gl2 3s infinite steps(1)}
@keyframes gl1{0%,92%{transform:none;clip-path:inset(100% 0 0 0)}93%{transform:translate(-4px,1px);clip-path:inset(20% 0 50% 0)}96%{transform:translate(3px,-2px);clip-path:inset(60% 0 10% 0)}}
@keyframes gl2{0%,90%{transform:none;clip-path:inset(100% 0 0 0)}91%{transform:translate(4px,0);clip-path:inset(40% 0 30% 0)}95%{transform:translate(-3px,2px);clip-path:inset(5% 0 75% 0)}}
@keyframes rise{from{opacity:0;transform:translateY(30px)}}
.tagline{margin:22px 0 28px;font-size:24px;color:var(--matcha2);min-height:30px}
.menu{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.auth{margin-top:16px;color:var(--mut);font-size:18px}
.foot{position:fixed;bottom:10px;left:0;right:0;text-align:center}
.foot a,.remix-mini{color:var(--matcha);font-family:'Press Start 2P';font-size:9px;text-decoration:none}
.remix-mini{position:fixed;bottom:6px;left:50%;transform:translateX(-50%);opacity:.6;z-index:5}

/* select */
#select{background:#0d0f0ef2;align-items:flex-start;justify-content:center;padding:20px 12px 60px}
.sel-wrap{width:100%;max-width:1000px}
.h2{font-family:'Press Start 2P';font-size:18px;color:var(--matcha);text-align:center;margin:10px 0 20px}
.teams{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:720px){.teams{grid-template-columns:1fr}}
.team{background:var(--p1);border:2px solid var(--line);border-radius:10px;padding:14px}
.team.blue .team-h{color:var(--blue)} .team.red .team-h{color:var(--red)}
.team-h{font-family:'Press Start 2P';font-size:14px;margin-bottom:10px}
.team-h small{display:block;font-family:'VT323';font-size:18px;color:var(--mut);margin-top:6px}
.role{display:block;width:100%;text-align:left;background:var(--p2);border:2px solid transparent;border-radius:8px;padding:10px 12px;margin-bottom:8px;color:var(--txt);font-size:18px}
.role b{font-family:'Press Start 2P';font-size:10px;display:block;margin-bottom:6px}
.role em{display:block;color:var(--matcha2);font-style:normal;font-size:16px;margin-top:4px}
.role.sel{border-color:var(--matcha);box-shadow:0 0 18px #9BC53D55;background:#20281b}
.team.red .role.sel{border-color:var(--red);box-shadow:0 0 18px #FF4D5E55;background:#2a1a1c}
.sel-bottom{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:18px;background:var(--p1);padding:14px;border-radius:10px;border:2px solid var(--line)}
.sel-bottom label{font-family:'Press Start 2P';font-size:9px;color:var(--mut);display:flex;flex-direction:column;gap:6px}
input{font-family:'VT323';font-size:22px;background:#0b0d0c;color:var(--matcha2);border:2px solid var(--line);border-radius:6px;padding:6px 10px;outline:none}
input:focus{border-color:var(--matcha)}
.colors{display:flex;gap:8px}
.colors button{width:30px;height:30px;border-radius:6px;border:3px solid transparent}
.colors button.sel{border-color:#fff}
#preview{width:45px;height:72px;image-rendering:pixelated;background:#0b0d0c;border-radius:6px}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#hud > *{pointer-events:auto}
.hud-tl{position:absolute;top:10px;left:10px;width:250px;max-width:46vw}
.badge{font-family:'Press Start 2P';font-size:9px;padding:8px 10px;background:var(--p1);border:2px solid var(--matcha);border-radius:8px;margin-bottom:6px;box-shadow:0 0 14px #9BC53D44}
.badge.red{border-color:var(--red);box-shadow:0 0 14px #FF4D5E55}
.meter{background:#1a1d1bdd;border-radius:6px;padding:4px 8px;margin-bottom:4px;font-size:16px;color:var(--mut)}
.bar{height:8px;background:#0b0d0c;border-radius:4px;overflow:hidden;margin-top:2px}
.bar i{display:block;height:100%;width:0;background:var(--matcha);transition:width .3s}
.bar.hp i{background:var(--blue)}
.bar.chaos i{background:var(--red)}
.mission{background:#1a1d1be6;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:17px;margin-top:4px}
.mission .mh{font-family:'Press Start 2P';font-size:8px;color:var(--matcha);margin-bottom:6px;line-height:1.5}
.mission .mh b{color:var(--red);float:right}
.mission ol,.mission ul{padding-left:18px}
.mission li{color:var(--mut);line-height:1.15}
.mission li.done{color:var(--matcha);text-decoration:line-through}
.mission li.cur{color:#fff}
.mission li.cur::marker{color:var(--red)}
.hud-tr{position:absolute;top:10px;right:10px;width:230px;max-width:44vw}
#minimap{width:100%;height:auto;background:#0b0d0ccc;border:2px solid var(--line);border-radius:8px;image-rendering:pixelated}
.feed{background:#1a1d1be6;border:1px solid var(--line);border-radius:8px;padding:6px 8px;margin-top:4px;font-size:16px;max-height:30vh;overflow:hidden}
.feed-h{font-family:'Press Start 2P';font-size:8px;color:var(--matcha);margin-bottom:4px;display:flex;justify-content:space-between}
.feed div div{border-left:2px solid var(--matcha);padding-left:6px;margin-bottom:3px;line-height:1.05;animation:fin .3s}
.feed .bad{border-color:var(--red);color:#ffb3ba}
.feed .good{border-color:var(--blue);color:#bfe0ff}
@keyframes fin{from{opacity:0;transform:translateX(10px)}}
.sabo{position:absolute;top:10px;left:50%;transform:translateX(-50%);font-family:'Press Start 2P';font-size:10px;background:var(--red);color:#fff;padding:10px 14px;border-radius:8px;animation:blink 1s infinite;text-align:center;line-height:1.6;max-width:42vw}
@keyframes blink{50%{box-shadow:0 0 30px var(--red)}}
.actions{position:absolute;right:10px;bottom:120px;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.ab{font-family:'Press Start 2P';font-size:8px;padding:9px 10px;border-radius:8px;border:2px solid var(--matcha);background:#1a1d1be6;color:var(--matcha2);min-width:120px}
.ab.r{border-color:var(--red);color:#ffb3ba}
.ab.cd{opacity:.45}
.use{position:absolute;right:14px;bottom:24px;width:120px;height:84px;border-radius:14px;font-family:'Press Start 2P';font-size:9px;line-height:1.5;background:var(--p2);color:var(--mut);border:3px solid var(--line);padding:6px}
.use.on{background:var(--matcha);color:#10140c;border-color:var(--matcha2);box-shadow:0 0 24px #9BC53D88;animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.04)}}
#joy{position:absolute;left:24px;bottom:24px;width:120px;height:120px;border-radius:50%;background:#ffffff0d;border:2px solid #9BC53D55;display:none;touch-action:none}
#knob{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:#9BC53D88}
body.touch #joy{display:block}
#toast{position:absolute;top:28%;left:50%;transform:translateX(-50%);font-family:'Press Start 2P';font-size:11px;background:#0d0f0ef0;border:2px solid var(--matcha);padding:12px 16px;border-radius:8px;opacity:0;transition:opacity .3s;pointer-events:none;text-align:center;max-width:80vw;line-height:1.6;color:var(--matcha2)}
#toast.show{opacity:1}
.glitch-ov{position:absolute;inset:0;pointer-events:none;display:none;background:repeating-linear-gradient(0deg,#4dd2ff22 0 2px,transparent 2px 6px);mix-blend-mode:screen}
.glitch-ov.on{display:block;animation:shake .2s infinite}
.glitch-ov.on::after{content:'SYSTEM FREEZE · menunggu pemulihan...';position:absolute;top:45%;width:100%;text-align:center;font-family:'Press Start 2P';font-size:14px;color:#4dd2ff;text-shadow:3px 0 var(--red)}
@keyframes shake{0%{transform:translate(0)}33%{transform:translate(-3px,2px)}66%{transform:translate(3px,-1px)}}
@media(max-width:640px){
  .hud-tl{width:46vw}.hud-tr{width:42vw}.feed{max-height:18vh;font-size:14px}
  .mission{font-size:14px}.ab{min-width:96px;font-size:7px;padding:7px}
  .actions{bottom:116px}.badge{font-size:7px}
}

/* modal */
#modal{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;background:#000a;padding:12px;backdrop-filter:blur(2px)}
#modal.show{display:flex}
.panel{background:var(--p1);border:2px solid var(--matcha);border-radius:10px;box-shadow:0 0 24px #9BC53D55;padding:20px;max-width:560px;width:100%;max-height:92vh;overflow:auto;position:relative;animation:pop .25s ease-out}
.panel::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:10px;background:repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px)}
.panel.wide{max-width:900px}
.panel.danger{border-color:var(--red);box-shadow:0 0 30px #FF4D5E66}
@keyframes pop{from{transform:scale(.9);opacity:0}}
.panel h2{font-family:'Press Start 2P';font-size:15px;color:var(--matcha);margin-bottom:10px;line-height:1.5}
.panel h2.r,.r{color:var(--red)}
.g{color:var(--matcha)}
.panel h4{font-family:'Press Start 2P';font-size:9px;color:var(--matcha2);margin:10px 0 6px}
.panel p{line-height:1.15;margin-bottom:8px}
.sub{color:var(--mut)}
.panel .btn{margin-top:10px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.cols{grid-template-columns:1fr}}
.check{padding-left:22px}
.check li{margin-bottom:4px}
.panel ul{padding-left:20px}
.alert-ico{width:46px;height:46px;background:var(--red);color:#fff;font-family:'Press Start 2P';font-size:22px;display:flex;align-items:center;justify-content:center;border-radius:8px;margin-bottom:10px;animation:blink 1s infinite}
.tip{background:#20281b;border-left:3px solid var(--matcha);padding:8px 10px;border-radius:4px;margin:10px 0;color:var(--matcha2)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.meet{display:grid;grid-template-columns:1.2fr 1fr;gap:12px}
@media(max-width:700px){.meet{grid-template-columns:1fr}}
.avatars{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.av{background:var(--p2);border:2px solid var(--line);border-radius:8px;padding:6px;color:var(--txt);font-size:16px;display:flex;flex-direction:column;align-items:center;position:relative}
.av img{width:40px;height:64px;image-rendering:pixelated}
.av:hover{border-color:var(--matcha)}
.av.voted{border-color:var(--red);background:#2a1a1c}
.av.fz img{filter:hue-rotate(160deg) saturate(2)}
.av.fz::before{content:'FROZEN';position:absolute;top:4px;font-family:'Press Start 2P';font-size:6px;color:#4dd2ff}
.av em{font-style:normal;color:var(--red);font-family:'Press Start 2P';font-size:9px;min-height:12px}
.chat{display:flex;flex-direction:column;background:#0b0d0c;border-radius:8px;border:1px solid var(--line);min-height:220px}
.log{flex:1;overflow:auto;padding:8px;font-size:17px;max-height:260px}
.log div{margin-bottom:4px}
.log b{font-weight:normal}
.chat-in{display:flex;gap:6px;padding:6px}
.chat-in input{flex:1;min-width:0;font-size:18px}
.chat-in .btn{margin:0;padding:8px}
.quiz-o{display:block;width:100%;text-align:left;background:var(--p2);border:2px solid var(--line);color:var(--txt);border-radius:8px;padding:10px;margin-bottom:6px;font-size:19px}
.quiz-o:hover{border-color:var(--matcha)}
.quiz-o.ok{border-color:var(--matcha);background:#20281b}
.quiz-o.no{border-color:var(--red);background:#2a1a1c}
.breakers{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:12px 0}
.brk{background:#0b0d0c;border:2px solid var(--line);border-radius:6px;color:var(--mut);padding:8px 0 6px;font-family:'Press Start 2P';font-size:8px}
.brk span{display:block;width:16px;height:30px;margin:0 auto 6px;background:#333;border-radius:3px;position:relative}
.brk span::after{content:'';position:absolute;left:2px;right:2px;height:12px;bottom:2px;background:var(--red);border-radius:2px;transition:.15s}
.brk.on span::after{bottom:16px;background:var(--matcha)}
.dual{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.term{background:#0b0d0c;border:1px solid var(--line);border-radius:8px;padding:10px}
.term .bar{height:14px;margin-top:10px}
.term .btn{width:100%;font-size:9px;user-select:none;-webkit-user-select:none;touch-action:none}
.lb{width:100%;border-collapse:collapse;font-size:18px}
.lb td{padding:4px 6px;border-bottom:1px solid var(--line)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:10px 0}
.stats div{background:var(--p2);padding:8px;border-radius:6px}
.stats b{display:block;font-family:'Press Start 2P';font-size:14px;color:var(--matcha);margin-top:4px}

/* PC */
#pc{position:fixed;inset:0;z-index:25;display:none;align-items:center;justify-content:center;background:radial-gradient(#2b2318,#0b0907);padding:10px}
#pc.show{display:flex}
.crt{background:var(--crt);border-radius:18px;padding:22px 22px 10px;box-shadow:inset -6px -6px 0 #c8bf9f,inset 6px 6px 0 #fff8e6,0 20px 60px #000;width:min(900px,100%);animation:pop .3s}
.crt-screen{background:#0f3a33;border:6px solid #2b2a24;border-radius:10px;height:min(560px,72vh);position:relative;overflow:hidden;display:flex;flex-direction:column;box-shadow:inset 0 0 60px #000a}
.crt-screen::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0002 0 2px,transparent 2px 4px);z-index:9}
.crt-base{display:flex;align-items:center;gap:10px;justify-content:flex-end;font-family:'Press Start 2P';font-size:8px;color:#8c8466;padding-top:8px}
.led{width:10px;height:10px;border-radius:50%;background:var(--matcha);box-shadow:0 0 8px var(--matcha)}
.os-bar{display:flex;justify-content:space-between;align-items:center;background:#0b0d0c;color:var(--matcha2);padding:4px 8px;font-size:18px;gap:8px}
.os-bar span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.os-x{font-family:'Press Start 2P';font-size:8px;background:var(--red);color:#fff;border:none;padding:6px 8px;border-radius:4px}
.desk{flex:1;padding:16px;display:grid;grid-template-columns:repeat(auto-fill,90px);grid-auto-rows:96px;gap:10px;align-content:start;background:radial-gradient(circle at 70% 70%,#1c5a4c,#0f3a33)}
.ico{background:none;border:none;color:#eaffd6;font-size:17px;display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:6px;padding:4px}
.ico:hover{background:#ffffff18}
.ico i{width:48px;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-style:normal;font-family:'Press Start 2P';font-size:18px;color:#0b0d0c;box-shadow:3px 3px 0 #0006}
.ico.hot i{animation:pulse .9s infinite;outline:2px dashed #fff}
.os-note{grid-column:1/-1;background:#0b0d0cbb;border:1px dashed var(--matcha);padding:8px;border-radius:6px;color:var(--matcha2);font-size:18px}
.win{position:absolute;inset:34px 14px 14px;background:#151a17;border:2px solid var(--matcha);border-radius:8px;display:flex;flex-direction:column;z-index:5;animation:pop .2s}
.win[hidden]{display:none}
.win-bar{display:flex;justify-content:space-between;align-items:center;background:var(--matcha);color:#10140c;font-family:'Press Start 2P';font-size:9px;padding:6px 8px}
.win-bar button{background:#10140c;color:var(--matcha);border:none;font-family:'Press Start 2P';font-size:9px;padding:4px 7px;border-radius:3px}
.win-body{flex:1;overflow:auto;padding:10px;position:relative;display:flex;flex-direction:column}
.mg-head{font-family:'Press Start 2P';font-size:9px;color:var(--matcha);margin-bottom:8px;line-height:1.5}
.mg-stats{color:var(--mut);margin-bottom:6px}
.mg-stats b{color:#fff}
.mg-fb{min-height:44px;color:var(--matcha2);margin-top:8px;font-size:18px}
.msg-pop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#e9e1c8;color:#2b2a24;border:3px solid #2b2a24;padding:14px;border-radius:6px;font-size:19px;z-index:8;max-width:80%;text-align:center;box-shadow:6px 6px 0 #0008}
/* swipe */
.swipe-area{position:relative;flex:1;min-height:220px;display:flex;align-items:center;justify-content:center}
.swipe-hint{position:absolute;top:50%;font-family:'Press Start 2P';font-size:9px;opacity:.5}
.swipe-hint.l{left:4px;color:var(--red)}.swipe-hint.r{right:4px;color:var(--matcha)}
.email-card{width:min(360px,72%);background:#f4f1e6;color:#2b2a24;border-radius:10px;padding:14px;box-shadow:0 10px 30px #0008;touch-action:none;user-select:none;cursor:grab;position:relative}
.ec-logo{width:36px;height:36px;border-radius:6px;color:#fff;font-family:'Press Start 2P';font-size:12px;display:flex;align-items:center;justify-content:center;float:left;margin-right:10px}
.ec-from{font-size:17px;word-break:break-all}
.ec-subj{font-size:21px;font-weight:bold;margin:8px 0;clear:both;color:#111}
.ec-body{font-size:18px;color:#555}
.ec-n{position:absolute;top:6px;right:10px;font-size:14px;color:#999}
.swipe-btns{display:flex;justify-content:space-between;gap:8px}
/* whack */
.whack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1;min-height:200px}
.cell{background:#0b0d0c;border:2px solid #263028;border-radius:8px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.mole{font-family:'Press Start 2P';font-size:9px;padding:12px 6px;border-radius:6px;animation:up .2s;user-select:none;cursor:pointer;text-align:center}
.mole.bad{background:var(--red);color:#fff;box-shadow:0 0 14px var(--red)}
.mole.safe{background:#2f5d8a;color:#dff}
@keyframes up{from{transform:translateY(40px)}}
/* cables */
.cable-box{position:relative;flex:1;min-height:240px;background:repeating-linear-gradient(90deg,#1b211d 0 18px,#171c19 18px 36px);border-radius:8px;display:flex;justify-content:space-between;padding:10px 20px;touch-action:none}
.cable-box svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cl,.cr{display:flex;flex-direction:column;justify-content:space-around;z-index:2}
.node{width:38px;height:28px;border-radius:5px;border:3px solid #0b0d0c;box-shadow:0 0 0 2px #444;cursor:pointer}
.node.done{box-shadow:0 0 0 2px var(--matcha),0 0 12px var(--matcha)}
.node.err{animation:shake .2s 3}
/* simon */
.keypad{display:grid;grid-template-columns:repeat(3,70px);gap:10px;justify-content:center;margin:10px auto}
.key{height:62px;border-radius:10px;background:#0b0d0c;border:2px solid #2f3a31;color:var(--matcha2);font-family:'Press Start 2P';font-size:16px}
.key.lit{background:var(--matcha);color:#10140c;box-shadow:0 0 24px var(--matcha)}
.edu{text-align:center;margin:auto;max-width:520px}
.edu h3{font-family:'Press Start 2P';font-size:13px;color:var(--matcha);margin-bottom:10px}
.edu h3.r{color:var(--red)}

#fade{position:fixed;inset:0;background:#000;pointer-events:none;opacity:0;z-index:40;transition:opacity .25s}
#fade.on{opacity:1}