/* ==========================================================================
   Ouril — tabuleiro, casas, pedras e painéis da partida.
   Depende de assets/css/base.css.

   O tabuleiro é o elemento que manda: em vez de encolher a letra, limita-se
   pela largura E pela altura disponíveis, para caber sempre no ecrã sem
   obrigar a rolar a página a meio de uma jogada.
   ========================================================================== */

:root{
  --dur-cair:420ms;      /* definidas por JS conforme o ritmo escolhido */
  --dur-comer:760ms;
  --fora:340px;          /* espaço que o resto da página ocupa em altura */
  --gap-casas:9px;
  --raio-tab:26px;
}

/* ---------- mesa ---------- */
.mesa{
  margin:clamp(14px,4vw,24px) auto 0;
  display:flex;flex-direction:column;gap:10px;
  width:100%;
  /* o tabuleiro é ~3x mais largo do que alto: se a altura aperta, encolhe a largura */
  max-width:min(100%, calc((100dvh - var(--fora)) * 2.9));
  user-select:none;-webkit-user-select:none;
}
.jogador{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px}
.nome{display:flex;align-items:center;gap:8px;font-size:clamp(12px,3.2vw,13px);font-weight:600}
.pinta{width:9px;height:9px;border-radius:50%;flex:none}
.jogador.maq .pinta{background:var(--rubro)}
.jogador.tu .pinta{background:var(--ocra)}
.jogador .estado{font-family:var(--mono);font-size:11px;color:var(--osso-2);opacity:.75}
.tabuleta{display:flex;align-items:center;gap:9px;min-width:0}
.tabuleta .pilha{
  display:flex;flex-wrap:wrap-reverse;gap:2px;justify-content:flex-end;
  width:clamp(56px,18vw,96px);overflow:hidden;
}
.tabuleta .pilha i{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 28%, var(--pedra-clara) 0%, var(--pedra) 50%, var(--pedra-escura) 100%);
  box-shadow:0 1px 1px rgba(0,0,0,.4);
}
.tabuleta .num{font-family:var(--mono);font-size:clamp(17px,5vw,20px);min-width:2.1ch;text-align:right;font-weight:500}
.jogador.tu .num{color:var(--ocra)}
.jogador.maq .num{color:var(--rubro)}

/* ---------- tabuleiro ---------- */
.tabuleiro{
  background:
    radial-gradient(140% 90% at 20% 0%, rgba(255,200,150,.18) 0%, transparent 55%),
    linear-gradient(168deg,var(--madeira) 0%, var(--madeira-2) 100%);
  border-radius:var(--raio-tab);
  padding:clamp(9px,2.6vw,14px);
  display:flex;flex-direction:column;gap:clamp(8px,2.4vw,12px);
  box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 0 rgba(0,0,0,.3);
  position:relative;overflow:hidden;
  touch-action:manipulation;
}
.tabuleiro::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:repeating-linear-gradient(96deg, rgba(0,0,0,.5) 0 1px, transparent 1px 7px);
}
.fila,.etiquetas{
  display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap-casas);
  position:relative;z-index:1;
}
.etiquetas span{
  font-family:var(--mono);font-size:clamp(9px,2.4vw,10px);text-align:center;
  color:var(--osso-2);opacity:.45;
}

/* ---------- casas ---------- */
.casa{
  position:relative;aspect-ratio:1;border:0;padding:0;border-radius:50%;
  background:
    radial-gradient(120% 95% at 50% 118%, #C08553 0%, rgba(192,133,83,0) 58%),
    radial-gradient(circle at 50% 26%, #472817 0%, var(--cova) 48%, #8C5734 100%);
  box-shadow:inset 0 9px 14px -5px rgba(0,0,0,.7), inset 0 -3px 6px rgba(255,214,170,.14), 0 1px 0 rgba(255,220,180,.13);
  cursor:default;transition:transform .14s, box-shadow .14s;
}
.casa .contador{
  position:absolute;left:50%;bottom:clamp(2px,1.2vw,5px);transform:translateX(-50%);
  font-family:var(--mono);font-size:clamp(9px,2.6vw,11px);color:var(--osso-2);
  background:rgba(40,22,10,.72);border-radius:999px;padding:1px 5px;line-height:1.5;
}
.casa .semente{
  position:absolute;width:23%;height:22%;border-radius:48% 52% 51% 49%;
  background:radial-gradient(circle at 36% 27%, var(--pedra-clara) 0%, var(--pedra) 42%, #79836F 72%, var(--pedra-escura) 100%);
  box-shadow:0 2px 3px rgba(0,0,0,.5), inset -1px -2px 3px rgba(0,0,0,.22);
  filter:brightness(var(--b,1)) hue-rotate(var(--h,0deg));
  transform:translate(-50%,-50%) rotate(var(--r));
}
.casa .semente.entrou{animation:cair var(--dur-cair) ease-out}
@keyframes cair{
  from{opacity:0;transform:translate(-50%,-130%) rotate(var(--r)) scale(.7)}
  to{opacity:1}
}
.casa.jogavel{cursor:pointer}
.casa.a-semear{box-shadow:inset 0 5px 12px rgba(0,0,0,.75), 0 0 0 3px rgba(244,235,218,.5)}
.casa.origem{box-shadow:inset 0 5px 12px rgba(0,0,0,.75), 0 0 0 2px rgba(240,176,60,.55)}

/* rato: o realce só aparece ao passar por cima */
@media (hover:hover){
  .casa.jogavel:hover,.casa.jogavel:focus-visible{
    transform:translateY(-3px);
    box-shadow:inset 0 5px 12px rgba(0,0,0,.75), 0 0 0 3px var(--ocra);
  }
}
/* toque: não há "passar por cima", por isso as casas jogáveis estão sempre marcadas */
@media (hover:none){
  .casa.jogavel{
    box-shadow:inset 0 9px 14px -5px rgba(0,0,0,.7), 0 0 0 2px rgba(240,176,60,.65);
  }
  .casa.jogavel:active{transform:scale(.94)}
}

.casa.comida{animation:comer var(--dur-comer) ease-out}
@keyframes comer{
  0%{box-shadow:inset 0 5px 12px rgba(0,0,0,.75), 0 0 0 0 var(--ocra)}
  40%{box-shadow:inset 0 5px 12px rgba(0,0,0,.75), 0 0 0 6px var(--ocra)}
  100%{box-shadow:inset 0 5px 12px rgba(0,0,0,.75), 0 0 0 0 rgba(240,176,60,0)}
}
.casa.comida-maq{animation:comerMaq var(--dur-comer) ease-out}
@keyframes comerMaq{
  0%{box-shadow:inset 0 5px 12px rgba(0,0,0,.75), 0 0 0 0 var(--rubro)}
  40%{box-shadow:inset 0 5px 12px rgba(0,0,0,.75), 0 0 0 6px var(--rubro)}
  100%{box-shadow:inset 0 5px 12px rgba(0,0,0,.75), 0 0 0 0 rgba(200,67,58,0)}
}

/* ---------- mensagem e registo ---------- */
.mensagem{
  min-height:22px;text-align:center;margin:16px 0 0;line-height:1.5;
  font-size:clamp(13px,3.5vw,14px);
}
.mensagem strong{color:var(--ocra);font-weight:600}
.mensagem .nota{font-family:var(--mono);font-size:clamp(12px,3.2vw,13px);opacity:.7}
.mensagem.fim{font-family:var(--display);font-size:clamp(19px,5.5vw,22px);letter-spacing:-.01em}

.registo{margin-top:16px;border-top:1px solid var(--linha);padding-top:12px}
.registo h2{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--osso-2);opacity:.6;margin:0 0 8px;font-weight:400;
}
.registo ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column-reverse;gap:4px;
  max-height:132px;overflow:auto;-webkit-overflow-scrolling:touch;
}
.registo li{font-family:var(--mono);font-size:12px;color:var(--osso-2);display:flex;gap:8px}
.registo li b{font-weight:500;min-width:6.5ch}
.registo li.eu b{color:var(--ocra)}
.registo li.ele b{color:var(--rubro)}

/* ---------- regras ---------- */
.regras{margin-top:20px;border:1px solid var(--linha);border-radius:16px;background:rgba(0,0,0,.2)}
.regras summary{
  cursor:pointer;padding:15px 18px;min-height:46px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--osso-2);
}
.regras[open] summary{color:var(--ocra)}
.regras .corpo{padding:0 18px 18px;font-size:13.5px;line-height:1.65;color:var(--osso-2)}
.regras .corpo p{margin:0 0 10px}
.regras .corpo ul{margin:0 0 12px;padding-left:18px}
.regras .corpo li{margin-bottom:6px}
.opcao{
  display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--linha);font-size:13px;
}
.opcao input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--ocra)}
.fonte{font-size:11.5px;opacity:.6;margin-top:10px}
.fonte a{color:var(--osso-2)}

/* ==========================================================================
   Adaptações por tamanho de ecrã
   ========================================================================== */

/* --- telemóvel ao alto: o tabuleiro tem de caber sem rolar --- */
@media (max-width:560px){
  :root{--gap-casas:6px;--raio-tab:20px;--fora:300px}
  .pagina--jogo .lead{display:none}          /* as regras vivem no painel em baixo */
  .pagina--jogo h1{font-size:clamp(30px,9vw,40px)}
  .pagina--jogo .controlos{gap:8px;margin-top:12px}
  .grupo{gap:6px}
  .grupo .rot{display:none}                  /* as pastilhas explicam-se sozinhas */
  .registo ol{max-height:76px}
  .regras .corpo{font-size:13px}
}

/* --- ecrãs muito estreitos (≤ 380 px): recuperar cada pixel para as casas --- */
@media (max-width:380px){
  :root{--gap-casas:4px}
  .pagina{padding-left:calc(8px + var(--seg-e));padding-right:calc(8px + var(--seg-d))}
  .casa .contador{padding:0 4px}
  .tabuleta .pilha{gap:1px}
}

/* --- telemóvel deitado: tabuleiro à esquerda, painéis à direita --- */
@media (orientation:landscape) and (max-height:560px){
  .barra{padding-top:8px;padding-bottom:8px}
  .pagina--jogo{
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr);
    gap:10px 20px;align-items:start;
  }
  .pagina--jogo .cabecalho-jogo{grid-column:2;grid-row:1;text-align:left}
  .pagina--jogo .mesa{grid-column:1;grid-row:1 / span 5;margin-top:0;max-width:100%}
  .pagina--jogo .mensagem{grid-column:2;grid-row:2;text-align:left;margin-top:4px}
  .pagina--jogo .registo{grid-column:2;grid-row:3;margin-top:4px}
  .pagina--jogo .regras{grid-column:2;grid-row:4;margin-top:4px}
  .pagina--jogo h1{font-size:clamp(24px,5vh,32px)}
  .pagina--jogo .lead{display:none}
  .pagina--jogo .sobrancelha{margin-bottom:2px}
  .pagina--jogo .controlos{justify-content:flex-start;margin-top:10px}
  .registo ol{max-height:60px}
  .grupo .rot{display:none}
}

/* --- ecrã largo mas baixo (portátil pequeno, janela encolhida) --- */
@media (min-width:561px) and (max-height:760px){
  :root{--fora:470px}
}

/* --- ecrãs largos: aproveitar a altura para um tabuleiro maior --- */
@media (min-width:900px) and (min-height:800px){
  .mesa{max-width:min(720px, calc((100dvh - var(--fora)) * 2.9))}
  .pagina{max-width:720px}
}