/* ==========================================================================
   Tabuleru — base comum a todos os jogos
   Fichas de cor, tipografia, barra, controlos, fichas dos jogos e rodapé.

   Princípio: nada de larguras fixas. O conteúdo pede espaço em unidades
   relativas e trava com clamp(), para o mesmo ficheiro servir um telemóvel
   de 320 px e um monitor grande sem versões separadas.
   ========================================================================== */

:root{
  /* mar à volta das ilhas */
  --mar:#0C2333;
  --mar-2:#123249;
  --mar-3:#1A4562;
  /* madeira do tabuleiro */
  --madeira:#A2673F;
  --madeira-2:#78462A;
  --cova:#5A3520;
  /* pedras do ouril */
  --pedra:#9AA491;
  --pedra-clara:#C6CCBB;
  --pedra-escura:#525C49;
  /* texto e destaques */
  --osso:#F4EBDA;
  --osso-2:#D8C9AC;
  --ocra:#F0B03C;
  --rubro:#C8433A;
  --linha:rgba(244,235,218,.14);

  --display:'Archivo Black','Arial Black',system-ui,sans-serif;
  --corpo:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* margens seguras do aparelho (entalhe, barra de gestos) */
  --seg-e:env(safe-area-inset-left, 0px);
  --seg-d:env(safe-area-inset-right, 0px);
  --seg-b:env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:
    radial-gradient(120% 80% at 50% -10%, var(--mar-3) 0%, transparent 60%),
    var(--mar);
  background-attachment:fixed;
  color:var(--osso);
  font-family:var(--corpo);
  min-height:100vh;
  min-height:100dvh;                /* conta com a barra do browser no telemóvel */
  display:flex;flex-direction:column;align-items:center;
  overscroll-behavior-y:contain;    /* não recarrega a página se puxarem a meio do jogo */
  -webkit-tap-highlight-color:transparent;
}
:focus-visible{outline:2px solid var(--ocra);outline-offset:3px}
button{font:inherit;touch-action:manipulation}

/* ---------- barra do site ---------- */
.barra{
  width:100%;max-width:940px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px calc(18px + var(--seg-d)) 14px calc(18px + var(--seg-e));
}
.marca{
  font-family:var(--display);font-size:clamp(17px,4.6vw,21px);letter-spacing:-.015em;
  color:var(--osso);text-decoration:none;white-space:nowrap;
}
.marca em{color:var(--ocra);font-style:normal}
.barra nav{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:12px}
.barra nav a{
  color:var(--osso-2);text-decoration:none;padding:8px 12px;border-radius:999px;
  transition:background .18s,color .18s;
}
.barra nav a[aria-current="page"]{background:var(--ocra);color:#2A1A05}

/* ---------- coluna de conteúdo ---------- */
.pagina{
  width:100%;max-width:660px;margin:0 auto;
  padding:6px calc(16px + var(--seg-d)) calc(50px + var(--seg-b)) calc(16px + var(--seg-e));
}
.pagina--larga{max-width:900px}
.centrado{text-align:center}

.sobrancelha{
  font-family:var(--mono);font-size:clamp(10px,2.6vw,11px);letter-spacing:.22em;
  text-transform:uppercase;color:var(--ocra);margin:0 0 6px;
}
h1{
  font-family:var(--display);font-size:clamp(38px,11vw,68px);line-height:.92;
  margin:0;letter-spacing:-.02em;color:var(--osso);
  text-shadow:0 2px 0 var(--madeira-2), 0 3px 14px rgba(0,0,0,.4);
}
.lead{
  margin:12px auto 0;max-width:46ch;line-height:1.6;color:var(--osso-2);
  font-size:clamp(13.5px,3.4vw,14.5px);
}

/* ---------- controlos partilhados ---------- */
.controlos{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
  margin-top:16px;
}
.grupo{display:flex;align-items:center;gap:8px}
.grupo .rot{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--osso-2);opacity:.5;
}
.pastilhas{
  display:flex;background:rgba(0,0,0,.28);border:1px solid var(--linha);
  border-radius:999px;padding:4px;gap:2px;
}
.pastilhas button{
  font-family:var(--mono);font-size:clamp(11px,3vw,12px);letter-spacing:.04em;
  background:none;border:0;color:var(--osso-2);
  padding:9px 13px;min-height:38px;border-radius:999px;cursor:pointer;
  transition:background .18s,color .18s;
}
.pastilhas button[aria-pressed="true"]{background:var(--ocra);color:#2A1A05;font-weight:500}
.botao{
  font-family:var(--mono);font-size:clamp(11px,3vw,12px);letter-spacing:.04em;
  background:transparent;border:1px solid var(--linha);color:var(--osso);
  padding:0 16px;min-height:40px;border-radius:999px;cursor:pointer;
  transition:background .18s,border-color .18s;
}
@media (hover:hover){
  .barra nav a:hover{color:var(--osso);background:rgba(244,235,218,.08)}
  .pastilhas button:hover{color:var(--osso)}
  .botao:hover{background:rgba(244,235,218,.08);border-color:rgba(244,235,218,.3)}
}

/* ---------- fichas dos jogos (página de entrada) ---------- */
.jogos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px;
  margin-top:clamp(22px,6vw,34px);
}
.jogo{
  display:flex;gap:16px;align-items:center;padding:16px;
  border:1px solid var(--linha);border-radius:20px;background:rgba(0,0,0,.22);
  text-decoration:none;color:inherit;
  transition:background .2s,border-color .2s,transform .2s;
}
.jogo h3{font-family:var(--display);font-size:18px;margin:0 0 5px;letter-spacing:-.01em}
.jogo p{margin:0;font-size:12.5px;line-height:1.5;color:var(--osso-2)}
.jogo .selo{
  display:inline-block;margin-top:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ocra);
}
.jogo.brevemente{opacity:.5;pointer-events:none}
.jogo.brevemente .selo{color:var(--osso-2)}
@media (hover:hover){
  .jogo:hover{background:rgba(244,235,218,.06);border-color:rgba(244,235,218,.3);transform:translateY(-2px)}
}

/* cova de madeira com pedras — o motivo da casa */
.motivo{
  width:clamp(52px,14vw,62px);aspect-ratio:1;flex:none;border-radius:50%;position:relative;
  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 7px 11px -4px rgba(0,0,0,.7), 0 1px 0 rgba(255,220,180,.12);
}
.motivo i{
  position:absolute;width:25%;height:25%;border-radius:49% 51% 50% 50%;
  background:radial-gradient(circle at 36% 27%, var(--pedra-clara) 0%, var(--pedra) 45%, var(--pedra-escura) 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.5);
  transform:translate(-50%,-50%);
}
.motivo.vazio i{display:none}

/* ---------- rodapé ---------- */
.rodape{
  width:100%;max-width:900px;margin-top:auto;
  padding:20px calc(18px + var(--seg-d)) calc(26px + var(--seg-b)) calc(18px + var(--seg-e));
  border-top:1px solid var(--linha);
  font-family:var(--mono);font-size:11.5px;color:var(--osso-2);opacity:.6;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;
}
.rodape a{color:var(--osso-2)}

@media (max-width:520px){
  .rodape{flex-direction:column;gap:5px;font-size:11px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}