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

:root {
  --ink: #fff4de; --ink2: #c8c0e8; --gold: #ecc978; --amber: #ffb65c; --rose: #ff7aa8; --mint: #9df0c0;
  --panel-a: rgba(34, 36, 84, .93); --panel-b: rgba(14, 14, 40, .93);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0e0f24; color: var(--ink); overflow: hidden; }
body { font-family: 'DotGothic16', 'Pixelify Sans', ui-monospace, monospace; font-size: 16px; font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'clig' 0; }
button, input, h1, h2, h3 { font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'clig' 0; }
#app { position: fixed; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
canvas[data-icon], .pix { image-rendering: pixelated; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.panel { background: linear-gradient(180deg, var(--panel-a), var(--panel-b)); border: 2px solid var(--gold); border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(10, 8, 24, .85), inset 0 0 0 2px rgba(255, 255, 255, .06), 0 10px 22px rgba(0, 0, 0, .45); }

/* HUD */
#hud { position: absolute; top: calc(10px + var(--safe-t)); left: calc(10px + var(--safe-l)); display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; pointer-events: none; }
.hud-main { display: flex; align-items: center; gap: 12px; padding: 6px 12px; }
.hud-hearts { display: flex; gap: 4px; }
.hud-hearts canvas { width: 27px; height: 24px; image-rendering: pixelated; }
.hud-hearts canvas.pop { animation: pop .35s cubic-bezier(.2, 1.4, .4, 1); }
.hud-hearts canvas.lost { animation: shake .4s; }
.hud-item { display: flex; align-items: center; gap: 5px; font-family: 'Pixelify Sans', monospace; font-size: 20px; }
.hud-item canvas { width: 21px; height: auto; }
.hud-item b { font-weight: 600; min-width: 1ch; }
.hud-item.bump b { animation: pop .35s cubic-bezier(.2, 1.4, .4, 1); display: inline-block; color: var(--gold); }
.hud-palcos { display: flex; gap: 4px; padding: 6px 8px; align-items: center; }
.hud-palcos canvas { width: 24px; height: 22px; image-rendering: pixelated; }
.hud-palcos canvas.lit { filter: drop-shadow(0 0 4px #ffc864); animation: pop .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

#corner { position: absolute; top: calc(10px + var(--safe-t)); right: calc(10px + var(--safe-r)); display: flex; gap: 8px; }
.round { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--gold); background: linear-gradient(180deg, var(--panel-a), var(--panel-b)); font-family: 'Pixelify Sans'; font-size: 18px; box-shadow: 0 0 0 2px rgba(10, 8, 24, .85); }
.round[aria-pressed="true"] { color: #8a82a8; text-decoration: line-through; }

#gestos { position: absolute; left: 50%; bottom: calc(14px + var(--safe-b)); transform: translateX(-50%); display: flex; gap: 6px; }
#gestos .gesto { cursor: pointer; }
.gesto { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 8px 3px; min-width: 64px; opacity: .8; }
.gesto canvas { width: 36px; height: 45px; image-rendering: pixelated; }
.gesto span { font-size: 12px; color: var(--ink2); }
.gesto kbd { font-family: 'Pixelify Sans'; font-size: 11px; color: var(--gold); }
.gesto.on { opacity: 1; border-color: #fff0b0; box-shadow: 0 0 0 2px rgba(10, 8, 24, .85), 0 0 14px rgba(255, 200, 100, .5); }
.gesto.on span { color: var(--ink); }
.gesto.locked { opacity: .45; }
.gesto.locked canvas { filter: grayscale(1) brightness(.6); }

#toasts { position: absolute; top: calc(64px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: min(92vw, 640px); }
.toast { padding: 8px 16px; font-size: 18px; text-align: center; animation: toastIn .35s cubic-bezier(.2, 1.3, .4, 1); }
.toast em { color: var(--amber); font-style: normal; }
.toast.out { transition: opacity .4s, transform .4s; opacity: 0; transform: translateY(-8px); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-12px) scale(.9); } to { opacity: 1; transform: none; } }

/* rótulos no mundo */
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wl { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; }
.wl .in { transform: translate(-50%, -100%); padding: 3px 9px; font-size: 14px; line-height: 1.25; }
.wl.hint .in { background: rgba(255, 248, 230, .95); color: #2a2440; border: 2px solid #2a2440; border-radius: 3px; animation: bob 1.4s ease-in-out infinite; box-shadow: 0 3px 0 rgba(20, 16, 40, .35); }
.wl.hint kbd { font-family: 'Pixelify Sans'; background: #2a2440; color: #fff4de; padding: 0 4px; border-radius: 2px; font-size: 13px; }
.wl.float .in { font-family: 'Pixelify Sans'; font-size: 20px; font-weight: 700; color: #fff; text-shadow: 2px 2px 0 #2a1840, -1px -1px 0 #2a1840, 1px -1px 0 #2a1840, -1px 1px 0 #2a1840; animation: floatUp 1.2s ease-out forwards; }
.wl.float.gold .in { color: #ffe27a; font-size: 22px; }
.wl.float.rose .in { color: #ff9ac0; }
.wl.float.red .in { color: #ff7a6a; }
.wl.name .in { font-size: 13px; color: var(--ink); background: rgba(20, 18, 48, .8); border: 1px solid var(--gold); border-radius: 3px; }
.wl.dots .in { font-family: 'Pixelify Sans'; font-size: 16px; padding: 3px 10px; animation: bob 1.4s ease-in-out infinite; }
.wl.dots .in i { font-style: normal; color: #5a5480; } .wl.dots .in i.on { color: #ffd46a; text-shadow: 0 0 6px rgba(255, 200, 100, .8); }
@keyframes bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -4px; } }
@keyframes floatUp { 0% { opacity: 0; margin-top: 6px; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -46px; } }
.edge-ptr { position: absolute; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--gold); background: rgba(20, 18, 48, .85); display: grid; place-items: center; font-family: 'Pixelify Sans'; color: #ff9a6a; font-size: 20px; animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(255, 160, 90, .35); } }

/* apresentação */
#perf { position: absolute; inset: 0; pointer-events: none; }
#cue-ring { position: absolute; left: 0; top: 0; width: 0; height: 0; }
#cue-ring .ring { position: absolute; left: -44px; top: -44px; width: 88px; height: 88px; border-radius: 50%; border: 4px solid #ffe08a; box-shadow: 0 0 12px rgba(255, 210, 120, .8), inset 0 0 8px rgba(255, 210, 120, .5); }
#cue-ring .icon { position: absolute; left: -24px; top: -30px; width: 48px; height: 60px; image-rendering: pixelated; }
#cue-ring .target { position: absolute; left: -44px; top: -44px; width: 88px; height: 88px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .5); }
#cue-row { position: absolute; left: 50%; bottom: calc(22% + var(--safe-b)); transform: translateX(-50%); display: flex; gap: 10px; }
#cue-row i { width: 16px; height: 16px; border: 2px solid var(--gold); background: #1a1840; transform: rotate(45deg); }
#cue-row i.perfect { background: #ffe27a; box-shadow: 0 0 8px #ffc864; } #cue-row i.good { background: #9df0c0; } #cue-row i.miss, #cue-row i.wrong { background: #5a3a4a; }
#judge { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-family: 'Pixelify Sans'; font-size: 34px; font-weight: 700; color: #ffe27a; text-shadow: 3px 3px 0 #2a1840; }
#judge.show { animation: pop .45s cubic-bezier(.2, 1.4, .4, 1); }

/* telas */
.screen { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: radial-gradient(ellipse at 50% 40%, rgba(14, 12, 40, .25), rgba(8, 8, 24, .72)); z-index: 5; }
#title { background: linear-gradient(180deg, rgba(12, 10, 34, .78) 0%, rgba(12, 10, 34, .25) 34%, rgba(12, 10, 34, 0) 50%, rgba(12, 10, 34, .35) 68%, rgba(12, 10, 34, .82) 100%); align-items: stretch; padding: calc(4vh + var(--safe-t)) 16px calc(4vh + var(--safe-b)); }
.title-card { height: 100%; justify-content: space-between; }
.title-top { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.title-bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.title-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
#title-tania { width: 96px; height: 120px; image-rendering: pixelated; animation: bob 2.2s ease-in-out infinite; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); }
h1 { font-family: 'Pixelify Sans', monospace; font-weight: 700; margin: 0; font-size: clamp(38px, 7vw, 72px); line-height: 1; letter-spacing: 1px; color: #ffe9b0;
  text-shadow: 0 4px 0 #b0602a, 0 8px 0 #4a2240, 0 0 28px rgba(255, 190, 100, .6); }
h1 span { display: block; font-size: .5em; color: #fff4de; text-shadow: 0 3px 0 #4a2240; }
.sub { margin: 4px 0 10px; font-family: 'Pixelify Sans'; font-size: 22px; color: var(--amber); letter-spacing: 3px; text-transform: uppercase; }
.menu { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 260px; }
.btn { padding: 10px 18px; font-size: 18px; background: linear-gradient(180deg, #2c2e6a, #17173e); border: 2px solid var(--gold); border-radius: 4px; box-shadow: 0 4px 0 #0c0a20; }
.btn:hover, .btn:focus-visible { filter: brightness(1.2); outline: none; }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #0c0a20; }
.btn.gold { background: linear-gradient(180deg, #ffe08a, #e0a040); color: #2a1a30; font-family: 'Pixelify Sans'; font-weight: 700; font-size: 22px; box-shadow: 0 5px 0 #8a4a20; border-color: #fff0c0; }
.btn.danger { border-color: #e08070; color: #ffc0b0; font-size: 15px; }
.credit { margin-top: 14px; max-width: 520px; font-size: 13px; color: var(--ink2); line-height: 1.5; text-shadow: 0 1px 0 #000; }
.dialog { padding: 18px 22px; max-width: min(92vw, 420px); max-height: 88vh; overflow: auto; }
.dialog.wide { max-width: min(94vw, 760px); }
.dialog h2 { font-family: 'Pixelify Sans'; color: var(--gold); margin: 0 0 12px; font-size: 26px; }
.dialog h3 { font-family: 'Pixelify Sans'; color: var(--amber); margin: 6px 0; font-size: 18px; }
.dialog p { line-height: 1.55; font-size: 15px; margin: 6px 0; }
.dialog .small { font-size: 13px; color: var(--ink2); }
kbd { font-family: 'Pixelify Sans'; background: #2a2860; border: 1px solid #6a64a8; border-radius: 3px; padding: 0 5px; font-size: 13px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 16px; padding: 4px 2px; }
.row input { flex: 1; accent-color: #ffcf6a; }

/* toque */
#touch { position: absolute; inset: 0; pointer-events: none; }
#stick-zone { position: absolute; left: 0; bottom: 0; width: 55%; height: 55%; pointer-events: auto; }
#stick { position: absolute; left: calc(24px + var(--safe-l)); bottom: calc(26px + var(--safe-b)); width: 124px; height: 124px; border-radius: 50%; border: 3px solid rgba(236, 201, 120, .8); background: rgba(20, 18, 48, .35); }
#knob { position: absolute; left: 34px; top: 34px; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff0b0, #e8a848); box-shadow: 0 3px 0 #8a4a20; }
.tbtn { position: absolute; pointer-events: auto; border-radius: 50%; border: 3px solid #fff0c0; font-family: 'Pixelify Sans'; font-weight: 700; color: #2a1a30; box-shadow: 0 5px 0 rgba(20, 10, 30, .6); touch-action: none; }
.tbtn.big { width: 96px; height: 96px; right: calc(18px + var(--safe-r)); bottom: calc(92px + var(--safe-b)); background: radial-gradient(circle at 35% 30%, #fff4c0, #e8a040); font-size: 20px; }
#t-pular { width: 74px; height: 74px; right: calc(118px + var(--safe-r)); bottom: calc(24px + var(--safe-b)); background: radial-gradient(circle at 35% 30%, #e8f0ff, #9aa8e8); font-size: 16px; }
.tbtn.small { width: 58px; height: 58px; right: calc(28px + var(--safe-r)); bottom: calc(18px + var(--safe-b)); background: radial-gradient(circle at 35% 30%, #fff0f8, #d88ab8); padding: 0; }
.tbtn.small canvas { width: 28px; height: 35px; image-rendering: pixelated; }
.tbtn.held { transform: translateY(3px) scale(.96); box-shadow: 0 2px 0 rgba(20, 10, 30, .6); filter: brightness(1.15); }

#fade { position: absolute; inset: 0; background: #0a0818; opacity: 0; pointer-events: none; transition: opacity .5s; z-index: 4; }
#boot-error { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #2a1830; border: 2px solid #e08070; padding: 16px; max-width: 90vw; z-index: 9; }

/* objetivo, cartaz de bairro, ponteiro do objetivo */
.hud-obj { padding: 6px 12px; font-size: 14px; color: var(--ink2); max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-obj b { color: var(--gold); font-weight: 400; }
#banner { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); text-align: center; pointer-events: none; display: flex; flex-direction: column; gap: 2px; }
#banner b { font-family: 'Pixelify Sans'; font-size: clamp(28px, 5vw, 46px); color: #ffe9b0; text-shadow: 0 3px 0 #b0602a, 0 6px 0 #2a1840, 0 0 18px rgba(255, 190, 100, .5); letter-spacing: 1px; }
#banner span { font-size: 15px; color: var(--ink); text-shadow: 0 2px 0 #1a1030; }
#banner.show { animation: bannerIn 3.2s ease forwards; }
@keyframes bannerIn { 0% { opacity: 0; margin-top: 10px; } 12% { opacity: 1; margin-top: 0; } 78% { opacity: 1; } 100% { opacity: 0; margin-top: -8px; } }
#goal-ptr { position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; border: 2px solid #fff0b0; background: rgba(40, 30, 70, .88); display: grid; place-items: center; pointer-events: none; box-shadow: 0 0 12px rgba(255, 200, 100, .5); }
#goal-ptr i { font-style: normal; color: #ffd46a; font-size: 18px; line-height: 1; }
#goal-ptr b { position: absolute; bottom: -18px; font-family: 'Pixelify Sans'; font-size: 13px; color: #ffe9b0; text-shadow: 0 2px 0 #1a1030; font-weight: 400; }
/* álbum e final */
.fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.foto { margin: 0; text-align: center; }
.foto img, .foto .vazio { width: 100%; aspect-ratio: 176 / 112; display: block; border: 2px solid #5a5480; border-radius: 3px; image-rendering: auto; object-fit: cover; background: #14122e; }
.foto .vazio { display: grid; place-items: center; color: #5a5480; font-family: 'Pixelify Sans'; font-size: 26px; }
.foto.got img, .foto.got .vazio { border-color: var(--gold); color: var(--gold); }
.foto figcaption { font-size: 13px; margin-top: 3px; } .foto figcaption small { display: block; color: var(--ink2); font-size: 11px; }
.album-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; margin-bottom: 12px; }
.fitas { list-style: none; padding: 0; margin: 4px 0; font-size: 14px; }
.fitas li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 2px; border-bottom: 1px dashed rgba(236, 201, 120, .25); }
.fitas li b { color: var(--gold); font-weight: 400; } .fitas li.tot { border-bottom: 0; color: var(--gold); } .fitas em { color: #ffe27a; font-style: normal; }
.roupas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.btn.roupa { font-size: 14px; padding: 6px 8px; display: flex; flex-direction: column; align-items: center; }
.btn.roupa small { font-size: 11px; color: var(--ink2); }
.btn.roupa.on { border-color: #fff0b0; box-shadow: 0 0 0 2px rgba(10, 8, 24, .85), 0 0 12px rgba(255, 200, 100, .6); }
.btn.roupa:disabled { opacity: .4; cursor: default; }
#final .dialog { text-align: center; } #final .fitas { text-align: left; margin: 10px 0 14px; }

@media (max-width: 700px) {
  #hud { max-width: calc(100vw - 116px - var(--safe-r)); gap: 5px; }
  .hud-obj { max-width: 100%; font-size: 12px; padding: 3px 8px; }
  .fotos { grid-template-columns: repeat(2, 1fr); }
  .album-grid { grid-template-columns: 1fr; }
  #banner { top: 20%; }
  .hud-main { gap: 6px; padding: 4px 7px; }
  .hud-hearts { gap: 2px; }
  .hud-hearts canvas { width: 18px; height: 16px; }
  .hud-item { font-size: 14px; gap: 3px; }
  .hud-item canvas { width: 14px; }
  .hud-palcos { padding: 4px 6px; gap: 3px; }
  .hud-palcos canvas { width: 17px; height: 16px; }
  #goal-ptr { width: 40px; height: 40px; }
  #gestos { display: none !important; }
  .toast { font-size: 15px; }
  .wl .in { font-size: 12px; }
  #cue-row { bottom: calc(300px + var(--safe-b)); }
}
#gestos.tap { display: flex !important; pointer-events: auto; bottom: calc(210px + var(--safe-b)); z-index: 3; }
#gestos.tap .gesto { cursor: pointer; min-width: 84px; padding: 8px 10px 6px; }
#gestos.tap .gesto.held { transform: translateY(3px) scale(.95); filter: brightness(1.3); }
#gestos.tap .gesto kbd { display: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

@media (max-width: 700px) { #gestos.tap { bottom: calc(196px + var(--safe-b)); gap: 4px; } #gestos.tap .gesto { min-width: 76px; } }

/* Guia "Como jogar" (kit comum da coleção, como-jogar/): cores e fontes do jogo */
:root {
  --cj-painel: #14143a; --cj-painel-2: #262868; --cj-texto: #fff4de; --cj-suave: #c8c0e8;
  --cj-destaque: #ecc978; --cj-destaque-texto: #2a1a30; --cj-borda: #0c0a20; --cj-raio: 4px;
  --cj-fonte: 'DotGothic16', 'Pixelify Sans', ui-monospace, monospace;
}
.cj-painel h2, .cj-titulo-cartao, .cj-prox { font-family: 'Pixelify Sans', monospace; }
/* Pixelify Sans em negrito, nesses tamanhos, fecha o "c" (fica parecido com "o") em tela comum: peso 500 */
.cj-painel h2, .cj-titulo-cartao { font-weight: 500; }
.cj-painel h2 { color: var(--cj-destaque); }
canvas.cj-retrato { width: 38px; height: 48px; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }

/* Tutorial jogável: passo i/3 no pedido e anel pulsando no controle de toque da vez */
.wl.hint .in small.passo { font-family: 'Pixelify Sans'; font-size: 12px; color: #fff4de; background: #b0602a; border-radius: 2px; padding: 0 4px; margin-right: 2px; }
.tuto-alvo { animation: tutoAlvo 1s ease-in-out infinite; }
#stick.tuto-alvo { border-color: #fff0b0; }
@keyframes tutoAlvo { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 240, 176, .95), 0 0 0 8px rgba(255, 200, 100, .35); } 50% { box-shadow: 0 0 0 3px rgba(255, 240, 176, .95), 0 0 0 16px rgba(255, 200, 100, 0); } }
@media (prefers-reduced-motion: reduce) { .tuto-alvo { box-shadow: 0 0 0 3px #fff0b0, 0 0 0 7px rgba(255, 200, 100, .5) !important; } }

/* "!" legível nos avisos: a DotGothic16 em negrito desenha o "!" como uma barra; a Pixelify Sans não */
.excl { font-family: 'Pixelify Sans', monospace; font-weight: 700; font-style: normal; color: #ff9a6a; padding: 0 1px; }
/* Guia: listas de dicas (mesma caixa dos controles). O rótulo da dica é um assunto, não uma tecla: contorno em vez
   da tecla cheia. [M], [H], [II]… dentro do texto de um item viram teclas menores. */
.cj-dicas { padding-top: 6px; }
.cj-dicas .cj-icones kbd { background: transparent; color: var(--cj-destaque); border: 2px solid var(--cj-destaque); }
.cj-acao kbd { min-width: 22px; height: 22px; padding: 0 4px; font-size: .75rem; border-bottom-width: 3px; margin: 0 1px; vertical-align: 1px; }
/* Rótulo do aparelho e "Ver controles de…" na mesma linha quando cabem (senão o botão desce, antes da lista):
   o conjunto do teclado tem 5 linhas e o cartão continua cabendo sem rolagem em 1280×800, 390×844 e 844×390. */
.cj-controles:not(.cj-dicas) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.cj-controles .cj-rotulo { flex: 1 1 auto; margin: 0; }
.cj-controles .cj-troca { order: 1; margin: 0 0 0 auto; }
.cj-controles .cj-lista { order: 2; flex: 1 1 100%; margin-top: 6px; }
/* Linhas das listas mais baixas que botões (não são botões; os ícones de toque seguram 40 px): o cartão de controles
   com as 5 linhas do teclado fica da altura dos outros em 1280×800 (o painel não pula). Os textos de uma lista começam
   todos na mesma coluna (a das teclas mais largas da lista). */
.cj-lista li { min-height: 34px; }
@supports (grid-template-columns: subgrid) {
  .cj-lista { grid-template-columns: max-content minmax(0, 1fr); column-gap: 10px; }
  .cj-lista li { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; }
  .cj-icones { min-width: 0; }
}
/* Celular em pé: o botão volta para baixo da lista (como no kit); teclas mais estreitas e texto um pouco menor */
@media (max-width: 520px) {
  .cj-controles .cj-troca { order: 3; margin: 6px 0 0; }
  .cj-lista { gap: 4px; column-gap: 8px; }
  .cj-painel kbd { padding: 0 4px; }
  .cj-icones { gap: 2px; }
  .cj-acao { font-size: .88rem; }
}
/* Celular deitado: linhas ainda mais baixas para os 5 itens do teclado e as dicas caberem sem rolagem em 844×390 */
@media (max-height: 520px) and (orientation: landscape) {
  .cj-lista { gap: 2px; }
  .cj-lista li { min-height: 26px; }
  .cj-painel kbd { height: 24px; min-width: 24px; font-size: .78rem; border-bottom-width: 3px; }
  .cj-painel .cj-acao kbd { height: 20px; min-width: 20px; font-size: .72rem; border-bottom-width: 2px; }
  .cj-gesto svg { width: 24px !important; height: 24px !important; }
  .cj-dicas { padding-top: 4px; }
  .cj-controles .cj-lista { margin-top: 4px; }
  .cj-cartao { row-gap: 6px; }
}