*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0f0e17;--fg:#fffffe;--dim:#94a1b2}
body{font-family:'JetBrains Mono',monospace;background:var(--bg);color:var(--fg);user-select:none;min-height:100vh}
.screen{min-height:100vh;display:flex;align-items:center;justify-content:center}

/* MENU */
.menu-wrap{display:flex;flex-direction:column;align-items:center;gap:1.2rem;animation:fadeUp .5s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.menu-icon{font-size:5rem;animation:bob 1.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:none}50%{transform:translateY(-12px)}}
.menu-title{font-size:3rem;font-weight:800;letter-spacing:.15em}
.menu-sub{font-size:.9rem;color:var(--dim)}
.btn-start{margin-top:1rem;border:none;border-radius:1.2rem;padding:1.2rem 3.5rem;font-family:inherit;font-size:1.4rem;font-weight:700;color:#0f0e17;cursor:pointer;background:linear-gradient(135deg,#c8ff00,#a3e635);box-shadow:0 6px 30px rgba(200,255,0,.3);transition:transform .15s,box-shadow .2s}
.btn-start:hover{transform:scale(1.05);box-shadow:0 8px 40px rgba(200,255,0,.5)}
.btn-start:active{transform:scale(.95)}
.menu-tips{display:flex;gap:1.5rem;margin-top:.8rem;font-size:.75rem;color:var(--dim)}
.menu-tips span{background:rgba(255,255,255,.05);padding:.3rem .6rem;border-radius:.5rem}

.btn-rules{margin-top:.5rem;border:1px solid rgba(148,161,178,.2);border-radius:1rem;padding:.8rem 2rem;font-family:inherit;font-size:1rem;font-weight:700;color:var(--dim);cursor:pointer;background:rgba(255,255,255,.03);transition:all .2s}
.btn-rules:hover{color:var(--fg);background:rgba(255,255,255,.08);border-color:rgba(148,161,178,.4)}

/* WORLDS */
.worlds{display:flex;gap:1rem;margin-top:1.5rem;flex-wrap:wrap;justify-content:center}
.world-btn{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:140px;padding:1rem .8rem;border:2px solid rgba(148,161,178,.15);border-radius:1rem;background:rgba(255,255,255,.03);cursor:pointer;font-family:inherit;color:var(--dim);transition:all .2s}
.world-btn.active{border-color:#c8ff00;background:rgba(200,255,0,.08);box-shadow:0 0 20px rgba(200,255,0,.15)}
.world-btn.active .world-status{color:#c8ff00}
.world-btn.active .world-name{color:var(--fg)}
.world-btn.unlocked{border-color:#22c55e;background:rgba(34,197,94,.05)}
.world-btn.unlocked .world-name{color:var(--fg)}
.world-btn.unlocked:hover{border-color:#c8ff00;background:rgba(200,255,0,.08);box-shadow:0 0 20px rgba(200,255,0,.15)}
.world-btn.locked{opacity:.5;cursor:default}
.world-btn.locked:hover{opacity:.6}
.world-icon{font-size:2rem}
.world-name{font-size:.85rem;font-weight:700;color:var(--fg)}
.world-status{font-size:.65rem;font-weight:600}
.world-req{font-size:.6rem;color:var(--dim);text-align:center;line-height:1.3}
.world-progress{width:80%;height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;position:relative}
.world-progress-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#a855f7,#c084fc);border-radius:2px;transition:width .3s}

/* GAME */
#game{flex-direction:column;gap:2rem;padding:2.5rem;position:relative}
.score-box{text-align:center}
.score-label{font-size:.8rem;font-weight:600;letter-spacing:.2em;color:var(--dim);margin-bottom:.5rem}
.score{font-size:6rem;font-weight:800;line-height:1;transition:transform .12s}
.score.pop{transform:scale(1.15)}
.score.shake{animation:shake .4s ease}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px) rotate(-2deg)}40%{transform:translateX(8px) rotate(2deg)}60%{transform:translateX(-5px) rotate(-1deg)}80%{transform:translateX(5px) rotate(1deg)}}

/* BUTTONS */
.btn-row{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.btn{border:none;border-radius:1rem;padding:1.2rem 2.5rem;font-family:inherit;font-size:1.3rem;font-weight:700;color:var(--fg);cursor:pointer;outline:none;transition:transform .1s,box-shadow .2s}
.btn:active{transform:scale(.92)}
.btn-red{background:linear-gradient(135deg,#ff6b6b,#ee5a24);box-shadow:0 4px 20px rgba(255,107,107,.4)}
.btn-purple{background:linear-gradient(135deg,#a855f7,#7c3aed);box-shadow:0 4px 20px rgba(192,132,252,.4)}
.btn-cyan{background:linear-gradient(135deg,#22d3ee,#0891b2);box-shadow:0 4px 20px rgba(34,211,238,.4);font-size:1rem;padding:1rem 1.8rem}
.btn-cyan:hover{box-shadow:0 6px 30px rgba(34,211,238,.6)}
.btn-orange{background:linear-gradient(135deg,#f97316,#ea580c);box-shadow:0 4px 20px rgba(249,115,22,.4);font-size:1rem;padding:1rem 1.8rem}
.btn-orange:hover{box-shadow:0 6px 30px rgba(249,115,22,.6)}
.btn-gold{background:linear-gradient(135deg,#fbbf24,#d97706);box-shadow:0 4px 20px rgba(251,191,36,.4);font-size:1rem;padding:1rem 1.8rem;color:#1a1930}
.btn-gold:hover{box-shadow:0 6px 30px rgba(251,191,36,.6)}
.btn-rainbow{background:linear-gradient(135deg,#f43f5e,#a855f7,#3b82f6,#22c55e);background-size:300% 300%;box-shadow:0 4px 20px rgba(168,85,247,.4);font-size:1rem;padding:1rem 1.8rem;color:#fff;animation:rainbowShift 3s ease infinite}
@keyframes rainbowShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.btn-rainbow:hover{box-shadow:0 6px 30px rgba(168,85,247,.6)}
.btn-launch{background:linear-gradient(135deg,#dc2626,#991b1b);box-shadow:0 4px 20px rgba(220,38,38,.5);font-size:1.4rem;padding:1.2rem 3rem;animation:launchPulse 1.5s ease-in-out infinite}
@keyframes launchPulse{0%,100%{box-shadow:0 4px 20px rgba(220,38,38,.5)}50%{box-shadow:0 4px 40px rgba(220,38,38,.8)}}
.btn-launch:hover{transform:scale(1.05)}
.btn-gray{background:linear-gradient(135deg,#475569,#334155);box-shadow:0 4px 16px rgba(71,85,105,.3);font-size:1rem;padding:1rem 2rem}
.btn-gray:hover{background:linear-gradient(135deg,#ef4444,#b91c1c);box-shadow:0 6px 24px rgba(239,68,68,.4)}

.stats{font-size:.8rem;color:var(--dim)}
.stats strong{color:var(--fg)}

.record{display:flex;align-items:center;gap:.8rem;background:linear-gradient(135deg,rgba(234,179,8,.1),rgba(251,191,36,.05));border:1px solid rgba(234,179,8,.3);border-radius:1rem;padding:.8rem 1.5rem}
.record.glow{animation:rPulse .6s ease;box-shadow:0 0 30px rgba(234,179,8,.4);border-color:rgba(234,179,8,.6)}
@keyframes rPulse{0%{transform:scale(1)}30%{transform:scale(1.08)}60%{transform:scale(.97)}100%{transform:none}}
.record-crown{font-size:2rem}
.record-body{display:flex;flex-direction:column;gap:.2rem}
.record-label{font-size:.65rem;font-weight:600;letter-spacing:.2em;color:#eab308}
.record-val{font-size:1.8rem;font-weight:800;color:#fbbf24;line-height:1;text-shadow:0 0 20px rgba(251,191,36,.3)}

.btn-menu{background:0;border:1px solid rgba(148,161,178,.2);border-radius:.8rem;padding:.5rem 1rem;font-family:inherit;font-size:.7rem;font-weight:600;color:var(--dim);cursor:pointer;letter-spacing:.1em;transition:all .2s}
.btn-menu:hover{background:rgba(148,161,178,.1);color:var(--fg)}
.btn-gear{position:fixed;top:1.2rem;right:1.2rem;width:48px;height:48px;border-radius:50%;border:1px solid rgba(148,161,178,.2);background:rgba(255,255,255,.05);color:var(--dim);font-size:1.4rem;cursor:pointer;transition:all .2s;z-index:50}
.btn-gear:hover{background:rgba(255,255,255,.1);color:var(--fg);transform:rotate(90deg)}

.fnum{position:fixed;font-size:1.5rem;font-weight:700;pointer-events:none;z-index:10;animation:fUp .8s ease-out forwards;text-shadow:0 2px 10px rgba(0,0,0,.5)}
@keyframes fUp{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-120px) scale(.5)}}
#particles{position:fixed;inset:0;pointer-events:none;z-index:0}
.dot{position:absolute;border-radius:50%;pointer-events:none;animation:pFly linear forwards}
@keyframes pFly{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0)}}

/* MILESTONE */
.mile{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:200;pointer-events:none}
.mile-box{text-align:center;animation:mIn 1.8s ease forwards}
@keyframes mIn{0%{opacity:0;transform:scale(.3) rotate(-10deg)}15%{opacity:1;transform:scale(1.1) rotate(3deg)}25%{transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:scale(1.3) translateY(-40px)}}
.mile-icon{font-size:4rem;animation:mBob 1.8s ease}
@keyframes mBob{0%,100%{transform:none}30%{transform:translateY(-15px)}60%{transform:translateY(5px)}}
.mile-text{font-size:2.5rem;font-weight:800;color:#c8ff00;text-shadow:0 0 40px rgba(200,255,0,.5);margin:.5rem 0}
.mile-sub{font-size:1rem;color:var(--dim)}
.stars{position:fixed;top:50%;left:50%;width:0;height:0;pointer-events:none;z-index:199}
.star{position:absolute;width:8px;height:8px;border-radius:50%;animation:sBurst 1s ease-out forwards}
@keyframes sBurst{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(0)}}

/* STEEL */
.steel{position:fixed;inset:0;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;z-index:300;pointer-events:none;animation:sBg 3.5s ease forwards}
@keyframes sBg{0%{opacity:0}10%{opacity:1}80%{opacity:1}100%{opacity:0}}
.steel-box{text-align:center;animation:sIn 3.5s ease forwards}
@keyframes sIn{0%{opacity:0;transform:scale(.5)}15%{opacity:1;transform:scale(1.05)}25%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-30px)}}
.steel-clocks{display:flex;gap:1.5rem;justify-content:center;margin-bottom:1.5rem}
.clk{width:70px;height:70px;border:3px solid #c084fc;border-radius:50%;position:relative;background:rgba(192,132,252,.08);box-shadow:0 0 20px rgba(192,132,252,.3)}
.clk::before,.clk::after{content:'';position:absolute;bottom:50%;left:50%;margin-left:-1.5px;width:3px;border-radius:2px;transform-origin:bottom center}
.clk::before{height:24px;background:#fff;animation:cSpin .3s linear infinite}
.clk::after{height:16px;background:#c084fc;animation:cSpin .08s linear infinite}
.clk:nth-child(2)::before{animation-duration:.15s}
.clk:nth-child(2)::after{animation-duration:.04s}
.clk:nth-child(3)::before{animation-duration:.1s}
.clk:nth-child(3)::after{animation-duration:.025s}
@keyframes cSpin{from{transform:translateX(-50%) rotate(0)}to{transform:translateX(-50%) rotate(360deg)}}
.clk-dot{position:absolute;top:50%;left:50%;width:8px;height:8px;margin:-4px 0 0 -4px;background:#fff;border-radius:50%}
.steel-text{font-size:2.8rem;font-weight:800;background:linear-gradient(135deg,#c084fc,#fbbf24,#c084fc);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shim 1s ease infinite}
@keyframes shim{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.steel-sub{font-size:1rem;color:var(--dim);margin-top:.5rem}
.speedlines{position:fixed;inset:0;pointer-events:none;z-index:299;overflow:hidden;animation:sBg 3.5s ease forwards}
.sline{position:absolute;height:2px;background:linear-gradient(90deg,transparent,rgba(192,132,252,.6),transparent);animation:lineFly .4s linear forwards}
@keyframes lineFly{0%{transform:translateX(100vw);opacity:1}100%{transform:translateX(-100vw);opacity:0}}
.ring{position:fixed;width:120px;height:120px;border:3px solid #ef4444;border-radius:50%;top:50%;left:50%;margin:-60px 0 0 -60px;pointer-events:none;z-index:5;animation:rBoom .6s ease-out forwards}
@keyframes rBoom{0%{transform:scale(0);opacity:.8}100%{transform:scale(4);opacity:0}}

/* WARP */
#warp{position:fixed;inset:0;z-index:999;background:#000;display:none;align-items:center;justify-content:center;pointer-events:none}
#warp.warp-in{animation:warpIn 1.5s ease forwards}
#warp.warp-out{animation:warpOut .5s ease forwards}
@keyframes warpIn{0%{opacity:0}30%{opacity:1}100%{opacity:1}}
@keyframes warpOut{0%{opacity:1}100%{opacity:0}}
.warp-text{font-size:2.5rem;font-weight:800;color:#c084fc;text-shadow:0 0 40px rgba(192,132,252,.6);animation:warpPulse 1.5s ease infinite}
@keyframes warpPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.7}}

/* MODAL */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:500;animation:fadeUp .2s ease}
.modal-box{background:#1a1930;border:1px solid rgba(148,161,178,.15);border-radius:1.5rem;padding:2rem 2.5rem;min-width:320px;max-width:90vw;display:flex;flex-direction:column;gap:1.2rem;animation:popIn .25s ease}
@keyframes popIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.modal-title{font-size:1.4rem;font-weight:800;text-align:center}
.rules-text{font-size:.85rem;line-height:1.7;color:var(--dim)}
.rules-text b{color:var(--fg)}
.rules-text p{margin:0}
.opt-row{display:flex;align-items:center;justify-content:space-between}
.opt-label{font-size:.85rem;color:var(--dim);font-weight:600}
.theme-group,.bg-group{display:flex;gap:.4rem}
.th-btn,.bg-btn{width:36px;height:36px;border:2px solid rgba(148,161,178,.2);border-radius:.6rem;background:rgba(255,255,255,.05);font-size:1rem;cursor:pointer;transition:all .15s}
.th-btn.active,.bg-btn.active{border-color:#c8ff00;background:rgba(200,255,0,.1)}
.th-btn:hover,.bg-btn:hover{border-color:rgba(200,255,0,.5)}
.tog{border:none;border-radius:.7rem;padding:.5rem 1.2rem;font-family:inherit;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .15s}
.tog.on{background:rgba(34,197,94,.2);color:#22c55e}
.tog.off{background:rgba(239,68,68,.15);color:#ef4444}
.btn-danger{border:none;border-radius:.7rem;padding:.5rem 1rem;font-family:inherit;font-size:.8rem;font-weight:700;background:rgba(239,68,68,.15);color:#ef4444;cursor:pointer;transition:all .15s}
.btn-danger:hover{background:rgba(239,68,68,.3)}
.btn-done{border:none;border-radius:1rem;padding:.8rem;margin-top:.5rem;font-family:inherit;font-size:1rem;font-weight:700;color:#0f0e17;cursor:pointer;background:linear-gradient(135deg,#c8ff00,#a3e635);transition:transform .15s}
.btn-done:hover{transform:scale(1.03)}
.btn-done:active{transform:scale(.97)}

/* THEMES */
body.t-light{--bg:#f5f5f5;--fg:#1a1930;--dim:#64748b}
body.t-light .modal-box{background:#fff;border-color:rgba(0,0,0,.1)}
body.t-light .btn-menu{border-color:rgba(0,0,0,.15);color:var(--dim)}
body.t-neon{--bg:#020617;--fg:#c8ff00;--dim:#4ade80}
body.t-neon .score{text-shadow:0 0 40px rgba(200,255,0,.4)}
body.t-neon .menu-title{text-shadow:0 0 30px rgba(200,255,0,.3)}
body.t-neon .record-val{color:#c8ff00;text-shadow:0 0 20px rgba(200,255,0,.4)}
body.t-neon .record-label{color:#4ade80}

/* BACKGROUNDS */
body.bg-space{background:#050510;background-image:radial-gradient(1px 1px at 10% 15%,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 25% 35%,rgba(255,255,255,.6),transparent),radial-gradient(2px 2px at 40% 10%,rgba(200,200,255,.9),transparent),radial-gradient(1px 1px at 55% 60%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 70% 25%,rgba(255,255,255,.7),transparent),radial-gradient(2px 2px at 85% 50%,rgba(180,180,255,.8),transparent),radial-gradient(1px 1px at 15% 80%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 30% 90%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 50% 45%,rgba(255,255,255,.9),transparent),radial-gradient(2px 2px at 65% 75%,rgba(200,180,255,.7),transparent),radial-gradient(1px 1px at 80% 85%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 92% 12%,rgba(255,255,255,.8),transparent),radial-gradient(3px 3px at 20% 50%,rgba(100,150,255,.3),transparent),radial-gradient(250px 250px at 80% 20%,rgba(60,20,120,.15),transparent);background-attachment:fixed}
body.bg-field{background:#1a3a1a;background-image:linear-gradient(180deg,#1a2f1a,#1e3a1e 30%,#224022 60%,#1a3a1a);background-attachment:fixed}
body.bg-ocean{background:#0a1628;background-image:radial-gradient(ellipse 120% 60% at 50% 100%,rgba(20,80,140,.4),transparent),linear-gradient(180deg,#0a1628,#0d1f3c 40%,#102a4a 70%,#163a5a);background-attachment:fixed}
body.bg-fire{background:#1a0a0a;background-image:radial-gradient(ellipse 100% 80% at 50% 100%,rgba(180,40,0,.3),transparent),radial-gradient(ellipse 60% 40% at 30% 90%,rgba(220,80,0,.2),transparent),linear-gradient(180deg,#1a0a0a,#2a0e0e 50%,#3a1212);background-attachment:fixed}

/* WORLD 2 */
body.world-2 #game{background:radial-gradient(ellipse at 50% 0%,rgba(120,40,200,.08),transparent 70%)}
body.world-2 .btn-red{background:linear-gradient(135deg,#06b6d4,#0891b2);box-shadow:0 4px 20px rgba(6,182,212,.4)}
body.world-2 .btn-purple{background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 4px 20px rgba(139,92,246,.4)}
body.world-2 .score{text-shadow:0 0 40px rgba(6,182,212,.3)}

/* WORLD 3 */
body.world-3 #game{background:radial-gradient(ellipse at 50% 0%,rgba(220,38,38,.08),transparent 70%)}
body.world-3 .btn-red{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 20px rgba(239,68,68,.4)}
body.world-3 .btn-purple{background:linear-gradient(135deg,#f97316,#ea580c);box-shadow:0 4px 20px rgba(249,115,22,.4)}
body.world-3 .btn-cyan{background:linear-gradient(135deg,#fbbf24,#f59e0b);box-shadow:0 4px 20px rgba(251,191,36,.4)}
body.world-3 .score{text-shadow:0 0 40px rgba(239,68,68,.3)}

/* WORLD 4 */
body.world-4 #game{background:radial-gradient(ellipse at 50% 0%,rgba(251,191,36,.08),transparent 70%)}
body.world-4 .btn-red{background:linear-gradient(135deg,#fbbf24,#d97706);box-shadow:0 4px 20px rgba(251,191,36,.4)}
body.world-4 .btn-purple{background:linear-gradient(135deg,#f97316,#ea580c);box-shadow:0 4px 20px rgba(249,115,22,.4)}
body.world-4 .btn-cyan{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 20px rgba(239,68,68,.4)}
body.world-4 .btn-orange{background:linear-gradient(135deg,#fbbf24,#d97706);box-shadow:0 4px 20px rgba(251,191,36,.4)}
body.world-4 .score{text-shadow:0 0 40px rgba(251,191,36,.4)}

/* WORLD 5 */
body.world-5 #game{background:radial-gradient(ellipse at 50% 0%,rgba(168,85,247,.08),transparent 70%)}
body.world-5 .btn-red{background:linear-gradient(135deg,#f43f5e,#e11d48);box-shadow:0 4px 20px rgba(244,63,94,.4)}
body.world-5 .btn-purple{background:linear-gradient(135deg,#a855f7,#7c3aed);box-shadow:0 4px 20px rgba(168,85,247,.4)}
body.world-5 .btn-cyan{background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 4px 20px rgba(59,130,246,.4)}
body.world-5 .btn-orange{background:linear-gradient(135deg,#f97316,#ea580c);box-shadow:0 4px 20px rgba(249,115,22,.4)}
body.world-5 .btn-gold{background:linear-gradient(135deg,#fbbf24,#d97706);box-shadow:0 4px 20px rgba(251,191,36,.4)}
body.world-5 .btn-rainbow{box-shadow:0 6px 30px rgba(168,85,247,.6)}
body.world-5 .score{text-shadow:0 0 40px rgba(168,85,247,.4)}

/* WORLD 6 */
body.world-6{--bg:#0c0000}
body.world-6 #game{background:radial-gradient(ellipse at 50% 0%,rgba(220,38,38,.1),transparent 70%)}
body.world-6 .score{text-shadow:0 0 40px rgba(220,38,38,.4)}

/* METEOR */
#meteorScreen{position:fixed;inset:0;z-index:400;display:none;background:#000;pointer-events:none;overflow:hidden}
#meteorCanvas{position:absolute;inset:0;width:100%;height:100%}
.meteor-text{
  position:absolute;bottom:15%;left:50%;transform:translateX(-50%);
  font-size:5rem;font-weight:900;color:#ef4444;
  text-shadow:0 0 60px rgba(239,68,68,.8);
  opacity:0;
  animation:mTextIn 1s ease 1.8s forwards;
}
@keyframes mTextIn{0%{opacity:0;transform:translateX(-50%) scale(0.3)}100%{opacity:1;transform:translateX(-50%) scale(1)}}