:root {
  --ink: #4a3b6b;
  --ink-soft: #7c6f99;
  --paper: #fffaf3;
  --pink: #ff7eb6;
  --lilac: #b9a2ff;
  --mint: #7fd98c;
  --sky: #8acfff;
  --sun: #ffd36e;
  --peach: #ff8e6e;
  --zone: #ff9fbf;
  --good: #46c46a;
  --radius: 26px;
  --shadow: 0 10px 0 rgba(74, 59, 107, 0.12), 0 18px 40px rgba(74, 59, 107, 0.18);
  --font: ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', 'Nunito', 'Varela Round', 'Segoe UI', system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #bfe6ff;
  font-family: var(--font); color: var(--ink);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  overscroll-behavior: none; touch-action: manipulation;
}
button { font-family: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
canvas#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---------- Botões ---------- */
.btn-round {
  width: clamp(44px, 9vmin, 64px); height: clamp(44px, 9vmin, 64px); border-radius: 50%;
  background: #fff; box-shadow: 0 5px 0 rgba(74,59,107,.15), 0 8px 20px rgba(74,59,107,.15);
  font-size: clamp(20px, 4.2vmin, 30px); display: grid; place-items: center; flex: none;
  transition: transform .15s;
}
.btn-round.pressed, .btn-big.pressed, .choice.pressed, .zone-card.pressed, .lvl.pressed { transform: scale(.92); }
.btn-big {
  min-width: clamp(64px, 14vmin, 96px); height: clamp(56px, 11vmin, 76px); padding: 0 24px; border-radius: 40px;
  background: #fff; font-weight: 900; font-size: clamp(20px, 4vmin, 28px);
  box-shadow: 0 6px 0 rgba(74,59,107,.18); transition: transform .15s;
}
.btn-big.primary { background: linear-gradient(180deg, #ff9dc8, #ff6fa8); color: #fff; box-shadow: 0 6px 0 #d94f8a; }

/* ---------- Palco da atividade (v3) ----------
   MANIFESTO
   1. TESE: teatrinho de mesa × o próprio mundo 3D da ilha — a brincadeira acontece numa mesa de verdade, na frente da casa do amigo.
   2. SENSAÇÃO: "entrei no lugar do amigo e ele está brincando comigo".
   3. GESTO: estrelas que voam do que ela tocou até a trilha de passos que termina num baú.
   4. NUNCA: fundo liso de app, emoji solto em cartão branco, balão de chat com frase longa.
   5. APOSTA: o anfitrião ocupa um terço da tela e o texto quase some — a voz manda.
*/
.act-overlay {
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ink-shadow: 61, 47, 92;
  --zone-deep: #c76a95;
  --zone-deep: color-mix(in srgb, var(--zone) 62%, #3d2f5c);
  --zone-soft: #ffe3ef;
  --zone-soft: color-mix(in srgb, var(--zone) 22%, #fff);
  --host-w: clamp(128px, 23vw, 340px);
  position: fixed; inset: 0; z-index: 50;
  display: grid; grid-template-columns: var(--host-w) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "top top" "host stage";
  background-color: #bfe0f5;
  background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 40%), var(--bg);
  background-size: cover; background-position: center 40%;
  padding: calc(10px + var(--safe-t)) calc(12px + var(--safe-r)) calc(8px + var(--safe-b)) calc(8px + var(--safe-l));
  opacity: 0; transform: scale(1.03); transition: opacity .3s var(--ease), transform .45s var(--ease);
  overflow: hidden;
}
.act-overlay.show { opacity: 1; transform: none; }
@media (orientation: portrait) {
  .act-overlay {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "top" "host" "stage";
    background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 40%), var(--bg-p);
    padding-left: calc(10px + var(--safe-l)); padding-right: calc(10px + var(--safe-r));
  }
}

/* mesa em primeiro plano: toalha com bolinhas na cor da zona, borda iluminada */
.act-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 0; pointer-events: none;
  border-radius: 50% 50% 0 0 / 56px 56px 0 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 55%),
    radial-gradient(rgba(255,255,255,.38) 16%, transparent 18%) 0 0 / 30px 30px,
    linear-gradient(180deg, var(--zone-soft) 0%, var(--zone) 140%);
  box-shadow: inset 0 7px 0 rgba(255,255,255,.85), inset 0 16px 26px rgba(255,255,255,.4), 0 -14px 40px rgba(var(--ink-shadow), .22);
}
.act-floor::before { /* tampo: faixa de luz e uma sombra suave para dar espessura */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 26px; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0));
}
@media (orientation: portrait) { .act-floor { height: 26%; border-radius: 50% 50% 0 0 / 40px 40px 0 0; } }

/* ----- topo ----- */
.act-overlay .act-top { grid-area: top; position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; padding-left: 84px; min-height: 72px; }
.act-overlay .act-x { position: fixed; top: calc(12px + var(--safe-t)); left: calc(12px + var(--safe-l)); z-index: 75; width: 72px; height: 72px; border-radius: 50%; padding: 6px; background: #fff; margin: 0;
  box-shadow: 0 6px 0 rgba(var(--ink-shadow), .16), 0 12px 26px rgba(var(--ink-shadow), .2); display: grid; place-items: center; font-size: 0; }
.act-overlay .svg-btn { display: grid; place-items: center; font-size: 0; }
.act-overlay .svg-btn svg { display: block; width: 72%; height: 72%; pointer-events: none; }
.act-overlay .act-x svg { width: 100%; height: 100%; }
.act-title {
  flex: none; order: 3; position: relative; width: 60px; height: 60px; border-radius: 22px; display: grid; place-items: center;
  background: rgba(255,255,255,.9); box-shadow: 0 5px 0 var(--zone-deep), 0 10px 22px rgba(var(--ink-shadow), .2);
  font-size: 34px; line-height: 1;
}
.act-title .act-icon { font-size: inherit; display: grid; place-items: center; filter: drop-shadow(0 3px 2px rgba(var(--ink-shadow), .25)); }
.act-title .act-level {
  position: absolute; right: -8px; bottom: -8px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px; display: grid; place-items: center;
  background: var(--zone-deep); color: #fff; font-weight: 900; font-size: 16px; box-shadow: 0 0 0 3px #fff;
}

/* trilha de passos com baú */
.act-trail {
  flex: 1; min-width: 0; max-width: min(560px, 60vw); margin: 0 auto; position: relative; height: 54px;
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 0 4px 0 6px; border-radius: 28px; background: rgba(255,255,255,.55);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.8), 0 6px 18px rgba(var(--ink-shadow), .16);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.act-trail.empty { visibility: hidden; }
.trail-line { position: absolute; left: 26px; right: 44px; top: 50%; height: 10px; margin-top: -5px; border-radius: 6px; background: rgba(var(--ink-shadow), .12); overflow: hidden; }
.trail-fill { height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #ffd54f, #ff9dc8); transition: width .6s var(--ease); }
.act-trail > span {
  position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: #fff; box-shadow: inset 0 -4px 0 rgba(var(--ink-shadow), .1), 0 3px 0 rgba(var(--ink-shadow), .15);
  transition: transform .35s var(--spring), background .3s;
}
.act-trail > span svg { width: 76%; height: 76%; opacity: .16; filter: grayscale(1); transition: opacity .3s, filter .3s, transform .4s var(--spring); }
.act-trail > span.on { background: #fff6cf; }
.act-trail > span.on svg { opacity: 1; filter: none; transform: rotate(-10deg) scale(1.08); }
.act-trail > span.cur { transform: scale(1.22); box-shadow: 0 0 0 4px var(--zone), 0 4px 10px rgba(var(--ink-shadow), .25); animation: curPulse 1.6s ease-in-out infinite; }
.act-trail > span.hit { animation: stepHit .55s var(--spring); }
@keyframes curPulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--zone) 55%, transparent), 0 4px 10px rgba(var(--ink-shadow), .25); } }
@keyframes stepHit { 0% { transform: scale(1.2); } 40% { transform: scale(1.6) rotate(-12deg); } 100% { transform: scale(1.22); } }
.trail-goal { position: relative; z-index: 1; width: 46px; height: 46px; flex: none; display: grid; place-items: center; transition: transform .4s var(--spring); }
.trail-goal svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(var(--ink-shadow), .2)); }
.trail-goal.open { animation: goalOpen 1s var(--spring) both; }
.trail-goal.open::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(255,226,120,.9), rgba(255,226,120,0) 70%); z-index: -1; animation: glowPulse 1.2s ease-in-out infinite alternate; }
@keyframes goalOpen { 0% { transform: scale(1); } 30% { transform: scale(1.5) rotate(-10deg); } 60% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1.3); } }
@keyframes glowPulse { from { opacity: .5; transform: scale(.9); } to { opacity: 1; transform: scale(1.15); } }
@media (max-width: 600px) { .act-trail > span { width: 26px; height: 26px; } .trail-goal { width: 38px; height: 38px; } .act-trail { height: 46px; } .act-title { width: 52px; height: 52px; font-size: 28px; } }
@media (max-height: 500px) and (orientation: landscape) { .act-overlay { --host-w: clamp(120px, 17vw, 180px); } }
@media (max-height: 430px) and (orientation: landscape) { .act-overlay .act-top { min-height: 62px; } .act-overlay .act-x { width: 62px; height: 62px; } .act-overlay .act-top { padding-left: 74px; } }

/* ----- anfitrião ----- */
.act-host { grid-area: host; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 0; padding-bottom: 4px; }
.host-fig { position: relative; width: 100%; padding: 0 14px; flex: 0 1 auto; height: min(64vh, calc(var(--host-w) * 1.45)); display: flex; align-items: flex-end; justify-content: center; cursor: pointer; min-height: 0; }
.host-breath { position: relative; z-index: 1; height: 100%; width: 100%; display: flex; align-items: flex-end; justify-content: center; transform-origin: 50% 100%; animation: breathe 3.2s ease-in-out infinite; }
.host-react, .host-talk { height: 100%; width: 100%; display: flex; align-items: flex-end; justify-content: center; transform-origin: 50% 100%; }
.host-img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 10px 14px rgba(var(--ink-shadow), .3)); -webkit-user-drag: none; pointer-events: none; }
.host-emoji { width: 80%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: calc(var(--host-w) * .45); box-shadow: inset 0 -10px 0 rgba(0,0,0,.08); }
.host-shadow { position: absolute; left: 18%; right: 18%; bottom: -6px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--ink-shadow), .35), rgba(var(--ink-shadow), 0)); animation: shadowBreathe 3.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.028); } }
@keyframes shadowBreathe { 50% { transform: scaleX(.94); opacity: .85; } }
.host-react.hop { animation: hostHop .6s var(--spring); }
.host-react.tilt { animation: hostTilt .9s var(--ease); }
.host-react.cheer { animation: hostCheer .7s var(--spring) 3; }
@keyframes hostHop { 0% { transform: none; } 30% { transform: translateY(-14%) scale(.96, 1.06); } 55% { transform: translateY(0) scale(1.06, .94); } 75% { transform: translateY(-3%); } 100% { transform: none; } }
@keyframes hostTilt { 0%, 100% { transform: none; } 25% { transform: rotate(-9deg) translateX(-3%); } 60% { transform: rotate(-7deg) translateX(-3%); } }
@keyframes hostCheer { 0%, 100% { transform: none; } 35% { transform: translateY(-18%) rotate(-6deg) scale(.96, 1.06); } 70% { transform: translateY(0) rotate(5deg) scale(1.05, .95); } }

/* legenda pequena (opcional: some sozinha quando a voz para) */
.act-cap {
  position: relative; z-index: 3; width: 100%; max-width: 320px; margin-bottom: 8px;
  background: rgba(255,255,255,.92); border-radius: 18px; padding: 7px 12px 0; border-bottom: 7px solid transparent; font-weight: 800; color: var(--ink);
  font-size: clamp(13px, 1.1vw + 6px, 17px); line-height: 1.25; text-align: center;
  box-shadow: 0 4px 0 rgba(var(--ink-shadow), .1), 0 8px 18px rgba(var(--ink-shadow), .14);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: calc(3.75em + 14px);
  transition: opacity .6s, transform .6s var(--ease);
}
.act-cap::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-top-color: rgba(255,255,255,.92); border-bottom: 0; }
.act-cap:empty { visibility: hidden; }
.act-cap.pop { animation: capPop .4s var(--spring); }
.act-cap.dim { opacity: 0; transform: translateY(6px) scale(.96); }
@keyframes capPop { from { transform: translateY(8px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
/* botão grande de ouvir de novo, colado no anfitrião */
.act-overlay .act-ear {
  position: absolute; right: 2px; bottom: 6px; z-index: 4; width: clamp(64px, 11vmin, 84px); height: clamp(64px, 11vmin, 84px); border-radius: 50%; padding: 12px;
  background: radial-gradient(circle at 35% 30%, #fff, #fff 45%, var(--zone-soft)); box-shadow: 0 6px 0 var(--zone-deep), 0 12px 24px rgba(var(--ink-shadow), .28);
  transition: transform .15s;
}
.act-overlay .act-ear svg { width: 100%; height: 100%; }
.act-ear.pressed { transform: translateY(4px); box-shadow: 0 2px 0 var(--zone-deep), 0 6px 14px rgba(var(--ink-shadow), .25); }
.act-ear.ping::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 4px solid var(--zone); animation: ping .7s ease-out forwards; }
@keyframes ping { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.host-face.talking + .act-ear { animation: earNudge 1.2s ease-in-out infinite; }
@keyframes earNudge { 50% { transform: scale(1.05); } }

@media (orientation: portrait) {
  .act-host { flex-direction: row; align-items: flex-end; justify-content: flex-start; gap: 8px; height: clamp(120px, 18vh, 200px); padding: 0 0 2px; }
  .host-fig { order: 1; width: auto; height: 100%; flex: none; aspect-ratio: .78; }
  .act-cap { order: 2; flex: 1; width: auto; max-width: none; align-self: center; margin: 0 72px 0 0; text-align: left; -webkit-line-clamp: 3; }
  .act-cap::after { left: -8px; top: 50%; bottom: auto; margin: -8px 0 0; border: 8px solid transparent; border-right-color: rgba(255,255,255,.92); border-left: 0; }
  .act-overlay .act-ear { right: 0; bottom: 50%; transform: translateY(50%); }
  .act-ear.pressed { transform: translateY(calc(50% + 4px)); }
}

/* ----- palco ----- */
.act-overlay .act-stage {
  grid-area: stage; position: relative; z-index: 2; min-height: 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: clamp(10px, 2.4vmin, 22px); padding: 6px 4px clamp(10px, 6vh, 64px);
}
.act-overlay.resulting .act-host, .act-overlay.resulting .act-stage { opacity: 0; transition: opacity .3s; }
.act-stage > * { max-width: 100%; }
@media (orientation: landscape) and (max-height: 500px) { .act-overlay .act-stage { padding-bottom: 6px; gap: 8px; } }
.act-stage .btn-big { height: clamp(76px, 13.5vmin, 100px); min-width: clamp(76px, 13.5vmin, 100px); }
/* grupos de contar: quanto menos figuras, maiores — ocupam a mesa */
.scene .egroup.eg-xl { font-size: clamp(64px, min(16vw, 30vh), 150px); }
.scene .egroup.eg-l { font-size: clamp(56px, min(13vw, 25vh), 124px); }
.scene .egroup.eg-m { font-size: clamp(48px, min(11vw, 21vh), 100px); }
.scene .egroup.eg-s { font-size: clamp(42px, min(10vw, 19vh), 86px); }
.scene .egroup { max-width: min(100%, 8.6em); gap: .08em .16em; }
@media (orientation: landscape) and (max-height: 500px) {
  .scene .egroup { max-width: min(100%, 9.6em); }
  .scene .egroup.eg-m { font-size: clamp(44px, min(11vw, 17vh), 100px); }
  .scene .egroup.eg-s { font-size: clamp(40px, min(10vw, 16.5vh), 86px); }
}
@media (orientation: portrait) {
  .scene .egroup.eg-xl { font-size: clamp(64px, 27vw, 150px); }
  .scene .egroup.eg-l { font-size: clamp(56px, 23vw, 124px); }
  .scene .egroup.eg-m { font-size: clamp(48px, 20vw, 100px); }
  .scene .egroup.eg-s { font-size: clamp(42px, 19vw, 86px); }
  .scene .egroup { max-width: min(100%, 5.2em); }
}
/* Ateliê: o quadro e a paleta são o jogo — anfitrião menor, palco maior */
.zone-art { --host-w: clamp(110px, 17vw, 260px); }
.zone-art .act-stage { padding-bottom: 8px; }
@media (orientation: landscape) and (max-height: 500px) { .zone-art .act-stage { padding: 2px; } .act-overlay.zone-art { --host-w: 124px; } }
@media (orientation: landscape) and (max-height: 500px) { .act-overlay .act-cap { -webkit-line-clamp: 2; max-height: calc(2.5em + 14px); font-size: 13px; } }
@media (orientation: portrait) {
  .act-overlay.zone-art .act-host { height: 86px; }
  .act-overlay.zone-art .art-tools { --b: min(76px, calc((100vw - 48px) / 4 - 6px)); --gap: 6px; grid-template-columns: repeat(4, var(--b)); }
  .act-overlay.zone-art .art-tools.art-pal { grid-template-columns: repeat(4, var(--b)); }
  .act-overlay.zone-art .art-done.wide { grid-column: span 4; }
  .act-overlay.zone-art .art-xylo { gap: 4px; padding: 0 4px; }
  .act-overlay.zone-art .art-key { height: calc((100% - 28px) / 8); }
}
.stage-leave { position: fixed; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 2.4vmin, 22px); pointer-events: none; }

/* retrato: a tela é alta — as peças crescem para ocupar o palco */
@media (orientation: portrait) {
  .act-overlay .choices { grid-template-columns: repeat(var(--cols, 3), minmax(0, clamp(92px, 27vw, 190px))); }
  .act-overlay .choices.n4, .act-overlay .choices.n2 { grid-template-columns: repeat(var(--cols, 2), minmax(0, clamp(110px, 36vw, 200px))); }
  .act-overlay .ch-main { font-size: clamp(40px, 12vw, 84px); }
  .act-overlay .choices.md .ch-main { font-size: clamp(32px, 10vw, 64px); }
  .act-overlay .scene { font-size: clamp(40px, 12vw, 86px); }
  .act-overlay .drag-item { width: clamp(76px, 20vw, 110px); height: clamp(76px, 20vw, 110px); font-size: clamp(42px, 11.5vw, 70px); }
  .act-overlay .drag-item.placed { width: clamp(40px, 11vw, 60px); height: clamp(40px, 11vw, 60px); font-size: clamp(24px, 7vw, 40px); }
  .act-overlay .bin { min-height: clamp(120px, 20vh, 220px); }
  .act-overlay .slot { width: clamp(70px, 21vw, 130px); }
  .act-overlay .order-card { width: clamp(80px, 26vw, 150px); }
}

/* ---------- Partículas e estrelas voando ---------- */
.fx-p { position: fixed; z-index: 1001; pointer-events: none; border-radius: 50%; }
.fx-p.star { border-radius: 0; background: none; }
.fx-p svg, .fx-fly svg { width: 100%; height: 100%; display: block; }
.fx-fly { position: fixed; z-index: 1002; width: 40px; height: 40px; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(var(--ink-shadow, 61,47,92), .3)); }

/* ---------- Ícones 3D no lugar de emoji ---------- */
img.i3d { display: inline-block; width: 1.12em; height: 1.12em; margin: -.06em 0; vertical-align: -.2em; object-fit: contain; pointer-events: none; -webkit-user-drag: none;
  filter: drop-shadow(0 .06em .05em rgba(61,47,92,.28)); }
.act-icon img.i3d { width: 1.15em; height: 1.15em; margin: 0; vertical-align: middle; }

/* ---------- Cena ---------- */
.scene {
  position: relative; border-radius: 32px; padding: clamp(10px, 2.2vmin, 20px) clamp(16px, 3vmin, 30px);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.55));
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: inset 0 -6px 0 rgba(var(--ink-shadow, 61,47,92), .05), 0 10px 0 rgba(var(--ink-shadow, 61,47,92), .08), 0 18px 34px rgba(var(--ink-shadow, 61,47,92), .16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: clamp(40px, 12vmin, 108px); text-align: center; max-width: 100%;
  animation: rise .5s var(--spring, cubic-bezier(.34,1.56,.64,1)) both; line-height: 1.15;
}
.scene.poke { animation: poke .45s var(--spring, cubic-bezier(.34,1.56,.64,1)); }
@keyframes poke { 30% { transform: scale(1.08, .92); } 60% { transform: scale(.96, 1.05) translateY(-6px); } }
.scene.big { font-size: clamp(60px, 16vmin, 140px); }
.scene.plain { background: none; box-shadow: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.scene .caption { display: block; font-size: clamp(18px, 3.6vmin, 30px); font-weight: 900; margin-top: 6px; }
.egroup { display: flex; flex-wrap: wrap; justify-content: center; gap: .1em .22em; max-width: min(760px, 100%); }
.egroup > span { position: relative; display: inline-block; animation: drop .55s var(--spring, cubic-bezier(.34,1.56,.64,1)) both; cursor: pointer; filter: drop-shadow(0 .07em .05em rgba(61,47,92,.25)); }
.egroup > span:has(img.i3d) { filter: none; }
.egroup > span.hopping { animation: hopOne .5s var(--spring, cubic-bezier(.34,1.56,.64,1)); }
.count-n {
  position: absolute; left: 50%; top: -.2em; transform: translateX(-50%); min-width: .62em; height: .62em; padding: 0 .12em; border-radius: .31em;
  background: var(--zone-deep, #c76a95); color: #fff; font-size: .42em; line-height: .62em; font-weight: 900; text-align: center; font-style: normal;
  box-shadow: 0 0 0 .07em #fff; animation: pop .35s var(--spring, cubic-bezier(.34,1.56,.64,1));
}
@keyframes drop { from { transform: translateY(-40px) scale(.6); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes hopOne { 0% { transform: none; } 35% { transform: translateY(-.35em) scale(1.12, .92); } 65% { transform: translateY(0) scale(.94, 1.06); } 100% { transform: none; } }
@keyframes rise { from { transform: translateY(22px) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Opções: peças de brinquedo com espessura e brilho ---------- */
.choices { display: grid; gap: clamp(12px, 2.4vmin, 22px); width: 100%; max-width: 900px; justify-content: center; grid-template-columns: repeat(var(--cols, 3), minmax(0, clamp(90px, 22vmin, 190px))); padding-bottom: 8px; }
.choices.n2 { --cols: 2; } .choices.n3 { --cols: 3; } .choices.n4 { --cols: 4; } .choices.n5 { --cols: 5; } .choices.n6 { --cols: 3; } .choices.n8 { --cols: 4; }
@media (orientation: portrait) { .choices.n4 { --cols: 2; } .choices.n5 { --cols: 3; } .choices.n6 { --cols: 3; } .choices.n8 { --cols: 4; } }
.choice {
  --lip: var(--zone-deep, #c76a95);
  aspect-ratio: 1; border-radius: 30px; position: relative; isolation: isolate;
  background: linear-gradient(180deg, #ffffff 0%, #fff8fb 40%, var(--zone-soft, #ffe3ef) 100%);
  box-shadow: inset 0 3px 0 #fff, inset 0 -6px 0 rgba(var(--ink-shadow, 61,47,92), .06), 0 8px 0 var(--lip), 0 16px 26px rgba(var(--ink-shadow, 61,47,92), .3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-weight: 900;
  transition: transform .18s var(--ease, ease), box-shadow .18s, opacity .35s, filter .35s;
  animation: rise .5s var(--spring, cubic-bezier(.34,1.56,.64,1)) both; padding: 6px; overflow: visible;
}
.choice::before { /* brilho de plástico + reflexo que passa na entrada */
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),
    linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.85) 48%, rgba(255,255,255,0) 60%) -150% 0 / 250% 100% no-repeat;
  animation: sheen 1.4s .35s var(--ease, ease) both;
}
@keyframes sheen { to { background-position: 0 0, 160% 0; } }
@media (hover: hover) { .choice:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: inset 0 3px 0 #fff, inset 0 -6px 0 rgba(var(--ink-shadow, 61,47,92), .06), 0 12px 0 var(--lip), 0 22px 30px rgba(var(--ink-shadow, 61,47,92), .3); } }
.choice.pressed { transform: translateY(6px); box-shadow: inset 0 3px 0 #fff, 0 2px 0 var(--lip), 0 6px 12px rgba(var(--ink-shadow, 61,47,92), .25); }
.choices.sm .choice { aspect-ratio: 1.2; }
.choices.wide .choice { aspect-ratio: 1.6; }
.ch-main { font-size: clamp(38px, 9vmin, 84px); line-height: 1; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 .05em .04em rgba(61,47,92,.22)); }
.ch-main img.i3d { filter: drop-shadow(0 .05em .04em rgba(61,47,92,.32)); width: 1.42em; height: 1.42em; margin: -.1em; }
.ch-main:has(img.i3d) { filter: none; }
.choices.md .ch-main { font-size: clamp(30px, 7vmin, 64px); }
.choices.sm .ch-main { font-size: clamp(24px, 5.5vmin, 46px); }
.ch-main.txt, .choice .txt { font-size: clamp(34px, 8.5vmin, 78px); font-weight: 900; color: var(--ink); text-shadow: 0 3px 0 var(--zone-soft, #ffe3ef), 0 5px 0 rgba(var(--ink-shadow, 61,47,92), .12); letter-spacing: .01em; }
.ch-label { font-size: clamp(12px, 2.3vmin, 18px); color: var(--ink-soft); text-align: center; line-height: 1.1; opacity: .85; }
.choice.right {
  background: linear-gradient(180deg, #f3fff1, #d9f7d4); --lip: #3fae5c;
  box-shadow: 0 0 0 5px #fff, 0 0 0 10px var(--good), 0 8px 0 10px #3fae5c, 0 0 40px 12px rgba(127,217,140,.65);
  animation: rightPop .7s var(--spring, cubic-bezier(.34,1.56,.64,1)); z-index: 2;
}
.choice.right::after { content: ''; position: absolute; top: -16px; right: -16px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M14 34l12 12 25-27' fill='none' stroke='%23fff' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
  box-shadow: 0 0 0 4px #fff, 0 6px 12px rgba(0,0,0,.18); animation: pop .4s .1s var(--spring, cubic-bezier(.34,1.56,.64,1)) both; }
@keyframes rightPop { 0% { transform: scale(1); } 30% { transform: scale(1.18) rotate(-4deg) translateY(-10px); } 60% { transform: scale(.96) rotate(2deg); } 100% { transform: scale(1.04); } }
.choice.wrong { animation: shake .45s; filter: grayscale(.9); opacity: .42; transform: scale(.94); }
.choice.wrong-soft { animation: shake .45s; }
.choice.fade { opacity: .3; transform: scale(.9); filter: saturate(.4); }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-10px) rotate(-4deg); } 40% { transform: translateX(10px) rotate(4deg); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
@keyframes bounce { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 70% { transform: scale(.95); } 100% { transform: scale(1); } }

/* ---------- Arrastar ---------- */
.drag-tray { display: flex; flex-wrap: wrap; gap: clamp(10px, 2vmin, 16px); justify-content: center; min-height: clamp(70px, 14vmin, 110px); max-width: 100%; }
.drag-item {
  width: clamp(76px, 15vmin, 120px); height: clamp(76px, 15vmin, 120px); border-radius: 26px; position: relative;
  background: linear-gradient(180deg, #fff, #fff7fb); box-shadow: inset 0 3px 0 #fff, 0 6px 0 var(--zone-deep, #c76a95), 0 12px 20px rgba(var(--ink-shadow, 61,47,92), .28);
  font-size: clamp(42px, 9vmin, 76px); display: grid; place-items: center; cursor: grab; animation: rise .5s var(--spring, cubic-bezier(.34,1.56,.64,1)) both;
}
.drag-item img.i3d { width: 1.3em; height: 1.3em; margin: -.05em; }
.drag-item.dragging { opacity: .22; transform: scale(.9); filter: grayscale(.6); animation: none; }
.drag-item.landing { visibility: hidden; }
.drag-item.landed { animation: pop .35s var(--spring, cubic-bezier(.34,1.56,.64,1)); }
.drag-item.bounce { animation: shake .45s; }
.drag-item.placed { width: clamp(40px, 8vmin, 60px); height: clamp(40px, 8vmin, 60px); font-size: clamp(24px, 5vmin, 40px); box-shadow: 0 3px 0 rgba(var(--ink-shadow, 61,47,92), .15); border-radius: 16px; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 999; pointer-events: none; margin: 0; will-change: transform; transform-origin: 50% 40%;
  box-shadow: 0 26px 40px rgba(61,47,92,.35), 0 6px 0 var(--zone-deep, #c76a95); border-radius: 26px; background: #fff; display: grid; place-items: center; }
.drag-bins { display: grid; gap: clamp(10px, 2vmin, 18px); width: 100%; max-width: 980px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.drag-bins.n2 { --cols: 2; } .drag-bins.n3 { --cols: 3; } .drag-bins.n4 { --cols: 4; }
@media (orientation: portrait) { .drag-bins.n4 { --cols: 2; } }
.bin {
  position: relative; border-radius: 30px; padding: 8px; min-height: clamp(110px, 24vmin, 200px); display: flex; flex-direction: column; align-items: center; transition: .25s;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.82));
  border: 3px dashed rgba(255,255,255,.95);
  box-shadow: inset 0 10px 18px rgba(var(--ink-shadow, 61,47,92), .14), inset 0 0 0 3px var(--zone-soft, #ffe3ef), 0 6px 0 rgba(var(--ink-shadow, 61,47,92), .1);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.bin-head { font-size: clamp(34px, 8vmin, 64px); line-height: 1; filter: drop-shadow(0 .05em .04em rgba(61,47,92,.25)); }
.bin-head img.i3d { filter: none; }
.bin-label { font-weight: 900; font-size: clamp(13px, 2.6vmin, 20px); margin-top: 2px; color: var(--ink-soft); }
.bin-drop { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
.bin.glow { animation: glow .7s var(--spring, cubic-bezier(.34,1.56,.64,1)); }
.bin.nope { animation: shake .45s; }
@keyframes glow { 50% { background: #e9ffe9; border-color: var(--good); transform: scale(1.05); box-shadow: 0 0 0 6px rgba(127,217,140,.5), 0 0 30px rgba(127,217,140,.6); } }

/* ---------- Ordenar ---------- */
.order-slots { display: flex; gap: clamp(8px, 1.8vmin, 14px); justify-content: center; flex-wrap: wrap; }
.slot { width: clamp(70px, 15vmin, 130px); aspect-ratio: 1; border-radius: 26px; position: relative; display: grid; place-items: center;
  background: rgba(255,255,255,.5); border: 3px dashed rgba(255,255,255,.95); box-shadow: inset 0 8px 16px rgba(var(--ink-shadow, 61,47,92), .16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.slot-n { position: absolute; top: -10px; left: -10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #fff; background: var(--zone-deep, #c76a95); box-shadow: 0 0 0 3px #fff; font-size: 16px; }
.slot.filled { border-style: solid; border-color: var(--good); background: #fff; box-shadow: 0 6px 0 #3fae5c, 0 12px 20px rgba(var(--ink-shadow, 61,47,92), .2); }
.slot-fill { font-size: clamp(36px, 8vmin, 70px); animation: slotIn .5s var(--spring, cubic-bezier(.34,1.56,.64,1)); filter: drop-shadow(0 .05em .04em rgba(61,47,92,.22)); }
.slot-fill img.i3d { filter: none; width: 1.25em; height: 1.25em; margin: -.05em; }
@keyframes slotIn { from { transform: translateY(-50px) scale(1.4); opacity: 0; } to { transform: none; opacity: 1; } }
.order-pool { display: flex; gap: clamp(10px, 2vmin, 16px); justify-content: center; flex-wrap: wrap; }
.order-card { width: clamp(80px, 17vmin, 150px); }
.order-card.used { opacity: .12; pointer-events: none; transform: scale(.85); }

/* ---------- Memória ---------- */
.memory { display: grid; gap: clamp(8px, 1.8vmin, 14px); width: min(100%, 760px, calc((100vh - 200px) * 1.25)); }
.mem { container-type: inline-size; aspect-ratio: 1; perspective: 700px; animation: rise .45s var(--spring, cubic-bezier(.34,1.56,.64,1)) both; }
.mem-in { position: relative; width: 100%; height: 100%; transition: transform .55s var(--spring, cubic-bezier(.34,1.56,.64,1)); transform-style: preserve-3d; }
.mem.flip .mem-in { transform: rotateY(180deg); }
.mem-back, .mem-front { position: absolute; inset: 0; border-radius: 22px; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.6), 0 6px 0 var(--zone-deep, #c76a95), 0 12px 20px rgba(var(--ink-shadow, 61,47,92), .25); }
.mem-back {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), rgba(255,255,255,0) 45%),
    radial-gradient(rgba(255,255,255,.35) 14%, transparent 16%) 0 0 / 22px 22px,
    linear-gradient(135deg, var(--zone), var(--zone-deep, #c76a95));
}
.mem-star { width: 46%; height: 46%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 5l8 16.4 18 2.6-13 12.7 3 17.9L32 46.1 15.9 54.6l3-17.9L6 24l18-2.6z' fill='%23fff' stroke='%23fff' stroke-width='3' stroke-linejoin='round' opacity='.92'/%3E%3C/svg%3E") center/contain no-repeat; filter: drop-shadow(0 3px 0 rgba(0,0,0,.12)); }
.mem-front { background: linear-gradient(180deg, #fff, #fff8fb); transform: rotateY(180deg); font-size: clamp(28px, 7vmin, 60px); font-size: 38cqw; font-weight: 900; text-align: center; line-height: 1.05; padding: 4px; }
.mem-front img.i3d { width: 1.45em; height: 1.45em; margin: -.1em; }
.mem.matched .mem-front { background: linear-gradient(180deg, #f3fff1, #d9f7d4); box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--good), 0 0 24px rgba(127,217,140,.6); }
.mem.matched { animation: memMatch .6s var(--spring, cubic-bezier(.34,1.56,.64,1)); }
@keyframes memMatch { 40% { transform: scale(1.12) translateY(-6px); } }

/* ---------- Traçar ---------- */
.trace-wrap { position: relative; width: min(100%, 900px); flex: 1; min-height: 200px; border-radius: 32px; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgba(120,95,170,.42), rgba(120,95,170,.3)); background: linear-gradient(180deg, color-mix(in srgb, var(--zone) 70%, rgba(61,47,92,.55)), color-mix(in srgb, var(--zone) 55%, rgba(61,47,92,.4))); border: 3px solid rgba(255,255,255,.85);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.18), 0 10px 0 rgba(var(--ink-shadow, 61,47,92), .12), 0 18px 34px rgba(var(--ink-shadow, 61,47,92), .2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.trace-cv { display: block; touch-action: none; }
.trace-meter { height: 16px; margin: 5px 16px 8px; border-radius: 10px; background: rgba(255,255,255,.35); overflow: hidden; box-shadow: inset 0 2px 3px rgba(0,0,0,.08); }
.trace-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--sun), var(--pink)); border-radius: 10px; transition: width .15s; }
.trace-wrap.traced { animation: glow .8s; }

/* ---------- Resultado ---------- */
.result-back { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; opacity: 0; transition: opacity .35s;
  background: radial-gradient(circle at 50% 45%, rgba(255,240,200,.55), rgba(61,47,92,.55) 75%); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); overflow: hidden; }
.result-back.show { opacity: 1; }
.star-rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.result { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: clamp(8px, 3vw, 40px); max-width: 96vw; animation: resIn .6s var(--spring) both; }
@keyframes resIn { from { transform: translateY(40px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.res-host { flex: none; height: min(62vh, 460px); aspect-ratio: .75; display: flex; align-items: flex-end; justify-content: center; transform-origin: 50% 100%; animation: hostCheer .8s var(--spring) infinite; }
.res-host img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0,0,0,.3)); }
.res-host.emoji { height: auto; aspect-ratio: 1; width: clamp(90px, 18vmin, 140px); border-radius: 50%; display: grid; place-items: center; font-size: clamp(56px, 11vmin, 90px); }
.res-main { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.6vmin, 14px); padding: clamp(16px, 3vmin, 28px) clamp(18px, 4vmin, 40px); border-radius: 40px;
  background: linear-gradient(180deg, #fffdf8, #fff3e6); box-shadow: inset 0 4px 0 #fff, 0 10px 0 var(--zone-deep), 0 24px 50px rgba(var(--ink-shadow), .4); margin-bottom: 4vh; }
.res-title { font-weight: 900; font-size: clamp(20px, 4.2vmin, 34px); color: var(--ink); }
.res-stars { display: flex; justify-content: center; gap: 4px; align-items: flex-end; }
.res-star { width: clamp(58px, 13vmin, 110px); height: clamp(58px, 13vmin, 110px); display: block; animation: starIn .7s var(--spring) both; opacity: .25; filter: grayscale(1); }
.res-star:nth-child(2) { transform: translateY(-14%); width: clamp(70px, 16vmin, 130px); height: clamp(70px, 16vmin, 130px); }
.res-star svg { width: 100%; height: 100%; display: block; }
.res-star.on { opacity: 1; filter: drop-shadow(0 0 18px rgba(255,200,61,.85)); }
@keyframes starIn { from { transform: scale(0) rotate(-120deg); } to { } }
.res-sticker { perspective: 600px; }
.res-sticker:not(.new) { display: none; }
.stk-card { position: relative; width: clamp(74px, 15vmin, 108px); height: clamp(74px, 15vmin, 108px); transform-style: preserve-3d; animation: stkSpin 3.2s 1.2s var(--ease) infinite; }
.stk-face, .stk-back { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; }
.stk-face { background: radial-gradient(circle at 35% 30%, #fff, #fff 40%, var(--zone-soft)); box-shadow: 0 0 0 5px var(--zone), 0 0 0 9px #fff, 0 10px 20px rgba(var(--ink-shadow), .3); }
.stk-back { transform: rotateY(180deg); background: radial-gradient(circle at 35% 30%, #fff8d0, #ffd54f 60%, #e8a52a); box-shadow: 0 0 0 5px #fff, 0 10px 20px rgba(var(--ink-shadow), .3); }
.res-sticker.gold .stk-face { box-shadow: 0 0 0 5px #ffc83d, 0 0 0 9px #fff, 0 0 30px rgba(255,200,61,.9); }
.stk img.i3d { width: 1.3em; height: 1.3em; margin: 0; vertical-align: middle; }
.stk { font-size: clamp(44px, 9vmin, 62px); line-height: 1; background: none; box-shadow: none; width: auto; height: auto; }
@keyframes stkSpin { 0% { transform: rotateY(0) scale(1); } 40% { transform: rotateY(360deg) scale(1.12); } 100% { transform: rotateY(360deg) scale(1); } }
.res-btns { display: flex; gap: 14px; justify-content: center; align-items: center; margin-top: 6px; }
.res-btns .btn-big { width: clamp(64px, 12vmin, 84px); height: clamp(64px, 12vmin, 84px); min-width: 0; padding: 12px; border-radius: 50%; display: grid; place-items: center; font-size: 0;
  background: #fff; box-shadow: 0 6px 0 rgba(var(--ink-shadow), .2), 0 10px 20px rgba(var(--ink-shadow), .2); }
.res-btns .btn-big svg { width: 100%; height: 100%; display: block; }
.res-btns .btn-big.primary { width: clamp(84px, 16vmin, 112px); height: clamp(84px, 16vmin, 112px); padding: 22px 18px 22px 26px; background: linear-gradient(180deg, #ff9dc8, #ff5f9e); box-shadow: 0 7px 0 #d6458a, 0 14px 30px rgba(214,69,138,.45); animation: nextPulse 1.4s ease-in-out 2s infinite; }
.res-btns .btn-big.pressed { transform: translateY(5px); }
@keyframes nextPulse { 50% { transform: scale(1.08); } }
@media (orientation: portrait) {
  .result { flex-direction: column; align-items: center; gap: 0; }
  .res-host { height: min(30vh, 260px); margin-bottom: -18px; z-index: 1; }
  .res-main { margin-bottom: 0; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .res-host { height: 78vh; }
  .res-main { margin-bottom: 0; }
  .res-title { display: none; }
}

.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000; }
@media (prefers-reduced-motion: reduce) {
  .host-breath, .host-shadow, .act-trail > span.cur, .res-host, .stk-card, .res-btns .btn-big.primary { animation: none !important; }
}
@keyframes pop { from { transform: scale(.85); opacity: .3; } to { transform: none; opacity: 1; } }

/* ---------- Modal ---------- */
.modal-back { position: fixed; inset: 0; z-index: 60; background: rgba(74,59,107,.3); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: grid; place-items: center; opacity: 0; transition: opacity .25s; padding: 12px; }
.modal-back.show { opacity: 1; }
.modal { background: var(--paper); border-radius: 34px; box-shadow: var(--shadow); padding: clamp(14px, 3vmin, 28px); max-width: min(1100px, 96vw); max-height: 92vh; overflow: auto; transform: scale(.9); transition: transform .3s cubic-bezier(.3,1.5,.5,1); }
.modal-back.show .modal { transform: none; }

/* utilitários para atividades */
.row { display: flex; gap: clamp(8px, 2vmin, 16px); align-items: center; justify-content: center; flex-wrap: wrap; }
.big-txt { font-size: clamp(40px, 10vmin, 96px); font-weight: 900; }
.pill { background: #fff; border-radius: 30px; padding: 8px 18px; font-weight: 900; box-shadow: 0 5px 0 rgba(74,59,107,.1); }
.float { animation: floaty 2.4s ease-in-out infinite alternate; }
@keyframes floaty { from { transform: translateY(-6px); } to { transform: translateY(6px); } }