:root{--primary-color: #00d2ff;--secondary-color: #3a7bd5;--accent-color: #ff007f;--bg-color: #0a0a1a;--text-main: #ffffff;--glass-bg: rgba(20, 20, 40, .7);--glass-border: rgba(255, 255, 255, .15)}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}body,html{width:100%;height:100%;overflow:hidden;background-color:var(--bg-color);font-family:Outfit,sans-serif;color:var(--text-main);touch-action:none}#game-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}#mobile-controls{position:absolute;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:15;display:none}.joystick-base{position:absolute;width:90px;height:90px;background:#ffffff14;border:2px solid rgba(255,255,255,.2);border-radius:50%;pointer-events:auto;touch-action:none;box-shadow:0 0 15px #0000004d;transition:border-color .2s,background .2s}.joystick-base.active{background:#00d2ff1a;border-color:#00d2ff99;box-shadow:0 0 20px #00d2ff4d}.joystick-thumb{position:absolute;width:38px;height:38px;background:radial-gradient(circle,#ffffffe6,#c8c8c8cc);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 10px #0006;pointer-events:none;transition:transform .2s cubic-bezier(.25,.8,.25,1),background .2s}.joystick-thumb.dragging{transition:background .2s}.joystick-base.active .joystick-thumb{background:radial-gradient(circle,#00d2ff,#3a7bd5)}#joystick-left{left:25px;bottom:25px}#joystick-right{right:25px;bottom:25px}#btn-jump{position:absolute;right:110px;bottom:110px;width:54px;height:54px;background:#ffffff1f;border:2px solid rgba(255,255,255,.3);border-radius:50%;color:#fff;font-family:Outfit,sans-serif;font-size:.8rem;font-weight:900;pointer-events:auto;touch-action:none;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 15px #0006;transition:transform .1s,background .2s,border-color .2s,box-shadow .2s}#btn-jump.active,#btn-jump:active{background:linear-gradient(135deg,#ff007f,#f50);border-color:#ff007f;box-shadow:0 0 20px #ff007f99;transform:scale(.95)}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none}.screen{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .3s ease;padding:20px;overflow-y:auto}.screen.active{opacity:1;pointer-events:auto}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:24px;padding:40px 30px;width:100%;max-width:400px;text-align:center;box-shadow:0 8px 32px #00000080}.game-title{font-size:3rem;font-weight:900;line-height:1.1;margin-bottom:10px;text-shadow:0 0 20px rgba(0,210,255,.5)}.accent{color:var(--accent-color);text-shadow:0 0 20px rgba(255,0,127,.5)}.subtitle{font-size:1.1rem;opacity:.8;margin-bottom:30px}h2{font-size:2rem;margin-bottom:15px}h3{font-size:1.2rem;margin-bottom:10px;color:#aaa}.customization-panel{margin-bottom:20px;display:flex;flex-direction:column;gap:10px}.custom-row{display:flex;justify-content:space-around;align-items:center;gap:15px;font-size:.95rem}.custom-row label{display:flex;align-items:center;gap:8px;font-weight:700}input[type=color]{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.4);cursor:pointer;background:none;padding:0}select{font-family:Outfit,sans-serif;height:40px;padding:0 10px;border-radius:8px;background:#ffffff26;color:#fff;border:1px solid rgba(255,255,255,.3);font-weight:700}select option{background:#1a2a4a;color:#fff}input,button{font-family:Outfit,sans-serif;outline:none;border:none}input{width:100%;height:56px;border-radius:12px;padding:0 20px;font-size:1.2rem;background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);margin-bottom:15px;text-align:center;text-transform:uppercase}input:focus{border-color:var(--primary-color);box-shadow:0 0 10px #00d2ff4d}button{width:100%;height:56px;border-radius:12px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:transform .1s,box-shadow .2s}button:active{transform:scale(.96)}.primary-btn{background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;box-shadow:0 4px 15px #00d2ff66}.secondary-btn{background:#ffffff26;color:#fff;border:1px solid rgba(255,255,255,.3)}.divider{margin:20px 0;font-size:.9rem;color:#ffffff80;display:flex;align-items:center}.divider:before,.divider:after{content:"";flex:1;height:1px;background:#fff3;margin:0 10px}.room-code-display{font-size:3rem;font-weight:900;letter-spacing:5px;margin:20px 0;color:var(--primary-color);text-shadow:0 0 15px rgba(0,210,255,.4);background:#0000004d;padding:10px;border-radius:12px;user-select:all;-webkit-user-select:all}.player-list-container{margin-top:30px;margin-bottom:20px;text-align:left;background:#0003;padding:15px;border-radius:12px}#player-list{list-style:none;max-height:150px;overflow-y:auto}#player-list li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1)}#player-list li:last-child{border-bottom:none}.status-message{margin-top:15px;font-size:.9rem;color:#fa0;min-height:20px}#hud-screen{justify-content:flex-start;padding:20px}#hud-screen.active{pointer-events:none}.hud-top{width:100%;display:flex;justify-content:space-between;font-size:1.2rem;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.8)}.audio-settings{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left;font-size:.82rem;font-weight:700}.audio-settings label{display:grid;gap:5px}.audio-settings input[type=range]{width:100%;height:auto;margin:0;padding:0}.accessibility-settings{display:flex;justify-content:space-between;gap:8px;font-size:.78rem;text-align:left}.accessibility-settings label{display:flex;gap:5px;align-items:center}.control-help{font-size:.78rem;line-height:1.45;opacity:.8;text-align:left}.spectator-indicator{color:#ffe85a;letter-spacing:.08em}.round-announcement{position:fixed;top:22%;left:50%;transform:translate(-50%);color:#fff;font-size:clamp(2rem,8vw,4.5rem);font-weight:900;letter-spacing:.08em;text-shadow:0 3px 12px rgba(0,0,0,.8),0 0 22px var(--primary-color)}.event-announcement{position:fixed;top:36%;left:50%;transform:translate(-50%);color:#fff;font-size:clamp(1.15rem,4vw,2rem);font-weight:900;letter-spacing:.1em;text-align:center;text-shadow:0 3px 10px rgba(0,0,0,.9);animation:event-pop .22s ease-out}.event-announcement[data-kind=tile-warning],.event-announcement[data-kind=tile-break]{color:#ffe85a}.event-announcement[data-kind=elimination]{color:#ff8bbd}@keyframes event-pop{0%{opacity:0;transform:translate(-50%) scale(.75)}to{opacity:1;transform:translate(-50%) scale(1)}}.host-warning{margin-top:20px;background:#f00c;padding:10px 20px;border-radius:8px;font-weight:700;animation:pulse 1s infinite alternate}@keyframes pulse{0%{opacity:.8;transform:scale(1)}to{opacity:1;transform:scale(1.05)}}.rotate-device{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--bg-color);z-index:100;display:none;justify-content:center;align-items:center}@media screen and (orientation: portrait){.rotate-device{display:flex}#ui-layer{display:none}}@media screen and (max-height: 500px) and (orientation: landscape){.glass-panel{padding:15px 20px}.game-title{font-size:2rem;margin-bottom:5px}.subtitle{font-size:.9rem;margin-bottom:10px}input,button{height:45px;font-size:1rem;margin-bottom:10px}.divider{margin:10px 0}.room-code-display{font-size:2rem;margin:10px 0}.player-list-container{margin-top:15px;margin-bottom:10px;padding:10px}}.icon-btn{width:48px;height:48px;background:#ffffff26;border:1px solid rgba(255,255,255,.3);border-radius:12px;color:#fff;font-size:1.5rem;display:flex;justify-content:center;align-items:center;position:absolute;top:15px;right:15px;z-index:20;pointer-events:auto}#debug-overlay{display:none}#debug-overlay.active{display:block;position:fixed;right:12px;bottom:12px;z-index:20;padding:6px 9px;color:#d9f6ff;background:#0000008c;font:12px monospace;border-radius:4px;pointer-events:none}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}@media (max-width: 768px){#joystick-left{left:max(25px,env(safe-area-inset-left));bottom:max(25px,env(safe-area-inset-bottom))}#joystick-right{right:max(25px,env(safe-area-inset-right));bottom:max(25px,env(safe-area-inset-bottom))}#btn-jump{right:max(112px,calc(env(safe-area-inset-right) + 112px));bottom:max(112px,calc(env(safe-area-inset-bottom) + 112px));width:64px;height:64px}.icon-btn{top:max(15px,env(safe-area-inset-top));right:max(15px,env(safe-area-inset-right))}}