@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-latin-ext.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-latin.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Variable Placeholder"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }

:root {
    color-scheme: dark;
    font-family: "Inter Variable", "Inter Variable Placeholder", sans-serif;
    font-feature-settings: "cv11", "ss01";
    color: #e8dcc4;
    background: #14100c;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    --surface: #211a13;
    --surface-raised: #2b2218;
    --line: #4a3a27;
    --muted: #a08d70;
    --accent: #e0b255;
    --accent-strong: #f4cf7a;
    --accent-deep: #8a5f1c;
    --ink: #1a120a;
    --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; scroll-behavior: smooth; }

body { margin: 0; min-width: 320px; }

a { color: inherit; text-decoration: none; }

.site-header, main, .site-footer {
    width: min(1120px, calc(100% - 48px));
    margin-inline: auto;
}

.site-header {
    min-height: 102px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
}

.wordmark { font-size: 19px; font-weight: 800; letter-spacing: -.075em; }
.wordmark span { color: var(--accent); }
.header-logo { display: block; width: 78px; height: 70px; object-fit: contain; filter: drop-shadow(0 3px 5px #000b); }
.site-header nav { display: flex; flex: 1 1 auto; min-width: 0; justify-content: center; align-items: center; gap: 6px; color: #a4ada4; font-size: 11px; }
.header-podium { display: flex; flex: 0 0 372px; justify-content: center; gap: 8px; margin-inline: 12px; }
.podium-place { position: relative; display: grid; flex: 1 1 0; justify-items: center; gap: 3px; min-width: 0; padding: 8px 6px 7px; border: 1px solid var(--podium-border); border-radius: 6px; background: linear-gradient(160deg, var(--podium-surface), #17110b); box-shadow: inset 0 0 0 1px #0008, 0 2px 8px #000a; transition: filter .15s, transform .15s; }
.podium-gold { --podium-border: #d7a937; --podium-surface: #6b4e14; --podium-medal: #ffd95d; }
.podium-silver { --podium-border: #aeb8c2; --podium-surface: #434b53; --podium-medal: #e2e7ed; }
.podium-bronze { --podium-border: #b87342; --podium-surface: #53301e; --podium-medal: #e7a16d; }
.podium-medal { position: absolute; top: 5px; left: 5px; z-index: 1; display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--podium-medal); border-radius: 50%; background: #17110bee; color: var(--podium-medal); font: 700 10px/1 var(--serif); }
.podium-sprite { position: relative; display: block; width: 48px; height: 48px; overflow: hidden; border-radius: 8px; background: radial-gradient(circle, #ffffff1f, #0000 70%); }
.podium-outfit { position: absolute; top: -77.78%; left: -77.78%; width: 177.78%; max-width: none; height: auto; image-rendering: pixelated; filter: drop-shadow(0 2px 2px #000); }
.podium-details { display: grid; justify-items: center; min-width: 0; max-width: 100%; gap: 2px; }
.podium-name { max-width: 100%; overflow: hidden; color: #f4e8cc; font: 700 11px/1.2 var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.podium-level { max-width: 100%; overflow: hidden; color: var(--podium-medal); font-size: 8px; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.header-podium .podium-place:hover { filter: brightness(1.18); transform: translateY(-1px); }
.site-account { display: flex; flex-shrink: 0; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.site-account form { margin: 0; }
.site-account-link, .site-account button, .site-login-link { padding: 8px 10px; border: 1px solid var(--accent-deep); background: transparent; color: var(--accent-strong); font: inherit; font-size: 9px; font-weight: 700; letter-spacing: .1em; cursor: pointer; }
.site-account-link:hover, .site-account-link.is-active, .site-account button:hover, .site-login-link:hover { border-color: var(--accent); color: #fff0c6; }
.site-account-link:focus-visible, .site-account button:focus-visible, .site-login-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.site-header nav a:hover, .text-link:hover, .panel-link:hover { color: var(--accent); }
.site-header nav a.is-active, .nav-dropdown-toggle.is-active { color: var(--accent); }

.nav-dropdown { position: relative; }
.nav-dropdown-toggle { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; }
.nav-dropdown-toggle:hover { color: var(--accent); }
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 22px);
    left: -18px;
    z-index: 10;
    min-width: 180px;
    display: none;
    flex-direction: column;
    padding: 8px 0;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 18px 40px #0009;
}
.nav-dropdown-menu::before { content: ""; position: absolute; inset: -24px 0 auto; height: 24px; }
.nav-dropdown-menu a { padding: 11px 18px; white-space: nowrap; }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu, .nav-dropdown.is-open .nav-dropdown-menu { display: flex; }

.page-head { padding: 44px 0 6px; }
.page-head h1 { margin: 12px 0 0; font-size: clamp(32px, 5vw, 48px); font-weight: 550; letter-spacing: -.06em; line-height: 1; }
.page-grid { display: grid; gap: 14px; padding: 24px 0 60px; }
.panel-link { color: var(--muted); }

.explore-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding: 0 0 60px; }
.explore-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--line); background: var(--surface); }
.explore-card strong { font-size: 15px; font-weight: 550; letter-spacing: -.03em; }
.explore-card:hover { border-color: var(--accent); }
.edition, .panel-count { color: var(--muted); font-size: 9px; letter-spacing: .15em; }

.hero {
    min-height: 390px;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    border-bottom: 1px solid var(--line);
}

.hero-copy { padding: 65px 0 72px; }
.eyebrow { margin: 0; color: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: .17em; }
.pulse, .status-indicator, .online-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.pulse { margin-right: 8px; box-shadow: 0 0 14px #c4f3667a; }
.hero h1 { margin: 25px 0 14px; font-size: clamp(48px, 7vw, 78px); font-weight: 550; letter-spacing: -.075em; line-height: .98; }
.hero h1 span { color: var(--accent); }
.hero-description { max-width: 390px; color: #9aa49a; font-size: 13px; line-height: 1.8; }
.text-link { display: inline-flex; gap: 16px; margin-top: 19px; color: #e1e8dc; font-size: 11px; }
.text-link span { color: var(--accent); }

.hero-art { min-height: 280px; position: relative; display: grid; place-items: center; overflow: hidden; }
.orbit { position: absolute; border: 1px solid #354137; border-radius: 50%; transform: rotate(-28deg); }
.orbit-one { width: 250px; height: 145px; }
.orbit-two { width: 160px; height: 270px; transform: rotate(42deg); }
.orbit-core { width: 78px; height: 78px; display: grid; place-items: center; border: 1px solid #58703b; border-radius: 50%; background: radial-gradient(circle, #28371f, #171e17 70%); color: var(--accent); font-size: 32px; font-weight: 500; box-shadow: 0 0 75px #c4f31a1c; }
.art-label, .art-index { position: absolute; color: #dce5d7; font-size: 10px; letter-spacing: .12em; line-height: 1.7; }
.art-label { top: 43px; right: 22px; text-align: right; }
.art-label span, .art-index { color: var(--muted); font-size: 8px; }
.art-index { bottom: 33px; left: 20px; }

.world-strip { min-height: 132px; display: grid; grid-template-columns: 1.25fr 1fr 1fr; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.section-heading h2, .panel-heading h2 { margin: 7px 0 0; font-size: 18px; font-weight: 550; letter-spacing: -.04em; }
.world-metric { display: grid; gap: 9px; min-height: 68px; align-content: center; padding: 12px 16px; border: 1px solid rgba(224, 178, 85, .3); background: linear-gradient(145deg, rgba(43, 33, 23, .92), rgba(24, 18, 13, .92)); box-shadow: inset 0 0 0 1px #0005, 0 4px 12px #0005; }
.world-metric-link { transition: border-color .15s, background .15s, transform .15s; }
.world-metric-link:hover { transform: translateY(-2px); border-color: var(--accent); background: linear-gradient(145deg, rgba(69, 49, 25, .96), rgba(31, 22, 14, .96)); }
.world-metric-link:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.metric-label { color: #c4a66f; font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.metric-value { display: flex; align-items: center; gap: 8px; color: #f4e8cc; font-size: 16px; font-weight: 600; }
.metric-link-arrow { margin-left: auto; color: var(--accent); font-size: 18px; }
.status-indicator { width: 8px; height: 8px; background: #69736b; }
.status-indicator.is-online { background: var(--accent); box-shadow: 0 0 10px #c4f3667a; }

.content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 24px 0 60px; }
.panel { min-width: 0; padding: 22px; border: 1px solid var(--line); background: var(--surface); }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding-bottom: 19px; border-bottom: 1px solid var(--line); }
.panel-count { padding-top: 3px; white-space: nowrap; }
.news-list, .ranking-list, .players-list { min-height: 95px; margin: 0; padding: 0; list-style: none; }
.empty-state { margin: 0; padding: 24px 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.news-entry { padding: 16px 0; border-bottom: 1px solid var(--line); }
.news-entry:last-child { border-bottom: 0; }
.news-date { color: var(--accent); font-size: 9px; letter-spacing: .08em; }
.news-title { margin: 8px 0 5px; font-size: 13px; font-weight: 600; }
.news-title a:hover { color: var(--accent-strong); text-decoration: underline; }
.news-category { display: inline-block; margin-left: 8px; color: var(--muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.news-body { margin: 0; color: #9aa49a; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.ticker-panel { margin: 0; }
.news-ticker-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 8px; }
.ticker-entry { min-width: 0; overflow-wrap: anywhere; word-break: break-word; padding: 12px 0; }
.ticker-entry a { color: var(--accent-strong); font-size: 12px; font-weight: 600; }
.ticker-entry a:hover { text-decoration: underline; }
.ticker-entry p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.home-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 14px; margin: 20px 0 12px; }
.home-feature-grid > .boost-stack, .home-feature-grid > .ticker-panel { min-width: 0; height: 100%; }
.boost-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.home-feature-grid .boost-card { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; gap: 8px; margin: 0; padding: 22px; text-align: center; }
.home-feature-grid .boost-art { width: 128px; height: 128px; border: 1px solid var(--accent-deep); border-radius: 10px; background: radial-gradient(circle, #e0b25533, #0000 72%); }
.home-feature-grid .boost-body { text-align: center; }
.home-feature-grid .boost-bonuses { grid-column: 1; width: 100%; justify-content: center; gap: 10px; }
.home-feature-grid .boost-bonuses li { flex: 1; min-width: 0; padding: 8px; }
.home-feature-grid .boost-bonuses strong { font-size: 21px; }
.home-feature-grid .boost-name { font-size: clamp(19px, 2vw, 25px); overflow-wrap: anywhere; }
.home-feature-grid .ticker-panel { padding: 18px; border-color: #7a5420; background: linear-gradient(145deg, rgba(89, 54, 16, .78), rgba(31, 22, 13, .96) 58%); box-shadow: inset 3px 0 0 var(--accent), 0 5px 18px #0007; }
.home-feature-grid .panel-heading { padding-bottom: 12px; }
.home-feature-grid .panel-heading h2 { font-size: 17px; }
.home-feature-grid .news-ticker-list { grid-template-columns: 1fr; gap: 0; padding-top: 4px; border-top: 0; }
.home-feature-grid .ticker-entry { padding: 9px 10px; border-bottom: 1px solid rgba(224, 178, 85, .22); border-left: 2px solid var(--accent-deep); background: rgba(0, 0, 0, .2); }
.home-feature-grid .ticker-entry:last-child { border-bottom: 0; }
.home-feature-grid .ticker-entry a { font-size: 13px; }
.home-feature-grid .ticker-entry p { margin-top: 3px; font-size: 10px; }
.home-news { margin-top: 20px; }
.news-filters { display: flex; align-items: end; gap: 10px; padding: 18px 0; }
.news-filters label { color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.news-filters select { flex: 1; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 0; background: var(--surface-raised); color: #edf1e9; font: inherit; font-size: 12px; }
.news-filters button, .news-pagination button { min-height: 40px; padding: 0 14px; border: 2px solid var(--accent-deep); background: linear-gradient(#e0b255, #a8761f); color: var(--ink); font: inherit; font-family: var(--serif); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.news-filters select:focus-visible, .news-filters button:focus-visible, .news-pagination button:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.news-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 16px; border-top: 1px solid var(--accent-deep); }
.news-pagination span { min-width: 60px; color: var(--muted); font-family: var(--serif); font-size: 12px; text-align: center; }
.news-pagination button:disabled { opacity: .45; cursor: not-allowed; }
.news-article-title { margin: 8px 0 0; color: #f4e8cc; font-family: var(--serif); font-size: clamp(24px, 4vw, 36px); }
.news-article-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; color: var(--muted); font-size: 11px; }
.news-full-body { margin: 24px 0 0; color: #e0d1b4; font-size: 14px; line-height: 1.9; white-space: pre-line; overflow-wrap: anywhere; }
.news-back-link { justify-self: start; margin-top: 4px; }
.ranking-entry, .online-entry { min-height: 44px; display: grid; grid-template-columns: 32px 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.ranking-entry:last-child, .online-entry:last-child { border-bottom: 0; }
.rank-number { color: var(--accent); font-size: 10px; }
.player-outfit { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
.player-name { min-width: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.player-level, .player-score { color: var(--muted); font-size: 9px; letter-spacing: .05em; white-space: nowrap; }
.online-panel { grid-column: 1 / -1; }
.players-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.online-entry { grid-template-columns: 44px 8px minmax(0, 1fr) auto; padding: 4px 8px; }
.online-entry .player-name { overflow: visible; font-size: 14px; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.online-entry .player-level { font-size: 12px; text-align: right; }
.online-entry:hover { background: #2b221880; }
.online-dot { width: 5px; height: 5px; }

.highscore-filters, .online-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 18px 0; }
.highscore-filters label, .online-filters label { display: grid; flex: 1 1 180px; gap: 6px; color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.highscore-filters select, .online-filters select { min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 0; background: var(--surface-raised); color: #edf1e9; font: inherit; font-size: 12px; }
.highscore-filters button, .highscore-pagination button, .online-filters button, .online-pagination button { min-height: 40px; padding: 0 14px; border: 2px solid var(--accent-deep); background: linear-gradient(#e0b255, #a8761f); color: var(--ink); font: inherit; font-family: var(--serif); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.highscore-filters button:hover, .highscore-pagination button:not(:disabled):hover, .online-filters button:hover, .online-pagination button:not(:disabled):hover { filter: brightness(1.12); }
.highscore-filters select:focus-visible, .highscore-filters button:focus-visible, .highscore-pagination button:focus-visible, .online-filters select:focus-visible, .online-filters button:focus-visible, .online-pagination button:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.highscore-pagination, .online-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 16px; border-top: 1px solid var(--accent-deep); }
.highscore-pagination span, .online-pagination span { min-width: 60px; color: var(--muted); font-family: var(--serif); font-size: 12px; text-align: center; }
.highscore-pagination button:disabled, .online-pagination button:disabled { opacity: .45; cursor: not-allowed; }

.character-panel { grid-column: 1 / -1; }
.character-search { display: grid; gap: 9px; padding-top: 18px; }
.character-search label, .profile-label { color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.character-search-controls { display: flex; gap: 8px; }
.character-search input {
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--surface-raised);
    color: #edf1e9;
    font: inherit;
    font-size: 12px;
}
.character-search input:focus-visible, .character-search button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.character-search button {
    padding: 0 18px;
    border: 0;
    background: var(--accent);
    color: #101412;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}
.login-panel { width: 100%; }
.account-login-form { display: grid; gap: 9px; padding: 18px 0 0; }
.account-login-form label { color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.account-login-form input { min-width: 0; min-height: 42px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface-raised); color: #edf1e9; font: inherit; font-size: 12px; }
.account-login-form input:focus-visible, .account-login-form button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account-login-form button { min-height: 42px; margin-top: 7px; border: 2px solid var(--accent-deep); background: linear-gradient(#e0b255, #a8761f); color: var(--ink); font: inherit; font-family: var(--serif); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.account-login-error { margin: 2px 0 0; color: #e08b70; font-size: 11px; }
.account-login-note { margin: 14px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.account-panel { grid-column: 1 / -1; }
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 0 2px; }
.account-action-button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 0 15px; border: 2px solid var(--accent-deep); background: linear-gradient(#e0b255, #a8761f); color: var(--ink); font-family: var(--serif); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.account-action-button:hover { filter: brightness(1.12); }
.account-action-link { color: var(--accent-strong); font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.account-table-wrap { overflow-x: auto; padding-top: 14px; }
.account-character-table { width: 100%; border-collapse: collapse; text-align: left; }
.account-character-table th, .account-character-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); font-size: 11px; white-space: nowrap; }
.account-character-table th { color: var(--accent); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.account-character-table td { color: #e8dcc4; }
.account-character-table td:first-child a { color: #f4e8cc; }
.account-character-table td:first-child a:hover { color: var(--accent-strong); }
.account-character-table .is-deleted td { opacity: .55; }
.account-deleted-label { margin-left: 7px; color: #e08b70; font-size: 8px; text-transform: uppercase; }
.account-empty-state { padding-top: 16px; }
.account-create-panel { width: min(100%, 600px); }
.account-create-form { display: grid; gap: 10px; padding: 18px 0 0; }
.account-create-form > label, .account-create-form legend { color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.account-create-form input[type="text"], .account-create-form select { min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); background: var(--surface-raised); color: #edf1e9; font: inherit; font-size: 12px; }
.account-create-form fieldset { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0; padding: 10px; border: 1px solid var(--line); }
.account-create-form fieldset label { color: #dce4d9; font-size: 11px; }
.account-create-form button { min-height: 40px; margin-top: 8px; border: 2px solid var(--accent-deep); background: linear-gradient(#e0b255, #a8761f); color: var(--ink); font: inherit; font-family: var(--serif); font-size: 11px; text-transform: uppercase; }
.account-create-form :disabled { cursor: not-allowed; opacity: .55; }
.account-create-notice { margin: 16px 0 12px; padding: 12px; border-left: 3px solid var(--accent-deep); background: var(--surface-raised); color: #c8b894; font-size: 10px; line-height: 1.7; }
.character-result { min-height: 75px; }
.character-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 18px; }
.character-info-card, .character-equipment-card { min-width: 0; border: 1px solid var(--line); background: #171a17; }
.character-card-heading { margin: 0; padding: 12px 14px; border-bottom: 1px solid #47513a; border-left: 3px solid #b6d934; color: #edf1e9; font-family: var(--serif); font-size: 14px; font-weight: 600; }
.character-visual { display: grid; justify-items: center; gap: 12px; padding: 14px; }
.outfit-figure { display: grid; justify-items: center; align-content: start; gap: 7px; min-height: 112px; margin: 0; }
.outfit-figure img { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated; }
.outfit-caption, .equipment-label { color: var(--muted); font-size: 8px; text-align: center; }
.equipment-grid { display: grid; grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(4, 60px); gap: 5px; margin: 0; padding: 0; list-style: none; }
.equipment-slot { position: relative; display: grid; min-height: 60px; place-items: center; align-content: center; gap: 5px; border: 1px solid #343a32; background: #20241f; }
.equipment-slot[data-slot="necklace"] { grid-column: 1; grid-row: 1; }
.equipment-slot[data-slot="helmet"] { grid-column: 2; grid-row: 1; }
.equipment-slot[data-slot="backpack"] { grid-column: 3; grid-row: 1; }
.equipment-slot[data-slot="left_hand"] { grid-column: 1; grid-row: 2; }
.equipment-slot[data-slot="armor"] { grid-column: 2; grid-row: 2; }
.equipment-slot[data-slot="right_hand"] { grid-column: 3; grid-row: 2; }
.equipment-slot[data-slot="ring"] { grid-column: 1; grid-row: 3; }
.equipment-slot[data-slot="legs"] { grid-column: 2; grid-row: 3; }
.equipment-slot[data-slot="boots"] { grid-column: 2; grid-row: 4; }
.equipment-slot[data-slot="ammo"] { grid-column: 3; grid-row: 3; }
.equipment-slot img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.equipment-tooltip { position: absolute; z-index: 20; bottom: calc(100% + 8px); left: 50%; display: grid; gap: 9px; width: 260px; max-width: min(260px, calc(100vw - 32px)); padding: 13px 14px; transform: translateX(-50%); border: 1px solid #a77932; border-radius: 4px; background: linear-gradient(145deg, #302315, #17110b 82%); box-shadow: inset 0 0 0 1px #594329, 0 10px 28px #000e; color: #f0e4c8; font-size: 11px; line-height: 1.45; text-align: left; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.equipment-slot[data-slot="necklace"] .equipment-tooltip, .equipment-slot[data-slot="right_hand"] .equipment-tooltip, .equipment-slot[data-slot="ring"] .equipment-tooltip { left: 0; transform: none; }
.equipment-slot[data-slot="backpack"] .equipment-tooltip, .equipment-slot[data-slot="left_hand"] .equipment-tooltip, .equipment-slot[data-slot="ammo"] .equipment-tooltip { right: 0; left: auto; transform: none; }
.equipment-slot:hover .equipment-tooltip, .equipment-slot:focus .equipment-tooltip { visibility: visible; opacity: 1; }
.equipment-tooltip-name { padding-bottom: 6px; border-bottom: 1px solid #70512b; color: #f4cf7a; font-family: var(--serif); font-size: 15px; line-height: 1.25; }
.equipment-tooltip-meta { width: fit-content; margin-top: -5px; padding: 3px 7px; border: 1px solid #574329; border-radius: 3px; background: #110d08a8; color: #d5bc8f; font-size: 10px; text-transform: capitalize; }
.equipment-tooltip-section { display: grid; gap: 4px; }
.equipment-tooltip-heading { margin: 0; color: #d9ae5d; font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.equipment-tooltip-section ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.equipment-tooltip-section li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 6px; border-left: 2px solid #68512d; border-radius: 0 2px 2px 0; background: #ffffff08; }
.equipment-tooltip-section li:nth-child(even) { background: #00000024; }
.equipment-tooltip-section li strong { color: #c6e58a; white-space: nowrap; }
.equipment-tooltip-section.is-bonus li { display: block; border-left-color: #8e62c2; background: #8e62c20d; color: #dfc9fa; overflow-wrap: anywhere; }
.equipment-count { position: absolute; right: 4px; bottom: 4px; color: var(--accent); font-size: 9px; }
.equipment-label, .outfit-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.character-profile {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: 0 14px 8px;
}
.character-info-list .profile-field { display: grid; grid-template-columns: minmax(100px, .8fr) minmax(0, 1.2fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid #343a32; }
.character-info-list .profile-field:last-child { border-bottom: 0; }
.profile-label, .profile-value { margin: 0; }
.character-info-list .profile-label { color: #b6d934; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.profile-value { color: #dce4d9; font-size: 12px; overflow-wrap: anywhere; }
.character-status.is-online { color: #8fd15d; }
.character-status:not(.is-online) { color: #e08b70; }
.skills-heading { margin: 18px 0 9px; color: var(--accent); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.skill-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 0; }
.skill-entry { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 0 10px; border: 1px solid var(--line); background: var(--surface-raised); }
.skill-name, .skill-value { margin: 0; }
.skill-name { color: var(--muted); font-size: 9px; }
.skill-value { color: #edf1e9; font-size: 11px; font-weight: 600; }
.character-deaths-list { margin: 0; padding: 0; list-style: none; }
.character-death-entry { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 38px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.character-death-summary { color: #dce4d9; font-size: 10px; }
.character-death-date { color: var(--muted); font-size: 9px; white-space: nowrap; }

.guild-panel { grid-column: 1 / -1; }
.guild-layout { display: grid; grid-template-columns: minmax(190px, .7fr) 1.3fr; gap: 24px; padding-top: 12px; }
.guild-list { display: grid; align-content: start; }
.guild-entry {
    display: grid;
    gap: 4px;
    padding: 13px 8px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.guild-entry:hover, .guild-entry:focus-visible { background: var(--surface-raised); outline-color: var(--accent); }
.guild-entry-name, .guild-detail-name { color: #edf1e9; font-size: 13px; font-weight: 600; }
.guild-entry-description { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.guild-result { min-width: 0; }
.guild-detail-name { margin: 12px 0 7px; font-size: 18px; }
.guild-facts, .guild-description { color: var(--muted); font-size: 10px; line-height: 1.7; }
.guild-description { color: #c1c9bd; white-space: pre-line; }
.guild-members-heading { margin: 18px 0 5px; color: var(--accent); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.guild-members { margin: 0; padding: 0; list-style: none; }
.guild-member { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, auto) minmax(70px, .6fr); align-items: center; gap: 12px; min-height: 38px; border-bottom: 1px solid var(--line); }
.guild-member-info { color: var(--muted); font-size: 9px; }
.guild-rank { color: var(--muted); font-size: 9px; text-align: right; }

.houses-panel { grid-column: 1 / -1; }
.houses-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 14px; }
.house-card { min-width: 0; padding: 10px; border: 1px solid var(--line); background: var(--surface-raised); }
.house-image { display: block; width: 100%; height: 110px; object-fit: cover; image-rendering: pixelated; }
.house-name { overflow: hidden; margin: 10px 0 4px; color: #edf1e9; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.house-town, .house-status { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.house-status.is-owned { color: #dce4d9; }

.deaths-panel { grid-column: 1 / -1; }
.deaths-list { margin: 0; padding: 0; list-style: none; }
.death-entry { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; min-height: 46px; border-bottom: 1px solid var(--line); }
.death-entry:last-child { border-bottom: 0; }
.death-summary { color: #dce4d9; font-size: 11px; line-height: 1.6; }
.death-date { color: var(--muted); font-size: 9px; white-space: nowrap; }

.site-footer { min-height: 75px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); color: var(--muted); }
.site-footer p, .site-footer > span { font-size: 8px; letter-spacing: .12em; }

/* Tibia-inspired theme: carved stone, gold trim and parchment-toned text. */
body {
    background:
        radial-gradient(ellipse 75% 60% at 50% 50%, rgba(20, 14, 9, .28), rgba(15, 10, 7, .48)),
        linear-gradient(rgba(15, 10, 7, .22), rgba(15, 10, 7, .42)),
        url("../images/site-background.webp?v=2"),
        radial-gradient(ellipse 80% 45% at 50% 0, #3a2a18 0, transparent 70%),
        linear-gradient(#14100c, #0e0b08);
    background-position: center, center, center, center, center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.site-header {
    height: 104px;
    border-bottom: 2px solid var(--accent-deep);
    box-shadow: 0 1px 0 #000, 0 8px 24px #0008;
}
.wordmark { font-family: var(--serif); font-size: 24px; font-weight: 700; letter-spacing: .08em; color: var(--accent-strong); text-shadow: 0 2px 0 #000; }
.site-header .wordmark { display: flex; flex-shrink: 0; align-items: center; height: 100%; }
.site-header nav { gap: 6px; color: #cdbb98; font-family: var(--serif); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.site-header nav > a, .nav-dropdown-toggle { padding: 10px 14px; border: 1px solid transparent; }
.site-header nav > a:hover, .nav-dropdown-toggle:hover { border-color: var(--line); background: #2b2218; }
.site-header nav a.is-active, .nav-dropdown-toggle.is-active { border-color: var(--accent-deep); background: linear-gradient(#3a2b17, #281d10); color: var(--accent-strong); }
.nav-dropdown-menu { border: 2px solid var(--accent-deep); background: #1a130c; box-shadow: 0 18px 40px #000b, inset 0 0 0 1px #000; }
.nav-dropdown-menu a { font-size: 12px; }
.nav-dropdown-menu a:hover { background: #33261a; color: var(--accent-strong); }
.edition { padding: 5px 9px; border: 1px solid var(--accent-deep); color: var(--accent); font-family: var(--serif); letter-spacing: .12em; }

.eyebrow { color: var(--accent); font-family: var(--serif); font-size: 11px; letter-spacing: .22em; }
.hero { border-bottom: 1px solid var(--line); }
.home-news { margin: 24px 0 12px; padding: 24px 28px; }
.home-news .news-list { min-height: 0; }
.home-news .news-entry:last-child { border-bottom: 0; }
.home-news .news-entry { padding: 18px 4px; }
.home-news .news-title { margin-top: 8px; font-size: 20px; }
.home-news .news-body { max-width: 850px; }
.hero h1, .page-head h1 { font-family: var(--serif); font-weight: 700; letter-spacing: .01em; text-shadow: 0 3px 0 #000, 0 0 36px #e0b25526; }
.hero h1 { line-height: 1.02; }
.hero h1 span { color: var(--accent-strong); }
.hero-description { color: #bfae8c; font-size: 15px; }
.text-link { padding: 11px 20px; border: 2px solid var(--accent-deep); background: linear-gradient(#4a3216, #2c1d0b); color: var(--accent-strong); font-family: var(--serif); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; box-shadow: inset 0 1px 0 #ffffff22, 0 3px 0 #000; }
.text-link:hover { filter: brightness(1.2); color: var(--accent-strong); }
.pulse { box-shadow: 0 0 14px #e0b255aa; }

.hero-art { background: radial-gradient(circle at 50% 50%, #3b2a17 0, transparent 62%); }
.hero-logo { display: block; width: min(100%, 390px); max-height: 330px; object-fit: contain; filter: drop-shadow(0 12px 22px #000b); }
.orbit { border-color: #6b5230; }
.orbit-core { width: 96px; height: 96px; border: 3px double var(--accent); border-radius: 50%; background: radial-gradient(circle, #4a3216, #1a120a 72%); color: var(--accent-strong); font-family: var(--serif); font-size: 42px; font-weight: 700; box-shadow: 0 0 80px #e0b2552e, inset 0 0 18px #000; }
.art-label { color: var(--accent-strong); font-family: var(--serif); }
.art-label span, .art-index { color: var(--muted); }

.world-strip { border-bottom: 1px solid var(--line); }
.section-heading h2, .panel-heading h2 { font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: .02em; color: var(--accent-strong); }
.metric-label { color: #c4a66f; font-size: 10px; letter-spacing: .15em; }
.metric-value { color: #fff0cf; font-size: 17px; font-family: var(--serif); }
.status-indicator { background: #6a5a44; }
.status-indicator.is-online { background: #5fd36a; box-shadow: 0 0 10px #5fd36a99; }
.online-dot { background: #5fd36a; box-shadow: 0 0 7px #5fd36a88; }

.panel {
    border: 1px solid #000;
    background: linear-gradient(#271e15, #1d1610);
    box-shadow: inset 0 0 0 1px var(--accent-deep), inset 0 0 0 3px #000, inset 0 0 0 4px #3d2d1a, 0 10px 28px #0008;
    padding: 26px;
}
.panel-heading { border-bottom: 1px solid var(--accent-deep); }
.panel-count, .panel-link { color: var(--muted); font-family: var(--serif); font-size: 11px; letter-spacing: .12em; }
.panel-link:hover { color: var(--accent-strong); }
.empty-state { color: var(--muted); font-size: 13px; }
.news-entry { border-bottom: 1px dashed var(--line); }
.news-date { color: var(--accent); font-size: 11px; }
.news-title { font-family: var(--serif); font-size: 17px; color: #f4e8cc; }
.news-body { color: #c1b08f; font-size: 13px; }
.ticker-panel { padding: 20px 26px; }
.news-ticker-list { border-top: 1px dashed var(--line); }
.ticker-entry a { font-family: var(--serif); font-size: 15px; }
.ticker-entry p { color: #c1b08f; font-size: 12px; }
.news-filters select { border: 2px solid #000; background: #120d08; color: #f0e4c8; box-shadow: inset 0 0 0 1px var(--line); }
.news-filters button, .news-pagination button, .online-filters button, .online-pagination button { border: 2px solid var(--accent-deep); background: linear-gradient(#e0b255, #a8761f); color: var(--ink); font-family: var(--serif); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; box-shadow: inset 0 1px 0 #fff5, 0 3px 0 #000; }
.news-article-title { color: var(--accent-strong); }
.news-full-body { color: #e0d1b4; }
.ranking-entry, .online-entry { border-bottom: 1px dashed var(--line); min-height: 52px; }
.rank-number { color: var(--accent-strong); font-family: var(--serif); font-size: 14px; font-weight: 700; }
.player-name { font-size: 14px; color: #f0e4c8; }
a.player-name:hover { color: var(--accent-strong); text-decoration: underline; }
.player-level, .player-score { color: var(--muted); font-size: 11px; }
.player-outfit { filter: drop-shadow(0 2px 2px #000); }

.explore-card { border: 1px solid #000; background: linear-gradient(#2b2117, #1f1811); box-shadow: inset 0 0 0 1px var(--accent-deep), 0 6px 16px #0008; transition: transform .15s, filter .15s; }
.explore-card strong { font-family: var(--serif); font-size: 18px; color: #f4e8cc; letter-spacing: .01em; }
.explore-card:hover { transform: translateY(-3px); filter: brightness(1.15); border-color: #000; }

.character-search label, .profile-label { color: var(--muted); font-size: 11px; }
.character-search input { border: 2px solid #000; background: #120d08; color: #f0e4c8; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; padding: 12px 14px; }
.character-search input:focus-visible, .character-search button:focus-visible { outline-color: var(--accent-strong); }
.character-search button { border: 2px solid var(--accent-deep); background: linear-gradient(#e0b255, #a8761f); color: var(--ink); font-family: var(--serif); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; box-shadow: inset 0 1px 0 #fff5, 0 3px 0 #000; }
.character-search button:hover { filter: brightness(1.12); }
.equipment-slot { border: 2px solid #000; background: #17110b; box-shadow: inset 0 0 0 1px #4a3a27, inset 0 0 12px #000; }
.equipment-slot.is-empty { opacity: .8; }
.equipment-count { color: var(--accent-strong); font-weight: 700; text-shadow: 0 1px 0 #000; }
.outfit-figure { padding: 10px; border: 2px solid #000; background: radial-gradient(circle, #3b2a17, #17110b 75%); box-shadow: inset 0 0 0 1px #4a3a27; }
.outfit-caption, .equipment-label { color: var(--muted); font-size: 10px; }
.profile-value { color: #f0e4c8; font-size: 14px; }
.skills-heading { color: var(--accent-strong); font-family: var(--serif); font-size: 13px; letter-spacing: .14em; }
.skill-entry { border: 1px solid #000; background: #17110b; box-shadow: inset 0 0 0 1px #3d2d1a; }
.skill-name { color: var(--muted); font-size: 11px; }
.skill-value { color: var(--accent-strong); font-size: 14px; font-family: var(--serif); }

.guild-entry, .house-card { border: 1px solid #000; background: #17110b; box-shadow: inset 0 0 0 1px #3d2d1a; }
.guild-entry:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.house-name, .guild-detail-name, .guild-entry-name { font-family: var(--serif); color: #f4e8cc; }
.house-image { opacity: .9; filter: sepia(.35) saturate(1.1); }
.house-status { color: #7fd48a; }
.house-status.is-owned { color: var(--accent); }
.experience-rate { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.experience-table-columns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.experience-stages-table { width: 100%; border-collapse: collapse; margin-top: 16px; text-align: left; }
.experience-stages-table th, .experience-stages-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.experience-stages-table th { color: var(--accent); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.experience-stages-table td { color: #e8dcc4; font-size: 12px; }
.experience-stages-table td:last-child { color: var(--accent-strong); font-weight: 600; }
.spells-filters { display: flex; align-items: end; gap: 10px; padding: 18px 0; }
.spells-filters label { color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.spells-filters select { min-height: 40px; min-width: 220px; padding: 8px 10px; border: 1px solid var(--line); background: var(--surface-raised); color: #edf1e9; font: inherit; font-size: 12px; }
.spells-filters button, .spells-tabs button { min-height: 40px; padding: 0 14px; border: 2px solid var(--accent-deep); background: linear-gradient(#e0b255, #a8761f); color: var(--ink); font: inherit; font-family: var(--serif); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.weapons-filters { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(3, minmax(140px, 1fr)) repeat(2, minmax(120px, .8fr)) auto; align-items: end; gap: 10px; padding: 18px 0; }
.weapons-filters label { display: grid; gap: 6px; color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.weapons-filters input, .weapons-filters select { min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); background: var(--surface-raised); color: #edf1e9; font: inherit; font-size: 12px; }
.weapons-filters button { min-height: 40px; padding: 0 14px; border: 2px solid var(--accent-deep); background: linear-gradient(#e0b255, #a8761f); color: var(--ink); font: inherit; font-family: var(--serif); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.weapon-table { width: 100%; border-collapse: collapse; text-align: left; }
.weapon-table th, .weapon-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: 11px; white-space: nowrap; }
.weapon-table th { color: var(--accent); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.weapon-sort { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.weapon-sort:hover, .weapon-sort:focus-visible { color: #f4e8cc; }
.weapon-sort:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.weapon-sort span { color: var(--accent-strong); }
.weapon-table td { color: #e8dcc4; }
.weapon-item { display: flex; align-items: center; gap: 9px; color: #f4e8cc; }
.weapon-item img { width: 32px; height: 32px; image-rendering: pixelated; object-fit: contain; }
.weapon-vocations { color: var(--muted); }
.spells-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); }
.spells-tabs button { border-bottom: 0; opacity: .7; }
.spells-tabs button[aria-selected="true"] { opacity: 1; }
.spell-table-wrap { overflow-x: auto; }
.spell-table { width: 100%; border-collapse: collapse; text-align: left; }
.spell-table th, .spell-table td { padding: 10px; border-bottom: 1px solid var(--line); font-size: 11px; white-space: nowrap; }
.spell-table th { color: var(--accent); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.spell-sort { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.spell-sort:hover, .spell-sort:focus-visible { color: #f4e8cc; }
.spell-sort:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.spell-sort-indicator { min-width: 8px; color: var(--accent-strong); }
.spell-table td { color: #e8dcc4; }
.spell-table img { display: block; image-rendering: pixelated; }
.spell-item-count { display: block; color: var(--muted); font-size: 9px; }
.monsters-filters { display: flex; align-items: end; gap: 10px; padding: 18px 0; }
.monsters-filters > label:first-child { color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.monsters-filters input[type="search"] { min-width: 180px; flex: 1; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); background: var(--surface-raised); color: #edf1e9; font: inherit; font-size: 12px; }
.monster-boss-filter { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.monsters-filters button { min-height: 40px; padding: 0 14px; border: 2px solid var(--accent-deep); background: linear-gradient(#e0b255, #a8761f); color: var(--ink); font: inherit; font-family: var(--serif); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.monsters-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.monster-card { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 3px 10px; min-width: 0; padding: 10px; border: 1px solid var(--line); background: var(--surface-raised); }
.monster-card:hover, .monster-card:focus-visible { border-color: var(--accent); outline-color: var(--accent); }
.monster-card.is-boss { border-color: var(--accent-deep); }
.monster-image { grid-row: span 2; width: 58px; height: 58px; object-fit: contain; image-rendering: pixelated; }
.monster-name { overflow: hidden; color: #f4e8cc; font-family: var(--serif); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.monster-summary { color: var(--muted); font-size: 9px; }
.monster-detail-title { margin: 0 0 20px; color: #f4e8cc; font-family: var(--serif); font-size: clamp(24px, 4vw, 36px); }
.monster-detail-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.monster-detail-image { grid-row: span 2; width: 100%; max-height: 150px; min-height: 100px; object-fit: contain; image-rendering: pixelated; }
.monster-stat { display: grid; align-content: center; gap: 5px; min-height: 52px; padding: 9px 11px; border: 1px solid var(--line); background: var(--surface-raised); }
.monster-stat-label { color: var(--muted); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.monster-stat-value { color: #f0e4c8; font-size: 11px; }
.monster-detail-section { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.monster-section-title { margin: 0 0 12px; color: var(--accent); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.monster-voice, .monster-list-copy { margin: 7px 0; color: #d6c7aa; font-size: 11px; line-height: 1.6; }
.monster-loot-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.monster-loot-list li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px; border: 1px solid var(--line); background: var(--surface-raised); }
.monster-loot-list img { flex: 0 0 32px; image-rendering: pixelated; }
.monster-loot-name { min-width: 0; overflow: hidden; color: #f0e4c8; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.monster-loot-meta { margin-left: auto; color: var(--muted); font-size: 8px; white-space: nowrap; }
.site-footer { border-top: 2px solid var(--accent-deep); color: var(--muted); font-family: var(--serif); }
.site-footer p, .site-footer > span { font-size: 10px; letter-spacing: .14em; }

@media (max-width: 700px) {
    .site-header, main, .site-footer { width: min(100% - 32px, 540px); }
    .site-header { height: 72px; }
    .wordmark { flex-shrink: 0; }
    .header-logo { width: 66px; height: 62px; }
    .site-header nav { max-width: calc(100% - 150px); gap: 14px; overflow-x: auto; font-size: 10px; scrollbar-width: none; }
    .site-account { gap: 5px; font-size: 9px; }
    .site-account-link, .site-account button, .site-login-link { padding: 7px; font-size: 8px; }
    .site-cta { min-height: 34px; padding: 0 10px; font-size: 9px; letter-spacing: .08em; }
    .site-header nav::-webkit-scrollbar { display: none; }
    .nav-dropdown { display: contents; }
    .nav-dropdown-toggle { display: none; }
    .nav-dropdown-menu, .nav-dropdown:hover .nav-dropdown-menu { position: static; display: contents; padding: 0; border: 0; box-shadow: none; background: none; min-width: 0; }
    .nav-dropdown-menu::before { display: none; }
    .nav-dropdown-menu a { padding: 0; }
    .site-header nav a { white-space: nowrap; }
    .explore-grid { grid-template-columns: 1fr 1fr; padding-bottom: 38px; }
    .page-head { padding-top: 30px; }
    .page-grid { padding-bottom: 38px; }
    .edition { display: none; }
    .hero { min-height: auto; grid-template-columns: 1fr; }
    .hero-copy { padding: 55px 0 22px; }
    .hero h1 { font-size: clamp(48px, 13vw, 68px); }
    .hero-art { min-height: 200px; }
    .orbit-one { width: 205px; height: 120px; }
    .orbit-two { width: 135px; height: 220px; }
    .art-label { top: 19px; right: 6px; }
    .art-index { bottom: 16px; left: 5px; }
    .world-strip { grid-template-columns: 1fr 1fr; padding: 20px 0; gap: 22px 12px; }
    .content-grid { grid-template-columns: 1fr; padding-bottom: 38px; }
    .news-ticker-list { grid-template-columns: 1fr; gap: 0; }
    .home-feature-grid { grid-template-columns: 1fr; }
    .boost-stack { grid-template-columns: 1fr; }
    .home-feature-grid .boost-card { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
    .news-filters { align-items: stretch; flex-direction: column; }
    .spells-filters { align-items: stretch; flex-direction: column; }
    .spells-filters select { min-width: 0; }
    .weapons-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .weapons-filters label:first-child, .weapons-filters button { grid-column: 1 / -1; }
    .monsters-filters { align-items: stretch; flex-direction: column; }
    .monsters-filters input[type="search"] { min-width: 0; }
    .monsters-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .monster-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .monster-loot-list { grid-template-columns: 1fr; }
    .online-filters { align-items: stretch; flex-direction: column; }
    .online-panel { grid-column: auto; }
    .character-panel { grid-column: auto; }
    .character-overview { grid-template-columns: 1fr; }
    .character-visual { grid-template-columns: 1fr; }
    .equipment-grid { grid-template-columns: repeat(3, 60px); }
    .guild-panel { grid-column: auto; }
    .houses-panel { grid-column: auto; }
    .houses-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .experience-table-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .deaths-panel { grid-column: auto; }
    .death-entry { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }
    .guild-layout { grid-template-columns: 1fr; gap: 8px; }
    .character-profile { grid-template-columns: 1fr; }
    .skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer { flex-wrap: wrap; padding: 17px 0; }
}

@media (max-width: 380px) {
    .site-header nav { gap: 9px; font-size: 9px; }
    .site-footer p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

.account-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; width: min(100%, 1100px); margin: 0 auto; }
.account-main { display: grid; gap: 18px; min-width: 0; }
.account-main .page-head { padding-bottom: 0; }
.account-sidebar { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.account-sidebar-user { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.account-sidebar-user strong { display: block; margin-bottom: 4px; color: var(--accent-strong); font-family: var(--serif); font-size: 15px; letter-spacing: .06em; }
.account-avatar { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--accent-deep); border-radius: 50%; background: var(--surface-raised); color: var(--accent); font-size: 22px; }
.account-premium-badge, .account-free-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.account-premium-badge { background: var(--accent); color: var(--ink); }
.account-free-badge { background: var(--surface-raised); color: var(--muted); }
.account-sidebar nav { display: grid; gap: 3px; padding-top: 12px; }
.account-sidebar nav a, .account-sidebar nav .is-soon, .account-sidebar nav button { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 0 12px; border: 0; border-left: 3px solid transparent; border-radius: 4px; background: none; color: #dcd0b8; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.account-sidebar nav a:hover, .account-sidebar nav button:hover { background: var(--surface-raised); }
.account-sidebar nav a.is-active { border-left-color: var(--accent); background: linear-gradient(90deg, rgba(224, 178, 85, .18), transparent); color: var(--accent-strong); }
.account-sidebar nav .is-soon { color: var(--muted); cursor: default; opacity: .7; }
.account-sidebar nav .is-soon em { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.account-nav-title { margin: 14px 12px 4px; color: var(--muted); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.account-sidebar nav form { margin: 0; }
.account-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 16px; }
.account-info-grid > div { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-raised); overflow-wrap: anywhere; }
.account-info-grid span { color: var(--muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.account-info-grid strong { color: #f1e8d4; font-size: 13px; }
@media (max-width: 900px) {
    .account-layout { grid-template-columns: 1fr; }
    .account-info-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .account-info-grid { grid-template-columns: 1fr; } }
.account-current-value { margin: 14px 0 0; color: var(--muted); font-size: 12px; }
.account-current-value strong { color: #f1e8d4; }
.account-actions form { margin: 0; }
.account-actions button.account-action-button { cursor: pointer; }
.account-recovery-key { margin: 16px 0; padding: 16px; border: 1px dashed var(--accent); border-radius: 6px; background: var(--surface-raised); color: var(--accent-strong); font-family: ui-monospace, Consolas, monospace; font-size: 22px; letter-spacing: .12em; text-align: center; user-select: all; }
.login-panel .account-login-form select { min-height: 42px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface-raised); color: #edf1e9; font: inherit; }
.site-cta { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 0 18px; border: 2px solid var(--accent-deep); font-size: 11px; font-weight: 800; letter-spacing: .12em; white-space: nowrap; }
.site-cta-secondary { background: transparent; color: var(--accent-strong); }
.site-cta-secondary:hover, .site-cta-secondary.is-active { border-color: var(--accent); background: rgba(224, 178, 85, .14); color: #fff0c6; }
.site-cta-primary { background: linear-gradient(#e0b255, #a8761f); color: var(--ink); box-shadow: 0 0 14px rgba(224, 178, 85, .35); }
.site-cta-primary:hover, .site-cta-primary.is-active { filter: brightness(1.12); color: var(--ink); }
.site-cta:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.cms-page { line-height: 1.6; overflow-wrap: anywhere; }
.cms-page table { border-collapse: collapse; width: 100%; }
.cms-page th, .cms-page td { border: 1px solid var(--accent-deep); padding: 6px 10px; text-align: left; }
.cms-page a { color: var(--accent-strong); }
.cms-page img { max-width: 100%; height: auto; }

/* Three-column site shell: menu | content | quick links */
.site-header, .site-footer, .site-shell { width: min(1480px, calc(100% - 32px)); margin-inline: auto; }
.site-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr) 190px; gap: 20px; align-items: start; padding-top: 18px; }
.site-shell.is-wide { grid-template-columns: minmax(0, 1fr); }
.site-shell main { width: auto; margin: 0; min-width: 0; }
.site-shell .page-head { padding-top: 14px; }
.side-menu, .side-rail { position: sticky; top: 12px; display: grid; gap: 14px; }
.side-group { border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(10px) saturate(1.2); box-shadow: 0 8px 24px #0006; }
.side-group[open] { padding-bottom: 8px; }
.side-group h2 { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--accent-strong); font: 700 11px/1 var(--serif); letter-spacing: .16em; text-transform: uppercase; }
.side-group summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; margin: 0; padding: 0 16px; color: var(--accent-strong); font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; list-style: none; user-select: none; transition: background .2s, color .2s; }
.side-group summary::-webkit-details-marker { display: none; }
.side-group summary::after { content: ""; flex: none; width: 8px; height: 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; translate: 0 -2px; rotate: 45deg; transition: rotate .25s ease, translate .25s ease; }
.side-group[open] > summary::after { rotate: 225deg; translate: 0 2px; }
.side-group summary:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: #fff0c6; }
.side-group[open] > summary { box-shadow: inset 0 -1px 0 var(--line); }
.side-group a, .side-group button { display: block; width: 100%; padding: 9px 16px; border: 0; background: none; color: #cdbb98; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.side-group form { margin: 0; }
.side-group a:hover, .side-group button:hover { background: #2b2218; color: var(--accent-strong); }
.side-group a.is-active { background: linear-gradient(90deg, #3a2b17, transparent); color: var(--accent-strong); font-weight: 700; }
.side-rail { gap: 18px; padding-top: 6px; }
.rail-tile { --tint: var(--accent); display: grid; place-items: center; gap: 8px; min-height: 104px; padding: 14px; border: 2px solid var(--tint); border-radius: 10px; background: #17110b; box-shadow: 0 0 14px color-mix(in srgb, var(--tint) 45%, transparent), inset 0 0 0 4px #17110b, inset 0 0 0 5px color-mix(in srgb, var(--tint) 35%, transparent); color: #f1e3bf; font: 700 11px/1.3 var(--serif); letter-spacing: .1em; text-align: center; text-transform: uppercase; transition: transform .15s, box-shadow .15s; }
.rail-tile:hover { transform: translateY(-2px); box-shadow: 0 0 22px color-mix(in srgb, var(--tint) 70%, transparent), inset 0 0 0 4px #17110b; }
.rail-red { --tint: #e0463d; }
.rail-violet { --tint: #9b6bff; }
.rail-wiki { --tint: #3fd0ff; min-height: 128px; background: linear-gradient(160deg, #0f2a36, #17110b 75%); font-size: 15px; animation: wiki-glow 2.2s ease-in-out infinite; }
.rail-wiki .rail-icon { font-size: 46px; filter: drop-shadow(0 0 8px #3fd0ff); }
.rail-wiki small { font: 600 10px/1.2 var(--serif); letter-spacing: .08em; color: #9fdcf0; }
@keyframes wiki-glow { 0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--tint) 40%, transparent), inset 0 0 0 4px #17110b; } 50% { box-shadow: 0 0 28px var(--tint), inset 0 0 0 4px #17110b; } }
@media (prefers-reduced-motion: reduce) { .rail-wiki { animation: none; } }
.rail-icon { color: var(--tint); font-size: 28px; line-height: 1; }
.site-header nav { gap: 4px; }
.discord-link { --tint: #5865f2; display: grid; place-items: center; gap: 8px; min-height: 104px; margin: 0; padding: 14px; border: 2px solid var(--tint); border-radius: 10px; background: #17110b; box-shadow: 0 0 14px color-mix(in srgb, var(--tint) 45%, transparent), inset 0 0 0 4px #17110b, inset 0 0 0 5px color-mix(in srgb, var(--tint) 35%, transparent); color: #f1e3bf; font: 700 11px/1.3 var(--serif); letter-spacing: .1em; text-align: center; text-transform: uppercase; transition: transform .15s, box-shadow .15s; }
.discord-link:hover { transform: translateY(-2px); border-color: #aab0ff; background: #17110b; box-shadow: 0 0 22px color-mix(in srgb, var(--tint) 70%, transparent), inset 0 0 0 4px #17110b; }
.discord-link .rail-icon { color: var(--tint); font-size: 28px; line-height: 1; }
.discord-copy strong, .discord-copy small { display: block; }
.discord-copy strong { font: 700 11px/1.3 var(--serif); }
.discord-copy small { margin-top: 3px; color: var(--muted); font: 9px/1.3 var(--serif); letter-spacing: .02em; text-transform: none; }

@media (max-width: 1180px) {
    .site-shell { grid-template-columns: 210px minmax(0, 1fr); }
    .side-rail { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); position: static; }
}
@media (max-width: 1240px) {
    .header-podium { display: none; }
}
@media (max-width: 800px) {
    .site-header, .site-footer, .site-shell { width: min(100% - 24px, 760px); }
    .site-shell { grid-template-columns: minmax(0, 1fr); }
    .side-menu { position: static; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); order: 2; }
    .site-shell main { order: 1; }
    .side-rail { order: 3; }
}

.boost-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; margin-top: 20px; padding: 18px 26px; border: 1px solid var(--accent-deep); background: linear-gradient(100deg, rgba(224, 178, 85, 0.14), var(--surface) 55%); box-shadow: inset 3px 0 0 var(--accent); }
.boost-art { position: relative; display: block; width: 96px; height: 96px; overflow: hidden; }
.boost-art img { position: absolute; top: 0; left: 0; width: 100%; max-width: none; height: auto; image-rendering: pixelated; filter: drop-shadow(0 3px 3px #000); }
.boost-body h2 { margin: 4px 0 6px; font-family: var(--serif); font-size: 15px; font-weight: 400; color: var(--muted); }
.boost-name { font-family: var(--serif); font-size: 30px; color: var(--accent-strong); }
.boost-name:hover { text-decoration: underline; }
.boost-bonuses { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.boost-bonuses li { display: grid; justify-items: center; min-width: 92px; padding: 10px 14px; border: 1px solid var(--line); background: var(--surface-raised); }
.boost-bonuses strong { font-family: var(--serif); font-size: 26px; color: var(--accent-strong); }
.boost-bonuses span { color: var(--muted); font-size: 11px; letter-spacing: 0.14em; }
@media (max-width: 720px) {
    .boost-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .boost-name { font-size: 24px; }
}

.equipment-slot[data-rarity="common"] { border-color: #45c56b; box-shadow: inset 0 0 0 1px #4a3a27, inset 0 0 12px #000, 0 0 5px rgba(69, 197, 107, .4); }
.equipment-slot[data-rarity="rare"] { border-color: #3d8bff; box-shadow: inset 0 0 0 1px #4a3a27, inset 0 0 12px #000, 0 0 7px rgba(61, 139, 255, .6); }
.equipment-slot[data-rarity="epic"] { border-color: #b05cff; box-shadow: inset 0 0 0 1px #4a3a27, inset 0 0 12px #000, 0 0 8px rgba(176, 92, 255, .7); }
.equipment-slot[data-rarity="legendary"] { border-color: #ff9d1c; box-shadow: inset 0 0 0 1px #4a3a27, inset 0 0 12px #000, 0 0 10px rgba(255, 157, 28, .85); }
.equipment-rarity { position: absolute; left: 0; right: 0; top: 2px; font-size: 8px; font-weight: 700; letter-spacing: .06em; text-align: center; text-transform: uppercase; text-shadow: 0 1px 0 #000; pointer-events: none; }
.equipment-slot[data-rarity="common"] .equipment-rarity { color: #b8bcb4; }
.equipment-slot[data-rarity="rare"] .equipment-rarity { color: #6fa8ff; }
.equipment-slot[data-rarity="epic"] .equipment-rarity { color: #c98aff; }
.equipment-slot[data-rarity="legendary"] .equipment-rarity { color: #ffb44d; }

.news-full-body.news-rich { white-space: normal; }
.news-rich p { margin: 0 0 12px; }
.news-rich h1, .news-rich h2, .news-rich h3, .news-rich h4 { margin: 18px 0 8px; color: #f0dfb8; }
.news-rich ul, .news-rich ol { margin: 0 0 12px 22px; }
.news-rich a { color: #e6c36a; }
.news-rich img { max-width: 100%; height: auto; }
.news-rich table { border-collapse: collapse; margin: 0 0 12px; }
.news-rich td, .news-rich th { border: 1px solid #4a3e2a; padding: 4px 8px; }
.news-rich blockquote { margin: 0 0 12px; padding-left: 12px; border-left: 3px solid #6b5a38; }

.i18n-pending body { visibility: hidden; }
.lang-switch { display: flex; gap: 4px; flex: 0 0 auto; align-self: center; margin-right: 10px; }
.lang-switch button img { display: block; width: 24px; height: 16px; object-fit: cover; border-radius: 2px; }
.lang-switch button { padding: 4px 5px; line-height: 0; border: 1px solid #6b5a38; border-radius: 3px; background: rgba(16, 12, 8, 0.7); color: #c1b08f; font: inherit; font-size: 11px; letter-spacing: 0.08em; cursor: pointer; }
.lang-switch button:hover, .lang-switch button.is-active { border-color: #e6c36a; color: #f0dfb8; background: rgba(107, 90, 56, 0.45); }

.news-rich-preview { white-space: normal; max-width: 850px; }
.news-rich-preview img { max-height: 320px; width: auto; max-width: 100%; }

/* Buttons: flat glass surfaces, hairline gold border, sheen on hover */
@property --btn-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.news-filters button, .news-pagination button, .highscore-filters button, .highscore-pagination button, .online-filters button, .online-pagination button, .account-login-form button, .account-action-button, .site-cta, .site-account-link, .site-account button {
    position: relative; isolation: isolate; overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 12%, #120d08);
    color: var(--accent-strong); font-family: inherit; font-weight: 600; letter-spacing: .08em;
    box-shadow: 0 1px 0 #fff1 inset, 0 4px 14px #0006;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.news-filters button::before, .news-pagination button::before, .highscore-filters button::before, .highscore-pagination button::before, .online-filters button::before, .online-pagination button::before, .account-login-form button::before, .account-action-button::before, .site-cta::before, .site-account-link::before, .site-account button::before {
    content: ""; position: absolute; inset: 0; z-index: -1; translate: -120% 0;
    background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--accent-strong) 35%, transparent) 50%, transparent 70%);
    transition: translate .6s ease;
}
.news-filters button:hover, .news-pagination button:hover, .highscore-filters button:hover, .highscore-pagination button:hover, .online-filters button:hover, .online-pagination button:hover, .account-login-form button:hover, .account-action-button:hover, .site-cta:hover, .site-account-link:hover, .site-account button:hover {
    transform: translateY(-1px); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, #120d08); color: #fff0c6;
    box-shadow: 0 1px 0 #fff2 inset, 0 8px 22px #0008, 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
.news-filters button:hover::before, .news-pagination button:hover::before, .highscore-filters button:hover::before, .highscore-pagination button:hover::before, .online-filters button:hover::before, .online-pagination button:hover::before, .account-login-form button:hover::before, .account-action-button:hover::before, .site-cta:hover::before, .site-account-link:hover::before, .site-account button:hover::before { translate: 120% 0; }
.news-filters button:active, .highscore-filters button:active, .online-filters button:active, .account-login-form button:active, .account-action-button:active, .site-cta:active { transform: translateY(0) scale(.98); }
.news-filters button:focus-visible, .account-login-form button:focus-visible, .account-action-button:focus-visible, .site-cta:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
/* Primary actions are solid gold */
.site-cta-primary, .account-login-form button, .account-action-button {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-strong) 92%, white), var(--accent));
    color: #1c1208; border-color: transparent; text-shadow: none;
}
.site-cta-primary:hover, .account-login-form button:hover, .account-action-button:hover { background: linear-gradient(180deg, #fff0c6, var(--accent-strong)); color: #1c1208; }
button:disabled { opacity: .45; filter: grayscale(.6); cursor: not-allowed; transform: none; }
@media (prefers-reduced-motion: reduce) { .site-cta::before, button::before { transition: none; } }

/* Large logo heads the left column; the header logo is hidden when that column exists */
.side-logo { display: block; padding: 0 !important; background: none !important; text-align: center; }
.side-logo img { display: block; width: 100%; max-width: 230px; height: auto; margin: 0 auto; filter: drop-shadow(0 4px 12px #000c); }
body:has(.side-menu) .site-header .wordmark { visibility: hidden; }
@media (max-width: 1000px) { .side-logo img { max-width: 120px; } }

.fire-canvas { position: fixed; inset: 0; z-index: 50; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: .85; }

button, input, select, textarea { font-family: inherit; }

.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.news-meta .news-category { margin-left: 0; }
.news-icon { width: 16px; height: 16px; image-rendering: pixelated; }
.news-author { color: var(--muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.change-icon { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; image-rendering: pixelated; }