:root{--bg-dark: hsl(230, 25%, 8%);--bg-dark-trans: rgba(12, 14, 24, .85);--text-light: hsl(220, 100%, 98%);--text-dim: hsl(220, 15%, 70%);--text-dark: hsl(230, 25%, 15%);--accent-cyan: hsl(180, 100%, 48%);--accent-cyan-glow: hsla(180, 100%, 48%, .35);--accent-amber: hsl(38, 100%, 52%);--accent-amber-glow: hsla(38, 100%, 52%, .35);--accent-purple: hsl(272, 100%, 62%);--accent-purple-glow: hsla(272, 100%, 62%, .35);--danger-red: hsl(352, 90%, 55%);--danger-red-glow: hsla(352, 90%, 55%, .35);--font-display: "Outfit", sans-serif;--font-mono: "JetBrains Mono", "Courier New", monospace;--transition-speed: .3s}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none;touch-action:none}body{background-color:#05060b;color:var(--text-light);font-family:var(--font-display);overflow:hidden;width:100vw;height:100vh;width:var(--viewport-width, 100dvw);height:var(--viewport-height, 100dvh);display:flex;justify-content:center;align-items:center}#game-container{position:relative;width:min(100vw,177.7778vh);height:min(100vh,56.25vw);aspect-ratio:16 / 9;background-color:var(--bg-dark);box-shadow:none;border-radius:0;overflow:hidden;display:flex;justify-content:center;align-items:center}@media (min-width: 1281px) or (min-height: 721px){#game-container{border:0}}#game-canvas{width:100%;height:100%;object-fit:contain;background-color:#070913;display:block}.menu-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#060810b3;display:flex;justify-content:center;align-items:center;z-index:10;opacity:1;visibility:visible;transition:opacity var(--transition-speed) ease,visibility var(--transition-speed) ease}.menu-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.glassmorphism{background:var(--bg-dark-trans);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.07);box-shadow:0 24px 60px #0009,inset 0 1px #ffffff1a;border-radius:20px;padding:32px 40px;width:90%;max-width:680px;max-height:90%;overflow-y:auto;display:flex;flex-direction:column;align-items:center;animation:scaleIn .4s cubic-bezier(.16,1,.3,1) forwards}.glassmorphism.compact{max-width:400px;padding:30px}.hud-overlay{position:absolute;top:0;left:0;width:100%;height:100%;padding:20px 24px;box-sizing:border-box;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;z-index:5;opacity:1;transition:opacity var(--transition-speed)}.hud-overlay.hidden{opacity:0}.hud-item.hidden,.new-badge.hidden,.touch-overlay.hidden{display:none}.hud-left,.hud-right{display:flex;gap:24px;align-items:flex-start;pointer-events:auto}.hud-left{position:absolute;top:20px;left:24px;flex-direction:column;gap:8px}.hud-right{position:absolute;top:20px;right:24px}.hud-center{display:none}.hud-item,.flex-col{display:flex;flex-direction:column}.items-end{align-items:flex-end}.hud-label{font-size:12px;font-weight:800;color:#2a4860d1;letter-spacing:0;margin-bottom:2px;text-shadow:0 1px 0 rgba(255,255,255,.55),0 2px 5px rgba(0,0,0,.22)}.hud-value{font-size:20px;font-weight:800;color:var(--text-light);text-shadow:0 2px 0 rgba(30,54,78,.55),0 0 8px rgba(0,0,0,.22),0 0 10px rgba(255,255,255,.22)}.crystal-container{display:flex;align-items:center;gap:6px;color:var(--accent-amber)}.crystal-icon{font-size:18px;text-shadow:0 0 8px var(--accent-amber);animation:rotateGently 4s linear infinite}.accent-cyan{color:var(--accent-cyan);text-shadow:0 2px 0 rgba(30,54,78,.5),0 0 8px var(--accent-cyan-glow)}.theme-badge{background:#ffffff14;border:1px solid rgba(255,255,255,.12);color:var(--text-light);padding:6px 14px;border-radius:30px;font-size:11px;font-weight:600;letter-spacing:1.5px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 4px 12px #0003}.hud-icon-btn{background:#ffffff14;border:1px solid rgba(255,255,255,.12);color:var(--text-light);width:42px;height:42px;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;pointer-events:auto;transition:all .2s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hud-icon-btn:hover{background:#fff3;transform:scale(1.05)}.hud-icon-btn:active{transform:scale(.95)}.hud-icon-btn .icon{width:16px;height:16px;fill:currentColor}.hud-health{display:flex;align-items:center;padding:7px 10px 8px;border-radius:8px;background:#ffffff29;border:1px solid rgba(255,255,255,.26);box-shadow:0 2px #35505e3d,0 8px 22px #14304629;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);pointer-events:none}.health-label{font-size:12px;font-weight:700;color:#fff7d6;letter-spacing:0;text-shadow:0 2px 0 rgba(80,42,42,.55),0 0 8px rgba(255,144,144,.35)}.health-hearts{display:flex;gap:5px;align-items:center}.health-heart{font-size:27px;line-height:1;color:#ffffff52;-webkit-text-stroke:1.2px rgba(90,40,48,.78);text-shadow:0 2px 0 rgba(72,36,42,.46),0 0 8px rgba(255,255,255,.28);transform-origin:center;transition:color .16s ease,transform .16s ease,opacity .16s ease}.health-heart.filled{color:#ff5572;text-shadow:0 2px 0 rgba(112,40,52,.45),0 0 9px rgba(255,82,118,.45);transform:scale(1.05)}.health-heart.low{color:#ff2f4f;animation:heartPulse .8s ease-in-out infinite}.menu-header{text-align:center;margin-bottom:24px}.game-title{font-size:48px;font-weight:800;letter-spacing:0;background:linear-gradient(135deg,var(--accent-cyan) 10%,var(--accent-purple) 90%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 12px rgba(0,180,255,.15));margin-bottom:4px}.game-subtitle{font-size:12px;font-weight:600;color:var(--text-dim);letter-spacing:12px;text-indent:12px}.char-selection-container{width:100%;margin-bottom:28px}.section-title{font-size:11px;font-weight:800;color:var(--text-dim);letter-spacing:2px;text-align:center;margin-bottom:14px}.char-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%}.char-card{background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:16px 12px;display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:all .25s cubic-bezier(.25,.8,.25,1)}.char-card:hover{background:#ffffff0f;border-color:#ffffff26;transform:translateY(-2px)}.char-card.active{background:#ffffff14;box-shadow:inset 0 0 12px #ffffff0d}.char-card[data-char=ninja].active{border-color:var(--accent-cyan);box-shadow:0 8px 20px var(--accent-cyan-glow)}.char-card[data-char=sprite].active{border-color:var(--accent-amber);box-shadow:0 8px 20px var(--accent-amber-glow)}.char-card[data-char=mech].active{border-color:var(--accent-purple);box-shadow:0 8px 20px var(--accent-purple-glow)}.char-avatar-box{width:72px;height:72px;border-radius:12px;background:#0006;margin-bottom:12px;display:flex;justify-content:center;align-items:center;border:1px solid rgba(255,255,255,.05)}.char-name{font-size:15px;font-weight:700;margin-bottom:4px}.char-desc{font-size:9px;color:var(--text-dim);text-align:center}.menu-actions{width:100%;display:flex;flex-direction:column;gap:16px;align-items:center}.settings-row{display:flex;justify-content:space-between;width:100%;max-width:380px;align-items:center;gap:16px}.high-score-box{background:#0000004d;border:1px solid rgba(255,255,255,.06);padding:10px 16px;border-radius:30px;font-size:12px;letter-spacing:1px;color:var(--text-light);flex-grow:1;text-align:center}.btn{font-family:var(--font-display);font-size:14px;font-weight:700;padding:12px 28px;border-radius:30px;border:none;cursor:pointer;transition:all .25s ease;letter-spacing:1.5px;text-align:center}.btn-primary{background:#fff;color:var(--text-dark);font-size:16px;font-weight:800;width:100%;max-width:380px;padding:16px 36px}.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.05)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:#ffffff14;border:1px solid rgba(255,255,255,.1);color:var(--text-light);padding:10px 22px}.btn-secondary:hover{background:#ffffff24;border-color:#fff3}.btn-danger{background:var(--danger-red);color:#fff}.btn-danger:hover{box-shadow:0 4px 15px var(--danger-red-glow);filter:brightness(1.1)}.btn-glow-cyan:hover{background:var(--accent-cyan);color:var(--text-dark);box-shadow:0 8px 25px var(--accent-cyan-glow)}.controls-guide{margin-top:24px;border-top:1px solid rgba(255,255,255,.06);padding-top:18px;width:100%;display:flex;justify-content:space-around;gap:16px}.guide-item{display:flex;align-items:center;gap:10px}.key{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-bottom:3px solid rgba(255,255,255,.3);border-radius:6px;padding:4px 10px;font-size:11px;font-weight:700;box-shadow:0 2px 4px #0000004d}.guide-text{font-size:11px;color:var(--text-dim)}.mobile-only-guide{display:none}.menu-vertical-actions{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:16px}.menu-vertical-actions .btn{width:100%}.menu-title{font-size:26px;font-weight:800;letter-spacing:2px;margin-bottom:8px;text-align:center}.text-danger{color:var(--danger-red);text-shadow:0 0 10px var(--danger-red-glow)}.stats-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;margin-top:24px;position:relative}.stat-card{background:#ffffff08;border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:16px 12px;display:flex;flex-direction:column;align-items:center}.stat-label{font-size:10px;font-weight:800;color:var(--text-dim);letter-spacing:1px;margin-bottom:6px;text-align:center}.stat-value{font-size:20px;font-weight:800;color:var(--text-light)}.text-glow-cyan{color:var(--accent-cyan);text-shadow:0 0 10px var(--accent-cyan-glow)}.new-badge{position:absolute;top:-16px;right:-10px;background:linear-gradient(135deg,#f05,#f50);color:#fff;font-size:9px;font-weight:800;padding:4px 10px;border-radius:30px;letter-spacing:1px;transform:rotate(12deg);box-shadow:0 4px 12px #f056;border:1px solid rgba(255,255,255,.2)}.touch-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:none;pointer-events:none;z-index:4}.touch-area{flex:1;height:100%;display:flex;align-items:flex-end;padding:24px;pointer-events:auto;opacity:.15;transition:opacity .2s}.touch-area:active{opacity:.45}.touch-left{justify-content:flex-start;background:linear-gradient(90deg,rgba(0,180,255,.15) 0%,transparent 60%)}.touch-right{justify-content:flex-end;background:linear-gradient(270deg,rgba(162,0,255,.15) 0%,transparent 60%)}.touch-hint{display:flex;flex-direction:column;align-items:center;color:#fff6;font-weight:800;font-size:12px;letter-spacing:1.5px;text-shadow:0 2px 4px rgba(0,0,0,.4)}.touch-left:active .touch-hint{color:var(--accent-cyan)}.touch-right:active .touch-hint{color:var(--accent-purple)}.touch-icon{font-size:24px;margin-bottom:2px}.margin-top-lg{margin-top:28px}@keyframes scaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes rotateGently{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.02);opacity:.95}to{transform:scale(1);opacity:1}}@keyframes heartPulse{0%{transform:scale(1.02)}50%{transform:scale(1.18)}to{transform:scale(1.02)}}.animate-pulse{animation:pulse 2s infinite ease-in-out}@media (hover: none) and (pointer: coarse){.controls-guide .guide-item{display:none}.mobile-only-guide{display:block;color:var(--text-dim);font-size:11px;text-align:center}.touch-overlay,.touch-overlay.hidden{display:none!important}}@media (hover: none) and (pointer: coarse) and (orientation: portrait){body{width:var(--viewport-width, 100dvw);height:var(--viewport-height, 100dvh)}#game-container{width:var(--portrait-game-width, min(100dvw, 56.25dvh));height:var(--portrait-game-height, min(177.7778dvw, 100dvh));max-width:none;max-height:none;transform:none}.hud-overlay,.menu-overlay{width:var(--portrait-game-height, min(177.7778dvw, 100dvh));height:var(--portrait-game-width, min(100dvw, 56.25dvh));top:50%;left:50%;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center center}}