/* Tolerância Zero à Corrupção · identidade Riachuelo 2026.
   A cena ocupa a tela inteira. Por cima dela ficam a faixa de estado (topo), o cartão da missão (canto superior esquerdo),
   os andares (canto inferior esquerdo) e o botão do objetivo (canto inferior direito). Verde-escuro e creme são os neutros;
   ouro é o único acento. Raios: 8 (controles), 12 (botões e cartões), 18 (painéis). */
@font-face { font-family: "Larsseit"; src: url(../fonts/Larsseit-Light.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Larsseit"; src: url(../fonts/Larsseit-Medium.woff2) format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Larsseit"; src: url(../fonts/Larsseit-Bold.woff2) format("woff2"); font-weight: 600 800; font-display: swap; }
:root {
  --verde: #0C2E2D; --verde-fundo: #071C1B;
  --bege: #D7D0BB; --areia: #F4F1EA;
  --ouro: #F2B63D; --ouro-2: #F7C75E; --dourado: #C37829; --rosa: #F4A9A4; --terracota: #A53A04;
  --tinta: #0F2E2D; --tinta-2: rgba(15,46,45,.72); --tinta-3: rgba(15,46,45,.5);
  --linha-forte: rgba(15,46,45,.22);
  --claro: #F1EBDD; --claro-2: rgba(241,235,221,.72); --claro-3: rgba(241,235,221,.5); --linha-c: rgba(241,235,221,.16);
  --vidro: rgba(9,32,30,.9);
  --r1: 8px; --r2: 12px; --r3: 18px;
  --sombra-1: 0 1px 2px rgba(7,28,27,.08), 0 4px 12px -2px rgba(7,28,27,.1);
  --sombra-2: 0 2px 4px rgba(3,14,13,.2), 0 24px 60px -12px rgba(3,14,13,.55);
  --sombra-hud: 0 1px 0 rgba(255,255,255,.05) inset, 0 10px 30px -8px rgba(0,0,0,.55);
  --sai: cubic-bezier(.16,1,.3,1); --mola: cubic-bezier(.32,.72,0,1);
  --topo: 72px;
  --fonte: "Larsseit", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--verde-fundo); color: var(--claro); font: 400 15px/1.5 var(--fonte); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 300; line-height: 1.08; letter-spacing: -.02em; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
[hidden] { display: none !important; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sobre { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
kbd { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 22px; height: 22px; padding: 0 5px; margin-right: 12px; border: 1px solid var(--linha-forte); border-radius: 6px; font: 600 11px/1 var(--fonte); color: var(--tinta-2); background: rgba(255,255,255,.5); }

/* ---------- faixa de estado ---------- */
#topo { position: relative; z-index: 40; display: flex; align-items: center; gap: 8px 28px; min-height: 72px; padding: 10px 28px 10px 36px; background: linear-gradient(180deg, #0D3331, #0A2725); box-shadow: 0 1px 0 rgba(241,235,221,.08), 0 8px 24px -8px rgba(0,0,0,.5); }
/* logotipo: a imagem serve de máscara, e a cor vem do texto em volta (creme sobre verde, verde sobre creme) */
.logo { display: block; flex: none; height: 19px; aspect-ratio: 600 / 94; background: currentColor; -webkit-mask: url(../img/riachuelo.webp) center / contain no-repeat; mask: url(../img/riachuelo.webp) center / contain no-repeat; }
.marca { display: flex; align-items: center; gap: 24px; margin-right: auto; color: var(--claro); }
.marca strong { padding-left: 24px; border-left: 1px solid var(--linha-c); font-size: 17px; font-weight: 500; line-height: 34px; letter-spacing: -.005em; white-space: nowrap; }
.hud { display: flex; align-items: center; }
.hud-item { display: flex; align-items: center; gap: 12px; padding: 0 26px; border-left: 1px solid var(--linha-c); }
.hud-item:first-child { border-left: 0; }
.hud-item svg { width: 26px; height: 26px; flex: none; }
.hud dt { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--claro-2); line-height: 1.2; white-space: nowrap; }
.hud dd { font-size: 18px; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; }
#h-hora { font-size: 20px; }
#h-rep-n.meio { color: var(--ouro); } #h-rep-n.baixo { color: var(--rosa); }
#h-pts { display: inline-block; transition: transform .25s var(--mola), color .25s; }
#h-pts.sobe { color: var(--ouro); transform: scale(1.12); }
.segs { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 5px; gap: 8px; margin-left: 14px; vertical-align: middle; }
.segs i { height: 5px; border-radius: 50%; background: var(--claro-3); }
.segs i.feita { background: var(--claro); }
.segs i.atual { width: 10px; margin-right: -5px; border-radius: 3px; background: var(--ouro); }
.topo-bts { display: flex; gap: 16px; }
.icone { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(241,235,221,.28); border-radius: var(--r2); background: rgba(241,235,221,.04); color: var(--claro); cursor: pointer; transition: background-color .16s var(--sai), transform .16s var(--sai); }
.icone svg { width: 24px; height: 24px; }
.icone:hover { background: rgba(241,235,221,.12); }
.icone:active { transform: scale(.96); }
#b-som[aria-pressed="true"] .som-off, #b-som[aria-pressed="false"] .som-on { display: none; }

/* ---------- cena e o que fica por cima dela ---------- */
#jogo { position: relative; min-height: 0; overflow: hidden; background: var(--verde); }
#jogo.treme #tela { animation: treme .36s var(--sai); }
#tela { display: block; width: 100%; height: 100%; }
.cartao-hud { position: absolute; z-index: 3; display: flex; align-items: center; background: var(--vidro); border: 1px solid rgba(241,235,221,.12); border-radius: var(--r3); box-shadow: var(--sombra-hud); }
#missao { left: 30px; top: 30px; gap: 18px; max-width: min(440px, calc(100% - 60px)); padding: 18px 28px 18px 20px; }
#missao svg { width: 40px; height: 40px; flex: none; color: var(--ouro); }
#missao .rot { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); margin-bottom: 2px; }
#objetivo { font-size: 19px; font-weight: 500; line-height: 1.3; letter-spacing: -.005em; }
#objetivo.novo { animation: surge .5s var(--sai); }
#predio { left: 30px; bottom: 30px; gap: 18px; padding: 12px 22px 12px 20px; }
#predio svg { width: 30px; height: 30px; flex: none; color: var(--claro); }
.andares { display: flex; align-items: center; gap: 6px; }
.chip-andar { min-width: 46px; padding: 0 8px; text-align: center; font-size: 19px; font-weight: 500; line-height: 42px; border-radius: 10px; color: var(--claro-2); font-variant-numeric: tabular-nums; }
.chip-andar.aqui { background: var(--ouro); color: var(--verde); font-weight: 700; }
.chip-andar.alvo { color: var(--ouro); box-shadow: inset 0 0 0 2px var(--ouro); animation: respira 1.8s var(--mola) infinite; }
.btn.ouro { position: absolute; right: 30px; bottom: 30px; z-index: 3; gap: 14px; min-height: 64px; padding: 0 30px 0 28px; border: 0; border-radius: 16px; background: var(--ouro); color: var(--verde); font-size: 21px; font-weight: 600; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 12px 30px -8px rgba(0,0,0,.6); }
.btn.ouro svg { width: 26px; height: 26px; }
.btn.ouro:hover { background: var(--ouro-2); }
#toast { position: absolute; left: 50%; top: 28px; transform: translate(-50%, -10px) scale(.96); background: var(--claro); color: var(--verde); font-weight: 600; font-size: 15px; padding: 10px 20px; border-radius: 999px; box-shadow: var(--sombra-2); opacity: 0; transition: opacity .25s var(--sai), transform .35s var(--mola); pointer-events: none; z-index: 5; white-space: nowrap; }
#toast.vis { opacity: 1; transform: translate(-50%, 0) scale(1); }
.flutua { position: fixed; z-index: 90; color: var(--ouro); font-weight: 600; font-size: 17px; pointer-events: none; animation: flutua 1.2s var(--sai) forwards; }
.confete { position: fixed; top: -12px; width: 7px; height: 7px; border-radius: 1px; z-index: 85; animation: cai 2s cubic-bezier(.4,0,1,1) forwards; pointer-events: none; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid; font-size: 14.5px; letter-spacing: .005em; cursor: pointer; white-space: nowrap; transition: background-color .16s var(--sai), border-color .16s var(--sai), transform .16s var(--sai), opacity .16s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn.chama { animation: chama 1.4s var(--mola) infinite; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ---------- diálogos ---------- */
#dlg { position: fixed; inset: var(--topo) 0 0 0; z-index: 50; display: flex; overflow-y: auto; animation: aparece .25s var(--sai); }
.painel { width: 100%; }

/* ---------- X e rodapé das telas ----------
   O X de fechar e o rodapé com o aviso à esquerda e o botão principal à direita. A cena de cada tela ajusta o resto. */
.jan-fechar { position: absolute; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r1); background: none; color: var(--claro); cursor: pointer; transition: background-color .16s var(--sai); }
.jan-fechar svg { width: 26px; height: 26px; }
.jan-fechar:hover { background: rgba(241,235,221,.12); }
.jan-pe { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.jan-aviso { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 15.5px; line-height: 1.3; }
.jan-aviso svg { flex: none; width: 24px; height: 24px; }
.jan-pe .btn { flex: none; min-width: 190px; gap: 10px; font-size: 16.5px; }
.jan-pe .btn:disabled { opacity: 1; }
.jan-pe .btn svg { width: 20px; height: 20px; }

.quem { text-transform: uppercase; margin-bottom: 5px; }
.txt { font-size: 16px; line-height: 1.55; max-width: 62ch; }
.txt.digitando::after { content: "▍"; color: var(--dourado); animation: pisca .7s steps(2) infinite; }
.retrato-img { height: auto; flex: none; transform-origin: 50% 100%; }
.falando .retrato-img { animation: falar .5s var(--mola) infinite; }
/* busto sem rosto, como as figuras do mapa */
.retrato { position: relative; width: 60px; height: 60px; flex: none; border-radius: 50%; overflow: hidden; }
.retrato .pessoa { position: absolute; left: 50%; bottom: -14px; width: 60px; height: 84px; margin-left: -30px; }
.retrato .pessoa i { position: absolute; display: block; }
.retrato .cab { left: 13px; top: 8px; width: 34px; height: 34px; border-radius: 50%; background: var(--pele); box-shadow: inset 0 11px 0 var(--cabelo); z-index: 2; }
.retrato .corpo { left: 6px; top: 43px; width: 48px; height: 44px; border-radius: 18px 18px 0 0; background: var(--camisa); }

.ops { display: grid; }
.op, .passo { display: flex; align-items: center; width: 100%; text-align: left; padding: 12px 16px; cursor: pointer; font-size: 15.5px; line-height: 1.4; transition: border-color .16s var(--sai), background-color .16s var(--sai), transform .16s var(--sai), box-shadow .16s var(--sai); animation: sobe .4s var(--mola) both; }
.passo:hover:not(:disabled) { box-shadow: var(--sombra-1); }
.passo:active:not(:disabled) { transform: scale(.99); }
.reacao { animation: sobe .4s var(--mola); }
.chip { padding: 2px 9px; border-radius: 999px; border: 1px solid; font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.chip.serie { background: var(--verde); }
.piso { border-top: 1px solid; padding-top: 10px; margin-top: 10px; font-size: 14px; }
.dica { font-size: 14px; margin: 6px 0; }
.artes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.arte, .selo, .selo-g { display: inline-block; border: 1px solid; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; }
.selo-g { box-shadow: inset 0 0 0 1px var(--dourado); }

.canal-box .logo { height: 14px; margin-bottom: 18px; color: var(--bege); }
/* ---------- abertura: tela de título de jogo ---------- */
#dlg.dlg-inicio { inset: 0; background: #0B1716; overflow: hidden; }
.dlg-inicio .painel { position: relative; height: 100%; min-height: 100%; color: var(--claro); overflow: hidden; }
/* A capa tem o Complacito no meio, apontando para a esquerda, e o prédio com o letreiro à direita. O nome e o menu ficam
   numa coluna à esquerda, sobre o céu, para onde ele aponta, e o letreiro fica livre. A arte respira devagar, como num menu de jogo. */
.tit-fundo { position: absolute; inset: 0; overflow: hidden; }
/* A arte tem sempre a altura da tela (--W = largura de um 16:9 com essa altura: orelhas e pés nunca são cortados) e encosta
   na direita. Ela anda para a direita o quanto for preciso para a mão do Complacito (a 27% da largura da arte) ficar fora da
   coluna; numa tela mais larga que 16:9, o que sobra à esquerda é fundo escuro, onde a borda da arte se dissolve. */
.dlg-inicio { --W: 177.78vh; --col: min(400px, max(300px, 26vw)); --margem: clamp(20px, 3vw, 64px); }
.tit-fundo img { position: absolute; top: 0; height: 100%; width: var(--W); left: max(calc(100vw - var(--W)), calc(var(--margem) + var(--col) + 20px - .27 * var(--W))); object-fit: cover; object-position: 50% 50%; transform-origin: 46% 60%; animation: tit-respira 24s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%); mask-image: linear-gradient(90deg, transparent 0, #000 9%); }
.tit-fundo { background: radial-gradient(ellipse at 0% 40%, #1d2a33 0%, #0B1716 70%); }
@keyframes tit-respira { from { transform: scale(1.05); } to { transform: scale(1); } }
.tit-fundo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,24,23,.9) 0, rgba(8,24,23,.74) calc(var(--margem) + var(--col) * .7), rgba(8,24,23,0) calc(var(--margem) + var(--col) + 60px)),
              linear-gradient(0deg, rgba(8,24,23,.5) 0%, rgba(8,24,23,0) 20%),
              linear-gradient(180deg, rgba(8,24,23,.45) 0%, rgba(8,24,23,0) 16%); }
/* poeira dourada no ar, na luz do fim de tarde */
.tit-luz { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tit-luz i { position: absolute; bottom: -12px; width: var(--t); height: var(--t); border-radius: 50%; background: #FFE2A6; box-shadow: 0 0 10px 2px rgba(255,190,90,.55); opacity: 0; animation: tit-sobe linear infinite; }
@keyframes tit-sobe { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .9; } 70% { opacity: .6; } 100% { transform: translate(40px, -78vh); opacity: 0; } }
.tit-marca { position: absolute; left: var(--margem); top: clamp(18px, 3.4vh, 36px); height: clamp(18px, 1.7vw, 26px); color: #FFF6E3; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.tit-coluna { position: absolute; top: 0; bottom: 0; left: var(--margem); width: var(--col); display: flex; flex-direction: column; justify-content: center; }
.tit-nome { font-weight: 700; text-transform: uppercase; line-height: .9; letter-spacing: -.02em; color: #FFF6E3; text-shadow: 0 3px 0 rgba(0,0,0,.28), 0 10px 30px rgba(0,0,0,.5); animation: tit-entra .8s var(--mola) both; }
.tit-nome span { display: block; font-size: clamp(36px, 4.3vw, 72px); }
.tit-nome small { display: inline-block; margin-top: 14px; padding: 7px 16px 8px; border-radius: 10px; background: var(--ouro); color: var(--verde); font-size: clamp(17px, 1.75vw, 28px); letter-spacing: .03em; text-shadow: none; transform: rotate(-2.5deg); box-shadow: 0 5px 0 rgba(0,0,0,.28); }
@keyframes tit-entra { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
.tit-menu { display: flex; flex-direction: column; gap: 9px; margin-top: clamp(22px, 4.4vh, 44px); }
.tit-op { position: relative; display: flex; align-items: center; width: 100%; min-height: 52px; padding: 0 18px 0 44px; border: 1px solid rgba(241,235,221,.2); border-radius: 12px; background: rgba(8,24,23,.6); backdrop-filter: blur(6px); color: #FFF6E3; font: inherit; font-size: 17px; font-weight: 600; text-align: left; cursor: pointer; transition: transform .16s var(--sai), background-color .16s var(--sai), color .16s var(--sai), border-color .16s var(--sai); animation: sobe .5s var(--mola) both; }
.tit-menu .tit-op:nth-child(2) { animation-delay: .06s; } .tit-menu .tit-op:nth-child(3) { animation-delay: .12s; } .tit-menu .tit-op:nth-child(4) { animation-delay: .18s; }
.tit-op::before { content: ""; position: absolute; left: 19px; top: 50%; border-left: 10px solid currentColor; border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; transform: translateY(-50%) scale(0); transition: transform .16s var(--mola); }
.tit-op:focus { outline: none; }
.tit-op.sel, .tit-como-caixa .tit-op:hover, .tit-como-caixa .tit-op:focus { background: var(--ouro); border-color: var(--ouro); color: var(--verde); transform: translateX(6px); }
.tit-op.sel::before, .tit-como-caixa .tit-op:hover::before, .tit-como-caixa .tit-op:focus::before { transform: translateY(-50%) scale(1); }
.tit-op:focus-visible { box-shadow: 0 0 0 3px rgba(255,246,227,.85); }
.tit-op.principal { min-height: 62px; font-size: 20px; }
.tit-op small { margin-left: auto; font-size: 13px; font-weight: 600; opacity: .72; }
.tit-info { margin: 18px 2px 0; font-size: 13.5px; color: rgba(255,246,227,.72); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.tit-dica { position: absolute; left: var(--margem); width: var(--col); bottom: clamp(14px, 3vh, 28px); text-align: left; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #FFF6E3; text-shadow: 0 2px 10px rgba(0,0,0,.7); animation: tit-pisca 1.8s ease-in-out infinite; pointer-events: none; }
@keyframes tit-pisca { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (hover: none) { .tit-dica { display: none; } }
/* como jogar, por cima do título */
.tit-como { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 16px; background: rgba(5,16,15,.62); backdrop-filter: blur(5px); animation: aparece .2s var(--sai); }
.tit-como-caixa { width: min(540px, 100%); padding: 26px 28px 24px; border-radius: 18px; background: rgba(10,32,30,.97); border: 1px solid rgba(241,235,221,.14); box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); animation: sobe .35s var(--mola) both; }
.tit-como-caixa h2 { margin: 0 0 14px; font-size: 24px; color: #FFF6E3; }
.tit-como-caixa .tit-op { margin-top: 20px; }
.como { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha-c); font-size: 15px; line-height: 1.4; color: var(--claro-2); }
.como li { display: grid; grid-template-columns: 22px 96px 1fr; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linha-c); }
.como svg { width: 20px; height: 20px; color: var(--ouro); }
.como b { color: var(--claro); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
/* janela baixa (LMS em quadro pequeno) */
@media (max-height: 640px) {
  .tit-nome span { font-size: clamp(30px, 7.5vh, 52px); }
  .tit-menu { gap: 6px; margin-top: 16px; } .tit-op { min-height: 44px; font-size: 15.5px; } .tit-op.principal { min-height: 50px; font-size: 17px; }
  .tit-info { display: none; }
}
@media (max-height: 480px) { .tit-dica { display: none; } }
/* tela estreita ou em pé: o Complacito em cima, o nome e o menu embaixo */
@media (max-width: 820px), (max-aspect-ratio: 5/4) {
  .tit-fundo img { left: 0; width: 100%; height: 62%; object-position: 46% 30%; -webkit-mask-image: none; mask-image: none; }
  .tit-fundo::after { background: linear-gradient(0deg, #0B1716 0%, #0B1716 38%, rgba(11,23,22,0) 52%), linear-gradient(180deg, rgba(8,24,23,.5) 0%, rgba(8,24,23,0) 18%); }
  .tit-coluna { top: auto; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); width: auto; }
  .tit-nome span { font-size: clamp(32px, 9vw, 52px); }
  .tit-dica { display: none; }
  .como li { grid-template-columns: 22px 1fr; } .como span { grid-column: 2; margin-top: -8px; }
}
@media (prefers-reduced-motion: reduce) { .tit-luz { display: none; } }

/* ---------- vídeo do Complacito ----------
   O filme com a barra de controles embaixo. A largura vem da cena da tela de vídeo (.cena.tela-video, mais abaixo),
   para a tela inteira caber sem rolagem. */
.vid-caixa { container-type: inline-size; border-radius: var(--r2); overflow: hidden; background: var(--verde); box-shadow: 0 0 0 1px rgba(241,235,221,.16), 0 18px 40px -18px rgba(3,14,13,.6); }
.filme { position: relative; aspect-ratio: 16 / 9; background: var(--verde) center 35% / cover no-repeat; cursor: pointer; }
.filme video { display: block; width: 100%; height: 100%; object-fit: cover; }
.filme.fim video, .filme.fim .legenda { display: none; }
.filme.fim::after { content: ""; position: absolute; inset: 0; background: rgba(7,28,27,.55); }
.filme.fim .filme-play { z-index: 1; }
.legenda { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: max-content; max-width: 92%; padding: 7px 14px; border-radius: var(--r1); background: rgba(7,28,27,.86); color: var(--claro); font-size: clamp(13px, 1.4vw, 18px); font-weight: 500; line-height: 1.35; text-align: center; pointer-events: none; }
.filme-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; padding: 0 0 0 4px; border: 0; border-radius: 50%; background: var(--ouro); color: var(--verde); display: grid; place-items: center; cursor: pointer; box-shadow: 0 12px 30px -8px rgba(0,0,0,.6); transition: transform .16s var(--sai); }
.filme-play svg { width: 34px; height: 34px; }
.filme-play:hover { transform: scale(1.06); }
/* barra de controles */
.vid-ctrl { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 14px; background: #0A2725; color: var(--claro); }
.vid-bt { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r1); background: none; color: var(--claro); cursor: pointer; transition: background-color .16s var(--sai); }
.vid-bt svg { width: 26px; height: 26px; }
.vid-bt:hover { background: rgba(241,235,221,.12); }
#b-mudo[aria-pressed="true"] .som-off, #b-mudo[aria-pressed="false"] .som-on { display: none; }
.vid-tempo { flex: none; font-size: 14.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vid-cc { flex: none; min-width: 44px; height: 32px; padding: 0 8px; border: 1.5px solid rgba(241,235,221,.4); border-radius: 7px; background: none; color: var(--claro); font-size: 14px; font-weight: 700; letter-spacing: .04em; cursor: pointer; transition: background-color .16s var(--sai), border-color .16s var(--sai), color .16s var(--sai); }
.vid-cc[aria-pressed="true"] { background: var(--ouro); border-color: var(--ouro); color: var(--verde); }
/* linha do tempo e volume: o mesmo controle, com a parte percorrida em ouro */
.vid-linha { -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 60px; height: 20px; margin: 0; background: none; cursor: pointer; --p: 0%; }
.vid-linha::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ouro) var(--p), rgba(241,235,221,.28) var(--p)); }
.vid-linha::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ouro) var(--p), rgba(241,235,221,.28) var(--p)); }
.vid-linha::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.vid-linha::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.vid-vol { flex: 0 1 110px; min-width: 0; }
.vid-ctrl { overflow: hidden; }
/* vídeo estreito: some o volume (o botão de som continua), depois o tempo */
@container (max-width: 560px) { .vid-vol { display: none; } .vid-ctrl { gap: 8px; } }
@container (max-width: 400px) { .vid-tempo { display: none; } }
.painel.video .jan-pe { padding: 22px 32px 26px; }
/* tela cheia: o vídeo ocupa tudo e os controles ficam embaixo */
.vid-caixa:fullscreen { display: flex; flex-direction: column; border-radius: 0; background: #000; }
.vid-caixa:fullscreen .filme { flex: 1; aspect-ratio: auto; min-height: 0; background: #000; }
.vid-caixa:fullscreen .filme video { object-fit: contain; }
.vid-caixa:fullscreen .legenda { font-size: clamp(18px, 2.4vw, 32px); bottom: 5%; }
/* janela baixa (notebook, LMS em quadro): rodapé mais enxuto, para sobrar altura para o vídeo */
@media (max-height: 860px) {
  .painel.video .jan-pe { padding: 14px 24px 16px; } .jan-pe .btn { min-width: 170px; font-size: 16px; } .jan-aviso { font-size: 15px; }
  .vid-ctrl { min-height: 52px; }
}
@media (max-width: 760px) {
  .vid-ctrl { gap: 6px; padding: 0 6px; } .vid-vol, .vid-tempo { display: none; }
  .painel.video .jan-pe { padding: 14px; flex-wrap: wrap; }
}

.lista-teclas { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.lista-teclas li { display: flex; align-items: center; }
.lista-teclas kbd { min-width: 58px; }

/* ---------- caixa de entrada ---------- */
.pc-topo { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; padding: 0 4px; }
.notif { padding: 18px 20px; animation: sobe .35s var(--mola); }
.notif .canal { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.notif-txt { line-height: 1.35; letter-spacing: -.005em; margin-bottom: 14px; }
.relogio-barra { height: 3px; border-radius: 2px; margin-bottom: 14px; overflow: hidden; }
.relogio-barra i { display: block; height: 100%; width: 100%; }
.notif-bts { display: flex; gap: 10px; flex-wrap: wrap; }
.notif-fb { font-weight: 600; margin: 14px 0 12px; font-size: 15px; }
.notif-fb:empty { display: none; }
.caixa-vazia { text-align: center; margin: 18px 0; }

/* ---------- TV ---------- */
.tv { position: relative; background: #061A19; color: var(--areia); border: 8px solid; border-radius: var(--r2); padding: 28px 28px 56px; min-height: 230px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; margin-bottom: 18px; }
.tv-perg { font-size: 22px; line-height: 1.3; font-weight: 300; margin-bottom: 20px; }

/* ---------- classificar e ordenar ---------- */
.ordem { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.slot { display: flex; gap: 12px; align-items: center; min-height: 50px; border-radius: var(--r2); padding: 8px 12px; font-size: 15px; }
.slot span { width: 22px; height: 22px; border: 1px solid; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px; flex: none; }
.slot.cheio { animation: sobe .3s var(--mola); }
.passos { display: grid; gap: 8px; align-content: start; }
.passo { animation: none; }
.passo:disabled { cursor: default; }

/* ---------- relatório ---------- */
.relatorio { display: grid; grid-template-columns: 180px 1fr; gap: 28px; padding: 22px 0; margin-bottom: 18px; border-top: 1px solid; border-bottom: 1px solid; }
.num-g { font-size: 68px; line-height: 1; letter-spacing: -.05em; margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.medio { font-size: 28px; line-height: 1; letter-spacing: -.02em; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.rel-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.rel-lista li { border-bottom: 1px solid; padding-bottom: 8px; font-size: 15px; animation: sobe .4s var(--mola) both; }
.rel-lista li:last-child { border: 0; }
.rel-lista li b { font-weight: 500; margin-right: 8px; font-variant-numeric: tabular-nums; }
.rel-lista li span { float: right; font-weight: 600; }
.rel-lista small { display: block; margin-top: 2px; }

/* ---------- desafio final ---------- */
.desafio-numeros { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.desafio-numeros li { padding: 16px 18px; border-radius: var(--r2); font-size: 14px; line-height: 1.35; }
.desafio-numeros b { display: block; margin-bottom: 4px; font-size: 28px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.q-perg { line-height: 1.25; letter-spacing: -.01em; margin: 16px 0 16px; }

/* ---------- conclusão ---------- */
.fim-resumo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.estrelas { font-size: 30px; line-height: 1; letter-spacing: 4px; }
.estrela { display: inline-block; animation: sobe .5s var(--mola) both; }
.canal-box { color: var(--claro); border-radius: var(--r2); padding: 24px; }
.canal-box h3 { font-size: 23px; margin-bottom: 4px; }
.canal-box .sobre { color: var(--claro-3); }
.canais { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 12px; border-top: 1px solid var(--linha-c); }
.canal-box .canal { padding: 12px 0; border-bottom: 1px solid var(--linha-c); }
.canal-box .canal.largo { grid-column: 1 / -1; }
.canal-box .canal b { font-weight: 500; font-size: 18px; letter-spacing: -.005em; overflow-wrap: anywhere; }
.garantia { font-size: 13px; margin-top: 16px; color: var(--claro-2); }
.garantia b { color: var(--claro); font-weight: 600; }

@keyframes aparece { from { opacity: 0; } }
@keyframes sobe { from { opacity: 0; transform: translateY(12px); } }
@keyframes surge { from { opacity: 0; transform: translateX(-8px); } }
@keyframes pisca { 50% { opacity: .25; } }
@keyframes respira { 50% { opacity: .55; } }
@keyframes chama { 50% { transform: scale(1.04); } }
@keyframes falar { 50% { transform: scaleY(1.03); } }
@keyframes nega { 25% { transform: translateX(-5px); } 75% { transform: translateX(4px); } }
@keyframes treme { 25% { transform: translateX(-5px); } 75% { transform: translateX(4px); } }
@keyframes flutua { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }
@keyframes cai { to { transform: translateY(110vh) rotate(540deg); opacity: .4; } }

/* ---------- telas estreitas ---------- */
@media (max-width: 1180px) {
  #topo { padding: 8px 16px; gap: 8px 16px; min-height: 60px; }
  .marca { gap: 14px; } .marca strong { display: none; } .logo { height: 16px; }
  .hud-item { padding: 0 14px; gap: 8px; } .hud-item svg { width: 20px; height: 20px; }
  .hud dt { font-size: 10px; } .hud dd, #h-hora { font-size: 15px; }
  .segs { gap: 5px; margin-left: 8px; }
  .topo-bts { gap: 8px; } .icone { width: 40px; height: 40px; }
  #missao { left: 14px; top: 14px; gap: 12px; padding: 12px 18px 12px 14px; max-width: calc(100% - 28px); } #missao svg { width: 28px; height: 28px; } #objetivo { font-size: 16px; }
  #predio { left: 14px; bottom: 14px; gap: 10px; padding: 8px 12px; } #predio svg { width: 22px; height: 22px; }
  .chip-andar { min-width: 36px; font-size: 15px; line-height: 34px; }
  .btn.ouro { right: 14px; bottom: 14px; min-height: 50px; padding: 0 20px; font-size: 16px; gap: 10px; } .btn.ouro svg { width: 20px; height: 20px; }
}
@media (max-width: 640px) {
  .hud-item:nth-child(4) .segs, .hud dt { display: none; }
  .hud-item { padding: 0 9px; }
  .btn.ouro { bottom: 72px; }
  .relatorio, .ordem, .canais { grid-template-columns: 1fr; }
  .desafio-numeros { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- vídeo curto do Complacito dentro de um cartão (respostas) ---------- */
.reacao.com-video .quem { margin-bottom: 10px; }
.filme.curto { border-radius: var(--r2); overflow: hidden; margin: 0 auto; }
.filme.curto .legenda { bottom: 12px; font-size: 15px; }
.filme.curto .filme-play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
.filme.curto .filme-play svg { width: 26px; height: 26px; }
.filme.curto.fim .filme-play { background: rgba(242,182,61,.92); }

/* ---------- modo de desenvolvimento (só com ?dev=1) ---------- */
.dev { position: fixed; top: calc(var(--topo) + 12px); z-index: 120; width: 268px; padding: 10px; border-radius: 14px; background: rgba(8,30,29,.94); color: var(--claro); font-size: 12px; box-shadow: 0 12px 30px -10px rgba(0,0,0,.6); border: 1px dashed rgba(242,182,61,.55); }
.dev button { font: inherit; cursor: pointer; }
.dev-tit { display: block; width: 100%; padding: 2px 4px 6px; border: 0; background: none; text-align: left; letter-spacing: .06em; text-transform: uppercase; color: var(--ouro) !important; }
.dev.fechado { width: auto; }
.dev.fechado .dev-corpo { display: none; }
.dev.fechado .dev-tit { padding-bottom: 2px; }
.dev-rot { margin: 8px 2px 6px; color: rgba(241,235,221,.6); }
.dev-ests { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.dev-ests button, .dev-cam button, .dev-acoes button { padding: 6px 8px; border: 1px solid rgba(241,235,221,.14); border-radius: 8px; background: rgba(241,235,221,.05); text-align: left; }
.dev-ests b { display: inline-block; min-width: 16px; margin-right: 6px; color: var(--ouro); }
.dev button:hover { background: rgba(241,235,221,.12); }
.dev button.atual { border-color: var(--ouro); background: rgba(242,182,61,.16); }
.dev-cam { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.dev-cam button { text-align: center; padding: 6px 2px; }
.dev-acoes { display: grid; gap: 4px; margin-top: 10px; }
.dev-acoes kbd { float: right; opacity: .6; font: inherit; }

/* telejornal da simulação: a imagem já traz a TV na parede */
.tv-img { margin: 0; border-radius: var(--r2); overflow: hidden; animation: aparece .35s var(--sai); }
.tv-img img { display: block; object-fit: cover; }

/* ---------- classificar: um caso de cada vez ---------- */
.cl-caso { padding: 18px 20px 20px; border-radius: var(--r2); animation: sobe .35s var(--mola) both; }
.cl-num { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cl-trilho { display: flex; gap: 6px; }
.cl-trilho i { width: 22px; height: 5px; border-radius: 3px; background: var(--linha-forte); }
.cl-trilho i.feito { background: var(--verde); }
.cl-trilho i.agora { background: var(--ouro); }
.cl-txt { font-size: clamp(18px, 2vw, 21px); line-height: 1.35; }
.cl-ops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cl-op { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 14px; font: inherit; font-size: 15.5px; font-weight: 600; text-align: left; cursor: pointer; transition: border-color .16s var(--sai), background-color .16s var(--sai), transform .16s var(--sai); }
.cl-pronto { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 18px; border-radius: var(--r2); }
.cl-pronto p { flex: 1 1 240px; }
.cl-rot { margin: 20px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cl-caixas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cl-cx { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: var(--r2); min-height: 84px; }
.cl-cx-tit { margin: 0 2px 2px; font-size: 13px; font-weight: 600; }
.cl-vazio { margin: auto 0; text-align: center; font-size: 13px; }
.cl-chip { padding: 8px 10px; border: 1px solid; border-radius: 10px; font: inherit; font-size: 13.5px; line-height: 1.35; text-align: left; color: var(--tinta); cursor: pointer; animation: sobe .3s var(--mola) both; }
.cl-chip:hover:not(:disabled) { border-color: var(--terracota); }
.cl-refaz { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--tinta-3); }
.cl-chip:hover .cl-refaz { color: var(--terracota); }
.cl-chip:disabled { cursor: default; }
.cl-chip small { display: block; margin-top: 4px; font-weight: 600; color: var(--terracota); }
@media (max-width: 760px) {
  .cl-ops, .cl-caixas { grid-template-columns: 1fr; }
  .cl-op { min-height: 48px; }
  .cl-cx { min-height: 0; }
  .cl-vazio { margin: 2px 0 4px; text-align: left; }
}

/* viagem de elevador: a cena ocupa a tela, a interface do mapa some e volta na chegada */
#jogo #missao, #jogo #predio, #jogo #b-objetivo { transition: opacity .3s var(--sai); }
#jogo.viajando #missao, #jogo.viajando #predio, #jogo.viajando #b-objetivo { opacity: 0; pointer-events: none; }

/* ---------- decisão como cena de diálogo de jogo ---------- */
#dlg.dlg-cena { background: radial-gradient(ellipse 70% 90% at 26% 100%, rgba(5,20,19,.35) 0%, rgba(5,20,19,.86) 70%), rgba(5,20,19,.5); backdrop-filter: blur(7px); }
.dlg-cena .painel { min-height: 100%; color: #FFF6E3; display: flex; }
.cena { position: relative; flex: 1; display: grid; grid-template-columns: minmax(240px, 34%) minmax(0, 1fr); gap: 0 clamp(18px, 3vw, 52px); width: 100%; margin: 0 auto; padding: clamp(14px, 2.6vh, 26px) clamp(18px, 4vw, 64px) clamp(14px, 2.6vh, 24px); }
.cena-topo { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding-right: 52px; }
.cena-topo h2 { font-size: clamp(20px, 2vw, 28px); font-weight: 700; letter-spacing: -.01em; color: #FFF6E3; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.cena-local { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: 999px; background: rgba(242,182,61,.16); border: 1px solid rgba(242,182,61,.45); color: var(--ouro); font-size: 13px; font-weight: 700; white-space: nowrap; }
.cena-local svg { width: 15px; height: 15px; }
.cena .jan-fechar { color: #FFF6E3; }
.cena-contexto { grid-column: 1 / -1; max-width: 80ch; margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; color: rgba(255,246,227,.72); }
/* quem fala, de corpo inteiro, entrando em cena */
.cena-ator { grid-column: 1; grid-row: 3 / 5; align-self: end; position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 0; }
.cena-ator::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 62%; height: 26px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(242,182,61,.35), rgba(242,182,61,0)); z-index: -1; }
.cena-ator-img { display: block; height: min(66vh, 620px); max-width: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)); animation: ator-entra .6s var(--mola) both; }
.cena-ator-fig { width: 200px; height: 340px; display: grid; place-items: end center; animation: ator-entra .6s var(--mola) both; }
.cena-ator-fig .retrato { transform: scale(3); transform-origin: 50% 100%; }
@keyframes ator-entra { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.cena-lado { grid-column: 2; grid-row: 3; align-self: center; width: 100%; max-width: 780px; padding: 22px 0 10px; }
/* balão da fala, com a plaquinha do nome */
.balao { position: relative; padding: 30px 30px 24px; border-radius: 22px; background: #FFF8EA; color: #0C2E2D; box-shadow: 0 16px 40px -14px rgba(0,0,0,.6); animation: balao-entra .45s .15s var(--mola) both; }
@keyframes balao-entra { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: none; } }
.balao-nome { position: absolute; left: 22px; top: -15px; padding: 6px 14px 7px; border-radius: 10px; background: #0C2E2D; color: var(--ouro); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-2deg); box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.balao .txt { font-size: clamp(18px, 1.6vw, 23px); line-height: 1.4; font-weight: 600; letter-spacing: -.005em; }
/* escolhas: botões de jogo */
.dlg-cena .perg { margin: 22px 2px 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro); }
.dlg-cena .ops { gap: 10px; }
.dlg-cena .op { position: relative; gap: 14px; min-height: 60px; padding: 12px 20px 12px 14px; border: 1.5px solid rgba(255,246,227,.16); border-radius: 14px; background: rgba(8,30,29,.84); backdrop-filter: blur(6px); font-size: clamp(15.5px, 1.25vw, 17.5px); font-weight: 600; box-shadow: 0 6px 0 rgba(0,0,0,.25); transition: transform .14s var(--sai), border-color .14s var(--sai), background-color .14s var(--sai), opacity .3s var(--sai); }
.dlg-cena .op kbd { width: 34px; height: 34px; min-width: 34px; margin: 0; border-radius: 9px; border: 1.5px solid var(--ouro); background: rgba(242,182,61,.12); color: var(--ouro); font-size: 15px; font-weight: 700; }
.dlg-cena .op:hover:not(:disabled), .dlg-cena .op:focus-visible { outline: none; transform: translateX(6px); border-color: var(--ouro); background: rgba(12,46,45,.96); box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 0 3px rgba(242,182,61,.18); }
.dlg-cena .op:hover:not(:disabled) kbd, .dlg-cena .op:focus-visible kbd { background: var(--ouro); color: #0C2E2D; }
.dlg-cena .op:active:not(:disabled) { transform: translateX(6px) translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
/* depois da escolha: só ficam a escolhida e a melhor, com selo */
.cena.respondida .op:not(.escolhida):not(.certa) { display: none; }
.cena.respondida #escolhas .perg { display: none; }
.dlg-cena .op:disabled { cursor: default; }
.dlg-cena .op.escolhida::after, .dlg-cena .op.certa::after { position: absolute; right: 14px; top: -11px; padding: 3px 10px 4px; border-radius: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transform: rotate(2deg); }
.dlg-cena .op.certa { border-color: #7FD1A6; background: rgba(28,82,66,.9); box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.dlg-cena .op.certa kbd { background: #7FD1A6; border-color: #7FD1A6; color: #0C2E2D; }
.dlg-cena .op.certa::after { content: "Melhor escolha"; background: #7FD1A6; color: #0C2E2D; }
.dlg-cena .op.certa.escolhida::after { content: "Sua escolha · certa"; }
.dlg-cena .op.errada { border-color: #F08B5B; background: rgba(110,40,10,.88); animation: nega .4s var(--sai); }
.dlg-cena .op.errada kbd { background: #F08B5B; border-color: #F08B5B; color: #0C2E2D; }
.dlg-cena .op.errada::after { content: "Sua escolha"; background: #F08B5B; color: #0C2E2D; }
/* resposta do Complacito: transmissão com a faixa do resultado */
.dlg-cena .reacao { margin-top: 18px; padding: 14px 16px 16px; border-radius: 18px; border: 1.5px solid rgba(255,246,227,.16); background: rgba(8,30,29,.9); color: #FFF6E3; box-shadow: 0 16px 40px -16px rgba(0,0,0,.7); }
.dlg-cena .reacao .quem { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--ouro); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; }
.dlg-cena .reacao .chip { color: #FFF6E3; border-color: rgba(255,246,227,.35); }
.dlg-cena .reacao .chip.neg { color: #FFB08A; border-color: rgba(255,176,138,.55); }
.dlg-cena .reacao .chip.pts { color: var(--ouro); border-color: rgba(242,182,61,.6); }
.dlg-cena .reacao .txt { color: #FFF6E3; }
.dlg-cena .reacao-tit { margin: 0 0 8px; font-size: clamp(20px, 1.9vw, 26px); font-weight: 700; letter-spacing: -.01em; }
.dlg-cena .reacao.ok .reacao-tit { color: #9BE0B8; } .dlg-cena .reacao.erro .reacao-tit { color: #FFB08A; }
/* rodapé da cena */
.cena .jan-pe { grid-column: 2; grid-row: 4; padding: 14px 0 0; }
.cena .jan-aviso { color: rgba(255,246,227,.72); }
.cena .jan-pe .btn:disabled { background: rgba(255,246,227,.1); border-color: rgba(255,246,227,.14); color: rgba(255,246,227,.45); box-shadow: none; }
@media (max-height: 760px) { .cena-ator-img { height: 60vh; } .balao { padding: 26px 24px 18px; } .dlg-cena .op { min-height: 52px; } }
@media (max-width: 860px) {
  .cena { grid-template-columns: 1fr; }
  .cena-ator { display: none; }
  .cena-lado, .cena .jan-pe { grid-column: 1; }
  .cena .jan-pe { flex-wrap: wrap; } .cena .jan-pe .btn { width: 100%; }
}
/* depois da escolha, a cena se compacta para a resposta do Complacito caber sem rolar */
.cena.respondida .cena-contexto { display: none; }
.cena.respondida .balao { padding: 20px 22px 14px; }
.cena.respondida .balao .txt { font-size: clamp(14.5px, 1.15vw, 16px); }
.cena.respondida .ops { margin-top: 18px; }
.cena.respondida .cena-lado { align-self: start; }
.dlg-cena .reacao .filme.curto { max-height: 34vh; }
@media (max-height: 820px) { .cena.respondida .cena-lado { padding-top: 12px; } }

/* ================= todas as telas como cena de jogo =================
   O mesmo estilo da decisão: fundo escuro sobre o mapa, quem conduz de corpo inteiro à esquerda, falas em balão claro,
   botões escuros com a tecla dourada e o Continuar dourado. Aqui ficam as variações e os componentes de cada tela. */
#dlg.dlg-cena.dlg-interior { background: linear-gradient(rgba(5,20,19,.8), rgba(5,20,19,.86)), url(../img/cena-elevador.webp) center / cover; }
.cena-ator-img.guia { height: min(46vh, 420px); }
.cena.solo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; }   /* sem personagem: tudo junto, no meio da tela */
.cena.solo .cena-topo, .cena.solo .cena-contexto, .cena.solo .cena-lado, .cena.solo .jan-pe { grid-column: 1; justify-self: center; width: min(100%, 880px); }
.cena.solo .cena-contexto { max-width: none; }
.cena.solo .cena-lado { max-width: none; align-self: center; }
.cena-lado > :first-child { margin-top: 0; }
/* falas do Complacito: balão claro com a plaquinha do nome */
.dlg-cena .fala { position: relative; display: block; margin: 16px 0 14px; padding: 28px 26px 20px; border-radius: 20px; background: #FFF8EA; color: #0C2E2D; box-shadow: 0 14px 34px -14px rgba(0,0,0,.6); animation: balao-entra .45s .1s var(--mola) both; }
.dlg-cena .fala .quem { position: absolute; left: 20px; top: -14px; margin: 0; padding: 5px 13px 6px; border-radius: 10px; background: #0C2E2D; color: var(--ouro); font-size: 12px; font-weight: 700; letter-spacing: .08em; transform: rotate(-2deg); box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.dlg-cena .fala .txt { max-width: none; font-size: clamp(16.5px, 1.35vw, 19.5px); line-height: 1.45; font-weight: 600; color: #0C2E2D; }
/* botões dentro das cenas */
.dlg-cena .btn { min-height: 50px; padding: 0 22px; border-radius: 12px; font-weight: 700; background: var(--ouro); border-color: var(--ouro); color: #0C2E2D; box-shadow: 0 5px 0 rgba(0,0,0,.28); }
.dlg-cena .btn:hover:not(:disabled) { background: var(--ouro-2); border-color: var(--ouro-2); transform: translateY(-1px); }
.dlg-cena .btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.28); }
.dlg-cena .btn.sec { background: rgba(8,30,29,.84); border: 1.5px solid rgba(255,246,227,.22); color: #FFF6E3; }
.dlg-cena .btn.sec:hover:not(:disabled) { background: rgba(12,46,45,.96); border-color: var(--ouro); }
.dlg-cena .btn kbd { width: 26px; height: 26px; min-width: 26px; margin-right: 10px; border-radius: 7px; border: 1.5px solid currentColor; opacity: 1; font-size: 12.5px; }
.dlg-cena kbd { border-color: rgba(255,246,227,.4); color: #FFF6E3; background: rgba(255,246,227,.06); }
.dlg-cena .dica, .dlg-cena .caixa-vazia { color: rgba(255,246,227,.72); }
.dlg-cena .arte { border-color: rgba(242,182,61,.55); background: rgba(242,182,61,.1); color: var(--ouro); }
.dlg-cena .artes { margin: 0 0 6px; }
/* resposta escrita do Complacito (sem vídeo) */
.dlg-cena .reacao:not(.com-video) { display: flex; gap: 14px; align-items: flex-start; }
.dlg-cena .reacao .retrato-img { width: 56px; }
.dlg-cena .reacao .piso { border-color: rgba(255,246,227,.16); color: rgba(255,246,227,.8); }
/* caixa de entrada: o celular com as mensagens */
.dlg-cena .monitor { padding: 14px; border-radius: 18px; background: #081F1E; border: 1.5px solid rgba(255,246,227,.14); box-shadow: inset 0 0 0 4px rgba(0,0,0,.25), 0 16px 40px -16px rgba(0,0,0,.7); }
.dlg-cena .pc-topo { color: rgba(255,246,227,.6); }
.dlg-cena #pc-ac { color: var(--ouro); }
.dlg-cena .notif { background: #12322F; border: 1.5px solid rgba(255,246,227,.12); border-radius: 14px; color: #FFF6E3; }
.dlg-cena .notif .canal { color: var(--ouro); }
.dlg-cena .notif-txt { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; }
.dlg-cena .relogio-barra { background: rgba(255,246,227,.14); }
.dlg-cena .relogio-barra i { background: var(--ouro); }
.dlg-cena .notif-fb.ok { color: #9BE0B8; } .dlg-cena .notif-fb.erro { color: #FFB08A; }
.dlg-cena .notif > .btn { margin-top: 4px; }
/* simulação: a TV e a pergunta */
.dlg-cena .tv { border-color: #1B3B39; box-shadow: 0 16px 40px -16px rgba(0,0,0,.7); }
.dlg-cena .tv-img { box-shadow: 0 16px 40px -16px rgba(0,0,0,.7); }
/* classificar */
.dlg-cena .cl-caso { background: #FFF8EA; box-shadow: 0 14px 34px -14px rgba(0,0,0,.6); }
.dlg-cena .cl-num { color: rgba(12,46,45,.6); }
.dlg-cena .cl-txt { color: #0C2E2D; font-weight: 600; }
.dlg-cena .cl-op { border: 1.5px solid rgba(255,246,227,.16); border-radius: 14px; background: rgba(8,30,29,.84); box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.dlg-cena .cl-op kbd { width: 34px; height: 34px; min-width: 34px; margin: 0; border-radius: 9px; border: 1.5px solid var(--ouro); background: rgba(242,182,61,.12); color: var(--ouro); font-size: 15px; font-weight: 700; }
.dlg-cena .cl-op:hover, .dlg-cena .cl-op:focus-visible { outline: none; transform: translateY(-2px); border-color: var(--ouro); background: rgba(12,46,45,.96); }
.dlg-cena .cl-op:hover kbd, .dlg-cena .cl-op:focus-visible kbd { background: var(--ouro); color: #0C2E2D; }
.dlg-cena .cl-rot { color: var(--ouro); }
.dlg-cena .cl-cx { background: rgba(8,30,29,.6); border: 1.5px dashed rgba(255,246,227,.18); }
.dlg-cena .cl-vazio { color: rgba(255,246,227,.45); }
.dlg-cena .cl-pronto { background: rgba(8,30,29,.88); border: 1.5px solid rgba(242,182,61,.4); color: #FFF6E3; }
.dlg-cena .cl-chip { background: #FFF8EA; border-color: transparent; }
.dlg-cena .cl-chip.certa { border-color: #7FD1A6; box-shadow: inset 0 0 0 2px #7FD1A6; }
.dlg-cena .cl-chip.errada { background: #FBE6DA; box-shadow: inset 0 0 0 2px #F08B5B; }
/* ordenar: a sequência e os passos */
.dlg-cena .slot { border: 1.5px dashed rgba(255,246,227,.22); color: #FFF6E3; background: rgba(8,30,29,.45); }
.dlg-cena .slot span { border-color: rgba(242,182,61,.6); color: var(--ouro); }
.dlg-cena .slot.cheio { border-style: solid; border-color: rgba(255,246,227,.2); background: rgba(12,46,45,.9); }
.dlg-cena .slot.certa { border-color: #7FD1A6; } .dlg-cena .slot.errada { border-color: #F08B5B; }
.dlg-cena .slot.certa span { background: #7FD1A6; border-color: #7FD1A6; color: #0C2E2D; }
.dlg-cena .slot.errada span { background: #F08B5B; border-color: #F08B5B; color: #0C2E2D; }
.dlg-cena .passo { gap: 12px; min-height: 54px; border: 1.5px solid rgba(255,246,227,.16); border-radius: 14px; background: rgba(8,30,29,.84); color: #FFF6E3; font-weight: 600; box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.dlg-cena .passo kbd { width: 30px; height: 30px; min-width: 30px; margin: 0; border-radius: 8px; border: 1.5px solid var(--ouro); background: rgba(242,182,61,.12); color: var(--ouro); font-weight: 700; }
.dlg-cena .passo:hover:not(:disabled) { transform: translateX(4px); border-color: var(--ouro); background: rgba(12,46,45,.96); }
.dlg-cena .passo:hover:not(:disabled) kbd { background: var(--ouro); color: #0C2E2D; }
.dlg-cena .passo:disabled { opacity: .28; }
/* relatório do dia */
.dlg-cena .relatorio { border-color: rgba(255,246,227,.14); }
.dlg-cena .rel-num .sobre { color: rgba(255,246,227,.6); }
.dlg-cena .num-g { color: var(--ouro); font-weight: 600; }
.dlg-cena .medio { color: #FFF6E3; font-weight: 600; }
.dlg-cena .rel-lista li { border-color: rgba(255,246,227,.12); color: #FFF6E3; }
.dlg-cena .rel-lista li b { color: rgba(255,246,227,.55); }
.dlg-cena .rel-lista li.ok span { color: #9BE0B8; }
.dlg-cena .rel-lista li.erro span, .dlg-cena .rel-lista small { color: #FFB08A; }
.dlg-cena .selo-g { background: var(--ouro); border-color: var(--ouro); color: #0C2E2D; }
.dlg-cena .selo { background: rgba(242,182,61,.14); border-color: rgba(242,182,61,.55); color: var(--ouro); }
/* desafio final */
.dlg-cena .desafio-numeros li { background: rgba(8,30,29,.84); border: 1.5px solid rgba(255,246,227,.14); color: rgba(255,246,227,.75); }
.dlg-cena .desafio-numeros b { color: var(--ouro); font-weight: 600; }
.dlg-cena .q-perg { color: #FFF6E3; font-weight: 600; font-size: clamp(21px, 2.2vw, 28px); }
/* conclusão */
.dlg-cena .estrela { color: rgba(255,246,227,.2); } .dlg-cena .estrela.cheia { color: var(--ouro); }
.dlg-cena .canal-box { background: rgba(8,30,29,.9); border: 1.5px solid rgba(242,182,61,.35); }
/* vídeo: o filme logo abaixo do título, com um respiro */
.dlg-cena .vid-corpo { position: relative; width: 100%; margin-top: 18px; }
.dlg-cena .vid-caixa { border-radius: 16px; box-shadow: 0 0 0 1.5px rgba(255,246,227,.14), 0 24px 50px -20px rgba(0,0,0,.8); }
/* o X fica na linha do título, alinhado à coluna do conteúdo */
.cena-topo { position: relative; }
.cena .cena-topo .jan-fechar { right: -6px; top: 50%; transform: translateY(-50%); }
.dlg-cena .tv-img img { width: auto; max-width: 100%; margin: 0 auto; }
.dlg-cena .tv-img { text-align: center; }
.dlg-cena .notif-fb .filme.curto { max-height: 30vh; }

/* ================= ajustes da revisão visual ================= */
/* a cena inteira (título, personagem, conteúdo e rodapé) fica junta */
.cena { grid-template-rows: auto auto auto auto; max-width: 1320px; }
/* foco de teclado discreto: sem cara de opção já escolhida */
.dlg-cena .op:focus-visible:not(:hover) { transform: none; background: rgba(8,30,29,.84); box-shadow: 0 6px 0 rgba(0,0,0,.25); outline: 1.5px solid rgba(242,182,61,.45); outline-offset: 2px; }
.dlg-cena .op:focus-visible:not(:hover) kbd { background: rgba(242,182,61,.12); color: var(--ouro); }
/* depois da escolha, em telas baixas, o balão fica compacto */
@media (max-height: 820px) { .cena.respondida .balao { padding: 16px 18px 10px; } .cena.respondida .balao .txt { font-size: 14.5px; } .cena.respondida .ops { margin-top: 14px; } }
/* caixa de entrada: os dois botões no estilo de jogo, só a tecla muda de cor */
.dlg-cena .notif-bts .btn { background: rgba(8,30,29,.9); border: 1.5px solid rgba(255,246,227,.2); color: #FFF6E3; }
.dlg-cena .notif-bts .btn:hover:not(:disabled) { border-color: var(--ouro); background: rgba(12,46,45,.98); }
.dlg-cena .notif-bts .btn kbd { border-color: var(--ouro); color: var(--ouro); }
.dlg-cena .notif-bts .btn.alerta kbd { background: var(--ouro); color: #0C2E2D; }
/* interface do mapa escondida enquanto há janela aberta */
#jogo.dialogo #missao, #jogo.dialogo #predio, #jogo.dialogo #b-objetivo { opacity: 0; pointer-events: none; }
/* telas de pouco conteúdo: coluna estreita no meio */
.dlg-pausa .cena.solo > * { width: min(100%, 580px); }
/* vídeo: a largura do filme sai da altura que sobra para o título e o rodapé */
.cena.tela-video > .cena-topo, .cena.tela-video > .cena-contexto, .cena.tela-video > .cena-lado, .cena.tela-video > .jan-pe { width: min(100%, calc((100vh - var(--topo) - 300px) * 16 / 9)); }
/* ordenar: título de cada coluna */
.ordem-rot { margin: 0 2px 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ouro); }
.ordem > div, .passos { min-width: 0; }
/* desafio reprovado: o placar no centro */
.placar { margin: 4px 0 6px; padding: 22px 24px 20px; border-radius: 18px; background: rgba(8,30,29,.88); border: 1.5px solid rgba(255,246,227,.14); }
.placar-num { margin: 0 0 14px; font-size: 22px; font-weight: 600; color: rgba(255,246,227,.7); }
.placar-num b { font-size: 64px; line-height: 1; color: #FFF6E3; letter-spacing: -.03em; }
.placar-num span { margin-left: 10px; font-size: 15px; }
.placar-barra { position: relative; height: 12px; border-radius: 6px; background: rgba(255,246,227,.12); margin-bottom: 30px; }
.placar-barra i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--n); min-width: 6px; border-radius: 6px; background: #F08B5B; }
.placar-barra em { position: absolute; left: var(--m); top: -6px; height: 24px; border-left: 2px solid var(--ouro); padding: 26px 0 0 0; transform: translateX(-1px); font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--ouro); white-space: nowrap; }
.placar-barra em { text-indent: -40px; }
/* celular */
@media (max-width: 640px) {
  .cena-topo { flex-wrap: wrap; row-gap: 6px; }
  .cena-topo h2 { flex-basis: 100%; }
  .placar-num b { font-size: 48px; }
}
/* celular: barra de cima compacta. Sai a hora (já está na pílula de cada tela); ficam reputação, pontos, estações e os botões */
@media (max-width: 480px) {
  #topo { gap: 6px; padding: 8px 10px; min-height: 56px; }
  .marca { gap: 10px; } .marca .logo { height: 13px; }
  .hud-item:first-child { display: none; }
  .hud-item:nth-child(2) { border-left: 0; }
  .hud-item { gap: 5px; padding: 0 7px; } .hud-item svg { width: 17px; height: 17px; }
  .hud dd, #h-hora { font-size: 14px; }
  .topo-bts { gap: 6px; } .topo-bts .icone { width: 34px; height: 34px; } .topo-bts .icone svg { width: 18px; height: 18px; }
}

/* simulação: a TV e a fala do Complacito lado a lado, para caber sem rolar */
.tv-par { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tv-par > .reacao { margin-top: 0; }
.tv-par .tv-img img { max-height: 46vh; }
.tv-par #vid-sim .filme.curto { max-height: 34vh; }
@media (max-width: 1100px) { .tv-par { grid-template-columns: 1fr; } .tv-par .tv-img img { max-height: 34vh; } }
/* depois da resposta: some a descrição e a fala de abertura fica curta */
.cena.respondida .cena-lado > .fala:first-child { padding: 18px 20px 12px; }
.cena.respondida .cena-lado > .fala:first-child .txt { font-size: 14.5px; }
.cena.respondida .ordem { grid-template-columns: 1fr; } .cena.respondida .ordem .passos { display: none; }
/* se não couber na altura, a cena começa no topo e rola (nunca some atrás do título) */
.cena, .cena.solo { align-content: safe center; }
/* classificar conferido: as respostas ficam compactas para a resposta do Complacito caber */
.cena.respondida .cl-cx { min-height: 0; padding: 8px; gap: 5px; }
.cena.respondida .cl-chip { padding: 6px 8px; font-size: 12.5px; line-height: 1.3; }
.cena.respondida .cl-rot { margin-top: 4px; }
@media (max-height: 820px) { .cena.respondida .cl-chip small { margin-top: 2px; } .cena.respondida .reacao .filme.curto { max-height: 25vh; } }


/* ================= elevador: o prédio em corte =================
   Cada andar é uma sala vista de frente (a sala é o botão), o poço à esquerda com a cabine no andar atual e a trilha
   dourada até o objetivo. Objetivo em ouro; atual em creme quente com a cabine; liberado em creme frio com a seta;
   fechado apagado, mais baixo e só com o cadeado. */
.ed-tela { --pad-y: 20px; --poco: 76px; --laje: 8px; --vao: 14px; --teto: 34px; --base: 18px; --piso: 12px;
  --estrutura: #1D4844; --estrutura-luz: #2B5F59; --led: #FFB547;
  flex: 1; position: relative; display: grid; grid-template-columns: 330px minmax(0, 600px); grid-template-rows: 1fr auto auto 1fr; column-gap: 72px; justify-content: center; padding: var(--pad-y) 32px; color: #FFF6E3; }
.ed-cab { grid-column: 1; grid-row: 2; }
.ed-cab h2 { margin: 16px 0 0; font-size: 46px; font-weight: 700; line-height: 1.02; letter-spacing: -.02em; color: #FFF6E3; }
.ed-sub { margin-top: 12px; font-size: 18px; line-height: 1.4; color: rgba(255,246,227,.78); }
.ed-sub b { color: var(--ouro); font-weight: 700; }
.ed-pe { grid-column: 1; grid-row: 3; margin-top: 40px; }
.ed-dica { display: flex; gap: 10px; align-items: flex-start; max-width: 290px; font-size: 14px; line-height: 1.45; color: rgba(255,246,227,.58); }
.ed-dica .ed-i { flex: none; width: 13px; height: 13px; margin-top: 3px; }
.ed-ficar { margin-top: 18px; height: 52px; padding: 0 22px 0 26px; border-radius: 14px; border: 1px solid rgba(255,246,227,.16); background: var(--verde); color: #FFF6E3; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 0 #031110, inset 0 1px 0 rgba(255,255,255,.07); transition: background-color .15s, transform .08s, box-shadow .08s; }
.ed-ficar:hover { background: #12403D; }
.ed-ficar:active { transform: translateY(3px); box-shadow: 0 1px 0 #031110; }
.ed-ficar kbd { display: inline-grid; place-items: center; min-width: 30px; height: 22px; margin: 0 0 0 12px; padding: 0 6px; border: 0; border-radius: 6px; background: var(--ouro); color: var(--verde); font: 700 11px/1 var(--fonte); box-shadow: 0 2px 0 #9C6A12; vertical-align: 1px; }
.ed-x { position: absolute; top: 14px; right: 24px; }
.ed-i { width: 12px; height: 12px; fill: currentColor; flex: none; }

.ed-predio { grid-column: 2; grid-row: 1 / -1; align-self: center; position: relative; display: flex; flex-direction: column; filter: drop-shadow(0 26px 36px rgba(0,0,0,.5)); }
/* cobertura: mureta com o nome da empresa e a antena com luz */
.ed-telhado { position: relative; height: var(--teto); }
.ed-telhado::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: var(--estrutura); border-radius: 3px 3px 0 0; box-shadow: inset 0 2px 0 var(--estrutura-luz); }
.ed-logo { position: absolute; left: 50%; bottom: 6px; height: 11px; transform: translateX(-50%); color: rgba(255,246,227,.7); }
.ed-antena { position: absolute; right: 40px; bottom: 22px; width: 2px; height: 14px; background: var(--estrutura-luz); }
.ed-antena i { position: absolute; top: -4px; left: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--led); box-shadow: 0 0 8px 2px rgba(255,181,71,.7); animation: ed-pisca 2.4s steps(1) infinite; }
@keyframes ed-pisca { 50% { opacity: .15; box-shadow: none; } }
.ed-chao { height: var(--base); margin: 0 -24px; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #2C625C 0 4px, #1A433F 4px 7px, #12332F 7px); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }

.ed-corpo { --h: clamp(54px, calc((100vh - var(--topo) - 2 * var(--pad-y) - var(--teto) - var(--base) - (var(--nA) + var(--nF) + var(--nV) + 1) * var(--laje) - var(--nV) * var(--vao) - 4px) / (var(--nA) + .62 * var(--nF))), 100px); --hf: calc(var(--h) * .62);
  position: relative; display: grid; grid-template-columns: var(--poco) 1fr; gap: var(--laje); padding: 0 var(--laje) var(--laje); border-top: var(--laje) solid var(--estrutura); background: var(--estrutura); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.ed-poco { grid-column: 1; grid-row: 1 / -1; position: relative; background: linear-gradient(90deg, rgba(255,255,255,.035), transparent 35%, transparent 65%, rgba(0,0,0,.3)), #041110; box-shadow: inset 0 6px 10px -4px rgba(0,0,0,.6); }
.ed-poco::before, .ed-poco::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: repeating-linear-gradient(#1D3A37 0 22px, #2A4A47 22px 25px); }
.ed-poco::before { left: 6px; } .ed-poco::after { right: 6px; }
/* número pintado na parede do poço */
.ed-placa { grid-column: 1; align-self: center; justify-self: center; position: relative; z-index: 1; font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: rgba(255,246,227,.24); font-variant-numeric: tabular-nums; pointer-events: none; }
.ed-placa.fechado { font-size: 20px; }
.ed-placa.liberado { color: rgba(255,246,227,.85); }
.ed-placa.atual { opacity: 0; }
.ed-placa.objetivo { width: 46px; height: 46px; display: grid; place-items: center; font-size: 19px; color: var(--verde); }
.ed-placa.objetivo::before { content: ""; position: absolute; inset: 7px; z-index: -1; border-radius: 6px; transform: rotate(45deg); background: linear-gradient(135deg, #FFD978, var(--ouro) 60%); box-shadow: 0 0 18px 2px rgba(242,182,61,.65), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(160,100,10,.35); }
.ed-placa.objetivo::after { content: ""; position: absolute; inset: 7px; z-index: -2; border-radius: 6px; border: 2px solid var(--ouro); transform: rotate(45deg); animation: ed-pulso 1.8s ease-out infinite; }
@keyframes ed-pulso { from { transform: rotate(45deg) scale(1); opacity: .9; } to { transform: rotate(45deg) scale(1.75); opacity: 0; } }
/* andares que não fazem parte do jogo */
.ed-vao { grid-column: 2; position: relative; background: repeating-linear-gradient(180deg, #0A2321 0 3px, var(--estrutura) 3px 5px); }
.ed-vao span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 1px 7px; border-radius: 4px; background: var(--estrutura); font-size: 10.5px; font-weight: 500; line-height: 1.2; color: rgba(255,246,227,.5); }

/* cada andar é o botão: uma sala vista em corte */
.ed-andar { grid-column: 2; position: relative; display: flex; align-items: stretch; width: auto; min-height: 0; padding: 0; border: 0; border-radius: 2px; overflow: hidden; text-align: left; cursor: pointer; color: var(--verde); font: inherit;
  --parede: #FFF6E3; --parede-2: #EFE4CB; --chao: #E0D3B6; --movel: rgba(12,46,45,.3); --vidro: #E4E6D6; --reflexo: rgba(255,255,255,.6); --caixilho: #D8CBAE; --rodape: rgba(12,46,45,.12);
  --sombra: inset 0 calc(-1 * var(--piso)) 0 var(--chao), inset 0 10px 12px -8px rgba(0,0,0,.42), inset 14px 0 16px -14px rgba(0,0,0,.3), inset -14px 0 16px -14px rgba(0,0,0,.3);
  background: linear-gradient(var(--parede), var(--parede-2)); box-shadow: var(--sombra); transition: transform .1s ease, filter .2s, box-shadow .2s; }
.ed-andar:disabled { cursor: default; }
.ed-andar:focus-visible { outline: 3px solid #FFF6E3; outline-offset: -3px; }
.ed-andar::before { content: ""; position: absolute; top: 16%; right: 152px; width: 27%; height: 44%; border: 3px solid var(--caixilho); border-bottom-width: 4px; border-radius: 2px;
  background: linear-gradient(118deg, transparent 22%, var(--reflexo) 22% 30%, transparent 30% 46%, var(--reflexo) 46% 49%, transparent 49%), repeating-linear-gradient(90deg, var(--vidro) 0 52px, var(--caixilho) 52px 55px); }
.ed-andar::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--piso); height: 3px; background: var(--rodape); }
.ed-info { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 12px var(--piso) 20px; min-width: 0; }
.ed-nome { font-size: 18px; font-weight: 700; line-height: 1.12; white-space: nowrap; }
.ed-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; line-height: 1.2; color: rgba(12,46,45,.68); white-space: nowrap; }
.ed-movel { position: absolute; z-index: 1; right: 22px; bottom: var(--piso); height: calc(var(--h) * .52); width: auto; fill: currentColor; color: var(--movel); overflow: visible; }
.ed-movel .ed-corte { fill: var(--parede-2); }
.ed-luzes { position: absolute; z-index: 1; inset: 0 0 var(--piso) 0; pointer-events: none; }
.ed-luzes i { position: absolute; top: 0; width: 18px; height: 6px; margin-left: -9px; border-radius: 0 0 9px 9px; background: rgba(12,46,45,.55); }
.ed-luzes i::before { content: ""; position: absolute; left: 4px; right: 4px; bottom: -2px; height: 3px; border-radius: 2px; background: #FFFBEF; box-shadow: 0 0 8px 2px rgba(255,246,220,.9); }
.ed-luzes i::after { content: ""; position: absolute; top: 5px; left: 50%; width: 130px; height: calc(var(--h) - var(--piso)); transform: translateX(-50%); background: radial-gradient(ellipse 50% 100% at 50% 0, rgba(255,252,238,.5), rgba(255,252,238,0) 78%); }
/* fechado: luz apagada, mais baixo, só o cadeado */
.ed-andar.fechado { --parede: #0A2220; --parede-2: #0D2A28; --chao: #0F2F2D; --movel: rgba(255,246,227,.08); --vidro: #10332F; --reflexo: rgba(255,246,227,.04); --caixilho: #0B2422; --rodape: rgba(0,0,0,.3); --piso: 8px;
  --sombra: inset 0 calc(-1 * var(--piso)) 0 var(--chao), inset 0 10px 12px -8px rgba(0,0,0,.6), inset 14px 0 16px -14px rgba(0,0,0,.4), inset -14px 0 16px -14px rgba(0,0,0,.4); }
.ed-andar.fechado .ed-info { flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px; }
.ed-andar.fechado .ed-nome { font-size: 15.5px; color: rgba(255,246,227,.6); }
.ed-andar.fechado .ed-estado { color: rgba(255,246,227,.5); }
.ed-andar.fechado .ed-movel { height: calc(var(--hf) * .5); }
.ed-andar.fechado .ed-luzes i { background: rgba(255,246,227,.08); }
.ed-andar.fechado .ed-luzes i::before, .ed-andar.fechado .ed-luzes i::after { display: none; }
/* atual: creme quente, a cabine parada aqui */
.ed-andar.atual { --parede: #F7EEDB; --parede-2: #EADFC6; }
.ed-andar.atual .ed-estado { align-self: flex-start; margin-top: 2px; padding: 4px 10px 4px 7px; border-radius: 999px; background: var(--verde); color: #FFF6E3; box-shadow: 0 2px 0 rgba(3,17,16,.35); }
.ed-andar.atual .ed-estado .ed-i { fill: var(--ouro); }
/* liberado: creme frio, a seta mostra para que lado fica */
.ed-andar.liberado { --parede: #E6EEE7; --parede-2: #D6E2D9; --chao: #C3D3C7; --vidro: #EEF3EE; --caixilho: #C6D5CA; }
.ed-dir { position: absolute; z-index: 2; right: 14px; top: calc(50% - var(--piso) / 2); transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--verde); box-shadow: 0 3px 0 #031110; }
.ed-dir svg, .ed-ir svg, .ed-led svg { fill: none; stroke: var(--ouro); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ed-dir svg { width: 16px; height: 16px; }
.ed-andar.liberado:hover, .ed-andar.liberado:focus-visible { filter: brightness(1.04); box-shadow: var(--sombra), inset 0 0 0 3px var(--ouro); }
.ed-andar.liberado:hover + .ed-placa { color: var(--ouro); }
/* objetivo: aceso em ouro, a luz vaza para fora */
.ed-andar.objetivo { z-index: 2; --parede: #FFDB82; --parede-2: #F2B63D; --chao: #DB9E2A; --movel: rgba(12,46,45,.36); --vidro: #FFE7A6; --reflexo: rgba(255,255,255,.55); --caixilho: #E4A53A; --rodape: rgba(120,70,0,.2);
  --sombra: inset 0 calc(-1 * var(--piso)) 0 var(--chao), inset 0 10px 12px -8px rgba(120,70,0,.45), inset 14px 0 16px -14px rgba(120,70,0,.3), inset -14px 0 16px -14px rgba(120,70,0,.3);
  box-shadow: var(--sombra), 0 0 0 1px rgba(255,220,140,.65), 0 0 30px 4px rgba(242,182,61,.45); animation: ed-respira 2.2s ease-in-out infinite; }
@keyframes ed-respira { 50% { box-shadow: var(--sombra), 0 0 0 1px rgba(255,220,140,.85), 0 0 46px 8px rgba(242,182,61,.6); } }
.ed-andar.objetivo::before { display: none; }
.ed-andar.objetivo .ed-movel { right: 150px; }
.ed-andar.objetivo .ed-movel .ed-parede { display: none; }
.ed-andar.objetivo .ed-estado { color: rgba(12,46,45,.8); }
.ed-andar.objetivo .ed-luzes i { background: rgba(12,46,45,.7); }
.ed-andar.objetivo:hover { filter: brightness(1.05); }
.ed-andar.objetivo:focus-visible { outline: 3px solid var(--verde); }
/* a chamada dentro do objetivo: um botão de verdade, que afunda */
.ed-ir { position: absolute; z-index: 2; right: 14px; top: calc(50% - var(--piso) / 2); transform: translateY(-50%); display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 16px; border-radius: 12px; background: var(--verde); color: #FFF6E3; font-size: 15px; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 0 #031110, inset 0 1px 0 rgba(255,255,255,.1); transition: transform .08s, box-shadow .08s; }
.ed-ir svg { width: 16px; height: 16px; animation: ed-seta 1.1s ease-in-out infinite; }
@keyframes ed-seta { 50% { transform: translateY(-2px); } }
.ed-andar.objetivo:hover .ed-ir { transform: translateY(calc(-50% - 1px)); box-shadow: 0 5px 0 #031110, inset 0 1px 0 rgba(255,255,255,.1); }
.ed-andar:not(:disabled):active .ed-ir, .ed-andar.apertado .ed-ir { transform: translateY(calc(-50% + 3px)); box-shadow: 0 1px 0 #031110, inset 0 2px 4px rgba(0,0,0,.4); }
/* apertado: a sala afunda e as luzes piscam */
.ed-andar:not(:disabled):active, .ed-andar.apertado { transform: translateY(2px); }
.ed-andar.apertado { animation: ed-acende .36s steps(2) 3; filter: brightness(1.06); }
.ed-andar.apertado .ed-luzes i::before { background: #fff; box-shadow: 0 0 12px 4px rgba(255,250,230,1); }
@keyframes ed-acende { 50% { filter: brightness(1.18); } }
.ed-corpo.viajando .ed-trilha { opacity: 0; transition: opacity .2s; }
.ed-corpo.viajando .ed-andar:not(.apertado) { filter: brightness(.82); }
/* cabine com o Caramelo e o visor */
.ed-cabine { grid-column: 1; position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; margin: 4px 10px 0; will-change: transform; }
.ed-led { display: inline-flex; align-items: center; gap: 4px; height: 16px; padding: 0 7px; border-radius: 4px 4px 0 0; background: #0B0705; color: var(--led); font-size: 11px; font-weight: 700; line-height: 1; text-shadow: 0 0 6px rgba(255,150,40,.9); font-variant-numeric: tabular-nums; }
.ed-led svg { width: 9px; height: 9px; stroke: var(--led); filter: drop-shadow(0 0 3px rgba(255,150,40,.9)); animation: ed-led 1s ease-in-out infinite; }
@keyframes ed-led { 50% { opacity: .3; } }
.ed-led b { min-width: 1.2em; text-align: center; }
.ed-caixa { flex: 1; align-self: stretch; position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; border-radius: 5px 5px 2px 2px; border: 3px solid #B9C0BC; border-bottom: calc(var(--piso) - 3px) solid #3A4441;
  background: radial-gradient(ellipse 70% 45% at 50% 0, rgba(255,255,250,.8), transparent 75%), linear-gradient(#F8EBCB, #E6D2A2);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), inset 5px 0 0 #A3AAA6, inset -5px 0 0 #A3AAA6, 0 0 22px rgba(255,230,170,.25); }
/* o Caramelo parado de frente, recortado da folha de quadros (11 colunas x 6 linhas de 180 x 224) */
.ed-caixa i { --w: min(34px, calc(var(--h) * .44)); display: block; width: var(--w); height: calc(var(--w) * 224 / 180); margin-bottom: calc(var(--w) * -10 / 180);
  background: url(../img/voce.webp) no-repeat; background-size: calc(var(--w) * 11) calc(var(--w) * 224 / 180 * 6); background-position: calc(var(--w) * -10) calc(var(--w) * 224 / 180 * -4); }
/* trilha dourada da cabine até o objetivo */
.ed-trilha { grid-column: 1; position: relative; z-index: 2; pointer-events: none; }
.ed-trilha::before { content: ""; position: absolute; left: 50%; width: 6px; margin-left: -3px; top: calc(var(--h) / 2 + 30px); bottom: calc(-1 * var(--laje) - 2px); background: radial-gradient(circle, var(--ouro) 0 2px, transparent 2.6px) 0 0 / 6px 11px repeat-y; filter: drop-shadow(0 0 3px rgba(242,182,61,.9)); animation: ed-sobe .7s linear infinite; }
@keyframes ed-sobe { to { background-position: 0 -11px; } }
.ed-corpo.descendo .ed-trilha::before { top: -4px; bottom: calc(var(--h) / 2 + 30px); animation-direction: reverse; }

/* telas mais estreitas: título em cima, prédio no meio, botão embaixo */
@media (max-width: 1040px) {
  .ed-tela { --pad-y: 12px; --poco: 58px; --laje: 6px; --vao: 12px; --teto: 26px; --base: 14px; --piso: 10px; --cabh: 92px; --peh: 52px;
    display: flex; flex-direction: column; padding: var(--pad-y) 16px; max-width: 560px; margin: 0 auto; width: 100%; }
  .ed-corpo { --h: clamp(50px, calc((100vh - var(--topo) - 2 * var(--pad-y) - var(--cabh) - var(--peh) - 24px - var(--teto) - var(--base) - (var(--nA) + var(--nF) + var(--nV) + 1) * var(--laje) - var(--nV) * var(--vao)) / (var(--nA) + .62 * var(--nF))), 84px); }
  .ed-cab { height: var(--cabh); padding-right: 56px; }
  .ed-cab h2 { margin-top: 8px; font-size: 28px; }
  .ed-sub { margin-top: 4px; font-size: 15px; }
  .ed-x { top: var(--pad-y); right: 16px; }
  .ed-predio { margin-top: 12px; align-self: stretch; }
  .ed-chao { margin: 0 -10px; }
  .ed-antena { right: 24px; }
  .ed-placa { font-size: 21px; } .ed-placa.fechado { font-size: 16px; }
  .ed-placa.objetivo { width: 40px; height: 40px; font-size: 17px; }
  .ed-nome { font-size: 15.5px; } .ed-andar.fechado .ed-nome { font-size: 14px; }
  .ed-estado { font-size: 12px; gap: 5px; }
  .ed-info { gap: 3px; padding-left: 13px; }
  .ed-movel { right: 12px; height: calc(var(--h) * .44); }
  .ed-movel .ed-parede { display: none; }
  .ed-andar::before { right: 12px; width: 40%; top: 15%; height: 42%; border-width: 2px; border-bottom-width: 3px; }
  .ed-luzes i::after { width: 96px; }
  .ed-andar.objetivo .ed-movel { display: none; }
  .ed-ir { right: 10px; height: 38px; padding: 0 11px 0 13px; font-size: 14px; gap: 6px; border-radius: 11px; }
  .ed-longo { display: none; }
  .ed-dir { right: 10px; width: 32px; height: 32px; }
  .ed-cabine { margin: 4px 7px 0; }
  .ed-pe { margin-top: 12px; }
  .ed-dica { display: none; }
  .ed-ficar { margin-top: 0; width: 100%; }
  .ed-ficar kbd { display: none; }
}

/* porta entre ambientes do mesmo andar: a tela escurece um instante */
#jogo::after { content: ""; position: absolute; inset: 0; z-index: 4; background: #071C1B; opacity: 0; pointer-events: none; transition: opacity .32s var(--sai); }
#jogo.cortina::after { opacity: 1; }

/* ---------- termômetro da reputação (canto superior direito do mapa) ---------- */
#termometro { --term-w: clamp(116px, 10.5vw, 168px); position: absolute; z-index: 3; right: 24px; top: 18px; width: var(--term-w); aspect-ratio: 340 / 346; pointer-events: none; filter: drop-shadow(0 10px 16px rgba(0,0,0,.5)); transition: opacity .3s var(--sai), filter .4s var(--sai); }
#termometro img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#termometro .ponteiro { transform-origin: 49.76% 51.38%; transform: rotate(var(--ang, 211.7deg)); transition: transform 1.3s cubic-bezier(.3, 1.35, .5, 1); filter: drop-shadow(1px 2px 1.5px rgba(0,0,0,.45)); }
#termometro.baixa { filter: drop-shadow(0 10px 16px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(240,90,40,.6)); }
#termometro.caiu { animation: term-treme .55s var(--sai); }
@keyframes term-treme { 15% { transform: translateX(-4px) rotate(-3deg); } 35% { transform: translateX(4px) rotate(3deg); } 55% { transform: translateX(-2px) rotate(-1.5deg); } 75% { transform: translateX(1px); } }
#jogo.dialogo #termometro, #jogo.viajando #termometro { opacity: 0; }
.dev { right: calc(clamp(116px, 10.5vw, 168px) + 40px); }
@media (max-width: 760px) {
  #termometro { --term-w: 86px; right: 10px; top: 10px; }
  #missao { max-width: calc(100% - 28px - 96px); }
  .dev { right: 16px; }
}