@font-face {
  font-family: Archivo;
  src: url('../fonts/archivo-700.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url('../fonts/manrope-400.ttf') format('truetype');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url('../fonts/manrope-600.ttf') format('truetype');
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

/* Owner-specified brand palette. Preserve it during typography and layout revisions. */
:root {
  color-scheme: dark;
  --bg: #03080f;
  --surface: #07131d;
  --text: #f4f7f8;
  --muted: #91a3af;
  --quiet: #91a3af;
  --line: rgba(72, 191, 238, .18);
  --cyan: #32cfff;
  --gold: #f0b74b;
  --gold-light: #f4d98f;
  --violet-light: #a49aff;
  --font-body: Manrope, Arial, sans-serif;
  --font-display: Archivo, Arial, sans-serif;
  --header-height: 82px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.7 var(--font-body); -webkit-font-smoothing: antialiased; }
body.dialog-open { overflow: hidden; }
button, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { border: 0; color: inherit; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
p, h1, h2, h3 { margin: 0; }
em { color: var(--gold); font-style: normal; }
[hidden] { display: none !important; }
::selection { background: #32cfff; color: #03080f; }
:is(button, a, select, [tabindex]):focus-visible { outline: 2px solid var(--cyan); outline-offset: 6px; }
.container { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }
.icon { display: inline-block; flex-shrink: 0; width: 21px; height: 21px; vertical-align: middle; }
.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; top: 12px; left: 12px; z-index: 100; padding: 12px 20px; transform: translateY(-180%); background: var(--text); color: var(--bg); border-radius: 4px; }
.skip-link:focus { transform: none; }

/* The fixed glass navigation stays readable over every section. */
.site-header { position: fixed; inset: 0 0 auto; z-index: 30; background: #03080fc7; border-bottom: 1px solid #32cfff12; -webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%); transition: background .3s, border-color .3s, box-shadow .3s; }
.site-header.is-scrolled { background: #03080fe8; border-color: var(--line); box-shadow: 0 8px 32px #0003; }
.site-header.menu-open { background: #03080ff5; }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; align-items: center; min-width: 124px; flex-shrink: 0; }
.brand-logo { width: 72px; height: 66px; object-fit: contain; }
.desktop-nav { display: flex; gap: 33px; align-items: center; }
.desktop-nav a { padding: 16px 0; color: #aab6bf; font-size: .875rem; transition: color .18s; white-space: nowrap; }
.desktop-nav a:hover, .desktop-nav a.is-active { color: var(--cyan); }
.header-actions { display: flex; align-items: center; gap: 30px; }
.language-control { position: relative; flex-shrink: 0; }
.language-toggle { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 10px; list-style: none; color: #d4e2eb; font-size: .875rem; cursor: pointer; border-radius: 4px; transition: background .18s, color .18s; }
.language-toggle::-webkit-details-marker { display: none; }
.language-toggle > .icon:first-child { width: 16px; height: 16px; color: #86a9bb; }
.language-toggle > .icon:last-child { width: 12px; height: 12px; color: #86a9bb; transition: transform .2s; }
.language-control[open] .language-toggle { background: #14527a35; color: #e3f6ff; }
.language-control[open] .language-toggle > .icon:last-child { transform: rotate(180deg); }
.language-toggle:focus-visible { outline: 1px solid #32cfff99; outline-offset: 2px; }
.language-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 3; width: 216px; max-width: calc(100vw - 32px); padding: 8px; border: 1px solid #5ea4c32b; border-radius: 7px; background: linear-gradient(145deg, #0b1b28fa, #050f19fc); box-shadow: 0 16px 42px #0008, inset 0 1px #c9e9ff06; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.language-control[open] .language-menu { animation: language-reveal .18s ease-out; }
.language-menu-label { padding: 6px 10px 10px; color: #86a3b5; font-size: .75rem; }
.language-option { display: flex; align-items: center; gap: 12px; min-height: 47px; padding: 10px; border-radius: 4px; color: #b8cbd8; font-size: .875rem; transition: background .16s, color .16s; }
.language-code { width: 25px; color: #6f93a8; font-size: .75rem; font-weight: 600; letter-spacing: .06em; }
.language-option > .icon { width: 16px; height: 16px; margin-left: auto; color: var(--cyan); visibility: hidden; }
.language-option[aria-current="true"] { background: #14527a45; color: #e2f4ff; }
.language-option[aria-current="true"] .language-code { color: #8bd4f3; }
.language-option[aria-current="true"] > .icon { visibility: visible; }
.language-option:focus-visible { outline: 1px solid #32cfff80; outline-offset: -1px; background: #14527a40; }
@media (hover: hover) { .language-toggle:hover { background: #14527a25; color: #e3f6ff; } .language-option:hover { background: #14527a38; color: #e3f6ff; } }
@keyframes language-reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 54px; padding: 15px 25px; border: 0; border-radius: 5px; font-size: .875rem; line-height: 1.45; font-weight: 600; text-align: center; transition: background .18s, color .18s; }
.button .icon { width: 18px; height: 18px; transition: transform .18s; }
.button:hover .icon { transform: translateX(3px); }
.button-primary { color: #eaf8ff; background: #14527a; }
.button-primary:hover { background: #196493; }
.button-primary:active { background: #0b3352; }
.button-outline { color: #bfefff; background: transparent; padding-inline: 9px; }
.button-outline:hover { color: var(--cyan); background: #32cfff06; }
.button-download { position: relative; isolation: isolate; min-width: 188px; overflow: hidden; color: #fff7f4; background: linear-gradient(135deg, #a73732 0%, #7b2025 52%, #4b101b 100%); border: 1px solid #ff8b7866; box-shadow: inset 0 1px 0 #fff0e629, 0 10px 26px #00000052, 0 0 24px #d83c3217; transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.button-download > * { position: relative; z-index: 1; }
.button-download::before { content: ''; position: absolute; z-index: 0; inset: -45% auto -45% -55%; width: 38%; background: linear-gradient(90deg, transparent, #ffe1d64d, transparent); transform: skewX(-18deg) translateX(-220%); animation: download-reflection 6.2s 1.4s ease-in-out infinite; pointer-events: none; }
.button-download .icon { filter: drop-shadow(0 0 6px #ff9b8980); animation: download-icon 4.6s ease-in-out infinite; }
.button-download:hover { color: #fff; background: linear-gradient(135deg, #c4493e 0%, #942b2d 52%, #641825 100%); border-color: #ffad9b99; box-shadow: inset 0 1px 0 #fff5ed38, 0 13px 30px #0000005c, 0 0 30px #e24a3b29; transform: translateY(-2px); }
.button-download:hover .icon { animation: none; transform: translateY(2px); }
.button-download:active { transform: translateY(0); }
@keyframes download-reflection { 0%, 66%, 100% { transform: skewX(-18deg) translateX(-220%); } 82% { transform: skewX(-18deg) translateX(620%); } }
@keyframes download-icon { 0%, 72%, 100% { transform: translateY(0); } 80% { transform: translateY(3px); } 88% { transform: translateY(0); } }
.button-large { min-height: 58px; padding: 18px 27px; }
.button-large.button-outline { padding-inline: 7px; }
.header-cta { color: var(--cyan); background: transparent; min-height: 44px; padding: 10px 0; font-size: .875rem; gap: 13px; border-radius: 0; }
.header-cta:hover { background: transparent; color: #bfefff; }
.icon-button { display: inline-grid; place-items: center; width: 44px; height: 44px; background: transparent; border: 0; border-radius: 5px; }
.icon-button:hover { background: #ffffff08; }
.menu-toggle { display: none; }
.mobile-nav { position: absolute; top: 100%; inset-inline: 0; background: #07131df5; padding: 12px 28px 28px; border-bottom: 1px solid var(--line); max-height: calc(100dvh - var(--header-height)); overflow-y: auto; overscroll-behavior: contain; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.mobile-nav > a { display: block; padding: 13px 0; color: #dce5ec; font-size: 1rem; }
.mobile-nav > .button { width: 100%; margin-top: 18px; }

/* A cinematic opening with a contemporary editorial scale. */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); }
.hero-art, .hero-shade { position: absolute; inset: 0; z-index: -2; }
.hero-art { --hero-focus: 50% 38%; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus); transform: translate3d(var(--depth-x, 0px), var(--depth-y, 0px), 0) scale(1.035); transition: transform .65s cubic-bezier(.2, .6, .2, 1); animation: artwork-enter 1.8s ease both; }
.hero-shade { z-index: -1; background: linear-gradient(90deg, #03080ff2, #03080fa3 34%, #03080f00 78%), linear-gradient(0deg, #03080f, #03080f00 40%); }
.hero-atmosphere { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 74% 43%, #32cfff16, transparent 43%), radial-gradient(ellipse at 38% 55%, #f0b74b0b, transparent 36%); animation: atmosphere-breathe 8s ease-in-out infinite alternate; }
.hero-particles { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-particles > span { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 10px 2px #f0b74b24; opacity: 0; animation: ember-rise var(--duration) var(--delay) linear infinite; }
.hero-particles > span:nth-child(3n) { background: var(--cyan); box-shadow: 0 0 10px 2px #32cfff24; }
.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 56px; min-height: 720px; padding-top: 108px; padding-bottom: 76px; }
.hero-copy { width: 100%; max-width: 620px; }
.hero-brand { width: clamp(260px, 26vw, 350px); max-width: 100%; justify-self: center; margin: 0; }
.hero-logo { width: 100%; height: auto; filter: drop-shadow(0 8px 24px #32cfff1a); animation: logo-float 7s ease-in-out infinite; }
.online-indicator { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; color: var(--muted); font-size: .75rem; line-height: 1.5; white-space: nowrap; }
.online-indicator strong { color: #dcf6ff; font-size: 1rem; font-variant-numeric: tabular-nums; }
.online-dot { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #627886; }
.online-indicator[data-available="true"] .online-dot { background: var(--cyan); box-shadow: 0 0 10px #32cfff88; }
.hero-brand, .hero-copy > :is(.hero-meta, h1, .hero-description, .hero-actions, .hero-note) { animation: hero-enter .95s cubic-bezier(.2, .65, .2, 1) both; }
.hero-copy > .hero-meta { animation-delay: .1s; }
.hero-copy > h1 { animation-delay: .2s; }
.hero-copy > .hero-description { animation-delay: .32s; }
.hero-copy > .hero-actions { animation-delay: .44s; }
.hero-copy > .hero-note { animation-delay: .54s; }
.season-label { display: flex; align-items: center; gap: 12px; color: var(--cyan); font-size: .875rem; font-weight: 500; margin-bottom: 18px; letter-spacing: .01em; }
.season-label::before { content: ''; width: 22px; height: 2px; background: var(--cyan); }
.hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 22px; }
.hero-beta-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-left: 2px solid var(--gold); background: linear-gradient(90deg, #f0b74b20, #07131dc9); color: var(--gold-light); box-shadow: inset 0 1px #f0b74b24, inset 0 -1px #f0b74b14; font-size: .875rem; line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; }
.hero-beta-badge strong { font-weight: 600; }
.hero-beta-badge .icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--gold); }
.hero-meta .season-label { margin: 0; }
.hero-meta .season-label::before { display: none; }
h1 { font: 700 clamp(2.9rem, 4.4vw, 4rem)/1.08 var(--font-display); letter-spacing: -.045em; }
h1 > span, h1 > em { display: block; }
h1 > em { color: var(--gold); text-shadow: 0 4px 35px #f0b74b12; }
/* Reflections follow the text and the artwork's existing metallic highlights. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  h1 > em { background-image: linear-gradient(110deg, var(--gold) 40%, var(--gold-light) 46%, #fff9e6 49%, #fff9e6 51%, var(--gold-light) 54%, var(--gold) 60%); background-size: 280% 100%; background-position: 100% 0; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: title-reflection 9s 1.2s ease-in-out infinite; }
}
@supports ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
  .hero-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: url('../images/hero-blue.webp') var(--hero-focus) / cover no-repeat; mix-blend-mode: screen; opacity: 0; filter: brightness(1.55); transform: translate3d(var(--depth-x, 0px), var(--depth-y, 0px), 0) scale(1.035); transition: transform .65s cubic-bezier(.2, .6, .2, 1); -webkit-mask-image: linear-gradient(112deg, transparent 39%, #0009 48%, #000 50%, #0009 52%, transparent 61%); mask-image: linear-gradient(112deg, transparent 39%, #0009 48%, #000 50%, #0009 52%, transparent 61%); -webkit-mask-size: 280% 100%; mask-size: 280% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: armor-reflection 9s 1.6s ease-in-out infinite; }
}
.hero-description { max-width: 465px; margin-top: 20px; color: #a9bac5; font-size: 1rem; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; margin-top: 24px; }
.hero-actions .button-primary { position: relative; overflow: hidden; }
.hero-actions .button-primary::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, #bfefff26 50%, transparent 70%); transform: translateX(-130%); animation: button-sheen 1.2s 1s ease-in-out; }
.hero-note { display: flex; align-items: center; gap: 9px; margin-top: 16px; color: #9eafba; font-size: .75rem; }
.status-dot { flex-shrink: 0; width: 4px; height: 4px; background: var(--gold); border-radius: 50%; }
.hero-bottom { position: absolute; bottom: 18px; left: 0; }
.explore-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #b2c1cb; font-size: .75rem; transition: color .18s; }
.explore-link:hover { color: var(--cyan); }
.explore-link .icon { width: 17px; height: 17px; }

/* Four distinct units keep the launch easy to scan on every screen. */
.launch-container { position: relative; }
.launch-panel { display: grid; grid-template-columns: 1fr 1.45fr .8fr; align-items: center; gap: 36px; min-height: 188px; padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.eyebrow { font-size: .875rem; line-height: 1.5; font-weight: 500; color: var(--cyan); letter-spacing: 0; }
.launch-date { display: flex; flex-direction: column; gap: 4px; margin-top: 11px; font-size: 1rem; color: #e7eef3; }
.launch-date > span:last-child { color: var(--muted); font-size: .8125rem; }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.countdown-unit { min-width: 0; text-align: center; padding: 22px 8px 17px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(160deg, #12304480, #07131da6); box-shadow: inset 0 1px #bfefff08, 0 8px 22px #0002; }
.countdown-value { overflow: hidden; }
.countdown-unit strong { display: block; color: #dcf6ff; font: 700 3rem/1.15 var(--font-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.countdown-unit > span { display: block; margin-top: 10px; color: #a9bac5; font-size: .75rem; }
.countdown-unit:last-child { border-color: #32cfff40; }
.calendar-button { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 48px; background: transparent; color: #b8c9d3; font-size: .875rem; text-align: left; padding: 8px 0; }
.calendar-button > .icon:first-child { width: 19px; height: 19px; color: var(--gold); }
.calendar-button > .icon:last-child { width: 17px; height: 17px; }
.calendar-button:hover { color: var(--gold-light); }
.beta-status { display: flex; gap: 8px; align-items: center; color: var(--quiet); margin-top: 16px; font-size: .75rem; }
.beta-after { grid-column: 1/-1; font-size: .875rem; color: var(--gold-light); }

/* Translucent surfaces and restrained lighting preserve the brand palette. */
.section { padding: 112px 0; }
.server-section { padding-top: 68px; }
.server-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-bottom: 76px; margin-bottom: 78px; border-bottom: 1px solid var(--line); }
:is(.stat, .feature-card, .event-item) { --card-light: #32cfff; position: relative; isolation: isolate; overflow: hidden; border: 1px solid #32cfff24; border-radius: 9px; background: #07131db3; box-shadow: inset 0 1px #eaf8ff05; transition: transform .3s ease, border-color .3s, background .3s, box-shadow .3s; }
:is(.stat, .feature-card, .event-item)::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(350px circle at var(--light-x, 50%) var(--light-y, 0%), color-mix(in srgb, var(--card-light) 9%, transparent), transparent 70%); opacity: .45; transition: opacity .35s; }
.stat { padding: 23px; }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stat-top > .icon { color: var(--cyan); width: 19px; height: 19px; opacity: .8; }
.stat:nth-child(3) { --card-light: #f0b74b; }
.stat:nth-child(3) .stat-top > .icon { color: var(--gold); }
.stat-label { display: block; color: var(--muted); font-size: .875rem; }
.stat strong { display: block; font: 700 clamp(1.7rem, 2.45vw, 2.2rem)/1.15 var(--font-display); margin: 20px 0 10px; letter-spacing: -.035em; white-space: nowrap; color: #e9f0f5; }
.stat-detail { display: block; font-size: .75rem; line-height: 1.65; color: var(--quiet); }
h2 { font: 700 clamp(2.1rem, 4.1vw, 3.6rem)/1.075 var(--font-display); letter-spacing: -.045em; margin-top: 21px; }
h3 { font: 700 1.45rem/1.25 var(--font-display); letter-spacing: -.025em; }
.section-heading { margin-bottom: 58px; }
.split-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: 110px; align-items: end; }
.split-heading > p { max-width: 405px; padding-bottom: 5px; color: var(--muted); font-size: 1rem; line-height: 1.9; }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.feature-card { display: flex; flex-direction: column; padding: 30px; }
.feature-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.feature-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; color: var(--card-light); background: #32cfff08; border-radius: 7px; }
.feature-icon > .icon { width: 24px; height: 24px; }
.feature-number { color: #6f8898; font-size: .75rem; font-variant-numeric: tabular-nums; }
.feature-card:nth-child(2) { --card-light: #f0b74b; }
.feature-card:nth-child(2) .feature-icon { background: #f0b74b08; }
.feature-card:nth-child(3) { --card-light: #a49aff; }
.feature-card:nth-child(3) .feature-icon { background: #a49aff08; }
.feature-card h3 { color: #e3ecf3; }
.feature-card p { color: var(--muted); font-size: 1rem; line-height: 1.85; margin-top: 18px; }
.feature-tag { display: flex; align-items: center; gap: 8px; padding-top: 26px; margin-top: auto; color: var(--card-light); font-size: .75rem; font-weight: 600; letter-spacing: .025em; }
.feature-tag > .icon { width: 14px; height: 14px; }

.events-section { background: var(--surface); }
.events-layout { display: grid; grid-template-columns: 1fr 1.12fr; gap: 112px; }
.events-intro { padding-top: 9px; }
.events-intro h2 { max-width: 470px; }
.events-intro > p { max-width: 415px; color: var(--muted); font-size: 1rem; line-height: 1.9; margin-top: 25px; }
.text-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; padding: 0; background: transparent; color: var(--cyan); font-size: .875rem; font-weight: 600; }
.text-link > .icon { width: 18px; height: 18px; transition: transform .18s; }
.text-link:hover { color: #bfefff; }
.text-link:hover > .icon { transform: translateX(4px); }
.events-intro > .text-link { margin-top: 24px; }
.event-list { display: flex; flex-direction: column; gap: 16px; }
.event-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 24px; padding: 27px; background: #03080f70; }
.event-item:first-child { --card-light: #f0b74b; }
.event-item h3 { font-size: 1.25rem; }
.event-item p { font-size: 1rem; line-height: 1.8; color: var(--muted); margin-top: 12px; }
.event-date { display: flex; flex-direction: column; align-items: flex-start; padding-top: 3px; }
.event-date > span:first-child { font: 700 3.9rem/1 var(--font-display); letter-spacing: -.05em; color: var(--gold); }
.event-month { font-size: .75rem; margin-top: 9px; color: #8ea9bc; }
.event-kicker { color: var(--cyan); font-size: .75rem; margin-bottom: 11px; }
.event-time { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: #b9cbd6; font-size: .8125rem; }
.event-time .icon { width: 15px; height: 15px; color: var(--cyan); }
.event-year { margin-left: 10px; color: #8ea9bc; }
.event-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--cyan); background: #32cfff08; border-radius: 7px; }
.event-icon > .icon { width: 25px; height: 25px; }
.coming-soon { display: block; color: #819dac; font-size: .75rem; margin-top: 16px; }

/* An editorial introduction alongside the standings, without podium cards. */
.ranking-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 64px; align-items: start; }
.ranking-aside { padding-top: 9px; }
.ranking-heading h2 { color: var(--gold); font-size: 3.1rem; line-height: 1.06; margin-top: 18px; }
.ranking-heading p { color: var(--muted); font-size: 1rem; line-height: 1.85; margin-top: 22px; }
.ranking-join { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 29px; }
.ranking-testing { display: inline-flex; align-items: center; gap: 9px; color: #90d9f4; font-size: .8125rem; }
.ranking-testing .icon { width: 17px; height: 17px; }
.ranking-join > .button { min-height: 50px; }
.ranking-main { min-width: 0; }
.ranking-board { overflow: hidden; border-block: 1px solid var(--line); background: #07131d8c; }
.ranking-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 80px; padding: 18px 26px; }
.ranking-tab { display: flex; align-items: center; gap: 13px; font-size: .9375rem; }
.ranking-tab strong { display: block; color: #e3eef5; font-weight: 600; }
.ranking-mark { display: inline-flex; color: var(--gold); }
.ranking-mark > .icon { width: 22px; height: 22px; }
.ranking-sort { display: block; margin-top: 3px; color: var(--quiet); font-size: .75rem; }
.refresh-button { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 0 10px 12px; flex-shrink: 0; font-size: .8125rem; background: transparent; color: #a9cddd; transition: color .2s; }
.refresh-button > .icon { width: 16px; height: 16px; }
.refresh-button:hover { color: var(--cyan); }
.refresh-button:disabled > .icon { animation: spin 1s linear infinite; }
.ranking-filters { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(150px, 1fr) auto; align-items: end; gap: 16px; padding: 0 26px 22px; }
.ranking-filters label { display: block; margin-bottom: 8px; color: #b8ccd8; font-size: .875rem; }
.ranking-search-field, .ranking-class-field { min-width: 0; }
.ranking-search-input { display: flex; align-items: center; min-height: 46px; background: #030c14c9; border: 1px solid #32cfff26; border-radius: 3px; }
.ranking-search-input > .icon { width: 17px; height: 17px; flex-shrink: 0; margin-left: 12px; color: #75acc4; }
.ranking-search-input input { width: 100%; min-width: 0; padding: 12px 9px; border: 0; color: #e3eef5; background: transparent; font: inherit; font-size: .875rem; }
.ranking-search-input input::placeholder { color: #788f9f; opacity: 1; }
.ranking-search-input:focus-within { border-color: var(--cyan); }
.ranking-search-input button { align-self: stretch; padding: 0 13px; border-left: 1px solid #32cfff26; color: #b7eaff; background: #14527a38; font-size: .8125rem; }
.ranking-class-field select { width: 100%; min-height: 46px; padding: 10px; border: 1px solid #32cfff26; border-radius: 3px; color: #d1e5ef; background: #030c14; font: inherit; font-size: .875rem; color-scheme: dark; }
.ranking-clear { min-height: 46px; color: #9ec6d8; background: transparent; font-size: .8125rem; }
.ranking-clear:disabled { opacity: .4; cursor: default; }
.ranking-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 16px 26px; border-top: 1px solid var(--line); }
#ranking-summary { color: #9bb4c4; font-size: .8125rem; }
.ranking-page-nav, #ranking-page-buttons { display: flex; align-items: center; gap: 5px; }
.ranking-page-nav button { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 44px; padding: 8px; background: transparent; color: #a6c4d5; font-size: .875rem; font-variant-numeric: tabular-nums; border-radius: 3px; transition: background .2s, color .2s; }
.ranking-page-nav button[aria-current="page"] { background: #14527a; color: #e3f6ff; }
.ranking-page-nav button:disabled { opacity: .35; cursor: default; }
.ranking-page-nav button .icon { width: 17px; height: 17px; }
#ranking-prev .icon { transform: rotate(90deg); }
#ranking-next .icon { transform: rotate(-90deg); }
@media (hover: hover) { .ranking-page-nav button:not(:disabled):hover, .ranking-search-input button:hover { background: #14527a77; color: #fff; } .ranking-clear:not(:disabled):hover { color: var(--cyan); } }
@media (max-width: 700px) {
  .ranking-filters { grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding-inline: 20px; }
  .ranking-search-field { grid-column: 1 / -1; }
  .ranking-pagination { padding-inline: 20px; }
}
@media (max-width: 420px) {
  .ranking-pagination { flex-direction: column; align-items: flex-start; }
  .ranking-page-nav { gap: 2px; }
  #ranking-page-buttons { gap: 2px; }
  .ranking-page-nav button { min-width: 32px; padding-inline: 6px; }
}
.table-scroll { overflow: auto; scrollbar-color: #14527a var(--bg); }
.table-scroll:focus-visible { outline-offset: -3px; }
.ranking-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 610px; text-align: left; }
.ranking-table thead th { position: sticky; top: 0; z-index: 1; padding: 13px 18px; color: #96adbb; background: #0a1b27; font-size: .75rem; font-weight: 500; border-block: 1px solid var(--line); }
.ranking-table tbody :is(td, th) { padding: 15px 18px; border-bottom: 1px solid #32cfff12; color: #a9bdcb; font-size: .875rem; font-weight: 400; overflow-wrap: anywhere; }
.ranking-table tbody tr { transition: background .2s; }
.ranking-table tbody tr:nth-child(even) { background: #32cfff03; }
.ranking-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.ranking-table :is(th, td):first-child { width: 76px; padding-left: 26px; }
.ranking-table :is(th, td):last-child { padding-right: 26px; text-align: right; }
.position-badge { display: inline-block; color: var(--muted); font: 700 1.05rem/1.5 var(--font-display); font-variant-numeric: tabular-nums; }
.ranking-table [data-rank="1"] .position-badge, .ranking-table [data-rank="1"] .player-name { color: var(--gold); }
.ranking-table [data-rank="2"] .position-badge { color: var(--cyan); }
.ranking-table [data-rank="3"] .position-badge { color: var(--violet-light); }
.player-name { display: block; color: #e3eef5; font-weight: 600; }
.player-class-mobile { display: none; }
.ranking-table .column-level strong { color: #dcf6ff; font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ranking-empty { display: flex; align-items: center; gap: 26px; min-height: 228px; padding: 42px 36px; }
.ranking-empty-symbol { display: inline-flex; flex-shrink: 0; color: var(--gold); opacity: .6; }
.ranking-empty-symbol > .icon { width: 46px; height: 46px; stroke-width: 1; }
.ranking-empty-copy { max-width: 450px; }
.ranking-empty h3 { font: 600 1.0625rem/1.5 var(--font-body); letter-spacing: 0; color: #c8d6df; }
.ranking-empty p { margin-top: 9px; color: var(--muted); font-size: 1rem; line-height: 1.8; }
.ranking-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); padding: 16px 26px; font-size: .75rem; color: var(--quiet); }
.ranking-update { display: flex; align-items: center; gap: 8px; }
.ranking-update > .icon { width: 14px; height: 14px; }
.ranking-season { font-size: .75rem; letter-spacing: .02em; }
.ranking-disclaimer { margin-top: 17px; max-width: 850px; color: var(--quiet); font-size: .75rem; line-height: 1.9; }

@media (hover: hover) and (pointer: fine) {
  .ranking-table tbody tr:hover { background: #32cfff08; }
}

.community-section { padding: 104px 0; background: #07131d; }
.community-inner { display: grid; grid-template-columns: 1.15fr 1fr; column-gap: 100px; }
.community-inner > .eyebrow { grid-column: 1; grid-row: 1; margin-bottom: 22px; }
.community-inner h2 { grid-column: 1; grid-row: 2/5; margin: 0; font-size: clamp(2.5rem, 4.25vw, 3.9rem); }
.community-inner > p { grid-column: 2; grid-row: 2; margin: 4px 0 24px; max-width: 470px; color: #9bb0bd; font-size: 1rem; line-height: 1.9; }
.community-actions { grid-column: 2; grid-row: 3; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.community-note { grid-column: 2; grid-row: 4; display: block; margin-top: 19px; color: #8299a8; font-size: .75rem; }
.site-footer { background: #03080f; }
.footer-top { display: flex; align-items: center; gap: 26px; min-height: 149px; padding-block: 24px; border-bottom: 1px solid var(--line); }
.footer-top .brand { min-width: 115px; }
.footer-top .brand-logo { width: 86px; height: 80px; }
.footer-tagline { color: #8299a8; font-size: .8125rem; }
.back-top { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #9cb3c1; font-size: .8125rem; margin-left: auto; }
.back-top > .icon { transform: rotate(-90deg); width: 17px; height: 17px; }
.back-top:hover { color: var(--cyan); }
.footer-bottom { display: flex; justify-content: space-between; gap: 36px; padding-block: 26px; font-size: .75rem; color: #7f96a5; }
.footer-bottom > p:last-child { max-width: 550px; text-align: right; }

/* Dialogs use the same restrained controls and typography as the page. */
.availability-dialog { position: fixed; width: calc(100% - 40px); max-width: 555px; max-height: calc(100dvh - 40px); margin: auto; padding: 48px 42px 40px; border: 0; border-radius: 10px; background: var(--surface); color: var(--text); box-shadow: 0 30px 100px #0005; overflow-y: auto; }
.availability-dialog::backdrop { background: #02070dcf; backdrop-filter: blur(8px); }
.dialog-close { position: absolute; top: 12px; right: 12px; color: #a3b6c3; }
.dialog-icon { display: inline-block; color: var(--cyan); margin-bottom: 22px; }
.dialog-icon > .icon { width: 26px; height: 26px; }
.availability-dialog .eyebrow { font-size: .8125rem; }
.availability-dialog h2 { font-size: 2.35rem; line-height: 1.15; margin-top: 15px; }
.availability-dialog > p { margin-top: 22px; color: #a1b4c1; font-size: 1rem; line-height: 1.85; }
.dialog-date { display: flex; align-items: center; gap: 14px; margin: 26px 0; padding: 22px 0; border-block: 1px solid var(--line); color: var(--gold); }
.dialog-date > div { display: flex; flex-direction: column; gap: 3px; font-size: .875rem; color: #d8e6ef; }
.dialog-date > div > span:last-child { color: #97acb9; font-size: .8125rem; }
.availability-dialog > .button { width: 100%; }
.toast { position: fixed; z-index: 100; bottom: 24px; right: 24px; max-width: min(440px, calc(100% - 48px)); padding: 18px 24px; color: #e4edf4; background: #152c3b; border: 0; border-radius: 8px; font-size: .875rem; box-shadow: 0 10px 40px #0003; }
.noscript-message { padding: 20px 28px; font-size: .875rem; background: var(--surface); }
.reveal { opacity: 1; transform: none; }
.motion-ready .reveal { transition: opacity .55s ease, transform .55s ease, border-color .3s, background .3s, box-shadow .3s; }
.motion-ready .reveal.pending { opacity: 0; transform: translateY(12px); }
.hero.motion-paused *, .hero.motion-paused *::after { animation-play-state: paused !important; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes hero-enter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes artwork-enter { from { opacity: .3; } to { opacity: 1; } }
@keyframes logo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes atmosphere-breathe { from { opacity: .4; } to { opacity: 1; } }
@keyframes ember-rise { 0% { opacity: 0; transform: translate3d(0, 35px, 0); } 20% { opacity: .5; } 75% { opacity: .3; } 100% { opacity: 0; transform: translate3d(22px, -95px, 0); } }
@keyframes button-sheen { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes title-reflection { 0%, 5% { background-position: 100% 0; } 38%, 100% { background-position: 0% 0; } }
@keyframes armor-reflection {
  0%, 5% { -webkit-mask-position: 100% 0; mask-position: 100% 0; opacity: 0; }
  12% { opacity: .48; }
  34% { opacity: .48; }
  43%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; opacity: 0; }
}

@media (hover: hover) and (pointer: fine) {
  :is(.stat, .feature-card, .event-item):hover { border-color: #32cfff4d; background-color: #0b1c28d9; box-shadow: 0 14px 35px #0003, inset 0 1px #bfefff08; }
  :is(.stat, .feature-card, .event-item):hover::before { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.stat, .feature-card, .event-item):hover:not(.pending) { transform: translateY(-4px); }
}

@media (min-width: 1600px) {
  .hero-inner { min-height: 740px; }
  .hero-copy { max-width: 620px; }
  h1 { font-size: 4.1rem; }
}
@media (max-width: 1200px) {
  .container { width: calc(100% - 80px); }
  .desktop-nav { gap: 24px; }
  .header-inner { gap: 20px; }
  .brand { min-width: 100px; }
  .header-actions { gap: 22px; }
  .header-cta { font-size: .8125rem; gap: 10px; }
  .hero-inner { min-height: 720px; gap: 40px; }
  .launch-panel { gap: 24px; grid-template-columns: 1fr 1.5fr .7fr; }
  .countdown-unit strong { font-size: 2.65rem; }
  .calendar-button > .icon:last-child { display: none; }
  .split-heading { gap: 65px; }
  .features { gap: 18px; }
  .feature-card { padding: 26px; }
  .events-layout { gap: 70px; }
  .community-inner { column-gap: 60px; }
  .community-actions { gap: 16px; }
  .community-actions > .button { font-size: .8125rem; padding-inline: 21px; }
  .community-actions > .button-outline { padding-inline: 0; }
  .ranking-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 40px; }
  .ranking-heading h2 { font-size: 2.7rem; }
}
@media (max-width: 1050px) {
  :root { --header-height: 82px; }
  .desktop-nav { display: none; }
  .menu-toggle { display: inline-grid; }
  .header-inner { min-height: 82px; }
  .header-cta { font-size: .875rem; }
  .hero-brand { width: clamp(220px, 28vw, 290px); }
  h1 { font-size: clamp(2.5rem, 4.7vw, 3.1rem); }
  .hero-shade { background: linear-gradient(90deg, #03080fed, #03080f9c 42%, #03080f0f 88%), linear-gradient(0deg, #03080f, transparent 50%); }
  .launch-panel { grid-template-columns: 1fr 1.2fr; gap: 28px 45px; padding-bottom: 24px; }
  .calendar-button { grid-column: 1/-1; justify-content: flex-start; min-height: 36px; font-size: .8125rem; }
  .calendar-button > .icon:last-child { display: block; }
  .section { padding-block: 88px; }
  .server-section { padding-top: 58px; }
  .server-stats { padding-bottom: 68px; margin-bottom: 66px; gap: 14px; }
  .stat { padding: 20px 16px; }
  .stat strong { font-size: 1.65rem; }
  h2 { font-size: 2.8rem; }
  .split-heading { gap: 45px; }
  .features { gap: 16px; }
  .feature-card { padding: 23px; }
  .feature-card h3 { font-size: 1.3rem; }
  .events-layout { gap: 45px; }
  .event-item { grid-template-columns: 54px minmax(0, 1fr); gap: 18px; padding: 23px; }
  .event-date > span:first-child { font-size: 3.3rem; }
  .community-inner { column-gap: 44px; }
  .community-inner h2 { font-size: 2.8rem; }
  .community-actions { align-items: flex-start; flex-direction: column; gap: 8px; }
  .ranking-layout { grid-template-columns: 1fr; gap: 36px; }
  .ranking-aside { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 44px; padding-top: 0; }
  .ranking-heading { max-width: 610px; }
  .ranking-heading h2 { font-size: 2.8rem; }
  .ranking-heading p { margin-top: 17px; }
  .ranking-join { margin-top: 0; gap: 18px; }
}
@media (max-width: 760px) {
  :root { --header-height: 76px; }
  .container { width: calc(100% - 48px); }
  .header-cta { display: none; }
  .header-inner { min-height: 76px; }
  .brand-logo { width: 68px; height: 62px; }
  .hero-inner { min-height: 700px; gap: 24px; padding-top: 104px; padding-bottom: 76px; }
  .hero-brand { width: clamp(180px, 30vw, 230px); }
  h1 { font-size: clamp(2rem, 4.8vw, 2.6rem); }
  .hero-description { max-width: 420px; }
  .hero-art { --hero-focus: 61% 40%; }
  .hero-bottom { bottom: 18px; }
  .hero-actions { gap: 23px; }
  .launch-panel { grid-template-columns: 1fr; gap: 25px; }
  .launch-date { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  .server-stats { grid-template-columns: 1fr 1fr; gap: 16px; }
  .stat { padding: 24px; }
  .stat strong { font-size: 2.25rem; }
  .split-heading { grid-template-columns: 1fr; gap: 26px; }
  .split-heading > p { max-width: 530px; }
  .features { grid-template-columns: 1fr; gap: 18px; }
  .feature-card { padding: 28px; }
  .feature-top { margin-bottom: 26px; }
  .feature-card h3 { font-size: 1.5rem; }
  .feature-card p { margin-top: 12px; }
  .section-heading { margin-bottom: 42px; }
  .events-layout { grid-template-columns: 1fr; gap: 48px; }
  .events-intro h2, .events-intro > p { max-width: 550px; }
  .event-item { grid-template-columns: 64px minmax(0, 1fr); gap: 24px; padding: 27px; }
  .ranking-aside { grid-template-columns: 1fr; gap: 25px; }
  .ranking-join { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
  .ranking-toolbar { padding-inline: 22px; }
  .ranking-table { min-width: 0; table-layout: fixed; }
  .ranking-table .column-class, .ranking-table .column-guild { display: none; }
  .player-class-mobile { display: block; color: var(--muted); font-size: .75rem; font-weight: 400; margin-top: 5px; }
  .ranking-table :is(th, td):first-child { width: 76px; padding-left: 22px; }
  .ranking-table :is(th, td):last-child { width: 108px; padding-right: 22px; }
  .ranking-table thead .column-position { font-size: 0; }
  .ranking-table thead .column-position::before { content: '#'; font-size: .75rem; }
  .ranking-empty { padding-inline: 22px; }
  .ranking-footer { padding-inline: 22px; }
  .community-inner { grid-template-columns: 1fr; }
  .community-inner > .eyebrow { grid-column: 1; grid-row: 1; margin-bottom: 20px; }
  .community-inner h2 { grid-column: 1; grid-row: 2; font-size: 3.1rem; }
  .community-inner > p { grid-column: 1; grid-row: 3; margin-top: 28px; }
  .community-actions { grid-column: 1; grid-row: 4; flex-direction: row; align-items: center; gap: 28px; }
  .community-note { grid-column: 1; grid-row: 5; }
  .footer-tagline { display: none; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .footer-bottom > p:last-child { text-align: left; max-width: 570px; }
}
@media (max-width: 540px) {
  :root { --header-height: 72px; }
  .header-inner { min-height: 72px; }
  .brand { min-width: 82px; }
  .brand-logo { width: 63px; height: 58px; }
  .header-actions { gap: 13px; }
  .hero-inner { display: block; min-height: 0; padding-top: 320px; padding-bottom: 44px; }
  .hero-copy { width: 100%; }
  .hero-brand { position: absolute; top: 98px; right: 0; width: 180px; margin: 0; }
  .hero-particles > span:nth-child(n+9) { display: none; }
  .hero-art { --hero-focus: 72% top; height: 560px; inset: 0 -110px auto -150px; }
  .hero-shade { background: linear-gradient(0deg, #03080f 7%, #03080fff 35%, #03080fd4 58%, #03080f08 91%), linear-gradient(90deg, #03080f80, #03080f00); }
  .season-label { font-size: .8125rem; margin-bottom: 18px; }
  h1 { font-size: clamp(2rem, 8.4vw, 2.75rem); letter-spacing: -.04em; line-height: 1.1; }
  .hero-description { font-size: 1rem; margin-top: 20px; line-height: 1.8; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 23px; }
  .hero-actions > .button { min-height: 54px; padding-block: 15px; font-size: .875rem; }
  .hero-note { margin-top: 14px; font-size: .75rem; }
  .hero-bottom { display: none; }
  .launch-panel { grid-template-columns: 1fr; padding: 30px 0 22px; gap: 29px; }
  .launch-date { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: .9375rem; }
  .launch-date > span:last-child { font-size: .75rem; }
  .countdown { gap: 8px; width: 100%; }
  .countdown-unit { padding: 19px 5px 15px; }
  .countdown-unit strong { font-size: clamp(1.8rem, 8.2vw, 2.7rem); }
  .countdown-unit > span { margin-top: 8px; font-size: .75rem; }
  .calendar-button { justify-content: flex-start; padding: 0; }
  .beta-status { font-size: .75rem; margin-top: 14px; }
  .section { padding-block: 68px; }
  .server-section { padding-top: 48px; }
  .server-stats { gap: 12px; padding-bottom: 52px; margin-bottom: 55px; }
  .stat { padding: 20px 16px; }
  .stat-top { gap: 8px; }
  .stat-top > .icon { width: 16px; height: 16px; }
  .stat-label { font-size: .8125rem; }
  .stat strong { font-size: clamp(1.4rem, 5.75vw, 1.8rem); margin: 18px 0 9px; }
  .stat-detail { font-size: .75rem; max-width: 150px; }
  h2 { font-size: 2.5rem; line-height: 1.1; letter-spacing: -.045em; margin-top: 18px; }
  .eyebrow { font-size: .8125rem; }
  .split-heading { gap: 25px; }
  .features { gap: 16px; }
  .feature-card { padding: 26px; }
  .feature-card h3 { font-size: 1.35rem; }
  .feature-card p { font-size: 1rem; }
  .feature-number { font-size: .75rem; }
  .events-intro { padding-top: 0; }
  .events-intro > p { margin-top: 22px; }
  .event-item { grid-template-columns: 44px minmax(0, 1fr); gap: 17px; padding: 24px 20px; }
  .event-icon { width: 40px; height: 40px; }
  .event-date > span:first-child { font-size: 3rem; }
  .event-item h3 { font-size: 1.25rem; }
  .event-month, .event-kicker, .coming-soon { font-size: .75rem; }
  .event-time { font-size: .75rem; flex-wrap: wrap; }
  .ranking-layout { gap: 28px; }
  .ranking-heading h2 { font-size: 2.5rem; }
  .ranking-join { flex-wrap: wrap; gap: 17px; }
  .ranking-toolbar { gap: 16px; padding: 18px; min-height: 80px; align-items: flex-start; }
  .ranking-tab { font-size: .875rem; gap: 0; }
  .ranking-mark { display: none; }
  .ranking-sort { font-size: .75rem; }
  .refresh-button { width: 44px; padding: 0; }
  .refresh-button > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .ranking-table tbody :is(th, td), .ranking-table thead th { padding: 15px 10px; }
  .ranking-table :is(th, td):first-child { width: 52px; padding-left: 14px; padding-right: 4px; }
  .ranking-table :is(th, td):last-child { width: 78px; padding-right: 16px; }
  .position-badge { font-size: .9375rem; }
  .ranking-table .column-level strong { font-size: 1rem; }
  .ranking-empty { padding: 28px 20px; min-height: 200px; flex-direction: column; align-items: flex-start; gap: 17px; }
  .ranking-empty-symbol > .icon { width: 30px; height: 30px; }
  .ranking-empty h3 { font-size: 1rem; }
  .ranking-footer { padding: 16px 20px; }
  .ranking-season { display: none; }
  .ranking-disclaimer { font-size: .75rem; }
  .community-section { padding-block: 72px; }
  .community-inner h2 { font-size: 2.6rem; }
  .community-inner > p { margin-top: 25px; }
  .community-actions { gap: 17px; flex-wrap: wrap; }
  .community-actions > .button { font-size: .875rem; padding: 15px 20px; min-height: 54px; }
  .community-actions > .button-outline { padding-inline: 0; }
  .community-note { margin-top: 19px; }
  .footer-top { min-height: 126px; padding-block: 20px; }
  .footer-top .brand-logo { width: 76px; height: 70px; }
  .footer-bottom { padding-block: 22px; font-size: .75rem; }
  .availability-dialog { padding: 43px 26px 28px; border-radius: 8px; }
  .availability-dialog h2 { font-size: 2rem; }
  .availability-dialog > p { font-size: 1rem; }
  .toast { bottom: 16px; right: 16px; max-width: calc(100% - 32px); padding: 17px 20px; }
}
@media (max-width: 360px) {
  .container { width: calc(100% - 36px); }
  .header-actions { gap: 9px; }
  h1 { font-size: 1.85rem; }
  .hero-brand { width: 165px; }
  .hero-inner { padding-top: 306px; }
  .stat { padding-inline: 13px; }
  .stat-label { font-size: .75rem; }
  .stat strong { font-size: 1.4rem; }
  .community-actions { flex-direction: column; align-items: stretch; gap: 8px; }
}
/* Community dock: public Discord data loads only when the panel is opened. */
.discord-widget { position: fixed; right: calc(24px + env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 45; }
.discord-launcher { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 14px 21px; border: 1px solid #53b5db55; border-radius: 28px 28px 8px 28px; background: linear-gradient(135deg, #195d83, #0d3654); color: #ecfaff; box-shadow: 0 10px 30px #0007, inset 0 1px #c1efff17; font-size: .875rem; font-weight: 600; transition: transform .2s, box-shadow .2s, border-color .2s; }
.discord-launcher > .icon { width: 25px; height: 25px; }
.discord-launcher[aria-expanded="true"] { border-color: #75d5f7a6; box-shadow: 0 8px 26px #0007, 0 0 22px #32cfff12; }
.discord-panel { position: absolute; right: 0; bottom: calc(100% + 14px); width: 365px; max-width: calc(100vw - 48px - env(safe-area-inset-right, 0px)); max-height: calc(100dvh - 124px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; border: 1px solid #5ca8c735; border-radius: 12px; background: linear-gradient(150deg, #0a1c2bfa, #040d16fc); color: var(--text); box-shadow: 0 22px 65px #000a, inset 0 1px #caeaff09; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); transform-origin: bottom right; animation: discord-panel-enter .22s ease-out; scrollbar-color: #14527a #07131d; }
.discord-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 22px; border-bottom: 1px solid #5ca8c71c; background: #16324745; }
.discord-panel-kicker { display: inline-flex; align-items: center; gap: 9px; color: #a9d8ed; font-size: .75rem; }
.discord-panel-kicker > .icon { width: 18px; height: 18px; }
.discord-panel-close { color: #93b2c4; }
.discord-panel-close .icon { width: 18px; height: 18px; }
.discord-panel-body { padding: 23px; }
.discord-identity { display: flex; align-items: center; gap: 17px; }
.discord-identity > img { width: 66px; height: auto; flex-shrink: 0; filter: drop-shadow(0 4px 12px #32cfff18); }
.discord-identity > div { min-width: 0; }
.discord-identity-label { display: block; color: var(--gold); font-size: .75rem; letter-spacing: .05em; }
.discord-identity h2 { margin-top: 5px; font: 600 1.125rem/1.35 var(--font-body); letter-spacing: -.02em; overflow-wrap: anywhere; }
#discord-description { margin-top: 20px; color: #9eb4c2; font-size: 1rem; line-height: 1.7; }
.discord-stats { display: grid; grid-template-columns: 1fr 1fr; margin: 22px 0 0; padding: 19px 0; border-block: 1px solid #5ca8c724; }
.discord-stats > div { min-width: 0; }
.discord-stats > div + div { padding-left: 25px; border-left: 1px solid #5ca8c724; }
.discord-stats dt { display: flex; align-items: center; gap: 7px; color: #9cb5c5; font-size: .875rem; }
.discord-stats dd { margin: 6px 0 0; color: #def5ff; font: 600 1.875rem/1.25 var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: -.04em; overflow-wrap: anywhere; }
.discord-presence-dot { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: #607989; }
.discord-widget[data-online-available="true"] .discord-presence-dot { background: var(--cyan); box-shadow: 0 0 9px #32cfff55; }
.discord-data-status { margin-top: 13px; min-height: 38px; color: #849fac; font-size: .75rem; line-height: 1.6; }
.discord-join { width: 100%; justify-content: space-between; min-height: 48px; margin-top: 16px; padding: 12px 16px; font-size: .875rem; }
.discord-join-pending:disabled { justify-content: center; background: #163247; color: #87a4b8; opacity: .75; cursor: default; }
.discord-external-note { display: block; margin-top: 12px; text-align: center; color: #7f99aa; font-size: .75rem; }
body .toast { right: auto; left: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.site-footer { padding-bottom: 64px; }
@media (hover: hover) { .discord-launcher:hover { transform: translateY(-3px); border-color: #8ce2ff99; box-shadow: 0 12px 32px #0008, 0 0 22px #32cfff17; } }
@media (max-width: 540px) {
  .discord-widget { right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .discord-launcher { min-height: 52px; padding: 12px 17px; }
  .discord-panel { max-width: calc(100vw - 32px - env(safe-area-inset-right, 0px)); max-height: calc(100dvh - 108px - env(safe-area-inset-bottom, 0px)); }
  .discord-panel-body { padding: 20px; }
  .discord-stats > div + div { padding-left: 20px; }
  body .toast { left: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body.discord-panel-open .toast { top: calc(var(--header-height) + 14px); bottom: auto; }
}
@keyframes discord-panel-enter { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-ready .reveal.pending { opacity: 1; transform: none; }
  .hero-art img { transform: none; }
  .hero-art::after { display: none; }
  h1 > em { background-image: none; color: var(--gold); -webkit-text-fill-color: currentColor; }
  .hero-particles { display: none; }
}
@media (forced-colors: active) {
  h1 > em { background-image: none; color: CanvasText; -webkit-text-fill-color: currentColor; }
  .hero-art::after { display: none; }
}