:root{
  --ground:#f9f7f2; --panel:#ffffff; --sunken:#f1eee6;
  --ink:#14130f; --ink-2:#57534a; --ink-3:#8b8579;
  --rule:#ddd9d3; --rule-2:#c4bfb5;
  --accent:#ab6651; --accent-ink:#8f4f3c;
  --chip-fg:#ffffff;
  --sea-a:#7fa8c9; --sea-b:#4d7ba8; --foam:#cfe3ee;
  --grass:#8a9463; --grass-2:#7c8757; --sand:#ddc9a3; --cliff:#8a7454;
  --ceu-a:#8a7c8e; --ceu-b:#e0a674; --nuvem:#c9b3a8;
  --predio-far:#6d6474; --predio-near:#433c4a; --janela:#e8a24e;
  --piso:#b8ab9a; --piso-2:#ab9e8b; --calcada:#cabfac; --bloco-lado:#6f6152;
  --asfalto:#6e6a66; --faixa:#d8cfae; --asfalto-grao:#5f5b57; --junta:#a99d8a;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#181713; --panel:#201e19; --sunken:#13120f;
    --ink:#edece6; --ink-2:#b3ada0; --ink-3:#7e786c;
    --rule:#33302a; --rule-2:#4a463d;
    --accent:#cd8168; --accent-ink:#e0a08a;
    --chip-fg:#1a1713;
    --sea-a:#3f5f7d; --sea-b:#25415c; --foam:#7d9bad;
    --grass:#6b7450; --grass-2:#5e6746; --sand:#a8956f; --cliff:#5f5140;
    --ceu-a:#241f2e; --ceu-b:#5a3330; --nuvem:#4a3d42;
    --predio-far:#2c2636; --predio-near:#15111c; --janela:#e0913a;
    --piso:#463f36; --piso-2:#3a342b; --calcada:#554d41; --bloco-lado:#2a241d;
    --asfalto:#33302c; --faixa:#8a7f5e; --asfalto-grao:#2a2724; --junta:#413a30;
  }
}
:root[data-theme="dark"]{
  --ground:#181713; --panel:#201e19; --sunken:#13120f;
  --ink:#edece6; --ink-2:#b3ada0; --ink-3:#7e786c;
  --rule:#33302a; --rule-2:#4a463d;
  --accent:#cd8168; --accent-ink:#e0a08a;
  --chip-fg:#1a1713;
  --sea-a:#3f5f7d; --sea-b:#25415c; --foam:#7d9bad;
  --grass:#6b7450; --grass-2:#5e6746; --sand:#a8956f; --cliff:#5f5140;
  --ceu-a:#33475f; --ceu-b:#46617f; --nuvem:#6f8aa4;
  --piso:#4a453b; --piso-2:#3d3930; --calcada:#5a5346; --bloco-lado:#332d24;
  --asfalto:#3a3733; --faixa:#93885f; --asfalto-grao:#302d2a; --junta:#4a433a;
}

*{box-sizing:border-box}
html,body{height:100%;height:100dvh}
body{
  margin:0;background:var(--ground);color:var(--ink);overflow:hidden;
  font-family:'Golos Text','Helvetica Neue',Helvetica,sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  touch-action:manipulation}
.top,.tray,.selbar,.infopop{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.infocard p{-webkit-user-select:text;user-select:text}

/* minmax(0,1fr): sem isso o header (que não quebra linha) EMPURRA o grid pra
   além da tela no celular — o canvas fica 2x a largura e tudo cai pra direita */
.app{display:grid;grid-template-columns:minmax(0,1fr) 312px;grid-template-rows:56px 1fr;height:100%;height:100dvh;overflow:hidden}
.top{
  grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:0 18px;
  background:var(--panel);border-bottom:1px solid var(--rule);
  position:relative;z-index:10;   /* o menu de compartilhar abre por cima do top 10 dos jogos (z 4) */
}
.brand{font-weight:700;letter-spacing:-.02em;font-size:17px;white-space:nowrap}
.brand span{color:var(--ink-3);font-weight:400}
.top .spacer{flex:1}
.act{
  padding:7px 13px;border:1px solid var(--rule-2);font-size:13.5px;font-weight:500;
  white-space:nowrap;transition:background .12s,border-color .12s;
}
.act:hover{background:var(--sunken)}
.act:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.act[disabled]{opacity:.36;cursor:default}
.act.solid{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.act.solid:hover{background:var(--accent)}

.stagewrap{position:relative;overflow:hidden;background:var(--sea-b)}
canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
canvas.placing{cursor:crosshair}
canvas:active{cursor:grabbing}

.hint{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  background:var(--panel);border:1px solid var(--rule);padding:8px 15px;
  font-size:13.5px;color:var(--ink-2);white-space:nowrap;pointer-events:none;
  transition:opacity .25s;
}
/* no celular a dica não pode vazar da tela: quebra linha e centraliza */
@media (max-width:860px){
  .hint{white-space:normal;text-align:center;width:max-content;
        max-width:calc(100vw - 28px);font-size:12.5px}
}
.selbar{
  position:absolute;left:50%;top:16px;transform:translateX(-50%);
  display:none;gap:0;background:var(--panel);border:1px solid var(--rule-2);
}
.selbar.on{display:flex;align-items:stretch}
.selbar>button{padding:9px 15px;border-right:1px solid var(--rule);font-size:13.5px}
.selbar>button:last-child{border-right:0}
.selbar>button:hover{background:var(--sunken)}
.selbar .del{color:#a53b3f}
/* mini-teclado de setas (mover a peça na grade iso) */
.movepad{
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  border-right:1px solid var(--rule-2);
}
.movepad button{
  width:30px;height:22px;font-size:13px;line-height:1;color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.movepad button:nth-child(2n){border-right:0}
.movepad button:nth-child(n+3){border-bottom:0}
.movepad button:hover{background:var(--sunken);color:var(--ink)}

.tray{
  background:var(--panel);border-left:1px solid var(--rule);
  display:flex;flex-direction:column;min-height:0;z-index:2;
}
.tabs{display:flex;border-bottom:1px solid var(--rule);flex:0 0 auto}
.tabs button{
  flex:1;padding:11px 4px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3);border-bottom:2px solid transparent;
}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.grid{
  flex:1;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--rule);border-bottom:1px solid var(--rule);min-height:0;
}
.item{
  background:var(--panel);padding:8px 8px 9px;display:flex;flex-direction:column;
  align-items:center;gap:5px;text-align:center;
}
.item:hover{background:var(--sunken)}
.item.on{background:var(--sunken);box-shadow:inset 0 0 0 2px var(--accent)}
.item canvas{max-width:100%;max-height:62px;width:auto;height:auto;
  object-fit:contain;image-rendering:pixelated;pointer-events:none}
.item .nm{font-size:11.5px;line-height:1.25;color:var(--ink-2)}
.item .sz{font-size:10px;color:var(--ink-3);font-variant-numeric:tabular-nums}

.paint{flex:0 0 auto;padding:13px 14px 15px}
.paint h3{
  margin:0 0 9px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;
}
.colors{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.sw{height:34px;border:1px solid var(--rule-2);position:relative}
.sw.on{box-shadow:0 0 0 2px var(--accent);border-color:var(--accent)}
.sw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.paint .cur{margin:9px 0 0;font-size:12px;color:var(--ink-3);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.loading{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:14px;background:var(--ground);z-index:9;
}
.loading p{margin:0;color:var(--ink-3);font-size:14px}
.bar{width:190px;height:3px;background:var(--rule)}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}

body.photo .top,body.photo .tray,body.photo .hint,body.photo .selbar{display:none}
body.photo .app{grid-template-columns:1fr;grid-template-rows:1fr}
.exit-photo{
  position:fixed;right:16px;bottom:16px;display:none;padding:9px 15px;
  background:var(--panel);border:1px solid var(--rule-2);font-size:13.5px;z-index:5;
}
body.photo .exit-photo{display:block}

@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:52px 1fr 244px}
  /* o header vira uma fita que desliza de lado, em vez de alargar a página */
  .top{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
       padding-left:calc(max(10px, env(safe-area-inset-left)) + 76px);
       padding-right:max(10px, env(safe-area-inset-right))}
  /* o chip dos mundos é fixed e mora fora do header no celular — a regra
     vive lá embaixo, junto das outras do menu (depois da base .worldsdrop) */
  #btn-worlds{white-space:nowrap}
  /* o home indicator do iphone não cobre a lojinha */
  .tray{padding-bottom:env(safe-area-inset-bottom)}
  .act{padding:8px 12px}
  .top::-webkit-scrollbar{display:none}
  .top>*{flex:0 0 auto}
  .top .spacer{flex:1 0 6px}
  .colors{grid-template-columns:repeat(11,1fr);gap:4px}
  .sw{height:28px}
  .paint{padding:10px 12px 13px}
  .tray{border-left:0;border-top:1px solid var(--rule)}
  .grid{grid-template-columns:repeat(4,1fr)}
  .item canvas{max-height:46px}
  .brand{display:none}
  .top{gap:6px;padding:0 10px 0 calc(max(10px, env(safe-area-inset-left)) + 76px)}  /* a folga do chip fixed */
  .act{flex:1;padding:6px 4px;font-size:12px;text-align:center}
}
@media (prefers-reduced-motion:reduce){.bar i{transition:none}}
/* menu de compartilhar */
.share{position:relative}
.sharemenu{
  position:absolute;right:0;top:calc(100% + 6px);display:none;flex-direction:column;
  background:var(--panel);border:1px solid var(--rule-2);z-index:6;min-width:172px;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
}
.sharemenu.on{display:flex}
.sharemenu button{
  padding:11px 15px;text-align:left;font-size:13.5px;white-space:nowrap;
  border-bottom:1px solid var(--rule);color:var(--ink);
}
.sharemenu button:last-child{border-bottom:0}
.sharemenu button:hover{background:var(--sunken)}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);
  background:var(--ink);color:var(--ground);padding:10px 18px;font-size:14px;
  border-radius:2px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:20;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
/* ---- vitrine da luminária (3º mundo) ----
   aqui a barra NÃO é o catálogo do jogo: é a página do produto. some tudo que
   pertence ao "montar" (abas, peças, limpar, centralizar) e a ordem de leitura
   vira produto → acabamento → ações, pra ninguém confundir as duas coisas. */
.ficha{display:none}
body.vitrine .tabs,
body.vitrine .grid,
body.vitrine .selbar,
body.vitrine #btn-clear,
body.vitrine #btn-andante,
body.vitrine #btn-fit{display:none}
body.plaza #btn-andante{display:none}
body.vitrine .tray{overflow-y:auto}
body.vitrine .ficha{display:block;padding:0 15px}
body.vitrine .ficha-topo{order:1;padding-top:16px}
body.vitrine .paint{order:2;padding:16px 15px 4px}
body.vitrine .ficha-acoes{order:3;padding-bottom:18px}
body.vitrine .colors{grid-template-columns:repeat(4,1fr)}
.ficha .wide{display:block;width:100%;text-align:center;margin:16px 0 10px}
.ficha h4{margin:0 0 3px;font-size:19px;font-weight:700;letter-spacing:-.02em}
.ficha .med{margin:0 0 10px;font-size:12px;color:var(--ink-3);line-height:1.4}
.ficha .preco{margin:0;font-size:13px;color:var(--ink-3)}
.ficha .preco b{font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.ficha .preco span{display:block;margin-top:2px}
.ficha .obs{margin:12px 0 0;font-size:12px;line-height:1.45;color:var(--ink-3)}
.comprar{
  display:block;text-align:center;padding:11px 14px;text-decoration:none;
  background:var(--accent-ink);color:#fff;font-size:14px;font-weight:500;
  transition:background .12s;
}
.comprar:hover{background:var(--accent)}
.comprar b{font-weight:700}
body.vitrine canvas{cursor:default}
@media (max-width:860px){
  body.vitrine .app{grid-template-rows:52px 1fr 300px}
  body.vitrine .colors{grid-template-columns:repeat(8,1fr)}
  body.vitrine .ficha{padding:0 12px}
  body.vitrine .ficha-topo{padding-top:12px}
  body.vitrine .paint{padding:12px 12px 2px}
  .ficha .preco b{font-size:21px}
  .ficha .obs{display:none}
}
/* seletor de mundos: um menu que abre pra baixo (a fileira estourava) */
.worldsdrop{position:relative;margin-left:14px}
.worlds{
  display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:7;
  flex-direction:column;background:var(--panel);
  border:1px solid var(--rule-2);min-width:172px;
}
.worldsdrop.on .worlds{display:flex}
.worlds button{
  padding:10px 14px;font-size:13.5px;font-weight:500;white-space:nowrap;
  text-align:left;border-bottom:1px solid var(--rule);color:var(--ink-2);
}
.worlds button:last-child{border-bottom:0}
.worlds button:hover{background:var(--sunken)}
.worlds button.on{background:var(--accent-ink);color:#fff}
/* ---- as setinhas do jogo da fiorino (só aparecem no toque, no #j) ----
   as 3 pistas são empilhadas: sobe e desce. ficam na direita, na altura do
   polegar, e o safe-area do iphone entra na conta pra não caírem no home
   indicator. só nascem em tela de toque — no desktop o teclado resolve. */
.spsetas{display:none}
@media (pointer:coarse){
  body.spjogo .spsetas{
    display:flex;flex-direction:column;gap:10px;
    position:absolute;z-index:4;
    right:max(14px, env(safe-area-inset-right));
    bottom:calc(20px + env(safe-area-inset-bottom));
  }
  .spsetas button{
    width:74px;height:64px;font-size:26px;line-height:1;
    color:#f7f5f0;background:rgba(28,24,22,.72);
    border:2px solid rgba(247,245,240,.5);border-radius:4px;
    touch-action:none;-webkit-user-select:none;user-select:none;
  }
  .spsetas button:active{background:rgba(28,24,22,.94);transform:scale(.96)}
}

/* o select nativo do celular: invisível por cima do chip. no desktop nem existe */
.worldsel{display:none}
@media (max-width:860px){
  /* o chip NUNCA some: fixed + o js o move pra fora do header (filho do body).
     sticky dessincronizava a área de toque no ios, e fixed DENTRO de container
     que rola tem o mesmo mal — sem ancestral rolante não há como dessincronizar.
     z7: acima da página, abaixo do infopop (8), loading (9) e toast (20) */
  .worldsdrop{margin-left:0;position:fixed;
    left:max(10px, env(safe-area-inset-left));top:9px;z-index:7}
  /* o header rola de lado (overflow) e cortaria o menu: fixed escapa do corte */
  .worlds{position:fixed;left:10px;top:56px}
  .worlds button{padding:9px 12px;font-size:12.5px}
  /* plano b: o toque cai no select e o IOS abre o picker do sistema — nenhum
     js nosso no caminho, sem clique sintetizado pro safari engolir. 16px
     evita o zoom automático no foco. */
  .worldsel{display:block;position:absolute;inset:0;width:100%;height:100%;
    opacity:0;border:0;padding:0;font-size:16px;
    -webkit-appearance:none;appearance:none}
  .worldsdrop.on .worlds{display:none}   /* o dropdown custom sai de cena no celular */
}
/* páginas inteiras (lucha, heineken e as telas do universo): sem painel */
body.lucha .tray, body.heineken .tray, body.universo .tray, body.sp .tray, body.cwb .tray, body.spjogo .tray, body.fossiljogo .tray{display:none}
body.lucha .app, body.heineken .app, body.universo .app, body.sp .app, body.spjogo .app, body.fossiljogo .app, body.cwb .app{grid-template-columns:minmax(0,1fr)}
@media (max-width:860px){
  body.lucha .app, body.heineken .app, body.universo .app, body.sp .app, body.spjogo .app, body.fossiljogo .app, body.cwb .app{grid-template-rows:52px 1fr}
}
/* na galáxia a barra de mundos some — os planetas SÃO a navegação */
body.universo .worlds{display:none}
/* vitrines (fóssil, lucha) são páginas próprias — sem o "monte a sua" */
body.vitrine .brand span{display:none}
/* plaza (collab iludi): calçada portuguesa + creme da ilustração, flat */
:root{
  --plaza-fundo:#faf5e4; --plaza-a:#e9e1ca; --plaza-b:#d8cdae;
  --plaza-guia:#c2b593; --plaza-lado:#8f8266;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --plaza-fundo:#211e17; --plaza-a:#3b352a; --plaza-b:#302b20;
    --plaza-guia:#4a4430; --plaza-lado:#241f16;
  }
}
:root[data-theme="dark"]{
  --plaza-fundo:#211e17; --plaza-a:#3b352a; --plaza-b:#302b20;
  --plaza-guia:#4a4430; --plaza-lado:#241f16;
}

/* o pop-up do texto oficial da coleção plaza (a plaquinha do "i") */
.infopop{
  position:fixed;inset:0;display:none;place-items:center;
  background:rgba(20,18,15,.55);z-index:8;padding:18px;
}
.infopop.on{display:grid}
.infocard{
  position:relative;background:#f3ead8;color:#2b2620;
  border:3px solid #2b2620;box-shadow:8px 8px 0 rgba(43,38,32,.45);
  max-width:540px;max-height:82vh;overflow-y:auto;
  padding:26px 28px 22px;
}
.infocard h2{
  margin:0 0 2px;font-size:21px;letter-spacing:.04em;
  text-shadow:2px 2px 0 #cbbe9f;
}
.infocard .por{margin:0 0 16px;color:#6b6145;font-size:13.5px}
.infocard p{margin:10px 0;font-size:14.5px;line-height:1.6}
/* o título do quadro no alfabeto da casa (canvas), o resto na fonte normal */
.infocard .titulopix{display:block;image-rendering:pixelated;margin:0 0 6px;max-width:100%}
/* o [i] do jogo: um chip no canto esquerdo, na linha das árvores. saiu do
   rodapé do placar porque era ele que empurrava o painel pra dentro do
   asfalto — e ali, no céu, não atrapalha corrida nenhuma. o `top` quem
   escreve é o js (a linha do horizonte muda com o tamanho da tela). */
.spinfo{display:none}
body.spjogo .spinfo{
  display:block;position:absolute;left:max(14px, env(safe-area-inset-left));
  z-index:4;padding:5px 9px;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
  border:2px solid var(--ink);background:var(--panel);color:var(--ink-2);
  box-shadow:3px 3px 0 rgba(28,24,22,.24);
}
.spinfo:hover{background:var(--accent-ink);color:#fff}
/* seus dados: o cadastro visível, e editável, dentro do quadro */
.meusdados{
  margin:20px 0 0;padding:16px 16px 14px;
  border:2px solid #2b2620;background:#efe5cf;
}
.meusdados h3{margin:0 0 4px;font-size:15px}
.meusdados .mini{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:#6b6145}
/* rótulo em cima, valor embaixo: e-mail longo quebrava torto no celular */
.meusdados dl{margin:0 0 12px;display:block}
.meusdados dt{margin:8px 0 0;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#8a7f63}
.meusdados dd{margin:0;font-size:14.5px;font-weight:700;overflow-wrap:anywhere;line-height:1.35}
.meusdados button{width:100%;margin-top:4px}
#btn-sairdalista{font-size:12px;opacity:.75}
/* o canal de bug dentro do quadro */
.bugform{
  margin:20px 0 0;padding:16px 16px 14px;
  border:2px dashed #a89a78;background:#efe5cf;
}
.bugform h3{margin:0 0 4px;font-size:15px}
.bugform .mini{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:#6b6145}
.bugform textarea,.bugform input{
  width:100%;box-sizing:border-box;margin:0 0 8px;padding:9px 10px;
  font:inherit;font-size:14px;border:2px solid #2b2620;background:#f7f0e0;color:#2b2620;
}
.bugform textarea{resize:vertical;min-height:64px}
.bugform .erro{margin:0 0 8px;font-size:12.5px;color:#a33;min-height:0}
.bugform button{width:100%}
.infocard .links{margin-top:18px;display:flex;gap:10px}
.infocard .links a{
  flex:1;text-align:center;text-decoration:none;font-weight:700;font-size:14px;
  padding:10px 6px;border:2px solid #2b2620;color:#f3ead8;
  box-shadow:3px 3px 0 rgba(43,38,32,.4);
}
.infocard .links a:first-child{background:#657862}
.infocard .links a:last-child{background:#ab6651}
.infocard .fechar{
  position:absolute;top:8px;right:10px;border:0;background:none;
  font-size:22px;line-height:1;cursor:pointer;color:#2b2620;padding:4px;
}

/* o pop-up da lucha: links nas cores do ringue + o botão que ainda não abre */
#info-lucha .links a:first-child{background:#584680}
#info-lucha .links a:last-child{background:#d5488c}
.infocard .breve{
  flex:1;text-align:center;font-weight:700;font-size:14px;padding:10px 6px;
  border:2px dashed #8a8274;color:#8a8274;background:none;cursor:default;
}

/* o botão de voltar pro universo: DOM de verdade (toque confiável),
   presente em todos os mundos menos na própria galáxia */
.voltar{
  /* z-index ABAIXO do header (z3): o conserto de ontem subiu o z do menu
     DENTRO do .top, mas o .top inteiro vale 3 — e o voltar, com 4, seguia
     na frente do dropdown aberto roubando os toques (print do ricardo,
     18/08). acima do canvas basta 2. */
  position:absolute;z-index:2;display:none;
  left:max(12px, env(safe-area-inset-left));top:12px;
  padding:9px 16px;background:var(--panel);color:var(--ink-2);
  border:1px solid var(--rule-2);font-size:13.5px;font-weight:500;
}
.voltar:hover{background:var(--sunken)}
body.photo .voltar{display:none !important}
/* no tênis voador a contagem de tênis mora no canto de cima à esquerda: o voltar desce pro canto
   de baixo à direita, abaixo do chão (fora do caminho da nave) — o [i] fica no de baixo à esquerda */
body.voador .voltar{top:auto;left:auto;right:max(12px, env(safe-area-inset-right));bottom:10px;padding:6px 11px;font-size:12px}

/* ---- latino em sp · beta: ranking e cadastro ---- */
.sprank,.spcad{display:none}
/* ---- o quadro do top 10: placar de fliperama, não lista de compras ----
   moldura chunky com sombra dura (nada de blur: é pixel art), faixa
   quadriculada no topo, pódio colorido e a linha de quem está jogando
   marcada. os nomes seguem na fonte da casa, como o ricardo pediu. */
/* no DESKTOP cabe todo mundo: a lista só ganha teto e rola se um dia passar
   de 10. o botão "ver todos" nem aparece — não há o que colapsar. */
body.spjogo .sprank ol{max-height:min(52vh,420px);overflow-y:auto}
/* correndo = aparado na altura do asfalto (o js mede e passa o teto): sem
   barra de rolagem no meio da corrida, e um fiozinho embaixo dizendo que a
   lista continua */
body.spjogo .sprank.correndo ol{overflow:hidden}
/* na corrida, o que não é placar sai da frente: a nota do "ranking geral" e o
   [i] das regras se leem PARADO — e são justamente eles que empurravam o
   painel pra dentro do asfalto nas telas baixas */
body.spjogo .sprank.correndo .nota,
body.spjogo .sprank.correndo .rankmais{display:none}
/* o placar NUNCA entra no asfalto: quando o céu não cabe a lista toda, o js
   apara e marca 'cortado' — aí o "ver todos" aparece (no desktop também) e
   quem quiser a lista inteira abre no clique. */
/* aparado = o céu é curto: a nota de status sai pra sobrar altura pra quem
   interessa (os nomes). ela volta assim que a lista couber inteira. */
body.spjogo .sprank.cortado .nota{display:none}
/* ⚠️ o botão precisa continuar existindo DEPOIS de abrir, senão não há como
   recolher: aberto, ele vira "menos" — e era justamente aí que ele sumia,
   porque a lista inteira deixa de estar "cortada". */
body.spjogo .sprank.cortado .rankmais,
body.spjogo .sprank.aberto  .rankmais{
  display:inline-block;float:right;font:inherit;font-size:9.5px;font-weight:700;
  letter-spacing:.02em;padding:2px 6px;border:1px solid var(--rule-2);
  background:var(--panel);color:var(--ink-2);
}
body.spjogo .sprank.aberto ol{max-height:min(52vh,420px);overflow-y:auto}
.rankmais{display:none}
body.spjogo .sprank{
  display:block;position:absolute;right:14px;top:14px;z-index:4;
  background:var(--panel);border:2px solid var(--ink);
  box-shadow:4px 4px 0 rgba(28,24,22,.28);
  padding:0 0 8px;min-width:198px;max-width:236px;overflow:hidden;
}
.sprank h4{
  margin:0 0 6px;padding:7px 10px 6px;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#f7f5f0;background:var(--ink);
}
/* a bandeirada quadriculada embaixo do título */
.sprank h4::after{
  content:"";display:block;height:4px;margin:6px -10px -6px;
  background:
    repeating-linear-gradient(90deg,#f7f5f0 0 4px,transparent 4px 8px) 0 0/8px 4px,
    repeating-linear-gradient(90deg,transparent 0 4px,#8d8880 4px 8px) 0 4px/8px 4px;
}
.sprank ol{margin:0;padding:2px 8px 0;list-style:none;
  font-size:12.5px;font-variant-numeric:tabular-nums}
.sprank .linha{
  display:grid;grid-template-columns:19px 1fr auto;align-items:center;gap:6px;
  padding:3px 4px;border-bottom:1px solid var(--rule);
}
.sprank .linha:last-child{border-bottom:0}
.sprank .linha:nth-child(even){background:var(--sunken)}
.sprank .pos{
  display:grid;place-items:center;width:17px;height:17px;font-size:10.5px;
  color:var(--ink-2);background:var(--rule);font-weight:700;
}
.sprank .ouro   .pos{background:#e8b53a;color:#3a2c08}
.sprank .prata  .pos{background:#c8c8c4;color:#33322e}
.sprank .bronze .pos{background:#c98a4e;color:#3a2410}
.sprank .nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sprank .ouro .nome{font-weight:700}
.sprank .km{font-weight:700;letter-spacing:.01em}
.sprank .km i{font-style:normal;font-weight:400;font-size:9.5px;
  color:var(--ink-3);margin-left:2px}
/* quem está jogando se acha na lista. .linha.eu (e não só .eu) porque a
   zebrada é .linha:nth-child(even) e vencia o destaque — o nome ficava
   branco no claro, invisível. */
.sprank .linha.eu{background:var(--accent-ink);color:#fff}
.sprank .linha.eu .km i{color:rgba(255,255,255,.72)}
.sprank .linha.eu .nome{font-weight:700}
.sprank .vazio{padding:8px 4px;font-size:11.5px;color:var(--ink-3);text-align:center}
.sprank .nota{margin:7px 10px 0;font-size:10px;color:var(--ink-3)}
body.spjogo .spcad.on{
  display:flex;flex-direction:column;gap:8px;position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);z-index:5;background:var(--panel);
  border:2px solid var(--ink);padding:18px 18px 14px;width:min(320px,88%);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.spcad h4{margin:0;font-size:16px}
.spcad p{margin:0;font-size:12.5px;color:var(--ink-2)}
.spcad input{
  font:inherit;padding:8px 10px;border:1px solid var(--rule-2);
  background:var(--ground);color:var(--ink);
}
.spcad .erro{color:#a53b3f;font-size:12px;min-height:14px;margin:0}
.spcad .ghost{font-size:12px;color:var(--ink-3);padding:4px}
.spcad .ghost:hover{color:var(--ink)}
@media (max-width:860px){
  /* no CELULAR o placar comia metade da tela: nasce com o pódio e abre no toque */
  body.spjogo .sprank{right:6px;top:6px;min-width:0;width:44vw;max-width:172px;padding:0 0 5px}
  body.spjogo .sprank:not(.aberto) ol > li:nth-child(n+4){display:none}
  body.spjogo .sprank:not(.aberto) ol{max-height:none;overflow:hidden}
  body.spjogo .sprank.aberto ol{max-height:min(42vh,280px);overflow-y:auto}
  .rankmais{
    display:inline-block;float:right;font:inherit;font-size:9.5px;font-weight:700;
    letter-spacing:.02em;padding:2px 6px;border:1px solid var(--rule-2);
    background:var(--panel);color:var(--ink-2);
  }
  .sprank h4{font-size:10.5px;padding:6px 8px 5px}
  .sprank h4::after{margin:5px -8px -5px}
  .sprank ol{font-size:11.5px;padding:2px 6px 0}
  .sprank .linha{grid-template-columns:16px 1fr auto;gap:5px;padding:2px 3px}
  .sprank .pos{width:15px;height:15px;font-size:9.5px}
  .sprank .nota{margin:6px 8px 0}
}

/* ---- 🏆 conquistas ----
   o botão é irmão do top 10 e mora à ESQUERDA dele: o js mede a largura do
   painel e reposiciona, então quando o ranking abre ("ver todos") ou encolhe
   no celular, o troféu acompanha em vez de ficar por baixo. */
.spconq{display:none}
body.spjogo .spconq{
  display:grid;place-items:center;position:absolute;top:14px;right:220px;z-index:5;
  width:44px;height:44px;padding:0;cursor:pointer;line-height:1;font-size:22px;
  border:2px solid var(--ink);background:var(--panel);
  box-shadow:4px 4px 0 rgba(28,24,22,.28);
}
body.spjogo .spconq:hover{background:var(--accent-ink)}
body.spjogo .spconq .novo{
  display:none;position:absolute;right:-6px;top:-6px;width:13px;height:13px;
  border:2px solid var(--ink);background:#d8342c;
}
body.spjogo .spconq.temnova .novo{display:block;animation:conqpisca 1.5s steps(1,end) infinite}
@keyframes conqpisca{0%,60%{opacity:1}61%,100%{opacity:.25}}
@media (prefers-reduced-motion:reduce){body.spjogo .spconq.temnova .novo{animation:none}}

/* o quadro: mesmo esquema do [i] regras — cartão por cima, fundo escurecido */
.conq{display:none}
.conq.on{
  display:flex;align-items:center;justify-content:center;position:fixed;inset:0;
  z-index:60;background:rgba(20,18,16,.66);padding:16px;overflow:auto;
}
.conq-cartao{
  position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;
  background:var(--panel);border:3px solid var(--ink);
  box-shadow:8px 8px 0 rgba(28,24,22,.42);padding:20px 22px 18px;
}
.conq-fecha{
  position:absolute;right:10px;top:8px;width:30px;height:30px;padding:0;
  font-size:21px;line-height:1;border:0;background:none;color:var(--ink);cursor:pointer;
}
.conq-topo{display:flex;align-items:center;gap:12px}
.conq-logo{height:24px;image-rendering:pixelated}
.conq-cartao h4{
  margin:0;font-size:20px;letter-spacing:.05em;color:var(--ink);
  text-transform:lowercase;
}
.conq-sub{margin:5px 0 0;font-size:12px;color:var(--ink-3,#8a8175)}
.conq-vazio{margin:18px 0 6px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}

.conq-barra{
  display:flex;align-items:center;gap:12px;margin:15px 0 6px;padding:9px 12px;
  border:2px solid var(--ink);background:var(--sunken);
}
.conq-barra b{font-size:21px;line-height:1;color:var(--ink)}
.conq-barra span{display:block;font-size:11px;color:var(--ink-3,#8a8175)}
.conq-trilho{flex:1;height:12px;border:1px solid var(--ink);background:var(--panel);position:relative}
.conq-trilho i{position:absolute;inset:0 auto 0 0;background:#d69620}
.conq-pct{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}

.conq-cartao h5{
  margin:16px 0 8px;padding-bottom:4px;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3,#8a8175);border-bottom:2px solid var(--rule);
}
.conq-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
@media (max-width:520px){.conq-grade{grid-template-columns:repeat(3,minmax(0,1fr))}}
.conq-m{
  position:relative;display:block;width:100%;padding:9px 5px 8px;text-align:center;
  border:2px solid var(--ink);background:var(--sunken);
  font-family:inherit;color:var(--ink);
}
.conq-m .ic{display:block;font-size:27px;line-height:1}
.conq-m .nm{display:block;margin-top:5px;font-size:11px;font-weight:700;line-height:1.15}
.conq-m .dc{display:block;margin-top:2px;font-size:9.5px;line-height:1.15;color:var(--ink-3,#8a8175)}
.conq-m.on{background:var(--panel);box-shadow:3px 3px 0 rgba(28,24,22,.22)}
.conq-m.on .nm{color:var(--accent-ink)}

.conq-m.lock{opacity:.5;box-shadow:none}
.conq-m.lock .ic{filter:grayscale(1)}
.conq-m .selo{
  position:absolute;left:-3px;top:-8px;padding:1px 5px;font-size:8.5px;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#d8342c;
  border:1px solid var(--ink);
}
.conq-share{
  display:block;width:100%;margin:18px 0 0;padding:12px 8px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.02em;
  color:#f7f5f0;background:var(--accent-ink);border:2px solid var(--ink);
  box-shadow:3px 3px 0 rgba(28,24,22,.34);
}
.conq-share:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(28,24,22,.34)}
/* a medalha não é mais botão: é só medalha */
.conq-m.on{cursor:default}

/* fóssil jogo: arrasto com um dedo, sem os painéis do outro jogo. */
body.fossiljogo .stagewrap{background:#241f22}
body.fossiljogo #stage{touch-action:none;height:calc(100% - 52px);margin-top:52px;outline:none}
body.fossiljogo.photo #stage{height:100%;margin-top:0}
body.fossiljogo.photo .app{grid-template-rows:1fr}
body.fossiljogo #sprank, body.fossiljogo #spcad, body.fossiljogo #spsetas,
body.fossiljogo #btn-spconq, body.fossiljogo #btn-spinfo, body.fossiljogo #conq{display:none !important}
body.spjogo #fjrank, body.spjogo #fjcad, body.spjogo #btn-fjinfo{display:none !important}

/* os quadros da fóssil ficam nas faixas livres do palco. */
body.fossiljogo #fjrank{
  display:block;position:absolute;right:14px;top:14px;z-index:4;
  background:var(--panel);border:2px solid var(--ink);
  box-shadow:4px 4px 0 rgba(28,24,22,.28);
  padding:0 0 8px;width:260px;max-width:calc(100% - 28px);overflow:hidden;
}
body.fossiljogo #fjrank ol{max-height:min(52vh,420px);overflow-y:auto}
#fjrank h4,#fjmeusdados dt{text-transform:none}
/* a faixa do título é SEMPRE escura: com `background:var(--ink)` ela clareia no
   tema escuro e o "top 10" (creme fixo) some em cima dela */
#fjrank h4{background:#14130f;color:#f7f5f0}
#fjrank .km{white-space:nowrap}
#fjrank .km small{font-size:9.5px;font-weight:400}
body.fossiljogo #fjcad.on{
  display:flex;flex-direction:column;gap:8px;position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);z-index:5;background:var(--panel);
  border:2px solid var(--ink);padding:18px 18px 14px;width:min(320px,88%);
  max-height:calc(100% - 24px);overflow-y:auto;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
body.fossiljogo #btn-fjinfo{
  display:block;position:absolute;left:max(14px, env(safe-area-inset-left));bottom:14px;
  z-index:4;padding:5px 9px;font-size:11.5px;font-weight:600;letter-spacing:.02em;
  border:2px solid var(--ink);background:var(--panel);color:var(--ink-2);
  box-shadow:3px 3px 0 rgba(28,24,22,.24);
}
body.fossiljogo #btn-fjinfo:hover{background:var(--accent-ink);color:#fff}
#btn-fjsairdalista{font-size:12px;opacity:.75}
body.fossiljogo.fj-sem-lateral #btn-fjinfo{left:auto;right:14px;top:12px;bottom:auto}
body.fossiljogo.fj-sem-lateral #fjrank{top:60px}
body.fossiljogo.fj-sem-lateral.fj-jogando #fjrank,
body.fossiljogo.fj-sem-lateral.fj-jogando #btn-fjinfo{visibility:hidden;pointer-events:none}
@media (max-width:860px){
  body.fossiljogo #fjrank{right:6px;top:60px;width:54vw;max-width:220px;padding:0 0 5px}
  body.fossiljogo #fjrank:not(.aberto) ol > li:nth-child(n+4){display:none}
  body.fossiljogo #fjrank:not(.aberto) ol{max-height:none;overflow:hidden}
  body.fossiljogo #fjrank.aberto ol{max-height:min(42vh,280px);overflow-y:auto}
  body.fossiljogo #btn-fjinfo{left:auto;right:12px;top:12px;bottom:auto}
  body.fossiljogo.fj-jogando #fjrank,
  body.fossiljogo.fj-jogando #btn-fjinfo{visibility:hidden;pointer-events:none}
}
body.photo #fjrank,body.photo #fjcad,body.photo #btn-fjinfo,
body.photo #info-fossiljogo{display:none !important}

/* fóssil (beta): a vitrine repetida ganha a porta do jogo — um chip no canto
   do palco (celular e desktop) e um botão na ficha (só desktop: no celular a
   ficha tem 300px contados). fora dessa aba nenhum dos dois existe. */
.jogarfossil, #btn-jogarfossil2{display:none}
body.fossilbeta .jogarfossil{
  display:block;position:absolute;z-index:2;top:12px;
  right:max(12px, env(safe-area-inset-right));
  padding:9px 16px;background:var(--accent-ink);color:#fff;
  border:1px solid var(--accent-ink);font-size:13.5px;font-weight:500;
}
body.fossilbeta .jogarfossil:hover{background:var(--accent)}
body.fossilbeta .jogarfossil:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.jogarfossil i{font-style:normal;font-weight:400;opacity:.78;margin-left:3px}
body.photo .jogarfossil{display:none !important}
body.fossilbeta #btn-jogarfossil2{display:block;margin-top:0}
@media (max-width:860px){
  .jogarfossil .largo{display:none}
  body.fossilbeta #btn-jogarfossil2{display:none}
}

/* ---- tênis voador: ranking, cadastro e regras (30/09) ----
   o voo ocupa a tela inteira: o top 10 e o [i] aparecem no menu, na pausa e no fim,
   e saem da frente enquanto se voa (body.tv-jogando). */
body.spjogo #tvrank, body.spjogo #tvcad, body.spjogo #btn-tvinfo{display:none !important}
body.voador #tvrank{
  display:block;position:absolute;right:14px;top:8px;z-index:4;
  background:var(--panel);border:2px solid var(--ink);
  box-shadow:4px 4px 0 rgba(28,24,22,.28);
  padding:0 0 8px;width:230px;max-width:calc(100% - 28px);overflow:hidden;
}
body.voador #tvrank ol{max-height:min(52vh,420px);overflow-y:auto}
#tvrank h4,#tvmeusdados dt{text-transform:none}
#tvrank h4{background:#14130f;color:#f7f5f0}
#tvrank .km{white-space:nowrap}
/* o prêmio (05/10): mora no fim do top 10, então aparece onde ele aparece e some no voo junto */
#tvpremio{display:block;margin:8px 8px 0;padding:7px 9px;background:#14130f;color:#f7f5f0;line-height:1.3}
#tvpremio b{display:block;color:#f2c230;font-size:10px;letter-spacing:.08em;text-transform:none}
#tvpremio span{display:block;font-size:12px;font-weight:700}
#tvpremio small{display:block;font-size:10px;color:#cfc6ad;margin-top:2px}
body.voador #tvrank:not(.aberto) #tvpremio{display:block;margin:6px}
#tvrank .km i{font-style:normal;font-size:10px;font-weight:400}
body.voador #tvcad.on{
  display:flex;flex-direction:column;gap:8px;position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);z-index:5;background:var(--panel);
  border:2px solid var(--ink);padding:18px 18px 14px;width:min(320px,88%);
  max-height:calc(100% - 24px);overflow-y:auto;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
body.voador #btn-tvinfo{
  display:block;position:absolute;left:max(14px, env(safe-area-inset-left));bottom:14px;
  z-index:4;padding:5px 9px;font-size:11.5px;font-weight:600;letter-spacing:.02em;
  border:2px solid var(--ink);background:var(--panel);color:var(--ink-2);
  box-shadow:3px 3px 0 rgba(28,24,22,.24);
}
body.voador #btn-tvinfo:hover{background:var(--accent-ink);color:#fff}
#btn-tvsairdalista{font-size:12px;opacity:.75}
body.voador.tv-jogando #tvrank, body.voador.tv-jogando #btn-tvinfo{visibility:hidden;pointer-events:none}
/* o top 10 fica FECHADO (só o título) pra não tampar a vitrine dos tênis (sergio 01/10:
   "ficar em cima assim não funciona"); "ver" abre a lista por cima, "fechar" recolhe */
body.voador #tvrank:not(.aberto){padding:0;width:auto}
body.voador #tvrank:not(.aberto) ol, body.voador #tvrank:not(.aberto) .nota{display:none}
body.voador #tvrank:not(.aberto) h4{margin:0}
body.voador #tvrank:not(.aberto) h4::after{display:none}
body.voador #tvrank .rankmais{display:inline-block;margin-left:10px;font:inherit;font-size:10px;font-weight:700;
  letter-spacing:.04em;padding:2px 8px;border:1px solid rgba(247,245,240,.55);background:transparent;color:#f7f5f0;cursor:pointer}
body.voador #tvrank .rankmais:hover{background:#f7f5f0;color:#14130f}
@media (max-width:860px){
  body.voador #tvrank{right:6px;top:60px;width:50vw;max-width:210px;padding:0 0 5px}
  body.voador #tvrank:not(.aberto) ol > li:nth-child(n+4){display:none}
  body.voador #tvrank:not(.aberto) ol{max-height:none;overflow:hidden}
  body.voador #tvrank.aberto ol{max-height:min(42vh,280px);overflow-y:auto}
  body.voador #tvrank:not(.aberto) .rankmais, body.voador #tvrank.aberto .rankmais{
    display:inline-block;float:right;font:inherit;font-size:9.5px;font-weight:700;
    padding:2px 6px;border:1px solid var(--rule-2);background:var(--panel);color:var(--ink-2)}
  body.voador #btn-tvinfo{left:auto;right:12px;top:12px;bottom:auto}
}
body.photo #tvrank,body.photo #tvcad,body.photo #btn-tvinfo,
body.photo #info-voador{display:none !important}

/* ---- tênis voador no computador (sergio 01/10): o jogo à esquerda e uma coluna à direita com o
   ranking ABERTO, [i] regras e bugs, ← universo e ← página do lançamento. nada fica em cima do jogo. ---- */
#btn-tvlancamento{display:none}
@media (min-width:861px){
  body.voador .stagewrap{background:#111d32}
  body.voador #stage{width:calc(100% - 128px)}   /* o jogo grande; o ranking pode encostar na beirada */
  body.voador #tvrank,
  body.voador #tvrank:not(.aberto){top:10px;right:10px;width:214px;padding:0 0 6px}
  body.voador #tvrank ol, body.voador #tvrank .nota{display:block !important}
  body.voador #tvrank:not(.aberto) h4{margin:0 0 6px}
  body.voador #tvrank:not(.aberto) h4::after{display:block}
  body.voador #tvrank ol{max-height:calc(100vh - 56px - 300px);overflow-y:auto}
  body.voador #tvrank .rankmais{display:none !important}
  body.voador #btn-tvinfo, body.voador .voltar, body.voador #btn-tvlancamento{
    display:block;position:absolute;left:auto;top:auto;right:10px;width:auto;box-sizing:border-box;z-index:4;
    padding:3px 7px;font-size:10.5px;font-weight:600;text-align:right;text-decoration:none;white-space:nowrap;
    border:1px solid var(--rule-2);background:var(--panel);color:var(--ink-2);box-shadow:none}
  body.voador #btn-tvinfo{bottom:62px}
  body.voador .voltar{bottom:36px}
  body.voador #btn-tvlancamento{bottom:10px}
  body.voador #btn-tvinfo:hover, body.voador .voltar:hover, body.voador #btn-tvlancamento:hover{background:var(--accent-ink);color:#fff}
  /* no voo, foco só no jogo (sergio 01/10): tela inteira e tudo some; volta na pausa e no fim */
  body.voador.tv-jogando #stage{width:100%}
  body.voador.tv-jogando .voltar, body.voador.tv-jogando #btn-tvlancamento{visibility:hidden;pointer-events:none}
}
@media (max-width:860px){
  body.voador #btn-tvlancamento{display:block;position:absolute;left:10px;bottom:10px;z-index:4;padding:6px 11px;font-size:12px;
    border:1px solid var(--rule-2);background:var(--panel);color:var(--ink-2);text-decoration:none}
  body.voador.tv-jogando #btn-tvlancamento{visibility:hidden;pointer-events:none}
}
body.photo #btn-tvlancamento{display:none !important}
body.voador.tv-jogando .voltar{visibility:hidden;pointer-events:none}
.worlds button[hidden]{display:none}   /* ocultos do menu (01/10): voltam um a um */

/* ---- tênis voador no CELULAR (assets/voadorcel.js, 01/10): só com body.tv-cel, que o computador
   nunca recebe (tela de toque e lado menor ≤ 540 px). ---- */
#tvpainel{display:none;position:fixed;z-index:2;pointer-events:none;image-rendering:pixelated}
body.photo #tvpainel{display:none !important}
/* no voo a barra do site e o chip dos mundos saem: a tela é do jogo (deitado e em pé) */
body.tv-cel.voador.tv-jogando .top, body.tv-cel.voador.tv-jogando .worldsdrop{display:none !important}
body.tv-cel.voador.tv-jogando .app{grid-template-rows:1fr !important}
body.tv-cel.voador #stage{width:100% !important}
/* em pé, fora do voo, o top 10 e as regras moram no painel de baixo (não em cima da vitrine) */
body.tv-pe.voador:not(.tv-jogando) #tvrank{position:fixed;top:calc(var(--tvpainel-top, 60px) + 16px);left:16px;right:auto;
  width:calc(100% - 32px - 128px);max-width:none}
body.tv-cel.voador .voltar, body.tv-cel.voador #btn-tvlancamento{z-index:4}
body.tv-pe.voador:not(.tv-jogando) #btn-tvinfo{position:fixed;top:calc(var(--tvpainel-top, 60px) + 16px);right:16px;left:auto;bottom:auto}
/* o botão de pausa do voo no celular: só aparece voando (a barra do site some no voo) */
#tvpausa{display:none}
body.tv-cel.voador.tv-jogando #tvpausa{display:block;position:fixed;z-index:6;
  top:max(8px, env(safe-area-inset-top));right:max(8px, env(safe-area-inset-right));
  width:44px;height:44px;padding:0;border:2px solid #f2c230;border-radius:4px;background:rgba(17,29,50,.78);
  color:#f2e7c9;font-size:15px;letter-spacing:-2px;touch-action:none;user-select:none;-webkit-user-select:none}
body.photo #tvpausa{display:none !important}
body.tv-pe.voador.tv-jogando #tvpausa{top:auto;bottom:max(18px, env(safe-area-inset-bottom));right:18px}
/* deitado o jogo vai até a beirada (05/10) e a direita é por onde os perigos chegam: a pausa vai pro
   canto de cima à esquerda, na cozinha que já passou */
body.tv-deitado.tv-larga.voador.tv-jogando #tvpausa{right:auto;left:max(8px, env(safe-area-inset-left))}
/* celular deitado grande (iphone pro max: 932 px, passa da régua de 860): o top 10 fica fechado
   como em qualquer celular, senão ele e o prêmio cobrem a vitrine dos tênis */
body.tv-deitado.voador #tvrank:not(.aberto){top:60px;right:max(6px, env(safe-area-inset-right));width:150px;max-width:150px;padding:0}
body.tv-deitado.voador #tvrank:not(.aberto) #tvpremio span{font-size:11px}
/* celular deitado pequeno (iphone se/8): não sobra lugar ao lado da vitrine; o prêmio aparece ao abrir o top 10 */
@media (max-width:799px){body.tv-deitado.voador #tvrank:not(.aberto) #tvpremio{display:none}}
body.tv-deitado.voador #tvrank:not(.aberto) ol, body.tv-deitado.voador #tvrank:not(.aberto) .nota{display:none !important}
body.tv-deitado.voador #tvrank:not(.aberto) h4::after{display:none}
body.tv-deitado.voador #tvrank .rankmais{display:inline-block !important;float:right;font:inherit;font-size:9.5px;font-weight:700;
  padding:2px 6px;border:1px solid var(--rule-2);background:var(--panel);color:var(--ink-2)}
body.tv-deitado.voador #tvrank.aberto{top:60px;right:max(6px, env(safe-area-inset-right));width:50vw;max-width:230px}
body.tv-deitado.voador #tvrank.aberto ol{max-height:min(42vh,280px);overflow-y:auto}
body.tv-deitado.voador #btn-tvinfo{left:auto;right:12px;top:12px;bottom:auto}
#tvpausa::before,#tvpausa::after{content:"";position:absolute;top:12px;width:6px;height:16px;background:#f2e7c9}
#tvpausa::before{left:13px}
#tvpausa::after{right:13px}