/* Shared charcoal palette for the public site and wiki. */
:root {
  --ground: #0f1012; --ground-deep: #090a0c;
  --surface: #16171a; --surface-2: #1c1e22;
  --ink: #ececec; --ink-soft: #c9ccd1; --ink-mute: #9aa0a6;
  --line: #2a2d32; --line-strong: #484a54;
  --text: var(--ink); --text-soft: var(--ink-soft); --muted: var(--ink-mute);
  --surface2: var(--surface-2); --line-soft: var(--line); --title: var(--display);
  --radius: 4px; --red: #efa399;
}
.brand-sigil { display: grid; place-items: center; width: 32px; height: 38px; flex: none; border: 1px solid var(--line-gold); border-radius: 12px 12px 16px 16px; font: 24px var(--display); color: var(--gold); }
.top .brand { flex: none; }
.top .bar { gap: 20px; }
.top nav { gap: 20px; }
.hero-caption { display: flex; flex-wrap: wrap; gap: 8px 24px; font: .78rem var(--ui); color: var(--ink-soft); }
.world-population { display: flex; align-items: baseline; gap: 12px; padding-top: 8px; }
.world-population strong { font: 2.6rem var(--display); color: var(--gold-bright); }
.world-population span { font: .85rem var(--ui); color: var(--ink-mute); }
.status .rows div { gap: 18px; }
.status .rows span { font-family: var(--ui); font-size: .8rem; letter-spacing: 0; }
.status .rows span:first-child { text-transform: none; }
.page-heading { border-bottom: 1px solid var(--line); background: linear-gradient(105deg, var(--surface), var(--ground)); padding-block: 34px 30px; }
.breadcrumbs { font: .75rem var(--ui); color: var(--ink-mute); margin-bottom: 12px; }
.breadcrumbs a:hover { color: var(--gold); }
.page-heading h1 { font: 2.5rem/1.2 var(--display); color: var(--ink); }
.page-wrap { padding-block: 32px 64px; }
.home .page-wrap { padding-top: 0; }
#OtPage { min-width: 0; }
#OtPage .cl-main.pg-moldura { font: .9rem/1.6 var(--ui); }
#OtPage .pg-moldura > .portal-nav { display: flex; flex-wrap: wrap; gap: 8px; max-width: none; margin: 0 0 28px; font: .8rem var(--ui); }
#OtPage .pg-moldura > .portal-nav a { padding: 10px 14px; }
#OtPage .pg-moldura > .portal-nav a[aria-current] { color: var(--gold-bright); border-color: var(--gold-deep); background: var(--surface-2); }
#OtPage .pg-moldura .InnerTableContainer { line-height: 1.5; }
.TableContainer .CaptionInnerContainer .Text { font-family: var(--display); font-size: 1.1rem; }
button, input, select, textarea { font-family: var(--ui); }
.button, .BigButton { background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.button:hover, .BigButton:hover { background: #2c2e36; }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea { background: var(--ground); border-color: var(--line-strong); }
.btn.danger { color: #f0c5bd; background: #2b1a17; border-color: #7a3f36; }
.home .news-column { display: grid; gap: 24px; }
.home .OtHeadline { font: 1.45rem var(--display); color: var(--gold-bright); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.home .NewsHeadline { flex-wrap: wrap; gap: 6px 12px; }
.home .NewsHeadlineText { width: 100%; font: 1.35rem/1.4 var(--display); }
.home .NewsHeadlineDate { font: .75rem var(--ui); }
.home .OtNews p { font-size: 1rem; line-height: 1.65; }
.home .OtNews a:hover { color: var(--gold-bright); }
.home .OtNewsMore { margin-top: 14px; color: var(--gold); }
.home .NewsTable { width: 100%; border-collapse: collapse; }
.home .NewsTableContainer { padding: 8px 0; }
.home .NewsHeadlineIcon { display: none; }
.NewsTickerFullText { display: none; }
.Row.Open .NewsTickerFullText { display: block; margin-top: 12px; }
.Row.Open .NewsTickerShortText { display: none; }
#NewsTicker .Row { position: relative; padding: 14px 0 14px 32px; border-bottom: 1px solid var(--line); }
.NewsTickerToggle { position: absolute; left: 0; top: 14px; width: 24px; height: 24px; padding: 0; background: var(--surface-2); border: 1px solid var(--line-gold); color: var(--gold); cursor: pointer; }
.NewsTickerToggle::before { content: '+'; }
.NewsTickerToggle[aria-expanded="true"]::before { content: '−'; }
.NewsTickerDate { display: block; font: .75rem var(--ui); color: var(--ink-mute); margin-bottom: 6px; }
.home .journey h2 { font: 1.4rem var(--display); color: var(--gold-bright); }
.home .journey h3 { font: 1.05rem var(--display); color: var(--ink); }
.home .journey { grid-template-columns: 1fr; }
.home .journey .two { gap: 12px; }
.home .journey .mini { text-align: left; gap: 6px; background: var(--surface-2); border-color: var(--line); padding: 18px; }
.home .journey .mini:hover { border-color: var(--gold-deep); }
.home .journey .mini p { font: .8rem/1.5 var(--ui); }
.home-ranking { padding-top: 20px; border-top: 1px solid var(--line); }
.home-ranking h3 { margin-bottom: 10px; }
.rank-mini { margin: 12px 0; padding: 0; list-style: none; }
.rank-mini li { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font: .85rem var(--ui); }
.rank-mini .rank { width: 24px; color: var(--gold); }
.rank-mini li > div { flex: 1; min-width: 0; }
.rank-mini a { display: block; margin-bottom: 4px; }
.rank-mini small { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-mute); font-size: .75rem; }
.getting-started { margin-top: 24px; padding: 28px; border: 1px solid var(--line); background: var(--surface); }
.getting-started h2 { font: 1.5rem var(--display); margin-bottom: 24px; }
.getting-started .steps { gap: 24px; }
.home .section-heading { margin-bottom: 24px; }
.home .section-heading h2 { font: 2rem var(--display); }
.home .section-heading p { margin-top: 8px; color: var(--ink-soft); }
.home .section { padding-top: 72px; }
.daily-world.with-save { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.daily-selection { min-width: 0; }
.daily-selection .daily-label { font: .7rem var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.daily-selection strong { font-family: var(--display); }
.home .duo { margin-top: 48px; }
.home .duo p { color: var(--ink-soft); }
.site-footer { border-top: 1px solid var(--line-gold); background: var(--ground-deep); padding: 40px 0 24px; font-family: var(--ui); }
.footer-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.footer-heading p { color: var(--ink-mute); font-size: .85rem; }
.footer-sections { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.footer-sections h2 { font: 1.05rem var(--display); color: var(--gold); margin: 0 0 14px; }
.footer-sections ul { list-style: none; margin: 0; padding: 0; }
.footer-sections li { margin: 0 0 8px; font-size: .8rem; line-height: 1.5; color: var(--ink-mute); }
.footer-sections a:hover, .footer-legal a:hover { color: var(--gold-bright); }
.footer-status { margin-top: 28px; font-size: .8rem; color: var(--ink-soft); }
.footer-legal { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .72rem; color: var(--ink-mute); }
@media (min-width: 1024px) {
  .top .bar { flex-wrap: nowrap; }
  .top nav { font-size: .8rem; }
}
@media (max-width: 1023px) {
  .footer-sections { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-heading h1 { font-size: 2rem; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 32px); }
  .top .bar { gap: 6px; }
  .top .brand-sigil { display: none; }
  .top .brand .name { font-size: .95rem; }
  .top .actions .btn { min-height: 40px; padding-inline: 7px; font-size: .68rem; letter-spacing: 0; }
  .top .bar .menu-toggle { width: 40px; min-height: 40px; padding: 0; }
  .hero .wordmark { font-size: clamp(2.6rem, 11vw, 4rem); letter-spacing: .05em; }
  .hero-copy { gap: 20px; }
  .hero-caption { gap: 8px; font-size: .7rem; }
  .hero .cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero .cta .btn { min-width: 0; padding-inline: 10px; font-size: .75rem; }
  .page-heading { padding-block: 24px; }
  .page-heading h1 { font-size: 1.75rem; overflow-wrap: anywhere; }
  .page-wrap { padding-block: 24px 40px; }
  #OtPage .pg-moldura > .portal-nav { gap: 6px; }
  #OtPage .pg-moldura > .portal-nav a { padding: 10px; font-size: .75rem; }
  .daily-world.with-save { grid-template-columns: 1fr; gap: 12px; }
  .daily-selection { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
  .daily-selection:last-of-type { border: 0; }
  .home .cols { margin-top: 32px; }
  .home .panel { padding: 20px; }
  .home .section { padding-top: 40px; }
  .footer-heading { align-items: start; flex-direction: column; gap: 14px; }
  .footer-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .footer-legal { flex-direction: column; gap: 12px; overflow-wrap: anywhere; }
  .TableContainer { max-width: 100%; }
  .InnerTableContainer { padding: 12px; }
  .TableContentContainer { max-width: 100%; }
  .TableContainer > table, .InnerTableContainer > table, #experience-table-form > table { table-layout: fixed; }
  #OtPage .pg-moldura form input, #OtPage .pg-moldura form select, #OtPage .pg-moldura form textarea { max-width: 100%; min-width: 0; }
  #experience-table-form .LabelV150 { width: 95px; }
  #experience-table-form input { max-width: 100%; min-width: 0; }
  #experience-table-form .BigButton { white-space: normal; max-width: 100%; }
  #experience-table-form .BigButtonText { padding-inline: 10px; }
  #wiki-search .InnerTableContainer > table { table-layout: fixed; }
  #wiki-search .LabelV120 { width: 76px; }
  #wiki-search input, #wiki-search select { max-width: 100%; }
}

/* Client artwork, neutral surfaces and direct gameplay presentation. */
:root { color-scheme: dark; }
.top { background: rgba(15,16,18,.97); }
.hero::before { background: linear-gradient(90deg, #090a0cf2 0%, #090a0cc9 34%, #090a0c30 70%, #090a0c55), linear-gradient(0deg, var(--ground), transparent 45%); }
.hero-art { object-position: 60% 50%; }
.hero .wordmark { font-family: var(--ui); font-weight: 800; letter-spacing: .025em; }
.hero h2 { font-family: var(--ui); font-weight: 750; letter-spacing: -.025em; max-width: 22ch; }
.hero p.lead { color: var(--ink-soft); }
.status { background: rgba(15,16,18,.93); }
.home .getting-started h2, .home .section-heading h2, .home .duo h2 { font-family: var(--ui); font-weight: 700; letter-spacing: -.02em; }
.home .journey .dl { background: linear-gradient(0deg, #090a0cf5, #090a0c50), url("img/client-portal.jpg") 65% 50% / cover; }
.feature-art { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 28px 22px; min-height: 145px; background: linear-gradient(135deg, var(--surface-2), var(--ground)); border-bottom: 1px solid var(--line); color: var(--gold); }
.feature-art svg { width: 70px; height: 70px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feature-art span { font: 800 .8rem var(--ui); letter-spacing: .08em; }
.combat-features .body { flex: 1; grid-template-rows: auto auto 1fr auto; }
.combat-features h3 { font: 700 1.2rem/1.35 var(--ui); }
.combat-features p { font: .9rem/1.65 var(--ui); }
.combat-features .text-link { padding-top: 8px; }
@media (max-width: 640px) { .hero::before { background: linear-gradient(90deg, #090a0ce8, #090a0ca8), linear-gradient(0deg, var(--ground), transparent 60%); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }