@font-face { font-family: 'Pixelify Sans'; src: url('vendor/fonts/PixelifySans.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'DotGothic16'; src: url('vendor/fonts/DotGothic16-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
[hidden] { display: none !important; }
:root {
  --fundo: #1e130e; --painel: #2e1d14; --painel2: #3e281c; --borda: #c8884e; --texto: #fbefd8; --suave: #d8c0a0;
  --verde: #7a8a44; --verde2: #5d6c30; --vermelho: #e0424a; --ouro: #ffd27a;
  --hud: 52px; --ctl: 0px;
  font-family: 'DotGothic16', 'Pixelify Sans', 'Trebuchet MS', system-ui, sans-serif; /* o C da Pixelify parece O */
  font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'clig' 0, 'dlig' 0; /* a ligadura fi da fonte parece um A */
}
button, input { font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'clig' 0; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fundo); color: var(--texto); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
#app { position: fixed; inset: 0; }
body.toque { --ctl: 150px; }
#palco { position: absolute; left: 0; right: 0; top: var(--hud); bottom: var(--ctl); }
body[data-estado="menu"] #palco, body[data-estado="carregando"] #palco { top: 0; bottom: 0; }
.cena-canvas { display: block; image-rendering: pixelated; }
#baloes { position: absolute; left: 0; right: 0; top: var(--hud); bottom: var(--ctl); pointer-events: none; overflow: hidden; }
#vinheta { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(10, 4, 2, 0.55) 100%); }
#rec-borda { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 4px rgba(255, 50, 50, 0.85), inset 0 0 40px rgba(255, 40, 40, 0.35); opacity: 0; transition: opacity 0.2s; }
body.gravando #rec-borda { opacity: 1; animation: pisca 0.5s steps(2) infinite; }
@keyframes pisca { 50% { opacity: 0.55; } }

/* HUD */
#hud { position: absolute; top: 0; left: 0; right: 0; height: var(--hud); display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: linear-gradient(#2e1d14, #24160f); border-bottom: 3px solid #5a3a24; z-index: 5; }
.hud-bloco { background: var(--painel2); border: 2px solid #6a4a30; border-radius: 6px; padding: 4px 10px; font-size: 17px; white-space: nowrap; display: flex; align-items: center; gap: 6px; height: 38px; }
.hud-espaco { flex: 1; }
.botao-hud { border-color: var(--borda); }
.botao-hud:hover, .botao-hud:focus-visible { background: #5a3a24; outline: none; }
#hud-vidas img { width: 24px; height: 24px; image-rendering: pixelated; }
#hud-vidas .perdida { opacity: 0.22; filter: grayscale(1); }
#hud-xicara img, #ctl-xicara-img { width: 28px; height: 28px; image-rendering: pixelated; }
#hud-album img { width: 22px; height: 22px; image-rendering: pixelated; }
.rec { background: #5a1414; border-color: #ff5050; color: #ffd0d0; animation: pisca 0.5s steps(2) infinite; }
#hud-pontos::before { content: 'Pontos '; color: var(--suave); font-size: 13px; }
#hud-album.pulsa { animation: pulsa 0.5s; }
@keyframes pulsa { 40% { transform: scale(1.25); background: var(--verde2); } }

/* balões de jargão */
.balao { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); background: #fffaf0; color: #2a1a14; border: 2px solid #3a2a2a; border-radius: 8px; padding: 3px 7px; font-size: 13px; line-height: 1.1;
  display: flex; align-items: center; gap: 5px; white-space: nowrap; box-shadow: 0 2px 0 #3a2a2a; transition: background 0.2s; will-change: transform; }
.balao::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -5px; border: 5px solid transparent; border-top: 5px solid #3a2a2a; }
.balao img { width: 20px; height: 20px; image-rendering: pixelated; }
.balao .sim { font-size: 11px; font-weight: 700; color: #6a3a1a; }
.balao.simples { background: #eaf6d8; border-color: #3e6a2a; box-shadow: 0 2px 0 #3e6a2a; animation: vira 0.45s ease-out; }
.balao.simples img { width: 32px; height: 32px; }
.balao.simples .txt { font-weight: 700; color: #2e5a1e; }
.balao.simples .txt::before { content: '✓ '; }
.balao.erro { animation: treme 0.35s; background: #ffe0dc; }
.balao .quer { display: flex; align-items: center; gap: 1px; border-right: 1px dashed #b89a80; padding-right: 4px; }
@keyframes vira { 0% { scale: 0.4; filter: brightness(2); } 60% { scale: 1.15; } 100% { scale: 1; filter: none; } }
@keyframes treme { 25% { margin-left: -4px; } 75% { margin-left: 4px; } }
.balao.some { opacity: 0; transition: opacity 0.4s; }
.voa { position: absolute; width: 32px; height: 32px; image-rendering: pixelated; z-index: 9; pointer-events: none; transition: transform 0.8s cubic-bezier(.5,-0.3,.7,1), opacity 0.8s; }
.pontinhos { position: absolute; transform: translate(-50%, -100%); font-weight: 700; font-size: 15px; color: var(--ouro); text-shadow: 0 2px 0 #3a1a0a; pointer-events: none; animation: sobe 0.9s ease-out forwards; }
@keyframes sobe { to { transform: translate(-50%, -190%); opacity: 0; } }

/* dicas e avisos */
#dica { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--hud) + 8px); max-width: min(640px, 94vw); background: rgba(46, 29, 20, 0.94); border: 3px solid var(--verde); border-radius: 8px; padding: 8px 14px; font-size: 17px; text-align: center; z-index: 6; }
#aviso { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); background: #5a1414; border: 3px solid #ff7070; border-radius: 8px; padding: 10px 16px; font-size: 18px; z-index: 7; text-align: center; max-width: 90vw; }
#faixa { position: absolute; left: 0; right: 0; top: 38%; text-align: center; font-size: clamp(22px, 5vw, 40px); background: linear-gradient(90deg, transparent, rgba(30, 19, 14, 0.92) 20%, rgba(30, 19, 14, 0.92) 80%, transparent); padding: 14px; z-index: 7; color: var(--ouro); text-shadow: 0 3px 0 #3a1a0a; }
#faixa small { display: block; font-size: 0.5em; color: var(--texto); }

/* controles de toque */
#controles { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ctl); display: flex; justify-content: space-between; align-items: center; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(#24160f, #1a100b); border-top: 3px solid #5a3a24; z-index: 5; gap: 10px; }
#controles .grupo { display: flex; gap: 8px; height: 100%; align-items: stretch; }
.ctl { min-width: 64px; border: 3px solid var(--borda); background: var(--painel2); border-radius: 12px; font-size: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; touch-action: none; position: relative; overflow: hidden; }
.ctl:active, .ctl.ativo { background: #6a4428; transform: translateY(2px); }
.ctl-trocar { min-width: 86px; gap: 1px; padding: 2px 4px; }
.ctl-trocar span { font-size: 12px; letter-spacing: 1px; color: var(--suave); }
.ctl-trocar b { font-size: 14px; font-weight: 700; color: var(--texto); white-space: nowrap; }
.ctl-trocar img { width: 36px !important; height: 36px !important; }
.ctl-trocar.destaque { animation: destaque 0.6s ease-in-out 5 alternate; border-color: var(--ouro); }
@keyframes destaque { to { background: #7a5a2a; transform: scale(1.06); } }
.ctl-trocar[disabled] { opacity: 0.35; }
.ctl-servir { min-width: 112px; background: var(--verde2); border-color: #b8c870; }
.ctl-servir .rot { font-size: 24px; position: relative; }
.ctl-servir small { font-size: 11px; position: relative; opacity: 0.85; }
.ctl-servir .enche { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; background: #8a5a2a; }
body:not(.toque) #controles { display: none !important; }

/* telas */
.tela { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10; background: rgba(20, 10, 6, 0.55); overflow-y: auto; touch-action: pan-y; }
#tela-menu { background: linear-gradient(rgba(20, 10, 6, 0.15), rgba(20, 10, 6, 0.72)); }
.painel { background: var(--painel); border: 4px solid var(--borda); border-radius: 12px; padding: 18px 22px; max-width: 560px; width: 100%; box-shadow: 0 6px 0 #140a06, 0 0 0 4px #140a06; max-height: calc(100% - 8px); overflow-y: auto; }
.painel.largo { max-width: 860px; }
.painel.menu { display: flex; gap: 18px; align-items: center; max-width: 720px; }
.retrato { width: 128px; height: 192px; image-rendering: pixelated; flex: none; }
h1 { margin: 0 0 6px; font-size: 40px; color: var(--ouro); text-shadow: 0 3px 0 #6a2a0a; line-height: 1; }
h2 { margin: 0 0 10px; color: var(--ouro); font-size: 28px; }
h3 { margin: 14px 0 6px; font-size: 18px; color: var(--suave); }
.sub { margin: 0 0 12px; font-size: 17px; }
.aviso-save { font-size: 14px; color: #ffd0a0; background: #4a2a14; border: 2px dashed #c8884e; border-radius: 8px; padding: 6px 10px; }
.ficcao, .pequeno { font-size: 13px; color: var(--suave); line-height: 1.35; }
.botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.botoes button, .lista-dias button { background: var(--painel2); border: 3px solid #8a5a34; border-radius: 8px; padding: 10px 14px; font-size: 18px; min-height: 48px; }
.botoes button.primario { background: var(--verde2); border-color: #b8c870; }
.botoes button:hover, .botoes button:focus-visible, .lista-dias button:hover, .lista-dias button:focus-visible { border-color: var(--ouro); outline: none; }
button[disabled] { opacity: 0.45; cursor: not-allowed; }
.lista-dias { display: grid; gap: 8px; }
.lista-dias button { text-align: left; display: flex; justify-content: space-between; gap: 8px; }
.lista-dias small { color: var(--suave); }
.estrelas { font-size: 34px; color: var(--ouro); letter-spacing: 6px; }
.estrelas .apagada { color: #5a4030; }
.numeros { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; font-size: 17px; }
.numeros b { color: var(--ouro); text-align: right; }
.termos-mini { display: flex; flex-wrap: wrap; gap: 6px; }
.termos-mini div { background: #eaf6d8; color: #2e3a1e; border-radius: 6px; padding: 3px 7px; display: flex; gap: 5px; align-items: center; font-size: 13px; }
.termos-mini img { width: 24px; height: 24px; image-rendering: pixelated; }
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.album .carta { background: #f6eedc; color: #2a1a14; border-radius: 8px; padding: 8px; border: 2px solid #8a5a34; font-size: 13px; }
.album .carta img { width: 48px; height: 48px; image-rendering: pixelated; float: left; margin-right: 8px; }
.album .carta b { display: block; font-size: 15px; }
.album .carta .s { color: #3e6a2a; font-weight: 700; }
.album .carta.bloq { background: #4a3226; color: #b89a80; border-style: dashed; }
fieldset { border: 2px solid #6a4a30; border-radius: 8px; margin: 0 0 10px; }
legend { color: var(--suave); padding: 0 6px; }
.seg { display: flex; gap: 6px; }
.seg button { flex: 1; background: var(--painel2); border: 3px solid #6a4a30; border-radius: 8px; padding: 8px; min-height: 44px; }
.seg button.sel { border-color: var(--ouro); background: var(--verde2); }
.linha { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 16px; }
input[type=range] { flex: 1; accent-color: var(--verde); height: 28px; }
input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--verde); }

@media (max-width: 700px) {
  :root { --hud: 46px; }
  .hud-bloco { font-size: 14px; padding: 3px 6px; height: 34px; }
  #hud-pontos::before { content: ''; }
  #hud-dia { display: none; }
  #hud-xicara-nome { display: none; }
  .painel.menu { flex-direction: column; text-align: center; }
  .retrato { width: 80px; height: 120px; }
  h1 { font-size: 32px; }
  .balao { font-size: 10px; padding: 2px 4px; gap: 3px; }
  .balao img { width: 14px; height: 14px; }
  .balao.simples img { width: 22px; height: 22px; }
  .balao .sim { font-size: 9px; }
  #dica { font-size: 14px; padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) { .balao.simples, .voa, #hud-album.pulsa, .rec, body.gravando #rec-borda { animation: none; transition: none; } }
body.capa #baloes, body.capa #hud, body.capa #controles, body.capa #rec-borda { display: none !important; }
body[data-estado="capa"] #palco { top: 0; bottom: 0; }

/* aviso de perigo: convidado perto do fim do balcão */
.balao.perigo { border-color: #d8322a; box-shadow: 0 2px 0 #d8322a, 0 0 0 2px rgba(216, 50, 42, 0.35); animation: perigo 0.5s steps(2) infinite; }
@keyframes perigo { 50% { background: #ffd8d0; } }
/* rodada bônus */
.bonus-palco { position: relative; height: 210px; margin: 10px 0; background: linear-gradient(#5a3a24 0 70%, #3e2616 70%); border-radius: 10px; border: 3px solid #8a5a34; overflow: hidden; }
.bonus-xic { position: absolute; bottom: 24%; width: 96px; height: 96px; margin-left: -48px; transition-property: left, transform; transition-timing-function: ease-in-out; cursor: pointer; background: none; border: 0; padding: 0; }
.bonus-xic img { width: 96px; height: 96px; image-rendering: pixelated; transform: scaleY(-1); }
.bonus-xic.levantada { transform: translateY(-46px); }
.bonus-xic.sel img { filter: drop-shadow(0 0 0 #ffd27a) drop-shadow(0 4px 0 #ffd27a); }
.bonus-xic:focus-visible { outline: 3px solid var(--ouro); }
.bonus-coracao { position: absolute; bottom: 26%; width: 48px; height: 48px; margin-left: -24px; image-rendering: pixelated; }
.bonus-res { font-size: 20px; min-height: 1.3em; text-align: center; margin: 4px 0; }
body[data-estado="bonus"] .tela:not(#tela-bonus) { display: none; }
@media (max-width: 700px) { .bonus-xic, .bonus-xic img { width: 72px; height: 72px; } .bonus-xic { margin-left: -36px; } .balao .quer img { width: 18px; height: 18px; } }
.titulo-img { display: block; width: min(100%, 372px); height: auto; image-rendering: pixelated; margin: 0 auto 4px 0; }
@media (max-width: 700px) { .titulo-img { margin: 0 auto 4px; width: min(100%, 300px); } }

/* 1.2.0 — tutorial: pedido do ensaio ancorado no alvo, com o controle do aparelho em uso */
#tut-camada { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
#dica { pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 10px; line-height: 1.25; }
body.ensaio #dica:not(.ancorada) { top: calc(var(--hud) + 62px); }
#dica.ancorada { transform: none; max-width: min(360px, 80vw); text-align: left; font-size: 16px; box-shadow: 0 4px 0 #140a06; }
#dica.ancorada::after { content: ''; position: absolute; left: var(--seta-x, 50%); bottom: -14px; margin-left: -11px; border: 11px solid transparent; border-top: 12px solid var(--verde); border-bottom: 0; }
#dica.ancorada.abaixo::after { bottom: auto; top: -14px; border-top: 0; border-bottom: 12px solid var(--verde); }
.tut-ctl { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; flex: none; color: var(--ouro); }
.tut-ctl > span, .tut-ctl { white-space: nowrap; }
.tut-ctl kbd { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 7px; box-sizing: border-box; font: 700 15px/1 'DotGothic16', 'Pixelify Sans', monospace; font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'clig' 0; color: #2a1a0a; background: var(--ouro); border: 2px solid #140a06; border-bottom-width: 4px; border-radius: 6px; margin: 0 1px; }
.tut-ou { color: var(--suave); font-size: 12px; margin: 0 2px; }
.tut-ctl small { font-size: 11px; color: var(--suave); letter-spacing: 0.5px; }
.tut-anel { position: absolute; left: 0; top: 0; border: 3px dashed var(--ouro); border-radius: 50%; box-shadow: 0 0 0 3px rgba(20, 10, 6, 0.55), inset 0 0 0 2px rgba(20, 10, 6, 0.45); animation: anel 0.8s ease-in-out infinite alternate; pointer-events: none; }
@keyframes anel { to { scale: 1.12; } }
.ctl.tut-brilho { border-color: var(--ouro); box-shadow: 0 0 0 3px var(--ouro), 0 0 18px rgba(255, 210, 122, 0.7); animation: brilho 0.7s ease-in-out infinite alternate; }
@keyframes brilho { to { box-shadow: 0 0 0 5px var(--ouro), 0 0 28px rgba(255, 210, 122, 0.95); } }
.pular-ensaio { position: absolute; left: 8px; top: calc(var(--hud) + 8px); z-index: 6; min-height: 44px; padding: 6px 12px; font-size: 15px; background: rgba(46, 29, 20, 0.92); border: 2px solid var(--borda); border-radius: 8px; }
.pular-ensaio:hover, .pular-ensaio:focus-visible { border-color: var(--ouro); outline: none; }
@media (max-width: 700px) { #dica.ancorada { font-size: 14px; } .tut-ctl svg { width: 26px; height: 26px; } }
@media (prefers-reduced-motion: reduce) { .tut-anel, .ctl.tut-brilho { animation: none; } }
/* guia "Como jogar" (kit da coleção) nas cores e fontes do café */
.cj-fundo { --cj-painel: #2e1d14; --cj-painel-2: #3e281c; --cj-texto: #fbefd8; --cj-suave: #d8c0a0; --cj-destaque: #ffd27a; --cj-destaque-texto: #2a1a0a; --cj-borda: #140a06; --cj-fonte: 'DotGothic16', 'Pixelify Sans', 'Trebuchet MS', system-ui, sans-serif; --cj-raio: 12px; }
.cj-anfitria { width: 40px; height: 60px; }
.tut-teclas { display: inline-flex; align-items: center; }
#baloes { z-index: 4; } /* balões de jargão ficam sob o pedido do ensaio (z 6) e os avisos */
/* largura própria (não a sobra à direita do left): o balão e o aviso não afinam perto da borda */
#dica, #aviso { width: max-content; }
#aviso { max-width: min(560px, 90vw); }
/* celular em pé: o cartão de controles (até 6 linhas) cabe sem rolagem com o clipe um pouco menor */
@media (max-width: 700px) and (orientation: portrait) {
  .cj-cartao:has(.cj-controles) .cj-clipe { max-height: 25dvh; align-self: center; }
  .cj-painel .cj-icones { min-width: 76px; }
  .cj-painel .cj-lista { gap: 2px; }
  .cj-painel .cj-lista li { min-height: 34px; }
  .cj-painel .cj-acao { font-size: 0.9rem; line-height: 1.2; }
}
/* celular deitado: controles em duas colunas ao lado de um clipe um pouco menor, sem rolagem */
@media (max-height: 520px) and (orientation: landscape) {
  .cj-cartao:has(.cj-controles) { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .cj-cartao:has(.cj-controles) .cj-lista { grid-template-columns: 1fr 1fr; column-gap: 10px; row-gap: 2px; }
  .cj-cartao:has(.cj-controles) .cj-icones { min-width: 0; gap: 2px; flex: none; }
  .cj-cartao:has(.cj-controles) .cj-lista li { gap: 6px; min-height: 30px; }
  .cj-cartao:has(.cj-controles) .cj-acao { font-size: 0.8rem; line-height: 1.15; }
  .cj-cartao:has(.cj-controles) kbd { min-width: 24px; height: 26px; padding: 0 4px; }
  .cj-cartao:has(.cj-controles) .cj-texto { font-size: 0.85rem; }
}