@font-face { font-family: 'DotGothic16'; src: url('./vendor/DotGothic16-latin.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Pixelify Sans'; src: url('./vendor/PixelifySans.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }
:root {
  --fundo: #2b1a24; --painel: rgba(46, 26, 38, 0.94); --painel2: rgba(30, 16, 26, 0.94);
  --borda: #f2c26b; --rosa: #f2a2ba; --rosa-esc: #c4466e; --menta: #9fd9c4; --creme: #fff4e6; --texto2: #e2c9d4;
  --ok: #8fe3a4; --perigo: #ff8a7a; --ouro: #ffd166;
  --fonte: 'DotGothic16', 'Pixelify Sans', system-ui, sans-serif; --titulo: 'Pixelify Sans', system-ui, sans-serif;
  --seg-topo: env(safe-area-inset-top, 0px); --seg-baixo: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--fundo); color: var(--creme); font-family: var(--fonte); -webkit-tap-highlight-color: transparent; }
body { touch-action: none; user-select: none; -webkit-user-select: none; }
#jogo { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.vinheta { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(20, 8, 16, 0.55) 100%); }
button { font-family: inherit; }
h1, h2, h3, .bt, .chip, .selo, .rot, .pedido .nome, .estado-est .caixinha, .tut-balao .passo { font-family: var(--titulo); }
.loja .bt, .bloco b, dd, .flutua { font-family: var(--fonte); font-variant-numeric: tabular-nums; }
kbd, .tec { font-family: inherit; font-size: 11px; font-weight: 700; background: var(--creme); color: #3b2030; border-radius: 3px; padding: 0 4px; box-shadow: 0 2px 0 #b79aa6; display: inline-block; line-height: 16px; min-width: 16px; text-align: center; }
[hidden] { display: none !important; }
.px-icone { image-rendering: pixelated; display: block; }

/* ---------- telas */
.tela { position: fixed; inset: 0; display: grid; place-items: safe center; padding: 16px; z-index: 30; background: rgba(28, 12, 22, 0.42); overflow-y: auto; touch-action: pan-y; }
.tela.abertura { background: linear-gradient(180deg, rgba(28, 12, 22, 0.25), rgba(28, 12, 22, 0.72)); }
.caixa { width: min(560px, 100%); background: linear-gradient(180deg, var(--painel), var(--painel2)); border: 2px solid var(--borda); border-radius: 6px; padding: 20px 22px; box-shadow: 0 0 0 3px #1a0c14, 0 18px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.06); text-align: center; animation: entra 0.28s cubic-bezier(.2, 1.3, .4, 1); }
.caixa.larga { width: min(760px, 100%); }
.caixa.rolavel { max-height: calc(100vh - 32px); overflow-y: auto; text-align: left; }
@keyframes entra { from { transform: translateY(14px) scale(0.97); opacity: 0; } }
h1 { font-size: clamp(34px, 7vw, 54px); margin: 4px 0 6px; color: var(--creme); text-shadow: 3px 3px 0 var(--rosa-esc), 6px 6px 0 #1a0c14; letter-spacing: 1px; line-height: 1; }
h2 { font-size: 26px; margin: 0 0 10px; color: var(--ouro); text-shadow: 2px 2px 0 #1a0c14; }
h3 { font-size: 17px; margin: 12px 0 4px; color: var(--rosa); }
.sub { color: var(--texto2); font-size: 16px; line-height: 1.45; margin: 8px 0; }
.selo { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--menta); margin: 0; }
.aviso-ficcao { font-size: 12px; color: #bda3b0; margin: 14px 0 0; line-height: 1.4; }
.pisca { font-size: 20px; animation: pisca 1s steps(2) infinite; }
@keyframes pisca { 50% { opacity: 0.4; } }
.botoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.botoes.coluna { flex-direction: column; align-items: stretch; max-width: 300px; margin-inline: auto; }
.botoes.mini { margin-top: 8px; }
.bt { font-size: 18px; font-weight: 700; min-height: 46px; padding: 8px 20px; border-radius: 5px; border: 2px solid #1a0c14; cursor: pointer; color: #3b1428; background: var(--rosa); box-shadow: 0 4px 0 #9c3a5e, inset 0 2px 0 rgba(255, 255, 255, 0.45); transition: transform 0.06s; }
.bt:hover { filter: brightness(1.07); } .bt:active { transform: translateY(3px); box-shadow: 0 1px 0 #9c3a5e; }
.bt.sec { background: var(--menta); box-shadow: 0 4px 0 #4f9a80, inset 0 2px 0 rgba(255, 255, 255, 0.45); color: #173a30; }
.bt.ter { background: transparent; color: var(--creme); border-color: rgba(255, 244, 230, 0.35); box-shadow: none; font-size: 16px; min-height: 44px; }
.bt:disabled { opacity: 0.45; cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--ouro); outline-offset: 2px; }

/* abertura */
.abertura .caixa { width: min(620px, 100%); }
.abertura-corpo { display: flex; gap: 16px; align-items: center; text-align: left; }
.retrato-grande { width: 128px; height: 192px; image-rendering: pixelated; flex: none; filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.35)); }
.abertura-marca { display: flex; align-items: flex-end; gap: 12px; flex: none; }
.logo-abertura { width: 124px; aspect-ratio: 650 / 1024; background: #ffffff; border-radius: 6px; padding: 5px; box-shadow: 0 0 0 2px #1a0c14, 0 6px 14px rgba(0, 0, 0, 0.35); }
.logo-abertura canvas, .logo-abertura img { width: 100%; height: 100%; display: block; object-fit: contain; }

/* caderno */
.modo { display: flex; gap: 8px; justify-content: center; }
.chip { font-size: 15px; font-weight: 700; padding: 6px 14px; min-height: 40px; border-radius: 20px; border: 2px solid var(--borda); background: transparent; color: var(--creme); cursor: pointer; }
.chip[aria-checked="true"] { background: var(--borda); color: #3b1428; }
.carteira { color: var(--ouro); font-size: 15px; margin: 6px 0; }
.dias { list-style: none; padding: 0; margin: 10px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dias button { width: 100%; min-height: 78px; border-radius: 5px; border: 2px solid rgba(255, 244, 230, 0.25); background: rgba(255, 255, 255, 0.05); color: var(--creme); cursor: pointer; font-size: 13px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.dias button b { font-size: 20px; color: var(--ouro); }
.dias button.atual { border-color: var(--rosa); background: rgba(242, 162, 186, 0.16); }
.dias button[aria-pressed="true"] { outline: 3px solid var(--ouro); }
.dias button:disabled { opacity: 0.4; cursor: not-allowed; }
.estrelinhas { letter-spacing: 1px; color: var(--ouro); }
.vitrine-especial { font-size: 14px; color: var(--texto2); }
.loja { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; text-align: left; }
.loja li { display: flex; gap: 10px; align-items: center; background: rgba(255, 255, 255, 0.05); border-radius: 5px; padding: 8px 10px; }
.loja li div { flex: 1; } .loja li p { margin: 2px 0 0; font-size: 14px; color: var(--texto2); }
.loja .bt { font-size: 15px; min-height: 42px; padding: 4px 12px; }

/* intro do dia */
.intro-receitas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 8px 0; }
.intro-receitas figure { margin: 0; display: flex; flex-direction: column; align-items: center; font-size: 13px; color: var(--texto2); }
.intro-receitas figure b { color: var(--creme); font-size: 14px; }
.metas { list-style: none; padding: 0; margin: 8px 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.metas li { background: rgba(255, 255, 255, 0.07); border-radius: 4px; padding: 4px 10px; font-size: 14px; }

/* resultado */
.estrelas { display: flex; gap: 10px; justify-content: center; margin: 8px 0; }
.estrelas span { width: 46px; height: 46px; background: #4a3040; clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 35%); }
.estrelas span.on { background: var(--ouro); animation: estrela 0.5s cubic-bezier(.2, 1.6, .4, 1) both; }
.estrelas span.on:nth-child(2) { animation-delay: 0.18s; } .estrelas span.on:nth-child(3) { animation-delay: 0.36s; }
@keyframes estrela { from { transform: scale(0) rotate(-40deg); } }
.res-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.res-numeros div { background: rgba(255, 255, 255, 0.06); border-radius: 4px; padding: 6px 4px; }
.res-numeros dt { font-size: 12px; color: var(--texto2); } .res-numeros dd { margin: 0; font-size: 20px; font-weight: 700; }

/* opções */
.opcoes { display: grid; gap: 10px; margin-top: 12px; text-align: left; }
.opcoes .linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.opcoes .linha > span { min-width: 92px; color: var(--texto2); font-size: 15px; }
.opcoes input[type=range] { flex: 1; min-width: 140px; accent-color: var(--rosa); height: 28px; }
.ajuda-controles { text-align: left; font-size: 14px; color: var(--texto2); }
.ajuda-controles p { margin: 6px 0; line-height: 1.45; }

/* ---------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.barra { position: absolute; top: calc(8px + var(--seg-topo)); left: 8px; right: 8px; display: flex; gap: 6px; align-items: stretch; }
.bloco { background: var(--painel); border: 2px solid rgba(242, 194, 107, 0.75); border-radius: 5px; padding: 3px 10px; display: flex; flex-direction: column; justify-content: center; min-width: 64px; box-shadow: 0 0 0 2px #1a0c14; }
.bloco .rot, .slot .rot { font-size: 11px; color: var(--texto2); text-transform: uppercase; letter-spacing: 0.8px; }
.bloco b { font-size: 18px; line-height: 1.1; white-space: nowrap; }
.bloco.dia { flex: 0 1 auto; min-width: 0; } .bloco.dia b { overflow: hidden; text-overflow: ellipsis; }
.bloco.combo { background: #7a2a4a; border-color: var(--ouro); } .bloco.combo b { color: var(--ouro); }
.bloco.pulo { animation: pulo 0.35s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes pulo { 40% { transform: scale(1.18); } }
.bloco.alerta b { color: var(--perigo); }
.botoes-topo { margin-left: auto; display: flex; gap: 6px; pointer-events: auto; }
.bt-icone { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--borda); background: var(--painel); cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 2px #1a0c14; }
.bt-icone svg { width: 22px; height: 22px; fill: var(--creme); stroke: var(--creme); }
.bt-icone.mudo .onda { display: none; } .bt-icone.mudo svg { opacity: 0.5; }
.bandeja { position: absolute; left: 8px; bottom: calc(8px + var(--seg-baixo)); display: flex; gap: 8px; align-items: center; background: var(--painel); border: 2px solid rgba(242, 194, 107, 0.75); border-radius: 6px; padding: 6px 10px 6px 6px; box-shadow: 0 0 0 2px #1a0c14; max-width: min(640px, calc(100vw - 16px)); }
.bandeja .retrato canvas { width: 64px; height: 64px; image-rendering: pixelated; background: #4a2c3c; border-radius: 4px; display: block; }
.slot { display: flex; flex-direction: column; align-items: center; min-width: 84px; }
.slot .ic { width: 64px; height: 64px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); border-radius: 4px; }
.slot b { font-size: 13px; max-width: 110px; text-align: center; line-height: 1.15; }
.slot.apoio .ic { width: 48px; height: 48px; } .slot.apoio .ic canvas { width: 48px !important; height: 48px !important; }
.slot.pulo .ic { animation: pulo 0.3s; }
.dica { margin: 0 4px; font-size: 15px; line-height: 1.3; max-width: 260px; color: var(--creme); }
#aviso { position: absolute; left: 50%; top: calc(74px + var(--seg-topo)); transform: translateX(-50%); background: #3b1428; border: 2px solid var(--rosa); border-radius: 5px; padding: 6px 14px; font-size: 16px; max-width: min(520px, 92vw); text-align: center; opacity: 0; transition: opacity 0.2s; }
#aviso.on { opacity: 1; }
#aviso.ok { border-color: var(--ok); }

/* ---------- elementos ancorados no mundo */
#mundo-ui { position: fixed; inset: 0; pointer-events: none; z-index: 9; }
.ancora { position: absolute; left: 0; top: 0; will-change: transform; }
.pedido { pointer-events: auto; cursor: pointer; transform-origin: 50% 100%; }
.centro { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); }
.pedido .bolha { position: relative; background: #fff8ef; color: #3b2030; border: 2px solid #1a0c14; border-radius: 6px; padding: 3px 5px 5px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 3px 0 rgba(26, 12, 20, 0.5); min-width: 76px; }
.pedido .bolha::after { content: ''; position: absolute; bottom: -8px; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #1a0c14; border-bottom: 0; }
.pedido .nome { font-size: 12px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.pedido .paciencia { width: 64px; height: 7px; background: #e8d6cc; border-radius: 3px; overflow: hidden; margin-top: 3px; border: 1px solid #b89aa8; }
.pedido .paciencia i { display: block; height: 100%; background: #5fbf7a; width: 100%; transform-origin: 0 50%; }
.pedido.pressa .paciencia i { background: #ff7a5a; }
.pedido.pressa .bolha { animation: treme 0.5s infinite; }
@keyframes treme { 25% { transform: translateX(-1px); } 75% { transform: translateX(1px); } }
.pedido .tecla { position: absolute; top: -8px; left: -8px; }
.pedido.especial .bolha { background: #fff3c8; border-color: #8a5a10; box-shadow: 0 0 0 2px var(--ouro), 0 3px 0 rgba(26, 12, 20, 0.5); }
.pedido .selo-esp { font-size: 10px; font-weight: 700; color: #8a4a10; letter-spacing: 0.5px; }
.pedido .estrela { position: absolute; top: -9px; right: -9px; color: var(--ouro); font-size: 18px; text-shadow: 1px 1px 0 #1a0c14; }
.pedido.combina .bolha { box-shadow: 0 0 0 3px var(--ok), 0 3px 0 rgba(26, 12, 20, 0.5); }
.estado-est { transform-origin: 50% 100%; }
.estado-est .caixinha { position: relative; background: rgba(46, 26, 38, 0.92); border: 2px solid #1a0c14; border-radius: 4px; padding: 2px 6px; font-size: 12px; font-weight: 700; white-space: nowrap; text-align: center; min-width: 58px; }
.estado-est .barra-p { height: 5px; background: #4a3040; border-radius: 2px; margin-top: 2px; overflow: hidden; }
.estado-est .barra-p i { display: block; height: 100%; background: var(--ouro); transform-origin: 0 50%; }
.estado-est.pronto .caixinha { background: #2f6a44; color: #eaffef; animation: pula 0.6s infinite; }
.estado-est.aviso .caixinha { background: #9a3a20; color: #fff1e0; animation: treme 0.25s infinite; }
.estado-est.queimou .caixinha { background: #1a1014; color: #ffb09a; }
@keyframes pula { 50% { transform: translateY(-4px); } }
.chip-tecla { transform: translate(-50%, -50%); opacity: 0.92; }
.flutua { position: absolute; font-size: 20px; font-weight: 700; color: var(--ouro); text-shadow: 2px 2px 0 #1a0c14; white-space: nowrap; animation: flutua 1.1s ease-out forwards; transform: translate(-50%, 0); }
.flutua.ruim { color: var(--perigo); font-size: 16px; }
@keyframes flutua { to { transform: translate(-50%, -54px); opacity: 0; } }
.fala { transform-origin: 50% 100%; }
.fala .bolha-fala { position: relative; background: #fff8ef; color: #3b2030; border: 2px solid #1a0c14; border-radius: 6px; padding: 5px 9px; font-size: 14px; max-width: 240px; width: max-content; line-height: 1.3; box-shadow: 0 3px 0 rgba(26, 12, 20, 0.5); }
.cursor-tec { width: 0; height: 0; }
.cursor-tec::before { content: ''; position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border: 3px dashed var(--ouro); border-radius: 50%; animation: gira 3s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* tutorial */
.tut { z-index: 12; }
.tut .seta { position: absolute; left: -12px; top: -30px; width: 24px; height: 24px; background: var(--ouro); clip-path: polygon(0 0, 100% 0, 100% 40%, 75% 40%, 50% 100%, 25% 40%, 0 40%); animation: pula 0.6s infinite; filter: drop-shadow(2px 2px 0 #1a0c14); }
.tut .anel { position: absolute; left: -30px; top: -14px; width: 60px; height: 28px; border: 3px solid var(--ouro); border-radius: 50%; animation: anel 1.1s infinite; }
@keyframes anel { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
.tut-balao { position: fixed; z-index: 12; left: 50%; transform: translateX(-50%); bottom: calc(96px + var(--seg-baixo)); background: #fff8ef; color: #3b2030; border: 2px solid #1a0c14; border-radius: 8px; box-shadow: 0 0 0 3px var(--ouro), 0 6px 0 rgba(26, 12, 20, 0.45); padding: 8px 12px; font-size: 16px; line-height: 1.35; width: min(520px, calc(100vw - 24px)); pointer-events: auto; display: flex; gap: 10px; align-items: center; }
.tut-balao canvas { width: 48px; height: 72px; image-rendering: pixelated; flex: none; }
.tut-balao .passo { font-size: 12px; color: #8a5a70; display: block; }
.tut-balao .erro { color: #b0304a; font-weight: 700; }
.tut-balao .pular { margin-left: auto; font-size: 13px; min-height: 36px; padding: 4px 10px; border-radius: 4px; border: 2px solid #b79aa6; background: transparent; color: #6a4a5a; cursor: pointer; flex: none; }

/* ---------- tela estreita */
@media (max-width: 700px) {
  .barra { gap: 4px; left: 6px; right: 6px; }
  .bloco { padding: 2px 6px; min-width: 0; } .bloco b { font-size: 15px; } .bloco .rot { font-size: 9px; }
  .bloco.dia .rot { display: none; }
  .bloco.pontos { display: none; }
  .bt-icone { width: 42px; height: 42px; }
  .bandeja { left: 6px; right: 6px; padding: 4px 6px 4px 4px; gap: 6px; }
  .bandeja .retrato canvas { width: 48px; height: 48px; }
  .slot { min-width: 64px; } .slot .ic { width: 52px; height: 52px; } .slot .ic canvas { width: 52px !important; height: 52px !important; }
  .slot.apoio .ic, .slot.apoio .ic canvas { width: 40px !important; height: 40px !important; }
  .dica { font-size: 13px; }
  .pedido .bolha { min-width: 60px; padding: 2px 3px 4px; } .pedido .nome { font-size: 10px; } .pedido .paciencia { width: 50px; }
  .pedido .bolha canvas { width: 40px !important; height: 40px !important; }
  .abertura-corpo { flex-direction: column; text-align: center; }
  .retrato-grande { width: 96px; height: 144px; }
  .logo-abertura { width: 92px; }
  .dias { grid-template-columns: repeat(4, 1fr); gap: 5px; } .dias button { min-height: 64px; font-size: 11px; }
  .tut-balao { bottom: calc(88px + var(--seg-baixo)); font-size: 14px; }
  .tut-balao canvas { width: 32px; height: 48px; }
  h2 { font-size: 22px; } .caixa { padding: 16px 14px; }
  .res-numeros { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.toque { position: fixed; z-index: 20; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 3px solid rgba(255, 244, 230, 0.9); border-radius: 50%; pointer-events: none; animation: toque 0.42s ease-out forwards; box-shadow: 0 0 0 2px rgba(26, 12, 20, 0.35); }
@keyframes toque { from { transform: scale(0.35); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }

/* ---------- guia "Como jogar" */
.caixa.guia { width: min(600px, 100%); padding: 14px 16px 16px; text-align: left; }
.guia-topo { display: flex; align-items: center; gap: 10px; }
.guia-bruna { width: 48px; height: 72px; image-rendering: pixelated; flex: none; }
.guia-cabeca { flex: 1; min-width: 0; } .guia-cabeca h2 { margin: 2px 0 0; font-size: 22px; }
.guia-pular { min-height: 44px; font-size: 15px; padding: 4px 12px; }
.guia-palco { margin: 10px 0 6px; border-radius: 6px; overflow: hidden; background: #1a0c14; border: 2px solid #1a0c14; position: relative; }
.guia-video { position: relative; aspect-ratio: 4 / 3; }
.guia-video video, .guia-video img { width: 100%; height: 100%; display: block; object-fit: cover; image-rendering: auto; }
.guia-play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(26, 12, 20, 0.25); border: 0; cursor: pointer; color: var(--creme); font: 700 18px var(--titulo); }
.guia-play span { background: var(--rosa); color: #3b1428; border: 2px solid #1a0c14; border-radius: 30px; padding: 8px 18px; }
.guia-controles { display: grid; gap: 6px; padding: 6px; background: #2a1822; }
.guia-controles .linha-c { background: rgba(46, 26, 38, 0.93); border: 2px solid var(--borda); border-radius: 6px; padding: 6px 8px; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.guia-controles .linha-c b { font-family: var(--titulo); color: var(--ouro); min-width: 64px; }
.guia-controles .tec { font-size: 12px; }
.guia-controles .dedo { width: 22px; height: 22px; display: inline-block; }
.guia-controles .alternar { margin-left: auto; font-size: 13px; min-height: 36px; padding: 2px 10px; }
.guia-texto { margin: 6px 0 10px; font-size: 16px; line-height: 1.45; min-height: 2.9em; color: var(--creme); }
.guia-nav { display: flex; align-items: center; gap: 10px; }
.guia-nav .bt { min-height: 46px; } .guia-ant { padding: 4px 16px; font-size: 22px; }
.guia-prox { margin-left: auto; }
.guia-pontos { display: flex; gap: 6px; flex: 1; justify-content: center; }
.guia-pontos button { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--borda); background: transparent; padding: 0; cursor: pointer; }
.guia-pontos button[aria-selected="true"] { background: var(--borda); }
@media (max-width: 700px) { .guia-bruna { width: 32px; height: 48px; } .guia-texto { font-size: 14px; } .guia-cabeca h2 { font-size: 19px; } .guia-controles .linha-c { font-size: 12px; } }
@media (pointer: coarse) { .slot .tec { display: none; } }
.res-bolo { margin: 6px auto 0; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ouro); font-family: var(--titulo); }
.res-bolo canvas { filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.35)); }

/* ---------- 2.1.0: andar */
.motor-joy-base { position: fixed; width: 112px; height: 112px; margin: -56px 0 0 -56px; border: 3px solid rgba(255, 244, 230, .55); border-radius: 50%; background: rgba(43, 26, 36, .35); pointer-events: none; z-index: 11; }
.motor-joy-pino { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(242, 162, 186, .92); border: 3px solid #1a0c14; }
.nome-destaque .rotulo-d { display: inline-block; white-space: nowrap; background: #fff8ef; color: #3b2030; border: 2px solid #1a0c14; border-radius: 5px; padding: 1px 7px; font: 700 13px var(--titulo); box-shadow: 0 2px 0 rgba(26, 12, 20, .45); }
.nome-destaque .rotulo-d .tec { margin-right: 2px; }
.bt-usar { display: none; position: fixed; right: 12px; bottom: calc(96px + var(--seg-baixo)); z-index: 11; width: 84px; height: 84px; border-radius: 50%; border: 3px solid #1a0c14; background: var(--rosa); color: #3b1428; box-shadow: 0 5px 0 #9c3a5e; flex-direction: column; align-items: center; justify-content: center; gap: 1px; pointer-events: auto; touch-action: none; font-family: var(--titulo); }
.bt-usar b { font-size: 17px; } .bt-usar small { font-size: 10px; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-usar.apagado { opacity: .55; } .bt-usar.ativo { transform: translateY(3px); box-shadow: 0 2px 0 #9c3a5e; }
@media (pointer: coarse) { body.em-jogo .bt-usar { display: flex; } }
@media (pointer: coarse) { body.em-jogo .tut-balao { left: 8px; transform: none; width: calc(100vw - 112px); } body.em-jogo .tut-balao .pular { padding: 4px 6px; } }