*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #1a1a2e;--color-bg-secondary: #16213e;--color-accent: #e94560;--color-accent-hover: #ff6b6b;--color-text: #ffffff;--color-text-secondary: #a0a0b0;--color-success: #4ade80;--color-warning: #fbbf24;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--font-xs: .75rem;--font-sm: .875rem;--font-base: 1rem;--font-lg: 1.25rem;--font-xl: 1.5rem;--font-2xl: 2rem;--font-3xl: 2.5rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: 1rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);--shadow-md: 0 4px 6px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .4);--touch-target: 48px}html,body{height:100%;width:100%;overflow:hidden;font-family:"Press Start 2P",Courier New,Courier,monospace;background:var(--color-bg);color:var(--color-text);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;image-rendering:pixelated;image-rendering:crisp-edges}#app{height:100%;width:100%;position:relative}.screen{display:none;position:absolute;top:0;left:0;width:100%;height:100%}.screen.active{display:flex;flex-direction:column}.screen.overlay{background:#000c;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);justify-content:center;align-items:center;z-index:100}.menu-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:var(--spacing-lg);text-align:center;background:linear-gradient(180deg,var(--color-bg) 0%,var(--color-bg-secondary) 100%)}.game-title{font-size:var(--font-2xl);font-weight:800;color:var(--color-accent);margin-bottom:var(--spacing-sm);text-shadow:4px 4px 0 rgba(0,0,0,.5),-1px -1px 0 rgba(255,255,255,.1);text-transform:uppercase;letter-spacing:.1em}.game-subtitle{color:var(--color-text-secondary);font-size:var(--font-base);margin-bottom:var(--spacing-2xl)}.profile-container{position:absolute;top:var(--spacing-md);right:var(--spacing-md);z-index:100}.profile-btn.btn-icon{min-width:36px;width:36px;height:36px;min-height:36px;padding:var(--spacing-xs);margin-bottom:0;background:#ffffff1a;border:2px solid rgba(255,255,255,.3);box-shadow:2px 2px #0000004d}.profile-btn svg{width:20px;height:20px}.profile-btn:hover{background:#fff3}.settings-dropdown{position:absolute;top:calc(36px + var(--spacing-sm));right:0;width:220px;background:var(--color-bg-secondary);border:3px solid rgba(255,255,255,.3);box-shadow:6px 6px #00000080;z-index:101}.settings-header{padding:var(--spacing-sm) var(--spacing-md);background:#ffffff1a;font-size:var(--font-sm);font-weight:700;text-transform:uppercase;letter-spacing:.1em;border-bottom:2px solid rgba(255,255,255,.2)}.settings-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;font-size:var(--font-sm);transition:background .1s ease}.settings-item:hover{background:#ffffff0d}.settings-item input[type=checkbox]{display:none}.settings-item .toggle{width:36px;height:20px;background:#fff3;border:2px solid rgba(255,255,255,.3);position:relative;transition:background .2s ease}.settings-item .toggle:after{content:"";position:absolute;width:12px;height:12px;background:var(--color-text-secondary);top:2px;left:2px;transition:transform .2s ease,background .2s ease}.settings-item input[type=checkbox]:checked+.toggle{background:var(--color-success);border-color:var(--color-success)}.settings-item input[type=checkbox]:checked+.toggle:after{transform:translate(16px);background:#fff}.settings-divider{height:2px;background:#ffffff1a;margin:var(--spacing-xs) 0}.pause-settings{margin-bottom:var(--spacing-md)}.pause-setting{background:#0000004d;padding:var(--spacing-sm) var(--spacing-md);margin-bottom:var(--spacing-xs);border:2px solid rgba(255,255,255,.2)}.pause-setting:last-child{margin-bottom:0}.settings-btn{display:block;width:calc(100% - var(--spacing-md) * 2);margin:var(--spacing-sm) var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;border:2px solid;background:transparent;color:var(--color-text);transition:background .1s ease}.settings-btn-danger{border-color:var(--color-accent);color:var(--color-accent)}.settings-btn-danger:hover{background:var(--color-accent);color:#fff}.settings-footer{padding:var(--spacing-sm) var(--spacing-md);text-align:center}.settings-footer .version{font-size:var(--font-xs);color:var(--color-text-secondary);opacity:.6}.btn{min-height:var(--touch-target);min-width:200px;padding:var(--spacing-md) var(--spacing-xl);border:none;border-radius:0;font-size:var(--font-base);font-weight:600;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease;margin-bottom:var(--spacing-md);touch-action:manipulation;box-shadow:4px 4px #00000080,inset -2px -2px #0000004d,inset 2px 2px #fff3;text-transform:uppercase;letter-spacing:.05em;position:relative}.btn:active{transform:translate(2px,2px);box-shadow:2px 2px #00000080,inset -2px -2px #0000004d,inset 2px 2px #fff3}.btn-primary{background:var(--color-accent);color:var(--color-text)}.btn-primary:hover{background:var(--color-accent-hover)}.btn-secondary{background:var(--color-bg-secondary);color:var(--color-text);border:2px solid rgba(255,255,255,.2)}.btn-secondary:hover{background:#ffffff1a}.btn-icon{min-width:var(--touch-target);min-height:var(--touch-target);width:var(--touch-target);height:var(--touch-target);padding:var(--spacing-sm);border-radius:var(--radius-md);background:#ffffff1a;display:flex;align-items:center;justify-content:center}.btn-icon svg{width:24px;height:24px}#game-screen{background:linear-gradient(180deg,#0f0f23,#1a1a2e,#16213e)}#game-canvas{display:block;width:100%;height:100%;touch-action:none}#hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:var(--spacing-md);padding-top:max(var(--spacing-md),env(safe-area-inset-top));z-index:10;pointer-events:none}#hud>*{pointer-events:auto}.hud-left,.hud-right,.hud-center{display:flex;gap:var(--spacing-md)}.hud-item{display:flex;flex-direction:column;align-items:center;background:#000000b3;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:var(--spacing-sm) var(--spacing-md);border-radius:0;min-width:60px;border:2px solid rgba(255,255,255,.3);box-shadow:2px 2px #00000080,inset -1px -1px #0000004d,inset 1px 1px #ffffff1a}.hud-label{font-size:var(--font-xs);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em}.hud-value{font-size:var(--font-xl);font-weight:700;color:var(--color-text)}#combo-display{color:var(--color-warning)}#timer-display{color:var(--color-accent)}.popup{background:var(--color-bg-secondary);border-radius:0;padding:var(--spacing-xl);margin:var(--spacing-md);max-width:400px;width:calc(100% - var(--spacing-lg) * 2);text-align:center;border:4px solid rgba(255,255,255,.3);box-shadow:8px 8px #00000080,inset -4px -4px #0000004d,inset 4px 4px #ffffff1a}.popup h2{font-size:var(--font-xl);margin-bottom:var(--spacing-lg);color:var(--color-accent);text-transform:uppercase;letter-spacing:.1em;text-shadow:2px 2px 0 rgba(0,0,0,.5)}.final-stats{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.stat{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-md);background:#0000004d;border-radius:0;border:2px solid rgba(255,255,255,.1)}.stat-label{color:var(--color-text-secondary);font-size:var(--font-sm)}.stat-value{font-size:var(--font-lg);font-weight:700}.highscore-badge{display:inline-block;background:var(--color-warning);color:#000;padding:var(--spacing-sm) var(--spacing-md);border-radius:0;font-weight:700;font-size:var(--font-xs);margin-bottom:var(--spacing-lg);animation:pulse 1.5s ease-in-out infinite;text-transform:uppercase;letter-spacing:.05em;box-shadow:3px 3px #00000080}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.highscore-header{display:flex;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);margin-bottom:var(--spacing-sm);background:#ffffff1a;border:2px solid rgba(255,255,255,.3);font-size:var(--font-xs);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-secondary)}.highscore-header span{flex:1;text-align:center}.highscore-header span:first-child{text-align:left;flex:.5}.highscore-header span:last-child{text-align:right;flex:.5}.highscore-list{list-style:none;margin-bottom:var(--spacing-lg);max-height:300px;overflow-y:auto}.highscore-list li{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-md);background:#0003;border-radius:0;margin-bottom:var(--spacing-xs);border:1px solid rgba(255,255,255,.1);font-size:var(--font-sm)}.highscore-list li .rank{flex:.5;text-align:left;font-weight:700;color:var(--color-text-secondary)}.highscore-list li .score{flex:1;text-align:center;font-weight:700;color:var(--color-text)}.highscore-list li .combo{flex:.5;text-align:right;color:var(--color-warning)}.highscore-list li.empty-scores{justify-content:center;color:var(--color-text-secondary);font-style:italic}.highscore-list li:nth-child(1){background:#ffd7004d;border-color:#ffd70080}.highscore-list li:nth-child(1) .rank{color:gold}.highscore-list li:nth-child(2){background:#c0c0c033;border-color:#c0c0c066}.highscore-list li:nth-child(2) .rank{color:silver}.highscore-list li:nth-child(3){background:#cd7f3233;border-color:#cd7f3266}.highscore-list li:nth-child(3) .rank{color:#cd7f32}.hidden{display:none!important}@media (min-width: 768px){:root{--font-3xl: 3.5rem;--font-2xl: 2.5rem;--font-xl: 1.75rem}.menu-container{padding:var(--spacing-2xl)}.btn{min-width:250px}.popup{padding:var(--spacing-2xl)}.hud-item{min-width:80px;padding:var(--spacing-md)}}@media (min-width: 1024px){:root{--font-3xl: 4rem}#hud{padding:var(--spacing-lg)}.hud-item{min-width:100px}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.screen.active{animation:fadeIn .3s ease}.popup{animation:slideUp .3s ease}@keyframes pop{0%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7}to{transform:scale(0);opacity:0}}@keyframes scoreFloat{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-50px) scale(1.2)}}.score-popup{position:absolute;font-size:var(--font-lg);font-weight:700;color:var(--color-warning);text-shadow:2px 2px 0 rgba(0,0,0,.5);animation:scoreFloat .8s ease-out forwards;pointer-events:none;z-index:50}@keyframes penaltyFloat{0%{opacity:1;transform:translate(-50%) translateY(0) scale(1)}to{opacity:0;transform:translate(-50%) translateY(30px) scale(.8)}}.penalty-popup{position:absolute;font-size:var(--font-lg);font-weight:700;color:var(--color-accent);text-shadow:2px 2px 0 rgba(0,0,0,.5);animation:penaltyFloat .8s ease-out forwards;pointer-events:none;z-index:50;transform:translate(-50%)}@keyframes fibonacciPulse{0%{opacity:0;transform:translate(-50%) scale(.5)}20%{opacity:1;transform:translate(-50%) scale(1.1)}40%{transform:translate(-50%) scale(1)}80%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%) scale(.9)}}.fibonacci-notification{position:absolute;top:50%;left:50%;transform:translate(-50%);font-size:var(--font-lg);font-weight:700;color:var(--color-success);text-shadow:3px 3px 0 rgba(0,0,0,.5);animation:fibonacciPulse 1.5s ease-out forwards;pointer-events:none;z-index:60;text-align:center;white-space:nowrap;background:#000000b3;padding:var(--spacing-sm) var(--spacing-lg);border:3px solid var(--color-success);box-shadow:4px 4px #00000080}.fibonacci-notification .fib-number{color:var(--color-warning);font-size:var(--font-xl)}@supports (padding: max(0px)){#hud{padding-top:max(var(--spacing-md),env(safe-area-inset-top));padding-left:max(var(--spacing-md),env(safe-area-inset-left));padding-right:max(var(--spacing-md),env(safe-area-inset-right))}}