/* ==========================================================================
   Obsidian — dark fantasy template for MyAAC
   1. Tokens
   2. Reset & base
   3. Topbar / navigation
   4. Hero
   5. Layout
   6. Panels & sections
   7. Right rail
   8. Footer
   9. Responsive
   ========================================================================== */

/* 0. Vendor fixups ======================================================= */

/*
 * tools/fonts/fontawesome/all.css points at ../webfonts/, but the font files
 * actually sit alongside it in tools/fonts/fontawesome/. Re-declare the two
 * families we use with the real path — these rules load after all.css, so they
 * win, and the shared vendor file stays untouched.
 */
@font-face {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url('../../../tools/fonts/fontawesome/fa-solid-900.woff2') format('woff2');
}

@font-face {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('../../../tools/fonts/fontawesome/fa-regular-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('../../../tools/fonts/fontawesome/fa-brands-400.woff2') format('woff2');
}

/* 1. Tokens ============================================================== */

:root {
    /* --- surfaces: aged parchment, lightest to darkest ------------------- */
    --parch-hi: #fbf3e0;
    --parch: #f5e6c8;
    --parch-2: #efe0be;
    --parch-3: #e8d5ac;
    --parch-4: #dcc79a;

    /*
     * Chrome is deep navy with a gold frame — the frame is what makes a flat
     * bar read as a carved plaque. Wood is kept for secondary surfaces.
     */
    --navy: #1e4976;
    --navy-2: #16375c;
    --navy-3: #102843;
    --navy-line: #0a1c30;

    --wood: #8b7355;
    --wood-2: #7a6345;
    --wood-3: #695335;
    --wood-line: #5d4e37;

    /*
     * Action colours. Each is a three-stop ramp plus a lighter border, so every
     * button is built the same way and only the hue changes. Colour carries
     * meaning here: green downloads, orange buys, blue signs in.
     */
    --grass: #2e7d32;
    --grass-2: #1b5e20;
    --grass-3: #0d3d0d;
    --grass-line: #4caf50;

    /*
     * The bright top stop is what makes this read as orange; the body is deeper
     * so white labels clear 4.5:1 without needing an outline. Measured across
     * the label band, not at the extremes.
     */
    --amber: #fa8c00;
    --amber-2: #c65600;
    --amber-3: #9e3c00;
    --amber-line: #ffb900;

    --blurple: #5865f2;
    --blurple-2: #4752c4;
    --blurple-3: #3a4199;
    --blurple-line: #7289da;

    --crimson: #c0392b;
    --crimson-2: #96271b;
    --crimson-3: #6d1a11;
    --crimson-line: #e05a4a;

    /* the warm accent — burnished gold */
    --gold: #d9a94e;
    --gold-bright: #f2cd7c;
    --gold-deep: #a67c2e;
    --gold-dark: #8b6524;
    --ember: #c4703c;

    /* the cool accent — heraldic blue, for primary actions */
    --azure: #2a6db5;
    --azure-2: #1e5799;
    --azure-3: #164070;
    --azure-line: #0d2f54;

    /* --- ink ------------------------------------------------------------- */
    --text: #3d2314;
    --text-dim: #6b4e32;
    /* muted still has to clear 4.5:1 on parchment — this runs small (10-11px) */
    --text-mute: #6f5539;
    --text-on-dark: #f0e6d2;

    /* --- lines ----------------------------------------------------------- */
    --line: rgba(93, 78, 55, 0.28);
    --line-soft: rgba(93, 78, 55, 0.14);
    --line-strong: rgba(93, 78, 55, 0.52);

    /* state */
    --online: #2e7d32;
    --offline: #c0392b;

    /*
     * The game-UI legibility trick: a dark halo under light text so it holds up
     * over artwork and over the wood bars. Two variants — a soft drop for body
     * copy, and a four-way outline for display type.
     */
    --ink-drop: 1px 1px 2px rgba(0, 0, 0, 0.8);
    --ink-outline:
        1px 1px 0 rgba(61, 35, 20, 0.9),
        -1px 1px 0 rgba(61, 35, 20, 0.9),
        1px -1px 0 rgba(61, 35, 20, 0.9),
        -1px -1px 0 rgba(61, 35, 20, 0.9),
        0 2px 4px rgba(0, 0, 0, 0.55);

    /* rarity — used by leaderboards and item tiers */
    --rank-1: #d4af37;
    --rank-2: #c3ccd4;
    --rank-3: #b07440;

    /* metal fills for the podium medals */
    --metal-gold: linear-gradient(145deg, #f5dc93 0%, #d4af37 45%, #8a6d20 100%);
    --metal-silver: linear-gradient(145deg, #eef2f5 0%, #c3ccd4 45%, #7e878f 100%);
    --metal-bronze: linear-gradient(145deg, #e5a877 0%, #b07440 45%, #6d4526 100%);

    /*
     * Structural aliases. Components refer to these rather than to a specific
     * colour, so the whole site can be re-skinned from the block above.
     * Note the inversion against a dark theme: here cards sit LIGHTER than the
     * page, because light surfaces advance and dark ones recede.
     */
    --void: var(--parch-3);      /* page canvas   */
    --deep: var(--parch-4);      /* footer, wells */
    --surface: var(--parch-hi);  /* card face     */
    --surface-2: var(--parch-2); /* hover, header */
    --surface-3: var(--parch-4); /* sunken        */

    --radius: 4px;
    --radius-lg: 8px;

    /* --- elevation: warm shadows, never neutral black ------------------- */
    --lift-1: 0 1px 2px rgba(93, 62, 28, 0.16);
    --lift-2: 0 10px 26px rgba(93, 62, 28, 0.22);

    /* the carved-in-wood bevel shared by every raised control */
    --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 1px 2px rgba(61, 35, 20, 0.3);

    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

    --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
    --font-body: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Proporcoes medidas no RubinOT, usado como referencia: laterais de 226px,
       centro de 780px e vao de 12px entre colunas, num container de 1256px.
       Somando os 24px de padding de cada lado do .shell, da 1304.
       O ganho de espaco vem principalmente do VAO menor, nao das laterais. */
    --shell: 1304px;
    --rail: 226px;
    --rail-left: 226px;
}

/* 2. Reset & base ======================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/*
 * 14px base, not 15px. The reference sites run their body copy at 12-13px and
 * it reads well because the ink is near-black on a warm ground — high contrast
 * buys you small type. Tables inherit smaller still, via legacy.css.
 */
body {
    margin: 0;
    background: var(--parch-3);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

/* --- the fixed backdrop --------------------------------------------------
   Two stacked fixed layers that never scroll:
     ::before  the artwork
     ::after   a wash that fades it back so the content column stays readable

   This is deliberately NOT `background-attachment: fixed`, which forces the
   browser to repaint the image on every scroll frame and is simply ignored by
   most mobile browsers. A position:fixed element is composited once and then
   left alone, so scrolling costs nothing and mobile behaves like desktop. */

body::before,
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body::before {
    z-index: -2;
    background-color: var(--parch-3);
    background-image: var(--page-art, none);
    background-size: cover;
    background-position: center top;
}

body::after {
    z-index: -1;
    background:
        radial-gradient(1200px 700px at 50% -10%, rgba(255, 250, 235, 0.5), transparent 62%),
        linear-gradient(180deg,
            rgba(245, 230, 200, var(--art-fade, 0.34)) 0%,
            rgba(232, 213, 172, calc(var(--art-fade, 0.34) + 0.16)) 60%,
            rgba(220, 199, 154, calc(var(--art-fade, 0.34) + 0.24)) 100%);
}

/* with no artwork set, the wash alone paints the plain parchment ground */
body.no-art::after {
    background:
        radial-gradient(1200px 700px at 50% -10%, rgba(255, 250, 235, 0.85), transparent 60%),
        radial-gradient(900px 520px at 88% 8%, rgba(217, 169, 78, 0.16), transparent 62%),
        linear-gradient(180deg, var(--parch-2) 0%, var(--parch-3) 45%, var(--parch-4) 100%);
}

/*
 * Body links are azure, not gold. Gold on parchment measures about 2:1 — it
 * looks right in a mockup and is unreadable in practice. Gold is reserved for
 * text sitting on the navy chrome, where it has the contrast to earn it.
 */
a {
    color: var(--azure-2);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--azure);
    text-decoration: underline;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0 0 0.6em;
    color: var(--text);
}

img {
    max-width: 100%;
}

/* shared decorative divider: a hairline that fades at both ends */
.rule {
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
    margin: 0;
}

/* present to assistive tech and crawlers, absent to the eye */
.u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

::selection {
    background: rgba(201, 164, 100, 0.28);
    color: var(--gold-bright);
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* a gold scrollbar keeps the chrome from breaking the mood */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--gold-deep) var(--deep);
}

::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
    background: var(--deep);
}

::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border: 2px solid var(--deep);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold-deep);
}

/* --- the ornament vocabulary --------------------------------------------
   A diamond and a pair of tapering rules. Used on every section header so
   the whole site reads as one system. Pure CSS — no image requests. */

.orn {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gold-deep);
}

.orn::before,
.orn::after {
    content: '';
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, var(--line-strong));
}

.orn::after {
    background: linear-gradient(90deg, var(--line-strong), transparent);
}

.orn__gem {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    background: var(--gold);
    transform: rotate(45deg);
}

/* --- filigree corners ----------------------------------------------------
   Four tiny inline SVGs, one per orientation, drawn as background layers on a
   single inset pseudo-element. Backgrounds cannot be rotated individually, so
   each corner is its own glyph rather than one glyph transformed four ways.

   They live on a pseudo-element rather than the header itself so they sit
   inside the gold border and survive any background the header already has —
   which is what lets the same rule decorate the legacy MyAAC captions too. */

.panel__head::before,
.card__head::before,
.Text::before {
    content: '';
    position: absolute;
    inset: 4px 6px;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 13px 13px;
    background-position: left top, right top, left bottom, right bottom;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 11 L2 2 L11 2' fill='none' stroke='%23d9a94e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 11 L14 2 L5 2' fill='none' stroke='%23d9a94e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5 L2 14 L11 14' fill='none' stroke='%23d9a94e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 5 L14 14 L5 14' fill='none' stroke='%23d9a94e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --- section flourish ----------------------------------------------------
   Applied to <hr>, so an author gets the ornament from the editor's existing
   horizontal-rule button with no special markup to remember. */

.panel__body hr,
.ticker__full hr {
    height: 14px;
    border: 0;
    margin: 22px auto;
    background:
        linear-gradient(90deg, transparent, var(--gold-deep) 22%, var(--gold) 44%, transparent 46%),
        linear-gradient(90deg, transparent 54%, var(--gold) 56%, var(--gold-deep) 78%, transparent);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 1px;
    position: relative;
}

.panel__body hr::before,
.ticker__full hr::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11px;
    height: 11px;
    margin: -5.5px 0 0 -5.5px;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold) 50%, var(--gold-deep));
    border: 1px solid var(--gold-dark);
    transform: rotate(45deg);
}

/* --- scroll reveal -------------------------------------------------------
   Driven by IntersectionObserver in obsidian.js, which only ever adds a
   class. Both properties are compositor-only, so revealing costs no layout. */

.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Anyone who asked the OS for less motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* 3. Topbar ============================================================== */

/*
 * The plaque idiom, used by the topbar and every panel/card header.
 * Three parts, and all three matter: a navy gradient, a gold outer frame, and
 * a dark inner hairline that separates the two. Drop any one and it flattens
 * back into a coloured <div>.
 */
.plaque {
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy-3) 100%);
    border: 2px solid var(--gold-deep);
    box-shadow:
        inset 0 0 0 1px var(--navy-line),
        inset 0 1px 0 1px rgba(255, 255, 255, 0.14);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 200;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy-3) 100%);
    border-bottom: 3px solid var(--gold-deep);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: box-shadow 0.25s ease;
}

/* obsidian.js flips this class once the page has scrolled off the top */
.topbar.is-stuck {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 20px rgba(61, 35, 20, 0.35);
}

.topbar__inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.brand__crest {
    width: 32px;
    height: 36px;
    display: block;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s var(--ease-out);
}

.brand:hover .brand__crest {
    transform: translateY(-1px) scale(1.06);
}

.brand__name {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-on-dark);
    text-shadow: var(--ink-drop);
}

/* --- primary nav --- */

.nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.nav__item {
    position: relative;
}

.nav__link {
    display: block;
    padding: 20px 14px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #e8dcc0;
    text-shadow: var(--ink-drop);
    cursor: pointer;
    white-space: nowrap;
}

.nav__link:hover,
.nav__item:hover .nav__link,
.nav__item.is-active .nav__link {
    color: var(--gold-bright);
}

/* the gold underline that grows on hover */
.nav__link::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transition: transform 0.22s ease;
}

.nav__item:hover .nav__link::after,
.nav__item.is-active .nav__link::after {
    transform: scaleX(1);
}

.nav__drop {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 208px;
    padding: 6px;
    background: var(--parch-hi);
    border: 1px solid var(--wood-line);
    border-radius: var(--radius);
    box-shadow: 0 14px 32px rgba(61, 35, 20, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.nav__item:hover .nav__drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav__drop .nav__drop-placeholder {
    cursor: default;
    opacity: .65;
    font-style: italic;
}

.nav__drop a {
    display: block;
    padding: 8px 12px;
    font-size: 13.5px;
    color: var(--text-dim);
    border-radius: 3px;
    border-left: 2px solid transparent;
}

.nav__drop a:hover {
    background: var(--surface-2);
    border-left-color: var(--gold);
    color: var(--gold-bright);
}

/* --- Antera Systems pages --- */
.antera-system { color: var(--text); }
.antera-system__hero { padding: 30px; border: 1px solid var(--wood-line); border-radius: var(--radius); background: linear-gradient(135deg, rgba(15,58,94,.98), rgba(8,36,61,.98)); color: #fff; box-shadow: var(--shadow); }
.antera-system__eyebrow { color: var(--gold-bright); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.antera-system__hero h1 { margin: 7px 0 10px; color: #fff; font-family: var(--font-display); font-size: clamp(28px, 5vw, 44px); letter-spacing: .04em; }
.antera-system__hero p { max-width: 760px; margin: 0; color: #e8dcc0; font-size: 16px; line-height: 1.65; }
.antera-system__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.antera-system__stat { padding: 18px; border: 1px solid var(--wood-line); border-radius: var(--radius); background: var(--surface); text-align: center; }
.antera-system__stat strong { display: block; color: var(--blue-deep); font-family: var(--font-display); font-size: 25px; }
.antera-system__stat span { color: var(--text-dim); font-size: 13px; }
.antera-system__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.antera-system__card { padding: 20px; border: 1px solid var(--wood-line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 5px 16px rgba(61,35,20,.09); }
.antera-system__card h2 { margin: 0 0 12px; color: var(--blue-deep); font-family: var(--font-display); font-size: 19px; }
.antera-system__card ul { margin: 0; padding-left: 19px; }
.antera-system__card li { margin: 7px 0; line-height: 1.5; }
.antera-system__card--table { margin-top: 14px; }
.antera-system__table-wrap { overflow-x: auto; }
.antera-system__table { width: 100%; border-collapse: collapse; }
.antera-system__table th, .antera-system__table td { padding: 10px 14px; border: 1px solid var(--wood-line); text-align: left; }
.antera-system__table th { background: var(--blue-deep); color: #fff; font-family: var(--font-display); }
.antera-system__table tbody tr:nth-child(even) { background: var(--surface-2); }
.antera-system__note { margin-top: 16px; padding: 14px 18px; border-left: 4px solid var(--gold); background: var(--surface-2); color: var(--text-dim); }
@media (max-width: 700px) { .antera-system__stats, .antera-system__grid { grid-template-columns: 1fr; } .antera-system__hero { padding: 22px; } }

/* --- topbar actions --- */

.topbar__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* 4. Buttons ============================================================= */

/*
 * Three-stop vertical gradient, a darker border of the same hue, and an inset
 * white highlight along the top edge. That combination is what reads as a
 * struck, tactile game button rather than a web rectangle.
 *
 * The default is carved wood; --primary is gold; --azure is heraldic blue.
 */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-radius: var(--radius);
    border: 1px solid var(--wood-line);
    background: linear-gradient(180deg, var(--wood) 0%, var(--wood-2) 50%, var(--wood-3) 100%);
    box-shadow: var(--bevel);
    color: var(--text-on-dark);
    text-shadow: var(--ink-drop);
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.16s ease, transform 0.08s ease;
}

.btn:hover {
    filter: brightness(1.13);
    color: #fff8e6;
}

/* pressing pushes the button into the page and kills the top highlight */
.btn:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(61, 35, 20, 0.45);
}

.btn--primary {
    border-color: var(--gold-dark);
    background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 45%, var(--gold-deep) 100%);
    color: #4a2c10;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

/*
 * Action variants. Same construction throughout — three-stop ramp, a LIGHTER
 * border of the same hue, light text with the ink drop. Only the hue changes,
 * and the hue is the message: blue signs in, green downloads, amber buys.
 */
.btn--azure {
    border-color: var(--azure);
    background: linear-gradient(180deg, var(--azure) 0%, var(--azure-2) 50%, var(--azure-3) 100%);
}

.btn--grass {
    border-color: var(--grass-line);
    background: linear-gradient(180deg, var(--grass) 0%, var(--grass-2) 50%, var(--grass-3) 100%);
}

/*
 * Amber runs lighter than the other ramps, so white text needs help. That help
 * is NOT --ink-outline: a 1px four-way outline is fine under a 60px hero title
 * but at 12.5px it is nearly as thick as the letter strokes, so it fills the
 * counters and reads as mud. Instead the highlight stop is pulled in tight —
 * the button keeps its bright top edge, but the label sits over the deeper
 * orange where a plain drop shadow is enough.
 */
.btn--amber {
    border-color: var(--amber-line);
    background: linear-gradient(180deg, var(--amber) 0%, var(--amber-2) 16%, var(--amber-3) 100%);
    color: #fff;
}

.btn--blurple {
    border-color: var(--blurple-line);
    background: linear-gradient(180deg, var(--blurple) 0%, var(--blurple-2) 50%, var(--blurple-3) 100%);
    color: #fff;
}

.btn--crimson {
    border-color: var(--crimson-line);
    background: linear-gradient(180deg, var(--crimson) 0%, var(--crimson-2) 50%, var(--crimson-3) 100%);
}

/* a quiet, borderless variant for secondary links in the wood bar */
.btn--ghost {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: none;
}

.btn--ghost:hover {
    background: rgba(255, 255, 255, 0.16);
}

.btn--lg {
    padding: 13px 30px;
    font-size: 13px;
}

.btn--block {
    width: 100%;
}

/* 5. Hero ================================================================ */

/* no bottom border: the scrim already dissolves into the page colour */
.hero {
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

/* Deliberately static — no drift, no parallax, no reaction to the cursor. */
.hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 28%;
}

/* --- hero scrim ----------------------------------------------------------
   Three stacked layers: top shade for the eyebrow, a left wedge so the title
   always has something dark behind it, and a fade into the page below.

   The strengths are variables because the right amount depends entirely on the
   artwork. Dim, low-contrast art needs heavy shading to read as a backdrop;
   vivid, saturated art gets muddy under the same treatment and needs the
   lighter set. Switch with hero_scrim in config.ini. */

.hero {
    --scrim-top: 0.78;
    --scrim-side: 0.90;
    --scrim-mid: 0.26;
    --scrim-warm: 0.10;
}

/* for bright, saturated artwork — shades only where text actually sits */
.hero--vivid {
    --scrim-top: 0.52;
    --scrim-side: 0.82;
    --scrim-mid: 0.06;
    --scrim-warm: 0.16;
}

/*
 * The side wedge is radial, never `linear-gradient(90deg, …)`. A horizontal
 * linear gradient holds its alpha all the way down and then stops dead at the
 * section boundary, drawing a visible step across the full width of the page —
 * which is exactly the seam this template shipped with once before.
 *
 * The vertical layer finishes on solid --void, so the artwork dissolves into
 * the page colour on its own and needs no dividing line to hide the join.
 */
.hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(8, 8, 10, var(--scrim-top)) 0%,
            rgba(8, 8, 10, var(--scrim-mid)) 38%,
            rgba(232, 213, 172, 0) 70%,
            var(--void) 100%),
        radial-gradient(96% 74% at 0% 26%, rgba(8, 8, 10, var(--scrim-side)), transparent 74%),
        radial-gradient(120% 80% at 50% 100%, rgba(201, 164, 100, var(--scrim-warm)), transparent 55%);
}

/*
 * Vivid art carries its own colour, so we let it come through at full
 * saturation rather than tinting it toward the page palette.
 */
.hero--vivid .hero__bg {
    filter: saturate(1.06);
}

/*
 * With no artwork of its own the hero is a window onto the same fixed art that
 * the rest of the page sits on, so it must not look like a separate band.
 *
 * Every layer here is radial and fades out well before the lower edge. A
 * `linear-gradient(90deg, …)` cannot be used for the side wedge: it holds its
 * alpha all the way down and then stops dead at the section boundary, which is
 * exactly what drew a line across the full width of the page.
 */
.hero--open .hero__scrim {
    background:
        radial-gradient(140% 90% at 50% 0%, rgba(8, 8, 10, 0.55), transparent 68%),
        radial-gradient(95% 78% at 0% 22%, rgba(8, 8, 10, 0.62), transparent 72%);
}


.hero__inner {
    position: relative;
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 72px 24px 40px;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
}

.hero__eyebrow::after {
    content: '';
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
}

.hero__title {
    font-family: var(--font-display);
    font-size: clamp(42px, 6.4vw, 78px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: 0.03em;
    margin: 0 0 14px;
    color: #fdf6e4;
    /* the four-way outline is what keeps display type readable over artwork */
    text-shadow: var(--ink-outline);
}

/*
 * Solid gold, not a background-clip gradient. Clipped text needs a transparent
 * fill, and a transparent fill lets the title's own dark outline show straight
 * through the glyphs — the word rendered muddy brown instead of gold. Flat gold
 * keeps the outline working and matches how the reference sites set display
 * type anyway.
 */
.hero__title em {
    font-style: normal;
    color: var(--gold-bright);
}

/* a short ornamental rule anchoring the lockup */
.hero__flourish {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 180px;
    margin: 0 0 20px;
    color: var(--gold);
}

.hero__flourish::before,
.hero__flourish::after {
    content: '';
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, var(--gold-deep), transparent);
}

.hero__flourish::before {
    background: linear-gradient(90deg, transparent, var(--gold-deep));
}

.hero__tagline {
    max-width: 540px;
    font-size: 15px;
    color: #ede1c8;
    text-shadow: var(--ink-drop);
    margin: 0 0 28px;
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 36px;
}

/* --- live stats strip, docked to the bottom of the hero --- */

/*
 * A near-opaque fill rather than a backdrop-filter: it looks the same over the
 * hero art and costs the compositor nothing to draw.
 */
/* a parchment plaque laid over the artwork */
.pulse {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--wood-line);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(251, 243, 224, 0.97), rgba(232, 213, 172, 0.97));
    box-shadow: var(--lift-2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    overflow: hidden;
}

.pulse__cell {
    position: relative;
    padding: 16px 20px;
    border-right: 1px solid var(--line-soft);
    transition: background 0.2s ease;
}

.pulse__cell:last-child {
    border-right: 0;
}

/* a gold cap that draws itself in on hover */
.pulse__cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transform: scaleX(0);
    transition: transform 0.3s var(--ease-out);
}

.pulse__cell:hover::before {
    transform: scaleX(1);
}

.pulse__cell:hover {
    background: rgba(217, 169, 78, 0.14);
}

.pulse__label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-bottom: 4px;
}

/* the numbers carry the colour here — the plaque behind them stays neutral */
.pulse__value {
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--navy-2);
}

.pulse__value--online {
    color: var(--grass-2);
}

.pulse__value--offline {
    color: var(--crimson-2);
}

/* each cell gets its own accent along the top, revealed on hover */
.pulse__cell:nth-child(1)::before { background: linear-gradient(90deg, transparent, var(--grass-line), transparent); }
.pulse__cell:nth-child(2)::before { background: linear-gradient(90deg, transparent, var(--azure), transparent); }
.pulse__cell:nth-child(3)::before { background: linear-gradient(90deg, transparent, var(--amber), transparent); }
.pulse__cell:nth-child(4)::before { background: linear-gradient(90deg, transparent, var(--gold), transparent); }

.pulse__sub {
    font-size: 11.5px;
    color: var(--text-mute);
}

/* the breathing dot that signals a live server */
.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--online);
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(111, 191, 115, 0.6);
    animation: dot-pulse 2.2s infinite;
}

.dot--off {
    background: var(--offline);
    animation: none;
}

@keyframes dot-pulse {
    70% { box-shadow: 0 0 0 8px rgba(111, 191, 115, 0); }
    100% { box-shadow: 0 0 0 0 rgba(111, 191, 115, 0); }
}

/* 6. Layout ============================================================== */

.shell {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 40px 24px 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail);
    gap: 28px;
    align-items: start;
}

.col-main {
    min-width: 0;
}

/* --- news ticker ---------------------------------------------------------
   A thin strip above the news, deliberately lighter than a panel: no wood
   header, no gold frame, so it reads as a footnote rather than a section. */

.ticker {
    display: flex;
    align-items: stretch;
    margin-bottom: 20px;
    background: var(--parch-hi);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--lift-1);
    overflow: hidden;
}

.ticker__label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 0 14px;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-3) 100%);
    color: var(--gold-bright);
    text-shadow: var(--ink-drop);
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ticker__label i {
    font-size: 12px;
}

.ticker__list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 0;
}

.ticker__item + .ticker__item {
    border-top: 1px solid var(--line-soft);
}

.ticker__head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    box-shadow: none;
    text-align: left;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
}

.ticker__head:hover {
    background: rgba(30, 73, 118, 0.08);
    filter: none;
}

.ticker__date {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
}

.ticker__short {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticker__chevron {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-mute);
    transition: transform 0.2s var(--ease-out);
}

.ticker__item.is-open .ticker__chevron {
    transform: rotate(180deg);
}

.ticker__full {
    display: none;
    padding: 2px 12px 12px 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-dim);
}

.ticker__item.is-open .ticker__full {
    display: block;
}

.ticker__item.is-open .ticker__short {
    white-space: normal;
    overflow: visible;
}

.ticker__admin {
    display: inline-flex;
    gap: 10px;
    margin-left: 8px;
    font-size: 11.5px;
}

@media (max-width: 620px) {
    /* the label rail costs too much width on a phone */
    .ticker__label {
        display: none;
    }

    .ticker__date {
        display: none;
    }
}

/* 7. Panels ============================================================== */

.panel {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--lift-1);
    margin-bottom: 24px;
    /* also contains floats from page content we do not control */
    overflow: hidden;
}

/* inner hairline — the classic double-frame of a bound tome */
.panel::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(201, 164, 100, 0.07);
    border-radius: 5px;
    pointer-events: none;
}

.panel__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy-3) 100%);
    border: 2px solid var(--gold-deep);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow:
        inset 0 0 0 1px var(--navy-line),
        inset 0 2px 0 1px rgba(255, 255, 255, 0.13);
    margin: -1px -1px 0;
}

.panel__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--gold-bright);
    text-shadow: var(--ink-drop);
    margin: 0;
}

/* a diamond bullet, rotated square — no glyph, no image */
.panel__title::before {
    content: '';
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    background: var(--gold);
    transform: rotate(45deg);
}

.panel__action {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #e0d2b4;
    text-shadow: var(--ink-drop);
}

.panel__action:hover {
    color: var(--gold-bright);
}

.panel__body {
    padding: 20px;
}

.panel__body--flush {
    padding: 0;
}

/* the page heading used on every non-home page */
.pagehead {
    position: relative;
    padding: 34px 0 14px;
    margin-bottom: 26px;
}

.pagehead::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--line-strong), transparent 60%);
}

.pagehead__title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 31px;
    margin: 0;
}

.pagehead__title::before {
    content: '';
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    background: var(--gold);
    transform: rotate(45deg);
}

/* 8. Right rail ========================================================== */

.rail {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 84px;
}

.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--lift-1);
    overflow: hidden;
    /* only transform and border move — the shadow is static */
    transition: transform 0.25s var(--ease-out), border-color 0.25s ease;
}

.card:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
}

.card__head {
    position: relative;
    padding: 9px 14px;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy-3) 100%);
    border: 2px solid var(--gold-deep);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow:
        inset 0 0 0 1px var(--navy-line),
        inset 0 2px 0 1px rgba(255, 255, 255, 0.13);
    margin: -1px -1px 0;
    justify-content: center;
    letter-spacing: 0.14em;
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-bright);
    text-shadow: var(--ink-drop);
    display: flex;
    align-items: center;
    gap: 8px;
}

.card__head i {
    font-size: 13px;
    color: var(--gold);
}

.card__body {
    padding: 16px;
}

.card__body--flush {
    padding: 0;
}

/* --- leaderboard --- */

.ladder {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ladder__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 14px 9px 12px;
    border-bottom: 1px solid var(--line-soft);
    border-left: 2px solid transparent;
    transition: background 0.15s ease, border-left-color 0.15s ease;
}

.ladder__row:last-child {
    border-bottom: 0;
}

.ladder__row:hover {
    background: var(--surface-2);
    border-left-color: var(--gold);
}

/* --- the podium: ranks 1-3 get struck-metal medals, the rest a plain numeral */

.ladder__rank {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-mute);
}

.ladder__row--1 .ladder__rank,
.ladder__row--2 .ladder__rank,
.ladder__row--3 .ladder__rank {
    border-radius: 50%;
    color: #201703;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
    box-shadow: var(--lift-1), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.ladder__row--1 .ladder__rank { background: var(--metal-gold); }
.ladder__row--2 .ladder__rank { background: var(--metal-silver); }
.ladder__row--3 .ladder__rank { background: var(--metal-bronze); }

/* first place also gets a warm wash and a slightly taller portrait */
.ladder__row--1 {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.09), transparent 70%);
    border-left-color: var(--rank-1);
}

/*
 * First place is marked by the gold wash, the medal and the bolder name — not
 * by a larger sprite. Enlarging the frame would only reveal more of the
 * transparent canvas, since the sprite renders at native size.
 */
.ladder__row--1 .ladder__name {
    font-weight: 600;
    color: var(--text);
}

.ladder__row--1 .ladder__level {
    font-size: 17px;
    color: #8a6410;
}

/* --- outfit sprites ------------------------------------------------------
   outfit-images.ots.me returns a 64×64 canvas with the character drawn only in
   the bottom-RIGHT 32×32 quadrant; the other three quadrants are transparent.
   Measured across five looktypes, that placement is consistent.

   So the frame crops to that quadrant instead of scaling the whole canvas —
   scaling the canvas is what pushed the body out of view and left just the top
   of the head showing.

   object-fit: none renders at native size, and the bottom-right anchor puts the
   quadrant in frame. Native size also keeps the pixels 1:1: any non-integer
   scale would soften pixel art, which is why the sprite is not enlarged. */

.ladder__outfit {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    overflow: hidden;
}

.ladder__outfit img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: none;
    object-position: 100% 100%;
    image-rendering: pixelated;
}

/*
 * Players wearing a monster look type get the whole canvas scaled to fit
 * instead: their sprite fills it, so the quadrant crop above would behead them.
 * index.php decides which of the two applies from the server's outfits.xml.
 */
.ladder__outfit img.is-full {
    object-fit: contain;
    object-position: center bottom;
}

.ladder__info {
    min-width: 0;
    flex: 1;
}

.ladder__name {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ladder__name {
    color: var(--navy-2);
}

.ladder__name:hover {
    color: var(--azure);
}

.ladder__meta {
    font-size: 11px;
    color: var(--text-mute);
}

/* a deep bronze rather than bright gold — bright gold vanishes on parchment */
.ladder__level {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: #8a6410;
    flex-shrink: 0;
}

/* --- gladiator arena ----------------------------------------------------
   Reuses .ladder, so the two leaderboards stay visually consistent. What is
   different is the metric on the right and the progress line under the name,
   which shows how far through the arena the run got. */

.ladder__wave {
    flex-shrink: 0;
    text-align: right;
    font-family: var(--font-display);
    line-height: 1.1;
    color: #8a6410;
}

.ladder__wave b {
    font-size: 16px;
    font-weight: 700;
}

.ladder__wave small {
    font-size: 10.5px;
    color: var(--text-mute);
}

.wavebar {
    display: block;
    height: 3px;
    margin-top: 4px;
    border-radius: 2px;
    background: rgba(93, 78, 55, 0.18);
    overflow: hidden;
}

.wavebar__fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--amber-2), var(--amber));
}

/* the leader's bar picks up the gold of their medal */
.ladder__row--1 .wavebar__fill {
    background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}

/* --- boosted creature / boss --- */

.boosted {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.boosted__cell {
    padding: 14px 10px;
    text-align: center;
    border-right: 1px solid var(--line-soft);
}

.boosted__cell:last-child {
    border-right: 0;
}

/* the sprite stands on a pool of light rather than floating in the dark */
.boosted__art {
    position: relative;
    height: 68px;
    display: grid;
    place-items: center;
    margin-bottom: 6px;
}

.boosted__art::before {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 60px;
    height: 16px;
    transform: translateX(-50%);
    background: radial-gradient(50% 50%, rgba(201, 164, 100, 0.30), transparent 70%);
}

.boosted__art img {
    position: relative;
    max-height: 64px;
    image-rendering: pixelated;
    transition: transform 0.3s var(--ease-out);
}

/*
 * No crop here. Boosted creatures and bosses are monster look types, whose
 * sprites fill nearly the whole 64x64 canvas (boss 1062 spans 57x60), so the
 * bottom-right quadrant crop used by the leaderboard would cut off their head
 * and left side. The full canvas is shown as-is.
 */

.boosted__cell:hover .boosted__art img {
    transform: translateY(-3px) scale(1.06);
}

.boosted__kind {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.boosted__name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
}

/* --- countdown --- */

.countdown {
    position: relative;
    font-family: var(--font-display);
    font-size: 31px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #7a4f14;
    text-align: center;
    padding: 14px 0 12px;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
    background: radial-gradient(70% 100% at 50% 50%, rgba(217, 169, 78, 0.22), transparent 70%);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

.card__note {
    font-size: 11.5px;
    color: var(--text-mute);
    text-align: center;
}

/* --- stat rows --- */

.statlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.statlist li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
}

/* O risco final so sai quando a lista encerra o card - e ai que ele ficaria
   solto sobre o rodape. Quando vem conteudo depois (o medidor do Gladiador),
   a ultima linha mantem a borda, que ali passa a ser o separador entre a lista
   e o que vem abaixo.

   Escrito assim, e nao com uma classe extra no HTML, porque o que decide nao e
   a lista: e a posicao dela dentro do card. Uma lista de uma linha so, como a
   do Gladiador, cai no :last-child sem nunca ter tido separador algum. */
.card__body > .statlist:last-child li:last-child {
    border-bottom: 0;
}

.statlist span:first-child {
    color: var(--text-dim);
}

.statlist span:last-child {
    color: var(--navy-2);
    font-weight: 600;
}

/* --- discord --- */

.discord {
    text-align: center;
}

.discord__text {
    font-size: 13px;
    color: var(--text-dim);
    margin: 0 0 14px;
}

/* 9. Footer ============================================================== */

.footer {
    border-top: 2px solid var(--gold-deep);
    background: linear-gradient(180deg, var(--wood) 0%, var(--wood-3) 100%);
    color: var(--text-on-dark);
    margin-top: 40px;
}

.footer__inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 34px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    font-size: 12.5px;
    color: #ddd0b2;
    text-shadow: var(--ink-drop);
}

.footer__social {
    display: flex;
    gap: 10px;
}

.footer__social a {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    color: #ede1c8;
    font-size: 14px;
}

.footer__social a:hover {
    border-color: var(--gold);
    background: var(--gold);
    color: #4a2c10;
}

/* back to top */
.totop {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 42px;
    height: 42px;
    display: none;
    place-items: center;
    background: linear-gradient(180deg, var(--wood) 0%, var(--wood-3) 100%);
    border: 1px solid var(--wood-line);
    box-shadow: var(--bevel), var(--lift-2);
    border-radius: 50%;
    color: var(--gold-bright);
    cursor: pointer;
    z-index: 300;
}

.totop.is-visible {
    display: grid;
}

/* 10. Mobile ============================================================= */

.navtoggle {
    display: none;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius);
    color: var(--gold-bright);
    width: 40px;
    height: 36px;
    cursor: pointer;
    font-size: 16px;
}

@media (max-width: 1080px) {
    .shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .rail {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

@media (max-width: 860px) {
    .navtoggle {
        display: block;
        margin-left: auto;
    }

    .nav {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px 0 40px;
        background: linear-gradient(180deg, var(--wood-2), var(--wood-3));
        border-top: 1px solid var(--wood-line);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.24s ease;
    }

    .nav.is-open {
        transform: translateX(0);
    }

    .nav__link {
        padding: 14px 22px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    }

    .nav__link::after {
        display: none;
    }

    /* on mobile the dropdown is a plain expanded list, no hover state */
    .nav__drop {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: rgba(0, 0, 0, 0.22);
        display: none;
    }

    .nav__item.is-open .nav__drop {
        display: block;
    }

    .topbar__actions .btn--label {
        display: none;
    }

    .pulse {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero {
        min-height: 380px;
    }

    .hero__inner {
        padding: 56px 20px 28px;
    }

    .shell {
        padding: 26px 16px 48px;
    }
}

/* =====================================================================
   COLUNA ESQUERDA + PAINEL DO GLADIADOR
   ===================================================================== */

/* De duas colunas para tres. A esquerda e mais estreita que a direita: ela
   carrega uma lista compacta, enquanto a direita tem cards com imagem. */
.shell:has(.rail--left) {
    grid-template-columns: var(--rail-left) minmax(0, 1fr) var(--rail);
    /* 12px, como no RubinOT. Com tres colunas o vao e cobrado duas vezes,
       entao cada pixel economizado aqui vai direto para o centro - foi daqui
       que veio a maior parte da diferenca entre os dois layouts. */
    gap: 12px;
}

.rail--left .card__body {
    padding-bottom: 10px;
}

/*
 * Sem isto o tooltip das instancias sai POR BAIXO da coluna central.
 *
 * A causa nao e o valor do z-index do tooltip: `.rail` e position:sticky, e
 * sticky CRIA CONTEXTO DE EMPILHAMENTO. Com isso o z-index do tooltip so
 * ordena dentro da propria lateral. Quem decide o que fica na frente e a
 * lateral inteira - e com z-index:auto ela pinta na ordem do DOM, onde
 * .col-main vem depois e portanto por cima.
 *
 * O valor precisa apenas vencer a coluna central (que e estatica) e ficar
 * abaixo da topbar (200), para o menu continuar clicavel com um tooltip
 * aberto.
 *
 * No empilhado (<=1320px) a lateral vira position:static: ai nao ha contexto
 * nenhum, o z-index do proprio tooltip passa a valer e esta regra fica
 * inerte - por isso ela nao precisa de contraparte no media query.
 */
.rail--left {
    z-index: 5;
}

/* As cores de estado saem da paleta do template, nao de valores soltos. O
   corpo do card e pergaminho claro: os tons de tema escuro que estavam aqui
   (#4ade80, #f87171) ficavam lavados sobre ele. */
.glad-status--on {
    color: var(--grass-2);
    font-weight: 700;
}

.glad-status--off {
    color: var(--crimson);
    font-weight: 700;
}

/* --- medidor de ocupacao (Gladiador e Instancias) ---------------------- */

/*
 * COMPRIMENTO = quanto esta OCUPADO.  COR = quanta pressao ja existe.
 * Vazia quando esta tudo parado; cheia e vermelha quando lotou - o estado
 * mais importante e tambem o mais visivel. A regra das faixas mora em
 * meter.php, que e quem escolhe o modificador.
 */
.meter {
    position: relative;
    height: 12px;
    border-radius: 999px;
    background: var(--parch-hi);
    border: 1px solid var(--wood-line);
    /* A sombra interna e o que faz a trilha parecer escavada, em vez de um
       retangulo desenhado por cima do card. */
    box-shadow:
        inset 0 2px 3px rgba(61, 35, 20, 0.22),
        inset 0 -1px 0 rgba(255, 255, 255, 0.5);
    overflow: hidden;
}

.meter--slim {
    height: 8px;
}

.meter__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    /* Mesmo brilho superior dos botoes do template: e ele que da volume e
       evita o aspecto de faixa chapada. */
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 55%);
    /* Sem transition: a largura e a cor vem prontas do servidor a cada
       carregamento, e nada em JS muda essas classes depois. Uma transicao
       aqui nunca chegaria a rodar - so atrapalharia se um dia alguem for
       inspecionar a cor computada. Se um dia o painel atualizar sozinho por
       AJAX, e aqui que a animacao entra. */
}

/* Ate 60% ocupado: sobra vaga. */
.meter__fill--ok {
    background-color: var(--grass-2);
}

/* De 60% a 99%: enchendo. */
.meter__fill--warn {
    background-color: var(--amber-2);
}

/*
 * 100% ocupado: barra cheia e vermelha, com a trilha acompanhando na
 * moldura. Lotado e o unico estado em que nao ha o que medir de vago - a
 * barra ja esta no teto - entao a cor sai tambem para a borda.
 */
.meter__fill--full {
    background-color: var(--crimson);
}

.meter:has(.meter__fill--full) {
    background: rgba(192, 57, 43, 0.16);
    border-color: var(--crimson);
}

/* --- destaque numerico do Gladiador ------------------------------------ */

.gauge {
    margin-top: 12px;
}

.gauge__label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mute);
}

/*
 * O numero e o que a pessoa veio ver, entao ele e o maior elemento do card.
 * Era essa hierarquia que faltava: antes, 18 linhas iguais competiam entre si
 * e nenhuma se destacava.
 */
.gauge__value {
    margin: 2px 0 8px;
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
    color: var(--navy-2);
    /* tabular-nums: digitos de mesma largura, entao o numero nao "pula" ao
       passar de 9 para 10. */
    font-variant-numeric: tabular-nums;
}

.gauge__total {
    margin-left: 5px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-mute);
}

.gauge__note {
    margin-top: 7px;
    font-size: 11.5px;
    color: var(--text-dim);
}

/* --- lista das hunts instanciadas -------------------------------------- */

.hunts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.hunts__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 5px;
}

.hunts__name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    /* Nome longo encolhe com reticencias em vez de empurrar o contador para
       fora da coluna estreita. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hunts__count {
    flex: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy-2);
    font-variant-numeric: tabular-nums;
}

.hunts__total {
    font-weight: 600;
    color: var(--text-mute);
}

/*
 * O numero acompanha a faixa do medidor: verde enquanto sobra vaga, laranja
 * quando esta enchendo, vermelho quando lota. Assim ate quem nao olha para a
 * barra percebe a pressao pelo proprio numero.
 */
.gauge__value--ok,
.hunts__count--ok {
    color: var(--grass-2);
}

.gauge__value--warn,
.hunts__count--warn {
    color: var(--amber-2);
}

.gauge__value--full,
.hunts__count--full {
    color: var(--crimson);
}

/* --- tooltip das instancias -------------------------------------------- */

/*
 * O card tem overflow:hidden (e o que arredonda o cabecalho), entao um
 * tooltip que sai dele seria cortado. Este modificador libera o transbordo
 * so onde ha tooltip, sem mexer no resto dos cards.
 */
.card--tips {
    overflow: visible;
}

.hunts__row {
    position: relative;
}

/* Nao rouba o contorno de foco do teclado, mas tambem nao desenha moldura
   pontilhada em quem so passou o mouse. */
.hunts__row:focus {
    outline: none;
}

.hunts__row:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 3px;
    border-radius: 3px;
}

.tip {
    position: absolute;
    /* A lateral esquerda tem 226px; o tooltip abre para a DIREITA, onde esta
       a coluna central e sempre ha espaco. */
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    width: 208px;
    padding: 11px 13px;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 60%, var(--navy-3) 100%);
    border: 2px solid var(--gold-deep);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
    /* 150: acima dos cards, abaixo da topbar (200) - o menu continua
       clicavel mesmo com um tooltip aberto. */
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.16s ease, visibility 0.16s;
    /* O tooltip nunca deve roubar o mouse de quem esta so passando por cima. */
    pointer-events: none;
}

/* A setinha, feita com borda - sem imagem e sem elemento extra no HTML. */
.tip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    margin-top: -7px;
    border: 7px solid transparent;
    border-right-color: var(--gold-deep);
}

.hunts__row:hover .tip,
.hunts__row:focus-visible .tip {
    opacity: 1;
    visibility: visible;
}

.tip__title {
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-bright);
    text-shadow: var(--ink-drop);
    padding-bottom: 7px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(217, 169, 78, 0.28);
}

/* Rotulo em cima, valor embaixo - igual ao layout pedido. Em duas colunas,
   "Tempo maximo" e "3 horas (4 horas Ascendente)" nao caberiam em 208px. */
.tip__list {
    margin: 0;
    display: grid;
    gap: 7px;
}

.tip__list dt {
    font-size: 10px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(240, 230, 210, 0.62);
}

.tip__list dd {
    margin: 1px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-on-dark);
}

.tip__vip {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    font-weight: 600;
    color: var(--gold);
}

/*
 * Layout empilhado: a lateral vira uma faixa no topo e o ultimo card fica
 * colado na borda direita da tela - abrir para o lado jogaria o tooltip para
 * fora do viewport. Aqui ele passa a abrir ACIMA da linha, centralizado.
 */
@media (max-width: 1320px) {
    .tip {
        left: 50%;
        right: auto;
        top: auto;
        bottom: calc(100% + 12px);
        transform: translateX(-50%);
    }

    .tip::before {
        right: auto;
        left: 50%;
        top: 100%;
        margin: 0 0 0 -7px;
        border-right-color: transparent;
        border-top-color: var(--gold-deep);
    }
}

/* Quem prefere menos animacao nao ganha fade, mas continua vendo o tooltip. */
@media (prefers-reduced-motion: reduce) {
    .tip {
        transition: none;
    }
}

/* 1320, nao 1080 como o resto do layout: tres colunas precisam de mais largura
   que duas. O shell tem 1304px, entao abaixo de ~1320 nao cabe mais e vale
   empilhar em vez de espremer o centro entre as duas laterais. */
@media (max-width: 1320px) {
    .shell:has(.rail--left) {
        grid-template-columns: minmax(0, 1fr);
    }

    .rail--left {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        /* Os dois cards da lateral (Gladiador e Instancias) ficam lado a lado
           quando o layout empilha, em vez de um embaixo do outro. */
        gap: 12px;
        align-items: start;
    }
}

/* Top characters dentro da lateral estreita.
   Com o rail em 210px, o nome sobrava com 48px e ate "Machadao" era cortado
   pelo ellipsis. As partes de largura fixa (rank, outfit, level, vaos e
   padding) comiam 158 dos 208px do row. Aqui elas sao apertadas para devolver
   ~26px ao nome, sem mexer na largura da coluna.
   Escopo em .rail de proposito: a pagina cheia de highscores usa as mesmas
   classes e la ha espaco de sobra. */
.rail .ladder__row {
    gap: 7px;
    padding: 8px 10px 8px 8px;
}

.rail .ladder__rank {
    min-width: 18px;
}

.rail .ladder__level {
    font-size: 14px;
}

/* ============================================================
   ASCENDENTE
   ============================================================
   Destaque das contas com Ascendente ativo. O status vem do kv_store do
   servidor, decodificado em system/libs/ascendente.php.

   O tema e CLARO (pergaminho), entao o dourado precisa ESCURECER a linha,
   nao clarea-la: texto dourado claro sobre creme fica ilegivel. As cores
   saem dos tokens do proprio tema para nao destoar.

   O brilho e um pseudo-elemento que atravessa por cima, e nao animacao no
   fundo: assim o texto nunca muda de contraste durante o ciclo e continua
   legivel o tempo todo.

   prefers-reduced-motion desliga a passagem. Movimento continuo em lista
   longa incomoda quem tem sensibilidade, e o dourado sozinho ja comunica. */

.asc-row {
    position: relative;
    background-image: linear-gradient(90deg,
        rgba(217, 169, 78, .34) 0%,
        rgba(217, 169, 78, .16) 55%,
        rgba(217, 169, 78, .05) 100%);
    box-shadow: inset 4px 0 0 var(--gold-deep, #a67c2e);
}

/* O texto NAO e recolorido - fica no marrom escuro do tema, que e o unico
   tom com contraste suficiente sobre o pergaminho dourado. So o nome ganha
   peso, que ja basta para destacar sem sacrificar leitura.

   Dois filhos possiveis porque o destaque atende duas estruturas: <td> nas
   tabelas de highscores e online, e os spans do .ladder__row no card de Top
   characters. O z-index poe o conteudo acima do brilho. */
.asc-row > td,
.asc-row > .ladder__rank,
.asc-row > .ladder__outfit,
.asc-row > .ladder__info,
.asc-row > .ladder__level {
    position: relative;
    z-index: 1;
}

.asc-row > td a,
.asc-row .ladder__name {
    font-weight: bold;
    color: var(--gold-dark, #8b6524);
}

/* --- Faisca correndo em volta do nome -------------------------------------
   Um gradiente conico girando, recortado para aparecer SO na moldura: o
   ponto brilhante parece correr pela borda como um rastilho de polvora.

   O recorte e feito com duas mascaras em XOR - uma do tamanho todo, outra
   so do conteudo. O que sobra e o anel entre as duas, que e a espessura da
   borda. E o unico jeito de ter borda em gradiente com canto arredondado.

   A rotacao usa @property porque angulo em custom property so anima se o
   navegador souber que aquilo E um angulo. Onde nao houver suporte
   (Firefox antigo), a faisca fica parada num ponto - degrada para uma
   borda dourada estatica, que continua coerente. */
@property --asc-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.asc-row > td a,
.asc-row .ladder__name {
    position: relative;
    display: inline-block;
    padding: 1px 7px;
    border-radius: 3px;
}

.asc-row > td a::before,
.asc-row .ladder__name::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;

    /* O arco curto (uns 50 graus dos 360) e o que faz parecer uma faisca em
       vez de um anel girando. As tres paradas dao o rastro: laranja atras,
       branco no nucleo, dourado na frente. */
    background: conic-gradient(from var(--asc-angle),
        transparent 0deg,
        transparent 310deg,
        rgba(255, 140, 30, .55) 330deg,
        #ffe9a8 348deg,
        #fffdf2 353deg,
        rgba(255, 200, 90, .70) 357deg,
        transparent 360deg);

    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    animation: asc-spark 2.6s linear infinite;
}

@keyframes asc-spark {
    to { --asc-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
    .asc-row > td a::before,
    .asc-row .ladder__name::before {
        animation: none;
    }
}

/* O .ladder__row ja usa border-left para o realce de hover, entao a barra
   dourada vai nela em vez do box-shadow - assim os dois nao brigam. */
li.asc-row {
    border-left-color: var(--gold-deep, #a67c2e);
    box-shadow: none;
}

.asc-row::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg,
        transparent 35%,
        rgba(255, 252, 240, .30) 48%,
        rgba(255, 255, 255, .55) 50%,
        rgba(255, 252, 240, .30) 52%,
        transparent 65%);
    background-size: 250% 100%;
    animation: asc-shine 5.5s linear infinite;
}

@keyframes asc-shine {
    /* Entra pela direita e sai pela esquerda. A folga ate 100% deixa um
       intervalo entre passagens - sem ela pareceria um piscar constante. */
    0%   { background-position: 150% 0; }
    40%  { background-position: -50% 0; }
    100% { background-position: -50% 0; }
}

/* Selo do perfil e da area da conta. Fundo escuro de proposito: e um
   elemento pequeno, e sobre pergaminho o contraste invertido chama mais
   atencao do que mais dourado sobre dourado. */
.asc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border: 1px solid var(--gold, #d9a94e);
    border-radius: 3px;
    background: linear-gradient(180deg, #6b5416, #3b2f0d);
    color: var(--gold-bright, #f2cd7c);
    font-weight: bold;
    font-size: 11px;
    letter-spacing: .5px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
    white-space: nowrap;
    vertical-align: middle;
}

.asc-badge__days {
    font-weight: normal;
    color: #d3bd7d;
}

@media (prefers-reduced-motion: reduce) {
    .asc-row::after { animation: none; }
}

/* Progresso publico da unica colecao da loja: os tres Pegasus. */
.pegasus-showcase {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 4px 10px 4px 6px;
    border: 1px solid rgba(166, 124, 46, .65);
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(217, 169, 78, .22), rgba(217, 169, 78, .06));
}

.pegasus-showcase__icons { display: inline-flex; align-items: center; }
.pegasus-showcase__mount {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45));
}
.pegasus-showcase__mount + .pegasus-showcase__mount { margin-left: -7px; }
.pegasus-showcase__mount--locked { opacity: .22; filter: grayscale(1); }
.pegasus-showcase__text { display: flex; flex-direction: column; line-height: 1.2; }
.pegasus-showcase__text strong { color: var(--gold-dark, #8b6524); }
.pegasus-showcase__text small { color: #6c604b; }

.pegasus-showcase--complete::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 2px;
    pointer-events: none;
    background: conic-gradient(from var(--asc-angle), transparent 0deg, transparent 310deg, rgba(255, 140, 30, .55) 330deg, #ffe9a8 348deg, #fffdf2 353deg, rgba(255, 200, 90, .70) 357deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: asc-spark 2.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .pegasus-showcase--complete::before { animation: none; }
}

/* ========================================================================== 
   Perfil de Ascendente — Character Information e Character Details

   Mesma estrutura e mesmo conteudo do perfil comum; muda so a moldura, que e
   como os cards de jogo marcam categoria: o retangulo continua, o material
   sobe. Nada de mudar de cor - o tema e pergaminho com marinho e dourado, e um
   segundo tom aqui pareceria enxerto.

   A flag vem pronta do characters.php:489 (ascendente_active). O twig so
   acrescenta .asc-panel nos dois quadros.
   ========================================================================== */

.TableContainer.asc-panel {
    position: relative;
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    /* dois planos: o de baixo pinta a moldura em degrade, o de cima devolve o
       pergaminho ao miolo. E o que da fio dourado sem repintar o conteudo. */
    /* !important porque o legacy.css zera background-image em .TableContainer
       para matar os GIFs fatiados do tema antigo - e isso levava junto o
       degrade da moldura. */
    background:
        linear-gradient(var(--parch-hi), var(--parch-hi)) padding-box,
        linear-gradient(150deg, var(--gold-deep), var(--gold-bright) 42%, var(--gold) 62%, var(--gold-deep)) border-box !important;
    box-shadow:
        0 0 0 1px rgba(166, 124, 46, 0.35),
        0 2px 14px rgba(166, 124, 46, 0.28);
}

/* o cabecalho fica mais fundo, para o dourado da moldura ter contra o que brilhar */
.TableContainer.asc-panel .Text {
    background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy-3) 60%, #0b1d31 100%) !important;
    border-color: var(--gold) !important;
}

.TableContainer.asc-panel .Text::after {
    content: 'Ascendente';
    margin-left: auto;
    padding: 2px 9px;
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4a2c10;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
    border-radius: 999px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}

/* respiro entre a moldura e o corpo, senao o conteudo encosta no fio */
.TableContainer.asc-panel .InnerTableContainer {
    border: 0;
    background: transparent;
}

@media (prefers-reduced-motion: no-preference) {
    .TableContainer.asc-panel {
        animation: asc-panel-pulso 4.5s ease-in-out infinite;
    }

    @keyframes asc-panel-pulso {
        0%, 100% { box-shadow: 0 0 0 1px rgba(166, 124, 46, 0.35), 0 2px 14px rgba(166, 124, 46, 0.28); }
        50%      { box-shadow: 0 0 0 1px rgba(166, 124, 46, 0.45), 0 2px 20px rgba(217, 169, 78, 0.42); }
    }
}