/* Colcha de Retalhos v3 — UI estilo Pip: painéis escuros translúcidos, borda de latão, fonte Pixelify Sans. */
@font-face {
  font-family: "Pixelify Sans";
  src: url("./vendor/fonts/PixelifySans.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}
:root {
  --tinta: #1c1426;
  --painel-topo: rgba(48, 32, 58, 0.94);
  --painel-base: rgba(22, 14, 30, 0.95);
  --trim: #ecc978;
  --trim-escuro: #9d8450;
  --texto: #fff4de;
  --mudo: #dccbb0;
  --ouro: #ffe7a3;
  --fonte: "Pixelify Sans", "Trebuchet MS", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--tinta); color: var(--texto); font-family: var(--fonte); overflow: hidden;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: none;
  overscroll-behavior: none; font-variant-ligatures: none;
}
[hidden] { display: none !important; }
#palco { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; display: block; touch-action: none; image-rendering: pixelated; }
#sonda { position: fixed; visibility: hidden; pointer-events: none; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
button { font-family: var(--fonte); }
button:focus-visible, input:focus-visible { outline: 3px solid #ffe38a; outline-offset: 3px; }

.painel {
  background: linear-gradient(180deg, var(--painel-topo), var(--painel-base));
  border: 2px solid var(--trim); border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(8, 6, 16, 0.85), inset 0 0 0 2px rgba(255, 255, 255, 0.05), 0 8px 22px rgba(0, 0, 0, 0.45);
}

/* ---------- HUD (posições calculadas pelo layout) ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud button { pointer-events: auto; position: fixed; }
.bt-redondo {
  border-radius: 50%; border: 2px solid var(--trim); color: var(--texto); padding: 0; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--painel-topo), var(--painel-base)); box-shadow: 0 0 0 2px rgba(8, 6, 16, 0.85), 0 4px 12px rgba(0, 0, 0, 0.4);
}
.bt-redondo svg { width: 55%; height: 55%; }
#btSom .som-x { display: none; }
#btSom.mudo .som-x { display: inline; }
#btSom.mudo .som-onda { display: none; }
.bt-toque {
  border-radius: 10px; border: 2px solid var(--trim); color: #f4ecd8; padding: 0; cursor: pointer; display: grid; place-items: center; touch-action: none;
  background: linear-gradient(180deg, rgba(58, 40, 70, 0.9), rgba(24, 16, 32, 0.92)); box-shadow: 0 0 0 2px rgba(8, 6, 16, 0.85), inset 0 -4px 0 rgba(0, 0, 0, 0.35);
}
.bt-toque svg { width: 58%; height: 58%; image-rendering: pixelated; }
.bt-toque.ativo, .bt-toque:active { transform: translateY(2px); box-shadow: 0 0 0 2px rgba(8, 6, 16, 0.85), inset 0 -1px 0 rgba(0, 0, 0, 0.35); border-color: #fff0b8; }

.anuncio {
  position: fixed; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none;
  font-weight: 700; color: #fff6e0; opacity: 0; line-height: 1.05;
  text-shadow: 0 3px 0 #2b1830, 0 5px 0 #140c1c, 0 0 18px rgba(255, 200, 110, 0.7);
}
.anuncio small { display: block; font-size: 0.5em; color: var(--ouro); margin-top: 0.25em; font-weight: 600; }
.anuncio.mostrar { animation: anuncio 1.1s ease-out forwards; }
@keyframes anuncio { 0% { opacity: 0; transform: scale(0.7); } 12% { opacity: 1; transform: scale(1.08); } 22% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
.dica { background: linear-gradient(180deg, #30203a, #170e1f); position: fixed; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px 10px; font-size: 15px; line-height: 1.25; color: var(--texto); pointer-events: none; animation: entrar 0.25s ease-out; }

/* ---------- telas ---------- */
.tela {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 45%, rgba(20, 12, 28, 0.25), rgba(20, 12, 28, 0.72) 80%);
}
.cartao {
  width: min(520px, 100%); max-height: 100%; padding: 18px 20px; text-align: center; overflow: hidden;
  display: flex; flex-direction: column; gap: 12px; align-items: stretch; animation: entrar 0.28s cubic-bezier(.2, 1.3, .4, 1);
}
@keyframes entrar { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
.sobretitulo { margin: 0; color: var(--trim); font-size: 15px; letter-spacing: 0.06em; }
h1 {
  margin: 0; font-size: clamp(34px, 7.5vw, 58px); line-height: 0.98; color: #fff6e0; font-weight: 700;
  text-shadow: 0 3px 0 #4a2a3c, 0 6px 0 #1c1020, 0 0 26px rgba(255, 200, 110, 0.5);
}
h2 { margin: 0; font-size: 30px; color: #fff6e0; text-shadow: 0 3px 0 #1c1020; }
.lema { margin: 0; color: var(--mudo); font-size: 16px; line-height: 1.3; }
.modos { display: grid; gap: 10px; }
.modo-maratona { display: grid; gap: 6px; }
.bt {
  min-height: 48px; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 18px; font-weight: 600; color: var(--texto);
  background: linear-gradient(180deg, rgba(70, 50, 84, 0.95), rgba(36, 24, 46, 0.95)); border: 2px solid var(--trim-escuro);
  box-shadow: 0 0 0 2px rgba(8, 6, 16, 0.85), 0 4px 0 rgba(8, 6, 16, 0.6);
}
.bt:hover { border-color: var(--trim); }
.bt:active { transform: translateY(2px); box-shadow: 0 0 0 2px rgba(8, 6, 16, 0.85), 0 2px 0 rgba(8, 6, 16, 0.6); }
.bt-principal {
  color: #22160c; background: linear-gradient(180deg, #fff1b8, #f0c460); border-color: #fff7d8;
  box-shadow: 0 0 0 2px #3a2a10, 0 4px 0 #6a4a14, 0 0 18px rgba(255, 210, 110, 0.35);
}
.bt.modo { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bt.modo b { font-size: 21px; }
.bt.modo span { font-size: 14px; opacity: 0.85; font-weight: 400; }
.seletor-nivel { display: flex; align-items: center; justify-content: center; gap: 10px; }
.seletor-nivel .rotulo { color: var(--mudo); font-size: 15px; }
.bt-mini {
  width: 48px; height: 48px; border-radius: 6px; font-size: 24px; font-weight: 700; cursor: pointer; color: var(--texto); padding: 0;
  background: linear-gradient(180deg, rgba(70, 50, 84, 0.95), rgba(36, 24, 46, 0.95)); border: 2px solid var(--trim-escuro);
}
.seletor-nivel output { min-width: 2.2ch; font-size: 26px; font-weight: 700; color: var(--ouro); font-variant-numeric: tabular-nums; }
.acoes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.acoes .bt { flex: 1 1 140px; }
.grade-acoes { display: grid; grid-template-columns: 1fr 1fr; }
.grade-acoes .bt-principal, .grade-acoes #btSair { grid-column: 1 / -1; }
.recordes { margin: 0; font-size: 15px; color: var(--mudo); }
.recordes b { color: var(--ouro); }
kbd {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; margin: 0 2px;
  font-family: var(--fonte); font-size: 14px; font-weight: 700; color: #1c1426; background: #f4ecd8;
  border-radius: 4px; box-shadow: inset 0 -3px 0 #c8b88e, 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.ajuste { display: grid; grid-template-columns: 1fr 1.4fr auto; align-items: center; gap: 10px; text-align: left; font-size: 16px; }
.ajuste small { display: block; font-size: 12px; color: var(--mudo); }
.ajuste output { min-width: 7ch; text-align: right; color: var(--ouro); font-variant-numeric: tabular-nums; }
.cartao-pausa .ajuste { grid-template-columns: auto 1fr; }
input[type=range] { width: 100%; height: 44px; accent-color: #f0c460; background: transparent; }
.selo-recorde { margin: 0; color: #22160c; background: linear-gradient(180deg, #fff1b8, #f0c460); border-radius: 4px; padding: 4px 10px; font-weight: 700; align-self: center; }
.fim-dados { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fim-dados div { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(236, 201, 120, 0.3); border-radius: 4px; padding: 6px 4px; }
.fim-dados dt { font-size: 13px; color: var(--mudo); }
.fim-dados dd { margin: 2px 0 0; font-size: 22px; font-weight: 700; color: var(--ouro); }
#tituloFim { font-size: 40px; color: var(--ouro); }

.contagem {
  position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; font-size: 120px; font-weight: 700; color: #fff6e0;
  text-shadow: 0 5px 0 #4a2a3c, 0 10px 0 #1c1020, 0 0 40px rgba(255, 200, 110, 0.7);
}
.carregando {
  position: fixed; inset: 0; display: grid; place-items: center; background: var(--tinta); color: var(--trim); font-size: 22px; z-index: 9; transition: opacity 0.35s;
}
.carregando.saindo { opacity: 0; pointer-events: none; }
.sem-js { position: fixed; inset: 0; display: grid; place-items: center; }

/* telas baixas (celular deitado) e estreitas */
@media (max-height: 500px) {
  .cartao { padding: 10px 14px; gap: 7px; width: min(640px, 100%); }
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  .lema, .sobretitulo { display: none; }
  .modos { grid-template-columns: 1fr 1fr; align-items: start; }
  .bt.modo span { display: none; }
  .fim-dados dd { font-size: 18px; }
  #tituloFim { font-size: 30px; }
  .contagem { font-size: 80px; }
}
@media (max-width: 380px) {
  .cartao { padding: 14px 12px; }
  .fim-dados dd { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .cartao, .dica { animation: none; }
}

/* ---------- 3.2.0: guia "Como jogar" (kit da coleção em como-jogar/) nas cores e na fonte do jogo ---------- */
.cj-fundo {
  --cj-painel: #170f20; --cj-painel-2: #30203a; --cj-texto: #fff4de; --cj-suave: #dccbb0;
  --cj-destaque: #ecc978; --cj-destaque-texto: #22160c; --cj-borda: #0e0914; --cj-fonte: var(--fonte); --cj-raio: 4px;
  background: rgba(20, 12, 28, 0.8);
}
/* Pixelify Sans: em 700 o "c" quase fecha e lê como "o" (armadilha do kit) */
/* Pixelify Sans a 1×: o "C" maiúsculo fecha ("Oomo jogar", "Oolcha!"), o "Z" lê como "2" e o "5" como "S". No guia
   e nas falas do tutorial vale uma fonte sem ambiguidade; o resto do jogo continua na Pixelify. */
.cj-fundo .cj-painel, .cj-fundo .cj-painel button, .cj-fundo .cj-topo h2, .cj-fundo .cj-titulo-cartao, .cj-fundo .cj-texto,
.cj-fundo .cj-rotulo, .cj-fundo .cj-acao, .cj-fundo .cj-passo, .tut-etiqueta, .tut-texto, #dica.fala-tutorial {
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}
.cj-fundo .cj-painel kbd, .tut-icones kbd { font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; font-weight: 700; }
.cj-fundo .cj-topo h2, .cj-fundo .cj-titulo-cartao { font-weight: 700; }
.cj-fundo .cj-painel .cj-prox { background: linear-gradient(180deg, #fff1b8, #f0c460) !important; font-weight: 600; }
/* a Hanna apresenta o guia: o busto do retrato do HUD, recortado das folhas de sprite do jogo e animado como no palco */
.cj-fundo guia-hanna.guia-hanna {
  --gh-esc: 0.75;
  display: block; flex: none; object-fit: none;
  width: calc(var(--gh-qw, 96) * var(--gh-esc) * 1px); height: calc(var(--gh-bh, 72) * var(--gh-esc) * 1px);
  background-image: var(--gh-folha); background-repeat: no-repeat;
  background-size: calc(var(--gh-qw, 96) * var(--gh-quadros, 4) * var(--gh-esc) * 1px) calc(var(--gh-qh, 192) * var(--gh-esc) * 1px);
  background-position: 0 calc(var(--gh-by, 44) * var(--gh-esc) * -1px);
  background-color: rgba(48, 32, 58, 0.95);
  border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(236, 201, 120, 0.6);
  animation: gh-quadros var(--gh-dur, 1s) steps(var(--gh-quadros, 4)) infinite;
}
@keyframes gh-quadros {
  from { background-position-x: 0; }
  to { background-position-x: calc(var(--gh-qw, 96) * var(--gh-quadros, 4) * var(--gh-esc) * -1px); }
}
@media (max-width: 600px), (max-height: 520px) {
  .cj-fundo guia-hanna.guia-hanna { --gh-esc: 0.6; }
}
/* tela estreita: linhas de controle mais baixas, para o cartão de controles caber sem rolagem em 390×844 */
@media (max-width: 600px) {
  /* primeira vez: "Pular" entra na linha de navegação, no lugar dos pontinhos (o "2 / 5" do topo mostra o progresso) */
  .cj-fundo .cj-painel:has(.cj-pular) .cj-pontos { visibility: hidden; }
  .cj-fundo .cj-painel:has(.cj-pular) .cj-nav { position: relative; }
  .cj-fundo .cj-painel .cj-pular { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); }
  .cj-fundo .cj-icones { min-width: 52px; }
  .cj-fundo .cj-lista { gap: 3px; }
  .cj-fundo .cj-lista li { min-height: 36px; }
  .cj-fundo .cj-gesto svg { width: 34px; height: 34px; }
  .cj-fundo .cj-acao { font-size: .9rem; }
}
@media (max-width: 600px) and (max-height: 760px) {
  .cj-fundo .cj-cartao:has(.cj-controles) .cj-clipe { height: 19dvh; max-height: 19dvh; width: auto; align-self: center; }
  .cj-fundo .cj-lista { gap: 1px; }
  .cj-fundo .cj-lista li { min-height: 30px; }
  .cj-fundo .cj-controles { padding: 6px 8px; }
  .cj-fundo .cj-gesto svg { width: 28px; height: 28px; }
  .cj-fundo .cj-painel { gap: 8px; padding-top: 10px; padding-bottom: 10px; }
}
/* celular deitado: no cartão de controles o clipe fica mais estreito e a lista vai em duas colunas */
@media (max-height: 520px) and (orientation: landscape) {
  .cj-fundo .cj-cartao:has(.cj-controles) { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.25fr); }
  .cj-fundo .cj-cartao:has(.cj-controles) .cj-texto { font-size: .85rem; }
  .cj-fundo .cj-controles .cj-lista { grid-template-columns: 1fr 1fr; column-gap: 8px; row-gap: 2px; }
  .cj-fundo .cj-controles .cj-lista li { min-height: 30px; gap: 6px; }
  .cj-fundo .cj-controles .cj-icones { min-width: 0; }
  .cj-fundo .cj-controles .cj-acao { font-size: .78rem; line-height: 1.15; }
  .cj-fundo .cj-controles .cj-painel kbd, .cj-fundo .cj-controles kbd { min-width: 24px; height: 24px; padding: 0 4px; font-size: .75rem; }
  .cj-fundo .cj-controles .cj-gesto svg { width: 26px; height: 26px; }
  .cj-fundo .cj-rotulo { margin-bottom: 2px; }
}
@media (max-height: 400px) and (orientation: landscape) {
  .cj-fundo .cj-controles .cj-lista { row-gap: 0; }
  .cj-fundo .cj-controles .cj-lista li { min-height: 26px; }
  .cj-fundo .cj-cartao:has(.cj-controles) .cj-texto { font-size: .8rem; line-height: 1.25; }
  .cj-fundo .cj-controles { padding: 4px 8px; }
  .cj-fundo .cj-troca { margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) { .cj-fundo guia-hanna.guia-hanna { animation: none; } }

/* ---------- 3.2.0: tutorial jogável — marcadores ancorados no alvo (não recebem toque nem clique) ---------- */
#tutorial { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
.tut-anel {
  position: fixed; border: 3px solid #ffe38a; border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(20, 8, 20, 0.85), inset 0 0 0 2px rgba(20, 8, 20, 0.6), 0 0 16px rgba(255, 220, 120, 0.75);
  animation: tut-pulso 1.1s ease-in-out infinite;
}
.tut-casa {
  position: fixed; border: 2px dashed #fff4de; border-radius: 3px; background: rgba(255, 227, 138, 0.22);
  box-shadow: inset 0 0 0 1px rgba(20, 8, 20, 0.7); animation: tut-pulso 1.1s ease-in-out infinite;
}
@keyframes tut-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.tut-etiqueta {
  position: fixed; left: 0; top: 0; display: flex; align-items: center; gap: 8px; max-width: min(300px, calc(100vw - 16px));
  padding: 6px 10px; font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--texto); white-space: nowrap;
  background: linear-gradient(180deg, #3a2748, #1a1024); border: 2px solid #ffe38a; border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(8, 6, 16, 0.9), 0 6px 14px rgba(0, 0, 0, 0.5);
}
.tut-etiqueta.entra { animation: tut-entra 0.25s ease-out; }
@keyframes tut-entra { from { opacity: 0; } to { opacity: 1; } }
.tut-icones { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.tut-icones kbd { margin: 0; font-size: 15px; min-width: 28px; height: 28px; }
.tut-ou { font-size: 13px; color: var(--mudo); font-weight: 400; margin: 0 2px; }
.tut-gesto { width: 34px; height: 34px; image-rendering: pixelated; }
.tut-texto { white-space: normal; }
/* setinha apontando para o alvo */
.tut-etiqueta::after {
  content: ""; position: absolute; width: 12px; height: 12px; background: inherit; border: 2px solid #ffe38a;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.tut-etiqueta[data-lado="cima"]::after { left: calc(var(--seta-x, 50%) - 7px); bottom: -8px; background: #1a1024; }
.tut-etiqueta[data-lado="baixo"]::after { left: calc(var(--seta-x, 50%) - 7px); top: -8px; transform: rotate(225deg); background: #3a2748; }
.tut-etiqueta[data-lado="direita"]::after { top: calc(var(--seta-y, 50%) - 7px); left: -8px; transform: rotate(135deg); background: #2a1b36; }
.tut-etiqueta[data-lado="esquerda"]::after { top: calc(var(--seta-y, 50%) - 7px); right: -8px; transform: rotate(-45deg); background: #2a1b36; }
@media (max-width: 380px) { .tut-etiqueta { font-size: 14px; gap: 6px; padding: 5px 8px; } .tut-gesto { width: 28px; height: 28px; } }
@media (prefers-reduced-motion: reduce) { .tut-anel, .tut-casa { animation: none; } .tut-etiqueta.entra { animation: none; } }
/* 3.2.0: a frase do tutorial nunca vaza da caixa de dica (a letra diminui para caber; ver caberDica em main.js) */
#dica { overflow: hidden; }