@font-face { font-family: 'Pixelify Sans'; src: url('./vendor/PixelifySans.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }

:root {
  --papel: #f6eedc; --papel-esc: #e2d4b6; --tinta: #2a2026; --tinta-2: #5a4c56;
  --coral: #e2574c; --mar: #2c3874; --mostarda: #e6b547; --verde: #4f9a5d; --painel: rgba(42, 35, 48, 0.94);
  --leve: #58b86a; --cansado: #e6b547; --limite: #e2574c;
  --fonte: 'Pixelify Sans', 'Trebuchet MS', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2a2330; color: var(--papel); font-family: var(--fonte); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; font-variant-ligatures: none; }
#jogo { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; }
.vinheta { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 46%, transparent 60%, rgba(20, 14, 24, 0.42) 100%); }
.vinheta-cansaco { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(30, 6, 14, 0.55) 78%, rgba(12, 2, 6, 0.85) 100%); z-index: 1; }
.vinheta-cansaco.pulsa { animation: pulsa 1.1s ease-in-out infinite; }
@keyframes pulsa { 50% { filter: brightness(1.35); } }
button { font-family: var(--fonte); cursor: pointer; }
[hidden] { display: none !important; }
body.sem-hud #hud, body.sem-hud #controles, body.sem-hud #topo-botoes, body.sem-hud .vinheta-cansaco, body.sem-hud .tela { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.hud-topo { position: absolute; top: 10px; left: 50%; translate: -50% 0; display: flex; gap: 6px; align-items: stretch; background: var(--papel); color: var(--tinta); border: 3px solid var(--tinta); border-radius: 4px; box-shadow: 0 4px 0 rgba(0,0,0,.35); padding: 4px 10px; font-size: 15px; white-space: nowrap; }
.hud-topo > div { display: flex; align-items: center; gap: 5px; padding: 0 6px; border-right: 2px dashed rgba(42,32,38,.25); }
.hud-topo > div:last-child { border-right: none; }
.hud-dia { font-weight: 700; color: var(--mar); }
.hud-relogio b, .hud-feitas b, .hud-pontos b { font-size: 17px; }
.ic-sol, .ic-lua { width: 14px; height: 14px; display: inline-block; border-radius: 50%; }
.ic-sol { background: #f5a623; box-shadow: 0 0 0 2px #ffe08a; }
.ic-lua { background: #cfd6f0; box-shadow: inset -4px -2px 0 #6a70a8; }

.hud-mundo { position: absolute; inset: 0; }
.medidor { position: absolute; left: 0; top: 0; translate: -50% -100%; width: 84px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'nome fila' 'barra barra' 'estado estado'; row-gap: 1px; background: rgba(42, 35, 48, .86); border: 2px solid #120c10; border-radius: 3px; padding: 2px 4px 3px; font-size: 11px; line-height: 1.05; }
.medidor.morador { pointer-events: auto; cursor: pointer; }
.medidor .md-nome { grid-area: nome; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.medidor.eu .md-nome { color: #ffd6c8; }
.medidor .md-fila { grid-area: fila; color: var(--mostarda); font-weight: 700; }
.medidor .md-barra { grid-area: barra; position: relative; height: 8px; background: #1a1418; border: 1px solid #000; overflow: hidden; }
.medidor .md-barra i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--leve); transition: width .25s linear; }
.medidor .md-barra .md-seg { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0,0,0,.55) calc(10% - 1px) 10%); }
.medidor .md-estado { grid-area: estado; font-size: 10px; color: #cfc4b6; }
.medidor[data-estado=cansado] .md-barra i { background: repeating-linear-gradient(-45deg, var(--cansado) 0 4px, #c9922a 4px 8px); }
.medidor[data-estado=limite] .md-barra i, .medidor[data-estado=esgotado] .md-barra i { background: repeating-linear-gradient(-45deg, var(--limite) 0 3px, #8e2a24 3px 6px); }
.medidor[data-estado=limite] .md-estado, .medidor[data-estado=esgotado] .md-estado { color: #ffb0a8; font-weight: 700; }
.medidor[data-estado=limite] .md-estado::before, .medidor[data-estado=esgotado] .md-estado::before { content: '! '; }
.medidor[data-estado=esgotado] { animation: treme .4s steps(2) infinite; }
.medidor.alvo-soltar { border-color: var(--mostarda); box-shadow: 0 0 0 3px rgba(230, 181, 71, .7); scale: 1.12; }
@keyframes treme { 50% { translate: calc(-50% + 1px) -100%; } }

.cabeca { position: absolute; left: 0; top: 0; translate: -50% calc(-100% - 44px); display: flex; flex-direction: column; align-items: center; gap: 1px; }
.cab-icones { display: flex; gap: 2px; padding: 2px 3px; background: rgba(255, 248, 232, .92); border: 2px solid var(--tinta); border-radius: 10px; box-shadow: 0 2px 0 rgba(0,0,0,.3); }
.cab-ic { width: 20px; height: 20px; image-rendering: pixelated; animation: flutua 1.6s ease-in-out infinite; }
@keyframes flutua { 50% { translate: 0 -2px; } }
.cab-texto { font-size: 11px; color: var(--tinta); background: rgba(255, 248, 232, .92); padding: 0 4px; border-radius: 2px; }
.cabeca[data-n='4'] .cab-icones, .cabeca[data-n='5'] .cab-icones, .cabeca[data-n='6'] .cab-icones { border-color: var(--coral); animation: treme2 .5s steps(2) infinite; }
@keyframes treme2 { 50% { translate: 1px 0; } }

.balao-alvo { position: absolute; left: 0; top: 0; translate: -50% -50%; width: 58px; height: 62px; pointer-events: auto; background: transparent; border: 2px dashed transparent; border-radius: 50%; padding: 0; touch-action: none; color: var(--tinta); }
.balao-alvo:hover, .balao-alvo:focus-visible { border-color: rgba(255, 248, 232, .75); outline: none; }
.ba-icone, .ba-seta { display: none; }
.balao-alvo.borda { width: 48px; height: 48px; background: rgba(255, 248, 232, .95); border: 3px solid var(--tinta); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.balao-alvo.borda .ba-icone { display: block; width: 32px; height: 32px; margin: 5px auto 0; image-rendering: pixelated; }
.balao-alvo.borda .ba-seta { display: block; position: absolute; inset: -16px 0 auto 0; margin: auto; width: 14px; text-align: center; font-size: 13px; color: var(--mostarda); text-shadow: 1px 1px 0 #000; transform-origin: 50% 40px; }
.balao-alvo.borda.urgente { border-color: var(--coral); animation: treme2 .5s steps(2) infinite; }
.ba-tempo { position: absolute; left: 50%; bottom: -14px; translate: -50% 0; font-size: 11px; background: rgba(255, 248, 232, .92); border: 1px solid var(--tinta); padding: 0 3px; border-radius: 2px; white-space: nowrap; }
.ba-tempo:empty, .ba-dono:empty { display: none; }
.balao-alvo.urgente .ba-tempo { background: var(--coral); color: #fff; font-weight: 700; }
.balao-alvo.urgente .ba-tempo::before { content: '! '; }
.ba-dono { position: absolute; left: 50%; top: -12px; translate: -50% 0; font-size: 10px; background: var(--verde); color: #fff; border: 1px solid #0f2a14; padding: 0 3px; border-radius: 2px; white-space: nowrap; }

.dica-acao { position: absolute; left: 0; top: 0; translate: -50% 8px; background: rgba(42, 35, 48, .9); border: 2px solid var(--mostarda); padding: 2px 8px; font-size: 13px; white-space: nowrap; border-radius: 3px; }
.seta-tutorial { position: absolute; left: 0; top: 0; translate: -50% -100%; color: var(--mostarda); font-size: 28px; text-shadow: 2px 2px 0 #111; animation: seta .8s ease-in-out infinite; }
@keyframes seta { 50% { margin-top: -8px; } }
.tutorial-caixa { position: absolute; left: 12px; bottom: 16px; width: min(380px, calc(100vw - 24px)); background: var(--painel); border: 3px solid var(--mostarda); padding: 10px 12px; border-radius: 4px; box-shadow: 0 4px 0 rgba(0,0,0,.4); pointer-events: auto; }
.tutorial-caixa.novo { animation: entra .3s ease-out; }
.tut-passo { font-size: 11px; color: var(--mostarda); letter-spacing: 1px; }
.tut-texto { font-size: 16px; margin: 4px 0 6px; line-height: 1.3; }
.tut-texto b { color: #ffe0ad; }
.tut-pular { font-size: 12px; background: transparent; color: #cfc4b6; border: 1px solid #6a5a66; padding: 2px 8px; border-radius: 2px; }
.avisos { position: absolute; left: 50%; top: 58px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.aviso { background: var(--painel); border: 2px solid #5a4c56; padding: 5px 12px; font-size: 14px; border-radius: 3px; animation: entra .2s ease-out; transition: opacity .35s; max-width: 92vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aviso.ruim { border-color: var(--coral); } .aviso.bom { border-color: var(--leve); } .aviso.ouro { border-color: var(--mostarda); color: #ffe0ad; } .aviso.info { border-color: #7fb6d8; }
.aviso.saindo { opacity: 0; }
@keyframes entra { from { translate: 0 8px; opacity: 0; } }
.fantasma { position: fixed; left: 0; top: 0; width: 40px; height: 40px; image-rendering: pixelated; pointer-events: none; z-index: 20; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.4)); }
.voo { position: fixed; width: 28px; height: 28px; margin: -14px 0 0 -14px; image-rendering: pixelated; pointer-events: none; z-index: 20; transition: transform .6s cubic-bezier(.3,.7,.4,1), opacity .6s; }

.equipe { position: absolute; left: 10px; top: 62px; display: flex; flex-direction: column; gap: 5px; }
.medidor.chip { position: relative; translate: none; width: 104px; font-size: 12px; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.medidor.chip .md-estado { font-size: 11px; }
.medidor.chip[data-estado=ausente] { opacity: .5; }
.medidor.chip.alvo-soltar { scale: 1.08; }
.medidor.chip:focus-visible { outline: 3px dashed #7fb6d8; outline-offset: 2px; }

/* ---------- botões ---------- */
#topo-botoes { position: fixed; left: 10px; top: 10px; display: flex; gap: 8px; z-index: 5; }
.bt-icone { width: 42px; height: 42px; border: 2px solid var(--papel); background: var(--painel); color: var(--papel); border-radius: 50%; display: grid; place-items: center; box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.bt-icone svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; }
.bt-icone.mudo .onda { display: none; }
.bt-icone.mudo { color: #8a8fa6; border-color: #8a8fa6; }
#controles { position: fixed; right: 12px; bottom: 14px; display: flex; gap: 10px; align-items: flex-end; z-index: 4; }
.bt-acao { min-width: 78px; height: 58px; border: 3px solid var(--papel); border-radius: 12px; background: rgba(42, 35, 48, .85); color: var(--papel); font-size: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 4px 0 rgba(0,0,0,.45); touch-action: none; }
.bt-acao kbd { font-family: var(--fonte); font-size: 10px; color: #cfc4b6; border: 1px solid #6a5a66; padding: 0 4px; border-radius: 2px; }
.bt-acao.grande { min-width: 100px; height: 78px; font-size: 18px; border-color: var(--mostarda); }
.bt-acao.grande.pronto { background: rgba(120, 88, 20, .92); box-shadow: 0 4px 0 rgba(0,0,0,.45), 0 0 14px rgba(255, 210, 120, .55); }
.bt-acao.ativo { translate: 0 3px; box-shadow: 0 1px 0 rgba(0,0,0,.45); }
.bt-acao.desabilitado { opacity: .45; }
body.toque .bt-acao kbd { display: none; }
body.toque .bt-acao { width: 80px; height: 80px; border-radius: 50%; }
body.toque .bt-acao.grande { width: 104px; height: 104px; }
.motor-joy-base { position: fixed; width: 112px; height: 112px; margin: -56px 0 0 -56px; border: 3px solid rgba(246, 238, 220, .55); border-radius: 50%; background: rgba(42, 35, 48, .35); pointer-events: none; z-index: 6; }
.motor-joy-pino { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(230, 181, 71, .9); border: 3px solid #1b1a20; }

/* ---------- telas ---------- */
.tela { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(20, 14, 24, .5); z-index: 10; padding: 16px; }
#tela-abertura { background: linear-gradient(180deg, rgba(20,14,24,0), rgba(20,14,24,.25) 50%, rgba(20,14,24,.7)); align-items: end; }
.caixa { background: var(--painel); border: 3px solid var(--papel); box-shadow: 0 6px 0 rgba(0,0,0,.5); padding: 18px 20px; max-width: 540px; width: 100%; border-radius: 4px; text-align: center; max-height: calc(100dvh - 32px); overflow: auto; }
.caixa.abertura { max-width: 620px; margin-bottom: 3vh; }
.caixa.resultado { max-width: 620px; }
.caixa h1 { font-size: clamp(34px, 8vw, 58px); margin: 4px 0; color: var(--mostarda); text-shadow: 4px 4px 0 #2a1a08; letter-spacing: 1px; }
.caixa h2 { font-size: 26px; margin: 0 0 8px; color: var(--mostarda); }
.caixa h3 { font-size: 16px; margin: 12px 0 4px; color: #ffe0ad; }
.selo { font-size: 12px; letter-spacing: 1px; color: #cfc4b6; margin: 0; }
.sub { font-size: 16px; color: #efe4d0; line-height: 1.35; }
.botoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
.botoes.coluna { flex-direction: column; align-items: stretch; }
.bt { font-size: 19px; padding: 10px 22px; border: 3px solid #1b1208; background: var(--mostarda); color: #1b1208; border-radius: 4px; box-shadow: 0 4px 0 #1b1208; }
.bt.sec { background: #ece2cc; }
.bt:active { translate: 0 3px; box-shadow: 0 1px 0 #1b1208; }
.bt:focus-visible, .bt-icone:focus-visible, .bt-acao:focus-visible, .lista-dias button:focus-visible, .grupo button:focus-visible { outline: 3px dashed #7fb6d8; outline-offset: 2px; }
.aviso-ficcao { font-size: 12px; color: #cfc4b6; margin: 14px 0 0; line-height: 1.35; }
.pisca { animation: pisca 1s steps(2) infinite; font-size: 20px; }
@keyframes pisca { 50% { opacity: .35; } }
.lista-dias { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; text-align: left; }
.lista-dias button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; font-size: 16px; border: 2px solid var(--papel); background: #3a3040; color: var(--papel); border-radius: 3px; text-align: left; }
.lista-dias button small { display: block; color: #cfc4b6; font-size: 12px; }
.lista-dias button:disabled { opacity: .5; cursor: default; }
.mini-estrelas { color: var(--mostarda); letter-spacing: 2px; white-space: nowrap; font-size: 18px; }
.mini-estrelas .apagada { color: #5a4c56; }
.opcoes { display: grid; gap: 10px; margin-top: 12px; text-align: left; }
.opcoes .linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 16px; }
.grupo { display: flex; gap: 4px; flex-wrap: wrap; }
.grupo button { font-size: 14px; padding: 5px 10px; border: 2px solid var(--papel); background: #3a3040; color: var(--papel); border-radius: 3px; }
.grupo button[aria-pressed=true] { background: var(--mostarda); color: #1b1208; border-color: #1b1208; }
.opcoes input[type=range] { width: 55%; accent-color: var(--mostarda); }
.nota { font-size: 12px; color: #cfc4b6; line-height: 1.35; margin: 4px 0; }
.ajuda-controles { text-align: left; font-size: 13px; color: #efe4d0; line-height: 1.35; }
.ajuda-controles p { margin: 4px 0; }

.estrelas { display: flex; justify-content: center; gap: 10px; margin: 6px 0 2px; }
.estrelas span { width: 38px; height: 38px; background: #5a4c56; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transition: background .2s, transform .2s; }
.estrelas span.acesa { background: var(--mostarda); transform: scale(1.15); }
.res-estrelas-txt { margin: 0; font-size: 14px; color: #cfc4b6; }
.res-criterios { list-style: none; padding: 0; margin: 8px 0; text-align: left; font-size: 14px; display: grid; gap: 3px; }
.res-criterios li.ok span { color: var(--leve); } .res-criterios li.nao span { color: var(--coral); }
#grafico { width: 100%; height: 190px; display: block; background: #231c28; border: 2px solid #120c10; border-radius: 3px; }
.res-barras { display: grid; gap: 4px; margin-top: 8px; text-align: left; }
.barra-pessoa { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 6px; font-size: 13px; }
.barra-pessoa i { display: block; height: 10px; grid-column: 2; }
.barra-pessoa span { grid-row: 1 / span 2; }
.barra-pessoa b { grid-column: 3; grid-row: 1 / span 2; }
.barra-pessoa i.fisica { background: #d8c9a8; }
.barra-pessoa i.mental { background: repeating-linear-gradient(-45deg, #b88cff 0 3px, #6a4a9a 3px 6px); }
.res-numeros { display: grid; grid-template-columns: auto auto; gap: 2px 14px; justify-content: center; font-size: 14px; margin: 8px 0 0; }
.res-numeros dt { color: #cfc4b6; text-align: right; } .res-numeros dd { margin: 0; text-align: left; font-weight: 700; }

/* Legibilidade: a Pixelify confunde C/O e 2/5/8 em tamanho pequeno. Texto corrido, nomes e números usam
   monoespaçada do sistema em negrito; a Pixelify fica só em títulos, botões e no rótulo dos botões de ação. */
:root { --leitura: 'Cascadia Mono', Consolas, 'Courier New', ui-monospace, monospace; }
body, .hud-topo, .medidor, .cab-texto, .ba-tempo, .ba-dono, .dica-acao, .tutorial-caixa, .aviso, .sub, .selo, .aviso-ficcao,
.opcoes, .nota, .ajuda-controles, .lista-dias button, .res-criterios, .res-numeros, .res-estrelas-txt, .barra-pessoa, .bt-acao kbd, .pisca {
  font-family: var(--leitura); font-weight: 700; letter-spacing: 0;
}
.caixa h1, .caixa h2, .tut-passo { font-family: var(--fonte); font-weight: 700; }
.caixa h3, .bt, .grupo button { font-family: var(--leitura); font-weight: 700; }
.bt-acao span { font-family: var(--leitura); font-weight: 700; letter-spacing: 1px; }
.medidor .md-nome { font-size: 12px; }
.medidor.chip .md-nome { font-size: 13px; }

@media (max-width: 600px) {
  .hud-topo { font-size: 12px; padding: 3px 6px; top: 12px; left: 104px; right: 8px; translate: none; justify-content: space-between; }
  .hud-topo > div { padding: 0 3px; }
  .hud-relogio b, .hud-feitas b, .hud-pontos b { font-size: 14px; }
  .avisos { top: 64px; left: 8px; right: 8px; translate: 0 0; align-items: center; }
  .tutorial-caixa:not([hidden]) ~ .avisos { top: 172px; }
  .equipe { top: auto; bottom: 14px; left: 8px; }
  .medidor.chip { width: 104px; font-size: 11px; }
  .aviso { font-size: 13px; white-space: normal; text-align: center; }
  .tutorial-caixa { top: 62px; bottom: auto; left: 8px; right: 8px; width: auto; }
  .tut-texto { font-size: 13px; margin: 2px 0 4px; }
  .tutorial-caixa { padding: 7px 9px; }
  .medidor { width: 72px; font-size: 10px; }
  .caixa { padding: 14px 12px; }
}

/* ---------- 1.2.0: tutorial com o controle do aparelho em uso e guia "Como jogar" ---------- */
/* caixa do passo: "Passo i de N", pedido curto, controle (teclas ou gesto) e, nos passos de explicação, "Entendi" */
.tutorial-caixa { width: min(420px, calc(100vw - 24px)); }
/* outro canto quando a caixa cobriria a Ruth ou o alvo do passo (ver evitarCaixa em main.mjs) */
.tutorial-caixa.outro-lado { left: auto; right: 12px; bottom: 104px; }
@media (max-width: 600px) { .tutorial-caixa.outro-lado { left: 8px; right: 8px; bottom: auto; } }
.tut-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* números em monoespaçada: na Pixelify o "2" do "Passo 2 de 6" lia como "8" */
.tut-passo { font-family: var(--leitura); font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.tut-pular { min-height: 36px; font-family: var(--leitura); font-weight: 700; font-size: 13px; padding: 2px 10px; }
body.toque .tut-pular { min-height: 44px; }
.tut-pular:hover, .tut-pular:focus-visible { color: var(--papel); border-color: var(--papel); outline: none; }
.tut-controle { font-size: 14px; line-height: 1.7; color: #efe4d0; margin: 0 0 2px; }
.tut-controle kbd, .seta-chip kbd, .tut-ok kbd { display: inline-block; min-width: 22px; padding: 0 5px; margin: 0 1px; text-align: center; font-family: var(--leitura); font-weight: 700; font-size: 13px; line-height: 19px; color: #1b1208; background: var(--mostarda); border: 1px solid #1b1208; border-bottom-width: 3px; border-radius: 3px; font-variant-ligatures: none; }
.tut-controle .gesto { width: 22px; height: 22px; vertical-align: -6px; color: var(--mostarda); }
.tut-ok { display: block; margin: 6px 0 0 auto; min-height: 44px; padding: 6px 16px; font-family: var(--leitura); font-weight: 700; font-size: 15px; color: #1b1208; background: var(--mostarda); border: 3px solid #1b1208; border-radius: 4px; box-shadow: 0 3px 0 #1b1208; animation: tut-pulso-ok 1.2s ease-in-out infinite; }
.tut-ok kbd { background: #fff3d6; }
.tut-ok:focus-visible { outline: 3px dashed #7fb6d8; outline-offset: 2px; }
@keyframes tut-pulso-ok { 50% { box-shadow: 0 3px 0 #1b1208, 0 0 0 5px rgba(230, 181, 71, .35); } }
/* seta do tutorial: rótulo curto + ponta desenhada; na borda, aponta para o alvo fora da tela */
.seta-tutorial { translate: none; font-size: 13px; text-shadow: none; display: flex; flex-direction: column; align-items: center; gap: 2px; z-index: 3; pointer-events: none; }
.seta-chip { background: var(--painel); border: 2px solid var(--mostarda); color: var(--papel); font-family: var(--leitura); font-weight: 700; font-size: 13px; padding: 2px 8px; border-radius: 3px; white-space: nowrap; box-shadow: 0 3px 0 rgba(0,0,0,.45); }
.seta-ponta { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 16px solid var(--mostarda); filter: drop-shadow(2px 2px 0 #111); transform: translateX(var(--dx, 0px)); }
.seta-tutorial.lado-baixo, .seta-tutorial.borda-cima { flex-direction: column-reverse; animation-name: seta-baixo; }
.seta-tutorial.lado-baixo .seta-ponta, .seta-tutorial.borda-cima .seta-ponta { transform: translateX(var(--dx, 0px)) rotate(180deg); }
.seta-tutorial.lado-dir, .seta-tutorial.borda-esq { flex-direction: row-reverse; animation-name: seta-lado; }
.seta-tutorial.lado-dir .seta-ponta, .seta-tutorial.borda-esq .seta-ponta { transform: rotate(90deg); }
.seta-tutorial.borda-dir, .seta-tutorial.lado-esq { flex-direction: row; animation-name: seta-lado-dir; }
.seta-tutorial.borda-dir .seta-ponta, .seta-tutorial.lado-esq .seta-ponta { transform: rotate(-90deg); }
.seta-tutorial.borda-cima .seta-ponta, .seta-tutorial.borda-baixo .seta-ponta { transform: none; }
.seta-tutorial.borda-cima .seta-ponta { transform: rotate(180deg); }
@keyframes seta-baixo { 50% { margin-top: 8px; } }
@keyframes seta-lado { 50% { margin-left: 8px; } }
@keyframes seta-lado-dir { 50% { margin-left: -8px; } }
/* botão da tela pedido no passo (FAZER ou PASSAR): anel pulsando — forma e movimento, não só cor */
.bt-acao.tut-alvo { border-color: var(--mostarda); animation: tut-pulso 1s ease-in-out infinite; }
@keyframes tut-pulso { 0%, 100% { box-shadow: 0 4px 0 rgba(0,0,0,.45), 0 0 0 0 rgba(230, 181, 71, .9); } 50% { box-shadow: 0 4px 0 rgba(0,0,0,.45), 0 0 0 8px rgba(230, 181, 71, .35); } }
@media (prefers-reduced-motion: reduce) {
  .seta-tutorial, .tut-ok { animation: none; }
  .bt-acao.tut-alvo { animation: none; box-shadow: 0 0 0 4px var(--mostarda); }
}
@media (max-width: 600px) {
  .tut-texto { font-size: 13px; }
  .tut-controle { font-size: 12px; line-height: 1.6; }
  .tut-controle kbd, .seta-chip kbd { font-size: 12px; line-height: 17px; min-width: 20px; }
  .tut-controle .gesto { width: 20px; height: 20px; }
  .tut-ok { min-height: 44px; padding: 4px 14px; margin-top: 4px; }
  .seta-chip { font-size: 12px; }
}
/* celular deitado: a caixa vai para o alto à direita (embaixo à esquerda cobria a Ruth, que fica no centro);
   os avisos ficam no alto, entre o painel da equipe e a caixa */
@media (max-height: 520px) and (orientation: landscape) {
  .tutorial-caixa { left: auto; right: 8px; top: 54px; bottom: auto; width: min(330px, 40vw); padding: 6px 9px; }
  .tutorial-caixa.outro-lado { right: auto; left: 8px; top: auto; bottom: 8px; }
  .tut-texto { font-size: 13px; margin: 2px 0 3px; line-height: 1.25; }
  .tut-controle { font-size: 12px; line-height: 1.5; }
  .tut-controle kbd, .seta-chip kbd { font-size: 12px; line-height: 16px; min-width: 20px; }
  .tut-controle .gesto { width: 18px; height: 18px; vertical-align: -5px; }
  .tut-ok { min-height: 40px; padding: 3px 12px; margin-top: 3px; font-size: 14px; }
  .tutorial-caixa:not([hidden]) ~ .avisos { left: 124px; right: calc(min(330px, 40vw) + 20px); translate: none; top: 56px; }
  .tutorial-caixa:not([hidden]) ~ .avisos .aviso { white-space: normal; text-align: center; font-size: 13px; }
}
/* celular deitado: os botões da pausa (agora com Como jogar e Pular tutorial) em duas colunas, para
   "Menu principal" continuar à vista sem rolar */
@media (max-height: 520px) and (orientation: landscape) {
  #tela-pausa .botoes.coluna { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
  #tela-pausa .botoes.coluna .bt { padding: 7px 12px; font-size: 16px; }
  #tela-pausa .caixa { padding: 12px 16px; max-width: 620px; }
  #tela-pausa .caixa h2 { margin-bottom: 2px; }
  #tela-pausa .pausa-motivo { margin: 4px 0; font-size: 14px; }
}
/* abertura: "Refazer tutorial" menor, abaixo dos botões principais */
.botoes-ajuda { margin-top: 8px; }
/* celular deitado: com o "Refazer tutorial", a abertura aperta os espaços para o aviso de ficção continuar
   à vista sem rolar */
@media (max-height: 520px) and (orientation: landscape) {
  .caixa.abertura { padding: 10px 18px 12px; margin-bottom: 0; }
  .caixa.abertura h1 { font-size: 46px; margin: 2px 0; }
  .caixa.abertura .sub { font-size: 14px; margin: 6px 0; }
  .caixa.abertura .botoes { margin-top: 8px; }
  .caixa.abertura .botoes-ajuda { margin-top: 6px; }
  .caixa.abertura .aviso-ficcao { margin-top: 8px; }
}
.bt.pequeno { font-size: 15px; padding: 8px 14px; min-height: 44px; background: transparent; color: var(--papel); border: 2px solid rgba(246, 238, 220, .55); box-shadow: none; }
.bt.pequeno:hover { border-color: var(--mostarda); color: #ffe0ad; }
.ajuda-controles { text-align: center; }
.ajuda-controles .bt { font-size: 16px; padding: 8px 18px; }
/* guia "Como jogar" (kit da coleção) com a paleta da casa: painel ameixa, mostarda, papel */
:root {
  --cj-painel: #2a2330; --cj-painel-2: #3a3040; --cj-texto: #f6eedc; --cj-suave: #cfc4b6;
  --cj-destaque: #e6b547; --cj-destaque-texto: #1b1208; --cj-borda: #120c10; --cj-fonte: var(--leitura); --cj-raio: 4px;
}
.cj-fundo { font-weight: 700; }
/* Pixelify só nos títulos, em peso 500 (em negrito o "c" fecha e lê como "o") */
.cj-topo h2, .cj-titulo-cartao { font-family: var(--fonte); font-weight: 500; letter-spacing: 1px; }
.cj-topo h2 { color: var(--mostarda); }
/* tela larga: coluna das teclas mais larga, para "E / Espaço" e "1 / 2 / 3" não quebrarem em duas linhas */
@media (min-width: 900px) { .cj-icones { min-width: 124px; } }
canvas.cj-anfitria { width: 48px; height: 48px; image-rendering: pixelated; background: #4a3d52; border: 2px solid var(--cj-borda); border-radius: 3px; }
/* celular em pé: o cartão de controles (lista + troca de aparelho) cabe sem rolagem */
@media (max-width: 520px) {
  .cj-lista { gap: 3px; }
  .cj-lista li { min-height: 34px; gap: 8px; }
  .cj-acao { font-size: .86rem; line-height: 1.2; }
  /* teclas numa linha só ("E / Espaço", "1 / 2 / 3"): empilhadas, a lista de teclado não cabia em 390×844 */
  .cj-icones { min-width: 104px; flex: none; flex-wrap: nowrap; gap: 3px; }
  .cj-painel .cj-lista kbd { min-width: 26px; height: 26px; padding: 0 4px; font-size: .78rem; border-bottom-width: 3px; }
  .cj-gesto svg { width: 34px; height: 34px; }
  .cj-cartao:has(.cj-controles) .cj-clipe { max-height: min(20dvh, 200px); }
  /* a lista já diz o que cada controle faz: no celular em pé a frase do cartão de controles sai */
  .cj-cartao:has(.cj-controles) .cj-texto { display: none; }
}
/* celular deitado: a lista de controles vira duas colunas para o cartão caber na altura */
@media (max-height: 520px) and (orientation: landscape) {
  .cj-cartao:has(.cj-controles) { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); }
  .cj-cartao:has(.cj-controles) .cj-lista { grid-template-columns: 1fr 1fr; column-gap: 8px; }
  .cj-cartao:has(.cj-controles) .cj-gesto svg { width: 26px; height: 26px; }
  .cj-cartao:has(.cj-controles) .cj-lista li { gap: 6px; min-height: 30px; }
  .cj-cartao:has(.cj-controles) .cj-icones { min-width: 84px; flex: none; flex-wrap: nowrap; gap: 2px; }
  .cj-cartao:has(.cj-controles) kbd { flex: none; min-width: 24px; height: 26px; padding: 0 4px; font-size: .78rem; }
  .cj-cartao:has(.cj-controles) .cj-acao { font-size: .78rem; line-height: 1.15; }
  .cj-cartao:has(.cj-controles) .cj-texto { display: none; }
}