/* Opções do jogo: preto como a tela inicial, cards 2x2 com ícones SVG. */
dialog.graphics-options{
  width:min(560px,calc(100vw - 24px));padding:24px;border:1px solid #ffffff12;border-radius:20px;
  background:linear-gradient(160deg,#0f1010fa,#070707fc);box-shadow:0 30px 90px #000c,inset 0 1px #ffffff0a;
  color:#f5f3ea;font-family:inherit
}
dialog.graphics-options[open]{display:grid;grid-template-columns:1fr 1fr;gap:10px;animation:go-in .18s ease-out}
dialog.graphics-options>*{grid-column:1/-1}
dialog.graphics-options::backdrop{background:#000000b3;backdrop-filter:blur(6px)}
@keyframes go-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

.graphics-options h2{display:flex;align-items:center;gap:12px;margin:0 44px 0 0;font-size:20px;font-weight:700;letter-spacing:-.01em}
.graphics-options h2:before{content:"";flex:none;width:38px;height:38px;border-radius:11px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ecd680' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E") center/20px no-repeat,#ecd68014;box-shadow:inset 0 0 0 1px #ecd68033}
.graphics-options>p{margin:0;font-size:13px;line-height:1.5;color:#8f918d}

.graphics-close{top:20px;right:20px;width:36px;height:36px;display:grid;place-items:center;padding:0;font-size:0;
  border:1px solid #ffffff12;border-radius:11px;background:#ffffff08;color:#c9cac6;cursor:pointer;transition:background .15s,color .15s}
.graphics-close:before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat}
.graphics-close:hover{background:#ffffff14;color:#fff}

.graphics-options fieldset{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 0}
.graphics-options legend{margin-bottom:10px;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#6f716d}
.graphics-options label{position:relative;display:grid!important;grid-template-columns:40px 1fr;gap:12px;align-items:start;margin:0;padding:14px 38px 14px 14px;
  border:1px solid #ffffff10;border-radius:14px;background:#ffffff05;transition:background .15s,border-color .15s,box-shadow .15s}
.graphics-options label:before{content:"";grid-row:1;grid-column:1;width:40px;height:40px;border-radius:11px;background:#ffffff0a;box-shadow:inset 0 0 0 1px #ffffff10}
.graphics-options label:after{content:"";position:absolute;left:24px;top:24px;width:20px;height:20px;background:#b9bbb6;transition:background .15s}
.graphics-options label:has(input[value="auto"]):after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8z'/%3E%3Cpath d='M19 15l.7 1.8 1.8.7-1.8.7L19 20l-.7-1.8-1.8-.7 1.8-.7z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8z'/%3E%3Cpath d='M19 15l.7 1.8 1.8.7-1.8.7L19 20l-.7-1.8-1.8-.7 1.8-.7z'/%3E%3C/svg%3E") center/contain no-repeat}
.graphics-options label:has(input[value="low"]):after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='17' height='10' rx='2.5'/%3E%3Cpath d='M22 11v2M6 11v2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='17' height='10' rx='2.5'/%3E%3Cpath d='M22 11v2M6 11v2'/%3E%3C/svg%3E") center/contain no-repeat}
.graphics-options label:has(input[value="balanced"]):after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1'/%3E%3Ccircle cx='15' cy='6' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1'/%3E%3Ccircle cx='15' cy='6' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E") center/contain no-repeat}
.graphics-options label:has(input[value="high"]):after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E") center/contain no-repeat}
.graphics-options label>span{grid-column:2}
.graphics-options label:hover{background:#ffffff0a;border-color:#ffffff22}
.graphics-options label:has(input:checked){border-color:#ecd680a6;background:linear-gradient(160deg,#ecd68014,#ecd68005);box-shadow:inset 0 0 0 1px #ecd68033}
.graphics-options label:has(input:checked):before{background:#ecd6801f;box-shadow:inset 0 0 0 1px #ecd68047}
.graphics-options label:has(input:checked):after{background:#ecd680}
.graphics-options input{appearance:none;-webkit-appearance:none;position:absolute;top:14px;right:14px;width:16px;height:16px;margin:0;
  border:2px solid #ffffff33;border-radius:50%;background:transparent;transition:border-color .15s,background .15s}
.graphics-options input:checked{border-color:#ecd680;background:radial-gradient(#ecd680 0 4px,transparent 4.5px)}
.graphics-options label strong{font-size:15px;font-weight:700;margin-bottom:3px;color:#f5f3ea}
.graphics-options label span span{font-size:12px;line-height:1.45;color:#878985}

.graphics-options .graphics-status{display:flex;align-items:center;gap:10px;min-height:0;margin:4px 0 0;padding:11px 13px;border:1px solid #ffffff0d;border-radius:12px;background:#ffffff05;font-size:12px;color:#a2a49f}
.graphics-options .graphics-status:before{content:"";flex:none;width:16px;height:16px;background:#ecd680;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat}
.graphics-options .graphics-status:empty{display:none}
.graphics-options .graphics-status+p{margin-top:6px;font-size:12px;color:#6f716d}

.graphics-options .primary{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;margin:4px 0 0;border:0;border-radius:12px;clip-path:none;
  font-size:14px;font-weight:700;background:#ecd680;color:#121413;cursor:pointer;transition:filter .15s,transform .1s,background .15s}
.graphics-options .primary:before{content:"";width:17px;height:17px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.graphics-options .primary:hover{filter:brightness(1.07)}
.graphics-options .primary:active{transform:scale(.98)}
/* "Ir para área livre": botão secundário preto, ao lado do Concluir. */
.graphics-options>p+.primary{grid-column:1;background:#ffffff08;color:#e9e7de;box-shadow:inset 0 0 0 1px #ffffff17}
.graphics-options>p+.primary:before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11.5a7 7 0 0 1 14 0C19 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11.5a7 7 0 0 1 14 0C19 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center/contain no-repeat}
.graphics-options>p+.primary:hover{background:#ffffff12;filter:none}
.graphics-options>p+.primary~.primary{grid-column:2}
.graphics-options :focus-visible{outline:2px solid #ecd680;outline-offset:2px}

@media (max-width:480px){
  dialog.graphics-options{padding:20px 16px 16px}
  .graphics-options fieldset{grid-template-columns:1fr}
}

/* Tela inicial: sem slogan/rodapé. Links legais continuam no card de entrada. */
.welcome-footer{display:none!important}

/* Barra do topo moderna (desktop). Sem backdrop-filter/transform no .top-actions:
   o botão de telões fica dentro dele e precisa de position:fixed relativo à tela. */
.topbar .edition{display:none!important}
/* Lobby: barra fixa no topo (relative empurrava o #welcome 2x com o padding). */
body:not(.playing) .topbar{
  position:fixed!important;top:0;left:0;right:0;z-index:5;height:64px!important;
  padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))!important;
  justify-content:flex-end!important
}
body.playing .topbar{position:relative!important;justify-content:flex-end!important}
.topbar .brand{
  position:absolute!important;left:50%!important;top:50%!important;
  transform:translate(-50%,-50%)!important;z-index:1;margin:0!important;
  pointer-events:auto;max-width:min(720px,78vw)
}
.topbar .brand-logo{
  display:block;margin:0 auto;height:52px!important;max-width:100%!important;width:auto!important;
  object-fit:contain!important
}
@media (max-width:760px){
  .topbar .brand{max-width:min(92vw,560px)}
  .topbar .brand-logo{height:40px!important}
}

@media (min-width:761px){
  .topbar{border-bottom:0!important;background:linear-gradient(#0a0b0dee,#0a0b0d00)!important}
  .top-actions{gap:4px!important;padding:5px;border:1px solid #ffffff14;border-radius:999px;background:#15161acc;box-shadow:0 8px 24px #0006,inset 0 1px #ffffff0a}
  .top-actions .live{margin:0;padding:0 10px 0 12px;font-size:12px}
  .top-actions .icon-btn{width:36px;height:36px;border:0;background:transparent;color:#d7d9de;transition:background .15s,color .15s}
  .top-actions .icon-btn:hover{background:#ffffff14;color:#fff}
  .top-actions .apoio-top{height:36px;padding:0 14px;border:0;border-radius:999px;background:#efd8831a;font-size:12px}
  .top-actions .apoio-top:hover{background:#efd8832e}
  .top-actions .account-top{height:36px;border:0;border-radius:999px;background:#ffffff0f;font-size:12px}
  .top-actions .account-top:hover{background:#ffffff1c}

  /* "Anunciar no jogo" sai da barra e vira botão flutuante no canto inferior esquerdo. */
  body:not(.playing) .top-actions .telao-top{
    position:fixed;left:24px;bottom:24px;z-index:6;width:auto;height:auto;min-height:0;
    display:flex;align-items:center;gap:8px;padding:12px 18px;font-size:13px;
    border:1px solid #c6e7a540;border-radius:14px;background:#121316e0;color:#e6f6ce;
    backdrop-filter:blur(14px);box-shadow:0 10px 30px #0008;animation:none;pointer-events:auto;
    transition:background .15s,transform .15s
  }
  body:not(.playing) .top-actions .telao-top:hover{background:#1b1d1fe8;transform:translateY(-2px)}
  body:not(.playing) .top-actions .telao-top:before{font-size:15px}
}

/* Rodapé do jogo: botão "Opções" limpo e dica de teclas só com a barra aberta
   (antes a dica descia e ficava atrás do botão). */
.dock-toggle{padding:9px 16px 9px 12px!important;gap:9px!important;border:1px solid #ffffff14!important;
  background:linear-gradient(160deg,#141515f2,#0a0a0af5)!important;box-shadow:0 10px 30px #000a,inset 0 1px #ffffff0d!important;
  font-size:13px!important;letter-spacing:.01em!important}
.dock-toggle:after{display:none!important}
.dock-toggle svg{width:16px!important;height:16px!important;color:#ecd680}
.dock-toggle:hover{border-color:#ecd68059!important;background:linear-gradient(160deg,#1a1b1bf2,#0e0e0ef5)!important}

body:not(.dock-open) #movement-tip{opacity:0;transform:translateY(10px)!important;pointer-events:none}
#movement-tip{gap:5px;margin-bottom:8px;padding:6px 12px;border:1px solid #ffffff10;border-radius:999px;background:#0a0a0ad9;
  font-size:11px!important;color:#b9bbb6;text-shadow:none;transition:opacity .2s,transform .25s!important}
#movement-tip>span{margin:0 4px;color:#ffffff33}
#movement-tip kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border:1px solid #ffffff1f;border-bottom-width:2px;
  border-radius:6px;background:#ffffff0d;color:#f5f3ea;font:700 10px/1 DM Sans,Arial,sans-serif;box-shadow:none}

/* Opções do jogo: atalhos Telões e Loja. */
.graphics-options .go-extra{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.graphics-options .go-extra h3{grid-column:1/-1;margin:0 0 2px;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#6f716d}
.graphics-options .go-link{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 12px;text-align:left;cursor:pointer;
  border:1px solid #ffffff10;border-radius:14px;background:#ffffff05;color:#f5f3ea;font:inherit;transition:background .15s,border-color .15s,transform .1s}
.graphics-options .go-link:hover{background:#ffffff0a;border-color:#ecd68059}
.graphics-options .go-link:active{transform:scale(.98)}
.graphics-options .go-link i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:#ecd68014;box-shadow:inset 0 0 0 1px #ecd68033;color:#ecd680}
.graphics-options .go-link i svg{width:20px;height:20px}
.graphics-options .go-link>span{flex:1;min-width:0}
.graphics-options .go-link strong{display:block;font-size:15px;font-weight:700;margin-bottom:2px}
.graphics-options .go-link>span>span{display:block;font-size:12px;line-height:1.4;color:#878985}
.graphics-options .go-link em{flex:none;display:grid;color:#6f716d;transition:color .15s,transform .15s}
.graphics-options .go-link em svg{width:16px;height:16px}
.graphics-options .go-link:hover em{color:#ecd680;transform:translateX(2px)}
@media (max-width:480px){.graphics-options .go-extra{grid-template-columns:1fr}}

/* ---------- Loja de itens (botão no dock + modal) ---------- */
.dock .dock-shop svg{color:#ecd680}
dialog.bsb-shop{z-index:100050;width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:22px;border:1px solid #ffffff12;border-radius:20px;
  background:linear-gradient(160deg,#0f1010fa,#070707fc);box-shadow:0 30px 90px #000c,inset 0 1px #ffffff0a;color:#f5f3ea;font-family:inherit}
dialog.bsb-shop[open]{animation:go-in .18s ease-out}
dialog.bsb-shop::backdrop{background:#000000b3;backdrop-filter:blur(6px)}
.bsb-shop header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.bsb-shop header>i,.bsb-item>i,.bsb-pix-head>i,.bsb-done>i{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#ecd68014;box-shadow:inset 0 0 0 1px #ecd68033;color:#ecd680}
.bsb-shop i svg{width:22px;height:22px}
.bsb-shop h2{margin:0;font-size:20px;letter-spacing:-.01em}
.bsb-shop header p{margin:2px 0 0;font-size:13px;color:#8f918d}
.bsb-shop-close{margin-left:auto;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid #ffffff12;border-radius:11px;background:#ffffff08;color:#c9cac6;cursor:pointer}
.bsb-shop-close:hover{background:#ffffff14;color:#fff}
.bsb-shop-close svg{width:16px;height:16px}
.bsb-shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bsb-item{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid #ffffff10;border-radius:16px;background:#ffffff05;transition:border-color .15s,background .15s}
.bsb-item:hover{border-color:#ecd68055;background:#ffffff08}
.bsb-item>i{width:52px;height:52px;border-radius:14px;margin-bottom:4px}
.bsb-item>i svg{width:28px;height:28px}
.bsb-item strong{font-size:16px}
.bsb-item p{flex:1;margin:0;font-size:12px;line-height:1.45;color:#878985}
.bsb-buy{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;min-height:42px;padding:0 14px;border:0;border-radius:12px;
  background:#ecd680;color:#121413;font:inherit;font-weight:800;font-size:15px;cursor:pointer;transition:filter .15s,transform .1s}
.bsb-buy small{font-size:12px;font-weight:700;opacity:.75}
.bsb-buy:hover{filter:brightness(1.07)}
.bsb-buy:active{transform:scale(.98)}
.bsb-buy:disabled{cursor:default;background:#ffffff0d;color:#c9cac6;justify-content:center;filter:none}
.bsb-item.owned{border-color:#6ad18f55}
.bsb-item.owned .bsb-buy{color:#8be0a8}
.bsb-buy svg{width:16px;height:16px}
.bsb-shop-loading{margin:30px 0;text-align:center;color:#8f918d}
.bsb-shop-note{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:#ecd68012;color:#ecd680;font-size:13px}
.bsb-shop-login{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;border:1px solid #ffffff10;border-radius:14px;background:#ffffff05;font-size:13px;color:#a2a49f}
.bsb-shop-login span{flex:1}
.bsb-shop-primary,.bsb-shop-ghost{min-height:42px;padding:0 18px;border:0;border-radius:12px;font:inherit;font-weight:700;cursor:pointer}
.bsb-shop-primary{background:#ecd680;color:#121413}
.bsb-shop-ghost{width:100%;background:#ffffff08;color:#e9e7de;box-shadow:inset 0 0 0 1px #ffffff17}
.bsb-pix{display:flex;flex-direction:column;gap:10px}
.bsb-pix-head{display:flex;align-items:center;gap:12px}
.bsb-pix-head strong{display:block;font-size:16px}
.bsb-pix-head span{font-size:13px;color:#8f918d}
.bsb-qr{align-self:center;padding:12px;border-radius:14px;background:#fff;line-height:0}
.bsb-qr img,.bsb-qr canvas{display:block}
.bsb-pix label{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#6f716d}
.bsb-copy{display:flex;gap:8px}
.bsb-copy input{flex:1;min-width:0;padding:0 12px;height:42px;border:1px solid #ffffff17;border-radius:12px;background:#ffffff08;color:#e9e7de;font:12px monospace}
.bsb-copy button{display:flex;align-items:center;gap:6px;padding:0 14px;border:0;border-radius:12px;background:#ecd680;color:#121413;font:inherit;font-weight:700;cursor:pointer}
.bsb-copy svg{width:16px;height:16px}
.bsb-wait{display:flex;align-items:center;gap:10px;margin:2px 0;font-size:13px;color:#a2a49f}
.bsb-wait b{width:14px;height:14px;border:2px solid #ecd68044;border-top-color:#ecd680;border-radius:50%;animation:bsb-spin .8s linear infinite}
@keyframes bsb-spin{to{transform:rotate(360deg)}}
.bsb-done{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 0;text-align:center}
.bsb-done>i{width:58px;height:58px;border-radius:50%;background:#6ad18f1f;box-shadow:inset 0 0 0 1px #6ad18f55;color:#8be0a8}
.bsb-done strong{font-size:18px}
.bsb-done p{margin:0 0 8px;font-size:13px;color:#8f918d}
@media (max-width:480px){.bsb-shop-grid{grid-template-columns:1fr}}

/* Loja: figuras do PvP, seleção e rodapé */
.bsb-shop i.emoji{font-style:normal;font-size:30px;line-height:1}
.pvp-ico{display:block;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 3px 6px #0008)}
.pvp-ico-wrap{display:grid;place-items:center;width:60px;height:60px;font-style:normal;background:radial-gradient(circle at 50% 40%,#ffffff14,#ffffff05);box-shadow:inset 0 0 0 1px #ffffff14;border-radius:14px}
.bsb-item>i.pvp-ico-wrap{width:60px;height:60px}
.bsb-pix-head .pvp-ico-wrap{width:52px;height:52px;border-radius:12px}
.bsb-item>i.emoji{width:60px;height:60px;font-size:36px;background:radial-gradient(circle at 50% 40%,#ffffff14,#ffffff05);box-shadow:inset 0 0 0 1px #ffffff14}
.bsb-shop-grid{grid-template-columns:repeat(3,1fr)}
.bsb-item{cursor:default}
.bsb-item.owned{border-color:#ffffff1c;cursor:pointer}
.bsb-item.selected{border-color:#ff3b4a;background:linear-gradient(160deg,#ff3b4a26,#ff3b4a08);box-shadow:inset 0 0 0 1px #ff3b4a66,0 8px 24px #ff3b4a1f}
.bsb-buy.use{background:#ffffff10;color:#f5f3ea;box-shadow:inset 0 0 0 1px #ffffff1f}
.bsb-buy.use small{opacity:.8}
.bsb-buy.use:hover{background:#ffffff1c;filter:none}
.bsb-buy.on{justify-content:center;background:linear-gradient(135deg,#ff3b4a,#d81f3a);color:#fff}
.bsb-shop-foot{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;border:1px solid #ffffff10;border-radius:14px;background:#ffffff05;font-size:13px;color:#a2a49f}
.bsb-shop-foot span{flex:1}
.bsb-shop-foot b{color:#f5f3ea}
.bsb-shop-foot .bsb-shop-ghost{width:auto}
.bsb-shop-foot .bsb-shop-primary{background:linear-gradient(135deg,#ff3b4a,#d81f3a);color:#fff}
.bsb-shop header kbd{padding:1px 6px;border:1px solid #ffffff26;border-bottom-width:2px;border-radius:5px;font:700 11px inherit;color:#f5f3ea}
@media (max-width:640px){.bsb-shop-grid{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.bsb-shop-grid{grid-template-columns:1fr}}

/* O PvP agora entra pela Loja e pela roda (Tab) */
.pvp-open{display:none!important}

.bsb-toast{position:fixed;left:50%;top:22%;z-index:60;transform:translateX(-50%);padding:10px 16px;border-radius:12px;background:#0b0b0be6;border:1px solid #ffffff1a;color:#f5f3ea;font:600 14px DM Sans,Arial,sans-serif;pointer-events:none;animation:go-in .15s ease-out}

/* Roda de objetos estilo GTA (segure Tab) */
.bsb-wheel{position:fixed;left:50%;top:50%;z-index:55;width:420px;height:420px;margin:-210px 0 0 -210px;opacity:0;transform:scale(.92);pointer-events:none;transition:opacity .12s,transform .12s;font-family:DM Sans,Arial,sans-serif}
.bsb-wheel.open{opacity:1;transform:none;pointer-events:auto}
.bsb-wheel-ring{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#0b0c0ef2 0 88px,#ffffff1f 89px 91px,#0d0e0fd9 92px 209px,#ffffff30 210px);box-shadow:0 20px 60px #0009;backdrop-filter:blur(6px)}
.bsb-wheel-center{position:absolute;left:50%;top:50%;width:160px;transform:translate(-50%,-50%);text-align:center;color:#fff;text-shadow:0 1px 3px #000;z-index:1;pointer-events:none}
.bsb-wheel-center b{display:block;font-size:17px}
.bsb-wheel-center small{display:block;margin-top:2px;font-size:11px;color:#d0d0d0}
.bsb-slot{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;width:96px;height:96px;margin:-48px 0 0 -48px;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer;transition:background .1s,transform .1s}
.bsb-slot .ico{display:grid;place-items:center;width:58px;height:58px;filter:drop-shadow(0 2px 4px #000a)}
.bsb-slot small{font-size:11px;font-weight:700;text-shadow:0 1px 3px #000}
.bsb-slot.current{box-shadow:inset 0 0 0 2px #ffffff40}
.bsb-slot.hover{background:#ffffff26;box-shadow:inset 0 0 0 3px #6fe08a;transform:scale(1.08)}
body.bsb-wheel-open{cursor:default}
/* fundo escurecido atrás da roda (o personagem e o nome não aparecem por trás do texto) */
body.bsb-wheel-open::after{content:"";position:fixed;inset:0;z-index:54;background:radial-gradient(circle at 50% 50%,#000a 0 230px,#0005 420px,#0000 70%);pointer-events:none}
body.bsb-wheel-open .bsb-slot.hover small{color:#b8f5c8}

/* Loja: escolha entre saldo e Pix */
.bsb-pay{display:flex;flex-direction:column;gap:10px}
.bsb-balance{margin:4px 0 2px;padding:10px 12px;border-radius:12px;background:#6ad18f12;box-shadow:inset 0 0 0 1px #6ad18f33;font-size:13px;color:#a8e6bd}
.bsb-balance b{color:#d6f5e1}
.bsb-pay-opt{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;text-align:left;border:1px solid #ffffff14;border-radius:14px;background:#ffffff06;color:#f5f3ea;font:inherit;cursor:pointer;transition:background .15s,border-color .15s}
.bsb-pay-opt:hover{background:#ffffff0d;border-color:#ffffff2a}
.bsb-pay-opt span{flex:1}
.bsb-pay-opt strong{display:block;font-size:15px}
.bsb-pay-opt small{display:block;margin-top:2px;font-size:12px;color:#8f918d}
.bsb-pay-opt svg{width:18px;height:18px;color:#8f918d}
.bsb-pay-opt.main{background:#ecd680;border-color:#ecd680;color:#121413}
.bsb-pay-opt.main small,.bsb-pay-opt.main svg{color:#3b3520}
.bsb-pay-opt.main:hover{filter:brightness(1.06);background:#ecd680}

/* Loja: abas PvP / Carros */
.bsb-shop-tabs{display:flex;gap:.5rem;margin:0 0 1rem;padding:0 .25rem}
.bsb-shop-tab{flex:1;padding:.55rem .75rem;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);color:inherit;font-weight:600;cursor:pointer}
.bsb-shop-tab.on{background:linear-gradient(135deg,#1a5c38,#0e3d25);border-color:rgba(243,207,58,.35)}

/* Lobby: centralizado na tela (não colado no topo) */
body:not(.playing) #welcome {
  align-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  height: 100svh !important;
  min-height: 0 !important;
  max-height: 100svh !important;
  padding: 76px 5% 20px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
body:not(.playing) #welcome .avatar-stage {
  align-self: center !important;
  max-height: min(92svh, 920px) !important;
  min-height: 420px !important;
  width: 100%;
}
body:not(.playing) #welcome .entry-card {
  align-self: center !important;
  max-height: min(92svh, 920px) !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #81847f55 transparent;
  padding-bottom: 8px !important;
}
body:not(.playing) #welcome .entry-footer,
body:not(.playing) #welcome .entry-legal {
  display: none !important;
}

/* Coluna esquerda: preview + roupa/visual embaixo */
body:not(.playing) #welcome .avatar-stage {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
body:not(.playing) #welcome .stage-preview {
  flex: 0 0 auto !important;
  min-height: 240px !important;
  display: flex;
  flex-direction: column;
}
body:not(.playing) #welcome #character-preview {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: clamp(200px, 30svh, 340px) !important;
  min-height: 200px !important;
  max-height: clamp(200px, 30svh, 340px) !important;
}
body:not(.playing) #welcome .preview-tools {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  flex: none;
  margin: 0 10px 4px !important;
  padding: 5px 6px !important;
  border-radius: 10px;
  background: #0a0b0bcc;
  border: 1px solid #ffffff12;
  backdrop-filter: blur(10px);
}
body:not(.playing) #welcome .preview-tools button {
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 6px 8px !important;
  font-size: 11px !important;
}
body:not(.playing) #welcome .preview-hint {
  display: none !important;
}
body:not(.playing) #welcome .look-editor--stage {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  max-height: min(38svh, 360px) !important;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 !important;
  padding: 10px 12px 12px !important;
  border-top: 1px solid #ffffff14;
  background: linear-gradient(180deg, #0d0e0ef8, #101111fa);
  scrollbar-width: thin;
  scrollbar-color: #81847f55 transparent;
  /* block, não flex: fieldset dentro de flex some no Chrome */
  display: block !important;
}
body:not(.playing) #welcome .look-editor--stage > h3 {
  margin: 0 0 10px !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ecd680;
}
body:not(.playing) #welcome .look-editor--stage .look-row {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-inline-size: 0 !important;
  margin: 0 0 8px !important;
  padding: 8px 10px 10px !important;
  border-radius: 10px;
  background: #ffffff05;
  border: 1px solid #ffffff0a;
  box-sizing: border-box;
}
body:not(.playing) #welcome .look-editor--stage .look-row:last-child {
  margin-bottom: 0 !important;
}
body:not(.playing) #welcome .look-editor--stage .look-row legend {
  margin: 0 0 8px !important;
  font-size: 8px !important;
  letter-spacing: 0.16em !important;
  color: #a8aaa6 !important;
  float: none !important;
  display: block !important;
  width: auto !important;
}
body:not(.playing) #welcome .look-editor--stage .look-options {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 44px !important;
  clear: both;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #81847f44 transparent;
}
body:not(.playing) #welcome .look-editor--stage .look-option {
  flex: 0 0 auto !important;
}
body:not(.playing) #welcome .look-editor--stage .look-row[data-row="skin"] .look-swatch,
body:not(.playing) #welcome .look-editor--stage .look-row[data-row="color"] .look-swatch {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
}
body:not(.playing) #welcome .look-editor--stage .look-row[data-row="shirt"] .look-swatch {
  width: 40px !important;
  height: 32px !important;
}
body:not(.playing) #welcome .look-editor--stage .look-caption {
  display: block !important;
  font-size: 9px !important;
  max-width: 56px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  line-height: 1.15;
  color: #8a8c88;
}
body:not(.playing) #welcome .look-editor--stage .look-row[data-row="flag"] .look-options.chips {
  gap: 6px !important;
}
body:not(.playing) #welcome .look-editor--stage .look-row[data-row="flag"] .look-option {
  flex-direction: row !important;
  align-items: center !important;
}

body:not(.playing) #welcome .look-editor--stage .look-option,
body:not(.playing) #welcome .look-editor--stage .look-chip,
body:not(.playing) #welcome .look-editor--stage .look-swatch {
  visibility: visible !important;
  opacity: 1 !important;
}
body:not(.playing) #welcome .look-editor--stage .look-row[data-row="flag"] .look-caption {
  max-width: none;
  white-space: nowrap;
  font-size: 10px !important;
}

/* Painel direito: mais compacto, botão sempre visível */
body:not(.playing) #welcome .entry-card {
  padding: 16px 16px 0 !important;
}
body:not(.playing) #welcome .entry-card .card-heading {
  margin-bottom: 10px !important;
}
body:not(.playing) #welcome .entry-card h2 {
  font-size: 1.15rem !important;
  margin-bottom: 4px !important;
}
body:not(.playing) #welcome .entry-card .muted {
  font-size: 12px !important;
  margin-bottom: 10px !important;
}
body:not(.playing) #welcome .characters {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
}
body:not(.playing) #welcome .character-image {
  height: 72px !important;
}
body:not(.playing) #welcome .character-name {
  font-size: 10px !important;
  line-height: 1.2 !important;
}
body:not(.playing) #welcome .character-price {
  font-size: 9px !important;
}
body:not(.playing) #welcome .sides {
  margin-bottom: 12px !important;
}
body:not(.playing) #welcome .nick-wrap {
  margin-bottom: 8px !important;
}
body:not(.playing) #welcome .entry-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 10px -16px 0 !important;
  padding: 12px 16px 10px !important;
  background: linear-gradient(180deg, #12131300 0%, #161817 28%, #161817 100%) !important;
  border-top: 1px solid #ffffff12 !important;
}
body:not(.playing) #welcome .entry-actions .primary {
  min-height: 46px !important;
}
body:not(.playing) #welcome .spectate-entry {
  margin-top: 6px !important;
  font-size: 12px !important;
}
body:not(.playing) #welcome .load-status {
  font-size: 11px !important;
  margin-top: 6px !important;
}

@media (max-width: 760px) and (not ((pointer: coarse) and (orientation: landscape))) {
  body:not(.playing) #welcome {
    padding: 60px 12px 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100svh !important;
    max-height: none !important;
  }
  body:not(.playing) #welcome .entry-card {
    max-height: none !important;
  }
  body:not(.playing) #welcome .avatar-stage {
    max-height: none !important;
  }
  body:not(.playing) #welcome #character-preview {
    height: min(22svh, 200px) !important;
    max-height: min(22svh, 200px) !important;
  }
  body:not(.playing) #welcome .characters {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body:not(.playing) #welcome .character-image {
    height: 88px !important;
  }
}