:root{--primary-cyan: #38bdf8;--deep-ocean: #0284c7;--sun-gold: #f59e0b;--candy-orange: #f97316;--coral-red: #f43f5e;--leaf-emerald: #10b981;--card-bg: rgba(15, 23, 42, .78);--glass-border: rgba(255, 255, 255, .28);--glass-shadow: 0 12px 32px rgba(0, 0, 0, .45)}*{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;touch-action:manipulation}html,body{width:100%;height:100%;overflow:hidden;font-family:Outfit,"Baloo 2",sans-serif;background-color:#0369a1;color:#fff}#app{position:relative;width:100vw;height:100vh;overflow:hidden}#game-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;display:block}.game-top-bar{position:absolute;top:14px;left:16px;right:16px;z-index:10;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.game-top-bar.in-menu{display:none}.hud-group{display:flex;align-items:center;gap:10px;pointer-events:auto}.center-group{position:absolute;left:50%;transform:translate(-50%);gap:12px}.hud-card{background:var(--card-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1.5px solid var(--glass-border);border-radius:50px;padding:6px 16px;box-shadow:var(--glass-shadow);display:flex;align-items:center;gap:8px;font-weight:800;font-size:.92rem;color:#fff}.distance-card{border-color:#38bdf866;color:#38bdf8;font-family:Luckiest Guy,cursive;font-size:1.1rem;letter-spacing:.5px}.timer-card{color:#fef08a;font-family:Luckiest Guy,cursive;font-size:1.25rem;letter-spacing:.5px}.pearls-card{color:#86efac;font-family:Luckiest Guy,cursive;font-size:1.15rem}.mode-pill{font-size:.78rem;font-weight:900;letter-spacing:.5px;padding:6px 14px;border-radius:50px;border:1.5px solid rgba(255,255,255,.25);box-shadow:0 4px 12px #0000004d;text-transform:uppercase}.mode-prac{background:linear-gradient(135deg,#10b981e6,#059669e6)}.mode-skll{background:linear-gradient(135deg,#0284c7e6,#1e3a8ae6)}.mode-invi{background:linear-gradient(135deg,#f43f5ee6,#9f1239e6)}.btn-icon{background:var(--card-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1.5px solid var(--glass-border);border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;box-shadow:var(--glass-shadow);transition:all .2s cubic-bezier(.34,1.56,.64,1)}.btn-icon:hover{transform:scale(1.08);border-color:#fff}.bottom-turbo-hud{position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:10;width:90%;max-width:460px;pointer-events:none}.turbo-bar-container{background:#0f172ae0;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1.5px solid rgba(255,255,255,.28);border-radius:20px;padding:8px 16px;box-shadow:var(--glass-shadow);text-align:center}.turbo-label{font-size:.74rem;font-weight:900;letter-spacing:.8px;color:#fde047;margin-bottom:5px;font-family:"Baloo 2",cursive}.turbo-bar-track{width:100%;height:12px;background:#0009;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.15)}.turbo-bar-fill{width:0%;height:100%;background:linear-gradient(90deg,#38bdf8,gold 70%,#f97316);border-radius:8px;transition:width .15s ease-out;box-shadow:0 0 14px #fde047cc}.start-screen-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:20;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:24px;pointer-events:none}.start-content-card{width:90%;max-width:580px;background:#0f172adb;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:2px solid rgba(255,255,255,.28);border-radius:28px;padding:22px 26px;box-shadow:0 20px 50px #000000a6;text-align:center;pointer-events:auto;animation:cardFadeIn .35s cubic-bezier(.34,1.56,.64,1)}@keyframes cardFadeIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.sub-hero-tag{font-size:.85rem;font-weight:900;letter-spacing:1.2px;color:gold;text-transform:uppercase;margin-bottom:4px}.hero-desc{font-size:.86rem;color:#e0f2fe;line-height:1.4;margin-bottom:16px}.mode-select-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.mode-select-btn{background:#1e293bcc;border:2px solid rgba(255,255,255,.18);border-radius:16px;padding:10px 6px;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.mode-select-btn:hover{transform:translateY(-3px);border-color:var(--primary-cyan)}.mode-select-btn.active{background:linear-gradient(180deg,#0284c7d9,#0369a1f2);border-color:gold;box-shadow:0 0 16px #ffd70066}.mode-btn-tag{font-size:.65rem;font-weight:900;letter-spacing:.5px;padding:2px 8px;border-radius:20px;background:#0006}.mode-select-btn strong{font-size:.84rem;font-weight:800;font-family:"Baloo 2",cursive}.mode-select-btn small{font-size:.68rem;color:#cbd5e1}.config-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}.config-label{font-size:.82rem;font-weight:800;color:#94a3b8}.school-dropdown{background:#1e293be6;border:1.5px solid var(--primary-cyan);border-radius:12px;padding:6px 14px;color:#fff;font-family:Outfit,sans-serif;font-weight:700;font-size:.84rem;outline:none}.btn-play-hero{width:100%;background:linear-gradient(180deg,#ffb703,#ff7a00);border:none;border-radius:50px;padding:14px 28px;font-family:Luckiest Guy,"Baloo 2",cursive;font-size:1.25rem;letter-spacing:1px;color:#fff;text-shadow:0 2px 4px rgba(124,45,18,.8);box-shadow:0 8px #c2410c,0 16px 28px #f9731680;cursor:pointer;transition:all .1s ease-out;margin-bottom:14px}.btn-play-hero:hover{transform:translateY(-2px);box-shadow:0 10px #c2410c,0 18px 32px #f9731699}.btn-play-hero:active{transform:translateY(6px);box-shadow:0 2px #c2410c,0 6px 12px #f9731666}.controls-guide-bar{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;font-size:.78rem;color:#94a3b8}.guide-item{display:flex;align-items:center;gap:5px}.keycap{background:#ffffff26;border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:2px 6px;font-weight:800;font-size:.72rem;color:#fff}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:50;background:#0369a1a6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center}.modal-card{background:linear-gradient(180deg,#fff,#f8fafc);border-radius:32px;border:5px solid #ffffff;box-shadow:0 20px 50px #00000073;padding:26px 28px;width:90%;max-width:440px;text-align:center;position:relative;animation:modalPopIn .3s cubic-bezier(.34,1.56,.64,1)}@keyframes modalPopIn{0%{opacity:0;transform:scale(.88) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}.candy-ribbon{display:inline-block;background:linear-gradient(180deg,gold,#f59e0b);color:#78350f;font-family:Luckiest Guy,cursive;font-size:.88rem;letter-spacing:1px;padding:6px 18px;border-radius:50px;border:2px solid #ffffff;box-shadow:0 4px 10px #d9770666;margin-bottom:10px}.finish-title{font-family:Luckiest Guy,cursive;font-size:1.8rem;letter-spacing:.5px;color:#0f172a;margin-bottom:6px}.finish-subtitle{font-size:.88rem;color:#475569;line-height:1.4;margin-bottom:16px}.rank-badge{display:inline-block;font-family:Luckiest Guy,cursive;font-size:1.6rem;padding:6px 24px;border-radius:50px;border:3px solid #ffffff;box-shadow:0 8px 18px #00000040;margin-bottom:16px;text-shadow:0 2px 4px rgba(0,0,0,.3)}.rank-s{background:linear-gradient(180deg,gold,#f59e0b);color:#78350f}.rank-a{background:linear-gradient(180deg,#38bdf8,#0284c7);color:#fff}.rank-b{background:linear-gradient(180deg,#10b981,#059669);color:#fff}.rank-c{background:linear-gradient(180deg,#94a3b8,#64748b);color:#fff}.stats-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}.stat-box{background:#f1f5f9;border:2px solid #e2e8f0;border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;align-items:center;gap:4px}.stat-label{font-size:.74rem;font-weight:900;color:#64748b;letter-spacing:.8px}.stat-val{font-family:Luckiest Guy,cursive;font-size:1.35rem;color:#0f172a}.highlight-val{color:#0284c7}.modal-actions{display:flex;flex-direction:column;gap:10px}.btn-modal-primary{width:100%;background:linear-gradient(180deg,#38bdf8,#0284c7);border:none;border-radius:50px;padding:14px 24px;font-family:Luckiest Guy,cursive;font-size:1.15rem;color:#fff;box-shadow:0 6px #0369a1,0 12px 20px #0284c766;cursor:pointer;transition:all .1s ease-out}.btn-modal-primary:hover{transform:translateY(-2px)}.btn-modal-primary:active{transform:translateY(4px);box-shadow:0 2px #0369a1}.btn-modal-secondary{width:100%;background:#e2e8f0;border:none;border-radius:50px;padding:11px 24px;font-family:"Baloo 2",cursive;font-weight:800;font-size:.95rem;color:#475569;cursor:pointer}