@font-face { font-family: 'Pixelify Sans'; src: url('vendor/PixelifySans.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }
/* 1.2.0: na Pixelify Sans o Z maiúsculo tem o desenho do algarismo 2; só o Z vem de uma face redesenhada na mesma grade (scripts/gerar-fonte-z.mjs) */
@font-face { font-family: 'Pixelify Sans'; src: url('vendor/PixelifySans-Z.ttf') format('truetype'); font-weight: 400 700; font-display: swap; unicode-range: U+005A; }
:root {
  color-scheme: dark;
  --creme: #fff6e6; --tinta: #231c24; --ouro: #e3b65a; --ouro2: #ffd772; --vidro: rgba(33, 26, 36, .86); --vidro2: rgba(33, 26, 36, .72);
  --linha: rgba(255, 238, 205, .22); --ok: #bfe6c3; --alerta: #ffc9a8;
  font-family: 'Pixelify Sans', 'Trebuchet MS', system-ui, sans-serif; color: var(--creme);
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--tinta); }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--ouro2); outline-offset: 3px; }
[hidden] { display: none !important; }
kbd { font: inherit; border: 1px solid var(--linha); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: #ffffff10; }
.olho { font-size: 10px; letter-spacing: 2.5px; color: var(--ouro); text-transform: uppercase; }

#app { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; background: var(--tinta); }
#cena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; image-rendering: pixelated; }
.vinheta { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(20, 14, 22, .45) 100%); }

/* HUD */
#hud { position: absolute; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); background: linear-gradient(var(--vidro), rgba(33, 26, 36, .55)); border-bottom: 1px solid var(--linha); }
.hud-sala { display: flex; flex-direction: column; min-width: 0; }
.hud-sala strong { font-size: 22px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-sala small { font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-contas { display: flex; gap: 6px; }
.hud-contas span { display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 4px 8px; border: 1px solid var(--linha); border-radius: 8px; background: #ffffff0a; }
.hud-contas i { font-style: normal; font-size: 10px; letter-spacing: 1px; opacity: .8; text-transform: uppercase; }
.hud-contas b { font-size: 22px; font-variant-numeric: tabular-nums; }
.hud-acoes { display: flex; gap: 8px; }
.redondo { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linha); background: #2c2330; font-size: 20px; display: grid; place-items: center; }
.redondo:hover { background: #4a3a45; }
.redondo[aria-pressed=false] { opacity: .55; text-decoration: line-through; }

#colecao { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 6px 12px; border-radius: 10px; background: var(--vidro2); border: 1px solid var(--linha); max-width: calc(100% - 24px); }
#spots-hud { display: flex; gap: 6px; }
.spot-hud { position: relative; width: 38px; height: 38px; border-radius: 8px; border: 1px dashed var(--linha); display: grid; place-items: center; }
.spot-hud canvas { width: 26px; height: 26px; image-rendering: pixelated; }
.spot-hud.ok { border: 1px solid var(--ok); background: #bfe6c322; }
.spot-hud.ok::after { content: '✓'; position: absolute; right: -4px; top: -6px; font-size: 14px; color: var(--ok); text-shadow: 0 1px 2px #000; }
#colecao-texto { margin: 0; font-size: 12px; opacity: .9; white-space: nowrap; }

#dica { position: absolute; left: 50%; transform: translateX(-50%); max-width: min(560px, calc(100% - 24px)); padding: 10px 16px; border-radius: 10px; background: #fff6e6; color: var(--tinta); font-size: 16px; line-height: 1.3; text-align: center; box-shadow: 0 6px 20px #0006; border: 2px solid var(--ouro); }
#dica b { color: #8a5a14; }
#faixa { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); padding: 14px 34px; text-align: center; background: var(--vidro); border: 2px solid var(--ouro); border-radius: 12px; animation: surgir .5s ease-out; pointer-events: none; }
#faixa strong { display: block; font-size: 34px; color: var(--ouro2); }
@keyframes surgir { from { opacity: 0; transform: translate(-50%, -30%) scale(.9); } }

#ficha { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; align-items: flex-start; width: min(460px, calc(100% - 24px)); padding: 12px 40px 12px 12px; border-radius: 12px; background: var(--vidro); border: 1px solid var(--ouro); box-shadow: 0 10px 28px #0007; animation: fichaEntra .35s ease-out; }
@keyframes fichaEntra { from { opacity: 0; transform: translate(-50%, 16px); } }
#ficha canvas { width: 64px; height: 64px; image-rendering: pixelated; flex: none; background: #ffffff0c; border-radius: 8px; }
#ficha strong { display: block; font-size: 18px; }
#ficha small { display: block; font-size: 12px; color: var(--ouro2); }
#ficha p { margin: 4px 0 0; font-size: 14px; line-height: 1.3; font-family: Georgia, 'Times New Roman', serif; }
#ficha-fechar { position: absolute; right: 4px; top: 4px; width: 44px; height: 44px; border: 0; background: none; font-size: 22px; }
#aviso { position: absolute; left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 8px; background: #3a2230ee; border: 1px solid var(--alerta); color: var(--alerta); font-size: 14px; opacity: 0; transition: opacity .25s; pointer-events: none; max-width: calc(100% - 24px); text-align: center; }
#aviso.ver { opacity: 1; }

/* controles de toque */
#controles { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 12px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom)); pointer-events: none; }
#dpad { display: grid; grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(3, 56px); gap: 4px; pointer-events: auto; }
#dpad button, #acoes-toque button { border: 1px solid var(--linha); background: var(--vidro); border-radius: 12px; font-size: 20px; touch-action: none; user-select: none; -webkit-user-select: none; }
#dpad button:active, #dpad button.ativo { background: #6a4d3c; border-color: var(--ouro); }
#dpad [data-dir=cima] { grid-column: 2; grid-row: 1; } #dpad [data-dir=esquerda] { grid-column: 1; grid-row: 2; }
#dpad [data-dir=direita] { grid-column: 3; grid-row: 2; } #dpad [data-dir=baixo] { grid-column: 2; grid-row: 3; }
#acoes-toque { display: flex; flex-direction: column; gap: 8px; pointer-events: auto; }
#acoes-toque button { width: 84px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 20px; line-height: 1; }
#acoes-toque small { font-size: 11px; margin-top: 3px; }
#teclas { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); margin: 0; padding: 6px 12px; border-radius: 8px; background: var(--vidro2); font-size: 13px; white-space: nowrap; pointer-events: none; }

/* modais */
#modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: linear-gradient(90deg, rgba(25, 18, 26, .86), rgba(25, 18, 26, .45)); overflow: auto; }
#app[data-tela=titulo] #modal { background: linear-gradient(90deg, rgba(25, 18, 26, .82) 0%, rgba(25, 18, 26, .35) 60%, transparent); justify-content: flex-start; }
.cartao { width: min(560px, 100%); max-height: 100%; overflow: auto; padding: 26px 28px; background: var(--vidro); border: 1px solid var(--linha); border-radius: 16px; box-shadow: 0 18px 50px #0008; }
#app[data-tela=titulo] .cartao { background: transparent; border: 0; box-shadow: none; margin-left: min(6vw, 70px); }
.cartao h1 { font-size: clamp(40px, 7vw, 72px); line-height: .95; margin: 10px 0 14px; font-weight: 700; letter-spacing: -1px; }
.cartao h1 em { font-style: normal; color: var(--ouro2); display: block; }
.cartao h2 { font-size: 28px; margin: 6px 0 12px; }
.cartao p { line-height: 1.4; }
.cartao .intro { font-size: 17px; max-width: 440px; }
.cartao .pequeno { font-size: 13px; opacity: .85; }
.botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.botao { min-height: 48px; padding: 10px 20px; border-radius: 10px; border: 1px solid var(--linha); background: #3a2e38; font-size: 17px; }
.botao:hover { background: #544250; }
.botao.principal { background: var(--ouro); color: var(--tinta); border-color: var(--ouro2); font-weight: 700; }
.botao.principal:hover { background: var(--ouro2); }
.estrelas { font-size: 38px; letter-spacing: 6px; color: var(--ouro2); margin: 6px 0; }
.estrelas .vazia { color: #ffffff38; }
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.numeros div { padding: 8px; border: 1px solid var(--linha); border-radius: 10px; text-align: center; }
.numeros i { display: block; font-style: normal; font-size: 11px; letter-spacing: 1px; opacity: .8; text-transform: uppercase; }
.numeros b { font-size: 26px; }
.cidades { display: grid; gap: 14px; margin-top: 12px; }
.cidade h3 { margin: 0 0 6px; font-size: 18px; }
.cidade h3 small { font-size: 12px; opacity: .75; margin-left: 6px; }
.lista-salas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sala-b { min-height: 56px; text-align: left; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--linha); background: #3a2e38; }
.sala-b small { display: block; font-size: 12px; opacity: .85; }
.sala-b[disabled] { opacity: .45; cursor: not-allowed; }
.opcoes { display: grid; gap: 14px; margin-top: 8px; }
.opcoes fieldset { border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; }
.opcoes legend { font-size: 13px; color: var(--ouro); padding: 0 6px; }
.presets { display: flex; gap: 8px; flex-wrap: wrap; }
.presets label { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px; border: 1px solid var(--linha); border-radius: 8px; cursor: pointer; }
.presets input { width: 20px; height: 20px; accent-color: var(--ouro); }
.volume { display: flex; align-items: center; gap: 10px; }
.volume input[type=range] { flex: 1; min-height: 44px; accent-color: var(--ouro); }
.volume label { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.sobre ul { padding-left: 18px; line-height: 1.4; }
.sobre a { color: var(--ouro2); word-break: break-all; }
#transicao { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #1a1319; opacity: 0; transition: opacity .3s ease; pointer-events: none; text-align: center; z-index: 5; }
#transicao.ver { opacity: 1; }
#transicao strong { font-size: clamp(34px, 7vw, 60px); color: var(--ouro2); }
#transicao small { font-size: 15px; opacity: .85; }
.alas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 10px 0; }
.ala h3 { margin: 0 0 4px; font-size: 15px; display: flex; justify-content: space-between; }
.ala h3 small { color: var(--ouro2); font-size: 12px; }
.vitrine-final { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-radius: 8px; background: #ffffff0d; border: 1px solid var(--linha); }
.peca-final { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 6px; background: radial-gradient(circle, #ffd77233, transparent 70%); }
.peca-final canvas { width: 36px; height: 36px; image-rendering: pixelated; }
.peca-final.vazia { background: none; opacity: .3; filter: grayscale(1) brightness(.5); }
#app[data-tela=final] #modal { justify-content: flex-start; background: linear-gradient(90deg, rgba(25, 18, 26, .9) 0%, rgba(25, 18, 26, .5) 55%, transparent); }
#app[data-tela=final] .cartao { margin-left: min(4vw, 50px); }
#erro { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(25, 18, 26, .92); text-align: center; }
#erro .cartao { text-align: left; }
#aviso-save { position: absolute; bottom: 8px; left: 8px; margin: 0; font-size: 12px; padding: 6px 10px; border-radius: 8px; background: #3a2230ee; color: var(--alerta); }

/* celular / retrato */
@media (max-width: 760px) {
  #hud { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 8px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); }
  .hud-sala strong { font-size: 18px; }
  .hud-sala small { font-size: 11px; white-space: normal; }
  .hud-contas { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; }
  .hud-contas span { flex: 1; min-width: 0; flex-direction: row; gap: 6px; justify-content: center; padding: 2px 6px; }
  .hud-contas b { font-size: 18px; }
  .hud-acoes { grid-column: 2; grid-row: 1; gap: 6px; }
  .hud-acoes #b-desfazer, .hud-acoes #b-reiniciar { display: none; }
  .redondo { width: 44px; height: 44px; }
  #colecao { flex-direction: column; gap: 3px; padding: 4px 8px; }
  .spot-hud { width: 32px; height: 32px; }
  .spot-hud canvas { width: 22px; height: 22px; }
  #colecao-texto { font-size: 11px; }
  #dica { font-size: 14px; padding: 8px 12px; }
  .cartao { padding: 20px 18px; }
  #app[data-tela=titulo] .cartao { margin-left: 0; background: var(--vidro2); }
  #app[data-tela=titulo] #modal, #app[data-tela=final] #modal { background: linear-gradient(0deg, rgba(25, 18, 26, .85) 30%, rgba(25, 18, 26, .2)); align-items: flex-end; justify-content: center; }
  #app[data-tela=final] .cartao { margin-left: 0; background: var(--vidro2); max-height: 74%; }
  .peca-final { width: 32px; height: 32px; } .peca-final canvas { width: 28px; height: 28px; }
  #faixa strong { font-size: 26px; }
  #ficha { padding: 8px 40px 8px 8px; gap: 8px; background: #2a2130; z-index: 3; }
  #ficha canvas { width: 44px; height: 44px; }
  #ficha strong { font-size: 15px; }
  #ficha small { font-size: 11px; }
  #ficha p { font-size: 12px; margin-top: 2px; }
}
@media (max-width: 380px) {
  #controles { padding: 8px 8px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  #dpad { grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3, 46px); gap: 3px; }
  #acoes-toque button { width: 74px; height: 48px; }
  #colecao { flex-direction: row; gap: 6px; padding: 4px 6px; }
  .spot-hud { width: 28px; height: 28px; } .spot-hud canvas { width: 20px; height: 20px; }
  #colecao-texto { font-size: 10px; white-space: normal; max-width: 92px; line-height: 1.15; }
  #dica { font-size: 13px; line-height: 1.2; padding: 6px 10px; max-width: calc(100% - 16px); width: calc(100% - 16px); }
  .hud-contas span { gap: 3px; padding: 2px 4px; } .hud-contas i { font-size: 9px; letter-spacing: 0; }
}
@media (min-width: 1000px) {
  #ficha { left: 16px; transform: none; width: 360px; animation-name: fichaEntraLado; }
  @keyframes fichaEntraLado { from { opacity: 0; transform: translateY(16px); } }
}
@media (prefers-reduced-motion: reduce) { #faixa, #ficha { animation: none; } }

/* 1.2.0 · guia "Como jogar" (kit da coleção em como-jogar/) com a paleta e a fonte da galeria */
:root {
  --cj-painel: #231c24; --cj-painel-2: #33283a; --cj-texto: #fff6e6; --cj-suave: #d9cbb8;
  --cj-destaque: #e3b65a; --cj-destaque-texto: #231c24; --cj-borda: #120d13;
  --cj-fonte: 'Pixelify Sans', 'Trebuchet MS', system-ui, sans-serif;
}
.cj-topo h2, .cj-titulo-cartao { font-weight: 500; }
canvas.cj-anfitria { width: 48px; height: 45px; object-fit: fill; image-rendering: pixelated; background: #ffffff10; border-radius: 8px; }

/* 1.2.0 · tutorial jogável: anel no alvo, seta do empurrão, balão ancorado e controle em destaque */
#tut-alvo { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 2; }
#tut-alvo .anel { position: absolute; left: calc(var(--tw, 60px) / -2); top: calc(var(--th, 44px) / -2); width: var(--tw, 60px); height: var(--th, 44px); border-radius: 50%; border: 3px solid var(--ouro2); box-shadow: 0 0 0 2px #231c24, inset 0 0 0 2px #231c24, 0 0 16px #ffd772b0; animation: tutAnel 1.1s ease-in-out infinite; }
#tut-alvo.alerta .anel { border-style: dashed; border-color: var(--alerta); box-shadow: 0 0 0 2px #3a2230, inset 0 0 0 2px #3a2230, 0 0 16px #ffc9a8b0; }
#tut-alvo .seta { position: absolute; left: var(--sx, 0px); top: var(--sy, 0px); transform: translate(-50%, -50%); font-style: normal; font-size: var(--sf, 26px); line-height: 1; color: var(--ouro2); text-shadow: 0 0 0 #231c24, 2px 0 #231c24, -2px 0 #231c24, 0 2px #231c24, 0 -2px #231c24, 0 0 10px #ffd772; animation: tutSeta .9s ease-in-out infinite; }
#tut-alvo .seta:empty { display: none; }
/* traço do anel até a ponta do balão, quando o balão fica longe do alvo (celular deitado) */
#tut-alvo .fio { position: absolute; left: var(--fx, 0px); top: var(--fy, 0px); width: var(--fl, 0px); height: 3px; margin-top: -1.5px; transform-origin: 0 50%; transform: rotate(var(--fa, 0rad)); background: repeating-linear-gradient(90deg, var(--ouro2) 0 6px, transparent 6px 10px); filter: drop-shadow(0 0 1px #231c24) drop-shadow(0 0 1px #231c24); }
#tut-alvo:not([data-fio]) .fio { display: none; }
#tut-alvo.alerta .fio { background: repeating-linear-gradient(90deg, var(--alerta) 0 6px, transparent 6px 10px); }
/* a peça pedida desenhada por cima quando a Manu está na frente dela (a câmera é de frente) */
#tut-alvo .fantasma { position: absolute; image-rendering: pixelated; filter: drop-shadow(2px 0 0 var(--ouro2)) drop-shadow(-2px 0 0 var(--ouro2)) drop-shadow(0 2px 0 var(--ouro2)) drop-shadow(0 -2px 0 var(--ouro2)) drop-shadow(0 0 2px #231c24); }
#tut-alvo.alerta .fantasma { filter: drop-shadow(2px 0 0 var(--alerta)) drop-shadow(-2px 0 0 var(--alerta)) drop-shadow(0 2px 0 var(--alerta)) drop-shadow(0 -2px 0 var(--alerta)) drop-shadow(0 0 2px #231c24); }
@keyframes tutAnel { 50% { transform: scale(1.12); opacity: .7; } }
@keyframes tutSeta { 50% { scale: 1.25; } }
#tut-balao { position: absolute; left: 0; top: 0; z-index: 4; max-width: min(340px, calc(100% - 16px)); padding: 8px 12px; border-radius: 10px; background: #fff6e6; color: var(--tinta); font-size: 16px; line-height: 1.45; text-align: center; box-shadow: 0 6px 20px #0006; border: 2px solid var(--ouro); pointer-events: none; font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0; }
#tut-balao.alerta { background: #ffece0; border-color: #c96a3a; }
#tut-balao.alerta::before { content: '⚠ '; }
#tut-balao::after { content: ''; position: absolute; left: var(--cauda, 50%); width: 12px; height: 12px; background: inherit; border: 0 solid; border-color: inherit; transform: translateX(-50%) rotate(45deg); }
#tut-balao[data-lado=acima]::after { bottom: -8px; border-width: 0 2px 2px 0; }
#tut-balao[data-lado=abaixo]::after { top: -8px; border-width: 2px 0 0 2px; }
#tut-balao[data-lado=solto]::after { display: none; }
#tut-balao[data-lado=esquerda]::after { left: auto; right: -8px; top: var(--cauda-y, 50%); transform: translateY(-50%) rotate(45deg); border-width: 2px 2px 0 0; }
#tut-balao[data-lado=direita]::after { left: -8px; top: var(--cauda-y, 50%); transform: translateY(-50%) rotate(45deg); border-width: 0 0 2px 2px; }
#tut-balao kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin: 0 1px; padding: 0 5px; vertical-align: middle; background: var(--tinta); color: var(--creme); border: 1px solid #000; border-bottom-width: 3px; border-radius: 5px; font-size: 15px; line-height: 1; }
#tut-balao .tq { display: inline-grid; place-items: center; min-width: 28px; height: 26px; margin: 0 1px; padding: 0 6px; vertical-align: middle; background: #2c2330; color: var(--creme); border: 1px solid var(--ouro); border-radius: 7px; font-size: 14px; line-height: 1; white-space: nowrap; }
#tut-balao .tq-grupo { display: inline-flex; gap: 2px; vertical-align: middle; }
.tut-pisca { outline: 3px solid var(--ouro2) !important; outline-offset: 2px; animation: tutPisca 1s steps(2, jump-none) infinite; }
#dpad.tut-pisca { border-radius: 14px; outline-offset: 4px; }
@keyframes tutPisca { 50% { outline-color: transparent; } }
.pilula { position: absolute; right: 16px; top: 90px; z-index: 2; min-height: 44px; padding: 6px 14px; border-radius: 22px; border: 1px solid var(--linha); background: var(--vidro); font-size: 14px; }
.pilula:hover { background: #4a3a45; }
@media (max-width: 760px) {
  #tut-balao { font-size: 14px; padding: 6px 10px; max-width: min(320px, calc(100% - 16px)); }
  #tut-balao kbd, #tut-balao .tq { height: 24px; min-width: 24px; font-size: 13px; }
  .pilula { right: 8px; max-width: 86px; padding: 4px 10px; font-size: 12px; line-height: 1.15; }
}
@media (prefers-reduced-motion: reduce) { #tut-alvo .anel, #tut-alvo .seta, .tut-pisca { animation: none; } }
/* guia em tela deitada e baixa: rótulo e troca de aparelho na mesma linha, listas mais justas (cabe sem rolagem em 844×390) */
@media (max-height: 520px) and (orientation: landscape) {
  .cj-controles { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center; }
  .cj-controles .cj-rotulo { margin: 0; }
  .cj-controles .cj-troca { grid-row: 1; grid-column: 2; margin-top: 0; }
  .cj-controles .cj-lista { grid-column: 1 / -1; margin-top: 4px; }
  .cj-painel .cj-lista li { min-height: 30px; }
  .cj-painel kbd { height: 26px; min-width: 26px; }
  /* balão do tutorial mais estreito: sem altura livre acima ou abaixo do alvo, ele vai para o lado do tabuleiro */
  #tut-balao { font-size: 14px; line-height: 1.35; padding: 6px 10px; max-width: min(250px, calc(100% - 16px)); }
  #tut-balao kbd, #tut-balao .tq { height: 24px; min-width: 24px; font-size: 13px; }
}