*{box-sizing:border-box;margin:0;padding:0}:root{--bg-dark: #0e0e10;--bg-panel: #18181b;--bg-card: #1f1f23;--text-primary: #efeff1;--text-secondary: #adadb8;--accent: #9147ff;--accent-hover: #772ce8;--success: #00c853;--warning: #ff9800;--danger: #f44336}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:var(--bg-dark);color:var(--text-primary);min-height:100vh}#app{display:flex;flex-direction:column;min-height:100vh}header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background-color:var(--bg-panel);border-bottom:1px solid var(--bg-card)}header h1{font-size:1.5rem}#user-info{display:flex;align-items:center;gap:1rem}button{background-color:var(--accent);color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background-color .2s}button:hover:not(:disabled){background-color:var(--accent-hover)}button:disabled{opacity:.5;cursor:not-allowed}button.secondary{background-color:var(--bg-card)}button.danger{background-color:var(--danger)}main{display:grid;grid-template-columns:300px 1fr 300px;gap:1rem;padding:1rem;flex:1}aside{background-color:var(--bg-panel);border-radius:8px;padding:1rem;display:flex;flex-direction:column}aside h2{font-size:1.1rem;margin-bottom:1rem;color:var(--text-secondary)}#queue-status{margin-bottom:1rem;font-size:.9rem;color:var(--text-secondary)}#queue-status span{color:var(--text-primary);font-weight:700}#queue-list{list-style:none;margin-top:1rem}#queue-list li{padding:.5rem;background-color:var(--bg-card);border-radius:4px;margin-bottom:.5rem;font-size:.9rem}#queue-list li.current{border-left:3px solid var(--accent)}#current-player-info{background-color:var(--bg-card);padding:1rem;border-radius:4px;margin:1rem 0}#current-player-info h3{font-size:.9rem;color:var(--text-secondary);margin-bottom:.5rem}#game-area{display:flex;flex-direction:column;align-items:center;background-color:var(--bg-panel);border-radius:8px;padding:1rem;position:relative}#game-canvas{background-color:#000;border-radius:4px;max-width:100%;cursor:pointer}#game-canvas:focus{outline:2px solid var(--accent)}#game-canvas-container{position:relative;display:inline-block}#demo-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;background:#0000004d;border-radius:4px;pointer-events:none}#demo-overlay.hidden{display:none}#play-now-btn{pointer-events:auto;background:linear-gradient(135deg,var(--accent),#7c3aed);color:#fff;border:none;padding:.875rem 2rem;font-size:1.25rem;font-weight:600;border-radius:8px;cursor:pointer;box-shadow:0 4px 20px #8b5cf680;transition:transform .2s,box-shadow .2s;animation:pulse-glow 2s ease-in-out infinite;text-align:center;line-height:1.2;letter-spacing:.02em;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}#play-now-btn:hover{transform:scale(1.05);box-shadow:0 6px 30px #8b5cf6b3}@keyframes pulse-glow{0%,to{box-shadow:0 4px 20px #8b5cf680}50%{box-shadow:0 4px 30px #8b5cf6cc}}#batch-wait-banner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#9147fff2,#6432c8f2);padding:2rem 3rem;border-radius:12px;text-align:center;z-index:15;border:3px solid #fff;box-shadow:0 0 40px #9147ff99;animation:pulse-glow 1.5s ease-in-out infinite}#batch-wait-banner h2{font-size:1.8rem;margin-bottom:.5rem;color:#fff}#batch-wait-timer{font-size:2.2rem;font-weight:700;color:#ffeb3b}#batch-wait-banner p{font-size:1.1rem;color:#ffffffe6;margin-top:.3rem}#batch-wait-banner .player-count{margin-top:1rem;font-size:1rem;color:#00e676}#batch-join-btn{margin-top:1rem;background:linear-gradient(135deg,#00e676,#00c853);color:#000;border:none;padding:.6rem 2rem;font-size:1.1rem;font-weight:700;border-radius:8px;cursor:pointer;box-shadow:0 4px 15px #00e67666;transition:transform .15s,box-shadow .15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}#batch-join-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px #00e67699}#batch-join-btn:active{transform:scale(.97)}#batch-wait-banner.hidden{display:none}@keyframes pulse-glow{0%,to{box-shadow:0 0 30px #9147ff80}50%{box-shadow:0 0 50px #9147ffe6}}#called-banner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#000000e6;padding:2rem 3rem;border-radius:8px;text-align:center;z-index:10;border:2px solid var(--accent)}#called-banner h2{color:var(--accent);font-size:2rem;margin-bottom:.5rem}#accept-timer{font-size:2rem;color:var(--warning)}#hud{display:flex;gap:2rem;margin-top:1rem;font-size:1.1rem}#hud span{font-weight:700;color:var(--accent)}#personal-best,#personal-best span{color:gold}#controls-help{margin-top:1rem;font-size:.85rem;color:var(--text-secondary);text-align:center}#leaderboard-tabs{display:flex;gap:.5rem;margin-bottom:1rem}#leaderboard-tabs button{flex:1;padding:.4rem;font-size:.8rem;background-color:var(--bg-card)}#leaderboard-tabs button.active{background-color:var(--accent)}#leaderboard-list{list-style:none;counter-reset:rank}#leaderboard-list li{display:flex;justify-content:space-between;padding:.5rem;background-color:var(--bg-card);border-radius:4px;margin-bottom:.5rem;font-size:.85rem}#leaderboard-list li:before{counter-increment:rank;content:counter(rank) ".";margin-right:.5rem;color:var(--text-secondary)}#leaderboard-list li .score{color:var(--accent);font-weight:700}#connection-status{position:fixed;bottom:1rem;right:1rem;display:flex;flex-direction:column;gap:.25rem;background-color:var(--bg-panel);padding:.5rem 1rem;border-radius:8px;font-size:.75rem}#socket-status,#twitch-chat-status{display:flex;align-items:center;gap:.5rem}@media (hover: none) and (pointer: coarse){#connection-status{display:none}}#connection-indicator{font-size:.6rem}#connection-indicator.connected{color:var(--success)}#connection-indicator.disconnected{color:var(--danger)}#connection-indicator.connecting{color:var(--warning)}#twitch-chat-indicator{font-size:.6rem}#twitch-chat-indicator.connected{color:var(--success)}#twitch-chat-indicator.disconnected{color:var(--danger)}.popup{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease}.popup.hidden{display:none}.popup-content{background:var(--bg-panel);border:2px solid var(--accent);border-radius:12px;padding:2rem 3rem;text-align:center;box-shadow:0 0 30px #9147ff4d;animation:popIn .3s ease}.popup-content h2{font-size:1.8rem;margin-bottom:.25rem;color:var(--accent)}.popup-subtitle{font-size:1.2rem;color:var(--text-secondary);margin-bottom:1rem;font-style:italic}.popup-highscore{font-size:1.1rem;font-weight:700;color:gold;margin-bottom:.75rem;text-shadow:0 0 10px rgba(255,215,0,.5);animation:pulse 1s ease-in-out infinite;white-space:pre-line}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.popup-score{font-size:2rem;font-weight:700;margin-bottom:1.5rem}.popup-score span{color:var(--success)}#popup-close{background:var(--accent);color:#fff;border:none;padding:.75rem 2rem;border-radius:6px;font-size:1rem;cursor:pointer;transition:background .2s}#popup-close:hover{background:var(--accent-hover)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@media (max-width: 1024px){main{grid-template-columns:1fr}aside{order:1}#game-area{order:0}#leaderboard-panel{order:2}}#login-prompt{pointer-events:auto;background:var(--bg-panel);border:2px solid var(--accent);border-radius:12px;padding:1rem 1.5rem;text-align:center;animation:popIn .3s ease-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20}#login-prompt.hidden{display:none}#login-prompt p{margin-bottom:.5rem}#login-prompt p:last-of-type{margin-bottom:1rem;color:var(--text-secondary)}#login-prompt-btn{background:var(--accent);padding:.5rem 1rem;font-size:.9rem;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}.guest-divider{display:block;margin:.75rem 0;color:var(--text-secondary);font-size:.85rem}#guest-play-btn{background:var(--bg-card);border:1px solid var(--text-secondary);padding:.5rem 1rem;font-size:.9rem;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}#guest-play-btn:hover{border-color:var(--accent)}.guest-note{margin-top:.5rem!important;margin-bottom:0!important;font-size:.75rem;color:var(--text-secondary);opacity:.8}#game-info{margin-top:1.5rem;max-width:1280px}.beta-banner{background:linear-gradient(90deg,#ff980033,#ff98001a);border:1px solid var(--warning);border-radius:8px;padding:.75rem 1rem;margin-bottom:1rem;display:flex;flex-direction:column;gap:.5rem}.beta-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.beta-tag{background:var(--warning);color:#000;font-weight:700;font-size:.75rem;padding:.25rem .5rem;border-radius:4px}.beta-banner code{background:#0000004d;padding:.2rem .4rem;border-radius:3px;font-family:monospace}.beta-banner a{color:#9146ff;text-decoration:none}.beta-banner a:hover{text-decoration:underline}.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}@media (max-width: 700px){.info-grid{grid-template-columns:1fr}}.info-card{background:var(--bg-panel);border-radius:8px;padding:1rem 1.25rem}.info-card h3{font-size:1rem;margin-bottom:.75rem;color:var(--accent)}.info-card ul{list-style:none;padding:0}.info-card li{padding:.3rem 0;color:var(--text-secondary);font-size:.9rem}.info-card li strong{color:var(--text-primary)}.bubble-legend{display:flex;flex-direction:column;gap:.5rem}.bubble-item{display:flex;align-items:center;gap:.75rem;font-size:.9rem;color:var(--text-secondary)}.bubble-item strong{color:var(--text-primary)}.bubble-dot{width:18px;height:18px;border-radius:50%;flex-shrink:0;box-shadow:0 0 8px currentColor}.bubble-dot.food{background:#4caf50;color:#4caf50}.bubble-dot.rare-food{background:gold;color:gold}.bubble-dot.speed-up{background:#ff9800;color:#ff9800}.bubble-dot.slow{background:#2196f3;color:#2196f3}.bubble-dot.kill-bonus{background:#e91e63;color:#e91e63}.bubble-dot.rainbow-bonus{background:conic-gradient(red,#f80,#ff0,#0f0,#08f,#80f,red);animation:rainbow-spin 2s linear infinite}@keyframes rainbow-spin{to{transform:rotate(360deg)}}#twitch-chat-embed{margin-top:1rem;border-top:1px solid var(--bg-card);padding-top:.75rem;min-height:420px}#twitch-chat-embed h2{font-size:1.1rem;margin-bottom:.5rem;color:var(--text-secondary)}#twitch-chat-embed iframe{display:block;width:100%;height:400px;min-height:400px;border:none;border-radius:4px}.mobile-only{display:none}.desktop-only{display:block}@media (hover: none) and (pointer: coarse){.mobile-only{display:flex}.desktop-only{display:none!important}#mobile-controls{display:flex}}#mobile-controls{display:none;position:fixed;bottom:0;left:0;right:0;padding:1rem;justify-content:space-between;align-items:flex-end;pointer-events:none;z-index:100}#mobile-controls>*{pointer-events:auto}#dpad{display:grid;grid-template-columns:repeat(3,60px);grid-template-rows:repeat(3,60px);gap:4px}.dpad-btn{background:#ffffff26;border:2px solid rgba(255,255,255,.3);border-radius:8px;color:#fff;font-size:1.5rem;display:flex;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-user-select:none;cursor:pointer;transition:background .1s,transform .05s}.dpad-btn:active{background:#fff6;transform:scale(.95)}.dpad-up{grid-column:2;grid-row:1}.dpad-left{grid-column:1;grid-row:2}.dpad-center{grid-column:2;grid-row:2;background:#9b59b64d;border-color:#9b59b680;pointer-events:none}.dpad-right{grid-column:3;grid-row:2}.dpad-down{grid-column:2;grid-row:3}.fire-btn{width:80px;height:80px;border-radius:50%;background:linear-gradient(145deg,#e67e22cc,#d35400cc);border:3px solid rgba(241,196,15,.6);font-size:2rem;display:flex;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-user-select:none;cursor:pointer;transition:transform .05s;box-shadow:0 4px 15px #e67e2266}.fire-btn:active{transform:scale(.9);box-shadow:0 2px 8px #e67e2299}#landscape-prompt{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000f2;z-index:9999;align-items:center;justify-content:center;flex-direction:column}#landscape-prompt.hidden{display:none!important}.landscape-content{text-align:center;color:#fff;padding:2rem}.rotate-icon{font-size:4rem;display:block;margin-bottom:1rem;animation:rotate-hint 2s ease-in-out infinite}@keyframes rotate-hint{0%,to{transform:rotate(0)}25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}}.landscape-content p{font-size:1.2rem;max-width:280px;margin:0 auto}@media (hover: none) and (pointer: coarse){#game-canvas-container{margin-bottom:180px}#hud{font-size:.85rem;padding:.5rem}#controls-help{font-size:.8rem;padding:.25rem}#game-info{display:none}}@media (hover: none) and (pointer: coarse) and (orientation: portrait){#landscape-prompt:not(.hidden){display:flex!important}}@media (hover: none) and (pointer: coarse) and (orientation: landscape){#landscape-prompt{display:none!important}header,#queue-panel,#leaderboard-panel,#game-info,.beta-banner,#beta-banner,#controls-help{display:none!important}body{overflow:hidden;position:fixed;width:100%;height:100%}#app{height:100vh;height:100dvh}main{display:block;padding:0;height:100vh;height:100dvh}#game-area{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center;padding:0;background:var(--bg-dark)}#game-canvas-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;margin:0}#game-canvas{width:100%;height:100%;object-fit:contain}#mobile-controls{position:fixed;bottom:10px;left:10px;right:10px;padding:0;display:flex;justify-content:space-between;align-items:flex-end;z-index:200}#dpad{grid-template-columns:repeat(3,50px);grid-template-rows:repeat(3,50px);gap:3px;opacity:.85}.dpad-btn{width:50px;height:50px;font-size:1.3rem}.fire-btn{width:70px;height:70px;font-size:1.8rem;opacity:.85}#hud{position:fixed;top:5px;left:50%;transform:translate(-50%);z-index:200;background:#000000b3;border-radius:6px;padding:3px 10px;font-size:.7rem;display:flex;gap:1rem}#hud p{margin:0}#called-banner,#batch-wait-banner,#demo-overlay{z-index:250}}