/* fiada.css — a mesa de jogo. Fundo de canteiro de obra, painéis de tabuleta
   de madeira, e o tabuleiro sempre ocupando a maior área possível da tela. */

html,body{height:100%}
body{
  display:flex;flex-direction:column;
  min-height:100dvh;
  background:
    radial-gradient(1200px 600px at 50% -10%, #0f5a2c 0%, transparent 60%),
    linear-gradient(180deg,#0b3b1f 0%,#04231a 100%);
  color:#fff;
  overflow:hidden;
}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------- topo ------------------------------- */
.topo{
  display:flex;align-items:center;gap:.9rem;
  padding:.55rem clamp(.6rem,2vw,1.2rem);
  background:rgba(0,0,0,.22);
  flex:0 0 auto;
}
.marca{display:flex;flex-direction:column;line-height:1;text-decoration:none}
.marca__vime{font-family:var(--display);font-size:1.05rem;color:var(--amarelo);letter-spacing:.02em}
.marca__arcade{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.titulo{
  font-size:clamp(1.2rem,3.4vw,1.9rem);color:#fff;margin-left:auto;margin-right:auto;
  letter-spacing:.01em;
}
.topo__acoes{display:flex;gap:.4rem}
.icone{
  width:38px;height:38px;border:0;border-radius:var(--raio);cursor:pointer;
  background:rgba(255,255,255,.10);color:#fff;font-size:.95rem;
  display:grid;place-items:center;transition:background var(--transicao);
}
.icone:hover{background:rgba(255,255,255,.2)}
.icone[aria-pressed="false"]{opacity:.45}

/* ------------------------------- mesa ------------------------------- */
.mesa{
  flex:1 1 auto;min-height:0;
  display:flex;align-items:stretch;justify-content:center;
  gap:clamp(.5rem,1.4vw,1rem);
  padding:clamp(.5rem,1.4vw,1rem);
}

.arena{
  position:relative;
  flex:1 1 auto;min-width:0;min-height:0;
  display:grid;place-items:center;
}
/* embrulho do tamanho exato do canvas, pra as telas cobrirem só ele */
.tabua{position:relative;display:block;container-type:inline-size}

#tabuleiro{
  display:block;
  border-radius:6px;
  box-shadow:0 0 0 3px rgba(252,252,0,.5), 0 18px 40px rgba(0,0,0,.5);
  touch-action:none;
}

/* ------------------------------ painéis ----------------------------- */
.painel{
  flex:0 0 clamp(150px,15vw,196px);
  display:flex;flex-direction:column;gap:.55rem;
  min-height:0;
}
.caixa{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--raio);
  padding:.55rem .6rem .65rem;
}
.caixa__titulo{
  font-family:var(--corpo);font-weight:700;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
  display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem;
}
.mini{display:block;width:100%}
.mini--cacamba{height:62px}
.mini--proximas{height:230px}

.caixa--mascote{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(252,252,0,.07));
}
.mascote{display:block;width:100%;height:100%;min-height:120px;flex:1 1 auto}
.dica{font-size:.68rem;line-height:1.35;color:rgba(255,255,255,.55);margin:.45rem 0 0}
.dica--centro{text-align:center}

/* Marreta */
.barra{
  height:12px;border-radius:99px;overflow:hidden;
  background:rgba(0,0,0,.35);box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
}
.barra__cheia{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--verde-vivo),var(--amarelo));
  transition:width .28s ease;
}
.btn--marreta{
  width:100%;margin-top:.5rem;padding:.5rem .6rem;font-size:.82rem;
  background:rgba(255,255,255,.12);
}
.btn--marreta:disabled{opacity:.4;cursor:not-allowed;background:rgba(255,255,255,.08)}
.btn--marreta.pronto{
  background:var(--verde-vivo);color:var(--verde-tinta);
  animation:pulsa 1.1s ease-in-out infinite;
}
@keyframes pulsa{50%{box-shadow:0 0 0 6px rgba(3,200,0,.22)}}

/* placares */
.placares{display:flex;flex-direction:column;gap:.35rem}
.placar-item{display:flex;flex-direction:column;line-height:1.15}
.placar-item__rot{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.placar-item strong{font-family:var(--display);font-size:1rem;font-weight:400;color:#fff}
.placar-item--grande strong{font-size:1.6rem;color:var(--amarelo)}
.placar-item--fase strong{color:var(--verde-vivo)}

/* O que falta na obra é FRASE, não número: pode quebrar em duas linhas e ganha
   a cor de destaque, porque é a única linha do painel que diz o que fazer. */
.placar-item--obra{gap:.15rem}
.placar-item--obra strong{font-size:.86rem;line-height:1.2;color:var(--amarelo)}
.barra--obra{height:5px;margin-top:.3rem}

kbd{
  font-family:var(--corpo);font-size:.62rem;font-weight:700;
  background:rgba(255,255,255,.16);border-radius:3px;padding:.08em .38em;
  border-bottom:2px solid rgba(0,0,0,.3);
}

/* ------------------------------ telas ------------------------------- */
.tela{
  position:absolute;inset:0;
  display:grid;place-items:center;
  background:rgba(4,35,26,.86);backdrop-filter:blur(3px);
  border-radius:6px;
  padding:1rem;
  z-index:5;
  /* o boletim do fim é mais alto que a tela de início; em tabuleiro baixo ele
     precisa rolar, e 'safe' evita o topo cortado que o centro do grid causa */
  overflow-y:auto;
  align-content:safe center;
}
.tela__caixa{width:100%;max-width:340px;text-align:center}
.tela h2{font-size:clamp(1.6rem,5vw,2.4rem);color:var(--amarelo);margin-bottom:.5rem}
.tela__linha{font-size:.95rem;line-height:1.45;color:rgba(255,255,255,.82);margin:0 0 1rem}
.tela__dica{font-size:.75rem;color:rgba(255,255,255,.5);margin:.9rem 0 1.1rem;line-height:1.4}
.teclas{
  list-style:none;padding:0;margin:0 0 .4rem;
  display:grid;grid-template-columns:1fr 1fr;gap:.3rem .7rem;
  font-size:.76rem;color:rgba(255,255,255,.72);text-align:left;
}
.teclas li{display:flex;align-items:center;gap:.3rem}
.btn--grande{font-size:1.05rem;padding:.8rem 1.6rem;margin-top:.4rem}
.selo{
  display:inline-block;background:var(--amarelo);color:var(--verde-tinta);
  font-weight:700;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.25rem .7rem;border-radius:99px;margin:0 0 .8rem;
}
.resumo{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1rem;margin:0 0 .6rem;text-align:left}
.resumo dt{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.resumo dd{margin:0;font-family:var(--display);font-size:1.15rem;color:#fff}

/* O boletim: o placar diz o quanto ele jogou, isto diz o que ele levantou. */
.boletim__sub{
  display:block;text-align:left;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin:.2rem 0 .35rem;
}
.material{
  list-style:none;padding:0;margin:0 0 .9rem;
  display:grid;grid-template-columns:1fr 1fr;gap:.16rem .8rem;
  font-size:.78rem;line-height:1.3;color:rgba(255,255,255,.8);text-align:left;
}
.material b{font-family:var(--display);font-weight:400;color:var(--amarelo);margin-right:.25em}
.material .vazio{grid-column:1/-1;color:rgba(255,255,255,.45)}

/* o tabuleiro fica estreito em tela pequena — o conteúdo da tela encolhe junto */
@container (max-width:340px){
  .tela h2{font-size:1.5rem}
  .tela__linha{font-size:.8rem;margin-bottom:.7rem}
  .tela__dica{font-size:.68rem;margin:.6rem 0 .8rem}
  .teclas{grid-template-columns:1fr;font-size:.7rem;gap:.22rem}
  .btn--grande{font-size:.9rem;padding:.65rem 1rem}
  .resumo{grid-template-columns:1fr;gap:.4rem}
  .resumo dd{font-size:1rem}
  .material{font-size:.7rem;gap:.1rem .5rem}
}

/* ------------------------- controles de toque ------------------------ */
.toque{display:none}
.toque__btn{
  flex:1 1 0;height:100%;
  border:0;border-radius:var(--raio);
  background:rgba(255,255,255,.13);color:#fff;
  font-size:1.5rem;line-height:1;
  display:grid;place-items:center;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.toque__btn:active{background:rgba(252,252,0,.35)}
.toque__btn--girar{background:rgba(3,200,0,.28)}
.toque__btn--solta{background:rgba(252,252,0,.22)}

/* =========================== TELAS ESTREITAS ========================= */
@media (max-width:899px){
  .titulo{font-size:1.15rem}
  .mesa{flex-direction:column;gap:.45rem;padding:.45rem}

  /* os dois painéis viram uma tira fina em cima do tabuleiro */
  .painel{
    flex:0 0 auto;flex-direction:row;align-items:stretch;
    gap:.4rem;width:100%;
  }
  .painel--esq{order:1}
  .painel--dir{order:2}
  .arena{order:3;flex:1 1 auto}

  .caixa{padding:.3rem .4rem;display:flex;flex-direction:column;justify-content:center}
  .caixa__titulo{font-size:.52rem;letter-spacing:.12em;margin-bottom:.15rem}
  .caixa__titulo kbd{display:none}

  .painel--esq > .caixa:first-child{flex:0 0 62px}
  .mini--cacamba{height:34px}
  /* a tira do celular tem 62px de altura: cabe o desenho ou a dica, não os dois.
     Some pelo mesmo motivo que a da marreta some logo abaixo. */
  .painel--esq > .caixa:first-child .dica{display:none}
  .caixa--marreta{flex:1 1 auto}
  .caixa--marreta .btn--marreta{margin-top:.25rem;padding:.3rem;font-size:.68rem}
  .caixa--marreta .dica{display:none}

  .placares{
    flex:0 0 auto;flex-direction:row;gap:.7rem;align-items:center;
  }
  .placares .placar-item--grande strong{font-size:1.15rem}
  .placar-item strong{font-size:.85rem}
  .placar-item__rot{font-size:.5rem}
  /* no celular só cabem os números que importam — e o que falta na obra é o
     que mais importa, porque é o único que diz o que fazer com a próxima peça */
  .placar-item:nth-child(2),.placar-item:nth-child(4),.placar-item:nth-child(5){display:none}
  .placar-item--fase{display:none}
  .placar-item--obra{max-width:10rem;min-width:0}
  .placar-item--obra strong{font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .barra--obra{display:none}

  .painel--dir > .caixa:first-child{flex:1 1 auto}
  .mini--proximas{height:52px}
  .caixa--mascote{flex:0 0 62px;padding:.15rem;justify-content:center}
  .mascote{min-height:0;height:58px}
  .caixa--mascote .dica{display:none}

  .toque{
    display:flex;gap:.35rem;
    flex:0 0 auto;
    height:clamp(64px,11vh,86px);
    padding:.3rem .45rem calc(.3rem + env(safe-area-inset-bottom));
    background:rgba(0,0,0,.25);
  }
  .teclas{display:none}
}

/* telas bem baixinhas (celular deitado) */
@media (max-height:520px) and (max-width:899px){
  .topo{padding:.3rem .6rem}
  .icone{width:32px;height:32px}
  .painel--esq .placares{display:none}
  .toque{height:56px}
}

/* desktop: nada de controles de toque ocupando espaço */
@media (min-width:900px){
  .toque{display:none !important}
}

/* ------------------------- o caderno de obra ----------------------- */
/* O que ele já conhece ganha linha com o texto: é a recompensa, e é pra ler.
   O que falta vira UMA linha com os nomes — o buraco na coleção continua
   visível sem empurrar o botão pra fora da tela. */
.caderno{list-style:none;padding:0;margin:0 0 .8rem;text-align:left;font-size:.72rem;line-height:1.45}
.caderno li{margin:0 0 .4rem;color:rgba(255,255,255,.78)}
.caderno li b{display:block;color:var(--amarelo);font-size:.68rem}
.caderno li.novo b::after{
  content:'novo';margin-left:.4rem;padding:0 .3rem;border-radius:99px;
  background:var(--amarelo);color:var(--verde-tinta);font-size:.58rem;letter-spacing:.06em
}
.caderno li.falta{color:rgba(255,255,255,.32)}
.caderno li.falta b{color:rgba(255,255,255,.4)}
.caderno li.resto{margin-top:.5rem;font-size:.68rem;line-height:1.5}