@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-deep: #050b14;--bg-card: #0a1525;--bg-card2: #0e1d30;--teal: #4ECDC4;--teal-dim: #2a8a83;--gold: #FFE566;--red: #FF5555;--white: #e8f4f8;--muted: rgba(232, 244, 248, .4);--font-ui: "Orbitron", "Share Tech Mono", monospace;--font-mono: "Share Tech Mono", "Courier New", monospace}html,body,#root{overflow:hidden}body{background:var(--bg-deep);color:var(--white);font-family:var(--font-mono);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}.app-root{display:flex;align-items:center;justify-content:center;overflow:hidden}.level-select{width:min(480px,100vw);display:flex;flex-direction:column;gap:0;overflow-y:auto;overflow-x:hidden;padding:0 0 24px;scrollbar-width:thin;scrollbar-color:var(--teal-dim) transparent}.level-select::-webkit-scrollbar{width:4px}.level-select::-webkit-scrollbar-thumb{background:var(--teal-dim);border-radius:2px}.ls-header{background:linear-gradient(180deg,#091420 0%,transparent 100%);padding:32px 24px 20px;text-align:center;position:sticky;top:0;z-index:10}.ls-title{font-family:var(--font-ui);font-size:clamp(28px,8vw,42px);font-weight:900;letter-spacing:6px;color:var(--white);text-shadow:0 0 30px rgba(78,205,196,.6)}.ls-title-icon{margin-right:8px}.ls-title-accent{color:var(--teal)}.ls-subtitle{font-size:11px;letter-spacing:4px;color:var(--muted);margin-top:4px;text-transform:uppercase}.ls-total-stars{display:inline-flex;align-items:center;gap:6px;margin-top:12px;background:#4ecdc41a;border:1px solid rgba(78,205,196,.25);border-radius:20px;padding:4px 16px}.ls-star-icon{color:var(--gold);font-size:16px}.ls-star-count{font-family:var(--font-ui);font-weight:700;font-size:18px;color:var(--gold)}.ls-star-max{color:var(--muted);font-size:13px}.ls-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0 16px;flex:1}.level-card{background:var(--bg-card);border:1.5px solid rgba(255,255,255,.08);border-radius:16px;padding:18px 12px 14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;overflow:hidden;transition:transform .15s,border-color .15s,box-shadow .15s}.level-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--accent, var(--teal)) 0%,transparent 60%);opacity:.08;pointer-events:none;transition:opacity .15s}.level-card:hover:not(:disabled):before{opacity:.15}.level-card:hover:not(:disabled){transform:translateY(-2px);border-color:var(--accent, var(--teal));box-shadow:0 8px 24px #0006,0 0 20px #4ecdc41f}.level-card:active:not(:disabled){transform:translateY(0)}.level-card--locked{opacity:.45;cursor:not-allowed}.level-card--gold{border-color:#ffe56659}.level-card--gold:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,229,102,.12) 0%,transparent 70%);pointer-events:none}.lc-num{position:absolute;top:10px;left:12px;font-family:var(--font-ui);font-size:10px;font-weight:700;color:var(--muted);letter-spacing:1px}.lc-icon{font-size:28px;margin-bottom:2px}.lc-name{font-family:var(--font-ui);font-size:11px;font-weight:700;color:var(--white);text-align:center;letter-spacing:1px}.lc-sub{font-size:10px;color:var(--muted);letter-spacing:1px}.lc-gate{font-size:9px;color:#f97316;letter-spacing:.5px;margin-top:2px;text-align:center;line-height:1.3}.ls-tip{text-align:center;font-size:10px;color:#fff3;letter-spacing:1px;padding:16px 24px 0;line-height:1.6}.star-display{display:flex;gap:3px;justify-content:center;margin-top:6px}.star{color:#ffffff2e;font-size:16px;transition:color .2s,text-shadow .2s}.star.star-on{color:var(--gold);text-shadow:0 0 10px rgba(255,229,102,.7)}.game-root{width:min(768px,100vw);height:100vh;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden}.hud{width:100%;display:flex;align-items:center;justify-content:space-between;padding:10px 12px 6px;gap:8px;background:linear-gradient(180deg,rgba(5,11,20,.95) 0%,transparent 100%);position:relative;z-index:5;flex-shrink:0}.hud-back{background:#4ecdc41a;border:1px solid rgba(78,205,196,.3);color:var(--teal);font-family:var(--font-mono);font-size:10px;letter-spacing:1px;padding:6px 10px;border-radius:8px;cursor:pointer;transition:background .15s;white-space:nowrap}.hud-back:hover{background:#4ecdc433}.hud-target,.hud-score,.hud-level-badge{display:flex;flex-direction:column;align-items:center;gap:1px}.hud-lbl{font-size:8px;letter-spacing:2px;color:var(--muted);text-transform:uppercase}.hud-big{font-family:var(--font-ui);font-size:22px;font-weight:700;color:var(--white);line-height:1}.hud-target .hud-big{color:var(--teal);text-shadow:0 0 12px rgba(78,205,196,.5)}.stars-bar{width:100%;display:flex;align-items:center;justify-content:center;gap:16px;padding:0 12px 6px;flex-shrink:0}.star-slot{display:flex;flex-direction:column;align-items:center;gap:1px}.star-slot .star{font-size:18px}.hud-controls{display:flex;gap:6px;align-items:center}.hud-icon-btn{background:#ffffff12;border:1px solid rgba(255,255,255,.15);border-radius:8px;color:#fff;font-size:18px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;padding:0}.hud-icon-btn:hover{background:#4ecdc42e;border-color:#4ecdc4}.hud-pause-btn{font-size:14px}.star-thresh{font-size:7px;color:var(--muted);letter-spacing:0}.miss-hearts{display:flex;gap:3px;align-items:center}.miss-heart{font-size:18px;color:var(--teal);text-shadow:0 0 8px rgba(78,205,196,.5);transition:color .2s,text-shadow .2s}.miss-heart--out{color:var(--red);text-shadow:0 0 10px rgba(255,85,85,.7)}.pops-info,.queue-info{display:flex;flex-direction:column;align-items:center;gap:1px}.pops-count,.queue-count{font-family:var(--font-ui);font-size:16px;font-weight:700;color:var(--white);line-height:1}.pops-lbl,.queue-lbl{font-size:7px;color:var(--muted);letter-spacing:2px}.game-canvas{display:block;flex-shrink:0;cursor:crosshair;width:min(768px,100vw);height:auto;aspect-ratio:1 / 1;touch-action:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#050b14d1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:20;animation:fade-in .3s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.overlay-card{background:var(--bg-card2);border:1.5px solid rgba(78,205,196,.25);border-radius:20px;padding:32px 36px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;box-shadow:0 24px 64px #00000080,0 0 40px #4ecdc414;animation:slide-up .35s cubic-bezier(.34,1.56,.64,1);max-width:320px;width:88vw}@keyframes slide-up{0%{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}.overlay-icon{font-size:48px;line-height:1}.overlay-level-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;opacity:.85;margin-top:2px}.overlay-title{font-family:var(--font-ui);font-size:22px;font-weight:900;letter-spacing:3px;color:var(--white);text-shadow:0 0 20px rgba(78,205,196,.4)}.overlay-stars{display:flex;gap:10px}.overlay-star{font-size:32px;color:#ffffff26}.overlay-star.star-on{color:var(--gold);text-shadow:0 0 16px rgba(255,229,102,.8);animation:star-pop .4s cubic-bezier(.34,1.56,.64,1) both}.overlay-star:nth-child(2){animation-delay:.12s}.overlay-star:nth-child(3){animation-delay:.24s}@keyframes star-pop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.overlay-stats{display:flex;gap:24px}.stat-item{display:flex;flex-direction:column;align-items:center;gap:2px}.stat-val{font-family:var(--font-ui);font-size:20px;font-weight:700;color:var(--white)}.stat-lbl{font-size:9px;color:var(--muted);letter-spacing:2px}.stat-item.highlight .stat-val{color:var(--gold);text-shadow:0 0 10px rgba(255,229,102,.6)}.overlay-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.btn-retry,.btn-next,.btn-levels{padding:10px 18px;border-radius:10px;font-family:var(--font-mono);font-size:12px;letter-spacing:1px;cursor:pointer;border:1.5px solid;transition:transform .12s,box-shadow .12s,background .12s}.btn-retry,.btn-next,.btn-levels{font-weight:600}.btn-retry:hover,.btn-next:hover,.btn-levels:hover{transform:translateY(-1px)}.btn-retry:active,.btn-next:active,.btn-levels:active{transform:translateY(0)}.btn-retry{background:#4ecdc41f;border-color:#4ecdc480;color:var(--teal)}.btn-retry:hover{background:#4ecdc438;box-shadow:0 4px 16px #4ecdc433}.btn-next{background:#ffe5661f;border-color:#ffe56680;color:var(--gold)}.btn-next:hover{background:#ffe56638;box-shadow:0 4px 16px #ffe56633}.btn-levels{background:#ffffff0d;border-color:#fff3;color:var(--muted)}.btn-levels:hover{background:#ffffff1a}.dev-panel{position:absolute;top:10px;right:10px;z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:6px}.dev-toggle{background:#ffb40026;border:1px solid rgba(255,180,0,.45);color:#ffb400;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:1.5px;padding:5px 10px;border-radius:8px;cursor:pointer;transition:background .12s}.dev-toggle:hover{background:#ffb40047}.dev-levels{background:#081220f5;border:1px solid rgba(255,180,0,.25);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:3px;max-height:72vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,180,0,.3) transparent;box-shadow:0 8px 32px #0009;animation:dev-drop .15s ease}@keyframes dev-drop{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.dev-lvl-btn{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:7px;border:1px solid transparent;background:transparent;cursor:pointer;text-align:left;transition:background .1s,border-color .1s;min-width:180px}.dev-lvl-btn:hover{background:#ffffff0f;border-color:var(--lc, rgba(255, 180, 0, .3))}.dev-lvl-btn--active{background:#ffb4001a;border-color:#ffb40080}.dev-lvl-num{font-family:var(--font-ui);font-size:11px;font-weight:700;color:var(--lc, #FFB400);width:16px;text-align:center;flex-shrink:0}.dev-lvl-name{font-family:var(--font-mono);font-size:11px;color:var(--white);flex:1}.dev-lvl-sub{font-size:9px;color:var(--muted);white-space:nowrap}.ls-mastery-btn{margin-top:10px;background:#4ecdc41a;border:1px solid rgba(78,205,196,.35);border-radius:10px;color:var(--teal);font-family:var(--font-mono);font-size:13px;padding:7px 18px;cursor:pointer;letter-spacing:.04em;transition:background .15s,border-color .15s}.ls-mastery-btn:hover{background:#4ecdc438;border-color:var(--teal)}.mastery-root{width:min(504px,100vw);height:100vh;display:flex;flex-direction:column;gap:10px;padding:12px 14px 8px;overflow-y:auto;overflow-x:hidden}.mastery-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.mastery-title{font-family:var(--font-ui);font-size:15px;letter-spacing:.08em;color:var(--teal);text-shadow:0 0 12px rgba(78,205,196,.5);flex:1;text-align:center}.clear-btn{background:#ff55551a;border:1px solid rgba(255,85,85,.3);border-radius:8px;color:var(--red);font-family:var(--font-mono);font-size:11px;padding:5px 10px;cursor:pointer;white-space:nowrap;transition:background .15s}.clear-btn:hover{background:#ff555538}.confirm-clear{display:flex;align-items:center;gap:8px;background:#ff55551f;border:1px solid rgba(255,85,85,.35);border-radius:10px;padding:8px 12px;font-size:12px;color:#faa}.btn-confirm-yes{background:var(--red);border:none;border-radius:6px;color:#fff;font-size:11px;padding:4px 10px;cursor:pointer}.btn-confirm-no{background:#ffffff14;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:var(--white);font-size:11px;padding:4px 10px;cursor:pointer}.mastery-tabs{display:flex;gap:6px}.mastery-tab{flex:1;background:#ffffff0d;border:1px solid rgba(255,255,255,.12);border-radius:8px;color:var(--muted);font-family:var(--font-mono);font-size:12px;padding:7px;cursor:pointer;transition:all .15s}.mastery-tab--active{background:#4ecdc426;border-color:var(--teal);color:var(--teal)}.mastery-filters{display:flex;flex-wrap:wrap;gap:5px}.filter-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:20px;color:var(--muted);font-family:var(--font-mono);font-size:10px;padding:3px 10px;cursor:pointer;transition:all .14s}.filter-btn--active{background:color-mix(in srgb,var(--fb-accent, var(--teal)) 20%,transparent);border-color:var(--fb-accent, var(--teal));color:var(--fb-accent, var(--teal))}.mastery-stats-row{display:flex;gap:6px;justify-content:space-between}.mstat{display:flex;flex-direction:column;align-items:center;gap:1px;flex:1;background:#ffffff0a;border-radius:8px;padding:6px 4px}.mstat-val{font-family:var(--font-ui);font-size:16px;font-weight:700;color:var(--white)}.mstat-lbl{font-size:8px;color:var(--muted);letter-spacing:.04em}.mastery-summary-bar{height:8px;border-radius:4px;overflow:hidden;display:flex;background:#1a2a3a}.summary-segment{height:100%;transition:width .4s}.fact-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:5px}.fact-grid-empty{grid-column:1/-1;text-align:center;color:var(--muted);font-size:12px;padding:20px}.fact-cell{border-radius:8px;padding:6px 4px 4px;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:default;border:1px solid rgba(255,255,255,.06);transition:transform .1s}.fact-cell:hover{transform:scale(1.07);z-index:2;position:relative}.fact-eq{font-family:var(--font-mono);font-size:11px;color:var(--fc-text, #aaa);letter-spacing:-.02em}.fact-op{margin:0 1px;opacity:.7}.fact-res{font-family:var(--font-ui);font-size:14px;font-weight:700;color:var(--fc-text, #aaa)}.fact-pct{font-size:8px;color:var(--fc-text, #aaa);opacity:.6}.mastery-legend{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.legend-item{display:flex;align-items:center;gap:5px;font-size:10px}.legend-swatch{width:12px;height:12px;border-radius:3px}.mastery-tip{font-size:10px;color:var(--muted);text-align:center;padding-bottom:8px}.hud-practice-badge{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;color:var(--gold);background:#ffe5661a;border:1px solid rgba(255,229,102,.35);border-radius:6px;padding:3px 7px;white-space:nowrap}