:root{
  --paper:        #E8E7DF;
  --paper-raised: #F2F1EA;
  --paper-sunken: #DBDACE;
  --ink:          #24261F;
  --ink-soft:     #4D4F43;
  --ink-mute:     #83816F;
  --line:         color-mix(in srgb, #24261F 14%, transparent);
  --line-strong:  color-mix(in srgb, #24261F 26%, transparent);

  --stone-deep:   #602438;
  --stone-tint:   color-mix(in srgb, #79344B 12%, var(--paper-raised));

  --gold:         #B04E3F;
  --gold-deep:    #8F3D30;
  --gold-soft:    #D28073;
  --gold-tint:    color-mix(in srgb, #B04E3F 14%, var(--paper-raised));

  --fixed-light:  #F3F1E9;

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --max: 1080px;

  --display: "Libre Franklin", -apple-system, BlinkMacSystemFont, sans-serif;
  --body:    "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, sans-serif;
  --tag:     "Space Mono", ui-monospace, monospace;

  --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 8px 24px color-mix(in srgb, var(--ink) 6%, transparent);
  --scale: 1;
  --motion: 1;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:        #191C17;
    --paper-raised: #21251E;
    --paper-sunken: #12140F;
    --ink:          #E7E6DC;
    --ink-soft:     #B7B6A9;
    --ink-mute:     #82806F;
    --line:         color-mix(in srgb, #E7E6DC 14%, transparent);
    --line-strong:  color-mix(in srgb, #E7E6DC 26%, transparent);
    --stone-deep:   #B4647F;
    --stone-tint:   color-mix(in srgb, #BD7F94 14%, var(--paper-raised));
    --gold:         #D28073;
    --gold-deep:    #B04E3F;
    --gold-soft:    #E4A096;
    --gold-tint:    color-mix(in srgb, #D28073 14%, var(--paper-raised));
  }
}
:root[data-theme="dark"]{
  --paper:        #191C17;
  --paper-raised: #21251E;
  --paper-sunken: #12140F;
  --ink:          #E7E6DC;
  --ink-soft:     #B7B6A9;
  --ink-mute:     #82806F;
  --line:         color-mix(in srgb, #E7E6DC 14%, transparent);
  --line-strong:  color-mix(in srgb, #E7E6DC 26%, transparent);
  --stone-deep:   #B4647F;
  --stone-tint:   color-mix(in srgb, #BD7F94 14%, var(--paper-raised));
  --gold:         #D28073;
  --gold-deep:    #B04E3F;
  --gold-soft:    #E4A096;
  --gold-tint:    color-mix(in srgb, #D28073 14%, var(--paper-raised));
}

*{ box-sizing: border-box; }
html{ font-size: calc(100% * var(--scale)); scroll-behavior: smooth; }
body{
  margin:0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 1.05rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3{ font-family: var(--display); font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
*:focus-visible{ outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.skip{ position:absolute; left:-9999px; background: var(--gold-soft); color:#191C17; padding: 10px 16px; z-index: 100; font-weight:700; border-radius: 8px; }
.skip:focus{ left: 12px; top: 12px; }

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* reduced motion + calm mode */
@media (prefers-reduced-motion: reduce){
  .deco, .float{ animation: none !important; }
  *:not(#breathCircle){ transition-duration: .05s !important; }
}
html.calm body{ filter: saturate(0.55) brightness(0.98); }
html.calm .deco, html.calm .float{ animation: none !important; }
html.calm *:not(#breathCircle){ transition-duration: .1s !important; }
html.calm .navbar{ background: var(--gold-tint); border-bottom-color: color-mix(in srgb, var(--gold) 40%, transparent); }
html.calm .who-card, html.calm .game-card, html.calm .quiz-card, html.calm .tip-card{ box-shadow: none; }

/* ---------- alto contraste (painel de acessibilidade) ---------- */
html.high-contrast{ --line: color-mix(in srgb, var(--ink) 45%, transparent); --line-strong: color-mix(in srgb, var(--ink) 70%, transparent); --ink-soft: var(--ink); --ink-mute: var(--ink-soft); }
html.high-contrast .btn--ghost{ border-width: 3px; }
html.high-contrast .who-card, html.high-contrast .game-card, html.high-contrast .quiz-card, html.high-contrast .tip-card, html.high-contrast .category-card{ border: 2px solid var(--line-strong); }

/* ---------- reduzir animações (toggle explícito do painel, além do prefers-reduced-motion do sistema) ---------- */
html.reduce-motion .deco, html.reduce-motion .float{ animation: none !important; }
html.reduce-motion *:not(#breathCircle){ transition-duration: .05s !important; }

/* ---------- pausar atividades ---------- */
html.a11y-paused .game-card{ position: relative; }
html.a11y-paused .game-card::after{
  content: "⏸ Pausado — toque em \"Continuar\" no painel de acessibilidade"; position:absolute; inset:0; z-index: 5;
  display:flex; align-items:center; justify-content:center; text-align:center; padding: 24px;
  background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(3px);
  border-radius: var(--r-md); font-weight:800; color: var(--gold-deep); font-size: .95rem;
}
html.a11y-paused .game-card *{ pointer-events: none; }

/* ---------- painel de acessibilidade ---------- */
.a11y-overlay{ position: fixed; inset:0; background: color-mix(in srgb, var(--ink) 45%, transparent); z-index: 90; }
.a11y-panel{
  position: fixed; top:0; right:0; height: 100%; width: min(380px, 100vw); z-index: 91;
  background: var(--paper); border-left: 1px solid var(--line-strong); box-shadow: -8px 0 32px color-mix(in srgb, var(--ink) 18%, transparent);
  display:flex; flex-direction:column; overflow-y:auto;
}
.a11y-panel[hidden]{ display:none; }
.a11y-panel__head{ display:flex; align-items:center; justify-content:space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); position:sticky; top:0; background: var(--paper); }
.a11y-panel__head h2{ font-size: 1.15rem; }
.a11y-close{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); background:var(--paper-raised); color:var(--ink); font-size:1rem; cursor:pointer; }
.a11y-close:hover{ border-color: var(--gold); color: var(--gold-deep); }
.a11y-panel__body{ padding: 18px 22px; display:flex; flex-direction:column; gap: 20px; }
.a11y-row{ display:flex; align-items:center; justify-content:space-between; gap: 14px; }
.a11y-row--stack{ flex-direction:column; align-items:flex-start; gap:10px; }
.a11y-row__label{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:.92rem; }
.a11y-row__label small{ display:block; font-weight:500; color: var(--ink-mute); font-size:.74rem; margin-top:2px; }
.a11y-ico{ font-size: 1.15rem; flex-shrink:0; }
.a11y-switch{
  min-width: 92px; height:38px; border-radius:999px; border:1px solid var(--line-strong); background:var(--paper-raised);
  color: var(--ink-soft); font-family: var(--tag); font-size:.72rem; font-weight:800; cursor:pointer; padding: 0 14px; flex-shrink:0;
}
.a11y-switch[aria-checked="true"]{ background: var(--gold-tint); color: var(--gold-deep); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.a11y-stepper{ display:flex; gap:6px; }
.a11y-stepper button{ width:38px; height:38px; border-radius:10px; border:1px solid var(--line-strong); background:var(--paper-raised); color:var(--ink); font-family:var(--tag); font-weight:800; cursor:pointer; }
.a11y-choice{ display:flex; gap:6px; flex-wrap:wrap; }
.a11y-choice button{ padding: 8px 12px; border-radius:999px; border:1px solid var(--line-strong); background:var(--paper-raised); color:var(--ink-soft); font-size:.78rem; font-weight:700; cursor:pointer; }
.a11y-choice button[aria-checked="true"]{ background: var(--gold-deep); color: var(--fixed-light); border-color: var(--gold-deep); }
.a11y-panel input[type="range"]{ width: 100%; accent-color: var(--gold-deep); }
.a11y-note{ padding: 0 22px 22px; color: var(--ink-mute); font-size:.78rem; line-height:1.5; }
@media (max-width: 480px){ .a11y-panel{ width: 100vw; } }

/* ---------- AchievementModal (toast de conquista) ---------- */
.achieve-toast{
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(140%); z-index: 95;
  display:flex; align-items:center; gap: 14px; max-width: min(420px, calc(100vw - 32px));
  background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow); padding: 16px 20px; transition: transform 320ms ease;
}
.achieve-toast.show{ transform: translateX(-50%) translateY(0); }
.achieve-toast[hidden]{ display:none; }
.achieve-toast__emoji{ font-size: 2rem; flex-shrink:0; }
.achieve-toast__title{ font-weight:800; font-family: var(--display); margin:0 0 2px; font-size: 1rem; }
.achieve-toast__desc{ margin:0; font-size:.82rem; color: var(--ink-soft); }

/* ---------- GuaraGuide, ProgressBar, DifficultySelector (componentes de jogo) ---------- */
.guara-guide{ display:flex; align-items:center; gap: 12px; background: var(--gold-tint); border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 16px; }
.guara-guide__face{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; background: var(--paper); }
.guara-guide__msg{ margin:0; font-size: .88rem; color: var(--gold-deep); font-weight:700; line-height:1.4; }
.mini-progress{ height:8px; border-radius:999px; background: var(--paper-sunken); overflow:hidden; margin: 10px 0 16px; }
.mini-progress__bar{ height:100%; background: var(--gold-deep); border-radius:999px; transition: width 260ms ease; }
.diff-selector{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 16px; }
.diff-btn{ padding: 9px 16px; border-radius:999px; border:1px solid var(--line-strong); background:var(--paper-raised); color:var(--ink-soft); font-size:.82rem; font-weight:700; cursor:pointer; font-family: var(--body); }
.diff-btn[aria-checked="true"]{ background: var(--gold-deep); color: var(--fixed-light); border-color: var(--gold-deep); }
.game-card-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 16px; }
.game-category-badge{ display:inline-flex; align-items:center; gap:6px; font-family: var(--tag); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; color: var(--gold-deep); background: var(--gold-tint); border-radius:999px; padding: 5px 12px; }
.game-done-badge{ display:inline-flex; align-items:center; gap:6px; font-family: var(--tag); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; color: var(--fixed-light); background: var(--gold-deep); border-radius:999px; padding: 5px 12px; }
.game-done-badge[hidden]{ display:none; }
.game-card.is-completed{ border: 2px solid var(--gold-deep); }

/* ---------- hub de categorias (GamesHub) ---------- */
.category-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 14px; margin: 34px 0 26px; }
.category-chip{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding: 16px 10px; border-radius: var(--r-md); border: 1.5px solid var(--line-strong); background: var(--paper-raised); color: var(--ink-soft); cursor:pointer; font-family: var(--body); transition: border-color 160ms ease, background 160ms ease, color 160ms ease; position:relative; }
.category-chip:hover{ border-color: var(--gold); }
.category-chip.is-active{ background: var(--gold-deep); border-color: var(--gold-deep); color: var(--fixed-light); }
.category-chip__icon{ font-size: 1.5rem; }
.category-chip__label{ font-size: .76rem; font-weight:700; line-height:1.25; }
.category-chip__count{ position:absolute; top:8px; right:10px; font-family: var(--tag); font-size:.64rem; color: var(--ink-mute); }
.category-chip.is-active .category-chip__count{ color: color-mix(in srgb, var(--fixed-light) 75%, transparent); }
.category-empty{ margin: 8px 0 24px; padding: 20px; background: var(--paper-sunken); border-radius: var(--r-md); text-align:center; color: var(--ink-soft); }
.category-empty a{ color: var(--gold-deep); font-weight:700; }
.game-card[hidden]{ display:none; }
.game-instructions{ background: var(--paper-sunken); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 16px; font-size: .86rem; color: var(--ink-soft); line-height:1.5; }
.game-instructions__row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.game-instructions__replay{ flex-shrink:0; background:none; border:1px solid var(--line-strong); border-radius:999px; padding:6px 12px; font-size:.72rem; font-weight:700; font-family: var(--tag); color: var(--ink-soft); cursor:pointer; }
.game-instructions__replay:hover{ border-color: var(--gold); color: var(--gold-deep); }
.game-result{ margin-top: 16px; padding: 16px; border-radius: var(--r-md); background: var(--gold-tint); color: var(--gold-deep); font-weight:800; text-align:center; }

/* ---------- jogo: como estou me sentindo? ---------- */
.sentimentos-situacao{ font-weight:800; font-size:1.05rem; margin: 4px 0 16px; }
.sentimentos-opcoes{ display:flex; flex-wrap:wrap; gap:8px; }
.sentimentos-chip{ padding: 10px 16px; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--paper-raised); color:var(--ink-soft); font-size:.86rem; font-weight:700; cursor:pointer; }
.sentimentos-chip:hover{ border-color: var(--gold); }
.sentimentos-chip[aria-pressed="true"]{ background: var(--gold-deep); color: var(--fixed-light); border-color: var(--gold-deep); }

/* ---------- jogo: organize minha rotina ---------- */
.rotina-assembled{ display:flex; flex-wrap:wrap; gap:8px; min-height:44px; padding:12px; border:1.5px dashed var(--line-strong); border-radius: var(--r-md); margin-bottom:14px; align-items:center; }
.rotina-assembled__empty{ color: var(--ink-mute); font-size:.84rem; }
.rotina-step{ display:inline-flex; align-items:center; gap:6px; background: var(--gold-tint); color: var(--gold-deep); border-radius:999px; padding:7px 14px; font-size:.82rem; font-weight:700; }
.rotina-step__n{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background: var(--gold-deep); color: var(--fixed-light); font-size:.66rem; font-weight:800; flex-shrink:0; }
.rotina-pool{ display:flex; flex-wrap:wrap; gap:8px; }
.rotina-chip{ padding: 10px 16px; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--paper-raised); color:var(--ink-soft); font-size:.86rem; font-weight:700; cursor:pointer; }
.rotina-chip:hover{ border-color: var(--gold); }

/* ---------- header ---------- */
.navbar{ position: sticky; top:0; z-index: 40; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.navbar__inner{ max-width: var(--max); margin:0 auto; padding: 14px 24px; display:flex; align-items:center; gap: 18px; flex-wrap: wrap; }
.navbar__brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.navbar__brand b{ font-family: var(--display); font-size: 1.05rem; font-weight: 800; white-space: nowrap; }
.navbar__brand .inf{ color: var(--gold-deep); }
.navbar__links{ display:flex; gap: 4px; flex-wrap: wrap; margin-left: 4px; }
.navbar__links a{ text-decoration:none; font-size: .82rem; font-weight:700; padding: 8px 12px; border-radius: 999px; color: var(--ink-soft); transition: background 180ms ease, color 180ms ease; }
.navbar__links a:hover{ background: var(--gold-tint); color: var(--gold-deep); }
.navbar__tools{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.tool-btn, .theme-btn{
  width:auto; height:36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--paper); color: var(--ink-soft); cursor:pointer; font-size:.78rem; font-weight:800; font-family: var(--tag);
  display:flex; align-items:center; justify-content:center; gap:6px; transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.theme-btn{ width:36px; padding:0; font-size:.95rem; }
.tool-btn:hover, .theme-btn:hover{ border-color: var(--gold); color: var(--gold-deep); }
.tool-btn[aria-pressed="true"]{ background: var(--gold-tint); color: var(--gold-deep); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }

/* ---------- shared section bits ---------- */
section{ padding: clamp(56px,7vw,96px) 0; }
.section-tag{
  display:inline-flex; align-items:center; gap: 8px; font-family: var(--tag); font-size: .72rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep);
  background: var(--gold-tint); border-radius: 999px; padding: 6px 14px; margin-bottom: 18px;
}
.section-tag::before{ content:"●"; font-size: 7px; color: var(--gold); }
h2.section-title{ font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.section-lede{ margin-top: 14px; max-width: 60ch; color: var(--ink-soft); font-size: clamp(1rem,1.1vw,1.1rem); line-height: 1.65; }
.center{ text-align:center; }
.center .section-lede{ margin-left:auto; margin-right:auto; }

.btn{
  font-family: var(--display); font-weight: 800; font-size: .95rem; display:inline-flex; align-items:center; gap:8px;
  border-radius: 999px; padding: 14px 26px; cursor:pointer; text-decoration:none; border: none; transition: transform 160ms ease, background 160ms ease, opacity 160ms ease;
}
.btn[hidden]{ display:none; }
.btn:active{ transform: scale(0.97); }
.btn--gold{ background: var(--gold-deep); color: var(--fixed-light); }
.btn--gold:hover{ opacity: .92; }
.btn--gold:disabled{ opacity:.6; cursor:not-allowed; }
.btn--ghost{ background: transparent; color: var(--gold-deep); border: 2px solid var(--gold-deep); padding: 12px 24px; }
.btn--ghost:hover{ background: var(--gold-deep); color: var(--fixed-light); }

/* ---------- hero ---------- */
.hero{ padding-top: clamp(40px,6vw,64px); position:relative; overflow:hidden; }
.hero__inner{ max-width: var(--max); margin: 0 auto; padding: 0 24px; text-align:center; position:relative; z-index:1; display:grid; grid-template-columns: 1fr; gap: 48px; align-items:center; }
.hero__main{ max-width: 560px; margin: 0 auto; }
.hero__mascot{ width: clamp(190px,26vw,270px); margin: 0 auto 22px; border-radius: var(--r-lg); background: var(--paper-raised); box-shadow: var(--shadow); border: 1px solid var(--line); display:flex; align-items:center; justify-content:center; padding: 16px; }
.hero__mascot img{ width:100%; height:auto; animation: float 5s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} }
.hero__title{
  font-size: clamp(2.2rem,6vw,3.2rem); line-height: 1; letter-spacing: -0.02em; font-weight: 900;
  background: linear-gradient(120deg, var(--gold-deep) 0%, var(--gold-deep) 22%, var(--ink) 72%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__subtitle{ margin: 14px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem,2.2vw,1.35rem); color: var(--ink-soft); line-height:1.4; }
.hero__subtitle .hl{ color: var(--gold-deep); }
.hero__lede{ margin: 20px auto 0; max-width: 56ch; font-size: clamp(.95rem,1.2vw,1.05rem); color: var(--ink-soft); line-height:1.65; }
.blob{ position:absolute; border-radius: 50%; filter: blur(50px); opacity: .35; z-index:0; }
.blob--1{ width: 320px; height:320px; background: var(--gold-soft); top: -140px; left: -100px; }
.blob--2{ width: 260px; height:260px; background: var(--stone-tint); top: 40px; right: -120px; }
.hero__emotions{ max-width: 400px; margin: 0 auto; }
.hero__emotions-title{ font-family: var(--display); font-weight: 800; font-size: clamp(1.25rem,2vw,1.5rem); margin: 0 0 8px; }
.hero__emotions-lede{ font-size: .9rem; color: var(--ink-soft); line-height:1.6; margin: 0; }
.hero__emotions .emotion-card{ margin-top: 22px; }
@media (min-width: 961px){
  .hero__inner{ grid-template-columns: 1.05fr 0.95fr; gap: 32px; text-align: left; }
  .hero__main, .hero__emotions{ margin: 0; text-align: left; }
  .hero__mascot{ margin: 0 0 22px; }
  .hero__lede{ margin-left: 0; margin-right: 0; }
  .hero__emotions .emotion-card{ text-align: center; }
}

/* ---------- mapa das emoções ---------- */
.emotion-card{ max-width: 400px; margin: 30px auto 0; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(28px,4vw,40px); box-shadow: var(--shadow); text-align:center; }
.emotion-face{ width: 190px; height: auto; margin: 0 auto 16px; display:block; transition: opacity 160ms ease, transform 160ms ease; }
.emotion-sub{ font-size: .88rem; color: var(--ink-soft); margin: 0 0 20px; line-height:1.5; }
.emotion-buttons{ display:flex; justify-content:center; gap: 12px; margin-bottom: 20px; }
.emotion-btn{ width: 52px; height:52px; border-radius:50%; border: 2px solid var(--line-strong); background: var(--paper); font-size: 1.4rem; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition: border-color 160ms ease, transform 160ms ease, background 160ms ease; }
.emotion-btn:hover{ border-color: var(--gold); }
.emotion-btn[aria-pressed="true"]{ border-color: var(--gold-deep); background: var(--gold-tint); transform: scale(1.08); }
.emotion-status{ display:inline-flex; align-items:center; gap:8px; font-size: .85rem; font-weight:700; color: var(--gold-deep); background: var(--gold-tint); border-radius:999px; padding: 10px 18px; margin:0; }
.emotion-status .check{ font-weight:900; }

/* ---------- quem é o guará ---------- */
.who-grid{ margin-top: 34px; display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.who-card{ background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow); }
.who-card .ico{ width:46px; height:46px; border-radius:50%; background: var(--gold-tint); color: var(--gold-deep); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:14px; }
.who-card h3{ font-size: 1.05rem; margin-bottom: 8px; }
.who-card p{ font-size: .92rem; color: var(--ink-soft); line-height: 1.6; margin:0; }

/* ---------- quiz ---------- */
.quiz-card{ width:100%; max-width: 620px; }
.quiz-progress{ height: 8px; border-radius: 999px; background: var(--paper-sunken); overflow:hidden; margin-bottom: 26px; }
.quiz-progress__bar{ height:100%; background: var(--gold-deep); border-radius: 999px; width:0%; transition: width 300ms ease; }
.quiz-step{ font-family: var(--tag); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-mute); margin-bottom: 10px; }
.quiz-question{ font-family: var(--display); font-weight:800; font-size: clamp(1.2rem,2.4vw,1.5rem); margin-bottom: 22px; }
.quiz-options{ display:grid; gap: 12px; }
.quiz-option{ text-align:left; width:100%; background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); padding: 14px 18px; font-family: var(--body); font-size: .98rem; color: var(--ink); cursor:pointer; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.quiz-option:hover{ border-color: var(--gold); background: var(--gold-tint); }
.quiz-option:active{ transform: scale(0.99); }
.quiz-result{ text-align:center; }
.quiz-result .emoji{ font-size: 3rem; margin-bottom: 10px; }
.game-card .quiz-result h3{ font-size: 1.5rem; color: var(--gold-deep); margin-bottom: 10px; }
.quiz-result p{ color: var(--ink-soft); font-size: .98rem; line-height:1.6; max-width: 46ch; margin: 0 auto; }
.quiz-result .btn{ margin-top: 22px; }

/* ---------- jogos ---------- */
.games-grid{ margin-top: 36px; display:grid; grid-template-columns: repeat(2, 1fr); gap: 36px; align-items:stretch; }
.game-card{ background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px,3.5vw,34px); box-shadow: var(--shadow); height:100%; display:flex; flex-direction:column; }
.game-card h3{ font-size: 1.1rem; margin-bottom: 8px; }
.game-lede{ font-size: .85rem; color: var(--ink-soft); margin: 0 0 22px; line-height:1.55; }

.memory-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 14px; width:100%; max-width: 420px; margin: 0 auto; }
.memory-card{ aspect-ratio: 1; border-radius: var(--r-sm); border: 1.5px solid var(--line-strong); background: var(--paper); font-size: clamp(1.6rem, 6vw, 2.1rem); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition: transform 160ms ease, background 160ms ease, border-color 160ms ease; }
.memory-card.back{ background: var(--paper-sunken); color: var(--ink-mute); opacity: .7; }
.memory-card:not(.back):not(.matched){ background: var(--gold-tint); border-color: var(--gold); }
.memory-card.matched{ opacity: .45; cursor: default; border-color: var(--line); }
.memory-card:disabled{ cursor: default; }
.memory-meta{ display:flex; justify-content:space-between; align-items:center; margin-top: 18px; font-family: var(--tag); font-size:.78rem; color: var(--ink-mute); max-width: 420px; margin-left:auto; margin-right:auto; }
.memory-win{ text-align:center; margin-top: 14px; font-weight: 800; color: var(--gold-deep); font-size:.92rem; }

.phrase-assembled{ min-height: 52px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding: 12px 14px; border-radius: var(--r-md); background: var(--paper); border: 1.5px dashed var(--line-strong); margin-bottom: 14px; }
.phrase-word-done{ background: var(--gold-deep); color: var(--fixed-light); padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: .82rem; }
.phrase-pool{ display:flex; flex-wrap:wrap; gap:8px; }
.phrase-chip{ background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 8px 14px; font-family: var(--body); font-size: .85rem; color: var(--ink); cursor:pointer; transition: border-color 160ms ease, transform 160ms ease; }
.phrase-chip:hover{ border-color: var(--gold); }
.phrase-chip.shake{ animation: chipshake 300ms ease; }
@keyframes chipshake{ 0%,100%{ transform: translateX(0); } 25%{ transform: translateX(-4px); } 75%{ transform: translateX(4px); } }
.phrase-complete{ text-align:center; font-weight: 800; color: var(--gold-deep); font-size: .95rem; margin: 14px 0 0; }
.phrase-progress{ font-family: var(--tag); font-size: .7rem; color: var(--ink-mute); margin: 14px 0 0; }

.sequence-pads{ display:grid; grid-template-columns: repeat(2,1fr); gap: 16px; width:100%; max-width: 300px; margin: 0 auto; }
.sequence-pad{ aspect-ratio: 1; border-radius: var(--r-md); border: 2px solid var(--line-strong); background: color-mix(in srgb, var(--pad-color) 25%, var(--paper)); font-size: clamp(2rem, 8vw, 2.6rem); cursor:pointer; padding:0; transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease; }
.sequence-pad.active{ filter: brightness(1.35); transform: scale(1.05); border-color: var(--pad-color); }
.sequence-pad:disabled{ cursor: default; }
.sequence-meta{ display:flex; justify-content:space-between; align-items:center; margin-top: 18px; font-family: var(--tag); font-size:.78rem; color: var(--ink-mute); max-width: 300px; margin-left:auto; margin-right:auto; }
.sequence-status{ text-align:center; margin-top: 14px; font-weight: 800; color: var(--gold-deep); font-size: .95rem; min-height: 1.2em; }

.puzzle-grid{ display:grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); gap: 4px; width:100%; max-width: 340px; aspect-ratio: 640 / 973; margin: 0 auto; border-radius: var(--r-md); overflow:hidden; border: 1.5px solid var(--line-strong); background: var(--paper); }
.puzzle-tile{ background-image: url('../imagem/guara-mascote.webp'); background-size: 300% 300%; border: none; padding:0; cursor:pointer; outline: 3px solid transparent; outline-offset: -3px; transition: outline-color 120ms ease; }
.puzzle-tile.selected{ outline-color: var(--gold-deep); }

@media (max-width: 760px){
  .games-grid{ grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- acalmar ---------- */
.breath-wrap{ margin-top: 30px; display:flex; flex-direction:column; align-items:center; gap: 26px; }
.breath-circle{
  width: 200px; height:200px; border-radius:50%; background: radial-gradient(circle, var(--gold-tint), var(--paper-raised));
  border: 2px solid var(--gold-soft); display:flex; align-items:center; justify-content:center; text-align:center;
  transform: scale(1); transition: transform 4s ease-in-out; box-shadow: var(--shadow);
}
.breath-circle span{ font-family: var(--display); font-weight:800; color: var(--gold-deep); font-size: 1.05rem; padding: 0 20px; }
.tips-grid{ margin-top: 40px; display:grid; grid-template-columns: repeat(4,1fr); gap: 14px; max-width: 900px; }
.tip-card{ background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; text-align:center; }
.tip-card .ico{ font-size:1.5rem; margin-bottom:8px; }
.tip-card p{ margin:0; font-size:.85rem; color: var(--ink-soft); line-height:1.5; }

/* ---------- colorir ---------- */
.colorir-grid{ margin-top: 36px; display:grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 18px; }
.color-card{ background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; box-shadow: var(--shadow); display:flex; flex-direction:column; }
.color-card__thumb{ display:block; width:100%; height:auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--fixed-light); }
.color-card__title{ margin: 10px 0 12px; font-size:.82rem; color: var(--ink); font-weight:700; line-height:1.35; flex:1; }
.color-card__btn{ width:100%; justify-content:center; font-size:.8rem; padding: 9px 12px; }
.colorir-note{ margin-top: 26px; font-size:.85rem; color: var(--ink-soft); max-width: 60ch; }

/* ---------- minas carousel ---------- */
.minas-carousel{ margin-top: 36px; max-width: 620px; margin-left:auto; margin-right:auto; }
.minas-carousel__viewport{ overflow-x:auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-behavior:smooth; border-radius: var(--r-lg); }
.minas-carousel__viewport::-webkit-scrollbar{ display:none; }
html.reduce-motion .minas-carousel__viewport{ scroll-behavior:auto; }
.minas-carousel__track{ display:flex; }
.minas-slide{ flex: 0 0 100%; max-width:100%; scroll-snap-align:center; margin:0; padding:0 3px; box-sizing:border-box; text-align:center; }
.minas-slide img{ display:block; width:100%; max-height:70vh; object-fit:contain; border-radius: var(--r-lg); border:1px solid var(--line); box-shadow: var(--shadow); background: var(--fixed-light); }
.minas-slide figcaption{ margin-top:14px; font-family: var(--display); font-weight:800; font-size:1.05rem; color: var(--ink); }
.minas-carousel__controls{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:20px; }
.minas-nav-btn{ width:42px; height:42px; border-radius:50%; border:2px solid var(--gold-deep); background:var(--paper-raised); color:var(--gold-deep); font-size:1.3rem; font-weight:900; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: background 180ms ease, color 180ms ease; flex-shrink:0; }
.minas-nav-btn:hover:not(:disabled){ background:var(--gold-deep); color:var(--fixed-light); }
.minas-nav-btn:disabled{ opacity:.35; cursor:default; }
.minas-carousel__dots{ display:flex; gap:7px; flex-wrap:wrap; justify-content:center; max-width: 220px; }
.minas-dot{ width:9px; height:9px; border-radius:50%; background: var(--line-strong); border:none; padding:0; cursor:pointer; }
.minas-dot.is-active{ background: var(--gold-deep); width:20px; border-radius:999px; }
.minas-dot.is-collected{ box-shadow: 0 0 0 2px var(--gold-tint); }
.minas-dot.is-collected.is-active{ box-shadow:none; }

.minas-carousel__collect{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:18px; }
.carousel-progress{ font-family: var(--tag); font-size:.76rem; letter-spacing:.02em; color: var(--ink-soft); background: var(--paper-raised); border:1px solid var(--line); border-radius:999px; padding:6px 14px; }
.carousel-progress.is-complete{ color: var(--gold-deep); background: var(--gold-tint); border-color: var(--gold-deep); font-weight:700; }
.minas-collect-btn{ display:inline-flex; align-items:center; gap:8px; border:2px solid var(--gold-deep); background: var(--paper-raised); color: var(--gold-deep); font-family: var(--display); font-weight:700; font-size:.85rem; border-radius:999px; padding:8px 16px; cursor:pointer; transition: background 180ms ease, color 180ms ease; }
.minas-collect-btn:hover{ background: var(--gold-deep); color: var(--fixed-light); }
.minas-collect-btn[aria-pressed="true"]{ background: var(--gold-deep); color: var(--fixed-light); }
.minas-collect-btn .collect-icon{ font-size:1.05rem; line-height:1; }
.minas-collect-btn.is-pop{ animation: collectpop 420ms ease; }
@keyframes collectpop{ 0%{ transform: scale(1);} 40%{ transform: scale(1.15);} 100%{ transform: scale(1);} }
html.reduce-motion .minas-collect-btn.is-pop{ animation:none !important; }

/* ---------- footer ---------- */
footer{ margin-top: 20px; padding: 44px 0 32px; border-top: 1px solid var(--line); }
.footer-inner{ display:flex; flex-wrap:wrap; gap: 24px; justify-content:space-between; align-items:flex-start; }
.footer-brand{ font-family: var(--display); font-weight:800; font-size:1.05rem; }
.footer-brand .inf{ color: var(--gold-deep); }
.footer-note{ max-width: 42ch; font-size:.85rem; color: var(--ink-soft); line-height:1.6; margin-top:10px; }
.footer-links{ display:flex; flex-direction:column; gap:8px; font-size:.88rem; }
.footer-links a{ text-decoration:none; color: var(--ink-soft); font-weight:700; }
.footer-links a:hover{ color: var(--gold-deep); }
.footer-bottom{ margin-top: 30px; font-family: var(--tag); font-size:.72rem; color: var(--ink-mute); }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .who-grid{ grid-template-columns: 1fr; }
  .tips-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .navbar__links{ display:none; }
  .colorir-grid{ grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 12px; }
}