@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
:root{color-scheme:dark;--gold:#edbd68;--ink:#101610;--panel:#172019ed;--line:#506046;--muted:#a7b09a;--text:#f1f0df}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#101710;color:var(--text);font-family:'IBM Plex Mono',monospace;touch-action:none}.app{position:relative;width:100vw;height:100dvh;overflow:hidden;background:#203323}canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}.topbar{position:absolute;z-index:2;left:0;right:0;top:0;height:76px;padding:0 30px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#0b110ddf,#11180d10);pointer-events:none}.topbar button{pointer-events:auto}.brand{display:flex;gap:13px;align-items:center;text-shadow:0 2px 5px #000}.sigil{width:42px;height:42px;display:grid;place-items:center;color:#f6cd80;background:#213322;border:1px solid #a47b42;clip-path:polygon(50% 0,95% 24%,95% 76%,50% 100%,5% 76%,5% 24%);font:800 14px 'Barlow Condensed'}.brand b{display:block;font:800 21px 'Barlow Condensed';letter-spacing:2px}.brand i{font-style:normal;color:var(--gold)}.brand small{display:block;color:#d0c9ad;font-size:9px;letter-spacing:1.3px;margin-top:2px}.online{display:flex;align-items:center;gap:9px;color:#d8dec9;font-size:9px}.online #netdot{width:7px;height:7px;border-radius:50%;background:#91d797;box-shadow:0 0 10px #94e59a}.online button{border:1px solid #b38c52;background:#1a281ddd;color:#ecd09b;padding:9px 11px;font:600 9px 'IBM Plex Mono';letter-spacing:.5px;cursor:pointer}.objective{position:absolute;z-index:2;left:30px;top:98px;width:230px;padding:12px 14px 13px;background:#111a13c9;border:1px solid #b08a4d77;box-shadow:0 5px 18px #0005;backdrop-filter:blur(5px)}.objective small{display:block;color:#d4a75d;font-size:8px;letter-spacing:1.6px;margin-bottom:5px}.objective b{font:600 15px 'Barlow Condensed';letter-spacing:.4px}.progress{height:3px;background:#46503a;margin-top:10px}.progress span{display:block;width:8%;height:100%;background:#e0b365;transition:width .25s}.hud{position:absolute;z-index:2;bottom:18px;left:50%;transform:translateX(-50%);width:min(700px,calc(100% - 40px));min-height:85px;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(110deg,#111812f2,#172019ee 65%,#101711f2);border:1px solid #71704f;border-radius:5px;box-shadow:0 8px 30px #0009}.player-info{display:flex;align-items:center;gap:12px;min-width:220px}.avatar{width:48px;height:52px;display:grid;place-items:center;background:linear-gradient(145deg,#465738,#1b281c);border:1px solid #b69456;color:#e9bc6a;font-size:24px;clip-path:polygon(50% 0,100% 25%,90% 82%,50% 100%,10% 82%,0 25%)}.player-info>div:last-child>b{font:700 15px 'Barlow Condensed';letter-spacing:1px}.bars{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:9px}.bars .heart{color:#e2785c}.bars.energy{color:#75c4c4;margin-top:3px}.bar{width:106px;height:7px;background:#47312e;border:1px solid #715346}.bar i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#b84e3d,#e87952);transition:width .12s}.energy .bar{height:5px;background:#203b3b;border-color:#3d6964}.energy .bar i{background:#69bdb2}.bars small{color:#c0b8a4;font-size:8px;min-width:48px}.items{height:55px;display:flex;align-items:stretch}.item{min-width:74px;padding:1px 11px;display:grid;grid-template-columns:25px auto;grid-template-rows:1fr 1fr;align-items:center;background:transparent;border:0;border-left:1px solid #52604c;color:#dfdec9;text-align:left;font-family:inherit}.item>span{grid-row:1/3;font-size:23px;color:#f0bd68}.item b{font:700 9px 'Barlow Condensed';letter-spacing:1px;align-self:end}.item small{font-size:7px;color:#aab19a;align-self:start;margin-top:2px}.potion{cursor:pointer}.potion:hover{background:#31412a}.potion>span{color:#93d5a3}.toast{position:absolute;z-index:3;top:25%;left:50%;transform:translateX(-50%);padding:10px 16px;background:#111a14db;border:1px solid #9c895d;color:#eaddbc;font-size:10px;text-align:center;max-width:min(90vw,460px);opacity:0;transition:opacity .2s;pointer-events:none}.toast.visible{opacity:1}.interact{position:absolute;z-index:2;left:50%;top:56%;transform:translate(-50%,-50%);padding:8px 12px;background:#142018ed;border:1px solid #efc36b;color:#ffe1a3;font-size:10px;box-shadow:0 3px 14px #0009}.hidden{display:none!important}.screen{position:absolute;z-index:5;inset:0;display:grid;place-items:center;background:linear-gradient(90deg,#08100bc9,#10170e8c 48%,#090f0ac9),#0c140d66}.panel{width:min(440px,calc(100vw - 34px));padding:28px 32px;background:linear-gradient(145deg,#1d2b20f5,#101811f7);border:1px solid #927349;box-shadow:0 18px 65px #000c, inset 0 0 30px #d1ac4720}.eyebrow{font-size:8px;letter-spacing:1.5px;color:#e7ba68}.start-panel h1{font:800 58px/.83 'Barlow Condensed';letter-spacing:2px;margin:13px 0 12px;text-shadow:2px 4px #0009}.start-panel h1 em,.pause-panel h2 em{font-style:normal;color:#dfb65f}.panel p{font-size:10px;line-height:1.7;color:#c5c8ad;margin:0 0 16px}.panel label{display:block;margin:12px 0 0;font-size:8px;letter-spacing:1px;color:#c6cdb7}.panel label small{font-size:7px;color:#9ea58f;letter-spacing:0}.panel input{display:block;width:100%;margin-top:5px;padding:10px 11px;background:#111812;border:1px solid #4c5945;color:#f3ebcf;font:12px 'IBM Plex Mono';outline:none}.panel input:focus{border-color:#dcb868}.primary,.secondary{width:100%;padding:13px;margin-top:17px;border:1px solid #d0a958;background:linear-gradient(#94733b,#5a4729);color:#fff1c4;font:700 12px 'Barlow Condensed';letter-spacing:1px;cursor:pointer}.primary:hover{filter:brightness(1.18)}.primary span{float:right}.secondary{margin-top:9px;background:#172019;border-color:#647353}.controls-hint{margin-top:14px;color:#d5c9a8;font-size:7px;text-align:center;line-height:1.7}.platform-hint{display:block;margin-top:14px;color:#8e9a82;text-align:center;font-size:7px;letter-spacing:1px}.pause-panel{width:min(330px,calc(100vw - 36px));text-align:center}.pause-panel h2{font:800 44px/.9 'Barlow Condensed';margin:12px 0}.pause-panel>small{display:block;margin-top:15px;font-size:8px;color:#9da58f}.mobile-controls{display:none}
@media(max-width:700px){.topbar{height:60px;padding:0 12px}.sigil{width:33px;height:35px;font-size:12px}.brand{gap:8px}.brand b{font-size:16px}.brand small{font-size:7px}.online{gap:6px;font-size:7px}.online button{padding:7px;font-size:7px}.objective{left:11px;top:73px;width:190px;padding:9px 11px}.objective b{font-size:13px}.hud{bottom:9px;width:calc(100% - 16px);min-height:70px;padding:8px 10px}.player-info{min-width:0;gap:7px}.avatar{width:36px;height:40px;font-size:19px}.player-info>div:last-child>b{font-size:11px}.bar{width:68px}.bars{gap:4px;font-size:8px}.bars small{font-size:7px;min-width:38px}.items{height:46px}.item{min-width:53px;padding:0 6px;grid-template-columns:18px auto}.item>span{font-size:18px}.item b{font-size:7px}.item small{font-size:6px}.toast{top:19%;font-size:9px}.mobile-controls{display:flex;position:absolute;z-index:3;inset:auto 13px 92px;justify-content:space-between;align-items:end;pointer-events:none}.stick,.actions{pointer-events:auto;touch-action:none}.stick>button,.stick>div button,.actions button{width:40px;height:38px;border:1px solid #b69a5d;border-radius:5px;background:#152019bb;color:#f5d793;font-size:14px;touch-action:none}.stick>button{display:block;margin:0 auto 3px}.stick>div{display:flex;gap:3px}.actions{display:flex;align-items:end;gap:8px}.actions button{width:53px;height:53px;border-radius:50%;font-size:23px;background:#183326d9}.actions #mobileAttack{background:#4b3021e8}.panel{padding:23px 22px}.start-panel h1{font-size:49px}.controls-hint{font-size:6px}}

/* Identidade e tela inicial alinhadas aos conceitos visuais enviados. */
#startScreen{display:flex;align-items:center;justify-content:flex-end;padding:3vh 5vw;background:linear-gradient(90deg,#06111b08 0%,#07111d10 47%,#07111dc9 100%)}
#startScreen::before{content:"";position:absolute;inset:0;background:url('/midia/fronteira-login-bg.png') center/cover no-repeat;z-index:-1}
#startScreen .start-panel{width:min(475px,calc(100vw - 32px));padding:clamp(24px,3vw,38px);background:linear-gradient(145deg,#0b1324f2,#10121ceF 66%,#0a1422f5);border:1px solid #64748a;box-shadow:0 20px 70px #000b,inset 0 0 28px #7ab6f017}
#startScreen .eyebrow{color:#9ac9ff;font-size:8px;letter-spacing:1.2px}
#startScreen .start-panel h1{font:800 clamp(50px,5.3vw,72px)/.82 'Barlow Condensed';letter-spacing:1px;margin:14px 0 16px;color:#edf5ff;text-shadow:2px 3px 0 #242a38,4px 6px 0 #06080e;}
#startScreen .start-panel h1 em{color:#f6b833;text-shadow:2px 3px 0 #4d3210,4px 6px 0 #080a10}
#startScreen .panel p{color:#c2c9d7;font-size:10px}
#startScreen .panel label{color:#d0d8e8}
#startScreen .panel input{background:#0b1019;border-color:#526071;border-radius:4px;padding:11px}
#startScreen .primary{margin-top:18px;border:1px solid #4bcf72;border-radius:3px;background:linear-gradient(#239649,#12612f);box-shadow:0 0 18px #18a14c4a;color:#f3fff3;font:800 14px 'Barlow Condensed';letter-spacing:1.4px}
#startScreen .primary:hover{filter:brightness(1.2)}
#startScreen .controls-hint{color:#bac6d9}
#startScreen .platform-hint{color:#8eabc9}
@media(max-width:700px){#startScreen{justify-content:center;align-items:center;padding:12px;background:linear-gradient(#07111b40,#07111bdc)}#startScreen::before{background-position:34% center}#startScreen .start-panel{max-height:96dvh;overflow:auto;padding:20px 21px}#startScreen .start-panel h1{font-size:53px}.brand b{letter-spacing:1px}}

/* Controles de tela e identificação dos trechos da fronteira. */
#fullscreen{min-width:86px}
#location{color:#9dc8ea}
@media(max-width:700px){#fullscreen{min-width:0;padding:7px 6px;font-size:6px;letter-spacing:0}.online{gap:4px}.online button{padding-left:6px;padding-right:6px}.objective{width:min(210px,calc(100vw - 22px))}}

/* Botão de falar no celular. */
@media(max-width:700px){.actions #mobileTalk{width:44px;height:44px;font:800 15px 'Barlow Condensed';background:#1d2c44d9}}


/* ===== Barra do jogador: retrato, 10 espaços (teclas 1–0) e carteira ===== */
.hud{width:min(1080px,calc(100% - 40px));gap:14px;padding:10px 14px;min-height:0}
.perfil{display:flex;align-items:center;gap:10px;min-width:214px}
.retrato{width:60px;height:60px;flex:none;border:2px solid #c9a35a;border-radius:6px;overflow:hidden;background:#141c2c;box-shadow:0 0 0 2px #0009,inset 0 0 12px #000a}
.retrato img{width:100%;height:100%;display:block;image-rendering:pixelated}
.perfil-info b{display:block;font:700 15px 'Barlow Condensed';letter-spacing:1px}
.perfil-info>small{display:block;color:#e7ba68;font-size:8px;letter-spacing:1.4px;margin-top:1px}
.hotbar{display:grid;grid-template-columns:repeat(10,50px);gap:5px}
.slot{position:relative;width:50px;height:50px;padding:0;border:1px solid #6d6a52;border-radius:6px;background:linear-gradient(#24302a,#111811);cursor:pointer;box-shadow:inset 0 0 10px #000b,0 2px 0 #0008;transition:border-color .12s,transform .12s}
.slot:hover{border-color:#e7ba68;transform:translateY(-2px)}
.slot img{width:42px;height:42px;margin:3px;display:block;image-rendering:pixelated;filter:drop-shadow(0 2px 0 #0009)}
.slot.vazio{opacity:.4;cursor:default}.slot.vazio:hover{transform:none;border-color:#6d6a52}
.slot .tecla{position:absolute;left:3px;top:1px;font:600 9px 'IBM Plex Mono';color:#ffe2a0;text-shadow:0 1px 0 #000,0 0 3px #000}
.slot .qtd{position:absolute;right:3px;bottom:1px;font:800 11px 'Barlow Condensed';color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000}
.slot .marca{position:absolute;right:3px;top:3px;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 1px #000}
.marca.especial{background:#f0b020}.marca.ilegal{background:#ff3a3a}.marca.declarado{background:#4bcf72}
.slot.usado{animation:usado .28s}
@keyframes usado{50%{transform:scale(1.14);border-color:#ffe08a;box-shadow:0 0 14px #ffe08a88}}
.carteira{display:grid;gap:5px;min-width:122px;text-align:right}
.carteira small{display:block;font-size:7px;color:#9fb0a0;letter-spacing:1.2px}
.carteira b{font:700 16px 'Barlow Condensed';color:#ffe2a0;letter-spacing:.5px}
.carteira span:last-child b{color:#9ee08a}
@media(max-width:1180px){.hotbar{grid-template-columns:repeat(10,42px);gap:4px}.slot{width:42px;height:42px}.slot img{width:34px;height:34px}.perfil{min-width:180px}}
@media(max-width:700px){.hud{flex-wrap:wrap;gap:6px;padding:7px 8px;bottom:6px;width:calc(100% - 12px)}.perfil{min-width:0;flex:1;gap:7px}.retrato{width:42px;height:42px}.carteira{min-width:0}.carteira b{font-size:12px}
  .hotbar{order:3;width:100%;grid-template-columns:repeat(10,1fr);gap:3px}.slot{width:auto;height:34px}.slot img{width:28px;height:28px;margin:3px auto}.slot .tecla{font-size:7px}
  .mobile-controls{bottom:128px}.actions #mobileTalk{width:44px;height:44px;font:800 15px 'Barlow Condensed';background:#1d2c44d9}}

/* ===== Painéis (lojas, câmbio, Receita, mototáxi, missões) ===== */
#painel{z-index:6;background:#05080cb0}
.painel-jogo{width:min(580px,calc(100vw - 28px));max-height:88dvh;overflow:auto}
.painel-jogo h2{font:800 32px/1 'Barlow Condensed';margin:8px 0 12px;letter-spacing:1px}
.painel-corpo{font-size:11px;line-height:1.65;color:#d8dcc8}
.painel-corpo p{margin:0 0 10px;font-size:11px}
.painel-corpo .rodape{color:#a7b09a;font-size:10px}
.painel-corpo .alerta{color:#ff9a8a}
.painel-botoes{display:flex;gap:8px;flex-wrap:wrap}.painel-botoes button{flex:1;min-width:150px}
.item-loja{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:8px;margin-bottom:6px;border:1px solid #3a4636;border-radius:6px;background:#0f160fa6}
.item-loja img{width:48px;height:48px;image-rendering:pixelated}
.item-loja b{font:700 15px 'Barlow Condensed';letter-spacing:.4px}
.item-loja small{display:block;color:#a7b09a;font-size:9px;line-height:1.4}
.item-loja .preco{text-align:right;font:700 14px 'Barlow Condensed';color:#9ee08a;display:grid;gap:2px;justify-items:end}
.item-loja .preco small{color:#c0b8a4;font:500 9px 'IBM Plex Mono'}
.item-loja button{padding:6px 12px;border:1px solid #4bcf72;border-radius:3px;background:#1a5a30;color:#eaffea;font:700 11px 'Barlow Condensed';letter-spacing:.6px;cursor:pointer}
.item-loja button:disabled{opacity:.35;cursor:default}
.selo{display:inline-block;margin-left:6px;padding:1px 5px;border-radius:3px;font:600 8px 'IBM Plex Mono';vertical-align:middle}
.selo.especial{background:#7a5a10;color:#ffe08a}.selo.ilegal{background:#7a1010;color:#ffd0d0}.selo.declarado{background:#1a5a30;color:#cfffcf}
.missao{padding:9px 11px;margin-bottom:8px;border-left:3px solid #e7ba68;background:#0f160fa6}
.missao.feita{border-color:#4bcf72;opacity:.7}.missao.nova{border-color:#5a6a5a}
.missao b{font:700 16px 'Barlow Condensed'}.missao small{display:block;color:#a7b09a;font-size:9px}
#prisaoScreen .panel{border-color:#a03030}#prisaoScreen h2 em{color:#ff5a5a;font-style:normal}

/* ===== Escolha de personagem e abertura em pixel art ===== */
.personagens{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:6px}
.pers{padding:5px 0 4px;border:1px solid #3a4658;border-radius:4px;background:#0b1019;color:#d0d8e8;font:700 9px 'Barlow Condensed';letter-spacing:.3px;cursor:pointer}
.pers img{width:32px;height:40px;display:block;margin:0 auto 3px;image-rendering:pixelated}
.pers:hover{border-color:#7a9ac8}.pers.ativo{border-color:#f6b833;background:#1a2236;box-shadow:0 0 10px #f6b83355}
.vantagem{display:block;margin-top:6px;color:#9ac9ff;font-size:9px;min-height:13px}
#startScreen::before{content:none}
#abertura{position:absolute;left:50%;top:50%;width:max(100vw,177.78dvh);height:max(100dvh,56.25vw);transform:translate(-50%,-50%);image-rendering:pixelated;z-index:-1}
#startScreen{overflow:hidden;isolation:isolate}
@media(max-width:700px){.personagens{grid-template-columns:repeat(4,1fr)}#abertura{left:38%}}

#startScreen{background:#0b1018}

.carteira{gap:3px}.carteira span.rep b{color:#f6c84a;font-size:13px;letter-spacing:1px}
@media(max-width:700px){.carteira span.rep{display:none}}

/* Logo neon retrô */
.logo-topo{height:46px;width:auto;display:block;filter:drop-shadow(0 2px 6px #000c)}
.brand{flex-direction:column;align-items:flex-start;gap:2px}
.brand small{margin-top:0}
#startScreen .start-panel h1.logo-login{margin:10px 0 12px;text-shadow:none;line-height:0}
.logo-login img{width:100%;height:auto;display:block;filter:drop-shadow(0 4px 14px #a030ff66) drop-shadow(0 2px 2px #000)}
@media(max-width:700px){.logo-topo{height:30px}.brand small{display:none}}

/* seleção de quantidade no pedido */
.qtd-sel{display:flex;align-items:center;gap:6px;margin-top:4px}.qtd-sel button{width:26px;height:24px;padding:0;border:1px solid #4bcf72;border-radius:3px;background:#1a5a30;color:#eaffea;font:800 15px 'Barlow Condensed';cursor:pointer}
.qtd-sel button:disabled{opacity:.3;cursor:default}.qtd-sel b{min-width:18px;text-align:center;font:800 15px 'Barlow Condensed';color:#fff}
.item-loja.marcado{border-color:#4bcf72;background:#123a1fa6}

/* lista de tarefas embaixo do objetivo principal */
.tarefas{list-style:none;margin:9px 0 0;padding:8px 0 0;border-top:1px solid #b08a4d44;display:grid;gap:6px}.tarefas:empty{display:none}
.tarefas li{font:600 12px/1.25 'Barlow Condensed';color:#d8e6ff;padding-left:12px;position:relative}.tarefas li::before{content:'';position:absolute;left:0;top:4px;width:6px;height:6px;border-radius:50%;background:#5cc8ff;box-shadow:0 0 6px #5cc8ff}
.tarefas small{display:block;font:500 8px 'IBM Plex Mono';color:#9ac9ff;letter-spacing:.5px;margin-top:1px}
.objective{width:250px}@media(max-width:700px){.tarefas li{font-size:10px}.tarefas small{display:none}}

/* ===== Caixas de diálogo no estilo da logo neon ===== */
#painel{background:radial-gradient(ellipse at center,#14062a99,#03050bd9);backdrop-filter:blur(3px)}
.painel-jogo{position:relative;border:0;border-radius:12px;padding:26px 28px 24px;background:linear-gradient(165deg,#18213a 0%,#0e1424 55%,#120b22 100%);
  box-shadow:0 0 0 2px #2a3352,0 0 0 4px #0a0d18,0 0 26px #5a3cff55,0 0 60px #ff3fa022,0 24px 70px #000c,inset 0 1px 0 #ffffff14}
.painel-jogo::before{content:'';position:absolute;inset:0;border-radius:12px;padding:2px;background:linear-gradient(120deg,#3ad7ff,#8a5cff 35%,#ff3fa0 70%,#ffb02e);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.painel-jogo::after{content:'';position:absolute;left:18px;right:18px;top:0;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,transparent,#ffffffaa,transparent);opacity:.5;pointer-events:none}
.painel-jogo.entra{animation:painelEntra .26s cubic-bezier(.2,1.3,.4,1)}
@keyframes painelEntra{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
.painel-cabeca{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.painel-retrato{width:64px;height:64px;flex:none;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:#0b1020;box-shadow:0 0 0 2px #8a5cff,0 0 14px #8a5cff88}
.painel-retrato img{width:100%;height:100%;image-rendering:pixelated}
.painel-jogo .eyebrow{display:inline-block;padding:3px 8px;border-radius:20px;background:#ffffff10;color:#9ad8ff;font-size:8px;letter-spacing:1.6px}
.painel-jogo h2{margin:6px 0 0;font:800 32px/1 'Barlow Condensed';letter-spacing:.6px;background:linear-gradient(180deg,#ffffff,#bfe6ff 45%,#ff8ad0);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #00000088)}
.painel-jogo.confirmacao .painel-retrato{box-shadow:0 0 0 2px #4bcf72,0 0 18px #4bcf7288;background:#0d2216}
.selo-ok{font:800 38px/1 'Barlow Condensed';color:#7dffa6;text-shadow:0 0 12px #4bcf72;animation:okPulsa .5s ease-out}
@keyframes okPulsa{0%{transform:scale(.2) rotate(-30deg);opacity:0}70%{transform:scale(1.2)}100%{transform:none;opacity:1}}
.painel-corpo{font-size:11px;color:#dfe6f5}.painel-corpo>p:first-child{font-size:12px;line-height:1.7;padding:10px 12px;border-radius:8px;background:#ffffff08;border-left:3px solid #8a5cff}
/* botões: mesmo tamanho, alinhados, com reação ao toque */
.painel-botoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:16px}
.painel-botoes button,.painel-botoes .primary,.painel-botoes .secondary{margin:0;width:100%;height:48px;padding:0 12px;border-radius:8px;font:800 13px 'Barlow Condensed';letter-spacing:1px;position:relative;overflow:hidden;cursor:pointer;transition:transform .08s,filter .15s,box-shadow .15s}
.painel-botoes .primary{border:0;color:#fff;background:linear-gradient(180deg,#36d57a,#169a52);box-shadow:0 4px 0 #0b5a2f,0 0 16px #36d57a55}
.painel-botoes .secondary{border:1px solid #4a5677;color:#d8e2ff;background:linear-gradient(180deg,#25304a,#161d30);box-shadow:0 4px 0 #0a0e1a}
.painel-botoes button:hover{filter:brightness(1.15);transform:translateY(-1px)}
.painel-botoes button:active,.pers:active,.slot:active,.item-loja button:active,.qtd-sel button:active,#startScreen .primary:active{transform:translateY(3px) scale(.97);box-shadow:0 1px 0 #0008}
/* onda de luz no clique */
.onda{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);background:radial-gradient(circle,#ffffffcc,#ffffff00 70%);animation:onda .5s ease-out forwards}
@keyframes onda{to{transform:scale(1);opacity:0}}
button{position:relative;overflow:hidden}
/* linhas de produto e cartões */
.item-loja{border:1px solid #2c3858;background:linear-gradient(90deg,#141c30,#10172a);border-radius:10px;transition:border-color .15s,transform .15s,background .15s}
.item-loja:hover{border-color:#5a6fa8;transform:translateX(2px)}
.item-loja.marcado{border-color:#36d57a;background:linear-gradient(90deg,#123322,#0f1d18);box-shadow:inset 3px 0 0 #36d57a}
.item-loja img{background:#0a0f1c;border-radius:8px;box-shadow:inset 0 0 0 1px #2c3858}
.item-loja button{border:0;border-radius:6px;background:linear-gradient(180deg,#36d57a,#169a52);box-shadow:0 3px 0 #0b5a2f;padding:6px 12px}
.qtd-sel button{border:0;border-radius:6px;background:linear-gradient(180deg,#3a4a70,#25304a);box-shadow:0 2px 0 #0a0e1a;color:#fff}
.missao{border-radius:10px;border-left:4px solid #ffb02e;background:linear-gradient(90deg,#1a1f33,#11162a);padding:11px 13px}
.missao.feita{border-color:#36d57a}.missao.nova{border-color:#5a6080}
.painel-corpo .rodape{color:#9aa8c8;font-size:10px;padding:8px 10px;border-radius:8px;background:#ffffff06}
/* aviso flutuante e dica de interação */
.toast{border:0;border-radius:10px;background:linear-gradient(90deg,#1a1033ee,#0f1a33ee);box-shadow:0 0 0 1px #8a5cff88,0 0 18px #8a5cff44;color:#f0e8ff;font-size:11px;padding:10px 18px}
.toast.visible{animation:toastEntra .25s ease-out}@keyframes toastEntra{from{transform:translate(-50%,-8px);opacity:0}}
.interact{border:0;border-radius:20px;background:linear-gradient(90deg,#2a1450f0,#14284af0);box-shadow:0 0 0 1px #ffb02e,0 0 14px #ffb02e66;color:#ffe2a0;font:700 11px 'Barlow Condensed';letter-spacing:1px;padding:8px 16px;animation:dica 1.6s ease-in-out infinite}
@keyframes dica{50%{box-shadow:0 0 0 1px #ffb02e,0 0 22px #ffb02eaa}}

/* ===== Barra do jogador no estilo neon ===== */
.hud{border:0;border-radius:14px;padding:10px 16px;background:linear-gradient(165deg,#161f36f2,#0d1322f5 60%,#140c24f5);box-shadow:0 0 0 2px #2a3352,0 0 0 4px #0a0d18,0 0 22px #5a3cff44,0 14px 40px #000b}
.hud::before{content:'';position:absolute;inset:0;border-radius:14px;padding:2px;background:linear-gradient(110deg,#3ad7ff,#8a5cff 35%,#ff3fa0 70%,#ffb02e);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.85}
.retrato{position:relative;border:0;border-radius:12px;box-shadow:0 0 0 2px #8a5cff,0 0 14px #8a5cffaa,inset 0 0 12px #000a;background:#0b1020}
.retrato::after{content:'';position:absolute;inset:0;border-radius:12px;background:linear-gradient(180deg,#ffffff18,transparent 40%);pointer-events:none}
.perfil-info b{font:800 17px 'Barlow Condensed';letter-spacing:1.2px;background:linear-gradient(180deg,#fff,#cfe8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.perfil-info>small{display:inline-block;margin:2px 0 4px;padding:2px 7px;border-radius:10px;background:#ffb02e22;color:#ffcf7a;font-size:7px;letter-spacing:1.2px}
.bars .bar{height:9px;border:0;border-radius:6px;background:#2a1220;box-shadow:inset 0 0 0 1px #5a2a3a,inset 0 2px 3px #0008;overflow:hidden;position:relative}
.bars .bar::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 9px,#0006 9px 10px);pointer-events:none}
.bar i{border-radius:6px;background:linear-gradient(180deg,#ff8a6a,#e0303c);box-shadow:0 0 8px #ff4a4a99}
.energy .bar{height:6px;background:#0c2a2c;box-shadow:inset 0 0 0 1px #1d5a58}.energy .bar i{background:linear-gradient(180deg,#7dfcf0,#21b8b0);box-shadow:0 0 8px #3ae0d899}
.bars .heart{color:#ff5a6a;text-shadow:0 0 8px #ff3a4a}.bars.energy span{color:#5ae8e0;text-shadow:0 0 8px #3ae0d8}
.hud.vida-baixa .bars:not(.energy) .bar{animation:vidaBaixa .8s ease-in-out infinite}
@keyframes vidaBaixa{50%{box-shadow:inset 0 0 0 1px #ff3a4a,0 0 12px #ff3a4a}}
.hotbar{padding:6px;border-radius:12px;background:#0006;box-shadow:inset 0 0 0 1px #ffffff10}
.slot{border:0;border-radius:9px;background:linear-gradient(180deg,#1d2640,#0f1424);box-shadow:inset 0 0 0 1px #34406a,inset 0 -3px 0 #0008,0 2px 0 #0006;transition:transform .12s,box-shadow .15s}
.slot:not(.vazio):hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px #8a5cff,0 0 14px #8a5cff88,0 4px 0 #0006}
.slot.vazio{opacity:.35}
.slot .tecla{left:2px;top:2px;padding:0 3px;border-radius:4px;background:#000a;color:#ffcf7a;font-size:8px;line-height:12px}
.slot .qtd{right:3px;bottom:2px;padding:0 3px;border-radius:4px;background:#000a;font-size:11px;line-height:13px}
.slot.usado{animation:usado2 .3s}@keyframes usado2{40%{transform:scale(1.15);box-shadow:inset 0 0 0 2px #ffe08a,0 0 18px #ffe08acc}}
.slot:not(.vazio)::after{content:attr(data-nome);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);white-space:nowrap;padding:4px 8px;border-radius:6px;background:#140c24f2;box-shadow:0 0 0 1px #8a5cff;color:#f0e8ff;font:700 11px 'Barlow Condensed';letter-spacing:.4px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.slot:not(.vazio):hover::after{opacity:1;transform:translate(-50%,0)}
.slot{overflow:visible}
.carteira span{display:grid;justify-items:end}
.carteira b{font:800 17px 'Barlow Condensed';letter-spacing:.6px}
.carteira span:first-child b{color:#7dffa6;text-shadow:0 0 10px #36d57a66}.carteira span:nth-child(2) b{color:#7fd8ff;text-shadow:0 0 10px #3ad7ff66}
.carteira span:first-child small::before{content:'🇧🇷 '}.carteira span:nth-child(2) small::before{content:'💵 '}
.carteira span.rep b{color:#ffd24a;text-shadow:0 0 10px #ffb02e99;font-size:14px;letter-spacing:1.5px}
@media(max-width:700px){.hud{padding:8px}.carteira b{font-size:13px}.slot::after{display:none}}

/* ===== Botões do topo ===== */
.topbar{height:84px;background:linear-gradient(#06091299,#06091200)}
.online{gap:8px}
.online>span#net{padding:6px 10px 6px 22px;border-radius:20px;background:#0b1222cc;box-shadow:inset 0 0 0 1px #2c3858;color:#bfe8c8;font:600 9px 'IBM Plex Mono';letter-spacing:.8px;position:relative}
.online #netdot{position:relative;left:18px;z-index:1;margin-right:-10px;animation:netPulsa 1.8s ease-in-out infinite}@keyframes netPulsa{50%{box-shadow:0 0 14px #94e59a}}
.online button{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:0;border-radius:20px;background:linear-gradient(180deg,#232c48,#141a2e);color:#e8eeff;font:800 11px 'Barlow Condensed';letter-spacing:1.1px;cursor:pointer;
  box-shadow:inset 0 0 0 1px #3a4670,0 3px 0 #070a14,0 0 0 #0000;transition:transform .1s,box-shadow .15s,filter .15s}
.online button:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px #8a5cff,0 3px 0 #070a14,0 0 14px #8a5cff77}
.online button:active{transform:translateY(2px);box-shadow:inset 0 0 0 1px #8a5cff,0 1px 0 #070a14}
.online button::before{font-size:13px;filter:drop-shadow(0 0 4px #fff4)}
#btnMissoes::before{content:'🎯'}#btnSom::before{content:'🔊'}#invite::before{content:'🌐'}#fullscreen::before{content:'⛶';font-weight:400}
#btnMissoes{background:linear-gradient(180deg,#5a3a10,#3a2408);box-shadow:inset 0 0 0 1px #ffb02e,0 3px 0 #1a1004;color:#ffe2a0}
@media(max-width:700px){.topbar{height:62px;padding:0 8px}.online{gap:4px}.online button{height:28px;padding:0 7px;font-size:8px;letter-spacing:.3px}.online button::before{font-size:11px}.online>span#net{display:none}.online #netdot{display:none}
  #invite{display:none}.mobile-controls{bottom:170px}}

@media(max-width:700px){.objective{width:205px!important;top:70px}}

.mapa-aberto .objective,.mapa-aberto .interact,.mapa-aberto .mobile-controls{opacity:0;pointer-events:none;transition:opacity .2s}

/* ===== Caixa de objetivo no estilo neon ===== */
.objective{border:0;border-radius:12px;padding:12px 14px 13px;background:linear-gradient(165deg,#161f36f0,#0d1322f2 60%,#140c24f2);box-shadow:0 0 0 2px #2a3352,0 0 0 4px #0a0d18,0 0 18px #5a3cff44,0 10px 30px #000a;backdrop-filter:blur(4px)}
.objective::before{content:'';position:absolute;inset:0;border-radius:12px;padding:2px;background:linear-gradient(120deg,#3ad7ff,#8a5cff 35%,#ff3fa0 70%,#ffb02e);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.85}
.objective small#location{display:inline-block;padding:3px 8px;border-radius:20px;background:#ffffff10;color:#9ad8ff;font-size:7px;letter-spacing:1.4px;margin-bottom:7px}
.objective b#objective{display:block;padding-left:22px;position:relative;font:700 15px/1.25 'Barlow Condensed';color:#fff}
.objective b#objective::before{content:'🎯';position:absolute;left:0;top:0;font-size:14px;filter:drop-shadow(0 0 6px #ffb02e)}
.objective .progress{height:5px;border-radius:4px;background:#0006;box-shadow:inset 0 0 0 1px #2c3858;margin-top:10px;overflow:hidden}
.objective .progress span{border-radius:4px;background:linear-gradient(90deg,#ffb02e,#ff3fa0);box-shadow:0 0 8px #ff8a3a}
.tarefas{border-top:1px solid #8a5cff44}

/* necessidades e relógio */
.necessidades{display:flex;gap:8px;margin-top:4px}.necessidades span{display:flex;align-items:center;gap:3px;font-size:10px}.necessidades b{display:block;width:34px;height:5px;border-radius:3px;background:#0008;box-shadow:inset 0 0 0 1px #2c3858;overflow:hidden}
.necessidades i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#ffb02e,#7dffa6);transition:width .3s}.necessidades i.baixo{background:#ff4a4a;animation:vidaBaixa .8s infinite}
.relogio{padding:6px 12px;border-radius:20px;background:#0b1222cc;box-shadow:inset 0 0 0 1px #8a5cff88;color:#e8d8ff;font:700 11px 'Barlow Condensed';letter-spacing:1px}.relogio::before{content:'🕒 '}
#sono{position:absolute;inset:0;z-index:7;background:#000;opacity:0;pointer-events:none;transition:opacity .7s}#sono.ativo{opacity:1}
.preview-veic{width:110px;height:auto;image-rendering:pixelated}.item-loja.veiculo{grid-template-columns:110px 1fr auto}.cores{display:flex;gap:4px;margin-top:4px}.cores .cor{width:16px;height:16px;padding:0;border-radius:50%;border:2px solid #0008;cursor:pointer}.cores .cor.sel{border-color:#fff;box-shadow:0 0 6px #fff}
.abas{display:flex;gap:6px;margin-bottom:10px}.aba{flex:1;height:34px;border:0;border-radius:8px;background:#1d2640;color:#cfd8f0;font:800 12px 'Barlow Condensed';cursor:pointer}.aba.sel{background:linear-gradient(180deg,#8a5cff,#5a3cff);color:#fff}
.preview-pessoa{display:block;margin:0 auto 8px;width:64px;height:80px;image-rendering:pixelated;background:#0b1020;border-radius:10px;box-shadow:0 0 0 2px #8a5cff}
.amostra{width:40px;height:40px;border-radius:8px;box-shadow:inset 0 0 0 2px #0006}
@media(max-width:700px){.relogio{display:none}.necessidades b{width:22px}}

.preview-veic{width:200px;max-height:140px;object-fit:contain;background:radial-gradient(ellipse at 50% 70%,#2a3352,#0b1020 70%);border-radius:10px;box-shadow:inset 0 0 0 1px #3a4670}.item-loja.veiculo{grid-template-columns:200px 1fr auto;align-items:center}
@media(max-width:700px){.preview-veic{width:120px}.item-loja.veiculo{grid-template-columns:120px 1fr}}

.item-loja img.preview-veic{width:200px;height:130px;object-fit:contain;padding:6px;box-sizing:border-box}
@media(max-width:700px){.item-loja img.preview-veic{width:120px;height:84px}}

/* escolha de bairro: cartões no padrão */
.bairros-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.bairro-card{display:flex;flex-direction:column;gap:5px;padding:12px;border-radius:10px;background:linear-gradient(160deg,#1a2238,#10162a);box-shadow:inset 0 0 0 1px #2c3858;transition:box-shadow .15s,transform .15s}
.bairro-card:hover{box-shadow:inset 0 0 0 1px #8a5cff,0 0 14px #8a5cff44;transform:translateY(-2px)}
.bairro-card b{font:800 17px 'Barlow Condensed';letter-spacing:.6px;color:#fff}.bairro-card small{color:#9aa8c8;font-size:9px;line-height:1.4}
.faixa-preco{display:inline-block;padding:4px 7px;border-radius:6px;background:#ffb02e18;color:#ffcf7a;font:600 8px 'IBM Plex Mono';line-height:1.4}
.bairro-botoes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:auto;padding-top:6px}
.btn-pri,.btn-sec{height:36px;border:0;border-radius:8px;font:800 11px 'Barlow Condensed';letter-spacing:.6px;cursor:pointer;transition:transform .08s,filter .15s}
.btn-pri{color:#fff;background:linear-gradient(180deg,#36d57a,#169a52);box-shadow:0 3px 0 #0b5a2f}.btn-sec{color:#d8e2ff;background:linear-gradient(180deg,#25304a,#161d30);box-shadow:inset 0 0 0 1px #4a5677,0 3px 0 #0a0e1a}
.btn-pri:hover,.btn-sec:hover{filter:brightness(1.15)}.btn-pri:active,.btn-sec:active{transform:translateY(2px)}

.grupo-destino{margin:14px 0 8px;font:800 13px 'Barlow Condensed';letter-spacing:1.4px;color:#9ad8ff}.grupo-destino:first-child{margin-top:0}

.conta-campos{display:grid;grid-template-columns:1fr 1fr;gap:10px}.check-criar{display:flex!important;align-items:center;gap:6px;margin-top:8px!important;cursor:pointer}.check-criar input{width:auto!important;margin:0!important}
.login-erro{margin:8px 0 0!important;padding:8px 10px;border-radius:6px;background:#5a1a20cc;color:#ffd0d0!important;font-size:10px!important}
.chat-log{position:absolute;z-index:3;left:30px;bottom:150px;width:min(360px,60vw);display:flex;flex-direction:column;gap:4px;pointer-events:none}
.chat-log div{padding:5px 9px;border-radius:8px;background:#0b1222cc;box-shadow:inset 0 0 0 1px #2c3858;color:#e8eeff;font:600 11px 'Barlow Condensed';animation:toastEntra .2s;transition:opacity .6s}.chat-log b{color:#9ee08a}
.chat-input{position:absolute;z-index:6;left:30px;bottom:150px;width:min(360px,70vw);height:36px;padding:0 12px;border:0;border-radius:8px;background:#0b1222f2;box-shadow:0 0 0 2px #8a5cff;color:#fff;font:600 13px 'Barlow Condensed';outline:none}
@media(max-width:700px){.chat-log,.chat-input{left:10px;bottom:240px}.conta-campos{grid-template-columns:1fr}}

.toast{z-index:9}

/* pausa, vitória e prisão no estilo neon */
.pause-panel{position:relative;border:0!important;border-radius:14px;padding:28px 30px 24px!important;background:linear-gradient(165deg,#18213a 0%,#0e1424 55%,#120b22 100%)!important;box-shadow:0 0 0 2px #2a3352,0 0 0 4px #0a0d18,0 0 26px #5a3cff55,0 24px 70px #000c!important;animation:painelEntra .26s cubic-bezier(.2,1.3,.4,1)}
.pause-panel::before{content:'';position:absolute;inset:0;border-radius:14px;padding:2px;background:linear-gradient(120deg,#3ad7ff,#8a5cff 35%,#ff3fa0 70%,#ffb02e);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.pause-panel .eyebrow{display:inline-block;padding:3px 8px;border-radius:20px;background:#ffffff10;color:#9ad8ff}
.pause-panel h2{background:linear-gradient(180deg,#fff,#bfe6ff 45%,#ff8ad0);-webkit-background-clip:text;background-clip:text;color:transparent!important}.pause-panel h2 em{color:#ffb02e!important;-webkit-text-fill-color:#ffb02e}
.pause-panel .primary,.pause-panel .secondary{height:46px;border-radius:8px;font:800 13px 'Barlow Condensed';letter-spacing:1px;margin-top:12px}
.pause-panel .primary{border:0;color:#fff;background:linear-gradient(180deg,#36d57a,#169a52);box-shadow:0 4px 0 #0b5a2f,0 0 16px #36d57a55}.pause-panel .secondary{border:0;color:#d8e2ff;background:linear-gradient(180deg,#25304a,#161d30);box-shadow:inset 0 0 0 1px #4a5677,0 4px 0 #0a0e1a}
#pauseScreen,#winScreen,#prisaoScreen{background:radial-gradient(ellipse at center,#14062a99,#03050bd9);backdrop-filter:blur(3px)}

#btnLoja::before{content:'💰'}#btnLoja{background:linear-gradient(180deg,#1a5a30,#0f3a20);box-shadow:inset 0 0 0 1px #36d57a,0 3px 0 #06200f;color:#cfffe0}
.pacote b{font-size:22px;color:#7dffa6}.campo-email{width:100%;height:40px;margin-top:6px;padding:0 12px;border:0;border-radius:8px;background:#0b1019;box-shadow:inset 0 0 0 1px #4a5677;color:#fff;font:13px 'IBM Plex Mono'}
.pix{text-align:center}.pix-qr{width:220px;height:220px;image-rendering:pixelated;background:#fff;border-radius:10px;padding:8px}.pix-codigo{width:100%;height:70px;border:0;border-radius:8px;background:#0b1019;color:#cfe;font:10px 'IBM Plex Mono';padding:8px;resize:none}

.abas.sub{flex-wrap:wrap}.abas.sub .aba{flex:1 1 auto;height:28px;font-size:10px;padding:0 10px}
.btn-pri:disabled{filter:grayscale(1) brightness(.6);cursor:default}

.item-loja.veiculo{grid-template-columns:auto 1fr auto!important}

/* moldura fixa: a caixa não rola, só o conteúdo dentro dela */
.painel-jogo{display:flex;flex-direction:column;overflow:hidden!important;max-height:88dvh}
.painel-jogo .painel-cabeca,.painel-jogo .painel-botoes{flex:none}
.painel-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:6px;margin-right:-6px;scrollbar-width:thin;scrollbar-color:#8a5cff #0b1020}
.painel-corpo::-webkit-scrollbar{width:8px}.painel-corpo::-webkit-scrollbar-thumb{background:linear-gradient(#3ad7ff,#8a5cff,#ff3fa0);border-radius:8px}.painel-corpo::-webkit-scrollbar-track{background:#0b1020;border-radius:8px}
#startScreen .start-panel{overflow:visible}
@media(max-width:700px){#startScreen .start-panel{max-height:none}#startScreen{overflow-y:auto;align-items:flex-start;padding:16px 12px}}

.conta-abas{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0 4px}.conta-abas button{height:34px;border:0;border-radius:8px;background:#161d30;box-shadow:inset 0 0 0 1px #3a4670;color:#cfd8f0;font:800 12px 'Barlow Condensed';letter-spacing:1px;cursor:pointer}.conta-abas button.sel{background:linear-gradient(180deg,#8a5cff,#5a3cff);color:#fff;box-shadow:none}
.login-info{margin:8px 0 0!important;padding:8px 10px;border-radius:6px;background:#1a4a30cc;color:#cfffe0!important;font-size:10px!important}.link-esqueci{display:block;margin:8px 0 0 auto;border:0;background:none;color:#9ad8ff;font:600 10px 'IBM Plex Mono';text-decoration:underline;cursor:pointer}
#codigoInput{letter-spacing:8px;font-size:18px!important;text-align:center}

#btnInv::before{content:'🎒'}
.inv-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.inv-slot{position:relative;aspect-ratio:1;border:0;border-radius:10px;background:linear-gradient(180deg,#1d2640,#0f1424);box-shadow:inset 0 0 0 1px #34406a;cursor:pointer;padding:0}
.inv-slot.na-barra{box-shadow:inset 0 0 0 1px #8a5cff,0 0 8px #8a5cff44}.inv-slot.vazio{opacity:.45;cursor:default}
.inv-slot img{width:70%;height:70%;image-rendering:pixelated;margin-top:6%}.inv-slot .qtd{position:absolute;right:4px;bottom:3px;font:800 12px 'Barlow Condensed';color:#fff;text-shadow:0 1px 2px #000}
.inv-slot .tecla{position:absolute;left:4px;top:3px;padding:0 4px;border-radius:4px;background:#000a;color:#ffcf7a;font:600 9px 'IBM Plex Mono'}
.inv-slot:not(.vazio):hover{box-shadow:inset 0 0 0 2px #ffb02e,0 0 12px #ffb02e66}

/* Rodapé LiLá Tecnologias (igual aos outros sites, em tema escuro) */
.assinatura-lila{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;margin:18px auto 0;padding:14px 12px 4px;border-top:1px solid rgba(255,255,255,.1);color:#9aa8c8;font-size:11.5px;line-height:1.5;text-align:center}
.assinatura-lila img.assinatura-logo-lila{width:96px;height:auto}
.assinatura-lila strong{color:#c9a0ff;font-weight:600}
.assinatura-lila a{color:#9aa8c8;text-decoration:none;border-bottom:1px dotted rgba(154,168,200,.5)}
.assinatura-lila a:hover{color:#c9a0ff;border-bottom-color:#c9a0ff}
.assinatura-lila .versao-sistema{padding:1px 8px;border-radius:10px;background:#ffffff10;color:#cfd8f0;font:600 10px 'IBM Plex Mono',monospace}

/* botão da mochila ao lado dos slots da barra */
.barra-itens{display:flex;align-items:center;gap:8px}
.slot-mochila{display:grid;place-items:center;box-shadow:inset 0 0 0 1px #c8862a,0 0 10px #c8862a55,inset 0 -3px 0 #0008}
.slot-mochila:hover{box-shadow:inset 0 0 0 2px #ffb02e,0 0 14px #ffb02e88}
.slot-mochila svg{image-rendering:pixelated}
.slot-mochila .qtd{font-size:9px}
@media(max-width:700px){.barra-itens{order:3;width:100%}.barra-itens .hotbar{flex:1}.slot-mochila{width:34px;height:34px;flex:none}.slot-mochila svg{width:22px;height:22px}}

/* nome do cenário atual no alto da tela */
.cenario-topo{position:absolute;left:50%;top:92px;transform:translateX(-50%);padding:6px 18px 6px 30px;border-radius:999px;background:linear-gradient(90deg,#140c24e6,#161f36e6);box-shadow:inset 0 0 0 1px #8a5cff88,0 0 16px #8a5cff44;color:#fff;font:800 13px 'Barlow Condensed',sans-serif;letter-spacing:1.5px;white-space:nowrap;pointer-events:none;text-shadow:0 0 8px #3ad7ff88}
.cenario-topo::before{content:'📍';position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:12px}
@media(max-width:700px){.cenario-topo{top:66px;font-size:10px;padding:4px 10px 4px 24px}.cenario-topo::before{left:7px;font-size:10px}}

/* ficha do veículo na concessionária */
.ficha-veiculo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.ficha-veiculo .missao{margin:0}.ficha-veiculo small{display:block;margin-top:3px}
@media(max-width:700px){.ficha-veiculo{grid-template-columns:1fr}}

/* inventário: 10 colunas, a 1ª fileira é a barra (1 a 0) */
.inv-grade.inv-dez{grid-template-columns:repeat(10,1fr);gap:6px}
@media(max-width:700px){.inv-grade.inv-dez{grid-template-columns:repeat(5,1fr)}}
/* nome do cenário ao lado do relógio */
.online .cenario-topo{position:static;transform:none;top:auto;left:auto;padding:0 12px 0 26px;height:30px;display:inline-flex;align-items:center;font-size:12px}
.online .cenario-topo::before{left:8px}
@media(max-width:700px){.online .cenario-topo{height:26px;font-size:9px;padding:0 8px 0 20px;max-width:120px;overflow:hidden;text-overflow:ellipsis}}
.online .cenario-topo{position:relative}
.online>*{white-space:nowrap}
@media(max-width:1500px){.online{gap:6px}.online button{padding-left:10px;padding-right:10px}}

/* botão dos veículos na barra */
.slot-veiculos .veic-ico{font-size:22px;line-height:1}
@media(max-width:700px){.slot-veiculos{width:34px;height:34px;flex:none}.slot-veiculos .veic-ico{font-size:16px}}
.hud{width:min(1200px,calc(100% - 40px))}

/* minhas empresas */
.empresa-card{display:block;width:100%;text-align:left;cursor:pointer;border:0;font:inherit;color:inherit}
.empresa-card:hover{box-shadow:inset 0 0 0 2px #ffb02e,0 0 12px #ffb02e55}
.tabela-empresa{display:grid;grid-template-columns:1fr 1fr .6fr 1fr;gap:4px 10px;margin:8px 0;padding:10px;border-radius:10px;background:#0006;font:600 12px 'IBM Plex Mono',monospace}
.tabela-empresa b{color:#ffcf7a;font-size:11px}.tabela-empresa .pos{color:#7dffa6}.tabela-empresa .neg{color:#ff8aa0}
.botoes-veic{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.botoes-veic .btn-sec{background:#2a1a22;color:#ff8aa0;box-shadow:inset 0 0 0 1px #ff3fa066}

/* minhas casas */
.casa-card small{display:block;margin-top:3px}.casa-botoes{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.casa-botoes button{flex:1 1 auto;min-height:32px;padding:0 10px;font-size:11px}
/* barra com mochila, veículos, empresas, casas e celular: slots compactos */
.hud{width:min(1280px,calc(100% - 24px));gap:10px}
@media(min-width:701px){.hotbar{grid-template-columns:repeat(10,44px);gap:4px}.hotbar .slot,.barra-itens .slot,.barra-itens .celular-botao{width:44px;height:44px}.barra-itens{gap:5px}.slot img{width:34px;height:34px}.barra-itens .cel-ico{line-height:44px;font-size:20px}.slot-veiculos .veic-ico{font-size:19px}}
/* celular igual aos outros botões da barra (celular.css carrega depois, por isso o seletor mais forte) */
@media(min-width:701px){.hud .barra-itens .celular-botao{width:44px;height:44px;border-radius:9px}.hud .barra-itens .celular-botao .cel-ico{font-size:19px;line-height:44px}}
@media(max-width:700px){.hud .barra-itens .celular-botao{width:34px;height:34px}.hud .barra-itens .celular-botao .cel-ico{font-size:16px;line-height:34px}}
.hud .barra-itens .celular-botao .cel-tecla{left:2px;top:2px;padding:0 3px;border-radius:4px;background:#000a;color:#ffcf7a;font:600 8px/12px 'IBM Plex Mono',monospace}

/* botão SAIR no canto direito da barra do jogador */
.btn-sair{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:52px;height:52px;border:0;border-radius:12px;cursor:pointer;background:linear-gradient(180deg,#3a1420,#1f0a12);color:#ff8aa0;font:800 18px/1 'Barlow Condensed',sans-serif;box-shadow:inset 0 0 0 1px #ff3fa077,0 0 12px #ff3fa033}
.btn-sair span{font-size:10px;letter-spacing:1px}.btn-sair:hover{box-shadow:inset 0 0 0 2px #ff3fa0,0 0 16px #ff3fa077;color:#fff}.btn-sair:disabled{opacity:.6;cursor:wait}
@media(max-width:700px){.btn-sair{width:40px;height:40px;font-size:14px}.btn-sair span{display:none}}

/* login responsivo: a tela rola quando o card não cabe (sem cortar o topo) e o card se compacta em telas baixas */
#startScreen{overflow-y:auto;overflow-x:hidden;align-items:safe center}
#startScreen .start-panel{margin:auto 0;flex:none}
@media(max-height:1100px) and (min-width:701px){
  #startScreen{padding:16px 5vw}
  #startScreen .start-panel{padding:22px 28px}
  #startScreen .start-panel h1.logo-login{margin:6px auto 8px;max-width:330px}
  #startScreen .panel p{margin:0 0 6px}
  #startScreen .panel input{padding:8px 11px}
  .panel label{margin-top:9px}
  #startScreen .primary{margin-top:12px}
  #startScreen .platform-hint{display:none}
  #startScreen .assinatura-lila{margin-top:10px;padding-top:8px;gap:2px 10px;font-size:10.5px}
  #startScreen .assinatura-lila img.assinatura-logo-lila{width:60px}
}
@media(max-height:700px) and (min-width:701px){
  #startScreen .start-panel{width:min(560px,calc(100vw - 32px));padding:16px 24px}
  #startScreen .eyebrow,#startScreen .panel p,#startScreen .controls-hint{display:none}
  #startScreen .start-panel h1.logo-login{max-width:250px}
  .pers{padding:3px 0 2px}
}
@media(max-width:700px){
  #startScreen{padding:12px}
  #startScreen .start-panel{width:100%;max-width:475px;padding:18px 16px}
  #startScreen .start-panel h1.logo-login{margin:6px auto 8px;max-width:280px}
  #startScreen .panel input{padding:9px 10px;font-size:16px}
  #startScreen .platform-hint,#startScreen .controls-hint{display:none}
  #startScreen .assinatura-lila{font-size:10.5px;gap:2px 10px}
  #startScreen .assinatura-lila img.assinatura-logo-lila{width:64px}
}
@media(min-width:340px) and (max-width:700px){.conta-campos{grid-template-columns:1fr 1fr}}

/* card de introdução (todo login) */
.intro-jogo{display:grid;gap:10px}
.intro-topo{padding:12px 14px;border-radius:10px;background:linear-gradient(90deg,#3a1d6e,#1a1f3a);box-shadow:inset 0 0 0 1px #9d6bff55}
.intro-topo b{display:block;font:800 22px/1.1 'Barlow Condensed',sans-serif;color:#fff}.intro-topo small{color:#c9b8ff;font-size:11px}
.intro-bloco{padding:10px 13px;border-radius:10px;background:#11162a;border-left:4px solid #ffb02e}
.intro-bloco>b{display:block;font:700 17px 'Barlow Condensed',sans-serif;color:#ffd27a;margin-bottom:3px}
.intro-bloco p{margin:0;color:#c7cfe2;font-size:11px;line-height:1.6}.intro-bloco p b{color:#fff}
.intro-teclas{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px 12px;margin:6px 0 8px}
.intro-tecla{display:flex;align-items:center;gap:8px}.intro-tecla small{color:#c7cfe2;font-size:11px}
.intro-tecla kbd{flex:none;min-width:34px;padding:4px 7px;border-radius:6px;background:#232a45;box-shadow:inset 0 -2px 0 #0008,0 0 0 1px #5a6488;color:#fff;font:700 11px 'IBM Plex Mono',monospace;text-align:center}
@media(max-width:700px){.intro-teclas{grid-template-columns:1fr 1fr}.intro-tecla small{font-size:10px}}

.intro-jogo label.intro-nao-mostrar{margin:0;letter-spacing:0;display:flex;align-items:center;gap:9px;padding:10px 4px 2px;color:#c7cfe2;font-size:11px;cursor:pointer;user-select:none}
.intro-jogo .intro-nao-mostrar input{flex:none;width:18px;height:18px;margin:0;accent-color:#9d6bff;cursor:pointer}

/* topo: informações centralizadas; botões redondos só com ícone no canto direito (nome ao passar o mouse) */
.topbar .online{position:absolute;left:50%;transform:translateX(-50%);pointer-events:auto}
.icones-topo{display:flex;gap:10px;pointer-events:auto;margin-left:auto}
.ic-topo{position:relative;width:42px;height:42px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#e6e9ff;background:linear-gradient(180deg,#1d2440,#10152a);box-shadow:inset 0 0 0 1px #3a4670,0 3px 0 #070a14,0 0 12px #5a3cff33;transition:transform .12s,box-shadow .12s}
.ic-topo svg{width:20px;height:20px}
.ic-topo:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1.5px #8a5cff,0 3px 0 #070a14,0 0 16px #8a5cff88}
.ic-topo:active{transform:translateY(2px)}
.ic-topo.mudo{color:#7d86a8}.ic-topo.mudo svg path:last-child{opacity:.15}
.ic-topo.ativo{color:#ffd27a}
.ic-sair{color:#ff8aa0;background:linear-gradient(180deg,#3a1420,#1f0a12);box-shadow:inset 0 0 0 1px #ff3fa077,0 3px 0 #070a14,0 0 12px #ff3fa033}
.ic-sair:hover{box-shadow:inset 0 0 0 1.5px #ff3fa0,0 3px 0 #070a14,0 0 16px #ff3fa077;color:#fff}
.ic-topo:disabled{opacity:.6;cursor:wait}
.ic-topo[data-dica]:hover::after,.ic-topo[data-dica]:focus-visible::after{content:attr(data-dica);position:absolute;top:calc(100% + 8px);right:0;white-space:nowrap;padding:5px 10px;border-radius:8px;background:#0b1020f2;box-shadow:inset 0 0 0 1px #3a4670,0 6px 16px #000a;color:#fff;font:700 11px 'Barlow Condensed',sans-serif;letter-spacing:.6px;z-index:30;pointer-events:none}
/* card de missões com Objetivos e Loja logo abaixo, mesma largura */
.coluna-missao{position:absolute;z-index:2;left:30px;top:98px;width:250px;display:flex;flex-direction:column;gap:10px}
.coluna-missao .objective{position:relative!important;left:auto!important;top:auto!important;width:auto!important}
.acoes-missao{display:grid;grid-template-columns:1fr;gap:8px}
.acoes-missao button{height:36px;border:0;border-radius:10px;cursor:pointer;color:#ffe2a6;font:700 11px 'Barlow Condensed',sans-serif;letter-spacing:.8px;background:linear-gradient(180deg,#2a2140,#171228);box-shadow:inset 0 0 0 1px #ffb02e66,0 3px 0 #070a14,0 0 12px #ffb02e22}
.acoes-missao button#btnLoja{color:#bff5c8;box-shadow:inset 0 0 0 1px #3fd07a77,0 3px 0 #070a14,0 0 12px #3fd07a22;background:linear-gradient(180deg,#14301f,#0b1c12)}
.acoes-missao button:hover{transform:translateY(-1px);filter:brightness(1.15)}
.mapa-aberto .acoes-missao{opacity:0;pointer-events:none;transition:opacity .2s}
@media(max-width:700px){.coluna-missao{left:11px;top:70px;width:205px}.ic-topo{width:34px;height:34px}.ic-topo svg{width:16px;height:16px}.icones-topo{gap:6px}.topbar .online{position:static;transform:none}}

.icones-topo .ic-topo{width:42px!important;min-width:0!important;height:42px!important;padding:0!important;font-size:0!important;border-radius:50%!important}
.icones-topo .ic-topo::before{content:none!important;display:none!important}
@media(max-width:700px){.icones-topo .ic-topo{width:34px!important;height:34px!important}}

/* mapa aberto: some a barra do jogador e as informações do topo para o mapa ocupar a tela */
.mapa-aberto .hud,.mapa-aberto .topbar .online,.mapa-aberto .coluna-missao{opacity:0;pointer-events:none;transition:opacity .2s}
@media(min-width:701px){#startScreen{padding-top:12px;padding-bottom:12px}}
/* fundo animado do login fixo na tela: cobre tudo sem gerar rolagem */
#startScreen #abertura{position:fixed}
/* Objetivos e Loja mais baixos */
.acoes-missao{width:50%}.acoes-missao button{height:36px;font-size:11px;padding:0 6px}

/* inventário estilo Minecraft */
.painel-jogo.largo{width:min(920px,calc(100vw - 28px))}
.inv-mc{display:grid;grid-template-columns:minmax(300px,360px) 1fr;gap:18px;align-items:start}
.inv-esq{display:flex;flex-direction:column;gap:12px}
.inv-corpo{display:grid;grid-template-columns:64px 1fr 64px;gap:10px;align-items:center;padding:12px;border-radius:12px;background:linear-gradient(180deg,#141b30,#0b1020);box-shadow:inset 0 0 0 1px #2c3858}
.inv-col{display:grid;gap:8px}
.inv-slot.equip{width:64px;height:64px;aspect-ratio:auto}
.inv-slot img{width:70%;height:70%;image-rendering:pixelated;object-fit:contain}
.inv-slot.equip.vazio{background:repeating-linear-gradient(135deg,#121829 0 6px,#0f1424 6px 12px);box-shadow:inset 0 0 0 1px #2c3858}
.inv-slot.escolhendo,.inv-slot.sel{box-shadow:inset 0 0 0 2px #ffb02e,0 0 12px #ffb02e66!important}
.encaixe-vazio{font:700 9px 'Barlow Condensed',sans-serif;letter-spacing:.6px;color:#7d86a8;text-transform:uppercase}
.inv-figura{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:240px;justify-content:center;border-radius:10px;background:radial-gradient(ellipse at 50% 85%,#2a3460 0,#121829 60%)}
.inv-boneco{height:190px;width:auto;image-rendering:pixelated;filter:drop-shadow(0 6px 6px #000a)}
.inv-figura b{font:700 13px 'Barlow Condensed',sans-serif;color:#fff;letter-spacing:.6px}
.inv-girar{border:0;border-radius:8px;padding:4px 10px;cursor:pointer;color:#cfd8f0;background:#1d2440;box-shadow:inset 0 0 0 1px #3a4670;font:700 10px 'Barlow Condensed',sans-serif;letter-spacing:.8px}
.inv-escolha{padding:10px;border-radius:12px;background:#0f1424;box-shadow:inset 0 0 0 1px #ffb02e55}
.inv-escolha small{display:block;color:#ffd27a;font-size:10px;margin-bottom:8px;letter-spacing:.6px}
.inv-mini{grid-template-columns:repeat(auto-fill,minmax(52px,1fr))!important;gap:6px}
.inv-dir .inv-dez{grid-template-columns:repeat(5,1fr)}
@media(max-width:760px){.inv-mc{grid-template-columns:1fr}.inv-corpo{grid-template-columns:56px 1fr 56px}.inv-slot.equip{width:56px;height:56px}.inv-boneco{height:150px}}
/* card de objetivos sem o local (já aparece no topo); logo maior e sem o subtítulo do capítulo */
.objective small#location{display:none!important}
.topbar .brand small{display:none!important}
.topbar .logo-topo{height:58px!important;width:auto!important;max-height:none!important}
@media(max-width:700px){.topbar .logo-topo{height:38px!important}}
.inv-figura canvas.inv-boneco{position:static!important;inset:auto!important;width:auto!important;height:190px!important;transform:none!important}
.inv-dir .inv-dez{grid-template-columns:repeat(6,1fr)!important;gap:6px}
@media(max-width:760px){.inv-figura canvas.inv-boneco{height:150px!important}}
/* botões do card de veículo no mesmo padrão (CHAMAR/CONSERTAR e VENDER) */
.botoes-veic{min-width:180px}
.botoes-veic button{width:100%;height:auto;padding:6px 12px;border:0;border-radius:6px;font:700 11px 'Barlow Condensed',sans-serif;letter-spacing:.6px;cursor:pointer}
.botoes-veic .btn-sec{background:linear-gradient(180deg,#e0485e,#a82a3c);color:#fff0f2;box-shadow:0 3px 0 #5a1420}
.botoes-veic .btn-sec:hover{filter:brightness(1.12)}
/* casa principal: destaque na borda, sem apagar o card (o .feita das missões deixa 70% de opacidade) */
.casa-card.feita{opacity:1;box-shadow:inset 0 0 0 1px #36d57a66}
/* logo do jogo na largura do card de missões (altura proporcional), alinhada com ele */
.topbar .brand{align-self:flex-start;margin-top:12px}
.topbar .logo-topo{width:250px!important;height:auto!important;max-width:none!important}
.coluna-missao{top:118px}
@media(max-width:700px){.topbar .brand{margin-top:6px}.topbar .logo-topo{width:205px!important}.coluna-missao{top:92px}}
/* agência de empregos: botões CONTRATAR / DEMITIR em tamanho normal (2026-10-22) */
.agencia-bt{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.agencia-bt button{height:36px;border:0;border-radius:9px;cursor:pointer;font:800 15px 'Barlow Condensed',sans-serif;letter-spacing:.6px;color:#fff;box-shadow:0 3px 0 #0a0e1a}
.agencia-bt .ag-contratar{background:linear-gradient(180deg,#2fe07a,#1a9e4c);color:#04140a}
.agencia-bt .ag-demitir{background:linear-gradient(180deg,#ff5a7a,#c0234a)}
.agencia-bt button:hover:not(:disabled){filter:brightness(1.1)}
.agencia-bt button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #0a0e1a}
.agencia-bt button:disabled{opacity:.35;cursor:default}
/* celular aberto: o botão LOJA sobe para o lado de OBJETIVOS (o celular cobre a parte de baixo) (2026-10-22) */
body.cel-aberto .acoes-missao{width:100%;grid-template-columns:1fr 1fr}
/* joystick de toque (aparece onde o dedo encosta) e sem direcional nas telas de toque (2026-10-22) */
.joy{position:absolute;left:0;top:0;z-index:4;width:92px;height:92px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#ffffff10 0 55%,#ffffff22 56% 60%,transparent 61%);box-shadow:0 0 0 2px #ffffff30}
.joy i{position:absolute;left:28px;top:28px;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#bcd0ff 60%,#8aa0d8);box-shadow:0 0 14px #9fb6ff99;opacity:.85}
.joy.hidden{display:none}
html.toque .mobile-controls .stick{visibility:hidden}
/* ===== celular deitado (tela de toque, altura < 500px) e app nativo — 2026-10-22 ===== */
@media (orientation:landscape) and (max-height:500px){
  html.toque .topbar{height:40px!important;padding:0 8px!important;background:linear-gradient(#060912aa,#06091200)!important}
  html.toque .brand,html.toque .logo-topo{display:none!important}
  html.toque .online{position:absolute!important;left:50%!important;top:6px!important;transform:translateX(-50%)!important;gap:5px!important}
  html.toque .online>*{font-size:10px!important;height:24px!important;line-height:24px!important;padding-top:0!important;padding-bottom:0!important}
  html.toque .icones-topo{position:absolute;right:8px;top:5px;gap:6px!important}
  html.toque .ic-topo{width:30px!important;height:30px!important}
  html.toque .ic-topo svg{width:15px;height:15px}
  html.app-nativo #fullscreen{display:none!important}
  html.toque .coluna-missao{left:8px!important;top:8px!important;width:220px!important;gap:6px!important}
  html.toque .objective{padding:7px 10px 8px!important;border-radius:10px!important;backdrop-filter:none!important}
  html.toque .objective #location{display:none}
  html.toque .objective #objective{font-size:12px!important;line-height:1.2!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  html.toque .objective .progress{margin-top:5px!important;height:4px!important}
  html.toque .tarefas{margin-top:5px!important;padding-top:5px!important;gap:3px!important;font-size:10px!important;max-height:52px;overflow:hidden}
  html.toque .acoes-missao{width:100%!important;grid-template-columns:1fr 1fr!important;gap:6px!important}
  html.toque .acoes-missao button{height:28px!important;font-size:10px!important;border-radius:8px!important}
  html.toque .hud{left:8px!important;right:auto!important;transform:none!important;bottom:5px!important;width:calc(100% - 150px)!important;max-width:760px;min-height:0!important;padding:5px 8px!important;gap:8px!important;flex-wrap:nowrap!important;border-radius:12px!important}
  html.toque .perfil{flex:none!important;min-width:0!important;gap:6px!important}
  html.toque .retrato{width:38px!important;height:38px!important;border-radius:9px!important}
  html.toque #playerName{font-size:12px!important}html.toque #classeNome,html.toque #healthText,html.toque .bars.energy small{display:none!important}
  html.toque .bars{margin-top:2px!important}html.toque .bar{width:84px!important;height:6px!important}
  html.toque .necessidades{gap:5px!important;margin-top:2px!important}
  html.toque .barra-itens{order:0!important;width:auto!important;flex:1;min-width:0;gap:4px!important}
  html.toque .hotbar{grid-template-columns:repeat(10,30px)!important;gap:3px!important;padding:3px!important;flex:none!important}
  html.toque .hotbar .slot,html.toque .barra-itens .slot,html.toque .barra-itens .celular-botao{width:30px!important;height:30px!important;border-radius:7px!important}
  html.toque .slot .tecla,html.toque .slot-mochila .tecla{font-size:7px!important}
  html.toque .carteira{flex:none;gap:0!important}html.toque .carteira small,html.toque .carteira .rep{display:none!important}
  html.toque #reais,html.toque #dolares{font-size:12px!important}
  html.toque .mobile-controls{inset:auto 10px 8px auto!important;width:auto!important}
  html.toque .mobile-controls .stick{display:none!important}
  html.toque .actions{gap:8px!important;align-items:end!important}
  html.toque .actions #mobileAttack{width:64px!important;height:64px!important;font-size:26px!important}
  html.toque .actions #mobileTalk{width:46px!important;height:46px!important;font-size:16px!important;margin-bottom:34px}
  html.toque .interact{bottom:70px!important;font-size:10px!important;padding:6px 12px!important}
  html.toque .toast{top:46px!important}
  html.toque .chat-log{bottom:64px!important;max-height:90px}
}
/* app nativo: sem desfoque e sem animações caras de fundo */
html.app-nativo *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
@media (orientation:landscape) and (max-height:500px){
  html.toque .mobile-controls{display:flex!important;position:absolute!important;inset:auto 10px 8px auto!important;z-index:5}
  html.toque .interact{top:auto!important;height:auto!important;min-height:0!important;left:50%!important;transform:translateX(-50%)!important;bottom:72px!important}
  html.toque .hud{width:calc(100% - 140px)!important}
  html.toque .bar{width:70px!important}
  html.toque .hotbar{grid-template-columns:repeat(10,28px)!important}
  html.toque .hotbar .slot,html.toque .barra-itens .slot,html.toque .barra-itens .celular-botao{width:28px!important;height:28px!important}
  html.toque .slot .qtd,html.toque .slot-mochila .qtd{font-size:8px!important}
  html.toque .barra-itens .celular-botao .cel-ico{font-size:14px!important;line-height:28px!important}
  html.toque .carteira{position:fixed!important;right:10px;top:150px;display:flex!important;flex-direction:column;align-items:flex-end;gap:2px!important;padding:5px 9px;border-radius:10px;background:#0d1322d9;box-shadow:0 0 0 1px #2a3352}
  html.toque #netdot{width:7px!important;height:7px!important}
}
@media (orientation:landscape) and (max-height:500px){
  html.toque .actions{display:flex!important;pointer-events:auto;touch-action:none}
  html.toque .actions button{border:0!important;border-radius:50%!important;color:#fff!important;touch-action:none;box-shadow:0 0 0 2px #ffffff30,0 4px 0 #0008,0 0 16px #0008!important;font-family:'Barlow Condensed',sans-serif!important;font-weight:800!important}
  html.toque .actions #mobileAttack{background:radial-gradient(circle at 40% 35%,#ff6a7f,#c0234a 70%)!important}
  html.toque .actions #mobileTalk{background:radial-gradient(circle at 40% 35%,#ffcf6a,#c98a1a 70%)!important;color:#1a1000!important}
  html.toque .actions button:active{transform:scale(.92)}
}
@media (orientation:landscape) and (max-height:500px){
  /* painéis: cabeçalho e botões compactos, mais espaço para o conteúdo */
  html.toque .painel-jogo{max-height:calc(100dvh - 12px)!important;padding:12px 16px!important;width:min(820px,calc(100vw - 20px))!important}
  html.toque .painel-cabeca{margin-bottom:6px!important;gap:10px!important}
  html.toque .painel-cabeca .eyebrow{display:none}
  html.toque #painelTitulo{font-size:20px!important;margin:0!important;line-height:1.1!important}
  html.toque .painel-retrato{width:40px!important;height:40px!important}
  html.toque .painel-botoes{margin-top:8px!important;gap:8px!important;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))!important}
  html.toque .painel-botoes button{height:38px!important;min-height:0!important;padding:0 10px!important;font-size:12px!important}
  html.toque .painel-corpo .missao{padding:8px 12px!important}
  /* mochila: boneco menor ao lado da grade de itens */
  html.toque .inv-mc{grid-template-columns:250px 1fr!important;gap:12px!important}
  html.toque .inv-corpo{grid-template-columns:48px 1fr 48px!important;padding:8px!important;gap:6px!important}
  html.toque .inv-col{gap:5px!important}
  html.toque .inv-col .inv-slot{width:48px}
  html.toque .inv-figura{min-height:0!important}
  html.toque .inv-boneco{height:120px!important}
  html.toque .inv-grade{grid-template-columns:repeat(auto-fill,minmax(50px,1fr))!important;gap:6px!important}
  html.toque .inv-dez{grid-template-columns:repeat(6,1fr)!important}
  /* celular do jogo: à esquerda, entre o topo e a barra */
  html.toque .celular{top:6px!important;bottom:68px!important;left:8px!important;height:auto!important;min-height:0!important;max-height:none!important;width:290px!important;transform:none!important}
  html.toque body.cel-aberto .coluna-missao{opacity:0;pointer-events:none}
}
html.toque #game{image-rendering:pixelated}
/* app nativo: não desenhar embaixo do recorte da câmera */
html.app-nativo body{background:#000}
html.app-nativo .app{margin-left:env(safe-area-inset-left,0px);width:calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))}
@media (orientation:landscape) and (max-height:500px){
  /* login compacto no celular deitado */
  #startScreen .start-panel{width:min(780px,calc(100vw - 16px))!important;max-height:calc(100dvh - 10px)!important;overflow-y:auto!important;padding:8px 16px 10px!important;gap:5px!important;margin:5px auto!important}
  #startScreen .eyebrow,#startScreen .controls-hint,#startScreen .platform-hint,#startScreen .assinatura-lila{display:none!important}
  #startScreen .logo-login{margin:0 auto!important;height:auto!important}
  #startScreen .logo-login img{max-height:46px!important;width:auto!important}
  #startScreen .conta-abas button{height:30px!important;font-size:11px!important}
  #startScreen label{font-size:9px!important;margin:0!important}
  #startScreen input{height:34px!important;font-size:13px!important}
  #startScreen .link-esqueci{margin:0!important;font-size:11px!important}
  #startScreen .personagens{gap:5px!important}
  #startScreen .personagens>*{height:50px!important;min-height:0!important;padding:2px!important}
  #startScreen .personagens img,#startScreen .personagens canvas{max-height:28px!important}
  #startScreen .vantagem{font-size:10px!important;line-height:1.25!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #startScreen #start{height:40px!important;min-height:0!important}
}
html.app-nativo,html.app-nativo body{background:#05070d!important}
@media (orientation:landscape) and (max-height:500px){
  /* ícones dentro dos slots e barra que cabe na tela do celular (ajuste no S24 FE, 2026-10-22) */
  html.toque .slot img{width:22px!important;height:22px!important;margin:3px auto 0!important}
  html.toque .slot-veiculos .veic-ico{font-size:13px!important;line-height:26px!important}
  html.toque .hud{width:auto!important;right:132px!important;max-width:none!important;gap:6px!important;padding:5px 6px!important}
  html.toque .perfil{gap:5px!important}html.toque .retrato{width:34px!important;height:34px!important}
  html.toque #playerName{max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px!important}
  html.toque .bar{width:56px!important}
  html.toque .necessidades i{max-width:16px}
  html.toque .barra-itens{justify-content:flex-end;overflow:hidden}
  html.toque .hotbar{grid-template-columns:repeat(10,26px)!important;gap:2px!important;padding:2px!important}
  html.toque .hotbar .slot,html.toque .barra-itens .slot,html.toque .barra-itens .celular-botao{width:26px!important;height:26px!important;flex:none!important}
  html.toque .barra-itens .celular-botao .cel-ico{font-size:13px!important;line-height:26px!important}
  /* hora/dia/local não ficam embaixo do card da missão: começam depois dele */
  html.toque .online{left:240px!important;right:120px!important;transform:none!important;justify-content:center;flex-wrap:nowrap;overflow:hidden}
  html.toque .online>*{font-size:9px!important;white-space:nowrap;flex:none}
  html.toque .online{gap:4px!important}html.toque #net{padding-left:20px!important}
}
@media (orientation:landscape) and (max-height:500px){
  /* dinheiro: cartão justo, logo abaixo do minimapa, alinhado à direita */
  html.toque .carteira{top:126px!important;right:10px!important;min-width:0!important;width:auto!important;padding:4px 9px!important;border-radius:9px!important}
  html.toque #reais,html.toque #dolares{font-size:11px!important;line-height:1.25!important}
}
@media (orientation:landscape) and (max-height:500px){
  /* janelas centralizadas na área útil (o recorte da câmera não corta o login nem os painéis) */
  .screen{padding:6px 8px!important}
  #startScreen{justify-content:center!important;align-items:center!important}
  #startScreen .start-panel{width:100%!important;max-width:760px!important;max-height:calc(100% - 4px)!important;margin:0!important;flex:0 1 auto}
  html.toque .painel-jogo{width:100%!important;max-width:820px!important}
}
/* app em pé: respeita o recorte da câmera no topo */
@media (orientation:portrait){html.app-nativo .app{margin-left:0;width:100vw;margin-top:env(safe-area-inset-top,0px);height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}}
@media (orientation:landscape) and (max-height:500px){
  /* login menor (pedido do dono) */
  #startScreen .start-panel{max-width:580px!important;padding:8px 14px 10px!important;gap:3px!important}
  #startScreen .logo-login img{max-height:36px!important}
  #startScreen .conta-abas button{height:26px!important;font-size:10px!important}
  #startScreen input{height:30px!important;font-size:12px!important;padding:0 10px!important}
  #startScreen label{font-size:8px!important}
  #startScreen .personagens>*{height:44px!important}
  #startScreen .personagens img,#startScreen .personagens canvas{max-height:22px!important}
  #startScreen .personagens b,#startScreen .personagens span{font-size:9px!important}
  #startScreen .vantagem{-webkit-line-clamp:1!important;font-size:9px!important}
  #startScreen #start{height:34px!important;font-size:13px!important}
}