/* Middle Earth: charcoal panels, antique metal and moonlit scenery. */
:root {
    color-scheme: dark;
    --ember-black: #090b0d;
    --ember-panel: rgba(15, 16, 18, .97);
    --ember-panel-soft: rgba(27, 28, 30, .97);
    --ember-line: #4b4941;
    --ember-line-bright: #9b8963;
    --ember-red: #343631;
    --ember-red-bright: #b3a078;
    --ember-copper: #a39370;
    --ember-gold: #c5b58b;
    --ember-ivory: #e5e3dc;
    --ember-muted: #aaa9a2;
    --ember-green: #83c49a;
    --ember-shadow: 0 12px 32px #0007;
}

html { background: #090b0d; scrollbar-color: #666358 #101113; }
body.ember-body {
    background-image: linear-gradient(180deg, #090b0d26 0, #090b0d80 380px, #090b0dee 1100px), url('../images/middle-earth-nightfall.png');
    background-size: auto, cover;
}
body.ember-body::before {
    background: linear-gradient(90deg, #090b0d66, transparent 30%, transparent 70%, #090b0d66);
}
.ember-glow { display: none; }
body.ember-body a:hover { color: #e4d7ae; }
.hero-header { height: 240px; }
.hero-kicker, .hero-tagline { color: #c1bca9; }
.hero-kicker { top: 32px; }
.hero-tagline { bottom: 44px; font-size: 11px; }
.hero-logo { width: clamp(290px, 29vw, 380px); max-height: 210px; }
.hero-logo-link { filter: drop-shadow(0 4px 14px #000b); }
.main-nav {
    top: 8px;
    min-height: 56px;
    border-color: #5b584d;
    border-top-color: #8d8168;
    border-bottom-color: #666050;
    background: linear-gradient(180deg, #27282bfa, #141517fa);
    box-shadow: 0 6px 20px #0006, inset 0 1px #ffffff0d;
    clip-path: none;
    border-radius: 3px;
}
.main-nav a { color: #d5d4cc !important; border-right-color: #ffffff0d; font-size: 12px; }
.main-nav a:hover, .main-nav a.is-active {
    color: #eee3c8 !important;
    background: linear-gradient(180deg, #45443b, #292a27);
    box-shadow: inset 0 -2px #b3a078, inset 0 1px #ded4ac14;
}
.panel, .content-stage {
    clip-path: none;
    border-radius: 3px;
    border-color: #57554c;
    background: linear-gradient(135deg, #ffffff04, transparent 45%), linear-gradient(180deg, var(--ember-panel-soft), var(--ember-panel));
    box-shadow: var(--ember-shadow), inset 0 0 0 3px #090a0cb3;
}
.panel::before, .content-stage::before {
    inset: 5px;
    border-color: #97907b26;
    /* Small brass brackets echo classic RPG panel frames. */
    background:
        linear-gradient(#b4a17c, #b4a17c) left top / 8px 1px no-repeat,
        linear-gradient(#b4a17c, #b4a17c) left top / 1px 8px no-repeat,
        linear-gradient(#b4a17c, #b4a17c) right top / 8px 1px no-repeat,
        linear-gradient(#b4a17c, #b4a17c) right top / 1px 8px no-repeat,
        linear-gradient(#8c7c5c, #8c7c5c) left bottom / 8px 1px no-repeat,
        linear-gradient(#8c7c5c, #8c7c5c) left bottom / 1px 8px no-repeat,
        linear-gradient(#8c7c5c, #8c7c5c) right bottom / 8px 1px no-repeat,
        linear-gradient(#8c7c5c, #8c7c5c) right bottom / 1px 8px no-repeat;
}
.panel-heading, .section-bar {
    color: #d7d0bb;
    border-bottom-color: #77705a40;
    background: linear-gradient(90deg, #ffffff05, transparent);
}
.panel-heading { font-size: 13px; }
.section-bar h1 { color: #e5e0d1; font-size: 16px; }
.section-bar a { font-size: 11px; }
.online-state {
    color: #99d4a9;
    font-size: 16px;
    background: #14251b66;
    border-color: #4c7b563d;
}
.online-state span { width: 8px; height: 8px; box-shadow: 0 0 7px #83c49a66; }
.server-stats dt { font-size: 10px; }
.server-stats dd { color: #d8d5c9; }
.download-cta {
    min-height: 76px;
    color: #eee4c9 !important;
    border-color: #9c8d69;
    background: linear-gradient(180deg, #514a39, #302e25);
    box-shadow: inset 0 1px #d9c99a3b, inset 0 -2px #11120f, var(--ember-shadow);
    clip-path: none;
    border-radius: 3px;
}
.download-cta strong { font-size: 14px; }
.download-cta small { color: #c3bda9; font-size: 10px; letter-spacing: .04em; }
.download-icon { color: #d6c598; font-size: 28px; }
.rail-menu > a { color: #c6c5bd !important; padding-top: 10px; padding-bottom: 10px; }
.rail-menu > a:hover { color: #e9dfc4 !important; background: #b4a17c0d; }
.rail-menu > a::before { border-color: #958665; }
#page_content { color: #cecec7; font-size: 14px; }
#page_content > .news-card {
    border-color: #42433f;
    border-left-color: #85795d;
    background: linear-gradient(100deg, #242525, #111214);
    clip-path: none;
    border-radius: 2px;
}
#page_content > .news-card:first-of-type { border-color: #716a56; background: #111214; }
.news-cover {
    background-image: linear-gradient(90deg, #1012141a, #10121455), url('../images/middle-earth-nightfall.png');
    background-position: left 35%;
}
#page_content > .news-card:first-of-type .news-cover { min-height: clamp(180px, 22vw, 280px); background-position: left 37%; }
.news-cover::after { background: linear-gradient(0deg, #111214, transparent 70%); }
#page_content > .news-card:first-of-type .news-card-body { background: linear-gradient(0deg, #111214 64%, #1112140f); }
.news-badge { color: #e0d2b1; border-color: #81745a; background: #292a24e6; font-size: 10px; }
.news-meta { color: #a6a69c; font-size: 10px; }
.news_title { display: block; }
.news-category { color: #b8aa83; }
.news-card .nt_title { color: #e7e3d5; }
#page_content > .news-card:first-of-type .nt_title { font-size: clamp(23px, 2.2vw, 30px); }
.news_text { color: #c1c1b9; font-size: 13px; }
.news_text img { border-color: #4d4c44; }
.news-card-action { font-size: 10px; }
.news-card-action span { color: #c5b58b; }
.field > span { color: #b2b1a7; font-size: 10px; }
.field input { color: #e3e2d9; border-color: #45463f; background: #0c0e10; font-size: 13px; }
.field input::placeholder { color: #86877f; }
.field input:focus { border-color: #b3a078; box-shadow: 0 0 0 2px #b3a0781f; }
.primary-button, .secondary-button { border-radius: 2px; }
.primary-button {
    color: #eee5ce !important;
    border-color: #918261;
    background: linear-gradient(180deg, #514b3b, #323027);
    box-shadow: inset 0 1px #e4d6ad26, 0 4px 10px #0004;
}
.secondary-button { color: #cbc9be !important; border-color: #4a4c44; background: #202123; }
.account-links a { color: #b4b2a6 !important; font-size: 10px; }
.quick-grid a { color: #c8c7bc !important; border-color: #464840; background: #ffffff03; }
.quick-grid a:hover { background: #b4a17c12; border-color: #8c7e5d; }
.quick-grid b { color: #c4b58d; }
.quick-grid span { font-size: 10px; }
.daily-xp-panel .panel-heading small { color: #aca798; font-size: 9px; }
.daily-xp-leader { background: radial-gradient(circle at 40% 35%, #b4a17c0d, transparent 58%); }
.daily-xp-crown { color: #22221d; background: linear-gradient(180deg, #d1c49c, #807453); box-shadow: none; }
.daily-xp-copy a { color: #dcd7c7 !important; }
.daily-xp-copy a:hover { color: #e8d8ac !important; }
.daily-xp-copy strong { color: #c4b58d; font-size: 11px; }
.daily-xp-copy small { color: #aaa89d; font-size: 10px; }
.heading-with-link a { color: #c5b58b !important; font-size: 9px; }
.ranking-list a { color: #dcd9cc !important; }
.ranking-list small { color: #aaa99d; font-size: 10px; }
.rank-number { color: #20211d; background: linear-gradient(180deg, #d1c49c, #807453); }
.ranking-list li:nth-child(3) .rank-number { background: linear-gradient(180deg, #b5a28c, #6d5d48); }
.boost-panel-top { background: linear-gradient(180deg, #202123f7, #111214fa); }
.boost-panel-top .boost-card, .boost-card { background: #ffffff03; border-color: #494b44; }
.boost-panel-top .boost-card strong { font-size: 12px; }
.boost-panel-top .boost-card span { font-size: 10px; }
.boost-image { background: radial-gradient(circle, #b4a17c10, transparent 67%); }
.boost-card strong { color: #dedbce; }
.boost-card span { color: #91c9a2; }
.boost-heading small { color: #a8a89d; font-size: 9px; }
.site-footer { width: 100%; height: auto; flex-direction: row; color: #aaa797; border-top-color: #4d4d43; background: linear-gradient(180deg, #10121488, #090b0dcc); letter-spacing: .12em; }
.footer-diamond { border-color: #9a8a66; }

/* Tables and forms rendered by the older MyAAC pages. */
#page_content table { color: #cecec7; }
#page_content td, #page_content th { border-color: #43463e !important; }
#page_content input, #page_content select, #page_content textarea { color: #e3e2d9; border-color: #53554a; background-color: #0e1012; accent-color: #b3a078; }
#page_content .TableContainer, #page_content .Table1, #page_content .Table2,
#page_content .Table3, #page_content .Table4, #page_content .Table5,
#page_content .TableContent, #page_content .TableContentContainer, #page_content .InnerTableContainer {
    color: #cecec7 !important; border-color: #53554a !important; background-color: #191b1d !important;
}
#page_content .CaptionContainer, #page_content .CaptionInnerContainer { color: #dfd8c3 !important; background-color: #30322c !important; }
#page_content .Odd { background-color: #17191b !important; }
#page_content .Even { background-color: #202224 !important; }
#page_content h1, #page_content h2, #page_content h3, #page_content h4 { color: #e3ddcb; }
#page_content .selectize-input, #page_content .selectize-dropdown { background: #141618; color: #dedbd0; border-color: #53554a; }
#page_content .selectize-dropdown .active { background: #36382f; color: #e6dbbd; }
body.ember-body :focus-visible { outline: 2px solid #d0bf91; outline-offset: 3px; }

/* Account creation has its own inline stylesheet; keep it in this palette. */
#page_content .create-acc-container { font-family: 'Inter', Arial, sans-serif; }
#page_content .create-title { background: none; color: #ded5bd; -webkit-text-fill-color: #ded5bd; }
#page_content .create-header::before { background: linear-gradient(135deg, #b4a17c0d, transparent); }
#page_content .create-header, #page_content .create-card, #page_content .voc-card {
    background-color: #17191b; border-color: #53554a; border-radius: 3px;
}
#page_content .input-stylish:focus { border-color: #b3a078; box-shadow: 0 0 0 2px #b3a0781f; }
#page_content .input-stylish option { background: #141618; }
#page_content input[type='radio']:checked + .radio-label,
#page_content input[type='radio']:checked + .voc-card { background: #b4a17c14; border-color: #b3a078; color: #d6c69b; }
#page_content input[type='radio']:checked + .radio-label .radio-circle::after { background: #c5b58b; }

@media (max-width: 860px) {
    .hero-header { height: 205px; }
    .hero-kicker { top: 12px; font-size: 9px; }
    .hero-logo { width: 300px; max-height: 180px; }
    .download-cta { align-self: start; min-height: 86px; }
}
@media (max-width: 600px) {
    .hero-header { height: 185px; }
    .hero-logo { width: 270px; max-height: 160px; }
    .panel-heading { font-size: 12px; }
    .boost-heading { align-items: start; flex-direction: column; gap: 4px; }
    .download-cta { min-height: 76px; }
    .site-footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .main-nav a, .download-cta, .rail-menu > a, .quick-grid a { transition: none; }
}

/* Shared wiki surfaces. The page ID takes precedence over legacy guide styles. */
#page_content {
    --wiki-surface: linear-gradient(145deg, var(--ember-panel-soft), var(--ember-panel));
    --wiki-surface-hover: linear-gradient(145deg, #292b2e, #17191b);
    --wiki-hero-surface: linear-gradient(125deg, #27282b, #111214);
}
#page_content :is(.wiki-hero, .vg-hero, .sg-hero, .fg-hero, .rf-hero, .cg-hero, .er-hero, .wp-hero, .tb-hero) {
    background: var(--wiki-hero-surface);
}
#page_content .wiki-hero::before { background: linear-gradient(110deg, #ffffff03, transparent 65%); }
#page_content :is(
    .wiki-topic, .vg-panel, .vg-family, .vg-final, .sg-family-card,
    .sg-explanations > div, .fg-card, .rf-card, .cg-panel, .cg-entry,
    .bp-card, .er-card, .wp-card, .tb-card, .tb-offer, .sistemas-page .sistema
) {
    background: var(--wiki-surface);
}
#page_content :is(.wiki-topic:hover, .sg-family-card:hover, .sg-family-card.sg-active, .cg-entry:hover) {
    background: var(--wiki-surface-hover);
}
#page_content :is(
    .wiki-search-wrap, .wiki-footer-note, .vg-family-nav a, .vg-faq details,
    .sg-filters, .sg-faq details, .fg-guide details, .rf-guide details,
    .cg-guide details, .cg-controls, .bp-nav, .er-nav, .wp-nav, .tb-nav,
    .rf-nav, .fg-nav, .cg-nav, .er-faq details, .wp-faq details, .tb-faq details,
    .er-step, .er-time, .er-reward, .wp-step, .wp-legend-item, .wp-perk,
    .tb-step, .tb-grade, .tb-talisman-card, .rf-prices, .rf-slot,
    .rf-core-panel, .sg-detail
) {
    background: #191b1d;
}
#page_content :is(
    .vg-note, .sg-note, .fg-note, .fg-example, .rf-note, .rf-example,
    .cg-note, .cg-example, .bp-note, .er-note, .wp-note, .tb-note
) {
    background: #191b1d;
}
#page_content :is(.vg-table, .sg-table, .sg-filters input, .sg-filters select) { background: #111214; }
#page_content :is(.vg-table caption, .sg-table caption, .rf-table caption) { background: #1b1c1e; }
#page_content :is(.vg-table thead th, .sg-table thead th, .rf-table thead th, .cg-table th) { background: #27282b; }
#page_content :is(.vg-hero-emblem, .rf-workshop) { background: radial-gradient(ellipse at center, #303236, #101214 75%); }