@font-face { font-family: 'Pixelify'; src: url('vendor/PixelifySans.ttf') format('truetype'); font-display: swap; }
:root {
  --tinta: #2a1a24; --papel: #fff8ea; --sol: #ffd23f; --coral: #e5484d; --mar: #1b6f95; --folha: #2f9e5a;
  --painel: rgba(255, 248, 234, 0.95); --sombra: 0 4px 0 #2a1a24;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #f0a060; color: var(--tinta); font-family: 'Pixelify', 'DotGothic16', monospace; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#tela { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; image-rendering: pixelated; }
.oculto { display: none !important; }
button { font-family: inherit; }

/* HUD */
#hud { position: fixed; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 6px 10px; padding-top: max(6px, env(safe-area-inset-top));
  background: linear-gradient(rgba(42,26,36,0.78), rgba(42,26,36,0.55)); color: var(--papel); height: 48px; font-size: 15px; pointer-events: none; }
.hud-bloco { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.hud-bloco b { font-size: 18px; color: #fff; letter-spacing: 1px; }
.rot { font-size: 11px; letter-spacing: 1px; opacity: 0.8; text-transform: uppercase; }
.hud-onda { flex: 1; justify-content: center; }
.hud-onda b { color: var(--sol); }
.hud-onda span { font-size: 14px; }
.hud-contas { gap: 12px; }
.conta { display: inline-flex; align-items: center; gap: 4px; }
.conta b.pop { animation: pop 0.35s; }
@keyframes pop { 40% { transform: scale(1.2); color: var(--sol); } }
.conta b { display: inline-block; min-width: 2.6ch; text-align: right; transform-origin: right center; }
.ic { width: 22px; height: 22px; image-rendering: pixelated; }
#hVidas { display: inline-flex; gap: 2px; }
#hVidas img { width: 22px; height: 22px; image-rendering: pixelated; }
#hVidas img.perdida { opacity: 0.25; filter: grayscale(1); }
.bt-pausa { pointer-events: auto; width: 44px; height: 44px; border: 2px solid var(--papel); background: rgba(0,0,0,0.25); color: var(--papel); font-size: 16px; font-weight: bold; border-radius: 6px; cursor: pointer; }
body.retrato #hud { height: 64px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'onda vidas' 'pontos contas'; gap: 2px 8px; font-size: 13px; padding: 4px 58px 4px 8px; align-content: center; }
body.retrato .hud-bloco b { font-size: 15px; }
body.retrato .hud-onda { grid-area: onda; justify-content: flex-start; }
body.retrato .hud-vidas { grid-area: vidas; justify-content: flex-end; }
body.retrato .hud-pontos { grid-area: pontos; }
body.retrato .hud-contas { grid-area: contas; justify-content: flex-end; gap: 8px; }
body.retrato .hud-vidas .rot, body.retrato .hud-contas .rot { display: none; }
body.retrato .bt-pausa { position: absolute; right: 8px; top: 10px; }
body.retrato #hVidas img, body.retrato .ic { width: 18px; height: 18px; }

/* tutorial jogável (1.2.0): pedido ancorado no alvo — balão com seta, anel no alvo, linha de mira, botões de toque pulsando */
#dica { position: fixed; left: 0; top: 0; z-index: 4; width: max-content; max-width: min(88vw, 330px); display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--painel); border: 3px solid var(--tinta); box-shadow: var(--sombra); padding: 5px 12px 8px; border-radius: 8px; font-size: 16px; line-height: 1.2;
  text-align: center; pointer-events: none; font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0; }
#dica::after { content: ''; position: absolute; left: var(--seta-x, 50%); bottom: -14px; margin-left: -11px; border: 11px solid transparent; border-bottom: 0; border-top-color: var(--tinta); }
#dica.abaixo::after { bottom: auto; top: -14px; border-top: 0; border-bottom: 11px solid var(--tinta); }
.dica-passo { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.75; }
.dica-aviso b { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: var(--coral); color: #fff; font-size: 14px; vertical-align: 1px; }
.dica-feito { font-weight: bold; color: #1f7a45; font-size: 18px; }
.dica-extra { display: flex; gap: 10px; font-size: 14px; }
.marca-lado { padding: 0 6px; border: 2px dashed var(--tinta); border-radius: 6px; }
.marca-lado.feito { border-style: solid; background: #d9f2df; }
.conta-tut { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-weight: 700; font-size: 13px; }
.dica-controle { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; }
.ctl { display: inline-flex; align-items: center; gap: 4px; }
#dica small { font-size: 13px; opacity: 0.85; }
#dica kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 5px; box-sizing: border-box; font: 700 13px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace;
  color: var(--tinta); background: var(--sol); border: 2px solid var(--tinta); border-bottom-width: 4px; border-radius: 5px; }
.bt-mini { display: inline-grid; place-items: center; min-width: 28px; height: 26px; padding: 0 6px; box-sizing: border-box; border: 2px solid var(--tinta); border-radius: 6px; background: #fff; font-size: 13px; font-weight: bold; }
.ic-mouse { width: 16px; height: 22px; color: var(--tinta); flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.retrato #dica { font-size: 15px; max-width: min(90vw, 300px); }
#anel { position: fixed; left: 0; top: 0; z-index: 3; pointer-events: none; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--tinta), inset 0 0 0 2px var(--tinta); }
#anel.caixa { border-radius: 10px; border-style: dashed; }
#anel::after { content: ''; position: absolute; inset: -9px; border-radius: inherit; border: 3px solid var(--sol); opacity: 0; animation: anel-pulso 1.1s ease-out infinite; }
@keyframes anel-pulso { 0% { opacity: 0.95; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.18); } }
#mira { position: fixed; left: 0; top: 0; z-index: 2; width: 0; border-left: 3px dashed #fff; filter: drop-shadow(1px 0 0 var(--tinta)) drop-shadow(-1px 0 0 var(--tinta)); pointer-events: none; }
#mira.ok { border-left: 4px solid #fff; }
.tb.pulsar { animation: bt-pulso 1s ease-in-out infinite; }
@keyframes bt-pulso { 0%, 100% { outline: 3px solid #fff; outline-offset: 2px; } 50% { outline: 5px solid var(--sol); outline-offset: 7px; } }
@media (prefers-reduced-motion: reduce) {
  #anel::after { animation: none; opacity: 0.9; transform: none; }
  .tb.pulsar { animation: none; outline: 5px solid var(--sol); outline-offset: 5px; }
}

#flutuantes { position: fixed; inset: 0; pointer-events: none; }
.flut { position: absolute; transform: translate(-50%, -50%); color: #fff; font-size: 18px; font-weight: bold; text-shadow: 2px 2px 0 var(--tinta), -1px -1px 0 var(--tinta); }

/* toque */
#toque { position: fixed; left: 0; right: 0; bottom: 0; height: 150px; display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; padding-bottom: max(12px, env(safe-area-inset-bottom)); pointer-events: none; }
.toque-dir { display: flex; gap: 12px; }
.tb { pointer-events: auto; touch-action: none; width: 78px; height: 78px; border-radius: 16px; border: 3px solid var(--tinta); background: rgba(255,248,234,0.85); color: var(--tinta); font-size: 30px; box-shadow: var(--sombra); }
.tb.ativo { transform: translateY(3px); box-shadow: 0 1px 0 var(--tinta); background: #fff; }
.tb-lancar { width: 118px; height: 96px; font-size: 20px; font-weight: bold; background: var(--sol); }
body.paisagem #toque { height: 110px; }
body.paisagem .tb { width: 70px; height: 70px; }

/* painéis */
.painel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 460px); max-height: 92vh; overflow: auto; background: var(--painel);
  border: 4px solid var(--tinta); box-shadow: 0 6px 0 var(--tinta); border-radius: 12px; padding: 18px 20px; text-align: center; }
.painel h1 { margin: 0 0 6px; font-size: 40px; line-height: 1; color: var(--mar); text-shadow: 3px 3px 0 var(--sol); }
.painel h1 span { color: var(--coral); }
.painel h2 { margin: 0 0 10px; font-size: 26px; color: var(--mar); }
.sub { margin: 6px 0 12px; font-size: 15px; }
.botoes { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.botoes.linha { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.bt { min-height: 46px; padding: 8px 16px; border: 3px solid var(--tinta); border-radius: 8px; background: #fff; color: var(--tinta); font-size: 18px; cursor: pointer; box-shadow: 0 3px 0 var(--tinta); }
.bt:hover, .bt:focus-visible { background: #fff2c0; outline: none; }
.bt:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tinta); }
.bt-principal { background: var(--sol); font-weight: bold; }
.bt.sel { background: var(--folha); color: #fff; }
.bt.sel::before { content: '✓ '; }
.marca { margin: 12px 0 0; font-size: 15px; }
.aviso { color: var(--coral); font-size: 13px; }
.controles { font-size: 12px; opacity: 0.8; margin: 10px 0 0; }
.rot-op { margin: 12px 0 4px; font-weight: bold; }
input[type=range] { width: 100%; height: 36px; }
.check { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; font-size: 16px; }
.check input { width: 24px; height: 24px; }
.painel-sobre { text-align: left; width: min(94vw, 560px); }
.painel-sobre .rolar { max-height: 60vh; overflow: auto; font-size: 15px; line-height: 1.35; }
.painel-resultado { top: auto; bottom: auto; top: 58px; transform: translateX(-50%); width: min(94vw, 520px); padding: 12px 16px; }
body.retrato .painel-resultado { top: 70px; }
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0; }
body.retrato .numeros { grid-template-columns: repeat(2, 1fr); }
.numeros div { background: #fff; border: 2px solid var(--tinta); border-radius: 6px; padding: 4px; display: flex; flex-direction: column; }
.numeros b { font-size: 22px; }
.padroes { font-size: 13px; margin: 4px 0; }
.msg { font-size: 15px; margin: 6px 0; }
body.capa #hud, body.capa #dica, body.capa .painel, body.capa #toque, body.capa #flutuantes { display: none !important; }
@media (max-height: 520px) { .painel h1 { font-size: 28px; } .painel { padding: 10px 14px; } .sub { display: none; } .bt { min-height: 44px; font-size: 16px; } }
/* números: dígitos inequívocos (a fonte pixelada confunde 2/8 e 5/S em tamanho pequeno) */
.hud-bloco b:not(#hOnda), .numeros b, #tRecorde, .flut { font-family: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace; font-weight: 700; }
#hOnda { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.num, #fOnda { font-family: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace; font-weight: 700; }

/* HUD em retrato estreito: nada encosta no botão de pausa até 290 px */
body.retrato #hud { grid-template-columns: minmax(0, 1fr) auto; }
body.retrato .hud-onda, body.retrato .hud-pontos { min-width: 0; overflow: hidden; }
body.retrato .hud-onda span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) {
  body.retrato #hud { font-size: 12px; gap: 2px 6px; padding-left: 6px; padding-right: 56px; }
  body.retrato .hud-bloco b { font-size: 13px; letter-spacing: 0; }
  body.retrato .hud-pontos .rot { display: none; }
  body.retrato .rot-rec, body.retrato #hRecorde { display: none; }
  body.retrato .hud-contas { gap: 5px; }
  body.retrato #hVidas img, body.retrato .ic { width: 15px; height: 15px; }
}
@media (max-width: 330px) { body.retrato .hud-onda span { display: none; } }

/* grade de estampas no resultado (varal completo legível) */
.grade-estampas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 6px 0; }
.estampa { background: #fff; border: 2px solid var(--tinta); border-radius: 6px; padding: 3px 5px; display: flex; align-items: center; gap: 2px; font-size: 12px; }
.estampa img { width: 30px; height: 24px; image-rendering: pixelated; }
.grade-estampas.grande .estampa { font-size: 14px; padding: 4px 8px; }
.grade-estampas.grande .estampa img { width: 45px; height: 36px; }
body.retrato .grade-estampas.grande .estampa img { width: 30px; height: 24px; }
body.retrato .estampa { font-size: 11px; }

/* 1.2.0 — botões de ajuda no título e na pausa */
.par { display: flex; gap: 8px; }
.par .bt { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }
@media (max-height: 520px) {
  #pausa .botoes { display: grid; grid-template-columns: 1fr 1fr; }
  #pausa .bt-principal { grid-column: 1 / -1; }
}

/* 1.2.0 — guia "Como jogar" (kit comum em como-jogar/): cores e fonte dos painéis do jogo */
.cj-fundo {
  --cj-painel: #fff8ea; --cj-painel-2: #fff1d2; --cj-texto: #2a1a24; --cj-suave: #6d5563;
  --cj-destaque: #ffd23f; --cj-destaque-texto: #2a1a24; --cj-borda: #2a1a24;
  --cj-fonte: 'Pixelify', 'DotGothic16', monospace; --cj-raio: 12px;
  background: rgba(42, 26, 36, 0.62);
}
.cj-painel { border-width: 4px; box-shadow: 0 6px 0 var(--cj-borda), 0 14px 40px rgba(0, 0, 0, 0.4); }
.cj-titulo-cartao, .cj-topo h2 { color: var(--mar); }
.cj-gesto { color: var(--mar); }
.cj-controles { background: #fff; border: 2px solid var(--cj-borda); }
.cj-painel .cj-prox { box-shadow: 0 3px 0 var(--cj-borda); }
.cj-anfitria { background: #ffe9b8; border: 2px solid var(--cj-borda); border-radius: 8px; box-sizing: border-box; }
/* no celular em pé, o cartão de controles (clipe + lista) cabe sem rolagem com o clipe um pouco menor */
@media (max-width: 899px) and (orientation: portrait) {
  .cj-cartao:has(.cj-controles) .cj-clipe video { max-height: min(27dvh, 230px); }
}
/* celular deitado: o cartão de controles cabe sem rolagem (troca de lista ao lado do rótulo, linhas mais baixas) */
@media (max-height: 520px) and (orientation: landscape) {
  .cj-painel { gap: 2px; }
  .cj-cartao { row-gap: 4px; }
  .cj-texto { font-size: 0.88rem; line-height: 1.2; }
  .cj-controles { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; row-gap: 4px; padding: 4px 8px; }
  .cj-rotulo { margin: 0; }
  .cj-troca { grid-column: 2; grid-row: 1; margin-top: 0; }
  .cj-lista { grid-column: 1 / -1; }
  .cj-lista li { min-height: 30px; }
}
/* celular deitado: no tutorial o nome "TUTORIAL · Primeiros passos" encolhe em vez de empurrar o botão de pausa para fora da tela */
body.paisagem .hud-onda { min-width: 0; overflow: hidden; }
body.paisagem .hud-onda b { flex: none; }
body.paisagem .hud-onda span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }