:root{--primary-color: #59ff00;--secondary-color: #1ba300;--accent-color: #ffff00;--bg-dark: #26262e;--glass-bg: rgba(10, 15, 20, .75);--glass-border: rgba(0, 255, 136, .3);--text-color: #ffffff;--font-family: "Press Start 2P", cursive}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;image-rendering:pixelated}body{background-color:var(--bg-dark);background-image:url(../assets/menu.png);background-size:cover;background-position:center;background-repeat:no-repeat;color:var(--text-color);font-family:var(--font-family);overflow:hidden;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}#app{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center}@keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0)}to{transform:translate(1px,-2px) rotate(-1deg)}}.shake{animation:shake .2s;animation-iteration-count:1}#game-canvas{display:block;max-width:100%;max-height:100%;object-fit:contain}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;justify-content:center;align-items:center}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:2px solid var(--glass-border);border-radius:8px;padding:2rem;pointer-events:auto;box-shadow:0 0 40px #00ff8826,inset 0 0 20px #00000080;display:flex;flex-direction:column;gap:1rem;width:950px;max-width:95vw;max-height:95vh;overflow-y:auto}.logo-container{text-align:center;margin-bottom:.5rem}.logo{max-width:180px;image-rendering:pixelated}.menu-sections{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem}.menu-section{background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:4px;padding:1.2rem;display:flex;flex-direction:column;gap:1.2rem}.section-title{font-size:.55rem;color:var(--secondary-color);letter-spacing:2px;margin-bottom:.5rem;border-bottom:1px solid rgba(0,212,255,.2);padding-bottom:.5rem;text-transform:uppercase}.setting-row{display:flex;flex-direction:column;gap:.5rem;padding:6px;border-radius:4px;border:1px solid transparent;transition:all .2s}.setting-row.selected{background:#00ff881a;border-color:#00ff884d}.setting-row label{font-size:.45rem;opacity:.7;color:#aaa}.choice-control{display:flex;align-items:center;justify-content:space-between;width:100%;background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:2px;padding:4px}.choice-control span{min-width:100px;text-align:center;font-size:.45rem;line-height:1.4;color:var(--text-color)}.arrow-btn{background:none;border:none;color:var(--primary-color);font-size:.7rem;cursor:pointer;padding:5px 10px;transition:all .1s}.arrow-btn:hover{color:#fff;text-shadow:0 0 8px var(--primary-color);transform:scale(1.1)}input[type=text]{background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:2px;color:var(--primary-color);padding:8px;text-align:center;width:100%;font-family:inherit;font-size:.5rem}.menu-footer{margin-top:1rem;display:flex;flex-direction:column;gap:.8rem}.main-btns{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem}button{background:#ffffff0d;border:1px solid rgba(255,255,255,.2);color:#fff;padding:14px;border-radius:4px;cursor:pointer;font-size:.55rem;font-family:inherit;transition:all .2s;text-transform:uppercase}button:hover{background:#ffffff1a;border-color:var(--primary-color);box-shadow:0 0 10px #0f83}button.primary{background:linear-gradient(45deg,var(--primary-color),var(--secondary-color));color:#000;font-weight:700;border:none;font-size:.7rem}button.primary:hover{transform:translateY(-2px);box-shadow:0 5px 20px #0f86}.hud-container-new{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;padding:20px;z-index:10}.hud-center{position:absolute;top:0;left:50%;transform:translate(-50%);text-align:center;background:#0009;padding:15px 35px 20px;border-radius:0 0 20px 20px;border:2px solid var(--glass-border);border-top:none;box-shadow:0 5px 25px #0006}.status-container{display:flex;flex-direction:column;gap:10px;pointer-events:none}.vignette{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transition:box-shadow .5s ease;z-index:1}.vignette-sprint{box-shadow:inset 0 0 100px #00d4ff4d}.vignette-speed{box-shadow:inset 0 0 100px #00ff884d}.vignette-slow{box-shadow:inset 0 0 100px #ff00554d}.hud-score-label{font-size:.5rem;opacity:.6;margin-bottom:5px}.hud-score-value{font-size:1.5rem;color:var(--primary-color);text-shadow:0 0 10px var(--primary-color);position:relative}.score-popup{position:absolute;top:100%;left:50%;transform:translate(-50%);font-size:.8rem;font-weight:700;pointer-events:none;animation:popupMove .8s ease-out forwards;white-space:nowrap}.score-popup.plus{color:var(--primary-color)}.score-popup.minus{color:var(--accent-color)}@keyframes popupMove{0%{transform:translate(-50%);opacity:1}to{transform:translate(-50%,20px);opacity:0}}.hud-right{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;align-items:flex-end;gap:10px}.hud-left{position:absolute;top:25px;left:25px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none;z-index:15}.hud-lives{display:flex;gap:10px}.life-circle{width:24px;height:24px;background:#a020f0;border:2px solid white;border-radius:4px;box-shadow:0 0 10px #a020f099;image-rendering:pixelated}.hud-info-item{font-size:.4rem;color:#ffffffb3;text-shadow:1px 1px #000}.pause-btn-new{pointer-events:auto;width:30px;height:30px;padding:0;display:flex;justify-content:center;align-items:center;border-radius:4px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;font-family:inherit;font-size:.5rem}.pause-btn-new:hover{background:#fff3;border-color:var(--primary-color)}@media (max-width: 600px){.hud-center{top:15px}.hud-score-value{font-size:1rem}}.game-over{text-align:center;align-items:center;width:450px}.score-value{font-size:2.5rem;font-weight:700;color:var(--primary-color);display:block;margin:2rem 0;text-shadow:0 0 20px var(--primary-color)}@media (max-width: 900px){.menu-sections{grid-template-columns:1fr 1fr}}@media (max-width: 650px){.menu-sections,.main-btns{grid-template-columns:1fr}.glass-panel{padding:1.5rem;min-width:95vw}}.tutorial-panel{min-width:800px}.tutorial-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem;margin-bottom:1rem}.tutorial-section{background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:4px;padding:1.2rem;display:flex;flex-direction:column;gap:.8rem}.tutorial-text{font-size:.45rem;line-height:1.5;color:#ccc}.tutorial-item{display:flex;align-items:center;gap:10px;font-size:.45rem;line-height:1.4;color:#ccc;background:#0000004d;padding:8px;border-radius:4px;border:1px solid rgba(255,255,255,.05)}.tutorial-item img{width:24px;height:24px;image-rendering:pixelated}@media (max-width: 850px){.tutorial-grid{grid-template-columns:1fr}.tutorial-panel{min-width:95vw}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .4s ease-out forwards}
