/* Visual retrô de jogo de PC dos anos 90: molduras grossas, fonte de pixel nos títulos
   e VT323 nos textos longos (legível em tamanho grande). Tema escuro único, de propósito. */
:root {
  --fundo: #070b1c;
  --painel: #10183a;
  --painel-2: #18235a;
  --borda: #2c3c8c;
  --ouro: #f2c94c;
  --verde: #2fd17a;
  --vermelho: #ff5d5d;
  --tinta: #f6efd9;
  --suave: #a9b4e0;
  --sombra: #03050d;
  --pixel: "Silkscreen", ui-monospace, monospace;
  --texto: "VT323", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background-color: var(--fundo);
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 12%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 64%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 78%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 88%, #fff5 50%, transparent 51%);
  background-size: 420px 420px;
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 22px;
  line-height: 1.15;
}
[hidden] { display: none !important; }
p { margin: 0; }
button { font: inherit; color: inherit; }

.moldura {
  background: var(--painel);
  border: 3px solid var(--borda);
  box-shadow: inset 0 0 0 2px var(--sombra), 5px 5px 0 var(--sombra);
}

/* ---------- botões ---------- */
.btn, .opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  background: var(--painel-2);
  border: 3px solid var(--ouro);
  box-shadow: 4px 4px 0 var(--sombra);
  cursor: pointer;
  text-align: left;
}
.btn { font-family: var(--pixel); font-size: 14px; line-height: 1.3; }
.btn:hover, .opcao:hover { background: #22307a; }
.btn:active, .opcao:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--sombra); }
.btn:focus-visible, .opcao:focus-visible, .som:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 2px;
}
.btn em { margin-left: auto; font-style: normal; background: var(--ouro); color: var(--fundo); padding: 3px 6px; }
.btn-grande { justify-content: center; font-size: 16px; padding: 14px; }
.btn-voltar { border-color: var(--suave); justify-content: center; margin-top: auto; }
.ico { font-size: 20px; line-height: 1; font-family: initial; }

/* ---------- abertura e resultado ---------- */
.tela {
  position: fixed;
  inset: 0;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 16px;
  background: inherit;
  background-color: var(--fundo);
  z-index: 10;
}
.caixa { width: 100%; max-width: 620px; padding: 26px 22px; text-align: center; display: grid; gap: 16px; }
.pre { font-family: var(--pixel); font-size: 13px; color: var(--suave); text-transform: uppercase; letter-spacing: 1px; }
h1 { margin: 0; font-family: var(--pixel); font-size: 20px; line-height: 1.5; text-transform: uppercase; color: var(--tinta); }
h1 span { display: block; font-size: clamp(24px, 6vw, 40px); font-weight: 700; color: var(--ouro); text-shadow: 3px 3px 0 #1f9d55; }
.arte { position: relative; width: 120px; height: 180px; margin: 0 auto; }
.arte canvas, .res-arte canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.interroga {
  position: absolute; top: -6px; right: -34px;
  font-family: var(--pixel); font-size: 48px; color: var(--ouro);
  animation: pisca 1.2s steps(2) infinite;
}
.sub { font-size: 24px; color: var(--suave); }
.form-nome { display: grid; gap: 10px; text-align: left; }
.form-nome label { font-family: var(--pixel); font-size: 13px; color: var(--ouro); }
.form-nome input {
  font: inherit; font-size: 26px; padding: 8px 12px;
  background: var(--sombra); color: var(--tinta); border: 3px solid var(--borda);
}
.como { text-align: left; font-size: 21px; }
.como summary { font-family: var(--pixel); font-size: 13px; cursor: pointer; color: var(--suave); padding: 6px 0; }
.como ol { margin: 8px 0 0; padding-left: 26px; display: grid; gap: 6px; }
.aviso { font-size: 18px; color: var(--suave); border-top: 2px dashed var(--borda); padding-top: 12px; }

#resultado h2 { margin: 0; font-family: var(--pixel); font-size: 26px; color: var(--ouro); line-height: 1.5; }
.res-arte { position: relative; width: 96px; height: 144px; margin: 0 auto; }
.res-carimbo {
  position: absolute; left: 50%; top: 66%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font-family: var(--pixel); font-weight: 700; font-size: 20px; text-transform: uppercase;
  color: var(--vermelho); border: 4px solid var(--vermelho); background: rgb(255 255 255 / .9); padding: 2px 8px;
}
.patente { font-size: 20px; color: var(--ouro); }
.res-texto { font-size: 24px; }
.res-linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; text-align: left; }
.res-linhas li { display: flex; justify-content: space-between; border-bottom: 2px dotted var(--borda); padding: 4px 2px; }
.res-linhas b { color: var(--ouro); font-weight: normal; }
.res-botoes { display: grid; gap: 10px; }

/* ---------- jogo ---------- */
.jogo {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-areas: "topo topo" "cena painel" "fala fala";
}

.topo { grid-area: topo; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 10px 14px; }
.marca { margin: 0; font-family: var(--pixel); font-size: 16px; text-transform: uppercase; }
.marca b { color: var(--ouro); font-weight: normal; }
.fases { display: flex; align-items: center; gap: 6px; margin-left: auto; font-family: var(--pixel); font-size: 13px; color: var(--suave); }
.fases span { margin-right: 4px; }
.fases i { width: 12px; height: 12px; border: 2px solid var(--suave); }
.fases i.feita { background: var(--verde); border-color: var(--verde); }
.fases i.atual { background: var(--ouro); border-color: var(--ouro); animation: pisca 1s steps(2) infinite; }
.tempo { display: grid; gap: 4px; min-width: 180px; }
.hora { position: relative; font-family: var(--pixel); font-size: 16px; color: var(--ouro); white-space: nowrap; }
.custo { position: absolute; right: 0; top: 0; color: var(--vermelho); opacity: 0; }
.custo.ativo { animation: sobe 1.4s ease-out forwards; }
.barra { height: 10px; border: 2px solid var(--suave); background: var(--sombra); }
.barra i { display: block; height: 100%; background: var(--verde); transition: width .5s steps(10); }
.barra i.alerta { background: var(--ouro); }
.barra i.critico { background: var(--vermelho); }
.prazo { font-size: 18px; color: var(--suave); white-space: nowrap; }
.som { font-family: var(--pixel); font-size: 12px; padding: 8px; background: var(--sombra); border: 2px solid var(--borda); cursor: pointer; color: var(--suave); }

.cena { grid-area: cena; position: relative; overflow: hidden; aspect-ratio: 16 / 9; align-self: start; }
.cena > canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.cena::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgb(0 0 0 / .13) 0 1px, transparent 1px 3px);
}
.rotulo {
  position: absolute; left: 8px; top: 8px; z-index: 1;
  font-family: var(--pixel); font-size: 12px; text-transform: uppercase;
  background: rgb(3 5 13 / .78); padding: 4px 8px; border: 2px solid var(--ouro);
}

.cartao {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; gap: 14px; text-align: center;
  background: rgb(3 5 13 / .82); cursor: pointer;
  animation: aparece .25s steps(4);
}
.cartao-fase { font-family: var(--pixel); font-weight: 700; font-size: clamp(30px, 7vw, 56px); color: var(--ouro); text-shadow: 4px 4px 0 #1f9d55; }
.cartao-fase small { font-size: .5em; color: var(--suave); text-shadow: none; }
.cartao-cidade { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--pixel); font-size: clamp(15px, 3vw, 22px); text-transform: uppercase; }
.bandeira { flex: none; width: 30px; height: 20px; image-rendering: pixelated; box-shadow: 2px 2px 0 var(--sombra); }

.voo { position: absolute; inset: 0; z-index: 2; overflow: hidden; background: linear-gradient(#3f86e0, #b9e3f5); }
.voo canvas { position: absolute; left: 36%; top: 40%; width: 28%; image-rendering: pixelated; }
.voo.ativo canvas { animation: balanca .5s steps(2) infinite; }
.nuvem { position: absolute; width: 18%; height: 6%; background: #fff; opacity: .9; }
.nuvem::before { content: ""; position: absolute; left: 22%; top: -70%; width: 50%; height: 70%; background: #fff; }
.voo.ativo .nuvem { animation: nuvem 1.4s linear infinite; }
.n1 { top: 18%; } .n2 { top: 62%; animation-delay: -.5s !important; } .n3 { top: 80%; animation-delay: -1s !important; }
.preso { position: absolute; inset: 0; z-index: 2; display: grid; place-items: start center; padding-top: 5%; pointer-events: none; }
.sirene { position: absolute; inset: 0; animation: sirene .5s steps(1) infinite; }
.carimbo {
  position: relative; font-family: var(--pixel); font-weight: 700; font-size: clamp(20px, 4.4vw, 40px); text-transform: uppercase;
  color: var(--vermelho); border: 4px solid var(--vermelho); background: rgb(255 255 255 / .9); padding: 2px 14px;
  transform: rotate(-12deg); animation: carimbo .4s steps(4) .7s both;
}
.voo-rotulo {
  position: absolute; left: 8px; right: 8px; bottom: 8px; text-align: center;
  font-family: var(--pixel); font-size: 13px; text-transform: uppercase;
  background: rgb(3 5 13 / .78); padding: 8px; border: 2px solid var(--ouro);
}

.painel { grid-area: painel; padding: 14px; display: flex; flex-direction: column; gap: 12px; min-height: 100%; }
.local { display: flex; align-items: center; gap: 12px; }
.local h2 { margin: 0; font-family: var(--pixel); font-size: 20px; line-height: 1.2; text-transform: uppercase; color: var(--ouro); }
.local p { color: var(--suave); }
.desc { font-size: 21px; }
.acoes, .opcoes { display: grid; gap: 10px; }
.nota { font-size: 19px; color: var(--suave); }
.painel h3 { margin: 0; font-family: var(--pixel); font-size: 14px; line-height: 1.5; text-transform: uppercase; color: var(--tinta); }
.opcao { font-size: 22px; padding: 8px 10px; }
.op-nome { display: grid; flex: 1; line-height: 1; }
.op-nome small { font-size: 17px; color: var(--suave); margin-top: 3px; }
.op-custo { font-family: var(--pixel); font-size: 14px; color: var(--ouro); }
.opcao.feito { border-color: var(--verde); }
.opcao.aqui { background: #22307a; }
.ok { color: var(--verde); font-family: var(--pixel); font-size: 16px; }
.rota { font-size: 19px; color: var(--suave); }
.dossie { display: grid; gap: 8px; max-height: 340px; overflow: auto; }
.dossie h4 { margin: 0; font-family: var(--pixel); font-size: 13px; color: var(--ouro); text-transform: uppercase; }
.dossie ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 20px; }
.dossie b { color: var(--verde); font-weight: normal; }

.fala { grid-area: fala; display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; padding: 12px 14px; min-height: 136px; cursor: pointer; }
.retrato { width: 96px; height: 96px; image-rendering: pixelated; background: #2a3a7a; border: 3px solid var(--ouro); }
.quem { font-family: var(--pixel); font-size: 13px; line-height: 1.4; color: var(--ouro); margin-bottom: 8px; }
.texto { font-size: 24px; white-space: pre-wrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 760px) {
  body { font-size: 20px; }
  .jogo { padding: 10px 12px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "topo" "cena" "fala" "painel"; }
  .topo { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "marca som" "fases fases" "tempo tempo"; gap: 10px; }
  .marca { grid-area: marca; align-self: center; }
  .som { grid-area: som; }
  .fases { grid-area: fases; margin-left: 0; }
  .tempo { grid-area: tempo; min-width: 0; grid-template-columns: 1fr auto; align-items: baseline; }
  .barra { grid-column: 1 / -1; }
  .rotulo { font-size: 10px; }
  .fala { grid-template-columns: 64px 1fr; min-height: 120px; }
  .retrato { width: 64px; height: 64px; }
  .texto { font-size: 21px; }
}

@keyframes pisca { 50% { opacity: .25; } }
@keyframes sobe { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes aparece { from { opacity: 0; transform: scale(.92); } }
@keyframes balanca { 50% { transform: translateY(-4px); } }
@keyframes nuvem { from { left: 105%; } to { left: -25%; } }
@keyframes sirene { 0% { background: rgb(255 40 40 / .3); } 50% { background: rgb(40 90 255 / .3); } }
@keyframes carimbo { from { opacity: 0; transform: rotate(-12deg) scale(2.4); } to { opacity: 1; transform: rotate(-12deg) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}