/* ═══════════════════════════════════════════════ PERSONALIZAÇÃO (/personalizacao) Tema + tamanho de fonte (acessibilidade) + barra de jogo ═══════════════════════════════════════════════ */ /* ── Escala de fonte (data-font-scale no , SSR pelo layout arena) ── O arena.css é majoritariamente rem (271 tamanhos em rem vs 5 em px) e a base do .arena-body é 0.875rem — o % no root escala o app inteiro de forma consistente. md = 100% (sem atributo). */ html[data-font-scale="sm"] { font-size: 87.5%; } html[data-font-scale="lg"] { font-size: 112.5%; } html[data-font-scale="xl"] { font-size: 125%; } /* ── Opções em pill (tema e fonte) ── */ .pzn-options { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .pzn-option { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.9rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); color: var(--text-secondary); font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .pzn-option:hover { border-color: var(--green-primary); color: var(--text-primary); } .pzn-option.is-current { background: var(--green-wash); border-color: var(--green-primary); color: var(--green-primary); } .pzn-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .pzn-option:focus-visible, .pzn-option:has(input:focus-visible) { outline: 2px solid var(--green-primary); outline-offset: 2px; } /* "Aa" de amostra em tamanho proporcional à escala da opção */ .pzn-option-a { font-weight: 800; line-height: 1; } .pzn-option-scale-sm .pzn-option-a { font-size: 0.7rem; } .pzn-option-scale-md .pzn-option-a { font-size: 0.8rem; } .pzn-option-scale-lg .pzn-option-a { font-size: 0.95rem; } .pzn-option-scale-xl .pzn-option-a { font-size: 1.1rem; } .pzn-back { margin-top: 1rem; }