/* O MAPA E A FOTO — short-encounter mock. The wooden talk frame, the work area and the wallet come from the
   canteiro PoC (already approved); the table with the photo and the map is new. */
@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;
}
*{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}
canvas{display:block; image-rendering:pixelated; touch-action:none}

/* ── stage: phone = world on top, work and talk below; wide = world left, work and talk right ── */
.palco{
  height:100dvh; width:100vw; display:grid; grid-template-rows:minmax(0,1fr) auto; gap:8px;
  padding:max(6px, env(safe-area-inset-top)) 16px max(8px, env(safe-area-inset-bottom));
}
.mundo{position:relative; min-height:0; display:flex; flex-direction:column; gap:6px}
.faixa{position:relative; flex:0 0 auto; height:clamp(46px, 8dvh, 110px); border-radius:8px; overflow:hidden; box-shadow:0 4px 12px #0009}
#cena{width:100%; height:100%}
.nivel{
  position:absolute; top:4px; left:50%; transform:translateX(-50%); padding:1px 10px; border-radius:999px;
  background:#000a; border:1px solid var(--linha); font-size:.78rem; color:var(--apagado); pointer-events:none;
}
.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)}}

.mesa{position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:6px}
.cartao{position:relative; flex:1 1 0; min-height:0; min-width:0; display:grid; place-items:center}
/* side by side or one over the other: the page picks whichever gives the photo and the map more room */
.mesa.lado{flex-direction:row; flex-wrap:wrap; align-content:stretch}
.mesa.lado .cartao{height:calc(100% - var(--pal, 0px))}
.mesa.lado .paleta{flex:1 1 100%}
.cartao canvas{border-radius:6px; box-shadow:0 5px 14px #000b}
.cartao.foto canvas{outline:3px solid #f4ecd8; outline-offset:-1px}
.cartao.foto.chegando canvas{animation:chega 1s ease-out both}
@keyframes chega{0%{opacity:0; transform:translateY(-30px) rotate(-8deg) scale(.6)} 70%{opacity:1; transform:rotate(2deg) scale(1.03)} 100%{transform:none}}
.cartao.oculto canvas{opacity:0}
.fios{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:3}
.fios line{stroke-width:3.5; stroke-linecap:round}
.fios .fio-ok{stroke:#7be0c6; filter:drop-shadow(0 0 3px #000)}
.fios .fio-junto{stroke:#ffc861; stroke-dasharray:6 5}
.fios .fio-errado{stroke:#ff8a7a; stroke-dasharray:5 5; stroke-width:5; animation:some 1.8s ease-in forwards}
.fios .fio-vivo{stroke:#fffaf0; stroke-dasharray:4 5; opacity:.85}
@keyframes some{0%{opacity:1} 100%{opacity:0}}

/* the four arrows around the photo: where does the map's arrow point on the photo? */
.setas{position:absolute; inset:0; pointer-events:none}
.setas[hidden]{display:none}
.seta{
  position:absolute; pointer-events:auto; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%;
  border:2px solid var(--destaque); background:#2a1e10e6; color:var(--destaque); font-size:1.4rem; font-weight:800; cursor:pointer;
  box-shadow:0 3px 10px #000a; animation:respira 1.8s ease-in-out infinite;
}
.seta:disabled{opacity:.25; animation:none; text-decoration:line-through}
.seta.certa{background:var(--acento); color:#10302a; border-color:#fff; animation:none}
@keyframes respira{50%{transform:scale(1.08)}}

/* the palette of pieces: pick one, then touch or drag over the squares */
.paleta{flex:0 0 auto; display:flex; gap:6px; justify-content:center; flex-wrap:nowrap}
.paleta[hidden]{display:none}
.peca{
  flex:0 1 58px; min-width:0; height:54px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border-radius:10px; border:2px solid #6b4a2b; background:#2a1e10; cursor:pointer; padding:2px; font-size:.68rem; color:var(--apagado);
}
.peca canvas{width:30px; height:30px; border-radius:4px}
.peca.sel{border-color:var(--destaque); background:#4a3418; color:var(--texto); transform:translateY(-3px); box-shadow:0 4px 0 #0006}
.peca.errada{animation:pisca-peca .5s 3}
@keyframes pisca-peca{50%{border-color:var(--erro); background:#5a2418}}

/* ── the work area: question, what answers it; the talk is a side panel ── */
.lado{display:flex; flex-direction:column; gap:8px; min-height:0; width:100%; max-width:720px; justify-self:center}
.trabalho{
  position:relative; display:flex; flex-direction:column; gap:8px; 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:2px 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.4em; padding-right:86px; font-size:1.3rem; line-height:1.28; 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}}

.vagas{display:flex; flex-wrap:wrap; gap:6px}
.vagas:empty{display:none}
.vaga{display:inline-flex; align-items:center; gap:5px; min-height:30px; padding:2px 10px 2px 4px; border-radius:999px; border:2px dashed #ffffff33; color:#ffffff55; font-size:.85rem}
.vaga i{display:inline-block; width:22px; height:22px; border-radius:50%; background:#ffffff14}
.vaga.feita{border:2px solid var(--acento); color:var(--texto); background:#7be0c61f; animation:encaixa .5s ease-out}
.vaga.feita i{background:var(--acento)}
.vaga.junto{border-color:var(--destaque); background:#ffc8611a}
.vaga.junto i{background:var(--destaque)}
@keyframes encaixa{0%{transform:scale(.6)} 60%{transform:scale(1.12)} 100%{transform:none}}

.acoes{display:flex; flex-wrap:wrap; gap:8px}
.acoes:empty{display:none}
.opcao{
  flex:1 1 100%; border:1px solid var(--linha); border-radius:var(--raio); background:#ffffff0f;
  padding:9px 12px; cursor:pointer; text-align:left; line-height:1.3;
}
.opcao:hover{border-color:var(--destaque); background:#ffffff1a}
.opcao:disabled{opacity:.45; text-decoration:line-through; cursor:default}
.opcao.certa{border-color:var(--acento); background:#7be0c62e; opacity:1; text-decoration:none}
.opcao.principal{flex:1 1 100%; text-align:center; background:var(--destaque); color:#2a1e08; border-color:var(--destaque); font-weight:700; box-shadow:0 3px 0 #0000004d}
.opcao.principal:disabled{opacity:.4; text-decoration:none}
.opcao.seguir{flex:0 0 auto; text-align:center; background:#ffffff14; font-weight:600}
.opcao.seguir::after{content:" ▸"}
.opcao:active{transform:translateY(2px)}
.fichas{display:flex; flex-wrap:wrap; gap:6px; width:100%}
.ficha{
  flex:1 1 calc(50% - 6px); padding:8px 10px; border-radius:10px; border:2px solid #ffffff2a; background:#ffffff0d; cursor:pointer; text-align:left; font-size:.95rem;
}
.ficha.marcada{border-color:var(--destaque); background:#ffc8612b}
.ficha.marcada::before{content:"✓ "; color:var(--destaque); font-weight:800}
.ficha.ok{border-color:var(--acento); background:#7be0c62e}
.ficha.nao{border-color:var(--erro); background:#ff8a7a22}
.ficha:disabled{cursor:default}

/* 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 input{width:4.2ch; min-width:0; font:700 1.7rem/1 system-ui, sans-serif; text-align:center; color:var(--texto); background:#ffffff14; border:2px solid #ffffff33; border-radius:10px; padding:5px 4px}
.resposta input:focus{outline:none; border-color:var(--destaque)}
.resposta .unidade{color:var(--apagado)}
.resposta .conferir{margin-left:auto; height:44px; padding:0 18px; border-radius:10px; border:0; background:var(--destaque); color:#2a1e08; font-weight:700; cursor:pointer}
.resposta .riscado{font:700 1.3rem "Rabisco", cursive; color:var(--erro); text-decoration:line-through 2px}
.resposta.treme{animation:treme .4s}
@keyframes treme{25%{transform:translateX(-6px)} 75%{transform:translateX(6px)}}

/* 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 of the 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);
}
.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:8px; 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; max-height:24dvh; min-height:2.6em; padding-right:4px; scroll-behavior:smooth}
.bolha, .xp-msg{max-width:94%; padding:5px 10px; border-radius:12px; background:#ffffff0d; line-height:1.38; font-size:.95rem}
.bolha b, .xp-msg b{display:block; font-size:.72rem; color:var(--destaque); margin-bottom:1px}
.bolha.pet, .xp-msg{background:#7be0c61a}
.bolha.pet b, .xp-msg 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, .xp-msg:last-child{background:#7be0c62e; box-shadow:inset 3px 0 0 var(--acento)}
.bolha.crianca:last-child{box-shadow:inset -3px 0 0 var(--apagado)}
.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:.92rem; text-align:left; width:100%}
.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}
.fonte-llm{display:inline-block; margin-left:6px; font-size:.62rem; color:#7be0c6aa; font-weight:400; letter-spacing:.03em}

/* the closing card, after the four: an optional bridge to the real world, no grade */
.convite{width:100%; padding:10px 12px; border-radius:12px; border:1px dashed var(--acento); background:#7be0c612; font-size:1rem; line-height:1.4}

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

/* phone: the talk and the question never squeeze the table out */
@media not all and (min-width:900px) and (min-aspect-ratio:5/4){
  .pergunta{font-size:1.1rem; padding-right:84px}
  .trabalho{padding:10px 10px; gap:6px}
  .opcao{padding:7px 10px; font-size:.93rem}
  .ficha{padding:6px 8px; font-size:.88rem}
  .moldura.lateral .conversa{max-height:10.5dvh}
  .moldura.lateral .topo{display:none}
  .lado{gap:6px}
}
/* wide: world on the left at full height; 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(360px, 440px); gap:20px; padding:18px 20px; max-width:1600px; margin:0 auto}
  .peca{flex:0 0 66px; height:60px; font-size:.75rem}
  .lado{max-width:none; height:calc(100dvh - 36px); justify-self:stretch}
  .trabalho{flex:0 0 auto}
  .moldura.lateral{flex:1 1 auto}
  .moldura.lateral .conversa{max-height:none; flex:1 1 auto}
  .pergunta{font-size:1.4rem}
}
.sem-conversa .moldura.lateral{display:none}

/* v3: turning the map and tracing the way — two small buttons and Pronto on one row */
.acoes .opcao.meia{flex:1 1 30%; text-align:center; font-weight:600}
.acoes .opcao.pronto{flex:1 1 30%}
.cartao.mapa canvas{cursor:crosshair}

/* v4: the credits of the map data and of the photo, always visible under the table */
.atribuicao{margin:0; flex:0 0 auto; font-size:.66rem; line-height:1.2; color:#c9bda8aa; text-align:center}
.atribuicao a{color:inherit}
.selo-foto{position:absolute; right:4px; bottom:4px; padding:1px 6px; border-radius:4px; background:#0009; color:#fff; font:10px system-ui; pointer-events:none}

/* v5: free tools on the cards — turn and zoom the map, zoom the photo — at any time */
.ferramentas{position:absolute; right:6px; top:6px; display:flex; flex-direction:column; gap:5px; z-index:4}
.ferramentas.foto{top:auto; bottom:22px}
.ferr{width:36px; height:36px; border-radius:50%; border:2px solid #fff3c4aa; background:#2a1e10dd; color:#fff3c4; font-size:1.15rem; font-weight:800; cursor:pointer; box-shadow:0 2px 6px #0009; line-height:1}
.ferr:active{transform:scale(.92)}
.cartao.foto canvas{cursor:grab}
#cartao-mapa{flex:3 1 0}
#cartao-foto{flex:2 1 0}
.pergunta.aviso{color:#fffaf0; background:#ffc8611f; border-radius:8px; padding:2px 6px}