:root{--bg:#0b1120;--panel:#111a30;--panel-2:#0f172a;--border:#1e293b;--text:#e2e8f0;--muted:#94a3b8;--accent:#38bdf8;--accent-2:#818cf8;--green:#22c55e;--red:#ef4444;--blue:#3b82f6;--radius:14px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:radial-gradient(1200px 800px at 50% 0%, #152347 0%, var(--bg) 60%);color:var(--text);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;font-family:Segoe UI,system-ui,-apple-system,Roboto,sans-serif;overflow:hidden}.app{flex-direction:column;gap:0;width:100dvw;height:100dvh;display:flex}.header{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f172abf;flex:none;justify-content:space-between;align-items:center;padding:14px 28px;display:flex}.header-title{align-items:center;gap:16px;display:flex}.title-icon{filter:drop-shadow(0 0 12px #38bdf899);font-size:42px;line-height:1}.header-title h1{letter-spacing:.5px;background:linear-gradient(90deg, var(--accent), var(--accent-2));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:clamp(22px,3.4vh,34px);font-weight:700}.header-title p{color:var(--muted);margin-top:2px;font-size:clamp(12px,1.8vh,16px)}.quiz-toggle{border:1px solid var(--accent);color:var(--accent);cursor:pointer;background:#38bdf81f;border-radius:999px;padding:12px 24px;font-size:clamp(14px,2vh,18px);font-weight:600;transition:all .2s}.quiz-toggle:hover,.quiz-toggle.active{background:var(--accent);color:#03111f}.main{flex:auto;grid-template-columns:300px 1fr;gap:0;min-height:0;display:grid}.left{border-right:1px solid var(--border);background:#0f172a80;flex-direction:column;gap:12px;padding:16px;display:flex;overflow-y:auto}.menu-panel,.info-panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.menu-title{color:var(--accent);margin-bottom:12px;font-size:clamp(14px,2vh,18px);font-weight:700}.menu-group{margin-bottom:14px}.menu-group-label{color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-size:clamp(12px,1.7vh,15px);font-weight:600}.menu-group-buttons{flex-wrap:wrap;gap:8px;display:flex}.orbital-btn{border:1.5px solid var(--border);background:var(--panel-2);min-width:64px;min-height:52px;color:var(--text);cursor:pointer;touch-action:manipulation;border-radius:10px;padding:8px 16px;font-size:clamp(13px,1.9vh,16px);font-weight:600;transition:all .18s}.orbital-btn:hover{border-color:var(--accent);color:var(--accent)}.orbital-btn.active{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#03111f;border-color:#0000;box-shadow:0 0 18px #38bdf866}.info-title{color:var(--text);margin-bottom:12px;font-size:clamp(16px,2.4vh,22px);font-weight:700}.quantum-grid{grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px;display:grid}.q-item{background:var(--panel-2);border:1px solid var(--border);text-align:center;border-radius:8px;padding:8px 4px}.q-label{color:var(--muted);font-size:clamp(10px,1.4vh,12px);display:block}.q-value{color:var(--accent);font-size:clamp(16px,2.2vh,20px);font-weight:700;display:block}.legend{color:var(--muted);flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;font-size:clamp(11px,1.5vh,13px);display:flex}.legend-dot{border-radius:50%;width:14px;height:14px;display:inline-block}.legend-dot.plus{background:var(--green);box-shadow:0 0 8px var(--green)}.legend-dot.minus{background:var(--red);box-shadow:0 0 8px var(--red)}.info-desc{color:var(--text);font-size:clamp(12px,1.7vh,15px);line-height:1.5}.info-keyword{color:#a5b4fc;background:#818cf826;border:1px solid #818cf866;border-radius:999px;margin-top:10px;padding:6px 12px;font-size:clamp(11px,1.5vh,13px);font-weight:600;display:inline-block}.stage{flex-direction:column;min-height:0;display:flex;position:relative}.stage-header{flex-wrap:wrap;flex:none;justify-content:space-between;align-items:center;gap:12px;padding:12px 24px;display:flex}.orbital-label{color:var(--text);text-shadow:0 0 24px #38bdf873;letter-spacing:1px;font-size:clamp(26px,5vh,48px);font-weight:800}.sub{vertical-align:sub;letter-spacing:.4px;font-size:.62em;line-height:0}.orbital-label .sub{font-size:.58em}.orbital-btn .sub,.info-title .sub,.quiz-opt .sub{font-size:.68em}.view-toggle{background:var(--panel);border:1px solid var(--border);border-radius:999px;gap:8px;padding:5px;display:flex}.view-btn{color:var(--muted);cursor:pointer;touch-action:manipulation;background:0 0;border:none;border-radius:999px;padding:10px 20px;font-size:clamp(13px,1.9vh,16px);font-weight:600;transition:all .18s}.view-btn:hover{color:var(--text)}.view-btn.active{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#03111f}.nodal-toggle{border:1.5px solid var(--border);background:var(--panel);color:var(--muted);cursor:pointer;white-space:nowrap;border-radius:999px;padding:8px 14px;font-size:clamp(11px,1.7vh,13px);font-weight:700;transition:all .18s}.nodal-toggle.active{color:#a5b4fc;background:#a5b4fc1f;border-color:#a5b4fc}.stage-hint{color:var(--muted);white-space:nowrap;font-size:clamp(11px,1.6vh,14px)}.orbital-canvas{touch-action:none;cursor:grab;flex:auto;min-height:0}.orbital-canvas:active{cursor:grabbing}.quiz-card{border:1px solid var(--accent);border-radius:var(--radius);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;background:#0f172af2;width:min(420px,38vw);padding:20px;animation:.25s ease-out slideIn;position:absolute;top:72px;right:24px;box-shadow:0 16px 48px #00000080}@keyframes slideIn{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}.quiz-badge{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#03111f;border-radius:999px;margin-bottom:12px;padding:4px 12px;font-size:clamp(11px,1.5vh,13px);font-weight:700;display:inline-block}.quiz-q{margin-bottom:14px;font-size:clamp(14px,2vh,18px);font-weight:600;line-height:1.4}.quiz-options{flex-direction:column;gap:8px;display:flex}.quiz-opt{border:1.5px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer;text-align:left;touch-action:manipulation;border-radius:10px;padding:12px 16px;font-size:clamp(13px,1.9vh,16px);font-weight:600;transition:all .15s}.quiz-opt:hover:not(:disabled){border-color:var(--accent)}.quiz-opt.correct{border-color:var(--green);color:var(--green);background:#22c55e2e}.quiz-opt.wrong{border-color:var(--red);color:var(--red);background:#ef44442e}.quiz-opt:disabled{cursor:default}.quiz-feedback{color:var(--text);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;font-size:clamp(13px,1.9vh,16px);font-weight:600;display:flex}.quiz-next{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#03111f;cursor:pointer;border:none;border-radius:999px;padding:8px 16px;font-size:clamp(12px,1.7vh,14px);font-weight:700}.quiz-next:disabled{opacity:.5;cursor:not-allowed}.quiz-secondary{border:1.5px solid var(--border);color:var(--muted);cursor:pointer;background:0 0;border-radius:999px;padding:8px 16px;font-size:clamp(12px,1.7vh,14px);font-weight:600}.quiz-tabs{background:var(--panel-2);border-radius:999px;gap:8px;margin-bottom:16px;padding:4px;display:flex;position:relative}.quiz-tab{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:999px;flex:1;padding:8px 12px;font-size:clamp(12px,1.7vh,14px);font-weight:700;transition:all .18s}.quiz-tab.active{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#03111f}.quiz-close{border:1px solid var(--border);background:var(--panel-2);width:32px;height:32px;color:var(--muted);cursor:pointer;border-radius:50%;flex:0 0 32px}.quiz-progress{color:var(--muted);justify-content:space-between;margin-bottom:6px;font-size:clamp(11px,1.6vh,13px);display:flex}.quiz-score-mini{color:var(--accent);font-weight:700}.quiz-progress-bar{background:var(--panel-2);border:1px solid var(--border);border-radius:999px;height:6px;margin-bottom:14px;overflow:hidden}.quiz-progress-fill{background:linear-gradient(90deg, var(--accent), var(--accent-2));height:100%;transition:width .3s}.quiz-progress-fill.comp{background:linear-gradient(90deg,#22c55e,#38bdf8)}.quiz-result{text-align:center;padding:12px 0}.quiz-score-big{color:var(--text);margin:12px 0 8px;font-size:clamp(28px,5vh,42px);font-weight:800}.quiz-score-detail{color:var(--muted);margin-bottom:16px;font-size:clamp(13px,1.9vh,16px)}.quiz-result-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.quiz-comp-header{justify-content:space-between;margin-bottom:8px;font-weight:700;display:flex}.quiz-timer{color:#f59e0b;font-size:clamp(14px,2vh,18px)}.quiz-comp-hint{color:var(--muted);text-align:center;margin-top:10px;font-size:clamp(11px,1.6vh,13px)}.quiz-input{border:1.5px solid var(--border);background:var(--panel-2);width:100%;color:var(--text);border-radius:10px;outline:none;padding:12px 16px;font-size:clamp(13px,1.9vh,16px)}.quiz-input:focus{border-color:var(--accent)}.quiz-comp-form{gap:10px;margin:14px 0;display:flex}.leaderboard{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;margin:12px 0;padding:12px}.leaderboard-title{color:var(--accent);margin-bottom:8px;font-size:clamp(13px,1.9vh,15px);font-weight:700}.leaderboard-empty{color:var(--muted);text-align:center;padding:8px;font-size:clamp(12px,1.7vh,14px)}.leaderboard-list{flex-direction:column;gap:6px;list-style:none;display:flex}.leaderboard-item{background:var(--panel);border-radius:8px;align-items:center;gap:10px;padding:8px 10px;font-size:clamp(13px,1.9vh,15px);display:flex}.lb-rank{color:var(--accent);min-width:28px;font-weight:800}.lb-name{flex:1;font-weight:600}.lb-score{color:var(--green);font-weight:800}.footer{text-align:center;color:var(--muted);border-top:1px solid var(--border);background:#0f172abf;flex:none;padding:10px 20px;font-size:clamp(11px,1.6vh,14px)}.left::-webkit-scrollbar{width:8px}.left::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.nav-links{gap:10px;display:flex}.nav-link{border:1.5px solid var(--border);color:var(--muted);background:#0f172a99;border-radius:999px;padding:8px 18px;font-size:clamp(12px,1.8vh,15px);font-weight:700;text-decoration:none}.nav-link.active{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#03111f;border-color:#0000}.mode-toggle{background:var(--panel-2);border:1px solid var(--border);border-radius:999px;gap:8px;padding:4px;display:flex}.mode-btn{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:999px;flex:1;padding:8px 10px;font-size:clamp(11px,1.6vh,13px);font-weight:700}.mode-btn.active{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#03111f}.atom-grid{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}.atom-btn{border:1.5px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer;touch-action:manipulation;border-radius:8px;flex-direction:column;align-items:center;padding:8px 4px;display:flex}.atom-btn.active{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#03111f;border-color:#0000}.atom-num{opacity:.7;font-size:9px}.atom-sym{font-size:15px;font-weight:800}.atom-config{align-items:baseline;gap:8px;margin:8px 0;display:flex}.atom-config-label{color:var(--muted);font-size:12px}.atom-config-value{color:var(--accent);font-size:13px;font-weight:700}.atom-orbital-list{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.atom-orb-chip{border:1px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer;border-radius:999px;padding:6px 10px;font-size:13px;font-weight:600}.atom-orb-chip:hover{border-color:var(--accent)}.atom-hint{color:var(--muted);margin-top:8px;font-size:11px}.wave-panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);margin:12px 16px;padding:14px}.wave-header{flex-wrap:wrap;justify-content:space-between;gap:12px;margin-bottom:12px;display:flex}.wave-title{color:var(--accent);font-size:15px;font-weight:800}.wave-formula{color:var(--muted);margin-top:2px;font-family:monospace;font-size:12px}.wave-atom-badge{border:1px solid var(--accent);color:var(--accent);background:#38bdf81f;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700}.wave-body{grid-template-columns:1fr 1fr 1fr;gap:12px;display:grid}.wave-card{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:10px}.wave-card.text{flex-direction:column;gap:8px;display:flex}.wave-card-title{color:var(--text);margin-bottom:6px;font-size:13px;font-weight:700}.wave-svg{border-radius:8px;width:100%;height:auto}.wave-slider{width:100%;accent-color:var(--accent);margin-top:8px}.wave-caption{color:var(--muted);margin-top:6px;font-size:11px}.wave-desc{font-size:13px;line-height:1.4}.wave-desc.muted{color:var(--muted);font-size:12px}.wave-legend{color:var(--muted);align-items:center;gap:6px;margin-top:4px;font-size:11px;display:flex}.battle-page{flex-direction:column;flex:1;gap:10px;min-height:0;padding:12px 16px;display:flex}.battle-hud{grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;display:grid}.battle-player{background:var(--panel);border:1.5px solid var(--border);border-radius:12px;padding:10px 14px;transition:all .2s}.battle-player.active{border-color:var(--accent);box-shadow:0 0 14px #38bdf859}.battle-player.hit{border-color:var(--red);animation:.5s shake}.bp-head{font-size:14px;font-weight:800}.bp-hearts{margin:6px 0}.heart{margin-right:2px;font-size:18px}.heart.alive{color:var(--red);text-shadow:0 0 8px var(--red)}.heart.dead{color:#334155}.bp-ammo{color:var(--muted);font-size:12px}.ammo-dot{margin-right:2px}.ammo-dot.on{color:#f59e0b}.ammo-dot.off{color:#334155}.battle-center-info{text-align:center}.turn-badge{color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-weight:800}.ammo-text{color:var(--muted);margin-top:4px;font-size:11px}.battle-arena{border:1px solid var(--border);background:radial-gradient(800px 300px at 50% 20%,#1e293b,#0b1120 70%);border-radius:12px;flex:0 0 180px;justify-content:space-between;align-items:center;padding:0 40px;display:flex;position:relative;overflow:hidden}.astro{filter:drop-shadow(0 4px 12px #0009);font-size:56px;transition:transform .2s}.astro.turn{transform:scale(1.08)}.astro.shake{animation:.5s shake}.projectile{color:#f59e0b;text-shadow:0 0 10px #f59e0b;font-size:22px;animation:.5s linear forwards shoot;position:absolute;top:50%}.projectile.p1{animation-name:shoot-p1;left:90px}.projectile.p2{animation-name:shoot-p2;left:calc(100% - 90px)}@keyframes shoot-p1{0%{left:90px}to{left:calc(100% - 90px)}}@keyframes shoot-p2{0%{left:calc(100% - 90px)}to{left:90px}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.stars{opacity:.5;pointer-events:none;background-image:radial-gradient(1px 1px at 20% 30%,#fff,#0000),radial-gradient(1px 1px at 60% 20%,#fff,#0000),radial-gradient(1px 1px at 80%,#fff,#0000),radial-gradient(1px 1px at 40% 70%,#fff,#0000);position:absolute;inset:0}.battle-question-area{background:var(--panel);border:1px solid var(--border);border-radius:12px;min-height:180px;padding:16px}.battle-q{margin-bottom:12px;font-size:clamp(16px,2.2vh,20px);font-weight:700}.battle-options{grid-template-columns:1fr 1fr;gap:10px;display:grid}.battle-opt{border:1.5px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer;border-radius:10px;min-height:58px;padding:14px 16px;font-size:clamp(13px,1.9vh,16px);font-weight:700}.battle-opt:hover:not(:disabled){border-color:var(--accent)}.battle-opt.correct{border-color:var(--green);color:var(--green);background:#22c55e2e}.battle-opt.wrong{border-color:var(--red);color:var(--red);background:#ef44442e}.reload-overlay{text-align:center;padding:20px}.reload-big{color:#f59e0b;font-size:18px;font-weight:800}.reload-count{color:var(--text);margin:8px 0;font-size:48px;font-weight:900}.reload-hint{color:var(--muted)}.battle-intro{flex:1;place-items:center;padding:24px;display:grid}.battle-intro-card{background:var(--panel);border:1px solid var(--border);text-align:center;border-radius:16px;max-width:520px;padding:28px}.battle-intro-icon{margin-bottom:12px;font-size:48px}.battle-intro-card h2{margin-bottom:12px;font-size:22px}.battle-rules{text-align:left;color:var(--muted);gap:6px;margin:16px 0;font-size:14px;display:grid}.battle-start{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#03111f;cursor:pointer;border:none;border-radius:999px;padding:12px 24px;font-size:16px;font-weight:800}.battle-stats{color:var(--muted);margin:12px 0}.gelombang-page{flex:1;grid-template-columns:260px 1fr 340px;gap:12px;min-height:0;padding:12px 16px;display:grid;overflow-y:auto}.gelombang-left,.gelombang-center,.gelombang-right{flex-direction:column;gap:12px;display:flex}.orbital-chip-grid{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.chip{border:1.5px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer;border-radius:8px;padding:8px 6px;font-size:13px;font-weight:700}.chip.active{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#03111f;border-color:#0000}.chip.small{padding:6px 8px;font-size:12px}.gelombang-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px}.gelombang-card .card-title{color:var(--accent);margin-bottom:8px;font-size:13px;font-weight:800}.gelombang-card .caption{color:var(--muted);margin-top:6px;font-size:11px}.formula-box{background:var(--panel-2);border:1px solid var(--border);color:var(--text);text-align:center;border-radius:8px;padding:8px 10px;font-family:monospace;font-size:12px}.lit-box{color:var(--muted);background:#38bdf814;border:1px solid #38bdf833;border-radius:8px;margin-top:12px;padding:8px 10px;font-size:11px}.battle-page.simultaneous{gap:12px}.battle-page.simultaneous .battle-arena.large{flex:0 0 200px}.astro-body{animation:2.2s ease-in-out infinite float;display:inline-block;position:relative}.astro-p2 .astro-body{animation-delay:1.1s}.astro-helmet{filter:drop-shadow(0 6px 14px #0009);font-size:64px}.astro-flame{font-size:18px;animation:.18s infinite alternate flicker;position:absolute;bottom:-8px;left:50%;transform:translate(-50%)}.astro-glow{pointer-events:none;border:2px solid #38bdf880;border-radius:50%;animation:1.4s infinite pulse;position:absolute;inset:-6px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes flicker{0%{transform:translate(-50%)scaleY(1)}to{transform:translate(-50%)scaleY(1.2)}}@keyframes pulse{0%{opacity:.6;transform:scale(.95)}to{opacity:0;transform:scale(1.25)}}.center-vs{color:#ffffffd9;border:1px solid var(--border);background:#0f172ad9;border-radius:999px;padding:6px 14px;font-size:22px;font-weight:900;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.battle-dual{grid-template-columns:1fr 1fr;gap:12px;display:grid}.battle-panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:10px;padding:12px;display:flex}.battle-panel.reloading{opacity:.6}.panel-question{flex:1}.battle-options.single{grid-template-columns:1fr}.battle-options.single .battle-opt{min-height:48px;padding:10px 12px}@media (width<=900px){.main{grid-template-columns:1fr}.left{flex-direction:row;overflow-x:auto}.menu-panel,.info-panel{min-width:320px}.stage-header{flex-wrap:wrap}.gelombang-page,.battle-dual,.wave-body{grid-template-columns:1fr}}