:root{--turquoise: #1abc9c;--greensea: #16a085;--emerald: #2ecc71;--nephritis: #27ae60;--peterriver: #3498db;--belizehole: #2980b9;--amethyst: #9b59b6;--wisteria: #8e44ad;--wetasphalt: #34495e;--midnightblue: #2c3e50;--sunflower: #f1c40f;--orange: #f39c12;--carrot: #e67e22;--pumpkin: #d35400;--alizarin: #e74c3c;--pomegranate: #c0392b;--clouds: #ecf0f1;--silver: #bdc3c7;--concrete: #95a5a6;--asbestos: #7f8c8d}*{margin:0;padding:0;box-sizing:border-box}body{font-family:JetBrains Mono,monospace;background:#000;color:var(--clouds);overflow:hidden;position:relative}#app.app-grid{height:100vh;display:grid;grid-template-areas:"header header" "sidebar game";grid-template-rows:auto 1fr;grid-template-columns:clamp(18rem,16vw,40rem) 1fr}#app.app-grid.sidebar-collapsed{grid-template-columns:0 1fr}.header{grid-area:header;display:flex;align-items:center;justify-content:space-between;background:#34495ef2;padding:.75rem 1rem;border-bottom:2px solid var(--turquoise);backdrop-filter:blur(10px);z-index:100}.header-left{display:flex;align-items:center;gap:1rem;flex:1}.header-center{display:flex;align-items:center;justify-content:center;flex:0 0 auto}.header-right{display:flex;align-items:center;gap:.75rem;justify-content:flex-end;flex:1}.sidebar{grid-area:sidebar;background:#2c3e50f2;border-right:2px solid var(--turquoise);backdrop-filter:blur(10px);overflow-y:auto;overflow-x:hidden;padding:1rem;display:flex;flex-direction:column;gap:1.5rem;z-index:50}.sidebar.collapsed{transform:translate(-100%)}.game-area{grid-area:game;position:relative;overflow:hidden}#gameCanvas{width:100%;height:100%;background:linear-gradient(45deg,#1a1a2e,#16213e);display:block}.sidebar-toggle{background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s ease}.sidebar-toggle:hover{background:#1abc9c1a}.panel-icon{width:26px;height:26px;fill:var(--turquoise)}.game-title{font-size:18px;font-weight:700;color:var(--turquoise);text-shadow:1px 1px 0px var(--greensea);white-space:nowrap}.header-wave-status{display:flex;align-items:center;gap:.5rem;background:#1abc9c1a;padding:.375rem .75rem;border-radius:.25rem;border:1px solid var(--turquoise);height:2rem}.header-wave-status .wave-number{font-size:12px;font-weight:600;color:var(--turquoise);white-space:nowrap;min-width:6.5rem}.header-wave-status .progress-bar{width:6.25rem;height:.25rem;background:#34495ecc;border-radius:.125rem;overflow:hidden;border:1px solid var(--concrete);flex-shrink:0}.header-wave-status .progress-fill{height:100%;background:linear-gradient(90deg,var(--emerald),var(--turquoise));border-radius:.125rem;transition:width .3s ease}.header-wave-status.lobby{background:#f1c40f1a;border-color:var(--sunflower)}.header-wave-status.lobby .wave-number{color:var(--sunflower)}.header-wave-status.lobby .progress-fill{background:linear-gradient(90deg,var(--orange),var(--sunflower))}.header-wave-status .zombie-count{font-size:11px;font-weight:600;color:var(--alizarin);min-width:2rem;text-align:center;flex-shrink:0}.connection-status{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500}.status-dot{width:12px;height:12px;border-radius:50%;background:var(--emerald);animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.connection-performance{display:flex;align-items:center;gap:.75rem}.ping-display,.game-latency,.fps-counter{background:#2c3e50cc;padding:.25rem .5rem;border-radius:3px;font-size:11px;font-weight:600;font-family:JetBrains Mono,monospace;border:1px solid}.ping-display,.game-latency{color:var(--peterriver);border-color:var(--peterriver)}.fps-counter{color:var(--emerald);border-color:var(--emerald)}.header-controls{display:flex;align-items:center;gap:.5rem}.sound-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#2c3e50e6;border:2px solid var(--concrete);border-radius:4px;cursor:pointer;transition:all .2s ease;user-select:none}.sound-toggle:hover{background:#2c3e50;border-color:var(--turquoise);transform:scale(1.05)}.sound-toggle.sound-on{border-color:var(--emerald);background:#2ecc7133}.sound-toggle.sound-off{border-color:var(--alizarin);background:#e74c3c33}.sound-icon{font-size:16px;line-height:1}.camera-target-selector{display:flex;align-items:center}.camera-target-dropdown{background:#2c3e50e6;border:2px solid var(--concrete);border-radius:4px;padding:.375rem .75rem;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:500;color:var(--clouds);cursor:pointer;transition:all .2s ease;outline:none;min-width:80px}.camera-target-dropdown:hover{border-color:var(--turquoise);background:#2c3e50}.camera-target-dropdown:focus{border-color:var(--emerald);box-shadow:0 0 0 2px #2ecc714d}.camera-target-dropdown option{background:#2c3e50;color:var(--clouds)}.sidebar>*{flex-shrink:0}.sidebar .treasure-title,.sidebar .player-list-title,.sidebar .crafting-title{font-size:14px;font-weight:600;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}.sidebar .treasure-title{color:var(--sunflower)}.sidebar .player-list-title{color:var(--turquoise)}.sidebar .crafting-title{color:var(--amethyst)}.toast-container{position:absolute;top:1rem;right:1rem;z-index:200;pointer-events:none}.toast-container>*{pointer-events:auto}.game-end-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}@keyframes pulse-critical{0%{border-color:#f44}50%{border-color:#f88}to{border-color:#f44}}@keyframes gameEndPulse{0%{transform:scale(1);box-shadow:0 20px 60px #0009}to{transform:scale(1.02);box-shadow:0 25px 80px #000c}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.toast-container{position:absolute;bottom:80px;left:50%;transform:translate(-50%);z-index:1000;display:flex;flex-direction:column;gap:3px;pointer-events:none;align-items:center;max-height:10vh;overflow:hidden}.toast{background:#2ecc71f2;color:var(--clouds);padding:8px 12px;border-radius:4px;font-size:11px;font-weight:500;border-left:3px solid var(--emerald);animation:slideInFromBottom .3s ease;backdrop-filter:blur(10px);max-width:600px;word-wrap:break-word;text-align:center}.toast.error{background:#e74c3cf2;border-left-color:var(--alizarin)}.toast.craft-success{background:#3498dbf2;border-left-color:var(--peterriver)}@keyframes slideInFromBottom{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.toast.show{transform:translate(0);opacity:1}.toast-title{font-size:16px;margin-bottom:4px;display:block}.toast-message{font-size:14px;font-weight:400;opacity:.9;line-height:1.4}.treasure-health{background:#34495e99;padding:1rem;border-radius:6px;border:2px solid var(--alizarin)}.treasure-title{font-size:14px;font-weight:600;color:var(--sunflower);margin-bottom:.75rem;text-align:center}.health-bar{position:relative;height:20px;background:var(--asbestos);border-radius:10px;overflow:hidden;border:2px solid var(--wetasphalt)}.health-fill{height:100%;background:linear-gradient(90deg,var(--alizarin),var(--pomegranate));transition:width .3s ease;border-radius:8px}.health-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:600;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.8);z-index:1}.treasure-health.critical{border-color:var(--pomegranate);animation:pulse-critical 1s infinite}.treasure-health.critical .health-fill{background:linear-gradient(90deg,var(--pomegranate),#a93226)}@keyframes pulse-critical{0%,to{opacity:1}50%{opacity:.7}}.ready-up-prompt{background:#f1c40f1a;padding:1rem;border-radius:6px;border:2px solid var(--sunflower);text-align:center}.ready-up-title{font-size:14px;font-weight:600;color:var(--sunflower);margin-bottom:.5rem}.ready-up-message{font-size:12px;color:var(--clouds);line-height:1.4}.game-countdown{background:#1abc9c1a;padding:1rem;border-radius:6px;border:2px solid var(--turquoise);text-align:center}.countdown-title{font-size:14px;font-weight:600;color:var(--turquoise);margin-bottom:.5rem}.countdown-timer{font-size:24px;font-weight:700;color:var(--turquoise);font-family:JetBrains Mono,monospace}.wave-status{position:absolute;top:10px;transform:translate(50%);right:50%;background:#34495ed9;padding:12px;border-radius:6px;border:2px solid var(--peterriver);backdrop-filter:blur(10px);min-width:400px;z-index:200}.wave-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.wave-number{font-size:16px;font-weight:700;color:var(--sunflower)}.wave-state{font-size:10px;padding:2px 6px;border-radius:3px;background:var(--orange);color:var(--clouds);font-weight:600}.wave-state.in-progress{background:var(--alizarin)}.wave-state.preparing{background:var(--concrete)}.wave-state.ready{background:var(--peterriver)}.wave-state.victory{background:var(--emerald)}.wave-state.defeat{background:var(--pomegranate)}.zombies-remaining,.wave-info{margin-bottom:6px;font-size:11px;color:var(--silver)}.progress-container,.progress-bar{height:6px;background:var(--asbestos);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--emerald),var(--turquoise));transition:width .3s ease}.wave-status.preparing{border-color:var(--concrete)}.wave-status.preparing .progress-fill{background:linear-gradient(90deg,var(--concrete),var(--silver))}.wave-status.victory{border-color:var(--emerald)}.wave-status.victory .progress-fill{background:linear-gradient(90deg,var(--emerald),var(--nephritis))}.wave-status.ready{border-color:var(--peterriver)}.wave-status.ready .progress-fill{background:linear-gradient(90deg,var(--peterriver),var(--belizehole))}.wave-status.defeat{border-color:var(--alizarin)}.wave-status.defeat .progress-fill{background:linear-gradient(90deg,var(--alizarin),var(--pomegranate))}.wave-status.lobby{border-color:var(--sunflower)}.wave-status.lobby .progress-fill{background:linear-gradient(90deg,var(--sunflower),var(--orange))}.wave-status.countdown{border-color:var(--orange)}.wave-status.countdown .progress-fill{background:linear-gradient(90deg,var(--orange),var(--carrot))}.crafting-panel{background:#34495e99;padding:1rem;border-radius:6px;border:2px solid var(--amethyst)}.crafting-title{font-size:14px;font-weight:600;color:var(--amethyst);margin-bottom:.75rem;text-align:center}.recipes-container{display:flex;flex-direction:column;gap:.5rem}.recipe{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#0000004d;border-radius:4px;border:1px solid transparent;transition:all .2s ease}.crystal{width:14px;height:14px;border-radius:2px;border:1px solid rgba(255,255,255,.4);flex-shrink:0}.crystal.red{background:var(--alizarin)}.crystal.blue{background:var(--peterriver)}.crystal.green{background:var(--emerald)}.crystal.gray{background:var(--concrete)}.recipe-arrow{color:var(--silver);font-size:12px;margin:0 .25rem;flex-shrink:0}.recipe-result{font-size:10px;color:var(--clouds);font-weight:600;white-space:nowrap;flex:1;text-align:right}.recipe.highlighted{border:2px solid var(--amethyst);box-shadow:0 0 10px var(--amethyst),0 0 20px var(--amethyst);animation:craftingPulse .6s ease-in-out infinite alternate}@keyframes craftingPulse{0%{box-shadow:0 0 10px var(--amethyst),0 0 20px var(--amethyst);border-color:var(--amethyst)}to{box-shadow:0 0 15px var(--amethyst),0 0 30px var(--amethyst);border-color:#9b59b6cc}}.qr-code{background:#34495e99;padding:1rem;border-radius:6px;border:2px solid var(--concrete);transition:all .3s ease;margin-top:auto}.qr-code.lobby{padding:1.5rem;border-radius:8px;border-color:var(--turquoise)}.qr-title{font-size:14px;font-weight:600;color:var(--concrete);margin-bottom:.75rem;text-align:left}.qr-code.lobby .qr-title{color:var(--turquoise)}.qr-placeholder{width:100px;height:100px;background:var(--clouds);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--wetasphalt);margin:0 auto;transition:all .3s ease}.qr-code.lobby .qr-placeholder{width:150px;height:150px}.qr-placeholder img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.game-end-overlay{position:absolute;top:0;left:0;width:100vw;height:100vh;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(10px)}.game-end-content{background:#34495ef2;padding:40px;border-radius:12px;border:3px solid var(--turquoise);text-align:center;max-width:500px}.game-end-title{font-size:36px;font-weight:700;color:var(--emerald);margin-bottom:20px}.game-end-title.defeat{color:var(--alizarin)}.game-end-stats{background:#0000004d;padding:20px;border-radius:8px;margin:20px 0}.stat-row{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.stat-label{color:var(--silver)}.stat-value{color:var(--clouds);font-weight:600}.game-end-reason{font-size:16px;color:var(--sunflower);margin-top:15px}.game-end-stat-item{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.game-end-stat-label{color:var(--silver)}.game-end-stat-value{color:var(--clouds);font-weight:600}.game-end-content.victory{border-color:var(--emerald)}.game-end-content.victory .game-end-title{color:var(--emerald)}.game-end-content.defeat{border-color:var(--alizarin)}.game-end-content.defeat .game-end-title{color:var(--alizarin)}.game-end-countdown{font-size:18px;color:var(--silver);margin-top:20px;padding:12px;background:#0006;border-radius:6px;border:1px solid var(--asbestos)}.countdown-time{font-size:22px;font-weight:700;color:var(--orange);text-shadow:0 0 10px rgba(243,156,18,.5);transition:color .3s ease}.countdown-time.urgent{color:var(--alizarin);text-shadow:0 0 10px rgba(231,76,60,.7);animation:pulse 1s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.player-list{background:#34495e99;padding:1rem;border-radius:6px;border:2px solid var(--turquoise)}.player-list-title{font-size:14px;font-weight:600;color:var(--turquoise);margin-bottom:.75rem;text-align:center}.players-container{display:flex;flex-direction:column;gap:.75rem}.player-entry{display:flex;align-items:center;gap:.75rem}.player-indicator{width:16px;height:16px;border-radius:4px;border:2px solid var(--wetasphalt);flex-shrink:0}.player-info{flex:1;min-width:0}.player-name{font-size:12px;font-weight:600;color:var(--clouds);margin-bottom:.5rem;display:flex;align-items:center;justify-content:space-between;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-health-bar{position:relative;height:16px;background:var(--asbestos);border-radius:8px;overflow:hidden;border:2px solid var(--wetasphalt)}.player-health-fill{height:100%;background:linear-gradient(90deg,var(--emerald),var(--nephritis));transition:width .3s ease;border-radius:6px}.player-health-fill.low{background:linear-gradient(90deg,var(--orange),var(--carrot))}.player-health-fill.critical{background:linear-gradient(90deg,var(--alizarin),var(--pomegranate))}.player-health-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:9px;font-weight:600;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.8);z-index:1}.player-indicator.turquoise{background:#1abc9c}.player-indicator.red{background:#e74c3c}.player-indicator.green{background:#2ecc71}.player-indicator.blue{background:#3498db}.player-indicator.yellow{background:#f1c40f}.player-indicator.purple{background:#9b59b6}.player-indicator.orange{background:#f39c12}.player-indicator.carrot{background:#e67e22}.ready-status{font-size:9px;font-weight:600;padding:2px 6px;border-radius:3px;flex-shrink:0;min-width:40px;text-align:center}.ready-status.ready{color:var(--emerald);background:var(--nephritis)}.ready-status.not-ready{color:var(--clouds);background:var(--concrete)}.player-list.lobby{border-color:var(--sunflower)}.player-list.lobby .player-list-title{color:var(--sunflower)}