/* PORTAS TROCADAS — the arc mission as a playable mock.
   The talk panel copies the game's conversation look (tarefas/tela/loja.css + conversa.css):
   wooden frame, bust beside each balloon, the child's line on the right, buttons at the foot. */
:root{
  --texto:#fffaf0; --apagado:#c9bda8; --destaque:#ffc861; --acento:#7be0c6;
  --painel:rgb(36,28,20); --painel-alto:rgb(47,37,26); --linha:#ffffff1f; --sombra:#0008;
  --raio:12px; --fundo:#141a10;
}
*{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); the talk beside it ─────── */
.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:12px; justify-content:center;
}
.mundo{position:relative; flex:0 1 auto; height:min(calc(100vw - 32px), calc(100dvh - 250px)); min-height:0; min-width:0; 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;
}

/* ── the tower clock ─────────────────────────────────────────────────── */
.relogio-torre{
  position:absolute; top:6px; right:6px; width:64px;
  display:flex; flex-direction:column; align-items:center; gap:0;
  filter:drop-shadow(0 3px 4px #000a); pointer-events:none;
  transition:transform .3s;
}
.relogio-torre svg{width:64px;height:64px}
.relogio-torre .aro{fill:#6b5a44; stroke:#2b2016; stroke-width:3}
.relogio-torre .face{fill:#f3e7c9}
.relogio-torre .marca{stroke:#3a2c1c; stroke-width:2.4}
.relogio-torre .ph{stroke:#2a1e10; stroke-width:5; stroke-linecap:round}
.relogio-torre .pm{stroke:#2a1e10; stroke-width:3; stroke-linecap:round}
.relogio-torre .eixo{fill:#b0482f}
.relogio-torre b{
  margin-top:-4px; padding:0 7px; border-radius:8px; font-size:.8rem;
  background:#2b2016; color:#f3e7c9; border:1px solid #6b5a44;
}
.relogio-torre.bate{animation:bate .5s ease-in-out 3}
@keyframes bate{0%,100%{transform:rotate(0)} 25%{transform:rotate(-8deg)} 75%{transform:rotate(8deg)}}

/* 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:cutuca 1.1s ease-in-out infinite;
}
.dica.arrasta{animation:arrasta 1.8s ease-in-out infinite}
@keyframes cutuca{0%,100%{transform:translate(0,0)} 50%{transform:translate(0,7px)}}
@keyframes arrasta{0%{transform:translate(0,0);opacity:0} 15%{opacity:1} 85%{opacity:1; transform:translate(var(--dx,40px),var(--dy,0))} 100%{opacity:0; transform:translate(var(--dx,40px),var(--dy,0))}}

/* coins flying to the wallet */
.camada-moedas{position:fixed; inset:0; pointer-events:none; z-index:9}
.moeda{position:absolute; width:28px; height:28px; transition:transform .9s cubic-bezier(.5,-0.3,.6,1), opacity .2s .8s}
.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;
}
@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 (loja.css), holding one line at a time ─────────────── */
.moldura{
  position:relative; flex:0 0 auto;
  width:100%; max-width:720px; align-self:center; min-height:188px; 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:10px 14px 12px;gap:8px}
.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:4px 10px; border-radius:999px; background:#0005; border:1px solid var(--linha);
}
.carteira[hidden]{display:none}
.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}}
/* the bust: frame 1 of journeyman.png (192x256, 64 px frames), face and chest */
.busto{
  flex:0 0 auto; width:40px; height:40px; border-radius:10px;
  background:url('arte/journeyman.png') no-repeat; background-size:240px 320px; background-position:-100px -8px;
  background-color:var(--painel-alto); border:2px solid var(--linha); image-rendering:pixelated;
}
.fala{margin:0; font-size:1.12rem; line-height:1.5; min-height:3em}
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:46px}
.opcao{
  flex:1 1 100%; border:1px solid var(--linha); border-radius:var(--raio); background:#ffffff0f;
  padding:11px 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:active{transform:translateY(2px)}
@media (min-width:600px){ .opcao{flex:1 1 auto; min-width:160px} .opcao.seguir{flex:0 0 auto; min-width:0} }