@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Rajdhani:wght@600;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box;}
body{background:#0a0a0f;overflow:hidden;cursor:crosshair;font-family:"Rajdhani",sans-serif;color:#fff;user-select:none;}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;}
.screen.hidden,.hidden{display:none!important;}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border:none;cursor:pointer;font-family:"Rajdhani",sans-serif;font-size:13px;font-weight:700;letter-spacing:2px;transition:all .15s;clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);}
.btn:active{transform:scale(.97);}
.btn-or{background:linear-gradient(135deg,#ff6600,#ff3c5a);color:#fff;}.btn-or:hover{filter:brightness(1.15);}
.btn-out{background:transparent;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.6);}.btn-out:hover{border-color:#ff6600;color:#ff6600;}
.btn-green{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;}.btn-green:hover{filter:brightness(1.1);}
.btn-blue{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;}.btn-blue:hover{filter:brightness(1.1);}

/* ===LOGIN=== */
#loginScreen{background:linear-gradient(135deg,#0a0a1f,#1a0a2e,#0f1a0a);flex-direction:column;overflow:hidden;}
.ls-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,102,0,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,102,0,.04) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;}
.ls-logo .main{font-size:clamp(22px,3vw,38px);font-weight:900;letter-spacing:6px;background:linear-gradient(90deg,#ff6600,#ff3c5a,#ff6600);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block;margin-bottom:6px;}
.ls-logo .sub{font-size:11px;color:rgba(255,255,255,.3);letter-spacing:4px;display:block;}
.ls-box{position:relative;z-index:1;width:min(400px,90vw);margin-top:24px;background:rgba(15,15,30,.85);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(20px);}
.ls-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.08);}
.ls-tab{flex:1;padding:13px;background:none;border:none;border-bottom:2px solid transparent;color:rgba(255,255,255,.3);font-family:"Rajdhani",sans-serif;font-size:13px;font-weight:700;cursor:pointer;letter-spacing:2px;transition:all .2s;margin-bottom:-1px;}
.ls-tab.active{color:#ff6600;border-bottom-color:#ff6600;}
.ls-form{padding:24px 28px 20px;}
.ls-lbl{display:block;font-size:10px;letter-spacing:2px;color:rgba(255,255,255,.3);margin-bottom:5px;margin-top:14px;}
.ls-inp{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#fff;font-family:"Rajdhani",sans-serif;font-size:14px;font-weight:600;padding:10px 12px;outline:none;}
.ls-inp:focus{border-color:#ff6600;}
.ls-btns{display:flex;gap:8px;margin-top:18px;}.ls-btns .btn{flex:1;}
.ls-ghost{width:100%;margin-top:8px;padding:9px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.25);font-family:"Rajdhani",sans-serif;font-size:12px;font-weight:600;cursor:pointer;letter-spacing:2px;}
.ls-ghost:hover{color:#ff6600;border-color:#ff6600;}
.ls-google{width:100%;margin-top:8px;padding:10px;background:#fff;border:1px solid rgba(0,0,0,.1);color:#3c4043;font-family:"Rajdhani",sans-serif;font-size:13px;font-weight:700;cursor:pointer;letter-spacing:1px;display:flex;align-items:center;justify-content:center;border-radius:2px;transition:all .15s;}
.ls-google:hover{background:#f7f7f7;box-shadow:0 1px 4px rgba(0,0,0,.2);}

/* ===LOBBY=== */
#lobbyScreen{flex-direction:column;align-items:stretch;background:#07070f;}
.lhdr{background:rgba(0,0,0,.8);border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(20px);padding:0 16px;display:flex;align-items:center;justify-content:space-between;height:50px;flex-shrink:0;z-index:10;}
.lhdr-logo{font-size:15px;font-weight:900;letter-spacing:4px;background:linear-gradient(90deg,#ff6600,#ff3c5a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
/* 헤더 버튼 텍스트 전환 헬퍼 (모바일에서 이모지만 표시) */
.lhdr-mini{display:none;}
.lhdr-full{display:inline;}
.lhdr-pl{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;}
.hn{color:#ff6600;}.hlv{color:rgba(255,255,255,.35);}.hrk{color:#ffd700;display:inline-flex;align-items:center;gap:6px;}
.rk-chip{display:inline-block;width:12px;height:12px;background:#cd7f32;border:1px solid rgba(0,0,0,.4);transform:rotate(45deg);}
.rk-chip.silver{background:#c0c0c0;}.rk-chip.gold{background:#ffd700;}.rk-chip.plat{background:#67e8f9;}.rk-chip.dia{background:#a78bfa;}.rk-chip.master{background:linear-gradient(135deg,#ff6600,#ffd700);}
.lbody{display:flex;flex:1;overflow:hidden;}

/* 로비 메인 (Rivals 스타일) */
.lobby-main{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;}
/* 캐릭터 프리뷰 + 스킨 선택 */
.lobby-char-area{display:flex;align-items:stretch;padding:16px;gap:16px;flex:1;overflow:hidden;}
.skin-list{display:flex;flex-direction:column;gap:6px;overflow-y:auto;flex:1;}
.skin-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);cursor:pointer;transition:all .15s;}
.skin-item:hover{border-color:#ff6600;}
.skin-item.active{border-color:#ff6600;background:rgba(255,102,0,.1);}
.skin-ico{width:46px;height:30px;image-rendering:pixelated;flex-shrink:0;}
.skin-nm{font-size:12px;font-weight:700;color:#fff;}
.skin-sub{font-size:10px;color:rgba(255,255,255,.35);}

/* 무기 목록 */
.wep-area{flex:0 0 300px;display:flex;flex-direction:column;gap:10px;overflow:hidden;}
.wep-tit{font-size:10px;font-weight:700;color:rgba(255,255,255,.3);letter-spacing:3px;display:flex;align-items:center;gap:8px;}
.wep-tit-sub{font-size:9px;color:rgba(255,255,255,.2);letter-spacing:1px;font-weight:400;}
.wep-list{display:flex;flex-direction:column;gap:5px;overflow-y:auto;flex:1;}
.wep-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);position:relative;cursor:pointer;transition:all .15s;}
.wep-item:hover:not(.locked){border-color:rgba(255,102,0,.4);}
.wep-item.locked{opacity:.45;cursor:not-allowed;}
.wep-item.selected{border-color:#ff6600;background:rgba(255,102,0,.08);}
.wep-item.in-loadout{border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.05);}
.wep-pix{width:44px;height:24px;image-rendering:pixelated;flex-shrink:0;}
.wep-nm{font-size:12px;font-weight:700;color:#fff;flex:1;}
.wep-sub{font-size:10px;color:rgba(255,255,255,.3);}
.wep-lock{font-size:14px;position:absolute;right:8px;}
.wep-slot-badge{font-size:9px;font-weight:700;padding:2px 5px;background:rgba(34,197,94,.2);border:1px solid rgba(34,197,94,.5);color:#4ade80;position:absolute;right:8px;}
.loadout-area{flex:0 0 200px;display:flex;flex-direction:column;gap:8px;overflow:hidden;}
.loadout-tit{font-size:10px;font-weight:700;color:rgba(255,255,255,.3);letter-spacing:3px;}
.loadout-slots{display:flex;flex-direction:column;gap:5px;}
.ld-slot{display:flex;align-items:center;gap:8px;padding:7px 9px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);min-height:44px;position:relative;transition:all .15s;}
.ld-slot.filled{border-color:rgba(255,102,0,.4);background:rgba(255,102,0,.05);}
.ld-slot-num{font-size:9px;font-weight:700;color:rgba(255,255,255,.2);width:14px;flex-shrink:0;}
.ld-slot-ico{width:40px;height:20px;image-rendering:pixelated;flex-shrink:0;}
.ld-slot-nm{font-size:11px;font-weight:700;color:#fff;flex:1;}
.ld-slot-empty{font-size:10px;color:rgba(255,255,255,.2);letter-spacing:1px;}
.ld-rm{font-size:10px;color:rgba(255,255,255,.2);cursor:pointer;padding:2px 4px;}
.ld-rm:hover{color:#ff3c5a;}

/* 매칭 영역 (Rivals 스타일 - 사진처럼) */
.match-area{flex-shrink:0;background:rgba(0,0,0,.6);border-top:1px solid rgba(255,255,255,.06);padding:0;overflow:hidden;}
.match-inner{display:flex;align-items:stretch;gap:0;}
.match-left{padding:14px 20px;display:flex;flex-direction:column;gap:10px;flex:1;}
.match-tit{font-size:10px;font-weight:700;color:rgba(255,255,255,.3);letter-spacing:3px;white-space:nowrap;}
.match-modes{display:flex;gap:8px;flex-wrap:wrap;}
.mode-btn{padding:8px 16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.6);font-family:"Rajdhani",sans-serif;font-size:13px;font-weight:700;cursor:pointer;letter-spacing:2px;transition:all .15s;position:relative;}
.mode-btn:hover{border-color:#ff6600;color:#ff6600;background:rgba(255,102,0,.08);}
.mode-btn.active-mode{border-color:#ff6600;color:#ff6600;background:rgba(255,102,0,.12);}
.mode-cnt{position:absolute;top:-6px;right:-6px;background:#ff6600;color:#fff;font-size:9px;font-weight:700;padding:1px 4px;min-width:16px;text-align:center;}
/* Rivals 스타일 매칭 버튼 패널 (오른쪽) */
.match-right{flex-shrink:0;width:280px;background:rgba(255,255,255,.02);border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:0;}
.match-btn-row{display:flex;height:100%;}
.match-big-btn{flex:1;border:none;cursor:pointer;font-family:"Rajdhani",sans-serif;font-weight:900;letter-spacing:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:all .15s;border-right:1px solid rgba(255,255,255,.06);padding:14px 8px;}
.match-big-btn:last-child{border-right:none;}
.match-big-btn.wait{background:rgba(255,200,0,.08);color:#fbbf24;}
.match-big-btn.wait:hover{background:rgba(255,200,0,.16);}
.match-big-btn.demo{background:rgba(100,100,255,.08);color:#818cf8;}
.match-big-btn.demo:hover{background:rgba(100,100,255,.16);}
.match-big-btn.go{background:rgba(255,102,0,.12);color:#ff6600;}
.match-big-btn.go:hover{background:rgba(255,102,0,.22);}
.match-big-btn.team{background:rgba(34,197,94,.08);color:#4ade80;}
.match-big-btn.team:hover{background:rgba(34,197,94,.16);}
.mbtn-pix{display:flex;align-items:center;justify-content:center;width:32px;height:32px;}
.px{display:block;width:24px;height:24px;image-rendering:pixelated;background-repeat:no-repeat;background-size:24px 24px;}
.team-dot{display:inline-block;width:12px;height:12px;background:#3b82f6;border:1px solid rgba(0,0,0,.4);vertical-align:middle;}
.team-dot.red{background:#ef4444;}
.team-dot.blue{background:#3b82f6;}
.mbtn-label{font-size:11px;letter-spacing:2px;}
.mbtn-cnt{font-size:9px;color:rgba(255,255,255,.3);letter-spacing:1px;}
.team-toggle{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:rgba(255,255,255,.45);}
.team-sw{width:36px;height:18px;background:rgba(255,255,255,.1);border-radius:9px;cursor:pointer;position:relative;transition:background .2s;}
.team-sw.on{background:#22c55e;}
.team-sw::after{content:'';position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;top:2px;left:2px;transition:left .2s;}
.team-sw.on::after{left:20px;}

/* 우측 패널 */
.lpanel{width:220px;flex-shrink:0;background:rgba(0,0,0,.6);border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;backdrop-filter:blur(10px);}
.lpsec{padding:12px;border-bottom:1px solid rgba(255,255,255,.04);}
.lp-tit{font-size:9px;letter-spacing:3px;color:rgba(255,255,255,.25);margin-bottom:8px;font-weight:700;}
.rnk-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.rnk-ico{font-size:24px;}.rnk-nm{font-size:13px;font-weight:700;color:#ffd700;}.rnk-pt{font-size:10px;color:rgba(255,255,255,.25);}
.rnk-bar{height:3px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;}
.rnk-fill{height:100%;background:linear-gradient(90deg,#ff6600,#ffd700);transition:width .8s;}
.on-list{display:flex;flex-direction:column;gap:4px;max-height:90px;overflow-y:auto;}
.on-itm{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:rgba(255,255,255,.6);}
.on-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.chat-wrap{flex:1;display:flex;flex-direction:column;padding:12px;gap:7px;overflow:hidden;}
.chat-msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:3px;}
.cmsg{font-size:11px;font-weight:600;color:rgba(255,255,255,.6);line-height:1.5;}.cmsg .cn{color:#ff6600;}.cmsg .gcclantag{font-weight:700;color:#ffd84d;font-size:10px;letter-spacing:.3px;}
.chat-row{display:flex;gap:5px;}
.chat-inp{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);color:#fff;font-family:"Rajdhani",sans-serif;font-size:11px;font-weight:600;padding:6px 8px;outline:none;}
.chat-inp:focus{border-color:#ff6600;}
.chat-snd{background:#ff6600;color:#fff;border:none;cursor:pointer;font-family:"Rajdhani",sans-serif;font-size:12px;font-weight:700;padding:6px 10px;}

/* ===LOBBY HUB CANVAS=== */
.lobby-hub{flex:1;position:relative;overflow:hidden;background:#0a0e15;}
#lobbyHubCanvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;display:block;}
.hub-title{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.7);padding:7px 22px;border:1px solid rgba(255,102,0,.3);font-size:11px;font-weight:900;letter-spacing:6px;color:#ff6600;pointer-events:none;}

/* 데일리 임무 패널 (좌측) */
.hub-missions{position:absolute;left:18px;top:80px;width:260px;background:rgba(0,0,0,.78);border:1px solid rgba(255,255,255,.08);padding:14px 14px 12px;backdrop-filter:blur(8px);}
.hm-tit{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:900;color:#ff6600;letter-spacing:3px;margin-bottom:10px;}
.hm-tit-ico{width:14px;height:14px;background:#ff6600;clip-path:polygon(0 0,100% 0,100% 60%,80% 100%,0 100%);}
.hm-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid rgba(255,255,255,.04);}
.hm-row:first-of-type{border-top:none;}
.hm-pix{width:24px;height:24px;background:rgba(255,102,0,.15);border:1px solid rgba(255,102,0,.4);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hm-pix::before{content:'';width:8px;height:8px;background:#ff6600;}
.hm-pix.k::before{background:#ef4444;clip-path:polygon(50% 0,100% 100%,0 100%);}
.hm-pix.w::before{background:#fbbf24;clip-path:polygon(50% 0,100% 35%,80% 100%,20% 100%,0 35%);}
.hm-mid{flex:1;}
.hm-nm{font-size:11px;font-weight:700;color:#fff;letter-spacing:.5px;}
.hm-prog{height:4px;background:rgba(255,255,255,.06);margin-top:5px;position:relative;}
.hm-prog-f{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#ff6600,#fbbf24);}
.hm-cnt{font-size:10px;font-weight:700;color:rgba(255,255,255,.5);}
.hm-rwd{font-size:10px;font-weight:900;color:#fbbf24;letter-spacing:1px;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);padding:2px 6px;}

/*  players 테이클 (하단 중앙) */
.hub-cta{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;z-index:3;}
/* 모바일 CTA 왼쪽 미니 버튼 그룹 */
.hub-cta-tools{display:none;align-items:center;gap:4px;}
/* 미니 버튼 공통 — 모바일 CTA 안에 인라인으로 들어갈 작은 tb-btn */
.tb-cta-mini{position:relative;width:44px;height:40px;background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.12);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;transition:all .12s;padding:0;color:rgba(255,255,255,.8);font-family:"Rajdhani",sans-serif;}
.tb-cta-mini:hover{border-color:#ff6600;background:rgba(255,102,0,.15);color:#fff;}
.tb-cta-mini .tb-btn-ico{width:18px;height:18px;image-rendering:pixelated;}
.tb-cta-mini .tb-btn-lbl{font-size:6px;font-weight:800;letter-spacing:.3px;}
.hub-play{background:linear-gradient(180deg,#22c55e,#16a34a);color:#fff;border:none;cursor:pointer;font-family:"Rajdhani",sans-serif;font-size:18px;font-weight:900;letter-spacing:4px;padding:12px 36px;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);box-shadow:0 4px 0 #0f6629,0 8px 22px rgba(34,197,94,.4);transition:transform .1s,box-shadow .1s;}
.hub-play:hover{filter:brightness(1.08);}
.hub-play:active{transform:translateY(2px);box-shadow:0 2px 0 #0f6629,0 4px 10px rgba(34,197,94,.3);}
.hub-mode-quick{background:rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.15);color:#fff;font-family:"Rajdhani",sans-serif;font-size:12px;font-weight:700;letter-spacing:2px;padding:9px 14px;cursor:pointer;}
.hub-mode-quick:hover{border-color:#ff6600;color:#ff6600;}
.hub-mode-quick .qm-cur{color:#ff6600;font-weight:900;}

/* 하단 툴바 ( players CTA 아래 대신 일체결합 - 좌우 분리 배치) */
.hub-toolbar{position:absolute;right:14px;bottom:6px;display:flex;gap:6px;background:rgba(0,0,0,.8);padding:6px;border:1px solid rgba(255,255,255,.06);backdrop-filter:blur(8px);z-index:3;}
.tb-btn{position:relative;width:52px;height:52px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:all .12s;padding:0;color:rgba(255,255,255,.7);font-family:"Rajdhani",sans-serif;}
.tb-btn:hover{border-color:#ff6600;background:rgba(255,102,0,.12);color:#fff;}
.tb-btn-ico{width:24px;height:24px;image-rendering:pixelated;}
.tb-btn-lbl{font-size:8px;font-weight:800;letter-spacing:.5px;}
.tb-badge{position:absolute;top:-4px;right:-4px;background:#ef4444;color:#fff;font-size:9px;font-weight:900;padding:1px 5px;letter-spacing:0;border:1px solid #0a0a0a;}

/* 게임 모드 선택 오버레이 */
#modeOverlay{position:fixed;inset:0;background:rgba(5,5,12,.92);z-index:54;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px);padding:60px 40px;}
#modeOverlay.hidden{display:none;}
.mo-box{width:min(960px,94vw);max-height:84vh;background:#1a1424;padding:0;display:flex;flex-direction:column;box-shadow:inset 0 0 0 2px #ff6600,inset 0 0 0 4px #0a0510,inset 0 4px 0 rgba(255,255,255,.04),0 0 0 2px #050308,0 10px 0 #050308,0 14px 50px rgba(0,0,0,.7);}
.mo-head{padding:18px 26px;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid rgba(0,0,0,.5);box-shadow:0 2px 0 rgba(255,102,0,.4);background:linear-gradient(180deg,rgba(255,102,0,.06),transparent);}
.mo-grid{margin:20px 22px;}
.mo-timer{margin:0 22px 22px;}
.mo-tit{font-size:20px;font-weight:900;letter-spacing:5px;color:#fff;}
.mo-sub{font-size:11px;color:rgba(255,255,255,.4);letter-spacing:2px;margin-top:3px;}
.mo-close{width:38px;height:38px;background:#ef4444;border:none;cursor:pointer;color:#fff;font-size:18px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #ef4444,inset 0 -3px 0 #7f1d1d,inset 3px 0 0 #ff8888,0 4px 0 #7f1d1d,0 0 0 2px #1a0608;flex-shrink:0;line-height:1;padding:0;font-family:inherit;letter-spacing:0;transition:transform .08s;}
.mo-close:hover{background:#f87171;}
.mo-close:active{transform:translateY(3px);}
.mo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.mo-card{position:relative;aspect-ratio:1.4;background:linear-gradient(135deg,rgba(255,102,0,.18),rgba(255,102,0,.05));border:1px solid rgba(255,102,0,.25);cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.mo-card:hover{transform:translateY(-3px);border-color:#ff6600;box-shadow:0 8px 24px rgba(255,102,0,.25);}
.mo-card.locked{cursor:not-allowed;background:#1a1a22;border-color:rgba(255,255,255,.08);}
.mo-card-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.18;}
.mo-card-bg canvas{width:90%;height:90%;image-rendering:pixelated;}
.mo-card-lbl{position:relative;font-size:48px;font-weight:900;letter-spacing:2px;color:#fff;text-shadow:0 4px 12px rgba(0,0,0,.7);}
.mo-card-sub{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:10px;font-weight:800;color:rgba(255,255,255,.5);letter-spacing:3px;}
.mo-card.ranked{background:linear-gradient(135deg,rgba(255,215,0,.18),rgba(120,80,0,.05));border-color:rgba(255,215,0,.35);}
.mo-card.ranked .mo-card-lbl{color:#ffd700;}
.mo-lock-big{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:54px;font-weight:900;color:rgba(255,255,255,.4);letter-spacing:6px;}
.mo-lock-req{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:10px;font-weight:800;color:rgba(255,255,255,.4);letter-spacing:2px;}
.mo-timer{padding:10px 14px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:2px;}
.mo-timer b{color:#fbbf24;font-size:13px;}

/* === EMOTE WHEEL === */
#emoteWheel{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;pointer-events:none;}
#emoteWheel.hidden{display:none;}
#emoteWheel::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.4);}
.ew-inner{position:relative;width:260px;height:260px;pointer-events:auto;}
.ew-slot{position:absolute;width:64px;height:64px;left:50%;top:50%;margin:-32px 0 0 -32px;background:#1a1424;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px #ff6600,inset 0 0 0 4px #0a0510,inset 0 -3px 0 rgba(0,0,0,.4),0 4px 0 #050308;transition:transform .12s;}
.ew-slot:hover{transform:scale(1.15);background:#2a1a34;}
.ew-slot canvas{width:48px;height:48px;image-rendering:pixelated;}
.ew-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80px;height:80px;background:#0a0510;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:900;color:rgba(255,102,0,.6);letter-spacing:2px;}

/* === EMOTE BUBBLE (over player) === */
.emote-bubble{position:absolute;width:48px;height:48px;image-rendering:pixelated;pointer-events:none;z-index:24;animation:eb 2s ease forwards;}
@keyframes eb{0%{opacity:0;transform:translateY(10px) scale(.5)}15%{opacity:1;transform:translateY(0) scale(1.1)}80%{opacity:1;transform:translateY(-4px) scale(1)}100%{opacity:0;transform:translateY(-10px) scale(.9)}}

/* === RARITY === */
.rar-common{box-shadow:inset 0 0 0 2px #888,inset 0 0 0 4px #0a0510;}
.rar-rare{box-shadow:inset 0 0 0 2px #3b82f6,inset 0 0 0 4px #050a18,0 0 18px rgba(59,130,246,.3);}
.rar-epic{box-shadow:inset 0 0 0 2px #a855f7,inset 0 0 0 4px #1a0a28,0 0 20px rgba(168,85,247,.4);}
.rar-legend{box-shadow:inset 0 0 0 2px #fbbf24,inset 0 0 0 4px #281a05,0 0 24px rgba(251,191,36,.5);animation:legendPulse 2s ease infinite;}
@keyframes legendPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.2)}}
.rar-tag{display:inline-block;padding:2px 6px;font-size:9px;font-weight:900;letter-spacing:1px;border:1px solid;margin-left:4px;}
.rar-tag.common{color:#aaa;border-color:#888;}
.rar-tag.rare{color:#60a5fa;border-color:#3b82f6;}
.rar-tag.epic{color:#c084fc;border-color:#a855f7;}
.rar-tag.legend{color:#fbbf24;border-color:#f59e0b;}

/* === KILL POPUP (큰 이펙트) === */
.kill-pop{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);font-size:46px;font-weight:900;letter-spacing:6px;pointer-events:none;z-index:26;text-shadow:0 4px 0 rgba(0,0,0,.8),0 0 24px currentColor;animation:kp 1.6s ease forwards;font-family:"Press Start 2P",monospace;}
@keyframes kp{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-3deg)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(2deg)}40%{transform:translate(-50%,-50%) scale(1) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-58%) scale(1.05)}}
.kill-pop-sub{display:block;font-size:14px;letter-spacing:3px;margin-top:6px;color:rgba(255,255,255,.7);}

/* === DAILY LOGIN === */
.dl-row{display:flex;gap:8px;}
.dl-day{flex:1;aspect-ratio:1;background:#0a0510;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;box-shadow:inset 0 0 0 2px #4a4a55,inset 0 0 0 4px #0a0510;color:rgba(255,255,255,.5);}
.dl-day.claimed{box-shadow:inset 0 0 0 2px #4ade80,inset 0 0 0 4px #052010;color:#4ade80;}
.dl-day.today{box-shadow:inset 0 0 0 2px #ff6600,inset 0 0 0 4px #1a0a02,0 0 16px rgba(255,102,0,.4);color:#ff6600;animation:dlTodayPulse 1.5s ease infinite;}
@keyframes dlTodayPulse{0%,100%{box-shadow:inset 0 0 0 2px #ff6600,inset 0 0 0 4px #1a0a02,0 0 12px rgba(255,102,0,.3);}50%{box-shadow:inset 0 0 0 2px #ff6600,inset 0 0 0 4px #1a0a02,0 0 22px rgba(255,102,0,.6);}}
.dl-day-n{font-size:10px;font-weight:900;letter-spacing:1px;}
.dl-day-rwd{font-size:13px;font-weight:900;margin-top:2px;}

/* === CASE OPEN ROULETTE === */
#caseRoll{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:80;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;}
#caseRoll.hidden{display:none;}
.cr-title{font-size:18px;font-weight:900;letter-spacing:6px;color:#ff6600;text-shadow:0 0 20px rgba(255,102,0,.6);}
.cr-strip-wrap{width:min(880px,94vw);height:120px;position:relative;background:#1a1424;box-shadow:inset 0 0 0 2px #ff6600,inset 0 0 0 4px #0a0510,0 0 0 2px #050308,0 8px 0 #050308;overflow:hidden;}
.cr-strip-wrap::before,.cr-strip-wrap::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;}
.cr-strip-wrap::before{left:0;background:linear-gradient(90deg,#1a1424 30%,transparent);}
.cr-strip-wrap::after{right:0;background:linear-gradient(-90deg,#1a1424 30%,transparent);}
.cr-marker{position:absolute;left:50%;top:0;bottom:0;width:4px;background:#ff6600;z-index:3;box-shadow:0 0 12px #ff6600;transform:translateX(-50%);}
.cr-marker::before,.cr-marker::after{content:'';position:absolute;left:50%;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;transform:translateX(-50%);}
.cr-marker::before{top:0;border-top:10px solid #ff6600;}
.cr-marker::after{bottom:0;border-bottom:10px solid #ff6600;}
.cr-strip{display:flex;gap:6px;padding:10px;height:100%;transition:transform 4s cubic-bezier(.15,.5,.25,1);will-change:transform;}
.cr-item{flex-shrink:0;width:100px;height:100px;background:#0a0510;display:flex;align-items:center;justify-content:center;}
.cr-item img{max-width:80%;max-height:60%;image-rendering:pixelated;}
.cr-item .cr-lbl{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:9px;font-weight:900;color:rgba(255,255,255,.7);letter-spacing:1px;}
.cr-item{position:relative;}
.cr-result{font-size:24px;font-weight:900;letter-spacing:3px;color:#fff;text-shadow:0 0 16px currentColor;opacity:0;transition:opacity .4s;}
.cr-result.show{opacity:1;}
.cr-actions{display:flex;gap:10px;opacity:0;transition:opacity .4s;}
.cr-actions.show{opacity:1;}

/* === TITLE === */
.title-badge{display:inline-block;padding:2px 8px;font-size:9px;font-weight:900;letter-spacing:1px;background:linear-gradient(180deg,#fbbf24,#d97706);color:#1a0a02;margin-left:6px;box-shadow:inset 0 0 0 1px #fde68a;text-shadow:0 1px 0 rgba(255,255,255,.4);}

/* === TROPHY === */
.trophy-bump{position:fixed;top:90px;right:50%;transform:translateX(50%);background:#1a1424;padding:12px 24px;font-size:14px;font-weight:900;letter-spacing:3px;color:#fbbf24;text-shadow:0 1px 0 rgba(0,0,0,.5);box-shadow:inset 0 0 0 2px #fbbf24,inset 0 0 0 4px #281a05,0 6px 0 #281a05,0 0 0 2px #0a0510;z-index:200;animation:tb 2.4s ease forwards;}
@keyframes tb{0%{opacity:0;transform:translate(50%,-30px)}15%{opacity:1;transform:translate(50%,0)}80%{opacity:1}100%{opacity:0;transform:translate(50%,-10px)}}


#hubModal{position:fixed;inset:0;background:rgba(5,5,12,.92);z-index:54;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px);padding:60px 40px;}
#hubModal.hidden{display:none;}
.hm-box{width:min(820px,94vw);max-height:84vh;background:#1a1424;display:flex;flex-direction:column;box-shadow:inset 0 0 0 2px #ff6600,inset 0 0 0 4px #0a0510,inset 0 4px 0 rgba(255,255,255,.04),0 0 0 2px #050308,0 10px 0 #050308,0 14px 50px rgba(0,0,0,.7);}
.hm-head{padding:18px 26px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(255,102,0,.08),transparent);}
.hm-h-tit{font-size:18px;font-weight:900;letter-spacing:5px;color:#fff;}
.hm-h-sub{font-size:11px;font-weight:600;color:rgba(255,255,255,.4);letter-spacing:2px;margin-top:3px;}
.hm-close{width:38px;height:38px;background:#ef4444;border:none;cursor:pointer;color:#fff;font-size:18px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #ef4444,inset 0 -3px 0 #7f1d1d,inset 3px 0 0 #ff8888,0 4px 0 #7f1d1d,0 0 0 2px #1a0608;flex-shrink:0;line-height:1;padding:0;font-family:inherit;letter-spacing:0;transition:transform .08s;}
.hm-close:hover{background:#f87171;}
.hm-close:active{transform:translateY(3px);}
.hm-body{padding:20px 26px;overflow-y:auto;flex:1;}
.hm-row2{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;}
.hm-itm{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:12px;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:all .15s;}
.hm-itm:hover{border-color:#ff6600;background:rgba(255,102,0,.08);}
.hm-itm.owned{border-color:rgba(34,197,94,.4);}
.hm-itm-art{aspect-ratio:1.5;background:radial-gradient(ellipse,rgba(255,102,0,.15),transparent 70%);display:flex;align-items:center;justify-content:center;}
.hm-itm-art img{max-width:80%;max-height:80%;image-rendering:pixelated;}
.hm-itm-nm{font-size:12px;font-weight:900;color:#fff;letter-spacing:1px;}
.hm-itm-price{font-size:11px;font-weight:800;color:#fbbf24;letter-spacing:1px;display:flex;align-items:center;gap:5px;}
.hm-itm-coin{display:inline-block;width:10px;height:10px;background:#fbbf24;border-radius:50%;}
.hm-itm-buy{background:#22c55e;color:#fff;border:none;padding:8px 0;font-family:"Rajdhani",sans-serif;font-size:11px;font-weight:900;letter-spacing:2px;cursor:pointer;margin-top:4px;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #22c55e,inset 0 -3px 0 #166534,0 3px 0 #166534,0 0 0 2px #052010;transition:transform .08s;}
.hm-itm-buy:hover{filter:brightness(1.1);}
.hm-itm-buy:active{transform:translateY(3px);}
.hm-itm-buy.owned{background:#4a4a55;color:rgba(255,255,255,.7);cursor:default;box-shadow:inset 0 0 0 2px #666,inset 0 0 0 4px #4a4a55,inset 0 -3px 0 #25252a,0 3px 0 #25252a,0 0 0 2px #0a0a0f;}
.hm-tabs{display:flex;gap:6px;padding:12px 26px 0;}
.hm-tab{padding:8px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.5);font-family:"Rajdhani",sans-serif;font-size:11px;font-weight:800;cursor:pointer;letter-spacing:2px;}
.hm-tab.active{background:#ff6600;color:#fff;border-color:#ff6600;}
.hm-currency{display:flex;gap:14px;align-items:center;font-size:12px;font-weight:800;color:rgba(255,255,255,.7);letter-spacing:2px;}
.hm-c-coin{color:#fbbf24;}
.hm-c-key{color:#ff6600;}

/* PASS modal */
.hm-pass-bar{margin:10px 0 18px;}
.hm-pass-track{height:10px;background:rgba(255,255,255,.05);position:relative;border:1px solid rgba(255,255,255,.08);}
.hm-pass-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#ff6600,#fbbf24);}
.hm-pass-lv{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;font-weight:800;color:rgba(255,255,255,.5);letter-spacing:1px;}
.hm-pass-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;}
.hm-pass-cell{aspect-ratio:1;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);position:relative;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:rgba(255,255,255,.4);}
.hm-pass-cell.claimed{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.4);color:#4ade80;}
.hm-pass-cell.next{border-color:#ff6600;color:#ff6600;animation:pulseBox 1.5s infinite;}
@keyframes pulseBox{0%,100%{box-shadow:0 0 0 rgba(255,102,0,.5);}50%{box-shadow:0 0 12px rgba(255,102,0,.7);}}
.hm-pass-cell-lv{position:absolute;top:2px;left:3px;font-size:8px;color:rgba(255,255,255,.4);}

/* SETTINGS modal */
.hm-set-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid rgba(255,255,255,.04);}
.hm-set-row:first-child{border-top:none;}
.hm-set-lbl{font-size:12px;font-weight:700;color:#fff;letter-spacing:1px;}
.hm-set-sub{font-size:10px;color:rgba(255,255,255,.4);}
.hm-set-ctrl input[type=range]{accent-color:#ff6600;}
.hm-set-ctrl input[type=color]{width:40px;height:24px;background:transparent;border:1px solid rgba(255,255,255,.2);cursor:pointer;}
.hm-toggle{width:42px;height:22px;background:rgba(255,255,255,.1);border-radius:11px;cursor:pointer;position:relative;transition:background .2s;}
.hm-toggle.on{background:#22c55e;}
.hm-toggle::after{content:'';position:absolute;width:16px;height:16px;background:#fff;border-radius:50%;top:3px;left:3px;transition:left .2s;}
.hm-toggle.on::after{left:23px;}


#wsOverlay{position:fixed;inset:0;background:rgba(5,5,12,.95);z-index:55;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px);padding:60px 40px;}
#wsOverlay.hidden{display:none;}
.ws-box{width:min(1080px,94vw);max-height:84vh;display:flex;flex-direction:column;background:#1a1424;box-shadow:inset 0 0 0 2px #ff6600,inset 0 0 0 4px #0a0510,inset 0 4px 0 rgba(255,255,255,.04),0 0 0 2px #050308,0 10px 0 #050308,0 14px 50px rgba(0,0,0,.7);}
.ws-header{padding:20px 30px 14px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;background:linear-gradient(180deg,rgba(255,102,0,.08),transparent);}
.ws-title{font-size:22px;font-weight:900;letter-spacing:6px;color:#fff;text-shadow:0 0 20px rgba(255,102,0,.4);}
.ws-sub{font-size:11px;font-weight:600;color:rgba(255,255,255,.4);letter-spacing:2px;margin-top:4px;}
.ws-count{font-size:11px;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:3px;}
.ws-count b{font-size:26px;color:#ff6600;text-shadow:0 0 10px rgba(255,102,0,.6);}
.ws-cats{display:flex;gap:6px;padding:12px 30px;border-bottom:1px solid rgba(255,255,255,.04);background:rgba(0,0,0,.3);}
.ws-cat{padding:7px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.5);font-family:"Rajdhani",sans-serif;font-size:11px;font-weight:800;cursor:pointer;letter-spacing:2px;transition:all .15s;clip-path:polygon(5px 0%,100% 0%,calc(100% - 5px) 100%,0% 100%);}
.ws-cat:hover{color:#ff6600;border-color:#ff6600;}
.ws-cat.active{background:#ff6600;color:#fff;border-color:#ff6600;}
.ws-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:18px 30px;overflow-y:auto;flex:1;}
.ws-card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);padding:0;cursor:pointer;transition:all .12s;display:flex;flex-direction:column;min-height:170px;overflow:hidden;}
.ws-card:hover:not(.locked){border-color:#ff6600;transform:translateY(-3px);box-shadow:0 8px 20px rgba(255,102,0,.2);}
.ws-card.selected{border-color:#ff6600;box-shadow:inset 0 0 0 2px #ff6600,0 0 20px rgba(255,102,0,.3);background:linear-gradient(180deg,rgba(255,102,0,.15),rgba(255,102,0,.04));}
.ws-card.locked{opacity:.45;cursor:not-allowed;filter:grayscale(.7);}
.ws-card-img{flex:1;display:flex;align-items:center;justify-content:center;padding:18px 10px 10px;background:radial-gradient(ellipse at center,rgba(255,102,0,.12) 0%,transparent 70%);}
.ws-card.selected .ws-card-img{background:radial-gradient(ellipse at center,rgba(255,102,0,.3) 0%,transparent 70%);}
.ws-card-pix{width:110px;height:48px;image-rendering:pixelated;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));}
.ws-card-info{padding:8px 12px 10px;background:rgba(0,0,0,.4);}
.ws-card-nm{font-size:12px;font-weight:900;color:#fff;letter-spacing:1.5px;}
.ws-card-cat{font-size:9px;font-weight:700;color:#ff6600;letter-spacing:2px;margin-top:1px;}
.ws-card-bars{display:flex;flex-direction:column;gap:3px;margin-top:7px;}
.ws-bar-row{display:flex;align-items:center;gap:6px;font-size:8px;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:1px;}
.ws-bar-lbl{width:30px;flex-shrink:0;}
.ws-bar-track{flex:1;height:3px;background:rgba(255,255,255,.06);position:relative;}
.ws-bar-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#ff6600,#ffaa44);}
.ws-bar-fill.dmg{background:linear-gradient(90deg,#ff3030,#ff8800);}
.ws-bar-fill.rng{background:linear-gradient(90deg,#3b82f6,#60a5fa);}
.ws-bar-fill.rof{background:linear-gradient(90deg,#22c55e,#4ade80);}
.ws-slot-num{position:absolute;top:8px;left:8px;background:#ff6600;color:#fff;font-size:10px;font-weight:900;padding:3px 7px;letter-spacing:2px;z-index:2;box-shadow:0 0 10px rgba(255,102,0,.5);}
.ws-lock-tag{position:absolute;top:8px;right:8px;font-size:9px;font-weight:900;color:#fbbf24;background:rgba(0,0,0,.7);padding:3px 6px;letter-spacing:1px;border:1px solid rgba(251,191,36,.4);}
.ws-footer{padding:14px 30px 18px;border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:linear-gradient(0deg,rgba(255,102,0,.06),transparent);}
.ws-loadout{display:flex;gap:6px;align-items:center;}
.ws-ld-slot{display:flex;align-items:center;gap:6px;padding:7px 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);min-width:110px;font-size:10px;font-weight:800;color:rgba(255,255,255,.4);letter-spacing:1px;}
.ws-ld-slot.filled{border-color:#ff6600;color:#fff;background:rgba(255,102,0,.12);box-shadow:inset 0 0 8px rgba(255,102,0,.2);}
.ws-ld-slot img{height:18px;image-rendering:pixelated;}
.ws-actions{display:flex;gap:8px;}
.ws-btn{padding:11px 22px;border:none;cursor:pointer;font-family:"Rajdhani",sans-serif;font-size:12px;font-weight:900;letter-spacing:3px;transition:all .15s;}
.ws-btn-go{background:linear-gradient(135deg,#ff6600,#ff3c5a);color:#fff;}
.ws-btn-go:hover{filter:brightness(1.15);}
.ws-btn-go:disabled{background:rgba(255,255,255,.05);color:rgba(255,255,255,.2);cursor:not-allowed;}
.ws-btn-out{background:transparent;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.5);}
.ws-btn-out:hover{color:#fff;border-color:#fff;}


#mmOverlay{position:fixed;inset:0;background:rgba(5,5,12,.92);z-index:50;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px);padding:60px 40px;}
#mmOverlay.hidden{display:none;}
.mm-box{width:min(720px,94vw);background:#1a1424;position:relative;box-shadow:inset 0 0 0 2px #ff6600,inset 0 0 0 4px #0a0510,inset 0 4px 0 rgba(255,255,255,.04),0 0 0 2px #050308,0 10px 0 #050308,0 14px 50px rgba(0,0,0,.7);}
.mm-box::before{content:'';position:absolute;top:-1px;left:0;right:0;height:3px;background:linear-gradient(90deg,#3b82f6,#ff6600,#ef4444);}
.mm-header{padding:22px 30px 16px;text-align:center;border-bottom:1px solid rgba(255,255,255,.04);background:linear-gradient(180deg,rgba(255,102,0,.05),transparent);}
.mm-tit{font-size:13px;font-weight:900;letter-spacing:8px;color:rgba(255,255,255,.5);margin-bottom:4px;}
.mm-mode{font-size:22px;font-weight:900;letter-spacing:6px;color:#ff6600;text-shadow:0 0 16px rgba(255,102,0,.5);}
.mm-body{padding:22px 28px;}
.mm-teams{display:flex;gap:16px;justify-content:center;margin-bottom:18px;align-items:stretch;}
.mm-team{flex:1;max-width:260px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);padding:12px;}
.mm-team.blue{border-left:3px solid #3b82f6;background:linear-gradient(180deg,rgba(59,130,246,.06),transparent);}
.mm-team.red{border-left:3px solid #ef4444;background:linear-gradient(180deg,rgba(239,68,68,.06),transparent);}
.mm-team-lbl{font-size:11px;font-weight:900;letter-spacing:5px;padding:6px 10px;margin-bottom:10px;}
.mm-team.blue .mm-team-lbl{color:#60a5fa;}
.mm-team.red .mm-team-lbl{color:#f87171;}
.mm-slots{display:flex;flex-direction:column;gap:5px;}
.mm-slot{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.06);}
.mm-slot.filled{border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.06);box-shadow:inset 2px 0 0 #4ade80;}
.mm-slot.empty{opacity:.45;}
.mm-av{width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:900;font-size:13px;}
.mm-slot.empty .mm-av{background:rgba(255,255,255,.04);color:rgba(255,255,255,.2);border:1px dashed rgba(255,255,255,.1);}
.mm-slot-nm{font-size:13px;font-weight:800;letter-spacing:1px;}
.mm-slot-skin{font-size:9px;color:rgba(255,255,255,.3);letter-spacing:1px;margin-top:1px;}
.vs-row{display:flex;align-items:center;gap:14px;margin:14px 0 18px;}
.vs-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);}
.vs-txt{font-size:22px;font-weight:900;color:#ff3c5a;letter-spacing:4px;padding:6px 14px;background:rgba(255,60,90,.08);border:1px solid rgba(255,60,90,.3);}
.mm-cnt-wrap{text-align:center;padding:18px 0 10px;border-top:1px solid rgba(255,255,255,.04);}
.mm-cnt{font-size:72px;font-weight:900;color:#ff6600;line-height:1;text-shadow:0 0 30px rgba(255,102,0,.6);animation:cp 1s ease-in-out infinite;}
@keyframes cp{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.mm-cnt-lbl{font-size:10px;color:rgba(255,255,255,.4);letter-spacing:5px;margin-top:6px;}
.mm-foot{padding:14px 30px 20px;border-top:1px solid rgba(255,255,255,.04);display:flex;justify-content:center;}
.mm-leave{background:transparent;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.6);font-family:"Rajdhani",sans-serif;font-size:11px;font-weight:800;padding:10px 28px;cursor:pointer;letter-spacing:3px;transition:all .15s;}
.mm-leave:hover{border-color:#ef4444;color:#ef4444;}

/* ===ROOM/TEAM SELECT OVERLAY=== */
#roomOverlay{position:fixed;inset:0;background:rgba(5,5,12,.93);z-index:57;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(14px);padding:40px;}
#roomOverlay.hidden{display:none;}
.room-box{width:min(700px,94vw);background:#1a1424;box-shadow:inset 0 0 0 2px #ff6600,inset 0 0 0 4px #0a0510,0 0 0 2px #050308,0 10px 0 #050308,0 14px 50px rgba(0,0,0,.7);display:flex;flex-direction:column;overflow:hidden;}
.room-code-join{display:flex;gap:8px;align-items:center;padding:12px 26px;border-top:1px solid rgba(255,255,255,.05);}
.room-code-inp{flex:1;min-width:0;height:38px;padding:0 12px;background:#0e0a16;border:1px solid rgba(255,255,255,.15);color:#fff;font-family:"Rajdhani",sans-serif;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;outline:none;}
.room-code-inp:focus{border-color:#ff6600;}
.room-code-inp::placeholder{color:rgba(255,255,255,.3);letter-spacing:1px;text-transform:none;}
.rcj-btn{flex:0 0 auto;padding:0 18px;height:38px;}
.room-head{padding:18px 26px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(255,102,0,.08),transparent);}
.room-tit{font-size:18px;font-weight:900;letter-spacing:5px;color:#fff;}
.room-sub{font-size:10px;color:rgba(255,255,255,.35);letter-spacing:2px;margin-top:3px;}
.room-timer-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;}
.room-timer{font-size:36px;font-weight:900;color:#ff6600;line-height:1;text-shadow:0 0 16px rgba(255,102,0,.5);}
.room-timer.urgent{color:#ef4444;animation:urgP .5s steps(1) infinite;}
@keyframes urgP{0%,100%{opacity:1}50%{opacity:.3}}
.room-timer-lbl{font-size:9px;color:rgba(255,255,255,.3);letter-spacing:3px;}
.room-body{padding:20px 26px;display:flex;gap:16px;}
.room-team-col{flex:1;display:flex;flex-direction:column;gap:8px;}
.room-team-hdr{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:11px;font-weight:900;letter-spacing:3px;}
.room-team-hdr.blue{background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.3);color:#60a5fa;}
.room-team-hdr.red{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:#f87171;}
.room-player-slot{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.1);min-height:44px;font-size:12px;font-weight:700;}
.room-player-slot.filled{border-style:solid;border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.05);}
.room-player-slot.me{border-color:rgba(255,102,0,.5);background:rgba(255,102,0,.08);}
.room-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.room-empty-lbl{color:rgba(255,255,255,.2);font-size:10px;letter-spacing:1px;}
.room-join-btns{display:flex;gap:10px;padding:14px 26px;border-top:1px solid rgba(255,255,255,.06);}
.room-join-btn{flex:1;padding:12px;font-family:"Rajdhani",sans-serif;font-size:13px;font-weight:900;letter-spacing:3px;border:none;cursor:pointer;transition:all .12s;}
.room-join-btn.blue-btn{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;}
.room-join-btn.blue-btn:hover{filter:brightness(1.1);}
.room-join-btn.red-btn{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;}
.room-join-btn.red-btn:hover{filter:brightness(1.1);}
.room-join-btn.auto-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.7);}
.room-join-btn.auto-btn:hover{border-color:#ff6600;color:#ff6600;}
.room-join-btn:disabled{opacity:.4;cursor:not-allowed;filter:none;}
.room-join-btn.active-team{box-shadow:inset 0 0 0 3px rgba(255,255,255,.5);}
.room-code-row{padding:10px 26px 16px;display:flex;align-items:center;gap:10px;border-top:1px solid rgba(255,255,255,.04);}
.room-code-lbl{font-size:10px;color:rgba(255,255,255,.3);letter-spacing:2px;}
.room-code-val{font-size:13px;font-weight:900;color:#ff6600;letter-spacing:4px;flex:1;}
.room-leave-btn{background:transparent;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.4);font-family:"Rajdhani",sans-serif;font-size:10px;font-weight:800;padding:7px 16px;cursor:pointer;letter-spacing:2px;}
.room-leave-btn:hover{border-color:#ef4444;color:#ef4444;}
.room-vs{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 8px;}
.room-vs-txt{font-size:18px;font-weight:900;color:#ff3c5a;letter-spacing:3px;}
.room-vs-line{width:2px;height:40px;background:linear-gradient(180deg,transparent,rgba(255,60,90,.4),transparent);}
.room-mode-lbl{font-size:9px;color:rgba(255,255,255,.4);letter-spacing:2px;text-align:center;}

/* ===GAME=== */
#gameScreen{background:#080c10;padding:0;align-items:stretch;justify-content:stretch;z-index:5;}
#gameCanvas,#laserCanvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;}
#laserCanvas{pointer-events:none;z-index:15;}
.hud{position:absolute;inset:0;pointer-events:none;z-index:20;}
.hud-top{position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;align-items:center;padding-top:8px;}
.hud-ts{display:flex;align-items:center;gap:10px;padding:7px 18px;background:rgba(0,0,0,.8);backdrop-filter:blur(12px);clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,10px 100%);}
.hud-ts.blue{border-bottom:3px solid #3b82f6;}.hud-ts.red{border-bottom:3px solid #ef4444;}
.hud-sn{font-size:30px;font-weight:900;line-height:1;}
.hud-ts.blue .hud-sn{color:#60a5fa;}.hud-ts.red .hud-sn{color:#f87171;}
.hud-tmbox{padding:7px 20px;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);text-align:center;border-bottom:3px solid rgba(255,255,255,.12);}
.hud-tm{font-size:20px;font-weight:900;letter-spacing:3px;color:#fff;}
.hud-tm.danger{color:#ef4444;animation:tdgr .5s steps(1) infinite;}
@keyframes tdgr{0%,100%{opacity:1}50%{opacity:.3}}
.hud-mmap{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.1);}
#mmapCvs{width:130px;height:86px;display:block;image-rendering:pixelated;}
.killfeed{position:absolute;top:68px;right:10px;display:flex;flex-direction:column;gap:3px;pointer-events:none;}
.kfe{display:flex;align-items:center;gap:7px;background:rgba(0,0,0,.8);padding:4px 10px;font-size:12px;font-weight:700;animation:kff 3.5s ease forwards;border-left:3px solid #ef4444;}
.kfe.hs{border-left-color:#ffd700;}
@keyframes kff{0%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(8px)}}
.kfk{color:#4ade80;}.kfv{color:#f87171;}.kfhs{color:#ffd700;font-size:9px;}
.hud-bl{position:absolute;bottom:12px;left:12px;}
.hud-hp{background:rgba(0,0,0,.8);padding:9px 13px;clip-path:polygon(0 0,100% 0,calc(100% - 7px) 100%,0% 100%);}
.hp-lbl{font-size:9px;font-weight:700;color:rgba(255,255,255,.3);letter-spacing:3px;margin-bottom:4px;}
.hp-bar{width:200px;height:7px;background:rgba(255,255,255,.08);}
.hp-fill{height:100%;background:linear-gradient(90deg,#ef4444,#f87171);transition:width .25s;}
.hp-num{font-size:24px;font-weight:900;color:#fff;margin-top:2px;line-height:1;}
.hud-weps{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:5px;}
.hw-slot{background:rgba(0,0,0,.8);padding:7px 10px;text-align:center;min-width:64px;border:1px solid rgba(255,255,255,.06);clip-path:polygon(5px 0%,100% 0%,calc(100% - 5px) 100%,0% 100%);transition:all .2s;}
.hw-slot.active{background:rgba(255,102,0,.2);border-color:#ff6600;}
.hw-ico{width:44px;height:22px;image-rendering:pixelated;image-rendering:crisp-edges;display:block;margin:0 auto;}
.hw-nm{font-size:8px;font-weight:700;color:rgba(255,255,255,.35);letter-spacing:1px;margin-top:2px;}
.hw-am{font-size:11px;font-weight:700;color:#ff6600;}.hw-k{font-size:8px;color:rgba(255,255,255,.2);}
.hud-ammo{position:absolute;bottom:12px;right:12px;text-align:right;background:rgba(0,0,0,.8);padding:9px 14px;clip-path:polygon(7px 0%,100% 0%,100% 100%,0% 100%);}
.a-lbl{font-size:9px;font-weight:700;color:rgba(255,255,255,.3);letter-spacing:3px;margin-bottom:2px;}
.a-cur{font-size:38px;font-weight:900;color:#fff;line-height:1;}.a-max{font-size:13px;color:rgba(255,255,255,.3);}
.a-rld{font-size:11px;font-weight:700;color:#ff6600;letter-spacing:2px;animation:rbl .5s steps(1) infinite;}
@keyframes rbl{0%,100%{opacity:1}50%{opacity:0}}.a-rld.hidden{display:none;}
.hitind{position:absolute;inset:0;border:5px solid rgba(239,68,68,.75);pointer-events:none;animation:hif .35s ease forwards;}
@keyframes hif{0%{opacity:1}100%{opacity:0}}.hitind.hidden{display:none;}
.xhair{position:fixed;pointer-events:none;z-index:1000;transform:translate(-50%,-50%);}
.dmgnum{position:absolute;font-family:"Rajdhani",sans-serif;font-size:18px;font-weight:900;pointer-events:none;animation:dmgp 1s ease forwards;z-index:25;text-shadow:0 2px 6px rgba(0,0,0,.9);}
@keyframes dmgp{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-38px)}}
.spop{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-size:clamp(16px,2.5vw,28px);font-weight:900;letter-spacing:4px;pointer-events:none;text-shadow:0 0 16px currentColor;animation:spp 2s ease forwards;}
@keyframes spp{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%)}}
.spec-bar{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.9);border-top:1px solid rgba(255,102,0,.2);padding:9px 14px;display:flex;align-items:center;gap:10px;z-index:30;pointer-events:all;}
.spec-bar.hidden{display:none;}
.spec-lbl{font-size:10px;font-weight:700;color:#ff6600;letter-spacing:4px;white-space:nowrap;}
.spec-btns{display:flex;gap:5px;flex:1;flex-wrap:wrap;}
.spec-btn{padding:5px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5);font-family:"Rajdhani",sans-serif;font-size:12px;font-weight:700;cursor:pointer;letter-spacing:1px;transition:all .15s;}
.spec-btn:hover,.spec-btn.active{background:rgba(255,102,0,.15);border-color:#ff6600;color:#ff6600;}
.spec-hint{font-size:10px;color:rgba(255,255,255,.2);white-space:nowrap;}
.spec-ov{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:22;text-align:center;}
.spec-ov.hidden{display:none;}
.spec-nm{background:rgba(255,102,0,.85);padding:4px 14px;font-size:13px;font-weight:700;letter-spacing:3px;color:#fff;}
.spec-sub{font-size:10px;color:rgba(255,255,255,.4);margin-top:3px;letter-spacing:2px;}
/* ===PAUSE OVERLAY=== */
#pauseOverlay{position:fixed;inset:0;background:rgba(5,5,12,.85);z-index:60;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px);padding:60px 40px;}
#pauseOverlay.hidden{display:none;}
.po-box{width:min(440px,92vw);background:#1a1424;position:relative;box-shadow:inset 0 0 0 2px #ff6600,inset 0 0 0 4px #0a0510,inset 0 4px 0 rgba(255,255,255,.04),0 0 0 2px #050308,0 10px 0 #050308,0 14px 50px rgba(0,0,0,.7);}
.po-box::before,.po-box::after{display:none;}
.po-box::before{content:'';position:absolute;top:-1px;left:0;right:0;height:4px;background:linear-gradient(90deg,#ff6600,#ff3c5a,#ff6600);}
.po-box::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:4px;background:linear-gradient(90deg,#ff3c5a,#ff6600,#ff3c5a);}
.po-head{padding:24px 28px 18px;text-align:center;border-bottom:1px solid rgba(255,255,255,.04);background:linear-gradient(180deg,rgba(255,102,0,.06),transparent);}
.po-tit{font-size:26px;font-weight:900;letter-spacing:10px;color:#fff;text-shadow:0 0 24px rgba(255,102,0,.5);}
.po-tit-acc{display:inline-block;width:30px;height:3px;background:#ff6600;margin:8px auto 0;}
.po-sub{font-size:11px;color:rgba(255,255,255,.4);letter-spacing:2px;margin-top:8px;}
.po-body{padding:20px 24px 22px;}
.po-btns{display:flex;flex-direction:column;gap:8px;}
.po-btn{padding:14px 22px;border:none;cursor:pointer;font-family:"Rajdhani",sans-serif;font-size:14px;font-weight:900;letter-spacing:4px;transition:transform .1s,filter .1s;clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);display:flex;align-items:center;justify-content:center;gap:10px;position:relative;}
.po-btn-ico{display:inline-block;width:16px;height:16px;flex-shrink:0;}
.po-btn-ico.play{background:#fff;clip-path:polygon(0 0,100% 50%,0 100%);}
.po-btn-ico.flag{background:#fff;clip-path:polygon(0 0,100% 25%,60% 50%,100% 75%,0 100%);}
.po-btn.po-go{background:linear-gradient(180deg,#34d399,#16a34a);color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.4);}
.po-btn.po-go:hover{filter:brightness(1.1);}
.po-btn.po-go:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.4);}
.po-btn.po-out{background:linear-gradient(180deg,#f87171,#dc2626);color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.4);}
.po-btn.po-out:hover{filter:brightness(1.1);}
.po-btn.po-out:active{transform:translateY(2px);}
.po-hint{text-align:center;margin-top:16px;font-size:9px;color:rgba(255,255,255,.3);letter-spacing:4px;}
.po-hint kbd{display:inline-block;padding:2px 6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);font-family:inherit;font-size:9px;letter-spacing:1px;margin:0 3px;}
.round-banner{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);font-size:clamp(28px,5vw,52px);font-weight:900;letter-spacing:6px;pointer-events:none;text-shadow:0 0 24px currentColor;animation:rba 1.4s ease forwards;z-index:25;}
@keyframes rba{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-58%) scale(1)}}
.round-info{display:inline-flex;align-items:center;padding:6px 14px;background:rgba(0,0,0,.7);margin-left:8px;font-size:18px;font-weight:900;letter-spacing:2px;}

#goScreen{flex-direction:column;gap:18px;background:rgba(0,0,0,.96);z-index:70;backdrop-filter:blur(12px);justify-content:flex-start;overflow-y:auto;padding:24px 0;}
.go-tit{font-size:clamp(26px,5vw,50px);font-weight:900;letter-spacing:6px;text-align:center;}
.go-tit.win{color:#ff6600;text-shadow:0 0 40px rgba(255,102,0,.5);}.go-tit.lose{color:#ef4444;}
.go-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:20px 28px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);min-width:min(480px,90vw);}
.stv{font-size:26px;font-weight:900;color:#ff6600;text-align:center;}.stl{font-size:9px;font-weight:700;color:rgba(255,255,255,.28);margin-top:3px;text-align:center;letter-spacing:2px;}
.go-mvp{padding:9px 20px;background:rgba(255,102,0,.1);border:1px solid rgba(255,102,0,.25);font-size:13px;font-weight:700;color:#ff6600;letter-spacing:2px;text-align:center;}
.go-scroll-wrap{width:min(900px,92vw);max-height:calc(100vh - 170px);overflow-y:auto;display:flex;flex-direction:column;gap:18px;padding:0 8px 8px;}
.go-btn-bar{width:min(900px,92vw);flex-shrink:0;display:flex;justify-content:center;padding-bottom:20px;}

.twrap{position:fixed;top:80px;right:260px;z-index:200;display:flex;flex-direction:column;gap:6px;pointer-events:none;align-items:flex-end;}
.toast{background:rgba(10,10,20,.95);border:1px solid rgba(255,102,0,.5);border-left:4px solid #ff6600;padding:10px 18px 10px 14px;font-size:12px;font-weight:800;color:#ff6600;letter-spacing:1px;animation:ta 3s ease forwards;box-shadow:0 6px 20px rgba(255,102,0,.25);min-width:200px;}
@keyframes ta{0%{opacity:0;transform:translateY(-6px)}10%{opacity:1;transform:translateY(0)}80%{opacity:1}100%{opacity:0}}
::-webkit-scrollbar{width:10px;height:10px;}::-webkit-scrollbar-track{background:rgba(0,0,0,.4);}::-webkit-scrollbar-thumb{background:#ff6600;border:2px solid #0a0a0f;}::-webkit-scrollbar-thumb:hover{background:#ff8833;}

/* ===== PIXEL 3D 패널/버튼 공통 ===== */
.pix-panel{position:relative;background:#1a1424;box-shadow:inset 0 0 0 2px #ff6600,inset 0 0 0 4px #0a0510,inset 0 4px 0 rgba(255,255,255,.04),0 0 0 2px #050308,0 10px 0 #050308,0 14px 40px rgba(0,0,0,.7);}
.pix-panel-cool{box-shadow:inset 0 0 0 2px #3b82f6,inset 0 0 0 4px #050a18,inset 0 4px 0 rgba(255,255,255,.04),0 0 0 2px #020610,0 10px 0 #020610,0 14px 40px rgba(0,0,0,.7);}
.pix-panel-warn{box-shadow:inset 0 0 0 2px #ef4444,inset 0 0 0 4px #18050a,inset 0 4px 0 rgba(255,255,255,.04),0 0 0 2px #100208,0 10px 0 #100208,0 14px 40px rgba(0,0,0,.7);}
.pix-overlay{position:fixed;inset:0;background:rgba(2,2,8,.85);z-index:50;display:flex;align-items:center;justify-content:center;padding:60px 40px;backdrop-filter:blur(8px);}
.pix-overlay.hidden{display:none;}
.pix-close{width:38px;height:38px;background:#ef4444;border:none;cursor:pointer;color:#fff;font-size:18px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #ef4444,inset 0 -3px 0 #7f1d1d,inset 3px 0 0 #ff8888,0 4px 0 #7f1d1d,0 0 0 2px #1a0608;flex-shrink:0;line-height:1;padding:0;font-family:inherit;transition:transform .08s;}
.pix-close:hover{background:#f87171;}
.pix-close:active{transform:translateY(3px);box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #ef4444,inset 0 -1px 0 #7f1d1d,0 1px 0 #7f1d1d,0 0 0 2px #1a0608;}
.pix-btn{position:relative;border:none;cursor:pointer;font-family:"Rajdhani",sans-serif;font-weight:900;letter-spacing:3px;color:#fff;padding:14px 22px;font-size:14px;transition:transform .08s;}
.pix-btn.green{background:#22c55e;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #22c55e,inset 0 -4px 0 #166534,inset 4px 0 0 rgba(255,255,255,.15),0 6px 0 #166534,0 0 0 2px #052010;}
.pix-btn.red{background:#ef4444;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #ef4444,inset 0 -4px 0 #7f1d1d,inset 4px 0 0 rgba(255,255,255,.15),0 6px 0 #7f1d1d,0 0 0 2px #1a0608;}
.pix-btn.blue{background:#3b82f6;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #3b82f6,inset 0 -4px 0 #1e40af,inset 4px 0 0 rgba(255,255,255,.15),0 6px 0 #1e40af,0 0 0 2px #050a18;}
.pix-btn.orange{background:#ff6600;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #ff6600,inset 0 -4px 0 #9a3a00,inset 4px 0 0 rgba(255,255,255,.15),0 6px 0 #9a3a00,0 0 0 2px #1a0a02;}
.pix-btn.gray{background:#4a4a55;box-shadow:inset 0 0 0 2px #888,inset 0 0 0 4px #4a4a55,inset 0 -4px 0 #25252a,inset 4px 0 0 rgba(255,255,255,.1),0 6px 0 #25252a,0 0 0 2px #0a0a0f;color:rgba(255,255,255,.85);}
.pix-btn:active{transform:translateY(4px);}
.pix-btn.green:active{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #22c55e,inset 0 -2px 0 #166534,0 2px 0 #166534,0 0 0 2px #052010;}
.pix-btn.red:active{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #ef4444,inset 0 -2px 0 #7f1d1d,0 2px 0 #7f1d1d,0 0 0 2px #1a0608;}
.pix-btn.orange:active,.pix-btn.blue:active,.pix-btn.gray:active{filter:brightness(.95);}
.pix-header{padding:18px 24px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);border-bottom:2px solid rgba(0,0,0,.5);box-shadow:0 2px 0 rgba(255,255,255,.04);position:relative;}
.pix-header::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;background:rgba(255,102,0,.4);}
.pix-h-tit{font-size:18px;font-weight:900;letter-spacing:5px;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.6),0 0 16px rgba(255,102,0,.3);}
.pix-h-sub{font-size:10px;color:rgba(255,255,255,.45);letter-spacing:2px;margin-top:4px;}
.pix-body{padding:24px;overflow-y:auto;}
.pix-footer{padding:16px 24px;border-top:2px solid rgba(0,0,0,.5);box-shadow:inset 0 2px 0 rgba(255,255,255,.04);background:linear-gradient(0deg,rgba(255,255,255,.02),transparent);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
::-webkit-scrollbar{width:14px;height:14px;}
::-webkit-scrollbar-track{background:#0a0510;border:2px solid #1a1424;}
::-webkit-scrollbar-thumb{background:#ff6600;border:2px solid #1a1424;box-shadow:inset 0 0 0 2px #ffaa44,inset 0 0 0 4px #ff6600;}
::-webkit-scrollbar-thumb:hover{background:#ff8833;}
#mobileJoy{display:none !important;touch-action:none;user-select:none;}
#mobileFireJoy{display:none !important;touch-action:none;user-select:none;}
body.game-ui #mobileJoy,
body.game-ui #mobileFireJoy{display:block !important;}
body.lobby-ui #mobileJoy,
body.lobby-ui #mobileFireJoy{display:none !important;}
@media (pointer:coarse){
  body.game-ui #mobileJoy,
  body.game-ui #mobileFireJoy{display:block !important;}
  body.lobby-ui #mobileJoy,
  body.lobby-ui #mobileFireJoy{display:none !important;}
}

/* ─── 인게임 채팅 ─── */
.gc-wrap{position:absolute;bottom:70px;left:12px;width:260px;z-index:30;pointer-events:none;}
.gc-msgs{display:flex;flex-direction:column;gap:2px;margin-bottom:5px;overflow:hidden;}
.gc-msg{font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:600;padding:3px 7px;background:rgba(0,0,0,.6);border-left:2px solid rgba(255,255,255,.15);line-height:1.35;word-break:break-all;transition:opacity .5s;}
.gc-msg.fading{opacity:0;}
.gc-msg .gcnm{font-weight:800;}
.gc-msg .gcclantag{font-weight:700;color:#ffd84d;font-size:10px;letter-spacing:.3px;}
.gc-msg.sys{color:rgba(255,255,255,.35);border-left-color:transparent;font-weight:500;}
.gc-row{display:flex;gap:4px;pointer-events:auto;opacity:0;transition:opacity .15s;height:0;overflow:hidden;}
.gc-row.open{opacity:1;height:auto;overflow:visible;}
.gc-inp{flex:1;background:rgba(0,0,0,.82);border:1px solid rgba(255,102,0,.7);color:#fff;font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:600;padding:5px 8px;outline:none;}
.gc-inp::placeholder{color:rgba(255,255,255,.28);}
.gc-snd{background:#ff6600;color:#fff;border:none;cursor:pointer;font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:700;padding:5px 10px;}
.gc-hint{font-family:'Rajdhani',sans-serif;font-size:10px;color:rgba(255,255,255,.2);letter-spacing:1px;margin-top:3px;pointer-events:none;}

/* ─── SURVIVAL MODE ─── */
#mbtn_survival { color: #ff4444; border-color: rgba(255,68,68,.3); }
#mbtn_survival.active-mode { background: rgba(255,68,68,.15); border-color: #ff4444; color: #ff4444; }
#svJoinBtn { border-color: rgba(255,68,68,.5) !important; }
#svJoinBtn .mbtn-label { color: #ff4444 !important; }

/* ─── CLAN SYSTEM ─── */
#clanOverlay{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:300;backdrop-filter:blur(6px);}
#clanOverlay.hidden{display:none;}
.clan-modal-box{width:640px;max-width:96vw;max-height:88vh;background:linear-gradient(135deg,rgba(15,15,25,.98),rgba(8,8,16,.98));border:1px solid rgba(167,139,250,.25);display:flex;flex-direction:column;overflow:hidden;}
.clan-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;}
.clan-modal-title{font-size:16px;font-weight:900;letter-spacing:2px;color:#a78bfa;}
.clan-modal-sub{font-size:10px;color:rgba(255,255,255,.4);letter-spacing:1px;margin-top:2px;}
.clan-close-btn{background:none;border:1px solid rgba(255,255,255,.15);color:#fff;width:28px;height:28px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;}
.clan-close-btn:hover{background:rgba(255,255,255,.08);}
.clan-tab-bar{display:flex;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;}
.clan-tab{flex:1;background:none;border:none;color:rgba(255,255,255,.4);font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;padding:10px 4px;cursor:pointer;transition:all .15s;border-bottom:2px solid transparent;}
.clan-tab:hover{color:rgba(255,255,255,.7);background:rgba(255,255,255,.04);}
.clan-tab.active{color:#a78bfa;border-bottom-color:#a78bfa;background:rgba(167,139,250,.08);}
.clan-modal-body{flex:1;overflow-y:auto;padding:16px 20px;}

/* 클랜 없음 화면 */
.clan-no-clan{display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px 0;}
.clan-emblem-empty{font-size:48px;opacity:.3;}
.clan-no-title{font-size:16px;font-weight:700;color:rgba(255,255,255,.7);}
.clan-no-sub{font-size:11px;color:rgba(255,255,255,.35);}
.clan-lock-msg{font-size:11px;color:rgba(255,100,100,.7);border:1px solid rgba(255,100,100,.2);padding:8px 14px;}
.clan-action-btn{background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;color:#fff;font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:700;letter-spacing:1px;padding:10px 22px;cursor:pointer;transition:all .15s;}
.clan-action-btn:hover{filter:brightness(1.2);}
.clan-action-btn.secondary{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);}
.clan-action-btn.secondary:hover{background:rgba(255,255,255,.14);}
.clan-action-btn.danger{background:rgba(255,50,50,.2);border:1px solid rgba(255,50,50,.3);color:#ff6060;}
.clan-action-btn.danger:hover{background:rgba(255,50,50,.35);}
.clan-need-clan{text-align:center;color:rgba(255,255,255,.4);font-size:12px;padding:40px;}

/* 클랜 정보 */
.clan-info-wrap{display:flex;flex-direction:column;gap:14px;}
.clan-info-head{display:flex;align-items:center;gap:12px;}
.clan-tag-big{font-size:24px;font-weight:900;color:#a78bfa;letter-spacing:2px;}
.clan-info-name{font-size:18px;font-weight:700;}
.clan-info-lv{font-size:11px;color:rgba(255,255,255,.4);}
.clan-info-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.clan-stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);padding:8px;text-align:center;}
.clan-stat-v{display:block;font-size:16px;font-weight:700;color:#a78bfa;}
.clan-stat-l{font-size:9px;color:rgba(255,255,255,.4);letter-spacing:1px;}
.clan-xp-bar-wrap{margin:4px 0;}
.clan-xp-bar{height:6px;background:rgba(255,255,255,.08);overflow:hidden;}
.clan-xp-fill{height:100%;background:linear-gradient(90deg,#7c3aed,#a855f7);transition:width .5s;}
.clan-members-list{display:flex;flex-direction:column;gap:6px;}
.clan-section-tit{font-size:10px;color:rgba(255,255,255,.35);letter-spacing:2px;margin-bottom:6px;font-weight:700;}
.clan-member-row{display:flex;align-items:center;gap:8px;padding:6px 10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);}
.clan-member-name{flex:1;font-size:12px;font-weight:600;}
.clan-member-name.master{color:#ffd700;}
.clan-member-pp{font-size:10px;color:#a78bfa;font-weight:700;}
.clan-kick-btn{background:rgba(255,50,50,.15);border:1px solid rgba(255,50,50,.3);color:#ff6060;font-family:'Rajdhani',sans-serif;font-size:9px;font-weight:700;padding:3px 8px;cursor:pointer;letter-spacing:1px;}
.clan-kick-btn:hover{background:rgba(255,50,50,.3);}
.clan-desc{font-size:11px;color:rgba(255,255,255,.4);padding:8px;background:rgba(255,255,255,.03);border-left:2px solid rgba(167,139,250,.4);}
.clan-home-btns{display:flex;gap:8px;}

/* 클랜 폼 */
.clan-form-wrap{display:flex;flex-direction:column;gap:10px;max-width:400px;}
.clan-form-title{font-size:15px;font-weight:700;letter-spacing:1px;margin-bottom:4px;}
.clan-lbl{font-size:10px;color:rgba(255,255,255,.5);letter-spacing:1px;font-weight:700;margin-top:4px;}
.clan-inp{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;font-family:'Rajdhani',sans-serif;font-size:13px;padding:9px 12px;outline:none;width:100%;box-sizing:border-box;}
.clan-inp:focus{border-color:rgba(167,139,250,.6);}
.clan-inp::placeholder{color:rgba(255,255,255,.25);}

/* 클랜 상점 */
.clan-shop-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.07);}
.clan-shop-pp-info{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;}
.clan-pp-ico{font-size:16px;}
.clan-shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.clan-shop-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:14px;display:flex;flex-direction:column;gap:6px;transition:border-color .15s;}
.clan-shop-item:hover{border-color:rgba(167,139,250,.4);}
.clan-shop-item.owned{border-color:rgba(74,222,128,.25);background:rgba(74,222,128,.04);}
.clan-shop-wname{font-size:13px;font-weight:700;letter-spacing:1px;}
.clan-shop-wdesc{font-size:10px;color:rgba(255,255,255,.4);}
.clan-shop-wstats{font-size:10px;color:rgba(255,255,255,.5);}
.clan-shop-price{font-size:12px;font-weight:700;color:#a78bfa;}
.clan-shop-buy{background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;color:#fff;font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;padding:8px;cursor:pointer;margin-top:4px;}
.clan-shop-buy:hover{filter:brightness(1.2);}
.clan-shop-buy:disabled,.clan-shop-buy.owned{background:rgba(255,255,255,.08);color:rgba(255,255,255,.35);cursor:not-allowed;}
.clan-shop-buy.cant{background:rgba(255,50,50,.15);color:rgba(255,100,100,.6);}

/* 클랜 추천 */
.clan-rec-search{margin-bottom:12px;}
.clan-rec-list{display:flex;flex-direction:column;gap:8px;}
.clan-rec-item{display:flex;align-items:center;gap:10px;padding:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);transition:border-color .15s;}
.clan-rec-item:hover{border-color:rgba(167,139,250,.3);}
.clan-rec-tag{font-size:14px;font-weight:900;color:#a78bfa;letter-spacing:2px;flex-shrink:0;width:50px;}
.clan-rec-info{flex:1;}
.clan-rec-name{font-size:13px;font-weight:700;}
.clan-rec-lv{font-size:10px;color:rgba(255,255,255,.4);font-weight:500;}
.clan-rec-desc{font-size:10px;color:rgba(255,255,255,.35);margin-top:2px;}
.clan-rec-members{font-size:10px;color:rgba(255,255,255,.4);margin-top:2px;}
.clan-rec-actions{flex-shrink:0;}
.clan-join-btn{background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;color:#fff;font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;padding:7px 14px;cursor:pointer;}
.clan-join-btn:hover{filter:brightness(1.2);}
.clan-loading{text-align:center;color:rgba(255,255,255,.3);font-size:12px;padding:30px;}

/* 클랜전 */
.clan-war-queue,.clan-war-active{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 0;}
.clan-war-title{font-size:20px;font-weight:900;letter-spacing:2px;color:#a78bfa;}
.clan-war-desc{font-size:12px;color:rgba(255,255,255,.45);text-align:center;max-width:340px;}
.clan-war-rewards{display:flex;flex-direction:column;gap:6px;width:100%;max-width:280px;}
.clan-war-rew-item{display:flex;align-items:center;gap:8px;font-size:12px;padding:8px 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);}
.clan-rew-ico{font-size:16px;}
.clan-war-queued{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.5);}
.clan-war-queue-anim{font-size:22px;animation:war-pulse 1s infinite;}
@keyframes war-pulse{0%,100%{opacity:.3}50%{opacity:1}}
.clan-war-vs{display:flex;align-items:center;gap:20px;}
.clan-war-side{text-align:center;font-size:14px;font-weight:700;}
.clan-war-side.blue{color:#60a5fa;}
.clan-war-side.red{color:#f87171;}
.clan-war-vs-txt{font-size:20px;font-weight:900;color:rgba(255,255,255,.3);}
.clan-war-score{display:flex;align-items:center;gap:12px;}
.clan-war-score-v{font-size:36px;font-weight:900;}
.clan-war-score-v.blue{color:#60a5fa;}
.clan-war-score-v.red{color:#f87171;}
.clan-war-score-sep{font-size:24px;color:rgba(255,255,255,.3);}
.clan-war-info{font-size:11px;color:rgba(255,255,255,.35);}

/* 클랜 랭킹 */
.clan-rank-title{font-size:13px;font-weight:700;letter-spacing:1px;color:#ffd700;margin-bottom:12px;}
.clan-rank-list{display:flex;flex-direction:column;gap:6px;}
.clan-rank-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);font-size:12px;}
.clan-rank-row.myrank{border-color:rgba(167,139,250,.5);background:rgba(167,139,250,.08);}
.clan-rank-num{width:32px;font-size:14px;font-weight:700;text-align:center;}
.clan-rank-tag{color:#a78bfa;font-weight:700;letter-spacing:1px;}
.clan-rank-name{flex:1;font-weight:600;}
.clan-rank-lv{color:rgba(255,255,255,.4);font-size:10px;}
.clan-rank-xp{color:#ffd700;font-weight:700;}
.clan-rank-members{color:rgba(255,255,255,.35);font-size:10px;margin-left:auto;}

/* ─── i18n / 언어 셀렉트 ─── */
.lang-select{background:#1a1424;color:#fff;border:1px solid rgba(255,102,0,.4);font-family:inherit;font-size:11px;font-weight:700;padding:5px 8px;border-radius:3px;cursor:pointer;outline:none;letter-spacing:.5px;}
.lang-select:hover{border-color:#ff6600;}

/* ─── 재장전 버튼 (모바일) ─── */
#mobileReloadBtn{display:none;position:fixed;right:16px;bottom:130px;width:54px;height:54px;border-radius:50%;background:rgba(255,102,0,.85);border:2.5px solid #ff9944;color:#fff;font-size:22px;font-weight:900;z-index:9999;cursor:pointer;touch-action:manipulation;box-shadow:0 2px 12px rgba(255,102,0,.5);transition:background .15s;}
#mobileReloadBtn:active{background:rgba(255,60,0,.95);}
@media (pointer:coarse){
  #mobileReloadBtn{display:flex;align-items:center;justify-content:center;}
}

/* ─── 모바일 HUD 토글 버튼 (채팅/스탯) ─── */
.mobile-hud-btns{display:none;position:fixed;left:16px;top:104px;flex-direction:column;gap:8px;z-index:9998;}
.mobile-hud-btn{width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.65);border:1.5px solid rgba(255,255,255,.2);font-size:18px;color:#fff;cursor:pointer;touch-action:manipulation;display:flex;align-items:center;justify-content:center;}
.mobile-hud-btn.pause-btn{font-size:11px;font-weight:900;letter-spacing:1px;}
.mobile-hud-btn:active{background:rgba(255,102,0,.5);}
@media (pointer:coarse){
  .mobile-hud-btns{display:flex;}
}

/* ─── 모바일 스탯 패널 ─── */
.mobile-stats-panel{position:fixed;left:70px;top:104px;background:rgba(10,5,20,.88);border:1.5px solid rgba(255,102,0,.4);border-radius:8px;padding:12px 16px;z-index:9990;min-width:140px;}
.msp-title{font-size:11px;font-weight:900;color:#ff6600;letter-spacing:1.5px;margin-bottom:8px;}
.msp-row{display:flex;justify-content:space-between;gap:16px;font-size:12px;font-weight:700;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.msp-row span:last-child{color:#ff9944;}

/* ─── 조이스틱 — 동적 위치 (fixed 기본값 제거, JS에서 관리) ─── */
@media (pointer:coarse){
  #mobileJoy{display:block;position:fixed;width:clamp(90px,22vw,130px);height:clamp(90px,22vw,130px);border-radius:50%;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);z-index:9999;left:20px;bottom:20px;touch-action:none;}
  #mobileJoyKnob{position:absolute;border-radius:50%;background:rgba(255,255,255,.65);width:40%;height:40%;left:30%;top:30%;}
  #mobileFireJoy{display:block;position:fixed;width:clamp(90px,22vw,130px);height:clamp(90px,22vw,130px);border-radius:50%;background:rgba(255,102,0,.12);border:2px solid rgba(255,102,0,.35);z-index:9999;right:20px;bottom:20px;touch-action:none;overflow:visible;}
  #mobileFireJoyKnob{position:absolute;border-radius:50%;background:rgba(255,160,90,.72);width:40%;height:40%;left:30%;top:30%;}
}

/* ─── 로비 모바일 최적화 ─── */
@media (max-width:768px){
  /* ── 헤더: 버튼 텍스트 숨기고 아이콘/약자만 ── */
  .lhdr{flex-wrap:nowrap;gap:4px;padding:6px 8px;align-items:center;}
  .lhdr>div:last-child{display:flex;flex-wrap:nowrap;gap:3px;flex-shrink:0;}
  .lhdr>div:last-child .btn{font-size:0!important;padding:6px 7px!important;min-width:30px;}
  /* 버튼 텍스트를 이모지/약자로 치환 — data-mo 속성 활용 */
  .lhdr>div:last-child .btn::before{font-size:11px;font-weight:900;letter-spacing:0;}
  .lhdr-logo{font-size:13px;letter-spacing:1px;}
  /* 헤더 버튼: 전체 텍스트 숨기고 이모지만 표시 */
  .lhdr-mini{display:inline;}
  .lhdr-full{display:none;}
  .lhdr-btn{font-size:14px!important;padding:5px 7px!important;min-width:28px;}
  .lhdr-pl{font-size:10px;gap:4px;}

  .lbody{flex-direction:column;}
  .lobby-main{flex-direction:column;}
  /* hub 캔버스: 모바일에서 최소 높이 확보 (툴바 54px + CTA 50px + 여유) */
  .lobby-hub{min-height:200px;max-height:42vw;}
  .lpanel{width:100%!important;max-height:220px;overflow-y:auto;}
  .match-area{width:100%;}
  .match-inner{flex-direction:column;gap:6px;}
  .match-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;}
  .mode-btn{font-size:9px;padding:5px 3px;}
  .mode-cnt{font-size:9px;}
  .match-btn-row{gap:6px;}
  .match-big-btn{min-width:72px;padding:8px 6px;}
  .mbtn-label{font-size:9px;}

  /* ── 툴바: 하단 우측 고정, 3개 버튼만(PASS·SETTINGS·RANK) ── */
  .hub-toolbar{
    position:absolute;
    right:0;bottom:6px;
    width:auto;
    border-radius:0;
    border-left:1px solid rgba(255,255,255,.08);
    border-top:none;
    border-right:none;border-bottom:none;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:0;
    padding:0;
    background:transparent;
    backdrop-filter:none;
    box-sizing:border-box;
  }
  /* 오른쪽 tb-btn 크기 = 왼쪽 tb-cta-mini 와 완전 동일 */
  .tb-btn{
    width:40px;
    height:38px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:0;
    background:rgba(0,0,0,.75);
    flex:none;
  }
  .tb-btn-lbl{font-size:6px;letter-spacing:0;}
  .tb-btn-ico{width:16px;height:16px;}

  /* ── PLAY CTA: 툴바와 완전히 같은 bottom 기준 ── */
  .hub-cta{
    bottom:6px;
    left:50%;
    transform:translateX(-50%);
    flex-direction:row;
    gap:6px;
    align-items:center;
    white-space:nowrap;
  }
  /* CTA 왼쪽 미니 버튼 그룹 활성화 */
  .hub-cta-tools{display:flex;}
}
/* 터치 기기(태블릿·모바일)에서도 hub-cta-tools 표시 */
@media (pointer:coarse){
  .hub-cta-tools{display:flex;}
  /* 왼쪽·오른쪽 버튼 크기·y축 완전 통일 */
  .hub-cta{bottom:6px;align-items:center;}
  .hub-toolbar{bottom:6px;padding:0;align-items:center;background:transparent;backdrop-filter:none;border-top:none;}
  .tb-cta-mini{width:40px;height:38px;background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.12);}
  .tb-cta-mini .tb-btn-ico{width:16px;height:16px;}
  .tb-cta-mini .tb-btn-lbl{font-size:5px;}
  .tb-btn{width:40px;height:38px;background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.12);}
  .tb-btn-ico{width:16px;height:16px;}
  .hub-play{font-size:15px;padding:10px 28px;}
  .hub-mode-quick{font-size:10px;padding:8px 10px;}
}

/* ─── 게임화면 모바일 채팅 ─── */
@media (max-width:768px),(pointer:coarse){
  .gc-wrap{width:min(220px,calc(100vw - 24px));bottom:10px;left:10px;}
  .gc-msgs{max-height:72px;}
  .gc-inp{font-size:13px;}
  .hud-top{font-size:12px;}
}

/* ─── 튜토리얼 모달 ─── */
#tutorialModal{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:99000;display:flex;align-items:center;justify-content:center;padding:12px;}
#tutorialModal.hidden{display:none;}
.tut-box{background:#0d0818;border:1.5px solid rgba(255,102,0,.5);border-radius:12px;width:100%;max-width:640px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;}
.tut-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.08);}
.tut-tit{font-size:18px;font-weight:900;color:#ff6600;letter-spacing:2px;}
.tut-sub{font-size:11px;color:rgba(255,255,255,.4);margin-top:2px;}
.tut-close{background:none;border:none;color:rgba(255,255,255,.5);font-size:20px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:color .15s;}
.tut-close:hover{color:#fff;}
.tut-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.08);padding:0 16px;}
.tut-tab{background:none;border:none;border-bottom:2px solid transparent;color:rgba(255,255,255,.5);font-family:inherit;font-size:12px;font-weight:700;padding:10px 14px;cursor:pointer;letter-spacing:.5px;transition:all .15s;}
.tut-tab.active{color:#ff6600;border-bottom-color:#ff6600;}
.tut-body{padding:20px;overflow-y:auto;flex:1;}
.tut-section{margin-bottom:20px;}
.tut-section-title{font-size:13px;font-weight:900;color:#ff9944;letter-spacing:1px;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid rgba(255,102,0,.2);}
.tut-key-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:12px;}
.tut-key{background:#1a1424;border:1.5px solid rgba(255,255,255,.2);border-radius:5px;padding:3px 10px;font-weight:900;font-size:12px;color:#fff;min-width:40px;text-align:center;font-family:inherit;}
.tut-desc{color:rgba(255,255,255,.7);flex:1;}
.tut-tip{background:rgba(255,102,0,.08);border:1px solid rgba(255,102,0,.2);border-radius:6px;padding:10px 14px;font-size:12px;color:rgba(255,255,255,.75);line-height:1.6;margin-top:8px;}
.tut-tip b{color:#ff9944;}
.tut-mode-row{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:12px;}
.tut-mode-badge{min-width:72px;padding:3px 8px;border-radius:4px;font-weight:900;text-align:center;font-size:10px;letter-spacing:.5px;}
.tut-mode-info{flex:1;color:rgba(255,255,255,.7);line-height:1.5;}

/* ─── 언어 설정 세팅 row ─── */
.hm-set-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06);gap:12px;}
.hm-set-lbl{font-size:13px;font-weight:700;letter-spacing:.5px;}
.hm-set-sub{font-size:11px;color:rgba(255,255,255,.4);margin-top:2px;}
.hm-set-ctrl{display:flex;align-items:center;}

@media (max-width:480px){
  .mobile-hud-btns{left:10px;top:96px;gap:7px;}
  .mobile-stats-panel{left:62px;top:96px;max-width:calc(100vw - 74px);}

  /* 극소형: 우측 툴바 버튼 더 압축 */
  .tb-btn{width:34px;height:34px;}
  .tb-btn-ico{width:14px;height:14px;}
  .tb-btn-lbl{display:none;}

  /* 극소형: CTA 미니 버튼도 동일하게 압축 */
  .tb-cta-mini{width:34px;height:34px;}
  .tb-cta-mini .tb-btn-ico{width:14px;height:14px;}
  .tb-cta-mini .tb-btn-lbl{display:none;}

  /* PLAY CTA · 툴바 — 동일 y축·크기 */
  .hub-cta{bottom:6px;gap:4px;align-items:center;}
  .hub-toolbar{bottom:6px;padding:0;align-items:center;}
  .tb-btn{width:34px;height:34px;background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.12);}
  .tb-cta-mini{width:34px;height:34px;}
  .hub-play{font-size:13px;padding:9px 20px;}
  .hub-mode-quick{font-size:9px;padding:7px 7px;}

  /* 헤더 로고 숨기기 */
  .lhdr-logo{display:none;}
  .lhdr>div:last-child .btn{padding:5px 6px!important;min-width:26px;}

  /* 매치 모드 버튼 3열 → 더 작게 */
  .match-modes{grid-template-columns:repeat(3,1fr);gap:3px;}
  .mode-btn{font-size:8px;padding:4px 2px;}
}