/* Botões do cabeçalho (Leo, 02/10/2026): placas de ouro e tinta, no mesmo desenho dos cartões da página inicial.
   Moldura fina dourada com filete interno, cantos quase retos, letras em caixa-alta espaçadas, losango que acende ao passar o mouse.
   Moedas e diamantes viram "placas de valor" gravadas; Entrar/conta é a placa dourada principal; Admin leva o violeta.
   Carregado por último (depois de shop.css e online.css), por isso sobrepõe os estilos antigos. */
header .actions { --hg: #e8c98b; --hk: #120d18; gap: 8px; align-items: center; }
header .actions > button {
  --edge: #e8c98b55; --edgeHot: #e8c98bcc; --ink: linear-gradient(180deg, #1d1626f2, #0f0b15f2);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 6px 15px;
  border: 1px solid var(--edge) !important; border-radius: 4px; background: var(--ink) !important; color: #f1e6cc;
  font: 700 14.5px/1 var(--e-display, 'Grenze Gotisch', Georgia, serif); letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  box-shadow: 0 6px 16px -8px #000, inset 0 1px 0 #ffffff12;
  transition: border-color .2s, color .2s, transform .18s cubic-bezier(.22,1,.36,1), box-shadow .2s, background .2s;
}
/* filete interno, como a moldura dos cartões */
header .actions > button::before { content: ''; position: absolute; inset: 3px; z-index: -1; border: 1px solid #e8c98b26; border-radius: 2px; pointer-events: none; transition: border-color .2s; }
/* losangos nos cantos que acendem no mouse */
header .actions > button::after { content: ''; position: absolute; left: -4px; top: 50%; width: 7px; height: 7px; translate: 0 -50%; rotate: 45deg; background: var(--hg); box-shadow: 0 0 10px var(--hg); opacity: 0; scale: .3; transition: opacity .2s, scale .25s cubic-bezier(.34,1.56,.64,1); pointer-events: none; }
header .actions > button:hover, header .actions > button:focus-visible { border-color: var(--edgeHot) !important; color: #fff6e0; transform: translateY(-1px); background: linear-gradient(180deg, #2a1f1a, #130d12) !important; box-shadow: 0 10px 22px -10px #000, 0 0 18px -6px #e8c98b88, inset 0 1px 0 #ffffff1a; }
header .actions > button:hover::before, header .actions > button:focus-visible::before { border-color: #e8c98b66; }
header .actions > button:hover::after, header .actions > button:focus-visible::after { opacity: 1; scale: 1; }
header .actions > button:active { transform: translateY(1px); }
header .actions > button:focus-visible { outline: 2px solid #fff3d6; outline-offset: 2px; }

/* Placas de valor: Ouro e Diamantes */
header .actions > .goldChip, header .actions > .gemChip { gap: 9px; padding: 5px 16px 5px 11px; letter-spacing: .04em; font-size: 16px; text-transform: none; }
header .actions > .goldChip { --edge: #e8b04a99; --edgeHot: #ffd57a; --hg: #ffd36b; --ink: linear-gradient(180deg, #3a2a12f2, #1c1409f2); color: #ffe2a0; }
header .actions > .goldChip::before { border-color: #ffd36b33; }
header .actions > .gemChip { --edge: #6fd3f599; --edgeHot: #a6e8ff; --hg: #6fd3f5; --ink: linear-gradient(180deg, #12293bf2, #0a1620f2); color: #c9f0ff; }
header .actions > .gemChip::before { border-color: #6fd3f533; }
header .actions > .goldChip:hover, header .actions > .goldChip:focus-visible { background: linear-gradient(180deg, #4a3414, #231709) !important; box-shadow: 0 10px 22px -10px #000, 0 0 20px -4px #ffc94a99; }
header .actions > .gemChip:hover, header .actions > .gemChip:focus-visible { background: linear-gradient(180deg, #17364d, #0c1c29) !important; box-shadow: 0 10px 22px -10px #000, 0 0 20px -4px #6fd3f5aa; }
header .actions > .goldChip b, header .actions > .gemChip b { font: 700 17px/1 var(--e-display, Georgia, serif); letter-spacing: .03em; min-width: 2ch; text-align: right; }

/* Conta: placa dourada principal; o nível vira um losango */
header .actions > .accountPill { --edge: #f3d896; --edgeHot: #fff3d6; --hg: #fff3d6; --ink: linear-gradient(180deg, #f0d28d, #d3a955); color: #1d1218; padding: 5px 16px 5px 9px; box-shadow: 0 8px 18px -8px #000, inset 0 1px 0 #fff8; }
header .actions > .accountPill::before { border-color: #1d121833; }
header .actions > .accountPill:hover, header .actions > .accountPill:focus-visible { color: #1d1218; background: linear-gradient(180deg, #ffe9b0, #e3b861) !important; box-shadow: 0 10px 22px -8px #000, 0 0 22px -2px #ffd98acc, inset 0 1px 0 #fffa; }
header .actions > .accountPill b { font: 700 14px/1 var(--e-display, Georgia, serif); letter-spacing: .12em; }
header .actions > .accountPill .lv { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; font: 800 12px/1 system-ui, sans-serif; letter-spacing: 0; color: #f3d896; background: none; border-radius: 0; isolation: isolate; }
header .actions > .accountPill .lv::before { content: ''; position: absolute; inset: 2px; z-index: -1; rotate: 45deg; background: #1d1218; border-radius: 2px; box-shadow: 0 0 0 1px #1d121866; }
header .actions > .accountPill:has(b:only-child) { padding-left: 16px; }

/* Admin: violeta */
header .actions > .adminPill { --edge: #b48bf088; --edgeHot: #d6b8ff; --hg: #b48bf0; --ink: linear-gradient(180deg, #2a1a45f2, #160d26f2); color: #e6d4ff; }
header .actions > .adminPill::before { border-color: #b48bf033; }
header .actions > .adminPill:hover, header .actions > .adminPill:focus-visible { background: linear-gradient(180deg, #38235c, #1b1030) !important; box-shadow: 0 10px 22px -10px #000, 0 0 20px -4px #b48bf0aa; }

/* Som ligado: acende em ouro */
header .actions > #sound[aria-pressed=true] { --edge: #e8c98bcc; color: #ffe9b0; box-shadow: 0 6px 16px -8px #000, 0 0 16px -6px #e8c98b88, inset 0 0 12px #e8c98b22; }

@media (max-width: 760px) {
  header .actions { gap: 5px; }
  header .actions > button { min-height: 34px; padding: 5px 9px; font-size: 11.5px; letter-spacing: .08em; }
  header .actions > button::after { display: none; }
  header .actions > .goldChip, header .actions > .gemChip { padding: 4px 9px 4px 7px; font-size: 14px; }
  header .actions > .accountPill { padding: 4px 9px 4px 5px; }
}
@media (prefers-reduced-motion: reduce) { header .actions > button, header .actions > button::after { transition: none; } header .actions > button:hover { transform: none; } }
.reduced header .actions > button, .reduced header .actions > button::after { transition: none; }

/* Placas de Ouro e Diamante maiores e que crescem com o valor (milhões cabem; os números ganham separador de milhar) */
header .actions > :is(.goldChip, .gemChip) { flex: none; max-width: none; min-height: 42px; padding: 6px 20px 6px 13px; gap: 11px; }
header .actions > :is(.goldChip, .gemChip) b { font-size: 21px; min-width: 4ch; white-space: nowrap; font-variant-numeric: tabular-nums; }
header .actions > :is(.goldChip, .gemChip) :is(.coin, .gem) { font-size: 1.15em; }
@media (max-width: 760px) { header .actions > :is(.goldChip, .gemChip) { min-height: 36px; padding: 4px 11px 4px 8px; } header .actions > :is(.goldChip, .gemChip) b { font-size: 16px; min-width: 2ch; } }