*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#22304a;font-family:'Baloo 2',system-ui,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:none}
input,select,textarea{user-select:text;-webkit-user-select:text;font-family:inherit}
#root{position:fixed;inset:0;overflow:hidden;--ui:1;--kb:0px;background:radial-gradient(circle at 50% 30%,#3b4f78,#1d2740)}
#root.fill{background:#9fdcff}
#stage{position:absolute;overflow:hidden;background:#9fdcff;box-shadow:0 0 0 1px rgba(0,0,0,.2),0 10px 40px rgba(0,0,0,.35)}
#root.fill #stage{box-shadow:none}
#gl{display:block;position:absolute;left:0;top:0;touch-action:none}
.hidden{display:none!important}
#tags{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.tag{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;transform-origin:50% 100%;will-change:transform}
.tname{background:rgba(20,28,48,.72);color:#fff;font-weight:800;font-size:calc(13px*var(--ui));padding:0 8px;border-radius:999px;white-space:nowrap;display:flex;align-items:center;gap:4px;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.tdot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none;box-shadow:0 0 0 1.5px #fff}
.tbot{background:#ffd166;color:#5a3b00;border-radius:6px;padding:0 4px;font-size:.8em}.tbot.warn{background:#ff8fa3;color:#5a0010}
.tconn{font-size:.85em}
#root.nonames .tname{display:none}
.bubble{max-width:200px;background:#fff;color:#222;border-radius:12px;padding:3px 9px;margin-bottom:4px;font-weight:600;font-size:calc(13px*var(--ui));line-height:1.25;box-shadow:0 3px 0 rgba(0,0,0,.15);word-break:break-word;white-space:pre-wrap;user-select:none;position:relative}
.bubble:after{content:'';position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-top-color:#fff;border-bottom:0}
#hud{position:absolute;top:calc(8px*var(--ui));left:calc(8px*var(--ui));display:flex;gap:6px;z-index:5;pointer-events:none;flex-wrap:wrap;justify-content:flex-start;max-width:calc(100% - 16px - 9 * 45px * var(--ui))}
.pill{background:rgba(255,255,255,.92);border-radius:999px;padding:2px 12px;font-weight:800;color:#33415c;box-shadow:0 3px 0 rgba(0,0,0,.12);font-size:calc(16px*var(--ui));white-space:nowrap}
.pill.small{font-size:calc(12px*var(--ui));padding:4px 10px;color:#667}
.pill.badge.ranked{background:#06d6a0;color:#03382b}.pill.badge.practice{background:#ffd166;color:#5a3b00}.pill.badge.local{background:#bde0fe;color:#123}
#topbtns{position:absolute;top:calc(8px*var(--ui));right:calc(8px*var(--ui));display:flex;gap:5px;z-index:6;flex-wrap:wrap;justify-content:flex-end;max-width:45%}
.ibtn{position:relative;width:calc(40px*var(--ui));height:calc(40px*var(--ui));min-width:34px;min-height:34px;border-radius:12px;border:none;background:rgba(255,255,255,.92);font-size:calc(18px*var(--ui));box-shadow:0 3px 0 rgba(0,0,0,.15);cursor:pointer;padding:0}
.ibtn:active{transform:translateY(2px)}
.dotn{position:absolute;top:-5px;right:-5px;background:#ef476f;color:#fff;border-radius:999px;font-size:11px;min-width:18px;height:18px;line-height:18px;font-weight:800}
#hint{position:absolute;left:50%;bottom:calc(12px*var(--ui));transform:translateX(-50%);background:rgba(20,28,48,.75);color:#fff;font-weight:800;padding:4px 14px;border-radius:999px;font-size:calc(15px*var(--ui));z-index:4;pointer-events:none;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}
#toast{position:absolute;top:calc(56px*var(--ui));left:50%;transform:translateX(-50%) scale(.8);opacity:0;transition:.25s;background:#ffd166;color:#5a3b00;font-weight:800;font-size:calc(19px*var(--ui));padding:6px 18px;border-radius:16px;box-shadow:0 4px 0 #d9a53a;z-index:7;pointer-events:none;text-align:center;max-width:90%}
#toast.show{opacity:1;transform:translateX(-50%) scale(1)}
#stageToast{position:absolute;left:calc(10px*var(--ui));top:calc(56px*var(--ui));z-index:6;pointer-events:none;display:flex;flex-direction:column;gap:4px;max-width:46%}
#stageToast div{background:rgba(6,214,160,.92);color:#03382b;font-weight:800;border-radius:12px;padding:3px 10px;font-size:calc(13px*var(--ui));animation:fadeout 6s forwards}
#stageToast div.nr{background:rgba(255,255,255,.9);color:#556}
@keyframes fadeout{0%,80%{opacity:1}100%{opacity:0}}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .35s;z-index:4}
#count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(120px*var(--ui));font-weight:800;color:#fff;text-shadow:0 6px 0 #ff6b35,0 0 30px rgba(0,0,0,.3);z-index:8;pointer-events:none}
#netLost{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);background:#ef476f;color:#fff;font-weight:800;padding:10px 20px;border-radius:16px;z-index:9;font-size:calc(18px*var(--ui));box-shadow:0 4px 0 rgba(0,0,0,.2)}
#lobbyPanel{position:absolute;top:calc(54px*var(--ui));left:50%;transform:translateX(-50%);background:rgba(255,255,255,.95);border-radius:18px;padding:8px 14px;z-index:7;box-shadow:0 5px 0 rgba(0,0,0,.15);text-align:center;min-width:min(420px,90%);max-width:94%;font-size:calc(14px*var(--ui))}
#lobbyPanel h3{margin:0;color:#ff6b35;font-size:calc(19px*var(--ui))}
#lobbyPanel .code{font-size:calc(22px*var(--ui));letter-spacing:3px;color:#4361ee;font-weight:800}
#lobbyPanel .teams{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:4px 0}
#lobbyPanel .team{border-radius:10px;padding:2px 8px;background:#f4f6ff;border-left:5px solid #ccc;text-align:left;font-size:.9em}
#lobbyPanel button{border:none;border-radius:12px;padding:5px 12px;font:800 calc(15px*var(--ui)) 'Baloo 2',system-ui;color:#fff;background:#4361ee;margin:2px;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.2)}
#lobbyPanel button.go{background:#ff6b35}
/* chat */
#chat{position:absolute;left:calc(8px*var(--ui));bottom:calc(8px*var(--ui) + var(--kb));width:min(360px,48%);max-height:62%;display:flex;flex-direction:column;background:rgba(20,28,48,.8);border-radius:14px;z-index:8;color:#fff;font-size:calc(14px*var(--ui));overflow:hidden}
#chat.collapsed{display:none}
.chead{display:flex;align-items:center;gap:4px;padding:4px 6px;background:rgba(0,0,0,.2)}
.ctab{border:none;background:transparent;color:#bcd;font:800 1em 'Baloo 2',system-ui;padding:0 8px;border-radius:8px;cursor:pointer}.ctab.on{background:#4361ee;color:#fff}
.cflex{flex:1}.cbtn{border:none;background:rgba(255,255,255,.15);color:#fff;border-radius:8px;width:28px;height:26px;cursor:pointer;font-size:14px}
.clist{flex:1;overflow-y:auto;padding:4px 8px;min-height:60px;max-height:200px;user-select:text;-webkit-user-select:text}
.cm{margin:1px 0;line-height:1.3;word-break:break-word}.cm b{color:#ffd166}.cm .ct{color:#8fe3ff;font-size:.8em;margin-right:3px}.cm.sys{color:#aab;font-style:italic}
.cquick{display:flex;gap:4px;padding:3px 6px;flex-wrap:wrap}
.cquick button{border:none;border-radius:999px;background:rgba(255,255,255,.18);color:#fff;font:600 .9em 'Baloo 2',system-ui;padding:1px 8px;cursor:pointer}
.cform{display:flex;gap:4px;padding:5px}
.cform input{flex:1;min-width:0;border:none;border-radius:10px;padding:6px 8px;font-size:16px}
.cform button{border:none;border-radius:10px;background:#ff6b35;color:#fff;font:800 1em 'Baloo 2',system-ui;padding:0 12px;cursor:pointer}
#prompts{position:absolute;right:calc(8px*var(--ui));top:calc(60px*var(--ui));z-index:9;display:flex;flex-direction:column;gap:6px;max-width:min(320px,60%)}
.prompt{background:#fff;border-radius:14px;padding:8px 10px;box-shadow:0 4px 0 rgba(0,0,0,.18);font-weight:700;font-size:calc(14px*var(--ui))}
.prompt button{border:none;border-radius:10px;padding:3px 10px;margin:4px 4px 0 0;font:800 1em 'Baloo 2',system-ui;color:#fff;background:#06d6a0;cursor:pointer}.prompt button.no{background:#adb5bd}
/* emotes */
.pop{position:absolute;right:calc(10px*var(--ui) + env(safe-area-inset-right));top:calc(60px*var(--ui));z-index:12;background:rgba(255,255,255,.96);border-radius:16px;padding:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;box-shadow:0 6px 0 rgba(0,0,0,.15)}
.pop button{border:none;background:#f4f6ff;border-radius:12px;font-size:24px;padding:4px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;min-width:52px}
.pop button small{font-size:11px;font-weight:700;color:#445}
/* touch */
#touch{position:absolute;inset:0;z-index:6;pointer-events:none}
.joy{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom));width:var(--joy,130px);height:var(--joy,130px);border-radius:50%;background:rgba(255,255,255,.28);border:3px solid rgba(255,255,255,.75);pointer-events:auto;touch-action:none}
.joy .knob{position:absolute;left:50%;top:50%;width:44%;height:44%;margin:-22% 0 0 -22%;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 3px 0 rgba(0,0,0,.2);pointer-events:none}
#joyL{left:calc(16px + env(safe-area-inset-left))}#joyR{right:calc(16px + env(safe-area-inset-right))}
#joyL .knob{background:#ff8c61}#joyR .knob{background:#6c8cff}
.jbtn{position:absolute;width:calc(var(--joy,130px)*.62);height:calc(var(--joy,130px)*.62);border-radius:50%;border:none;font:800 calc(var(--joy,130px)*.12) 'Baloo 2',system-ui;color:#fff;pointer-events:auto;touch-action:none;box-shadow:0 5px 0 rgba(0,0,0,.25);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;opacity:.92}
.jbtn small{font-size:.62em;opacity:.9}
.jbtn.on{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.25)}
#jumpL{left:calc(36px + env(safe-area-inset-left));bottom:calc(var(--joy,130px) + 34px + env(safe-area-inset-bottom));background:#ff6b35}
#jumpR{right:calc(36px + env(safe-area-inset-right));bottom:calc(var(--joy,130px) + 34px + env(safe-area-inset-bottom));background:#4361ee}
#actBtn{display:none;background:#2a9d8f}
#root.solo #joyR,#root.solo #jumpL,#root.online #joyR,#root.online #jumpL{display:none}
#root.solo #jumpR,#root.online #jumpR{right:calc(22px + env(safe-area-inset-right));bottom:calc(26px + env(safe-area-inset-bottom));width:calc(var(--joy,130px)*.78);height:calc(var(--joy,130px)*.78);background:#ff6b35}
#root.solo #actBtn,#root.online #actBtn{display:flex;right:calc(var(--joy,130px)*.78 + 34px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));width:calc(var(--joy,130px)*.5);height:calc(var(--joy,130px)*.5)}
#root.typing #touch{opacity:.25;pointer-events:none}#root.typing #touch *{pointer-events:none}
#rotateHint{position:absolute;left:50%;top:calc(8px + env(safe-area-inset-top));transform:translateX(-50%);background:#ffd166;color:#5a3b00;font-weight:800;border-radius:999px;padding:4px 14px;z-index:20;pointer-events:none;font-size:15px;white-space:nowrap}
/* screens */
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:30;background:linear-gradient(160deg,rgba(255,138,92,.9),rgba(124,92,255,.9));padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));overflow:auto}
#pause,#players,#settings,#board,#createRoom{background:rgba(20,28,48,.55)}
.card{background:#fff;border-radius:24px;padding:18px 18px 14px;max-width:460px;width:100%;text-align:center;box-shadow:0 8px 0 rgba(0,0,0,.18);max-height:100%;overflow:auto;margin:auto}
.card.wide{max-width:640px}
.card h1{margin:0;font-size:38px;line-height:1;color:#ff6b35;text-shadow:0 3px 0 #ffd166}
.card h2{margin:0 0 8px;color:#ff6b35}
.card .sub{color:#555;margin:6px 0 10px;font-size:15px}.sub.small{font-size:13px}
.btn{display:block;width:100%;border:none;border-radius:16px;padding:9px;font:800 19px 'Baloo 2',system-ui;color:#fff;margin:6px 0;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.2)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.btn:disabled{opacity:.6;cursor:wait}
.b0{background:#06d6a0}.b1{background:#ff6b35}.b2{background:#4361ee}.b3{background:#2a9d8f}.b4{background:#7b2cbf}.b5{background:#6c757d}.b6{background:#ef476f}
.row{display:flex;gap:8px}.row>*{flex:1}
.codebox{display:flex;gap:6px;margin:6px 0}.codebox input{flex:1;min-width:0;border:2px solid #ccd;border-radius:14px;padding:4px 8px;font:800 18px 'Baloo 2',system-ui;text-transform:uppercase;letter-spacing:2px;text-align:center}.codebox .btn{margin:0;width:auto;padding:4px 14px}
.namebox{display:flex;align-items:center;gap:8px;margin:4px 0 6px}.namebox label{font-weight:800;color:#445;white-space:nowrap}.namebox input{flex:1;min-width:0;border:2px solid #ccd;border-radius:12px;padding:5px 10px;font-size:17px}
.sep{color:#889;font-weight:800;font-size:13px;margin:8px 0 0;border-top:1px dashed #ccd;padding-top:6px}
.ctrl{font-size:13.5px;color:#444;text-align:left;background:#f4f6ff;border-radius:14px;padding:8px 12px;margin-top:8px;line-height:1.5}.ctrl summary{cursor:pointer;font-weight:800}
kbd{background:#fff;border:1px solid #ccd;border-bottom-width:3px;border-radius:6px;padding:0 5px;font-size:12px}
.foot{font-size:12px;color:#889;margin-top:8px}.foot a{color:#4361ee}
.stars{font-size:40px;letter-spacing:4px;margin:4px 0}
.big{font-size:21px;font-weight:800;color:#333}
.chk{display:flex;gap:8px;align-items:flex-start;text-align:left;margin:8px 0;font-size:15px;cursor:pointer}.chk input{width:20px;height:20px;flex:none;margin-top:2px}
.slider{display:flex;align-items:center;gap:10px;margin:10px 0;font-weight:800;justify-content:space-between}.slider input{flex:1;max-width:60%}
.filters{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.filters select{font:700 15px 'Baloo 2',system-ui;border-radius:10px;border:2px solid #ccd;padding:3px 6px;max-width:100%}
.blist{margin-top:6px;text-align:left;max-height:50vh;overflow:auto}
.brow{display:grid;grid-template-columns:36px 1fr 80px 60px 40px;gap:6px;padding:4px 8px;border-radius:10px;align-items:center;font-size:14.5px}
.brow:nth-child(odd){background:#f4f6ff}.brow.me{background:#ffe8a3}.brow.h{font-weight:800;color:#667;background:none;font-size:12.5px}
.brow .rk{font-weight:800;color:#ff6b35;text-align:center}.brow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}.brow .sc{font-weight:800;text-align:right}
.bme{margin-top:6px;font-weight:700;color:#445}
.prow{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:10px;text-align:left}.prow:nth-child(odd){background:#f4f6ff}
.prow .nm{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prow button{border:none;border-radius:10px;padding:2px 8px;font:700 13px 'Baloo 2',system-ui;cursor:pointer;background:#e9ecef}
.prow button.inv{background:#4361ee;color:#fff}
#root.small .card h1{font-size:28px}#root.small .btn{font-size:16px;padding:6px}#root.small .card{padding:12px}
/* vùng game nhỏ (điện thoại dọc / iframe nhỏ): HUD gọn, không che nhân vật */
#root.small #hud{left:6px;gap:3px;top:5px;max-width:calc(100% - 12px - 9 * 31px)}
#root.small #hMode,#root.small #hPing{display:none}
#root.small .pill{padding:0 7px}
#root.small #topbtns{top:5px;right:5px;gap:3px;max-width:42%}
#root.small .ibtn{min-width:26px;min-height:26px;border-radius:8px}
#root.small #toast{top:auto;bottom:30%;font-size:12px;padding:3px 10px}
#root.small #stageToast{display:none}
#root.small #chat{width:70%;max-height:85%}
#root.small #lobbyPanel{top:32px;padding:4px 8px}
/* ===== menu không cuộn: 1 cột khi màn cao, 2 cột khi màn thấp/ngang; tự thu nhỏ (zoom) cho vừa ===== */
.screen{overflow:hidden}
.card{max-height:none;overflow:visible}
.menu-card{display:flex;flex-direction:column}
.menu-card .mcol{display:contents}
.menu-card .ctrl,.menu-card .foot{order:5}
#root.short .menu-card{display:grid;grid-template-columns:1fr 1.1fr;gap:0 16px;max-width:min(860px,96%);align-items:center;text-align:left}
#root.short .menu-card .mcol{display:block}
#root.short .menu-card h1{font-size:34px}
#root.short .menu-card .sub{font-size:14px;margin:4px 0 8px}
#root.short .menu-card .btn{font-size:17px;padding:6px;margin:5px 0}
#root.short .menu-card .ctrl{margin-top:6px;font-size:12.5px;padding:6px 10px}
#root.short .menu-card .sep{margin-top:4px}
#root.short .card{padding:12px 14px}
.blist{max-height:calc(var(--rh,600px)*.42)}
#bCreate{white-space:nowrap;flex:0 0 auto;width:auto;padding-left:14px;padding-right:14px}
.row .codebox{flex:1;min-width:0}
/* chống tràn ngang: cột/ô nhập được phép co lại */
#root.short .menu-card{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.row>*{min-width:0}
.codebox input{width:0;min-width:70px}
.menu-card .btn{overflow:hidden;text-overflow:ellipsis}

/* chống zoom khi bấm trên điện thoại */
button,a,label,select,summary,.btn,.ibtn{touch-action:manipulation}
select,input{font-size:16px}
.ibtn.on{background:#ffd166;box-shadow:0 3px 0 #d9a53a}
#root:not(.touch) .touch-only{display:none}

/* mic */
#bMic.off{opacity:.75;filter:grayscale(.6)}
#bMic.on{background:#06d6a0;box-shadow:0 3px 0 #048a68}
.tmic{font-size:.85em}
.tag.speaking .tname{box-shadow:0 0 0 2px #06d6a0,0 0 12px #06d6a0}

/* màn hình xin quyền mic */
#micAsk{background:rgba(16,22,40,.62);backdrop-filter:blur(3px)}
.mic-card{position:relative;max-width:440px;padding:22px 24px 16px;border-radius:28px;box-shadow:0 18px 50px rgba(0,0,0,.35),0 6px 0 rgba(0,0,0,.12)}
.mic-x{position:absolute;top:10px;right:12px;width:32px;height:32px;border:none;border-radius:50%;background:#f1f3f8;color:#667;font-size:15px;cursor:pointer}
.mic-x:hover{background:#e4e8f1}
.mic-hero{display:flex;justify-content:center;margin:2px 0 8px}
.mic-orb{position:relative;width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:34px;background:linear-gradient(145deg,#2ee6b0,#06b98a);box-shadow:0 8px 20px rgba(6,185,138,.35)}
.mic-orb:before,.mic-orb:after{content:'';position:absolute;inset:0;border-radius:50%;border:3px solid currentColor;color:#2ee6b0;animation:micwave 2s infinite;opacity:0}
.mic-orb:after{animation-delay:1s}
@keyframes micwave{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.mic-orb.bad{background:linear-gradient(145deg,#ff8fa3,#ef476f);box-shadow:0 8px 20px rgba(239,71,111,.35)}.mic-orb.bad:before,.mic-orb.bad:after{color:#ff8fa3}
.mic-orb.warn{background:linear-gradient(145deg,#ffd166,#f4a261);box-shadow:0 8px 20px rgba(244,162,97,.35)}.mic-orb.warn:before,.mic-orb.warn:after{color:#ffd166}
.mic-card h2{margin:4px 0 6px;font-size:24px;line-height:1.2;color:#2b2d42}
.mic-sub{color:#5c6378;font-size:15px;line-height:1.45;margin:0 auto 12px;max-width:360px}
.mic-sub b{color:#2b2d42}
/* minh hoạ hộp xin quyền của trình duyệt */
.micdemo{margin:0 auto 12px;max-width:340px;text-align:left;font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.micdemo:empty{display:none}
.bp{background:#fff;border:1px solid #e3e7ef;border-radius:16px;box-shadow:0 10px 28px rgba(30,40,70,.16);padding:12px 14px;font-size:13.5px;color:#25283a}
.bp-head{display:flex;align-items:center;gap:6px;margin-bottom:6px;min-width:0}
.bp-lock{flex:none;font-size:12px}
.bp-host{font-weight:600;color:#25283a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-q{display:flex;align-items:center;gap:6px;color:#4a4f63;margin-bottom:10px}
.bp-btns{display:flex;justify-content:flex-end;gap:8px}
.bp-no,.bp-yes{position:relative;border-radius:999px;padding:5px 16px;font-weight:600;font-size:13px}
.bp-no{color:#4a4f63;background:#f1f3f8}
.bp-yes{color:#fff;background:#1a73e8;animation:bpglow 1.6s infinite}
@keyframes bpglow{0%,100%{box-shadow:0 0 0 0 rgba(26,115,232,.45)}50%{box-shadow:0 0 0 6px rgba(26,115,232,0)}}
.bp-hand{position:absolute;right:-6px;bottom:-18px;font-size:20px;animation:bphand 1.6s infinite;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
@keyframes bphand{0%,100%{transform:translate(0,0)}50%{transform:translate(-3px,-5px)}}
.bp-bar{display:flex;align-items:center;gap:8px;background:#f1f3f8;border-radius:999px;padding:5px 12px 5px 6px;margin-bottom:8px;color:#4a4f63;font-size:13px;min-width:0}
.bp-ico{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.bp-ico:after{content:'';position:absolute;inset:-5px;border:3px solid #06d6a0;border-radius:50%;animation:micwave 1.6s infinite}
.bp-row{display:flex;align-items:center;gap:10px;padding:8px 2px;border-top:1px solid #eef0f5}
.bp-row:first-of-type{border-top:none}
.bp-row .lbl{flex:1}
.tog{position:relative;width:36px;height:20px;border-radius:999px;background:#c9ced6;flex:none}
.tog:before{content:'';position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.tog.on{background:#1a73e8}.tog.on:before{left:19px}
.tog.anim{animation:togbg 2.4s infinite}.tog.anim:before{animation:togknob 2.4s infinite}
@keyframes togbg{0%,40%{background:#c9ced6}55%,100%{background:#1a73e8}}
@keyframes togknob{0%,40%{left:3px}55%,100%{left:19px}}
.tog.hl{box-shadow:0 0 0 3px #fff,0 0 0 6px #06d6a0}
.micsteps{text-align:left;margin:0 auto 12px;padding:10px 14px 10px 32px;font-size:14px;color:#3d4256;line-height:1.55;background:#f6f8fc;border-radius:14px;max-width:360px}
.micsteps:empty{display:none}
.micsteps li{margin:2px 0}.micsteps b{color:#1a73e8}
.mic-go{background:linear-gradient(135deg,#2ee6b0,#06b98a);box-shadow:0 5px 0 #048a68;font-size:19px;margin-top:4px}
.mic-skip{display:block;margin:6px auto 2px;border:none;background:none;color:#7b8197;font:700 15px 'Baloo 2',system-ui;cursor:pointer;padding:6px 14px;border-radius:10px}
.mic-skip:hover{background:#f1f3f8;color:#4a4f63}
.mic-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px}
.mic-chips span{font-size:12px;color:#5c6378;background:#f1f3f8;border-radius:999px;padding:2px 10px}
.micinv{border-left:5px solid #06d6a0}
/* gọn hơn cho màn hình thấp */
.mic-card{padding:18px 22px 14px}
.mic-orb{width:60px;height:60px;font-size:28px}
.mic-card h2{font-size:22px;margin:2px 0 4px}
.mic-sub{font-size:14px;margin-bottom:10px}
.micdemo{margin-bottom:10px}
.bp{padding:10px 12px}
.bp-row{padding:6px 2px}
.micsteps{font-size:13.5px;padding:8px 12px 8px 30px;margin-bottom:10px;line-height:1.45}
.mic-go{padding:8px;font-size:18px}
#root.short .mic-card .mic-hero{display:none}

/* số người online */
.online-badge{display:inline-flex;align-items:center;gap:6px;margin:6px auto 0;padding:2px 12px;border-radius:999px;background:#e8fbf4;color:#047857;font-weight:800;font-size:14px}
.online-badge .dot{width:9px;height:9px;border-radius:50%;background:#06d6a0;box-shadow:0 0 0 0 rgba(6,214,160,.6);animation:onl 1.8s infinite}
@keyframes onl{0%{box-shadow:0 0 0 0 rgba(6,214,160,.6)}100%{box-shadow:0 0 0 8px rgba(6,214,160,0)}}
#hOnline{color:#047857}
#root.short .menu-card .online-badge{font-size:12.5px;margin-top:2px}

/* ===== vào thẳng game: màn khởi động ===== */
.boot-card{max-width:400px}
.boot-card h1{margin-bottom:6px}
.boot-spin{display:flex;gap:8px;justify-content:center;margin:14px 0 6px}
.boot-spin span{width:14px;height:14px;border-radius:50%;background:#ff6b35;animation:bootb 1s infinite ease-in-out}
.boot-spin span:nth-child(2){background:#ffd166;animation-delay:.15s}.boot-spin span:nth-child(3){background:#06d6a0;animation-delay:.3s}
@keyframes bootb{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-12px)}}
.linkbtn{background:none;border:none;color:#4361ee;font:700 14px system-ui;text-decoration:underline;cursor:pointer;margin-top:6px}
/* chip nhân vật trong menu */
.profile-chip{display:flex;align-items:center;gap:10px;width:100%;border:2px solid #ffd6c2;background:#fff7f2;border-radius:16px;padding:4px 10px;margin:6px 0;cursor:pointer;text-align:left;font:inherit}
.profile-chip img{width:52px;height:52px;object-fit:contain;flex:none}
.profile-chip .pc-t{display:flex;flex-direction:column;min-width:0}
.profile-chip b{font:800 19px 'Baloo 2',system-ui;color:#33415c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-chip small{color:#ff6b35;font-weight:700}
.pill.score{background:#ffd166;color:#5a3b00}
/* chọn nhân vật */
.char-card{max-width:700px}
.char-top{display:flex;gap:14px;align-items:center;text-align:left;margin-bottom:6px}
.char-prev{flex:none;width:118px;text-align:center;background:radial-gradient(circle at 50% 40%,#fff3d6,#ffd9c7);border-radius:20px;padding:4px 0 6px}
.char-prev img{width:110px;height:110px;object-fit:contain;display:block;margin:0 auto}
.char-prev div{font-weight:800;color:#7b2cbf;font-size:14px}
.char-name{flex:1;min-width:0}
.char-name label{font-weight:800;color:#445}
.nrow{display:flex;gap:6px;margin-top:4px}
.nrow input{flex:1;min-width:0;border:2px solid #ccd;border-radius:12px;padding:6px 10px;font:700 18px system-ui}
.nrow input:focus{outline:none;border-color:#ff6b35}
.dice{flex:none;width:46px;border:none;border-radius:12px;background:#ffd166;font-size:22px;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.15)}
.dice:active{transform:translateY(2px)}
.char-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:6px 0}
.cbox{border:3px solid transparent;background:#f4f6ff;border-radius:14px;padding:2px 0 3px;cursor:pointer;font:700 11.5px system-ui;color:#445;display:flex;flex-direction:column;align-items:center}
.cbox img{width:100%;max-width:74px;aspect-ratio:1;object-fit:contain}
.cbox span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:0 2px}
.cbox:hover{background:#fff1e8}
.cbox.on{border-color:#ff6b35;background:#fff1e8;box-shadow:0 0 0 3px #ffd6c2}
.char-card .row{display:flex;gap:8px}.char-card .row .btn{flex:1}
@media (max-width:560px){.char-grid{grid-template-columns:repeat(5,1fr)}}
/* đổi khu */
.area-list{display:flex;flex-direction:column;gap:6px;margin:8px 0;max-height:46vh;overflow:auto}
.arow{display:flex;align-items:center;gap:8px;background:#f4f6ff;border-radius:12px;padding:6px 10px;font-size:15px}
.arow.cur{background:#e8fbf4;outline:2px solid #06d6a0}
.arow b{white-space:nowrap;color:#33415c}
.abar{flex:1;height:10px;border-radius:99px;background:#dde3f3;overflow:hidden}.abar i{display:block;height:100%;background:linear-gradient(90deg,#06d6a0,#ffd166)}
.acnt{font-weight:800;color:#556;min-width:44px;text-align:right}
.atag{font-size:12px;font-weight:800;color:#047857}
.arow button{border:none;border-radius:10px;padding:4px 14px;background:#4361ee;color:#fff;font:800 15px 'Baloo 2',system-ui;cursor:pointer}
/* sảnh khởi đầu */
#lobbyPanel .hub-info{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}
#lobbyPanel .hub-info .area{font-weight:800;color:#ff6b35;font-size:1.1em}
#lobbyPanel .hub-info .code{font-size:1em;letter-spacing:1px}
#lobbyPanel .hub-me{display:flex;align-items:center;justify-content:center;gap:6px;margin:2px 0}
#lobbyPanel .hub-me img{width:38px;height:38px;object-fit:contain}
#lobbyPanel button.mini{padding:2px 9px;font-size:calc(13px*var(--ui));background:#7b2cbf}
#root.small #lobbyPanel .hub-me img{width:28px;height:28px}

/* danh sách người online: mời / tách đội */
.plist{max-height:52vh;overflow:auto;margin:4px 0}
#root.short .plist{max-height:44vh}
.pltop{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-weight:800;color:#33415c;margin-bottom:4px}
.pltop .split{border:none;border-radius:10px;padding:3px 12px;background:#ef476f;color:#fff;font:800 14px 'Baloo 2',system-ui;cursor:pointer}
.prow .pav{width:30px;height:30px;object-fit:contain;flex:none}
.prow .nm{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.prow .nm b,.prow .nm small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .nm small{font-weight:600;color:#778;font-size:12px}
.prow.mine{outline:2px solid #ffd166}
.prow button:disabled{opacity:.7;cursor:default}
.abar-sp{flex:1}