:root{--bg:#0d0f14;--bg2:#13161f;--bg3:#1a1f2e;--border:#2a3050;--accent:#c8a84b;--accent2:#e8c86a;--red:#e74c3c;--blue:#3498db;--green:#2ecc71;--orange:#f39c12;--text:#e8eaf0;--text2:#8892a4;--radius:8px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:var(--bg);height:100%;color:var(--text);font-family:Segoe UI,system-ui,sans-serif;font-size:15px;line-height:1.5}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent2)}button{cursor:pointer;border-radius:var(--radius);border:none;outline:none;font-family:inherit;font-size:14px;transition:all .15s}input,select{background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);outline:none;width:100%;padding:10px 14px;font-family:inherit;font-size:14px;transition:border-color .15s}input:focus,select:focus{border-color:var(--accent)}input::placeholder{color:var(--text2)}.btn{background:linear-gradient(180deg, var(--accent2) 0%, var(--accent) 100%);color:#0d0f14;letter-spacing:.5px;padding:10px 22px;font-weight:700;transition:all .18s cubic-bezier(.2,.8,.2,1)}.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed;filter:none;transform:none}.btn-ghost{color:var(--text);border:1px solid var(--border);background:0 0;padding:10px 22px;transition:all .18s}.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:#c8a84b0f}.btn-danger{background:var(--red);color:#fff;padding:8px 16px;transition:all .18s}.btn-danger:hover{background:#c0392b;transform:translateY(-1px)}.btn-sm{padding:6px 14px;font-size:12px}.card{background:linear-gradient(180deg, var(--bg2) 0%, #11141d 100%);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:0 4px 20px #00000040}.page{flex-direction:column;align-items:center;min-height:100vh;padding:40px 20px;display:flex}.logo-text{letter-spacing:6px;color:var(--accent);text-transform:uppercase;text-shadow:0 0 40px #c8a84b4d;font-size:2.8rem;font-weight:900}.tagline{color:var(--text2);letter-spacing:3px;text-transform:uppercase;font-size:12px}.badge-rank{background:linear-gradient(180deg, var(--accent2) 0%, var(--accent) 100%);color:#0d0f14;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;padding:3px 9px;font-size:11px;font-weight:700;display:inline-block;box-shadow:0 1px 4px #c8a84b40}.error-msg{color:var(--red);margin-top:6px;font-size:13px}.spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:20px;height:20px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}@media (width<=768px){.lobby-body{flex-direction:column!important}.lobby-right{width:100%!important}.lobby-header{flex-wrap:wrap;gap:10px;padding:12px 16px!important}.lobby-user{flex-wrap:wrap;gap:8px}.lobby-body{padding:16px!important}.room-header{padding:10px 14px!important}.room-body{padding:20px 14px!important}.players-grid{grid-template-columns:repeat(2,1fr)!important}.dir-grid{grid-template-rows:repeat(3,70px)!important;grid-template-columns:repeat(3,70px)!important}.game-hud-top{flex-wrap:wrap;gap:8px;padding:8px 12px!important}.hud-players{gap:8px}.hud-player{padding:4px 8px!important;font-size:12px!important}.game-hud-bottom{flex-direction:column;gap:8px;padding:10px 14px!important}.hud-my-info{gap:20px}.profile-body{padding:16px!important}.stats-grid{grid-template-columns:repeat(2,1fr)!important}.gameover-card{padding:20px 16px!important}.welcome-content .logo-text{font-size:3.5rem!important}.welcome-btns .btn,.welcome-btns .btn-ghost{padding:12px 28px!important;font-size:14px!important}.welcome-features{gap:16px!important}}.welcome-page{background:radial-gradient(ellipse at 50% 0%, #c8a84b0f 0%, transparent 55%), radial-gradient(ellipse at 20% 80%, #3498db0d 0%, transparent 50%), radial-gradient(ellipse at 85% 70%, #e74c3c0a 0%, transparent 50%), var(--bg);justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative;overflow:hidden}.welcome-page:before{content:"";transform-origin:50%;pointer-events:none;background-image:linear-gradient(#c8a84b0a 1px,#0000 1px),linear-gradient(90deg,#c8a84b0a 1px,#0000 1px);background-size:48px 48px;animation:30s linear infinite gridDrift;position:absolute;inset:-50%;transform:perspective(500px)rotateX(55deg)translateY(-10%);-webkit-mask-image:radial-gradient(#000 0%,#0000 70%);mask-image:radial-gradient(#000 0%,#0000 70%)}@keyframes gridDrift{0%{background-position:0 0}to{background-position:48px 48px}}.welcome-glow{pointer-events:none;background:radial-gradient(circle,#c8a84b1a 0%,#0000 65%);width:700px;height:700px;animation:5s ease-in-out infinite glowPulse;position:absolute;top:28%;left:50%;transform:translate(-50%,-50%)}@keyframes glowPulse{0%,to{opacity:.6;transform:translate(-50%,-50%)scale(1)}50%{opacity:1;transform:translate(-50%,-50%)scale(1.08)}}.welcome-content{text-align:center;z-index:1;max-width:540px;animation:.8s cubic-bezier(.2,.8,.2,1) fadeUp}@keyframes fadeUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.welcome-content .tagline{animation:.8s cubic-bezier(.2,.8,.2,1) .1s both fadeUp}.welcome-content .logo-text{background:linear-gradient(180deg, #f0d98a 0%, var(--accent) 60%, #9a7e34 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 40px #c8a84b59);-webkit-background-clip:text;background-clip:text;margin:14px 0 22px;font-size:5.5rem;animation:.9s cubic-bezier(.2,.8,.2,1) .15s both fadeUp}.welcome-desc{color:var(--text2);margin-bottom:38px;font-size:15px;line-height:1.8;animation:.9s cubic-bezier(.2,.8,.2,1) .25s both fadeUp}.welcome-btns{margin-bottom:52px;animation:.9s cubic-bezier(.2,.8,.2,1) .35s both fadeUp}.welcome-btns .btn{letter-spacing:2px;padding:15px 44px;font-size:15px;box-shadow:0 6px 24px #c8a84b40}.welcome-btns .btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px #c8a84b66}.welcome-btns .btn-ghost{padding:15px 30px;font-size:15px}.welcome-features{flex-wrap:wrap;justify-content:center;gap:32px;animation:.9s cubic-bezier(.2,.8,.2,1) .45s both fadeUp;display:flex}.feat{color:var(--text2);text-transform:uppercase;letter-spacing:1px;flex-direction:column;align-items:center;gap:8px;font-size:12px;transition:color .2s,transform .2s;display:flex}.feat:hover{color:var(--accent);transform:translateY(-3px)}.feat-icon{filter:drop-shadow(0 2px 8px #0006);font-size:26px}.auth-page{justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.auth-card{width:100%;max-width:400px}.auth-logo{text-align:center;margin-bottom:24px}.auth-tabs{background:var(--bg3);border-radius:var(--radius);gap:4px;margin-bottom:20px;padding:4px;display:flex}.auth-tab{color:var(--text2);letter-spacing:.5px;text-transform:uppercase;background:0 0;border-radius:6px;flex:1;padding:8px;font-size:13px;font-weight:600}.auth-tab.active{background:var(--bg2);color:var(--accent);border:1px solid var(--border)}.auth-tab:hover:not(.active){color:var(--text)}.auth-form{flex-direction:column;gap:12px;display:flex}.auth-form .btn{letter-spacing:1.5px;margin-top:4px;font-size:13px}.guest-info{color:var(--text2);text-align:center;padding:8px 0;font-size:13px;line-height:1.6}.info-msg{color:var(--green);text-align:center;margin-bottom:12px;font-size:13px}.forgot-link{color:var(--text2);margin-top:4px;font-size:12px;display:inline-block}.forgot-link:hover{color:var(--accent)}.ranks-overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:200;background:#000000c7;justify-content:center;align-items:center;padding:20px;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1}}.ranks-modal{background:linear-gradient(180deg, var(--bg2) 0%, #11141d 100%);border:1px solid var(--accent);border-radius:14px;flex-direction:column;width:100%;max-width:420px;max-height:85vh;animation:.25s cubic-bezier(.2,.9,.3,1.2) popIn;display:flex;overflow:hidden;box-shadow:0 0 60px #c8a84b26}@keyframes popIn{0%{opacity:0;transform:scale(.92)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}.ranks-header{border-bottom:1px solid var(--border);letter-spacing:1px;text-transform:uppercase;color:var(--accent);justify-content:space-between;align-items:center;padding:16px 20px;font-size:15px;font-weight:700;display:flex}.ranks-close{color:var(--text2);cursor:pointer;background:0 0;border:none;border-radius:5px;padding:4px 8px;font-size:16px}.ranks-close:hover{background:var(--bg3);color:var(--text)}.ranks-list{flex-direction:column;flex:1;gap:4px;padding:10px;display:flex;overflow-y:auto}.rank-row{border:1px solid #0000;border-radius:8px;align-items:center;gap:14px;padding:10px 14px;transition:all .15s;display:flex}.rank-row.locked{opacity:.5}.rank-row.achieved{opacity:1}.rank-row.current{border-color:var(--accent);background:#c8a84b1a}.rank-row-insignia{flex-shrink:0;justify-content:center;width:40px;display:flex}.rank-row-info{flex-direction:column;flex:1;gap:2px;display:flex}.rank-row-name{font-size:14px;font-weight:700}.rank-row-lvl{color:var(--text2);text-transform:uppercase;letter-spacing:.5px;font-size:11px}.rank-row-xp{text-align:right}.rank-badge-current{background:linear-gradient(180deg, var(--accent2), var(--accent));color:#0d0f14;letter-spacing:1px;border-radius:4px;padding:3px 9px;font-size:10px;font-weight:800}.rank-check{color:var(--green);font-size:18px;font-weight:700}.rank-needed{color:var(--text);flex-direction:column;align-items:flex-end;font-size:13px;font-weight:700;display:flex}.rank-needed-sub{color:var(--text2);margin-top:1px;font-size:10px;font-weight:400}.ranks-footer{border-top:1px solid var(--border);text-align:center;color:var(--text2);padding:14px 20px;font-size:13px}.ranks-footer strong{color:var(--accent)}.htp-overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:200;background:#000c;justify-content:center;align-items:center;padding:20px;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.htp-modal{background:linear-gradient(180deg, var(--bg2) 0%, #11141d 100%);border:1px solid var(--accent);border-radius:14px;flex-direction:column;width:100%;max-width:560px;max-height:88vh;animation:.25s cubic-bezier(.2,.9,.3,1.2) popIn;display:flex;overflow:hidden;box-shadow:0 0 70px #c8a84b26}.htp-header{border-bottom:1px solid var(--border);letter-spacing:1px;text-transform:uppercase;color:var(--accent);flex-shrink:0;justify-content:space-between;align-items:center;padding:16px 22px;font-size:16px;font-weight:700;display:flex}.htp-close{color:var(--text2);cursor:pointer;background:0 0;border:none;border-radius:5px;padding:4px 8px;font-size:16px}.htp-close:hover{background:var(--bg3);color:var(--text)}.htp-body{padding:8px 22px 22px;overflow-y:auto}.htp-section{border-bottom:1px solid #2a305080;padding:18px 0}.htp-section:last-child{border-bottom:none}.htp-section h3{color:var(--text);align-items:center;gap:8px;margin-bottom:10px;font-size:15px;font-weight:700;display:flex}.htp-icon{font-size:18px}.htp-section p{color:var(--text2);margin-bottom:8px;font-size:14px;line-height:1.65}.htp-section p strong{color:var(--text)}.htp-section ul{flex-direction:column;gap:6px;margin:8px 0 0;padding:0;list-style:none;display:flex}.htp-section li{color:var(--text2);align-items:center;gap:8px;font-size:13.5px;line-height:1.5;display:flex}.htp-section li strong{color:var(--text)}.dot{border-radius:3px;flex-shrink:0;width:12px;height:12px;display:inline-block}.dot.bot{background:#1f3c5c;border:1px solid #2a3a55}.dot.ply{background:#e74c3c}.htp-svg{border:1px solid var(--border);background:#0a0d1580;border-radius:8px;width:100%;max-width:340px;height:auto;margin:4px auto 12px;padding:6px;display:block}.htp-xp{border-collapse:collapse;width:100%;margin-top:10px;font-size:13px}.htp-xp th,.htp-xp td{text-align:center;border:1px solid var(--border);padding:6px 10px}.htp-xp th{background:var(--bg3);color:var(--accent);text-transform:uppercase;font-size:11px}.htp-xp td{color:var(--text2)}.htp-xp td:first-child{color:var(--text);font-weight:700}.htp-footer{border-top:1px solid var(--border);text-align:center;flex-shrink:0;padding:16px 22px}.htp-footer .btn{letter-spacing:1.5px;padding:12px 32px}@media (width<=600px){.htp-body{padding:8px 16px 16px}.htp-header{padding:14px 16px;font-size:14px}}.lobby-page{isolation:isolate;flex-direction:column;min-height:100vh;display:flex;position:relative}.lobby-page:before{content:"";z-index:-1;pointer-events:none;background-image:radial-gradient(at 80% 10%,#c8a84b0d 0%,#0000 45%),radial-gradient(at 10% 90%,#3498db0a 0%,#0000 45%),linear-gradient(#c8a84b06 1px,#0000 1px),linear-gradient(90deg,#c8a84b06 1px,#0000 1px);background-size:auto,auto,44px 44px,44px 44px;animation:40s linear infinite lobbyGridDrift;position:fixed;inset:0}@keyframes lobbyGridDrift{0%{background-position:0 0,0 0,0 0,0 0}to{background-position:0 0,0 0,44px 44px,44px 44px}}.lobby-header{border-bottom:1px solid var(--border);background:var(--bg2);justify-content:space-between;align-items:center;padding:16px 32px;display:flex}.lobby-user{align-items:center;gap:12px;display:flex}.lobby-username{font-weight:600}.lobby-xp{color:var(--accent);font-size:13px}.lobby-body{flex:1;gap:24px;width:100%;max-width:1100px;margin:0 auto;padding:32px;display:flex}.lobby-left{flex:1}.lobby-right{flex-shrink:0;width:320px}.lobby-section-title{letter-spacing:2px;text-transform:uppercase;color:var(--text2);margin-bottom:12px;font-size:11px}.lobby-section-head{justify-content:space-between;align-items:center;display:flex}.quickmatch-btn{letter-spacing:.5px;margin-bottom:12px;padding:8px 18px;font-size:13px}.lb-viewall{color:var(--accent);cursor:pointer;background:0 0;border:none;margin-bottom:12px;font-size:12px}.lb-viewall:hover{color:var(--accent2);text-decoration:underline}.no-rooms{text-align:center;color:var(--text2);padding:40px 0}.room-list{flex-direction:column;gap:10px;margin-bottom:16px;display:flex}.room-item{justify-content:space-between;align-items:center;padding:14px 18px;transition:all .18s cubic-bezier(.2,.8,.2,1);display:flex;position:relative;overflow:hidden}.room-item:before{content:"";background:var(--accent);width:3px;transition:transform .2s;position:absolute;top:0;bottom:0;left:0;transform:scaleY(0)}.room-item:hover{border-color:var(--accent);transform:translate(4px)}.room-item:hover:before{transform:scaleY(1)}.room-item-left{align-items:center;gap:12px;display:flex}.room-item-info{flex-direction:column;gap:2px;display:flex}.room-code{letter-spacing:2px;color:var(--accent);font-size:16px;font-weight:700}.room-host{color:var(--text2);font-size:12px}.room-item-right{align-items:center;gap:12px;display:flex}.room-players{color:var(--text2);font-size:13px}.join-private{gap:8px;margin-top:8px;display:flex}.create-form{flex-direction:column;gap:10px;display:flex}.create-form label{letter-spacing:1px;text-transform:uppercase;color:var(--text2);margin-bottom:-4px;font-size:11px}.create-form .btn{letter-spacing:1px;margin-top:4px}.lb-row{border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:8px 0;display:flex}.lb-row:last-child{border-bottom:none}.lb-rank{width:28px;color:var(--text2);font-size:12px}.lb-name{flex:1;font-size:13px;font-weight:600}.lb-xp{color:var(--accent);font-size:12px}.chatbox{z-index:50;position:fixed;bottom:80px;right:20px}.chat-toggle{background:var(--bg2);border:1px solid var(--border);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:20px;transition:border-color .2s;display:flex;position:relative;box-shadow:0 4px 16px #0006}.chat-toggle:hover{border-color:var(--accent)}.chat-badge{background:var(--red);color:#fff;text-align:center;border-radius:10px;min-width:16px;padding:1px 5px;font-size:10px;font-weight:700;position:absolute;top:-4px;right:-4px}.chat-panel{background:var(--bg2);border:1px solid var(--border);border-radius:12px;flex-direction:column;width:300px;display:flex;position:absolute;bottom:56px;right:0;overflow:hidden;box-shadow:0 8px 32px #00000080}.chat-header{border-bottom:1px solid var(--border);letter-spacing:1px;text-transform:uppercase;color:var(--text2);justify-content:space-between;align-items:center;padding:10px 14px;font-size:13px;font-weight:700;display:flex}.chat-close{color:var(--text2);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:2px 6px;font-size:14px}.chat-close:hover{background:var(--bg3);color:var(--text)}.chat-messages{flex-direction:column;flex:1;gap:6px;height:240px;padding:10px 12px;display:flex;overflow-y:auto}.chat-empty{color:var(--text2);text-align:center;padding:20px 0;font-size:12px;font-style:italic}.chat-msg{flex-direction:column;align-items:flex-start;gap:2px;display:flex}.chat-msg.mine{align-items:flex-end}.chat-who{color:var(--text2);letter-spacing:.5px;padding:0 4px;font-size:10px}.chat-text{background:var(--bg3);color:var(--text);word-break:break-word;border-radius:10px;max-width:220px;padding:6px 10px;font-size:13px;line-height:1.4}.chat-msg.mine .chat-text{background:var(--accent);color:#0d0f14}.chat-input-row{border-top:1px solid var(--border);gap:6px;padding:10px 12px;display:flex}.chat-input-row input{border-radius:8px;flex:1;padding:7px 10px;font-size:13px}.chat-send-btn{background:var(--accent);color:#0d0f14;cursor:pointer;border:none;border-radius:8px;flex-shrink:0;width:34px;font-size:14px}.chat-send-btn:hover{background:var(--accent2)}.chat-send-btn:disabled{opacity:.4;cursor:not-allowed}@media (width<=768px){.chatbox{bottom:90px;right:12px}.chat-panel{width:260px}}.room-page{flex-direction:column;min-height:100vh;display:flex}.room-header{border-bottom:1px solid var(--border);background:var(--bg2);justify-content:space-between;align-items:center;padding:14px 24px;display:flex}.room-header-center{align-items:center;gap:14px;display:flex}.room-header-code{letter-spacing:4px;color:var(--accent);font-size:18px;font-weight:700}.room-type-badge{text-transform:uppercase;letter-spacing:1px;color:var(--text2);border:1px solid var(--border);border-radius:4px;padding:2px 7px;font-size:10px}.room-body{flex-direction:column;flex:1;align-items:center;gap:40px;padding:40px 24px;display:flex}.section-label{letter-spacing:2px;text-transform:uppercase;color:var(--text2);margin-bottom:14px;font-size:11px}.room-players-section{width:100%;max-width:700px}.players-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;display:grid}.player-card{flex-direction:column;gap:10px;padding:16px;display:flex;position:relative}.player-card.me{border-color:var(--accent)}.player-card.empty{opacity:.4}.player-card-top{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.player-name{font-size:14px;font-weight:700}.guest-tag,.host-tag,.bot-tag{text-transform:uppercase;letter-spacing:.5px;border-radius:3px;padding:2px 5px;font-size:9px;font-weight:700}.guest-tag{background:var(--bg3);color:var(--text2)}.host-tag{background:var(--accent);color:#0d0f14}.bot-tag{background:var(--blue);color:#fff}.player-card-bottom{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.player-rank-name{color:var(--text2);text-transform:uppercase;letter-spacing:.5px;font-size:10px}.dir-chosen{color:var(--green);font-size:12px}.dir-waiting{color:var(--text2);font-size:12px;font-style:italic}.empty-slot{color:var(--text2);font-size:13px;font-style:italic}.add-bot-btn{color:var(--accent);cursor:pointer;background:#c8a84b1a;border:1px dashed #c8a84b66;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:700;transition:all .15s}.add-bot-btn:hover{border-color:var(--accent);background:#c8a84b2e}.add-bot-btn:disabled{opacity:.5;cursor:not-allowed}.kick-btn{position:absolute;top:8px;right:8px}.direction-section{width:100%;max-width:400px}.countdown-bar{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);text-align:center;margin-bottom:20px;padding:16px 20px}.countdown-label{color:var(--text2);margin-bottom:6px;font-size:13px}.countdown-timer{color:var(--accent);margin-bottom:10px;font-size:2.5rem;font-weight:900;line-height:1}.countdown-track{background:var(--bg3);border-radius:2px;height:4px;overflow:hidden}.countdown-fill{background:var(--accent);height:100%;transition:width 1s linear}.dir-picker{justify-content:center;margin-bottom:12px;display:flex}.dir-grid{grid-template-rows:repeat(3,80px);grid-template-columns:repeat(3,80px);gap:8px;display:grid}.dir-btn{background:var(--bg2);border:2px solid var(--border);color:var(--text2);border-radius:var(--radius);flex-direction:column;justify-content:center;align-items:center;gap:4px;transition:all .15s;display:flex}.dir-btn:hover{border-color:var(--accent);color:var(--accent)}.dir-btn.active{border-color:var(--accent);color:var(--accent);background:#c8a84b1f}.dir-icon{font-size:22px}.dir-label{letter-spacing:1px;font-size:9px;font-weight:700}.dir-center{justify-content:center;align-items:center;font-size:28px;display:flex}.dir-confirm{text-align:center;color:var(--green);font-size:13px}.direction-overlay{z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000d1;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.direction-modal{background:var(--bg2);border:1px solid var(--accent);border-radius:16px;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:420px;padding:32px 28px;display:flex;box-shadow:0 0 60px #c8a84b26}.waiting-section{text-align:center}.waiting-text{color:var(--text2);margin-bottom:16px;font-size:15px}.share-code{color:var(--text2);font-size:14px}.share-code-val{letter-spacing:4px;color:var(--accent);margin-left:8px;font-size:22px;font-weight:900}.game-page{touch-action:none;background:#060810;flex-direction:column;height:100dvh;display:flex;overflow:hidden}.game-hud-top{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0a0c14f2;border-bottom:1px solid #c8a84b26;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:8px 16px;display:flex}.hud-players{flex-wrap:wrap;gap:10px;display:flex}.hud-player{background:#ffffff0a;border:1px solid #ffffff14;border-radius:8px;align-items:center;gap:8px;padding:6px 12px;font-size:13px;transition:all .2s;display:flex}.hud-player.me{background:#c8a84b0f;border-color:#c8a84b66}.hud-player.eliminated{opacity:.35}.hud-color-bar{border-radius:2px;flex-shrink:0;width:4px;height:32px}.hud-player-info{flex-direction:column;gap:1px;display:flex}.hud-pname{color:var(--text);font-size:12px;font-weight:700}.hud-score{color:var(--accent);font-variant-numeric:tabular-nums;font-size:14px;font-weight:800}.elim-tag{color:var(--red);letter-spacing:.5px;border:1px solid var(--red);border-radius:3px;padding:1px 4px;font-size:9px;font-weight:700}.hud-controls{flex-shrink:0;align-items:center;gap:10px;display:flex}.hud-error{color:var(--red);background:#e74c3c1f;border:1px solid #e74c3c4d;border-radius:6px;padding:5px 12px;font-size:12px;animation:.2s fadeIn}.hud-zoom-btn{cursor:pointer;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;font-size:18px;transition:all .15s;display:flex}.hud-zoom-btn:hover{border-color:var(--accent);background:#c8a84b26}.hud-zoom-btn.active{border-color:var(--accent);background:#c8a84b33}.hud-leave-btn{color:#e88;letter-spacing:.5px;cursor:pointer;background:#e74c3c1f;border:1px solid #e74c3c59;border-radius:8px;height:36px;padding:0 14px;font-size:13px;font-weight:700;transition:all .15s}.hud-leave-btn:hover{border-color:var(--red);color:#fff;background:#e74c3c38}.game-map-area{touch-action:none;flex:1;min-height:0;position:relative;overflow:hidden}.map-loading{flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex}.game-hud-bottom{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0a0c14f2;border-top:1px solid #c8a84b26;flex-shrink:0;justify-content:space-between;align-items:center;padding:10px 20px;display:flex}.hud-stats-row{align-items:center;gap:28px;display:flex}.hud-stat{align-items:center;gap:10px;display:flex}.hud-stat-icon{font-size:20px}.hud-stat-label{letter-spacing:1px;text-transform:uppercase;color:var(--text2);font-size:10px;line-height:1}.hud-stat-val{color:var(--accent);font-variant-numeric:tabular-nums;font-size:18px;font-weight:800;line-height:1.2}.hud-hint{color:#fff3;letter-spacing:.5px;font-size:11px}@keyframes scoreFlash{0%{color:var(--accent)}40%{color:#7dff7d;transform:scale(1.15)}to{color:var(--accent);transform:scale(1)}}.flash{animation:.6s scoreFlash}@media (width<=768px){.game-hud-top{padding:6px 10px}.hud-player{padding:4px 8px}.hud-stats-row{gap:16px}.hud-hint{display:none}.hud-stat-val{font-size:15px}}.gameover-page{justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.gameover-card{text-align:center;width:100%;max-width:480px;animation:.5s cubic-bezier(.2,.9,.3,1.1) cardIn}@keyframes cardIn{0%{opacity:0;transform:scale(.92)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}.gameover-card.winner-card{border-color:var(--accent);box-shadow:0 0 60px #c8a84b33}.gameover-banner{letter-spacing:4px;color:var(--text2);border-bottom:1px solid var(--border);margin-bottom:24px;padding-bottom:20px;font-size:2rem;font-weight:900}.gameover-banner.winner{background:linear-gradient(180deg, #f0d98a 0%, var(--accent) 70%, #9a7e34 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 30px #c8a84b80);-webkit-background-clip:text;background-clip:text;font-size:2.6rem;animation:1.6s ease-in-out infinite victoryPulse}@keyframes victoryPulse{0%,to{filter:drop-shadow(0 0 25px #c8a84b66)}50%{filter:drop-shadow(0 0 45px #c8a84bb3)}}.my-result{margin-bottom:28px}.my-place{margin-bottom:8px;font-size:1.4rem;font-weight:700}.my-score{color:var(--text2);font-size:14px}.my-score span{color:var(--text);font-weight:700}.my-xp{border:1px solid var(--accent);color:var(--accent2);letter-spacing:.5px;background:linear-gradient(#c8a84b38,#c8a84b1a);border-radius:20px;margin-top:12px;padding:6px 20px;font-size:17px;font-weight:800;animation:.4s cubic-bezier(.2,.9,.3,1.4) .5s both xpPop;display:inline-block;box-shadow:0 0 20px #c8a84b40}@keyframes xpPop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.my-practice{color:var(--text2);background:var(--bg3);border:1px solid var(--border);border-radius:20px;margin-top:12px;padding:5px 16px;font-size:13px;display:inline-block}.results-table{margin-bottom:28px}.results-header{letter-spacing:2px;text-transform:uppercase;color:var(--text2);margin-bottom:10px;font-size:11px}.result-row{border-radius:var(--radius);background:var(--bg3);align-items:center;gap:12px;margin-bottom:6px;padding:10px 14px;display:flex}.result-row.me{border:1px solid var(--accent)}.result-place{text-align:left;min-width:110px;font-size:13px}.result-name{text-align:left;flex:1;font-weight:600}.result-score{color:var(--accent);font-weight:700}.gameover-actions{justify-content:center;display:flex}.gameover-actions .btn{letter-spacing:1.5px;padding:12px 32px}.profile-page{flex-direction:column;min-height:100vh;display:flex}.profile-header{border-bottom:1px solid var(--border);background:var(--bg2);justify-content:space-between;align-items:center;padding:14px 24px;display:flex}.profile-body{flex-direction:column;gap:20px;width:100%;max-width:700px;margin:0 auto;padding:32px;display:flex}.profile-main{flex-direction:column;align-items:center;gap:10px;display:flex}.profile-avatar{background:var(--accent);color:#0d0f14;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;font-size:2rem;font-weight:900;display:flex}.profile-name{font-size:1.4rem;font-weight:700}.rank-display{flex-direction:column;align-items:center;gap:10px;width:100%;max-width:360px;margin-top:6px;display:flex}.rank-insignia-box{cursor:pointer;background:#c8a84b0f;border:1px solid #c8a84b40;border-radius:10px;flex-direction:column;align-items:center;gap:6px;padding:14px 28px;transition:all .18s;display:flex}.rank-insignia-box:hover{border-color:var(--accent);background:#c8a84b1f;transform:translateY(-2px)}.rank-insignia-name{letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);font-size:13px;font-weight:700}.rank-insignia-hint{color:var(--text2);letter-spacing:.5px;font-size:10px}.xp-bar-wrap{width:100%}.xp-bar-track{background:var(--bg3);border-radius:3px;height:6px;margin-bottom:6px;overflow:hidden}.xp-bar-fill{background:var(--accent);border-radius:3px;height:100%;transition:width .5s}.xp-labels{color:var(--text2);justify-content:space-between;font-size:12px;display:flex}.profile-stats .stats-title,.profile-history .stats-title{letter-spacing:2px;text-transform:uppercase;color:var(--text2);margin-bottom:16px;font-size:11px}.stats-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.stat-box{background:var(--bg3);border-radius:var(--radius);text-align:center;padding:14px}.stat-val{margin-bottom:4px;font-size:1.6rem;font-weight:700;line-height:1}.stat-val.accent{color:var(--accent)}.stat-label{letter-spacing:1px;text-transform:uppercase;color:var(--text2);font-size:11px}.history-list{flex-direction:column;gap:6px;display:flex}.history-row{background:var(--bg3);border-radius:var(--radius);align-items:center;gap:12px;padding:10px 14px;font-size:13px;display:flex}.history-row.win{border-left:3px solid var(--accent)}.history-place{min-width:30px;font-size:16px}.history-room{letter-spacing:2px;color:var(--accent);font-weight:700}.history-count{color:var(--text2)}.history-status{color:var(--text2);text-align:right;flex:1;font-size:12px}.history-date{color:var(--text2);font-size:11px}.settings-page{flex-direction:column;min-height:100vh;display:flex}.settings-header{border-bottom:1px solid var(--border);background:var(--bg2);justify-content:space-between;align-items:center;padding:14px 24px;display:flex}.settings-body{flex-direction:column;gap:18px;width:100%;max-width:480px;margin:0 auto;padding:28px 20px;display:flex}.settings-card h3{color:var(--text);margin-bottom:12px;font-size:15px}.settings-card.danger{border-color:#e74c3c59}.settings-card.danger h3{color:var(--red)}.settings-current{color:var(--text2);margin-bottom:12px;font-size:13px}.settings-current strong{color:var(--text)}.settings-form{gap:10px;display:flex}.settings-form.col{flex-direction:column}.settings-form .btn{flex-shrink:0}.settings-msg{text-align:center;border-radius:8px;padding:10px 14px;font-size:13px}.settings-msg.ok{border:1px solid var(--green);color:var(--green);background:#2ecc711f}.settings-msg.err{border:1px solid var(--red);color:#e88;background:#e74c3c1f}.lb-page{flex-direction:column;min-height:100vh;display:flex}.lb-header{border-bottom:1px solid var(--border);background:var(--bg2);justify-content:space-between;align-items:center;padding:14px 24px;display:flex}.my-rank-banner{border:1px solid var(--accent);background:linear-gradient(90deg,#c8a84b24,#c8a84b0a);border-radius:12px;align-items:center;gap:14px;width:100%;max-width:640px;margin:20px auto 0;padding:16px 24px;display:flex}.my-rank-label{text-transform:uppercase;letter-spacing:1px;color:var(--text2);font-size:11px}.my-rank-pos{color:var(--accent);font-size:1.8rem;font-weight:900}.my-rank-of{color:var(--text2);flex:1;font-size:13px}.my-rank-xp{color:var(--accent);font-weight:700}.lb-content{width:100%;max-width:640px;margin:0 auto;padding:24px 20px}.lb-table{flex-direction:column;gap:4px;display:flex}.lb-full-row{background:var(--bg2);border:1px solid var(--border);border-radius:8px;align-items:center;gap:14px;padding:10px 16px;display:flex}.lb-full-row.me{border-color:var(--accent);background:#c8a84b0f}.lb-full-row.top1{border-color:#ffd70066}.lb-full-row.top2{border-color:#c8c8d259}.lb-full-row.top3{border-color:#cd7f3259}.lb-pos{width:40px;color:var(--text2);font-size:14px;font-weight:700}.lb-full-row.top1 .lb-pos{color:gold}.lb-full-row.top2 .lb-pos{color:#d8d8e0}.lb-full-row.top3 .lb-pos{color:#cd7f32}.lb-uname{flex:1;align-items:center;gap:8px;font-size:14px;font-weight:600;display:flex}.you-tag{letter-spacing:.5px;background:var(--accent);color:#0d0f14;border-radius:3px;padding:2px 6px;font-size:9px;font-weight:700}.lb-games{color:var(--text2);white-space:nowrap;font-size:12px}.lb-xpval{color:var(--accent);white-space:nowrap;text-align:right;min-width:60px;font-size:13px;font-weight:700}.lb-not-top{text-align:center;color:var(--text2);margin-top:20px;font-size:13px}@media (width<=600px){.lb-games{display:none}.my-rank-banner{flex-wrap:wrap;gap:8px;padding:14px 16px}}