/* Soma de Ideias v3 — interface no estilo Pip: painéis escuros translúcidos, borda dourada de 2 px,
   fonte Pixelify Sans (OFL, vendor/fonts). O jogo é um canvas 2D em tela cheia; o HUD fica ao lado. */
@font-face { font-family: 'Pixelify Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('./vendor/fonts/PixelifySans.ttf') format('truetype'); }

:root {
  --ink: #0b0d24;
  --panel-top: rgba(30, 36, 82, 0.9);
  --panel-bot: rgba(13, 15, 40, 0.9);
  --trim: #ecc978;
  --trim-dim: #9d8450;
  --text: #fff4de;
  --muted: #b8b2dc;
  --glow: #dcff7c;
  --amber: #ffb65c;
  --coral: #ff6f61;
  --font: "Pixelify Sans", "Trebuchet MS", system-ui, sans-serif;
  --item: 26px;
  color-scheme: dark;
}
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; background: var(--ink); color: var(--text); font-family: var(--font);
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  overscroll-behavior: none; touch-action: none;
  /* Pixelify Sans: o peso 700 fecha a abertura do "C" em tamanhos pequenos e a ligadura "fi" vira outro glifo */
  font-weight: 400; font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0;
}
b, strong, h2, kbd, button { font-weight: 400; }
[hidden] { display: none !important; }
.px { image-rendering: pixelated; image-rendering: crisp-edges; }
#palco { position: fixed; inset: 0; display: block; touch-action: none; cursor: crosshair; }

.painel {
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bot));
  border: 2px solid var(--trim);
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(6, 6, 20, 0.85), inset 0 0 0 2px rgba(255, 255, 255, 0.05), 0 8px 22px rgba(0, 0, 0, 0.45);
}
.rotulo { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ---------- HUD (posição e tamanho vêm do layout, em JS) ---------- */
.hud { position: fixed; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; touch-action: none; overflow: hidden; }
.hud-botoes { display: flex; gap: 8px; justify-content: flex-end; }
.bt-icone {
  width: 48px; height: 48px; padding: 0; display: grid; place-items: center; cursor: pointer; color: var(--text);
  border: 2px solid var(--trim); border-radius: 4px; background: linear-gradient(180deg, var(--panel-top), var(--panel-bot));
  box-shadow: 0 0 0 2px rgba(6, 6, 20, 0.85), 0 4px 12px rgba(0, 0, 0, 0.4);
}
.bt-icone svg { width: 24px; height: 24px; }
.bt-icone:hover { border-color: #fff0b8; }
.bt-icone .som-x { display: none; }
.bt-icone.mudo .som-x { display: inline; }
.bt-icone.mudo .som-onda { display: none; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--glow); outline-offset: 3px; }

.placar { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; }
.valor { display: flex; flex-direction: column; min-width: 0; }
.valor strong { font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--glow); text-shadow: 0 0 8px rgba(220, 255, 120, 0.55); }
.valor.recorde { text-align: right; }
.valor.recorde strong { color: #ffd76a; text-shadow: 0 0 8px rgba(255, 200, 80, 0.55); font-size: 22px; }
.valor strong.bump { animation: pop 0.3s ease-out; }

.proxima { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 10px; padding: 8px 12px; }
.proxima .rotulo { grid-column: 1 / -1; }
.proxima img { width: 48px; height: 48px; display: block; }
.ciclo li img, .colecao li img, .fim-dados img { display: block; }
.proxima b { font-size: 18px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proxima, .placar, .ciclo-painel { min-width: 0; }

.ciclo-painel { padding: 8px 10px; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.ciclo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ciclo li { display: flex; align-items: center; gap: 8px; height: var(--item); font-size: calc(var(--item) * 0.55); color: var(--muted); opacity: 0.45; border-radius: 3px; padding: 0 4px; }
.ciclo li img { width: calc(var(--item) - 4px); height: calc(var(--item) - 4px); filter: grayscale(1) brightness(0.55); }
.ciclo li.visto { opacity: 1; color: var(--text); }
.ciclo li.visto img { filter: none; }
.ciclo li.agora { background: rgba(236, 201, 120, 0.2); box-shadow: inset 0 0 0 2px var(--trim); color: #fff; }
.ciclo li .nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dica { font-size: 16px; line-height: 1.3; padding: 10px 12px; }
.fala { position: fixed; box-sizing: border-box; display: flex; align-items: center; pointer-events: none; }
.fala::after { content: ""; position: absolute; left: 50%; bottom: -12px; border-style: solid; border-width: 10px 8px 0 8px; border-color: var(--trim) transparent transparent transparent; }
.dica-hud { font-size: 14px; }

/* retrato e paisagem baixa: HUD compacto em grade */
.hud[data-modo="retrato"], .hud[data-modo="baixa"] {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "placar placar" "proxima botoes" "ciclo ciclo"; align-content: start; gap: 8px;
}
.hud[data-modo="retrato"] .placar, .hud[data-modo="baixa"] .placar { grid-area: placar; padding: 6px 10px; }
.hud[data-modo="retrato"] .proxima, .hud[data-modo="baixa"] .proxima { grid-area: proxima; padding: 4px 8px; column-gap: 8px; }
.hud[data-modo="retrato"] .proxima img, .hud[data-modo="baixa"] .proxima img { width: 36px; height: 36px; }
.hud[data-modo="retrato"] .proxima b, .hud[data-modo="baixa"] .proxima b { font-size: 15px; }
.hud[data-modo="retrato"] .hud-botoes, .hud[data-modo="baixa"] .hud-botoes { grid-area: botoes; align-self: center; }
.hud[data-modo="retrato"] .ciclo-painel, .hud[data-modo="baixa"] .ciclo-painel, .hud .dica-hud { grid-area: ciclo; }
.hud[data-modo="retrato"] .ciclo, .hud[data-modo="baixa"] .ciclo { display: grid; grid-template-columns: repeat(auto-fill, var(--item)); gap: 3px; }
.hud[data-modo="retrato"] .ciclo li, .hud[data-modo="baixa"] .ciclo li { padding: 0; justify-content: center; width: var(--item); }
.hud[data-modo="retrato"] .ciclo li .nome, .hud[data-modo="baixa"] .ciclo li .nome { display: none; }
.hud[data-modo="retrato"] .ciclo li img, .hud[data-modo="baixa"] .ciclo li img { width: calc(var(--item) - 2px); height: calc(var(--item) - 2px); }
/* retrato: duas linhas — [placar | botões] e [ciclo | próxima] — para caber em faixas baixas (360×640, 320×568) */
.hud[data-modo="retrato"] { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "placar botoes" "ciclo proxima"; gap: 6px; }
.hud[data-modo="retrato"] .placar { align-items: center; }
.hud[data-modo="retrato"] .proxima { grid-template-columns: auto; justify-items: center; align-content: center; padding: 4px 6px; row-gap: 2px; }
.hud[data-modo="retrato"] .proxima b { display: none; }
.hud[data-modo="retrato"] .proxima .rotulo { font-size: 11px; }
.hud[data-modo="retrato"] .ciclo-painel { padding: 6px 8px; }
.hud[data-modo="retrato"] .ciclo-painel > .rotulo { font-size: 11px; }
.hud[data-modo="retrato"] .dica-hud { font-size: 13px; padding: 6px 8px; align-self: stretch; }
.hud.com-dica .ciclo-painel { display: none; }
.hud.compacto .rotulo { font-size: 11px; }
.hud.compacto .valor strong { font-size: 22px; }
.hud.compacto .valor.recorde strong { font-size: 17px; }
.hud.compacto .ciclo-painel > .rotulo { display: none; }
.hud.minimo .proxima .rotulo, .hud.minimo .proxima b { display: none; }
.hud.minimo .proxima { grid-template-columns: auto; }
.hud.minimo .placar { padding: 4px 8px; }

/* ---------- telas ---------- */
.tela { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(11, 13, 36, 0.5); padding: 8px; box-sizing: border-box; z-index: 5; }
.cartao { box-sizing: border-box; width: min(460px, 100%); max-height: 100%; overflow: auto; padding: 22px 24px; text-align: center; }
.sobretitulo { margin: 0 0 4px; color: var(--amber); font-size: 15px; letter-spacing: 0.04em; }
h1 { margin: 0; font-size: clamp(34px, 7vw, 54px); line-height: 1; color: #fff4de; text-shadow: 0 3px 0 #0b0d24, 0 0 18px rgba(255, 190, 110, 0.55); }
h2 { margin: 0 0 10px; font-size: 30px; color: #fff4de; }
.lema { margin: 10px 0 16px; color: var(--muted); font-size: 16px; line-height: 1.35; }
.acoes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.acoes.coluna { flex-direction: column; align-items: stretch; }
.bt {
  min-height: 48px; min-width: 120px; padding: 8px 18px; cursor: pointer; font-family: var(--font); font-size: 18px; font-weight: 400; color: var(--text);
  background: linear-gradient(180deg, #2c3478, #171a46); border: 2px solid var(--trim); border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(6, 6, 20, 0.85), inset 0 -3px 0 rgba(0, 0, 0, 0.3);
}
.bt:hover { border-color: #fff0b8; }
.bt-principal { color: #2a1a08; background: linear-gradient(180deg, #ffe7a0, #e8b95a); border-color: #fff4c8; box-shadow: 0 0 0 2px rgba(6, 6, 20, 0.85), 0 0 0 4px rgba(220, 255, 124, 0.55), inset 0 -3px 0 rgba(120, 70, 10, 0.35); }
.bt:active { transform: translateY(1px); }
.descobertas { margin-top: 16px; }
.descobertas .rotulo { margin: 0 0 6px; }
.colecao { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.colecao li img { width: 30px; height: 30px; filter: grayscale(1) brightness(0.4); opacity: 0.6; }
.colecao li.visto img { filter: none; opacity: 1; }
.recorde-titulo { margin: 12px 0 0; color: var(--muted); }
.recorde-titulo b { color: #ffd76a; }
kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box; font-family: var(--font);
  font-size: 13px; font-weight: 700; color: var(--ink); background: #f4ecd8; border-radius: 4px; box-shadow: inset 0 -3px 0 #c8b88e, 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.volume { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 16px; font-size: 16px; }
.volume input { width: 180px; height: 44px; accent-color: var(--trim); }
.selo-recorde { display: inline-block; margin: 0 0 8px; padding: 4px 12px; color: #2a1a08; background: #ffd76a; border-radius: 4px; font-weight: 400; animation: pop 0.5s ease-out; }
.fim-dados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.fim-dados > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fim-dados img { width: 56px; height: 56px; }
.fim-dados b { font-size: 16px; }
.fim-dados b.grande { font-size: 30px; color: var(--glow); line-height: 56px; }
.fim-novas { color: var(--amber); font-size: 15px; margin: 6px 0 0; }

.contagem { position: fixed; z-index: 6; transform: translate(-50%, -50%); font-size: 96px; font-weight: 400; color: #fff4de; text-shadow: 0 5px 0 #0b0d24, 0 0 24px rgba(255, 190, 110, 0.8); pointer-events: none; animation: pop 0.4s ease-out; }
.carregando { position: fixed; inset: 0; display: grid; place-items: center; background: var(--ink); color: var(--muted); font-size: 20px; z-index: 10; transition: opacity 0.4s; }
.carregando.saindo { opacity: 0; pointer-events: none; }
.sem-js { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; }

@keyframes pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.contagem { animation: none; }

/* telas pequenas: cartões mais justos (nunca rolagem da página) */
@media (max-height: 520px), (max-width: 380px) {
  .cartao { padding: 12px 14px; }
  h1 { font-size: 32px; }
  h2 { font-size: 22px; margin-bottom: 6px; }
  .lema { margin: 6px 0 8px; font-size: 14px; }
  .acoes { margin-top: 8px; }
  .descobertas { margin-top: 8px; }
  .colecao li img { width: 22px; height: 22px; }
  .recorde-titulo { margin-top: 6px; font-size: 14px; }
  .fim-dados img { width: 40px; height: 40px; }
  .fim-dados b.grande { font-size: 24px; line-height: 40px; }
}
@media (max-height: 420px) and (orientation: landscape) {
  .cartao { width: min(640px, 100%); }
}
@media (prefers-reduced-motion: reduce) { .selo-recorde, .valor strong.bump { animation: none; } }

/* ---------- 3.1.0: guia "Como jogar" (kit da coleção em como-jogar/) nas cores e na fonte do jogo ---------- */
.cj-fundo {
  --cj-painel: #0d0f28; --cj-painel-2: #1e2452; --cj-texto: #fff4de; --cj-suave: #b8b2dc;
  --cj-destaque: #ecc978; --cj-destaque-texto: #2a1a08; --cj-borda: #0b0d24; --cj-fonte: var(--font); --cj-raio: 4px;
  background: rgba(8, 9, 28, 0.78);
}
/* Pixelify Sans em 700 fecha o "C" em tamanhos pequenos (mesma regra do resto do jogo) */
.cj-fundo .cj-painel kbd, .cj-fundo .cj-prox { font-weight: 400; }
.cj-fundo .cj-painel .cj-prox { background: linear-gradient(180deg, #ffe7a0, #e8b95a) !important; }
/* a Monique apresenta o guia: busto recortado das folhas de sprite do jogo, em 1 px CSS por px de arte */
.cj-fundo guia-monique.guia-monique {
  --ox: 4px; --oy: 40px; --tam: 76px;
  display: block; flex: none; width: var(--tam); height: var(--tam); object-fit: none;
  background-image: var(--gm-folha); background-repeat: no-repeat;
  background-size: calc(var(--gm-fw, 84px) * var(--gm-quadros, 4)) auto;
  background-position: calc(-1 * var(--ox)) calc(-1 * var(--oy));
  image-rendering: pixelated; image-rendering: crisp-edges;
  border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(236, 201, 120, 0.55);
  background-color: rgba(30, 36, 82, 0.9);
  animation: gm-quadros var(--gm-dur, 1s) steps(var(--gm-quadros, 4)) infinite;
}
@keyframes gm-quadros {
  from { background-position-x: calc(-1 * var(--ox)); }
  to { background-position-x: calc(-1 * var(--ox) - var(--gm-quadros, 4) * var(--gm-fw, 84px)); }
}
@media (max-width: 600px), (max-height: 520px) {
  .cj-fundo guia-monique.guia-monique { --ox: 18px; --oy: 44px; --tam: 48px; }
}
/* tela estreita: linhas de controle um pouco mais baixas, para o cartão de controles caber sem rolagem em 390×844 */
@media (max-width: 600px) {
  .cj-fundo .cj-clipe video { max-height: min(40dvh, 308px); }
  .cj-fundo .cj-lista { gap: 3px; }
  .cj-fundo .cj-lista li { min-height: 36px; }
  .cj-fundo .cj-gesto svg { width: 36px; height: 36px; }
}
/* celular baixo (ex.: 360×640): o cartão de controles encolhe o clipe e as linhas para caber sem rolagem */
@media (max-width: 600px) and (max-height: 700px) {
  .cj-fundo .cj-cartao:has(.cj-controles) .cj-clipe video { max-height: 20dvh; }
  .cj-fundo .cj-lista li { min-height: 32px; }
  .cj-fundo .cj-gesto svg { width: 30px; height: 30px; }
  .cj-fundo .cj-painel { gap: 8px; padding-top: 10px; padding-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { .cj-fundo guia-monique.guia-monique { animation: none; } }

/* ---------- 3.1.0: tutorial jogável — marcadores ancorados (não recebem toque nem clique) ---------- */
.tut-alvo, .tut-anel, .tut-faixa { position: fixed; left: 0; top: 0; z-index: 4; pointer-events: none; }
.tut-alvo {
  display: flex; align-items: center; gap: 6px; padding: 5px 9px; white-space: nowrap;
  font-size: 15px; color: var(--text);
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bot));
  border: 2px solid var(--glow); border-radius: 4px; box-shadow: 0 0 0 2px rgba(6, 6, 20, 0.85), 0 0 14px rgba(220, 255, 124, 0.45);
}
.tut-alvo .tut-conteudo { display: flex; align-items: center; gap: 6px; }
.tut-alvo .tut-icones { display: inline-flex; align-items: center; gap: 3px; }
.tut-alvo .tut-icones svg { width: 26px; height: 26px; }
.tut-alvo kbd { min-width: 26px; height: 26px; font-size: 14px; font-weight: 400; }
/* seta do marcador apontando para a garra */
.tut-alvo::before { content: ""; position: absolute; top: 50%; left: -12px; transform: translateY(-50%); border-style: solid; border-width: 8px 10px 8px 0; border-color: transparent var(--glow) transparent transparent; }
.tut-alvo.a-esquerda::before { left: auto; right: -12px; border-width: 8px 0 8px 10px; border-color: transparent transparent transparent var(--glow); }
.tut-anel {
  box-sizing: border-box; border-radius: 50%; border: 3px dashed var(--glow);
  box-shadow: 0 0 0 2px rgba(6, 6, 20, 0.85), 0 0 16px rgba(220, 255, 124, 0.6); animation: tut-pulso 1s ease-in-out infinite;
}
.tut-anel span, .tut-faixa span {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -4px); padding: 1px 6px; white-space: nowrap;
  font-size: 14px; color: #1a1606; background: var(--glow); border-radius: 3px; box-shadow: 0 0 0 2px rgba(6, 6, 20, 0.85);
}
.tut-faixa { box-sizing: border-box; height: 18px; border: 3px solid var(--glow); border-radius: 3px; box-shadow: 0 0 0 2px rgba(6, 6, 20, 0.85), 0 0 16px rgba(220, 255, 124, 0.6); animation: tut-pulso 1s ease-in-out infinite; }
/* rótulo da fita acima dela, no canto esquerdo: embaixo e no meio ficam os textos do jogo ("Nova ideia", cadeias) */
.tut-faixa span { left: 0; transform: translate(0, -5px); }
.tut-faixa.rotulo-direita span { left: auto; right: 0; }
@keyframes tut-pulso { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .tut-anel, .tut-faixa { animation: none; } }