/* =====================================================================
   O álbum dos 18 mobiles (a página inicial e /mobiles), por cima do m1l.css. Cor só por token: a ficha do verso é impressa, então
   usa as tintas --impresso-*, que não mudam com a edição nem com a paleta do mobile escolhido.
   ===================================================================== */
.album{background:var(--chao);color:var(--sobre-chao);overflow-x:clip}
.secao-cab .botao[hidden]{display:none}

/* a grade: linhas centradas (a última fica no meio, não encostada à esquerda), com o tazo nunca abaixo de ~220 px, onde a ficha
   cabe dentro do disco a 12 px: 5 por linha a partir de 1360 px, 4 a partir de 1100, 3 a partir de 760, 2 até 601. No celular
   vira uma tira para arrastar. */
.grade{--por-linha:5;--vao-x:clamp(18px,2.4vw,40px);list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:30px var(--vao-x)}
.figura{flex:0 0 calc((100% - (var(--por-linha) - 1) * var(--vao-x)) / var(--por-linha));display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.figura .tazo{--w:100%;max-width:270px}
.tazo.sem-giro .tazo-gira{transition:none}
/* o nome já está no aro do tazo: embaixo, só para o leitor de tela (.sr), e o lugar do "Começar com" */
.fig-leg{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
/* com a ilha, o "Começar com" só aparece com o tazo virado, mas o lugar dele fica reservado: a folga de baixo da seção desconta
   esse lugar (12 + 44 px), para o vazio depois da última linha ser a folga de seção, não o dobro */
.album:has(.grade.viva){padding-bottom:max(0px,calc(var(--secao-y) - 56px))}
.dica-arraste{display:none}

/* "Começar com": sem JavaScript fica sempre à vista; com a ilha (.viva), aparece quando o tazo mostra a ficha. O fundo é o do chão,
   opaco: a linha de tiro, que passa por baixo do conteúdo, não aparece através do botão */
.comecar{display:inline-flex;align-items:center;min-height:44px;font-weight:800;font-stretch:85%;font-size:14px;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;color:var(--sobre-chao);background:var(--chao);border:3px solid currentColor;border-radius:999px;padding:8px 16px;
  transition:background-color .15s,color .15s,border-color .15s}
.comecar:hover{background:var(--tinta);color:var(--realce);border-color:var(--tinta)}
.grade.viva .figura:not(.revelada) .comecar{visibility:hidden;opacity:0;translate:0 -6px;
  transition:opacity .2s,translate .3s var(--chegada),visibility 0s .3s}
.grade.viva .figura.revelada .comecar{transition:opacity .2s .15s,translate .3s var(--chegada) .15s,visibility 0s,background-color .15s,color .15s}

/* ===== a ficha no verso: impressa como nos tazos de verdade =====
   Medidas em cqi (o tazo é o contêiner): a placa cresce com o disco, e nenhum texto dela fica abaixo de 12 px. */
.ficha-placa{position:absolute;left:50%;top:50%;width:76%;translate:-50% -50%;background:var(--branco);color:var(--tinta);border:2px solid var(--tinta);
  border-radius:16px;padding:3.6cqi 4.4cqi 3.4cqi;display:flex;flex-direction:column;gap:1.25cqi;text-align:left;box-shadow:0 2px 0 var(--sombra-leve);
  font-size:clamp(12px,5cqi,15px);line-height:1.05}
.fp-cab{display:flex;align-items:center;gap:.4em;margin-bottom:.1em;font-weight:900;font-style:italic;font-stretch:100%;font-size:1.22em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden}
.fp-cab small{font-size:max(12px,.72em);font-style:normal;font-stretch:85%;background:var(--tinta);color:var(--impresso-chip);border-radius:99px;padding:.15em .5em;flex:none}
.fp-cab span{overflow:hidden;text-overflow:ellipsis}
.fp-l{display:grid;grid-template-columns:5.6em minmax(0,1fr) 2.6em;align-items:center;gap:.4em}
.fp-r{font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:.03em}
.fp-n{font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
.pips{height:.62em;border-radius:2px;background:linear-gradient(90deg,var(--impresso-barra) calc(var(--n) * 20%),var(--impresso-vazio) 0);
  -webkit-mask:repeating-linear-gradient(90deg,var(--breu) 0 calc(20% - 2px),transparent calc(20% - 2px) 20%);
  mask:repeating-linear-gradient(90deg,var(--breu) 0 calc(20% - 2px),transparent calc(20% - 2px) 20%)}
.pips.escudo{background:linear-gradient(90deg,var(--impresso-escudo) calc(var(--n) * 20%),var(--impresso-vazio) 0)}
/* o dano: "Dano" na linha de cima e os três tiros lado a lado, cada um com a largura inteira de um terço (cabe "especial") */
.fp-dano{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:.3em;row-gap:.1em;border-top:1.5px dashed var(--tinta);padding-top:.4em;margin-top:.1em}
.fp-dano>.fp-r{grid-column:1/-1}
.fp-t{display:flex;flex-direction:column;align-items:center;gap:.1em;min-width:0}
.fp-t i{font-style:normal;font-weight:800;font-stretch:72%;color:var(--impresso-apagado);text-transform:uppercase;letter-spacing:.03em}
.fp-t b{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.fp-t .esp{font-weight:700;font-stretch:62%;font-style:italic}

/* ===== /mobiles: a ficha lado a lado ===== */
.album-pagina{padding-top:clamp(40px,5vw,72px)}
.ficha-lado{background:var(--papel);color:var(--sobre-papel);border-top:4px solid var(--tinta)}
.tabela-rola{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-color:var(--contorno) transparent}
.tabela-ficha{min-width:820px;table-layout:auto}
.tabela-ficha th,.tabela-ficha td{white-space:nowrap}
.tabela-ficha tbody th{font-weight:800}
.tabela-ficha thead .num{text-align:right}
.tabela-ficha .esp{font-style:italic;font-stretch:85%;color:var(--apagado)}

@media (max-width:1359.98px){.grade{--por-linha:4}}
@media (max-width:1099.98px){.grade{--por-linha:3}}
@media (max-width:759.98px){.grade{--por-linha:2}}
@media (max-width:860px){
  .tabela-ficha{table-layout:auto}
  .tabela-ficha th,.tabela-ficha td{padding:0 10px}
}
@media (max-width:600px){
  /* o álbum vira uma tira para arrastar, com o tazo grande o bastante para a ficha */
  .grade{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:20px;margin-inline:calc(var(--calha) * -1);
    padding:8px var(--calha) 18px;scrollbar-width:thin;scrollbar-color:var(--tinta) transparent}
  .figura{flex:0 0 250px;scroll-snap-align:center}
  .dica-arraste{display:block;margin:-10px 0 14px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .grade.viva .figura.revelada .comecar,.grade.viva .figura:not(.revelada) .comecar{transition:none}
}