:root {
  --fundo: #1c1a26;
  --painel: rgba(22, 26, 42, 0.88);
  --painel-2: rgba(33, 40, 64, 0.92);
  --borda: rgba(255, 255, 255, 0.13);
  --texto: #f6ecd6;
  --texto-2: #cfc6b4;
  --creme: #f3e7cc;
  --amarelo: #ffd23f;
  --ambar: #ffb238;
  --teal: #23b5b3;
  --ciano: #62f3ff;
  --vermelho: #ff5a4a;
  --verde: #7dffb0;
  --raio: 18px;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --topo-seguro: max(8px, env(safe-area-inset-top));
  --base-segura: max(8px, env(safe-area-inset-bottom));
}
* { box-sizing: border-box; }
/* o atributo hidden sempre esconde, mesmo em elementos com display próprio (ex.: #dica é flex) */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--fundo); color: var(--texto); font-family: var(--fonte); overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#app { position: fixed; inset: 0; overflow: hidden; }
#palco { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
button { font-family: inherit; }
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--ciano); outline-offset: 2px; }

.painel { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px); }
.orbe { display: inline-block; width: 22px; height: 22px; border-radius: 50%; flex: none; background: radial-gradient(circle at 40% 35%, #fffbe0 0 18%, #ffd23f 30%, #f5a623 58%, rgba(98, 243, 255, 0.9) 60%, rgba(98, 243, 255, 0.35) 72%, transparent 74%); box-shadow: 0 0 10px rgba(255, 210, 63, 0.7); }
.orbe.grande { width: 64px; height: 64px; animation: girar 1.8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ——— HUD (edição 3) ——— */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#topo { position: absolute; top: var(--topo-seguro); left: 8px; right: 8px; display: flex; gap: 8px; align-items: stretch; pointer-events: none; }
#topo > * { pointer-events: auto; }
#energia { flex: none; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 14px 0 10px; font-size: 26px; min-width: 110px; }
#energia .orbe { width: 30px; height: 30px; }
#energia b { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; transition: transform 0.15s; }
#energia.pulso b { transform: scale(1.18); color: #fff5b8; }
#energia.falta { animation: tremor 0.35s; border-color: var(--vermelho); }
@keyframes tremor { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
/* cartão "Você é a Amanda": retrato em pixel art com a recarga da Clareza no aro */
#comandante { flex: none; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 14px 0 5px; font: inherit; color: var(--creme); cursor: pointer; text-align: left; touch-action: manipulation; }
#comandante .aro-clareza { --r: 1; position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(rgba(255, 255, 255, 0.14) calc(var(--r) * 360deg), #ffd23f 0); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35); }
#comandante .aro-clareza::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3a3f6a, #1b1e36); }
#comandante canvas { position: relative; width: 38px; height: 33px; image-rendering: pixelated; margin-top: 2px; }
#comandante .quem { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
#comandante .quem small { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ciano); }
#comandante .quem b { font-size: 17px; }
#cmd-estado { font-size: 11px; font-weight: 700; color: var(--texto-2); white-space: nowrap; }
#comandante.pronta .aro-clareza { animation: aro-pronto 1.1s ease-in-out infinite; }
#comandante.pronta #cmd-estado { color: #ffe27a; }
#comandante.ativa .aro-clareza { background: conic-gradient(#fff3a6 360deg, #fff3a6 0); box-shadow: 0 0 16px rgba(255, 226, 122, 0.9); }
#comandante.sem-clareza .aro-clareza { background: rgba(98, 243, 255, 0.35); }
@keyframes aro-pronto { 50% { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 18px 4px rgba(255, 210, 63, 0.85); } }
#comandante.comemora { animation: comemora 0.9s ease-in-out 2; }
@keyframes comemora { 25% { transform: translateY(-6px) rotate(-6deg); } 50% { transform: translateY(0); } 75% { transform: translateY(-4px) rotate(6deg); } }
#progresso { flex: 1 1 auto; max-width: 420px; margin: 0 auto; padding: 10px 14px 6px; display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; }
#progresso .trilho { position: relative; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); overflow: visible; }
#progresso .preenchido { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: linear-gradient(90deg, #7a3412, #d27a35); transition: width 0.3s linear; }
#progresso .bandeiras i { position: absolute; top: -9px; width: 20px; height: 30px; margin-left: -10px; }
#progresso .bandeiras i::before { content: ""; position: absolute; left: 9px; top: 0; width: 2px; height: 28px; background: #d9d2c3; }
#progresso .bandeiras i::after { content: ""; position: absolute; left: 11px; top: 1px; width: 13px; height: 9px; background: var(--vermelho); clip-path: polygon(0 0, 100% 50%, 0 100%); }
#progresso .bandeiras i.passou::after { background: #6c6c6c; }
#progresso .cabeca { position: absolute; top: -5px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle, #c96a2a, #6a2a0e); border: 2px solid #f3e7cc; transition: left 0.3s linear; }
#progresso-rotulo { font-size: 13px; font-weight: 700; color: var(--texto-2); text-align: right; white-space: nowrap; }
#ferramentas { flex: none; display: flex; gap: 6px; }
.ferramenta { width: 56px; height: 56px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, 0.16); background: var(--painel-2); color: var(--creme); display: grid; place-items: center; font: 900 18px var(--fonte); cursor: pointer; box-shadow: 0 4px 0 #141827; touch-action: manipulation; }
.ferramenta svg { width: 30px; height: 30px; }
.ferramenta.ativa { border-color: var(--ambar); background: #4a3217; box-shadow: 0 0 0 3px rgba(255, 178, 56, 0.45), 0 0 18px rgba(255, 178, 56, 0.6); }
#btn-mudo .x-som { display: none; }
#btn-mudo.mudo .x-som { display: inline; }
#btn-mudo.mudo .onda-som { display: none; }
#btn-velocidade.rapido { border-color: var(--ciano); color: var(--ciano); }

#base { position: absolute; left: 8px; right: 8px; bottom: var(--base-segura); display: flex; gap: 10px; align-items: flex-end; justify-content: center; pointer-events: none; }
#base > * { pointer-events: auto; }
#cartas { display: flex; gap: 6px; min-width: 0; }
.carta { position: relative; width: 70px; height: 88px; flex: none; padding: 0; border: 2px solid rgba(255, 255, 255, 0.16); border-radius: 14px; background: linear-gradient(180deg, #34405f, #232b44); color: var(--texto); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow: hidden; transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s, filter 0.12s; box-shadow: 0 4px 0 #141827, 0 6px 14px rgba(0, 0, 0, 0.35); touch-action: manipulation; }
.carta img { width: 48px; height: 48px; margin-top: 6px; pointer-events: none; image-rendering: pixelated; }
.carta .nome { font-size: 11px; font-weight: 700; line-height: 1; margin-top: 2px; opacity: 0.9; }
.carta .custo { position: absolute; left: 4px; right: 4px; bottom: 3px; display: flex; align-items: center; justify-content: center; gap: 3px; font-weight: 800; font-size: 14px; background: rgba(0, 0, 0, 0.35); border-radius: 8px; padding: 1px 0; }
.carta .custo .orbe { width: 12px; height: 12px; box-shadow: none; }
.carta kbd { position: absolute; top: 3px; left: 5px; font: 700 10px var(--fonte); color: rgba(255, 255, 255, 0.55); }
.carta .recarga { position: absolute; inset: 0; background: conic-gradient(rgba(10, 12, 20, 0.72) calc(var(--r, 0) * 360deg), transparent 0); pointer-events: none; border-radius: 12px; }
.carta.selecionada { transform: translateY(-6px) scale(1.04); border-color: var(--ciano); box-shadow: 0 0 0 3px rgba(98, 243, 255, 0.35), 0 0 22px rgba(98, 243, 255, 0.55); }
.carta.sem-energia .custo { color: #ff9b8f; }
.carta.sem-energia img, .carta.recarregando img { filter: grayscale(0.7) brightness(0.7); }
.carta.nova::after { content: "novo"; position: absolute; top: 3px; right: 3px; font-size: 9px; font-weight: 800; background: var(--amarelo); color: #3a2a00; border-radius: 6px; padding: 1px 4px; }
.carta.destaque { animation: destaque 1s ease-in-out infinite; }
@keyframes destaque { 50% { box-shadow: 0 0 0 4px rgba(255, 210, 63, 0.9), 0 0 26px rgba(255, 210, 63, 0.8); } }

#acoes { display: flex; gap: 8px; align-items: flex-end; }
.acao { position: relative; width: 84px; height: 88px; border-radius: 18px; border: 2px solid rgba(255, 255, 255, 0.18); background: var(--painel-2); color: var(--creme); font: 800 13px var(--fonte); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 4px 0 #141827; touch-action: manipulation; overflow: hidden; }
.acao kbd { font: 700 10px var(--fonte); opacity: 0.65; }
.acao.clareza { border-color: rgba(255, 210, 63, 0.7); background: radial-gradient(circle at 50% 35%, #5a4a1a, #2a2433 70%); }
.acao.clareza .icone { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, #fff7c2 0 20%, #ffd23f 40%, rgba(255, 210, 63, 0) 72%); box-shadow: 0 0 18px rgba(255, 210, 63, 0.8); }
.acao.clareza.pronta { animation: pronta 1.4s ease-in-out infinite; }
@keyframes pronta { 50% { box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.7), 0 0 24px rgba(255, 210, 63, 0.7); } }
.acao.clareza.ativa { border-color: #fff3a6; }
.acao .recarga { position: absolute; inset: 0; background: conic-gradient(rgba(10, 12, 20, 0.75) calc(var(--r, 0) * 360deg), transparent 0); pointer-events: none; }
#btn-agir { display: none; }
#btn-agir.remover { border-color: var(--ambar); }

#joystick { position: absolute; display: none; left: 12px; width: 132px; height: 132px; touch-action: none; }
#joystick .aro { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.28); background: rgba(22, 26, 42, 0.45); }
#joystick .botao-js { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f3e7cc, #b8a988); box-shadow: 0 3px 0 #6d6250; }
body.toque #joystick { display: block; }
body.toque #btn-agir { display: flex; }
body.toque .acao kbd, body.toque .carta kbd { display: none; }

#faixa-aviso { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(0.9); min-width: min(560px, 90vw); padding: 14px 26px; border-radius: 16px; background: linear-gradient(90deg, rgba(120, 20, 10, 0.92), rgba(190, 60, 20, 0.95), rgba(120, 20, 10, 0.92)); border: 2px solid #ffb38a; color: #fff4e8; font-size: clamp(18px, 3vw, 28px); font-weight: 900; text-align: center; letter-spacing: 0.01em; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
#faixa-aviso.ativo { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#faixa-aviso.ok { background: linear-gradient(90deg, rgba(12, 90, 88, 0.92), rgba(30, 150, 140, 0.95), rgba(12, 90, 88, 0.92)); border-color: var(--verde); }
#faixa-aviso.clareza { background: linear-gradient(90deg, rgba(110, 80, 10, 0.92), rgba(190, 150, 40, 0.95), rgba(110, 80, 10, 0.92)); border-color: #fff3a6; color: #fffbe6; }
#faixa-aviso small { display: block; font-size: 0.55em; font-weight: 700; opacity: 0.9; margin-top: 2px; }

#dica { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--topo-seguro) + 64px); width: min(560px, calc(100vw - 16px)); display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-color: rgba(98, 243, 255, 0.45); animation: entrar 0.3s ease-out; }
#dica .dica-retrato { width: 48px; height: 42px; flex: none; image-rendering: pixelated; border-radius: 10px; background: radial-gradient(circle at 50% 38%, #3b3552, #1c1a26 70%); }
#dica .dica-texto { flex: 1; min-width: 0; }
#dica small { color: var(--ciano); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
#dica p { margin: 2px 0 0; font-size: 15px; line-height: 1.3; }
#dica .dica-ok { flex: none; border: 0; border-radius: 12px; padding: 10px 12px; background: var(--creme); color: #2a2433; font-weight: 800; cursor: pointer; min-height: 44px; }
#dica.pausada { border-color: var(--amarelo); box-shadow: 0 0 0 2px rgba(255, 210, 63, 0.35), 0 10px 28px rgba(0, 0, 0, 0.5); }
#dica.pausada small { color: var(--amarelo); }
#dica.pausada .dica-ok { background: var(--amarelo); box-shadow: 0 3px 0 #b88600; }
/* teclas desenhadas nos pedidos do tutorial (3.1.0): "{Q}" no texto da dica vira esta teclinha */
#dica p kbd { display: inline-block; min-width: 24px; margin: 0 2px; padding: 0 6px; border-radius: 6px; background: var(--creme); color: #2a2433; border-bottom: 3px solid #9d8f73; font: 800 13px/20px var(--fonte); text-align: center; vertical-align: 1px; white-space: nowrap; }
@keyframes entrar { from { opacity: 0; } }

#toast { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); padding: 10px 18px; border-radius: 14px; background: rgba(60, 14, 10, 0.92); border: 1px solid #ff9b8f; font-weight: 800; font-size: 16px; opacity: 0; transition: opacity 0.2s; pointer-events: none; white-space: nowrap; }
#toast.ativo { opacity: 1; }
#toast.ok { background: rgba(10, 60, 50, 0.92); border-color: var(--verde); }

#flutuantes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.flut { position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: 22px; color: #fff3a8; text-shadow: 0 2px 0 #7a4b00, 0 0 10px rgba(255, 210, 63, 0.8); animation: subir 0.9s ease-out forwards; white-space: nowrap; }
.flut.ruim { color: #ffb0a6; text-shadow: 0 2px 0 #6b1208; }
.flut.grande { font-size: 26px; letter-spacing: 0.01em; animation-duration: 1.1s; -webkit-text-stroke: 1px rgba(40, 20, 0, 0.35); }
body.retrato .flut.grande { font-size: 20px; }
@keyframes subir { to { transform: translate(-50%, -150%); opacity: 0; } }
.orbe-voando { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; pointer-events: none; transition: transform 0.55s cubic-bezier(0.5, -0.3, 0.7, 1), opacity 0.55s; }

/* ——— Telas ——— */
#telas { position: absolute; inset: 0; pointer-events: none; }
.tela { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(16, 13, 24, 0.58); backdrop-filter: blur(2px); pointer-events: auto; overflow-y: auto; }
.tela.ativa { display: flex; animation: aparecer 0.25s ease-out; }
.tela.lateral { justify-content: flex-start; background: linear-gradient(90deg, rgba(16, 13, 24, 0.78) 0 36%, rgba(16, 13, 24, 0) 62%); backdrop-filter: none; }
#tela-titulo { background: radial-gradient(ellipse at 50% 40%, rgba(16, 13, 24, 0.2), rgba(16, 13, 24, 0.7)); backdrop-filter: none; }
@keyframes aparecer { from { opacity: 0; } }
.cartao { width: min(520px, 100%); background: var(--painel); border: 1px solid var(--borda); border-radius: 24px; padding: 22px 24px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.cartao.largo { width: min(820px, 100%); }
.cartao h2 { margin: 0 0 10px; font-size: 28px; letter-spacing: -0.01em; }
.cartao.titulo { text-align: center; background: rgba(22, 26, 42, 0.8); }
.cartao.final { display: flex; align-items: center; gap: 20px; width: min(680px, 100%); text-align: left; }
.cartao.final .amanda-pixel { width: 128px; height: 192px; flex: none; image-rendering: pixelated; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5)); }
.cartao.final .subtitulo { margin-left: 0; }
.cartao.final .botoes { justify-content: flex-start; }
@media (max-width: 560px) {
  .cartao.final { flex-direction: column; text-align: center; gap: 6px; }
  .cartao.final .amanda-pixel { width: 96px; height: 144px; }
  .cartao.final .subtitulo { margin-left: auto; }
  .cartao.final .botoes { justify-content: center; }
}
.sobretitulo { margin: 0 0 4px; color: var(--ciano); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
h1 { margin: 0; font-size: clamp(40px, 7vw, 76px); line-height: 0.95; font-weight: 900; letter-spacing: -0.03em; color: var(--creme); text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); }
h1 span { display: block; color: var(--amarelo); text-shadow: 0 4px 0 #7a4b00, 0 0 28px rgba(255, 210, 63, 0.55); }
.subtitulo { color: var(--texto-2); font-size: 17px; line-height: 1.4; margin: 12px auto 18px; max-width: 420px; }
.nota-revisao { margin: 16px 0 0; font-size: 12px; color: #b9ae98; }
.botoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.botoes.coluna { flex-direction: column; align-items: stretch; }
.botao { min-height: 48px; padding: 10px 20px; border-radius: 14px; border: 0; background: var(--creme); color: #2a2433; font-size: 17px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 0 #9d8f73; transition: transform 0.08s, box-shadow 0.08s; touch-action: manipulation; }
.botao:active { transform: translateY(3px); box-shadow: 0 1px 0 #9d8f73; }
.botao.primario { background: var(--amarelo); box-shadow: 0 4px 0 #b88600; }
.botao.perigo { background: #ffb0a6; box-shadow: 0 4px 0 #b3453a; }
.botao[disabled] { opacity: 0.5; cursor: default; }
.selo { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(255, 210, 63, 0.15); color: var(--amarelo); font-weight: 800; }
.cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.grade-fases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 6px; }
.fase-btn { position: relative; aspect-ratio: 1 / 1.05; border-radius: 16px; border: 2px solid rgba(255, 255, 255, 0.14); background: linear-gradient(180deg, #34405f, #232b44); color: var(--texto); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; box-shadow: 0 4px 0 #141827; touch-action: manipulation; }
.fase-btn b { font-size: 26px; line-height: 1; }
.fase-btn span { font-size: 11px; line-height: 1.1; text-align: center; color: var(--texto-2); }
.fase-btn .est { font-size: 15px; letter-spacing: 1px; color: #5a5a66; }
.fase-btn .est i { font-style: normal; }
.fase-btn .est i.ok { color: var(--amarelo); text-shadow: 0 0 8px rgba(255, 210, 63, 0.6); }
.fase-btn img { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; image-rendering: pixelated; }
.fase-btn.bloqueada { opacity: 0.45; cursor: not-allowed; }
.fase-btn.atual { border-color: var(--amarelo); }

.cartao.intro { margin-left: clamp(0px, 3vw, 48px); width: min(440px, 100%); }
.novidade { display: flex; gap: 14px; align-items: center; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--borda); border-radius: 16px; padding: 10px 12px; margin: 10px 0; }
.novidade img { width: 84px; height: 84px; flex: none; image-rendering: pixelated; animation: respirar 2.4s ease-in-out infinite; }
@keyframes respirar { 50% { transform: translateY(-4px) scale(1.03); } }
.novidade h3 { margin: 0; font-size: 20px; }
.novidade h3 small { font-size: 12px; color: var(--ciano); font-weight: 800; margin-left: 6px; text-transform: uppercase; }
.novidade p { margin: 4px 0 0; color: var(--texto-2); line-height: 1.35; font-size: 15px; }
.novidade .ficha { font-size: 13px; color: var(--amarelo); font-weight: 700; margin-top: 4px; }
.novidade.inimigo { border-color: rgba(255, 140, 90, 0.4); }
.novidade.inimigo h3 small { color: #ffab7a; }
.dica-fase { color: var(--texto-2); font-size: 15px; line-height: 1.4; margin: 8px 0 0; }

.ajuste { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--borda); font-weight: 700; min-height: 48px; }
.ajuste input[type=range] { width: 52%; accent-color: var(--amarelo); height: 30px; }
.ajuste input[type=checkbox] { width: 26px; height: 26px; accent-color: var(--teal); }
.ajuste select { font: 700 15px var(--fonte); padding: 8px; border-radius: 10px; background: var(--creme); color: #2a2433; border: 0; min-height: 40px; }
.ajuste small { font-weight: 500; color: var(--texto-2); }
.aviso-armazenamento { font-size: 13px; color: #ffcf9a; margin: 10px 0 0; }
#aviso-armazenamento { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); background: rgba(60, 30, 10, 0.9); padding: 6px 12px; border-radius: 10px; }

.resultado { text-align: center; }
.estrelas-resultado { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 8px; }
.estrelas-resultado li { display: flex; align-items: center; gap: 12px; text-align: left; background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 8px 12px; opacity: 0.55; }
.estrelas-resultado li.ok { opacity: 1; }
.estrelas-resultado li i { font-style: normal; font-size: 30px; color: #55546a; transition: transform 0.3s; }
.estrelas-resultado li.ok i { color: var(--amarelo); text-shadow: 0 0 14px rgba(255, 210, 63, 0.8); animation: pop 0.4s ease-out backwards; }
@keyframes pop { from { transform: scale(0.2) rotate(-40deg); } 70% { transform: scale(1.3); } }
.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; margin: 8px 0; text-align: left; }
.numeros dt { color: var(--texto-2); font-size: 13px; }
.numeros dd { margin: 0 0 4px; font-weight: 800; font-size: 18px; }
/* ajuda (3.1.0): "Como jogar" e "Refazer tutorial" na abertura e na pausa, abaixo dos botões principais */
.botoes.ajuda { margin-top: 12px; gap: 8px; }
.botoes.ajuda .botao { min-height: 44px; padding: 8px 16px; font-size: 15px; background: transparent; color: var(--creme); border: 2px solid rgba(243, 231, 204, 0.55); box-shadow: none; }
.botoes.ajuda .botao:active { transform: translateY(1px); box-shadow: none; }
.creditos .rolagem { max-height: min(58vh, 520px); overflow-y: auto; padding-right: 6px; color: var(--texto-2); line-height: 1.45; font-size: 15px; user-select: text; }
.creditos a { color: var(--ciano); }
.carregando { text-align: center; color: var(--texto-2); font-weight: 700; }
.sem-js { position: absolute; inset: 0; display: grid; place-items: center; }

#comandante.comemora { animation: comemora 0.9s ease-in-out 2; }
@keyframes comemora { 25% { transform: translateY(-8px) rotate(-8deg); } 50% { transform: translateY(0); } 75% { transform: translateY(-6px) rotate(8deg); } }

/* ——— Retrato (celular em pé): tabuleiro inteiro no meio; controles no alcance do polegar ——— */
body.retrato #topo { flex-wrap: wrap; gap: 6px; }
body.retrato #energia { height: 48px; font-size: 22px; min-width: 92px; padding: 0 10px 0 8px; }
body.retrato #energia .orbe { width: 24px; height: 24px; }
/* no celular em pé o cartão vira só o retrato com o aro da Clareza e o selo "você" */
body.retrato #comandante { position: relative; height: 48px; width: 52px; padding: 0; justify-content: center; border-radius: 50%; }
body.retrato #comandante .aro-clareza { width: 44px; height: 44px; }
body.retrato #comandante canvas { width: 32px; height: 28px; }
body.retrato #comandante .quem { display: none; }
body.retrato #comandante::after { content: "você"; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); padding: 0 5px; border-radius: 6px; background: var(--ciano); color: #10131f; font-size: 10px; font-weight: 900; line-height: 14px; text-transform: uppercase; letter-spacing: 0.04em; }
body.retrato .ferramenta { width: 48px; height: 48px; border-radius: 14px; }
body.retrato .ferramenta svg { width: 26px; height: 26px; }
body.retrato #ferramentas { margin-left: auto; }
body.retrato #progresso { order: 9; flex: 1 0 100%; max-width: none; margin: 0; padding: 6px 10px 4px; flex-direction: row; align-items: center; gap: 10px; }
body.retrato #progresso .trilho { flex: 1; height: 9px; }
body.retrato #progresso-rotulo { font-size: 12px; }
body.retrato #base { flex-direction: column; align-items: stretch; gap: 8px; left: 6px; right: 6px; }
body.retrato #acoes { align-self: flex-end; }
body.retrato .acao { width: 78px; height: 70px; }
body.retrato #cartas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
body.retrato .carta { width: auto; height: 60px; flex-direction: row; justify-content: flex-start; gap: 2px; padding-left: 4px; }
body.retrato .carta img { width: 40px; height: 40px; margin: 0; }
body.retrato .carta .nome { position: absolute; top: 5px; right: 6px; margin: 0; font-size: 10px; }
body.retrato .carta .custo { left: auto; right: 4px; bottom: 5px; width: 46px; font-size: 13px; }
body.retrato .carta kbd { display: none; }
body.retrato .carta.nova::after { right: auto; left: 3px; top: 3px; }
body.retrato .carta.selecionada { transform: translateY(-3px) scale(1.03); }
body.retrato #dica { top: calc(var(--topo-seguro) + 96px); bottom: auto; }
body.retrato #dica p { font-size: 14px; }
body.retrato #toast { bottom: 240px; font-size: 14px; white-space: normal; text-align: center; max-width: 90vw; }
body.retrato .grade-fases { grid-template-columns: repeat(3, 1fr); }
body.retrato .tela.lateral { align-items: flex-end; background: linear-gradient(0deg, rgba(16, 13, 24, 0.85) 0 45%, rgba(16, 13, 24, 0) 70%); }
body.retrato .cartao.intro { margin: 0; }
body.retrato .novidade img { width: 64px; height: 64px; }
body.retrato .cartao { padding: 16px; }
body.retrato #faixa-aviso { top: 34%; }

@media (max-height: 560px) and (orientation: landscape) {
  #energia { height: 60px; font-size: 24px; }
  .carta { width: 60px; height: 76px; }
  .carta img { width: 40px; height: 40px; }
  .ferramenta { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body.reduzir *, body.reduzir *::before, body.reduzir *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }

/* ——— Guia "Como jogar" (kit da coleção em como-jogar/, 3.1.0): cores e fonte da oficina ——— */
.cj-fundo {
  --cj-painel: #161a2a; --cj-painel-2: #252d48; --cj-texto: #f6ecd6; --cj-suave: #cfc6b4;
  --cj-destaque: #ffd23f; --cj-destaque-texto: #2a2433; --cj-borda: #0d1020; --cj-fonte: var(--fonte); --cj-raio: 18px;
}
.cj-fundo canvas.cj-anfitria { width: 55px; height: 48px; border-radius: 12px; background: radial-gradient(circle at 50% 38%, #3b3552, #1c1a26 70%); box-shadow: 0 0 0 2px rgba(98, 243, 255, 0.45); }
/* celular deitado (pouca altura): lista de controles mais compacta para o cartão caber sem rolagem */
@media (max-height: 520px) and (orientation: landscape) {
  .cj-fundo .cj-lista { gap: 0; }
  .cj-fundo .cj-lista li { min-height: 25px; }
  .cj-fundo .cj-icones { min-width: 72px; }
  .cj-fundo .cj-acao { font-size: 0.85rem; line-height: 1.15; }
  .cj-fundo .cj-painel kbd { height: 22px; min-width: 22px; font-size: 0.72rem; border-bottom-width: 3px; }
  .cj-fundo .cj-gesto svg { width: 24px; height: 24px; }
  .cj-fundo .cj-controles { padding: 4px 8px; }
  .cj-fundo .cj-rotulo { margin-bottom: 1px; font-size: 0.72rem; }
  .cj-fundo .cj-troca { margin-top: 2px; }
}