:root{--navy:#071a3d;--cyan:#25d9ff;--orange:#ff9c24;--lime:#66ef8a;--violet:#9d67ff;--panel:rgba(8,25,58,.86)}
*{box-sizing:border-box;touch-action:manipulation}
html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Inter,Segoe UI,Arial,sans-serif;background:#061329;color:white}
button,select,input{font:inherit}
button{cursor:pointer;border:0}
.screen{display:none;width:100vw;height:100vh}.screen.active{display:block}
#home{background:radial-gradient(circle at top,#e9fbff,#9ccde4 60%,#16325c);overflow:auto}
.home-overlay{min-height:100%;display:grid;grid-template-columns:1.18fr .82fr;align-items:center;gap:2vw;padding:3vw}
.cover{width:100%;border-radius:28px;box-shadow:0 24px 70px rgba(0,18,52,.35)}
.glass{background:rgba(5,25,60,.88);border:2px solid rgba(255,255,255,.18);backdrop-filter:blur(18px);box-shadow:0 24px 70px rgba(0,0,0,.35)}
.home-panel{padding:2.4vw;border-radius:28px}.home-panel h1{font-size:clamp(30px,3.2vw,64px);margin:0;color:#fff}.home-panel p{font-size:clamp(15px,1.25vw,24px);color:#cdeeff}
.form-row{display:grid;grid-template-columns:1fr;gap:12px;margin:22px 0}.form-row label{font-weight:800;color:#8eeaff}.form-row select,.name-row input{width:100%;padding:14px;border-radius:14px;border:2px solid #2c5e89;background:#0b315a;color:white;margin-top:6px}
.name-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.primary,.secondary{width:100%;padding:16px;border-radius:16px;font-weight:900;margin-top:10px}.primary{background:linear-gradient(135deg,#ffb72c,#ff6c2c);color:#122242;box-shadow:0 8px 0 #9e3c14}.secondary{background:#163d6a;color:white;border:2px solid #4bdcff}
.reactor-zone{height:25vh;min-height:170px;background:linear-gradient(180deg,#0a2852,#071936);display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;padding:1vh 3vw;border-bottom:4px solid #21cbea}
.score-card{text-align:center}.score-card span{display:block;font-weight:900;font-size:clamp(18px,1.5vw,30px)}.score-card strong{display:block;font-size:clamp(48px,5vw,92px);line-height:.95}.score-card small{color:#7eeeff;font-weight:bold}
.p1c strong{color:#ff7b59}.p2c strong{color:#53bfff}
.reactor{height:100%;position:relative;display:flex;align-items:center;justify-content:center}.reactor-glow{position:absolute;width:45%;height:70%;border-radius:50%;background:radial-gradient(circle,#37e6ff88,transparent 70%);filter:blur(9px)}
.flask{position:relative;width:125px;height:135px;border:8px solid #d8fbff;border-top:0;border-radius:20px 20px 55px 55px;overflow:hidden;box-shadow:0 0 24px #33ddff}.flask:before{content:"";position:absolute;left:30px;top:-35px;width:48px;height:42px;border:8px solid #d8fbff;border-bottom:0}
.liquid{position:absolute;bottom:0;width:100%;height:55%;background:linear-gradient(135deg,#35efa5,#2bc9ff,#a14fff);transition:.35s}.liquid.success{height:90%;filter:brightness(1.5)}.liquid.error{background:#ff3b48}
.mission{position:absolute;left:66%;display:flex;flex-direction:column;gap:6px}.mission span{font-weight:900;color:#8eeeff}.mission b{font-size:clamp(28px,3vw,52px);color:#fff}
.workstations{height:71vh;display:grid;grid-template-columns:1fr 34px 1fr;background:#0a2347}
.station{position:relative;padding:1.1vw 1.5vw;overflow:hidden}.station1{background:linear-gradient(135deg,#341d35,#122d55)}.station2{background:linear-gradient(225deg,#113d5c,#172a5b)}
.station-head{display:flex;justify-content:space-between;align-items:center}.station-head h2{margin:.2vh 0;font-size:clamp(20px,2vw,36px)}.streak{padding:8px 12px;border-radius:30px;background:#07162e}
.challenge{height:calc(100% - 125px);background:rgba(3,15,38,.62);border:2px solid rgba(118,231,255,.28);border-radius:20px;padding:1.2vw;overflow:auto}.topic{display:inline-block;background:#25d9ff;color:#07203c;border-radius:20px;padding:5px 12px;font-weight:900}.challenge h3{font-size:clamp(18px,1.5vw,30px);margin:10px 0 14px}
.play-area{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answer-btn,.token{min-height:70px;border-radius:16px;background:#163f6b;color:#fff;border:2px solid #4edbff;font-weight:900;font-size:clamp(16px,1.25vw,25px);display:flex;align-items:center;justify-content:center;padding:10px}.answer-btn:active,.token:active{transform:scale(.96)}
.tray,.reactor-drop{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;min-height:90px;padding:12px;border-radius:16px}.tray{background:#0a2c4f}.reactor-drop{border:3px dashed #ffc24a;background:#38260d}.reactor-drop:before{content:"RACIK DI SINI";width:100%;text-align:center;color:#ffd77a;font-weight:900}
.token{min-width:72px;min-height:64px;background:linear-gradient(135deg,#743bd8,#1f82d8)}.token.selected{outline:4px solid #ffcf38;transform:translateY(-5px)}
.submit-mix{grid-column:1/-1;background:linear-gradient(135deg,#77f26f,#28d3af);color:#062b31;border-radius:15px;padding:13px;font-weight:900}
.powerups{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}.powerups button{padding:10px;border-radius:12px;background:#7d43d5;color:#fff;font-weight:900}.powerups button:disabled{opacity:.35}
.feedback{font-weight:800;color:#bcefff;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.divider{display:flex;align-items:center;justify-content:center;background:#07172e;border-left:2px solid #2cd9ff;border-right:2px solid #2cd9ff}.divider span{writing-mode:vertical-rl;font-size:24px;font-weight:1000;color:#ffbd31}
.smoke-overlay{display:none;position:absolute;top:25vh;bottom:4vh;width:calc(50% - 17px);z-index:10;background:radial-gradient(circle,#fff 0,#b8d1d4cc 35%,#71889bcc 70%);align-items:center;justify-content:center;user-select:none}.smoke-overlay.active{display:flex}.smoke-overlay:nth-of-type(1){left:0}.smoke-overlay:nth-of-type(2){right:0}.smoke-cloud{font-size:6vw;text-align:center}.smoke-cloud small{display:block;font-size:20px;color:#09233d;font-weight:900}
.magnetized{animation:magnet .25s alternate 8}@keyframes magnet{to{transform:translateX(35%) rotate(4deg) scale(.92)}}
footer{height:4vh;display:flex;align-items:center;justify-content:center;background:#031027;color:#8ddfff;font-weight:800;letter-spacing:.5px}
.result-screen{background:radial-gradient(circle,#22678c,#07162f);display:none;align-items:center;justify-content:center}.result-screen.active{display:flex}.result-card{width:min(680px,88vw);border-radius:30px;padding:45px;text-align:center}.result-icon{font-size:90px}.result-card h1{font-size:48px;margin:8px}.result-card p{font-size:22px;color:#c9f4ff}
@media(max-width:900px){.home-overlay{grid-template-columns:1fr}.cover{max-height:43vh;object-fit:cover}.home-panel{padding:24px}.reactor-zone{grid-template-columns:1fr 1.5fr 1fr}.mission{left:70%}.flask{transform:scale(.8)}}