/* O CANTEIRO — short-encounter mock. Talk panel copied from portas-trocadas (the game's wooden frame);
   the scribble is a strip of squared paper written by hand. */
@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; --papel:#f6f1e1; --tinta:#27324a; --grafite:#6a6a78;
}
*{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:none; 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:flex; flex-direction:column;
  padding:max(8px, env(safe-area-inset-top)) 16px max(10px, env(safe-area-inset-bottom));
  gap:8px; justify-content:center;
}
.mundo{position:relative; flex:1 1 auto; min-height:0; min-width:0; max-height:calc(100vw - 32px); display:grid; place-items:center}
#tela{
  display:block; image-rendering:pixelated; image-rendering:crisp-edges;
  border-radius:6px; box-shadow:0 6px 18px #000a;
  width:var(--lado); height:var(--lado); touch-action:none;
}
.lado{display:flex; flex-direction:column; gap:8px; flex:0 0 auto; width:100%; max-width:720px; align-self:center}
@media (min-width:900px) and (min-aspect-ratio:5/4){
  .palco{flex-direction:row; align-items:center; justify-content:center; gap:20px; padding:20px}
  .mundo{max-height:none; place-items:center; flex:0 1 auto; height:calc(100dvh - 40px); width:min(calc(100dvh - 40px), calc(100vw - 520px))}
  .lado{width:460px; align-self:center}
}

.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)}}

/* the pointing hand: a hint with no words */
.dica{
  position:absolute; width:34px; height:34px; pointer-events:none; z-index:4; margin:-4px 0 0 -8px;
  background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fffaf0' stroke='%232a1e10' stroke-width='1.3' d='M9 2.5c1 0 1.7.8 1.7 1.7v6.1l.6-.1c.9-.2 1.8.3 2 1.2l.1.3.5-.1c.9-.2 1.8.3 2 1.2l.1.4.4-.1c.9-.1 1.7.5 1.8 1.4l.3 3.2c.2 2.6-1.4 4.8-4 5.2l-2 .3c-1.8.2-3.5-.6-4.4-2.1l-3.3-5.3c-.5-.8-.2-1.8.6-2.2.7-.4 1.5-.2 2 .4l1 1.2V4.2C7.3 3.3 8 2.5 9 2.5z'/></svg>");
  animation:arrasta 2s ease-in-out infinite;
}
.dica[hidden]{display:none}
@keyframes arrasta{0%{transform:translate(0,0);opacity:0} 15%{opacity:1} 80%{opacity:1; transform:translate(var(--dx,40px),var(--dy,0))} 100%{opacity:0; transform:translate(var(--dx,40px),var(--dy,0))}}

/* ── the scribble ──────────────────────────────────────────────────────── */
.papel{
  position:relative; min-height:64px; padding:6px 14px 8px 40px; border-radius:4px;
  background:
    linear-gradient(90deg, transparent 30px, #e79a9a88 30px, #e79a9a88 31px, transparent 31px),
    repeating-linear-gradient(0deg, transparent 0 23px, #9fb6d655 23px 24px),
    var(--papel);
  color:var(--tinta); font-family:"Rabisco", "Comic Sans MS", cursive; font-size:1.45rem; line-height:24px;
  box-shadow:0 3px 10px #0008; transform:rotate(-.4deg);
}
.papel .r{white-space:normal; word-spacing:.08em}
.papel .r.menor{font-size:1.1rem; color:var(--grafite)}
.papel .r.novo{animation:escreve .6s ease-out}
.papel .pal{color:#8a4b12}
.papel .num-sub{color:#0b6b52; font-weight:bold; animation:escreve .8s ease-out}
.papel .final{display:inline-block; padding:0 8px; border:2px solid #c23b2a; border-radius:50% 45% 55% 40%; color:#9b2618}
.papel .dela{color:#1e5bb8}
@keyframes escreve{0%{opacity:0; transform:translateX(-6px)} 100%{opacity:1; transform:none}}

/* 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 wooden frame, one line at a time ──────────────────────────────── */
.moldura{
  position:relative; width:100%; min-height:150px; 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);
}
.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:8px 12px 10px;gap:6px}
.topo{display:flex;align-items:center;gap:10px}
.topo h1{margin:0;font-size:1rem;color:var(--destaque)}
body.fala-crianca .topo h1, body.fala-crianca .busto{opacity:.35}
.carteira{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:3px 10px; border-radius:999px; background:#0005; border:1px solid var(--linha);
}
.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}}
.busto{
  flex:0 0 auto; width:40px; height:40px; border-radius:10px; background-repeat:no-repeat;
  background-color:var(--painel-alto); border:2px solid var(--linha); image-rendering:pixelated;
}
.fala{margin:0; font-size:1.1rem; line-height:1.45; min-height:2.9em}
body.fala-crianca .fala{color:var(--apagado); text-align:right; font-style:italic}
.acoes{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; min-height:44px}
.opcao{
  flex:1 1 100%; border:1px solid var(--linha); border-radius:var(--raio); background:#ffffff0f;
  padding:10px 14px; cursor:pointer; text-align:center;
}
.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; font-weight:600}
.opcao.seguir::after{content:" ▸"}
.opcao.pronto{flex:0 0 auto; min-width:140px}
.opcao:active{transform:translateY(2px)}
.opcao .preco{display:inline-flex; align-items:center; gap:3px; margin-left:8px; padding:0 8px; border-radius:999px; background:#0006; color:var(--destaque); font-size:.85rem; font-weight:700}
.opcao .preco img{width:16px;height:16px}
.opcao.gratis .preco{color:var(--acento)}

/* ── the number pad: the total is a committed answer ──────────────────── */
.teclado{width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.visor{
  grid-column:1/-1; display:flex; align-items:baseline; justify-content:center; gap:10px;
  padding:4px 10px; border-radius:10px; background:#0006; border:1px solid var(--linha); min-height:48px;
}
.visor b{font-size:2rem; letter-spacing:.06em; color:var(--texto); min-width:2ch; text-align:right}
.visor b:empty::before{content:"_"; color:#ffffff40}
.visor span{color:var(--apagado)}
.visor.treme{animation:treme .4s}
@keyframes treme{25%{transform:translateX(-6px)} 75%{transform:translateX(6px)}}
.tecla{
  height:46px; border-radius:10px; border:1px solid var(--linha); background:#ffffff14; font-size:1.35rem; font-weight:700; cursor:pointer;
}
.tecla:active{transform:translateY(2px); background:#ffffff26}
.tecla.conferir{background:var(--destaque); color:#2a1e08; border-color:var(--destaque); font-size:1.05rem}
.tecla.conferir:disabled{opacity:.4}
.tecla.voltar{font-size:.9rem; font-weight:600; color:var(--apagado)}
.teclado-linha{grid-column:1/-1; display:flex; justify-content:flex-start}

/* ── bastidores: for the human, never for the child ───────────────────── */
.bastidores{position:fixed; left:6px; top:6px; z-index:20; max-width:min(560px, 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}

/* ── v2: the sum in steps — terms on the paper she can touch ─────────────── */
.papel.muitas{font-size:1.25rem; line-height:22px; background-size:auto, 100% 22px, auto}
.papel .t{display:inline-block; padding:0 3px; margin:0 -1px; border-radius:6px; transition:background .15s}
.papel .t.vivo{cursor:pointer; background:#ffd86a33; box-shadow:inset 0 -2px 0 #e0b24a88}
.papel .t.sel{background:#7be0c6aa; box-shadow:inset 0 0 0 2px #1f8f74}
.papel .t.usado{color:#9a9aa8}
.papel .t.leva{color:#8b90a6}
.papel .t.leva.vivo{background:#ffd86a22}
.papel .t.res{cursor:pointer; text-decoration:underline dotted #1e5bb888; text-underline-offset:4px}
.visor .conta{color:var(--apagado); font-size:1.4rem; font-family:"Rabisco", cursive}
.visor .fechar{margin-left:auto; border:0; background:#ffffff14; border-radius:8px; width:34px; height:34px; cursor:pointer; color:var(--apagado)}

/* ── v3: the talk with history, newest at the bottom; the box grows only up to a limit ───────── */
.moldura{min-height:0}
.painel{min-height:0}
.conversa{
  display:flex; flex-direction:column; gap:6px; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y;
  max-height:24dvh; min-height:3.2em; padding-right:4px; scroll-behavior:smooth;
}
.bolha{max-width:92%; padding:6px 10px; border-radius:12px; background:#ffffff0d; line-height:1.4; font-size:1.02rem}
.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.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; 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}
.bolha .oferta:disabled{opacity:.4; cursor:default}
.bolha .oferta .preco{margin-left:auto}
body.fala-crianca .topo h1, body.fala-crianca .busto{opacity:1}

/* the answer: a native field (numeric keyboard on the phone, the real one on the desktop) */
.resposta{width:100%; display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:12px; background:#0006; border:1px solid var(--linha)}
.resposta .conta{color:var(--apagado); font-size:1.35rem; font-family:"Rabisco", cursive; white-space:nowrap}
.resposta input{
  width:4.2ch; min-width:0; font:700 1.8rem/1 system-ui, sans-serif; text-align:center; color:var(--texto);
  background:#ffffff14; border:2px solid #ffffff33; border-radius:10px; padding:6px 4px;
}
.resposta input:focus{outline:none; border-color:var(--destaque); background:#ffffff1f}
.resposta .unidade{color:var(--apagado)}
.resposta .tecla.conferir{margin-left:auto; height:46px; padding:0 18px; font-size:1.05rem}
.resposta .fechar{border:0; background:#ffffff14; border-radius:8px; width:36px; height:36px; cursor:pointer; color:var(--apagado)}
.resposta.treme{animation:treme .4s}

/* undo: in the paper's left margin, by its lines; far from Conferir (right, below the paper), and never shown
   while the answer field is open. Grey-blue circle, not the gold of the answer. */
.papel-caixa{position:relative}
.desfazer{
  position:absolute; left:-6px; top:6px; z-index:5; width:34px; height:34px; border-radius:50%; padding:0;
  border:2px solid #6b7fa0; background:#dfe6f2; color:#3a4a66; font-size:1.2rem; line-height:1; cursor:pointer; box-shadow:0 2px 6px #0006;
}
.desfazer[hidden]{display:none}

/* her number flying to the other equal pairs */
.voo{position:fixed; z-index:30; pointer-events:none; font:1.45rem "Rabisco", cursive; color:#0b6b52; background:#7be0c6cc;
  padding:0 5px; border-radius:6px; transition:transform .8s cubic-bezier(.3,.7,.3,1), opacity .2s .85s; box-shadow:0 0 12px #7be0c6}
.papel .t.fonte{background:#7be0c6aa; box-shadow:0 0 0 2px #1f8f74 inset; animation:brilho 1.2s ease-out}
.papel .t.auto{background:#7be0c6aa; box-shadow:0 0 0 2px #1f8f74 inset; animation:brilho 1.2s ease-out .6s both}
@keyframes brilho{0%{transform:scale(1)} 40%{transform:scale(1.25)} 100%{transform:scale(1)}}

/* ── desktop: bed large on the left; paper and talk on the right, full height, nothing squeezed ── */
@media (min-width:900px) and (min-aspect-ratio:5/4){
  .palco{display:grid; grid-template-columns:auto minmax(380px, 1fr); gap:20px; padding:20px; align-items:stretch; justify-content:center; max-width:1500px; margin:0 auto}
  .mundo{height:calc(100dvh - 40px); width:min(calc(100dvh - 40px), calc(100vw - 440px)); max-height:none}
  .lado{width:auto; max-width:560px; height:calc(100dvh - 40px); display:flex; flex-direction:column; gap:14px; align-self:stretch}
  .papel{flex:0 0 auto; max-height:44%; overflow:auto}
  .moldura{flex:1 1 auto; display:flex}
  .painel{height:100%}
  .conversa{flex:1 1 auto; max-height:none}
  .bolha{font-size:1.05rem}
}

.opcao .preco, .oferta .preco{white-space:nowrap; flex:0 0 auto}
.bolha .oferta{justify-content:space-between; text-align:left}

/* phone: the paper never squeezes the bed — it keeps its latest lines in view and scrolls */
@media not all and (min-width:900px) and (min-aspect-ratio:5/4){
  .palco{display:grid; grid-template-rows:minmax(0, 1fr) auto; overflow:hidden}
  .mundo{min-height:0; place-items:end center; align-self:end; height:100%}
  .lado{min-height:0}
  .papel{max-height:17dvh; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y}
  .conversa{max-height:19dvh}
  .moldura{min-height:0}
}

/* ── the paper lives inside the talk: last line → paper → answer, in one place ───────────── */
.painel .papel{flex:0 0 auto; margin:2px 2px 0; transform:none}
.papel:empty{display:none}
@media (min-width:900px) and (min-aspect-ratio:5/4){
  .lado{gap:0}
  .painel .papel{max-height:38%; overflow-y:auto; overscroll-behavior:contain}
  .conversa{min-height:120px}
}
@media not all and (min-width:900px) and (min-aspect-ratio:5/4){
  .painel .papel{max-height:17dvh}
  .conversa{max-height:17dvh}
}

/* ══ v4: the WORK AREA (question, paper, answer) is where the eye stays; the talk is a side panel ══ */
.trabalho{
  position:relative; display:flex; flex-direction:column; gap:8px; padding:12px 14px 12px;
  border-radius:14px; background:#1f1810; border:2px solid #6b4a2b; box-shadow:0 6px 16px #0009;
}
.trabalho .carteira{position:absolute; top:-12px; right:12px; background:#2a1e10; border-color:#6b4a2b}
.pergunta{
  margin:0; min-height:1.5em; padding-right:90px; font-size:1.35rem; 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}}
.trabalho .papel{transform:none; margin:0; max-height:none}
.trabalho .acoes{min-height:0; justify-content:stretch}
.trabalho .acoes:empty{display:none}
.trabalho .acoes .pronto{flex:1 1 100%}

.moldura.lateral{opacity:.94}
.moldura.lateral .topo h1{font-size:.9rem}
.moldura.lateral .busto{width:32px; height:32px}
.moldura.lateral .bolha{font-size:.95rem}
.moldura.lateral .painel{padding:6px 10px 8px}

@media (min-width:900px) and (min-aspect-ratio:5/4){
  .lado{gap:14px}
  .trabalho{flex:0 0 auto; max-height:62%}
  .trabalho .papel{overflow-y:auto; overscroll-behavior:contain; max-height:none; flex:0 1 auto}
  .moldura.lateral{flex:1 1 auto; min-height:140px}
  .moldura.lateral .conversa{max-height:none}
}
@media not all and (min-width:900px) and (min-aspect-ratio:5/4){
  .pergunta{font-size:1.15rem; padding-right:80px}
  .trabalho{padding:10px 10px}
  .trabalho .papel{max-height:18dvh}
  .moldura.lateral .conversa{max-height:11dvh; min-height:2.6em}
  .moldura.lateral .topo{display:none}
}

.sem-conversa .moldura.lateral{display:none}

/* her wrong numbers, crossed out beside the field */
.resposta .riscado{font:700 1.3rem "Rabisco", cursive; color:#ff8a7a; text-decoration:line-through 2px; opacity:.9}

/* level 3: the other equal pairs light up, linked to her number; a touch takes it, ignoring asks nothing */
.papel .t.sugerido{cursor:pointer; background:#7be0c655; box-shadow:0 0 0 2px #1f8f74 inset, 0 0 10px #7be0c6; animation:acende 1.4s ease-in-out infinite}
.papel .t.fonte.liga{box-shadow:0 0 0 2px #1f8f74 inset, 0 0 12px #7be0c6}
@keyframes acende{50%{box-shadow:0 0 0 2px #1f8f74 inset, 0 0 18px #7be0c6}}

/* the notebook of her results */
.caderno{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.caderno[hidden]{display:none}
.caderno .cad{font:700 1.2rem "Rabisco", cursive; color:#0b6b52; background:#7be0c622; border:1px dashed #1f8f74; border-radius:8px; padding:0 10px; min-width:44px; height:34px; cursor:pointer}
.caderno .cad.sel{background:#7be0c6aa; border-style:solid}

/* "Ao todo": always under the work area; set apart from the scratch pad by a rule and its own tint */
.resposta.total{margin-top:8px; border-top:1px dashed #fff3c455; padding-top:8px; background:#1d2a1f}
.resposta.total[hidden]{display:none}
.resposta.total .conta{font-weight:bold; color:var(--destaque)}
.tecla.conferir.escrever{background:#dfe6f2; border-color:#6b7fa0; color:#2a3450}
.papel .t.cont{cursor:pointer}