/* O ROBÔ QUE LÊ PELO PADRÃO — short-encounter mock. Talk panel and work area from the canteiro mock (the game's
   wooden frame); the sign is a board of syllable tiles she touches. */
@font-face{font-family:"Rabisco";src:url("arte/patrick-hand.woff2") format("woff2");font-display:block}
:root{
  --texto:#fffaf0; --apagado:#c9bda8; --destaque:#ffc861; --acento:#7be0c6; --erro:#ff8a7a;
  --painel:rgb(36,28,20); --painel-alto:rgb(47,37,26); --linha:#ffffff1f; --sombra:#0008;
  --raio:12px; --fundo:#141a10; --madeira:#e9d3a6; --tinta:#3a2410;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--fundo); color:var(--texto);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation; user-select:none; -webkit-user-select:none;
}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--acento);outline-offset:2px}
img{image-rendering:pixelated}

/* ── stage: world on top (phone) or left (wide) ─────────────────────────── */
.palco{
  height:100dvh; width:100vw; display:grid; grid-template-rows:minmax(0,1fr) auto; overflow:hidden;
  padding:max(8px, env(safe-area-inset-top)) 16px max(10px, env(safe-area-inset-bottom)); gap:8px;
}
.mundo{position:relative; min-height:0; min-width:0; display:grid; place-items:end center}
#tela{
  display:block; image-rendering:pixelated; image-rendering:crisp-edges;
  border-radius:6px; box-shadow:0 6px 18px #000a; width:var(--lw); height:var(--lh); touch-action:manipulation;
}
.lado{display:flex; flex-direction:column; gap:8px; width:100%; max-width:720px; justify-self:center; min-height:0}

.nivel{
  position:absolute; top:var(--topo-nivel,8px); left:50%; transform:translateX(-50%);
  padding:2px 10px; border-radius:999px; background:#0007; border:1px solid var(--linha);
  font-size:.8rem; color:var(--apagado); pointer-events:none; letter-spacing:.02em;
}
.nivel[hidden]{display:none}
.nivel.sobe{animation:sobe 1s ease-out}
@keyframes sobe{30%{transform:translateX(-50%) scale(1.25); color:var(--destaque); border-color:var(--destaque)}}
.som{
  position:absolute; top:var(--topo-nivel,8px); right:var(--dir-som,8px); width:34px; height:30px; border-radius:8px;
  border:1px solid var(--linha); background:#0007 no-repeat center/20px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fffaf0' d='M4 9h4l5-4v14l-5-4H4z'/><path fill='none' stroke='%23fffaf0' stroke-width='2' stroke-linecap='round' d='M16 9c1.3 1.6 1.3 4.4 0 6M18.5 6.5c2.8 3 2.8 8 0 11'/></svg>");
}
.som[aria-pressed="false"]{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23c9bda8' d='M4 9h4l5-4v14l-5-4H4z'/><path stroke='%23ff8a7a' stroke-width='2' stroke-linecap='round' d='M16 9l5 6M21 9l-5 6'/></svg>")}

/* coins flying */
.camada-moedas{position:fixed; inset:0; pointer-events:none; z-index:9}
.moeda{position:absolute; width:28px; height:28px; transition:transform .7s cubic-bezier(.5,-0.3,.6,1), opacity .15s .6s}
.mais{
  position:fixed; z-index:10; pointer-events:none; font-weight:800; font-size:1.6rem;
  color:var(--destaque); text-shadow:0 2px 0 #3a2400, 0 0 18px #ffc861aa; animation:subir 1.6s ease-out forwards;
}
.mais.menos{color:#ffe6b0; font-size:1.2rem}
@keyframes subir{0%{transform:translate(-50%,0) scale(.6);opacity:0} 20%{transform:translate(-50%,-10px) scale(1.15);opacity:1} 100%{transform:translate(-50%,-60px) scale(1);opacity:0}}

/* ── the WORK AREA ─────────────────────────────────────────────────────── */
.trabalho{
  position:relative; display:flex; flex-direction:column; gap:10px; padding:12px 14px;
  border-radius:14px; background:#1f1810; border:2px solid #6b4a2b; box-shadow:0 6px 16px #0009;
}
.carteira{
  position:absolute; top:-12px; right:12px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:3px 10px; border-radius:999px; background:#2a1e10; border:1px solid #6b4a2b;
}
.carteira img{width:22px;height:22px}
.carteira b{color:var(--destaque); font-size:1.05rem}
.carteira span{color:var(--apagado); font-size:.8rem}
.carteira.pulsa{animation:pulsa .5s ease-out 2}
@keyframes pulsa{50%{transform:scale(1.15); box-shadow:0 0 18px #ffc861aa}}
.pergunta{margin:0; min-height:1.5em; padding-right:96px; font-size:1.3rem; line-height:1.3; font-weight:700; color:var(--destaque); text-wrap:balance}
.pergunta.nova{animation:pergunta .5s ease-out}
@keyframes pergunta{0%{opacity:.2; transform:translateY(4px)} 100%{opacity:1; transform:none}}

/* the sign: a wooden board; each word a row of syllable tiles */
.placa{
  position:relative; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:6px 16px;
  padding:26px 12px 14px; min-height:112px; border-radius:8px;
  background:linear-gradient(180deg, #f1dfb6, #e2c893); color:var(--tinta);
  box-shadow:inset 0 0 0 3px #8a5a2b, inset 0 0 0 6px #c9a26a, 0 4px 10px #0008;
}
.placa:empty{display:none}
.palavra{display:inline-flex; align-items:flex-end; gap:3px; padding:2px 4px 4px; border-radius:10px; transition:background .2s, opacity .2s}
.palavra.atual{background:#fff6dd; box-shadow:0 0 0 2px #e0a93b}
.palavra.espera{opacity:.55}
.palavra.feita{background:#d6f5e6; box-shadow:0 0 0 2px #3aa57f}
.palavra.mostrada{background:#f5ecd6; box-shadow:0 0 0 2px #b99c62}
.miuda{font:600 1.35rem "Rabisco", cursive; color:#6a4a2a; padding:0 2px 10px; align-self:flex-end}
.sil{
  position:relative; min-width:46px; height:58px; padding:0 8px; border-radius:10px; border:2px solid #8a5a2b;
  background:#fffaf0; color:var(--tinta); font:700 1.9rem/1 "Rabisco", "Comic Sans MS", cursive; cursor:pointer;
  box-shadow:0 3px 0 #8a5a2b; transform-origin:50% 100%; transition:transform .12s, background .15s;
}
.sil:active{transform:translateY(2px); box-shadow:0 1px 0 #8a5a2b}
.sil:disabled{cursor:default}
.placa.compacta .sil{min-width:34px; height:46px; padding:0 5px; font-size:1.45rem}
.placa.compacta{gap:6px 10px; padding:24px 8px 12px}
.sil.forte{animation:pula .62s cubic-bezier(.3,1.6,.5,1); background:#ffe08a; border-color:#c77c12; z-index:2}
@keyframes pula{0%{transform:scale(1)} 35%{transform:translateY(-14px) scale(1.45)} 70%{transform:translateY(0) scale(1.28)} 100%{transform:scale(1.18)}}
.sil.forte-fica{transform:scale(1.1); border-color:#c77c12}
.sil.forte-fica::after{content:""; position:absolute; left:18%; right:18%; bottom:-9px; height:4px; border-radius:2px; background:#e0a93b}
.sil.marcada{background:#fff1c9; border-color:#c77c12}
.sil.aposta{box-shadow:0 0 0 3px #3a7bd5, 0 3px 0 #8a5a2b}
.sil.certa{background:#bff0d8; border-color:#2f8f6a}
.sil.escolhendo{box-shadow:0 0 0 3px var(--acento), 0 3px 0 #8a5a2b}
.sil.treme, .palavra.treme{animation:treme .4s}
@keyframes treme{25%{transform:translateX(-6px)} 75%{transform:translateX(6px)}}
.sil .ac{display:inline-block; color:#b3261e}
.sil .ac.cai{animation:cai .5s ease-out}
@keyframes cai{0%{transform:translateY(-22px); opacity:0} 100%{transform:none; opacity:1}}
.voa-acento{position:fixed; z-index:30; pointer-events:none; font:700 2rem "Rabisco", cursive; color:#b3261e;
  transition:transform .8s cubic-bezier(.3,.7,.3,1), opacity .3s .5s}

/* the two marks to choose from (level 3): shapes, never names */
.sinais{position:absolute; z-index:6; display:flex; gap:8px; padding:6px; border-radius:12px; background:#2a1e10; border:2px solid var(--acento); box-shadow:0 6px 14px #000a}
.sinais button{min-width:58px; height:54px; padding:0 8px; border-radius:10px; border:2px solid #6b4a2b; background:#fffaf0; color:var(--tinta); font:700 1.9rem/1 "Rabisco", cursive; cursor:pointer}
.sinais button:active{transform:translateY(2px)}
.sinais.empilhado{flex-direction:column}

.acoes{display:flex; flex-wrap:wrap; gap:8px; justify-content:stretch}
.acoes:empty{display:none}
.opcao{
  flex:1 1 auto; border:1px solid var(--linha); border-radius:var(--raio); background:#ffffff0f;
  padding:10px 14px; cursor:pointer; text-align:center; font-weight:600;
}
.opcao:hover{border-color:var(--destaque); background:#ffffff1a}
.opcao.principal{background:var(--destaque); color:#2a1e08; border-color:var(--destaque); font-weight:700; box-shadow:0 3px 0 #0000004d}
.opcao.seguir{flex:0 0 auto; background:#ffffff14}
.opcao.seguir::after{content:" ▸"}
.opcao:active{transform:translateY(2px)}
.opcao:disabled{opacity:.45; cursor:default}

/* ── the wooden frame of the side talk ─────────────────────────────────── */
.moldura{
  position:relative; width:100%; min-height:0; display:flex;
  border:10px solid transparent;
  background:
    url('arte/wood-left-right.png') repeat-y left, url('arte/wood-left-right.png') repeat-y right,
    url('arte/wood-top-bottom.png') repeat-x top, url('arte/wood-top-bottom.png') repeat-x bottom, var(--painel);
  background-origin:border-box; background-clip:border-box,border-box,border-box,border-box,padding-box;
  box-shadow:6px 4px 14px 2px var(--sombra); opacity:.95;
}
.moldura::before{
  content:"";position:absolute;inset:-11px;pointer-events:none;z-index:5;
  background:url('arte/corner.png') top left no-repeat, url('arte/corner.png') top right no-repeat,
    url('arte/corner.png') bottom left no-repeat, url('arte/corner.png') bottom right no-repeat;
  background-size:24px;
}
.painel{display:flex;flex-direction:column;width:100%;padding:6px 10px 8px;gap:6px;min-height:0}
.topo{display:flex;align-items:center;gap:10px}
.topo h1{margin:0;font-size:.9rem;color:var(--destaque)}
.busto{flex:0 0 auto; width:32px; height:32px; border-radius:10px; background-repeat:no-repeat; background-color:var(--painel-alto); border:2px solid var(--linha); image-rendering:pixelated}
.conversa{display:flex; flex-direction:column; gap:6px; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; min-height:2.6em; padding-right:4px; scroll-behavior:smooth}
.bolha{max-width:92%; padding:6px 10px; border-radius:12px; background:#ffffff0d; line-height:1.4; font-size:.95rem}
.bolha b{display:block; font-size:.72rem; color:var(--destaque); letter-spacing:.02em; margin-bottom:1px}
.bolha.pet{background:#7be0c61a}
.bolha.pet b{color:var(--acento)}
.bolha.robo{background:#9fb4d01a}
.bolha.robo b{color:#9fc0ea}
.bolha.crianca{align-self:flex-end; background:#ffffff1a; color:var(--apagado); font-style:italic}
.bolha.crianca b{color:var(--apagado); text-align:right}
.bolha:last-child{background:#ffffff1f; box-shadow:inset 3px 0 0 var(--destaque)}
.bolha.pet:last-child{background:#7be0c62e; box-shadow:inset 3px 0 0 var(--acento)}
.bolha.crianca:last-child{box-shadow:inset -3px 0 0 var(--apagado)}
.bolha .oferta{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; border:1px solid var(--acento); background:#0004; color:var(--texto); border-radius:10px; padding:6px 10px; cursor:pointer; font-size:.95rem; text-align:left}
.bolha .oferta:disabled{opacity:.4; cursor:default}
.preco{display:inline-flex; align-items:center; gap:3px; padding:0 8px; border-radius:999px; background:#0006; color:var(--destaque); font-size:.85rem; font-weight:700; white-space:nowrap; flex:0 0 auto}
.preco img{width:16px;height:16px}

/* ── desktop: world large on the left; work area and talk on the right ─── */
@media (min-width:900px) and (min-aspect-ratio:5/4){
  .palco{grid-template-rows:none; grid-template-columns:minmax(0,1fr) minmax(400px, 540px); gap:20px; padding:20px; max-width:1560px; margin:0 auto}
  .mundo{place-items:center}
  .lado{height:calc(100dvh - 40px); max-width:none; gap:14px}
  .trabalho{flex:0 0 auto}
  .moldura{flex:1 1 auto; min-height:140px}
  .conversa{flex:1 1 auto}
  .bolha{font-size:1.02rem}
  .topo h1{font-size:1rem}
}
/* phone: world on top at full width, the work area under it, the talk takes whatever height is left */
@media not all and (min-width:900px) and (min-aspect-ratio:5/4){
  .palco{grid-template-rows:auto minmax(0,1fr)}
  .mundo{height:var(--lh); place-items:start center}
  .lado{min-height:0}
  .moldura{flex:1 1 auto; min-height:64px}
  .conversa{flex:1 1 auto; max-height:none !important}
  .pergunta{font-size:1.12rem; padding-right:84px}
  .trabalho{padding:10px 10px}
  .placa{padding:20px 8px 10px; min-height:96px}
  .sil{min-width:40px; height:52px; font-size:1.7rem; padding:0 6px}
  .placa.compacta .sil{min-width:30px; height:42px; font-size:1.3rem; padding:0 4px}
  .placa.compacta{gap:6px 8px}
  .topo{display:none}
}
.sem-conversa .moldura{display:none}

/* ── bastidores: for the human, never for the child ───────────────────── */
.bastidores{position:fixed; left:6px; top:6px; z-index:20; max-width:min(600px, calc(100vw - 12px)); font:12px/1.4 ui-monospace,monospace; color:#d8e0d0}
.bastidores summary{cursor:pointer; opacity:.35; padding:2px 8px; border-radius:6px; background:#000a; width:max-content; list-style:none}
.bastidores[open] summary{opacity:1}
.bastidores > div{margin-top:4px; max-height:70dvh; overflow:auto; padding:10px 12px; background:#0b0f0ae8; border:1px solid #ffffff30; border-radius:8px; user-select:text; -webkit-user-select:text}
.bastidores h3{margin:8px 0 4px; font-size:12px; color:var(--destaque)}
.bastidores table{border-collapse:collapse; width:100%; display:block; overflow-x:auto}
.bastidores td,.bastidores th{border-bottom:1px solid #ffffff1a; padding:2px 5px; text-align:left; vertical-align:top}
.bastidores th{color:var(--apagado); font-weight:normal}
.bastidores .nota{color:#9aa590}

/* listen to one word: a small speaker over it, free, as many times as she wants */
.palavra{position:relative}
.ouvir{position:static; align-self:center; margin-left:2px; width:30px; height:30px; flex:0 0 auto; border-radius:8px; border:2px solid #8a5a2b; background:#fffaf0 no-repeat center/18px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%233a2410' d='M4 9h4l5-4v14l-5-4H4z'/><path fill='none' stroke='%233a2410' stroke-width='2' stroke-linecap='round' d='M16 9c1.3 1.6 1.3 4.4 0 6'/></svg>")}
.ouvir:active{transform:translateY(2px)}
.sinais button.tira{color:#8a7a60; font-size:1.5rem}
.acoes .ouvir-tudo{flex:1 1 auto}
.acoes .pronto{flex:1 1 auto; min-width:120px}
.placa.compacta .ouvir{width:26px; height:26px; background-size:15px}

/* the sung syllable: it stretches while Pingo sings it */
.sil.cantada{animation:estica 1.4s ease-in-out; background:#d9f6ec; border-color:#1f8f74; color:#0b6b52; letter-spacing:.06em}
@keyframes estica{0%{transform:scaleX(1)} 30%{transform:scaleX(1.25)} 80%{transform:scaleX(1.25)} 100%{transform:scaleX(1)}}

/* the pet's help: the sung word and a replay button */
.canto-card{display:flex; align-items:center; gap:10px; margin-top:6px; padding:6px 10px; border-radius:10px; background:#0004; border:1px solid var(--acento)}
.canto-texto{font:700 1.35rem "Rabisco", cursive; color:#bff0d8; letter-spacing:.04em}
.play{margin-left:auto; width:40px; height:36px; border-radius:10px; border:1px solid var(--acento); background:#7be0c622; color:var(--texto); font-size:1.1rem; cursor:pointer}
.play:active,.play-palavra:active,.play-par:active{transform:translateY(2px)}
/* the card of the two marks: the reader's faces, words to hear, the pair avó/avô */
.cartao-sinais{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px}
.cartao-sinais .col{display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px; border-radius:10px; background:#0004; border:1px solid var(--linha)}
.cartao-sinais .col b{color:var(--destaque); font-size:.85rem; text-align:center; margin:0}
.cartao-sinais .palavras{display:flex; flex-wrap:wrap; gap:4px; justify-content:center}
.play-palavra{border:1px solid var(--linha); background:#ffffff14; color:var(--texto); border-radius:8px; padding:4px 8px; cursor:pointer; font-size:.9rem}
.play-par{grid-column:1/-1; border:1px solid var(--acento); background:#7be0c622; color:var(--texto); border-radius:10px; padding:6px 10px; cursor:pointer; font-weight:600}
.oferta.gratis{border-color:#ffffff40}