/* =========================================================
   Dino Aprende — tema "Terra dos Dinossauros"
   Estilo autocolante: contorno grosso + sombra sólida.
   ========================================================= */
:root {
  --sky: #CDEEF7;
  --sky-low: #EAF8E4;
  --jungle: #2F8F5B;
  --jungle-deep: #1E6B42;
  --leaf: #8BD450;
  --lava: #FF8A3D;
  --earth: #7A4E2D;
  --egg: #FFF6D8;
  --ink: #1F3B2C;
  --hill1: #8BD450;
  --hill2: #2F8F5B;
  --white: #FFFFFF;
  --ok: #3BB273;
  --line: 4px;
  --lift: 0 6px 0 var(--ink);
  --font: 'Fredoka', ui-rounded, 'Nunito', 'Trebuchet MS', system-ui, sans-serif;
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sky: #7FB8C9; --sky-low: #B8DCB0; }
}
:root[data-theme="dark"] { --sky: #7FB8C9; --sky-low: #B8DCB0; }

*, *::before, *::after { box-sizing: inherit; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(var(--sky) 0%, var(--sky-low) 70%);
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 4px dashed var(--lava); outline-offset: 4px; }

#app { position: relative; height: 100%; overflow: hidden; }

/* ---------- Paisagem ---------- */
.scenery { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34%; pointer-events: none; }
.scenery .volcano { fill: var(--earth); }
.scenery .lava { fill: #FF8A3D; }
.scenery .hill-back { fill: var(--hill1); }
.scenery .hill-front { fill: var(--hill2); }
.scenery .sc { display: none; }
:root:not([data-world]) .sc-dino, :root[data-world="dino"] .sc-dino,
:root[data-world="patas"] .sc-patas, :root[data-world="heroi"] .sc-heroi, :root[data-world="corrida"] .sc-corrida { display: inline; }
.scenery .tree { fill: #4CA85A; } .scenery .trunk { fill: #8A5A33; }
.scenery .house { fill: #FFF6D8; stroke: var(--ink); stroke-width: 4; } .scenery .roof { fill: #FF8A3D; stroke: var(--ink); stroke-width: 4; }
.scenery .door { fill: #2F9BD6; }
.scenery .bld { fill: #8F7BDB; } .scenery .bld2 { fill: #6B55C0; } .scenery .win rect { fill: #FFD23F; }
.scenery .road { fill: #3C3F45; } .scenery .lane { stroke: #fff; stroke-width: 5; stroke-dasharray: 34 26; }
.scenery .chk rect { fill: #fff; }

/* ---------- Paletas dos mundos ---------- */
:root[data-world="patas"] { --sky: #CFE8FF; --sky-low: #FFF3E0; --leaf: #FFB347; --jungle: #2F9BD6; --lava: #2F9BD6; --earth: #C0622F; --hill1: #A7DB6A; --hill2: #4CA85A; }
:root[data-world="heroi"] { --sky: #DCD4FF; --sky-low: #FFF0F6; --leaf: #19B3A6; --jungle: #7B4BD1; --lava: #FFD23F; --earth: #5B3FA8; --hill1: #B8A9F0; --hill2: #3A2A73; }
:root[data-world="corrida"] { --sky: #D6F1FF; --sky-low: #F6F6F2; --leaf: #FFD23F; --jungle: #3C3F45; --lava: #E6453A; --earth: #3C3F45; --hill1: #9ED36A; --hill2: #5DAA4A; }

/* ---------- Ecrãs ---------- */
.screen {
  position: absolute; inset: 0; display: none;
  padding: max(12px, env(safe-area-inset-top, 0px)) 16px max(12px, env(safe-area-inset-bottom, 0px));
}
.screen.active { display: flex; animation: screen-in .35s ease-out; }
@keyframes screen-in { from { opacity: 0; transform: scale(.97); } }

.mascot-slot { display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
.mascot-slot .dino { width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
.dino svg { width: 100%; height: 100%; overflow: visible; display: block; }

/* Início (ecrã de escolha) */
#screen-home { flex-direction: column; align-items: center; justify-content: center; gap: 3vmin; }
.slot-home { width: min(40vmin, 260px); height: min(40vmin, 260px); flex-shrink: 1; }
.home-menu { display: flex; flex-direction: column; align-items: center; gap: 4vmin; }
@media (orientation: landscape) {
  #screen-home { flex-direction: row; gap: 5vmin; }
  .slot-home { width: min(58vmin, 320px); height: min(58vmin, 320px); }
  .home-menu { flex-direction: row; gap: 4vmin; }
  .home-menu .hub-btn { width: clamp(64px, 19vmin, 110px); font-size: clamp(34px, 9vmin, 58px); border-radius: 22px; }
}

.big-round {
  width: clamp(96px, 26vmin, 150px); aspect-ratio: 1; border-radius: 50%;
  border: var(--line) solid var(--ink); box-shadow: var(--lift);
  display: grid; place-items: center; transition: transform .12s;
}
.big-round:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.btn-go { background: var(--leaf); animation: breathe 1.8s ease-in-out infinite; }
.btn-go svg { width: 58%; }
.btn-go path { fill: var(--white); stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; }
@keyframes breathe { 50% { transform: scale(1.07); } }

/* ---------- Jogo ---------- */
#screen-game { flex-direction: column; gap: 8px; }
.mission-track { display: flex; justify-content: center; gap: 14px; min-height: 44px; }
.mission-track .step { width: 40px; height: 44px; opacity: .3; transition: opacity .3s, transform .3s; }
.mission-track .step path { fill: var(--earth); }
.mission-track .step.done { opacity: 1; transform: scale(1.12); }
.mission-track .step.now { opacity: .75; animation: breathe 1.4s infinite; }

.stage { flex: 1; min-height: 0; display: grid; gap: 8px; grid-template-rows: 30% 1fr; }
.slot-game { min-height: 0; }
.play { position: relative; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vmin; }

@media (orientation: landscape) {
  .stage { grid-template-rows: 1fr; grid-template-columns: 34% 1fr; }
  .slot-game { align-items: center; }
}

/* Botões / cartões base (estilo autocolante) */
.tile {
  background: var(--egg); border: var(--line) solid var(--ink); border-radius: 26px;
  box-shadow: var(--lift); display: grid; place-items: center;
}

/* --- Palmas (sílabas) --- */
.word-card { width: clamp(150px, 38vmin, 240px); aspect-ratio: 1; flex-direction: column; gap: 4px; padding: 10px; }
.word-card .pic { font-size: clamp(64px, 20vmin, 120px); line-height: 1; }
.word-card .word { font-size: clamp(22px, 5vmin, 30px); font-weight: 600; letter-spacing: .02em; }
.word-card .word span.lit { color: var(--lava); }
.syl-row { display: flex; align-items: center; gap: 4vmin; }
.drum {
  width: clamp(110px, 30vmin, 170px); aspect-ratio: 1; border-radius: 50%;
  background: var(--lava); border: var(--line) solid var(--ink); box-shadow: var(--lift);
  font-size: clamp(56px, 15vmin, 90px); display: grid; place-items: center; touch-action: none;
}
.drum.hit { animation: hit .18s ease-out; }
@keyframes hit { 50% { transform: scale(.9) translateY(4px); box-shadow: 0 1px 0 var(--ink); } }
.dots { display: flex; gap: 12px; min-height: 30px; }
.dots i { width: 26px; height: 26px; border-radius: 50%; border: var(--line) solid var(--ink); background: var(--white); }
.dots i.on { background: var(--lava); animation: pop .25s ease-out; }
.dots i.guide { background: var(--leaf); }

/* --- Dar folhas --- */
.target-num { display: flex; align-items: center; gap: 14px; padding: 6px 18px; border-radius: 22px; }
.target-num b { font-size: clamp(44px, 12vmin, 72px); line-height: 1; }
.num-dots { display: grid; grid-template-columns: repeat(5, 16px); gap: 6px; }
.num-dots i { width: 16px; height: 16px; border-radius: 50%; background: var(--jungle); }
.num-dots.many { grid-template-columns: repeat(5, 10px); gap: 4px 4px; }
.num-dots.many i { width: 10px; height: 10px; }
.num-dots i.eaten { background: var(--lava); }
.leaf-field { position: relative; width: 100%; flex: 1; max-height: 60%; }
.leaf {
  --s: 80px;
  position: absolute; width: var(--s); height: var(--s); padding: 0; margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  font-size: calc(var(--s) * .66); display: grid; place-items: center;
  background: var(--white); border: var(--line) solid var(--ink); border-radius: 50%;
  box-shadow: 0 4px 0 var(--ink); touch-action: none; transition: transform .25s;
}
.leaf.dragging { transition: none; z-index: 20; box-shadow: 0 10px 0 var(--ink); }
.leaf.gone { transform: scale(0) !important; opacity: 0; transition: transform .25s, opacity .25s; pointer-events: none; }
.dino-target .dino { filter: drop-shadow(0 0 0 transparent); transition: filter .2s; }
.dino-target.hover .dino { filter: drop-shadow(0 0 14px var(--lava)); }

/* --- Ovos --- */
.nest { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 94%; }
.egg { position: relative; width: var(--es, clamp(64px, 17vmin, 100px)); aspect-ratio: 4 / 5; border: 0; background: none; padding: 0; touch-action: none; }
.egg .shell, .egg .baby { position: absolute; inset: 0; }
.egg .shell {
  border-radius: 50% 50% 48% 48% / 60% 60% 40% 40%;
  background:
    radial-gradient(circle at 30% 30%, var(--leaf) 0 9%, transparent 10%),
    radial-gradient(circle at 68% 55%, var(--leaf) 0 7%, transparent 8%),
    radial-gradient(circle at 40% 75%, var(--leaf) 0 6%, transparent 7%),
    var(--egg);
  border: var(--line) solid var(--ink); transition: transform .5s, opacity .5s;
}
.egg .top { clip-path: polygon(0 0,100% 0,100% 56%,87% 48%,75% 58%,62% 48%,50% 58%,37% 48%,25% 58%,12% 48%,0 56%); }
.egg .bottom { clip-path: polygon(0 56%,12% 48%,25% 58%,37% 48%,50% 58%,62% 48%,75% 58%,87% 48%,100% 56%,100% 100%,0 100%); }
.egg .baby { display: grid; place-items: center; font-size: calc(var(--es, 80px) * .6); transform: scale(0); transition: transform .35s .15s cubic-bezier(.3,1.6,.5,1); }
.egg .cover { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--es, 80px) * .85); line-height: 1; transition: transform .45s, opacity .45s; }
.egg.boxed .baby { transform: scale(0); }
.egg.open .cover { transform: translateY(-70%) scale(.6); opacity: 0; }
.egg.boxed.open .baby { transform: scale(1); }
.egg.wobble { animation: wobble .45s ease-in-out; }
.egg.open .top { transform: translateY(-60%) rotate(-25deg); opacity: 0; }
.egg.open .baby { transform: scale(1) translateY(-18%); }
@keyframes wobble { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }

.choices { display: flex; gap: 4vmin; flex-wrap: wrap; justify-content: center; }
.choice { width: clamp(92px, 24vmin, 130px); aspect-ratio: 1; flex-direction: column; gap: 6px; }
.choice b { font-size: clamp(40px, 11vmin, 64px); line-height: 1; }
.choice.nope { animation: nope .4s; }
.choice.glow { animation: glow 1s infinite; background: var(--leaf); }
.choice.right { background: var(--leaf); }
@keyframes nope { 20%,60% { transform: translateX(-10px); } 40%,80% { transform: translateX(10px); } }
@keyframes glow { 50% { transform: scale(1.08); } }

/* --- Pares --- */
.cards { display: grid; gap: 12px; perspective: 900px; }
.card { width: var(--cw, clamp(72px, 19vmin, 118px)); aspect-ratio: 3 / 4; position: relative; border: 0; background: none; padding: 0; touch-action: none; }
.card .face {
  position: absolute; inset: 0; border: var(--line) solid var(--ink); border-radius: 20px; box-shadow: 0 5px 0 var(--ink);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .4s; display: grid; place-items: center;
}
.card .back { background: var(--jungle); }
.card .back svg { width: 55%; }
.card .back path { fill: var(--leaf); }
.card .front { background: var(--white); transform: rotateY(180deg); }
.card .front svg { width: 72%; }
.card.flip .back { transform: rotateY(-180deg); }
.card.flip .front { transform: rotateY(0); }
.card.matched .front { background: var(--egg); animation: pop .4s; }
.card.glow .back { animation: glow 1s infinite; }

/* ---------- Dino (mascote) ---------- */

.dino .body-group { transform-origin: 100px 190px; animation: bob 2.6s ease-in-out infinite; }
.dino .lids { transform-origin: 0 0; transform-box: fill-box; transform: scaleY(0); animation: blink 4.5s infinite; }
.dino .mouth-open, .dino .zzz { opacity: 0; }
.dino .arm-wave { transform-box: fill-box; transform-origin: 50% 10%; }
.dino.happy .body-group { animation: jump .6s cubic-bezier(.3,1.5,.5,1) 2; }
.dino.eat .mouth-open { opacity: 1; }
.dino.eat .mouth-smile { opacity: 0; }
.dino.wave .arm-wave { animation: wave .5s ease-in-out 3; }
.dino.talk .mouth-open { animation: talk .3s steps(2) infinite; }
.dino.sleep .lids { animation: none; transform: scaleY(1); }
.dino.sleep .body-group { animation: breathe-slow 3.5s ease-in-out infinite; }
.dino.sleep .zzz { opacity: 1; animation: zzz 3s ease-in-out infinite; }
.dino.sleep .mouth-smile { opacity: .6; }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes jump { 40% { transform: translateY(-34px) scale(1.04, .96); } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(0); } 96% { transform: scaleY(1); } }
@keyframes wave { 50% { transform: rotate(-35deg); } }
@keyframes talk { 50% { opacity: 1; } }
@keyframes breathe-slow { 50% { transform: scale(1.02, .98); } }
@keyframes zzz { 0% { transform: translate(0, 0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(14px, -26px); opacity: 0; } }

/* ---------- Prémio ---------- */
#screen-reward { align-items: center; justify-content: center; }
.reward-wrap { display: flex; align-items: center; justify-content: center; gap: 5vmin; flex-wrap: wrap; }
.slot-reward { width: min(44vmin, 280px); height: min(44vmin, 280px); }
.sticker-reveal {
  width: clamp(140px, 38vmin, 220px); aspect-ratio: 1; border-radius: 50%;
  background: var(--white); border: var(--line) solid var(--ink); box-shadow: var(--lift);
  font-size: clamp(80px, 22vmin, 130px); display: grid; place-items: center;
}
.sticker-reveal.show { animation: sticker-in .8s cubic-bezier(.3,1.6,.5,1); }
@keyframes sticker-in { from { transform: scale(0) rotate(-200deg); } }

/* ---------- Botões de escolha ---------- */
.hub { display: grid; grid-template-columns: repeat(3, auto); gap: 3vmin; }
.hub-btn {
  width: clamp(80px, 22vmin, 118px); aspect-ratio: 1; border-radius: 28px;
  background: var(--egg); border: var(--line) solid var(--ink); box-shadow: var(--lift);
  font-size: clamp(40px, 11vmin, 62px); display: grid; place-items: center; transition: transform .12s; padding: 0;
}
.hub-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.hub-album { background: var(--leaf); }
.hub-sleep { background: #3D4E8A; }

/* ---------- Mundos ---------- */
.world-btn { font-size: 34px; }
.world-btn span { line-height: 1; }
#screen-worlds { align-items: center; justify-content: center; }
.worlds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4vmin; width: min(100%, 560px); }
@media (orientation: landscape) { .worlds { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 900px); } }
.world-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 10px;
  border: var(--line) solid var(--ink); border-radius: 28px; box-shadow: var(--lift); transition: transform .12s;
}
.world-card:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.world-card .world-art { width: 100%; aspect-ratio: 1; max-height: 30vh; display: block; }
.world-card .world-art svg { width: 100%; height: 100%; overflow: visible; }
.world-card .world-name { font-weight: 600; font-size: clamp(14px, 3.6vmin, 19px); text-align: center; }
.world-card[data-world="dino"] { background: #DDF3C6; }
.world-card[data-world="patas"] { background: #D4EBFF; }
.world-card[data-world="heroi"] { background: #E4DBFF; }
.world-card[data-world="corrida"] { background: #FFF1B8; }
.world-card .lids { transform: scaleY(0); transform-box: fill-box; }
.world-card .mouth-open, .world-card .zzz { opacity: 0; }

/* ---------- Álbum ---------- */
#screen-album { flex-direction: column; align-items: center; padding-top: max(20px, env(safe-area-inset-top, 0px)); }
.back-btn {
  position: absolute; left: 16px; top: max(14px, env(safe-area-inset-top, 0px));
  width: 64px; height: 64px; border-radius: 50%; background: var(--egg);
  border: var(--line) solid var(--ink); box-shadow: 0 4px 0 var(--ink); display: grid; place-items: center; z-index: 2;
}
.back-btn svg { width: 55%; }
.back-btn path { fill: none; stroke: var(--ink); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.album {
  margin-top: 80px; display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 12px; width: min(100%, 640px); max-height: calc(100% - 100px); overflow-y: auto; padding: 8px;
  background: var(--egg); border: var(--line) solid var(--ink); border-radius: 28px; box-shadow: var(--lift);
}
.album .slot { aspect-ratio: 1; display: grid; place-items: center; font-size: 44px; border-radius: 50%; background: var(--white); border: 3px dashed #C9C2A6; }
.album .slot.owned { border: 3px solid var(--ink); }
.album .slot:not(.owned) span { filter: grayscale(1) brightness(0); opacity: .12; }

/* ---------- Noite ---------- */
#screen-sleep { align-items: flex-end; justify-content: center; background: linear-gradient(#1D2653, #3D4E8A 70%); }
.night-sky { position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 20%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 30% 12%, #fff 50%, transparent 51%),
    radial-gradient(3px 3px at 52% 26%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 70% 10%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 86% 30%, #fff 50%, transparent 51%), radial-gradient(3px 3px at 20% 40%, #fff 50%, transparent 51%); }
.moon { position: absolute; right: 12%; top: 10%; width: 16vmin; aspect-ratio: 1; border-radius: 50%; box-shadow: -3vmin 2vmin 0 0 #FFE9A3; }
.slot-sleep { width: min(60vmin, 360px); height: min(60vmin, 360px); margin-bottom: 8vh; position: relative; }

/* ---------- Efeitos ---------- */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.confetti { position: absolute; width: 12px; height: 16px; border-radius: 3px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--dx), 110vh) rotate(var(--rot)); } }
@keyframes pop { 50% { transform: scale(1.25); } }

#hint-hand {
  position: fixed; left: 0; top: 0; z-index: 60; font-size: 64px; line-height: 1; pointer-events: none; opacity: 0;
  filter: drop-shadow(0 4px 0 rgba(31,59,44,.35)); transform: translate(-50%, -10%);
}
#hint-hand.tap { animation: hand-tap 1.1s ease-in-out 2; }
#hint-hand.drag { animation: hand-drag 1.8s ease-in-out 2; }
@keyframes hand-tap { 0%,100% { opacity: 0; } 20%,80% { opacity: 1; } 50% { transform: translate(-50%, 5%) scale(.85); } }
@keyframes hand-drag {
  0% { opacity: 0; transform: translate(-50%, -10%); }
  15% { opacity: 1; transform: translate(-50%, -10%) scale(.85); }
  75% { opacity: 1; transform: translate(calc(-50% + var(--dx)), calc(-10% + var(--dy))) scale(.85); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-10% + var(--dy))); }
}

/* ---------- Área dos pais ---------- */
#parent-gear {
  position: absolute; right: 10px; top: max(10px, env(safe-area-inset-top, 0px)); z-index: 40;
  width: 44px; height: 44px; padding: 0; border: 0; background: none; opacity: .4; touch-action: none;
}
#parent-gear svg { width: 100%; height: 100%; transform: rotate(-90deg); }
#parent-gear .cog { fill: var(--ink); transform: rotate(90deg); transform-origin: 20px 20px; }
#parent-gear .ring { fill: none; stroke: var(--lava); stroke-width: 4; stroke-dasharray: 107; stroke-dashoffset: 107; }
#parent-gear.holding { opacity: 1; }
#parent-gear.holding .ring { stroke-dashoffset: 0; transition: stroke-dashoffset 3s linear; }

#parent-panel {
  border: var(--line) solid var(--ink); border-radius: 22px; padding: 22px; width: min(92vw, 380px);
  font-family: system-ui, sans-serif; color: var(--ink); background: var(--white); box-shadow: var(--lift);
  max-height: calc(100% - 24px); overflow-y: auto;
  user-select: text; -webkit-user-select: text;
}
#parent-panel::backdrop { background: rgba(20, 40, 30, .55); }
#parent-panel h2 { margin: 0 0 14px; font-family: var(--font); font-size: 24px; }
#parent-panel label { display: grid; gap: 6px; margin-bottom: 14px; font-size: 15px; font-weight: 600; }
#parent-panel input { font: inherit; font-weight: 400; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 12px; }
.panel-info, .panel-sync { font-size: 14px; margin: 0 0 12px; color: #3E5A48; }
.panel-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.panel-actions button { flex: 1; padding: 12px; border-radius: 12px; border: 2px solid var(--ink); background: var(--egg); font-weight: 600; }
.panel-actions .primary { background: var(--jungle); color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =========================================================
   v1.3 — áreas e jogos novos
   ========================================================= */
#areas-hub { grid-template-columns: repeat(4, auto); }
#screen-area { flex-direction: column; align-items: center; justify-content: center; gap: 3vmin; }
.slot-area { width: min(36vmin, 220px); height: min(36vmin, 220px); }
@media (orientation: landscape) {
  #screen-area { flex-direction: row; gap: 6vmin; }
  .slot-area { width: min(52vmin, 260px); height: min(52vmin, 260px); }
}

/* --- Escolher --- */
.choose-top { display: flex; justify-content: center; }
.choose-top .word-card, .choose-top .tile:not(.flash-card):not(.replay) { flex-direction: column; }
.choose-top > .pic { font-size: clamp(64px, 18vmin, 110px); }
.choose-top:has(.pic) { background: var(--egg); border: var(--line) solid var(--ink); border-radius: 26px; box-shadow: var(--lift);
  padding: 8px 22px; flex-direction: column; align-items: center; }
.choose-top .word { font-size: clamp(20px, 5vmin, 28px); font-weight: 600; }
.pic-choice .pic { font-size: clamp(42px, 12vmin, 72px); line-height: 1; }
.pic-choice .word { font-size: clamp(14px, 3.6vmin, 18px); font-weight: 600; }
.pic-choice .face { font-size: clamp(52px, 14vmin, 80px); line-height: 1; }
.pic-choice.naming, .pat.naming { outline: 5px solid var(--lava); outline-offset: 3px; transform: scale(1.06); transition: transform .15s; }
.choices.wide .choice { width: clamp(130px, 40vmin, 230px); aspect-ratio: 5 / 4; }
.group { display: grid; grid-template-columns: repeat(5, auto); gap: 2px 4px; justify-content: center; }
.group i { font-style: normal; font-size: clamp(18px, 5vmin, 28px); line-height: 1.1; }
.replay { width: clamp(90px, 24vmin, 130px); aspect-ratio: 1; border-radius: 50%; font-size: clamp(42px, 11vmin, 64px); background: var(--leaf); }

.flash-card { width: clamp(150px, 40vmin, 220px); aspect-ratio: 1; position: relative; }
.flash-card .flash-dots, .flash-card .flash-cover { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .15s; }
.flash-card .flash-cover { font-size: clamp(60px, 16vmin, 96px); }
.flash-card .flash-dots { opacity: 0; }
.flash-card.showing .flash-dots { opacity: 1; }
.flash-card.showing .flash-cover { opacity: 0; }
.dice-face { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8%; width: 72%; aspect-ratio: 1; }
.frame-face { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6%; width: 84%; }
.dice-face i, .frame-face i { aspect-ratio: 1; border-radius: 50%; }
.dice-face i.on, .frame-face i.on { background: var(--ink); }
.frame-face i { border: 2px dashed #C9C2A6; }
.frame-face i.on { border-color: var(--ink); }

/* --- Tabuleiro --- */
.board-wrap { position: relative; display: flex; align-items: center; gap: 8px; max-width: 100%; }
.board-start { font-size: calc(var(--sq, 48px) * .7); font-size: clamp(26px, 7vmin, 40px); align-self: flex-start; }
.track { display: grid; gap: 6px; }
.cell {
  width: var(--sq); height: var(--sq); padding: 0; border-radius: 12px; border: 3px solid var(--ink);
  background: var(--white); display: grid; place-items: end center; font-size: calc(var(--sq) * .34); touch-action: none;
}
.cell b { padding-bottom: 2px; }
.cell.five { background: var(--egg); }
.cell.visited { background: var(--leaf); }
.cell.glow { animation: glow 1s infinite; background: var(--lava); }
.cell.nope { animation: nope .4s; }
.token { position: absolute; width: calc(var(--sq) * 1.05); height: calc(var(--sq) * 1.05); pointer-events: none; z-index: 3;
  margin: calc(var(--sq) * -.85) 0 0 calc(var(--sq) * -.525); transition: left .35s ease-out, top .35s ease-out; }
.token svg { width: 100%; height: 100%; overflow: visible; }
.dice-btn { width: clamp(84px, 22vmin, 118px); aspect-ratio: 1; font-size: clamp(44px, 12vmin, 64px); }
.dice-btn.rolling { animation: wobble .2s linear infinite; }

/* --- Classificar --- */
.tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 94%; min-height: 70px; }
.piece {
  width: clamp(58px, 15vmin, 80px); height: clamp(58px, 15vmin, 80px); border-radius: 18px; background: var(--white);
  border: var(--line) solid var(--ink); box-shadow: 0 4px 0 var(--ink); display: grid; place-items: center;
  touch-action: none; transition: transform .25s; position: relative;
}
.piece svg { width: 78%; height: 78%; }
.piece.dragging { transition: none; z-index: 20; }
.piece.glow { animation: glow 1s infinite; }
.bins { display: flex; justify-content: center; gap: 3vmin; width: 100%; flex-wrap: wrap; }
.bin {
  flex: 1 1 0; max-width: 220px; min-width: 96px; min-height: clamp(110px, 26vmin, 170px); border-radius: 22px;
  border: var(--line) dashed var(--ink); background: var(--egg); display: flex; flex-direction: column; align-items: center; padding: 8px; gap: 6px;
}
.bin-label { display: grid; place-items: center; height: 44px; }
.bin-label svg { height: 40px; width: 40px; }
.bin-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.bin-in .piece { width: 38px; height: 38px; border-radius: 10px; border-width: 2px; box-shadow: none; }
.bin.hover { border-style: solid; background: #FFF0C9; }
.bin.glow { animation: glow 1s infinite; }
.bin.nope { animation: nope .4s; }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink); }
.size-ico { display: grid; place-items: center; }
.size-ico.big svg { width: 100%; height: 100%; }
.size-ico.small svg { width: 55%; height: 55%; }
.bin-label .size-ico.big svg { width: 40px; height: 40px; }
.bin-label .size-ico.small svg { width: 22px; height: 22px; }

.pattern-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 96%; }
.pat { width: clamp(44px, 11vmin, 64px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 14px;
  background: var(--white); border: 3px solid var(--ink); font-weight: 700; font-size: 28px; }
.pat svg { width: 80%; height: 80%; }
.pat.slot { border-style: dashed; background: var(--egg); }
.pat.slot.hover { background: #FFF0C9; border-style: solid; }
.pat.slot.filled { border-style: solid; background: var(--leaf); }
.pat.slot.nope { animation: nope .4s; }

.scene { position: relative; width: min(96%, 560px); }
.scene svg { width: 100%; height: auto; display: block; }
.scene-item { position: absolute; margin: calc(clamp(58px, 15vmin, 80px) / -2) 0 0 calc(clamp(58px, 15vmin, 80px) / -2);
  font-size: clamp(34px, 9vmin, 48px); transition: left .3s, top .3s; }
.scene-target { position: absolute; width: 2px; height: 2px; pointer-events: none; }

/* =========================================================
   v1.4 — Histórias
   ========================================================= */
/* Cena ilustrada (escala com o cartão graças às unidades cqw) */
.scene-card {
  position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; container-type: inline-size;
  border-radius: 22px; border: var(--line) solid var(--ink);
}
.scene-card .el { position: absolute; transform: translate(-50%, -50%); font-size: calc(var(--s, 1) * 12cqw); line-height: 1; }
.scene-card .el.m { width: calc(var(--s, 1) * 24cqw); }
.scene-card .el .in { display: inline-block; }
.scene-card .el.m .in, .scene-card .el.m svg { display: block; width: 100%; height: auto; overflow: visible; }
.scene-card .lids { transform: scaleY(0); transform-box: fill-box; }
.scene-card .mouth-open, .scene-card .zzz { opacity: 0; }
.a-bounce { animation: s-bounce 1.6s ease-in-out infinite; }
.a-float { animation: s-float 3s ease-in-out infinite; }
.a-shake { animation: s-shake 1.8s ease-in-out infinite; }
.el .in.tap { animation: pop .4s; }
@keyframes s-bounce { 50% { transform: translateY(-12%); } }
@keyframes s-float { 50% { transform: translate(6%, -10%); } }
@keyframes s-shake { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-10deg); } 86% { transform: rotate(10deg); } 94% { transform: rotate(-6deg); } }

.bg-dia { background: linear-gradient(#BFE6FF 0 72%, #8BD450 72% 100%); }
.bg-lago { background: linear-gradient(#BFE6FF 0 58%, #8BD450 58% 66%, #5DB7E8 66% 100%); }
.bg-casa { background: linear-gradient(#FFE8C9 0 76%, #C98A4B 76% 100%); }
.bg-cidade { background: linear-gradient(#DCD4FF 0 74%, #9A9AA8 74% 100%); }
.bg-estrada { background: linear-gradient(#D6F1FF 0 62%, #9ED36A 62% 70%, #3C3F45 70% 100%); }
.bg-estrada::after { content: ''; position: absolute; left: 0; right: 0; top: 85%; height: 1.4%; background: repeating-linear-gradient(90deg, #fff 0 6%, transparent 6% 12%); }
.bg-neve { background: linear-gradient(#E6F3FF 0 70%, #FFFFFF 70% 100%); }
.bg-noite { background: linear-gradient(#1D2653 0 72%, #2F5B3A 72% 100%); }

/* Biblioteca */
#screen-library { flex-direction: column; align-items: center; padding-top: max(20px, env(safe-area-inset-top, 0px)); }
.library {
  margin-top: 76px; width: min(100%, 820px); max-height: calc(100% - 90px); overflow-y: auto; padding: 6px 6px 18px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px;
}
.book {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 10px; text-align: center;
  background: var(--egg); border: var(--line) solid var(--ink); border-radius: 22px; box-shadow: var(--lift);
}
.book:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.book .scene-card { border-width: 3px; border-radius: 14px; }
.book-title { font-weight: 600; font-size: 15px; line-height: 1.2; }
.book-star { position: absolute; top: -10px; right: -8px; font-size: 30px; }

/* Leitor */
#screen-story { flex-direction: column; align-items: center; justify-content: center; }
.story { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding-top: 56px; }
.story-card {
  width: min(100%, 60vh, 640px); display: flex; flex-direction: column; gap: 10px; padding: 10px;
  background: var(--white); border: var(--line) solid var(--ink); border-radius: 28px; box-shadow: var(--lift);
}
.story-card.in-next { animation: page-next .35s ease-out; }
.story-card.in-prev { animation: page-prev .35s ease-out; }
@keyframes page-next { from { transform: translateX(14%) rotate(2deg); opacity: 0; } }
@keyframes page-prev { from { transform: translateX(-14%) rotate(-2deg); opacity: 0; } }
.story-text { margin: 2px 6px 4px; font-size: clamp(19px, 5vmin, 28px); line-height: 1.5; font-weight: 500; user-select: none; }
.story-text .w { border-radius: 8px; padding: 0 2px; transition: background .12s; cursor: pointer; }
.story-text .w.on { background: #FFE08A; box-shadow: 0 0 0 2px #FFE08A; }
.story-bar { width: min(80%, 480px); height: 10px; border-radius: 6px; background: rgba(31, 59, 44, .15); overflow: hidden; }
.story-fill { display: block; height: 100%; width: 0; background: var(--leaf); transition: width .3s; }
.story-nav { display: flex; gap: 6vmin; align-items: center; }
.nav-btn {
  width: clamp(64px, 17vmin, 88px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: var(--egg); border: var(--line) solid var(--ink); box-shadow: 0 5px 0 var(--ink); font-size: clamp(28px, 8vmin, 40px); padding: 0;
}
.nav-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.nav-btn svg { width: 50%; }
.nav-btn path { fill: none; stroke: var(--ink); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.nav-btn.next { background: var(--leaf); width: clamp(76px, 21vmin, 104px); }
.story-question, .story-end { display: flex; flex-direction: column; align-items: center; gap: 4vmin; }
.story-q { font-size: clamp(22px, 6vmin, 34px); font-weight: 600; text-align: center; margin: 0 12px; }
.end-star { font-size: clamp(90px, 26vmin, 150px); animation: sticker-in .8s cubic-bezier(.3,1.6,.5,1); }

@media (orientation: landscape) {
  .story { flex-direction: row; flex-wrap: wrap; padding: 6px 8px 6px 78px; gap: 12px 3vmin; }
  .story-card { flex-direction: row; align-items: center; width: min(100%, 900px); }
  .story-card .scene-card { width: min(48%, 64vh); flex-shrink: 0; }
  .story-card .story-text { flex: 1; }
  .story-bar { order: 3; width: min(60%, 480px); }
  .story-nav { order: 2; }
  #btn-story-close { top: 10px; }
}

/* Voz: botão nas histórias e opções na área dos pais */
.voice-toggle { left: auto; right: 64px; font-size: 30px; }
.voice-toggle.off { background: #E4E0D2; }
@media (orientation: landscape) { #btn-story-voice { top: 10px; } }
.voice-set { border: 2px solid var(--ink); border-radius: 14px; padding: 10px 12px 4px; margin: 0 0 14px; }
.voice-set legend { font-weight: 700; padding: 0 6px; }
#parent-panel label.check { display: flex; align-items: center; gap: 10px; font-weight: 500; margin-bottom: 10px; }
#parent-panel label.check input { width: 22px; height: 22px; padding: 0; }
#parent-panel select { font: inherit; font-weight: 400; padding: 10px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; }
.small-btn { padding: 8px 12px; border-radius: 12px; border: 2px solid var(--ink); background: var(--egg); font-weight: 600; margin-bottom: 10px; }
#voice-help { background: #FFF6D8; border-radius: 10px; padding: 8px 10px; line-height: 1.45; }

/* Cenas: mascote a dormir / contente; desenho sem cor */
.scene-card .st-sleep .lids { transform: scaleY(1); }
.scene-card .st-sleep .zzz { opacity: 1; }
.scene-card .st-happy .mouth-open { opacity: 1; }
.scene-card .st-happy .mouth-smile { opacity: 0; }
.scene-card .gray .in { filter: grayscale(1) opacity(.6); }
.library-title { grid-column: 1 / -1; margin: 0 0 2px; font-size: clamp(18px, 4.6vmin, 24px); text-align: center; }