@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Nunito:wght@700;900&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100dvh;overflow:hidden;background:#04010a;touch-action:none;user-select:none;-webkit-user-select:none;font-family:'Nunito',system-ui,sans-serif;color:#fff}
canvas{display:block;width:100vw;height:100dvh;image-rendering:pixelated;background:#04010a;position:fixed;inset:0}

/* ── UI OVERLAY ── */
#ui{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
#ui>*{pointer-events:all}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,rgba(255,80,180,.1),rgba(4,1,10,.97) 65%);padding:10px;z-index:10}
.screen.hidden{display:none}
.panel{max-width:540px;width:100%;background:linear-gradient(160deg,rgba(28,4,42,.97),rgba(8,2,18,.98));border:2px solid rgba(255,80,200,.3);border-radius:22px;padding:20px;box-shadow:0 0 70px rgba(255,50,200,.15),inset 0 0 50px rgba(0,0,0,.7)}
.panel-title{font-family:'Bangers',cursive;font-size:28px;letter-spacing:2px;margin-bottom:14px;text-align:center}
.btn{border:0;border-radius:14px;padding:11px 20px;font-size:15px;font-weight:900;cursor:pointer;transition:transform .08s,box-shadow .08s;font-family:'Nunito',sans-serif}
.btn:active{transform:translateY(3px)}
.btn-pink{color:#1a0010;background:linear-gradient(170deg,#ff9fe0,#ff3a9d 55%,#b8006a);box-shadow:0 5px 0 #6b003c,0 0 20px rgba(255,60,160,.35)}
.btn-pink:active{box-shadow:0 2px 0 #6b003c}
.btn-yellow{color:#2a1000;background:linear-gradient(170deg,#ffe060,#ffaa00 55%,#cc7700);box-shadow:0 5px 0 #664400,0 0 20px rgba(255,200,0,.3)}
.btn-yellow:active{box-shadow:0 2px 0 #664400}
.btn-blue{color:#00112a;background:linear-gradient(170deg,#60d0ff,#0080ff 55%,#0040cc);box-shadow:0 5px 0 #002080,0 0 20px rgba(0,120,255,.3)}
.btn-blue:active{box-shadow:0 2px 0 #002080}
.btn-ghost{color:rgba(255,200,240,.7);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);box-shadow:none}
.btn-ghost:active{box-shadow:none}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.tag{display:inline-block;background:rgba(255,50,180,.15);border:1px solid rgba(255,80,200,.3);color:#ff5ab8;font-size:9px;font-weight:900;letter-spacing:3px;padding:3px 10px;border-radius:999px;text-transform:uppercase;margin-bottom:8px}
h1.logo{font-family:'Bangers',cursive;font-size:52px;letter-spacing:3px;line-height:1;background:linear-gradient(170deg,#fff 0%,#ffcce8 30%,#ff4daa 60%,#c21b6e 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 20px rgba(255,60,160,.5));margin-bottom:4px}
.desc{font-size:12px;line-height:1.6;color:rgba(255,220,240,.65);margin:6px 0}
.controls-box{font-size:10.5px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:9px 11px;color:rgba(200,180,220,.65);line-height:1.7;margin:8px 0}
.controls-box b{color:#ff9fe0}
.coins-bar{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:900;color:#ffe060;margin:8px 0}
.coins-bar span{font-size:18px}

/* ── WORLD MAP ── */
#mapScreen{background:radial-gradient(ellipse at 50% 40%,rgba(0,60,120,.15),rgba(4,1,10,.98))}
.map-wrap{position:relative;width:100%;max-width:560px;background:linear-gradient(160deg,rgba(20,5,40,.97),rgba(6,2,15,.98));border:2px solid rgba(100,180,255,.25);border-radius:22px;padding:16px}
.map-title{font-family:'Bangers',cursive;font-size:24px;letter-spacing:2px;text-align:center;color:#60d0ff;margin-bottom:12px}
.map-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.map-node{border-radius:14px;padding:8px 6px;text-align:center;cursor:pointer;border:2px solid transparent;transition:all .12s;position:relative;min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.map-node.locked{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);cursor:not-allowed;opacity:.5}
.map-node.unlocked{background:rgba(0,80,160,.18);border-color:rgba(100,180,255,.35);cursor:pointer}
.map-node.unlocked:hover,.map-node.unlocked:active{background:rgba(0,120,220,.28);border-color:rgba(100,200,255,.6);transform:scale(1.04)}
.map-node.completed{background:rgba(0,160,60,.18);border-color:rgba(80,255,140,.4)}
.map-node.current{background:rgba(255,100,0,.2);border-color:rgba(255,180,60,.6);animation:pulse-node 1.2s ease-in-out infinite}
@keyframes pulse-node{0%,100%{box-shadow:0 0 0 rgba(255,150,60,.4)}50%{box-shadow:0 0 16px rgba(255,150,60,.5)}}
.map-icon{font-size:22px;margin-bottom:2px}
.map-name{font-size:8px;font-weight:900;letter-spacing:.5px;line-height:1.2;color:rgba(200,220,255,.8)}
.map-stars{font-size:9px;color:#ffe060;margin-top:2px}
.map-lock{font-size:14px;opacity:.5}
.world-label{font-size:9px;font-weight:900;letter-spacing:2px;color:rgba(100,180,255,.6);text-transform:uppercase;text-align:center;margin:8px 0 4px;border-bottom:1px solid rgba(100,180,255,.15);padding-bottom:4px}

/* ── SHOP ── */
.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:320px;overflow-y:auto;padding-right:4px}
.shop-grid::-webkit-scrollbar{width:4px}
.shop-grid::-webkit-scrollbar-thumb{background:rgba(255,80,200,.3);border-radius:4px}
.shop-item{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:10px;text-align:center;cursor:pointer;transition:all .1s;position:relative}
.shop-item:hover{background:rgba(255,255,255,.09);border-color:rgba(255,80,200,.4)}
.shop-item.owned{border-color:rgba(80,255,140,.5);background:rgba(0,160,60,.1);cursor:default}
.shop-item.equipped{border-color:#ffe060;background:rgba(255,220,0,.1)}
.shop-icon{font-size:28px;margin-bottom:4px}
.shop-name{font-size:11px;font-weight:900;color:#fff;margin-bottom:2px}
.shop-desc{font-size:9px;color:rgba(200,180,220,.6);margin-bottom:6px;line-height:1.4}
.shop-price{font-size:11px;font-weight:900;color:#ffe060}
.shop-owned{font-size:9px;color:#5dff80;font-weight:900}
.shop-equipped{font-size:9px;color:#ffe060;font-weight:900}

/* ── MISSIONS ── */
.mission-list{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto;padding-right:2px}
.mission-item{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:10px}
.mission-item.done{border-color:rgba(80,255,140,.4);background:rgba(0,160,60,.1)}
.mission-item.claimed{opacity:.5;cursor:default}
.mission-icon{font-size:20px;flex-shrink:0}
.mission-info{flex:1}
.mission-name{font-size:12px;font-weight:900;color:#fff;margin-bottom:2px}
.mission-desc{font-size:10px;color:rgba(200,180,220,.6)}
.mission-progress{font-size:10px;color:#60d0ff;margin-top:2px}
.mission-reward{font-size:11px;font-weight:900;color:#ffe060;white-space:nowrap}
.progress-bar{height:4px;background:rgba(255,255,255,.1);border-radius:2px;margin-top:4px}
.progress-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,#60d0ff,#ff5ab8);transition:width .3s}

/* ── INVENTORY / SETTINGS ── */
.inv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
.inv-slot{border-radius:10px;padding:8px;text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:all .1s;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.inv-slot.has-item{border-color:rgba(255,80,200,.35)}
.inv-slot.active{border-color:#ffe060;background:rgba(255,220,0,.08)}
.inv-slot-icon{font-size:20px}
.inv-slot-name{font-size:8px;color:rgba(200,180,220,.6);margin-top:2px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.toggle-label{font-size:13px;font-weight:900;color:rgba(255,220,240,.8)}
.toggle-sub{font-size:10px;color:rgba(200,180,220,.5)}
.toggle-btn{width:46px;height:26px;border-radius:13px;border:0;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}
.toggle-btn.on{background:linear-gradient(90deg,#ff3a9d,#ff9fe0)}
.toggle-btn.off{background:rgba(255,255,255,.15)}
.toggle-btn::after{content:'';position:absolute;top:3px;width:20px;height:20px;border-radius:10px;background:#fff;transition:left .2s;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.toggle-btn.on::after{left:23px}
.toggle-btn.off::after{left:3px}
.tab-row{display:flex;gap:4px;margin-bottom:12px}
.tab{border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:6px 12px;font-size:11px;font-weight:900;cursor:pointer;background:rgba(255,255,255,.04);color:rgba(200,180,220,.6);transition:all .1s}
.tab.active{background:rgba(255,60,160,.2);border-color:rgba(255,80,200,.5);color:#ff9fe0}
.nav-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.nav-btns .btn{flex:1;min-width:100px;font-size:12px;padding:9px 8px}

/* ── MULTIPLAYER ── */
.mp-code{font-family:monospace;font-size:28px;letter-spacing:4px;text-align:center;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:10px;margin:8px 0;color:#ffe060}
.mp-input{width:100%;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(0,0,0,.35);color:#fff;font-weight:900;padding:12px 14px;margin:7px 0;font-size:15px;text-align:center;outline:none}
.mp-input::placeholder{color:rgba(255,255,255,.35)}
.mp-status{font-size:11px;line-height:1.5;color:rgba(255,220,240,.72);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:9px;margin-top:8px;text-align:center}
.mp-lobby{font-size:11px;line-height:1.6;color:#fff;background:rgba(0,0,0,.28);border:1px solid rgba(96,208,255,.24);border-radius:12px;padding:8px;margin-top:8px;min-height:34px}
.mp-lobby b{color:#60d0ff}

/* ── ONLINE SOCIAL HUB ── */
.online-tabs{display:flex;gap:6px;margin:10px 0 8px}
.online-tab{flex:1;border:1px solid rgba(255,255,255,.13);border-radius:11px;padding:8px 6px;background:rgba(255,255,255,.045);color:rgba(255,220,240,.65);font-size:11px;font-weight:900;cursor:pointer}
.online-tab.active{background:linear-gradient(170deg,rgba(96,208,255,.35),rgba(0,128,255,.22));border-color:rgba(96,208,255,.55);color:#aee8ff}
.online-pane{display:none}.online-pane.active{display:block}
.social-small{font-size:10px;color:rgba(255,220,240,.55);text-align:center;margin:3px 0 8px}
.social-box{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.10);border-radius:13px;padding:8px;margin:7px 0;max-height:190px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.social-row{display:flex;align-items:center;gap:7px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.social-row:last-child{border-bottom:0}.social-name{flex:1;min-width:0;font-size:11px;font-weight:900;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.social-sub{font-size:9px;color:rgba(255,220,240,.45);font-weight:800}
.social-pill{font-size:9px;font-weight:900;color:#7cffb2;background:rgba(0,255,130,.10);border:1px solid rgba(0,255,130,.25);border-radius:999px;padding:3px 7px;white-space:nowrap}
.social-btn{border:0;border-radius:9px;padding:6px 8px;font-size:9px;font-weight:900;background:rgba(255,255,255,.10);color:#ffe3f5;cursor:pointer}.social-btn.blue{background:linear-gradient(170deg,#60d0ff,#0080ff);color:#00112a}.social-btn.pink{background:linear-gradient(170deg,#ff9fe0,#ff3a9d);color:#1a0010}.social-btn.yellow{background:linear-gradient(170deg,#ffe060,#ffaa00);color:#201000}
.social-title{font-size:10px;letter-spacing:1.4px;color:rgba(255,220,240,.6);font-weight:900;margin-top:8px;text-transform:uppercase}
.social-search{display:flex;gap:6px;margin:7px 0}.social-search input{flex:1;border:1px solid rgba(255,255,255,.13);border-radius:10px;background:rgba(0,0,0,.30);color:#fff;padding:9px 10px;font-size:11px;font-weight:900;outline:none;text-align:center}

/* ── HOME WEEKLY RANKING ── */
#homeRankingBox{position:absolute;top:12px;right:12px;width:174px;z-index:3;background:rgba(0,0,0,.30);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:8px 9px;box-shadow:0 0 18px rgba(0,0,0,.25)}
.home-rank-title{font-size:11px;font-weight:900;color:#ffe060;letter-spacing:.6px;margin-bottom:5px;text-align:center}
.home-rank-item{font-size:10.5px;font-weight:900;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.home-rank-item.r1{color:#9dffbd}.home-rank-item.r2{color:#8fdcff}.home-rank-item.r3{color:#ffe875}
#homeRankMore{display:block;margin:5px auto 0;border:0;background:transparent;color:#ff9fe0;font-size:10px;font-weight:900;text-decoration:underline;cursor:pointer}
#rankModal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;padding:12px}
#rankModal .rank-panel{width:min(420px,96vw);max-height:80dvh;overflow:auto;background:linear-gradient(160deg,rgba(28,4,42,.98),rgba(8,2,18,.99));border:2px solid rgba(255,80,200,.25);border-radius:20px;padding:16px;box-shadow:0 0 60px rgba(0,0,0,.55)}
.rank-full-title{font-family:'Bangers',cursive;font-size:26px;letter-spacing:2px;text-align:center;color:#ffe060;margin-bottom:10px}
.rank-full-row{display:grid;grid-template-columns:38px 1fr auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px;font-weight:900}
.rank-full-row:last-child{border-bottom:0}.rank-full-row.r1{color:#9dffbd}.rank-full-row.r2{color:#8fdcff}.rank-full-row.r3{color:#ffe875}.rank-full-score{color:inherit;white-space:nowrap}.rank-close{margin-top:12px;width:100%}
@media (max-width:560px),(max-height:560px){#homeRankingBox{top:8px;right:8px;width:142px;padding:6px 7px;border-radius:12px}.home-rank-title{font-size:9.5px}.home-rank-item{font-size:9px;line-height:1.35}#homeRankMore{font-size:9px}.online-tabs{gap:4px;margin:7px 0}.online-tab{font-size:10px;padding:7px 4px}.social-box{max-height:145px;padding:7px}.social-name{font-size:10px}.social-btn{padding:5px 6px;font-size:8px}.rank-full-row{font-size:12px;grid-template-columns:32px 1fr auto}}


/* ── GAMEPLAY MENU + DEFEAT RESTART ── */
#gameMiniMenu{position:fixed;top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));z-index:80;display:none;pointer-events:auto}
#gameMenuBtn{width:38px;height:34px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(0,0,0,.42);color:#fff;font-weight:900;font-size:18px;line-height:1;backdrop-filter:blur(4px);box-shadow:0 0 14px rgba(0,0,0,.35);opacity:.86}
#gameMenuBtn:active{transform:translateY(2px)}
#gameExitPanel{display:none;margin-top:6px;padding:7px;border-radius:12px;background:rgba(0,0,0,.56);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(4px)}
#gameExitBtn{border:0;border-radius:10px;padding:8px 13px;font-size:11px;font-weight:900;background:linear-gradient(170deg,#ff9fe0,#ff3a9d 60%,#9e005c);color:#16000e;box-shadow:0 3px 0 #5b0035}
#gameExitBtn:active{transform:translateY(2px);box-shadow:0 1px 0 #5b0035}
#defeatRestartBtn{position:fixed;left:50%;top:calc(50% + 88px);transform:translateX(-50%);z-index:90;display:none;border:0;border-radius:14px;padding:11px 20px;font-size:15px;font-weight:900;background:linear-gradient(170deg,#60d0ff,#0080ff 55%,#0040cc);color:#00112a;box-shadow:0 5px 0 #002080,0 0 20px rgba(0,120,255,.3)}
#defeatRestartBtn:active{transform:translateX(-50%) translateY(3px);box-shadow:0 2px 0 #002080}


/* ── FINAL GAMEPLAY FIXES ── */
#gameMiniMenu{position:fixed!important;top:calc(10px + env(safe-area-inset-top))!important;right:calc(10px + env(safe-area-inset-right))!important;z-index:999!important;display:none;pointer-events:auto!important}
#gameMenuBtn{width:38px;height:34px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(0,0,0,.46);color:#fff;font-weight:900;font-size:18px;line-height:1;backdrop-filter:blur(4px);box-shadow:0 0 14px rgba(0,0,0,.35);opacity:.88}
#gameExitPanel{display:none;margin-top:6px;padding:7px;border-radius:12px;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(4px)}
#gameExitBtn{border:0;border-radius:10px;padding:8px 13px;font-size:11px;font-weight:900;background:linear-gradient(170deg,#ff9fe0,#ff3a9d 60%,#9e005c);color:#16000e;box-shadow:0 3px 0 #5b0035}
#defeatRestartBtn{position:fixed;left:50%;top:calc(50% + 86px);transform:translateX(-50%);z-index:999;display:none;border:0;border-radius:14px;padding:12px 22px;font-size:15px;font-weight:900;background:linear-gradient(170deg,#60d0ff,#0080ff 55%,#0040cc);color:#00112a;box-shadow:0 5px 0 #002080,0 0 20px rgba(0,120,255,.3)}
#defeatRestartBtn:active{transform:translateX(-50%) translateY(3px)}


/* ── GLOBAL NICK ── */
#globalNickWrap{margin:8px 0 4px;display:flex;gap:7px;align-items:center}
#globalNickInput{flex:1;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(0,0,0,.28);color:#fff;font-weight:900;padding:10px 12px;font-size:13px;text-align:center;outline:none}
#globalNickInput::placeholder{color:rgba(255,255,255,.36)}
#globalNickStatus{font-size:10px;color:rgba(255,220,240,.58);text-align:center;min-height:14px;margin-bottom:4px;font-weight:900}
@media (max-width:560px),(max-height:560px){#globalNickInput{font-size:11px;padding:8px 10px}#globalNickWrap{margin:6px 0 3px}}


/* ONLINE COUNTER */
#onlineCounter{
position:absolute;
top:12px;
right:12px;
padding:8px 12px;
border-radius:14px;
background:rgba(0,0,0,.42);
border:1px solid rgba(255,255,255,.12);
color:#dfffe5;
font-weight:900;
font-size:12px;
z-index:25;
backdrop-filter:blur(6px);
box-shadow:0 0 18px rgba(0,255,120,.12);
}
#onlineCounter span{
color:#8cff9e;
}
@media (max-width:700px){
#onlineCounter{
font-size:10px;
padding:6px 9px;
top:8px;
right:8px;
}
}


/* TOUCA CLEAN: RANKING ONLINE HIDDEN */
#homeRankingBox,#rankModal,#onlineCounter{display:none!important;visibility:hidden!important;pointer-events:none!important}


/* MOBILE SCROLL FIX: permite rolagem vertical nas telas/abas sem tocar no canvas/gameplay */
.screen{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;align-items:flex-start!important;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom));}
.screen::before{content:'';min-height:100%;}
.panel,.map-wrap{max-height:none;}
.online-pane.active{max-height:none;overflow:visible;}
@media (max-width:700px),(max-height:700px){
 .screen{
justify-content:center!important;
align-items:center!important;
}
 .panel,.map-wrap{
margin:auto!important;
max-height:none;
}
 .shop-grid,.mission-list,.social-box{max-height:42dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
 .inv-grid{grid-template-columns:repeat(3,1fr);}
}



/* ── MOBILE HOME REFOCUS v1.0.1 ─────────────────────────────── */
body{background:linear-gradient(180deg,#2b0a58 0%,#64217f 48%,#ff6aa9 120%)}
canvas{background:linear-gradient(180deg,#361066 0%,#7d2c8e 58%,#ff8ab5 140%)}
.screen{background:
 radial-gradient(circle at 18% 14%,rgba(255,231,112,.24),transparent 18%),
 radial-gradient(circle at 84% 8%,rgba(105,233,255,.18),transparent 20%),
 radial-gradient(circle at 52% 108%,rgba(255,92,177,.28),transparent 38%),
 linear-gradient(180deg,rgba(59,16,105,.96),rgba(116,31,128,.95) 55%,rgba(255,104,166,.88));
 padding:12px;}
#menuScreen{overflow:hidden!important;align-items:center!important;justify-content:center!important;}
#menuScreen .panel{position:relative;max-width:430px;min-height:min(92dvh,860px);display:flex;flex-direction:column;justify-content:center;gap:7px;padding:18px 15px 14px;background:linear-gradient(165deg,rgba(255,255,255,.20),rgba(255,255,255,.08) 42%,rgba(50,9,86,.42));border:1px solid rgba(255,255,255,.34);box-shadow:0 22px 70px rgba(43,5,76,.38),inset 0 0 34px rgba(255,255,255,.06);backdrop-filter:blur(12px);overflow:hidden;}
#menuScreen .panel::before{content:'';position:absolute;inset:-30%;background:radial-gradient(circle at 24% 26%,rgba(255,232,121,.20),transparent 20%),radial-gradient(circle at 74% 18%,rgba(89,232,255,.16),transparent 22%),radial-gradient(circle at 50% 70%,rgba(255,87,178,.18),transparent 24%);animation:homeAura 8s ease-in-out infinite alternate;pointer-events:none;}
#menuScreen .panel>*{position:relative;z-index:1}
@keyframes homeAura{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,-2%,0) scale(1.04)}}
.tag{align-self:center;background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.32);color:#fff5b8;box-shadow:0 0 18px rgba(255,232,121,.12);font-size:8.5px;letter-spacing:2px;margin-bottom:2px;}
h1.logo{font-size:clamp(42px,13vw,58px);text-align:center;margin:0;background:linear-gradient(180deg,#fff7c7 0%,#fff 26%,#ff79c7 70%,#8d21ff 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 0 rgba(116,25,142,.22)) drop-shadow(0 0 16px rgba(255,247,199,.36));-webkit-text-stroke:1px rgba(68,16,96,.18);}
.home-sparkles{font-size:14px;text-align:center;letter-spacing:10px;color:#fff4a7;opacity:.9;margin:-4px 0 0;animation:sparkleFloat 1.8s ease-in-out infinite alternate;}
@keyframes sparkleFloat{from{transform:translateY(0);opacity:.62}to{transform:translateY(-3px);opacity:1}}
.desc{max-width:350px;margin:0 auto;text-align:center;font-size:12px;line-height:1.35;color:rgba(255,255,255,.82)}
.home-notice{font-size:11px;line-height:1.35;text-align:center;color:#32103f;background:linear-gradient(135deg,rgba(255,244,167,.92),rgba(255,189,224,.88));border:1px solid rgba(255,255,255,.46);border-radius:15px;padding:8px 10px;font-weight:900;box-shadow:0 6px 16px rgba(78,13,103,.18);}
.controls-box{font-size:10px;line-height:1.35;text-align:center;margin:0 auto;padding:7px 10px;border-radius:13px;color:rgba(255,255,255,.78);background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);max-width:330px;}
.controls-box b{color:#fff4a7}
#globalNickWrap{margin:3px 0 0;}
#globalNickInput{height:42px;border-radius:16px;background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.70);color:#3f1256;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 8px 20px rgba(53,9,80,.15);font-size:14px;letter-spacing:.5px;}
#globalNickInput::placeholder{color:rgba(63,18,86,.52)}
#globalNickStatus{min-height:28px;font-size:10.5px;line-height:1.25;color:rgba(255,255,255,.82);display:flex;align-items:center;justify-content:center;text-align:center;padding:0 6px;}
.coins-bar{align-self:center;justify-content:center;margin:-2px 0 3px;color:#fff4a7;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 11px;font-size:12px;box-shadow:0 5px 14px rgba(53,9,80,.10);order:3}
.coins-bar span{font-size:15px}.home-play-row{display:grid!important;grid-template-columns:1fr 78px 78px;gap:7px!important;margin-top:5px!important}.home-tools-row{display:grid!important;grid-template-columns:repeat(5,1fr);gap:6px!important;margin-top:2px!important}.btn{border-radius:16px;font-size:12px;padding:10px 8px;min-height:42px}.home-play-row #btnPlay{font-size:19px!important;min-height:54px;border-radius:20px;animation:playPulse 1.45s ease-in-out infinite;}.btn-pink{background:linear-gradient(180deg,#fff082,#ff73c8 50%,#e82b94);color:#25002b;box-shadow:0 6px 0 #8c1464,0 0 24px rgba(255,239,130,.30)}.btn-yellow{background:linear-gradient(180deg,#fff7a8,#ffcd37 55%,#f78b22);color:#311700;box-shadow:0 5px 0 #9a4b0c}.btn-blue{background:linear-gradient(180deg,#adf3ff,#49c7ff 50%,#2d75ff);color:#06163a;box-shadow:0 5px 0 #173da2}.btn-ghost{color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);box-shadow:0 5px 14px rgba(50,9,77,.11)}
@keyframes playPulse{0%,100%{transform:translateY(0);filter:brightness(1)}50%{transform:translateY(-1px);filter:brightness(1.1)}}
.creator-notice{font-size:9.5px;color:rgba(255,255,255,.62);text-align:center;margin-top:0;letter-spacing:.35px;}

/* Telas secundárias viram janela de correr sobre a home */
.sheet-screen{z-index:25!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;background:linear-gradient(180deg,rgba(37,4,61,.18),rgba(37,4,61,.60));padding:0 10px max(10px,env(safe-area-inset-bottom))!important;animation:sheetFade .16s ease-out both;}
.sheet-screen::before{content:none!important}.sheet-screen .panel,.sheet-screen .map-wrap{width:min(430px,100%);max-height:76dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0!important;border-radius:24px 24px 20px 20px;padding:15px;background:linear-gradient(165deg,rgba(255,255,255,.22),rgba(255,255,255,.10) 38%,rgba(43,7,78,.86));border:1px solid rgba(255,255,255,.30);box-shadow:0 -12px 50px rgba(34,2,52,.38),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(14px);animation:sheetUp .20s ease-out both;}
.sheet-screen .panel::before,.sheet-screen .map-wrap::before{content:'';display:block;width:48px;height:5px;border-radius:999px;background:rgba(255,255,255,.38);margin:0 auto 10px;}
@keyframes sheetFade{from{opacity:0}to{opacity:1}}@keyframes sheetUp{from{transform:translateY(22px)}to{transform:translateY(0)}}
.sheet-screen .panel-title,.sheet-screen .map-title{font-size:23px;margin-bottom:10px}.sheet-screen .shop-grid,.sheet-screen .mission-list,.sheet-screen .social-box{max-height:43dvh}.sheet-screen .btn-row:last-child .btn-ghost{background:rgba(255,255,255,.16);}

@media (max-width:380px),(max-height:760px){#menuScreen .panel{min-height:94dvh;padding:12px 12px 10px;gap:5px}h1.logo{font-size:41px}.home-notice{font-size:10px;padding:7px 9px}.desc{font-size:11px}.controls-box{font-size:9px;padding:6px 8px}.home-play-row{grid-template-columns:1fr 66px 66px}.home-tools-row{gap:5px}.btn{font-size:10px;min-height:38px;padding:8px 5px}.home-play-row #btnPlay{font-size:17px!important;min-height:50px}.coins-bar{font-size:10.5px;padding:5px 9px}#globalNickStatus{font-size:9.5px;min-height:25px}.creator-notice{font-size:8.5px}.sheet-screen .panel,.sheet-screen .map-wrap{max-height:79dvh}}



/* =========================================
   HORIZONTAL MOBILE HOME – BRAWL STARS STYLE
   Fantasy/cartoon premium – mobile landscape
   Samsung A54 · Android · PWA
   ========================================= */

/* ── RESET FOR HOME SCREEN ── */
#menuScreen:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(96,200,255,.35) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 100%, rgba(255,120,60,.28) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(80,50,180,.18) 0%, transparent 60%),
    linear-gradient(160deg, #1a6fff 0%, #5b3cff 40%, #ff7a2f 100%) !important;
}

#menuScreen .panel {
  display: none !important;
}

/* ── ANIMATED BG ── */
.hm-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hm-cloud {
  position: absolute;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  border: 3px solid rgba(255,255,255,.2);
}
.hm-cloud1 { width: 220px; height: 70px; top: 8%; left: -60px; animation: cloudDrift1 22s ease-in-out infinite; }
.hm-cloud2 { width: 160px; height: 50px; top: 22%; right: -40px; animation: cloudDrift2 28s ease-in-out infinite reverse; }
.hm-cloud3 { width: 120px; height: 38px; bottom: 18%; left: 30%; animation: cloudDrift1 18s ease-in-out infinite 4s; }

@keyframes cloudDrift1 {
  0%,100% { transform: translateX(0px); }
  50% { transform: translateX(40px); }
}
@keyframes cloudDrift2 {
  0%,100% { transform: translateX(0px); }
  50% { transform: translateX(-30px); }
}

.hm-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(0px);
}
.hm-orb1 { width: 120px; height: 120px; top: -40px; left: 10%; background: radial-gradient(circle, rgba(255,240,100,.22), transparent 70%); animation: orbPulse 6s ease-in-out infinite; }
.hm-orb2 { width: 80px; height: 80px; bottom: 10%; right: 8%; background: radial-gradient(circle, rgba(255,100,200,.2), transparent 70%); animation: orbPulse 8s ease-in-out infinite 2s; }
.hm-orb3 { width: 60px; height: 60px; top: 40%; left: 42%; background: radial-gradient(circle, rgba(100,200,255,.18), transparent 70%); animation: orbPulse 5s ease-in-out infinite 1s; }

@keyframes orbPulse {
  0%,100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.3); opacity: 1; }
}

/* ── TOP BAR ── */
.hm-topbar {
  position: relative;
  z-index: 10;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 16px;
  background: rgba(0,0,0,.22);
  border-bottom: 3px solid rgba(0,0,0,.4);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  flex-shrink: 0;
}

.hm-topbar .logo {
  position: static !important;
  transform: none !important;
  font-family: 'Bangers', cursive;
  font-size: 28px !important;
  letter-spacing: 2px;
  line-height: 1;
  background: linear-gradient(180deg, #fff7c7 0%, #fff 30%, #ff79c7 65%, #8d21ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.5));
  text-shadow: none !important;
  z-index: auto !important;
  text-align: left;
  margin: 0;
}

.hm-resources {
  display: flex;
  gap: 8px;
  align-items: center;
}

.hm-res-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,.55);
  border: 3px solid #000;
  border-radius: 999px;
  padding: 5px 12px 5px 8px;
  box-shadow: 0 4px 0 #000, inset 0 1px 0 rgba(255,255,255,.15);
  min-width: 76px;
}

.hm-res-icon { font-size: 16px; }
.hm-res-val {
  font-family: 'Bangers', cursive;
  font-size: 16px;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.6);
}

.hm-coins-pill { border-color: #f0a000; box-shadow: 0 4px 0 #7a4d00, inset 0 1px 0 rgba(255,220,80,.2); }
.hm-coins-pill .hm-res-val { color: #ffe060; }
.hm-score-pill { border-color: #60d0ff; box-shadow: 0 4px 0 #00508a, inset 0 1px 0 rgba(100,200,255,.2); }
.hm-score-pill .hm-res-val { color: #aaf0ff; }

/* ── MAIN BODY (below topbar) ── */
#menuScreen > .hm-left,
#menuScreen > .hm-center,
#menuScreen > .hm-right {
  position: absolute;
  top: 52px;
  bottom: 0;
  z-index: 5;
}

/* ── LEFT PANEL ── */
.hm-left {
  left: 0;
  width: 164px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding: 10px 8px 10px 10px;
  gap: 8px;
}

.hm-nick-card {
  background: rgba(0,0,0,.55);
  border: 3px solid #000;
  border-radius: 18px;
  padding: 8px 10px;
  box-shadow: 0 5px 0 #000, inset 0 1px 0 rgba(255,255,255,.1);
}

.hm-nick-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: rgba(255,220,255,.7);
  text-transform: uppercase;
  margin-bottom: 5px;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}

.hm-nick-card #globalNickWrap {
  margin: 0 0 4px;
  flex: none;
}

.hm-nick-card #globalNickInput {
  width: 100%;
  height: 34px;
  border-radius: 12px;
  background: rgba(255,255,255,.9);
  border: 3px solid #000;
  color: #3a006e;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  padding: 0 6px;
  box-shadow: 0 3px 0 rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.4);
}

.hm-nick-card #globalNickInput::placeholder { color: rgba(58,0,110,.45); }

.hm-nick-card #globalNickStatus {
  font-size: 9px;
  color: rgba(255,220,240,.7);
  text-align: center;
  min-height: 12px;
  font-weight: 900;
  line-height: 1.3;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}

.hm-side-nav {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  justify-content: center;
}

.hm-side-btn {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 52px !important;
  padding: 6px 4px !important;
  border-radius: 18px !important;
  border: 3px solid #000 !important;
  font-size: 18px;
  font-weight: 900;
  color: #fff !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
  box-shadow: 0 5px 0 #000 !important;
  transition: transform .12s cubic-bezier(.2,.9,.2,1.3), box-shadow .12s !important;
  cursor: pointer;
}
.hm-side-btn span {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
}
.hm-side-btn:active {
  transform: translateY(4px) scale(.97) !important;
  box-shadow: 0 1px 0 #000 !important;
}

.hm-btn-missions { background: linear-gradient(180deg, #60d0ff 0%, #1a6fff 55%, #1040cc) !important; box-shadow: 0 5px 0 #0020a0 !important; }
.hm-btn-inv      { background: linear-gradient(180deg, #ff9fe0 0%, #ff3a9d 55%, #b8006a) !important; box-shadow: 0 5px 0 #6b003c !important; }
.hm-btn-settings { background: linear-gradient(180deg, #c8c0ff 0%, #8070e0 55%, #5040b0) !important; box-shadow: 0 5px 0 #201060 !important; }
.hm-btn-shop     { background: linear-gradient(180deg, #ffe060 0%, #ffaa00 55%, #cc7700) !important; box-shadow: 0 5px 0 #664400 !important; }
.hm-btn-map      { background: linear-gradient(180deg, #80ffb0 0%, #20c060 55%, #008030) !important; box-shadow: 0 5px 0 #004018 !important; }
.hm-btn-online   { background: linear-gradient(180deg, #ff9fe0 0%, #ff3a9d 55%, #b8006a) !important; box-shadow: 0 5px 0 #6b003c !important; }
.hm-btn-lang     { background: linear-gradient(180deg, #c0e0ff 0%, #6090d0 55%, #305090) !important; box-shadow: 0 5px 0 #102040 !important; }

.hm-creator {
  font-size: 9px;
  color: rgba(255,255,255,.5);
  text-align: center;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  padding-bottom: 2px;
}

/* ── CENTER ── */
.hm-center {
  left: 164px;
  right: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 10px;
}

/* ── CHARACTER STAGE ── */
.hm-char-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  width: 100%;
}

.hm-char-shadow {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 20px;
  background: radial-gradient(ellipse, rgba(0,0,0,.5) 0%, transparent 70%);
  border-radius: 50%;
  animation: shadowPulse 2.4s ease-in-out infinite;
}
@keyframes shadowPulse {
  0%,100% { transform: translateX(-50%) scaleX(1); opacity: .5; }
  50% { transform: translateX(-50%) scaleX(.82); opacity: .35; }
}

/* Character wrapper with idle float */
.hm-char-wrap {
  animation: idleFloat 2.4s ease-in-out infinite;
  position: relative;
  z-index: 3;
}
@keyframes idleFloat {
  0%,100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-8px) scale(1.015); }
}

/* ── CARTOON CHARACTER ── */
.hm-char-body {
  --skin-color: #ff9fe0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.hm-char-head {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--skin-color, #ff9fe0);
  border: 4px solid #000;
  box-shadow: 0 6px 0 #000, inset 0 -4px 0 rgba(0,0,0,.2);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hm-char-hair {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 24px;
  background: #7a3000;
  border: 3px solid #000;
  border-radius: 999px 999px 0 0;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.15);
}

.hm-char-eye {
  position: absolute;
  width: 14px;
  height: 16px;
  background: #fff;
  border: 3px solid #000;
  border-radius: 50%;
  top: 22px;
  animation: blinkEye 4s ease-in-out infinite;
}
.hm-eye-l { left: 10px; }
.hm-eye-r { right: 10px; }
.hm-char-eye::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 8px;
  background: #1a0040;
  border-radius: 50%;
  top: 2px;
  left: 2px;
}
@keyframes blinkEye {
  0%,94%,100% { transform: scaleY(1); }
  96%,98% { transform: scaleY(.1); }
}

.hm-char-mouth {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 10px;
  border: 3px solid #000;
  border-top: none;
  border-radius: 0 0 16px 16px;
  background: #d4006a;
}

.hm-char-torso {
  width: 58px;
  height: 50px;
  margin-top: -4px;
  background: linear-gradient(180deg, var(--skin-color, #ff9fe0) 0%, color-mix(in srgb, var(--skin-color, #ff9fe0) 70%, #000) 100%);
  border: 4px solid #000;
  border-radius: 10px 10px 6px 6px;
  box-shadow: 0 5px 0 #000, inset 0 2px 0 rgba(255,255,255,.2);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hm-char-arm {
  width: 16px;
  height: 38px;
  background: var(--skin-color, #ff9fe0);
  border: 3px solid #000;
  border-radius: 8px;
  position: absolute;
  top: 4px;
  box-shadow: 0 4px 0 #000;
}
.hm-arm-l {
  left: -14px;
  transform-origin: top center;
  animation: armSwayL 2.4s ease-in-out infinite;
}
.hm-arm-r {
  right: -14px;
  transform-origin: top center;
  animation: armSwayR 2.4s ease-in-out infinite;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2px;
}
@keyframes armSwayL {
  0%,100% { transform: rotate(-6deg); }
  50% { transform: rotate(4deg); }
}
@keyframes armSwayR {
  0%,100% { transform: rotate(10deg); }
  50% { transform: rotate(-6deg); }
}

.hm-weapon-icon {
  font-size: 20px;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.7));
  animation: weaponOscillate 2.4s ease-in-out infinite;
  position: relative;
  z-index: 2;
  margin-bottom: -6px;
  margin-right: -2px;
}
@keyframes weaponOscillate {
  0%,100% { transform: rotate(15deg); }
  50% { transform: rotate(28deg); }
}

.hm-char-legs {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.hm-char-leg {
  width: 18px;
  height: 32px;
  background: var(--skin-color, #ff9fe0);
  border: 3px solid #000;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 0 #000;
}
.hm-leg-l { animation: legBob 2.4s ease-in-out infinite; }
.hm-leg-r { animation: legBob 2.4s ease-in-out infinite .2s reverse; }
@keyframes legBob {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}

/* Skin badge */
.hm-skin-badge {
  margin-top: 8px;
  background: rgba(0,0,0,.65);
  border: 3px solid #000;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  letter-spacing: .5px;
  box-shadow: 0 3px 0 #000;
}

/* ── PLAY BUTTON ── */
.hm-play-btn {
  width: min(100%, 260px);
  min-height: 58px !important;
  border-radius: 24px !important;
  border: 4px solid #000 !important;
  background: linear-gradient(180deg, #ffe96e 0%, #ffb300 50%, #ff7a00 100%) !important;
  box-shadow: 0 8px 0 #000, inset 0 3px 0 rgba(255,255,255,.4) !important;
  font-family: 'Bangers', cursive;
  font-size: 28px !important;
  font-weight: 900;
  color: #fff !important;
  text-shadow: 0 3px 0 rgba(0,0,0,.45), 0 0 12px rgba(255,200,0,.6);
  letter-spacing: 2px;
  margin-top: 8px;
  animation: playBoing 1.8s ease-in-out infinite;
  transition: transform .12s cubic-bezier(.2,.9,.2,1.4), box-shadow .12s !important;
  cursor: pointer;
  flex-shrink: 0;
}
.hm-play-btn:active {
  transform: translateY(6px) scale(.97) !important;
  box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.3) !important;
  animation: none !important;
}
@keyframes playBoing {
  0%,100% { transform: scale(1) translateY(0); }
  25% { transform: scale(1.04) translateY(-2px); }
  50% { transform: scale(1) translateY(0); }
  75% { transform: scale(1.02) translateY(-1px); }
}

/* ── NOTICE ── */
.hm-notice {
  font-size: 9.5px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  text-align: center;
  margin-top: 5px;
  background: rgba(0,0,0,.35);
  border: 2px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 4px 12px;
  letter-spacing: .3px;
}

/* ── RIGHT PANEL ── */
.hm-right {
  right: 0;
  width: 148px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 10px 10px 10px 8px;
  gap: 8px;
}

/* ── OVERRIDE OLD HOME PANEL STYLES THAT COULD LEAK ── */
#menuScreen > *:not(.hm-bg):not(.hm-topbar):not(.hm-left):not(.hm-center):not(.hm-right) {
  display: none !important;
}

/* ── KEEP OLD .screen / .panel INTACT FOR SECONDARY SCREENS ── */
.sheet-screen {
  z-index: 25 !important;
}
.sheet-screen .panel,
.sheet-screen .map-wrap {
  max-height: 80dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── GLOBAL NICK FIXES (secondary screens still use it) ── */
#globalNickWrap { margin: 0; }
#globalNickInput { font-family: 'Nunito', sans-serif; }

/* ── BTN GLOBAL BOING override for home side buttons ── */
.hm-left .btn:active,
.hm-right .btn:active {
  transform: translateY(4px) !important;
}

/* ── RESPONSIVE: very narrow landscape (< 580px wide) ── */
@media (max-width: 580px) {
  .hm-left { width: 130px; }
  .hm-right { width: 120px; }
  .hm-center { left: 130px; right: 120px; }
  .hm-topbar .logo { font-size: 22px !important; }
  .hm-side-btn { min-height: 46px !important; font-size: 16px; }
  .hm-play-btn { font-size: 22px !important; min-height: 50px !important; }
  .hm-res-pill { min-width: 64px; padding: 4px 8px 4px 6px; }
  .hm-res-icon { font-size: 14px; }
  .hm-res-val { font-size: 14px; }
}

@media (max-height: 340px) {
  .hm-topbar { height: 42px; }
  #menuScreen > .hm-left,
  #menuScreen > .hm-center,
  #menuScreen > .hm-right { top: 42px; }
  .hm-char-head { width: 48px; height: 48px; }
  .hm-char-torso { width: 44px; height: 38px; }
  .hm-play-btn { min-height: 44px !important; font-size: 20px !important; }
}


/* === PATCH: preview fiel da gameplay na home/lobby === */
.hm-char-stage{position:relative;}
#menuScreen .hm-char-wrap{display:none!important;}
.home-player-canvas{
  position:relative;
  z-index:2;
  width:min(40vw,260px);
  height:min(40vw,260px);
  max-width:280px;
  max-height:280px;
  display:block;
  margin:0 auto;
  image-rendering:auto;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 18px 14px rgba(0,0,0,.28));
  pointer-events:none;
}
.hm-char-shadow{z-index:1;}
.hm-skin-badge{position:relative;z-index:3;}
.mp-lobby{display:flex;gap:12px;align-items:flex-end;justify-content:center;flex-wrap:wrap;min-height:145px;}
.mp-player-card{min-width:115px;text-align:center;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:8px 8px 7px;box-shadow:0 8px 18px rgba(0,0,0,.18);}
.mp-player-card.host{order:2}.mp-player-card.client{order:1}
.mp-player-card canvas{width:88px;height:88px;display:block;margin:0 auto;filter:drop-shadow(0 8px 8px rgba(0,0,0,.32));}
.mp-player-name{font-size:11px;font-weight:900;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;}
.mp-player-role{font-size:9px;font-weight:900;color:#ffe060;margin-top:1px;}
@media (max-width:560px),(max-height:560px){.home-player-canvas{width:min(34vw,190px);height:min(34vw,190px)}.mp-lobby{min-height:115px;gap:8px}.mp-player-card{min-width:92px;padding:6px}.mp-player-card canvas{width:70px;height:70px}.mp-player-name{font-size:9px;max-width:92px}.mp-player-role{font-size:8px}}


/* === PATCH REAL: ajustes finos da home sem alterar gameplay === */
#menuScreen .hm-topbar{
  position:absolute!important;
  top:8px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  z-index:20!important;
  width:auto!important;
  pointer-events:none!important;
}
#menuScreen h1.logo{
  display:block!important;
  margin:0!important;
  font-size:clamp(22px,3.4vw,38px)!important;
  line-height:1!important;
  color:#fff!important;
  text-shadow:3px 4px 0 rgba(0,0,0,.38),0 0 12px rgba(255,255,255,.35)!important;
  letter-spacing:.5px!important;
  white-space:nowrap!important;
}
#menuScreen .hm-resources{display:none!important;}
.home-nick-above{
  position:relative;
  z-index:4;
  margin:0 auto -18px;
  width:max-content;
  max-width:220px;
  padding:3px 12px 4px;
  border-radius:999px;
  color:#fff;
  font-weight:1000;
  font-size:clamp(14px,1.8vw,20px);
  text-align:center;
  text-shadow:2px 3px 0 rgba(0,0,0,.45);
  pointer-events:none;
}
.home-player-canvas{
  width:min(48vw,360px)!important;
  height:min(36vw,270px)!important;
  max-width:380px!important;
  max-height:285px!important;
  object-fit:contain!important;
  overflow:visible!important;
}
.hm-creator{
  max-width:230px!important;
  font-size:11px!important;
  line-height:1.25!important;
  color:rgba(255,255,255,.88)!important;
  text-shadow:0 2px 0 rgba(0,0,0,.25)!important;
}
@media (max-width:560px),(max-height:560px){
  #menuScreen .hm-topbar{top:6px!important}
  #menuScreen h1.logo{font-size:clamp(18px,4.2vw,28px)!important}
  .home-nick-above{font-size:12px;margin-bottom:-14px}
  .home-player-canvas{width:min(46vw,270px)!important;height:min(34vw,205px)!important}
  .hm-creator{font-size:9px!important;max-width:190px!important}
}

/* === PATCH HUD LIMPO: título + moedas/pontuação abaixo === */
#menuScreen .hm-topbar{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:4px!important;
  pointer-events:none!important;
}
#menuScreen h1.logo{
  text-shadow:0 2px 0 rgba(91,23,127,.22),0 0 10px rgba(255,247,199,.30)!important;
  filter:none!important;
  -webkit-text-stroke:1px rgba(56,11,91,.20)!important;
}
#menuScreen .hm-resources{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:6px!important;
}
#menuScreen .hm-res-pill{
  min-width:auto!important;
  padding:4px 10px!important;
  border:2px solid rgba(38,10,58,.55)!important;
  background:rgba(255,255,255,.18)!important;
  box-shadow:0 3px 0 rgba(65,17,83,.28), inset 0 1px 0 rgba(255,255,255,.24)!important;
}
#menuScreen .hm-res-icon{font-size:13px!important}
#menuScreen .hm-res-val{font-size:14px!important;color:#fff4a7!important;text-shadow:0 1px 0 rgba(45,8,63,.35)!important}

/* ── PATCH LOBBY LATERAL SIMPLES ── */
.hm-right{
  width:190px!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
}
.hm-center{right:190px!important;}
.hm-btn-online span{font-size:8.5px!important;line-height:1.05!important;}
.hm-rooms-panel{
  width:100%;
  min-height:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:7px;
  border:3px solid #000;
  border-radius:16px;
  background:rgba(5,0,18,.62);
  box-shadow:0 5px 0 #000,inset 0 1px 0 rgba(255,255,255,.12);
  overflow:hidden;
}
.hm-rooms-title{
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
  text-align:center;
  color:#ffe060;
  text-shadow:0 2px 0 rgba(0,0,0,.6);
}
.hm-rooms-refresh{
  border:0;
  border-radius:10px;
  padding:7px 5px;
  font-size:8.5px;
  font-weight:900;
  color:#00112a;
  background:linear-gradient(180deg,#60d0ff,#0080ff 60%,#0055cc);
  box-shadow:0 3px 0 #002080;
}
.hm-rooms-refresh:active{transform:translateY(2px);box-shadow:0 1px 0 #002080;}
.hm-rooms-panel #roomSearchInput{
  width:100%;
  border:2px solid rgba(255,255,255,.18);
  border-radius:10px;
  background:rgba(0,0,0,.42);
  color:#fff;
  font-size:10px;
  font-weight:900;
  padding:7px 6px;
  outline:none;
  text-align:center;
}
.hm-rooms-panel #roomSearchInput::placeholder{color:rgba(255,255,255,.44)}
.hm-rooms-list{
  flex:1;
  min-height:84px;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding-right:2px;
  touch-action:pan-y;
  overscroll-behavior:contain;
}
.hm-rooms-list .social-row{
  display:block;
  padding:7px 6px;
  margin-bottom:6px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:11px;
  background:rgba(255,255,255,.06);
}
.hm-rooms-list .social-name{
  font-size:10px;
  line-height:1.2;
  white-space:normal;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hm-rooms-list .social-sub{font-size:8.5px;line-height:1.25;margin-top:2px;}
.hm-rooms-list .social-btn{
  width:100%;
  margin-top:5px;
  padding:6px 4px;
  border-radius:9px;
  font-size:8.5px;
}
.mp-create-panel{width:min(440px,92vw)!important;}
.mp-create-panel .desc{font-size:12px!important;}

@media (max-width: 760px){
  .hm-right{width:150px!important;padding-right:6px!important;}
  .hm-center{right:150px!important;}
  .hm-rooms-panel{padding:5px;border-radius:13px;}
  .hm-rooms-refresh{font-size:7.5px;padding:6px 3px;}
  .hm-rooms-panel #roomSearchInput{font-size:8.5px;padding:6px 3px;}
  .hm-rooms-list .social-name{font-size:8.8px;}
  .hm-rooms-list .social-sub{font-size:7.4px;}
  .hm-rooms-list .social-btn{font-size:7.5px;}
}
@media (max-width: 580px){
  .hm-right{width:132px!important;}
  .hm-center{right:132px!important;}
  .hm-rooms-panel{gap:4px;}
  .hm-rooms-title{font-size:8.5px;}
}

/* ── PATCH NICK MINI LATERAL ── */
.hm-nick-mini{
  width:100%;
  padding:6px;
  border:3px solid #000;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.34));
  box-shadow:0 4px 0 #000,inset 0 1px 0 rgba(255,255,255,.18);
}
.hm-nick-mini-title{
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
  text-align:center;
  color:#ffe060;
  margin-bottom:4px;
  text-shadow:0 2px 0 rgba(0,0,0,.5);
}
.hm-nick-mini #globalNickInput{
  width:100%;
  height:34px;
  border-radius:11px;
  border:2px solid rgba(0,0,0,.45);
  background:rgba(255,255,255,.88);
  color:#411057;
  font-weight:900;
  font-size:11px;
  text-align:center;
  padding:5px;
  outline:none;
}
.hm-nick-mini-status{
  min-height:14px;
  font-size:8px;
  line-height:1.1;
  text-align:center;
  color:rgba(255,255,255,.82);
  padding-top:3px;
}
@media (max-width:760px){.hm-nick-mini #globalNickInput{height:30px;font-size:9.5px}.hm-nick-mini-status{font-size:7px;min-height:12px}.hm-nick-mini-title{font-size:8px}}

/* === PATCH LOBBY ESQUERDO MOBILE HORIZONTAL === */
#menuScreen > .hm-left{
  width:230px!important;
  justify-content:flex-start!important;
  align-items:stretch!important;
  gap:7px!important;
  padding:10px 8px 8px 10px!important;
  overflow:hidden!important;
}
#menuScreen > .hm-center{
  left:230px!important;
  right:190px!important;
}
#menuScreen > .hm-right{
  width:190px!important;
  justify-content:flex-start!important;
  padding:10px 10px 10px 8px!important;
  gap:8px!important;
  overflow:hidden!important;
}
#menuScreen .hm-btn-lang{display:none!important;}
#menuScreen .hm-rooms-panel{
  order:0;
  width:100%;
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  padding:8px!important;
  border:3px solid #000!important;
  border-radius:16px!important;
  background:rgba(5,0,18,.66)!important;
  box-shadow:0 5px 0 #000,inset 0 1px 0 rgba(255,255,255,.13)!important;
  overflow:hidden!important;
}
#menuScreen .hm-rooms-title{
  display:none!important;
}
#menuScreen .hm-rooms-refresh{
  order:1;
  width:100%;
  min-height:34px;
  border:0;
  border-radius:12px;
  padding:8px 6px;
  font-size:10px;
  font-weight:1000;
  color:#00112a;
  background:linear-gradient(180deg,#6bd7ff,#0a8dff 60%,#0055cc);
  box-shadow:0 3px 0 #002080;
}
#menuScreen .hm-rooms-panel #roomSearchInput{
  order:2;
  width:100%;
  min-height:31px;
  border:2px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:rgba(0,0,0,.44);
  color:#fff;
  font-size:10px;
  font-weight:900;
  padding:7px 8px;
  outline:none;
  text-align:center;
}
#menuScreen .hm-rooms-list{
  order:3;
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  overscroll-behavior:contain;
  padding-right:3px;
}
#menuScreen .hm-rooms-list::-webkit-scrollbar{width:6px}
#menuScreen .hm-rooms-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:99px}
#menuScreen .hm-rooms-list .social-row{
  position:relative;
  display:block;
  padding:7px 7px;
  margin-bottom:6px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(0,0,0,.20));
}
#menuScreen .hm-rooms-list .social-name{
  font-size:10px;
  font-weight:1000;
  line-height:1.15;
  color:#fff;
}
#menuScreen .hm-rooms-list .social-sub{
  font-size:8px;
  line-height:1.22;
  margin-top:2px;
  color:rgba(255,255,255,.76);
}
#menuScreen .hm-rooms-list .social-btn{
  width:100%;
  margin-top:5px;
  padding:6px 4px;
  border-radius:9px;
  font-size:8px;
  font-weight:1000;
}
#menuScreen .hm-side-nav-compact{
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:5px!important;
}
#menuScreen .hm-side-nav-compact .hm-side-btn{
  min-height:42px!important;
  padding:5px 3px!important;
  font-size:15px!important;
  border-radius:13px!important;
}
#menuScreen .hm-side-nav-compact .hm-side-btn span{
  font-size:7.5px!important;
  line-height:1!important;
}
#menuScreen .hm-creator{
  flex:0 0 auto;
  font-size:8.5px!important;
  line-height:1.15!important;
  max-width:none!important;
  opacity:.85;
}
@media (max-width:760px), (max-height:560px){
  #menuScreen > .hm-left{width:188px!important;padding:8px 6px 7px 8px!important;gap:5px!important;}
  #menuScreen > .hm-center{left:188px!important;right:150px!important;}
  #menuScreen > .hm-right{width:150px!important;padding:8px 6px 8px 6px!important;gap:6px!important;}
  #menuScreen .hm-rooms-panel{padding:6px!important;border-radius:14px!important;gap:5px!important;}
  #menuScreen .hm-rooms-refresh{min-height:29px;font-size:8px;padding:6px 4px;}
  #menuScreen .hm-rooms-panel #roomSearchInput{min-height:27px;font-size:8px;padding:6px 4px;}
  #menuScreen .hm-rooms-list .social-name{font-size:8.2px;}
  #menuScreen .hm-rooms-list .social-sub{font-size:7px;}
  #menuScreen .hm-rooms-list .social-btn{font-size:7px;padding:5px 3px;}
  #menuScreen .hm-side-nav-compact .hm-side-btn{min-height:34px!important;font-size:12px!important;}
  #menuScreen .hm-side-nav-compact .hm-side-btn span{font-size:6.2px!important;}
  #menuScreen .hm-creator{display:none!important;}
}
@media (max-width:580px){
  #menuScreen > .hm-left{width:160px!important;}
  #menuScreen > .hm-center{left:160px!important;right:132px!important;}
  #menuScreen > .hm-right{width:132px!important;}
}

/* === PATCH FINAL: LOBBY DE SALAS NA LATERAL DIREITA === */
#menuScreen > .hm-left{
  width:150px!important;
  justify-content:center!important;
  align-items:stretch!important;
  padding:8px 7px 8px 10px!important;
  gap:8px!important;
  overflow:visible!important;
}
#menuScreen > .hm-center{
  left:150px!important;
  right:184px!important;
}
#menuScreen > .hm-right{
  width:184px!important;
  justify-content:flex-start!important;
  align-items:stretch!important;
  padding:8px 10px 8px 6px!important;
  gap:5px!important;
  overflow:hidden!important;
}
#menuScreen .hm-btn-lang{display:none!important;}
#menuScreen .hm-side-nav-compact{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  flex:0 0 auto!important;
}
#menuScreen .hm-side-nav-compact .hm-side-btn{
  min-height:58px!important;
  padding:6px 5px!important;
  font-size:20px!important;
  border-radius:16px!important;
}
#menuScreen .hm-side-nav-compact .hm-side-btn span{
  font-size:12px!important;
  line-height:1!important;
}
#menuScreen .hm-creator{
  max-width:135px!important;
  font-size:9px!important;
  line-height:1.15!important;
  left:12px!important;
  bottom:10px!important;
}
#menuScreen .hm-nick-mini{
  flex:0 0 auto!important;
  padding:5px!important;
  border-radius:14px!important;
  border-width:3px!important;
}
#menuScreen .hm-nick-mini-title{
  font-size:8px!important;
  margin-bottom:3px!important;
}
#menuScreen .hm-nick-mini #globalNickInput{
  height:29px!important;
  font-size:10px!important;
  border-radius:10px!important;
  padding:4px!important;
}
#menuScreen .hm-nick-mini-status{
  min-height:10px!important;
  font-size:6.8px!important;
  line-height:1.05!important;
  padding-top:2px!important;
}
#menuScreen > .hm-right > .hm-side-btn{
  flex:0 0 auto!important;
  min-height:48px!important;
  padding:5px 4px!important;
  font-size:18px!important;
  border-radius:15px!important;
}
#menuScreen > .hm-right > .hm-side-btn span{
  font-size:9px!important;
  line-height:1!important;
}
#menuScreen > .hm-right .hm-btn-online span{
  font-size:7.5px!important;
  line-height:1!important;
}
#menuScreen .hm-rooms-panel{
  order:20!important;
  flex:1 1 auto!important;
  min-height:74px!important;
  max-height:none!important;
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
  padding:5px!important;
  border:3px solid #000!important;
  border-radius:14px!important;
  background:rgba(5,0,18,.68)!important;
  box-shadow:0 4px 0 #000,inset 0 1px 0 rgba(255,255,255,.12)!important;
  overflow:hidden!important;
}
#menuScreen .hm-rooms-title{
  display:block!important;
  font-size:8px!important;
  font-weight:1000!important;
  letter-spacing:.8px!important;
  text-align:center!important;
  color:#ffe060!important;
  text-shadow:0 2px 0 rgba(0,0,0,.55)!important;
  line-height:1!important;
}
#menuScreen .hm-rooms-refresh{
  order:1!important;
  width:100%!important;
  min-height:24px!important;
  padding:4px 3px!important;
  border-radius:9px!important;
  font-size:7px!important;
  font-weight:1000!important;
}
#menuScreen .hm-rooms-panel #roomSearchInput{
  order:2!important;
  width:100%!important;
  min-height:22px!important;
  padding:4px 5px!important;
  border-radius:9px!important;
  font-size:7px!important;
  text-align:center!important;
}
#menuScreen .hm-rooms-list{
  order:3!important;
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
  overscroll-behavior:contain!important;
  padding-right:2px!important;
}
#menuScreen .hm-rooms-list::-webkit-scrollbar{width:5px!important;}
#menuScreen .hm-rooms-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28)!important;border-radius:99px!important;}
#menuScreen .hm-rooms-list .social-row{
  padding:5px!important;
  margin-bottom:4px!important;
  border-radius:10px!important;
}
#menuScreen .hm-rooms-list .social-name{
  font-size:8px!important;
  line-height:1.1!important;
  font-weight:1000!important;
}
#menuScreen .hm-rooms-list .social-sub{
  font-size:6.7px!important;
  line-height:1.12!important;
  margin-top:2px!important;
}
#menuScreen .hm-rooms-list .social-btn{
  margin-top:4px!important;
  padding:4px 3px!important;
  border-radius:8px!important;
  font-size:6.8px!important;
  font-weight:1000!important;
}
#multiplayerScreen .mp-lobby{
  min-height:150px!important;
  align-items:center!important;
}
#multiplayerScreen .mp-player-card{
  min-width:118px!important;
  text-align:center!important;
}
#multiplayerScreen .mp-player-card canvas{
  width:86px!important;
  height:86px!important;
}
@media (max-width:760px), (max-height:560px){
  #menuScreen > .hm-left{width:132px!important;padding:7px 5px 7px 7px!important;gap:6px!important;}
  #menuScreen > .hm-center{left:132px!important;right:150px!important;}
  #menuScreen > .hm-right{width:150px!important;padding:7px 6px 7px 5px!important;gap:4px!important;}
  #menuScreen .hm-side-nav-compact .hm-side-btn{min-height:48px!important;font-size:16px!important;border-radius:13px!important;}
  #menuScreen .hm-side-nav-compact .hm-side-btn span{font-size:9px!important;}
  #menuScreen .hm-creator{display:none!important;}
  #menuScreen .hm-nick-mini #globalNickInput{height:25px!important;font-size:8.5px!important;}
  #menuScreen .hm-nick-mini-status{font-size:6px!important;min-height:8px!important;}
  #menuScreen > .hm-right > .hm-side-btn{min-height:42px!important;font-size:14px!important;border-radius:13px!important;}
  #menuScreen > .hm-right > .hm-side-btn span{font-size:7.2px!important;}
  #menuScreen .hm-rooms-panel{min-height:68px!important;padding:4px!important;gap:3px!important;}
  #menuScreen .hm-rooms-title{font-size:7px!important;}
  #menuScreen .hm-rooms-refresh{min-height:22px!important;font-size:6.4px!important;padding:3px!important;}
  #menuScreen .hm-rooms-panel #roomSearchInput{min-height:20px!important;font-size:6.4px!important;padding:3px!important;}
  #menuScreen .hm-rooms-list .social-name{font-size:7px!important;}
  #menuScreen .hm-rooms-list .social-sub{font-size:5.9px!important;}
  #menuScreen .hm-rooms-list .social-btn{font-size:6px!important;padding:3px!important;}
}
@media (max-width:580px){
  #menuScreen > .hm-left{width:118px!important;}
  #menuScreen > .hm-center{left:118px!important;right:128px!important;}
  #menuScreen > .hm-right{width:128px!important;}
}
#multiplayerScreen .mp-lobby-head{
  width:100%;
  text-align:center;
  font-size:12px;
  font-weight:1000;
  color:#ffe060;
  margin-bottom:5px;
  text-shadow:0 2px 0 rgba(0,0,0,.55);
}
#multiplayerScreen .mp-lobby-duo{
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:12px;
  flex-wrap:nowrap;
}
#multiplayerScreen .mp-player-card.empty{
  opacity:.72;
  border-style:dashed!important;
}

/* === PATCH REAL: LOBBY LADO A LADO COM BOTÕES NA DIREITA === */
#menuScreen > .hm-left{
  width:150px!important;
  justify-content:center!important;
  padding:8px 7px 8px 10px!important;
  overflow:visible!important;
}
#menuScreen > .hm-center{
  left:150px!important;
  right:360px!important;
}
#menuScreen > .hm-right{
  width:360px!important;
  display:grid!important;
  grid-template-columns:145px 205px!important;
  grid-auto-rows:min-content!important;
  align-content:start!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  gap:7px 8px!important;
  padding:8px 10px 8px 6px!important;
  overflow:hidden!important;
}
#menuScreen .hm-btn-lang{display:none!important;}
#menuScreen .hm-nick-mini{
  grid-column:1!important;
  grid-row:1!important;
  width:100%!important;
  min-height:78px!important;
  padding:7px!important;
  border-radius:16px!important;
}
#menuScreen .hm-nick-mini-title{font-size:9px!important;margin-bottom:4px!important;}
#menuScreen .hm-nick-mini #globalNickInput{
  height:35px!important;
  font-size:12px!important;
  border-radius:12px!important;
}
#menuScreen .hm-nick-mini-status{
  min-height:15px!important;
  font-size:7.6px!important;
  line-height:1.08!important;
}
#menuScreen > .hm-right > .hm-side-btn{
  grid-column:1!important;
  width:100%!important;
  min-height:76px!important;
  padding:8px 6px!important;
  font-size:25px!important;
  border-radius:18px!important;
}
#menuScreen > .hm-right > .hm-btn-shop{grid-row:2!important;}
#menuScreen > .hm-right > .hm-btn-map{grid-row:3!important;}
#menuScreen > .hm-right > .hm-btn-online{grid-row:4!important;}
#menuScreen > .hm-right > .hm-side-btn span{
  font-size:14px!important;
  line-height:1!important;
  letter-spacing:.3px!important;
}
#menuScreen > .hm-right .hm-btn-online span{
  font-size:10px!important;
  line-height:1.05!important;
}
#menuScreen .hm-rooms-panel{
  grid-column:2!important;
  grid-row:1 / span 4!important;
  width:100%!important;
  height:calc(100dvh - 70px)!important;
  min-height:265px!important;
  max-height:none!important;
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  padding:8px!important;
  border:3px solid #000!important;
  border-radius:17px!important;
  background:rgba(5,0,18,.70)!important;
  box-shadow:0 5px 0 #000,inset 0 1px 0 rgba(255,255,255,.13)!important;
  overflow:hidden!important;
}
#menuScreen .hm-rooms-title{
  display:block!important;
  flex:0 0 auto!important;
  font-size:10px!important;
  font-weight:1000!important;
  letter-spacing:1px!important;
  color:#ffe060!important;
  text-align:center!important;
  line-height:1!important;
}
#menuScreen .hm-rooms-refresh{
  flex:0 0 auto!important;
  width:100%!important;
  min-height:34px!important;
  padding:7px 5px!important;
  border-radius:12px!important;
  font-size:9.5px!important;
  font-weight:1000!important;
}
#menuScreen .hm-rooms-panel #roomSearchInput{
  flex:0 0 auto!important;
  width:100%!important;
  min-height:31px!important;
  padding:7px 7px!important;
  border-radius:12px!important;
  font-size:9.5px!important;
  text-align:center!important;
}
#menuScreen .hm-rooms-list{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
  overscroll-behavior:contain!important;
  padding-right:3px!important;
}
#menuScreen .hm-rooms-list .social-row{
  padding:8px!important;
  margin-bottom:7px!important;
  border-radius:13px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.24))!important;
}
#menuScreen .hm-rooms-list .social-name{
  font-size:10.8px!important;
  line-height:1.15!important;
  font-weight:1000!important;
}
#menuScreen .hm-rooms-list .social-sub{
  font-size:8.2px!important;
  line-height:1.18!important;
  margin-top:3px!important;
}
#menuScreen .hm-rooms-list .social-btn{
  margin-top:6px!important;
  padding:7px 5px!important;
  border-radius:10px!important;
  font-size:8.5px!important;
  font-weight:1000!important;
}
@media (max-width:900px), (max-height:560px){
  #menuScreen > .hm-left{width:122px!important;padding:7px 5px 7px 7px!important;}
  #menuScreen > .hm-center{left:122px!important;right:318px!important;}
  #menuScreen > .hm-right{
    width:318px!important;
    grid-template-columns:126px 184px!important;
    gap:5px 7px!important;
    padding:7px 8px 7px 5px!important;
  }
  #menuScreen .hm-nick-mini{min-height:66px!important;padding:5px!important;border-radius:14px!important;}
  #menuScreen .hm-nick-mini #globalNickInput{height:29px!important;font-size:10px!important;}
  #menuScreen .hm-nick-mini-status{font-size:6.4px!important;min-height:12px!important;}
  #menuScreen > .hm-right > .hm-side-btn{min-height:61px!important;font-size:20px!important;border-radius:15px!important;padding:6px 4px!important;}
  #menuScreen > .hm-right > .hm-side-btn span{font-size:10px!important;}
  #menuScreen > .hm-right .hm-btn-online span{font-size:8px!important;}
  #menuScreen .hm-rooms-panel{height:calc(100dvh - 66px)!important;min-height:225px!important;padding:6px!important;gap:5px!important;}
  #menuScreen .hm-rooms-title{font-size:8px!important;}
  #menuScreen .hm-rooms-refresh{min-height:28px!important;font-size:7.8px!important;padding:5px 3px!important;}
  #menuScreen .hm-rooms-panel #roomSearchInput{min-height:25px!important;font-size:7.7px!important;padding:5px!important;}
  #menuScreen .hm-rooms-list .social-row{padding:6px!important;margin-bottom:5px!important;border-radius:11px!important;}
  #menuScreen .hm-rooms-list .social-name{font-size:8.5px!important;}
  #menuScreen .hm-rooms-list .social-sub{font-size:6.8px!important;}
  #menuScreen .hm-rooms-list .social-btn{font-size:6.9px!important;padding:5px 3px!important;}
}
@media (max-width:680px){
  #menuScreen > .hm-left{width:108px!important;}
  #menuScreen > .hm-center{left:108px!important;right:282px!important;}
  #menuScreen > .hm-right{width:282px!important;grid-template-columns:112px 162px!important;}
}