/* Rabiscolândia: cena 3D, HUD, minimapa, balão, Rabisfone e controles de toque */
.cena-rp { position: absolute; inset: 0; overflow: hidden; }
.cena-rp > canvas:not(.minimapa-rp) { display: block; width: 100%; height: 100%; touch-action: none; }
.hud-rp { position: absolute; z-index: 5; left: 12px; top: calc(env(safe-area-inset-top, 0px) + 74px); pointer-events: none; font-family: var(--texto); }
.chip-rp { display: inline-block; background: rgba(255,255,255,0.92); border: 4px solid var(--tinta); border-radius: 999px; box-shadow: 0 4px 0 var(--tinta); padding: 0 14px; font-weight: 800; font-size: 18px; }
.minimapa-rp { position: absolute; z-index: 5; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 74px); width: 168px; height: 168px; border: 4px solid var(--tinta); border-radius: 18px; box-shadow: 0 4px 0 var(--tinta); cursor: pointer; }
.btn-fone-rp { position: absolute; z-index: 6; left: 12px; bottom: 18px; display: flex; align-items: center; gap: 6px; padding: 4px 16px 6px; border-radius: 999px; cursor: pointer;
  background: #fff; border: 5px solid var(--tinta); box-shadow: 0 5px 0 var(--tinta); font: 800 20px var(--texto); color: var(--tinta); }
body.touch .btn-fone-rp { display: none; }
.acao-rp { position: absolute; z-index: 8; right: 26px; bottom: 30px; min-width: 120px; padding: 6px 16px 8px; border-radius: 999px; cursor: pointer;
  background: #ffcc1f; border: 5px solid var(--tinta); box-shadow: 0 5px 0 var(--tinta); font: 800 21px var(--texto); color: var(--tinta); animation: acao-rp 1s ease-in-out infinite alternate; }
.acao-rp[hidden] { display: none; }
.acao-rp kbd { display: inline-block; min-width: 26px; margin-left: 6px; padding: 0 6px; border: 3px solid var(--tinta); border-radius: 8px; background: #fff; font: 800 16px var(--texto); }
@keyframes acao-rp { to { transform: scale(1.06); } }
.bussola-rp { position: absolute; z-index: 6; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 80px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.92); border: 4px solid var(--tinta); border-radius: 999px; box-shadow: 0 4px 0 var(--tinta); padding: 2px 14px 2px 4px; pointer-events: none; font: 800 18px var(--texto); }
.bussola-rp[hidden] { display: none; }
.bussola-rp .seta { width: 38px; height: 38px; border-radius: 50%; background: var(--rosa); display: grid; place-items: center; color: #fff; font-size: 22px; transition: transform 0.12s linear; }
.balao-rp { position: absolute; z-index: 7; left: 50%; bottom: 24px; transform: translate(-50%, 160%); max-width: min(620px, 64vw);
  background: #fff; border: 5px solid var(--tinta); border-radius: 24px; box-shadow: 0 6px 0 var(--tinta); padding: 10px 18px 12px;
  font: 700 19px var(--texto); line-height: 1.3; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; }
.balao-rp b { display: block; color: var(--rosa); font-size: 15px; }
.balao-rp.ativo { transform: translate(-50%, 0); }
.balao-rp .prop-insta { display: block; color: var(--rosa); overflow-wrap: anywhere; }
/* mapa grande (mapa-ui.js): janela de papel, mapa com alfinetes à esquerda e a lista de lugares à direita (embaixo no celular em pé) */
.mapa-grande-rp { position: absolute; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; background: rgba(10,42,74,0.6);
  padding: calc(env(safe-area-inset-top, 0px) + 10px) calc(env(safe-area-inset-right, 0px) + 10px) calc(env(safe-area-inset-bottom, 0px) + 10px) calc(env(safe-area-inset-left, 0px) + 10px); box-sizing: border-box; font-family: var(--texto); }
.mapa-grande-rp[hidden] { display: none; }
html.mapa-rp-aberto .casca-topo, html.mapa-rp-aberto .pausa-botao { display: none !important; }
.mp-janela { width: min(1500px, 100%); height: min(960px, 100%); display: flex; flex-direction: column; background: #fff8e8; border: 5px solid var(--tinta); border-radius: 28px; box-shadow: 8px 10px 0 var(--tinta); overflow: hidden; animation: mp-entra 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes mp-entra { from { transform: scale(0.92) translateY(20px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mp-janela { animation: none; } }
.mp-topo { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 18px; background: var(--amarelo); border-bottom: 4px solid var(--tinta); }
.mp-topo h2 { flex: 1; margin: 0; font: 800 24px var(--titulo); color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-fechar { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--tinta); background: #fff; box-shadow: 0 4px 0 var(--tinta); font: 800 22px var(--texto); color: var(--tinta); cursor: pointer; }
.mp-corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(270px, 30%, 380px); gap: 12px; padding: 12px; }
.mp-area { position: relative; min-height: 0; min-width: 0; border: 4px solid var(--tinta); border-radius: 20px; overflow: hidden; background: #3fa9ef; }
.mp-tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.mp-tela:active { cursor: grabbing; }
.mp-zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 8px; }
.mp-zoom button { width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--tinta); background: #fff; box-shadow: 0 4px 0 var(--tinta); font: 800 26px/1 var(--texto); color: var(--tinta); cursor: pointer; padding: 0; }
.mp-norte { position: absolute; left: 10px; top: 10px; width: 42px; height: 42px; border-radius: 50%; border: 4px solid var(--tinta); background: #fff; display: grid; place-items: center; font: 800 17px/1 var(--texto); color: var(--tinta); pointer-events: none; }
.mp-norte i { position: absolute; top: -13px; font-style: normal; font-size: 13px; color: var(--rosa); -webkit-text-stroke: 1px var(--tinta); }
.mp-cartao { position: absolute; left: 10px; right: 66px; bottom: 10px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #fff; border: 4px solid var(--tinta); border-left: 12px solid var(--cor, var(--rosa)); border-radius: 20px; box-shadow: 0 5px 0 var(--tinta); animation: mp-cartao 0.22s ease-out; }
.mp-cartao[hidden] { display: none; }
@keyframes mp-cartao { from { transform: translateY(30%); opacity: 0; } }
.mapa-grande-rp .mp-ic { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--cor, var(--tinta)); background: #fff; display: grid; place-items: center; font-size: 25px; line-height: 1; box-shadow: 0 0 0 2px var(--tinta); }
.mp-cartao .mp-nome { flex: 1; min-width: 0; line-height: 1.15; }
.mp-cartao .mp-nome b { display: block; font-size: 19px; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-cartao .mp-nome small { display: block; font-size: 13px; font-weight: 700; opacity: 0.72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-ir, .mapa-grande-rp .mp-cancelar { flex: none; padding: 7px 16px 9px; border-radius: 999px; border: 4px solid var(--tinta); box-shadow: 0 4px 0 var(--tinta); background: var(--rosa); color: #fff; font: 800 18px var(--texto); white-space: nowrap; cursor: pointer; }
.mapa-grande-rp .mp-cancelar { background: #fff; color: var(--tinta); font-size: 15px; padding: 4px 12px 6px; border-width: 3px; box-shadow: 0 3px 0 var(--tinta); }
.mp-x { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--tinta); background: #fff; font: 800 16px var(--texto); color: var(--tinta); cursor: pointer; padding: 0; }
.mp-lado { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.mp-destino { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 12px; background: #ffe3ef; border: 3px solid var(--tinta); border-radius: 16px; font: 700 15px var(--texto); color: var(--tinta); }
.mp-destino[hidden] { display: none; }
.mp-destino span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-busca { width: 100%; box-sizing: border-box; padding: 9px 16px; border: 4px solid var(--tinta); border-radius: 999px; background: #fff; font: 700 18px var(--texto); color: var(--tinta); outline: none; }
.mp-busca:focus { box-shadow: 0 0 0 4px var(--amarelo); }
.mp-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-filtro { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 4px 7px; border-radius: 999px; border: 3px solid var(--tinta); background: #fff; font: 800 14px var(--texto); color: var(--tinta); cursor: pointer; white-space: nowrap; }
.mp-filtro i, .mp-grupo i { width: 13px; height: 13px; border-radius: 50%; background: var(--cor); border: 2px solid var(--tinta); flex: none; }
.mp-filtro[aria-selected="true"] { background: var(--tinta); color: #fff; }
.mp-filtro[aria-selected="true"] i { border-color: #fff; }
.mp-lista { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; padding: 2px 6px 10px 2px; -webkit-overflow-scrolling: touch; }
.mp-grupo { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font: 800 13px var(--texto); text-transform: uppercase; letter-spacing: 0.06em; color: rgba(21,21,21,0.7); }
.mp-grupo:first-child { margin-top: 0; }
.mp-item { flex: none; display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 6px; border: 3px solid var(--tinta); border-radius: 16px; background: #fff; box-shadow: 0 3px 0 var(--tinta); font: 800 16px var(--texto); color: var(--tinta); text-align: left; cursor: pointer; }
.mp-item .mp-ic { width: 36px; height: 36px; font-size: 19px; border-width: 3px; box-shadow: none; }
.mp-item .mp-nome { flex: 1; min-width: 0; line-height: 1.15; }
.mp-item .mp-nome small { display: block; font-size: 12px; font-weight: 700; opacity: 0.65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-dist { flex: none; font-size: 13px; font-weight: 800; opacity: 0.7; }
.mp-item.escolhido { background: #fff1b8; }
.mp-vazio { margin: 10px 4px; font: 700 15px var(--texto); opacity: 0.75; }
.mapa-grande-rp .rf-foco, .mapa-grande-rp button:focus-visible { outline: 5px solid var(--amarelo); outline-offset: 2px; }
.mapa-grande-rp .mp-item.rf-foco { transform: scale(1.02); }
/* celular em pé (e telas estreitas): o mapa em cima e a lista embaixo */
@media (orientation: portrait), (max-width: 700px) {
  .mp-corpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px; padding: 8px; }
  .mp-topo h2 { font-size: 20px; }
  .mp-filtros { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .mp-filtros::-webkit-scrollbar { display: none; }
  .mp-busca { padding: 7px 14px; font-size: 16px; border-width: 3px; }
  .mp-cartao { right: 10px; bottom: 8px; left: 8px; gap: 8px; padding: 6px 8px; }
  .mp-cartao .mp-ic { width: 38px; height: 38px; font-size: 20px; }
  .mp-cartao .mp-nome b { font-size: 16px; }
  .mp-ir { font-size: 16px; padding: 5px 12px 7px; }
  .mp-zoom button { width: 40px; height: 40px; font-size: 22px; }
}
/* celular deitado: tudo mais baixinho */
@media (max-height: 520px) and (orientation: landscape) {
  .mapa-grande-rp { padding: 6px calc(env(safe-area-inset-right, 0px) + 8px) 6px calc(env(safe-area-inset-left, 0px) + 8px); }
  .mp-janela { border-width: 4px; border-radius: 20px; box-shadow: 4px 5px 0 var(--tinta); }
  .mp-topo { padding: 2px 8px 2px 14px; border-bottom-width: 3px; }
  .mp-topo h2 { font-size: 17px; }
  .mp-fechar { width: 34px; height: 34px; font-size: 16px; border-width: 3px; box-shadow: 0 2px 0 var(--tinta); }
  .mp-corpo { grid-template-columns: minmax(0, 1fr) clamp(220px, 36%, 300px); gap: 8px; padding: 6px; }
  .mp-area { border-width: 3px; border-radius: 14px; }
  .mp-zoom { gap: 5px; right: 6px; top: 6px; } .mp-zoom button { width: 34px; height: 34px; font-size: 19px; border-width: 3px; box-shadow: 0 2px 0 var(--tinta); }
  .mp-norte { width: 32px; height: 32px; font-size: 13px; border-width: 3px; left: 6px; top: 8px; }
  .mp-cartao { left: 6px; right: 46px; bottom: 6px; padding: 4px 6px; gap: 6px; border-width: 3px; border-left-width: 9px; }
  .mp-cartao .mp-ic { width: 32px; height: 32px; font-size: 17px; border-width: 3px; }
  .mp-cartao .mp-nome b { font-size: 14px; } .mp-cartao .mp-nome small { font-size: 11px; }
  .mp-ir { font-size: 14px; padding: 3px 10px 5px; border-width: 3px; } .mp-x { width: 30px; height: 30px; font-size: 13px; }
  .mp-lado { gap: 5px; }
  .mp-busca { padding: 4px 12px; font-size: 14px; border-width: 3px; }
  .mp-filtros { gap: 4px; }
  .mp-filtro { font-size: 12px; padding: 1px 9px 2px 5px; }
  .mp-item { font-size: 14px; padding: 3px 8px 3px 4px; gap: 7px; border-radius: 12px; }
  .mp-item .mp-ic { width: 28px; height: 28px; font-size: 15px; }
  .mp-grupo { font-size: 11px; margin-top: 4px; }
}
html.modo-tv .mp-topo h2 { font-size: 32px; }
html.modo-tv .mp-item { font-size: 21px; } html.modo-tv .mp-item .mp-nome small { font-size: 15px; }
html.modo-tv .mp-filtro { font-size: 18px; } html.modo-tv .mp-busca { font-size: 22px; }
html.modo-tv .mp-cartao .mp-nome b { font-size: 24px; } html.modo-tv .mp-ir { font-size: 22px; }
html.modo-tv .mp-corpo { grid-template-columns: minmax(0, 1fr) clamp(320px, 30%, 460px); }
/* bússola com destino do mapa: nome do lugar e o ✕ para cancelar */
.bussola-rp .rotulo { max-width: min(52vw, 420px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bussola-rp .cancelar { pointer-events: auto; flex: none; width: 32px; height: 32px; margin-left: 2px; border-radius: 50%; border: 3px solid var(--tinta); background: #fff; font: 800 15px/1 var(--texto); color: var(--tinta); cursor: pointer; padding: 0; }
.bussola-rp .cancelar[hidden] { display: none; }


/* toque (toque.js): a pé = alavanca flutuante à esquerda + PULAR/AÇÃO/📱 no arco do polegar direito;
   veículo = faixa ◀ ▶ à esquerda + pedal ACELERAR e RÉ à direita, SAIR lá em cima (longe dos pedais).
   Tudo fora do notch (env(safe-area-inset-*)) e sem seleção/menu de toque longo. Controle físico em uso: some (toque-oculto). */
.rp-toque { display: none; --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --sb: env(safe-area-inset-bottom, 0px); --st: env(safe-area-inset-top, 0px); }
body.touch .rp-toque { display: block; }
body.toque-oculto .rp-toque, body.toque-oculto .jd-camada { display: none !important; }
.rp-toque, .rp-toque *, .rp-com-toque .jd-pulo { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.rp-toque button, .rp-seta, .rp-com-toque .jd-pulo { position: absolute; z-index: 8; touch-action: none; border-radius: 50%; border: 5px solid rgba(21,21,21,0.75); background: rgba(255,255,255,0.72);
  font: 800 34px var(--texto); color: var(--tinta); padding: 0; display: grid; place-items: center; align-content: center; justify-content: center; line-height: 1; box-shadow: 0 4px 0 rgba(21,21,21,0.45); }
.rp-toque button.apertado, .rp-seta.apertado, .rp-com-toque .jd-pulo.apertado { background: rgba(255,255,255,0.96); transform: translateY(3px) scale(0.95); box-shadow: 0 1px 0 rgba(21,21,21,0.45); }
.rp-toque .ic, .rp-com-toque .jd-pulo .ic { display: block; }
.rp-toque small, .rp-com-toque .jd-pulo small { display: block; font-size: 15px; margin-top: 3px; letter-spacing: 0.2px; }
/* a pé */
.rp-com-toque .jd-pulo { right: calc(env(safe-area-inset-right, 0px) + 20px); bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); width: 112px; height: 112px; font-size: 40px; background: rgba(0,181,240,0.78); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.35); }
.rp-com-toque .jd-pulo.apertado { background: rgba(0,181,240,1); }
.rp-pe .rp-acao { right: calc(var(--sr) + 146px); bottom: calc(var(--sb) + 30px); width: 98px; height: 98px; background: rgba(255,204,31,0.82); font-size: 42px; }
.rp-pe .rp-acao.ativo { width: auto; min-width: 120px; height: 72px; border-radius: 999px; padding: 0 16px; font-size: 20px; background: #ffcc1f; animation: acao-rp 1s ease-in-out infinite alternate; bottom: calc(var(--sb) + 44px); }
.rp-pe .rp-fone { right: calc(var(--sr) + 36px); bottom: calc(var(--sb) + 150px); width: 70px; height: 70px; font-size: 32px; }
.rp-carro, .rp-heli { display: none; }
.rp-no-carro .rp-carro, .rp-no-heli .rp-heli { display: block; }
.rp-no-carro .rp-pe, .rp-no-carro .jd-camada, .rp-no-heli .rp-pe, .rp-no-heli .jd-camada { display: none !important; }
/* veículo: faixa ◀ ▶ (uma área só: o dedo desliza de um lado para o outro) */
.rp-volante { position: absolute; z-index: 8; left: calc(var(--sl) + 18px); bottom: calc(var(--sb) + 18px); width: 262px; height: 124px; touch-action: none; }
.rp-seta { top: 0; bottom: 0; width: calc(50% - 6px); border-radius: 30px; font-size: 56px; pointer-events: none; }
.rp-seta[data-lado="esq"] { left: 0; } .rp-seta[data-lado="dir"] { right: 0; }
.rp-toque .rp-pedal { border-radius: 30px; font-size: 44px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.35); }
.rp-toque .rp-acel { right: calc(var(--sr) + 18px); bottom: calc(var(--sb) + 18px); width: 116px; height: 176px; background: rgba(88,196,58,0.85); }
.rp-toque .rp-acel.apertado, .rp-toque .rp-voar.apertado { background: rgb(88,196,58); }
.rp-toque .rp-re { right: calc(var(--sr) + 148px); bottom: calc(var(--sb) + 18px); width: 100px; height: 100px; border-radius: 50%; font-size: 34px; background: rgba(232,65,60,0.8); }
.rp-toque .rp-re.apertado { background: rgb(232,65,60); }
.rp-toque .rp-auto { right: calc(var(--sr) + 148px); bottom: calc(var(--sb) + 132px); width: 100px; height: 58px; border-radius: 999px; font-size: 20px; display: flex; gap: 4px; align-items: center; justify-content: center; }
.rp-toque .rp-auto small { margin: 0; font-size: 14px; }
.rp-toque .rp-auto.ligado { background: #58c43a; color: #fff; }
.rp-carro .rp-fone, .rp-heli .rp-fone { right: calc(var(--sr) + 264px); bottom: calc(var(--sb) + 18px); width: 62px; height: 62px; font-size: 28px; }
.rp-carro .rp-especial { right: calc(var(--sr) + 264px); bottom: calc(var(--sb) + 96px); width: 70px; height: 70px; font-size: 32px; background: rgba(255,204,31,0.88); }
.rp-carro .rp-especial[hidden] { display: none; }
.rp-toque .rp-sair { right: calc(var(--sr) + 196px); top: calc(var(--st) + 76px); width: 116px; height: 56px; border-radius: 999px; font-size: 21px; background: #ffcc1f; }
/* helicóptero */
.rp-toque .rp-subir { right: calc(var(--sr) + 18px); bottom: calc(var(--sb) + 130px); width: 108px; height: 100px; background: rgba(0,181,240,0.85); }
.rp-toque .rp-descer { right: calc(var(--sr) + 18px); bottom: calc(var(--sb) + 18px); width: 108px; height: 100px; background: rgba(236,46,140,0.82); }
.rp-toque .rp-subir.apertado { background: rgb(0,181,240); } .rp-toque .rp-descer.apertado { background: rgb(236,46,140); }
.rp-toque .rp-voar { right: calc(var(--sr) + 140px); bottom: calc(var(--sb) + 18px); width: 108px; height: 160px; background: rgba(88,196,58,0.85); }

/* rádio do carro (src/radio): no celular deitado fica à esquerda, embaixo do selo, longe dos pedais e do 📱 */
.rp-radio-aviso { position: fixed; z-index: 7; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 134px); transform: translateX(-50%); max-width: calc(100vw - 32px);
  padding: 4px 16px 6px; border: 4px solid var(--tinta); border-radius: 999px; box-shadow: 0 4px 0 var(--tinta); background: #12a150; color: #fff;
  font: 800 17px var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.rp-radio-aviso[hidden] { display: none; }
.rp-radio-aviso.entra { animation: rp-radio-entra 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.rp-radio-aviso.some { opacity: 0; transition: opacity 0.3s; }
@keyframes rp-radio-entra { from { transform: translate(-50%, -14px) scale(0.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rp-radio-aviso.entra { animation: none; } }
@media (max-height: 520px) and (orientation: landscape) {
  .radio-carro { --radio-topo: calc(env(safe-area-inset-top, 0px) + 96px); --radio-direita: calc(100vw - 296px); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .hud-rp { top: 58px; } .chip-rp { font-size: 13px; border-width: 3px; }
  .minimapa-rp { width: 108px; height: 108px; top: 58px; border-width: 3px; }
  .balao-rp { font-size: 14px; bottom: 10px; padding: 6px 12px 8px; max-width: 46vw; }
  .rp-radio-aviso { top: 62px; max-width: 46vw; font-size: 13px; border-width: 3px; padding: 2px 12px 4px; }
  /* celular deitado: tudo um pouco menor, mas nunca abaixo de ~56 px (alvo confortável para o polegar) */
  .rp-toque small, .rp-com-toque .jd-pulo small { font-size: 12px; margin-top: 2px; }
  .rp-com-toque .jd-pulo { width: 94px; height: 94px; font-size: 32px; right: calc(env(safe-area-inset-right, 0px) + 16px); bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }
  .rp-pe .rp-acao { width: 80px; height: 80px; right: calc(var(--sr) + 124px); bottom: calc(var(--sb) + 22px); font-size: 32px; }
  .rp-pe .rp-acao.ativo { height: 56px; font-size: 16px; bottom: calc(var(--sb) + 30px); min-width: 96px; padding: 0 12px; }
  .rp-pe .rp-fone { width: 58px; height: 58px; right: calc(var(--sr) + 34px); bottom: calc(var(--sb) + 124px); font-size: 26px; }
  .rp-volante { left: calc(var(--sl) + 14px); bottom: calc(var(--sb) + 14px); width: 224px; height: 104px; }
  .rp-seta { font-size: 46px; border-radius: 26px; }
  .rp-toque .rp-pedal { font-size: 34px; border-radius: 26px; }
  .rp-toque .rp-acel { right: calc(var(--sr) + 14px); bottom: calc(var(--sb) + 14px); width: 98px; height: 150px; }
  .rp-toque .rp-re { right: calc(var(--sr) + 126px); bottom: calc(var(--sb) + 14px); width: 84px; height: 84px; font-size: 28px; }
  .rp-toque .rp-auto { right: calc(var(--sr) + 126px); bottom: calc(var(--sb) + 110px); width: 84px; height: 50px; font-size: 17px; }
  .rp-toque .rp-auto small { font-size: 12px; }
  .rp-carro .rp-fone, .rp-heli .rp-fone { right: calc(var(--sr) + 224px); bottom: calc(var(--sb) + 14px); width: 56px; height: 56px; font-size: 24px; }
  .rp-carro .rp-especial { right: calc(var(--sr) + 224px); bottom: calc(var(--sb) + 82px); width: 58px; height: 58px; font-size: 26px; }
  .rp-toque .rp-sair { right: calc(var(--sr) + 132px); top: calc(var(--st) + 58px); width: 100px; height: 50px; font-size: 18px; border-width: 4px; }
  .rp-toque .rp-subir { right: calc(var(--sr) + 14px); bottom: calc(var(--sb) + 108px); width: 94px; height: 84px; }
  .rp-toque .rp-descer { right: calc(var(--sr) + 14px); bottom: calc(var(--sb) + 14px); width: 94px; height: 84px; }
  .rp-toque .rp-voar { right: calc(var(--sr) + 120px); bottom: calc(var(--sb) + 14px); width: 94px; height: 140px; }
}

/* casa por dentro: escurecer ao passar pela porta e o carrossel de decoração */
.fade-rp { position: absolute; inset: 0; z-index: 11; background: #1d1d2b; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.fade-rp.ativo { opacity: 1; }
.deco-rp { position: absolute; z-index: 10; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(560px, 92vw); }
.deco-rp[hidden] { display: none; }
.deco-cartao { background: #fff; border: 5px solid var(--tinta); border-radius: 26px; box-shadow: 0 6px 0 var(--tinta); padding: 8px 14px 10px; font-family: var(--texto); text-align: center; }
.deco-titulo { font: 800 18px var(--texto); color: var(--rosa); }
.deco-linha { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.deco-nome { flex: 1; font: 800 20px var(--texto); line-height: 1.2; min-height: 2.4em; display: grid; place-items: center; }
.deco-bt { width: 58px; height: 58px; border-radius: 50%; border: 4px solid var(--tinta); background: #ffcc1f; font: 800 26px var(--texto); cursor: pointer; touch-action: manipulation; }
.deco-cores { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.deco-cores[hidden] { display: none; }
.deco-cor { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--tinta); cursor: pointer; }
.deco-cor.ativa { outline: 5px solid #ffcc1f; outline-offset: 2px; transform: scale(1.1); }
.deco-acoes { display: flex; justify-content: center; gap: 12px; }
.deco-ok, .deco-voltar { min-width: 130px; height: 48px; border-radius: 999px; border: 4px solid var(--tinta); font: 800 19px var(--texto); cursor: pointer; }
.deco-ok { background: #58c43a; color: #fff; } .deco-voltar { background: #fff; }
.deco-dica { display: block; margin-top: 4px; color: #666; font: 700 13px var(--texto); }
@media (max-height: 520px) and (orientation: landscape) {
  .deco-rp { bottom: 6px; width: min(520px, 62vw); }
  .deco-cartao { padding: 4px 10px 6px; border-width: 4px; }
  .deco-nome { font-size: 15px; min-height: 2.2em; } .deco-bt { width: 46px; height: 46px; font-size: 20px; }
  .deco-cor { width: 30px; height: 30px; } .deco-ok, .deco-voltar { height: 40px; min-width: 104px; font-size: 16px; } .deco-dica { display: none; }
}

/* balcão da sorveteria */
.sorvete-rp { position: absolute; z-index: 10; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(600px, 94vw); }
.sorvete-rp[hidden] { display: none; }
.sv-escolha { font: 800 20px var(--texto); min-height: 1.6em; margin: 4px 0; }
.sv-sabores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 8px; }
.sv-sabor { display: flex; align-items: center; gap: 8px; justify-content: center; height: 48px; border-radius: 16px; border: 4px solid var(--tinta); background: #fff; font: 800 17px var(--texto); cursor: pointer; }
.sv-bola { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--tinta); vertical-align: middle; margin-right: 4px; }
.sorvete-rp .rf-foco { outline: 5px solid #ffcc1f; outline-offset: 2px; }
@media (max-height: 520px) and (orientation: landscape) {
  .sorvete-rp { bottom: 6px; width: min(560px, 66vw); } .sv-sabor { height: 38px; font-size: 14px; } .sv-escolha { font-size: 15px; }
}

/* Fatia 5: missões (faixa no HUD, Passaporte no Rabisfone) */
.missao-rp { margin-top: 8px; max-width: min(360px, 46vw); background: #fff8e1; border: 4px solid var(--tinta); border-radius: 18px; box-shadow: 0 4px 0 var(--tinta); padding: 4px 12px 6px; display: flex; flex-direction: column; line-height: 1.15; animation: missao-rp 0.35s ease-out; }
.missao-rp[hidden] { display: none; }
.missao-rp b { font-size: 15px; color: #c2410c; }
.missao-rp span { font-size: 18px; font-weight: 800; }
@keyframes missao-rp { from { transform: translateX(-20px); opacity: 0; } }
@media (max-height: 520px) and (orientation: landscape) {
  .missao-rp { margin-top: 4px; padding: 2px 10px 4px; border-width: 3px; max-width: 40vw; }
  .missao-rp b { font-size: 12px; } .missao-rp span { font-size: 14px; }
}

/* Fatia 7: jogador 2 (escolha do personagem e o balãozinho rosa da ação dele) */
.escolha-j2-rp { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(21, 21, 21, 0.35); font-family: var(--texto); }
.ej2-cartao { width: min(760px, 94vw); max-height: 92%; overflow: auto; background: #fff; border: 6px solid #ec2e8c; border-radius: 28px; box-shadow: 0 8px 0 #151515; padding: 14px 18px 16px; }
.ej2-titulo { font: 800 clamp(20px, 3vw, 30px) var(--texto); color: #ec2e8c; text-align: center; margin-bottom: 10px; }
.ej2-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.ej2-op { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 10px; border: 4px solid var(--tinta); border-radius: 20px; background: #fff7fb; box-shadow: 0 4px 0 var(--tinta); font: 800 17px var(--texto); color: var(--tinta); cursor: pointer; }
.ej2-op.foco { outline: 6px solid #ec2e8c; outline-offset: 2px; transform: scale(1.06); background: #ffe3f1; }
.ej2-bola { width: 58px; height: 58px; border-radius: 50%; border: 4px solid var(--tinta); display: grid; place-items: center; font-size: 30px; }
.ej2-dica { margin-top: 10px; text-align: center; font-weight: 700; opacity: 0.75; }
.acao-j2-rp { position: absolute; z-index: 8; left: 50%; bottom: 96px; transform: translateX(-50%); padding: 4px 14px 6px; border-radius: 999px; background: #ec2e8c; color: #fff; border: 5px solid var(--tinta); box-shadow: 0 5px 0 var(--tinta); font: 800 19px var(--texto); pointer-events: none; }
.acao-j2-rp[hidden] { display: none; }
/* 2 jogadores: seta na borda da tela apontando quem saiu do quadro (cor e nome de cada um; jogador2.js, hud) */
.seta-outro-rp { position: absolute; z-index: 9; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; pointer-events: none; padding: 2px 12px 4px 6px; border-radius: 999px; border: 4px solid var(--tinta); box-shadow: 0 4px 0 var(--tinta); color: #fff; font: 800 18px var(--texto); white-space: nowrap; }
.seta-outro-rp[hidden] { display: none; }
.seta-outro-rp.j1 { background: #00b5f0; }
.seta-outro-rp.j2 { background: #ec2e8c; }
.seta-outro-rp .ponta { display: inline-block; font-size: 24px; line-height: 1; }
html.modo-tv .seta-outro-rp { font-size: 24px; }
html.modo-tv .seta-outro-rp .ponta { font-size: 30px; }
.acao-j2-rp kbd { display: inline-block; margin-left: 6px; padding: 0 6px; border: 3px solid var(--tinta); border-radius: 8px; background: #fff; color: var(--tinta); font: 800 15px var(--texto); }
/* Modo TV (src/motor/modotv.js): letras maiores; o minimapa segue a mesma regra (escondido até pedirem) e fica maior */
html.modo-tv .minimapa-rp { width: 230px; height: 230px; }
html.modo-tv .balao-rp { font-size: 24px; }
html.modo-tv .missao-rp { transform: scale(1.3); transform-origin: top left; }
html.modo-tv .bussola-rp { transform: translateX(-50%) scale(1.35); transform-origin: top center; }
html.modo-tv .acao-rp, html.modo-tv .acao-j2-rp { font-size: 24px; }
html.modo-tv .btn-fone-rp { opacity: 0.55; }
/* com 2 jogadores a legenda "quem é quem" fica embaixo à esquerda: o botão do Rabisfone sobe um pouco */
.cena-rp.dois-rp .btn-fone-rp { bottom: 62px; }

/* Pai Nosso: frase grande no alto, palavra por palavra (karaokê), no traço da Igreja Reviver */
.oracao-rp {
  position: absolute; z-index: 6; left: 50%; top: 12%; transform: translateX(-50%); width: min(860px, 86vw); text-align: center;
  background: rgba(255, 252, 244, 0.94); border: 5px solid #1f3a8a; border-radius: 28px; box-shadow: 0 6px 0 #1f3a8a; padding: 16px 22px 12px;
  pointer-events: none; animation: oracao-rp-entra 0.8s ease-out;
}
.oracao-rp[hidden] { display: none; }
.oracao-rp .frase { margin: 0; font: 800 clamp(24px, 4.2vw, 46px) 'Baloo 2', sans-serif; line-height: 1.22; color: #151515; }
.oracao-rp .frase span { color: #9aa3b8; transition: color 0.35s ease; }
.oracao-rp .frase span.dita { color: #1f3a8a; }
.oracao-rp .dica { margin: 6px 0 0; min-height: 1.3em; font: 700 clamp(14px, 2vw, 20px) 'Baloo 2', sans-serif; color: #8e6cff; }
.oracao-rp .conta { margin: 2px 0 0; font: 700 13px 'Baloo 2', sans-serif; color: #8a8a8a; }
body.touch .oracao-rp { top: 6%; width: min(620px, 60vw); padding: 10px 16px 8px; }
@keyframes oracao-rp-entra { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translateX(-50%); } }

/* Meu Rabisco: o Rabisco girando de um lado, abas e peças do outro (mesmo traço do Rabisfone e da decoração) */
.meu-rb { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; background: rgba(10, 30, 60, 0.5); font-family: var(--texto); }
.meu-rb[hidden] { display: none; }
.mrb-cartao { width: min(980px, 96vw); height: min(590px, 92vh); display: grid; grid-template-columns: 1fr 1.05fr; gap: 12px; padding: 12px; background: #fff; border: 6px solid var(--tinta); border-radius: 28px; box-shadow: 0 8px 0 var(--tinta); animation: rf-entra 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.mrb-vista { position: relative; min-height: 0; overflow: hidden; border: 5px solid var(--tinta); border-radius: 20px; background: linear-gradient(160deg, #7fd6ff, #c9b3ff 60%, #ffc7e1); touch-action: none; cursor: grab; }
.mrb-vista:active { cursor: grabbing; }
.mrb-painel { display: flex; flex-direction: column; gap: 8px; min-height: 0; text-align: center; }
.mrb-titulo { font: 800 26px var(--texto); color: var(--rosa); line-height: 1.1; }
.mrb-abas { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.mrb-aba { display: flex; align-items: center; gap: 4px; padding: 2px 10px 3px; border: 4px solid var(--tinta); border-radius: 999px; background: #fff; box-shadow: 0 3px 0 var(--tinta); font: 800 15px var(--texto); color: var(--tinta); cursor: pointer; touch-action: manipulation; }
.mrb-aba .mrb-ic { font-size: 22px; }
.mrb-aba.ativa { background: var(--rosa); color: #fff; }
.mrb-opcoes { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; align-content: start; padding: 4px 4px 8px; }
.mrb-op { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 8px; border: 4px solid var(--tinta); border-radius: 18px; background: #fff7fb; box-shadow: 0 4px 0 var(--tinta); font: 800 15px var(--texto); line-height: 1.1; color: var(--tinta); cursor: pointer; touch-action: manipulation; }
.mrb-op.escolhida { background: #dff6ff; outline: 4px solid var(--ciano); outline-offset: 1px; }
.mrb-amostra { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--tinta); }
.mrb-ok-sel { position: absolute; top: -8px; right: -6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--tinta); background: #58c43a; color: #fff; font-size: 15px; }
.mrb-dica { color: #666; font: 700 13px var(--texto); }
.mrb-nome { font: 700 16px var(--texto); }
.mrb-nome label { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.mrb-nome small { color: #666; font-weight: 700; }
.mrb-campo { width: 11em; padding: 4px 12px; border: 4px solid var(--tinta); border-radius: 999px; font: 800 18px var(--texto); color: var(--tinta); text-align: center; }
.mrb-acoes { display: flex; justify-content: center; }
.meu-rb .rf-foco, .meu-rb :focus-visible { outline: 5px solid #ffcc1f; outline-offset: 2px; }
@media (max-aspect-ratio: 1/1) {
  .mrb-cartao { grid-template-columns: 1fr; grid-template-rows: minmax(0, 0.8fr) minmax(0, 1.2fr); height: min(760px, 94vh); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .meu-rb { align-items: end; }
  .mrb-cartao { width: 98vw; height: calc(100% - 52px); margin-bottom: 4px; gap: 8px; padding: 6px; border-width: 5px; grid-template-columns: 0.8fr 1.2fr; } /* deixa os botões da casca (✕, pausa, ⚙️) livres no alto */
  .mrb-aba .mrb-rot { display: none; } .mrb-abas { flex-wrap: nowrap; }
  .mrb-titulo { font-size: 18px; }
  .mrb-aba { padding: 0 8px 1px; font-size: 13px; } .mrb-aba .mrb-ic { font-size: 18px; }
  .mrb-opcoes { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
  .mrb-op { padding: 4px 2px 5px; font-size: 13px; border-width: 3px; } .mrb-amostra { width: 30px; height: 30px; border-width: 3px; }
  .mrb-dica { display: none; } .mrb-nome { font-size: 13px; } .mrb-campo { font-size: 15px; padding: 1px 10px; }
  .mrb-ok { height: 36px; min-width: 100px; font-size: 16px; }
}
html.modo-tv .mrb-cartao { transform: scale(1.1); }

/* Ateliê Ponta do Lápis (atelie-ui.js): a vitrine 3D de um lado; saldo, abas, peças e o botão grande do outro */
.atelie-rp { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; background: rgba(40, 20, 80, 0.5); font-family: var(--texto); }
.atelie-rp[hidden] { display: none; }
.atl-cartao { width: min(1020px, 96vw); height: min(600px, 92vh); display: grid; grid-template-columns: 0.95fr 1.1fr; gap: 12px; padding: 12px; background: #fff; border: 6px solid var(--tinta); border-radius: 28px; box-shadow: 0 8px 0 var(--tinta); animation: rf-entra 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.atl-vista { position: relative; min-height: 0; overflow: hidden; border: 5px solid var(--tinta); border-radius: 20px; background: linear-gradient(160deg, #ffd6ec, #e4d6ff 55%, #bfeaff); touch-action: none; cursor: grab; }
.atl-vista:active { cursor: grabbing; }
.atl-provando { position: absolute; z-index: 2; left: 50%; bottom: 10px; transform: translateX(-50%); max-width: 92%; padding: 2px 14px 4px; border: 4px solid var(--tinta); border-radius: 999px; background: #fff; font: 800 16px var(--texto); color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.atl-provando:empty { display: none; }
.atl-painel { display: flex; flex-direction: column; gap: 8px; min-height: 0; text-align: center; }
.atl-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.atl-titulo { font: 800 24px var(--texto); color: #6a3fe0; line-height: 1.05; text-align: left; }
.atl-saldo { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 0 12px 0 4px; height: 40px; border: 4px solid var(--tinta); border-radius: 999px; box-shadow: 0 4px 0 var(--tinta); background: #fff4c2; font: 800 22px var(--texto); color: var(--tinta); }
.atl-saldo .rbc-moeda { width: 30px; height: 30px; }
.atl-abas { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.atl-aba { display: flex; align-items: center; gap: 4px; padding: 2px 10px 3px; border: 4px solid var(--tinta); border-radius: 999px; background: #fff; box-shadow: 0 3px 0 var(--tinta); font: 800 15px var(--texto); color: var(--tinta); cursor: pointer; touch-action: manipulation; }
.atl-aba .atl-ic { font-size: 21px; }
.atl-aba.ativa { background: #8e6cff; color: #fff; }
.atl-itens { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 9px; align-content: start; padding: 8px 6px 8px; }
.atl-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 7px; border: 4px solid var(--tinta); border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--tinta); font: 800 14px var(--texto); line-height: 1.1; color: var(--tinta); cursor: pointer; touch-action: manipulation; }
.atl-item.a-venda { background: #fffaf0; }
.atl-item.usando { background: #dff6ff; }
.atl-item.selecionado { outline: 5px solid #8e6cff; outline-offset: 1px; }
.atl-nome { min-height: 2.2em; display: grid; place-items: center; }
.atl-preco { display: inline-flex; align-items: center; gap: 2px; font: 800 17px var(--texto); color: #8a4b00; }
.atl-preco .rbc-moeda { width: 20px; height: 20px; }
.atl-estado { font: 800 13px var(--texto); padding: 0 8px 1px; border-radius: 999px; border: 3px solid var(--tinta); }
.atl-estado.seu { background: #e9ffe0; color: #1f6a12; }
.atl-estado.usando { background: #2f8f22; color: #fff; }
.atl-selo { position: absolute; top: -10px; left: -6px; font-size: 22px; }
.atl-rodape { display: flex; gap: 10px; justify-content: center; align-items: center; }
.atl-acao { flex: 1; max-width: 340px; height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 4px solid var(--tinta); border-radius: 999px; box-shadow: 0 5px 0 var(--tinta); font: 800 20px var(--texto); color: var(--tinta); background: #fff; cursor: pointer; touch-action: manipulation; }
.atl-acao[hidden] { display: none; }
.atl-acao .atl-preco { color: inherit; font-size: 21px; } .atl-acao .atl-preco .rbc-moeda { width: 26px; height: 26px; }
.atl-acao.trocar { background: #ffcc1f; }
.atl-acao.vestir { background: #8fe3ff; }
.atl-acao.tirar { background: #fff; }
.atl-acao.falta { background: #f1ecf7; color: #4a3a63; }
.atl-acao.treme { animation: atl-treme 0.4s; }
@keyframes atl-treme { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.atl-ok { flex: none; }
.atl-nomepet { font: 800 15px var(--texto); color: #4a3a63; } .atl-nomepet[hidden] { display: none; }
.atl-nomepet label { display: flex; align-items: center; justify-content: center; gap: 8px; }
.atl-campo { width: 9em; padding: 2px 12px; border: 4px solid var(--tinta); border-radius: 999px; font: 800 17px var(--texto); color: var(--tinta); text-align: center; }
.atl-dica { color: #555; font: 700 13px var(--texto); min-height: 1.2em; }
.atelie-rp .rf-foco, .atelie-rp :focus-visible { outline: 5px solid #ffcc1f; outline-offset: 2px; }
.rf-moedas { color: #8a4b00; }
@media (max-aspect-ratio: 1/1) {
  .atl-cartao { grid-template-columns: 1fr; grid-template-rows: minmax(0, 0.75fr) minmax(0, 1.25fr); height: min(780px, 94vh); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .atelie-rp { align-items: end; }
  .atl-cartao { width: 98vw; height: calc(100% - 52px); margin-bottom: 4px; gap: 8px; padding: 6px; border-width: 5px; grid-template-columns: 0.75fr 1.25fr; }
  .atl-titulo { font-size: 16px; } .atl-saldo { height: 30px; font-size: 16px; border-width: 3px; } .atl-saldo .rbc-moeda { width: 22px; height: 22px; }
  .atl-aba .atl-rot { display: none; } .atl-abas { flex-wrap: nowrap; } .atl-aba { padding: 0 8px 1px; } .atl-aba .atl-ic { font-size: 18px; }
  .atl-itens { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
  .atl-item { padding: 4px 2px 5px; font-size: 12px; border-width: 3px; } .atl-item .mrb-amostra { width: 28px; height: 28px; border-width: 3px; } .atl-nome { min-height: 2em; }
  .atl-acao { height: 40px; font-size: 16px; } .atl-ok { height: 40px; min-width: 96px; font-size: 16px; }
  .atl-nomepet { font-size: 12px; } .atl-campo { font-size: 14px; padding: 0 8px; border-width: 3px; width: 8em; }
  .atl-dica { display: none; } .atl-provando { font-size: 13px; bottom: 4px; }
}
html.modo-tv .atl-cartao { transform: scale(1.1); }

/* Rabisfone: celular atual — moldura fina escura, ilha no topo, barra de status, papel de parede nas cores do Rabisco,
   apps em grade, telas de app claras com cartões brancos e a barra de baixo com 3 botões redondos (voltar, início, fechar).
   Celular deitado: o aparelho fica largo e os 3 botões vão para a lateral direita, sem passar da altura da tela. */
@keyframes rf-entra { from { transform: translateY(40%) rotate(-6deg); opacity: 0; } } /* (usado também pelo Meu Rabisco e pelo Ateliê) */
@keyframes rf-abre { from { opacity: 0; transform: translateY(18px) scale(0.9); } }
@keyframes rf-sai { to { opacity: 0; transform: translateY(14px) scale(0.92); } }
@keyframes rf-veu { from { background-color: rgba(8, 18, 40, 0); } }
@keyframes rf-veu-sai { to { background-color: rgba(8, 18, 40, 0); } }
@keyframes rf-troca { from { opacity: 0; transform: translateX(14px); } }
@keyframes rf-troca-volta { from { opacity: 0; transform: translateX(-14px); } }
@keyframes rf-pulsa { 50% { transform: scale(1.07); } }
.rabifone { position: absolute; inset: 0; z-index: 12; display: flex; align-items: center; justify-content: center; background: rgba(8, 18, 40, 0.42); animation: rf-veu 0.22s ease-out; }
.rabifone[hidden] { display: none; }
.rabifone.rf-saindo { pointer-events: none; animation: rf-veu-sai 0.18s ease-in forwards; }
.rabifone.rf-saindo .rf-aparelho { animation: rf-sai 0.18s ease-in forwards; }
.rf-aparelho {
  position: relative; box-sizing: border-box; height: min(88vh, 740px); aspect-ratio: 9 / 18.5; max-width: 94vw;
  display: flex; flex-direction: column; border: 7px solid #0d0f14; border-radius: 50px; overflow: hidden;
  background: radial-gradient(90% 55% at 0% 0%, rgba(120, 220, 255, 0.9), rgba(120, 220, 255, 0) 70%),
    radial-gradient(90% 60% at 100% 100%, rgba(255, 160, 70, 0.95), rgba(255, 160, 70, 0) 70%),
    linear-gradient(165deg, #00b5f0 0%, #7a6ff0 40%, #ec2e8c 72%, #ff7a00 100%);
  background-clip: padding-box;
  box-shadow: 0 0 0 1.5px #4a5060, 0 0 0 3px #1a1d24, 0 26px 60px rgba(0, 0, 0, 0.45);
  font-family: var(--texto); color: #fff; animation: rf-abre 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.rf-aparelho:not([data-app="inicio"]) { background: #f2f4f9; color: var(--tinta); }
.rf-topo { flex: none; position: relative; display: flex; align-items: center; justify-content: space-between; height: 36px; box-sizing: border-box; padding: 6px 24px 0; font: 800 14px/1 var(--texto); color: inherit; }
.rf-hora { min-width: 3em; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.rf-ilha { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); height: 22px; min-width: 84px; padding: 0 14px; box-sizing: border-box; border-radius: 999px; background: #0d0f14; color: rgba(255, 255, 255, 0.55); font: 800 8.5px/22px var(--texto); letter-spacing: 0.2em; text-transform: uppercase; text-align: center; }
.rf-status { display: flex; align-items: center; gap: 5px; }
.rf-status svg { display: block; height: 11px; width: auto; }
.rf-tela { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 10px 16px 12px; font-family: var(--texto); color: var(--tinta); scrollbar-width: thin; }
.rf-tela.rf-troca { animation: rf-troca 0.2s ease-out; }
.rf-tela.rf-troca-volta { animation: rf-troca-volta 0.2s ease-out; }
.rf-tela h3 { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; font: 800 22px/1.1 var(--texto); color: var(--tinta); }
.rf-h-icone { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; font-size: 21px; line-height: 1; background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.08)); box-shadow: 0 3px 8px rgba(20, 30, 60, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.rf-h-icone svg { width: 32px; height: auto; display: block; }
.rf-tela p { margin: 0 0 10px; font-weight: 700; font-size: 15px; line-height: 1.3; color: #3b4152; }
/* cartões brancos */
.rf-item { cursor: pointer; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(20, 30, 60, 0.08), 0 6px 16px rgba(20, 30, 60, 0.1); font: 800 17px/1.15 var(--texto); color: var(--tinta); transition: transform 0.14s ease, box-shadow 0.14s ease; -webkit-tap-highlight-color: transparent; }
.rf-item:active { transform: scale(0.97); }
.rf-lista { display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 8px; }
.rf-lista .rf-item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; text-align: left; }
.rf-emoji { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #f1f3f8; font-size: 24px; line-height: 1; }
.rf-emoji-veiculo { width: 60px; height: 44px; background: linear-gradient(180deg, #eef8ff, #dff0fb); }
.rf-veiculo { display: block; width: 54px; height: auto; overflow: visible; }
/* tela inicial: ícones de app em grade, rótulo embaixo */
.rf-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 6px; padding-top: 10px; }
.rf-app { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 5px 2px; background: none; box-shadow: none; border-radius: 16px; font: 700 13px/1.1 var(--texto); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); text-align: center; }
.rf-icone { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 22%; font-size: 32px; line-height: 1; text-shadow: none; background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.1)); box-shadow: 0 4px 10px rgba(10, 20, 50, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45); transition: transform 0.14s ease; }
.rf-icone svg { width: 48px; height: auto; display: block; }
.rf-app.rf-foco .rf-icone, .rf-app:focus-visible .rf-icone { transform: scale(1.06); }
.rf-cores { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rf-cores .rf-app { padding: 8px; }
.rf-cores .rf-icone { width: 58px; height: 58px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(20, 30, 60, 0.2); }
/* foco bem claro para teclado e controle: anel ciano por dentro, amarelo grosso por fora */
.rabifone .rf-foco, .rabifone :focus-visible { outline: 4px solid #ffcc1f; outline-offset: 3px; box-shadow: 0 0 0 3px #00b5f0, 0 6px 16px rgba(20, 30, 60, 0.2); }
.rabifone :focus:not(:focus-visible):not(.rf-foco) { outline: none; }
.rf-lista .rf-item.rf-foco { transform: scale(1.02); }
/* barra de baixo: 3 botões redondos (alvo de 46 px) e o tracinho de gesto */
.rf-botoes { flex: none; position: relative; display: flex; justify-content: center; gap: 30px; padding: 6px 0 14px; }
.rf-botoes::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 100px; height: 4px; margin-left: -50px; border-radius: 2px; background: currentColor; opacity: 0.35; }
.rf-botoes button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.24); color: #fff; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); transition: transform 0.12s ease, background-color 0.15s ease; -webkit-tap-highlight-color: transparent; }
.rf-botoes button:active { transform: scale(0.92); }
.rf-botoes svg { width: 24px; height: 24px; display: block; }
.rf-aparelho:not([data-app="inicio"]) .rf-botoes button { background: #fff; color: var(--tinta); box-shadow: 0 2px 8px rgba(20, 30, 60, 0.16); }
.rabifone .rf-botoes button.rf-foco, .rabifone .rf-botoes button:focus-visible { box-shadow: 0 0 0 3px #00b5f0; }
/* Passaporte, Trabalhar, Desafios */
.rf-item-missao .rf-missao { flex: 1; display: flex; flex-direction: column; }
.rf-item-missao small { font-size: 12px; font-weight: 700; color: #5b6275; }
.rf-item-missao .rf-selo { font-size: 22px; }
.rf-excl { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--amarelo, #ffcc1f); border: 2px solid var(--tinta); font-weight: 900; }
.rf-item-dodia { background: #fff6c7; }
.rf-item-missao small:has(.rf-dodia) { color: inherit; }
.rf-dodia { color: #8a4b00; }
/* Presente do dia: bolinha no app, calendário de 7 dias e a Missão do dia (diario.js) */
.rf-bolinha { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: #ff3b30; color: #fff; border: 2px solid #fff; font: 900 12px/1 var(--texto); font-style: normal; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); animation: rf-pulsa 1.4s ease-in-out infinite; }
.rf-dias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 2px 0 10px; }
.rf-dia { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px 5px; background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(20, 30, 60, 0.08), 0 4px 10px rgba(20, 30, 60, 0.08); font-family: var(--texto); color: var(--tinta); }
.rf-dia small { font-size: 11px; font-weight: 800; color: #5b6275; }
.rf-dia .rf-dia-icone { font-size: 20px; line-height: 1.1; }
.rf-dia b { font-size: 13px; font-weight: 900; color: #8a4b00; }
.rf-dia.pego { background: #dcf7d0; }
.rf-dia.pego b { color: #1f6d12; }
.rf-dia.hoje { background: #fff1a8; box-shadow: 0 0 0 3px #ec2e8c, 0 4px 10px rgba(236, 46, 140, 0.25); animation: rf-pulsa 1.4s ease-in-out infinite; }
.rf-dia.sete { grid-column: span 2; flex-direction: row; justify-content: center; gap: 6px; background: linear-gradient(135deg, #fff6c7, #ffd84f); }
.rf-dia.sete.pego { background: #dcf7d0; }
.rf-dia.sete small::after { content: " · bônus!"; }
.rf-tela p.rf-dica { font-size: 12px; font-weight: 700; color: #6a7183; }
.rf-tela[data-app="presente"] h3 { font-size: 21px; white-space: nowrap; }
.rf-md { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; background: #fff8d6; border-radius: 18px; box-shadow: 0 1px 2px rgba(20, 30, 60, 0.08), 0 6px 16px rgba(20, 30, 60, 0.1); font-family: var(--texto); color: var(--tinta); }
.rf-md b { font-size: 15px; color: #8a4b00; }
.rf-md span { font-size: 17px; font-weight: 800; }
.rf-md small { font-size: 12px; font-weight: 700; }
/* Álbum (album-ui.js põe o resto do estilo): abas e textos no mesmo visual de cartões */
.rabifone .alb-abas .rf-item { min-height: 0; justify-content: center; border: 0; border-radius: 14px; box-shadow: 0 1px 2px rgba(20, 30, 60, 0.08), 0 4px 10px rgba(20, 30, 60, 0.1); }
.rabifone .alb-abas .rf-item.atual { background: #fff3b0; box-shadow: 0 0 0 2px #ffcc1f, 0 4px 10px rgba(20, 30, 60, 0.1); }
.rabifone .alb-abas .rf-item.rf-foco, .rabifone .alb-abas .rf-item:focus-visible { box-shadow: 0 0 0 3px #00b5f0; }
.rabifone .alb-detalhe .alb-texto, .rabifone .alb-completa { border: 0; border-radius: 14px; box-shadow: 0 1px 2px rgba(20, 30, 60, 0.08), 0 4px 10px rgba(20, 30, 60, 0.1); }
.rabifone .alb-fig.rf-foco, .rabifone .alb-fig:focus-visible { box-shadow: 0 0 0 3px #00b5f0; }
/* TV grande: o aparelho cresce junto */
/* em pé, o aparelho encosta embaixo: a ilha fica abaixo do botão de pausa da casca (no meio, em cima) */
@media (min-height: 521px) { .rabifone { align-items: flex-end; padding-bottom: max(12px, 2vh); box-sizing: border-box; } }
@media (min-height: 680px) and (min-width: 1200px) {
  .rf-aparelho { zoom: 1.12; height: min(calc(86vh / 1.12), 740px); }
}
@media (min-height: 1000px) and (min-width: 1600px) {
  .rf-aparelho { zoom: 1.3; height: min(calc(86vh / 1.3), 740px); }
}
/* tela baixa (celular deitado): letras menores no Presente */
@media (max-height: 520px) {
  .rf-dias { gap: 5px; } .rf-dia { padding: 3px 1px; border-radius: 10px; }
  .rf-dia small { font-size: 9px; } .rf-dia .rf-dia-icone { font-size: 15px; } .rf-dia b { font-size: 11px; }
  .rf-tela p.rf-dica { font-size: 10px; }
  .rf-tela[data-app="presente"] h3 { font-size: 16px; margin-bottom: 4px; }
  .rf-tela[data-app="presente"] p { font-size: 11px; margin-bottom: 5px; }
  .rf-dia.sete { flex-direction: column; gap: 0; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .rf-aparelho { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); height: calc(100vh - 16px); max-height: none; aspect-ratio: auto; width: min(720px, 88vw); border-width: 6px; border-radius: 36px; }
  .rf-topo { grid-column: 1 / -1; height: 26px; padding: 4px 26px 0; font-size: 12px; }
  .rf-ilha { display: none; } /* deitado, a ilha fica na lateral do aparelho de verdade; aqui o botão de pausa da casca ocupa o meio */
  .rabifone .alb-abas { grid-template-columns: repeat(4, 1fr); }
  .rf-tela { grid-row: 2; grid-column: 1; padding: 6px 8px 10px 18px; }
  .rf-botoes { grid-row: 2; grid-column: 2; flex-direction: column; justify-content: center; gap: 12px; padding: 0 12px 10px 4px; }
  .rf-botoes::after { display: none; }
  .rf-botoes button { width: 44px; height: 44px; }
  .rf-tela h3 { font-size: 18px; margin-bottom: 6px; gap: 8px; }
  .rf-h-icone { width: 30px; height: 30px; border-radius: 8px; font-size: 17px; }
  .rf-h-icone svg { width: 26px; }
  .rf-tela p { font-size: 13px; margin-bottom: 6px; }
  .rf-grade { grid-template-columns: repeat(6, 1fr); gap: 10px 4px; padding-top: 4px; }
  .rf-app { font-size: 12px; gap: 4px; padding: 4px 1px; }
  .rf-icone { width: 52px; height: 52px; font-size: 28px; }
  .rf-icone svg { width: 42px; }
  .rf-cores { grid-template-columns: repeat(6, 1fr); }
  .rf-cores .rf-icone { width: 48px; height: 48px; }
  .rf-lista { gap: 8px; }
  .rf-lista .rf-item { min-height: 46px; padding: 5px 10px; gap: 10px; font-size: 15px; border-radius: 14px; }
  .rf-emoji { width: 34px; height: 34px; border-radius: 10px; font-size: 20px; }
  .rf-emoji-veiculo { width: 50px; height: 36px; }
  .rf-veiculo { width: 46px; }
  .rf-tela[data-app="garagem"] .rf-lista, .rf-tela[data-app="hora"] .rf-lista, .rf-tela[data-app="atelie"] .rf-lista, .rf-tela[data-app="casa"] .rf-lista { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rabifone, .rf-aparelho, .rf-tela.rf-troca, .rf-tela.rf-troca-volta, .rf-dia.hoje, .rf-bolinha { animation: none !important; }
  .rf-item, .rf-icone, .rf-botoes button { transition: none; }
  .rf-lista .rf-item.rf-foco, .rf-app.rf-foco .rf-icone { transform: none; }
}
/* Rabisfone aberto: os botões da casca (sair, pausa, engrenagem) não ficam por cima da tela do celular */
body:has(.rabifone:not([hidden])) :is(.casca-topo, .pausa-botao, .engrenagem-pausa) { visibility: hidden; }
/* Mochila e Conquistas no Rabisfone (etapa 10): descrição do item tocado e selos por fazer apagados */
.rf-inv-info { background: #fff8e1; border: 3px solid var(--tinta); border-radius: 14px; padding: 6px 12px; font-size: 15px; line-height: 1.25; }
.rf-inv-info[hidden] { display: none; }
.rf-item-falta { opacity: 0.6; } .rf-item-falta .rf-emoji { filter: grayscale(1); }
.rf-selo-conq { background: #fff0b0; border-radius: 50%; }