/* HavocTown: tokens, shared components, page layouts, responsive rules.
   One stylesheet for every page. Do not add a second theme or override file. */
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Variable.ttf") format("truetype"); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/SpaceGrotesk-Variable.ttf") format("truetype"); font-style: normal; font-weight: 300 700; font-display: swap; }
:root {
  color-scheme: dark;
  --bg: #0b0e13; --bg-deep: #080b10;
  --panel: #17212c; --panel-soft: #111922; --panel-raised: #222e3c;
  --surface: linear-gradient(145deg, #ffffff06, #ffffff00 65%), var(--panel);
  --surface-soft: linear-gradient(135deg, #ffffff05, #ffffff00 70%), var(--panel-soft);
  --surface-hero: radial-gradient(ellipse at 0 0, #506f8b20, transparent 65%), var(--surface-soft);
  --line: #ffffff18; --line-strong: #ffffff30;
  --text: #f4f3ef; --muted: #bec5d0; --dim: #96a4b5;
  --accent: #f0c989; --accent-hover: #ffe0aa; --accent-soft: #28231d; --accent-line: #6d5738;
  --metal: linear-gradient(115deg, #f8dda8, #e6b66a 72%, #f1cc90);
  --success: #b2d9bd; --success-bg: #19281e; --success-line: #365441;
  --danger: #efb0aa; --danger-bg: #2b1e1d; --danger-line: #62403a;
  --body: "Inter", "Segoe UI", Arial, sans-serif;
  --display: "Space Grotesk", "Inter", "Segoe UI", sans-serif;
  --numbers: var(--body);
  --type-body: 1rem; --type-lead: 1.0625rem; --type-small: .875rem; --type-label: .75rem;
  --type-card: 1.375rem; --type-subhead: clamp(1.4rem, calc(1.15rem + .5vw), 1.75rem);
  --type-section: clamp(1.75rem, calc(1.35rem + 1vw), 2.4rem);
  --type-page: clamp(2.25rem, calc(1.6rem + 2vw), 3.5rem);
  --type-hero: clamp(3.5rem, calc(2rem + 4vw), 7.25rem);
  --gutter: max(clamp(24px, 4vw, 96px), calc((100vw - 112rem) / 2));
  --section-space: clamp(3.5rem, 6vw, 6rem); --intro-space: clamp(1.5rem, 2.5vw, 2rem);
  --grid-gap: 1.25rem; --card-padding: clamp(1.25rem, 1.8vw, 1.75rem); --page-padding: clamp(1.5rem, 3vw, 3rem);
  --radius: 14px; --radius-small: 7px; --header-height: 5.4rem; --reading-width: 68rem;
  --shadow: 0 16px 40px #0002, inset 0 1px 0 #ffffff08;
  --shadow-hero: 0 24px 64px #0003, inset 0 1px 0 #ffffff0d;
}

/* Foundation */
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); font-size: clamp(16px, calc(14px + .16vw), 20px); scroll-behavior: auto; scroll-padding-top: calc(var(--header-height) + 1.5rem); }
body { min-width: 0; margin: 0; color: var(--text); background: radial-gradient(ellipse at 0 12%, #25344b1c, transparent 36rem), var(--bg); font: 400 var(--type-body)/1.6 var(--body); -webkit-font-smoothing: antialiased; }
body.nav-open { overflow: hidden; }
::selection { color: var(--bg-deep); background: var(--accent); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { margin-bottom: 0; color: var(--text); font-family: var(--display); font-weight: 600; letter-spacing: -.035em; line-height: 1.2; text-wrap: balance; }
h1 { font-size: var(--type-page); line-height: 1.12; }
h2 { font-size: var(--type-section); }
h3, h4 { font-size: var(--type-card); letter-spacing: -.025em; }
p { color: var(--muted); line-height: 1.75; }
strong { font-weight: 600; }
small { font-size: var(--type-small); }
code { padding: .15rem .4rem; border: 1px solid var(--line); border-radius: var(--radius-small); color: var(--accent); background: var(--panel-raised); overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 200; top: .75rem; left: var(--gutter); padding: .75rem 1rem; border-radius: var(--radius-small); color: var(--bg-deep); background: var(--accent); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.muted { color: var(--muted); }
.site-shell { display: flex; flex-direction: column; width: 100%; min-height: 100svh; }
main { flex: 1 0 auto; min-width: 0; padding-inline: var(--gutter); }
main > *, :is(.section-head, .section-intro, .dashboard-head) > * { min-width: 0; }

/* Shared navigation */
.topbar { position: sticky; z-index: 100; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-height); padding: 1rem var(--gutter); border-bottom: 1px solid var(--line); background: #0b1019e8; backdrop-filter: blur(24px); box-shadow: inset 0 -1px 0 #ffffff02; }
.topbar.is-scrolled { background: #0b1019f5; box-shadow: 0 8px 32px #0004; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; gap: .75rem; text-decoration: none; }
.brand-logo { display: block; width: 14rem; height: auto; }
.nav { display: flex; align-items: center; gap: clamp(4px, 1.2vw, 24px); }
.nav a { display: inline-flex; align-items: center; min-height: 2.8rem; padding: .5rem .6rem; border-radius: var(--radius-small); color: #c3c5c6; font-size: var(--type-small); font-weight: 500; text-decoration: none; transition: color .18s ease, background .18s ease; }
.nav a:hover, .nav a[aria-current="page"] { background: #ffffff06; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .65rem; }
.nav a[aria-current="page"] { text-underline-offset: .5rem; }
.nav .nav-account { margin-left: .5rem; padding-left: 1.4rem; border-left: 1px solid var(--line); border-radius: 0; }
.nav .nav-cta { margin-left: .5rem; padding-inline: 1.35rem; gap: 1.5rem; border: 1px solid #ffe4b570; color: #19150f; background: var(--metal); box-shadow: 0 3px 16px #e8b9680c, inset 0 1px 0 #fff4; }
.nav .nav-cta:hover { border-color: var(--accent-hover); color: #16130e; background: var(--accent-hover); }
.nav .nav-cta[aria-current='page'] { color: #16130e; text-decoration: none; border-color: var(--accent-hover); background: var(--metal); }
.nav-toggle { display: none; }
.nav-logout { margin: 0; }
.nav-logout button { min-height: 2.8rem; padding: .5rem 1rem; border: 0; border-left: 1px solid var(--line); color: var(--muted); background: transparent; font-size: var(--type-small); }
.nav-logout button:hover { color: var(--accent); }

/* Shared controls, labels and feedback */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-height: 3.2rem; padding: .85rem 1.4rem; border: 1px solid transparent; border-radius: var(--radius-small); font-size: .88rem; font-weight: 600; line-height: 1.4; text-align: center; text-decoration: none; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn-primary { border-color: #ffe4b570; color: #19150f; background: var(--metal); box-shadow: 0 4px 24px #e8b96812, inset 0 1px 0 #fff5; }
.btn-primary:hover { border-color: var(--accent-hover); background: var(--metal); box-shadow: 0 8px 28px #e8b96826, inset 0 1px 0 #fff6; transform: translateY(-2px); }
.btn-ghost, .btn-secondary { border-color: var(--line-strong); color: var(--text); background: #ffffff05; box-shadow: inset 0 1px 0 #ffffff04; }
.btn-ghost:hover, .btn-secondary:hover { border-color: var(--dim); background: var(--panel-raised); }
.btn-paypal { border-color: #376a9b; color: #dcefff; background: #183b5d; }
.btn-paypal:hover { border-color: #6899c7; background: #204e79; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.text-link, .card-link { display: inline-flex; align-items: center; gap: .6rem; color: var(--accent); font-size: var(--type-small); font-weight: 600; text-decoration: none; }
.text-link:hover, .card-link:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: .25em; }
.eyebrow, .section-kicker { margin-bottom: .75rem; color: var(--accent); font-size: var(--type-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: .65rem; }
.eyebrow-line { width: 1.4rem; height: 1px; background: currentColor; }
.section-kicker { display: block; }
.badge, .status-dot, .status-chip, .gp-rate-chip, .car-state { display: inline-flex; align-items: center; gap: .45rem; width: fit-content; max-width: 100%; padding: .3rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-small); color: var(--muted); background: var(--panel-raised); font-size: var(--type-label); font-weight: 500; line-height: 1.5; }
.status-dot, .status-success { border-color: var(--success-line); color: var(--success); background: var(--success-bg); }
.status-pending { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.status-warning { border-color: var(--danger-line); color: var(--danger); background: var(--danger-bg); }
.status-dot::before, .status-chip i { content: ''; flex: 0 0 .4rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--success); }
.flash-wrap { display: grid; gap: .75rem; margin: 1.5rem var(--gutter) 0; }
.flash { padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); background: var(--panel); }
.flash-success { border-color: var(--success-line); color: var(--success); background: var(--success-bg); }
.flash-error { border-color: var(--danger-line); color: var(--danger); background: var(--danger-bg); }
.form-stack { display: grid; gap: 1rem; margin-top: 1.5rem; }
.form-stack label > span { display: block; margin-bottom: .5rem; color: var(--text); font-size: var(--type-small); font-weight: 500; }
input:not([type="hidden"]), select, textarea { width: 100%; min-height: 3rem; padding: .75rem .85rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); color: var(--text); background: var(--bg); transition: border-color .2s ease, box-shadow .2s ease; }
input::placeholder, textarea::placeholder { color: var(--dim); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px #e8b9681c; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px var(--bg) inset; caret-color: var(--text); }

/* Shared surfaces and page rhythm */
.section { margin-block: var(--section-space); }
.section-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 2rem; margin-bottom: var(--intro-space); }
.section-intro > p, .intro-action { max-width: 48ch; justify-self: end; margin: 0; }
.section-intro > .text-link { justify-self: end; }
.intro-action p { margin: 0 0 .5rem; }
.interior-stack { display: grid; gap: var(--grid-gap); padding-block: 2rem var(--section-space); }
.panel, .stat-card, .package-card { min-width: 0; padding: var(--card-padding); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.page-lead, .content-hero { padding: var(--page-padding); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-hero); box-shadow: var(--shadow-hero); }
.dashboard-head { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin: 0; }
.dashboard-head h1 { max-width: 26ch; overflow-wrap: anywhere; }
.dashboard-head p { max-width: 58ch; margin: 1.25rem 0 0; font-size: var(--type-lead); }
.page-lead-actions { flex-shrink: 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: var(--intro-space); }
.section-head.compact h2 { font-size: var(--type-card); }
.stats-grid, .cards-grid, .two-col { display: grid; gap: var(--grid-gap); }
.stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.stat-card > span, .stat-card > strong, .stat-card > small { display: block; }
.stat-card > span { color: var(--dim); font-size: var(--type-label); letter-spacing: .06em; text-transform: uppercase; }
.stat-card > strong { margin: .75rem 0 .35rem; font-size: var(--type-section); font-weight: 600; letter-spacing: -.035em; line-height: 1.2; overflow-wrap: anywhere; }
.stat-card > small { color: var(--muted); }
.check-list { display: grid; gap: .85rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.check-list li { display: flex; align-items: baseline; gap: .75rem; color: var(--muted); }
.check-list li::before { content: '\2713'; color: var(--accent); }
.detail-list article { display: grid; gap: .25rem; padding-block: 1rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.detail-list article:last-child { border-bottom: 0; }
.detail-list span { color: var(--muted); font-size: var(--type-small); }
.table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-soft); scrollbar-color: var(--line-strong) transparent; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); background: var(--panel-raised); font-size: var(--type-label); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
td { font-size: var(--type-small); }
tbody tr:last-child :is(th, td) { border-bottom: 0; }
.page-admin table { min-width: 46rem; }
.page-admin td { overflow-wrap: anywhere; }
.page-admin :is(th, td):nth-child(2), .page-admin :is(th, td):nth-child(4) { white-space: nowrap; }
.health-table table { table-layout: fixed; }
.health-table th { width: 30%; }
.health-table td { overflow-wrap: anywhere; }

/* Public guides, articles and updates */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin: 1.5rem 0; color: var(--dim); font-size: var(--type-small); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.content-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--page-padding); }
.content-hero-compact { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.content-lead { max-width: 62ch; font-size: var(--type-lead); }
.content-hero-copy .content-lead { margin: 1.25rem 0 1.75rem; }
.content-hero-media, .article-cover { margin: 0; }
.content-hero-media img, .article-cover img { width: 100%; border-radius: var(--radius); }
.content-hero-media figcaption { margin: .75rem 0 0; color: var(--dim); font-size: var(--type-small); }
/* A regular chapter index: only the primary navigation is sticky. */
.content-jump { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin: 0; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--panel-soft); }
.content-jump strong, .content-jump a { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: .75rem; min-height: 3.75rem; padding: .9rem 1rem; font-size: var(--type-small); }
.content-jump strong { color: var(--dim); font-weight: 500; }
.content-jump a { border-right: 1px solid var(--line); color: var(--muted); text-decoration: none; transition: background .18s ease, color .18s ease; }
.content-jump a:last-child { border-right: 0; }
.content-jump a span { color: var(--accent); font-size: var(--type-label); font-variant-numeric: tabular-nums; }
.content-jump a:hover { color: var(--text); background: var(--panel-raised); }
.content-article, .editorial-article { width: min(100%, var(--reading-width)); margin: var(--section-space) auto; }
.content-section { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 2.5rem; padding-block: 2.5rem; border-top: 1px solid var(--line); scroll-margin-top: 4rem; }
.content-section:last-child { border-bottom: 1px solid var(--line); }
.content-number { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--accent); background: var(--panel); font-size: var(--type-small); }
.content-section h2, .editorial-block h2, .comparison-section h2 { max-width: 35ch; margin-bottom: 1.25rem; }
.content-section p, .editorial-block p { max-width: 70ch; margin: 0 0 1rem; }
.content-section a, .editorial-block a, .article-sources a { color: var(--accent); text-underline-offset: .2em; }
.related-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 2.5rem; margin: var(--section-space) 0; padding: var(--page-padding); border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(ellipse at 0 0, #cda46412, transparent 70%), var(--surface-soft); box-shadow: var(--shadow); }
.related-panel p { max-width: 56ch; margin: 1rem 0 0; }
.related-links { display: grid; gap: .65rem; }
.related-links a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel-raised); font-size: var(--type-small); font-weight: 500; text-decoration: none; }
.related-links a:hover { border-color: var(--line-strong); color: var(--accent); }
.platform-status-card { padding: var(--card-padding); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.platform-status-card > strong { display: block; margin-top: 1.25rem; font-size: var(--type-section); letter-spacing: -.035em; }
.platform-status-card > p { margin: .5rem 0; }
.platform-status-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: 1.5rem 0 0; }
.platform-status-card dl div { min-width: 0; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel-soft); }
.platform-status-card dt { color: var(--dim); font-size: var(--type-label); }
.platform-status-card dd { margin: .3rem 0 0; font-size: var(--type-small); overflow-wrap: anywhere; }
.faq-list { display: grid; gap: .75rem; }
.faq-list details { padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.faq-list details[open] { border-color: var(--line-strong); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 500; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; color: var(--accent); font-size: 1.3rem; line-height: 1; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list summary:hover { color: var(--accent); }
.faq-list details p { margin: .75rem 0 0; }
.editorial-header, .archive-header { max-width: var(--reading-width); padding-block: 1.5rem 2.5rem; }
.editorial-header .content-lead, .archive-header .content-lead { margin: 1.5rem 0; }
.article-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; color: var(--dim); font-size: var(--type-small); }
.affiliation-note, .editorial-summary, .archive-about, .article-footer { padding: var(--page-padding); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.affiliation-note { margin-bottom: 2.5rem; }
.affiliation-note p { margin: .5rem 0 0; }
.editorial-block, .comparison-section, .article-sources { padding-block: 2.5rem; border-top: 1px solid var(--line); }
.editorial-summary .check-list { margin-bottom: 1.5rem; }
.comparison-table { margin-top: 1.5rem; }
.comparison-table :is(th, td) { min-width: 10rem; }
.comparison-table tbody th { color: var(--text); font-size: var(--type-small); letter-spacing: 0; text-transform: none; }
.article-sources h2 { font-size: var(--type-card); }
.article-sources ul { display: grid; gap: .5rem; padding-left: 1.25rem; }
.archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); margin-bottom: var(--section-space); }
.archive-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.archive-card-media { overflow: hidden; aspect-ratio: 2; background: radial-gradient(ellipse at 50% 70%, #64778b40, transparent 65%), #10161e; border-bottom: 1px solid var(--line); }
.archive-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.archive-card-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: var(--card-padding); }
.archive-card-copy h2 { font-size: var(--type-card); }
.archive-card-copy h2 a { text-decoration: none; }
.archive-card-copy h2 a:hover { color: var(--accent); }
.archive-card-copy p { max-width: 62ch; margin: 1rem 0 1.5rem; }
.archive-card-copy .text-link { margin-top: auto; }
.archive-about { margin-block: var(--section-space); }
.archive-about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: 1.5rem; }
.archive-about-grid article { padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.archive-about-grid p { margin: .75rem 0 0; }
.article-cover { margin-bottom: 2rem; }
.article-opening { max-width: 65ch; margin: 0 0 2.5rem; font-size: 1.1rem; }
.article-footer { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 2.5rem; }
.article-footer p { margin: 0; }
.article-footer .btn { flex-shrink: 0; }
.empty-page { max-width: var(--reading-width); min-height: 55vh; padding-block: var(--section-space); }
.empty-page p { margin: 1.5rem 0; }
.not-found-page { min-height: 28rem; margin-block: 2rem var(--section-space); }
.not-found-page .content-hero-media img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 75% center; }

/* Account access */
.page-auth main { display: grid; align-items: center; padding-block: 2rem var(--section-space); }
.auth-shell { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); width: 100%; min-height: 38rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-hero); box-shadow: var(--shadow-hero); }
.auth-visual { position: relative; min-height: 100%; overflow: hidden; background: var(--bg-deep); }
.auth-visual img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; filter: saturate(.9); }
.auth-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #090e17f5, #090e1700 80%); }
.auth-visual-copy { position: absolute; z-index: 1; right: var(--page-padding); bottom: var(--page-padding); left: var(--page-padding); }
.auth-visual-copy span { display: block; margin-bottom: .75rem; color: var(--accent); font-size: var(--type-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.auth-visual-copy strong { display: block; max-width: 25ch; font-size: var(--type-section); letter-spacing: -.035em; line-height: 1.2; }
.auth-visual-copy small { display: block; max-width: 50ch; margin-top: .75rem; color: #c7c7c9; }
.auth-card { --auth-field-size: max(18px, 1rem); width: 100%; max-width: 34rem; margin: auto; padding: var(--page-padding); }
.auth-card > p { margin: 1.25rem 0 0; font-size: var(--type-lead); }
.auth-card .form-stack label > span { font-size: max(16px, .95rem); }
.auth-card .form-stack input { min-height: 3.3rem; font: 400 var(--auth-field-size)/1.5 var(--body); }
/* Keep browser-filled credentials at the same readable size as typed text. */
.auth-card input::first-line { font: 400 var(--auth-field-size)/1.5 var(--body); }
.auth-card .btn { width: 100%; font-size: max(16px, .95rem); }
.auth-switch { margin-top: 1.25rem; font-size: max(16px, .95rem); }
.auth-switch a { color: var(--accent); }

/* Packages, loyalty and payment results */
.package-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.package-card { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; }
.package-card-featured { border-color: var(--accent-line); background: radial-gradient(ellipse at 0 0, #e8b96816, transparent 70%), var(--surface); }
.package-card :is(h2,h3) { margin-top: .75rem; font-size: var(--type-card); }
.store-group { display: grid; gap: var(--intro-space); padding-top: var(--intro-space); border-top: 1px solid var(--line); }
.store-group + .store-group { margin-top: var(--intro-space); }
.store-group-heading p { margin: .65rem 0 0; max-width: 80ch; color: var(--muted); }
.package-grid-starter { grid-template-columns: minmax(0, 28rem); }
.package-pending-note { margin-top: .8rem; color: var(--muted); font-size: var(--type-small); }
.package-card > :is(.badge,.package-badge-space) { min-height: 1.9rem; }
.store-group .package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.store-group .package-grid-starter { grid-template-columns: minmax(0, 28rem); }
@media (min-width: 1500px) { .store-group .package-grid:not(.package-grid-starter) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .store-group .package-grid:not(.package-grid-starter) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .store-group .package-grid, .store-group .package-grid:not(.package-grid-starter) { grid-template-columns: 1fr; } }
.package-tagline { margin: 0; font-size: var(--type-small); }
.price { color: var(--accent); font-size: var(--type-section); font-weight: 600; letter-spacing: -.035em; }
.gp-breakdown { display: grid; gap: .4rem; width: 100%; margin: .75rem 0 1rem; }
.gp-breakdown div { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.gp-breakdown dt { color: var(--muted); font-size: var(--type-small); }
.gp-breakdown dd { margin: 0; font-weight: 500; }
.gp-breakdown-bonus dd { color: var(--success); }
.gp-breakdown-total { padding-top: .65rem; border-top: 1px solid var(--line); }
.gp-breakdown-total dd { font-size: 1.15rem; }
.package-action, .package-card > form { width: 100%; margin-top: auto; }
.provider-actions { display: grid; gap: .6rem; }
.package-action .btn, .provider-actions .btn { width: 100%; }
.package-action small { display: block; margin-top: .75rem; color: var(--dim); }
.loyalty-strip { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: center; gap: 2rem; padding: var(--card-padding); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.loyalty-strip-warning { border-color: var(--accent-line); background: var(--accent-soft); }
.loyalty-tier h2 { font-size: var(--type-card); }
.loyalty-percent { display: block; color: var(--accent); font-size: var(--type-section); }
.loyalty-tier small { color: var(--muted); }
.loyalty-note { margin: 0 0 .65rem; }
.loyalty-crown { margin: .75rem 0 0; }
.loyalty-crown strong, .loyalty-note strong { color: var(--text); }
.loyalty-crown .status-chip { margin-right: .5rem; }
.loyalty-progress { display: block; width: 100%; height: .5rem; overflow: hidden; appearance: none; border: 0; border-radius: var(--radius-small); color: var(--accent); background: var(--line); }
.loyalty-progress::-webkit-progress-bar { border-radius: inherit; background: var(--line); }
.loyalty-progress::-webkit-progress-value { border-radius: inherit; background: var(--accent); }
.loyalty-progress::-moz-progress-bar { border-radius: inherit; background: var(--accent); }
.checkout-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.checkout-trust > span { padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); background: var(--panel-soft); font-size: var(--type-small); }
.checkout-trust strong { display: block; margin-bottom: .25rem; color: var(--text); }
.package-section-head { margin: 1rem 0 0; }
.package-section-head p { max-width: 52ch; margin: 0; text-align: right; }
.gp-reward strong { font-size: var(--type-card); }
.payment-result { width: min(100%, 46rem); margin: 1rem auto; padding: var(--page-padding); text-align: center; }
.payment-result .eyebrow { justify-content: center; }
.payment-result h1 { margin-top: 1rem; }
.payment-result > p { max-width: 56ch; margin: 1rem auto; }
.payment-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 1.5rem 0; }
.payment-summary-order { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.payment-summary div { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel-soft); }
.payment-summary dt { color: var(--dim); font-size: var(--type-label); }
.payment-summary dd { margin: .4rem 0 0; font-weight: 500; overflow-wrap: anywhere; }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.5rem; }

/* Private account overview. Keep acquisition and game promotions on public pages. */
.account-dashboard { display: grid; gap: var(--grid-gap); padding-block: 2rem var(--section-space); }
.account-icon { flex: 0 0 1.35rem; width: 1.35rem; height: 1.35rem; }
.account-overview-head { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.account-overview-head p { margin: 1.25rem 0 0; font-size: var(--type-lead); }
.account-user-lockup { display: flex; align-items: center; gap: .9rem; min-width: 0; max-width: 45%; padding: .9rem 1.15rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }
.account-user-lockup > div { display: grid; min-width: 0; gap: .2rem; }
.account-user-lockup strong { font-size: 1rem; overflow-wrap: anywhere; }
.account-user-lockup > div > span { color: var(--dim); font-size: var(--type-label); overflow-wrap: anywhere; }
.account-avatar { display: grid; place-items: center; flex: 0 0 2.8rem; height: 2.8rem; border: 1px solid var(--accent-line); border-radius: 50%; color: var(--accent); background: var(--accent-soft); }
.account-section-nav { display: flex; flex-wrap: wrap; gap: .35rem; padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }
.account-section-nav a { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .4rem .7rem; border-radius: var(--radius-small); color: var(--muted); font-size: var(--type-small); text-decoration: none; }
.account-section-nav a:hover, .account-section-nav a:focus-visible { color: var(--text); background: var(--panel); }
.account-section-nav .account-icon { width: 1.05rem; height: 1.05rem; flex-basis: 1.05rem; color: var(--accent); }
.account-nav-count { padding: .05rem .4rem; border: 1px solid var(--line); border-radius: 4px; font-size: .65rem; color: var(--text); background: var(--panel); }
.account-balances { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.account-balance { --balance-color: #b8c9de; display: flex; align-items: flex-start; gap: 1rem; min-width: 0; padding: 1.3rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.account-balance > div { min-width: 0; }
.account-balance-gold { --balance-color: var(--accent); border-color: #635139; background: linear-gradient(115deg, #2b2923, var(--panel-soft)); }
.account-balance-cash { --balance-color: #a3d2bf; }
.account-balance-icon { display: grid; place-items: center; flex: 0 0 2.65rem; width: 2.65rem; height: 2.65rem; border: 1px solid #ffffff18; border-radius: var(--radius-small); color: var(--balance-color); background: #ffffff05; }
.account-balance h2 { color: var(--muted); font-size: var(--type-small); letter-spacing: 0; font-weight: 500; }
.account-balance strong { display: block; margin: .6rem 0 .3rem; color: var(--balance-color); font-size: 2rem; line-height: 1.15; letter-spacing: -.045em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.account-balance strong small { font-size: .95rem; letter-spacing: 0; }
.account-balance p { margin: 0; color: var(--dim); font-size: var(--type-label); }
.account-notice { margin: -.5rem 0 0; padding: .8rem 1rem; border-left: 2px solid var(--accent); color: var(--muted); background: var(--panel-soft); font-size: var(--type-small); }
.account-notice strong { color: var(--text); }
.account-notice a { color: var(--accent); text-underline-offset: .2em; }
.account-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; margin-bottom: 1.1rem; }
.account-section-head > div { min-width: 0; }
.account-section-head .eyebrow { margin-bottom: .35rem; font-size: .65rem; }
.account-section-head h2 { font-size: var(--type-card); }
.account-section-note { color: var(--dim); font-size: var(--type-label); }
.account-characters { min-width: 0; margin-block: .5rem; scroll-margin-top: 1rem; }
.roster-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.roster-card { --roster-accent: #a0cbe8; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); box-shadow: var(--shadow); }
.roster-card:nth-child(3n + 2) { --roster-accent: #d1c0e7; }
.roster-card:nth-child(3n + 3) { --roster-accent: #acd4c6; }
.roster-card-head { padding: 1.15rem 1.3rem 1rem; border-top: 2px solid var(--roster-accent); border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 100% 0, #a0cbe815, transparent 65%), linear-gradient(125deg, var(--panel-raised), var(--panel-soft)); }
.roster-class { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: var(--roster-accent); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.roster-class > span:first-child { display: flex; align-items: center; gap: .45rem; }
.roster-class .account-icon { width: 1rem; height: 1rem; flex-basis: 1rem; }
.roster-index { color: var(--dim); font-variant-numeric: tabular-nums; }
.roster-name { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block: .9rem; }
.roster-name h3 { font-size: var(--type-card); overflow-wrap: anywhere; }
.roster-level { display: flex; align-items: center; flex-shrink: 0; gap: .5rem; color: var(--roster-accent); }
.roster-level span { font-size: var(--type-label); }
.roster-level strong { font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.roster-xp { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem .75rem; color: var(--dim); font-size: var(--type-label); }
.roster-points { padding: .15rem .4rem; border: 1px solid var(--line); border-radius: 3px; }
.roster-points.has-points { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.roster-body { display: flex; flex-direction: column; flex: 1; padding: 1.2rem 1.3rem 1rem; }
.roster-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0 0 1.1rem; }
.roster-stats > div { padding-left: .75rem; border-left: 2px solid var(--line-strong); }
.roster-stats dt { color: var(--dim); font-size: var(--type-label); }
.roster-stats dd { margin: .25rem 0 0; color: var(--text); font-size: 1.3rem; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.roster-funds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0 0 1rem; padding-block: 1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.roster-funds dt { color: var(--dim); font-size: var(--type-label); }
.roster-funds dd { margin: .35rem 0 0; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.roster-funds > div:nth-child(2) dd { color: var(--accent); }
.roster-funds small { font-size: .65rem; font-weight: 400; }
.roster-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .65rem; margin-top: auto; color: var(--dim); font-size: .65rem; }
.roster-footer > span:first-child { display: flex; align-items: center; gap: .4rem; }
.roster-footer strong { color: var(--muted); font-weight: 400; }
.roster-footer .account-icon { width: 1.05rem; height: 1.05rem; flex-basis: 1.05rem; }
.account-lower-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; gap: var(--grid-gap); }
.account-activity { display: grid; min-width: 0; gap: var(--grid-gap); }
.account-panel { min-width: 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); box-shadow: var(--shadow); scroll-margin-top: 1rem; }
.account-panel .account-section-head { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.account-panel .account-icon { color: var(--dim); }
.account-order-list { display: grid; }
.account-order { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .75rem 1.25rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.account-order:first-child { padding-top: 0; }
.account-order:last-child { padding-bottom: 0; border-bottom: 0; }
.account-order h3 { font-size: 1.05rem; overflow-wrap: anywhere; }
.account-order-product > span, .account-order-amount > span { display: block; margin-top: .25rem; color: var(--dim); font-size: var(--type-label); }
.account-order-amount { text-align: right; font-variant-numeric: tabular-nums; }
.account-order-amount strong { color: var(--accent); font-size: 1rem; }
.account-order-detail { grid-column: 1 / -1; margin: 0; color: var(--dim); font-size: var(--type-label); }
.account-detail-list { margin: 0; }
.account-detail-list > div { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 1rem; padding-block: .65rem; border-bottom: 1px solid var(--line); font-size: var(--type-small); }
.account-detail-list > div:first-child { padding-top: 0; }
.account-detail-list > div:last-child { border-bottom: 0; }
.account-detail-list dt { color: var(--dim); }
.account-detail-list dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.account-panel-note { margin: 1.2rem 0 0; padding: .85rem 1rem; border-left: 2px solid var(--line-strong); color: var(--dim); background: var(--bg); font-size: var(--type-label); }
.account-panel-note strong { display: block; margin-bottom: .3rem; color: var(--muted); }
.account-access-note { display: flex; gap: .65rem; align-items: start; margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.account-access-note p { margin: 0; color: var(--dim); font-size: var(--type-label); }
.account-access-note .account-icon { margin-top: .2rem; flex-basis: 1rem; width: 1rem; height: 1rem; }
.account-signout { margin-top: 1rem; }
.account-signout .btn { width: 100%; justify-content: space-between; min-height: 2.8rem; padding: .75rem 1rem; font-size: var(--type-small); }
.account-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem var(--gutter) 2rem; border-top: 1px solid var(--line); color: var(--dim); font-size: var(--type-label); }
.account-footer nav { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.account-footer a { text-decoration: none; }
.account-footer a:hover { color: var(--text); }
.account-empty { display: flex; align-items: center; gap: 1.2rem; padding: 2rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--panel-soft); }
.account-empty-icon { display: grid; flex: 0 0 3rem; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; color: var(--accent); background: var(--panel-raised); }
.account-empty h3 { font-size: 1.15rem; }
.account-empty p { max-width: 55ch; margin: .5rem 0; font-size: var(--type-small); }
.account-empty .text-link { margin-top: .5rem; }
.account-empty-orders { padding: 1rem 0; border: 0; background: transparent; }

/* Homepage hero */
.city-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(38rem, 78svh, 49rem); margin-inline: calc(-1 * var(--gutter)); padding: 3.5rem var(--gutter) 6rem; overflow: hidden; background: #0b1016; }
.city-hero-art { position: absolute; z-index: -3; inset: -2%; mask-image: none; transform: translate3d(var(--art-x, 0px), var(--art-y, 0px), 0) scale(1.035); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.city-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 56%; filter: saturate(.92) contrast(1.02); }
.city-hero::before { content: ''; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, #0b1016f5, #0b1016d9 24%, #0b101650 48%, #0b101600 70%), linear-gradient(0deg, #0b1016, #0b101622 20%, #0b101600 60%); }
.city-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background-image: url('../media/hero-grain.svg'); opacity: .025; pointer-events: none; }
.city-hero-copy { position: relative; width: min(55%, 47rem); }
.hero-edition { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.4rem; color: #d0d1cb; font-size: var(--type-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.edition-line { width: 1.6rem; height: 2px; background: var(--accent); }
.edition-divider { color: var(--accent); }
.city-hero h1 { margin: 0; color: #f4f2e9; font-family: var(--display); font-size: var(--type-hero); font-weight: 700; letter-spacing: -.07em; line-height: 1.08; text-wrap: nowrap; text-shadow: 0 4px 24px #0004; }
.page-home .city-hero-lead { max-width: 36ch; margin: 1.4rem 0 1rem; color: #f0eee5; font-family: var(--display); font-size: clamp(1.35rem, 1.7vw, 1.7rem); font-weight: 400; line-height: 1.4; letter-spacing: -.025em; }
.page-home .city-hero-description { max-width: 43ch; margin: 0; color: #b5babc; font-size: var(--type-body); line-height: 1.65; }
.city-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 2rem; margin-top: 2rem; }
.city-hero-actions .btn { min-height: 3.45rem; padding-inline: 1.6rem; gap: 2.4rem; }
.city-hero-actions .btn > span { font-size: 1.2rem; font-weight: 400; transition: transform .2s ease; }
.city-hero-actions .btn:hover > span { transform: translate(2px, -2px); }
.hero-explore { display: inline-flex; align-items: center; gap: .8rem; min-height: 3rem; color: var(--text); font-size: var(--type-small); text-decoration: none; }
.explore-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid #ffffff40; border-radius: 50%; font-size: .9rem; transition: border-color .2s ease; }
.hero-explore:hover .explore-icon { border-color: var(--accent); color: var(--accent); }
.hero-platform { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; color: #aeb7ba; font-size: var(--type-label); }
.hero-platform svg { width: .85rem; height: .85rem; }
.platform-dot { width: 3px; height: 3px; margin-inline: .2rem; border-radius: 50%; background: #919c9e; }
.hero-field-note { position: absolute; right: var(--gutter); bottom: 6.5rem; width: 15rem; padding: 1.4rem 1.6rem; border: 1px solid #ffffff30; border-radius: var(--radius); background: linear-gradient(135deg, #ffffff0c, transparent), #0c121cbc; color: var(--text); text-decoration: none; backdrop-filter: blur(24px); box-shadow: 0 16px 48px #0005, inset 0 1px 0 #ffffff10; transition: background .2s ease; }
.hero-field-note:hover { background: #101719e0; }
.field-note-index { display: block; color: #ced2c9; font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; }
.hero-field-note > strong { display: block; margin: .8rem 0 1.1rem; font-family: var(--body); font-size: var(--type-card); font-weight: 600; letter-spacing: -.025em; line-height: 1.3; }
.field-note-link { display: flex; justify-content: space-between; color: var(--accent); font-size: var(--type-small); }
.hero-bottom-line { position: absolute; right: var(--gutter); bottom: 1.65rem; left: var(--gutter); display: flex; justify-content: space-between; align-items: center; padding-top: 1.2rem; border-top: 1px solid #ffffff26; color: #b2b9b8; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; }
.hero-bottom-line a { display: inline-flex; align-items: center; gap: 1.2rem; min-height: 2rem; text-decoration: none; }
.hero-bottom-line a:hover { color: var(--accent); }
.world-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .8fr); gap: 1.4rem; margin-inline: calc(-1 * var(--gutter)); padding: 1.65rem var(--gutter); border-block: 1px solid var(--line); background: linear-gradient(100deg, #18212d, #101720 65%); }
.world-facts > * { display: flex; align-items: center; gap: 1.1rem; min-width: 0; padding-right: 1rem; border-right: 1px solid #ffffff15; text-decoration: none; }
.world-facts > :last-child { justify-content: flex-end; padding-right: 0; border: 0; }
.fact-index { align-self: flex-start; padding-top: .25rem; color: var(--accent); font-family: var(--body); font-size: .7rem; }
.world-facts strong, .world-facts small { display: block; }
.world-facts strong { font-family: var(--body); font-size: 1rem; font-weight: 500; letter-spacing: -.025em; }
.world-facts small { margin-top: .35rem; color: #aeb7ba; font-size: var(--type-small); }
.world-facts a small { color: var(--accent); }
.fact-status { width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .3rem #e8b96812; }

/* Homepage sections */
.discovery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.discovery-card { display: flex; flex-direction: column; min-width: 0; padding: var(--card-padding); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-soft); text-decoration: none; transition: border-color .2s ease, background .2s ease; }
.discovery-card:hover { border-color: var(--line-strong); background: var(--panel); }
.discovery-card > span { color: var(--accent); font-size: var(--type-label); letter-spacing: .08em; text-transform: uppercase; }
.discovery-card h3 { margin-top: .8rem; }
.discovery-card p { flex: 1; margin: .8rem 0 1.4rem; }
.discovery-card > strong { margin-top: auto; color: var(--accent); font-size: var(--type-small); }
@supports (grid-template-rows: subgrid) {
  .discovery-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: .8rem; }
  .discovery-card h3, .discovery-card p { margin: 0; }
  .discovery-card > strong { align-self: end; margin-top: .4rem; }
}
.empty-state { display: flex; align-items: center; gap: 1rem; padding-block: 2rem; }
.empty-state > span { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--accent); background: var(--panel-raised); }
.empty-state p { margin: .4rem 0 0; }
.news-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; margin-bottom: .8rem; color: var(--dim); font-size: var(--type-label); }
.news-meta span { color: var(--accent); }
.news-meta small { font-size: inherit; }
.final-cta { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-block: var(--section-space); padding: var(--page-padding); overflow: hidden; border: 1px solid #f0c98935; border-radius: var(--radius); background: radial-gradient(ellipse at 100% 0, #c6995533, transparent 70%), linear-gradient(115deg, #19212a, #13171e); box-shadow: var(--shadow); }
.final-cta p { max-width: 60ch; margin: 1rem 0 0; }
.final-cta-actions { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: .75rem; }

/* Shared footer */
.footer { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 2rem 3rem; padding: 3.5rem var(--gutter) 1.5rem; border-top: 1px solid var(--line); background: radial-gradient(ellipse at 0 0, #8d704b0e, transparent 50%), var(--bg-deep); }
.footer-main p { max-width: 48ch; margin: 1.25rem 0 0; color: var(--dim); font-size: var(--type-small); }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: .5rem 1.5rem; }
.footer-links h2 { margin: 0 0 .9rem; color: var(--text); font-family: var(--body); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.footer-links ul { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.footer-platform { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin-top: 1.25rem; color: var(--muted); font-size: .7rem; text-decoration: none; }
.footer-platform > span:first-child { width: .35rem; height: .35rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px #f0c9890b; }
.footer-platform:hover { color: var(--accent); }
.footer-links a { display: inline-flex; align-items: center; min-height: 2.4rem; color: var(--muted); font-size: var(--type-small); text-decoration: none; }
.footer-links a:hover { color: var(--accent); }
.footer-legal { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--dim); font-size: var(--type-label); }

/* Optional motion: enabled only by cinematic.js, with a complete still state. */
.hero-atmosphere { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.light-haze { position: absolute; border-radius: 50%; opacity: .5; }
.light-haze-amber { width: 52%; height: 62%; right: -8%; top: -4%; background: radial-gradient(ellipse, #e7a64432, transparent 67%); }
.light-haze-blue { width: 45%; height: 75%; right: 20%; top: -34%; background: radial-gradient(ellipse, #5d91c126, transparent 67%); }
.fx-active [data-depth] { transform: perspective(1400px) rotateX(var(--depth-x, 0deg)) rotateY(var(--depth-y, 0deg)); transition: transform .6s cubic-bezier(.2,.7,.2,1), border-color .25s ease; }
.fx-active .hero-field-note > strong { transform: translateZ(12px); }
.fx-active .is-in-view .light-haze-amber { animation: cityHaze 12s ease-in-out infinite alternate; }
.fx-active .is-in-view .light-haze-blue { animation: cityHaze 16s ease-in-out infinite alternate-reverse; }
.fx-paused .light-haze { animation-play-state: paused !important; }
@keyframes cityHaze { from { transform: translate3d(-2%, -1%, 0); opacity: .4; } to { transform: translate3d(3%, 4%, 0); opacity: .7; } }
@media (hover: hover) and (pointer: fine) {
  .fx-active .city-hero.is-in-view .city-hero-art { will-change: transform; }
  .fx-active [data-depth]:hover { will-change: transform; }
}

/* Game guide and shared game-data components */
kbd { display: inline-block; min-width: 1.65em; padding: .1rem .35rem; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; color: var(--text); background: var(--panel-raised); font: 500 .8rem/1.4 var(--body); text-align: center; }
.guide-header { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; background: var(--surface-hero); box-shadow: var(--shadow-hero); }
.guide-header-copy { padding: var(--page-padding); }
.guide-header .content-lead { max-width: 49ch; margin: 1.25rem 0 1.75rem; font-size: var(--type-lead); }
.guide-header .hero-actions { margin-bottom: 2rem; }
.guide-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.guide-summary span { color: var(--muted); font-size: var(--type-label); }
.guide-summary strong { display: block; margin-bottom: .35rem; color: var(--text); font-size: 1.6rem; line-height: 1; }
.guide-portrait { position: relative; min-height: 24rem; overflow: hidden; background: #0e1821; }
.guide-portrait img { position: absolute; top: -24%; left: 50%; width: auto; max-width: none; height: 172%; transform: translateX(-47%); clip-path: inset(14% 28% 29% 22%); mask-image: linear-gradient(90deg, transparent 21%, #000 33%, #000 64%, transparent 73%); }
.guide-portrait::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #172330, transparent 15%), linear-gradient(0deg, #0c151f 2%, #0c151fd9 10%, transparent 28%); }
.portrait-label, .portrait-link { position: absolute; z-index: 1; right: 1.5rem; left: 1.5rem; }
.portrait-label { top: 1.25rem; color: var(--muted); font-size: var(--type-label); letter-spacing: .1em; text-transform: uppercase; }
.portrait-link { bottom: 1.25rem; display: flex; justify-content: space-between; padding-top: .8rem; border-top: 1px solid #ffffff26; color: var(--text); font-size: var(--type-small); text-decoration: none; }
.portrait-link:hover { color: var(--accent); }
.guide-section { scroll-margin-top: 1rem; }
.section-band { margin-inline: calc(-1 * var(--gutter)); padding: var(--section-space) var(--gutter); border-block: 1px solid var(--line); background: radial-gradient(ellipse at 100% 0, #667ca51a, transparent 55%), linear-gradient(120deg, #111923, #11151c); }
.section-band.guide-section { scroll-margin-top: calc(1rem - var(--section-space)); }
.guide-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: var(--grid-gap); }
.guide-two-col .panel > p { margin: 1rem 0 0; }
.garage { --garage-paint: #c13c40; --garage-neon: #21e6e6; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.garage[data-active-car="semi"] { --garage-paint: #3568ad; --garage-neon: #2e9bff; }
.garage[data-active-car="muscle"] { --garage-paint: #b93f60; --garage-neon: #ff7a1a; }
.garage[data-active-car="sedan"] { --garage-paint: #dbc9a8; --garage-neon: #2e9bff; }
.garage-view { display: flex; flex-direction: column; justify-content: center; position: relative; isolation: isolate; min-width: 0; background: #151922; }
.garage-view-top { display: flex; justify-content: space-between; gap: 1rem; padding: 1.3rem 1.5rem 0; color: var(--dim); font-size: var(--type-label); letter-spacing: .12em; text-transform: uppercase; }
.garage-view-top span:last-child { flex-shrink: 0; color: var(--garage-neon); }
.garage-stage { cursor: grab; touch-action: pan-y; user-select: none; }
.garage-stage.is-dragging { cursor: grabbing; }
.garage-stage img { width: 100%; aspect-ratio: 14 / 9; object-fit: contain; }
.garage-rotate { display: flex; align-items: center; gap: 1rem; width: min(80%, 24rem); margin: -.5rem auto 0; }
.garage-rotate button { flex: 0 0 2.5rem; height: 2.5rem; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--text); background: transparent; }
.garage-rotate button:hover { border-color: var(--accent); color: var(--accent); }
.garage-rotate label { flex: 1; color: var(--dim); font-size: var(--type-label); text-align: center; }
.garage-rotate input[type="range"] { display: block; min-height: 1.5rem; height: 1.5rem; padding: 0; border: none; accent-color: var(--accent); cursor: ew-resize; background: transparent; }
.garage-hint { margin: .6rem 1rem 1.2rem; color: var(--dim); font-size: var(--type-label); text-align: center; }
.garage-details { background: var(--surface-soft); display: flex; flex-direction: column; padding: clamp(1.5rem, 2.5vw, 3rem); border-left: 1px solid var(--line); }
.garage-details > h3 { font-size: var(--type-section); }
.garage-details > p { font-size: var(--type-small); }
.garage-build { margin: .75rem 0 1rem; min-height: 3.2em; }
.garage-finish { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-bottom: .8rem; }
.garage-finish > div { display: flex; align-items: center; gap: .65rem; min-width: 0; padding: .75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: #ffffff04; }
.garage-finish small { display: block; color: var(--dim); font-size: .65rem; letter-spacing: .05em; text-transform: uppercase; }
.garage-finish strong { display: block; margin-top: .2rem; color: var(--text); font-size: var(--type-label); font-weight: 500; }
.garage-swatch { flex: 0 0 1.35rem; height: 1.35rem; border-radius: 50%; border: 1px solid #ffffff38; }
.garage-paint-swatch { background: linear-gradient(140deg, #ffffff80, transparent 55%), var(--garage-paint); }
.garage-neon-swatch { background: var(--garage-neon); box-shadow: 0 0 12px color-mix(in srgb, var(--garage-neon) 35%, transparent); }
.garage-details > .garage-upgrade-note { margin: 0 0 1.4rem; color: var(--dim); font-size: var(--type-label); }
.garage-price { margin: .75rem 0 0; }
.garage-price strong { color: var(--accent); font-size: 1.4rem; }
.garage-specs { margin: 1.3rem 0; }
.garage-specs div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--line); font-size: var(--type-small); }
.garage-specs dt { color: var(--dim); }
.garage-specs dd { margin: 0; text-align: right; }
.garage-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: auto; }
.garage-picker button { min-width: 0; padding: .35rem .35rem .6rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); color: var(--muted); background: #151922; transition: border-color .15s, background .15s; }
.garage-picker button:hover { border-color: var(--muted); background: #202731; }
.garage-picker button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.garage-picker img { width: 100%; }
.garage-picker span { display: block; font-size: .65rem; line-height: 1.4; }
@media (max-width: 480px) {
  .garage-finish { grid-template-columns: 1fr; }
  .garage-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.section-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; color: var(--dim); font-size: var(--type-small); }
.controls-list { margin: 1.25rem 0 0; }
.controls-list div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--line); font-size: var(--type-small); }
.controls-list dt { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem; }
.controls-list dd { margin: 0; color: var(--muted); text-align: right; }
.dealer-catalog { margin-top: var(--grid-gap); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-soft); }
.dealer-catalog > summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; cursor: pointer; }
.dealer-catalog > summary span:last-child { color: var(--accent); font-size: var(--type-small); }
.vehicle-catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 1rem; overflow: hidden; border-top: 1px solid var(--line); background: var(--panel-soft); }
.vehicle-catalog-card { display: flex; align-items: center; gap: .6rem; min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel-soft); }
.vehicle-catalog-card img { width: 5rem; height: 5rem; object-fit: contain; mix-blend-mode: lighten; }
.vehicle-catalog-card h3 { font-size: .95rem; margin: .2rem 0; }
.vehicle-catalog-card span { color: var(--dim); font-size: var(--type-label); }
.vehicle-catalog-card strong { color: var(--accent); font-size: var(--type-small); }
.game-notice { margin: 0 0 1.25rem; padding: 1rem 1.25rem; border: 1px solid #40515f; border-left: 3px solid var(--accent); border-radius: var(--radius-small); background: #202d39; }
.game-notice p { margin: .4rem 0 0; font-size: var(--type-small); }
/* Events share content, rewards and clocks; the homepage uses a compact lineup. */
.event-directory { min-width: 0; }
.schedule-timezone { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1.5rem; margin-bottom: 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel); }
.schedule-timezone label { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem 1rem; margin: 0; color: var(--muted); font-size: .8rem; }
.schedule-timezone select { width: auto; max-width: 100%; min-height: 2.75rem; margin: 0; padding: .6rem 2rem .6rem .85rem; font-size: .8rem; }
.schedule-timezone > span { color: var(--dim); font-size: .75rem; overflow-wrap: anywhere; }
.event-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--grid-gap); }
.event-card { --event-color: #a0cbe8; min-width: 0; }
.event-card[data-event-type="fight_club"] { --event-color: #e3bd95; }
.event-card[data-event-type="hideout_heist"] { --event-color: #b0bfee; }
.event-card[data-event-type="kingpin"] { --event-color: #e4aaa7; }
.event-card[data-event-type="battle_royale"] { --event-color: #a5cbb4; }
.event-card[data-event-type="bangbus"] { --event-color: #c5b4e4; }
.event-guide-card { display: flex; flex-direction: column; padding: var(--card-padding); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); box-shadow: var(--shadow); }
.event-card-heading { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.event-card-heading > div { flex: 1; min-width: 0; }
.event-icon { display: grid; place-items: center; flex: 0 0 2.8rem; width: 2.8rem; height: 2.8rem; border: 1px solid #ffffff12; border-radius: 10px; color: var(--event-color); background: linear-gradient(135deg, #ffffff09, #ffffff02); }
.event-symbol { width: 1.65rem; height: 1.65rem; }
.event-category { display: block; margin-bottom: .2rem; color: var(--event-color); font-size: .65rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.event-card h3 { margin: 0; font-size: var(--type-card); }
.event-card h3 a { text-decoration: none; }
.event-card h3 a::after { content: ' ↗'; color: var(--dim); font-size: .8rem; font-weight: 400; }
.event-card h3 a:hover { color: var(--accent); }
.event-order { align-self: start; margin-left: auto; color: var(--dim); font-size: .65rem; font-variant-numeric: tabular-nums; }
.event-description { margin: 1.2rem 0; font-size: var(--type-small); }
.event-prizes { min-width: 0; }
.event-reward { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.event-reward > span { display: grid; gap: .15rem; align-content: start; }
.event-reward strong { color: var(--accent); font-family: var(--numbers); font-size: 1.5rem; font-weight: 500; line-height: 1.25; font-variant-numeric: tabular-nums; }
.event-reward > span:last-child strong { color: var(--text); }
.event-reward small { color: var(--dim); font-size: .65rem; letter-spacing: .025em; }
.event-reward-note { display: block; margin-top: .75rem; color: var(--dim); font-size: .7rem; line-height: 1.6; }
.event-entry { margin-top: 1.1rem; border-top: 1px solid var(--line); }
.event-entry summary { display: flex; align-items: center; justify-content: space-between; min-height: 2.9rem; padding-top: .5rem; color: var(--muted); font-size: var(--type-small); cursor: pointer; list-style: none; }
.event-entry summary::-webkit-details-marker { display: none; }
.event-entry summary > span[aria-hidden] { color: var(--event-color); font-size: 1.3rem; font-weight: 400; transition: transform .2s ease; }
.event-entry[open] summary > span[aria-hidden] { transform: rotate(45deg); }
.event-entry summary:hover { color: var(--text); }
.event-instructions { padding: .85rem 1rem; border-left: 2px solid var(--event-color); border-radius: 0 var(--radius-small) var(--radius-small) 0; background: #ffffff03; font-size: var(--type-small); }
.event-instructions strong { display: block; font-weight: 500; }
.event-instructions p { margin: .5rem 0 0; color: var(--dim); font-size: var(--type-label); }
.event-countdown { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .5rem .8rem; margin-top: 1.1rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: #080e16a0; }
.event-countdown > div:first-child { display: grid; gap: .2rem; }
.event-countdown [data-countdown-label] { color: var(--dim); font-size: .6rem; letter-spacing: .07em; text-transform: uppercase; }
.event-countdown [data-countdown-value] { color: var(--event-color); font: 500 1.8rem/1.2 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.event-countdown-meta { display: grid; justify-items: end; gap: .3rem; min-width: 0; color: var(--dim); font-size: .65rem; text-align: right; }
.event-countdown-meta time { color: var(--muted); font-variant-numeric: tabular-nums; }
.event-countdown.is-soon { border-color: var(--event-color); }
.event-countdown.is-soon [data-countdown-state] { color: var(--event-color); }
.event-countdown progress { grid-column: 1 / -1; display: block; appearance: none; width: 100%; height: 2px; overflow: hidden; border: 0; border-radius: 2px; color: var(--event-color); background: #ffffff15; }
.event-countdown progress::-webkit-progress-bar { background: #ffffff15; }
.event-countdown progress::-webkit-progress-value { background: var(--event-color); }
.event-countdown progress::-moz-progress-bar { background: var(--event-color); }
.event-clock-summary { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; padding: 1.1rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(100deg, #22314260, #101720); }
.event-clock-summary > svg { flex: 0 0 1.8rem; width: 1.8rem; height: 1.8rem; color: var(--accent); }
.event-clock-summary > div { flex: 1; }
.event-clock-summary strong { font-size: .95rem; }
.event-clock-summary p { margin: .2rem 0 0; font-size: var(--type-label); }
.event-clock-summary .btn { flex-shrink: 0; min-height: 2.8rem; padding: .65rem 1rem; }
.event-directory-lineup { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.8fr); gap: 1.5rem; }
.event-lineup-feature { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: end; gap: 1.8rem; min-width: 0; overflow: hidden; padding: 1.8rem; border: 1px solid #c8b48b30; border-radius: var(--radius); background: #101721; }
.event-lineup-feature > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% center; }
.event-lineup-feature::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, #0c131ffc 3%, #0c131fee 42%, #0c131f85 80%, #0c131f35); }
.event-feature-tag { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: auto; padding-bottom: 3rem; color: #e9e1d2; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
.event-feature-copy h3 { font-size: var(--type-section); line-height: 1.2; }
.event-feature-copy p { margin: .9rem 0; color: #c9d0dc; font-size: var(--type-small); }
.event-feature-copy .text-link { font-size: var(--type-label); }
.event-feature-clock { padding-top: 0; }
.event-feature-clock .eyebrow { margin-bottom: .5rem; font-size: .6rem; }
.event-feature-clock [data-clock-next-name] { display: block; font-family: var(--display); font-size: clamp(1.9rem, 2.4vw, 3rem); font-weight: 600; line-height: 1.08; }
.event-feature-clock [data-clock-next-countdown] { display: block; margin-top: .35rem; color: var(--accent); font: 500 clamp(2.75rem, 3.6vw, 4.2rem)/1.1 var(--numbers); font-variant-numeric: tabular-nums; letter-spacing: -.055em; }
.event-feature-clock p { margin: .5rem 0 1rem; font-size: var(--type-label); }
.event-feature-clock .btn { width: 100%; min-height: 2.85rem; }
.event-directory:not(.is-clock-synced) .event-feature-count-label { display: none; }
.event-lineup-shell { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }
.event-lineup { display: grid; align-content: start; }
.schedule-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.4rem; border-bottom: 1px solid var(--line); background: #ffffff03; }
.schedule-list-heading strong { font-size: .8rem; font-weight: 500; }
.schedule-list-heading > span { color: var(--dim); font-size: .65rem; }
.event-feature-clock .event-feature-brief { margin: 1rem 0 1.5rem; color: var(--muted); font-size: .85rem; line-height: 1.65; }
.event-feature-count-label { color: var(--dim); font-size: .65rem; letter-spacing: .09em; text-transform: uppercase; }
.event-feature-entry { margin: 1.3rem 0; padding-top: 1rem; border-top: 1px solid var(--line-strong); color: var(--text); font-size: .75rem; line-height: 1.6; }
.schedule-indicator { width: .45rem; height: .45rem; border-radius: 50%; background: var(--dim); }
.is-clock-synced .schedule-indicator { background: var(--accent); box-shadow: 0 0 0 4px #f0c98915; }
.event-category-line { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .6rem; margin-bottom: .35rem; }
.event-category-line .event-category { margin: 0; }
.up-next-badge { display: inline-flex; color: var(--accent); font-size: .55rem; font-weight: 600; line-height: 1.5; letter-spacing: .07em; text-transform: uppercase; border: 1px solid #f0c98945; border-radius: 3px; padding: .08rem .35rem; white-space: nowrap; }
.event-row-brief { margin: .45rem 0 0; max-width: 40ch; color: var(--dim); font-size: .68rem; line-height: 1.5; }
.event-card.is-next { border-color: #f0c98960; }
.event-row.is-next { background: linear-gradient(100deg, #f0c9890d, transparent); box-shadow: inset 3px 0 var(--accent); }
.event-row.is-next .event-order { color: var(--accent); }
.event-row { display: grid; grid-template-columns: minmax(0, 1fr) 11rem; align-items: center; gap: 1rem 1.5rem; min-height: 6.6rem; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--line); transition: background .2s ease; }
.event-row:last-child { border-bottom: 0; }
.event-row:nth-child(even) { background: #ffffff02; }
.event-row:has(a:hover), .event-row:focus-within { background: #ffffff05; }
.event-row .event-order { order: -1; align-self: center; margin: 0 .1rem 0 0; }
.event-row .event-icon { flex-basis: 2.5rem; width: 2.5rem; height: 2.5rem; }
.event-row .event-reward { padding: 0; border: 0; gap: 1rem; }
.event-row .event-reward strong { font-size: 1.2rem; }
.event-row .event-reward-note { margin-top: .35rem; font-size: .6rem; }
.event-directory-lineup.is-clock-synced .event-row { grid-template-columns: minmax(0, 1fr) 9rem 7rem; }
.event-row .event-countdown { display: block; margin: 0; padding: 0 0 0 1rem; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; }
.event-row .event-countdown [data-countdown-value] { font-size: 1.6rem; }
.event-row .event-countdown-meta { justify-items: start; margin-top: .2rem; text-align: left; }
.event-row .event-countdown-meta > span, .event-row .event-countdown progress { display: none; }
.event-row:has(.is-soon) { box-shadow: inset 2px 0 var(--event-color); background: #ffffff04; }
@supports (grid-template-rows: subgrid) {
  .event-guide-grid { align-items: stretch; }
  .event-guide-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .event-guide-card > .event-entry { grid-row: 5; align-self: start; }
  .event-visual-card > .event-card-cover { grid-row: 1; }
  .event-visual-card > .event-countdown { grid-row: 2; }
  .event-visual-card > .event-description { grid-row: 3; }
  .event-visual-card > .event-prizes { grid-row: 4; }
}
/* Event briefings: game-native artwork, then the next start and the objective. */
.event-visual-card { padding: 0 0 .65rem; overflow: hidden; border-color: #ffffff1c; transition: border-color .2s ease, box-shadow .2s ease; }
.event-visual-card.is-next { border-color: var(--accent); box-shadow: 0 0 0 1px #f0c98920, 0 18px 45px #0004; }
.event-visual-card:focus-within { border-color: var(--event-color); }
.event-card-cover { position: relative; isolation: isolate; height: clamp(14rem, 18vw, 19rem); overflow: hidden; background: radial-gradient(ellipse at 70% 30%, color-mix(in srgb, var(--event-color) 25%, #101922), #0c121b 75%); }
.event-cover-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: lighten; transition: transform .45s ease; }
.event-card-cover::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, #080e1694, transparent 30%, #0c121b12 50%, #101720 99%); }
.event-cover-top { position: absolute; inset: 1rem 1.2rem auto; display: flex; justify-content: space-between; gap: .6rem; align-items: start; }
.event-cover-top .event-category { margin: 0; padding: .3rem .55rem; border: 1px solid #ffffff1f; border-radius: 4px; background: #17212ce8; font-size: .6rem; }
.event-cover-top .event-order { padding: .2rem 0; color: #d0d9e5; font-size: .75rem; }
.event-cover-heading { position: absolute; inset: auto 1.2rem 1.85rem; display: flex; align-items: center; gap: .75rem; }
.event-cover-heading h3 { font-size: var(--type-subhead); }
.event-cover-heading .event-icon { flex-basis: 2.5rem; width: 2.5rem; height: 2.5rem; background: #17212cdd; border-color: #ffffff25; }
.event-cover-heading .up-next-badge { margin-bottom: .35rem; padding: .12rem .4rem; border: 0; color: #15130e; background: var(--accent); }
.event-preview-label { position: absolute; bottom: .55rem; left: 1.2rem; color: #aebac9; font-size: .55rem; letter-spacing: .07em; text-transform: uppercase; }
.event-visual-card > .event-countdown, .event-visual-card > .event-description, .event-visual-card > .event-prizes, .event-visual-card > .event-entry { margin-left: 1.2rem; margin-right: 1.2rem; }
.event-visual-card > .event-countdown { margin-top: .55rem; padding: .85rem .9rem; border-color: #ffffff17; background: #090f17; border-left: 2px solid var(--event-color); }
.event-visual-card .event-countdown [data-countdown-value] { font-size: 2.1rem; font-weight: 500; }
.event-visual-card.is-next > .event-countdown { background: linear-gradient(105deg, #f0c9890b, #090f17 85%); }
.event-visual-card > .event-description { margin-top: 1rem; margin-bottom: 1.1rem; font-size: .8rem; }
.event-visual-card .event-reward { padding-top: .9rem; gap: .75rem; }
.event-visual-card .event-reward strong { font-size: 1.35rem; }
.event-visual-card .event-reward-note { font-size: .65rem; margin-top: .6rem; }
.event-visual-card > .event-entry { margin-top: .95rem; }
.event-visual-card .event-entry summary { color: var(--text); padding-top: 0; min-height: 3rem; font-size: .8rem; }
.event-visual-card .event-entry[open] { padding-bottom: .75rem; }
.event-visual-card[data-event-type="fight_club"] .event-cover-image { mix-blend-mode: normal; object-position: center 45%; }
.event-visual-card[data-event-type="kingpin"] .event-cover-image { object-position: center 25%; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .event-visual-card:hover .event-cover-image { transform: scale(1.035); }
  .event-visual-card:hover { border-color: var(--event-color); }
}
.data-note { margin: 1rem 0 0; color: var(--dim); font-size: var(--type-label); }
.wanted-ladder { display: grid; gap: 1.2rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.wanted-ladder li { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; }
.wanted-ladder li > span { color: var(--accent); letter-spacing: .05em; font-size: var(--type-small); }
.wanted-ladder p { margin: .4rem 0 0; font-size: var(--type-small); }
.stat-build-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.stat-build-grid article { --stat-color: #d9b38e; position: relative; padding: var(--card-padding); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.stat-build-grid article > span { position: absolute; right: 1.5rem; top: 1.5rem; color: var(--stat-color); font-size: var(--type-label); letter-spacing: .08em; }
.stat-build-grid strong { display: block; margin: 1.2rem 0 .5rem; color: var(--stat-color); font-family: var(--display); font-size: var(--type-section); }
.stat-build-grid p { margin: 0; font-size: var(--type-small); }
.stat-build-grid + .game-notice { margin-top: 1.25rem; }
.anchor-target { display: block; scroll-margin-top: 1rem; }

/* Events: illustrated header and the global clock, shared with event cards. */
.events-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 2rem; min-height: 29rem; padding: var(--page-padding); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; background: var(--bg-deep); }
.events-hero-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.events-hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #090f19ed 3%, #090f19ad 43%, #090f1920 80%), linear-gradient(0deg, #090f19ae, transparent 65%); }
.events-hero-copy { max-width: 31rem; }
.events-hero h1 { margin-block: 0; }
.events-hero-copy p { max-width: 46ch; margin: 1.25rem 0 1.75rem; color: #d6dce4; font-size: var(--type-lead); }
.events-hero-clock { justify-self: end; align-self: end; display: grid; gap: .35rem; width: 18rem; max-width: 100%; padding: 1.4rem 1.5rem; border: 1px solid #b4c6dd4d; border-top: 2px solid var(--accent); border-radius: var(--radius-small); background: #0c1520e8; box-shadow: 0 12px 36px #0004; backdrop-filter: blur(12px); }
.events-hero-clock .eyebrow { margin-bottom: .6rem; }
.events-hero-clock [data-clock-next-name] { font-size: 1.1rem; font-weight: 600; }
.events-hero-clock [data-clock-next-countdown] { color: var(--accent); font-size: 3.3rem; font-weight: 500; line-height: 1.2; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.events-hero-clock [data-clock-next-note] { color: var(--muted); font-size: var(--type-label); line-height: 1.7; }
.events-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 1.3rem 0; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--panel); }
.events-facts > div { display: grid; align-content: start; gap: .25rem; padding: 0 1.6rem; border-right: 1px solid var(--line); }
.events-facts > div:last-child { border: 0; }
.events-facts strong { font-size: 1.7rem; font-weight: 500; letter-spacing: -.04em; }
.events-facts strong small { color: var(--accent); font-size: .85rem; letter-spacing: 0; }
.events-facts span { color: var(--muted); font-size: var(--type-label); }
.event-clock-panel { padding: var(--page-padding); border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(110deg, var(--panel), var(--panel-soft)); scroll-margin-top: 1rem; }
.clock-panel-intro { display: flex; align-items: start; justify-content: space-between; gap: 1.5rem; }
.clock-panel-intro h2 { font-size: var(--type-section); }
.clock-panel-intro p { margin: .75rem 0 0; font-size: var(--type-small); }
.clock-status { display: inline-flex; flex-shrink: 0; align-items: center; gap: .5rem; padding: .4rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); color: var(--muted); background: var(--bg); font-size: var(--type-label); }
.clock-status::before { content: ''; width: .35rem; height: .35rem; border-radius: 50%; background: var(--dim); }
.clock-status.is-synced { border-color: var(--success-line); color: var(--success); background: var(--success-bg); }
.clock-status.is-synced::before { background: var(--success); }
.mission-schedule-card { --event-color: var(--accent); display: flex; grid-row: auto; }
.mission-schedule-card .event-countdown { margin-top: auto; }
.mission-description { margin: 1rem 0; color: var(--muted); font-size: .85rem; }
.mission-details { display: grid; gap: .65rem; margin: auto 0 1.4rem; padding-top: .6rem; }
.mission-details > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .75rem; font-size: .7rem; }
.mission-details dt { color: var(--dim); }
.mission-details dd { margin: 0; color: var(--text); }
.mission-board-note { margin-bottom: 1.5rem; padding: 1rem 1.3rem; border-left: 2px solid var(--accent); background: #f0c98905; }
.mission-board-note strong { font-size: .85rem; }
.mission-board-note p { margin: .35rem 0 0; color: var(--dim); font-size: .78rem; }
.activity-explainer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.6rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.activity-explainer > div + div { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.activity-explainer span { color: var(--accent); font-size: .7rem; }
.activity-explainer p { margin: .7rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.7; }
.activity-explainer strong { color: var(--text); font-weight: 500; }
.difficulty-brief { display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; gap: 3rem; padding: var(--page-padding); border-block: 1px solid var(--line); background: linear-gradient(110deg, #f0c98905, transparent); }
.difficulty-brief p { margin: 1rem 0 0; max-width: 58ch; color: var(--dim); font-size: .8rem; }
.scaling-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.scaling-values strong, .scaling-values span { display: block; }
.scaling-values strong { color: var(--accent); font: 500 clamp(1.6rem, 2.5vw, 2.8rem)/1.2 var(--display); }
.scaling-values span { margin-top: .6rem; color: var(--muted); font-size: .72rem; }
.crew-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 5rem); padding: var(--page-padding); border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(ellipse at 0 100%, #a9844d15, transparent 65%), var(--panel-soft); }
.crew-feature-copy { display: flex; flex-direction: column; align-items: start; justify-content: center; }
.crew-feature-copy > p { max-width: 47ch; margin: 1.25rem 0; color: var(--muted); font-size: .9rem; }
.crew-facts { display: flex; gap: 2.5rem; margin: .5rem 0 2rem; }
.crew-facts > span { display: grid; gap: .4rem; color: var(--dim); font-size: .7rem; }
.crew-facts strong { color: var(--accent); font: 500 2.1rem/1.1 var(--display); }
.crew-job-list { display: grid; }
.crew-job-list > a { display: flex; align-items: start; gap: 1.1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.crew-job-list > a:first-child { padding-top: 0; }
.crew-job-list > a:last-child { border-bottom: 0; padding-bottom: 0; }
.crew-job-number { padding-top: .2rem; color: var(--dim); font-size: .65rem; }
.crew-job-list h3 { margin-top: .25rem; font-size: 1.15rem; }
.crew-job-list a > div > span { color: var(--accent); font-size: .6rem; text-transform: uppercase; letter-spacing: .07em; }
.crew-job-list p { margin: .4rem 0 0; color: var(--dim); font-size: .75rem; }
.crew-job-arrow { margin-left: auto; color: var(--accent); }
.crew-job-list a:hover h3 { color: var(--accent); }
.world-training-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.world-type-nav, .world-town-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.world-type-nav { margin-bottom: 2.5rem; }
.world-type-nav a { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--panel-raised); color: var(--text); text-decoration: none; font-size: var(--type-small); }
.world-type-nav strong { color: var(--accent); font: 500 1.6rem var(--display); }
.world-type-nav a > span:last-child { margin-left: auto; color: var(--accent); }
.world-type-nav a:hover { border-color: var(--accent); }
.world-group + .world-group { margin-top: 3rem; }
.world-group-heading { margin-bottom: 1.5rem; max-width: 82ch; }
.world-group-heading h3 { margin: .6rem 0 .9rem; font-size: var(--type-subhead); }
.world-group-heading p { margin: 0; font-size: var(--type-small); }
.world-town-map { background: #193d54; }
.world-cover.world-town-map img { object-fit: contain; }
.world-town-features { display: grid; gap: .65rem; width: 100%; margin: auto 0 0; padding: 1.15rem 0 0; border-top: 1px solid var(--line); list-style: none; color: var(--muted); font-size: var(--type-small); }
.world-town-features li::before { content: '↗'; display: inline-block; margin-right: .6rem; color: var(--accent); }
@media (max-width: 720px) { .world-type-nav, .world-town-grid { grid-template-columns: 1fr; } }
.world-training-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }
.world-cover { display: block; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.world-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.world-cover > span { position: absolute; bottom: .8rem; left: .8rem; right: .8rem; width: fit-content; padding: .35rem .65rem; border: 1px solid #ffffff30; border-radius: 4px; background: #111923e8; color: #d7e0ea; font-size: var(--type-label); }
.world-card-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: var(--card-padding); }
.world-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .85rem; }
.world-card-top .eyebrow { color: var(--dim); font-size: .65rem; margin: 0; }
.world-level { padding: .25rem .6rem; border: 1px solid var(--accent-line); border-radius: 4px; color: var(--accent); background: var(--accent-soft); font-size: var(--type-label); white-space: nowrap; }
.world-training-card :is(h3,h4) a { text-decoration: none; }
.world-training-card :is(h3,h4) a:hover, .world-spot-links a:hover { color: var(--accent); }
.world-training-card p { margin: 1rem 0 1.25rem; font-size: var(--type-small); }
.world-spot-links { display: grid; width: 100%; margin-top: auto; border-top: 1px solid var(--line); }
.world-spot-links > span { padding: 1rem 0 .4rem; color: var(--dim); font-size: var(--type-label); }
.world-spot-links a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--type-small); text-decoration: none; }
.world-spot-links a > span { color: var(--accent); }
.world-guide-link { margin-top: 1.25rem; font-size: var(--type-small); }
.world-hub-advice { margin-top: 2rem; }
.world-travel-steps { display: grid; gap: .85rem; margin: 1.2rem 0; padding-left: 1.3rem; color: var(--muted); font-size: var(--type-small); }
.world-hub-advice p { font-size: var(--type-small); }
.world-faq-heading { margin: 2.5rem 0 1.3rem; }
.world-faq-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }
.world-faq-list details + details { border-top: 1px solid var(--line); }
.world-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.2rem var(--card-padding); cursor: pointer; color: var(--text); list-style: none; font-size: var(--type-small); }
.world-faq-list summary::-webkit-details-marker { display: none; }
.world-faq-list summary > span { color: var(--accent); font-size: 1.3rem; }
.world-faq-list details[open] summary > span { transform: rotate(45deg); }
.world-faq-list details > p { max-width: 95ch; margin: 0; padding: 0 var(--card-padding) 1.4rem; font-size: var(--type-small); }
.world-guide-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 2.5rem; padding: var(--page-padding); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }
.world-hero-copy .content-lead { margin-top: 1.25rem; }
.world-guide-hero-image { margin: 0; }
.world-guide-hero-image img { display: block; width: 100%; height: auto; }
.world-hero-facts { display: grid; grid-template-columns: 1fr .9fr 1.1fr; gap: 1rem; margin: 1.5rem 0; padding: 1.25rem 0; border-block: 1px solid var(--line); }
.world-hero-facts > div { display: flex; flex-direction: column; gap: .4rem; }
.world-hero-facts span { font-size: var(--type-label); color: var(--dim); }
.world-hero-facts strong { font: 500 1.3rem var(--display); color: var(--accent); }
.world-hero-facts > div:last-child strong { font-size: .95rem; line-height: 1.5; }
.world-overview-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: var(--grid-gap); }
.world-guide-prose p { margin: 0 0 1.2rem; font-size: var(--type-small); }
.world-guide-prose h3 { margin-bottom: 1.1rem; }
.world-guide-prose p + h3 { margin-top: 2rem; }
.world-guide-prose p:last-child { margin-bottom: 0; }
.world-field-notes p, .world-field-notes li, .world-field-notes a { font-size: var(--type-small); }
.world-field-notes .check-list { margin-block: 1.3rem; }
.world-encounter-grid, .world-preparation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.world-encounter { display: flex; flex-direction: column; }
.world-encounter-top { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.world-encounter-top .eyebrow { margin: 0; }
.world-encounter-top > span:last-child { color: var(--dim); font-size: var(--type-label); }
.world-encounter > p, .world-preparation-grid p, .world-preparation-grid a { font-size: var(--type-small); }
.world-encounter .world-enemy-name { margin: .75rem 0 1rem; color: var(--accent); }
.world-enemy-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; margin: auto 0 0; border-top: 1px solid var(--line); }
.world-enemy-stats > div { padding: .85rem 0; border-bottom: 1px solid var(--line); }
.world-enemy-stats dt { font-size: var(--type-label); color: var(--dim); }
.world-enemy-stats dd { margin: .3rem 0 0; color: var(--text); font: 500 1.35rem var(--display); }
.world-preparation-grid h3 { margin-bottom: 1rem; }
.world-grid-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .world-guide-hero { grid-template-columns: minmax(0, 1fr); }
  .world-overview-grid { grid-template-columns: minmax(0, 1fr); }
  .world-encounter-grid, .world-preparation-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .world-grid-related { grid-template-columns: minmax(0, 1fr); }
  .world-hero-facts { gap: .8rem; }
}
@media (max-width: 1100px) {
  .activity-explainer { grid-template-columns: 1fr; gap: 1rem; }
  .activity-explainer > div + div { padding-left: 0; border: 0; }
  .difficulty-brief { gap: 2rem; }
  .crew-feature { gap: 2rem; }
}
@media (max-width: 720px) {
  .crew-feature, .difficulty-brief, .world-training-grid { grid-template-columns: 1fr; }
  .crew-feature { padding: 1.25rem; }
  .crew-job-list > a:first-child { padding-top: 1.15rem; border-top: 1px solid var(--line); }
  .difficulty-brief { padding: 1.5rem 0; }
  .schedule-list-heading { padding: 1rem 1.2rem; }
  .mission-details > div { grid-template-columns: 1fr; gap: .15rem; }
}
.clock-disclaimer { margin: 1.25rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); color: var(--dim); font-size: var(--type-label); }

/* Actual game media: shared by the guide, home and comparison page. */
.weapon-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
.weapon-card { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(ellipse at 50% 20%, #60799426, transparent 65%), var(--surface-soft); box-shadow: var(--shadow); }
.weapon-card img { width: 100%; aspect-ratio: 25 / 16; object-fit: contain; mix-blend-mode: lighten; }
.weapon-card figcaption { padding: 0 1.25rem 1.25rem; }
.weapon-card figcaption span, .screenshot-card figcaption > span { display: block; margin-bottom: .3rem; color: var(--dim); font-size: var(--type-label); letter-spacing: .08em; text-transform: uppercase; }
.weapon-card h3 { font-size: 1.1rem; }
.screenshot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.screenshot-card { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.screenshot-card > a { position: relative; display: block; overflow: hidden; background: var(--bg-deep); }
.screenshot-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .25s ease; }
.screenshot-card > a:hover img { transform: scale(1.025); }
.screenshot-expand { position: absolute; right: .75rem; bottom: .75rem; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid #ffffff50; border-radius: 50%; color: white; background: #0b1424d9; }
.screenshot-card figcaption { padding: 1.1rem 1.25rem; }
.screenshot-card figcaption strong { font-size: var(--type-small); }
body.media-open { overflow: hidden; }
.media-viewer { width: min(94vw, 1800px); max-width: 94vw; max-height: 94svh; padding: 0; overflow: auto; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--text); background: var(--bg-deep); box-shadow: 0 20px 100px #0008; }
.media-viewer::backdrop { background: #050a11e8; backdrop-filter: blur(8px); }
.media-viewer header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1rem; }
.media-viewer h2 { font-size: 1rem; }
.media-viewer button { flex-shrink: 0; padding: .6rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-small); color: var(--text); background: var(--panel); }
.media-viewer img { width: 100%; max-height: calc(94svh - 5rem); object-fit: contain; }
.compare-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; padding: var(--page-padding); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-soft); }
.compare-hero p { margin: 1.25rem 0; }
.compare-hero figure { margin: 0; }
.compare-hero img { width: 100%; border-radius: var(--radius-small); }
.compare-hero figcaption { margin-top: .75rem; color: var(--dim); font-size: var(--type-label); }
.comparison-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.comparison-points article { padding: var(--card-padding); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.comparison-points p { margin: .85rem 0 1rem; font-size: var(--type-small); }
.comparison-points h3 { font-size: 1.15rem; }
.comparison-table td:first-child, .comparison-table tbody th { color: var(--text); }
.comparison-table caption { padding: 1.25rem; text-align: left; color: var(--muted); font-size: var(--type-small); }
.page-comparison .compare-hero h1 { font-size: var(--type-page); line-height: 1.1; }
.page-comparison .compare-hero > *, .page-comparison .section-intro > * { min-width: 0; }
.comparison-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.comparison-guide-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.comparison-guide-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.comparison-guide-cover { position: relative; display: block; border-bottom: 1px solid var(--line); }
.comparison-guide-cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.comparison-guide-cover > span { position: absolute; bottom: .8rem; left: .8rem; padding: .35rem .6rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: #17202dec; color: var(--text); font-size: var(--type-label); }
.comparison-guide-card > div { padding: var(--card-padding); }
.comparison-guide-card h3 { margin: .8rem 0; font-size: var(--type-card); }
.comparison-guide-card h3 a { color: inherit; text-decoration: none; }
.comparison-guide-card h3 a:hover { color: var(--accent); }
.comparison-guide-card p { margin: 0 0 1.3rem; color: var(--muted); font-size: var(--type-small); }
.comparison-guide-card .eyebrow { font-size: var(--type-label); }
.comparison-byline { margin: 1.2rem 0; color: var(--dim); font-size: var(--type-label); }
.comparison-reading { display: grid; gap: var(--grid-gap); }
.comparison-chapter { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: clamp(1.5rem, 4vw, 4rem); }
.comparison-chapter h3 { margin-top: .7rem; font-size: var(--type-card); }
.comparison-chapter p { max-width: 76ch; margin: 0 0 1.2rem; }
.comparison-sources h2 { font-size: var(--type-card); }
.comparison-sources p { max-width: 100ch; font-size: var(--type-small); }
.comparison-sources li { margin: .6rem 0; font-size: var(--type-small); }
@media (max-width: 850px) { .comparison-guide-grid, .comparison-chapter { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .page-comparison .content-jump { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-comparison .content-jump a { padding: .8rem; }
  .page-comparison .content-jump a:nth-child(even) { border-right: 0; }
  .page-comparison .content-jump a:nth-last-child(-n+2) { border-bottom: 0; }
}

/* Media-led home and supporting pages. Shared tokens keep every surface related. */
.exploration-feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 4vw, 4rem); }
.exploration-copy > p { margin: 1.3rem 0; }
.training-destinations { display: grid; margin: 1.5rem 0; }
.training-destinations a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding: .8rem 0; border-top: 1px solid var(--line); text-decoration: none; }
.training-destinations a:hover strong { color: var(--accent); }
.training-destinations strong { font-size: var(--type-small); }
.training-destinations span { color: var(--dim); font-size: var(--type-label); }
.exploration-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.guide-header > .guide-gameplay-image { margin: var(--page-padding) var(--page-padding) var(--page-padding) 0; align-self: center; }
.guide-header.guide-header-action { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.guide-header-action .guide-header-copy { align-self: center; }
.guide-action-image > a { background: #121b28; }
.guide-action-image img { aspect-ratio: 16 / 9; object-fit: contain; }
.guide-action-image figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.guide-action-image figcaption > div { min-width: 0; }
.guide-action-image figcaption > div > span { display: block; margin-bottom: .4rem; color: var(--dim); font-size: var(--type-label); letter-spacing: .06em; text-transform: uppercase; }
.guide-action-image figcaption strong { display: block; line-height: 1.4; }
.guide-action-image figcaption .text-link { font-size: var(--type-label); }
@media (max-width: 1000px) {
  .guide-header.guide-header-action { grid-template-columns: 1fr; }
  .guide-header.guide-header-action > .guide-gameplay-image { margin: 0 var(--page-padding) var(--page-padding); }
  .guide-header-action .content-lead { max-width: 65ch; }
}
@media (max-width: 1100px) {
  .gameplay-play-grid.play-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gameplay-play-grid > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .exploration-feature { grid-template-columns: 1fr; gap: 1.7rem; }
  .gameplay-play-grid.play-grid { grid-template-columns: 1fr; }
  .gameplay-play-grid > :last-child { grid-column: auto; }
  .guide-header > .guide-gameplay-image { margin: 0 1.5rem 1.5rem; }
}
@media (max-width: 520px) {
  .exploration-pair { grid-template-columns: 1fr; }
}
.city-hero h1 span { color: var(--accent); }
.city-hero h1 i { color: var(--accent); font-style: normal; }
.play-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--grid-gap); }
.play-card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 5rem; min-width: 0; min-height: 28rem; padding: 1.6rem; overflow: hidden; border: 1px solid #ffffff20; border-radius: var(--radius); background: #14202d; text-decoration: none; box-shadow: var(--shadow); }
.play-card::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, #0a1019 4%, #0a1019e8 23%, #0a101944 70%, #0a1019a3); pointer-events: none; }
.play-card > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% center; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.play-card:hover, .play-card:focus-visible { border-color: #f0c98965; }
.play-card:hover > img { transform: scale(1.035); }
.play-card-tag { display: inline-flex; align-items: center; align-self: flex-start; gap: .65rem; max-width: 100%; padding: .55rem .75rem; border: 1px solid #ffffff30; border-radius: var(--radius-small); color: #f5f4ee; background: #343b44f5; box-shadow: 0 2px 12px #0003; font-size: .65rem; font-weight: 600; line-height: 1.5; letter-spacing: .09em; text-transform: uppercase; }
.play-card-index { align-self: stretch; display: flex; align-items: center; padding-right: .65rem; border-right: 1px solid #ffffff40; color: #d0d7df; font-variant-numeric: tabular-nums; }
.section-intro h2[id] { scroll-margin-top: 2rem; }
.play-card-copy { width: 100%; }
.play-card-copy h3 { max-width: 18ch; margin: 1rem 0 .65rem; font-size: var(--type-subhead); }
.play-card-copy p { max-width: 37ch; margin: 0 0 1.2rem; color: #c4ccd7; font-size: var(--type-small); }
.play-card-arrow { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid #ffffff40; border-radius: 50%; color: var(--accent); background: #0c14236b; font-size: 1.15rem; backdrop-filter: blur(8px); }
.play-card-link { display: block; padding-top: .85rem; border-top: 1px solid #ffffff24; color: var(--accent); font-size: var(--type-small); }
.play-card-link small { display: block; margin-top: .35rem; color: #aebaca; font-size: var(--type-label); }
.progression-showcase { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); box-shadow: var(--shadow); }
.progression-showcase .guide-portrait { min-height: 30rem; background: radial-gradient(ellipse at center, #46607855, transparent 65%), #0e1821; }
.progression-copy { align-self: center; padding: var(--page-padding); }
.progression-copy > p { margin: 1.2rem 0 1.75rem; }
.progression-copy .stat-build-grid { gap: .65rem; }
.progression-copy .stat-build-grid article { padding: 1rem; box-shadow: none; }
.progression-copy .stat-build-grid article > span { position: static; display: block; margin-bottom: .75rem; }
.progression-copy .stat-build-grid h3 { font-size: 1.05rem; }
.progression-copy .stat-build-grid strong { font-size: 1.8rem; margin: .75rem 0 .4rem; }
.progression-copy .stat-build-grid p { font-size: var(--type-label); }
.progression-copy > .text-link { margin-top: 1.5rem; }
.stat-build-grid article:nth-child(2) { --stat-color: #acd4c6; }
.stat-build-grid article:nth-child(3) { --stat-color: #a7c6ec; }
.platform-display { min-width: 0; padding: .5rem; border: 1px solid #ffffff2c; border-radius: 12px; background: linear-gradient(135deg, #415064, #131a24); box-shadow: 0 24px 50px #0005, inset 0 1px 0 #ffffff25; transform: perspective(1400px) rotateY(-5deg); }
.platform-display-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem .65rem .8rem; color: #cad4e2; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.platform-display img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid #000; border-radius: 6px; }
.platform-display-caption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem .6rem .3rem; color: var(--muted); font-size: var(--type-label); }
.platform-release { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1.5rem; align-items: center; margin-top: var(--grid-gap); }
.platform-release > div > strong { display: block; font-family: var(--display); font-size: 1.25rem; }
.platform-release > div > p { margin: .4rem 0 0; font-size: var(--type-small); }
.platform-release dl { margin: 0; }
.archive-card:has(a:hover) .archive-card-media img { transform: scale(1.035); }
.archive-card, .screenshot-card, .discovery-card { box-shadow: var(--shadow); }
.article-cover { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(ellipse at 50% 70%, #5d748647, transparent 65%), #111822; }
.article-cover img { mix-blend-mode: normal; }

/* Development journal: real game imagery, readable briefings and compact categories. */
.updates-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 29rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-soft); box-shadow: var(--shadow-hero); margin-bottom: var(--section-space); }
.updates-hero > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% center; }
.updates-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #090e16f5 0%, #090e16e6 26%, #090e1670 59%, #090e1620), linear-gradient(0deg, #090e1699, transparent 50%); }
.updates-hero-copy { padding: var(--page-padding); max-width: 46rem; }
.updates-hero p { max-width: 46ch; margin: 1.25rem 0 1.75rem; color: #d5dce5; font-size: var(--type-lead); }
.updates-image-label { position: absolute; right: 1.25rem; bottom: 1.25rem; padding: .45rem .7rem; border: 1px solid #ffffff24; border-radius: var(--radius-small); background: #141b25e6; color: #d5dce5; font-size: .7rem; letter-spacing: .025em; }
.updates-section-head { align-items: flex-end; margin-bottom: var(--intro-space); scroll-margin-top: calc(var(--header-height) + 2rem); }
.updates-section-head p { max-width: 46ch; margin: 0; }
.updates-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.updates-grid .archive-card-media { position: relative; aspect-ratio: 16 / 10; }
.update-category { position: absolute; bottom: 1rem; left: 1rem; max-width: calc(100% - 2rem); padding: .45rem .7rem; border: 1px solid #ffffff24; border-radius: var(--radius-small); background: #19212ef2; color: #f2f4f6; font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.updates-grid .archive-card-copy h2 { font-size: var(--type-card); line-height: 1.2; letter-spacing: -.025em; }
.updates-grid .news-meta { gap: .5rem; flex-wrap: wrap; }
.updates-grid .news-meta span { color: var(--dim); }
.updates-grid .text-link { border-top: 1px solid var(--line); padding-top: 1rem; width: 100%; }
.update-article { margin-top: 1.5rem; }
.update-article .editorial-header { max-width: 54rem; margin-inline: auto; }
.update-highlights { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.5rem 0 0; list-style: none; }
.update-highlights li { padding: .4rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: #202934; color: #d7dee6; font-size: .75rem; }
.update-article .article-cover img { height: auto; border-radius: 0; }
.update-article .article-cover figcaption { padding: 1rem 1.25rem; color: var(--dim); font-size: .8rem; line-height: 1.6; border-top: 1px solid var(--line); }
.update-reading { max-width: 48rem; margin: 3rem auto 0; }
.update-reading .editorial-block { padding-block: 2rem; }
.update-reading .editorial-block h2 { font-size: var(--type-section); }
.update-reading .article-footer { align-items: flex-start; flex-direction: column; gap: 1.25rem; }
@media (max-width: 1120px) { .updates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .updates-grid { grid-template-columns: 1fr; }
  .updates-section-head { align-items: flex-start; flex-direction: column; }
  .updates-hero { min-height: 35rem; align-items: flex-end; }
  .updates-hero > img { height: 68%; object-position: 62% center; }
  .updates-hero::after { background: linear-gradient(0deg, #090e16 10%, #090e16f0 36%, #090e1680 65%, #090e1610); }
  .updates-hero-copy { padding-top: 13rem; padding-bottom: 3.5rem; }
  .updates-hero p { margin: 1rem 0 1.5rem; }
  .updates-image-label { right: auto; left: 1.5rem; bottom: .8rem; font-size: .6rem; }
  .update-article .editorial-header { padding-top: .5rem; }
  .update-reading { margin-top: 2rem; }
}
.guide-summary strong, .events-facts strong, .event-countdown [data-countdown-value], .events-hero-clock [data-clock-next-countdown], .account-balance strong, .roster-level strong, .price, .stat-card > strong { font-family: var(--numbers); }
.auth-visual-copy strong { font-family: var(--display); }
.fx-active .reveal-in { animation: surfaceArrival .65s cubic-bezier(.2,.7,.2,1) both; }
@keyframes surfaceArrival { from { opacity: .7; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }

/* Responsive layout: shared breakpoints across public and account pages. */
@media (max-width: 1200px) {
  .event-directory-lineup { grid-template-columns: 1fr; }
  .event-lineup-feature { padding: 1.5rem; }
  .event-feature-tag { padding-bottom: 1rem; }
  .event-feature-clock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); column-gap: 2.5rem; align-items: start; }
  .event-feature-clock > .eyebrow, .event-feature-clock > h3, .event-feature-clock > .event-feature-brief { grid-column: 1; }
  .event-feature-clock > .event-feature-count-label { grid-column: 2; grid-row: 1; }
  .event-feature-clock > [data-clock-next-countdown] { grid-column: 2; grid-row: 2; }
  .event-feature-clock > [data-clock-next-note] { grid-column: 2; grid-row: 3; }
  .event-feature-clock > .event-feature-entry { grid-column: 1; margin-bottom: 0; }
  .event-feature-clock > .btn { grid-column: 2; align-self: end; }
  .event-lineup-feature::after { background: linear-gradient(90deg, #0c131fd9, #0c131ff5); }

  .roster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-lower-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .account-balance { padding: 1.15rem; gap: .75rem; }
  .account-balance-icon { flex-basis: 2.1rem; width: 2.1rem; height: 2.1rem; }
  .vehicle-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .garage { grid-template-columns: 1.2fr 1fr; }
  .nav { gap: 2px; }
  .nav a { padding-inline: .4rem; font-size: .8rem; }
  .nav .nav-cta { margin-left: .25rem; padding-inline: .9rem; }
  .city-hero { min-height: 36rem; padding-top: 3rem; }
  .city-hero-copy { width: 58%; }
  .hero-field-note { width: 13rem; }
  .final-cta { align-items: flex-start; flex-direction: column; }
  .package-grid, .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .play-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .play-card-driving { grid-column: 1 / -1; min-height: 22rem; }
  .play-card { min-height: 27rem; padding: 1.25rem; }
  .progression-showcase { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
  .progression-copy .stat-build-grid { grid-template-columns: 1fr; }
  .progression-copy .stat-build-grid article { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .2rem .75rem; }
  .progression-copy .stat-build-grid article > span { display: none; }
  .progression-copy .stat-build-grid strong { margin: 0; grid-column: 2; grid-row: 1 / span 2; }
  .platform-display { transform: none; }
  .platform-release { grid-template-columns: 1fr; }

  .account-lower-grid { grid-template-columns: 1fr; }
  .account-balances { gap: .75rem; }
  .account-balance { flex-direction: column; }
  .events-hero { grid-template-columns: 1fr; min-height: 30rem; }
  .events-hero-clock { grid-template-columns: 1fr auto; width: 100%; align-items: center; gap: .25rem 1rem; }
  .events-hero-clock > :not([data-clock-next-countdown]) { grid-column: 1; }
  .events-hero-clock:has([data-clock-next-countdown][hidden]) { grid-template-columns: 1fr; }
  .events-hero-clock .eyebrow { grid-column: 1; margin-bottom: 0; }
  .events-hero-clock [data-clock-next-countdown] { grid-column: 2; grid-row: 1 / span 3; font-size: 2.6rem; }
  .guide-header { grid-template-columns: 1.2fr 1fr; }
  .guide-portrait { min-height: 24rem; }
  .compare-hero { grid-template-columns: 1fr; gap: 1.5rem; }
  .weapon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .garage { grid-template-columns: 1fr; }
  .garage-details { border-left: 0; border-top: 1px solid var(--line); }
  .garage-stage img { max-height: 28rem; }
  .garage-picker { margin-top: 1rem; }
  .garage-picker img { max-height: 5rem; object-fit: contain; }
  :root { --header-height: 76px; }
  .topbar { padding-block: 12px; }
  .nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-small); color: var(--text); background: var(--panel); }
  .nav-toggle-icon { position: relative; display: block; width: 20px; height: 14px; }
  .nav-toggle-icon i { position: absolute; right: 0; left: 0; height: 1px; background: currentColor; }
  .nav-toggle-icon i:first-child { top: 3px; }
  .nav-toggle-icon i:last-child { top: 11px; }
  .nav-toggle[aria-expanded='true'] .nav-toggle-icon i:first-child { top: 7px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded='true'] .nav-toggle-icon i:last-child { top: 7px; transform: rotate(-45deg); }
  .nav { position: absolute; top: calc(100% - 1px); right: 0; left: 0; display: none; max-height: calc(100svh - var(--header-height)); padding: 1rem var(--gutter) 1.5rem; overflow-y: auto; overscroll-behavior: contain; border-bottom: 1px solid var(--line-strong); background: var(--bg); box-shadow: var(--shadow); }
  .nav.is-open { display: grid; gap: .25rem; }
  .nav a { justify-content: space-between; min-height: 48px; padding: .75rem; font-size: .9rem; }
  .nav .nav-account { margin: 0; padding-left: .75rem; border: 0; }
  .nav .nav-cta { margin: .65rem 0 0; }
  .city-hero-copy { width: 70%; }
  .city-hero-art img { object-position: 70% center; }
  .city-hero::before { background: linear-gradient(90deg, #0b1016eb, #0b101660 70%), linear-gradient(0deg, #0b1016, transparent 50%); }
  .hero-field-note { display: none; }
  .hero-bottom-line { letter-spacing: .08em; }
  .world-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; }
  .world-facts > :nth-child(2) { border-right: 0; }
  .world-facts > :last-child { justify-content: flex-start; }
  .section-intro { grid-template-columns: 1fr; gap: 1rem; }
  .section-intro > p, .section-intro > .text-link, .intro-action { justify-self: start; }
  .discovery-grid, .content-hero, .content-hero-compact, .related-panel { grid-template-columns: 1fr; }
  .related-panel { gap: 2rem; }
  .two-col, .loyalty-strip, .archive-about-grid { grid-template-columns: 1fr; }
  .dashboard-head { align-items: flex-start; flex-direction: column; }
  .checkout-trust { grid-template-columns: 1fr; }
  .package-section-head { align-items: flex-start; flex-direction: column; }
  .package-section-head p { text-align: left; }
}
@media (max-width: 720px) {
  .event-lineup-feature { gap: 1.4rem; }
  .event-feature-tag { padding-bottom: 1.5rem; }
  .event-feature-clock { display: block; padding: 1.2rem 0 0; border-top: 1px solid #ffffff28; }
  .event-feature-clock > .event-feature-entry { margin-bottom: 1.3rem; }
  .event-feature-clock .btn { width: auto; }
  .event-row, .event-directory-lineup.is-clock-synced .event-row { grid-template-columns: minmax(0, 1fr) auto; gap: .9rem; padding: 1.2rem; }
  .event-row .event-card-heading { grid-column: 1 / -1; }
  .event-row .event-order { margin-left: auto; order: initial; }
  .event-row .event-prizes { grid-column: 1; }
  .event-row .event-countdown { grid-column: 2; }
  .event-row .event-reward { gap: 1.3rem; }
  .event-row .event-reward strong { font-size: 1.15rem; }
  .event-clock-summary { flex-wrap: wrap; }
  .event-clock-summary > div { flex-basis: calc(100% - 3rem); }
  .event-clock-summary .btn { width: 100%; }

  .play-grid { grid-template-columns: 1fr; }
  .play-card { min-height: 25rem; padding: 1.5rem; }
  .progression-showcase { grid-template-columns: 1fr; }
  .progression-showcase .guide-portrait { min-height: 21rem; max-height: 21rem; }

  .account-dashboard { gap: 1.25rem; }
  .account-overview-head { align-items: stretch; flex-direction: column; gap: 1.25rem; }
  .account-user-lockup { max-width: none; }
  .account-section-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
  .account-section-nav a { padding-inline: .4rem; font-size: .78rem; }
  .account-footer { align-items: flex-start; flex-direction: column; }
  .account-balances, .roster-grid { grid-template-columns: 1fr; }
  .account-balance { flex-direction: row; }
  .account-balance > div { display: grid; grid-template-columns: 1fr auto; flex: 1; gap: .4rem .75rem; align-items: center; }
  .account-balance strong { margin: 0; font-size: 1.6rem; text-align: right; }
  .account-balance p { grid-column: 1 / -1; }
  .account-section-head { align-items: flex-start; flex-wrap: wrap; gap: .6rem; }
  .account-panel { padding: 1.25rem; }
  .account-order { grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; }
  .account-order > .status-chip { grid-column: 1 / -1; }
  .account-empty { padding: 1.25rem; align-items: flex-start; }
  .events-hero { gap: 1.5rem; padding: 1.5rem; }
  .events-hero-image { object-position: 65% center; }
  .events-hero::before { background: linear-gradient(90deg, #090f19e6, #090f1970), linear-gradient(0deg, #090f19aa, transparent); }
  .events-hero-clock { padding: 1rem; }
  .events-hero-clock [data-clock-next-countdown] { font-size: 2rem; }
  .events-facts { grid-template-columns: 1fr 1fr; gap: 1rem 0; }
  .events-facts > div { padding-inline: 1.25rem; }
  .events-facts > div:nth-child(2) { border: 0; }
  .clock-panel-intro { flex-direction: column; gap: 1rem; }
  .guide-two-col, .event-guide-grid, .stat-build-grid { grid-template-columns: 1fr; }
  .vehicle-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vehicle-catalog-card { flex-direction: column; align-items: flex-start; }
  .guide-header { grid-template-columns: 1fr; }
  .guide-portrait { min-height: 20rem; max-height: 20rem; }
  .portrait-label { display: none; }
  .guide-portrait::after { background: linear-gradient(0deg, #0c151ff2, transparent 28%); }
  .guide-header .hero-actions { gap: .5rem; }
  .guide-header .btn { padding-inline: .9rem; }
  .content-jump a { flex: 1 1 45%; justify-content: flex-start; border-bottom: 1px solid var(--line); }
  .content-jump a:last-child { flex-basis: 100%; border-bottom: 0; }
  .screenshot-grid, .comparison-points { grid-template-columns: 1fr; }
  .guide-section { scroll-margin-top: 1rem; }
  .dealer-catalog > summary { flex-direction: column; gap: .35rem; }
  .guide-summary span { padding-inline: .4rem; font-size: var(--type-label); }
  .wanted-ladder li { grid-template-columns: 1fr; gap: .3rem; }
  :root { --gutter: 22px; }
  .brand-logo { width: 11rem; }
  .city-hero { min-height: 0; align-items: flex-end; padding: 8rem var(--gutter) 6rem; }
  .city-hero-copy { width: 100%; }
  .city-hero-art { inset: 0; transform: none; }
  .city-hero-art img { object-position: 75% top; }
  .city-hero::before { background: linear-gradient(180deg, #0b101610, #0b1016a6 22%, #0b1016f2 52%, #0b1016); }
  .city-hero h1 { font-size: clamp(2.5rem, 11vw, 4.5rem); }
  .hero-edition { gap: .5rem; margin-bottom: 1.25rem; font-size: .65rem; }
  .edition-line { width: 1rem; }
  .city-hero-actions { gap: 1rem; margin-top: 1.5rem; }
  .city-hero-actions .btn { min-height: 3.2rem; padding-inline: 1.1rem; gap: 1.1rem; }
  .hero-explore { gap: .5rem; }
  .hero-bottom-line { bottom: 1.4rem; font-size: .52rem; }
  .hero-bottom-line > span { max-width: 12rem; }
  .hero-bottom-line a { gap: .5rem; }
  .light-haze-blue { display: none; }
  .world-facts { gap: 1.25rem .75rem; padding-block: 1.5rem; }
  .world-facts > * { align-items: flex-start; gap: .65rem; padding-right: .5rem; }
  .world-facts strong { font-size: .9rem; }
  .world-facts small { font-size: .8rem; }
  .fact-index { font-size: .6rem; }
  .fact-status { flex: 0 0 .35rem; margin-top: .45rem; width: .35rem; height: .35rem; }
  .archive-grid, .package-grid { grid-template-columns: 1fr; }
  .content-jump { width: 100%; }
  .content-jump strong { display: none; }
  .content-section { grid-template-columns: 1fr; gap: 1.25rem; }
  .auth-shell { grid-template-columns: 1fr; min-height: 0; }
  .auth-visual { min-height: 17rem; }
  .article-footer, .section-head { align-items: flex-start; flex-direction: column; }
  .footer { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  .account-balance > div { grid-template-columns: 1fr; }
  .account-balance strong { text-align: left; }
  .account-detail-list > div { grid-template-columns: 1fr; gap: .25rem; }
  .account-detail-list dd { text-align: left; }
  .roster-name { gap: .65rem; }
  .account-empty { flex-direction: column; }
  :root { --gutter: 18px; --card-padding: 1.25rem; --page-padding: 1.25rem; }
  .city-hero-actions { align-items: flex-start; flex-direction: column; gap: .75rem; }
  .city-hero-actions .btn { width: 100%; justify-content: space-between; }
  .hero-platform { margin-top: 1rem; }
  .hero-bottom-line > span { max-width: 10rem; }
  .platform-status-card dl, .payment-summary, .stats-grid { grid-template-columns: 1fr; }
  .auth-visual { min-height: 15rem; }
  .final-cta-actions, .final-cta-actions .btn, .page-lead-actions, .page-lead-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .city-hero-art, .fx-active [data-depth], .fx-active .hero-field-note > strong { transform: none !important; }
}

/* Optional account features and the deliberately private profile state. */
.account-special-features { scroll-margin-top: calc(var(--header-height) + 1.5rem); }
.privacy-offer { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); border: 1px solid var(--accent-line); border-radius: var(--radius); overflow: hidden; background: var(--surface-soft); }
.privacy-offer-copy { padding: clamp(1.5rem, 3vw, 3rem); background: radial-gradient(ellipse at top left, #e6b66a0a, transparent 75%); }
.privacy-offer-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--accent-soft); color: var(--accent); margin-bottom: 1.8rem; }
.privacy-offer-icon .account-icon { width: 1.7rem; height: 1.7rem; }
.privacy-offer-copy > .eyebrow, .privacy-offer-controls > .eyebrow { display: block; }
.privacy-offer h3 { font-size: var(--type-subhead); margin-bottom: 1rem; }
.privacy-offer-copy > p { margin-bottom: 1rem; font-size: .9rem; }
.privacy-offer blockquote { margin: 1.3rem 0; padding: 1rem 1.2rem; border-left: 2px solid var(--accent); border-radius: 0 6px 6px 0; background: #ffffff04; color: var(--text); font-size: .95rem; }
.privacy-offer .privacy-scope { color: var(--dim); font-size: .8rem; }
.privacy-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem; padding-top: 1.6rem; margin-top: 1.6rem; border-top: 1px solid var(--line); }
.privacy-price strong { font: 500 2.75rem var(--display); color: var(--accent); }
.privacy-price span { font-size: .85rem; color: var(--muted); }
.privacy-offer .privacy-billing { font-size: .78rem; color: var(--dim); margin: .75rem 0 0; }
.privacy-offer-controls { padding: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid var(--line); background: #080d1640; }
.privacy-checkout { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.5rem; }
.privacy-checkout > label:not(.legal-check) { color: var(--muted); font-size: .85rem; }
.privacy-checkout select { display: block; width: 100%; min-width: 0; padding: .9rem 1rem; min-height: 3rem; background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-small); }
.privacy-checkout .legal-check { margin: .15rem 0; }
.privacy-checkout .account-notice { margin-block: .5rem; }
.privacy-payment-buttons { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.privacy-payment-buttons .btn { flex: 1 1 14rem; }
.privacy-rights-note { font-size: .73rem; color: var(--dim); margin: 1.5rem 0 0; }
.privacy-rights-note a { color: var(--muted); text-underline-offset: .2em; }
.privacy-periods { margin-top: 1.5rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-soft); }
.privacy-periods > p { font-size: .8rem; margin: .7rem 0 1.2rem; }
.privacy-period-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.privacy-period-list article { padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: #ffffff03; }
.privacy-period-list article > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; }
.privacy-period-list p { font-size: .8rem; margin: .8rem 0 .3rem; }
.privacy-period-list small { color: var(--dim); font-size: .7rem; }
.hidden-character { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(3rem,7vw,7rem) 1.5rem; margin-bottom: 3rem; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(ellipse at 50% 0, #e6b66a0b, transparent 65%), var(--panel-soft); }
.hidden-character-mark { display: grid; place-items: center; width: 6rem; height: 6rem; margin-bottom: 2rem; border: 1px solid var(--accent-line); border-radius: 50%; color: var(--accent); background: var(--accent-soft); }
.hidden-character-mark svg { width: 3rem; height: 3rem; }
.hidden-character h1 { max-width: 25ch; }
.hidden-character > p { max-width: 38rem; margin: 1.5rem 0 2rem; }
.hidden-character .hero-actions { justify-content: center; }
@media (max-width: 800px) {
  .privacy-offer, .privacy-period-list { grid-template-columns: minmax(0,1fr); }
  .privacy-offer-controls { border-left: 0; border-top: 1px solid var(--line); }
}

/* Public character records: portraits, ladders and guild rosters. */
.ranking-hero { grid-template-columns: minmax(0, 1.25fr) minmax(16rem, .65fr); border-radius: var(--radius) var(--radius) 0 0; }
.ranking-hero h1 { max-width: 22ch; }
.ranking-hero > div > p { max-width: 48ch; margin: 1.25rem 0 0; font-size: var(--type-lead); }
.ranking-hero .hero-actions { margin-top: 1.75rem; }
.ranking-summary { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: var(--card-padding); border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); box-shadow: var(--shadow); }
.ranking-summary > strong { margin-top: 1rem; color: var(--accent); font: 500 3rem/1.1 var(--display); font-variant-numeric: tabular-nums; }
.ranking-summary > span:not(.eyebrow):not(.guild-status) { color: var(--text); font-size: var(--type-small); }
.ranking-summary small { width: 100%; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--dim); font-size: var(--type-label); line-height: 1.8; }
.ranking-summary .guild-status { margin-top: 1rem; font: 500 var(--type-card)/1.3 var(--display); }
.rank-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; }
.rank-tabs a[aria-current] { color: var(--accent); background: var(--panel-raised); box-shadow: inset 0 -2px var(--accent); }
.rank-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.rank-leader { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-decoration: none; }
.rank-leader:first-child { border-color: var(--accent-line); }
.rank-leader-visual { position: relative; height: clamp(16rem, 22vw, 21rem); border-bottom: 1px solid var(--line); background: var(--panel-soft); }
.rank-leader .character-portrait { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.leader-rank { position: absolute; z-index: 1; top: 1rem; left: 1rem; padding: .35rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--panel-raised); color: var(--accent); font: 500 1.1rem var(--display); }
.rank-leader-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: var(--card-padding); }
.rank-leader h3 { margin: .45rem 0 1.2rem; overflow-wrap: anywhere; }
.rank-leader p { display: flex; justify-content: space-between; gap: .75rem; margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--type-small); }
.rank-leader p > span { color: var(--accent); }
.rank-leader:hover, .guild-card:hover { border-color: var(--accent); }
.rank-leader:hover h3, .guild-card:hover h3, .rank-player:hover strong { color: var(--accent); }
.rank-board { padding: var(--page-padding); background: var(--surface-soft); }
.career-browser { margin-top: 1.5rem; padding: clamp(1.2rem, 3vw, 2rem); scroll-margin-top: 8rem; }
.career-browser-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.career-browser-head h2 { margin: .4rem 0 0; font-size: var(--type-card); }
.career-source-tag { border: 1px solid var(--line-strong); padding: .4rem .7rem; border-radius: 4px; color: var(--muted); background: var(--panel-raised); font-size: var(--type-label); }
.career-categories, .career-metrics { display: flex; flex-wrap: wrap; gap: .5rem; }
.career-categories { padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.career-categories a { padding: .65rem .9rem; color: var(--muted); border: 1px solid transparent; border-radius: var(--radius-small); text-decoration: none; font-size: var(--type-small); }
.career-categories a[aria-current] { color: var(--accent); background: var(--panel-raised); border-color: var(--accent-line); }
.career-metrics { margin-top: 1.2rem; }
.career-metrics a { padding: .55rem .8rem; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--muted); background: var(--panel-soft); text-decoration: none; font-size: .8rem; }
.career-metrics a[aria-current] { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.career-browser a:hover { color: var(--text); border-color: var(--accent-line); }
.career-score-note { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.2rem; margin-bottom: 1.5rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel-soft); }
.career-score-note > span { flex: 0 0 auto; color: var(--accent); font-size: .8rem; }
.career-score-note p { flex: 1 1 25rem; margin: 0; color: var(--muted); font-size: .8rem; }
.rank-board-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.rank-board-head .eyebrow { display: block; }
.rank-search { display: flex; flex: 0 1 27rem; flex-wrap: wrap; align-items: center; gap: .6rem; max-width: 100%; }
.rank-search input { flex: 1 1 11rem; width: auto; min-width: 0; min-height: 3.2rem; padding: .7rem 1rem; color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--bg); font-size: .85rem; }
.rank-search > a { color: var(--accent); font-size: .85rem; }
.rank-table-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius-small); }
.rank-table { width: 100%; min-width: 580px; border-collapse: collapse; }
.rank-table th { background: var(--panel-raised); color: var(--muted); font-size: var(--type-label); text-transform: uppercase; letter-spacing: .08em; }
.rank-table :is(th, td) { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.rank-table td { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank-table tr:last-child td { border-bottom: 0; }
.rank-table tbody tr:nth-child(even) { background: #ffffff02; }
.rank-table tbody tr:hover { background: #ffffff03; }
.rank-table .rank-position { color: var(--dim); width: 5rem; font-size: 1.05rem; }
.rank-table .rank-score { color: var(--accent); font-size: 1.1rem; }
.rank-player { display: flex; gap: 1rem; align-items: center; text-decoration: none; }
.rank-player .character-portrait { flex: 0 0 3rem; width: 3rem; height: 3.7rem; object-fit: cover; object-position: 50% 15%; border-radius: 5px; background: #192535; }
.rank-player span { display: grid; gap: .1rem; }
.rank-player small { color: var(--dim); font-size: .72rem; }
.rank-open { color: var(--muted); font-size: .8rem; text-underline-offset: .3em; }
.rank-open > span { margin-left: .75rem; color: var(--accent); }
.rank-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; font-size: .85rem; }
.data-note { margin: 1.5rem 0 0; color: var(--dim); font-size: .78rem; line-height: 1.8; }
.rank-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.rank-guide-grid :is(h2,h3) { font-size: var(--type-card); margin-bottom: .9rem; }
.rank-guide-grid p { font-size: var(--type-small); margin-bottom: 0; }
.rank-guide-grid a { display: inline-block; margin-top: 1.2rem; color: var(--accent); font-size: .85rem; text-underline-offset: .25em; }
.rank-empty { padding: var(--card-padding); border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel); }
.rank-empty h2 { margin: .7rem 0 1rem; font-size: var(--type-card); }
.rank-empty p { max-width: 60ch; margin-bottom: 0; font-size: var(--type-small); }
.rank-empty + .btn { margin-top: 1.25rem; }
.character-profile { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-hero); box-shadow: var(--shadow-hero); overflow: hidden; }
.character-stage { position: relative; margin: 0; background: #182230; display: flex; flex-direction: column; }
.character-stage .character-portrait { width: 100%; height: clamp(30rem, 49vw, 47rem); object-fit: cover; object-position: 50% 38%; }
.character-stage figcaption { padding: .8rem 1rem; text-align: center; color: var(--dim); font-size: .7rem; background: #0b111a; margin-top: auto; }
.character-viewer { background: #10161f; }
.character-view-top { display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.5rem 0; color: var(--dim); font-size: var(--type-label); letter-spacing: .1em; text-transform: uppercase; }
.character-view-top > span:last-child { color: var(--accent); }
.character-turntable-stage { position: relative; min-width: 0; }
.character-taunt-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #11161f; pointer-events: none; }
.character-taunt-video[hidden] { display: none; }
.rank-leader > a { display: block; color: inherit; }
.character-emote-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; padding: .75rem 1rem; color: var(--dim); font-size: .75rem; }
.character-emote-controls .btn { min-height: 2.5rem; padding: .5rem .9rem; font-size: .75rem; }
.character-turntable-stage.is-interactive { cursor: grab; touch-action: pan-y; user-select: none; }
.character-turntable-stage.is-dragging { cursor: grabbing; }
.character-turntable-image { display: block; width: 100%; height: clamp(25rem, 42vw, 37rem); object-fit: contain; }
.character-view-controls { padding: .8rem 0 .1rem; border-top: 1px solid var(--line); background: var(--panel-soft); }
.character-rotate { width: min(calc(100% - 3rem), 24rem); margin: 0 auto; }
.character-rotate output { margin-left: .3rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.character-rotate button { min-width: 44px; min-height: 44px; }
.character-view-status { margin: 0 1.5rem 1rem; color: var(--accent); font-size: var(--type-label); text-align: center; }
.character-view-status:empty { display: none; }
.character-profile-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: var(--page-padding); }
.character-profile-copy h1 { overflow-wrap: anywhere; max-width: 100%; }
.character-class { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; margin: 1rem 0 1.8rem; }
.character-class span { color: var(--accent); font-size: .85rem; border: 1px solid var(--accent-line); padding: .2rem .6rem; border-radius: 4px; }
.profile-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; width: 100%; padding: 1.5rem 0; border-block: 1px solid var(--line); }
.profile-metrics > div { display: grid; gap: .35rem; }
.profile-metrics span { color: var(--dim); font-size: .7rem; }
.profile-metrics strong { color: var(--accent); font-size: clamp(1.1rem, 2vw, 1.8rem); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.profile-guild { margin: 1.7rem 0; }
.profile-guild .eyebrow { display: block; }
.profile-guild p { margin-bottom: 0; font-size: .85rem; }
.profile-guild a { color: var(--text); text-underline-offset: .25em; }
.profile-stats .eyebrow { display: block; }
.profile-stats strong { display: block; color: var(--text); font: 500 3rem var(--display); margin-bottom: .4rem; }
.equipment-grid { position: relative; display: flex; flex-wrap: wrap; align-items: start; gap: .7rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-soft); }
.equipment-slot { --item-color: #b9c5d1; flex: 0 0 5.25rem; min-width: 0; }
.equipment-tile { display: grid; justify-items: center; gap: .45rem; padding: .6rem .35rem .5rem; border: 1px solid var(--line-strong); border-top: 2px solid var(--item-color); border-radius: var(--radius-small); background: var(--panel-raised); cursor: pointer; list-style: none; }
.equipment-tile::-webkit-details-marker { display: none; }
.equipment-tile::marker { content: ''; }
.equipment-tile:hover, .equipment-slot[open] > .equipment-tile { border-color: var(--item-color); background: #263445; box-shadow: 0 0 0 1px var(--item-color); }
.equipment-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.equipment-tile-icon { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 4px; overflow: hidden; background: #10161f; }
.equipment-tile-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.equipment-tile-icon > span { color: var(--dim); font-size: 2rem; }
.equipment-slot-label { color: var(--muted); font-size: .65rem; line-height: 1.3; }
.equipment-card { --item-color: #b9c5d1; min-width: 0; border-top: 2px solid var(--item-color); }
.equipment-slot .equipment-card { --item-color: inherit; }
.equipment-popover { position: absolute; z-index: 110; top: calc(100% + .5rem); left: .5rem; width: min(21rem, calc(100vw - 2rem)); max-height: calc(100dvh - 7rem); overflow-y: auto; overscroll-behavior: contain; padding: 1rem; border: 1px solid var(--item-color); border-radius: var(--radius-small); background: #18232f; box-shadow: 0 16px 48px #0009; }
.equipment-slot[data-equipment-enhanced] .equipment-popover { position: fixed; }
.equipment-popover .equipment-card-top { flex-wrap: nowrap; gap: .65rem; margin-bottom: .8rem; }
.equipment-popover .equipment-rarity { margin-left: auto; }
.equipment-close { flex: 0 0 1.8rem; width: 1.8rem; height: 1.8rem; padding: 0; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--panel-raised); color: var(--text); cursor: pointer; font-size: 1.2rem; line-height: 1; }
.equipment-popover .equipment-card-heading h3 { margin-bottom: .3rem; font-size: 1.1rem; }
.equipment-popover .equipment-description { margin-top: .65rem; font-size: .8rem; line-height: 1.5; }
.equipment-popover .equipment-stats { margin-top: .85rem; gap: 0 .8rem; }
.equipment-popover .equipment-stats > div { padding: .6rem 0; }
.equipment-popover .equipment-stats dd { margin-top: .2rem; font-size: 1.05rem; }
.equipment-popover.equipment-card .equipment-note { margin-top: .8rem; font-size: .7rem; line-height: 1.6; }
.equipment-rarity-rare { --item-color: #98c8e5; }
.equipment-rarity-epic { --item-color: #c2adeb; }
.equipment-rarity-legendary { --item-color: var(--accent); }
.equipment-card-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.25rem; }
.equipment-card-top .eyebrow { color: var(--muted); margin: 0; }
.equipment-rarity { padding: .25rem .6rem; border: 1px solid var(--line-strong); border-radius: 4px; background: #ffffff08; color: var(--item-color); font-size: var(--type-label); }
.equipment-card-heading { display: flex; align-items: center; gap: 1rem; }
.equipment-card-heading > div:last-child { min-width: 0; }
.equipment-card-heading h3 { margin: 0 0 .4rem; font-size: var(--type-card); overflow-wrap: anywhere; }
.equipment-card-heading > div > span { color: var(--dim); font-size: var(--type-label); }
.equipment-icon { display: grid; place-items: center; flex: 0 0 5.5rem; width: 5.5rem; height: 5.5rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: radial-gradient(ellipse at center, #344252, #111923); }
.equipment-icon img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.equipment-icon > span { font-size: 2rem; color: var(--dim); }
.equipment-description { margin: 1.25rem 0 0; font-size: var(--type-small); }
.equipment-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; margin: 1.25rem 0 0; border-top: 1px solid var(--line); }
.equipment-stats > div { padding: .9rem 0; border-bottom: 1px solid var(--line); }
.equipment-stats dt { color: var(--dim); font-size: var(--type-label); }
.equipment-stats dd { margin: .3rem 0 0; color: var(--text); font: 500 1.3rem var(--display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.equipment-card .equipment-note { margin: 1.1rem 0 0; color: var(--dim); font-size: var(--type-label); }
.equipment-empty-slots { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel-soft); color: var(--dim); font-size: var(--type-label); }
.equipment-empty-slots > span:first-child { margin-right: .6rem; color: var(--muted); }
.equipment-empty-slot { padding: .25rem .6rem; border: 1px solid var(--line); border-radius: 4px; background: #ffffff05; }
.equipment-footer { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; margin-top: 1.25rem; }
.equipment-footer p { max-width: 78ch; margin: 0; font-size: var(--type-label); color: var(--dim); }
.equipment-footer a { font-size: var(--type-small); }
.portrait-pending { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .5rem; background: radial-gradient(ellipse, #344457, #182230); color: var(--dim); }
.portrait-pending > span { font: 600 4rem var(--display); color: #ffffff25; }
.rank-player .portrait-pending > span { font-size: 1.6rem; }
.rank-player .portrait-pending small, .guild-member .portrait-pending small { display: none; }
.guild-grid, .guild-roster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.guild-card { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); text-decoration: none; }
.guild-card-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.guild-crest { display: inline-grid; place-content: center; flex-shrink: 0; width: 3.5rem; height: 4rem; border: 1px solid var(--accent-line); border-radius: .5rem .5rem 1.7rem 1.7rem; color: var(--accent); background: var(--accent-soft); font: 600 1.3rem var(--display); }
.guild-card h3 { overflow-wrap: anywhere; }
.guild-card p { margin: .4rem 0 1.5rem; font-size: .8rem; }
.guild-card dl { display: flex; gap: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.guild-card dt { color: var(--dim); font-size: .7rem; }
.guild-card dd { margin: .3rem 0 0; font: 500 1.7rem var(--display); }
.guild-profile-hero .guild-crest { margin-bottom: 1.5rem; }
.guild-profile-hero h1 { overflow-wrap: anywhere; }
.guild-profile-hero p a { color: var(--accent); }
.guild-member { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-small); text-decoration: none; }
.guild-member:hover { border-color: var(--accent); }
.guild-member .character-portrait { flex: 0 0 4rem; width: 4rem; height: 5.5rem; object-fit: cover; border-radius: 4px; }
.guild-member > div { min-width: 0; }
.guild-member .eyebrow { font-size: .6rem; }
.guild-member h3 { font-size: 1.1rem; overflow-wrap: anywhere; }
.guild-member p { margin: .25rem 0 0; font-size: .72rem; }
.guild-member > span { margin-left: auto; color: var(--accent); }
.guide-step { display: inline-block; margin-bottom: 1.5rem; color: var(--accent); font: 500 1.4rem var(--display); }
@media (max-width: 1100px) {
  .guild-grid, .guild-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .ranking-hero { grid-template-columns: minmax(0, 1fr); gap: var(--page-padding); }
  .ranking-summary > strong { font-size: 2.5rem; }
  .rank-guide-grid { grid-template-columns: minmax(0, 1fr); }
  .character-profile { grid-template-columns: minmax(0, 1fr); }
  .character-stage .character-portrait { height: 31rem; object-fit: contain; }
  .rank-leader-copy { padding: 1.1rem; }
}
@media (max-width: 580px) {
  .rank-podium { grid-template-columns: minmax(0, 1fr); }
  .rank-leader > a { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .rank-leader-visual { height: 13rem; border-bottom: 0; border-right: 1px solid var(--line); }
  .rank-leader .character-portrait { object-position: center; }
  .rank-leader-copy { justify-content: center; }
  .rank-leader p { margin-top: 0; }
  .leader-rank { top: .6rem; left: .6rem; font-size: 1rem; }
  .rank-search { width: 100%; }
  .rank-search input { flex: 1; width: 10rem; }
  .rank-tabs a { flex-direction: column; gap: .3rem; text-align: center; padding: .85rem .4rem; font-size: var(--type-label); }
  .guild-grid, .guild-roster { grid-template-columns: minmax(0, 1fr); }
  .profile-metrics { gap: .5rem; }
  .profile-metrics strong { font-size: 1.3rem; }
  .profile-metrics span { font-size: .65rem; }
}

/* Readable policies, with the same visual language as the player account. */
.legal-shell { max-width: var(--reading-width); margin: 0 auto; padding: 2rem 0 var(--section-space); }
.legal-lead { padding: var(--page-padding); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-hero); box-shadow: var(--shadow-hero); }
.legal-back { display: block; width: fit-content; margin-bottom: 2rem; color: var(--muted); font-size: .85rem; text-decoration: none; }
.legal-lead .section-kicker { display: block; margin-bottom: .75rem; }
.legal-lead > p { max-width: 62ch; margin-top: 1.25rem; font-size: var(--type-lead); }
.legal-meta { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; margin-top: 1.5rem; color: var(--muted); font-size: .8rem; }
.legal-notice { margin: 1.8rem 0; padding: 1.1rem 1.3rem; border: 1px solid #e9bf754a; border-left: 3px solid var(--accent); border-radius: var(--radius-small); color: var(--muted); background: #e9bf7507; font-size: .9rem; line-height: 1.75; }
.legal-notice strong { display: block; margin-bottom: .2rem; color: var(--accent); }
.legal-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); align-items: start; gap: clamp(2rem, 5vw, 5rem); margin-top: 3rem; }
.legal-toc { position: sticky; top: calc(var(--header-height) + 2rem); padding: 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-soft); font-size: .85rem; }
.legal-toc > span { color: var(--text); font-weight: 600; }
.legal-toc ol { display: grid; gap: .85rem; margin: 1.2rem 0; padding-left: 1.1rem; color: var(--dim); }
.legal-toc a { color: var(--muted); text-decoration: none; }
.legal-toc a:hover { color: var(--accent); }
.legal-contact-link { display: block; padding-top: 1rem; border-top: 1px solid var(--line); }
.legal-copy { min-width: 0; }
.legal-copy section { margin: 0 0 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-height) + 1.5rem); }
.legal-copy h2 { margin-bottom: 1.25rem; font-size: var(--type-section); }
.legal-copy h3 { margin: 1.6rem 0 .8rem; font-size: 1.05rem; }
.legal-copy p, .legal-copy li { color: var(--muted); line-height: 1.75; font-size: var(--type-body); overflow-wrap: anywhere; }
.legal-copy p + p, .legal-copy ul { margin-top: 1rem; }
.legal-copy li + li { margin-top: .8rem; }
.legal-copy a, .legal-notice a, .legal-form-note a, .legal-check a, .legal-store-note a { text-underline-offset: .2em; text-decoration: underline; }
.legal-copy strong { color: var(--text); }
.legal-facts { display: grid; margin-top: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-soft); overflow: hidden; }
.legal-facts > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 1rem; padding: 1rem 1.3rem; }
.legal-facts > div + div { border-top: 1px solid var(--line); }
.legal-facts dt { color: var(--dim); font-size: .85rem; }
.legal-facts dd { margin: 0; color: var(--text); font-size: .9rem; overflow-wrap: anywhere; }
.legal-policy-list { display: grid; gap: .8rem; }
.legal-policy-list > a { display: grid; gap: .5rem; padding: 1.2rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-soft); text-decoration: none; }
.legal-policy-list > a:hover { border-color: var(--accent); }
.legal-policy-list strong { display: flex; justify-content: space-between; }
.legal-policy-list > a > span { color: var(--muted); font-size: .85rem; }
.legal-table-wrap { max-width: 100%; margin: 1.5rem 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.legal-table { min-width: 610px; table-layout: fixed; }
.legal-table th { font-size: .7rem; }
.legal-table td { padding: 1rem; color: #bbc5d1; font-size: .85rem; line-height: 1.75; white-space: normal; vertical-align: top; }
.legal-table td:first-child { color: var(--text); }
.legal-form-example { margin: 1.3rem 0; padding: 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-soft); }
.legal-directory { margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.legal-directory > p { margin-top: 1rem; color: var(--dim); font-size: .8rem; }
.legal-links { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; font-size: .8rem; }
.legal-links a { color: var(--muted); text-decoration: none; }
.legal-links a:hover { color: var(--accent); }
.footer > .legal-links { grid-column: 1 / -1; }
.account-footer > .legal-links { flex-basis: 100%; }
.legal-check, .form-stack .legal-check { display: flex; align-items: flex-start; gap: .7rem; margin: .9rem 0; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel); }
.legal-check > span, .form-stack .legal-check > span, .auth-card .form-stack .legal-check > span { margin: 0; color: var(--muted); font-size: .83rem; line-height: 1.7; font-weight: 400; }
.legal-check input[type="checkbox"], .auth-card .form-stack .legal-check input[type="checkbox"] { flex: 0 0 1.15rem; width: 1.15rem; height: 1.15rem; min-height: 0; margin: .2rem 0 0; padding: 0; accent-color: var(--accent); }
.legal-form-note { font-size: .83rem; line-height: 1.75; }
.legal-store-note { padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-soft); }
.legal-store-note p { font-size: .9rem; line-height: 1.8; }
.legal-store-note p + p { margin-top: .8rem; }
@media (max-width: 800px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .legal-toc { position: static; }
  .legal-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.6rem; }
}
@media (max-width: 480px) {
  .legal-toc ol { grid-template-columns: minmax(0, 1fr); }
  .legal-facts > div { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
}
@media print {
  .page-legal .topbar, .page-legal .footer, .page-legal .legal-toc, .page-legal .legal-directory, .page-legal .legal-back, .page-legal .skip-link { display: none !important; }
  .page-legal, .page-legal .site-shell, .page-legal main, .page-legal .legal-shell { color: #111 !important; background: #fff !important; padding: 0; margin: 0; }
  .page-legal .legal-layout { display: block; }
  .page-legal .legal-table-wrap { overflow: visible; }
  .page-legal .legal-table { min-width: 0; }
  .page-legal .legal-copy *, .page-legal .legal-lead *, .page-legal .legal-notice { color: #111 !important; background: transparent !important; }
  .page-legal .legal-copy h2, .page-legal .legal-copy h3 { break-after: avoid; }
}