/* O CONSERTO v5 — short-encounter mock. The work area (the question of the moment, the bench, the notebook) is where the
   eyes are and is never blocked; the talk is lateral: it narrates at its own pace and nothing waits for it.
   Talk frame copied from the canteiro (the game's wooden frame). */
@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:#17130f; --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 (v5, DEC-044): the challenge on top, the bench below, as big as fits; nothing on the side ───── */
.palco{height:100dvh; width:100vw; display:flex; flex-direction:column; align-items:center; gap:8px; overflow:hidden;
  padding:max(8px, env(safe-area-inset-top)) 16px max(8px, env(safe-area-inset-bottom))}
.barra{display:flex; align-items:center; gap:10px; width:var(--lado, 100%); max-width:100%}
.pergunta{
  flex:1 1 auto; min-height:2.4em; display:flex; align-items:center; justify-content:center;
  padding:6px 12px; border-radius:12px; text-align:center;
  background:linear-gradient(#2f2618, #241c12); border:2px solid #ffc86166; box-shadow:0 3px 10px #0008;
  font-weight:800; font-size:clamp(1.1rem, 3.6vw, 1.5rem); line-height:1.2; color:#fff3d6;
}
.pergunta:empty{visibility:hidden}
.pergunta.nova{animation:nova .7s ease-out}
@keyframes nova{0%{transform:scale(.96)} 40%{transform:scale(1.04); box-shadow:0 0 18px #ffc86188} 100%{transform:none}}
.carteira{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; background:#0006; border:1px solid var(--linha)}
.carteira img{width:24px;height:24px}
.carteira b{color:var(--destaque); font-size:1.15rem}
.carteira.pulsa{animation:pulsa .5s ease-out 2}
@keyframes pulsa{50%{transform:scale(1.18); box-shadow:0 0 18px #ffc861aa}}
.quadro{position:relative; flex:1 1 auto; min-height:0; width:100%; display:grid; place-items:start 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}
/* phones: a slimmer top line, so the bench gets the height (v9) */
@media (max-height:500px){ .palco{gap:4px; padding-top:max(4px, env(safe-area-inset-top)); padding-bottom:max(4px, env(safe-area-inset-bottom))} .pergunta{min-height:0; padding:3px 10px; font-size:1rem} .carteira{padding:2px 10px} }
@media (max-width:500px){ .palco{padding-left:8px; padding-right:8px} .pergunta{font-size:1.05rem; padding:5px 10px} }
.nivel{
  position:absolute; top:var(--topo-nivel,8px); left:var(--esq-nivel,8px);
  padding:2px 10px; border-radius:999px; background:#000a; border:1px solid var(--linha);
  font-size:.78rem; color:var(--apagado); pointer-events:none; letter-spacing:.02em; z-index:3;
}
.nivel[hidden]{display:none}

/* 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 balloons: short, near what they are about */
.baloes{position:absolute; left:0; top:0; width:100%; height:100%; justify-self:stretch; align-self:stretch; pointer-events:none; z-index:9}
.balao{position:absolute; transform:translate(-50%, calc(-100% - 12px)); width:max-content; max-width:min(260px, 70vw); padding:7px 11px; border-radius:12px;
  background:#fffaf0; color:#2a1e08; font-weight:700; font-size:clamp(.95rem, 2.8vw, 1.1rem); line-height:1.25; text-align:center;
  box-shadow:0 4px 14px #000a; animation:surge .25s ease-out; pointer-events:none}
.balao::after{content:""; position:absolute; left:50%; bottom:-8px; margin-left:-8px; border:8px solid transparent; border-bottom:0; border-top-color:#fffaf0}
.balao.t-perigo{background:#ffe9e0; color:#7a1c0c; border:2px solid #e0442c}
.balao.t-perigo::after{border-top-color:#ffe9e0}
.balao.abaixo{transform:translate(-50%, 16px)}
.balao.abaixo::after{bottom:auto; top:-8px; border-top:0; border-bottom:8px solid #fffaf0}
.balao.t-perigo.abaixo::after{border-bottom-color:#ffe9e0}
@keyframes surge{0%{opacity:0; transform:translate(-50%, calc(-100% - 2px)) scale(.9)} 100%{opacity:1}}
/* the pet's help button, on the pet; and its little menu */
.petajuda{position:absolute; z-index:7; transform:translate(-50%,-50%); display:flex; align-items:center; gap:4px; padding:3px 9px 3px 4px; border-radius:999px;
  border:2px solid #7be0c6; background:#15352d; color:#e6fff7; cursor:pointer; font-weight:800; font-size:.9rem; box-shadow:0 3px 10px #0009}
.petajuda span{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#7be0c6; color:#15352d; font-size:1rem}
.petajuda[hidden], .ajuda[hidden], .fim[hidden]{display:none}
.ajuda{position:absolute; z-index:8; display:flex; flex-direction:column; gap:6px; padding:8px; border-radius:12px; background:#15352df2; border:2px solid #7be0c6; box-shadow:0 6px 18px #000b; min-width:160px}
.ajuda button{border:0; border-radius:9px; padding:8px 12px; background:#e6fff7; color:#15352d; font-weight:800; cursor:pointer; text-align:left}
.ajuda button.como{background:#ffc861; color:#2a1e08}
/* after a repair */
.fim{position:absolute; z-index:8; left:50%; bottom:4%; transform:translateX(-50%); display:flex; flex-wrap:wrap; gap:8px; justify-content:center; width:min(92%, 520px)}
.fim button{flex:1 1 200px; border:0; border-radius:12px; padding:12px 14px; font-weight:800; font-size:1.05rem; cursor:pointer; box-shadow:0 4px 0 #0006}
.fim button.principal{background:var(--destaque); color:#2a1e08}
.fim button.sec{background:#f6f1e1; color:#27324a}
/* 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 0 3px #1a0e00, 0 2px 0 #3a2400, 0 0 6px #000, 0 0 18px #ffc861aa; -webkit-text-stroke:1px #3a2400; 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}}

/* ── bastidores: for the human, never for the child ───────────────────── */
.bastidores{position:fixed; left:6px; top:6px; z-index:20; max-width:min(580px, 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:80dvh; overflow:auto; padding:10px 12px; background:#0b0f0aee; 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}

.bastidores{top:auto; bottom:4px}
body.mudo .x{display:none}
/* the bridge card: build a little torch at home, step by step, drawn */
.ponte{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(var(--lado, 94%), 94%); z-index:8;
  background:#f6f1e1; color:#27324a; border-radius:10px; box-shadow:0 10px 30px #000c; padding:8px 10px 10px; cursor:pointer; user-select:none}
.ponte[hidden]{display:none}
.ponte h2{margin:0 30px 4px 2px; font:700 1rem/1.2 system-ui, sans-serif; color:#8a4b12}
.ponte canvas{display:block; width:100%; aspect-ratio:320/230; border-radius:6px}
.ponte p{margin:6px 2px 4px; font:1.2rem/1.3 "Rabisco", cursive; min-height:2.6em}
.ponte .marcas{display:flex; gap:6px; justify-content:center}
.ponte .nav{display:flex; align-items:center; justify-content:space-between; gap:8px}
.ponte .nav button{width:44px; height:36px; border:0; border-radius:8px; background:#8a4b12; color:#fff3d6; font:700 1.4rem/1 system-ui, sans-serif; cursor:pointer}
.ponte .nav button:disabled{background:#c9bda8; cursor:default}
.ponte .marcas i{width:12px; height:12px; border-radius:50%; background:#c9bda8; cursor:pointer}
.ponte .marcas i.on{background:#8a4b12}
.ponte-x{position:absolute; right:6px; top:4px; width:32px; height:32px; border:0; border-radius:8px; background:#0001; color:#27324a; font-size:1rem; cursor:pointer}

.ponte .abas{display:flex; gap:6px; margin:0 40px 6px 0}
.ponte .abas{flex-wrap:wrap}
.ponte .abas button{flex:1 1 40%; border:1px solid #c9bda8; background:#efe6cf; color:#6a5a4a; border-radius:8px; padding:5px 8px; font:700 .9rem system-ui, sans-serif; cursor:pointer}
.ponte .abas button.on{background:#8a4b12; border-color:#8a4b12; color:#fff3d6}
.ponte p.alerta{color:#a02a1c; font-weight:bold; background:#ffe4dc; border-radius:6px; padding:2px 6px}

@media (max-height:500px), (max-width:500px){ .bastidores{top:0; bottom:auto; left:0} .bastidores summary{padding:0 6px; font-size:10px} }   /* the debug pill never over the bench on a phone */