/* ==========================================================================
   Ragbia — tema do site público.

   O kit visual vem de sprites pequenos em `static/ui/` gerados por
   `tools/slice_ui.py`. Molduras e faixas são remontadas com `border-image`
   (9-slice nos painéis, 3-slice horizontal em botões e faixas), então o
   texto continua sendo texto real e o layout escala sem imagem gigante.

   Sumário:
     1. tokens        2. base e fundo      3. tipografia
     4. moldura       5. ornamentos        6. botões
     7. faixas        8. cartões internos  9. layout da home
    10. formulários  11. tabelas/listas   12. responsivo
   ========================================================================== */

/* 1. tokens --------------------------------------------------------------- */
:root {
    --gold-1: #f8e6b4;
    --gold-2: #e0b45f;
    --gold-3: #a97b31;
    --gold-dim: #8d764a;
    --amethyst: #9a5ae0;
    --ink: #ece0c6;
    --ink-soft: #c6b696;
    --ink-dim: #9c8c72;
    --field-1: #232842;
    --field-2: #10131f;
    --red: #e0705f;
    --green: #7fd6a0;

    --serif: Georgia, "Times New Roman", "Palatino Linotype", serif;
    --ui: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

    /* espessura da moldura: o atlas tem cantos de 100px, então tudo
       (ornamentos, recuo do campo interno) é derivado desta medida. */
    --fw: 64px;
    --shell: 1380px;
    --gap: 26px;
}

/* Personagens e atualizações: os mesmos tokens/molduras do tema. */
.character-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.character-slot { padding: 22px; border: 1px solid var(--gold-3); border-radius: 10px; background: linear-gradient(145deg, var(--field-1), var(--field-2)); display: flex; flex-direction: column; gap: 12px; overflow-wrap: anywhere; }
.character-slot h3, .character-slot p { margin: 0; }
.character-slot .rg-btn { margin-top: auto; }
.character-slot__number { color: var(--gold-2); font-size: .8rem; letter-spacing: .15em; }
.character-slot--locked { border-style: dashed; color: var(--ink-soft); }
.slot-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.slot-offers summary, .rg-update summary { cursor: pointer; color: var(--gold-1); padding: 8px 0; }
.slot-offers p { margin-top: 12px; }
.vocation-fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.vocation-fieldset legend { margin-bottom: 12px; }
.vocation-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.vocation-choice { padding: 18px; border: 1px solid var(--gold-dim); border-radius: 8px; background: var(--field-2); cursor: pointer; }
.vocation-choice:has(input:checked) { border-color: var(--gold-2); box-shadow: 0 0 0 1px var(--gold-2); }
.vocation-choice:focus-within { outline: 2px solid var(--gold-1); outline-offset: 3px; }
.vocation-choice input { width: auto; margin-right: 6px; }
.rg-update { margin-bottom: 14px; overflow-wrap: anywhere; }
.rg-update p { white-space: pre-line; font-size: .9rem; }
@media (max-width: 600px) {
    .character-slots, .slot-offers { grid-template-columns: 1fr; }
}

/* 2. base e fundo --------------------------------------------------------- */
* { box-sizing: border-box; }

html { background: #0e0c17; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: var(--ui);
    line-height: 1.55;
    background:
        radial-gradient(58rem 34rem at 50% -6rem, rgba(126, 96, 180, .40), transparent 70%),
        radial-gradient(46rem 30rem at 12% 82%, rgba(196, 122, 66, .22), transparent 70%),
        radial-gradient(46rem 30rem at 88% 88%, rgba(88, 66, 150, .28), transparent 70%),
        linear-gradient(178deg, #241f3c 0%, #17142a 45%, #100d1c 100%);
    background-attachment: fixed;
}

/* grão sutil por cima do gradiente — SVG inline, sem requisição extra */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.rg-page {
    position: relative;
    z-index: 1;
    width: min(var(--shell), calc(100% - 32px));
    margin: 0 auto;
    padding: 26px 0 46px;
}

a { color: var(--gold-2); }
img { max-width: 100%; height: auto; display: block; }

/* 3. tipografia ----------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; font-family: var(--serif); font-weight: 700; }
p { margin: 0 0 .8em; }

.rg-title {
    margin: 0 0 14px;
    font-size: clamp(.88rem, .76rem + .3vw, 1.02rem);
    letter-spacing: .13em;
    text-transform: uppercase;
    text-align: center;
    color: var(--gold-1);
    text-shadow: 0 1px 0 #2a1c06, 0 0 14px rgba(224, 180, 95, .28);
}

/* filete com losango no meio, usado abaixo dos títulos */
.rg-title::after {
    content: "";
    display: block;
    height: 9px;
    margin: 9px auto 0;
    width: min(220px, 80%);
    background:
        linear-gradient(90deg, transparent, var(--gold-dim) 18%, var(--gold-2) 50%, var(--gold-dim) 82%, transparent) center/100% 1px no-repeat,
        url("ui/gem.webp") center/auto 9px no-repeat;
}

.rg-sub {
    margin: 18px 0 8px;
    font-size: .78rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-align: center;
    color: var(--gold-2);
}

.rg-lead { color: var(--ink-soft); }
.muted, .rg-muted { color: var(--ink-dim); }
.rg-center { text-align: center; }

/* 4. moldura -------------------------------------------------------------- */
/* `frame.webp` é 564x628 com fatia de 162px, tirado da moldura central da
   folha e remapeado para a paleta do print (ferro grafite + bronze antigo,
   ver to_print_palette no slicer). O centro do trilho fica a 47/162 da borda,
   então o campo interno é deslocado por essa fração (0.29 x --fw) para
   entrar por baixo do metal. Os trilhos são ladrilhos espelhados que emendam
   consigo mesmos: `round` repete sem costura. */
.rg-panel {
    position: relative;
    border-style: solid;
    border-width: var(--fw);
    border-image-source: url("ui/frame.webp");
    border-image-slice: 162;
    border-image-repeat: round;
    padding: 2px 4px 6px;

    background-image: linear-gradient(170deg, rgba(30, 34, 46, .97), rgba(14, 15, 20, .97));
    background-repeat: no-repeat;
    background-origin: border-box;
    background-clip: border-box;
    background-position: calc(var(--fw) * .29) calc(var(--fw) * .29);
    background-size: calc(100% - var(--fw) * .58) calc(100% - var(--fw) * .58);
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .45));
}

.rg-panel > * { position: relative; }

/* variação fina, para formulários e blocos secundários */
.rg-panel--slim { --fw: 48px; }

/* 5. ornamentos ----------------------------------------------------------- */
.rg-orn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
    background: center / contain no-repeat;
}

/* Elemento absoluto se posiciona pela caixa de padding, não pela de borda:
   daí o -1. Somado a isso, a estrela nasce 31px acima da borda da moldura
   (31/135 do slice), e mede 180x140 nas mesmas unidades. O trecho de trilho
   que vem junto no sprite cai exatamente sobre o trilho do border-image. */
.rg-orn--crown {
    top: calc(var(--fw) * -1.19);
    width: calc(var(--fw) * 1.111);
    height: calc(var(--fw) * .864);
    background-image: url("ui/crown.webp");
}

/* o trilho inferior tem o centro a 0.71 x --fw abaixo da caixa de conteúdo;
   o drapeado é ancorado ali e desce 62% da própria altura. */
.rg-orn--drape {
    bottom: calc(var(--fw) * -.71);
    width: min(66%, calc(var(--fw) * 5.4));
    aspect-ratio: 385 / 197;
    transform: translate(-50%, 62%);
    background-image: url("ui/drape.webp");
}

/* o drapeado desce para fora do painel: reserva a folga na coluna */
.rg-panel--drape { padding-bottom: calc(var(--fw) * .22); margin-bottom: calc(var(--fw) * 1.3); }

/* peça do kit sem consumidor no momento: o brasão saiu do painel de
   informações quando ele encolheu para o pé da coluna esquerda */
.rg-crest {
    width: clamp(52px, 15%, 78px);
    margin: 0 auto 12px;
}

/* 6. botões --------------------------------------------------------------- */
/* 3-slice: as pontas ficam nas bordas laterais (95/123 da altura) e o miolo
   liso é esticado pelo `fill`. O rótulo é texto de verdade. */
.rg-btn {
    --h: 56px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--h);
    min-width: 13ch;
    padding: calc(var(--h) * .10) 6px 0;
    border-style: solid;
    /* Razoes vindas de tools/slice_ui.py, que as imprime ao gerar o kit:
       --cap   = largura da ponta / altura do atlas (95/H)
       --crown = altura da coroa / altura do atlas
       --crownw = largura da coroa / altura do atlas
       As tres pecas nao tem a mesma altura na folha de origem, entao cada cor
       traz as suas. Errar isso distorce a ponta em relacao ao miolo. */
    --cap: .7917;
    --crown: .3833;
    --crownw: 1;
    border-width: 0 calc(var(--h) * var(--cap));
    border-image-source: url("ui/btn-blue.webp");
    border-image-slice: 0 95 fill;
    border-image-repeat: stretch;
    background: none;
    font: 700 clamp(.95rem, .8rem + .35vw, 1.16rem)/1 var(--serif);
    letter-spacing: .04em;
    white-space: nowrap; /* botao e 3-slice: quebrar linha rasgaria a arte */
    /* O rótulo gravado na arte de origem é ouro escovado: #e8cf89 no topo das
       letras, #dcac64 no corpo, #c77f45 na base, sobre contorno quase preto.
       Como aqui o texto é texto de verdade, fica o tom do corpo puxado para o
       claro (legibilidade em 21px) e o contorno vira sombra. O creme anterior
       (#f8dda2) era o brilho do núcleo aplicado à letra inteira — do lado do
       ouro da moldura lia como branco lavado. */
    color: #ebc57c;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(24, 12, 6, .95), 0 2px 8px rgba(0, 0, 0, .6);
    cursor: pointer;
    transition: filter .18s ease, transform .18s ease;
}

/* O 3-slice descarta o miolo, e com ele o ornamento central do botao — gema
   mais volutas. Ele volta por cima, recortado da propria arte por
   `build_crown()` em tools/slice_ui.py, ancorado no topo e centrado. Antes
   aqui vinha um `gem.webp` solto, que era a gema sem as volutas: dava para
   ver que o botao nao era inteiro. */
.rg-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: calc(var(--h) * var(--crownw));
    height: calc(var(--h) * var(--crown));
    transform: translateX(-50%);
    background: url("ui/btn-crown-blue.webp") center / contain no-repeat;
}

.rg-btn:hover { filter: brightness(1.14) saturate(1.06); transform: translateY(-1px); }
.rg-btn:active { transform: translateY(1px); filter: brightness(.94); }
.rg-btn:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 4px; }

.rg-btn--red { border-image-source: url("ui/btn-red.webp"); --cap: .7787; --crown: .3607; --crownw: .9836; }
.rg-btn--red::after { background-image: url("ui/btn-crown-red.webp"); }
.rg-btn--green { border-image-source: url("ui/btn-green.webp"); --cap: .7787; --crown: .3361; }
.rg-btn--green::after { background-image: url("ui/btn-crown-green.webp"); }
.rg-btn--block { display: flex; width: 100%; }
.rg-btn--sm { --h: 44px; min-width: 10ch; }

/* Menu da home e do cabecalho: largura fixa com a peca inteira, sem fatiar.
   Os tres rotulos sao curtos e o desenho mostra os tres do mesmo tamanho,
   entao aqui nao ha nada a acompanhar — e sem esticar a arte fica igual ao
   desenho, com o brilho que corre pelo trilho e o degrade do fundo, que a
   secao transversal repetida do 3-slice nao tem como reproduzir. O rotulo
   pintado na arte de origem e apagado por `build_full()` em slice_ui.py.
   Os botoes que precisam acompanhar o texto continuam no 3-slice. */
.rg-menu .rg-btn {
    /* 550x122 e o tamanho em que a ferramenta normaliza as tres pecas */
    width: calc(var(--h) * 4.508);
    /* em tela muito estreita o botao encolhe em vez de furar a pagina */
    max-width: 100%;
    min-width: 0;
    border: 0;
    background: url("ui/btn-full-blue.webp") center / 100% 100% no-repeat;
    /* A placa tem largura fixa em função de --h, então o rótulo também: assim
       ele guarda a proporção do desenho em qualquer altura. Na arte de origem
       "Registre-se" ocupa 51,7% da largura da peça; 0.375 * --h em Georgia
       bold dá 51,3%, e o mais longo do menu ("Minha conta") ainda para antes
       das estrelas. O clamp por viewport dos outros botões deixava o rótulo
       em 44% e a placa parecia grande demais para ele. */
    font-size: calc(var(--h) * .375);
}
.rg-menu .rg-btn--red { background-image: url("ui/btn-full-red.webp"); }
.rg-menu .rg-btn--green { background-image: url("ui/btn-full-green.webp"); }
/* a coroa ja vem na arte inteira */
.rg-menu .rg-btn::after { content: none; }

.rg-btn[aria-disabled="true"] { filter: grayscale(.45) brightness(.8); cursor: not-allowed; }
.rg-btn[aria-disabled="true"]:hover { transform: none; }

/* 7. faixas --------------------------------------------------------------- */
.rg-ribbon,
.rg-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: solid;
    background: none;
    margin: 0;
    text-align: center;
    font-family: var(--serif);
    font-weight: 700;
    color: var(--gold-1);
    text-shadow: 0 1px 0 #3c2408, 0 2px 8px rgba(0, 0, 0, .6);
    text-decoration: none;
}

/* Faixa vermelha de evento. A arte tem 206px de altura e os escudos das
   pontas ocupam os ~30% de baixo, afinando ate a ponta. Renderizada a 82px
   (0.40 da arte) a ponta virava 4px e lia como cortada; o print usa 0.67 da
   arte, o equivalente a 126px neste layout. O campo util e ~47% da altura. */
.rg-ribbon {
    --h: clamp(74px, 8.8vw, 126px);
    height: var(--h);
    padding: 0 8px calc(var(--h) * .07);
    border-width: 0 calc(var(--h) * .641);
    border-image-source: url("ui/ribbon.webp");
    border-image-slice: 0 132 fill;
    border-image-repeat: stretch;
    font-size: clamp(1.05rem, .68rem + 1.1vw, 1.85rem);
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* faixa roxa de legenda */
.rg-bar {
    --h: clamp(46px, 5.4vw, 62px);
    position: relative;
    height: var(--h);
    padding: 0 6px;
    border-width: 0 calc(var(--h) * .407);
    border-image-source: url("ui/bar.webp");
    border-image-slice: 0 61 fill;
    border-image-repeat: stretch;
    font-size: clamp(.9rem, .7rem + .5vw, 1.22rem);
}

/* as gemas do centro somem no fatiamento; voltam como decoração */
.rg-bar::before,
.rg-bar::after {
    content: "";
    position: absolute;
    left: 50%;
    width: calc(var(--h) * .26);
    height: calc(var(--h) * .37);
    background: url("ui/gem.webp") center / contain no-repeat;
}
.rg-bar::before { top: 0; transform: translate(-50%, -42%); }
.rg-bar::after { bottom: 0; transform: translate(-50%, 42%) rotate(180deg); }

/* 8. cartões internos ----------------------------------------------------- */
.rg-card {
    border: 1px solid rgba(224, 180, 95, .38);
    outline: 1px solid rgba(224, 180, 95, .16);
    outline-offset: 4px;
    background: linear-gradient(180deg, rgba(10, 12, 20, .55), rgba(10, 12, 20, .25));
    padding: 16px 16px 20px;
    margin: 6px 6px 10px;
}

.rg-rates { margin: 0; display: grid; gap: 2px; }
.rg-rates > div {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    gap: 10px;
    padding: 5px 2px;
    border-bottom: 1px solid rgba(224, 180, 95, .14);
    font-size: .92rem;
}
.rg-rates > div:last-child { border-bottom: 0; }
.rg-rates dt { text-align: right; color: var(--ink); }
.rg-rates dd { margin: 0; text-align: left; color: var(--gold-2); font-weight: 700; }
.rg-rates span { color: var(--gold-dim); }

.rg-big { margin: 0; text-align: center; font: 700 1.5rem var(--serif); color: var(--gold-1); }

/* status */
.rg-status { display: grid; gap: 10px; text-align: center; }
.rg-status__state { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font: 700 1.25rem var(--serif); }
.rg-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(224, 112, 95, .16); }
.rg-dot--on { background: var(--green); box-shadow: 0 0 0 5px rgba(127, 214, 160, .16); }
.rg-status__count { font: 700 2.6rem/1 var(--serif); color: var(--gold-1); }

/* ranking */
.rg-rank { list-style: none; margin: 0; padding: 0; counter-reset: pos; }
.rg-rank li {
    counter-increment: pos;
    display: grid;
    grid-template-columns: 26px 1fr auto;
    align-items: baseline;
    gap: 10px;
    padding: 7px 4px;
    border-bottom: 1px solid rgba(224, 180, 95, .13);
    font-size: .93rem;
}
.rg-rank li:last-child { border-bottom: 0; }
.rg-rank li::before { content: counter(pos); color: var(--gold-dim); font-weight: 700; text-align: right; }
.rg-rank a { color: var(--ink); text-decoration: none; }
.rg-rank a:hover { color: var(--gold-1); }
.rg-rank b { color: var(--gold-2); font-weight: 700; }
.rg-rank .is-online { color: var(--green); }

/* notícias */
.rg-news { display: grid; gap: 14px; }
.rg-news article { padding-bottom: 12px; border-bottom: 1px solid rgba(224, 180, 95, .13); }
.rg-news article:last-child { border-bottom: 0; padding-bottom: 0; }
.rg-news h3 { margin: 0 0 4px; font-size: 1.06rem; color: var(--gold-1); }
.rg-news p { margin: 0; color: var(--ink-dim); font-size: .92rem; }

.rg-empty { text-align: center; color: var(--ink-dim); padding: 14px 4px; font-size: .92rem; }

/* 9. layout da home ------------------------------------------------------- */
.rg-home {
    display: grid;
    grid-template-columns: minmax(0, 330px) minmax(0, 1fr) minmax(0, 350px);
    gap: var(--gap);
    align-items: start;
}

/* Item de grid nao encolhe abaixo do min-content por padrao (min-width:auto).
   Com 2 x --fw so de moldura, o min-content de um painel passa da coluna e o
   painel VAZA por cima da coluna vizinha — cantos e trilhos duplicados. O
   min-width: 0 obriga a coluna a valer e o conteudo a quebrar por dentro. */
.rg-home > * { min-width: 0; }
/* mesmo guarda um nivel abaixo: .rg-col e grid, entao o PAINEL tambem e
   item de grid com min-width:auto — foi ele que vazou, nao a coluna. */
.rg-col > * { min-width: 0; }

.rg-col { display: grid; gap: var(--gap); align-content: start; min-width: 0; }
.rg-menu { display: grid; gap: 14px; }

.rg-logo { display: block; margin: -10px auto 4px; width: min(100%, 460px); }
.rg-logo img { width: 100%; height: auto; }

.rg-hero { margin: 0; }
/* a arte tem 582px de origem: acima disso só borraria */
.rg-hero img { width: 100%; max-width: 640px; margin-inline: auto; border: 1px solid rgba(0, 0, 0, .5); }

/* a legenda do herói encosta no trilho inferior, como no layout de origem */
.rg-hero-bar {
    position: absolute;
    left: 50%;
    bottom: calc(var(--fw) * -.71);
    transform: translate(-50%, 50%);
    width: min(88%, 620px);
    z-index: 3;
}

.rg-panel--hero { padding-bottom: calc(var(--fw) * .1); }

.rg-foot {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    align-items: center;
    justify-content: space-between;
    color: var(--ink-dim);
    font-size: .78rem;
}
.rg-foot a { color: var(--ink-dim); text-decoration: none; }
.rg-foot a:hover { color: var(--gold-2); }

/* cabeçalho das páginas internas */
.rg-head { display: grid; justify-items: center; gap: 16px; margin-bottom: 30px; }
.rg-head .rg-menu { grid-auto-flow: column; gap: 12px; }
.rg-shell { width: min(760px, 100%); margin: 0 auto; }
.rg-shell--wide { width: min(1080px, 100%); }

/* 10. formulários --------------------------------------------------------- */
.gameplay-fields { display: grid; gap: 12px; }
.gameplay-fields fieldset { min-width: 0; display: grid; gap: 12px; border: 1px solid var(--gold-2); padding: 14px; }
.gameplay-fields fieldset > div { min-width: 0; }
.gameplay-fields label { display: grid; gap: 6px; }
.gameplay-fields input, .gameplay-fields select { width: 100%; }
.gameplay-advanced textarea { width: 100%; margin-block: 12px; }
.rg-form { display: grid; gap: 16px; padding: 4px 6px 10px; }
.rg-form .rg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* par Salvar/Remover dentro da grade do formulario, alinhado com os campos */
.rg-acoes { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }

label { display: grid; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--gold-2); letter-spacing: .04em; }
label small { color: var(--ink-dim); font-weight: 400; letter-spacing: 0; }

input, select, textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    color: var(--ink);
    background: rgba(8, 10, 18, .72);
    border: 1px solid rgba(224, 180, 95, .34);
    border-radius: 2px;
    font: 400 .95rem var(--ui);
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(224, 180, 95, .5); outline-offset: 1px; border-color: var(--gold-2); }
select option { background: #14162a; }
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }

.rg-formfoot { text-align: center; font-size: .88rem; color: var(--ink-dim); margin: 4px 0 0; }

.flash-stack { display: grid; gap: 8px; margin: 0 0 20px; }
.flash {
    padding: 11px 15px;
    border-left: 3px solid var(--gold-2);
    background: rgba(20, 16, 34, .85);
    font-size: .87rem;
}
.flash-error { border-color: var(--red); }
.flash-success { border-color: var(--green); }

/* 11. tabelas e listas ---------------------------------------------------- */
.page-heading { text-align: center; margin-bottom: 26px; }
.page-heading h1 { font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem); color: var(--gold-1); }
.eyebrow, .card-label { color: var(--gold-2); font-size: .68rem; font-weight: 700; letter-spacing: .16em; margin: 0 0 10px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid rgba(224, 180, 95, .14); font-size: .89rem; }
th { color: var(--gold-2); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }

.pill { display: inline-block; color: var(--ink-dim); border: 1px solid rgba(224, 180, 95, .3); border-radius: 999px; padding: 3px 9px; font-size: .62rem; letter-spacing: .1em; font-weight: 700; }
.pill-online { color: var(--green); border-color: rgba(127, 214, 160, .45); }
/* estados de pedido da loja: pago é verde como online, pendente é ouro,
   cancelado usa o vermelho dos botões destrutivos. */
.pill-pago { color: var(--green); border-color: rgba(127, 214, 160, .45); }
.pill-pendente { color: var(--gold-2); border-color: rgba(224, 180, 95, .5); }
.pill-cancelado { color: var(--red); border-color: rgba(224, 112, 95, .45); }
.online-text { color: var(--green); }

.character-list { display: grid; gap: 16px; }
.character-head, .admin-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.character-head h2 { margin-bottom: 4px; color: var(--gold-1); }
.character-head h2 a { color: inherit; text-decoration: none; }
.character-head .muted { margin: 0; font-size: .84rem; }

.stat-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.stat-list div { padding: 13px; border: 1px solid rgba(224, 180, 95, .2); }
dt { color: var(--ink-dim); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; }
dd { margin: 5px 0 0; font: 700 1.1rem var(--serif); color: var(--gold-1); }

.warning-box { border: 1px solid rgba(224, 180, 95, .35); background: rgba(224, 180, 95, .08); color: var(--ink-soft); padding: 11px 14px; margin: 18px 0; font-size: .82rem; }
.text-link { color: var(--gold-2); font-weight: 700; font-size: .84rem; text-decoration: none; }
.text-link:hover { color: var(--gold-1); }

/* 11.1 barra de sistemas --------------------------------------------------- */
/* Coluna da home: grupos empilhados com título dourado e links em lista.
   `--inline` reaproveita a mesma marcação como fita horizontal no cabeçalho
   das páginas internas, onde os títulos de grupo somem. */
.rg-nav { display: grid; gap: 14px; padding: 2px 6px 8px; }

.rg-nav__title {
    margin: 0 0 6px;
    font: 700 .74rem var(--ui);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-2);
    border-bottom: 1px solid rgba(224, 180, 95, .22);
    padding-bottom: 5px;
}

/* Loja não tem subitens: o título é o link, então precisa reagir como link
   (o resto do grupo é rótulo e não clica). */
.rg-nav__title--link { display: block; text-decoration: none; }
.rg-nav__title--link:hover { color: var(--gold-1); background: rgba(224, 180, 95, .07); }
.rg-nav__title--link[aria-current="page"] { color: var(--gold-1); }

.rg-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.rg-nav__list a {
    display: block;
    padding: 6px 8px;
    color: var(--ink);
    text-decoration: none;
    font-size: .92rem;
    border-left: 2px solid transparent;
}
.rg-nav__list a:hover { color: var(--gold-1); border-left-color: var(--gold-3); background: rgba(224, 180, 95, .07); }
.rg-nav a[aria-current="page"] { color: var(--gold-1); border-left-color: var(--gold-2); }

.rg-nav--inline {
    grid-auto-flow: column;
    justify-content: center;
    gap: 10px 22px;
    padding: 0;
}
.rg-nav--inline .rg-nav__list { grid-auto-flow: column; gap: 4px 14px; }
.rg-nav--inline a { padding: 4px 6px; border-left: 0; font-size: .84rem; }
.rg-nav--inline a:hover { border-left: 0; background: transparent; text-decoration: underline; }
/* na fita o rótulo de grupo some; sobra a Loja, que vira só mais um destino */
.rg-nav--inline .rg-nav__title {
    margin: 0;
    border-bottom: 0;
    padding: 4px 6px;
    font: 400 .84rem var(--ui);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}
.rg-nav--inline .rg-nav__title--link:hover { color: var(--gold-1); background: transparent; text-decoration: underline; }

/* 11.2 informações do servidor, versão compacta ---------------------------- */
/* O painel foi para o fim da coluna e encolheu: título menor, linhas mais
   apertadas e o skill rate como rodapé de uma linha em vez de bloco próprio. */
.rg-title--mini { font-size: .78rem; margin-bottom: 10px; }
.rg-title--mini::after { height: 7px; margin-top: 7px; width: min(150px, 70%); background-size: 100% 1px, auto 7px; }
.rg-sub--mini { margin: 10px 0 4px; font-size: .66rem; }
.rg-card--tight { padding: 12px 12px 14px; margin: 4px 4px 8px; }
.rg-rates--tight > div { padding: 3px 2px; font-size: .82rem; gap: 8px; }
.rg-rates__foot { margin: 10px 0 0; text-align: center; font-size: .8rem; color: var(--ink-dim); }
.rg-rates__foot b { color: var(--gold-1); font-size: .95rem; }

/* ranking: posição sem dono */
.rg-rank__free { color: var(--ink-dim); font-style: italic; }
.rg-rank b.rg-rank__free { font-style: normal; }
.rg-rank__foot { margin: 12px 0 0; text-align: center; }

/* busca de personagem */
.rg-search {
    display: flex;
    align-items: end;
    gap: 12px;
    padding: 4px 6px 16px;
}
.rg-search__field { flex: 1; }

/* listas de texto (regras, documentação) */
.rg-rules { margin: 0 0 18px; padding-left: 20px; color: var(--ink-soft); }
.rg-rules li { margin-bottom: 8px; }

/* conversa de ticket */
.rg-thread { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.rg-thread__item {
    padding: 12px 14px;
    border: 1px solid rgba(224, 180, 95, .2);
    border-left-width: 3px;
    background: rgba(10, 12, 20, .45);
}
.rg-thread__item--suporte { border-left-color: var(--gold-2); background: rgba(224, 180, 95, .07); }
.rg-thread__meta { margin: 0 0 6px; display: flex; gap: 10px; align-items: baseline; font-size: .78rem; }
.rg-thread__meta b { color: var(--gold-2); }
.rg-thread__body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; }

/* 11.3 loja ---------------------------------------------------------------- */
/* As ofertas se acomodam sozinhas: quatro pacotes cabem lado a lado no desktop
   e viram uma coluna no celular sem media query própria. */
.rg-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 2px; }
.rg-offer { display: grid; gap: 9px; align-content: start; text-align: center; }
.rg-offer__amount { margin: 0; font: 700 1.5rem/1 var(--serif); color: var(--gold-1); }
.rg-offer__price { margin: 0; color: var(--gold-2); font-weight: 700; font-size: .95rem; }
.rg-offer__note { margin: 0; color: var(--ink-dim); font-size: .75rem; }
.rg-offer form { margin: 0; }

.rg-wallet { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.rg-wallet div { padding: 13px; border: 1px solid rgba(224, 180, 95, .2); text-align: center; }

.rg-pix { display: grid; gap: 6px; margin: 14px 0 0; }
.rg-pix code {
    display: block;
    padding: 9px 11px;
    border: 1px solid rgba(224, 180, 95, .3);
    background: rgba(10, 12, 20, .5);
    color: var(--gold-2);
    font-size: .82rem;
    word-break: break-all;
}

/* 12. responsivo ---------------------------------------------------------- */
@media (max-width: 1180px) {
    .rg-home { grid-template-columns: 1fr 1fr; }
    .rg-col--center { grid-column: 1 / -1; order: -1; }
}

@media (max-width: 820px) {
    :root { --fw: 46px; --gap: 20px; }
    .rg-home { grid-template-columns: 1fr; }
    /* a coluna esquerda se dissolve para que o menu suba antes do conteúdo */
    .rg-col--left { display: contents; }
    .rg-col--left > .rg-menu { order: -2; }
    .rg-col--center { order: -1; }
    .rg-col--left > .rg-panel { order: 1; }
    .rg-form .rg-grid { grid-template-columns: 1fr; }
    .stat-list { grid-template-columns: 1fr; }
    .rg-wallet { grid-template-columns: 1fr; }
    .rg-head .rg-menu { grid-auto-flow: row; width: 100%; }
    /* a fita de sistemas quebra em linhas em vez de espremer os destinos */
    .rg-nav--inline { grid-auto-flow: row; justify-items: center; gap: 2px; }
    .rg-nav--inline .rg-nav__list { grid-auto-flow: row; justify-items: center; }
    .rg-search { flex-direction: column; align-items: stretch; }
    .rg-btn { --h: 50px; }
    .rg-orn--drape { width: min(86%, calc(var(--fw) * 8)); }
}

@media (max-width: 480px) {
    :root { --fw: 36px; }
    .rg-page { width: calc(100% - 18px); }
    .rg-card { margin: 2px; padding: 12px 10px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .rg-btn { transition: none; }
    .rg-btn:hover, .rg-btn:active { transform: none; }
}