/* ==========================================================================
   JOGOS DO GUARÁ — estilos específicos da área /jogos/.
   Carregar depois de styles.css: usa os mesmos tokens (cores, fontes,
   raios, sombra) já definidos em :root.
   ========================================================================== */

/* ---------- topo das páginas de jogos ---------- */
.game-toolbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
  max-width: var(--max); margin: 0 auto; padding: 16px 24px 0;
}
.game-toolbar__group{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.game-toolbar a, .game-toolbar button.tool-link{
  display:inline-flex; align-items:center; gap:6px; font-family: var(--body); font-size:.85rem; font-weight:700;
  color: var(--ink-soft); background: var(--paper-raised); border:1px solid var(--line-strong);
  border-radius:999px; padding:9px 16px; cursor:pointer; text-decoration:none;
}
.game-toolbar a:hover, .game-toolbar button.tool-link:hover{ border-color: var(--gold); color: var(--gold-deep); }

/* ---------- cabeçalho do hub ---------- */
.hub-header{ text-align:center; padding: clamp(32px,5vw,52px) 0 8px; }
.hub-header .hero__mascot{ width: clamp(130px,16vw,170px); margin: 0 auto 18px; }
.hub-title{ font-size: clamp(2rem,5vw,2.7rem); }
.hub-lede{ max-width: 58ch; margin: 14px auto 0; color: var(--ink-soft); }
.hub-total-stars{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-family: var(--tag); font-size:.8rem;
  color: var(--gold-deep); background: var(--gold-tint); border-radius:999px; padding:8px 18px;
}

/* ---------- grade de cards do hub ---------- */
.hub-grid{ margin-top: 40px; display:grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: 26px; }
.hub-card{
  position:relative; overflow:hidden; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 28px 28px; box-shadow: var(--shadow); display:flex; flex-direction:column; text-align:center;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.hub-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px; background: var(--card-accent, var(--gold-deep)); }
.hub-card:hover{ transform: translateY(-5px); box-shadow: 0 16px 36px color-mix(in srgb, var(--ink) 20%, transparent); }
html.reduce-motion .hub-card:hover, html.calm .hub-card:hover{ transform:none; }
.hub-card__icon{
  width:72px; height:72px; border-radius: 22px; margin: 0 auto 16px; flex-shrink:0;
  background: color-mix(in srgb, var(--card-accent, var(--gold)) 16%, var(--paper));
  color: var(--card-accent, var(--gold-deep));
  border: 2px solid color-mix(in srgb, var(--card-accent, var(--gold)) 40%, transparent);
  font-size:2rem; display:flex; align-items:center; justify-content:center;
  transform: rotate(var(--icon-tilt, -6deg)); transition: transform 220ms ease;
}
.hub-card:hover .hub-card__icon{ transform: rotate(0deg) scale(1.08); }
.hub-card h3{ font-size:1.1rem; margin-bottom:8px; }
.hub-card p{ font-size:.87rem; color: var(--ink-soft); line-height:1.55; margin: 0 0 16px; flex:1; }
.hub-card__meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:16px; }
.hub-diff-badge{
  font-family: var(--tag); font-size:.64rem; letter-spacing:.04em; text-transform:uppercase;
  color: var(--ink-soft); background: var(--paper-sunken); border-radius:999px; padding:5px 12px;
}
.hub-card--soon{ opacity:.62; }
.hub-card--soon::before{ background: var(--line-strong); }
.hub-card--soon .hub-card__icon{ background: var(--paper-sunken); color: var(--ink-mute); border-color: var(--line-strong); transform:none; }
.hub-card__soon-tag{ font-family: var(--tag); font-size:.66rem; letter-spacing:.03em; color: var(--ink-mute); margin-bottom: 14px; }
.hub-card .btn{ width:100%; justify-content:center; }
.hub-card .btn--gold{ background: var(--card-accent, var(--gold-deep)); }
.hub-card .btn[disabled]{ opacity:.5; cursor:default; }

/* ---------- estrelas (reaproveitado no hub e nas telas de vitória) ---------- */
.stars-row{ display:flex; gap:4px; justify-content:center; }
.stars-row .star{ font-size:1.3rem; line-height:1; color: var(--line-strong); }
.stars-row .star.is-on{ color: var(--gold-deep); }
.stars-row--sm .star{ font-size:.95rem; }
.stars-row--lg .star{ font-size:2rem; }

/* ---------- cabeçalho comum das páginas de jogo ---------- */
.game-page-head{ text-align:center; padding: 12px 0 8px; }
.game-page-head h1{ font-size: clamp(1.7rem,3.6vw,2.3rem); }
.game-page-head p{ max-width: 56ch; margin: 12px auto 0; color: var(--ink-soft); }

/* ---------- seletor de dificuldade (memória) ---------- */
.game-diff-picker{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin: 22px 0 6px; }
.game-diff-card{
  flex: 1 1 140px; max-width: 180px; border: 1.5px solid var(--line-strong); background: var(--paper-raised);
  border-radius: var(--r-md); padding: 16px 14px; cursor:pointer; font-family: var(--body); text-align:center;
  transition: border-color 160ms ease, background 160ms ease;
}
.game-diff-card:hover{ border-color: var(--gold); }
.game-diff-card[aria-checked="true"]{ background: var(--gold-deep); border-color: var(--gold-deep); color: var(--fixed-light); }
.game-diff-card strong{ display:block; font-size:.95rem; margin-bottom:4px; }
.game-diff-card small{ display:block; font-size:.74rem; opacity:.85; }

/* ---------- grade de memória: variações por dificuldade ---------- */
.memory-grid--facil{ grid-template-columns: repeat(3,1fr); max-width: 360px; }
.memory-grid--medio{ grid-template-columns: repeat(4,1fr); max-width: 460px; }
.memory-grid--dificil{ grid-template-columns: repeat(4,1fr); max-width: 520px; }
@media (min-width:600px){
  .memory-grid--dificil{ grid-template-columns: repeat(5,1fr); }
}
@media (max-width:420px){
  .memory-grid--medio{ grid-template-columns: repeat(3,1fr); }
  .memory-grid--dificil{ grid-template-columns: repeat(3,1fr); }
}
.memory-card.match-pop{ animation: guaraMatchPop 420ms ease; }
@keyframes guaraMatchPop{ 0%{ transform: scale(1);} 40%{ transform: scale(1.12);} 100%{ transform: scale(1);} }
html.reduce-motion .memory-card.match-pop{ animation:none !important; }

/* ---------- tela de vitória compartilhada ---------- */
.game-win-card{
  max-width: 440px; margin: 24px auto 0; background: var(--gold-tint); border-radius: var(--r-lg);
  padding: 28px; text-align:center;
}
.game-win-card h2{ font-size:1.3rem; color: var(--gold-deep); margin-bottom:10px; }
.game-win-card p{ color: var(--gold-deep); font-size:.92rem; margin: 0 0 16px; }
.game-win-card .stars-row{ margin-bottom: 16px; }
.game-win-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:6px; }

/* ---------- jogo: como o guará está se sentindo ---------- */
.emo-guess-card{ max-width: 480px; margin: 0 auto; text-align:center; }
.emo-guess-face{
  width: 210px; margin: 0 auto 22px; border-radius: var(--r-lg); background: var(--paper);
  border:1px solid var(--line); box-shadow: var(--shadow); padding: 14px;
}
.emo-guess-face img{ width:100%; height:auto; }
.emo-options{ display:grid; grid-template-columns: repeat(2,1fr); gap:10px; margin: 20px 0; }
@media (min-width:560px){ .emo-options{ grid-template-columns: repeat(4,1fr); } }
.emo-option{
  padding: 14px 10px; border-radius: var(--r-md); border: 1.5px solid var(--line-strong);
  background: var(--paper-raised); color: var(--ink); font-family: var(--body); font-weight:700;
  font-size:.86rem; cursor:pointer; transition: border-color 160ms ease, background 160ms ease;
}
.emo-option:hover{ border-color: var(--gold); }
.emo-option.is-picked{ border-color: var(--gold-deep); background: var(--gold-tint); }
.emo-option:disabled{ cursor:default; }
.emo-explain{ margin-top: 20px; padding: 18px 20px; border-radius: var(--r-md); background: var(--gold-tint); text-align:left; }
.emo-explain h4{ margin:0 0 6px; font-family: var(--display); font-size:1.05rem; color: var(--gold-deep); }
.emo-explain p{ margin:0; font-size:.9rem; line-height:1.55; color: var(--gold-deep); }
.emo-progress-label{ font-family: var(--tag); font-size:.72rem; color: var(--ink-mute); margin: 18px 0 6px; }

/* ---------- jogo: encaixe as formas ---------- */
.shape-slot{ width: 140px; height:140px; margin: 0 auto 26px; }
.shape-svg{ display:block; width:100%; height:100%; }
.shape-options{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; max-width: 480px; margin: 0 auto; }
@media (max-width:420px){ .shape-options{ grid-template-columns: repeat(2,1fr); } }
.shape-option{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding: 14px 10px;
  border-radius: var(--r-md); border: 1.5px solid var(--line-strong); background: var(--paper-raised);
  cursor:pointer; font-family: var(--body); font-weight:700; font-size:.8rem; color: var(--ink);
  transition: border-color 160ms ease, transform 160ms ease;
}
.shape-option:hover{ border-color: var(--gold); }
.shape-option:disabled{ cursor:default; opacity:.7; }
.shape-option .shape-svg{ width:44px; height:44px; }
.shape-option.shake{ animation: chipshake 300ms ease; }
html.reduce-motion .shape-option.shake, html.calm .shape-option.shake{ animation:none !important; }

/* ---------- jogo: notas e cores musicais ---------- */
.piano-feedback{ text-align:center; font-weight:800; color: var(--gold-deep); min-height: 1.4em; margin: 0 0 18px; }
.piano-keyboard{
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding: 22px 16px;
  background: var(--paper-sunken); border-radius: var(--r-lg); border: 1px solid var(--line);
}
.piano-key{
  flex: 1 1 52px; max-width:64px; aspect-ratio: 1 / 2.6; border-radius: 12px; border: 2px solid var(--line-strong);
  background: color-mix(in srgb, var(--key-color) 14%, var(--paper)); color: var(--ink);
  font-family: var(--display); font-weight:800; font-size:.82rem; cursor:pointer;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:12px;
  transition: background 250ms ease, transform 150ms ease, border-color 160ms ease;
}
.piano-key:hover{ border-color: var(--key-color); }
.piano-key.is-explored{ border-color: color-mix(in srgb, var(--key-color) 55%, var(--line-strong)); }
.piano-key.is-active{ background: var(--key-color); color: var(--fixed-light); transform: translateY(3px); }
html.reduce-motion .piano-key, html.calm .piano-key{ transition-duration: .05s; }
html.reduce-motion .piano-key.is-active, html.calm .piano-key.is-active{ transform:none; }

/* ---------- jogo: tambores do guará ---------- */
.drum-pads{ display:grid; grid-template-columns: repeat(2,1fr); gap:18px; max-width: 340px; margin: 0 auto; }
@media (min-width:480px){ .drum-pads{ grid-template-columns: repeat(4,1fr); max-width: 520px; } }
.drum-pad{
  aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--pad-color); cursor:pointer;
  background: color-mix(in srgb, var(--pad-color) 22%, var(--paper)); font-size: clamp(1.8rem,6vw,2.4rem);
  display:flex; align-items:center; justify-content:center; transition: transform 120ms ease, filter 120ms ease;
}
.drum-pad:hover{ filter: brightness(1.08); }
.drum-pad.is-active{ transform: scale(0.92); filter: brightness(1.3); }
html.reduce-motion .drum-pad, html.calm .drum-pad{ transition-duration:.05s; }
html.reduce-motion .drum-pad.is-active, html.calm .drum-pad.is-active{ transform:none; }