/* Figma: PVDLmlfHFTmi0aXPSsn6FM / 4:12. Shared theme and homepage. */
:root { --bg: #0c1418; --panel: #142026; --panel-hover: #1a2b31; --border: #334044; --text: #f3eddf; --muted: #aab8b9; --teal: #80cbbf; }
body { background: var(--bg); }
.container { width: min(1240px, calc(100% - 80px)); }
.site-header { background: var(--bg); border-top: 0; border-bottom: 1px solid var(--border); box-shadow: none; }
.header-inner { min-height: 92px; gap: 36px; }
.brand-portal { display: none; }
.brand-wordmark { width: 220px; filter: none; }
.primary-nav { gap: 28px; }
.primary-nav a.active::after { height: 2px; box-shadow: none; }
/* Compact brass controls: a defined edge, no glow or floating hover. */
.button { min-height: 44px; padding: 10px 18px; gap: 8px; border: 1px solid #8f7745; border-radius: 2px; background: #b99a5b; box-shadow: inset 0 1px 0 #ffffff24, inset 0 -1px 0 #00000024; text-shadow: none; color: #171b1d; font-size: 14px; font-weight: 700; line-height: 22px; letter-spacing: 0; transition: background-color .15s, border-color .15s; }
.button:hover { color: #171b1d; background: #c7aa70; border-color: #b79a60; filter: none; transform: none; }
.button:active { background: #ad8e51; box-shadow: inset 0 1px 2px #0004; transform: none; }
.button-small { min-height: 40px; padding: 8px 14px; }
.button-secondary { background: #202a2e; border-color: #546064; color: #e2ded2; }
.button-secondary:hover { color: #fff5de; background: #2b363a; border-color: #89908a; }
.button-secondary:active { background: #192226; }
.button:focus-visible, .filter-tabs a:focus-visible { outline: 2px solid #e6cf98; outline-offset: 3px; }
.button:disabled, .button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; filter: none; transform: none; }
.text-link { color: var(--gold); }
.text-link:hover { color: var(--gold-light); }
.eyebrow { color: var(--gold); letter-spacing: 1.5px; }
.site-footer { background: var(--bg); border-top: 1px solid var(--border); }
.realm-hero { position: relative; isolation: isolate; min-height: 590px; padding: 100px 0 80px; }
.realm-hero::before { content: ''; position: absolute; z-index: -1; inset: 0 calc((1240px - 100vw) / 2); background: linear-gradient(180deg,rgba(12,20,24,.96),rgba(12,20,24,.65) 50%,rgba(12,20,24,.08)); }
.realm-landscape { position: absolute; z-index: -2; inset: 0; width: 100vw; max-width: none; height: 100%; left: calc((1240px - 100vw) / 2); object-fit: cover; object-position: center; }
.realm-hero-copy { max-width: 660px; }
.realm-hero .eyebrow { margin-bottom: 26px; font-size: 11px; text-transform: uppercase; }
.realm-hero h1 { font-size: clamp(44px,4.75vw,68px); font-weight: 700; line-height: 1.12; letter-spacing: -.5px; margin-bottom: 28px; text-shadow: 0 2px 12px #0005; }
.realm-hero p { color: var(--text); font-size: 17px; line-height: 1.55; margin-bottom: 26px; }
.realm-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.realm-strip { display: flex; align-items: center; gap: 42px; padding: 22px 0; position: relative; background: var(--panel); box-shadow: 0 0 0 100vmax var(--panel); clip-path: inset(0 -100vmax); font-size: 13px; color: var(--muted); }
.realm-strip strong { color: var(--text); font-size: 16px; margin-right: 5px; }
.realm-independent { margin-left: auto; color: var(--teal); }
.realm-community { display: grid; grid-template-columns: minmax(0,1fr) 406px; gap: 44px; padding: 64px 0; }
.realm-feed { min-width: 0; }
.realm-feed .eyebrow { margin-bottom: 20px; }
.realm-feed h2 { font-size: 30px; font-weight: 700; margin-bottom: 20px; }
.realm-feed > p { font-size: 15px; margin-bottom: 22px; }
.realm-topic-list { border-top: 1px solid var(--border); }
.realm-topic { display: flex; align-items: center; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.realm-topic:hover strong { color: var(--gold-light); }
.realm-topic > svg { margin-left: auto; color: var(--gold); }
.realm-topic-copy { display: flex; flex-direction: column; min-width: 0; gap: 3px; overflow-wrap: anywhere; }
.realm-topic-copy strong { font-size: 17px; }
.realm-topic-copy small { color: var(--teal); font-size: 11px; }
.realm-topic-copy > span { color: var(--muted); font-size: 12px; }
.realm-empty { padding: 35px 0; }
.realm-empty h3 { font: 700 18px var(--font); margin-bottom: 10px; }
.realm-empty p { font-size: 14px; }
.realm-browse { margin-top: 25px; font-weight: 700; }
.realm-discord { align-self: start; background: var(--panel); border: 1px solid var(--border); padding: 32px; }
.realm-discord > img { width: 120px; height: 120px; object-fit: contain; margin-bottom: 18px; }
.realm-discord h2 { font-size: 26px; font-weight: 700; margin-bottom: 18px; }
.realm-discord p { font-size: 15px; }
.realm-discord small { display: block; color: var(--muted); font-size: 11px; margin-top: 20px; }
.realm-owners { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 42px 0; background: var(--panel); box-shadow: 0 0 0 100vmax var(--panel); clip-path: inset(0 -100vmax); }
.realm-owners .eyebrow { margin-bottom: 10px; }
.realm-owners h2 { font-size: 28px; font-weight: 700; margin-bottom: 10px; }
.realm-owners p { margin: 0; font-size: 15px; }
.realm-owners > .button { flex-shrink: 0; }
.theme-home .site-footer { margin-top: 0; }
/* Game modes remain navigation links with their existing query strings. */
.filter-tabs { gap: 0; padding: 0; border: 0; border-bottom: 1px solid var(--border); background: transparent; width: fit-content; max-width: 100%; }
.filter-tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); }
.filter-tabs a:hover { color: var(--text); background: #ffffff05; }
.filter-tabs a.selected { color: #e6cf98; background: #b99a5b0a; border-color: #b99a5b; box-shadow: none; }
@media (max-width: 1319px) {
 .realm-landscape { left: -40px; }
 .realm-hero::before { left: -40px; right: -40px; }
 .header-inner { gap: 24px; }
 .primary-nav { gap: 22px; }
 .realm-community { grid-template-columns: minmax(0,1fr) 350px; gap: 32px; }
}
@media (max-width: 960px) {
 .header-inner { flex-wrap: wrap; gap: 0 20px; min-height: 0; padding-top: 8px; }
 .primary-nav { order: 3; width: 100%; height: 48px; }
 .header-actions { margin-left: auto; }
 .realm-hero { min-height: 540px; padding-block: 75px; }
 .realm-community { grid-template-columns: minmax(0,1fr) 300px; gap: 28px; }
 .realm-discord { padding: 24px; }
 .realm-strip { flex-wrap: wrap; gap: 12px 24px; }
 .realm-independent { margin-left: 0; }
 .realm-owners { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 700px) {
 .container { width: calc(100% - 40px); }
 .brand-wordmark { width: 180px; }
 .primary-nav { justify-content: flex-start; gap: clamp(12px,4vw,26px); }
 .realm-landscape { left: -20px; object-position: 65% center; }
 .realm-hero::before { left: -20px; right: -20px; background: linear-gradient(180deg,#0c1418d9,#0c1418a6 65%,#0c141866); }
 .realm-hero { padding: 60px 0 48px; min-height: 560px; display: flex; align-items: center; }
 .realm-hero h1 { font-size: clamp(40px,10vw,54px); }
 .realm-hero .eyebrow { max-width: 260px; font-size: 10px; line-height: 1.7; }
 .realm-hero p { font-size: 16px; }
 .realm-actions { gap: 12px; }
 .realm-actions .button { flex: 1 1 180px; }
 .realm-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-size: 12px; }
 .realm-strip strong { display: block; }
 .realm-community { grid-template-columns: minmax(0,1fr); padding-block: 40px; gap: 36px; }
 .realm-feed h2, .realm-owners h2 { font-size: 26px; }
 .realm-discord { padding: 28px; }
 .realm-owners { padding-block: 32px; }
 .filter-tabs { width: 100%; }
 .filter-tabs a { flex: 1 0 auto; justify-content: center; padding-inline: 10px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }