/* =========================================================
   CELULAR — a versão de bolso do site (carregado depois de style.css e hawkins.css)
   Tudo aqui mora dentro de uma consulta que o desktop nunca satisfaz:
     (max-width: 760px)  celular em pé · (max-width: 480px / 360px) telas estreitas
     (pointer: coarse)   dedo em vez de mouse (celular e tablet)
     (hover: none)       o que só aparecia com o mouse em cima
     (orientation: landscape) and (max-height: 500px) and (pointer: coarse)  celular deitado
   Assim o desktop continua idêntico. Quem mexer aqui: nada de regra solta fora dessas consultas
   (o teste é prompts/mobile-lab/check-css.js).
   ========================================================= */

/* =========================================================
   ESQUELETO — margens, topo, menu de abas, rodapé, rádio, avisos, campos
   ========================================================= */
/* ---------- base do celular: margens, áreas seguras (notch) e o grão de filme ---------- */
@media (pointer: coarse) {
  /* o iPhone deitado aumenta as letras sozinho; aqui o tamanho é o que o CSS manda */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  /* campos com menos de 16 px fazem o iPhone dar zoom ao tocar: todos os campos de texto ficam com 16 px no toque.
     !important de propósito: as janelas "2003" têm campos de 11 px com seletores bem específicos */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea { font-size: 16px !important; }
  /* o grão fica do tamanho exato da tela e só a textura treme: uma camada que passa da borda pode fazer o
     iPhone afastar a página e depois dar zoom ao tocar num campo (e ainda ocupava mais memória de vídeo) */
  .grain { inset: 0; animation-name: grain-touch; }
  @keyframes grain-touch {
    0% { background-position: 0 0; }
    25% { background-position: -12px 8px; }
    50% { background-position: 9px -13px; }
    75% { background-position: -7px -5px; }
    100% { background-position: 0 0; }
  }
  /* links da barrinha do topo (tablet e celular deitado): alvo do tamanho do dedo */
  .topbar a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 4px; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; }
}
@media (max-width: 760px) {
  :root { --mb-gutter: 16px; --mb-nav-h: 46px; }
  html { scroll-padding-top: calc(var(--mb-nav-h) + 10px); }
  .wrap { padding-left: max(var(--mb-gutter), env(safe-area-inset-left)); padding-right: max(var(--mb-gutter), env(safe-area-inset-right)); }
  .layout { gap: 18px; padding-top: 18px; padding-bottom: 26px; }
  .main-col { gap: 18px; }
  .box-body { padding: 16px; }
  .box-head { padding: 10px 14px; }
  /* Invertido: as vinhas das bordas ficam rentes à margem (numa tela estreita, 30% de cada lado atravessava o texto) */
  .edge-vines { width: 16vw; }
}
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* as vinhas (camada fixa, sem toque) passavam por cima do topo, do ↺, da chave e dos links do rodapé:
     o topo, o cabeçalho e o rodapé ficam acima delas (o menu já fica) */
  .theme-upside :is(.topbar, .masthead, .footer) { z-index: 6; }
}
@media (max-width: 480px) {
  :root { --mb-gutter: 12px; }
  .box-body { padding: 14px 12px; }
}

/* ---------- barrinha do topo: saudação à esquerda, dinheiro e "Sair" à direita ---------- */
@media (max-width: 760px) {
  .topbar-in { flex-wrap: nowrap; align-items: center; gap: 6px; min-height: 40px; padding-top: 0; padding-bottom: 0; }
  .topbar-in > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  /* os pontinhos entre os links viram espaço (ficam como texto solto, por isso a letra zero no grupo) */
  .topbar-right { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; font-size: 0; }
  .topbar-right > * { font-size: 12px; }
  .topbar-right > :is(a[href="#conta"], a[href="#config"]) { display: none; }
  .topbar-right a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; }
  #clock-now { padding-left: 6px; opacity: 0.8; }
}
@media (max-width: 560px) {
  /* "Você está em Hawkins Online" sai; a saudação e o nome ficam */
  .topbar-in > span:first-child > span { display: none; }
}
@media (max-width: 400px) {
  #clock-now { display: none; }
}

/* ---------- cabeçalho: marca numa linha; a chave dos mundos com o nome do mundo; abertura ---------- */
@media (max-width: 760px) {
  .masthead-in { flex-wrap: nowrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .brand { flex: 1 1 auto; min-width: 0; gap: 10px; }
  .brand-text { min-width: 0; }
  .masthead-actions { flex: 0 0 auto; gap: 8px; }
  /* a chave mostra em que mundo você está (a outra palavra aparece do lado de lá quando troca) */
  .theme-switch { min-height: 44px; padding: 0 12px; gap: 7px; }
  .theme-switch .sw-label { display: inline; font-size: 12px; }
  .theme-hawkins .theme-switch .sw-u, .theme-upside .theme-switch .sw-h { display: none; }
  /* o nome do outro mundo aparece no celular: um pouco mais claro que no desktop, para ser legível (contraste) */
  .theme-hawkins .theme-switch .sw-u { color: color-mix(in srgb, var(--hk-ctl-ink, #f1ebdd) 68%, var(--hk-ctl-bg, #1b1f25)); }
  /* no thefacebook a chave é cinza-clara (botão do Windows): a mistura acima ficava quase invisível nela */
  .theme-hawkins[data-page="rede"] .theme-switch .sw-u { color: #6d6d6d; }
  /* "↺ Abertura" vira só o ícone ao lado da chave */
  #btn-replay { display: inline-grid; place-items: center; width: 44px; min-height: 44px; padding: 0; font-size: 0; }
  #btn-replay::before { content: "↺"; font-size: 20px; line-height: 1; }
  .theme-hawkins #site #btn-replay { font-size: 0; }
}
@media (max-width: 480px) {
  /* telas estreitas: marca em cima; a chave com os dois mundos e a abertura embaixo */
  .masthead-in { flex-wrap: wrap; row-gap: 8px; }
  .brand { flex: 1 1 100%; }
  .masthead-actions { flex: 1 1 100%; justify-content: space-between; }
  .theme-switch .sw-label, .theme-hawkins .theme-switch .sw-u, .theme-upside .theme-switch .sw-h { display: inline; }
  #btn-replay { width: auto; padding: 0 14px; font-size: 13px; }
  .theme-hawkins #site #btn-replay { font-size: 13px; }
  #btn-replay::before { content: none; }
  .orb, .theme-hawkins .orb { width: 42px; height: 42px; }
}
@media (max-width: 350px) {
  #btn-replay { width: 44px; padding: 0; font-size: 0; }
  .theme-hawkins #site #btn-replay { font-size: 0; }
  #btn-replay::before { content: "↺"; font-size: 20px; }
  .theme-switch { padding: 0 10px; gap: 6px; }
  /* em Hawkins a marca tem 23 px e, a 320, "RPG" caía sozinho numa segunda linha em algumas páginas
     (o cabeçalho mudava de altura de uma página para outra) */
  .theme-hawkins .brand-text { font-size: 20px; }
}

/* ---------- menu de abas: tira tocável que rola de lado, com todos os nomes inteiros ---------- */
@media (max-width: 760px) {
  .tabs-nav { position: sticky; top: 0; }
  .tabs-in { gap: 2px; padding-top: 4px; scroll-snap-type: x proximity; scroll-padding-inline: var(--mb-gutter); overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .tabs-in::-webkit-scrollbar { display: none; }
  .tabs-nav a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 42px; scroll-snap-align: start; }
  .theme-hawkins .tabs-in { padding-top: 0; }
  .theme-hawkins .tabs-nav a { min-height: 46px; padding-top: 0; padding-bottom: 0; }
  /* o selo com o número de pendências (Admin, redes) é informação: número de 12 px */
  .tabs-nav .nav-badge { min-width: 20px; font-size: 12px; line-height: 20px; }
}
/* páginas de Hawkins com abas "de objeto" (etiquetas, papéis, quadrinhos, abas do IE): a tira fica mais baixa e a aba ganha altura */
@media (max-width: 760px) {
  .theme-hawkins[data-page="rede"] .tabs-in { padding-top: 5px; }
  .theme-hawkins[data-page="rede"] .tabs-nav a { min-height: 40px; }
  .theme-hawkins[data-page="classes"] .tabs-in { padding-top: 5px; padding-bottom: 5px; }
  .theme-hawkins[data-page="classes"] .tabs-nav a { min-height: 38px; }
  .theme-hawkins[data-page="loja"] .tabs-in { padding-top: 6px; padding-bottom: 5px; }
  .theme-hawkins[data-page="loja"] .tabs-nav a { min-height: 36px; }
  .theme-hawkins:is([data-page="conta"], [data-page="moradores"]) .tabs-in { padding: 6px var(--mb-gutter) 8px; gap: 10px; }
  .theme-hawkins:is([data-page="conta"], [data-page="moradores"]) .tabs-nav a { min-height: 36px; }
  .theme-hawkins[data-page="jornal"] .tabs-nav a { min-height: 44px; }
}
/* thefacebook: o portal de 2003 usa Verdana 11 no topo, no menu, no rodapé e nos botões; no celular a letra sobe para
   a mínima de leitura (o menu ficava menor que o de todas as outras páginas). O jeito "portal" continua o mesmo */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .theme-hawkins[data-page="rede"] #site { --hk-nav-font: 700 13px/1 Verdana, Tahoma, sans-serif; --hk-btn-font: 13px Tahoma, Verdana, sans-serif; }
  .theme-hawkins[data-page="rede"] :is(.topbar, .footer) { font-size: 12px; }
}

/* ---------- rodapé: links tocáveis e espaço para a bolinha do rádio e a barra do iPhone ---------- */
@media (max-width: 760px) {
  .footer { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; margin: 0 0 8px; font-size: 0; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 9px; font-size: 13px; }
}

/* ---------- rádio WSQK, avisos e o aviso do disjuntor: longe do notch e da barra do iPhone ---------- */
@media (max-width: 760px) {
  .widget.radio-float { right: max(12px, calc(env(safe-area-inset-right) + 8px)); bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px)); max-width: calc(100vw - 24px); }
  .toast { bottom: calc(20px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 24px); text-align: center; }
  .guard-banner { bottom: calc(12px + env(safe-area-inset-bottom)); width: calc(100vw - 24px); }
}
/* ---------- celular deitado (tela baixa): nada atrás do notch, topo mais baixo ---------- */
@media (pointer: coarse) {
  /* com viewport-fit=cover o conteúdo pode ir até a borda física; o notch fica de um dos lados quando deitado */
  .wrap { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .widget.radio-float { right: max(12px, calc(env(safe-area-inset-right) + 8px)); bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px)); }
}
@media (max-width: 760px) and (pointer: coarse) {
  .wrap { padding-left: max(var(--mb-gutter), env(safe-area-inset-left)); padding-right: max(var(--mb-gutter), env(safe-area-inset-right)); }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  :root { --mb-nav-h: 46px; }
  .masthead-in { padding-top: 6px; padding-bottom: 6px; }
  .orb, .theme-hawkins .orb { width: 40px; height: 40px; }
  .footer { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}
/* deitado com mais de 760 px (844, 932): o topo e o menu eram os do desktop (até 760 px valem as regras de celular em pé) */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) and (min-width: 761px) {
  /* em Hawkins as abas eram etiquetas de 22 a 28 px de altura (Melvald's, redes, Classes, gibi): ganham a altura
     mínima das páginas mais baixas em pé */
  .tabs-nav a { display: inline-flex; align-items: center; min-height: 36px; }
  /* a chave dos mundos e o ↺ Abertura com altura de dedo (eram 30–32 px); o nome dos mundos com a letra mínima de rótulo */
  .theme-switch { min-height: 40px; }
  .theme-switch .sw-label { font-size: 12px; }
  #btn-replay { display: inline-flex; align-items: center; min-height: 40px; }
  /* a tira de abas passa da tela também aqui; app.js centraliza a aba aberta */
  /* as vinhas do Invertido rentes à margem, como em pé */
  .edge-vines { width: 16vw; }
}
/* Altura de toque uniforme mesmo nos ambientes que antes usavam etiquetas mais baixas.
   A barrinha de rolagem ocupa seu próprio espaço: não apaga nem cobre letras nas bordas. */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #tabs-nav .tabs-in { gap: 4px; padding-top: 4px; padding-bottom: 4px; }
  #tabs-nav a { min-height: 44px; padding: 8px 12px; font-size: 13px; }
}
/* nas redes sociais a bolinha do rádio ficava em cima das últimas mensagens da conversa: sobe para o canto da
   barra de título da janela (em cima dos botões de enfeite _ □ ✕ / ● ● ●) */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #site:has(.rede-wrap.page-active) .widget.radio-float { top: calc(var(--mb-nav-h, 46px) + 4px); bottom: auto; left: auto; right: max(10px, calc(env(safe-area-inset-right) + 6px)); }
  /* com a página no topo, a bolinha ficava em cima do nome do site e do ↺: o cabeçalho e o menu passam por cima dela,
     e ela aparece quando a pessoa rola até a janela (que é onde a página das redes abre) */
  #site:has(.rede-wrap.page-active) :is(.masthead, .tabs-nav) { z-index: 31; }
  /* XP e editor do jornal: a bolinha sobe acima da barra presa ao pé (style.css). No fim da página a barra já não
     está presa, e o rodapé reserva o espaço da bolinha subida (senão ela cobria "Minha Conta") */
  #site:has(.page-active :is(.jn-ed-bar, .xp-post)) .footer { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  #site:has(.page-active :is(.jn-ed-bar, .xp-post)) .footer { padding-bottom: calc(202px + env(safe-area-inset-bottom)); }
}
@media (pointer: coarse) {
  /* rádio aberto: botões do tamanho do dedo (e um pouco mais largo, para a barra de volume caber) */
  .widget.radio-float { width: min(316px, calc(100vw - 24px)); }
  .radio-float .radio-min, .theme-hawkins #site .radio-float .radio-min { position: relative; width: 40px; height: 34px; font-size: 14px; }
  /* o "─" continua do tamanho da tecla do painel; a área do dedo passa para 44 × 44 (sem mudar a altura do visor) */
  .radio-float .radio-min::after { content: ""; position: absolute; inset: -5px -2px; }
  .radio-float .radio-power, .theme-hawkins #site .radio-float .radio-power { height: 40px; min-width: 92px; }
  .radio-float .radio-volume button { width: 36px; height: 36px; }
  .radio-float .radio-controls { gap: 10px; }
  .radio-float .radio-now a { display: inline-flex; align-items: center; min-height: 32px; font-size: 12px; }
  .theme-upside .radio-float .radio-volume output { font-size: 13px; }
}

/* =========================================================
   ENTRADA — portal, montador de ficha, portão VHS, abertura, bloqueio e o Início
   ========================================================= */
/* =========================================================
   CELULAR — ENTRADA: Início (a rua de Hawkins / o céu do Invertido),
   portal de entrar e criar conta, montador de ficha, portão VHS,
   botões da abertura e a página de bloqueio ("404 do Victor").
   Tudo aqui fica dentro de consultas de celular ou de toque: o
   desktop não muda. Tamanho de dedo vai em (pointer: coarse), que
   também vale para o celular deitado e o tablet; arrumação da tela
   vai em (max-width: 760px) e no bloco do celular deitado, no fim.
   As telas cheias (portal, montador, portão, bloqueio) respeitam o
   notch e a barra do iPhone (env(safe-area-inset-*)).
   ========================================================= */


/* =========================================================
   1. INÍCIO
   ========================================================= */

/* ---------- Hawkins em pé: a rua cabe na primeira tela junto com o painel de LED ---------- */
@media (max-width: 760px) {
  /* altura pela tela visível (sem a barra do navegador) menos cabeçalho, menu e painel; o conteúdo manda se precisar de mais */
  .theme-hawkins .hero { min-height: clamp(420px, calc(100vh - 256px), 560px); min-height: clamp(420px, calc(100svh - 256px), 560px); padding: 58px max(16px, env(safe-area-inset-right)) 136px max(16px, env(safe-area-inset-left)); }
  .theme-hawkins .hero-tag { margin: 22px auto 20px; }
  .theme-hawkins .hero-cta { gap: 12px; }
  .theme-hawkins #site .hero-cta .gloss-btn { padding: 8px 18px 7px; font-size: 17px; }
  /* painel de LED: alinhado com a margem do site; o rótulo não fica miúdo */
  .theme-hawkins #inicio .ticker { margin: 0 max(var(--mb-gutter, 12px), env(safe-area-inset-right)) 22px max(var(--mb-gutter, 12px), env(safe-area-inset-left)); }
  .theme-hawkins #inicio .ticker-label { padding: 4px 8px; font-size: 12px; letter-spacing: 0.1em; }
  .theme-hawkins #inicio .ticker-track { min-height: 34px; }
}
@media (max-width: 480px) {
  /* placas uma embaixo da outra, do mesmo tamanho (como numa esquina) */
  .theme-hawkins .hero-cta { flex-direction: column; align-items: center; }
  .theme-hawkins #site .hero-cta .gloss-btn { width: min(100%, 272px); }
}

/* ---------- Invertido em pé: o selo "NÃO ENTRE" não cobre o letreiro ---------- */
@media (max-width: 760px) {
  .theme-upside .hero { padding: 92px 14px 36px; }
  .theme-upside .starburst { top: 30px; right: 10px; width: 60px; height: 60px; font-size: 11px; }
  .theme-upside .hero-tag { margin: 22px auto 20px; }
  .theme-upside #inicio .ticker-track { min-height: 32px; }
}
@media (max-width: 480px) {
  .theme-upside .hero-cta { flex-direction: column; align-items: center; }
  .theme-upside .hero-cta .gloss-btn { width: min(100%, 272px); }
}

/* ---------- toque: placas e botões da faixa com altura de dedo ---------- */
@media (pointer: coarse) {
  .theme-hawkins #site .hero-cta .gloss-btn, .theme-upside .hero-cta .gloss-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; }
}


/* =========================================================
   2. PORTAL DE ENTRADA — mora em entrada.css (a entrada foi redesenhada com
   composição própria para o celular; o tocador da música também)
   ========================================================= */

/* Ambientação da entrada: leitura longa, vinhas e expansão pelo toque. */
@media (max-width: 760px) {
  .bv-story { min-width: 0; }
  .bv-story p, .bv-epi { overflow-wrap: break-word; }
  .bv-story.bv-expanded::before { inset: -30px -16px; }
  .bv-vines { inset: -18px 0 -20px; }
  .bv-vine-art { width: 195px; height: 483px; }
  .bv-vine-top-left { top: -20px; left: -69px; }
  .bv-vine-top-right { top: 50px; right: -73px; }
  .bv-vine-bottom-left { bottom: -55px; left: -79px; }
  .bv-vine-bottom-right { bottom: 25px; right: -70px; }
  .bv-story-toggle { width: 100%; min-height: 52px; margin-top: 12px; padding: 10px 0; font-size: 13px; }
  .bv-story-more .bv-omen { margin-top: 1.8em; }
  .bv-epi { max-width: min(30ch, 100%); padding-inline: 8px; }
}
@media (max-width: 360px) {
  .bv-vine-art { width: 174px; height: 431px; }
  .bv-vine-top-left { left: -65px; }
  .bv-vine-top-right { right: -68px; }
  .bv-vine-bottom-left { left: -74px; }
  .bv-vine-bottom-right { right: -65px; }
  .bv-story-toggle { letter-spacing: 0; }
}
@media (pointer: coarse) {
  .bv-story-toggle { min-height: 48px; touch-action: manipulation; }
  .bv-word { -webkit-tap-highlight-color: transparent; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .bv-vine-art { width: 174px; height: 431px; }
  .bv-story-toggle { min-height: 44px; }
}


/* =========================================================
   3. MONTADOR DE FICHA (wizard.js)
   ========================================================= */
@media (max-width: 760px) {
  /* ao focar um campo (teclado aberto ou "próximo" do teclado), ele para acima da barra de baixo */
  .wz { scroll-padding-top: 12px; scroll-padding-bottom: 96px; }
  .wz-in { --wz-pl: max(12px, env(safe-area-inset-left)); --wz-pr: max(12px, env(safe-area-inset-right)); padding: max(12px, env(safe-area-inset-top)) var(--wz-pr) 0 var(--wz-pl); }

  /* topo: título e "Sair" na primeira linha, as 7 etapas na segunda */
  .wz-head { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding-bottom: 12px; }
  .wz-brand h2 { font-size: clamp(18px, 5.4vw, 24px); line-height: 1.12; }
  .wz-kicker { font-size: 12px; }
  .wz-steps { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; }
  .wz-steps li { min-width: 0; }
  /* o nome da etapa já está no título do cartão: aqui só o número (o nome fica para leitores de tela) */
  .wz-steps li em, .wz-steps li.on em { display: block; position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .wz-exit { padding: 0 12px; font-size: 13px; }

  /* corpo e cartão da etapa */
  .wz-body { gap: 18px; padding: 14px 0 20px; }
  .wz-panel { padding: 16px 14px 18px; }
  .wz-num { font-size: 12px; }
  .wz-panel h3 { overflow-wrap: anywhere; }
  .wz-note { font-size: 13px; }
  .wz-count { font-size: 12px; }

  /* 1 · alinhamento: letras legíveis dentro das casas */
  /* a coluna dos nomes (Bom, Neutro, Mau) tem a largura da palavra: antes "NEUTRO" ficava embaixo das casas */
  .wz-aligns-wrap { grid-template-columns: max-content minmax(0, 1fr); gap: 4px 6px; }
  .wz-axis { font-size: 11px; letter-spacing: 0.06em; }
  .wz-align { min-height: 66px; align-content: center; }
  .wz-align { padding: 8px 3px; }
  .wz-align span { font-size: 12px; line-height: 1.2; }

  /* 2 e 3 · classes e subclasses */
  .wz-classes { grid-template-columns: minmax(0, 1fr); }
  .wz-class { grid-template-columns: 58px minmax(0, 1fr); column-gap: 12px; padding: 10px 12px; }
  .wz-class-emb { width: 58px; height: 58px; padding: 6px; }
  .wz-class-tag { font-size: 13px; }
  .wz-subs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wz-sub small { font-size: 12px; line-height: 1.3; text-align: center; }
  .wz-sub-info { font-size: 14px; }

  /* 4 · foto: a moldura não ocupa a tela toda */
  .wz-photo { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .wz-photo-frame { width: min(100%, 260px); justify-self: center; }
  .wz-tips { font-size: 13px; }

  /* 6 · atributos */
  .wz-attrs { grid-template-columns: minmax(0, 1fr); }
  .wz-attr-name abbr { font-size: 11px; }
  .wz-attr-base { font-size: 12px; }
  .wz-ovr-bars > span { font-size: 12px; }

  /* 7 · revisão: a carta tinha largura zero no celular (a moldura centrada encolhia até sumir) */
  .wz-flip { width: 100%; }

  /* barra de baixo: o aviso ganha uma linha própria em cima dos botões; "Próximo" é o botão grande */
  .wz-foot { flex-wrap: wrap; gap: 8px 10px; margin: 0 calc(-1 * var(--wz-pr)) 0 calc(-1 * var(--wz-pl)); padding: 10px var(--wz-pr) max(10px, env(safe-area-inset-bottom)) var(--wz-pl); }
  .wz-msg { order: -1; flex: 1 0 100%; min-height: 0; font-size: 14px; line-height: 1.35; }
  .wz-msg:empty { position: absolute; }
  .wz-foot .gloss-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; white-space: nowrap; }
  .wz-foot [data-wz-next] { flex: 1 1 auto; max-width: 240px; margin-left: auto; }
  .wz-foot .em-ctl.em-in-bar .em-btn { padding: 0 12px; }
  .wz-foot .em-in-bar :is(.em-txt, .em-vol) { display: none; }
}
@media (max-width: 480px) {
  .wz-panel { box-shadow: 0 0 0 2px var(--k-red), 5px 6px 0 2px var(--k-ink), 0 0 24px var(--k-glow); }
  .wz-foot .gloss-btn { padding: 0 14px; }
}
@media (max-width: 360px) {
  .wz-in { --wz-pl: max(10px, env(safe-area-inset-left)); --wz-pr: max(10px, env(safe-area-inset-right)); }
  .wz-panel { padding: 14px 12px 16px; }
  .wz-axis { letter-spacing: 0.02em; }
  .wz-aligns { gap: 5px; }
  .wz-foot .gloss-btn { padding: 0 12px; font-size: 14px; }
}
@media (pointer: coarse) {
  .wz-exit { min-height: 44px; }
  .wz-panel input:not([type="range"]):not([type="file"]) { min-height: 48px; }
  .wz-check button { min-height: 46px; }
  .wz-foot .gloss-btn { min-height: 46px; }
  .wz-foot .em-ctl.em-in-bar .em-btn { min-height: 46px; min-width: 46px; }
}


/* =========================================================
   4. PORTÃO VHS E BOTÕES DA ABERTURA
   (só interface e leitura; o desenho da abertura não muda)
   ========================================================= */
@media (max-width: 760px) {
  .vhs-tl { top: max(16px, 5vh, calc(env(safe-area-inset-top) + 8px)); left: max(16px, 5vw, calc(env(safe-area-inset-left) + 8px)); }
  .vhs-br { bottom: max(16px, 5vh, calc(env(safe-area-inset-bottom) + 8px)); right: max(16px, 5vw, calc(env(safe-area-inset-right) + 8px)); }
  .gate-inner { padding: 16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left)); }
  /* legendas do filme e do rádio usam a largura da tela (antes ficavam presas na metade dela) */
  /* e ficam acima dos botões "som" e "pular" também nas telas baixas */
  .subs { width: calc(100% - 32px); max-width: 680px; bottom: max(11%, calc(72px + env(safe-area-inset-bottom))); }
  .walkie { width: max-content; max-width: calc(100% - 24px); bottom: max(9%, calc(70px + env(safe-area-inset-bottom))); }
  .intro-ui { right: max(16px, calc(env(safe-area-inset-right) + 8px)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px)); }
}
@media (max-width: 480px) {
  /* "▶ CONTINUAR A ABERTURA" numa linha e o "(de 1:23)" embaixo, menor */
  .gate-btn-de { display: block; margin-top: 4px; }
  /* os avisos do portão quebram em linhas parecidas, sem uma palavra sozinha no fim */
  .gate-hint { max-width: 38ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
}
@media (max-width: 380px) {
  /* "▶ ENTRAR EM HAWKINS" numa linha só */
  .gate-btn { padding: 14px 12px; font-size: 15px; letter-spacing: 0.06em; }
  .gate-date { letter-spacing: 0.26em; }
}
@media (max-width: 340px) {
  /* "▶ CONTINUAR A ABERTURA" ainda numa linha só nas telas de 320 px */
  .gate-btn-retoma { padding: 14px 8px; font-size: 14px; letter-spacing: 0.03em; }
}
@media (pointer: coarse) {
  .gate-btn { min-height: 56px; }
  #gate-skip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; }
  .skip-btn { min-height: 44px; padding: 6px 14px; }
}
@media (hover: none) {
  /* sem mouse para "acordar" os botões da abertura: ficam sempre visíveis, ainda discretos */
  .intro-ui { opacity: 0.72; }
}


/* =========================================================
   5. BLOQUEIO ("404 do Victor")
   ========================================================= */
@media (max-width: 760px) {
  /* onde a barra de rolagem ocupa espaço, ela não surge no meio do carregamento estreitando a tela */
  .lockout { scrollbar-gutter: stable; }
  /* o texto ocupa só a própria altura e o celular da cobrinha vem logo depois (antes ele subia por cima do texto) */
  .lock-in { flex: none; min-height: 0; padding: max(32px, calc(env(safe-area-inset-top) + 18px)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  .lock-logo { margin-bottom: 24px; }
  .lock-soon { padding: 12px 16px; }
  .lock-foot { padding-top: 14px; }
  .lock-foot .link-btn { font-size: 14px; }
  .lock-phone { flex: none; margin: 22px auto calc(28px + env(safe-area-inset-bottom)); }
}
@media (pointer: coarse) {
  .lock-foot .link-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; }
  /* teclado do celular: tecla do tamanho do dedo; arrastar na telinha vira a cobra (não rola a página) */
  .ph-keys { gap: 8px; }
  .ph-keys button { min-height: 44px; touch-action: manipulation; }
  #snake { touch-action: none; }
}


/* =========================================================
   CELULAR DEITADO (altura baixa): a interface principal cabe na tela
   ========================================================= */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* ---- Início, Hawkins: a faixa é exatamente a tela abaixo do menu; letreiro pela altura ---- */
  .theme-hawkins .hero { min-height: calc(100vh - var(--mb-nav-h, 46px)); min-height: calc(100svh - var(--mb-nav-h, 46px)); padding: 44px max(20px, env(safe-area-inset-right)) 88px max(20px, env(safe-area-inset-left)); }
  .theme-hawkins .hero-logo { --logo-size: clamp(28px, 10.5svh, 46px); }
  .theme-hawkins .hero-tag { margin: 12px auto 14px; }
  .theme-hawkins .hero-cta { flex-direction: row; gap: 14px; }
  .theme-hawkins #site .hero-cta .gloss-btn { width: auto; min-height: 44px; padding: 7px 18px 6px; font-size: 17px; }
  .theme-hawkins #inicio .hk-town { height: clamp(110px, 38svh, 160px); }
  .theme-hawkins #inicio .hk-moon { top: 10%; width: 40px; height: 40px; }
  .theme-hawkins #inicio .ticker { margin: 0 max(16px, env(safe-area-inset-right)) 18px max(16px, env(safe-area-inset-left)); }
  .theme-hawkins #inicio .ticker-label { font-size: 12px; }

  /* ---- Início, Invertido ---- */
  .theme-upside .hero { min-height: calc(100vh - var(--mb-nav-h, 46px) - 18px); min-height: calc(100svh - var(--mb-nav-h, 46px) - 18px); padding: 50px max(20px, env(safe-area-inset-right)) 26px max(20px, env(safe-area-inset-left)); }
  .theme-upside .hero-logo { --logo-size: clamp(28px, 10.5svh, 46px); }
  .theme-upside .hero-tag { margin: 12px auto 16px; min-height: 1.6em; }
  .theme-upside .hero-cta { flex-direction: row; }
  .theme-upside .hero-cta .gloss-btn { width: auto; }
  .theme-upside .starburst { top: 36px; right: max(14px, env(safe-area-inset-right)); width: 62px; height: 62px; font-size: 11px; }

  /* ---- montador: topo numa linha só (título, etapas, sair) e barra de baixo baixa ---- */
  .wz-in { --wz-pl: max(16px, env(safe-area-inset-left)); --wz-pr: max(16px, env(safe-area-inset-right)); padding: max(8px, env(safe-area-inset-top)) var(--wz-pr) 0 var(--wz-pl); }
  .wz-head { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 14px; padding-bottom: 8px; }
  .wz-kicker { display: none; }
  .wz-brand h2 { font-size: 18px; line-height: 1.1; white-space: nowrap; }
  .wz-steps { grid-column: 2; grid-row: 1; justify-content: center; gap: 6px; }
  .wz-steps li { min-width: 0; }
  .wz-steps span { width: 26px; height: 26px; font-size: 12px; }
  .wz-steps li em, .wz-steps li.on em { display: block; position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .wz-exit { min-height: 40px; }
  .wz-body { gap: 16px; padding: 10px 0 14px; }
  .wz-panel { padding: 14px 18px 16px; }
  .wz-panel h3 { font-size: 22px; }
  .wz-lead { margin-bottom: 12px; }
  /* letras pequenas do montador sobem para 12 px (no deitado largo as regras de celular em pé não valem) */
  .wz-num, .wz-count, .wz-align span, .wz-sub small, .wz-attr-base, .wz-ovr-bars > span { font-size: 12px; }
  .wz-axis, .wz-attr-name abbr { font-size: 11px; }
  .wz-note { font-size: 13px; }
  .wz-subs { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .wz-sub-art { width: 64px; height: 64px; }
  .wz-photo { grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 18px; }
  .wz-photo-frame { width: 100%; }
  .wz-review { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
  .wz-flip { width: 100%; max-width: none; }
  .wz { scroll-padding-bottom: 76px; }
  .wz-foot { flex-wrap: nowrap; gap: 10px; margin: 0 calc(-1 * var(--wz-pr)) 0 calc(-1 * var(--wz-pl)); padding: 6px var(--wz-pr) max(6px, env(safe-area-inset-bottom)) var(--wz-pl); }
  .wz-msg { order: 0; flex: 1 1 auto; min-height: 0; font-size: 14px; line-height: 1.3; }
  .wz-msg:empty { position: static; }
  .wz-foot .gloss-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; white-space: nowrap; }
  .wz-foot [data-wz-next] { flex: none; margin-left: 0; }
  .wz-foot .em-ctl.em-in-bar .em-btn { min-height: 44px; min-width: 44px; }

  /* ---- portão ---- */
  .gate-date { margin-bottom: 18px; }
  .gate-hint { margin: 12px 0 6px; }
  /* legendas acima dos botões "som" e "pular" */
  .subs { width: calc(100% - 48px); max-width: 760px; bottom: calc(76px + env(safe-area-inset-bottom)); }
  .walkie { width: max-content; max-width: calc(100% - 48px); bottom: calc(70px + env(safe-area-inset-bottom)); }
  .intro-ui { right: max(16px, calc(env(safe-area-inset-right) + 8px)); bottom: max(12px, calc(env(safe-area-inset-bottom) + 6px)); }

  /* ---- bloqueio: o texto à esquerda e o celular da cobrinha à direita ---- */
  .lockout { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
  .lock-in { min-height: 0; padding: max(18px, env(safe-area-inset-top)) 0 max(14px, env(safe-area-inset-bottom)); }
  .lock-logo { --logo-size: clamp(26px, 9svh, 40px); margin-bottom: 12px; }
  .lock-lead { font-size: 15px; }
  .lock-404 { font-size: clamp(72px, 25svh, 120px); }
  .lock-shout { margin-bottom: 12px; font-size: 20px; }
  .lock-sorry { margin-bottom: 12px; font-size: 14px; line-height: 1.6; }
  .lock-soon { padding: 10px 14px; font-size: 15px; }
  .lock-foot { padding-top: 10px; }
  .lock-phone { width: 172px; margin: 14px 0; transform: rotate(3deg); }
}

/* ---------- montador na faixa de transição (641–900 px, tablet ou janela estreita): defeitos que já existiam ---------- */
@media (max-width: 900px) {
  /* a carta da revisão (etapa 7) ficava com largura zero: o "flip" é item de grade sem largura própria */
  .wz-flip { width: 100%; }
}
@media (min-width: 641px) and (max-width: 900px) {
  /* título, etapas e "Sair da conta" se sobrepunham: as etapas descem para a linha de baixo (como abaixo de 640 px) */
  .wz-head { grid-template-columns: minmax(0, 1fr) auto; }
  .wz-steps { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; }
  .wz-steps li { min-width: 0; }
}

/* =========================================================
   REDES SOCIAIS — molduras do IE e do Tor, thefacebook, 4spore e bate-papo
   ========================================================= */
/* =========================================================
   MOBILE — REDES SOCIAIS (agente "redes")
   1. Moldura dos navegadores simulados (IE do XP e Tor), genérica:
      vale para o thefacebook, o 4spore, a Melvald's.com e o mercado negro.
   2. thefacebook (.hb-), 4spore (.sp-) e o bate-papo (.rc-) em #rede.
   Tudo dentro de consultas de celular/toque: o desktop não muda.
   "Celular" = em pé até 760 px OU deitado baixo com toque.
   ========================================================= */

/* ---------- 0. TOQUE EM TELA GRANDE (tablet com o layout de desktop) ----------
   Vem primeiro: as regras de celular abaixo (44 px) ganham destas quando as duas valem. */
@media (pointer: coarse) {
  .hb .hb-links button { min-height: 36px; box-sizing: border-box; }
  .rc-bar, .rc-list button { min-height: 40px; box-sizing: border-box; }
  .rc-bar { display: flex; align-items: center; }
  .rc-head .rc-x { min-width: 36px; min-height: 36px; display: grid; place-items: center; }
  .tor-ident { display: inline-flex; align-items: center; min-height: 36px; box-sizing: border-box; }
  .spore .sp-menu button { min-height: 40px; }
}

/* ---------- 1. MOLDURA: "tela de aplicativo" ----------
   A janela ocupa a altura visível embaixo do menu fixo (8 px de folga em cima e embaixo,
   e a barra do iPhone fora da conta). A barra de título, o endereço e o status ficam fixos;
   só o miolo (.ie-view / .tor-view) cresce, e a rolagem acontece lá dentro (o JS usa scrollTop dele). */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .browser {
    --rd-gap: 8px;
    display: flex; flex-direction: column;
    height: calc(100vh - var(--mb-nav-h, 46px) - 2 * var(--rd-gap) - env(safe-area-inset-bottom, 0px));
    height: calc(100svh - var(--mb-nav-h, 46px) - 2 * var(--rd-gap) - env(safe-area-inset-bottom, 0px));
    min-height: 240px;
    scroll-margin-top: calc(var(--mb-nav-h, 46px) + var(--rd-gap));
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); /* a sombra de 60 px pesa no celular */
  }
  .browser > * { flex: none; }
  .ie-view, .tor-view { flex: 1 1 0; height: auto; min-height: 0; }
  .theme-hawkins #rede .ie-view { height: auto; min-height: 0; }
  /* o miolo rola sozinho: chegar ao fim não arrasta a página junto */
  :is(.ie-view, .tor-view) > * { overscroll-behavior: contain; }
  /* menu e barra de ferramentas do IE e a linha do circuito do Tor são enfeite (aria-hidden): saem para sobrar tela */
  .ie-menu, .ie-tools, .tor-circuit { display: none; }

  /* Internet Explorer: endereço e status legíveis (11 → 12 px), sem mudar o desenho */
  .ie-address { gap: 6px; padding: 3px 6px; font-size: 12px; }
  .ie-url { min-height: 22px; padding: 2px 5px; }
  .ie-status { gap: 10px; padding: 3px 8px; font-size: 12px; }
  .ie-status > :first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .ie-zone { flex: none; }

  /* Tor: abas e barra mais baixas; o botão "Nova identidade" vira alvo de dedo */
  .tor-tabs { gap: 2px; padding: 5px 6px 0; }
  .tor-tab { min-width: 0; padding: 6px 10px; gap: 6px; }
  .tor-winbtns { flex: none; gap: 8px; padding-bottom: 7px; }
  .tor-bar { gap: 6px; padding: 4px 6px; }
  .tor-url { min-height: 36px; padding: 0 8px; box-sizing: border-box; font-size: 12px; }
  .tor-ident { display: inline-flex; align-items: center; flex: none; min-height: 44px; padding: 0 10px; box-sizing: border-box; font-size: 12px; }
}
@media (max-width: 480px) {
  /* ‹ › ⟳ são enfeite: o espaço vai para o endereço .onion */
  .tor-nav { display: none; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* deitado: a moldura continua, só mais baixa */
  .ie-title { height: 26px; font-size: 12px; }
  .ie-btns i { width: 19px; height: 19px; }
  .tor-tabs { padding-top: 3px; }
  .tor-tab { padding-top: 4px; padding-bottom: 4px; }
  .tor-winbtns { padding-bottom: 5px; }
  .tor-bar { padding-top: 3px; padding-bottom: 3px; }
  .tor-url { min-height: 32px; }
  .tor-ident { min-height: 40px; }
}

/* ---------- 2. PÁGINA #rede: espaço em volta da janela ---------- */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .rede-wrap, .theme-hawkins #rede.rede-wrap { padding-top: 8px; padding-bottom: 12px; }
  /* no Invertido, as vinhas das bordas (30% da tela de cada lado) passavam por cima do texto do 4spore:
     a janela sobe um degrau e fica na frente delas (o resto da página continua com as vinhas) */
  #rede .browser { position: relative; z-index: 6; }
}

/* ---------- 3. THEFACEBOOK ---------- */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* letra da interface de 2004: 11 → 13 px (Verdana/Lucida continuam) */
  .hb { font-size: 13px; line-height: 1.5; }
  .hb :is(input, textarea, button) { font-size: 13px; }
  .hb .hb-btn { min-height: 40px; padding: 4px 12px; font-size: 13px; }
  .hb-h { padding: 5px 8px; font-size: 14px; }
  .hb-sub { font-size: 13px; }
  .hb-meta { font-size: 12px; }
  .hb small { font-size: 12px; }
  .hb-guest { font-size: 14px; }
  /* nomes-link: área de toque maior para cima e para baixo sem mexer na linha */
  .hb .hb-lk { padding: 6px 0; }
  .hb-meta .hb-lk { display: inline-block; padding: 8px 6px; margin: -8px -6px; }

  /* barra azul: o logo é um botão (volta ao mural) */
  .hb-top { height: 44px; padding: 0 10px; }
  .hb .hb-logo { display: inline-flex; align-items: center; min-height: 44px; font-size: 19px; }

  /* coluna da esquerda vira um cabeçalho curto: foto pequena + nome numa linha */
  .hb-me { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 10px; align-items: center; justify-items: start; padding: 8px 10px; text-align: left; }
  .hb-me > .hb-av { grid-row: 1 / 3; width: 48px; height: 48px; margin: 0; font-size: 17px; }
  .hb-me b { align-self: end; font-size: 14px; }
  .hb-me small { align-self: start; font-size: 12px; }
  .hb-side-box { padding: 6px 8px; font-size: 12px; }

  /* links da coluna: botões do tamanho do dedo, com a cara dos links do thefacebook */
  .hb-links li { min-width: 0; border-bottom: 0; }
  .hb .hb-links button { display: flex; align-items: center; gap: 4px; min-height: 44px; height: 100%; padding: 6px 8px; border: 1px solid #d8dfea; background: #f7f7f7; line-height: 1.25; }
  .hb .hb-links button.on { border-color: #6d84b4; }

  /* formulário de status: o campo ganha altura (o esqueleto já põe 16 px no toque) */
  .hb-status { gap: 8px; }
  .hb-status label { flex: 1 1 100%; }
  .hb-status input, .hb-search input { min-height: 40px; padding: 6px 8px; box-sizing: border-box; }
  .hb-search input { min-height: 44px; }

  /* mural e listas */
  .hb-post, .hb-person { gap: 10px; padding: 10px 2px; }
  .hb-post .hb-av, .hb-person .hb-av { width: 40px; height: 40px; font-size: 13px; }
  /* pessoa: nome em cima, botões na linha de baixo (antes o nome longo virava uma letra por linha) */
  .hb-person { flex-wrap: wrap; row-gap: 8px; }
  .hb-person .hb-grow { flex: 1 1 0; }
  .hb-actions { flex: 1 1 100%; justify-content: flex-start; gap: 8px; padding-left: 50px; }
  .hb-poke { gap: 8px; padding: 10px; }
  .hb-poke .hb-grow { flex: 1 1 160px; }

  /* perfil */
  .hb-pic-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .hb-pinfo h2 { font-size: 18px; }
  .hb-info th { width: 96px; padding: 4px 6px; }
  .hb-info td { padding: 4px 6px; }
}
@media (max-width: 760px) {
  /* em pé: uma coluna; os links da barra azul já estão na grade logo abaixo */
  .hb-top nav, .hb-net { display: none; }
  .hb-body { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 10px 10px 72px; }
  .hb-profile { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hb-side { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .hb-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; }
}
@media (max-width: 480px) {
  .hb-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-body { padding-left: 8px; padding-right: 8px; }
  .hb-me { grid-template-columns: 40px minmax(0, 1fr); padding: 6px 8px; }
  .hb-me > .hb-av { width: 40px; height: 40px; font-size: 15px; }
}
@media (max-width: 400px) {
  /* os botões da pessoa usam a largura toda (senão "Desfazer amizade" cai numa 3ª linha) */
  .hb-actions { padding-left: 0; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* deitado: volta a coluna da esquerda (lista de links) ao lado do mural */
  .hb-top { height: 36px; }
  .hb .hb-logo { min-height: 36px; font-size: 17px; }
  .hb .hb-top nav button { display: inline-flex; align-items: center; min-height: 36px; box-sizing: border-box; }
  .hb-body { grid-template-columns: 172px minmax(0, 1fr); gap: 12px; padding: 8px 12px 64px; }
  .hb-side { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
  .hb-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; margin: 0; }
  .hb .hb-links button { min-height: 40px; }
  .hb-me { grid-template-columns: 36px minmax(0, 1fr); padding: 6px 8px; }
  .hb-me > .hb-av { width: 36px; height: 36px; font-size: 14px; }
  .hb-profile { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; }
  .hb-actions { padding-left: 50px; }
}

/* ---------- 3b. THEFACEBOOK: fotos do imgur, curtidas, comentários e perfil personalizado (2026-09-28) ----------
   Botões de curtir/comentar/filtros/modos do tamanho do dedo, campos em 16 px (o esqueleto já cuida),
   editor do perfil em uma coluna e o visualizador de fotos na tela inteira (com o entalhe fora da conta). */
@media (pointer: coarse) {
  .hb .hb-act, .hb .hb-filtros button, .hb .hb-modos button { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; }
  .hb .hb-act { padding: 0 4px; }
  .hb .hb-opt, .hb .hb-check { min-height: 44px; box-sizing: border-box; }
  .hb .hb-check input { width: 20px; height: 20px; }
  .hb-ajuda summary { display: flex; align-items: center; min-height: 44px; }
  .hb-lb .hb-lb-x { width: 48px; height: 48px; }
  /* efeitos que ficam repintando o tempo todo: parados no celular (bateria) */
  .hb-av[data-fr="natal"]::before, :is(.hb, .hb-lb) [data-cor="brilho"] { animation: none; }
}
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .hb .hb-act, .hb .hb-filtros button { font-size: 13px; }
  .hb .hb-modos button { flex: 1 1 0; justify-content: center; padding: 0 10px; font-size: 14px; }
  .hb-h-feed { padding-top: 2px; padding-bottom: 2px; }
  .hb .hb-filtros button { padding: 0 10px; }
  .hb .hb-novas { padding: 8px 16px; font-size: 13px; }
  .hb-fotoform, .hb-recado { gap: 6px; padding: 10px; }
  .hb-irow input, .hb-cform input { min-height: 44px; padding: 8px 10px; box-sizing: border-box; }
  .hb-irow .hb-btn, .hb-cform .hb-btn { flex: none; min-height: 44px; }
  .hb-imsg, .hb-ajuda { font-size: 13px; }
  .hb-ajuda code { font-size: 12px; }
  /* post: a foto usa a largura toda da coluna */
  .hb-foto img { max-width: 100%; max-height: 62vh; max-height: 62svh; }
  /* a foto do cabeçalho da coluna encolhe para 40–48 px: a moldura acompanha */
  .hb-me > .hb-av.big { --fu: 1.1px; }
  .hb-foto-perfil img { width: 128px; height: 128px; }
  .hb-acts { gap: 0 14px; }
  .hb-curtidas { padding: 6px 8px; font-size: 13px; }
  .hb-cmts { padding: 4px 8px 10px; }
  .hb .hb-cmt .hb-av { width: 32px; height: 32px; font-size: 11px; }
  .hb-cmt { font-size: 14px; }
  /* perfil */
  .hb-top8 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hb-album { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hb-frase { font-size: 14px; }
  .hb-odo i { width: 15px; height: 21px; font-size: 15px; }
  /* personalizar: opções do tamanho do dedo, textos legíveis */
  .hb-edit fieldset { padding: 8px 10px 12px; }
  .hb-edit legend { font-size: 14px; }
  .hb .hb-edit :is(input:not([type="radio"]):not([type="checkbox"]), select) { min-height: 44px; padding: 8px 10px; }
  .hb .hb-edit .hb-btn, .hb .hb-pic .hb-btn { min-height: 44px; }
  .hb-opt small { font-size: 12px; }
  .hb .hb-opts-letra .hb-opt { font-size: 15px; }
  .hb-sw { font-size: 20px; }
  .hb-save { padding: 8px 0 max(8px, env(safe-area-inset-bottom)); }
  /* visualizador: tela inteira, setas por cima da foto, entalhe e barra do iPhone fora da conta */
  .hb-lb-in { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing: border-box; }
  /* no celular o visualizador é uma tela preta inteira (a página não aparece atrás da foto) */
  .hb-lb { background: #000; font-size: 14px; }
  .hb-lb-stage { position: relative; padding: 0; }
  .hb-lb-img img { border-width: 3px; }
  .hb-lb .hb-lb-nav { position: absolute; top: 50%; z-index: 1; width: 44px; height: 56px; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); }
  .hb-lb .hb-lb-nav[data-lb="ant"] { left: 0; }
  .hb-lb .hb-lb-nav[data-lb="prox"] { right: 0; }
  .hb-lb-info { width: calc(100% - 16px); max-height: 38vh; max-height: 38svh; margin: 8px auto; }
  .hb-lb .hb-act { display: inline-flex; align-items: center; min-height: 44px; }
  .hb-lb-info .hb-lk { padding: 6px 0; }
}
@media (max-width: 760px) {
  /* editor em uma coluna: a prévia vem primeiro, lado a lado com o texto de ajuda */
  .hb-edit { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hb-prev { position: static; }
  .hb-opts-fr .hb-opt { min-width: 0; flex: 1 1 88px; }
  .hb .hb-opt { flex: 1 1 88px; }
  .hb .hb-opts-letra .hb-opt { flex: none; }
  .hb-opts-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
  .hb-acts { gap: 0 8px; }
  .hb-top8, .hb-album { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* deitado: a foto à esquerda, os dados dela à direita */
  .hb-lb-in { display: grid; grid-template-columns: minmax(0, 1fr) min(300px, 38%); grid-template-rows: auto minmax(0, 1fr); }
  .hb-lb-bar { grid-column: 1 / -1; padding-top: 4px; padding-bottom: 4px; }
  .hb-lb-info { width: auto; max-height: none; margin: 0 8px 8px 0; align-self: stretch; }
  .hb-edit { grid-template-columns: 180px minmax(0, 1fr); }
}

/* ---------- 3c. MINI TUTORIAL PUXÁVEL do imgur (.hbt-) ----------
   No celular a aba vira um quadradinho de 44 px com a câmera (o texto fica só para o leitor de tela) e o painel
   ocupa quase a largura toda, rolando por dentro. */
@media (pointer: coarse) {
  .hbt .hbt-x { width: 44px; height: 44px; font-size: 18px; }
  .hbt .hbt-ir { min-height: 44px; }
  .hbt-passos a { display: inline-block; padding: 6px 0; }
}
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .hbt { top: 56px; bottom: 56px; font-size: 14px; }
  .hbt .hbt-aba { position: relative; width: 44px; height: 44px; justify-content: center; padding: 0; writing-mode: horizontal-tb; transform: none; font-size: 20px; }
  .hbt .hbt-aba span[aria-hidden] { transform: none; }
  .hbt .hbt-aba::after { content: "?"; position: absolute; top: 3px; right: 4px; font: 700 12px/1 Tahoma, sans-serif; color: #fff; }
  .hbt .hbt-aba-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hbt-painel { width: min(300px, calc(100vw - 72px)); max-height: 100%; padding: 0 12px 12px; }
  .hbt-top { padding-top: 0; padding-bottom: 0; font-size: 14px; }
  .hbt-dica code { font-size: 13px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .hbt { top: 42px; bottom: 50px; }
}

/* ---------- 4. BATE-PAPO (as duas redes) ----------
   A barra "Bate-papo"/"Sussurros" fica no canto de baixo, do tamanho do dedo.
   Conversa aberta = painel que ocupa a janela inteira (cabeçalho com minimizar e fechar,
   mensagens no meio, campo embaixo). Minimizada = etiqueta em cima da barra (várias empilham). */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .rc-dock { left: 0; right: 0; max-width: none; padding: 0 8px; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 6px; font-size: 13px; pointer-events: none; z-index: 7; }
  /* z-index 7: acima do menu do ID do 4spore (6), que antes ficava por cima da conversa aberta */
  .rc-dock:has(.rc-win:not(.min)) { top: 0; }
  .rc-win, .rc-barwrap { pointer-events: auto; }
  .rc-wins { flex-direction: column; align-items: flex-end; gap: 6px; max-width: 100%; }
  .rc-wins .rc-win:not(:last-child) { display: flex; } /* antes só a última aparecia: a conversa aberta sumia quando chegava outra */

  /* etiqueta (minimizada) */
  .rc-win.min { width: auto; max-width: min(260px, 100%); border-bottom: 1px solid #999; }
  .rc-sp .rc-win.min { border-bottom-color: #d9bfb7; }
  .rc-head { min-height: 44px; }
  .rc-head .rc-min { display: block; line-height: 44px; padding: 0 12px; font-size: 14px; }
  /* setinha: tocar no nome minimiza / abre (o "title" não aparece no toque) */
  .rc-head .rc-min::before { content: "▾"; display: inline-block; width: 1em; margin-right: 6px; font-size: 12px; }
  .rc-win.min .rc-head .rc-min::before { content: "▴"; }
  .rc-head .rc-x { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; font-size: 22px; }

  /* painel da conversa aberta */
  .rc-win:not(.min) { position: absolute; inset: 0; z-index: 2; width: auto; max-width: none; border: 0; box-shadow: none; }
  .rc-win:not(.min) .rc-msgs { flex: 1 1 auto; height: auto; min-height: 0; }
  .rc-msgs { padding: 10px 12px; font-size: 14px; line-height: 1.45; overscroll-behavior: contain; }
  /* poucas mensagens: ficam logo acima do campo (perto do polegar), como num aplicativo de conversa */
  .rc-win:not(.min) .rc-msgs { display: flex; flex-direction: column; }
  .rc-win:not(.min) .rc-msgs > :first-child { margin-top: auto; }
  .rc-msgs p { margin-bottom: 8px; }
  .rc-msgs small { font-size: 12px; }
  .rc-form input, .rc-sp .rc-form input { min-height: 48px; padding: 10px 12px; font-size: 16px; }

  /* barra e lista de contatos */
  .rc-bar { display: flex; align-items: center; min-height: 44px; padding: 0 14px; box-sizing: border-box; font-size: 13px; }
  .rc-list { width: min(280px, calc(100vw - 48px)); max-height: min(300px, 50vh); max-height: min(300px, 50svh); overscroll-behavior: contain; }
  .rc-list button { min-height: 44px; padding: 0 12px; line-height: 44px; border-bottom: 1px solid #e5e5e5; font-size: 14px; }
  .rc-sp .rc-list button { border-bottom-color: #d9bfb7; }
  .rc-list p { padding: 12px; font-size: 13px; }
  /* "Adicione amigos para conversar." era cinza #777 (no papel rosado do 4spore, abaixo do contraste mínimo) */
  .rc-list p { color: #5f5f5f; }
  .rc-sp .rc-list p { color: #6b4a3f; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* deitado: a conversa fica à direita e o mural continua visível à esquerda */
  .rc-win:not(.min) { left: auto; width: min(360px, 60%); border-left: 1px solid #999; box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2); }
  .rc-sp .rc-win:not(.min) { border-left-color: #d9bfb7; }
}

/* ---------- 5. 4SPORE ---------- */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .spore { padding: 6px 10px 72px; font-size: 14px; line-height: 1.45; }
  .spore :is(input, textarea, button) { font-size: 14px; }
  .spore form button { min-height: 44px; padding: 0 16px; }
  .sp-top { row-gap: 0; font-size: 13px; }
  .sp-banner small { font-size: 12px; }
  .sp-you, .sp-closed { font-size: 13px; }
  .sp-rules { font-size: 12px; }
  .sp-omit { font-size: 13px; }

  /* links entre colchetes, citações e [apagar]: área de toque maior sem mudar a linha */
  .spore :is(.sp-lk, .sp-quote, .sp-del) { padding: 7px 0; }
  .spore .sp-del { font-size: 12px; }
  /* cabeçalho dos posts mais espaçado: IDs e links não ficam colados uns nos outros */
  .sp-op, .sp-post { line-height: 1.75; }
  .sp-op blockquote, .sp-post blockquote { line-height: 1.5; }
  /* os grupos do cabeçalho não se partem no meio: "(ID: pílula)" e "No.1000"
     (o "(ID:" ficava no fim de uma linha e a pílula na seguinte) */
  .spore :is(.sp-idwrap, .sp-no) { white-space: nowrap; }
  /* o ID colorido continua uma pílula; a área de toque passa da borda dela */
  .spore .sp-id { position: relative; display: inline-block; padding: 3px 8px; font-size: 12px; line-height: 18px; }
  .spore .sp-id::after { content: ""; position: absolute; inset: -8px -3px; }
  /* [hwk] e [início] são palavras curtas: a área de toque cresce para os lados sem afastar os colchetes */
  .sp-top .sp-lk { padding: 7px 6px; margin: 0 -6px; }

  /* formulário de fio novo: rótulos à esquerda, campos na largura que sobra */
  .sp-postform table { display: block; width: 100%; margin: 0; }
  .sp-postform tbody { display: grid; gap: 3px; }
  .sp-postform tr { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 3px; }
  .sp-postform td { display: block; min-width: 0; }
  .sp-postform td.lbl { display: flex; align-items: center; padding: 0 8px; font-size: 13px; }
  .sp-postform td:has(> button) { display: flex; gap: 6px; }
  .sp-postform :is(input, textarea) { width: 100%; max-width: none; min-height: 44px; box-sizing: border-box; }
  .sp-postform textarea { min-height: 104px; }

  /* resposta ao fio */
  .sp-replyform { gap: 8px; margin: 8px 0 0; }
  .sp-replyform textarea { flex: 1 1 100%; width: auto; max-width: none; min-height: 88px; box-sizing: border-box; }

  /* contatos anônimos: linhas mais altas para tocar nos [sussurrar] / [remover] */
  .sp-contacts { padding: 8px 10px; }
  .sp-contacts p { line-height: 2.5; }
  /* sem contatos, o aviso é uma frase: altura de linha normal (com 2,5 ela se partia com um vão enorme) */
  .sp-contacts p:not(:has(.sp-id)) { line-height: 1.5; }

  /* menu do ID (o JS posiciona; até 170 px de largura ele nunca passa da borda direita) */
  .sp-menu { box-sizing: border-box; min-width: 160px; max-width: 170px; }
  .sp-menu b, .sp-menu span { padding: 8px 12px; font-size: 14px; }
  .spore .sp-menu button { display: flex; align-items: center; min-height: 44px; font-size: 14px; }
}
@media (max-width: 480px) {
  .sp-arrows { padding: 0 3px 0 0; }
  .sp-postform tr { grid-template-columns: 88px minmax(0, 1fr); }
  .sp-boardtitle { font-size: 26px; line-height: 1.1; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .sp-banner { height: 76px; }
  .sp-banner span { font-size: 34px; }
}

/* ---------- 6. SEM MOUSE ---------- */
@media (hover: none) {
  /* sem mouse: o toque mostra na hora o que o mouse mostrava ao passar por cima */
  .hb .hb-links button:active, .hb .hb-top nav button:active { background: #d8dfea; }
  .hb .hb-lk:active { text-decoration: underline; }
  .rc-list button:active { background: #d8dfea; }
  .rc-sp .rc-list button:active { background: #ea8; }
  .spore .sp-menu button:active { background: #ea8; }
  .spore :is(.sp-lk, .sp-quote):active { color: #dd0000; }
  .tor-ident:active { background: #7d4698; }
}

/* =========================================================
   LOJAS — Melvald's / cofre, Melvald's.com no monitor e o mercado negro
   ========================================================= */
/* =========================================================
   CELULAR — as lojas (agente "lojas")
   #loja: Melvald's General Store (Hawkins) e o cofre de blockchain (Invertido)
   #compras: Melvald's.com no IE dentro do monitor CRT (Hawkins) e o
   mercado negro nadaaquieseguro no Tor (Invertido).
   Nada aqui vale no desktop: tudo fica dentro de consultas de celular,
   toque ou "sem mouse". A moldura genérica das janelas (.ie-*, .tor-*)
   é do agente "redes" (redes.css); aqui só o que é de #compras:
   o monitor CRT, o espaço em volta e o conteúdo das duas lojas.
   ========================================================= */

/* ---------------------------------------------------------
   1. MELVALD'S GENERAL STORE e o COFRE (#loja)
   --------------------------------------------------------- */

/* letras e alvos de toque: celular em pé, deitado e tablet */
@media (max-width: 760px), (pointer: coarse) {
  /* a placa: o subtítulo pintado é informação (lugar da loja), não só enfeite */
  #loja .mv-sub { font-size: 12px; letter-spacing: 0.16em; }
  #loja .mv-est { font-size: 11px; }
  /* o visor da caixa registradora */
  #loja .mk-price span { font-size: 12px; }
  #loja .mk-flow { font-size: 14px; line-height: 1.45; }
  #loja .mk-flow small { font-size: 13px; line-height: 1.5; }
  /* o cartão do produto */
  #loja .mv-desc { font-size: 14px; }
  #loja .mv-mode button { min-height: 48px; }
  #loja .mv-tag small { font-size: 12px; }
  #loja .mv-buy label { font-size: 13px; }
  #loja .mv-buy input { min-height: 46px; }
  /* os botões rápidos (0,1 · 0,25 · 0,5 · 1 · tudo) viram teclas do tamanho do dedo, numa fileira só */
  #loja .mv-quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  #loja .mv-quick button { min-width: 0; min-height: 44px; padding: 0 4px; font-size: 14px; }
  #loja .mv-total { font-size: 14px; line-height: 1.5; }
  #loja .mv-total small { font-size: 12.5px; }
  /* carteira */
  #loja .mv-wallet-label { font-size: 12px; }
  #loja .mv-wallet small { font-size: 13px; line-height: 1.4; }
  /* ordem de pagamento (Hawkins) e envio de BLK (cofre): campos de 16 px (sem zoom no iPhone) e altos */
  #loja .send-form { gap: 10px; }
  #loja .send-form label { font-size: 13px; }
  #loja .send-form :is(input, select) { min-height: 46px; padding: 10px 11px; font-size: 16px; }
  #loja .send-info { font-size: 13px; line-height: 1.5; }
  #loja .send-form .gloss-btn { min-height: 46px; padding: 11px 16px; font-size: 15px; }
  /* livro-caixa: a descrição quebra a linha em vez de sumir em "…" */
  #loja .led-title { font-size: 13px; }
  #loja .ledger { font-size: 14px; }
  #loja .led-what { white-space: normal; overflow-wrap: break-word; }
  #loja .led-date { font-size: 12px; }
  /* o saldo na viga do cofre (no Hawkins o visor verde já tem 20 px) */
  #loja .box-tag { font-size: 13px; }
  /* a história da moeda: letra de leitura e a largura da tela */
  #loja .blk-story { width: min(380px, calc(100vw - 32px)); font-size: 14px; line-height: 1.55; }
  #loja .blk-story b { font-size: 17px; }
  #loja .blk-story code { font-size: 15px; }
  #loja .blk-story .blk-small { font-size: 13px; }
  /* "merkle" em negrito no meio da frase (a regra do título "b" o jogava para uma linha própria, em letra grande) */
  #loja .blk-story .blk-small b { display: inline; margin: 0; font: inherit; font-weight: 700; }
  /* no cofre, a história abre centrada embaixo do visor inteiro (presa à moeda, com o cofre deitado
     ela saía pela borda esquerda da tela; em pé, cobria o saldo) */
  #loja .vault-head { position: relative; }
  #loja .vault-head .blk-coin-wrap { position: static; }
}

/* sem mouse: um toque na moeda mostra a história e outro fecha (economy.js marca .blk-open;
   o celular não tem "passar o mouse") */
@media (hover: none) {
  #loja .blk-coin-wrap.blk-open .blk-story { opacity: 1; visibility: visible; transform: translateX(-50%); }
  /* o iPhone deixa o :hover "grudado" depois do toque: aqui quem manda é o toque (abre/fecha) */
  #loja .blk-coin-wrap:not(.blk-open):hover .blk-story { opacity: 0; visibility: hidden; }
}
/* sem mouse: a carteira solta as notas quando é tocada (no computador isso é no passar o mouse) */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  #loja .mv-wallet:is(:hover, :active) .wallet-cash-layer img { animation: walletBillsFall 1.2s cubic-bezier(0.2, 0.65, 0.35, 1) var(--cash-delay) both; }
}

/* Invertido: as vinhas das bordas (30% da tela de cada lado no celular) cruzavam o texto do cofre;
   a caixa fica na frente delas, como a janela do 4spore e a do mercado negro */
@media (max-width: 760px), (pointer: coarse) {
  .theme-upside #loja .shop { z-index: 6; }
}

/* layout do celular em pé */
@media (max-width: 760px) {
  #loja .mv-sign { margin-bottom: 16px; padding: 16px 12px 20px; }
  #loja .mk { gap: 12px; margin-bottom: 16px; padding: 14px 16px; }
  #loja .mv-grid { gap: 16px; }
  #loja .mv-product { padding: 16px; }
  #loja .mv-side { gap: 16px; }
  #loja .led-title { margin-top: 22px; }
  /* cofre: a moeda em cima, o saldo embaixo, tudo no meio */
  #loja .vault-head { gap: 12px; padding: 18px 16px; }
  #loja .vault-note { font-size: 15px; }
  #loja .vault-send { max-width: none; }
}
@media (max-width: 480px) {
  #loja .mv-product { padding: 14px 12px; }
  #loja .mk { padding: 12px 14px; }
  #loja .mk-price b { font-size: 34px; }
  /* livro-caixa estreito: nº do bloco e valor na 1ª linha; o que foi e a data embaixo, na largura toda */
  #loja .ledger li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bloco valor" "oque oque" "data data"; gap: 2px 10px; }
  #loja .ledger .led-block { grid-area: bloco; }
  #loja .ledger .led-amt { grid-area: valor; justify-self: end; }
  #loja .ledger .led-what { grid-area: oque; }
  #loja .ledger .led-date { grid-area: data; }
  #loja .mv .ledger li { padding: 9px 6px; }
  .theme-hawkins #loja .mv .ledger { padding-left: 26px; background-position: -4px 0, 0 0; }
}
@media (max-width: 360px) {
  #loja .mv-quick { gap: 6px; }
  #loja .mv-quick button { font-size: 13px; }
}

/* ---------------------------------------------------------
   2. LOJA ONLINE (#compras): a janela vira a tela do aplicativo
   A moldura genérica (altura = tela visível abaixo do menu, rolagem
   por dentro, menu/ferramentas do IE e circuito do Tor escondidos) é
   do redes.css. Aqui: o espaço em volta, a janela na frente das vinhas
   do Invertido e o monitor CRT bege do Hawkins, que também precisa
   caber inteiro na tela (a moldura de plástico entra na conta).
   --------------------------------------------------------- */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* Invertido: a janela do Tor começa logo abaixo do menu, com a mesma folga do 4spore */
  #compras.buy-wrap { padding-top: 8px; padding-bottom: 12px; }
}
@media (max-width: 760px), (pointer: coarse) {
  /* as vinhas das bordas passavam por cima do texto do mercado negro: a janela fica na frente delas */
  #compras .browser { position: relative; z-index: 6; }
}
@media (max-width: 760px) {
  /* Hawkins: moldura mais fina; plaquinha HAWKTRON e LED continuam embaixo */
  .theme-hawkins #compras.buy-wrap { margin: 8px auto 22px; padding: 10px 10px 30px; }
  .theme-hawkins #compras.buy-wrap::after { bottom: 8px; }
  .theme-hawkins #compras.buy-wrap::before { bottom: 12px; }
  /* tela visível − menu − moldura (10 + 30) − folgas (8 + 8) */
  .theme-hawkins #compras .browser.ie { height: calc(100vh - var(--mb-nav-h, 46px) - 56px - env(safe-area-inset-bottom, 0px)); height: calc(100svh - var(--mb-nav-h, 46px) - 56px - env(safe-area-inset-bottom, 0px)); }
}
/* celular deitado: a moldura do monitor fica bem fina para sobrar tela; o notch não cobre as bordas */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #compras.buy-wrap, #loja.shop-wrap { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .theme-hawkins #compras.buy-wrap { width: calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)); margin: 6px auto 16px; padding: 7px 14px 20px; border-radius: 14px 14px 18px 18px; }
  .theme-hawkins #compras.buy-wrap::after { bottom: 4px; padding: 1px 10px; font-size: 9px; letter-spacing: 0.2em; }
  .theme-hawkins #compras.buy-wrap::before { right: 24px; bottom: 7px; width: 6px; height: 6px; }
  /* tela visível − menu − moldura (7 + 20) − folgas (6 + 6) */
  .theme-hawkins #compras .browser.ie { height: calc(100vh - var(--mb-nav-h, 46px) - 40px - env(safe-area-inset-bottom, 0px)); height: calc(100svh - var(--mb-nav-h, 46px) - 40px - env(safe-area-inset-bottom, 0px)); box-shadow: 0 0 0 4px #15171b, 0 0 0 5px #8c846f, 0 0 14px 4px rgba(110, 160, 225, 0.2); }
  .theme-hawkins #compras .ie-status::after { display: none; }
}

/* ---------------------------------------------------------
   3. MELVALD'S.COM por dentro (Hawkins): o site de 2003 legível e tocável
   A interface de 11 px sobe para 13 px; campos com 16 px; botões e
   links com 40–44 px de altura. As cores e o jeitão (amarelo, azul,
   abas de pasta, botão laranja) continuam.
   --------------------------------------------------------- */
@media (max-width: 760px), (pointer: coarse) {
  #compras .mvs { font-size: 13px; line-height: 1.45; }
  #compras .mvs label { font-size: 13px; }
  #compras .mvs :is(input, select, button) { font-size: 13px; }
  #compras .mvs :is(input, select) { font-size: 16px; }
  /* cabeçalho amarelo: logo, "Olá", links da conta com altura de dedo */
  #compras .mvs-top { gap: 6px 14px; padding: 10px 12px 8px; }
  #compras .mvs-logo span { font-size: 27px; }
  #compras .mvs-logo small { font-size: 11px; }
  #compras .mvs-account { line-height: 1.55; }
  #compras .mvs-account a { display: inline-flex; align-items: center; min-height: 40px; }
  #compras .mvs-bal b { font-size: 14px; }
  /* saldo e entregas do dia na mesma linha quando cabem (quebram sozinhos quando não) */
  #compras .mvs-account .mvs-bal { margin-right: 14px; }
  #compras .mvs-account .mvs-bal + br { display: none; }
  #compras .mvs-account .mvs-lim { display: inline-block; }
  /* busca: campo largo, departamento e OK do tamanho do dedo */
  #compras .mvs-search { gap: 8px; padding: 8px 12px 10px; }
  #compras .mvs-search label { flex: 1 1 200px; min-width: 0; gap: 6px; font-size: 14px; }
  #compras .mvs-search input { flex: 1 1 auto; width: auto; min-width: 0; min-height: 42px; box-sizing: border-box; padding: 6px 8px; }
  #compras .mvs-search select { flex: 1 1 140px; min-width: 0; max-width: 280px; min-height: 42px; box-sizing: border-box; }
  #compras .mvs-search button { flex: 0 0 auto; min-width: 58px; min-height: 42px; padding: 0 14px; font-size: 14px; }
  /* abas dos departamentos: uma fileira que desliza de lado (antes eram 3–4 linhas de abas pequenas) */
  #compras .mvs-tabs { flex-wrap: nowrap; gap: 3px; padding: 8px 12px 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #compras .mvs-tabs::-webkit-scrollbar { display: none; }
  #compras .mvs-tabs::after { content: ""; flex: 0 0 9px; }
  #compras .mvs-tabs button { min-height: 44px; padding: 0 12px; font-size: 13px; scroll-snap-align: start; }
  #compras .mvs-marquee { padding: 4px 0; font-size: 13px; }
  /* vitrine: a oferta e os títulos das prateleiras */
  #compras .mvs-banner b { font-size: 16px; line-height: 1.2; }
  #compras .mvs-banner span { line-height: 1.45; }
  #compras .mvs-h { font-size: 16px; }
  #compras .mvs-h small { font-size: 12px; }
  #compras .mvs-h a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
  #compras .mvs-h .mvs-more { padding-left: 8px; font-size: 13px; }
  #compras .mvs-crumb a { display: inline-flex; align-items: center; min-height: 40px; }
  /* a grade de produtos: 1 coluna no celular, 2 quando cada cartão tem pelo menos 250 px (nunca espremido) */
  #compras .mvs-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
  /* o cartão fica deitado: foto à esquerda, texto à direita, quantidade e "Comprar" embaixo na largura toda */
  #compras .mvs-prod { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-content: start; gap: 3px 12px; padding: 10px; }
  #compras .mvs-prod > * { grid-column: 2; min-width: 0; }
  #compras .mvs-prod > .mvs-pic { grid-column: 1; grid-row: 1 / span 5; align-self: start; height: 76px; margin: 0; }
  #compras .mvs-pic .shop-item-art { width: 66px; height: 66px; }
  #compras .mvs-prod > :is(.mvs-buy, .mvs-btn) { grid-column: 1 / -1; margin-top: 6px; }
  #compras .mvs-name { font-size: 14px; line-height: 1.3; }
  #compras .mvs-kind { font-size: 12px; }
  #compras .mvs-price small { font-size: 12px; }
  #compras .mvs-price b { font-size: 18px; }
  #compras :is(.mvs-have, .mvs-lock) { font-size: 12px; }
  #compras .mvs-buy { gap: 10px; }
  #compras .mvs-buy label { gap: 6px; font-size: 13px; }
  #compras .mvs-buy select { min-width: 66px; min-height: 44px; box-sizing: border-box; }
  #compras .mvs .mvs-btn { min-height: 44px; padding: 0 14px; font-size: 14px; }
  /* recibo do pedido: o ✕ com área de dedo */
  #compras .mvs-receipt { gap: 4px; padding: 10px 50px 10px 12px; }
  #compras .mvs-receipt a { display: inline-flex; align-items: center; min-height: 36px; }
  #compras .mvs .mvs-x { top: 0; right: 0; width: 44px; height: 44px; font-size: 16px; }
  /* a coluna lateral (vai para baixo no celular): caixas com letra de leitura e links em linhas altas */
  #compras .mvs-box h4 { padding: 6px 8px; font-size: 13px; }
  #compras .mvs-box ul { padding: 4px 8px 4px 26px; }
  #compras .mvs-box ol { padding: 8px 10px 8px 28px; }
  #compras .mvs-box li { margin: 3px 0; }
  #compras .mvs-box ul a { display: inline-flex; align-items: center; min-height: 40px; }
  #compras .mvs-box li small { font-size: 12px; }
  /* link no meio do texto ("sua ficha"): a área de toque cresce sem mexer na linha */
  #compras .mvs-box :is(p, ol) a { padding: 12px 3px; margin: -12px -3px; }
  #compras .mvs-box p { margin: 8px 10px; }
  #compras .mvs-box > .mvs-btn.mvs-btn { display: block; width: calc(100% - 20px); margin: 0 10px 10px; }
  #compras .mvs-18i { width: 20px; height: 20px; font-size: 10px; }
  #compras .mvs-seals span { width: 72px; height: 42px; font-size: 10px; }
  #compras .mvs-foot { padding: 12px 10px 16px; font-size: 12px; line-height: 1.5; }
  /* efeitos na ficha (+1 FOR) — só nas lojas; o inventário da ficha tem o próprio tamanho */
  #compras .bonus-chips { gap: 4px; }
  #compras .bonus-chips span { padding: 0 5px; font-size: 12px; }
}
@media (max-width: 760px) {
  /* a coluna lateral desce para depois dos produtos (já acontecia até 700 px) */
  #compras .mvs-body { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 10px 10px 18px; }
  #compras .mvs-side { order: 2; }
  #compras .mvs-top { flex-wrap: wrap; }
  #compras .mvs-account { text-align: left; }
}
/* deitado: a tela da janela é baixa (uns 200 px); o cabeçalho amarelo e a busca ficam mais enxutos */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #compras .mvs-top { padding: 6px 12px; }
  #compras .mvs-logo span { font-size: 23px; }
  #compras .mvs-account { line-height: 1.3; }
  #compras .mvs-search { padding: 6px 12px; }
  #compras .mvs-tabs { padding-top: 6px; }
  #compras .mvs-logo { justify-content: center; min-height: 40px; }
}
/* movimento reduzido: o letreiro corrido para e mostra o começo do aviso */
@media (max-width: 760px) and (prefers-reduced-motion: reduce), (pointer: coarse) and (prefers-reduced-motion: reduce) {
  #compras .mvs-marquee { padding-left: 12px; padding-right: 12px; text-overflow: ellipsis; }
  #compras .mvs-marquee span { display: inline; padding-left: 0; animation: none; }
}
@media (max-width: 480px) {
  /* busca em duas linhas: o campo inteiro em cima; departamento e OK embaixo (o OK não fica sozinho numa linha) */
  #compras .mvs-search label { flex-basis: 100%; }
  #compras .mvs-search select { flex: 1 1 0; max-width: none; }
  #compras .mvs-banner { gap: 8px; padding: 10px 12px; }
  #compras .mvs-burst { width: 80px; height: 80px; font-size: 24px; }
  #compras .mvs-body { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 360px) {
  #compras .mvs-prod { grid-template-columns: 64px minmax(0, 1fr); gap: 3px 10px; }
  #compras .mvs-prod > .mvs-pic { height: 64px; }
  #compras .mvs-pic .shop-item-art { width: 56px; height: 56px; }
  #compras .mvs-burst { width: 76px; height: 76px; font-size: 22px; }
}

/* ---------------------------------------------------------
   4. NADAAQUIESEGURO por dentro (Invertido): terminal verde legível
   A tabela de 6 colunas (que rolava de lado) vira uma lista de fichas.
   --------------------------------------------------------- */
@media (max-width: 760px), (pointer: coarse) {
  #compras .nadq { font-size: 14px; line-height: 1.5; }
  #compras .nadq :is(button, select) { font-size: 14px; }
  #compras .nadq select { font-size: 16px; }
  #compras .nq-tag { font-size: 12px; line-height: 1.5; }
  #compras .nq-id small { font-size: 12.5px; line-height: 1.45; }
  #compras .nq-btn { min-height: 44px; padding: 0 14px; font-size: 14px; }
  /* filtro por atributo: teclas de 40 px */
  #compras .nq-filter { gap: 6px; }
  #compras .nq-filter button { min-width: 46px; min-height: 40px; padding: 0 8px; font-size: 13px; }
  #compras .nq-prod small, #compras .nq-kind { font-size: 12.5px; }
  #compras :is(.nq-old, .nq-new) small { font-size: 12px; }
  #compras .nadq select { min-width: 66px; min-height: 44px; box-sizing: border-box; }
  /* a quantidade continua um campo de terminal: o Safari desenhava a caixa nativa clara (texto verde sobre cinza) */
  #compras .nadq select { -webkit-appearance: none; appearance: none; padding: 0 28px 0 10px; border: 1px solid #2f4d33; border-radius: 0; background-color: #000; background-image: linear-gradient(45deg, transparent 50%, #9fe0a8 50%), linear-gradient(135deg, #9fe0a8 50%, transparent 50%); background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat; color: #9fe0a8; }
  #compras .nadq select:focus-visible { outline: 2px solid #5cff7a; outline-offset: 1px; }
  #compras .nq-foot { font-size: 12px; }
  #compras .nq-box a { display: inline-flex; align-items: center; min-height: 40px; }
}
/* celular em pé, deitado e tablet estreito (a tabela com alvos de dedo não cabia em 768 px) */
@media (max-width: 760px), (pointer: coarse) and (max-width: 900px) {
  #compras .nadq { padding: 12px 12px 40px; }
  /* identidade falsa: a foto, o texto; embaixo o preço e o botão */
  #compras .nq-id { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pic info info" "pic price buy"; gap: 8px 12px; padding: 12px; }
  #compras .nq-id-pic { grid-area: pic; align-self: start; }
  #compras .nq-id > div { grid-area: info; }
  #compras .nq-id .nq-price { grid-area: price; align-self: center; }
  #compras .nq-id > :is(.nq-btn, .nq-owned) { grid-area: buy; justify-self: end; }
  /* a lista do mercado: cada produto vira uma ficha (produto, efeito, preços, quantidade e comprar) */
  #compras .nq-table-wrap { overflow: visible; }
  #compras :is(.nq-list, .nq-list tbody) { display: block; width: 100%; }
  #compras .nq-list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #compras .nq-list tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); column-gap: 18px; }
  #compras .nq-list tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 12px 0; border-bottom: 1px dashed #1c2e1f; }
  #compras .nq-list td { display: block; padding: 0; border: 0; }
  #compras .nq-list td:is(:nth-child(1), :nth-child(2)) { grid-column: 1 / -1; }
  #compras .nq-list td:nth-child(2) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  #compras .nq-list td:nth-child(4), #compras .nq-list td:nth-child(6) { text-align: right; }
  #compras .nq-list td.nq-prod { display: flex; align-items: center; min-width: 0; gap: 10px; }
  #compras .nq-old s { white-space: nowrap; }
  #compras :is(.nq-old, .nq-new) small { white-space: normal; }
  /* as palavras do cabeçalho da tabela voltam como rótulos de cada ficha */
  #compras .nq-list td:nth-child(3)::before { content: "na loja "; color: #6f8f74; }
  #compras .nq-list td:nth-child(4)::before { content: "aqui "; color: #6f8f74; }
  #compras .nq-list td:nth-child(5)::before { content: "qtd "; color: #6f8f74; }
  #compras .nq-list td:nth-child(5) { display: flex; align-items: center; gap: 6px; }
  #compras .nq-orders li { padding: 6px 0; }
  #compras .nq-box { padding: 16px; }
}

/* =========================================================
   CLASSES E JORNAL — mural das classes, ficha da subclasse e o Hawkins Post
   ========================================================= */
/* ---------- jornal na faixa de transição (≤ 900 px, tablet ou janela estreita): defeito que já existia ----------
   as secundárias herdavam os "span 7/5/4" da grade de 12 colunas dentro da grade de 2: uma palavra por linha,
   matérias sobrepostas e rolagem lateral. Aqui cada matéria ocupa uma coluna (a primeira, a largura toda). */
@media (max-width: 900px) {
  #jornal .jn-cols > .jn-story { grid-column: auto; }
  #jornal .jn-cols > .jn-story:first-child { grid-column: 1 / -1; }
  #jornal .jn-cols .jn-body { column-count: 1; }
}

/* =========================================================
   CELULAR — CLASSES (classes.js, .cls-) e JORNAL DE HAWKINS (jornal.js, .jn-)
   Tudo aqui fica dentro de consultas de celular/toque: o desktop não muda.
   "Celular" = até 760 px OU celular deitado (landscape baixo com toque, que passa de 760 px de largura):
   letras, alvos de toque e correções de layout valem nos dois; o que só serve em pé fica no (max-width).
   ========================================================= */

/* =================== CLASSES =================== */

/* ---------- mural, classe aberta e ficha: letras e alvos (em pé e deitado) ---------- */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* cartas do mural */
  .cls-top { font-size: 11px; }
  .cls-desc { font-size: 14px; line-height: 1.45; }
  .cls-crumb { font-size: 12px; }
  .cls-legend { gap: 6px 14px; font-size: 12px; }
  .cls-legend small { font-size: 12px; }
  #cls-count { font-size: 12px; }
  .cls-kicker { font-size: 12px; }
  /* cartas das subclasses: rótulos que dá para ler */
  .cls-sub-arch { font-size: 12.5px; }
  .cls-sub-top span { font-size: 12px; }
  .cls-sub-pts small { font-size: 11px; }
  .cls-rank { font-size: 11px; }
  .cls-foot { font-size: 14px; }
  .cls-ranks li { font-size: 13px; }
  /* Invertido: o texto fica sobre o mural escuro (com vinhas); uma sombra curta garante a leitura */
  .theme-upside #classes :is(.cls-hero-text, .cls-lead) { text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, 0.9); }
  /* a ficha (janela) */
  .cls-x { width: 44px; height: 44px; }
  .cls-sheet-kicker { font-size: 12px; letter-spacing: 0.04em; }
  .cls-sheet-arch { font-size: 13px; }
  .cls-attrs-hint { margin: -4px 0 10px; font-size: 12.5px; line-height: 1.4; }
  /* cada linha de atributo abre a telinha ao toque: altura de dedo */
  .cls-attr { min-height: 44px; }
  .cls-attr-name { font-size: 14px; }
  .cls-lim { font-size: 12px; }
  .cls-limits { font-size: 14px; }
  .cls-sheet-total { font-size: 14px; }
  .cls-sheet .cls-legend { font-size: 12px; }
  .cls-nav { min-height: 44px; }
  .cls-sheet-count { font-size: 13px; }
  /* a telinha (TV) do atributo: texto de leitura */
  .cls-tip-screen { padding: 8px 12px 10px; }
  .cls-tip-head { margin-bottom: 8px; padding: 6px 0 5px; }
  .cls-tip-name { font-size: 21px; }
  .cls-tip-abbr { font-size: 20px; }
  .cls-tip-body { gap: 7px; font-size: 14px; line-height: 1.45; }
  .cls-tip-sum { font-size: 14.5px; }
  .cls-tip-label { font-size: 17px; }
  .cls-tip-foot { font-size: 12px; }
  .cls-tip-foot b { font-size: 14px; }
}
@media (pointer: coarse) {
  .cls-back { min-height: 44px; }
}

/* ---------- mural (em pé) ---------- */
@media (max-width: 480px) {
  /* carta deitada: o desenho fica ao lado do número e do nome; a descrição usa a largura toda da carta
     (numa coluna de 140 px ela virava uma palavra por linha e "Cheerleaders" passava da borda) */
  .cls-picker .cls-face { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "art top" "art name" "desc desc" "cta cta"; gap: 6px 12px; padding: 16px 14px 14px; }
  .cls-picker .cls-art { align-self: start; min-height: 0; aspect-ratio: 1; }
  .cls-picker .cls-art .cls-class-illustration { width: 92%; }
  .cls-picker .cls-top { flex-wrap: wrap; row-gap: 2px; align-self: end; }
  .cls-picker .cls-top > span { white-space: nowrap; }
  .cls-picker .cls-name { align-self: start; font-size: 18px; overflow-wrap: anywhere; }
  .cls-picker .cls-desc { font-size: 14px; }
}
@media (max-width: 360px) {
  .cls-picker .cls-face { grid-template-columns: 64px minmax(0, 1fr); gap: 6px 10px; padding-left: 12px; padding-right: 12px; }
  .cls-picker .cls-name { font-size: 15px; letter-spacing: 0; }
}

/* ---------- dentro de uma classe (em pé) ---------- */
@media (max-width: 760px) {
  /* destaque: a carta ao lado da folha com o texto. O style.css (≤ 640) punha o texto em display: contents — em
     Hawkins isso apagava a folha de caderno (texto solto na cortiça, furos do fichário espalhados) e o nome
     comprido (Cheerleaders) era cortado ao lado da carta, nos dois mundos. Aqui o texto volta a ser um bloco. */
  .cls-hero { grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 24px; }
  .cls-hero-text { display: block; }
  .cls-hero-card { grid-row: auto; }
  .cls-hero-card .cls-top { display: none; }
  .cls-hero-card .cls-face { gap: 6px; padding: 12px 8px 10px; }
  .cls-hero-card .cls-name { font-size: 11px; }
  .cls-hero-name { font-size: clamp(24px, 4.6vw, 34px); overflow-wrap: anywhere; }
  .cls-intro { margin-top: 10px; font-size: 15px; line-height: 1.6; }
  .theme-hawkins #classes .cls-hero-card { margin-top: 8px; }
  .theme-hawkins #classes .cls-intro { font: 15px/26px var(--font-type); }
}
@media (max-width: 480px) {
  /* celular estreito: a carta presa no alto e o texto em largura total */
  .cls-hero { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cls-hero-card { justify-self: center; width: 124px; position: relative; z-index: 2; margin-bottom: 14px; }
  .cls-hero-name { font-size: clamp(24px, 7.4vw, 34px); }
  /* Hawkins: a carta fica presa por cima da borda da folha de caderno */
  .theme-hawkins #classes .cls-hero-card { margin-top: 0; margin-bottom: -12px; }
  .theme-hawkins #classes .cls-hero-text { padding-top: 26px; }
  .cls-subs { gap: 16px 10px; }
  .cls-sub-face { padding: 13px 9px 10px; }
}
@media (max-width: 360px) {
  .cls-sub-ico { width: 70px; height: 70px; }
  .cls-sub-name { font-size: 14.5px; }
  /* "Cheerleaders" inteiro numa linha da folha de caderno */
  .cls-hero-name { font-size: 23px; }
  .theme-hawkins #classes .cls-hero-text { padding-right: 10px; }
}

/* ---------- a ficha da subclasse (janela) ---------- */
@media (max-width: 760px) {
  /* cabe na tela com folga para o notch e a barra do iPhone; a rolagem é por dentro */
  .cls-sheet, .cls-sheet-in { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  /* 12 estrelas + número + nome não cabiam em 320 px (a linha passava da janela): estrelas um pouco menores */
  .cls-attr { --star-size: 10.5px; gap: 6px; }
  .cls-sheet-body { padding: 14px 12px 12px; }
  /* cabeçalho: desenho menor para o título ter largura */
  .cls-sheet-head { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px; padding-left: 10px; }
  .cls-sheet-ico { width: 56px; height: 56px; }
  .cls-sheet-kicker { letter-spacing: 0.02em; }
}
/* celular deitado: cabeçalho da ficha compacto para sobrar altura para os atributos */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .cls-sheet, .cls-sheet-in { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .cls-sheet { width: min(640px, calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
  .cls-sheet-head { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; padding: 6px 8px 6px 14px; }
  .cls-sheet-ico { width: 52px; height: 52px; }
  .cls-sheet-head h3 { font-size: 20px; }
  .cls-sheet-arch { margin-top: 1px; font-size: 12px; }
  .cls-sheet-body { padding: 10px 18px 10px; }
  .cls-sheet-nav { padding: 2px 10px; }
}

/* ---------- a telinha (TV) que explica o atributo: altura ---------- */
@media (max-width: 760px) {
  /* em pé a TV (com a moldura de madeira que o hawkins.css dá a .cls) fica abaixo da metade da altura: assim o classes.js consegue abri-la acima ou abaixo da
     linha tocada (a linha continua visível; tocar nela de novo desliga). O texto rola por dentro da TV. */
  .cls-tip-screen { max-height: max(170px, calc(50vh - 84px)); max-height: max(170px, calc(50svh - 84px)); }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* deitado a TV abre ao lado do número (sobra largura, falta altura) */
  .cls-tip-screen { max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); }
}

/* =================== JORNAL: leitura (corpo 16–17 px, uma coluna, fotos inteiras, links tocáveis) =================== */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* faixa de seções (Capa · Arquivo · Redação) e voltar: alvos do tamanho do dedo */
  .jn-bar-link { display: inline-flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .theme-hawkins #jornal .jn-bar-link { padding: 0 14px; }
  .jn-crumb { font-size: 14px; }
  .jn-crumb a, .jn-back a { display: inline-flex; align-items: center; min-height: 44px; }

  /* cabeçalho da edição */
  .jn-dateline { font-size: 12px; }
  .jn-ear { font-size: 12px; }

  /* texto: letra de leitura, sem palavra comprida (endereço, link) empurrando a página para o lado */
  .jn-manchete, .jn-story-title, .jn-nota h4, .jn-arq-head, .jn-toc-link { overflow-wrap: anywhere; }
  .jn-body, .jn-nota p, .jn-deck, .jn-story-sub { overflow-wrap: break-word; }
  .jn-body { font-size: 17px; line-height: 1.6; }
  .jn-story-secundaria .jn-body { font-size: 16.5px; }
  .jn-story-sub { font-size: 17px; }
  .jn-byline { font-size: 12px; }
  .jn-quote { font-size: 19px; }
  .jn-photo figcaption { font-size: 13.5px; }
  .jn-photo-wait { font-size: 12px; }
  /* foto nunca mais alta que a tela; se for preciso limitar, ela aparece inteira sobre a retícula (sem esticar nem cortar) */
  .jn-photo-frame, .jn-photo-cover .jn-photo-frame { max-height: min(540px, 80vh); max-height: min(540px, 80svh); }
  .jn-photo-frame img { object-fit: contain; }
  .jn-continua { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font-size: 13px; }

  /* matérias secundárias numa coluna. No style.css (≤ 900) os "span 5/4/12" do desktop venciam o "auto" e a grade
     de uma coluna ganhava colunas extras: texto com uma palavra por linha, matérias por cima umas das outras e a
     página rolando de lado. A matéria sozinha na última linha também continuava com o texto em 2 colunas. */
  #jornal .jn-cols { grid-template-columns: minmax(0, 1fr); gap: 18px 0; }
  #jornal .jn-cols > .jn-story { grid-column: 1 / -1; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--jn-rule-soft); }
  #jornal .jn-cols > .jn-story:first-child { padding-top: 0; border-top: 0; }
  #jornal .jn-cols .jn-body, .jn-body-cols { column-count: 1; }

  /* coluna lateral: sumário com linhas tocáveis */
  .jn-toc li { padding: 0 0 6px; }
  .jn-toc li::before { padding-top: 14px; }
  .jn-toc-link { min-height: 44px; padding: 10px 0 6px; font-size: 16px; }
  .jn-toc li small { font-size: 12px; }
  .jn-nota h4 { font-size: 16px; }
  .jn-nota p { font-size: 15px; line-height: 1.5; }
  .jn-tempo p { font-size: 16px; }
  .jn-tempo small { font-size: 12px; }
  .jn-expediente { font-size: 13px; }

  /* arquivo */
  .jn-arq-meta { font-size: 12px; }
  .jn-arq-prev { font-size: 14px; }
}
/* em pé */
@media (max-width: 760px) {
  .jn-motto { letter-spacing: 0.24em; text-wrap: balance; }
  .jn-rail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .jn-manchete { font-size: 29px; }
  /* título da seção do arquivo: o nome e o filete numa linha, a contagem embaixo */
  .jn-sec { flex-wrap: wrap; row-gap: 4px; }
  .jn-sec small { order: 3; flex: 1 0 100%; }
}
@media (max-width: 360px) {
  .jn-manchete { font-size: 27px; }
}
/* deitado: texto em colunas numa tela de 390 px de altura obriga a descer e subir de novo a cada coluna; aqui o
   texto corre numa coluna só, com a linha limitada a uma medida confortável */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #jornal .jn-paper .jn-body { max-width: 38em; }
  .jn-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =================== JORNAL: redação (tabela de edições) =================== */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* cada edição vira uma ficha compacta: nº e situação, a manchete, as datas e os botões (a tabela de 900 px rolava de lado) */
  .jn-table-wrap { overflow: visible; }
  .jn-table, .jn-table tbody, .jn-table td { display: block; min-width: 0; }
  .jn-table thead { display: none; }
  .jn-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "n st" "ed ed" "dt pub" "up up" "act act"; gap: 8px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  #jornal .jn-table tr { padding-left: 10px; padding-right: 10px; }
  .jn-table td { padding: 0; border: 0; overflow-wrap: anywhere; }
  .jn-table td:nth-child(1) { grid-area: n; }
  .jn-table td:nth-child(2) { grid-area: ed; }
  .jn-table td:nth-child(3) { grid-area: st; }
  .jn-table td:nth-child(4) { grid-area: dt; }
  .jn-table td:nth-child(5) { grid-area: pub; }
  .jn-table td:nth-child(6) { grid-area: up; }
  .jn-table td:nth-child(7) { grid-area: act; }
  .jn-table td[data-label]::before { content: attr(data-label); display: block; margin: 0 0 3px; font: 700 12px var(--font-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .jn-table td small { font-size: 12px; }
  .jn-cell-title { font-size: 15px; }
  .jn-st { font-size: 12px; }
  #jornal .box-tag { font-size: 12px; }
  /* a cor das publicadas vai na ficha inteira (em cada célula virava retalhos) */
  .theme-hawkins #jornal .jn-row-publicada td, #jornal .jn-row-publicada td { background: none; }
  .theme-hawkins #jornal .jn-table tr.jn-row-publicada { background: rgba(36, 33, 43, 0.04); }
  .theme-upside #jornal .jn-table tr.jn-row-publicada { background: rgba(42, 209, 139, 0.04); }
  .jn-acts { gap: 8px; }
  .jn-acts > * { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
}

/* =================== JORNAL: editor da edição =================== */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* a barra de botões gruda no pé da tela: o .box corta com overflow: hidden, o que desligava o "sticky" (clip corta igual) */
  #jornal .jn-editor.box { overflow: clip; }
  .jn-editor .box-head h2 { flex-wrap: wrap; row-gap: 2px; }
  .jn-f-label { font-size: 13px; }
  .jn-f-label small { font-size: 12px; }
  .jn-count { font-size: 12px; }
  .jn-ed-hint { font-size: 12.5px; line-height: 1.45; }
  .jn-ed-n { font-size: 13px; }
  #jornal .jn-editor :is(input:not([type="file"]), select) { min-height: 44px; }
  .jn-ed-story-head { min-height: 52px; padding: 8px 10px; }
  .jn-ed-story-title small { font-size: 12px; }
  .jn-ed-story-btns { gap: 8px; }
  #jornal .jn-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; }
  #jornal .jn-btn-ico { width: 44px; padding: 0; }
  #jornal :is(.jn-ed-add, .jn-ed-photo-acts, .jn-ed-bar, .jn-desk-top) .gloss-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  .jn-ed-photo-prev { max-width: 300px; }
  .jn-ed-bar { gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
  .jn-ed-state { font-size: 13px; }
}
@media (max-width: 760px) {
  .jn-ed-block { padding: 10px 12px 4px; }
  /* o navegador rola o campo focado para fora da barra grudada */
  html:has(.page-active .jn-ed-bar) { scroll-padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
  /* os quatro botões num quadro 2 × 2 (sem virar uma pilha alta que tapa o formulário) */
  .jn-ed-state { flex: 1 0 100%; }
  .jn-ed-bar-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  #jornal .jn-ed-bar-btns > * { min-height: 44px; padding: 4px 8px; line-height: 1.15; text-align: center; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* deitado: barra baixa, numa linha só quando cabe (o aviso de "não salvo" sobe para cima dos botões se faltar lugar) */
  .jn-ed-bar { row-gap: 4px; padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); }
  .jn-ed-state { flex: 1 1 auto; font-size: 12px; }
  .jn-ed-bar-btns { flex: 0 1 auto; justify-content: flex-end; gap: 6px; margin-left: auto; }
  #jornal .jn-ed-bar-btns > * { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 10px; white-space: nowrap; }
  html:has(.page-active .jn-ed-bar) { scroll-padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* ---------- telinha do atributo aberta com o dedo: o ✕ para desligar (classes.js só cria o botão no toque) ---------- */
@media (pointer: coarse), (hover: none) {
  .cls-tip-x { flex: 0 0 auto; order: 3; display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -10px -8px 4px; padding: 0; border: 0; background: none; color: inherit; font: 700 20px/1 var(--font-ui); cursor: pointer; }
  .cls-tip-x:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
}

/* ---------- jornal: acabamentos da revisão independente ---------- */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* a matéria secundária é cortada nos 3 primeiros blocos: se o 3º é um intertítulo, ele ficava sozinho antes do
     "Continua na página N" (volta quando a matéria abre) */
  #jornal .jn-body > .jn-sub:has(+ .jn-more[hidden]) { display: none; }
  /* nas Notas da cidade, o intertítulo gritava mais que o título da nota (pegava a regra do h4 da nota) */
  #jornal .jn-nota .jn-sub { margin: 8px 0 2px; font: 700 13px/1.2 var(--jn-cond); letter-spacing: 0.12em; }
  /* Invertido: as vinhas das bordas passavam por cima do texto do jornal */
  .theme-upside #jornal .jn-paper { z-index: 6; }
  /* textos de apoio (assinatura, "Da redação", categorias) com contraste de leitura (~5:1) */
  .theme-hawkins .jn-wrap { --jn-ink-3: #625b67; }
  .theme-upside .jn-wrap { --jn-ink-3: #8f897f; }
  .theme-hawkins #jornal .jn-sec small { color: #36313d; }
}
@media (max-width: 480px) {
  /* editor: o nome da edição no cabeçalho quebra linha em vez de virar "Edição de sá…" */
  #jornal .jn-editor .jn-head-small { flex-basis: 100%; white-space: normal; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* orelhas "EDIÇÃO Nº 12": o número não se separa da palavra */
  #jornal .jn-ear { padding: 5px 7px; letter-spacing: 0.06em; }
  #jornal .jn-ear b { font-size: 13px; white-space: nowrap; }
  /* fotos limitadas pela altura da tela: centralizadas na coluna, não encostadas à esquerda */
  #jornal .jn-photo-frame { margin-inline: auto; }
}

/* =========================================================
   MINHA FICHA, MORADORES, ADMIN E XP
   ========================================================= */
/* =========================================================
   CELULAR — Minha Ficha, Moradores (e a janela do morador), Admin e XP.
   Parte "ficha" do mobile.css. Tudo dentro das consultas do celular:
   o desktop (mouse, mais de 760 px) não muda nada.
   A carta continua a carta colecionável "Série 2003"; a página continua
   o gibi (Hawkins) e o arquivo no escuro (Mundo Invertido).
   ========================================================= */

/* ---------- Minha Ficha no celular (em pé e deitado): abas do tamanho do dedo, letras legíveis ---------- */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* as divisórias: altura de dedo e o texto no meio (a aberta continua a de papel / a de tinta preta) */
  .stn-tabs [role="tab"] { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  .theme-hawkins #conta .stn-tabs [role="tab"] { min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
  /* Mundo Invertido: as divisórias quebram em fileiras esticadas quando não cabem (entre 521 e 760 px a tira
     rolava de lado com abas escondidas; abaixo de 520 eram 3 colunas fixas que cortavam "INVENTÁRIO" em 320 px) */
  .theme-upside .stn-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; overflow: visible; }
  .theme-upside .stn-tabs [role="tab"] { flex: 1 0 auto; bottom: 0; padding: 6px 10px; letter-spacing: 0.08em; text-align: center; }
  .theme-upside .stn-tabs [role="tab"][aria-selected="true"] { padding-bottom: 6px; }
  /* botão de virar a carta e "Distribuir pontos": alvos de toque inteiros */
  .card-flip-btn { min-height: 44px; padding: 0 20px; font-size: 12px; }
  #ficha-acts .gloss-btn { min-height: 44px; padding-left: 18px; padding-right: 18px; }
  /* o editor volta para o lugar certo sem ficar embaixo do menu fixo */
  #ficha-editor, #ficha-station { scroll-margin-top: calc(var(--mb-nav-h, 46px) + 10px); }
  /* ficha: rótulos dos quadros e as notas legíveis */
  #conta #stn-ficha .stn-data dt { font-size: 12px; letter-spacing: 0.1em; }
  #conta #stn-ficha .stn-data dd { font-size: 14.5px; }
  #conta #stn-ficha .stn-data-xp small { font-size: 12.5px; line-height: 1.45; }
  #conta #stn-ficha .stn-data-xp .card-xp { font-size: 12px; }
  #conta #stn-ficha .stn-note { font-size: 13px; }
  #conta .stn-hint { font-size: 14px; }
  #conta .card-perk-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px; }
  /* história e atributos */
  #conta :is(.stn-cap, .stn-bal) h4 { font-size: 12px; line-height: 1.35; }
  #conta .stn-attr-table thead th { font-size: 12px; letter-spacing: 0.02em; }
  #conta .stn-attrs-foot { font-size: 13px; }
  /* configurações e sair */
  #conta .acct-config > summary { padding: 14px 16px; }
  #conta .acct-form .gloss-btn, #conta #btn-logout { min-height: 44px; }
  #conta .acct-form input { min-height: 44px; }
}
@media (max-width: 480px) {
  /* Invertido no celular estreito: três divisórias em cima e duas embaixo, esticadas (como em Hawkins) */
  .theme-upside .stn-tabs [role="tab"] { flex: 1 1 30%; padding-left: 4px; padding-right: 4px; }
  /* telas estreitas: a página e o quadro da carta cedem margem para a foto não ficar espremida */
  .theme-hawkins #conta .profile, .theme-upside #conta .profile { padding-left: 10px; padding-right: 10px; }
  .theme-upside #conta .profile-head { margin-inline: -10px; padding-inline: 16px; }
  .theme-hawkins #conta .stn-card-hold { padding: 8px; }
}

/* ---------- a carta em pé (Minha Ficha, a janela do morador e o montador): letras miúdas legíveis ----------
   A carta tem proporção fixa (5:7): a foto cede o espaço que as letras maiores pedem.
   Deitado a carta fica pequena de propósito (cabe na tela) e mantém o desenho original. */
@media (max-width: 760px) and (orientation: portrait) {
  :is(#ficha-app, .card-dialog, #wizard) .card-type { font-size: 11.5px; letter-spacing: 0.04em; }
  :is(#ficha-app, .card-dialog, #wizard) .card-id { font-size: 12px; }
  :is(#ficha-app, .card-dialog, #wizard) .card-age > span:first-child { font-size: 10px; }
  :is(#ficha-app, .card-dialog, #wizard) .card-age b { font-size: 14px; }
  :is(#ficha-app, .card-dialog, #wizard) .card-player { font-size: 12px; }
  :is(#ficha-app, .card-dialog, #wizard) .card-align { font-size: 11px; }
  :is(#ficha-app, .card-dialog, #wizard) .card-lock { font-size: 11px; }
  :is(#ficha-app, .card-dialog, #wizard) .card-stat abbr { font-size: 10px; letter-spacing: 0.04em; }
  :is(#ficha-app, .card-dialog, #wizard) .card-ovr small { font-size: 10px; letter-spacing: 0.14em; }
  :is(#ficha-app, .card-dialog, #wizard) .card-ovr i { font-size: 10px; }
  :is(#ficha-app, .card-dialog, #wizard) .card-serial { font-size: 10px; }
  :is(#ficha-app, .card-dialog, #wizard) .card-foot { font-size: 10px; }
  :is(#ficha-app, .card-dialog, #wizard) .card-foot b { font-size: 12px; }
  :is(#ficha-app, .card-dialog, #wizard) .card-stats-empty { font-size: 12px; }
  /* verso */
  :is(#ficha-app, .card-dialog, #wizard) .card-back-head { font-size: 10.5px; }
  :is(#ficha-app, .card-dialog, #wizard) .card-tab { font-size: 12px; letter-spacing: 0.06em; }
  :is(#ficha-app, .card-dialog, #wizard) .card .card-kicker { font-size: 10.5px; }
  :is(#ficha-app, .card-dialog, #wizard) :is(.card-bio, .card-bal) { font-size: 13.5px; }
  :is(#ficha-app, .card-dialog, #wizard) .card-technical-title { font-size: 10.5px; }
  :is(#ficha-app, .card-dialog, #wizard) .card-attr-abbr { font-size: 10.5px; }
  :is(#ficha-app, .card-dialog, #wizard) .card-attr-base { font-size: 10px; }
  :is(#ficha-app, .card-dialog, #wizard) .card-attr-bonus { font-size: 10px; }
  :is(#ficha-app, .card-dialog, #wizard) .card-attrs-empty { font-size: 12px; }
  :is(#ficha-app, .card-dialog, #wizard) .card-perks li { font-size: 11px; }
  :is(#ficha-app, .card-dialog, #wizard) .card-xp { font-size: 11px; }
  :is(#ficha-app, .card-dialog, #wizard) .card-count { font-size: 11px; }
  /* no editor, "base 3 · máx. 8" é o que diz quantos pontos cabem: ocupa a linha toda e pode quebrar, então vira
     letra de leitura (na carta pronta continua miúda, como número de figurinha) */
  :is(#ficha-app, .card-dialog, #wizard) .card-editing .card-attr-base { font-size: 12px; letter-spacing: 0; }
}

/* ---------- toque: botões dentro da carta e no editor ---------- */
@media (max-width: 360px) and (orientation: portrait) {
  /* 320–360 px: a carta ganha os últimos pixels de largura e aperta os respiros internos, para a foto
     (frente) e a biografia (verso) não sumirem com as letras maiores */
  .theme-hawkins #conta .profile, .theme-upside #conta .profile { padding-left: 8px; padding-right: 8px; }
  .theme-upside #conta .profile-head { margin-inline: -8px; }
  .theme-hawkins #conta .stn-card-hold { padding: 5px; }
  :is(#ficha-app, .card-dialog) .card-face { gap: 5px; padding: 9px; }
  :is(#ficha-app, .card-dialog) .card-namebar { min-height: 42px; }
  :is(#ficha-app, .card-dialog) .card-technical-title { font-size: 10px; letter-spacing: 0.06em; }
  :is(#ficha-app, .card-dialog) .card-attrs { gap: 3px; }
  :is(#ficha-app, .card-dialog) .card-attr { padding: 2px 1px 3px; }
  :is(#ficha-app, .card-dialog) .card-attr-base { font-size: 10px; letter-spacing: -0.01em; }
  :is(#ficha-app, .card-dialog) .card-attr-val { font-size: 17px; }
}
@media (pointer: coarse) {
  .card-flip-btn { min-height: 44px; }
  #ficha-acts .gloss-btn, .rec-actions .gloss-btn { min-height: 44px; }
  :is(#ficha-app, .card-dialog) .card-tab { display: flex; align-items: center; justify-content: center; min-height: 40px; }
  /* editor: botões de ponto (+ / −) e da foto ("Alterar", também na própria carta) */
  .card-step { width: 40px; height: 40px; font-size: 19px; }
  .card-editing .card-attr { grid-template-columns: minmax(0, 1fr) 40px 30px 40px; }
  .card-btn { min-height: 44px; }
  /* editor: idade e alinhamento (o campo já tem 16 px de letra no toque; aqui ganha altura de dedo) */
  .card .card-age-edit input, .card .card-align-edit select { min-height: 40px; }
  .card-pick-sum { box-sizing: border-box; min-height: 44px; padding: 12px 0; }
  .card-perk-btn { display: inline-flex; align-items: center; min-height: 40px; }
  .stn-tabs [role="tab"], .rec-tabs [role="tab"] { min-height: 44px; }
}
/* editor na carta estreita: menos, 1 número, mais em cima de três colunas largas */
@media (pointer: coarse) {
  @container (max-width: 330px) {
    .card-editing .card-attr { grid-template-columns: 40px minmax(0, 1fr) 40px; }
  }
}
@media (max-width: 760px) {
  /* editor: a carta vem primeiro e o painel com os pontos que sobram e "Salvar" fica logo depois
     dos botões de ponto (antes ficava duas telas acima deles) */
  .stn-editor .card-side { order: 2; }
  .stn-editor .card-desk { gap: 18px; }
  .stn-editor .card-actions .gloss-btn { flex: 1 1 auto; }
}
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .stn-editor .card-side-kicker { font-size: 12px; }
  .stn-editor .card-actions .gloss-btn { min-height: 44px; }
  .card-pick-step, .card-pick-sub small { font-size: 12px; }
}

/* ---------- inventário (aba Inventário): toque e letras ---------- */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #conta .stn-inv-kicker { font-size: 11px; }
}

/* ---------- perks e espionagem (aba Perks) ---------- */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #conta #stn-perks .pk-kicker { font-size: 12px; }
  #conta #stn-perks .pk-lvl { font-size: 11.5px; }
  #conta #stn-perks .pk-body h4 small { font-size: 11px; }
  #conta #stn-perks .pk-unique { font-size: 12px; }
  #conta #stn-perks :is(.pk-have, .pk-taken) { font-size: 12.5px; }
  /* espaço trancado: sem o vão de 120 px em volta de uma linha só */
  #conta #stn-perks .pk-slot-lock { min-height: 76px; }
  #conta #stn-perks .pk-slot-free { min-height: 96px; }
  #conta #stn-perks :is(.spy-kicker, .spy-card h4 small) { font-size: 12px; }
  #conta #stn-perks .spy-tx small { font-size: 12px; }
  #conta #stn-perks :is(.spy-help, .spy-empty) { font-size: 13.5px; }
  /* senha do fliperama: campo em 16 px (sem zoom no iPhone) e botões lado a lado dividindo a largura */
  #conta #stn-perks .pk-key-field { max-width: none; font-size: 12px; }
  #conta #stn-perks .pk-key-field input { font-size: 16px; min-height: 44px; }
  #conta #stn-perks .pk-key-actions .gloss-btn { flex: 1 1 140px; }
}
@media (pointer: coarse) {
  #conta #stn-perks .pk-key-actions .gloss-btn, #conta #stn-perks [data-perk-key] { min-height: 44px; }
  #conta #stn-perks .pk-choose { min-height: 44px; }
  #conta #stn-perks .pk-x { width: 44px; height: 44px; }
  #conta #stn-perks .spy-btn { min-height: 44px; padding: 8px 14px; font-size: 13px; }
  #conta #stn-perks .spy-select { min-height: 44px; }
}

/* ---------- Minha Ficha deitado (celular baixo): a carta ao lado das abas, do tamanho da altura da tela ---------- */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* a carta mede o que cabe abaixo do menu fixo (5:7), sem ficar menor que 250 px (menor que isso a foto some) */
  #conta .stn { --fc-vh: 100vh; }
  @supports (height: 100svh) { #conta .stn { --fc-vh: 100svh; } }
  #conta .stn { --fc-w: clamp(250px, calc((var(--fc-vh) - var(--mb-nav-h, 46px) - 24px) * 5 / 7), 280px);
    grid-template-columns: calc(var(--fc-w) + 22px) minmax(0, 1fr); gap: 18px; padding-top: 14px; }
  .theme-hawkins #conta .stn { gap: 18px; }
  /* não gruda: a estação rola com a página e a carta vem junto (grudada, ela cobria o rodapé da estação) */
  #conta .stn-card { position: static; gap: 8px; }
  #conta .stn-card-hold { max-width: none; }
  .theme-hawkins #conta .stn-card-hold { padding: 8px; }
  #ficha-card .card { max-width: var(--fc-w); }
  #ficha-card .card-flip-btn { margin-top: 8px; }
  /* as divisórias quebram em duas fileiras quando não cabem (esticadas, sem aba solta num canto) */
  .theme-hawkins #conta .stn-tabs [role="tab"] { flex: 1 0 auto; padding: 4px 10px; font-size: 12px; letter-spacing: 0.08em; }
  .theme-upside .stn-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; overflow: visible; }
  .theme-upside .stn-tabs [role="tab"] { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; bottom: 0; padding: 6px 10px; font-size: 12px; letter-spacing: 0.08em; }
  #ficha-editor, #ficha-station { scroll-margin-top: calc(var(--mb-nav-h, 46px) + 10px); }
  /* as letras essenciais da carta um pouco maiores (a carta aqui tem ~240 px) */
  #ficha-app .card-type, .card-dialog .card-type { font-size: 10.5px; letter-spacing: 0.03em; }
  #ficha-app .card-stat abbr, .card-dialog .card-stat abbr { font-size: 9.5px; letter-spacing: 0.02em; }
}
/* editor deitado (Minha Ficha e a janela do admin): as duas faces uma embaixo da outra. Lado a lado o verso
   ficava com ~70 px e os botões de ponto (− / +) se atropelavam em cima dos números */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .card-editing .card-in { grid-template-columns: 1fr; }
  .card-editing .card-front, .card-editing .card-back { width: 100%; max-width: 380px; margin: 0 auto; }
}
/* carta estreita (deitado, 236–270 px): número de série e emblema mais justos para o nome caber inteiro;
   o verso aperta títulos e fichinhas para sobrar lugar para o texto (que rola dentro da própria aba) */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  @container (max-width: 270px) {
    .card-namebar { gap: 6px; padding-left: 7px; }
    .card-namebar .card-serial { padding: 1px 4px; letter-spacing: 0.05em; }
    .card-namebar .card-emb { width: 28px; height: 28px; padding: 3px; }
    .card-namebar .card-name { font-size: clamp(14px, 6.6cqi, 25px); overflow-wrap: break-word; }
    .card-back-head { gap: 2px 6px; padding: 4px 6px; letter-spacing: 0.06em; }
    .card-technical-title { flex-wrap: wrap; gap: 0 6px; margin-bottom: 3px; letter-spacing: 0.06em; }
    .card-attrs { gap: 3px; }
    .card-attr { padding: 2px 1px 3px; }
    .card-attr-val { font-size: 16px; }
    .card-xp { grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; margin: 4px 1px 2px; }
    .card-xp-bar { grid-column: 1 / -1; grid-row: 2; }
    :is(#ficha-app, .card-dialog) .card-tab { padding: 2px 4px; }
  }
}

/* ---------- Moradores: a coleção de mini cartas ---------- */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* classe e subclasse na mini carta: legível, em até duas linhas (antes 8,5 px cortado com reticências) */
  .card-mini-type { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 11px; line-height: 1.25; letter-spacing: 0.02em; white-space: normal; }
  .card-mini-foot { font-size: 10.5px; }
  .card-mini-foot span:first-child { flex: none; white-space: nowrap; }
  /* a foto nunca some: se o nome e a classe pedirem mais linhas, a mini carta cresce um pouco em vez de espremer o retrato */
  .card-mini-photo { flex: 1 0 auto; min-height: 66px; }
  .card-mini-top { font-size: 10px; }
  .card-album-cap { font-size: 12px; }
  .theme-hawkins #moradores .card-album-cap { font-size: 12px; }
  /* coluna lateral (embaixo da lista no celular) */
  [data-page="moradores"] .latest small, .theme-hawkins[data-page="moradores"] .latest small { font-size: 12px; }
  [data-page="moradores"] .status-label, .theme-hawkins[data-page="moradores"] .status-label { font-size: 12px; }
  .theme-upside[data-page="moradores"] .tags .s1 { font-size: 12.5px; }
  .theme-upside[data-page="moradores"] .tags .s2 { font-size: 14px; }
  /* Hawkins: a etiqueta amarela dos quadrinhos da lateral não passa da borda da tela */
  .theme-hawkins[data-page="moradores"] #site .side-col .widget-head { left: -6px; max-width: calc(100% + 6px); }
}
@media (max-width: 360px) {
  .card-minis { gap: 12px 8px; }
  .card-mini-in { padding: 6px; gap: 4px; }
  .card-mini-type { font-size: 10.5px; letter-spacing: 0; }
  .card-mini-photo { min-height: 58px; }
}
/* sem mouse: a carta que levou o toque não fica "levantada" depois que a janela fecha */
@media (hover: none) {
  .card-mini:hover .card-mini-in { transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4), 0 10px 22px -10px rgba(0, 0, 0, 0.7); }
  .card-mini:hover .card-mini-cta { opacity: 0; }
  .theme-hawkins #moradores .card-mini-slot:hover { transform: none; box-shadow: 4px 4px 0 #111; }
  .theme-hawkins #moradores .card-mini:hover .card-mini-in { transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3); }
  .theme-hawkins #moradores .card-mini:hover .card-mini-photo::after { transform: translateX(-70%); transition: none; }
  .theme-hawkins #conta .stn-tabs [role="tab"]:not([aria-selected="true"]):hover { transform: none; box-shadow: 3px 3px 0 #111; background: #ffe45c; }
}
@media (hover: none) and (max-width: 480px) {
  .theme-hawkins #moradores .card-mini-slot:hover { box-shadow: 3px 3px 0 #111; }
}

/* ---------- a janela do morador em pé: cabe na tela, rola por dentro, o ✕ sempre à mão ---------- */
@media (max-width: 760px) {
  /* quem rola é o miolo; a janela fica parada e o ✕ (posicionado nela) não sai do canto de cima */
  .card-dialog:has(> .card-view-in) { overflow: hidden; }
  .card-dialog > .card-view-in { position: static; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; padding: 58px 12px 20px; }
  /* a perspectiva (do giro da carta) passa para o palco: no miolo ela prenderia o ✕ ao que rola */
  .card-dialog > .card-view-in { perspective: none; }
  .card-view-stage { perspective: 1600px; }
  /* a carta em destaque, sem passar de ~60% da altura: a folha do registro já aparece embaixo */
  .card-view-stage .card { max-width: clamp(220px, calc((100vh - 200px) * 5 / 7), 330px); max-width: clamp(220px, calc((100svh - 200px) * 5 / 7), 330px); }
  .card-x { width: 44px; height: 44px; top: 8px; right: 10px; font-size: 18px; }
  /* a folha do registro: sombra dura menor para não encostar na borda */
  .theme-hawkins[data-page="moradores"] .card-dialog .card-view-record { box-shadow: 5px 5px 0 #111, 5px 5px 0 3px #f7f2e6; }
}
/* a folha do registro (em pé e deitado): rótulos legíveis e abas/botões do tamanho do dedo */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .rec-kicker { font-size: 12px; letter-spacing: 0.12em; }
  .theme-hawkins[data-page="moradores"] .card-dialog .rec-kicker { font-size: 12px; letter-spacing: 0.1em; }
  .rec-tabs [role="tab"] { display: inline-flex; align-items: center; min-height: 44px; }
  .theme-hawkins[data-page="moradores"] .card-dialog .rec-tabs [role="tab"] { min-height: 44px; }
  .rec-actions .gloss-btn { min-height: 44px; }
  .card-dialog :is(.stn-cap, .stn-bal) h4 { font-size: 12px; line-height: 1.35; }
  .card-dialog .stn-attr-table thead th { font-size: 12px; letter-spacing: 0.02em; }
  .card-dialog .stn-attrs-foot { font-size: 13px; }
}
@media (max-width: 360px) {
  .card-dialog > .card-view-in { padding-left: 8px; padding-right: 8px; }
  /* tabela de atributos (Minha Ficha e a janela): os seis títulos cabem em 320 px sem cortar "EM JOGO" */
  #conta .stn-attrs, .card-dialog .card-view-record { padding-left: 10px; padding-right: 10px; }
  .theme-hawkins[data-page="moradores"] .card-dialog :is(.stn-rec, .stn-hist, .stn-attrs) { padding-left: 0; padding-right: 0; }
  :is(#conta, .card-dialog) .stn-attr-table thead th { padding: 6px 2px; font-size: 11px; letter-spacing: 0; }
}

/* ---------- a janela do morador deitado: carta à esquerda, registro à direita ----------
   A carta tem pelo menos 236 px (menor que isso o verso não tem lugar para a biografia) e cabe inteira na
   primeira tela; o botão de virar fica logo abaixo (um toque de rolagem nas telas de 375–390 px de altura).
   Ela não gruda: grudada e mais alta que a tela, o botão de virar ficaria inalcançável. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .card-dialog:has(> .card-view-in) { overflow: hidden; }
  .card-dialog > .card-view-in { --cv-vh: 100vh; }
  @supports (height: 100dvh) { .card-dialog > .card-view-in { --cv-vh: 100dvh; } }
  .card-dialog > .card-view-in {
    --cv-w: clamp(236px, calc((var(--cv-vh) - 60px) * 5 / 7), 300px);
    position: static; perspective: none; grid-template-columns: var(--cv-w) minmax(0, 1fr); gap: 18px; align-items: start;
    max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain;
    padding: 10px max(12px, env(safe-area-inset-right)) 14px max(12px, env(safe-area-inset-left)); }
  .card-view-stage { position: static; perspective: 1600px; }
  .card-view-stage .card { max-width: var(--cv-w); }
  .card-view-stage .card-flip-btn { margin-top: 8px; }
  .card-x { width: 44px; height: 44px; top: 8px; right: max(10px, env(safe-area-inset-right)); font-size: 18px; }
  /* o ✕ fica sobre o canto da folha: o título não passa por baixo dele */
  .card-view-record .rec-head { padding-right: 50px; }
  .card-view-record { padding: 14px 16px 18px; border-left-width: 5px; }
  .theme-hawkins[data-page="moradores"] .card-dialog .card-view-record { box-shadow: 5px 5px 0 #111, 5px 5px 0 3px #f7f2e6; margin-right: 8px; }
}

/* ---------- Admin: painel, economia, denúncias e a lista de moradores ---------- */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* a tabela larga (880 px) vira lista também entre 561 e 760 px e deitado (antes rolava de lado ou cortava "+ Adicionar") */
  .admin-list { overflow-x: visible; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; min-width: 0; }
  .admin-table tr:first-child { display: none; }
  .admin-table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .admin-table td { border: 0; padding: 4px 0; }
  .admin-table td[data-label]::before { content: attr(data-label); display: block; margin: 2px 0 5px; color: var(--muted); font: 700 11.5px var(--font-small); letter-spacing: 0.06em; text-transform: uppercase; }
  .admin-table td small, .admin-points-total { font-size: 12px; }
  .st-cell { min-width: 0; }
  .st-badge { font-size: 11.5px; }
  /* cada morador: nome e subclasse na largura toda; o resto lado a lado (a lista fica com metade da altura) */
  #admin-list .admin-table tr:not(:first-child) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, calc(50% - 8px)), 1fr)); column-gap: 16px; align-items: start; }
  #admin-list .admin-table td:first-child { grid-column: 1 / -1; }
  #admin-list .admin-table td[data-label="Subclasse"] { grid-column: span 2; }
  #admin-list .admin-subclass select { flex: 1 1 auto; width: auto; max-width: 260px; }
  #admin-list .st-actions { margin-left: 0; }
  /* economia: os dois valores de cada linha lado a lado; o formulário de ajuste embaixo */
  #admin-econ .admin-table tr:not(:first-child) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  #admin-econ .admin-table td:first-child, #admin-econ .econ-table td:last-child { grid-column: 1 / -1; }
  #admin-econ .econ-adjust input[name="motivo"] { flex: 1 1 150px; }
  /* os quatro números da saúde da economia em duas colunas (antes um embaixo do outro) */
  #admin-econ .eh-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
  #admin-econ .eh-card span { font-size: 11.5px; letter-spacing: 0.06em; }
  #admin-econ .eh-card b { font-size: 18px; overflow-wrap: anywhere; }
  #admin-econ .eh-card small { font-size: 12px; }
  .adm-den .spy-tx small { font-size: 12px; }
  /* abas do painel e o texto miúdo dos controles */
  .admin-tab { display: inline-flex; align-items: center; min-height: 44px; }
  .ctl-text small { font-size: 12px; }
}
@media (pointer: coarse) {
  #admin .gloss-btn.gloss-small { min-height: 40px; }
  #admin :is(.admin-subclass select, .admin-points input, .econ-adjust input, .econ-adjust select, .econ-rate input, .eh-filter select) { min-height: 44px; }
  .admin-more > summary { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; }
  .admin-more-in .gloss-btn { min-height: 44px; }
  .adm-den .spy-btn { min-height: 44px; }
  .ctl { padding: 12px 0; }
}

/* ---------- janelas do admin (senha, transferir): cabem deitado, botões sempre à vista ---------- */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .pw-dialog { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; }
  .pw-dialog .pw-actions { position: sticky; bottom: 0; z-index: 1; margin: 0 -20px -16px; padding: 10px 20px 14px; background: var(--panel); border-top: 1px solid var(--line); }
  .pw-dialog .pw-actions .gloss-btn { min-height: 44px; flex: 1 1 0; }
  .pw-dialog :is(input:not([type="checkbox"]), select) { min-height: 44px; }
  .pw-show { min-height: 44px; }
  .pw-show input { flex: none; width: 24px; height: 24px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .pw-dialog { width: min(560px, calc(100vw - 24px)); }
  .pw-dialog .form { padding: 12px 20px 16px; }
  .pw-dialog h3 { margin-bottom: 2px; }
  .pw-who { margin-bottom: 8px; }
  .tr-list { margin-bottom: 8px; line-height: 1.45; }
}

/* ---------- XP: barra "Postar XP" fora da área do indicador do iPhone; alvos de toque ---------- */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .xp-post { bottom: calc(8px + env(safe-area-inset-bottom)); }
  .xp-pick small, .xp-lvl small, .xp-prog small, .xp-day { font-size: 12px; }
  .xp-note { font-size: 13px; }
  .xp-sync { padding: 12px; }
  .xp-sync .xp-btn { flex: 1 1 100%; }
  /* dar XP no celular: a linha não marcada fica curta (toque no nome marca); as notas aparecem na marcada */
  .xp-row:not(.on) .xp-amt { display: none; }
  .xp-modo-btn { flex: 1 1 0; }
  .xp-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xp-list-btns { width: 100%; }
  .xp-list-btns .xp-btn { flex: 1 1 auto; }
  .xp-amt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(72px, 1.2fr); }
  .xp-amt input { width: 100%; }
  .xp-prev { font-size: 13px; }
}
@media (pointer: coarse) {
  .xp-btn { min-height: 44px; padding: 8px 14px; font-size: 13px; }
  .xp-chip { min-height: 44px; min-width: 44px; padding: 8px 12px; font-size: 13px; }
  .xp-modo-btn { min-height: 44px; font-size: 14px; }
  .xp-pick { min-height: 44px; }
  .xp-pick input, .xp-marco input { width: 24px; height: 24px; }
  .xp-marco { min-height: 44px; }
  .xp-amt input, .xp-give input:not([type="checkbox"]), .xp-search input { min-height: 44px; }
  .xp-guide summary, .xp-sync-quem summary { padding: 12px 0; }
}

/* Classes do anuário: arte inteira e fichas legíveis em telas estreitas. */
@media (max-width: 760px) {
  .theme-hawkins #classes .cls-picker { gap: 17px; }
  .theme-hawkins #classes .cls-subs { gap: 16px 12px; }
  .theme-hawkins #classes .cls-hero-card .cls-name { font-size: 12px; }
  .theme-hawkins #classes .cls-hero-name { font-size: clamp(27px, 5.5vw, 38px); }
  .theme-hawkins #classes .cls-view[data-cls="cheerleaders"] .cls-hero-name { font-size: 36px; }
  .theme-hawkins #classes .cls-sheet-in { border-width: 4px; }
}
@media (max-width: 560px) {
  .theme-hawkins #classes .cls-picker .cls-face { grid-template-columns: 82px minmax(0,1fr); grid-template-areas: "art top" "art name" "desc desc" "cta cta"; gap: 5px 11px; padding: 15px 13px 13px; }
  .theme-hawkins #classes .cls-picker .cls-art { align-self: start; min-height: 82px; aspect-ratio: 1; }
  .theme-hawkins #classes .cls-picker .cls-art .cls-class-illustration { width: 92%; }
  .theme-hawkins #classes .cls-picker .cls-name { align-self: center; min-height: 0; padding: 0; font-size: 19px; }
  .theme-hawkins #classes .cls-picker .cls-card[data-cls="cheerleaders"] .cls-name { font-size: 24px; }
  .theme-hawkins #classes .cls-view[data-cls="cheerleaders"] .cls-name { font-size: 15px; }
  .theme-hawkins #classes .cls-picker .cls-desc { padding: 0 3px; font-size: 13px; }
  .theme-hawkins #classes .cls-picker .cls-cta { width: calc(100% - 8px); }
  .theme-hawkins #classes .cls-top { flex-wrap: wrap; }
  .theme-hawkins #classes .cls-hero-text { transform: none; background: linear-gradient(90deg, transparent 35px, rgba(180,72,65,.5) 35px 37px, transparent 37px), #fdfbf4; }
  .theme-hawkins #classes .cls-sub-face { min-height: 256px; padding: 10px 9px 9px; }
  .theme-hawkins #classes .cls-sub-row { min-height: 84px; }
  .theme-hawkins #classes .cls-sub-ico { width: min(80px,68%); height: 80px; }
  .theme-hawkins #classes .cls-sub-name { font-size: 16px; }
  .theme-hawkins #classes .cls-sub-arch { font-size: 12px; }
  #classes .cls-sub-meta { font-size: 11px; }
  #classes .cls-sub-meta span:last-child { display: none; }
  #classes .cls-sub-open { font-size: 11px; }
}
@media (max-width: 360px) {
  .theme-hawkins #classes .cls-picker .cls-face { grid-template-columns: 68px minmax(0,1fr); }
  .theme-hawkins #classes .cls-picker .cls-art { min-height: 68px; }
  .theme-hawkins #classes .cls-picker .cls-name { font-size: 16px; }
  .theme-hawkins #classes .cls-picker .cls-card[data-cls="cheerleaders"] .cls-name { font-size: 21px; }
  .theme-hawkins #classes .cls-view[data-cls="cheerleaders"] .cls-hero-name { font-size: 31px; }
  .theme-hawkins #classes .cls-sub-ico { width: min(65px,64%); height: 65px; }
  .theme-hawkins #classes .cls-sub-row { min-height: 68px; }
  #classes .cls-sheet-head { grid-template-columns: 52px minmax(0,1fr); gap: 5px 10px; }
  #classes .cls-sheet-ico { width: 52px; height: 52px; grid-row: 1 / 3; }
  #classes .cls-sheet-title { grid-column: 2; grid-row: 1; min-width: 0; }
  #classes .cls-sheet-tools { grid-column: 2; grid-row: 2; justify-self: end; }
  #classes .cls-attr { grid-template-columns: minmax(0,1fr) 30px; gap: 3px 6px; }
  #classes .cls-stars { grid-column: 1 / -1; --star-size: 12px; gap: 3px; }
  #classes .cls-attr-name { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 5px; line-height: 1.2; }
  #classes .cls-lim { margin-left: 0; font-size: 11px; }
}

/* ---------- Classes: escala de 1 a 20 e classe Jornal (2026-09-28) ----------
   20 estrelas por atributo não cabem ao lado do nome no celular: na ficha da subclasse elas
   descem para a linha de baixo e dividem a largura (no máximo 14 px cada, grupos de 5). */
@media (max-width: 760px) {
  #classes .cls-sheet .cls-attr { grid-template-columns: minmax(0, 1fr) 30px; gap: 4px 8px; }
  #classes .cls-sheet .cls-stars { grid-column: 1 / -1; gap: 2px; width: 100%; }
  #classes .cls-sheet .cls-stars i { flex: 1 1 0; max-width: 14px; }
  #classes .cls-sheet .cls-stars i:nth-child(5n):not(:last-child) { margin-right: 5px; }
  /* edição do admin: número e botões na linha do nome, estrelas embaixo */
  #classes .cls-sheet .cls-attr-edit { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---------- Liderança (senha, pontos de líder/vice) e Sinergias de build (2026-09-28) ----------
   Botões de toque de 44 px, campo da senha em 16 px (sem zoom no iPhone), Livro de builds em uma
   coluna e a tabela de atributos com a coluna de sinergia cabendo em 320 px. */
@media (pointer: coarse) {
  .wz-step button { width: 44px; height: 44px; font-size: 20px; }
  .wz-key-field input { font-size: 16px; min-height: 44px; }
  .wz-key-actions .gloss-btn { min-height: 44px; }
  .syn-book-sum { min-height: 44px; }
}
@media (max-width: 760px) {
  .syn-book { margin-top: 18px; }
  .syn-book-sum { padding: 12px 40px 12px 12px; }
  .syn-book-sum b { font-size: 17px; }
  .syn-book-in { padding: 0 12px 14px; }
  .syn-book-lead { font-size: 14px; }
  .syn-grid { grid-template-columns: minmax(0, 1fr); }
  .syn-desc, .syn-mae { font-size: 14px; }
  .syn-dnd { font-size: 12px; }
  .syn-body { font-size: 14px; }
  .syn-body small, .syn-title small, .syn-empty, .syn-foot { font-size: 13px; }
  .wz-key-field { max-width: none; }
  .wz-key-actions .gloss-btn { flex: 1 1 140px; }
  .wz-lead-pts { font-size: 14px; }
}
@media (max-width: 480px) {
  /* com +/−, o número e os botões ficam na linha de cima e a base embaixo */
  .wz-attrs-lead .wz-attr { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 2px; }
  :is(#conta, .card-dialog) .stn-attr-syn .syn-plus, :is(#conta, .card-dialog) .stn-attr-item span { min-width: 0; padding: 1px 4px; }
  /* 7 colunas (entrou a de sinergia): células mais justas para caber em 375 px */
  :is(#conta, .card-dialog) .stn-attr th { gap: 4px; padding: 7px 3px; }
  :is(#conta, .card-dialog) .stn-attr td { padding: 5px 2px; }
  :is(#conta, .card-dialog) .stn-attr-table thead th { padding: 6px 2px; letter-spacing: 0; }
  :is(#conta, .card-dialog) .stn-attr-table thead th:first-child { padding-right: 8px; }
  :is(#conta, .card-dialog) .stn-attr-now b, :is(#conta, .card-dialog) .stn-attr-play b { font-size: 19px; }
}
@media (max-width: 360px) {
  :is(#conta, .card-dialog) .stn-attr td { padding-left: 2px; padding-right: 2px; }
  :is(#conta, .card-dialog) .stn-attr-now b, :is(#conta, .card-dialog) .stn-attr-play b { font-size: 16px; }
  :is(#conta, .card-dialog) .stn-attr-table thead th { padding: 5px 1px; font-size: 9px; }
  :is(#conta, .card-dialog) .stn-attr-table thead th:first-child { padding-right: 4px; }
  :is(#conta, .card-dialog) .stn-attr th { padding: 6px 2px; }
  :is(#conta, .card-dialog) .stn-attr th abbr { font-size: 12px; letter-spacing: 0.02em; }
  :is(#conta, .card-dialog) .stn-attr td { padding: 4px 1px; font-size: 13px; }
  :is(#conta, .card-dialog) .stn-attr-syn .syn-plus, :is(#conta, .card-dialog) .stn-attr-item span { padding: 1px 2px; font-size: 11px; }
}

/* =========================================================
   ROLAGENS NA FICHA (.rl-, 2026-09-28): cartas de atributo com a rolagem
   do Discord e a sinergia no teste. Celular: toque do tamanho do dedo,
   painel e duplas em largura cheia, números menores nas telas estreitas.
   ========================================================= */
@media (max-width: 760px) {
  .rl-sub, .rl-hint, .rl-guide-lead { font-size: 13.5px; }
  .rl-grid { gap: 16px 10px; }
  .rl-card { min-height: 104px; }
  .rl-panel { padding: 12px 10px; }
  .rl-det-head { align-items: start; }
  .rl-copy { min-height: 44px; min-width: 44px; padding: 6px 12px; font-size: 13px; }
  .rl-syn-opts { display: grid; grid-template-columns: minmax(0, 1fr); }
  .rl-syn-opt { min-width: 0; min-height: 48px; }
  .rl-syn-opt small, .rl-math small, .rl-syn-desc, .rl-syn-why, .rl-syn-pick, .rl-syn-title small { font-size: 13px; }
  .rl-math { font-size: 14px; }
  .rl-scale li { min-width: 48px; }
}
@media (max-width: 360px) {
  .rl-grid { gap: 16px 8px; }
  .rl-card { padding: 8px 4px 9px; }
  .rl-card-val { font-size: 31px; }
  .rl-card-roll { padding: 2px 5px; font-size: 13px; }
  .rl-card-name span { font-size: 11px; }
  .rl-code { font-size: 15px; }
  .rl-det-name { font-size: 19px; }
}
@media (hover: none) {
  /* sem mouse: nada de "subir" a carta (o toque fixa e mostra o brilho) */
  .rl-card:hover { transform: none; }
}

/* =========================================================
   SISTEMAS (.sis-, 2026-09-28): o manual do jogador no celular.
   Uma coluna, sumário recolhível no topo (style.css já o recolhe
   até 1000 px), tabelas viram cartões, toque do tamanho do dedo.
   ========================================================= */
@media (max-width: 760px) {
  .sis-hero { margin-top: 4px; padding: 20px 18px 18px 22px; }
  .sis-hero::after { inset: 7px 7px 7px 16px; }
  .sis-kicker, .sis-title, .sis-sub-t { margin-left: 4px; }
  .sis-sub-t { font-size: 16px; }
  .sis-toc-b { min-height: 44px; align-items: center; padding: 8px 10px; }
  .sis-toc-l ul { margin-left: 26px; }
  .sis-cap { padding: 18px 14px 20px; }
  .sis-cap-head { gap: 10px; }
  .sis-cap-n { font-size: 40px; }
  .sis-cap-head h3 { font-size: 25px; }
  .sis-cap-body { font-size: 16.5px; }
  .sis-lead { font-size: 17.5px; }
  .sis-quick { grid-template-columns: minmax(0, 1fr); }
  .sis-mini { justify-self: center; width: min(220px, 100%); box-sizing: border-box; }
  .sis-attrs, .sis-syns, .sis-secrets { grid-template-columns: minmax(0, 1fr); }
  .sis-ladder { grid-template-columns: minmax(0, 1fr); }
  .sis-ladder > li[data-n] { padding-top: 12px; }
  .sis-roll { white-space: normal; }
  .sis-item { white-space: normal; }
  /* tabelas: cada linha vira um cartão com o rótulo da coluna ao lado do valor */
  .sis-tw { overflow: visible; }
  .sis-table, .sis-table tbody, .sis-table tr, .sis-table td { display: block; width: auto; }
  .sis-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sis-table tr { margin-bottom: 8px; border: 1px solid var(--sis-line); border-radius: 4px; background: var(--sis-paper-2); overflow: hidden; }
  .sis-table tbody tr:nth-child(even) td { background: transparent; }
  .sis-table td { display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: 10px; padding: 7px 10px; border-bottom: 1px dashed var(--sis-line); font-size: 15px; }
  .sis-table td:last-child { border-bottom: 0; }
  .sis-table td::before { content: attr(data-label); font: 800 12px/1.6 var(--sis-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sis-soft); }
  .sis-table td[data-label=""] { display: block; padding-bottom: 2px; background: color-mix(in srgb, var(--sis-ink) 6%, transparent); }
  .sis-table td[data-label=""]::before { content: none; }
  .sis-t-vs td:nth-child(2) { border-left: 0; }
  .sis-t-best td:first-child { width: auto; }
  .sis-table .sis-c { min-width: 0; overflow-wrap: anywhere; }
  .sis-calc { padding: 14px 12px; }
  .sis-calc-f { grid-template-columns: minmax(0, 1fr); }
  .sis-calc-l select, .sis-calc-l input[type="number"] { min-height: 44px; font-size: 16px; }
  .sis-calc-r { min-height: 44px; }
  .sis-calc-r input { width: 22px; height: 22px; }
  .sis-q summary { min-height: 44px; box-sizing: border-box; display: flex; align-items: center; }
  .sis-journey { padding-left: 22px !important; }
  .sis-jr::before { left: -19px; }
  .sis-journey::before { left: 6px; }
  .sis-eq { font-size: 14px; }
}
@media (max-width: 360px) {
  .sis-hero { padding: 18px 14px 16px 18px; }
  .sis-cap { padding: 16px 11px 18px; }
  .sis-cap-n { font-size: 34px; }
  .sis-cap-head h3 { font-size: 22px; }
  .sis-table td { grid-template-columns: minmax(84px, 36%) minmax(0, 1fr); padding: 7px 8px; }
  .sis-roll { font-size: 14px; }
}

/* =========================================================
   TROCA DE PÁGINA (.ptx-, 2026-09-28): a casa no escuro e o fio de luzes de Natal.
   Celular: o fio desce para baixo do relógio/entalhe, lâmpadas menores (app.js já as
   espaça em 34 px abaixo de 600 px) e brilho mais curto (menos pintura na tela pequena).
   ========================================================= */
@media (max-width: 760px) {
  .ptx-bulb { width: 12px; height: 19px; margin-left: -6px; }
  .ptx-bulb i { box-shadow: 0 0 7px 2px var(--c), 0 0 24px 8px color-mix(in srgb, var(--c) 40%, transparent); }
}
@media (pointer: coarse) {
  .ptx-lights { top: env(safe-area-inset-top, 0px); }
}

/* =========================================================
   PORTÃO HAWKINS XP (logon.html, prefixo .wxp-) — a tela do Windows XP antes do site
   Em pé: marca em cima, usuário embaixo, divisória deitada. Deitado: lado a lado, com as faixas finas.
   ========================================================= */
@media (max-width: 760px) {
  .wxp-top { height: auto; min-height: 36px; box-sizing: border-box; padding-top: env(safe-area-inset-top); }
  .wxp-mid {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: center; gap: 22px;
    padding: 28px max(16px, env(safe-area-inset-right)) 28px max(16px, env(safe-area-inset-left));
    background: radial-gradient(ellipse at 50% 0%, rgba(170, 195, 245, 0.6) 0, rgba(170, 195, 245, 0) 55%), #4c6fd2;
  }
  .wxp-left { justify-self: center; text-align: center; padding: 0; max-width: none; }
  .wxp-brand-big { font-size: 44px; }
  .wxp-hint { margin-top: 14px; font-size: 17px; }
  .wxp-divider {
    align-self: auto; width: auto; height: 1px; margin: 0 8%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55) 20%, rgba(255, 255, 255, 0.55) 80%, rgba(255, 255, 255, 0));
  }
  .wxp-right { justify-self: center; width: 100%; max-width: 420px; padding: 0; }
  .wxp-user { width: 100%; border-radius: 8px; padding: 12px; background: linear-gradient(90deg, #0e3aa8 0%, #1b4fc4 70%, rgba(27, 79, 196, 0.55) 100%); }
  /* o campo ocupa o que sobra ao lado dos botões (largura 0 + crescer: nunca empurra o "?" para fora) */
  .wxp-pass { flex: 1 1 0; min-width: 0; width: 0; }
  /* o balão ocupa a largura do cartão, sem sair da tela */
  .wxp-balloon { width: auto; right: 0; }
  .wxp-bottom {
    flex-wrap: wrap; gap: 8px 16px; min-height: 0;
    padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .wxp-note { flex: 1 1 200px; text-align: left; font-size: 12px; }
  .wxp-welcome { font-size: 48px; }
}
@media (pointer: coarse) {
  .wxp-btn { width: 44px; height: 44px; font-size: 18px; }
  .wxp-btn svg { width: 20px; height: 20px; }
  .wxp-pass { height: 44px; padding: 4px 10px; }
  .wxp-off { min-height: 44px; }
  .wxp-x { width: 44px; height: 44px; top: 0; right: 0; border-color: transparent; background: transparent; font-size: 16px; }
  .wxp-balloon { padding-right: 44px; }
  /* no toque não existe "passar o mouse": o botão só muda ao tocar */
  .wxp-go:hover { background: linear-gradient(180deg, #62cb52 0%, #2b8f21 100%); }
  .wxp-help:hover { background: linear-gradient(180deg, #5b8df2 0%, #2156d9 100%); }
  .wxp-off:hover .wxp-off-ico { background: linear-gradient(180deg, #ec6a45 0%, #b8290f 100%); }
  .wxp-go:active { background: linear-gradient(180deg, #7ad96a 0%, #34a32a 100%); }
  .wxp-help:active { background: linear-gradient(180deg, #74a0f5 0%, #2a63ea 100%); }
}
@media (max-width: 360px) {
  .wxp-brand-big { font-size: 38px; }
  .wxp-hint { font-size: 16px; }
  .wxp-user { gap: 10px; padding: 10px; }
  .wxp-pic { width: 44px; height: 44px; }
  .wxp-name { font-size: 18px; }
  .wxp-row { gap: 5px; }
}
/* celular deitado: pouca altura, então lado a lado e faixas finas */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .wxp-top { min-height: 0; height: calc(16px + env(safe-area-inset-top)); }
  .wxp-mid {
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); grid-template-rows: none; gap: 0; padding: 14px 0;
  }
  .wxp-left { justify-self: end; text-align: right; padding: 0 20px 0 max(16px, env(safe-area-inset-left)); }
  .wxp-brand-big { font-size: 34px; }
  .wxp-hint { margin-top: 8px; font-size: 15px; }
  .wxp-divider {
    align-self: stretch; width: 1px; height: auto; margin: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55) 20%, rgba(255, 255, 255, 0.55) 80%, rgba(255, 255, 255, 0));
  }
  .wxp-right { justify-self: stretch; box-sizing: border-box; padding: 0 max(16px, env(safe-area-inset-right)) 0 20px; max-width: 460px; }
  .wxp-user { padding: 8px 10px; }
  .wxp-label { margin: 2px 0 3px; }
  .wxp-bottom { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .wxp-note { display: none; }
  .wxp-welcome { font-size: 40px; }
}

/* =================== PLAQUINHA DO BESTIÁRIO (Início; .bst- em style.css) =================== */
/* no celular a placa não fica grudada na tela (tampava os botões do Início em telas baixas): fica de pé no canto
   de baixo da página, embaixo dos links do rodapé, com o braço sumindo pela borda. O rádio fica no canto direito */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .bst-sign { position: absolute; left: max(10px, calc(env(safe-area-inset-left) + 6px)); bottom: 0; width: 168px; padding-top: 20px; overflow: hidden; animation: none !important; }
  .bst-lift { margin-bottom: -52px; }
  .bst-board { min-height: 84px; padding: 9px 9px 11px; font-size: 12.5px; }
  .bst-l3 { font-size: 17px; }
  .bst-demon { font-size: 29px; }
  .bst-hand { width: 94px; margin-top: -14px; }
  body[data-page="inicio"] .footer { padding-bottom: calc(188px + env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .bst-sign { width: 154px; }
  .bst-board { font-size: 12px; }
  .bst-demon { font-size: 27px; }
}
/* no toque não existe "passar o mouse": a placa flutua de leve sozinha e sobe quando o dedo encosta */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .bst-bob { animation-play-state: running; animation-duration: 2.6s; }
  .bst-sign:active .bst-lift { transform: translateY(-10px) rotate(1.5deg); }
}

/* =================== FOTO PELO IMGUR (.fph- em style.css) e textos da ficha =================== */
/* a janelinha "Trocar a foto" cabe na tela (rola por dentro), a prévia fica em cima do campo, campo com 16 px
   (o iPhone não dá zoom) e botões de dedo. Deitado: prévia pequena ao lado do campo */
@media (max-width: 760px) {
  .fph-dlg { width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .fph-in { padding: 14px 14px 16px; }
  .fph-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fph-prev { width: min(180px, 56%); justify-self: center; }
  .fph-field input { font-size: 16px; }
  .fph-actions .gloss-btn { flex: 1 1 140px; }
  .stn-hist-edit .gloss-btn { flex: 1 1 100%; }
}
@media (max-width: 360px) {
  .fph-head h3 { font-size: 19px; }
  .fph-lead { font-size: 13px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .fph-dlg { width: min(640px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right))); max-height: calc(100dvh - 12px); }
  .fph-in { padding: 10px 14px 12px; }
  .fph-lead { margin-bottom: 8px; }
  .fph-body { grid-template-columns: 110px minmax(0, 1fr); }
  .fph-prev { width: auto; }
  .fph-actions { margin-top: 10px; }
}
@media (pointer: coarse) {
  .fph-x { width: 44px; height: 44px; }
  .fph-field input { min-height: 48px; font-size: 16px; }
  .fph-help summary { box-sizing: border-box; min-height: 44px; padding: 12px 0; }
  .fph-actions .gloss-btn, .stn-hist-edit .gloss-btn { min-height: 46px; }
  /* sem mouse, o "Alterar" da carta fica sempre bem visível */
  .fph-tools .fph-alt { opacity: 1; }
}

/* =========================================================
   GOLDEN HAWKINS — a loteria diária no balcão da Melvald's (golden.js, golden.css, prefixo .gh-)
   Em pé: volante em 6 colunas com números do tamanho do dedo, mesa embaixo, campos de 16 px,
   histórico empilhado. Deitado: volante em 10 colunas, mais baixo. Só consultas de celular/toque.
   ========================================================= */
@media (max-width: 760px) {
  .gh { margin-top: 22px; }
  .gh-counter { padding: 0 10px 16px; }
  .gh-sign { margin: 0 -10px 14px; padding: 16px 10px 12px; }
  .gh-kicker, .gh-sub { font-size: 10px; letter-spacing: 0.12em; }
  .gh-grid { gap: 14px; }
  .gh-slip { padding: 12px 10px 14px; }
  .gh-nums { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .gh-n { height: 44px; font-size: 16px; }
  .gh-slip-tools .gh-tool { flex: 1; }
  .gh-tool { min-height: 44px; }
  .gh-desk { padding: 14px 12px; }
  .gh-clock { font-size: 42px; }
  .gh-owner-row { grid-template-columns: 1fr; }
  .gh-owner input { font-size: 16px; min-height: 44px; }
  .gh-owner .gh-tool { width: 100%; }
  .gh-result, .gh-board { padding: 12px 10px; }
  .gh-big .gh-ball { width: 46px; height: 46px; font-size: 20px; }
  .gh-board ol li:not(.gh-empty) { grid-template-columns: 1fr; gap: 2px; }
  .gh-m-who { text-align: left; }
}
@media (max-width: 360px) {
  .gh-name { font-size: 30px; }
  .gh-nums { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gh-balls { gap: 5px; }
  .gh-ball, .gh-big .gh-ball { width: 36px; height: 36px; font-size: 16px; }
  .gh-facts dd { font-size: 16px; }
  .gh-facts div:first-child dd { font-size: 20px; }
}
@media (pointer: coarse) {
  .gh-n:hover { background: transparent; }
  .gh-n[aria-pressed="true"]:hover { background: var(--gh-ink); }
  .gh-buy { min-height: 48px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .gh-nums { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .gh-n { height: 44px; }
  .gh-clock { font-size: 34px; margin-bottom: 8px; }
}

/* =========================================================
   CASSINO — Palace Arcade, a sala dos fundos da Melvald's (cassino.js, cassino.css, prefixo .pa-)
   Em pé: tudo numa coluna (tela da máquina em cima, controles embaixo), máquinas em 3 × 2, fichas e
   escolhas do tamanho do dedo, cartas em 3 × 2. Deitado: tela e controles lado a lado de novo, mais baixos.
   Tudo dentro de consultas de celular/toque: o desktop não muda.
   ========================================================= */
@media (max-width: 760px) {
  .pa { margin-top: 22px; }
  .pa-room { padding: 0 10px 16px; }
  .pa-sign { margin: 0 -10px 12px; padding: 24px 10px 14px; }
  .pa-kicker, .pa-sub { font-size: 11px; letter-spacing: 0.14em; }
  .pa-name { font-size: clamp(30px, 10.5vw, 44px); letter-spacing: 0.08em; }
  .pa-intro { margin-bottom: 14px; font-size: 14px; }
  .pa-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .pa-bar > div { padding: 10px 12px; }
  .pa-bar > .pa-bet { grid-column: 1 / -1; }
  .pa-bar > div > span { font-size: 11px; }
  .pa-cash b { font-size: 28px; }
  .pa-plays b { font-size: 17px; }
  .pa-pips u { width: 7px; height: 7px; }
  .pa-chips { justify-content: space-between; gap: 6px; }
  .pa-chip { width: 50px; height: 50px; }
  .pa-chip span { font-size: 14px; }
  .pa-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .pa-tab { min-height: 72px; padding: 8px 4px; }
  .pa-tab-name { font-size: 14px; overflow-wrap: anywhere; }
  .pa-pay .pa-sub-row td { white-space: normal; } /* a linha do d20 dourado quebra (320 px) */
  .pa-tab-max { font-size: 12px; }
  .pa-stage { padding: 10px; }
  .pa-game { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pa-screen { min-height: 0; padding: 14px 8px 10px; }
  .pa-msg { min-height: 48px; font-size: 15px; }
  .pa-go { min-height: 58px; font-size: 19px; }
  .pa-note, .pa-odds, .pa-pay { font-size: 13px; }
  .pa-pay td { padding: 6px; }
  /* caça-níquel */
  .pa-slot .pa-screen { --pa-cell: 58px; }
  .pa-reels { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 330px; gap: 8px; padding: 10px; }
  .pa-sym { font-size: 33px; }
  /* roda */
  .pa-wheel-box { width: min(100%, 280px); }
  /* crash */
  .pa-mult { font-size: 64px; }
  .pa-graph { height: 60px; }
  .pa-auto { font-size: 12px; }
  .pa-auto input { min-height: 48px; }
  /* cartas */
  .pa-table { grid-template-columns: repeat(3, minmax(0, 88px)); gap: 12px; }
  .pa-card-face i { font-size: 34px; }
  .pa-ladder li { padding: 5px 1px; font-size: 11px; }
  .pa-ladder b { font-size: 20px; }
  /* 7 da sorte */
  .pa-box { margin-top: 8px; padding: 22px 26px; gap: 18px; }
  .pa-die { width: 66px; height: 66px; padding: 10px; }
  .pa-pick { min-height: 54px; }
  .pa-pick b { font-size: 17px; }
  .pa-pick small { font-size: 12px; }
  /* cavalos */
  .pa-lane { height: 36px; }
  .pa-horse { font-size: 25px; }
  .pa-horses .pa-pick { min-height: 50px; }
  /* placar e regras */
  .pa-foot { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pa-board li, .pa-rules ul { font-size: 13px; }
}
@media (max-width: 480px) {
  .pa-name { letter-spacing: 0.05em; }
  .pa-tab-name { font-size: 13px; }
  .pa-cash b { font-size: 25px; }
}
@media (max-width: 360px) {
  .pa-room { padding: 0 8px 14px; }
  .pa-sign { margin: 0 -8px 12px; }
  .pa-bar > div { padding: 9px 10px; }
  .pa-cash b { font-size: 22px; }
  .pa-plays b { font-size: 15px; }
  .pa-chips { gap: 3px; }
  .pa-chip { width: 44px; height: 44px; }
  .pa-chip span { font-size: 13px; }
  .pa-tab { min-height: 66px; }
  .pa-tab-ico { font-size: 20px; }
  .pa-tab-name { font-size: 12px; }
  .pa-tab-max { font-size: 11px; }
  .pa-stage { padding: 8px; }
  .pa-slot .pa-screen { --pa-cell: 50px; }
  .pa-reels { gap: 6px; padding: 8px; }
  .pa-sym { font-size: 28px; }
  .pa-mult { font-size: 54px; }
  .pa-table { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .pa-box { padding: 18px 20px; gap: 14px; }
  .pa-die { width: 58px; height: 58px; padding: 9px; gap: 4px; }
  .pa-go { font-size: 17px; }
}
/* dedo: nada de "pulinho" preso depois do toque; alvos de 44 px ou mais */
@media (hover: none) {
  .pa-tab:hover:not(:disabled), .pa-chip:hover:not(:disabled) { transform: none; }
  .pa-chip.on { transform: translateY(-4px); }
  .pa-card:not(:disabled):hover .pa-card-in { transform: none; }
  .pa-card.flip:not(:disabled):hover .pa-card-in, .pa-card.flip .pa-card-in { transform: rotateY(180deg); }
}
@media (pointer: coarse) {
  .pa-chip { min-width: 44px; min-height: 44px; }
  .pa-tab { min-height: 64px; }
  .pa-pick { min-height: 50px; }
  .pa-auto input { min-height: 48px; }
}
/* celular deitado: tela e controles lado a lado, tudo mais baixo */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .pa-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pa-tab { min-height: 56px; padding: 6px 3px; }
  .pa-tab-ico { font-size: 18px; }
  .pa-tab-name { font-size: 12px; }
  .pa-game { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; }
  .pa-screen { min-height: 0; padding: 10px 8px 8px; gap: 8px; }
  .pa-slot .pa-screen { --pa-cell: 46px; }
  .pa-sym { font-size: 27px; }
  .pa-wheel-box { width: min(100%, 210px); margin-top: 4px; }
  .pa-mult { font-size: 50px; }
  .pa-graph { height: 44px; }
  .pa-table { grid-template-columns: repeat(6, minmax(0, 58px)); gap: 8px; padding-top: 4px; }
  .pa-box { margin-top: 0; padding: 14px 18px; }
  .pa-die { width: 54px; height: 54px; padding: 8px; }
  .pa-lane { height: 30px; }
  .pa-horse { font-size: 22px; }
  .pa-runner { top: 1px; }
  .pa-msg { min-height: 40px; font-size: 14px; }
  .pa-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* =========================================================
   PALACE DELUXE E POTE DO PALACE — o caça-níquel de 5 rolos e o letreiro do pote (cassino.js, cassino.css, .pa-)
   Em pé: o Deluxe vira a 1ª máquina, na largura toda (as outras 6 ficam em 3 × 2); os 5 rolos dividem a
   largura da tela; o letreiro do pote, o formulário da administração, a faixa e o cupom cabem no dedo.
   ========================================================= */
@media (max-width: 760px) {
  .pa-tab[data-jogo="deluxe"] { order: -1; grid-column: 1 / -1; min-height: 56px; flex-direction: row; justify-content: center; gap: 8px; }
  .pa-pote { margin-bottom: 12px; padding: 10px 10px 12px; }
  .pa-pote-v { font-size: clamp(38px, 12vw, 52px); }
  .pa-pote-regra, .pa-pote-ult { font-size: 13px; }
  .pa-pote-adm summary { display: flex; align-items: center; min-height: 44px; }
  .pa-pote-form { flex-direction: column; align-items: stretch; }
  .pa-pote-form select, .pa-pote-form input { width: 100%; min-height: 44px; font-size: 16px; }
  .pa-pote-form .gloss-btn { min-height: 44px; }
  .pa-dlx .pa-screen { --pa-dcell: min(60px, calc((100vw - 96px) / 5)); }
  .pa-dlx-box { padding: 8px; }
  .pa-dlx-cor, .pa-dlx-linhas { top: 8px; left: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
  .pa-dlx-pote b { font-size: 24px; }
  .pa-dlx-bonus { font-size: 14px; }
  .pa-dlx-mapa { font-size: 13px; }
  .pa-dlx-mapa summary { display: flex; align-items: center; min-height: 44px; }
  .pa-dlx-mapa svg { width: 48px; height: 29px; }
  .pa-dpay td { padding: 6px 4px; }
  .pa-faixa { top: calc(8px + env(safe-area-inset-top)); width: auto; max-width: calc(100vw - 20px); padding: 8px 6px 8px 14px; font-size: 15px; }
  .pa-faixa-x { min-width: 44px; min-height: 44px; }
  .pa-cupom-papel { font-size: 13px; }
}
@media (max-width: 360px) {
  .pa-dlx .pa-screen { --pa-dcell: calc((100vw - 84px) / 5); }
  .pa-dlx-box { padding: 6px; }
  .pa-dlx-cor, .pa-dlx-linhas { top: 6px; left: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
  .pa-dlx-cor i small { font-size: 8px; }
  .pa-dlx-mapa ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-cupom-v { font-size: 28px; }
}
/* dedo (também no celular deitado, que passa de 760 px): os "abrir" do pote e das linhas com 44 px */
@media (pointer: coarse) {
  .pa-dlx-mapa summary, .pa-pote-adm summary { display: flex; align-items: center; min-height: 44px; }
}
/* celular deitado: as 7 máquinas numa fila só e os rolos mais baixos */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .pa-tabs { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .pa-tab[data-jogo="deluxe"] { order: 0; grid-column: auto; flex-direction: column; gap: 2px; }
  .pa-dlx .pa-screen { --pa-dcell: 44px; }
  .pa-faixa { top: 6px; }
}

/* =========================================================
   IDENTIDADE NO EDITOR DO ADMIN — nome do personagem, usuário (login) e Nº do registro
   (ficha.js → identityHTML, style.css prefixo .fid-). Campos com altura de dedo; o "@"
   e o campo do usuário nunca passam da largura do painel.
   ========================================================= */
@media (pointer: coarse) {
  .fid-row input { min-height: 48px; }
  /* Salvar/Cancelar do editor na janela da carta (onde o admin edita) com altura de dedo */
  .card-dialog .card-actions .gloss-btn { min-height: 44px; }
}
/* celular deitado e tablet em pé (toque, 761–1000 px): com o painel ao lado, o verso da carta no editor
   ficava com ~120 px e a biografia com ~56 px de largura. O painel (Identidade, pontos, Salvar) desce
   para baixo da carta, como no celular em pé; frente e verso ficam lado a lado com espaço para escrever */
@media (pointer: coarse) and (max-width: 1000px) {
  .card-dialog .card-desk, .stn-editor .card-desk { grid-template-columns: 1fr; }
  .stn-editor .card-side { order: 2; }
}
@media (max-width: 760px) {
  .fid-box { padding: 10px 10px 12px; }
  .fid-row > label { font-size: 13px; }
  .fid-hint { font-size: 12.5px; }
  .fid-row-num input { max-width: 140px; }
}
/* quadro "Perks" do editor do admin (ficha.js → adminPerksHTML, prefixo .fpk-): "Tirar", a lista e "Dar"
   com altura de dedo; a lista de perks a 16 px (o iPhone não dá zoom) */
@media (pointer: coarse) {
  .fpk-del { min-width: 64px; min-height: 44px; }
  .fpk-add select, .fpk-add .gloss-btn { min-height: 44px; }
}
@media (max-width: 760px) {
  .fpk-add select { font-size: 16px; }
  .fpk-name { font-size: 14px; }
}
@media (max-width: 360px) {
  .fpk-add { flex-wrap: wrap; }
  .fpk-add select { flex-basis: 100%; }
}

/* =========================================================
   PODCAST — a aba ao lado do rádio WSQK (podcast.js / podcast.css, prefixo .pod-)
   Botões, abas, barra da fita e fitas da estante com altura de dedo; o painel rola por dentro quando a
   tela é baixa (a TV encolhe para os controles caberem); deitado, a TV vai para a esquerda e os
   controles para a direita. O aviso "Podcast no ar" fica ao lado da bolinha, sem passar da tela.
   ========================================================= */
@media (pointer: coarse) {
  .pod-tabs [role="tab"], .theme-hawkins #site .pod-tabs [role="tab"] { height: 44px; }
  .pod-tabs [role="tab"] { font-size: 12px; }
  .pod-deck { gap: 4px; }
  .pod-btn, .theme-hawkins #site .pod-btn { min-width: 44px; height: 44px; }
  .pod-back, .pod-fwd { padding: 0 7px; }
  .pod-btn small { font-size: 10px; }
  .pod-seek { height: 36px; margin-top: 4px; }
  .pod-seek::-webkit-slider-thumb { width: 14px; height: 26px; margin-top: -11px; }
  .pod-seek::-moz-range-thumb { width: 14px; height: 26px; }
  .pod-vol { min-height: 44px; margin-top: 4px; }
  .pod-vol input { min-height: 36px; }
  .pod-fita { min-height: 52px; }
  .pod-fita-t { font-size: 15px; }
  .pod-aviso { padding: 4px 4px 4px 12px; }
  .pod-aviso-t { min-height: 44px; justify-content: center; }
  .pod-aviso button { min-width: 44px; min-height: 44px; font-size: 12px; }
  .pod-cc span { font-size: 15px; }
}
@media (max-width: 760px) {
  /* o painel nunca passa da altura da tela: rola por dentro (o cabeçalho e as abas ficam à vista) */
  .radio-float .pod-body { max-height: calc(100vh - 128px - env(safe-area-inset-bottom)); max-height: calc(100dvh - 128px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
  /* a TV encolhe em telas baixas para o play e a barra da fita continuarem à vista sem rolar */
  .pod-tv { width: min(100%, calc((100vh - 350px) * 4 / 3 + 12px)); width: min(100%, calc((100dvh - 350px) * 4 / 3 + 12px)); min-width: min(100%, 176px); margin: 0 auto; }
  .pod-info { font-size: 13px; }
  .pod-info-d { font-size: 12px; }
  .pod-aviso { right: 0; max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
  .pod-aviso-t span { font-size: 12px; }
}
@media (max-width: 360px) {
  /* 320 px: os três botões da fita numa linha e CC / trilha / fitas na linha de baixo */
  .pod-deck { flex-wrap: wrap; row-gap: 6px; }
  .pod-deck-sp { flex: 1 0 100%; height: 0; }
  .pod-mini { flex: 1 1 0; }
  .pod-back, .pod-fwd, .pod-play { flex: 1 1 0; }
}
/* nas redes sociais a bolinha fica no alto da tela (mobile.css acima): o aviso aparece embaixo dela */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #site:has(.rede-wrap.page-active) .pod-aviso { top: calc(100% + 10px); bottom: auto; }
}
/* celular deitado: TV à esquerda, controles à direita (o rádio aberto fica mais largo só na aba Podcast) */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .widget.radio-float.pod-aba:not(.radio-mini) { width: min(620px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
  .radio-float .pod-body { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 12px; align-items: start; max-height: calc(100vh - 118px - env(safe-area-inset-bottom)); max-height: calc(100dvh - 118px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
  .radio-float .pod-body[hidden] { display: none; }
  .pod-tv { grid-column: 1; grid-row: 1 / 5; width: min(100%, calc((100vh - 150px) * 4 / 3 + 12px)); width: min(100%, calc((100dvh - 150px) * 4 / 3 + 12px)); }
  .pod-seek, .pod-info, .pod-deck, .pod-vol { grid-column: 2; }
  .pod-seek { margin-top: 0; }
  .pod-deck { flex-wrap: wrap; row-gap: 6px; }
}

/* =========================================================
   DESEMPENHO — a escolha "Imersiva / Desempenho" do cabeçalho e a pergunta de cada carregamento
   (desempenho.css, prefixo .pcf-). Até 760 px a escolha ganha uma linha só dela, embaixo da marca e da chave
   dos mundos, com dois botões de dedo (o cabeçalho não gruda no topo: a linha rola junto com a página).
   A pergunta: uma opção embaixo da outra em pé, lado a lado deitado; cabe na tela e rola por dentro.
   ========================================================= */
@media (max-width: 760px) {
  .masthead-in { flex-wrap: wrap; row-gap: 8px; }
  /* a chave, o ↺ e a escolha passam a ser itens do cabeçalho: a escolha pode quebrar a linha sozinha */
  .masthead-actions { display: contents; }
  .pcf-modo { display: flex; flex: 1 1 100%; }
  .pcf-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 8px; font-size: 12px; }
  .theme-hawkins[data-page="rede"] .pcf-btn { font-size: 12px; }
}
@media (max-width: 760px) and (min-width: 481px) {
  /* a marca continua encolhendo na mesma linha da chave dos mundos (não empurra a chave para baixo) */
  .brand { flex: 1 1 0; }
}
@media (max-width: 360px) {
  /* 320 px: "Potência total" cabe inteiro (letras um pouco mais juntas, menos folga dos lados) */
  .pcf-btn { gap: 4px; padding: 0 4px; letter-spacing: 0.02em; }
}
@media (pointer: coarse) {
  .pcf-btn { min-height: 44px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) and (min-width: 761px) {
  .pcf-btn { min-height: 40px; }
}
@media (max-width: 760px) {
  .pcf-perg {
    width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .pcf-perg-caixa { padding: 20px 16px 16px; }
  .pcf-perg-sinal { font-size: 18px; }
  .pcf-perg-titulo { margin-bottom: 20px; font-size: 19px; }
  .pcf-perg-opcoes { grid-template-columns: 1fr; gap: 18px; }
  .pcf-perg-op { padding: 16px 14px 14px; }
}
@media (max-width: 360px) {
  .pcf-perg-sinal { font-size: 16px; letter-spacing: 0.05em; }
  .pcf-perg-titulo { font-size: 17px; }
  .pcf-perg-op { gap: 6px; font-size: 13px; }
  .pcf-perg-nome { font-size: 16px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* deitado: pouca altura, as duas opções lado a lado; sem a linha "REC" */
  .pcf-perg { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .pcf-perg-caixa { padding: 12px 16px 12px; }
  .pcf-perg-sinal { display: none; }
  .pcf-perg-titulo { margin-bottom: 14px; font-size: 17px; }
  .pcf-perg-opcoes { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pcf-perg-op { gap: 6px; padding: 14px 12px 10px; font-size: 13px; }
  .pcf-perg-nota { margin-top: 10px; }
}

/* =========================================================
   ARMAS — a loja de armas (Roane County Arms) no IE da loja online
   e o arsenal do mercado negro (armas.css, prefixo .arm-).
   A vitrine usa o esqueleto da Melvald's.com (.mvs-*), que já tem a
   versão de bolso no bloco "LOJAS"; aqui só o que é novo: a barra
   "Links" (troca de site), a faixa 18+, o aviso de menor de idade,
   o anúncio dentro da Melvald's e as abas do Tor.
   ========================================================= */
@media (max-width: 760px), (pointer: coarse) {
  /* barra Links: botões do tamanho do dedo, numa linha só */
  #compras .ie-links { gap: 4px; padding: 3px 6px; }
  #compras .ie-links-l { font-size: 12px; }
  #compras .ie-links button { flex: 1 1 auto; min-width: 0; min-height: 44px; box-sizing: border-box; justify-content: center; padding: 0 8px; font-size: 13px; }
  #compras .ie-links .arm-18 { font-size: 10px; line-height: 15px; }
  /* faixa "venda proibida" e o aviso de menor: letra de leitura */
  #compras .arm-age { padding: 6px 12px; font-size: 12px; line-height: 1.35; }
  #compras .arm-age .mvs-18i { width: 22px; height: 22px; font-size: 10px; }
  #compras .arm-gate { padding: 10px 12px; font-size: 13px; line-height: 1.5; }
  /* anúncio da loja de armas na vitrine da Melvald's */
  #compras .mvs .arm-ad { min-height: 48px; padding: 9px 12px; font-size: 13px; line-height: 1.45; }
  #compras .mvs .arm-ad b { font-size: 15px; }
  #compras .mvs .arm-ad small { margin-left: 0; font-size: 11.5px; }
  /* abas do Tor (mercado / arsenal) com altura de dedo */
  #compras .tor-tabs button.tor-tab { min-height: 44px; padding: 0 12px; font-size: 13px; }
  /* aviso "sem perguntas" do arsenal: só o ícone e o texto (sem a linha do preço) */
  #compras .nq-id.nq-ars-note { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "pic info"; }
}
@media (max-width: 480px) {
  /* celular estreito: "Links" e o nome do site .onion saem; ficam os nomes das lojas/abas */
  #compras .ie-links-l, #compras .ie-links button .ie-favicon { display: none; }
  #compras .tor-tabs .nq-tab-site { display: none; }
  #compras .tor-tabs button.tor-tab { flex: 1 1 0; justify-content: center; }
}
@media (max-width: 360px) {
  #compras .ie-links button { gap: 4px; padding: 0 5px; font-size: 12px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* deitado: a janela é baixa; a barra Links e as abas ficam com 40 px */
  #compras .ie-links { padding-top: 2px; padding-bottom: 2px; }
  #compras .ie-links button, #compras .tor-tabs button.tor-tab { min-height: 40px; }
  #compras .arm-age { padding-top: 4px; padding-bottom: 4px; }
}

/* =========================================================
   EQUIPAMENTO — o inventário de RPG (equipamento.css, prefixo .eqp-)
   na aba Inventário da Minha Ficha e na janela do morador. O quadro já
   vira 2 colunas sozinho quando a largura é pouca (consulta de
   container); aqui: letra de leitura e alvos do tamanho do dedo.
   ========================================================= */
@media (max-width: 760px), (pointer: coarse) {
  .eqp-sub { font-size: 13px; }
  .eqp-perk { font-size: 12px; }
  .eqp-slot-hint { font-size: 12.5px; }
  .eqp-slot-lab { font-size: 11px; }
  .eqp-core-foot, .eqp-info { font-size: 12.5px; }
  .eqp-item-meta, .eqp-item-open { font-size: 12px; }
  .eqp .bonus-chips span { font-size: 12px; }
  /* filtros dos guardados, "Equipar" e "Revender": altura de dedo */
  .eqp-filter { gap: 8px; }
  .eqp-filter button { min-height: 44px; padding: 0 12px; font-size: 13px; }
  .eqp-add { min-height: 44px; font-size: 12.5px; }
  .eqp-sell { display: flex; align-items: center; justify-content: center; min-height: 40px; font-size: 12px; }
  /* o ✕ do espaço continua pequeno no desenho, mas o dedo acerta (área de 44 px em volta) */
  .eqp-x { width: 30px; height: 30px; font-size: 12px; }
  .eqp-x::after { content: ""; position: absolute; inset: -7px; }
  /* links no meio da frase ("loja online", "loja de armas"): área de toque mais alta */
  .eqp-empty a { display: inline-block; padding: 12px 2px; margin: -12px 0; }
}
@media (max-width: 480px) {
  .eqp-rig, .eqp-bag { padding: 12px 10px 14px; }
  .eqp-head { margin-bottom: 12px; }
  .eqp-title { font-size: 15.5px; letter-spacing: 0.12em; }
}
@media (hover: none) {
  /* sem mouse, nada fica "levantado" depois do toque */
  .eqp-slot.is-filled:hover, .eqp-item[data-drag]:hover, .eqp-add:hover { transform: none; }
}

/* =========================================================
   PERKS, QUARTA LEVA (2026-09-30): filtro da lista de perks e troca da Polivalente (.pk-), lembretes da mesa
   (.pkm-), Mão leve na Melvald's (.mvs-steal), presente e sucata no inventário (.eqp-gift*, .eqp-scrap*) e os
   flagrantes do admin (hoje no Histórico, .hst-). Alvos de dedo, campos de 16 px e o filtro deslizando de lado no celular.
   ========================================================= */
@media (pointer: coarse) {
  #conta #stn-perks .pk-tagbtn { min-height: 44px; padding: 0 14px; font-size: 13.5px; }
  #conta #stn-perks .pk-swap-out { min-height: 44px; }
  #conta #stn-perks .pk-swap .gloss-btn { min-height: 44px; }
  /* "Escolher" / "Trocar por esta" / "Destrancar" de cada cartão da lista */
  #conta #stn-perks .pk-pick-foot .gloss-btn { min-height: 44px; }
  #conta .pkm-btn { min-height: 44px; padding: 0 12px; }
  #compras .mvs .mvs-steal { min-height: 44px; font-size: 13px; }
  .eqp-gift { display: flex; align-items: center; justify-content: center; min-height: 40px; font-size: 12px; }
  .eqp-giftbox .eqp-sell { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 10px; }
  .eqp-gift-to select { min-height: 44px; font-size: 16px; }
  .eqp-scrap-list .eqp-sell { display: flex; align-items: center; min-height: 44px; }
}
@media (max-width: 760px) {
  /* o filtro das perks numa fileira que desliza de lado (com 40+ perks, a lista sozinha já é longa) */
  #conta #stn-perks .pk-tagbar { flex-wrap: nowrap; overflow-x: auto; margin-inline: -4px; padding: 2px 4px 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
  #conta #stn-perks .pk-tagbar::-webkit-scrollbar { display: none; }
  #conta #stn-perks .pk-tagbtn { flex: 0 0 auto; }
  #conta #stn-perks .pk-swap { padding: 10px; }
  #conta #stn-perks .pk-swap > .gloss-btn { width: 100%; }
  #conta .pkm-notes { padding: 9px 10px; font-size: 14px; }
  #conta .pkm-btn { display: flex; align-items: center; margin: 6px 0 0; }
  #compras .mvs-prod > .mvs-steal { grid-column: 1 / -1; }
  .eqp-gift-to { max-width: none; font-size: 12px; }
  .eqp-gift-to select { font-size: 16px; }
  .eqp-gift-h, .eqp-scrap-list b { font-size: 14px; }
  .eqp-gift-note, .eqp-scrap-h small { font-size: 12.5px; }
  .eqp-giftbox .eqp-add { flex: 1 1 100%; }
}

/* =========================================================
   JANELA DO MORADOR: ABAS FICHA E PERKS (2026-10-01)
   A folha do registro tem 5 abas (Ficha · História · Atributos · Inventário · Perks): no celular elas quebram
   em 2 linhas e preenchem cada linha. Aba Ficha (.stn-data da janela) e aba Perks (.rpk-) com letras do
   tamanho das de Minha Ficha no celular.
   ========================================================= */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .card-view-record .rec-tabs [role="tab"] { flex: 1 0 auto; justify-content: center; }
  .card-dialog .stn-data dt { font-size: 12px; letter-spacing: 0.1em; }
  .card-dialog .stn-data dd { font-size: 14.5px; }
  .card-dialog .stn-data-xp small, .card-dialog .rfc-note { font-size: 12.5px; line-height: 1.45; }
  .card-dialog .stn-data-xp .card-xp { font-size: 12px; }
  .rpk-lead, .rpk-left { font-size: 13.5px; }
  .rpk-item { gap: 10px; padding: 10px 12px; }
  .rpk-body h4 small { font-size: 11px; }
  .rpk-body p { font-size: 14px; }
  .rpk-body .rpk-rule { font-size: 13px; }
  .rpk-body .rpk-slot { font-size: 11.5px; letter-spacing: 0.1em; }
}
@media (max-width: 360px) {
  .rpk-item { padding: 10px; }
  .rpk-icon { width: 36px; height: 36px; font-size: 19px; }
}

/* =========================================================
   EXPERIMENTO 000/001: A ABA SECRETA (2026-10-01) — experimento.css (.exo-), baixado só por quem é experimento
   Celular em pé: uma coluna (carta secreta com a foto ao lado dos dados, habilidades empilhadas, as duas
   rolagens uma embaixo da outra), ficha secreta só com as siglas, relatório sem inclinação, relato em uma
   coluna com letra de 16 px. Dedo: tudo com 44 px. Deitado: o aviso "você foi escolhido" cabe na altura.
   ========================================================= */
@media (max-width: 760px) {
  .exo { margin: 10px 0 18px; }
  .exo-strip { gap: 4px 12px; padding: 8px 14px; font-size: 10px; letter-spacing: 0.14em; }
  .exo-strip span:nth-child(2), .exo-strip span:nth-child(3) { display: none; }
  .exo-strip span + span::before { margin-right: 12px; }
  .exo-title { grid-template-columns: auto minmax(0, 1fr); gap: 10px 18px; padding: 20px 16px 8px; }
  .exo-num { font-size: clamp(72px, 24vw, 108px); }
  .exo-rift { width: 10px; }
  .exo-name h2 { font-size: clamp(34px, 11vw, 50px); letter-spacing: 0.14em; }
  .exo-kicker { font-size: 18px; letter-spacing: 0.12em; }
  .exo-prev { display: inline-block; margin: 4px 0 0; font-size: 14px; }
  .exo-line { margin-top: 6px; font-size: 12.5px; letter-spacing: 0.12em; }
  .exo-status { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; min-width: 0; padding: 12px 0 0; border-top: 1px solid var(--x-line2); border-left: 0; }
  .exo-status dd { font-size: 13.5px; }
  .exo-ecg { height: 54px; }
  .exo-tools { padding: 12px 14px 0; }
  .exo-tools .exo-btn { flex: 1 1 auto; }
  .exo-ticker { font-size: 16px; line-height: 30px; }
  .exo-body { gap: 18px; padding: 16px 12px 22px; }
  .exo-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .exo-col { gap: 18px; }
  .exo-id, .exo-powers, .exo-sheet, .exo-report, .exo-sigilo { padding: 16px 14px; }
  .exo-id { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 0 14px; align-items: start; }
  .exo-data { margin: 0; }
  .exo-photo figcaption { padding: 3px 7px; font-size: 15px; letter-spacing: 0.06em; }
  .exo-data div { padding: 6px 0; }
  .exo-data dd { font-size: 14px; }
  .exo-monitor, .exo-secret { grid-column: 1 / -1; }
  .exo-ptabs { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .exo-ptab { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n name state"; min-height: 56px; }
  .exo-pt-state { text-align: right; }
  .exo-pp-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "cost" "act" "rolls"; gap: 16px; }
  .exo-pp-in > .exo-cost { margin-top: 0; }
  .exo-act.is-on { display: grid; }
  .exo-stop { justify-self: stretch; }
  .exo-pp-text h4 { font-size: 26px; }
  .exo[data-exp="001"] .exo-pp-text h4 { font-size: 24px; }
  .exo-rolls { grid-template-columns: minmax(0, 1fr); }
  .exo-roll-expr { font-size: 32px; }
  .exo-table { font-size: 20px; }
  .exo-table tbody th span { display: none; }
  .exo-table tbody th abbr { min-width: 0; }
  .exo-table th, .exo-table td { padding: 8px 4px; }
  .exo-table thead th { letter-spacing: 0.1em; }
  .exo-chip { padding: 3px 8px; font-size: 18px; }
  .exo-paper { padding: 26px 18px 28px; transform: none; font-size: 15px; line-height: 1.7; }
  .exo-paper::before { left: 22px; }
  .exo-stamp { position: static; display: inline-block; margin: 0 0 14px; font-size: 16px; transform: rotate(-3deg); }
  .exo-paper h3:first-of-type { padding-right: 0; }
  .exo-paper-head p { letter-spacing: 0.08em; }
  .exo-form { grid-template-columns: minmax(0, 1fr); }
  .exo-q textarea { font-size: 16px; }
  .exo-save { flex: 1 1 100%; }
  .exo-sigilo ul { grid-template-columns: minmax(0, 1fr); }
  .exo-adm-slots { grid-template-columns: minmax(0, 1fr); }
  .exo-av-term { top: 12vh; }
  .exo-av-tear { width: 72vw; }
  .exo-av-title { max-width: 14ch; }
  .exo-av-warn { letter-spacing: 0.3em; }
}
@media (max-width: 480px) {
  .exo-id { grid-template-columns: 104px minmax(0, 1fr); }
  .exo-status dt { letter-spacing: 0.14em; }
  .exo-pp-text > p, .exo-cost { font-size: 14.5px; }
}
@media (max-width: 360px) {
  .exo-title { grid-template-columns: minmax(0, 1fr); }
  .exo-num { font-size: 84px; }
  .exo-status { grid-template-columns: minmax(0, 1fr); }
  .exo-id { grid-template-columns: minmax(0, 1fr); }
  .exo-photo { max-width: 180px; margin-bottom: 12px; }
  .exo-table { font-size: 18px; }
  .exo-chip { padding: 3px 6px; font-size: 17px; }
}
@media (pointer: coarse) {
  .exo-btn, .exo-copy, .exo-chip, .exo-av-skip { min-height: 44px; }
  .exo-ptab { min-height: 56px; }
  .exo-adm-row select { min-height: 44px; font-size: 16px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .exo-av-term { top: 8vh; font-size: 20px; }
  .exo-av-core { gap: 6px; }
  .exo-av-num { font-size: 24vh; }
  .exo-av-title { max-width: 30ch; font-size: clamp(20px, 7vh, 32px); }
  .exo-av-go { min-height: 44px; margin-top: 6px; }
  .exo-av-tear { height: 94vh; }
}

/* =========================================================
   RECEPTÁCULO: A ABA DO VÍNCULO (2026-10-09) — receptaculo.css (.rcp-), baixado só por quem é receptáculo
   Celular em pé: uma coluna (a carta com a foto ao lado dos dados, as 4 habilidades em 2×2, o texto e o
   preço empilhados), tabela só com as siglas, diário em uma coluna com letra de 16 px, painel do admin em
   uma coluna. Dedo: tudo com 44 px. Deitado: o aviso "você foi escolhido como receptáculo" cabe na altura.
   ========================================================= */
@media (max-width: 760px) {
  .rcp { margin: 10px 0 18px; }
  .rcp-strip { gap: 4px 12px; padding: 8px 14px; font-size: 10px; letter-spacing: 0.14em; }
  .rcp-strip span:nth-child(2) { display: none; }
  .rcp-strip span + span::before { margin-right: 12px; }
  .rcp-title { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 16px 12px; }
  .rcp-kicker { font-size: 13px; letter-spacing: 0.32em; }
  .rcp-prev { display: inline-block; margin: 4px 0 0; }
  .rcp-h2 { font-size: clamp(40px, 13vw, 60px); }
  .rcp-line { font-size: 16.5px; }
  .rcp-status { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; min-width: 0; padding: 12px 0 0; border-top: 1px solid var(--r-line2); border-left: 0; }
  .rcp-status dd { font-size: 14.5px; }
  .rcp-tools { padding: 0 14px 14px; }
  .rcp-tools .rcp-btn { flex: 1 1 auto; }
  .rcp-body { gap: 18px; padding: 16px 12px 22px; }
  .rcp-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .rcp-col { gap: 18px; }
  .rcp-id, .rcp-powers, .rcp-sheet, .rcp-report, .rcp-sigilo { padding: 16px 14px; }
  .rcp-id { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 0 14px; align-items: start; }
  .rcp-data { margin: 0; }
  .rcp-data div { padding: 6px 0; }
  .rcp-data dd { font-size: 15px; }
  .rcp-photo figcaption { padding: 3px 7px; font-size: 11px; letter-spacing: 0.2em; }
  .rcp-monitor, .rcp-secret { grid-column: 1 / -1; }
  .rcp-ptabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .rcp-ptab { min-height: 60px; gap: 2px 8px; padding: 8px 10px; }
  .rcp-pt-n { font-size: 22px; }
  .rcp-pt-name { font-size: 14px; letter-spacing: 0.02em; }
  .rcp-pt-name small { letter-spacing: 0.12em; }
  .rcp-pp-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "cost" "act" "rolls"; gap: 16px; }
  .rcp-pp-in > .rcp-cost { margin-top: 0; }
  .rcp-pp-text h4 { font-size: 26px; }
  .rcp-pp-text > p { font-size: 15.5px; }
  .rcp-act.is-on { display: grid; }
  .rcp-stop { justify-self: stretch; }
  .rcp-roll-expr { font-size: 32px; }
  .rcp-table { font-size: 20px; }
  .rcp-table tbody th span { display: none; }
  .rcp-table tbody th abbr { min-width: 0; }
  .rcp-table th, .rcp-table td { padding: 8px 4px; }
  .rcp-table thead th { letter-spacing: 0.1em; }
  .rcp-chip { padding: 3px 8px; font-size: 19px; }
  .rcp-page { padding: 22px 6px 24px; }
  .rcp-page p { font-size: 16px; }
  .rcp-form { grid-template-columns: minmax(0, 1fr); }
  .rcp-q textarea { font-size: 16px; }
  .rcp-save { flex: 1 1 100%; }
  .rcp-sigilo ul { grid-template-columns: minmax(0, 1fr); }
  .rcp-adm-list { grid-template-columns: minmax(0, 1fr); }
  /* despertar o vínculo (2026-10-10): os botões dividem a linha */
  .rcp-adm-todos .gloss-btn, .rcp-adm-vinc .gloss-btn { flex: 1 1 auto; }
  .rcp-vinc { font-size: 14.5px; }
  .rcp-av-cold { top: 34vh; }
  .rcp-av-title { max-width: 13ch; }
  .rcp-av-warn { letter-spacing: 0.3em; }
}
@media (max-width: 480px) {
  .rcp-id { grid-template-columns: 104px minmax(0, 1fr); }
  .rcp-status dt { letter-spacing: 0.14em; }
  .rcp-cost { font-size: 14.5px; }
}
@media (max-width: 360px) {
  .rcp-status { grid-template-columns: minmax(0, 1fr); }
  .rcp-id { grid-template-columns: minmax(0, 1fr); }
  .rcp-photo { max-width: 180px; margin-bottom: 12px; }
  .rcp-ptabs { grid-template-columns: minmax(0, 1fr); }
  .rcp-table { font-size: 18px; }
  .rcp-chip { padding: 3px 6px; font-size: 17px; }
}
@media (pointer: coarse) {
  .rcp-btn, .rcp-copy, .rcp-chip, .rcp-av-skip { min-height: 44px; }
  .rcp-ptab { min-height: 60px; }
  .rcp-adm-add select { min-height: 44px; font-size: 16px; }
  /* o painel dos receptáculos (despertar o vínculo, 2026-10-10): botões e links com 44 px de toque */
  #admin .rcp-adm .gloss-btn, #admin .rcp-adm .gloss-btn.gloss-small { min-height: 44px; }
  .rcp-adm .link-btn { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .rcp-av-cold { top: 26vh; }
  .rcp-av-core { gap: 6px; }
  .rcp-av-title { max-width: 30ch; font-size: clamp(20px, 7vh, 32px); }
  .rcp-av-sub { font-size: 17px; }
  .rcp-av-warn { margin-top: 2px; }
  .rcp-av-go { min-height: 44px; margin-top: 6px; }
}

/* =========================================================
   ONLINE AGORA (online.js, .onl-): o bloco do painel do admin
   no celular: nome em cima, página embaixo; a lista rola com a página
   ========================================================= */
@media (max-width: 760px) {
  .onl-row { grid-template-columns: auto minmax(0, 1fr); padding: 10px 2px; }
  .onl-where { grid-column: 2; }
  .onl-where b { font-size: 13px; font-weight: 600; }
  .onl-list { max-height: none; overflow: visible; }
  .onl-chip { font-size: 13px; padding: 4px 10px; }
  .onl-help { font-size: 13px; }
}

/* =========================================================
   HISTÓRICO — página só de admins (historico.js, prefixo .hst-). Abas em 2×2, filtros que quebram linha, lista de 16 px no seletor (o iPhone não dá zoom), alvos de dedo e o livro-razão em duas linhas.
   ========================================================= */
@media (max-width: 760px) {
  .hst-entrada .gloss-btn { flex: 0 0 auto; }
  /* as 4 abas em 2×2 (rolando de lado, as últimas ficavam escondidas) */
  .hst-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hst-tab { min-width: 0; overflow-wrap: anywhere; }
  .hst-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .hst-pick select { min-width: 0; width: 100%; font-size: 16px; }
  .hst-item { padding: 10px; }
  .hst-lines { font-size: 14.5px; }
  .hst-ledger li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bloco valor" "oque oque" "data data"; gap: 2px 10px; }
  .hst-ledger .led-block { grid-area: bloco; }
  .hst-ledger .led-amt { grid-area: valor; justify-self: end; }
  .hst-ledger .led-what { grid-area: oque; }
  .hst-ledger .led-date { grid-area: data; }
  .hst-more { width: 100%; }
}
@media (pointer: coarse) {
  .hst-tab, .hst-cat, .hst-more, .hst-entrada .gloss-btn, .hst-filters .gloss-btn { min-height: 44px; }
  .hst-pick select { min-height: 44px; }
  .hst-txt summary { padding: 10px 0; }
  .hst-back { display: inline-block; padding: 10px 0; }
}
@media (max-width: 360px) {
  .hst-filters { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Trabalho: atalhos de dinheiro e XP no admin ---------- */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #admin-econ .econ-work { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #admin-econ .econ-work .gloss-btn { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
  #admin-econ .econ-work-status { font-size: 14px; }
}
@media (pointer: coarse) {
  #admin-econ .econ-work .gloss-btn { min-height: 44px; }
}

/* ---------- CATÁLOGO DE PERKS (.pk-browse / .pk-wait): convite e lista só para olhar ---------- */
@media (max-width: 760px) {
  #conta #stn-perks .pk-browse { padding: 10px; }
  #conta #stn-perks .pk-browse > .gloss-btn { width: 100%; }
  #conta #stn-perks .pk-wait { font-size: 12.5px; }
}
@media (pointer: coarse) {
  #conta #stn-perks .pk-browse .gloss-btn { min-height: 44px; }
}

/* ---------- CADERNO DO PALACE (.sx-): painel do admin ---------- */
@media (max-width: 760px) {
  #admin-econ .sx-row { grid-template-columns: minmax(0, 1fr) 46px; padding: 8px; }
  #admin-econ .sx-meter { grid-column: 1 / -1; grid-row: 2; }
  #admin-econ .sx > .gloss-btn { width: 100%; }
  #admin-econ .sx-play { font-size: 12.5px; }
  /* "Alterar a sorte": campos um embaixo do outro, botões largos; texto a 16 px (sem zoom no iPhone) */
  #admin-econ .sx-form { flex-direction: column; align-items: stretch; }
  #admin-econ .sx-campo input, #admin-econ .sx-campo select { width: 100%; font-size: 16px; }
  #admin-econ .sx-botoes .gloss-btn { flex: 1 1 140px; }
}
@media (pointer: coarse) {
  #admin-econ .sx > .gloss-btn { min-height: 44px; }
  #admin-econ .sx-mudar > summary { display: flex; align-items: center; min-height: 44px; }
  #admin-econ :is(.sx-campo input, .sx-campo select, .sx-botoes .gloss-btn) { min-height: 44px; }
}

/* =========================================================
   QUINTA LEVA DE PERKS (2026-10-03): aba Perks (.pk-extra, .pk-rival,
   .pk-field, .pk-xpday), usos da Segunda chance e da Vantagem (.pkm-uses),
   faixa de perks do cassino (.pa-perks, .pa-pk) e o selo do thefacebook.
   ========================================================= */
@media (max-width: 760px) {
  #perks-app .pk-extra { flex-direction: column; align-items: stretch; }
  #perks-app .pk-extra p { flex: 0 0 auto; }
  #perks-app .pk-rival-row { flex-direction: column; align-items: stretch; }
  #perks-app .pk-rival-row .pk-field { flex: 0 0 auto; }
  #perks-app .pk-rival-row .gloss-btn, #perks-app .pk-extra > .gloss-btn { width: 100%; }
  #perks-app .pk-field select { font-size: 16px; }
  .pkm-uses { align-items: stretch; }
  .pa-perks .pa-pk { flex: 1 1 100%; justify-content: center; }
  /* 8 fichas (10 com a Mesa alta) viram fileiras alinhadas de 4, em vez de soltas nas pontas */
  .pa-chips:has(.pa-chip:nth-child(6)) { display: grid; grid-template-columns: repeat(4, max-content); justify-content: space-between; row-gap: 8px; }
}
@media (pointer: coarse) {
  #perks-app .pk-field select { min-height: 44px; }
  #perks-app :is(.pk-extra, .pk-swap) .gloss-btn { min-height: 44px; }
  .pkm-uses .pkm-btn { min-height: 44px; padding: 0 12px; }
  .pa-pk { min-height: 44px; }
}
@media (max-width: 360px) {
  .pkm-left { flex-basis: 100%; }
}

/* =========================================================
   THEFACEBOOK REPAGINADO (2026-10-03) — .hb- (rede-hb.css) e .rc-
   Topo com busca, sininho e som; coluna de novidades depois do mural;
   caixa de publicar com chips; reações, emojis e cutucadas viram uma
   gaveta embaixo da tela; enquetes, presentes, grupos, eventos, perfil
   com capa/música e o editor com cores RGB — tudo do tamanho do dedo.
   ========================================================= */
@media (max-width: 760px) {
  /* em pé: lateral (links), depois o mural, depois as novidades */
  .hb-side, .hb-main, .hb-extra { grid-column: auto; grid-row: auto; }
  .hb-top { gap: 8px; }
  .hb-busca { flex: 1 1 120px; }
  .hb .hb-busca input { min-height: 34px; padding: 4px 8px; font-size: 16px; }
  .hb-extra { gap: 10px; }
  .hb-box h3 { padding: 6px 8px; font-size: 13px; }
  .hb-mini { padding: 4px 8px 8px; font-size: 13px; }
  .hb-mini li { padding: 3px 0; }
  .hb-ad-in { min-height: 0; }
  .hb-ad-in b { font-size: 17px; }
  .hb-ad-in span { font-size: 13px; }

  /* janelinhas viram gaveta na parte de baixo */
  .hb-pop { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100% !important; max-width: none; max-height: 62vh; max-height: 62svh; overflow: auto; border-width: 2px 0 0; border-radius: 10px 10px 0 0; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35); font-size: 14px; overscroll-behavior: contain; }
  .hb-pop-tit { position: sticky; top: 0; z-index: 1; padding: 10px 14px; font-size: 14px; }
  .hb-emo-lista { max-height: 44vh; max-height: 44svh; }
  .hb-emo-grade { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
  .hb-emo-grade button { height: 44px; font-size: 24px; }
  .hb-emo-tabs button { min-height: 44px; font-size: 20px; }
  .hb-pop-reacoes { border-radius: 10px 10px 0 0; padding: 8px 8px max(8px, env(safe-area-inset-bottom)); }
  .hb-reacoes { justify-content: space-around; }
  .hb-reacoes button { width: auto; min-width: 48px; min-height: 60px; justify-content: center; }
  .hb-reacoes button span { font-size: 30px; }
  .hb-reacoes button small { font-size: 11px; }
  .hb-cut-ops { max-height: none; }
  .hb-cut-ops button { min-height: 48px; display: flex; align-items: center; padding: 0 14px; font-size: 14px; }

  /* caixa de publicar */
  .hb-como { flex: 1 1 100%; margin: 0; padding: 6px 8px; }
  .hb .hb-como select { flex: 1; max-width: none; min-height: 40px; font-size: 16px; }
  .hb-composer .hb-status .hb-campo { flex: 1 1 100%; }
  .hb-campo > :is(input, textarea) { min-height: 44px; box-sizing: border-box; font-size: 16px; }
  .hb .hb-emo-btn { width: 44px; font-size: 18px; }
  .hb-chips { gap: 6px; }
  .hb .hb-chip { min-height: 40px; padding: 0 12px; border-radius: 20px; font-size: 13px; }
  .hb-painel { max-height: 50vh; max-height: 50svh; }
  .hb-ops-sn { grid-template-columns: minmax(0, 1fr); }
  .hb .hb-op { min-height: 44px; font-size: 14px; }
  .hb-ops-bg { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .hb-ops-tg { grid-template-columns: minmax(0, 1fr); }
  .hb-comp-acoes .hb-btn { flex: 1 1 100%; min-height: 44px; }
  .hb-enqform input { min-height: 44px; box-sizing: border-box; font-size: 16px; }

  /* posts */
  .hb-bgcard { min-height: 110px; padding: 20px 14px; font-size: 19px; }
  .hb .hb-enq-op { min-height: 44px; font-size: 14px; }
  .hb-enq-pct { font-size: 12px; }
  .hb-presente { gap: 10px; }
  .hb-presente-emo { width: 48px; height: 48px; font-size: 28px; }
  .hb .hb-act-mais { min-width: 44px; justify-content: center; font-size: 12px; }
  .hb-data { font-size: 13px; right: 10px; bottom: 9px; }

  /* notificações e cutucadas */
  .hb-notifs li { padding: 10px 4px; font-size: 14px; }
  .hb .hb-notif-txt { padding: 4px 0; }
  .hb-poke-emo { font-size: 26px; }

  /* perfil: capa mais baixa, tocador e botões na largura toda */
  .hb-capa { height: 110px; }
  .hb-pic { width: 100%; }
  .hb-pic-actions .hb-btn, .hb-pic > .hb-btn { flex: 1 1 140px; min-height: 44px; }
  .hb-player { max-width: 420px; }
  .hb-player .hb-btn { min-height: 44px; }
  .hb-cut-espera { max-width: none; }
  .hb-depo { font-size: 14px; }
  .hb-campo-area textarea { font-size: 16px; }
  .hb-membros { gap: 6px; }
  .hb .hb-membro .hb-av { width: 40px; height: 40px; }

  /* grupos, páginas, eventos */
  .hb-cards { grid-template-columns: minmax(0, 1fr); }
  .hb-card-g .hb-btn { min-height: 44px; }
  .hb .hb-card-topo { min-height: 52px; }
  .hb-cab-g { flex-wrap: wrap; }
  .hb-cab-g h2 { font-size: 17px; }
  .hb-cab-g .hb-btn { flex: 1 1 100%; min-height: 44px; }
  .hb .hb-ev { min-height: 56px; }
  .hb-ev b { font-size: 14px; }
  .hb-ev small { font-size: 12px; }
  .hb-rsvp .hb-btn { flex: 1 1 0; min-height: 44px; }
  .hb-evform :is(input:not([type="checkbox"]), select) { min-height: 44px; font-size: 16px; }
  .hb-evform .hb-irow > span { flex: 1 1 0; min-width: 0; }
  .hb-adm summary { display: flex; align-items: center; min-height: 44px; }
  .hb-adm :is(input:not([type]), select) { min-height: 44px; font-size: 16px; box-sizing: border-box; }

  /* grupos privados: selos legíveis, convite e tirar membro do tamanho do dedo */
  .hb-gselo { padding: 3px 8px; font-size: 12px; }
  .hb-cab-acoes { flex: 1 1 100%; }
  .hb-cab-acoes .hb-btn { flex: 1 1 0; min-height: 44px; }
  .hb-gadm .hb-btn { min-height: 44px; }
  .hb-gconv-form .hb-irow { flex-wrap: wrap; }
  .hb-gconv-form select { flex: 1 1 100%; min-height: 44px; }
  .hb-gconv-form .hb-btn { flex: 1 1 100%; }
  .hb-membro-i { margin: 4px; }
  .hb .hb-tirar { width: 28px; height: 28px; top: -10px; right: -10px; font-size: 13px; }

  /* loja de presentes: tela inteira */
  .hb-loja-in { width: 100%; height: 100%; max-height: none; border: 0; padding: 0 12px max(12px, env(safe-area-inset-bottom)); font-size: 14px; }
  .hb-loja[open] { place-items: stretch; }
  .hb-loja-top { padding-top: max(6px, env(safe-area-inset-top)); font-size: 15px; }
  .hb-loja .hb-lb-x { width: 44px; height: 44px; font-size: 20px; }
  .hb-loja-grade { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .hb-loja-item { min-height: 92px; justify-content: center; }
  .hb-loja .hb-campo input { min-height: 44px; font-size: 16px; }
  .hb-loja .hb-emo-btn { width: 44px; }
  .hb-loja .hb-btn { min-height: 44px; flex: 1 1 auto; font-size: 14px; }

  /* editor: abas que rolam de lado, cores e emojis do tamanho do dedo */
  .hb-ed-nav { flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 4px; scrollbar-width: none; }
  .hb-ed-nav a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; border: 1px solid #d8dfea; background: #fff; font-size: 13px; white-space: nowrap; }
  .hb .hb-rgb-l { grid-template-columns: 18px minmax(0, 1fr) 34px; min-height: 44px; }
  .hb .hb-rgb-cor input[type="color"] { width: 56px; height: 40px; }
  .hb .hb-sw-cor { width: 44px; height: 44px; }
  .hb-swatches { gap: 8px; }
  .hb-opts-emo .hb-opt { flex: 0 0 auto; min-width: 48px; min-height: 48px; }
  .hb-opts-ef .hb-opt { flex: 1 1 88px; }
  .hb .hb-edit .hb-irow select { flex: 1 1 auto; }

  /* bate-papo */
  .rc-status button { min-height: 44px; font-size: 13px; }
  .rc-list button small { font-size: 11px; }
  .rc-form .rc-emo { width: 48px; font-size: 20px; }
  .rc-head .rc-zap { min-width: 44px; min-height: 44px; font-size: 18px; }
}
@media (max-width: 480px) {
  /* recado e comentário: o botão vai para a linha de baixo, na largura toda */
  .hb-recado .hb-irow, .hb-cform { flex-wrap: wrap; }
  .hb-recado .hb-irow > .hb-btn, .hb-cform > .hb-btn { flex: 1 1 100%; }
  /* a busca de cima sai (o link "Procurar moradores" fica na lateral): sobra espaço para o sininho e o som */
  .hb-busca { display: none; }
  .hb-88 { display: none; }
  .hb-capa { height: 90px; }
  .hb-ops-bg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hb-loja-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hb-loja-emo { font-size: 26px; }
  .hb-reacoes button { min-width: 44px; }
}
@media (max-width: 360px) {
  .hb-loja-grade, .hb-ops-bg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-reacoes button span { font-size: 26px; }
  .hb-bgcard { font-size: 17px; }
}
@media (pointer: coarse) {
  .hb .hb-top-acoes button { width: 44px; height: 44px; font-size: 19px; }
  .hb .hb-chip, .hb .hb-op { min-height: 44px; }
  .hb .hb-enq-op { min-height: 44px; }
  .hb .hb-notif-txt { min-height: 32px; }
  .hb-ad-in i { padding: 6px 12px; }
  .hb .hb-player-vol input { min-height: 32px; }
  .hb .hb-rgb-l input { min-height: 32px; }
  .hb .hb-membro { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* deitado: lateral à esquerda (links e novidades) e o mural à direita, como no computador */
  .hb-top .hb-busca { display: none; } /* o topo é baixo deitado; "Procurar moradores" continua na lateral */
  .hb-pop { max-height: 80vh; max-height: 80svh; }
  .hb-loja-in { height: auto; max-height: calc(100svh - 12px); }
}

/* ==========================================================
   PESQUISA DOS MORADORES (.res-)
   ========================================================== */
@media (max-width: 760px) {
  .res-search { gap: 6px; margin-bottom: 12px; }
  .res-search-row { flex-basis: 100%; max-width: none; }
  .res-search-in, .theme-hawkins #moradores .res-search-in { height: 46px; padding-right: 48px; font-size: 16px; }
  .res-search-x { right: 1px; width: 44px; height: 44px; }
}
@media (max-width: 360px) {
  .res-search-in::placeholder { font-size: 14px; }
}
@media (pointer: coarse) {
  .res-search-in, .theme-hawkins #moradores .res-search-in { min-height: 46px; padding-right: 48px; }
  .res-search-x { right: 1px; width: 44px; height: 44px; }
}

/* ==========================================================
   GRUPO E ORDEM DOS MORADORES (.res-pick)
   ========================================================== */
@media (max-width: 760px) {
  .res-picks { gap: 8px 14px; }
  .res-pick { flex: 1 1 220px; }
  .res-pick-lbl { min-width: 4.6em; }
  .res-pick-sel, .theme-hawkins #moradores .res-pick-sel { flex: 1 1 auto; width: 100%; max-width: none; height: 46px; font-size: 16px; text-overflow: ellipsis; }
}
@media (max-width: 360px) {
  .res-pick { gap: 6px; }
  .res-pick-lbl { min-width: 4.2em; }
}
@media (pointer: coarse) {
  .res-pick-sel, .theme-hawkins #moradores .res-pick-sel { min-height: 46px; }
}

/* ==========================================================
   PESQUISA DE MORADORES NAS LISTAS E ESCOLHAS (.bsc-)
   ========================================================== */
@media (max-width: 760px) {
  .bsc-row { flex-basis: 100%; max-width: none; }
  .bsc-in { height: 44px; padding-right: 46px; font-size: 16px; }
  .bsc-x { right: 0; width: 44px; height: 44px; }
}
@media (pointer: coarse) {
  .bsc-in { min-height: 44px; padding-right: 46px; font-size: 16px; }
  .bsc-x { right: 0; width: 44px; height: 44px; }
}

/* ==========================================================
   ROLETA DE NÍVEIS (roleta.js / roleta.css, prefixo .rlt-)
   A janela da parede de luzes ocupa a tela toda e rola por dentro; as 9 letras de cada
   linha cabem a partir de 320 px; botões de 44 px; campos com letra de 16 px (sem zoom).
   ========================================================== */
@media (max-width: 760px) {
  .rlt-dlg { width: calc(100vw - 12px); max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); }
  .rlt-dlg-in { gap: 10px; padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .rlt-dlg-head { padding: 0 46px 0 4px; text-align: left; }
  .rlt-wall { padding: 12px 4px 10px; }
  .rlt-l { width: calc((100vw - 56px) / 9); padding-top: 24px; }
  .rlt-l b { font-size: clamp(17px, 6vw, 30px); }
  .rlt-bulb { top: 8px; width: 10px; height: 16px; margin-left: -5px; }
  .rlt-word { font-size: clamp(20px, 7vw, 32px); }
  .rlt-acts, .rlt-acts-row { flex-direction: column; align-items: stretch; }
  .rlt-acts .rlt-btn, .rlt-acts-row .rlt-btn { width: 100%; }
  .rlt-prize { padding: 10px; }
  .rlt-prize-ico { width: 44px; height: 44px; font-size: 24px; }
  .rlt-fichas li, .rlt-rel li, .rlt-inv li { grid-template-columns: auto minmax(0, 1fr); }
  .rlt-fichas li .rlt-btn, .rlt-rel li .rlt-btn, .rlt-inv li .rlt-btn { grid-column: 1 / -1; width: 100%; }
  .rlt-cat-l { grid-template-columns: 1fr; }
  .rlt-attrs { grid-template-columns: 1fr 1fr; }
  .rlt-adm-row { flex-direction: column; align-items: stretch; }
  .rlt-adm-row label { flex: 1 1 auto; }
  .rlt-pautas li .gloss-btn { width: 100%; }
}
@media (max-width: 360px) {
  .rlt-attrs { grid-template-columns: 1fr; }
  .rlt-prize { grid-template-columns: 1fr; justify-items: start; }
  .rlt-dlg-head h2 { font-size: 24px; }
}
@media (pointer: coarse) {
  .rlt-btn, .rlt-btn-sm, .rlt-pick, .rlt-perk, .rlt-cat summary { min-height: 44px; }
  .rlt-x { width: 44px; height: 44px; }
  .rlt-field select, .rlt-adm select, .theme-hawkins #stn-roleta .rlt-field select, .theme-hawkins .rlt-dlg .rlt-field select { min-height: 44px; font-size: 16px; }
  .rlt-pick input, .rlt-perk input, .rlt-hb-gratis input { width: 20px; height: 20px; }
  .rlt-hb-gratis { min-height: 44px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .rlt-dlg { max-height: calc(100vh - 8px); max-height: calc(100dvh - 8px); }
  .rlt-dlg-in { gap: 6px; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .rlt-dlg-s { display: none; }
  .rlt-wall { padding: 8px 4px 6px; }
  .rlt-l { width: clamp(24px, 5vw, 44px); padding-top: 20px; }
  .rlt-l b { font-size: 18px; }
  .rlt-acts { flex-direction: row; flex-wrap: wrap; }
  .rlt-acts .rlt-btn { width: auto; flex: 1 1 200px; }
}

/* ==========================================================
   CONTA DE TESTE DOS ADMINS (.tst-, teste.js)
   ========================================================== */
@media (max-width: 760px) {
  .tst-barra { padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left)); }
  .tst-det { padding: 8px 10px 10px; }
  .tst-ctrl { flex-direction: column; align-items: stretch; }
  .tst-campo select { max-width: none; width: 100%; }
  .tst-btn { width: 100%; }
}
@media (pointer: coarse) {
  .tst-btn, .tst-campo select, .tst-det summary { min-height: 44px; }
  .tst-campo select { font-size: 16px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .tst-campo select { min-width: 170px; }
}

/* ==========================================================
   CONTADOR DE ROLLS (.rrl-, rerolls.js) — no celular fica só o selinho com o número no canto;
   tocar abre os detalhes por cima da página (rolam por dentro), com a chave e os botões grandes
   ========================================================== */
@media (max-width: 760px) {
  .rrl { left: max(12px, calc(env(safe-area-inset-left) + 8px)); bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px)); width: 220px; max-width: calc(100vw - 24px); }
  .rrl-panel { position: fixed; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(68px + env(safe-area-inset-bottom)); width: auto; max-height: calc(100vh - 140px - env(safe-area-inset-bottom)); max-height: calc(100dvh - 140px - env(safe-area-inset-bottom)); }
  .rrl-key-code code { font-size: 26px; }
}
@media (max-width: 360px) {
  .rrl-src { grid-template-columns: 22px minmax(0, 1fr); }
  .rrl-src .rrl-btn { grid-column: 1 / -1; width: 100%; }
}
@media (pointer: coarse) {
  .rrl-cta, .rrl-key-mini, .rrl-btn, .rrl-link { min-height: 44px; }
  .rrl-x { width: 44px; height: 44px; }
  .rrl-icon { position: relative; }
  .rrl-icon::after { content: ""; position: absolute; inset: -11px -9px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .rrl-panel { max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); bottom: calc(60px + env(safe-area-inset-bottom)); }
}

/* ==========================================================
   AUTOMATIZADOR DE 1d20 (.a20-, auto1d20.js) — atributos em 2 colunas, comando grande e o Copiar na largura toda
   ========================================================== */
@media (max-width: 760px) {
  .a20-attrs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a20-cmd { padding: 10px 12px; }
  .a20-copy { flex: 1 1 100%; }
  .a20-conta li { font-size: 12.5px; }
  /* a vantagem/desvantagem do mestre: os 2 jeitos um embaixo do outro; os 10 números em 2 fileiras de 5 */
  .a20-aj-m { flex: 1 1 100%; text-align: left; }
  .a20-aj-n { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .a20-attr { padding: 7px 8px; }
  .a20-code { font-size: 26px; }
}
@media (pointer: coarse) {
  .a20-attr { min-height: 56px; }
  .a20-link, .a20-det summary { min-height: 44px; }
  .a20-aj-m, .a20-aj-b { min-height: 44px; }
}

/* ==========================================================
   VALIDAÇÃO DE PERKS E ITENS (.vld-, validacao.js) — abas em 1 coluna, campo da chave de 16 px+, cartões em 1 coluna
   ========================================================== */
@media (max-width: 760px) {
  .vld-tabs { display: grid; grid-template-columns: minmax(0, 1fr); }
  .vld-tab { min-width: 0; text-align: left; overflow-wrap: anywhere; }
  .vld-row .gloss-btn { flex: 1 1 100%; }
  .vld-donos, .vld-grps { grid-template-columns: minmax(0, 1fr); }
  .vld-sec { padding: 12px; }
  .vld-acts .gloss-btn { flex: 1 1 140px; }
  .vld-bar { align-items: stretch; }
  .vld-bar-acts .gloss-btn { flex: 1 1 120px; }
  .vld-lido { white-space: normal; }
}
@media (pointer: coarse) {
  .vld-tab, .vld-mini, .vld-acts .gloss-btn, .vld-row .gloss-btn, .vld-bar-acts .gloss-btn { min-height: 44px; }
  .vld-in { font-size: 22px; }
}

/* ==========================================================
   COMENTÁRIOS EM ÁRVORE DO THEFACEBOOK (.hb-cresp, .hb-cver, .hb-rform; rede.js → desenharCmts)
   recuo menor para sobrar espaço ao texto; "Ver respostas" e "Responder" do tamanho do dedo
   ========================================================== */
@media (max-width: 760px) {
  .hb-cresp { margin-left: 16px; padding-left: 8px; }
  .hb .hb-cresp .hb-cmt .hb-av { width: 26px; height: 26px; font-size: 10px; }
  .hb .hb-cver { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 0; font-size: 13px; }
  .hb-cpara { font-size: 12px; white-space: normal; }
  .hb-cfant { width: 32px; }
  .hb-cresp .hb-cfant { width: 26px; }
}
@media (max-width: 360px) {
  .hb-cresp { margin-left: 8px; padding-left: 6px; }
}
@media (pointer: coarse) {
  /* "Responder" e "excluir" ficam na linha da hora: área de toque de 44 px sem empurrar o texto */
  .hb .hb-cmt .hb-meta .hb-lk { display: inline-block; padding: 15px 8px; margin: -15px -8px; }
}
/* JORNAL — LEITORES POR CONTA */
@media (max-width: 760px) {
  #jornal .jn-read-count { min-height: 44px; min-width: 44px; white-space: normal; }
  #jornal .jn-read-result { min-width: 0; overflow-wrap: anywhere; }
  #jornal .jn-read-hint, #jornal .jn-read-error { font-size: 16px; }
}

/* ==========================================================
   LOJA DA ROLETA (.rlt-shop, .nq-rf; roleta.js) — cartão em 1 coluna,
   reforços da dark web empilhados, botões e seletor com toque de 44 px
   ========================================================== */
@media (max-width: 760px) {
  .rlt-shop-g { grid-template-columns: minmax(0, 1fr); }
  .rlt-shop-i .rlt-btn { justify-self: stretch; }
  .nq-rf { grid-template-columns: auto minmax(0, 1fr); }
  .nq-rf-price { grid-column: 2; text-align: left; }
  .nq-rf .nq-btn, .nq-rf .nq-owned { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
  /* comprar + girar / só o reforço: lado a lado, cada um com metade da largura (2026-10-11) */
  .nq-rf-acts { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nq-rf-acts .nq-btn { grid-column: auto; white-space: normal; }
  .nq-rf-pronto .nq-btn { flex: 1 1 100%; }
}
@media (max-width: 360px) {
  .nq-rf-acts { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) {
  .rlt-shop-i .rlt-btn { min-height: 44px; }
  .tor-view .nq-rf .nq-btn, .tor-view .nq-rf-pronto .nq-btn { min-height: 44px; }
  .nq-ima select { min-height: 44px; font-size: 16px; }
}

/* ==========================================================
   DÍVIDA E POLÍCIA (.dvd-, .pol-; divida.js) — a barra quebra em linhas e o botão ocupa a largura,
   a intimação cabe na tela e rola por dentro
   ========================================================== */
@media (max-width: 760px) {
  .dvd-barra { padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); font-size: 13px; }
  .dvd-acts { flex: 1 1 100%; }
  .dvd-btn { flex: 1 1 100%; }
  .pol-cena { height: 140px; }
  .pol-cartao { width: 210px; }
  .pol-papel { padding: 16px 14px 18px; font-size: 14px; }
  .pol-cab h2 { font-size: 22px; }
}
@media (pointer: coarse) {
  .dvd-btn, .pol-ok { min-height: 44px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .pol-cena { height: 110px; }
}
/* dívida: carta de cobrança, recibo de penhora e prévia (.dvd-, 2026-10-06) */
@media (max-width: 760px) {
  .dvd-recibo-l { padding: 26px 12px 10px; }
  .dvd-carimbo { right: 8px; top: -12px; margin-top: 0; font-size: 13px; background: #f4ecd8; }
  .dvd-papel-acts .pol-ok { flex: 1 1 100%; }
  .dvd-carta-l { padding-left: 22px; }
}

/* PALACE ARCADE — gabinete e controles desenhados para o telefone (.ar-). */
@media (max-width:760px) {
  .ar-app { padding:20px 0 max(28px,env(safe-area-inset-bottom)); }
  .ar-head { gap:12px; align-items:start; margin-bottom:18px; padding-bottom:14px; }
  .ar-head h2 { font-size:22px; letter-spacing:0; }
  .ar-head p { font-size:12px; max-width:220px; }
  .ar-wallet { font-size:11px; white-space:normal; flex:0 0 103px; }
  .ar-wallet b { font-size:17px; overflow-wrap:anywhere; }
  .ar-room { grid-template-columns:minmax(0,1fr); gap:20px; max-width:480px; }
  .ar-machine { border-width:5px; border-bottom-width:8px; padding:0 10px 12px; box-shadow:4px 5px 0 #070708; }
  .ar-title { font-size:39px; }
  .ar-marquee { padding:12px 4px 8px; margin-bottom:10px; }
  .ar-screen { border-width:6px; border-radius:8px; scroll-margin-top:58px; }
  .ar-controls { padding:8px 8px 10px; }
  .ar-deck { padding-top:10px; }
  .ar-machinebar { font-size:10px; margin-bottom:8px; }
  .ar-machinebar button { font-size:12px; padding:6px 8px; }
  .ar-overlay { padding:10px 6px; font-size:12px; }
  .ar-overlay strong { font-size:17px; }
  .ar-overlay small { font-size:10px; }
  .ar-keyhint { font-size:11px; }
  .ar-namebox { padding:12px; }
  .ar-initials { gap:1px; }
  .ar-letter { min-width:44px; }
  .ar-letter input { font-size:28px; }
  .ar-starts button { min-height:48px; }
  .ar-price { font-size:13px; }
  .ar-guide td, .ar-guide th { overflow-wrap:anywhere; }
  .ar-games { margin-top:15px; }
  .ar-machines { gap:8px; margin-bottom:18px; }
  .ar-machines button { min-height:76px; gap:6px; padding:8px; justify-content:start; }
  .ar-machines b { font-size:17px; }
  .ar-machines small { font-size:11px; line-height:1.3; }
  .ar-machines img { width:36px; height:36px; flex-shrink:0; }
  .ar-fred-badge { min-width:64px; }
  .ar-fred-badge img { width:58px; height:58px; }
  .ar-playing .ar-machines { display:none; }
  .ar-playing .ar-head, .ar-playing .ar-marquee, .ar-playing .ar-games { display:none; }
  .ar-playing .ar-machine { padding-top:8px; }
  .ar-playing .ar-screen { max-width:min(100%,calc((100svh - var(--mb-nav-h,58px) - 242px - env(safe-area-inset-bottom)) * .77551 + 12px)); }
  .ar-playing .ar-keyhint { display:none; }
  body[data-page="arcade"] #radio-dock { display:none; }
}
@media (max-width:480px) {
  .ar-head { flex-wrap:wrap; }
  .ar-wallet { display:flex; align-items:center; justify-content:space-between; gap:8px; text-align:left; flex-basis:100%; }
  .ar-wallet b { display:inline; font-size:17px; }
  .ar-head p { max-width:none; }
  .ar-controls { gap:10px; padding-inline:2px; }
  .ar-action .ar-pump { width:74px; height:74px; }
}
@media (max-width:360px) {
  .ar-app { padding-top:14px; }
  .ar-head h2 { font-size:21px; }
  .ar-machine { padding-inline:6px; border-width:4px; }
  .ar-title { font-size:35px; }
  .ar-pad { gap:2px; }
  .ar-controls { gap:6px; }
  .ar-action .ar-pump { width:64px; height:64px; font-size:11px; }
  .ar-action small { font-size:9px; }
  .ar-overlay { font-size:11px; left:4%; right:4%; }
  .ar-machines button { flex-wrap:wrap; }
  .ar-machines b { font-size:16px; }
  .ar-machines small { font-size:10px; }
  .ar-fred-badge img { width:48px; height:48px; }
}
@media (pointer:coarse) {
  .ar-app button { min-width:44px; min-height:44px; }
  .ar-letter input { font-size:28px!important; }
  .ar-canvas { touch-action:none; }
  .ar-wrap { padding-left:max(var(--mb-gutter,12px),env(safe-area-inset-left)); padding-right:max(var(--mb-gutter,12px),env(safe-area-inset-right)); }
}
@media (hover:none) {
  .ar-app button:hover { background:#29292a; }
  .ar-app .ar-insert:hover { background:#c73d2b; }
  .ar-app .ar-pump:hover { background:#c9372b; }
}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse), (orientation:landscape) and (max-height:500px) and (max-width:760px) {
  .ar-room { grid-template-columns:minmax(0,1fr) minmax(230px,1fr); max-width:760px; gap:16px; }
  .ar-screen { max-width:220px; }
  .ar-app { padding-top:12px; }
  .ar-controls { justify-content:space-around; }
  .ar-marquee { padding:8px; }
  .ar-title { font-size:28px; }
  .ar-keyhint { display:none; }
  .ar-initials { grid-template-columns:repeat(3,minmax(44px,1fr)); gap:10px 6px; }
  .ar-playing .ar-namebox { opacity:1; }
  .ar-playing .ar-head, .ar-playing .ar-marquee, .ar-playing .ar-games, .ar-playing .ar-keyhint { display:none; }
  body[data-page="arcade"] #radio-dock { display:none; }
  .ar-playing .ar-machine { display:grid; grid-template-columns:minmax(0,1fr) 144px; gap:8px; padding:8px; }
  .ar-playing .ar-screen { width:100%; max-width:220px; align-self:start; }
  .ar-playing .ar-deck { padding-top:0; }
  .ar-playing .ar-machinebar { flex-direction:row; gap:4px; margin-bottom:8px; text-align:center; }
  .ar-playing .ar-machinebar span { display:none; }
  .ar-playing .ar-machinebar button { font-size:10px; padding:4px; }
  .ar-playing .ar-controls { flex-direction:column; gap:8px; padding:0; border:0; }
  .ar-playing .ar-pad { grid-template:repeat(3,44px)/repeat(3,44px); }
  .ar-playing .ar-pump { width:60px; height:60px; }
  .ar-playing .ar-action small { display:none; }
  .ar-playing .ar-fred-badge { display:none; }
}

/* ==========================================================
   X1 NO PALACE (.ar-x1-, arcade.js/arcade.css): o painel de desafios do tamanho do dedo e o placar
   "VOCÊ × RIVAL" que cabe em cima da tela pequena do jogo. Só consultas de celular.
   ========================================================== */
@media (max-width: 760px) {
  .ar-x1 { margin-top:16px; padding:12px; }
  .ar-x1 h3 { font-size:17px; }
  .ar-x1-head p, .ar-x1-novo > p, .ar-x1-lista p { font-size:14px; }
  .ar-x1-campo select { min-height:48px; font-size:16px; }
  .ar-app .ar-x1-valores button { flex:1 1 calc(33% - 6px); min-height:44px; }
  .ar-x1-acoes { flex-direction:column; }
  .ar-app .ar-x1-acoes button { width:100%; min-height:48px; }
  .ar-x1bar { gap:6px; padding:3px 4px; font-size:10px; letter-spacing:0; }
  .ar-x1bar b { font-size:12px; }
  .ar-x1-mural ol { font-size:12px; }
}
@media (max-width: 360px) {
  .ar-x1bar b { font-size:11px; }
  .ar-x1-mural li { gap:4px; }
}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse) {
  .ar-x1bar { font-size:9px; }
  .ar-x1bar b { font-size:10px; }
}

/* ==========================================================
   ABERTURA 2 (.ab2-; abertura2.css) — legenda da Emma, créditos, M-I-S-S-I-N-G e subtítulo
   cabem no celular em pé e deitado, longe do entalhe e dos botões "som" e "pular"
   ========================================================== */
@media (max-width: 760px) {
  .ab2-fita { width: calc(100vw - 32px); bottom: calc(76px + env(safe-area-inset-bottom, 0px)); padding: 8px 12px 10px; }
  .ab2-fita-rotulo { font-size: 13px; }
  .ab2-fita-texto { font-size: 21px; }
  .ab2-credito { width: calc(100vw - 32px); top: calc(18px + env(safe-area-inset-top, 0px)); }
  .ab2-cred-jogador { font-size: 14px; letter-spacing: 0.22em; }
  .ab2-cred-personagem { font-size: 27px; letter-spacing: 0.04em; line-height: 1.15; }
  .ab2-missing { font-size: 13vw; gap: 1.2vw; }
  .ab2-sub { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 32px); font-size: 10px; letter-spacing: 0.26em; }
}
@media (max-width: 360px) {
  .ab2-fita-texto { font-size: 19px; }
  .ab2-cred-personagem { font-size: 23px; }
  .ab2-cred-extra { font-size: 11px; letter-spacing: 0.22em; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .ab2-fita { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: min(560px, calc(100vw - 220px)); }
  .ab2-fita-texto { font-size: 18px; }
  .ab2-credito { top: calc(8px + env(safe-area-inset-top, 0px)); }
  .ab2-cred-personagem { font-size: 22px; }
  .ab2-sub { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================
   ABERTURA 4 (.ab4-; abertura4.css) — a fita da Emma no alto, o crédito do casal acima dos
   botões "som" e "pular" (canto de baixo), faixas de cinema finas com o celular em pé
   ========================================================== */
@media (max-width: 760px) {
  .ab4-fita { left: max(16px, env(safe-area-inset-left, 0px)); max-width: calc(100vw - 32px); top: calc(14px + env(safe-area-inset-top, 0px)); padding: 6px 10px 8px; }
  .ab4-fita-rotulo { font-size: 12px; }
  .ab4-fita-texto { font-size: 20px; }
  .ab4-credito { width: calc(100vw - 32px); bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .ab4-cred-nome { font-size: 24px; letter-spacing: 0.04em; line-height: 1.15; }
  .ab4-cred-as { font-size: 12px; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .ab4-faixa { max-height: 7vh; }
}
@media (max-width: 360px) {
  .ab4-fita-texto { font-size: 18px; }
  .ab4-cred-nome { font-size: 21px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .ab4-fita { top: calc(8px + env(safe-area-inset-top, 0px)); max-width: min(520px, calc(100vw - 220px)); }
  .ab4-fita-texto { font-size: 18px; }
  .ab4-credito { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: min(560px, calc(100vw - 220px)); }
  .ab4-cred-nome { font-size: 22px; }
}

/* =========================================================
   SERASA — o balcão de proteção ao crédito na Melvald's (serasa.js, serasa.css, prefixo .srs-)
   Em pé: mural e "Meu nome" numa coluna, papel com margem menor (furinhos mais perto da borda),
   botões e passos do tamanho do dedo, campos de 16 px, linhas do recibo e da recompra empilhadas
   quando apertam. Deitado: o mesmo, mais baixo. Só consultas de celular/toque: o desktop não muda.
   ========================================================= */
@media (max-width: 760px) {
  .srs { margin-top: 22px; }
  .srs-desk { padding: 0 10px 16px; }
  .srs-head { margin: 0 -10px 14px; padding: 16px 10px 12px; }
  .srs-kicker, .srs-sub { font-size: 10px; letter-spacing: 0.12em; }
  .srs-name { font-size: clamp(30px, 10.5vw, 44px); }
  .srs-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .srs-paper { padding: 12px 22px 14px; background-position: left 4px top 8px, right 4px top 8px, 0 0; }
  .srs-paper-head h3 { font-size: 18px; }
  .srs-campo { padding: 6px 8px 8px; }
  .srs-btn { width: 100%; }
  .srs-confirma .srs-btn { margin: 0 0 8px; }
  .srs-item { flex-wrap: wrap; }
  .srs-recompra-l li { flex-direction: column; align-items: stretch; }
  .srs-dono-campos { flex-direction: column; align-items: stretch; }
  .srs-dono input { width: 100%; min-height: 44px; font-size: 16px; }
}
@media (max-width: 360px) {
  .srs-paper { padding: 10px 18px 12px; }
  .srs-linha { padding-left: 22px; font-size: 13px; }
  .srs-recibo { padding: 10px; }
  .srs-recibo-l li, .srs-recibo-tot div { font-size: 13px; }
  .srs-carimbo { font-size: 17px; letter-spacing: 0.08em; }
}
@media (pointer: coarse) {
  /* alvos de toque de 44 px (também no celular deitado, que passa de 760 px) */
  .srs-btn, .srs-recompra-l .srs-btn, .srs-link { min-height: 44px; }
  .srs-step { width: 44px; height: 44px; }
  .srs-check { min-height: 44px; align-items: center; }
  .srs-check input { width: 22px; height: 22px; margin: 0; }
  .srs-regras summary, .srs-hist summary { min-height: 44px; display: flex; align-items: center; }
  .srs-dono input { min-height: 44px; font-size: 16px; }
  .srs-step:hover:not(:disabled) { background: var(--srs-paper); }
  .srs-btn-alt:hover:not(:disabled) { background: transparent; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .srs-head { padding: 10px 10px 8px; }
  .srs-name { font-size: 32px; }
}

/* =========================================================
   MURAL DO INÍCIO (.mur-, mural.js / mural.css): a parede da delegacia no celular.
   As fotos ficam pequenas: o 1º toque amplia a mais perto do dedo (alvo de pelo menos
   30 px em volta) e o 2º toque queima. Nada aqui muda o desktop.
   ========================================================= */
@media (max-width: 760px) {
  #inicio { --mur-w: calc(100vw - 2 * max(14px, env(safe-area-inset-left), env(safe-area-inset-right))); }
  .theme-hawkins #inicio .hero.mur-hero,
  .theme-upside #inicio .hero.mur-hero {
    padding: calc(var(--mur-w) * 0.16 + 8px) max(14px, env(safe-area-inset-right)) 30px max(14px, env(safe-area-inset-left));
  }
  #inicio .mur-hero .hero-tag { margin: 16px auto 16px; }
  .theme-upside #inicio .hero.mur-hero { border-radius: 10px; }
}
@media (max-width: 360px) {
  #inicio .mur-hero .hero-tag { font-size: 14px; }
}
@media (hover: none) {
  /* sem mouse, a foto só amplia no toque: nada de "passar por cima" */
  .mur-un { cursor: default; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* celular deitado: o mural inteiro cabe na altura da tela (os botões vêm logo abaixo) */
  #inicio { --mur-w: min(calc(92vw - env(safe-area-inset-left) - env(safe-area-inset-right)), calc((100svh - 40px) * 1.7)); }
  .theme-hawkins #inicio .hero.mur-hero,
  .theme-upside #inicio .hero.mur-hero { min-height: 0; padding-top: calc(var(--mur-w) * 0.16 + 6px); padding-bottom: 24px; }
}

/* ==========================================================
   BOT DO DISCORD (.dsc-, discord.js) — a linha "Discord" da ficha com o botão largo; a página do admin
   com abas em 1 coluna, campos de 16 px, botões de 44 px e a tabela de rolagens virando cartões
   ========================================================== */
@media (max-width: 760px) {
  .dsc-entrar { flex: 1 1 100%; }
  .dsc-chamada { margin-left: 12px; margin-right: 12px; }
  .dsc-chamada-acoes, .dsc-chamada-acoes .gloss-btn { flex: 1 1 100%; }
  .dsc-tabs { display: grid; grid-template-columns: minmax(0, 1fr); }
  .dsc-tab { min-width: 0; text-align: left; overflow-wrap: anywhere; }
  .dsc-atualizar { margin-left: 0; }
  .dsc-grupo { flex-direction: column; }
  .dsc-campo { max-width: none; }
  .dsc-campo select, .dsc-campo input { font-size: 16px; }
  .dsc-acoes .gloss-btn, .dsc-filtro .gloss-btn { flex: 1 1 100%; }
  .dsc-filtro { align-items: stretch; flex-direction: column; }
  .dsc-fichas li .gloss-btn { flex: 1 1 100%; }
  .dsc-tabela-box { overflow: visible; border: 0; }
  .dsc-tabela thead { display: none; }
  .dsc-tabela, .dsc-tabela tbody, .dsc-tabela tr, .dsc-tabela td { display: block; width: auto; }
  .dsc-tabela tr { margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
  .dsc-tabela td { padding: 3px 0; border: 0; }
  .dsc-tabela td::before { content: attr(data-l) ": "; color: var(--muted); font-weight: 700; }
  .dsc-tabela code { white-space: normal; overflow-wrap: anywhere; }
}
@media (pointer: coarse) {
  .dsc-chamada-acoes .gloss-btn { min-height: 44px; }
  .dsc-tab, .dsc-entrar, .dsc-acoes .gloss-btn, .dsc-filtro .gloss-btn, .dsc-fichas .gloss-btn, .dsc-atualizar, .dsc-campo select, .dsc-campo input { min-height: 44px; }
  .dsc-canal, .dsc-opcao { min-height: 44px; align-items: center; }
  .dsc-canal input, .dsc-opcao input { width: 20px; height: 20px; margin-top: 0; }
  .dsc-falta summary { min-height: 44px; display: flex; align-items: center; }
}

/* ==========================================================
   FICHA DE BOLSO (.bls-, bolso/app.js: a Atividade do HAWKINS·PAGE dentro do Discord) — cartas em 2 colunas
   no celular em pé, 4 deitado; alvos de 44 px; nomes longos quebram
   ========================================================== */
@media (max-width: 760px) {
  .bls-cartas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bls-modos .bls-modo { flex: 1 1 auto; }
  .bls-lista > li .bls-btn { flex: 1 1 100%; }
  /* os atributos extraordinários (2026-10-09): 2 por linha em pé */
  .bls-extra-l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bls-extra { padding: 10px; }
  /* o poder ativo (2026-10-10): o "Encerrar" na largura toda, embaixo da hora */
  .bls-ativo .bls-btn { flex: 1 1 100%; }
  /* a vantagem/desvantagem do mestre (2026-10-10): os 10 números em 2 fileiras de 5 (− em cima, + embaixo) */
  .bls-aj-n { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
}
@media (max-width: 360px) {
  .bls-app { padding-left: calc(10px + var(--bls-seg-l)); padding-right: calc(10px + var(--bls-seg-r)); }
  .bls-abas { gap: 4px; }
  .bls-aba { font-size: 13px; padding: 6px 2px; }
  .bls-valor { font-size: 32px; }
  .bls-pilula { font-size: 13px; }
  .bls-res-total { font-size: 40px; }
}
@media (pointer: coarse) {
  .bls-aba, .bls-modo, .bls-btn, .bls-btn-sm { min-height: 44px; }
  .bls-carta { min-height: 132px; }
  .bls-aj-b { min-height: 44px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .bls-extra-l { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bls-cartas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bls-carta { min-height: 0; padding: 6px 4px 8px; }
  .bls-valor { font-size: 28px; }
  .bls-nome { font-size: 24px; }
  .bls-aj-n { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
/* GALAGA NO PALACE (.ar-ga-, .ar-galaga): duas setas e disparo ao alcance dos polegares. */
@media (max-width:760px) {
  .ar-ga-selector { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ar-ga-selector [data-machine='galaga'] { grid-column:1 / -1; min-height:60px; }
  .ar-ga-selector [data-machine='galaga'] span { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; }
  .ar-ga-selector [data-machine='galaga'] small { margin:0; }
  .ar-ga-pad { grid-template:56px / repeat(2,56px); gap:10px; }
  .ar-galaga .ar-controls { padding:10px 2px 12px; }
  .ar-galaga.ar-playing .ar-screen { max-width:min(100%,calc((100svh - var(--mb-nav-h,58px) - 192px - env(safe-area-inset-bottom)) * .77551 + 12px)); }
  .ar-galaga .ar-action small { max-width:90px; line-height:1.4; }
}
@media (max-width:360px) {
  .ar-ga-pad { grid-template:48px / repeat(2,48px); gap:6px; }
  .ar-galaga .ar-marquee small { font-size:9px; letter-spacing:1px; overflow-wrap:anywhere; }
  .ar-ga-selector [data-machine='galaga'] { flex-wrap:nowrap; }
}
@media (pointer:coarse) {
  .ar-ga-pad button, .ar-ga-fire { touch-action:none; }
}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse) {
  .ar-galaga.ar-playing .ar-ga-pad { grid-template:48px / repeat(2,48px); gap:6px; }
  .ar-galaga.ar-playing .ar-screen { max-width:min(220px,calc((100svh - var(--mb-nav-h,58px) - 42px - env(safe-area-inset-bottom)) * .77551)); }
  .ar-galaga.ar-playing .ar-controls { padding:0; }
}
/* =========================================================
   ACERTO DO BLK (.ac-; acerto.js, acerto.css): o cartão "Seu acerto" numa coluna, botões de 44 px,
   valores longos quebram; no painel do admin a lista de pessoas empilha o nome e a diferença.
   ========================================================= */
@media (max-width: 760px) {
  .ac-card { padding: 14px 12px 12px; font-size: 15px; }
  .ac-saldos { flex-direction: column; gap: 6px; }
  .ac-saldos b { overflow-wrap: anywhere; }
  .ac-mant li { flex-direction: column; align-items: stretch; }
  #acerto-card .ac-acoes .gloss-btn, #acerto-card .ac-mant .gloss-btn, #acerto-admin .ac-botoes .gloss-btn { min-height: 44px; width: 100%; }
  .ac-adm .ac-botoes { flex-direction: column; }
  .ac-dif { margin-left: 0; width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .ac-pessoa summary { min-height: 44px; }
}
@media (max-width: 360px) {
  .ac-head b { font-size: 15px; }
  .ac-card .ac-por, .ac-adm .ac-por { padding-left: 16px; }
}
/* =========================================================
   BESTIÁRIO E TESTES DE MORTE (.mtb-, .npc-, .mrt-; bestiario.js, morte.js, bestiario.css): as abas de
   Moradores lado a lado (3 para admins; 2 para os jogadores, que não veem a de morte) (o nome curto na tela, o longo para o leitor de tela), o editor do inimigo numa coluna
   com campos de 16 px, botões de 44 px e as cartas de quem caiu uma embaixo da outra.
   ========================================================= */
@media (max-width: 760px) {
  .mtb { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
  .mtb-tab { justify-content: center; min-width: 0; min-height: 44px; padding: 6px 4px; font-size: 13px; letter-spacing: 0; text-align: center; text-transform: none; }
  .theme-hawkins #moradores .mtb-tab { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
  .mtb-longo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mtb-curto { display: inline; }
  .npc-head { align-items: stretch; }
  .npc-novo { flex: 1 1 100%; min-height: 44px; }
  .npc-sec { grid-template-columns: 1fr; padding: 10px 10px 12px; }
  .npc-pod { grid-template-columns: 1fr; } /* os poderes do inimigo, um embaixo do outro */
  .npc-ats { grid-template-columns: 1fr; }
  .npc-form .npc-at-in { min-height: 44px; font-size: 16px; }
  .npc-form :is(input[type="text"], input[type="number"], input[type="url"], select, textarea) { min-height: 44px; font-size: 16px; }
  .npc-linha .gloss-btn, .npc-dialog .rec-actions .gloss-btn { flex: 1 1 100%; min-height: 44px; }
  .npc-apagar { margin-left: 0; }
  .npc-cmd code { white-space: normal; }
  .npc-editor > .card-view-stage { order: 2; } /* no editor, o formulário vem antes da prévia da carta */
  .mrt-cair select { min-height: 44px; font-size: 16px; }
  .mrt-cair-l .gloss-btn { flex: 1 1 100%; min-height: 44px; }
  .mrt-grade { grid-template-columns: 1fr; }
  .mrt-acoes .gloss-btn { flex: 1 1 calc(50% - 6px); min-height: 44px; }
  .mrt-rolar { flex-basis: 100%; }
}
@media (max-width: 480px) {
  /* atributos do editor: a sigla basta (o nome inteiro continua no leitor de tela e na dica da sigla) */
  .npc-at-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .npc-at { grid-template-columns: minmax(0, 1fr) auto 58px auto; grid-template-areas: "a b c d" "n b c d"; gap: 0 5px; padding: 5px 6px; }
  .npc-at > abbr { grid-area: a; align-self: end; }
  .npc-at > .npc-at-nome { grid-area: n; align-self: start; }
  .npc-at > [data-npc-passo="-1"] { grid-area: b; }
  .npc-at > .npc-at-in { grid-area: c; }
  .npc-at > [data-npc-passo="1"] { grid-area: d; }
}
@media (max-width: 360px) {
  .mtb-tab, .theme-hawkins #moradores .mtb-tab { padding: 6px 3px; font-size: 12px; }
  .mrt-card-head { grid-template-columns: 36px minmax(0, 1fr); }
  .mrt-foto { width: 36px; height: 36px; }
  .mrt-estado { grid-column: 1 / -1; justify-self: start; }
  .mrt-fila-r { width: 64px; }
  .mrt-acoes .gloss-btn { flex-basis: 100%; }
}
@media (pointer: coarse) {
  .mtb-tab { min-height: 44px; }
  .npc-passo { width: 44px; height: 44px; }
  .npc-chip-x { width: 44px; height: 44px; margin: -8px -4px -8px 0; }
  .npc-check { min-height: 44px; align-items: center; }
  .mrt-regras summary { min-height: 44px; }
  .mrt-acoes .gloss-btn { min-height: 44px; }
}
/* =========================================================
   PREGÃO DA BOLSA (.pg-; pregao.js, pregao.css): o placar empilha (preço em cima, o dia embaixo), os botões
   rápidos viram duas colunas de 44 px, o campo do valor fica em 16 px (sem zoom no iPhone) e as 3 linhas quebram.
   ========================================================= */
@media (max-width: 760px) {
  .pg-topo { grid-template-columns: 1fr; padding: 12px; }
  .pg-faixa span { font-size: 11px; }
  .pg-rapido { display: grid; grid-template-columns: 1fr 1fr; }
  .pg-rapido button, .pg-lado button { min-height: 44px; }
  .pg-campo input { min-height: 44px; font-size: 16px; }
  .pg-3l li { grid-template-columns: 1fr; }
  .pg-3l b { text-align: left; overflow-wrap: anywhere; }
  #pregao-admin .gloss-btn { min-height: 44px; width: 100%; }
  .pg-ordem [data-pg-ir] { min-height: 44px; }
}
@media (max-width: 360px) {
  .pg-p { font-size: 28px; }
  .pg-rapido { grid-template-columns: 1fr; }
}

/* =========================================================
   ↺ ABERTURA — seletor da abertura (prefixo .rva-) no celular:
   vira uma folha embaixo da tela, acima da área segura.
   ========================================================= */
@media (max-width: 760px) {
  .rva-menu {
    left: 12px !important; right: 12px !important; top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: none; min-width: 0; padding: 8px;
  }
  .rva-op { min-height: 52px; }
  .rva-nome { font-size: 16px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* deitado: com 3 aberturas (4, 3, 2) a folha encosta embaixo e rola por dentro se a tela for baixa */
  .rva-menu {
    left: auto !important; right: calc(12px + env(safe-area-inset-right, 0px)) !important; width: min(340px, 60vw);
    top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain;
  }
  .rva-op { min-height: 44px; padding: 5px 12px; }
}

/* ===== Admin: aba "Itens" do editor da ficha em Moradores (adminitens.js, .aitm-) ===== */
@media (max-width: 760px) {
  .aitm-tab { min-height: 44px; font-size: 14px; }
  .aitm-btn { min-height: 44px; min-width: 44px; padding: 8px 12px; font-size: 13px; }
  .aitm-qty select, .aitm .bsc-in { min-height: 44px; font-size: 16px; }
  .aitm-txt b { font-size: 14px; }
  .aitm-txt small { font-size: 12px; }
  .aitm-all { max-height: 60vh; max-height: 60dvh; }
}
@media (max-width: 480px) {
  .aitm-all .aitm-acts { flex: 1 1 100%; }
  .aitm-all .aitm-acts .aitm-btn { flex: 1 1 0; }
}
@media (max-width: 360px) {
  .aitm-slot { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .aitm-all { max-height: 70vh; max-height: 70dvh; }
  .aitm-tab, .aitm-btn { min-height: 44px; min-width: 44px; }
  .aitm-qty select, .aitm .bsc-in { min-height: 44px; font-size: 16px; }
}

/* =========================================================
   CICATRIZ (2026-10-11) — cicatriz.css (.ccz-), baixado só por quem tem a Cicatriz
   Celular em pé: uma coluna (o prontuário com a foto ao lado dos dados, as 5 habilidades em 2 colunas, o texto
   e o "quando usar" empilhados), a tabela das contas sem o nome comprido, diário em uma coluna com letra de
   16 px, painel do admin em uma coluna. Dedo: tudo com 44 px. Deitado: a entrada "Você já viveu isso por tempo
   demais..." cabe na altura.
   ========================================================= */
@media (max-width: 760px) {
  .ccz { margin: 10px 0 18px; }
  .ccz-strip { gap: 4px 12px; padding: 8px 14px; font-size: 10px; letter-spacing: 0.14em; }
  .ccz-strip span:nth-child(2) { display: none; }
  .ccz-strip span + span::before { margin-right: 12px; }
  .ccz-title { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 16px 12px; }
  .ccz-kicker { font-size: 13px; letter-spacing: 0.32em; }
  .ccz-prev { display: inline-block; margin: 4px 0 0; }
  .ccz-h2 { font-size: clamp(52px, 17vw, 76px); }
  .ccz-line { font-size: 16.5px; }
  .ccz-status { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; min-width: 0; max-width: none; padding: 12px 0 0; border-top: 1px solid var(--c-line2); border-left: 0; }
  .ccz-status dd { font-size: 14.5px; }
  .ccz-tools { padding: 0 14px 14px; }
  .ccz-tools .ccz-btn { flex: 1 1 auto; }
  .ccz-body { gap: 18px; padding: 16px 12px 22px; }
  .ccz-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ccz-col { gap: 18px; }
  .ccz-id, .ccz-powers, .ccz-sheet, .ccz-report, .ccz-sigilo { padding: 16px 14px; }
  .ccz-id { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 0 14px; align-items: start; }
  .ccz-ficha-t { grid-column: 1 / -1; }
  .ccz-data { margin: 0; }
  .ccz-data div { padding: 6px 0; }
  .ccz-data dd { font-size: 15px; }
  .ccz-photo figcaption { padding: 3px 7px; font-size: 11px; letter-spacing: 0.2em; }
  .ccz-monitor, .ccz-secret { grid-column: 1 / -1; }
  .ccz-ptabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .ccz-ptab { min-height: 60px; gap: 2px 8px; padding: 8px 10px; }
  .ccz-ptab:last-child { grid-column: 1 / -1; }
  .ccz-pt-n { font-size: 22px; }
  .ccz-pt-name { font-size: 15px; letter-spacing: 0.03em; }
  .ccz-pt-state { font-size: 16px; }
  .ccz-pp-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "cost" "act" "rolls"; gap: 16px; }
  .ccz-pp-in > .ccz-cost, .ccz-pp-in > .ccz-brecha { margin-top: 0; }
  .ccz-pp-text h4 { font-size: 30px; }
  .ccz-pp-text > p { font-size: 15.5px; }
  .ccz-go { font-size: 18px; letter-spacing: 0.12em; }
  .ccz-act.is-on { display: grid; }
  .ccz-stop { justify-self: stretch; }
  .ccz-roll-expr { font-size: 34px; }
  .ccz-table tbody th span { display: none; }
  .ccz-table tbody th abbr { min-width: 0; }
  .ccz-table th, .ccz-table td { padding: 8px 4px; }
  .ccz-table thead th { letter-spacing: 0.1em; }
  .ccz-f { font-size: 14px; }
  .ccz-chip { padding: 3px 8px; font-size: 19px; }
  .ccz-page { padding: 22px 6px 24px; }
  .ccz-page h3 { font-size: 28px; }
  .ccz-page p { font-size: 16px; }
  .ccz-last { font-size: 20px !important; }
  .ccz-form { grid-template-columns: minmax(0, 1fr); }
  .ccz-q textarea { font-size: 16px; }
  .ccz-save { flex: 1 1 100%; }
  .ccz-sigilo ul { grid-template-columns: minmax(0, 1fr); }
  .ccz-adm-list { grid-template-columns: minmax(0, 1fr); }
  .ccz-adm-acts .gloss-btn { flex: 1 1 auto; }
  .ccz-fala { font-size: clamp(34px, 12vw, 64px); }
  .ccz-fala.is-big { font-size: clamp(56px, 22vw, 110px); }
  .ccz-av-mem { top: 34vh; }
  .ccz-av-title { max-width: 11ch; font-size: clamp(36px, 12.5vw, 64px); text-shadow: 3px 3px 0 rgba(168, 35, 26, 0.95), 0 0 34px rgba(236, 74, 53, 0.45); }
  .ccz-fala { text-shadow: 3px 3px 0 rgba(168, 35, 26, 0.9), 0 0 30px rgba(236, 74, 53, 0.5); }
  .ccz-av-warn { letter-spacing: 0.3em; }
}
@media (max-width: 480px) {
  .ccz-id { grid-template-columns: 104px minmax(0, 1fr); }
  .ccz-status dt { letter-spacing: 0.14em; }
  .ccz-cost, .ccz-brecha { font-size: 14.5px; }
  .ccz-roll-expr { font-size: 30px; }
}
@media (max-width: 360px) {
  .ccz-status { grid-template-columns: minmax(0, 1fr); }
  .ccz-id { grid-template-columns: minmax(0, 1fr); }
  .ccz-photo { max-width: 180px; margin-bottom: 12px; }
  .ccz-ptabs { grid-template-columns: minmax(0, 1fr); }
  .ccz-ptab:last-child { grid-column: auto; }
  .ccz-chip { padding: 3px 6px; font-size: 17px; }
  .ccz-av-title { font-size: clamp(32px, 12vw, 44px); }
}
@media (pointer: coarse) {
  .ccz-btn, .ccz-copy, .ccz-chip, .ccz-av-skip { min-height: 44px; }
  .ccz-copy, .ccz-chip { min-width: 44px; }
  .ccz-ptab { min-height: 60px; }
  .ccz-adm-add select { min-height: 44px; font-size: 16px; }
  #admin .ccz-adm .gloss-btn, #admin .ccz-adm .gloss-btn.gloss-small { min-height: 44px; }
  .ccz-adm .link-btn { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .ccz-av-mem { top: 22vh; gap: 6px; }
  .ccz-av-core { gap: 6px; }
  .ccz-av-title { max-width: 26ch; font-size: clamp(26px, 9vh, 42px); text-shadow: 3px 3px 0 rgba(168, 35, 26, 0.95), 0 0 30px rgba(236, 74, 53, 0.45); }
  .ccz-av-sub { font-size: 16px; }
  .ccz-av-warn { margin-top: 2px; }
  .ccz-av-go { min-height: 44px; margin-top: 6px; }
}