:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;overflow:hidden;user-select:none;-webkit-user-select:none}#app{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1}#modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:2000;display:flex;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000acc}.modal-window{position:relative;width:400px;max-width:90%;margin:0 auto;background:#001428f2;border:1px solid #00FFFF;box-shadow:0 0 20px #00ffff4d;padding:2rem;text-align:center;z-index:2001;color:#fff;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.modal-window h2{color:#0ff;margin-bottom:1rem;text-shadow:0 0 5px #00FFFF}.modal-content{margin-bottom:2rem;font-size:1rem;line-height:1.5}.error-msg{color:#f44;font-size:.9rem;margin-top:.5rem;height:1.2rem}#input-nickname{margin-top:10px}#lobby-user-info{display:flex;flex-direction:column;align-items:center;gap:5px}.user-rank-icon{width:120px;height:120px;display:flex;justify-content:center;align-items:center}.rank-img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 5px #00FFFF)}.user-name{font-size:1.2rem;font-weight:700;color:#0ff}.user-rank-name{font-size:.9rem;color:#aaa}canvas{display:block}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.hidden{opacity:0;pointer-events:none!important;visibility:hidden;display:none!important}.camera-controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);pointer-events:auto;display:flex;gap:10px;background:#00000080;padding:10px;border:1px solid #00FFFF;border-radius:8px;box-shadow:0 0 10px #0ff}.camera-controls button{background:transparent;border:1px solid #00FFFF;color:#0ff;padding:8px 16px;font-family:Orbitron,sans-serif;font-weight:700;cursor:pointer;transition:all .3s ease;text-transform:uppercase;border-radius:4px}.camera-controls button:hover{background:#0ff3;box-shadow:0 0 5px #0ff;text-shadow:0 0 5px #00FFFF}.camera-controls button:active{background:#00ffff80}#title-screen{position:absolute;top:0;left:0;width:100%;height:100%;z-index:20;display:flex;justify-content:center;align-items:center;background:#000000b3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:opacity .8s ease}.title-container{text-align:center;color:#0ff;font-family:Orbitron,sans-serif}.title-container h1{font-size:4rem;margin:0;text-shadow:0 0 20px #00FFFF,0 0 40px #0000FF;letter-spacing:.1em}.galaxy-title{background:linear-gradient(135deg,#e0ffff,#0ff,#00bfff,#8a2be2,#f0f);background-size:300% 300%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:galaxy-shimmer 8s ease infinite;text-shadow:0 0 30px rgba(0,255,255,.4)}@keyframes galaxy-shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.subtitle{font-size:1.2rem;margin-top:10px;margin-bottom:50px;color:#00ffffb3;letter-spacing:.2em}.menu-buttons{display:flex;flex-direction:column;gap:20px;width:300px;margin:0 auto}.menu-btn{background:#000000b3;border:1px solid #00FFFF;color:#0ff;padding:15px 40px;font-family:Orbitron,sans-serif;font-size:1.5rem;cursor:pointer;letter-spacing:3px;text-shadow:0 0 10px #00FFFF;transition:all .3s ease;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;line-height:1.2;box-shadow:0 0 15px #00ffff1a}.beta-badge{background:#f44;color:#fff;padding:5px 15px;font-family:Orbitron,sans-serif;font-weight:700;font-size:1rem;border-radius:4px;display:inline-block;margin-bottom:10px;box-shadow:0 0 10px #f44}.beta-warning{color:#fd0;font-size:.85rem;margin:20px 0;padding:10px;border:1px solid #FFDD00;background:#14140099;line-height:1.5;font-family:Yu Mincho,Hiragino Mincho ProN,serif}.subtitle-text{font-size:.6em;font-family:Yu Mincho,Hiragino Mincho ProN,serif;opacity:.8;margin-top:4px;font-weight:400;letter-spacing:1px;text-shadow:none}.cutin-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:Orbitron,sans-serif;font-size:8rem;font-weight:900;color:red;text-shadow:0 0 20px #FF0000,0 0 50px #550000;pointer-events:none;z-index:2000;white-space:nowrap;opacity:0}.cutin-check{color:#f33;text-shadow:0 0 20px #FF0000,0 0 40px #aa0000;animation:cutInShort 1.5s cubic-bezier(.1,.7,1,.1) forwards}.cutin-mate{color:gold;text-shadow:0 0 20px #FFD700,0 0 50px #FF8800;font-size:10rem;animation:cutInLong 4s ease-out forwards}@keyframes cutInShort{0%{opacity:0;transform:translate(-50%,-50%) scale(4);letter-spacing:100px}15%{opacity:1;transform:translate(-50%,-50%) scale(1);letter-spacing:0px}70%{opacity:1;transform:translate(-50%,-50%) scale(1.1);letter-spacing:10px}to{opacity:0;transform:translate(-50%,-50%) scale(1.2);letter-spacing:20px;filter:blur(10px)}}@keyframes cutInLong{0%{opacity:0;transform:translate(-50%,-50%) scale(.1);letter-spacing:-50px}20%{opacity:1;transform:translate(-50%,-50%) scale(1.2);letter-spacing:10px}30%{transform:translate(-50%,-50%) scale(1);letter-spacing:5px}80%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}to{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}.menu-btn:not(.disabled):hover{background:#0ff3;box-shadow:0 0 25px #00ffff80;text-shadow:0 0 10px #00FFFF;transform:scale(1.05)}.menu-btn.disabled{border-color:#555;color:#555;cursor:not-allowed;box-shadow:none;background:#00000080}.tag{font-size:.7rem;background:#f44;color:#fff;padding:2px 6px;border-radius:3px;margin-left:10px;vertical-align:middle;text-shadow:none}.hud-panel{position:absolute;top:20px;background:#00142899;border:1px solid rgba(0,255,255,.5);padding:10px 20px;border-radius:5px;color:#0ff;font-family:Orbitron,sans-serif;box-shadow:0 0 10px #00ffff1a;min-width:120px;z-index:100;pointer-events:none}.hud-panel button,.hud-panel .text-btn,.hud-panel input,.hud-panel .player-name,.hud-panel .player-timer{pointer-events:auto;cursor:pointer;position:relative;z-index:101}.top-left{left:20px;top:20px;border-left:4px solid #00FFFF}.top-right{right:20px;top:20px;border-right:4px solid #FF4444;text-align:right}.player-name{font-size:.8rem;opacity:.8;letter-spacing:1px}.player-timer{font-size:1.5rem;font-weight:700;text-shadow:0 0 5px currentColor}.turn-message{position:absolute;top:15%;left:50%;transform:translate(-50%);font-family:Orbitron,sans-serif;font-size:2.5rem;font-weight:700;color:#fff;text-shadow:0 0 10px #00FFFF,0 0 20px #0000FF;background:#000000b3;padding:15px 50px;border-top:2px solid #00FFFF;border-bottom:2px solid #00FFFF;pointer-events:none;animation:slide-in-fade .5s ease-out;white-space:nowrap;z-index:100;transition:opacity .5s ease}.hud-rank-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}.hud-rank-icon{width:24px;height:24px;object-fit:contain}.hud-rank-name{font-size:.7rem;color:#ade;letter-spacing:1px}.hud-nickname{font-size:1.1rem;font-weight:700;color:#0ff;letter-spacing:1px;text-shadow:0 0 5px rgba(0,255,255,.5);margin-bottom:5px}.top-right .hud-rank-row{justify-content:flex-end}.top-right .hud-nickname{color:#f77;text-shadow:0 0 5px rgba(255,68,68,.5)}.turn-message.enemy{color:#faa;text-shadow:0 0 10px #FF0000;border-color:red}.timer-low{color:#fd0;animation:pulse-red 1s infinite}@keyframes slide-in-fade{0%{transform:translate(-50%,-20px);opacity:0}to{transform:translate(-50%);opacity:1}}@keyframes pulse-red{0%{opacity:1}50%{opacity:.5}to{opacity:1}}#lobby-screen{position:absolute;top:0;left:0;width:100%;height:100%;z-index:20;display:flex;flex-direction:column;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .5s ease;overflow-y:auto;padding:20px 0}.lobby-container{margin:auto;text-align:center;color:#0ff;font-family:Orbitron,sans-serif;width:90%;max-width:400px;padding:40px;border:1px solid rgba(0,255,255,.3);background:#00142899;box-shadow:0 0 20px #0ff3;border-radius:10px}.lobby-container h2{font-size:2rem;margin-bottom:30px;text-shadow:0 0 10px #00FFFF}.lobby-section{margin:20px 0;display:flex;flex-direction:column;gap:15px}.prominent-btn{background:linear-gradient(45deg,#00c3ff,#06c);border:1px solid #00FFFF;font-size:1.2rem;padding:1.2rem;box-shadow:0 0 15px #00ffff80;margin-bottom:20px}.prominent-btn:hover{background:linear-gradient(45deg,#0ff,#08f);transform:scale(1.05)}.text-btn{background:transparent;border:1px solid rgba(0,255,255,.3);font-size:.9rem;color:#0ff9;cursor:pointer;padding:10px;font-family:Orbitron,sans-serif;letter-spacing:1px;transition:all .3s;text-decoration:underline}.text-btn:hover{background:#00ffff1a;border-color:#0ff;color:#0ff;text-shadow:0 0 5px #00FFFF}.divider{margin:20px 0;color:#00ffff80;font-size:.9rem;letter-spacing:2px}#input-room-id{background:#00000080;border:2px solid #00FFFF;color:#fff;padding:15px;font-size:1.2rem;text-align:center;font-family:Orbitron,sans-serif;letter-spacing:5px;border-radius:5px;outline:none;transition:all .3s ease}#input-room-id:focus{background:#00323ccc;box-shadow:0 0 15px #00ffff4d}.status-msg{min-height:24px;margin:15px 0;color:gold;font-size:.9rem;text-shadow:0 0 5px #FFD700}.text-btn{background:none;border:none;color:#0ff9;cursor:pointer;padding:10px;font-family:Orbitron,sans-serif;letter-spacing:1px;transition:all .3s;text-decoration:underline}.text-btn:hover{color:#0ff;text-shadow:0 0 5px #00FFFF}.waiting-pulse{animation:pulse-gold 2s infinite}@keyframes pulse-gold{0%{opacity:.6}50%{opacity:1;text-shadow:0 0 10px #FFD700}to{opacity:.6}}#modal-mission-result{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;z-index:3000;pointer-events:auto;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.mission-modal-content{background:#000a14f2;border:2px solid #00FFFF;padding:40px 60px;text-align:center;border-radius:10px;box-shadow:0 0 30px #00ffff4d;position:relative;overflow:hidden;min-width:400px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:modal-enter .5s cubic-bezier(.175,.885,.32,1.275);pointer-events:auto}.mission-title{font-family:Orbitron,sans-serif;font-size:2.5rem;margin:0;letter-spacing:4px;text-transform:uppercase;text-shadow:0 0 10px currentColor}.mission-reason{font-family:Rajdhani,sans-serif;font-size:1.5rem;color:#ade;margin-top:10px;letter-spacing:2px}.mission-divider{height:2px;background:linear-gradient(90deg,transparent,currentColor,transparent);margin:20px 0 30px;opacity:.7}.theme-victory{border-color:#0ff;box-shadow:0 0 50px #0ff6}.theme-victory .mission-title,.theme-victory .mission-divider{color:#0ff}.theme-defeat{border-color:#f33;box-shadow:0 0 50px #f336}.theme-defeat .mission-title,.theme-defeat .mission-divider{color:#f33}@keyframes modal-enter{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@media (max-width: 768px){.title-container h1{font-size:2.5rem}.menu-buttons{width:250px}.menu-btn{font-size:1.2rem;padding:12px 20px}.lobby-container{width:95%;padding:20px;margin-top:20px}.user-rank-icon{width:80px;height:80px}.hud-panel{padding:5px 10px;min-width:auto}.player-timer{font-size:1.2rem}.player-name{font-size:.7rem}.turn-message{font-size:1.5rem;padding:8px 20px;width:80%;text-align:center;white-space:normal}.cutin-text{font-size:4rem}.cutin-mate{font-size:5rem}.modal-window,.mission-modal-content{width:90%;min-width:auto;padding:20px}.mission-title{font-size:1.8rem}.mission-reason{font-size:1.1rem}.camera-controls{width:90%;flex-wrap:wrap;justify-content:center}.camera-controls button{padding:8px 12px;font-size:.8rem;flex:1 1 auto}}