@font-face {
  font-family: "Spectral VN";
  src: url("fonts/Spectral-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Spectral VN";
  src: url("fonts/Spectral-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Spectral VN";
  src: url("fonts/Spectral-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #080a19;
  --bg-soft: #11152f;
  --panel: rgba(19, 24, 53, 0.72);
  --panel-strong: #171d3d;
  --line: rgba(190, 203, 255, 0.14);
  --text: #f4f5ff;
  --muted: #aeb5d1;
  --primary: #8f7dff;
  --primary-bright: #b8aaff;
  --cyan: #5de1e6;
  --gold: #ffd887;
  --danger: #ff7e9e;
  --success: #68e0a3;
  --shadow: 0 24px 70px rgba(2, 4, 18, 0.45);
  --radius: 22px;
  --shell: 1180px;
  --font-display: "Spectral VN", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 8%, rgba(78, 79, 186, 0.20), transparent 34rem),
    radial-gradient(circle at 82% 26%, rgba(20, 158, 177, 0.11), transparent 34rem),
    linear-gradient(180deg, #0b0e23 0%, var(--bg) 55%, #090b1b 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
img { max-width: 100%; }
.shell { width: min(calc(100% - 40px), var(--shell)); margin-inline: auto; }
.aurora { position: fixed; z-index: -1; filter: blur(70px); border-radius: 999px; opacity: .2; pointer-events: none; }
.aurora-one { width: 500px; height: 220px; background: #6750ff; left: -180px; top: 20%; transform: rotate(24deg); }
.aurora-two { width: 420px; height: 180px; background: #16d4d8; right: -180px; top: 50%; transform: rotate(-18deg); }

.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(8,10,25,.76); backdrop-filter: blur(20px); }
.nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: max-content; }
.brand-mark {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(213,207,255,.45); border-radius: 13px;
  color: #fff; font-size: 13px; font-weight: 900; letter-spacing: -.04em;
  background: linear-gradient(145deg, rgba(170,153,255,.7), rgba(77,68,162,.45)); box-shadow: inset 0 1px rgba(255,255,255,.35), 0 10px 30px rgba(111,91,247,.2);
}
.brand strong, .brand small { display: block; line-height: 1.15; }
.brand strong { font-family: var(--font-display); font-size: 17px; letter-spacing: .02em; }
.brand small { margin-top: 4px; color: var(--muted); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; justify-content: flex-end; gap: 28px; color: #d8dcf0; font-size: 14px; font-weight: 650; }
.nav-links > a:not(.button), .link-button { transition: color .2s ease; }
.nav-links > a:not(.button):hover, .link-button:hover { color: var(--cyan); }
.nav-form { margin: 0; }
.link-button { border: 0; background: none; padding: 0; cursor: pointer; }
.nav-toggle { display: none; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 8px 13px; cursor: pointer; }

.button {
  display: inline-flex; min-height: 47px; align-items: center; justify-content: center; gap: 9px; padding: 11px 23px; border: 1px solid rgba(204,197,255,.48); border-radius: 13px;
  color: #fff; font-weight: 800; letter-spacing: .01em; cursor: pointer;
  background: linear-gradient(135deg, #8978f7, #5f55bd); box-shadow: 0 12px 34px rgba(94,75,206,.3), inset 0 1px rgba(255,255,255,.28);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 17px 40px rgba(94,75,206,.42), inset 0 1px rgba(255,255,255,.3); }
.button-small { min-height: 38px; padding: 7px 15px; border-radius: 11px; font-size: 13px; }
.button-wide { width: 100%; }
.button-ghost { border-color: var(--line); color: #e9ebfb; background: rgba(255,255,255,.04); box-shadow: none; }
.button-secondary { background: rgba(143,125,255,.14); border-color: rgba(164,150,255,.28); box-shadow: none; }
.text-link { color: var(--primary-bright); font-weight: 750; transition: color .2s; }
.text-link:hover { color: var(--cyan); }

.hero { min-height: 680px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 40px; padding-block: 80px 55px; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #aeb9ef; font-size: 11px; font-weight: 850; letter-spacing: .19em; text-transform: uppercase; }
.status-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: #8990a9; box-shadow: 0 0 0 4px rgba(137,144,169,.1); }
.status-dot.online { background: var(--success); box-shadow: 0 0 14px rgba(104,224,163,.8); }
.status-dot.offline { background: var(--danger); box-shadow: 0 0 14px rgba(255,126,158,.45); }
.hero h1, .page-hero h1, .article h1, .error-page h1 {
  margin: 18px 0 20px; font-family: var(--font-display); font-weight: 500; letter-spacing: -.025em; line-height: .98;
}
.hero h1 { font-size: clamp(55px, 7vw, 90px); }
.hero h1 span, .page-hero h1 span { color: transparent; background: linear-gradient(100deg, #c2b7ff, #71e5e8 70%); background-clip: text; }
.hero-copy > p { max-width: 610px; margin: 0; color: var(--muted); font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; }
.hero-metrics { display: flex; gap: 42px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.hero-metrics div { display: grid; }
.hero-metrics strong { font-family: var(--font-display); font-size: 25px; color: #f2efff; }
.hero-metrics span { color: var(--muted); font-size: 12px; }

.hero-art { position: relative; min-height: 530px; display: grid; place-items: center; perspective: 1000px; }
.sigil { position: relative; width: min(390px, 80vw); aspect-ratio: 1; border: 1px solid rgba(168,151,255,.18); border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 90px rgba(83,68,174,.2), 0 0 90px rgba(73,58,178,.14); animation: float 7s ease-in-out infinite; }
.sigil::before, .sigil::after, .sigil span { content: ""; position: absolute; inset: 9%; border: 1px solid rgba(104,226,231,.26); transform: rotate(45deg); border-radius: 28px; }
.sigil::after { inset: 23%; transform: rotate(22.5deg); border-color: rgba(255,215,135,.32); }
.sigil span { inset: 31%; border-radius: 50%; transform: none; box-shadow: 0 0 80px rgba(93,225,230,.25); }
.sigil b { position: relative; z-index: 2; font-size: 104px; font-weight: 400; color: #d9d1ff; text-shadow: 0 0 42px rgba(167,148,255,.85), 0 0 90px rgba(73,218,226,.4); }
.orbit { position: absolute; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; transform: rotateX(68deg); }
.orbit-one { width: 520px; height: 340px; animation: orbit 18s linear infinite; }
.orbit-two { width: 450px; height: 280px; transform: rotateX(70deg) rotateZ(65deg); animation: orbitReverse 22s linear infinite; }
.crystal { position: absolute; width: 14px; height: 36px; border-radius: 50% 50% 40% 40%; background: linear-gradient(#fff, #7ce4ec 40%, #7664d1); box-shadow: 0 0 25px rgba(106,224,233,.7); clip-path: polygon(50% 0,100% 40%,65% 100%,35% 100%,0 40%); }
.crystal-one { top: 16%; left: 7%; }
.crystal-two { bottom: 14%; right: 9%; transform: scale(.72) rotate(25deg); }
.crystal-three { top: 35%; right: -1%; transform: scale(.5) rotate(-12deg); }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-16px) rotate(2deg); } }
@keyframes orbit { to { transform: rotateX(68deg) rotateZ(360deg); } }
@keyframes orbitReverse { to { transform: rotateX(70deg) rotateZ(-295deg); } }

.section { padding-block: 68px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 27px; }
.section-heading h2, .panel h2, .form-card h2 { margin: 5px 0 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(28px,4vw,42px); letter-spacing: -.025em; line-height: 1.15; }
.glass-card { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(25,31,65,.76), rgba(13,17,40,.7)); backdrop-filter: blur(18px); box-shadow: var(--shadow); }
.live-pill, .count-pill { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; color: #ccd2ec; background: rgba(255,255,255,.035); font-size: 12px; font-weight: 750; white-space: nowrap; }
.world-grid { display: grid; gap: 14px; }
.world-card { border-radius: 18px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 22px; }
.world-icon { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(136,218,231,.3); border-radius: 17px; color: var(--cyan); background: rgba(71,194,206,.09); font-size: 11px; font-weight: 900; }
.world-card h3 { margin: 0; font-size: 17px; }
.world-card p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.world-pop { display: grid; text-align: right; }
.world-pop strong { font-family: var(--font-display); font-size: 22px; }
.world-pop small { color: var(--muted); }

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.news-card { min-height: 270px; padding: 27px; border-radius: var(--radius); display: flex; flex-direction: column; transition: transform .25s ease, border-color .25s ease; }
.news-card:hover { transform: translateY(-5px); border-color: rgba(159,147,255,.34); }
.news-card-top { display: flex; justify-content: space-between; gap: 15px; color: #9da7d0; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.news-card-top span { color: var(--cyan); font-weight: 800; }
.news-card h2, .news-card h3 { margin: 22px 0 10px; font-family: var(--font-display); font-size: 23px; line-height: 1.2; font-weight: 500; }
.news-card p { margin: 0 0 22px; color: var(--muted); font-size: 14px; flex: 1; }
.callout { margin-block: 70px; padding: 48px; border: 1px solid rgba(166,151,255,.24); border-radius: 28px; display: flex; align-items: center; justify-content: space-between; gap: 30px; background: radial-gradient(circle at 80% 40%, rgba(65,206,210,.14), transparent 28rem), linear-gradient(135deg, rgba(101,82,210,.19), rgba(19,24,53,.75)); box-shadow: var(--shadow); }
.callout h2 { margin: 6px 0; font-family: var(--font-display); font-size: 40px; font-weight: 500; }
.callout p { margin: 0; color: var(--muted); }

.flash-stack { position: fixed; z-index: 60; top: 92px; left: 50%; transform: translateX(-50%); display: grid; gap: 10px; pointer-events: none; }
.flash { width: min(100%, 720px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 17px; border: 1px solid var(--line); border-radius: 13px; background: rgba(19,24,53,.95); box-shadow: var(--shadow); color: #e9ebfa; font-size: 14px; pointer-events: auto; }
.flash-success { border-color: rgba(104,224,163,.36); }
.flash-error { border-color: rgba(255,126,158,.4); }
.flash button { border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 20px; }

.auth-shell { min-height: calc(100vh - 76px); padding-block: 75px; display: grid; grid-template-columns: 1fr 520px; align-items: center; gap: 90px; }
.auth-story { position: relative; padding: 45px 0; }
.auth-story h1 { margin: 15px 0 24px; max-width: 630px; font-family: var(--font-display); font-size: clamp(48px,6vw,76px); font-weight: 500; line-height: 1; letter-spacing: -.025em; }
.auth-story p { color: var(--muted); font-size: 17px; max-width: 540px; }
.story-rune { margin: 50px 0 0 40px; color: #c9beff; font-size: 110px; text-shadow: 0 0 50px rgba(141,121,255,.7); animation: float 6s ease-in-out infinite; }
.form-card { border-radius: 26px; padding: 38px; }
.form-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 29px; }
.form-heading h2 { font-size: 31px; }
.form-heading p, .panel > p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
form { margin: 0; }
label { display: grid; gap: 7px; margin-bottom: 17px; color: #dce0f3; font-size: 13px; font-weight: 720; }
label small { color: #8892b8; font-size: 11px; font-weight: 500; }
input, textarea, select { width: 100%; border: 1px solid rgba(174,185,231,.17); border-radius: 12px; outline: none; color: var(--text); background: rgba(5,8,23,.56); padding: 12px 14px; transition: border .2s, box-shadow .2s, background .2s; }
input:focus, textarea:focus, select:focus { border-color: rgba(120,220,229,.58); box-shadow: 0 0 0 4px rgba(93,225,230,.08); background: rgba(8,11,29,.82); }
textarea { resize: vertical; line-height: 1.6; }
select { appearance: none; }
.check-label { grid-template-columns: 18px 1fr; align-items: start; gap: 10px; color: var(--muted); font-weight: 500; line-height: 1.45; }
.check-label input { width: 17px; height: 17px; padding: 0; accent-color: var(--primary); }
.form-foot { text-align: center; margin: 22px 0 0; color: var(--muted); font-size: 13px; }
.form-foot a { color: var(--primary-bright); font-weight: 800; }

.page-hero { padding-block: 70px 40px; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.page-hero.compact { min-height: 260px; }
.page-hero h1 { font-size: clamp(44px,6vw,68px); }
.page-hero p { max-width: 650px; margin: 0; color: var(--muted); }
.account-badge { display: grid; min-width: 150px; padding: 17px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.account-badge span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.account-badge strong { font-family: var(--font-display); font-size: 24px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1fr) 355px; gap: 20px; padding-bottom: 90px; }
.dashboard-main, .dashboard-side { display: grid; align-content: start; gap: 20px; }
.panel { border-radius: var(--radius); padding: 27px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 23px; }
.panel-heading h2, .panel h2 { font-size: 27px; }
.detail-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.detail-grid > div { padding: 16px; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: rgba(255,255,255,.025); display: grid; gap: 3px; }
.detail-grid span, .character-row > div > span { color: var(--muted); font-size: 11px; }
.detail-grid strong { font-size: 14px; overflow-wrap: anywhere; }
.text-success { color: var(--success); }
.character-list { display: grid; gap: 10px; }
.character-row { display: grid; grid-template-columns: auto 1fr 90px 120px; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(255,255,255,.02); }
.avatar-rune { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: var(--cyan); font-family: var(--font-display); font-size: 20px; background: linear-gradient(145deg, rgba(83,220,226,.16), rgba(122,103,225,.15)); }
.character-name { display: grid; }
.empty-state { grid-column: 1/-1; padding: 45px 25px; border-radius: var(--radius); text-align: center; color: var(--muted); }
.empty-state > span { display: block; color: var(--primary-bright); font-size: 42px; }
.empty-state h3 { color: var(--text); margin: 8px 0 4px; }
.empty-state p { margin: 0; }

.article { max-width: 890px; padding-block: 80px 110px; }
.back-link { color: var(--muted); font-size: 13px; }
.article header { margin: 45px 0 32px; }
.article h1 { font-size: clamp(43px,7vw,72px); }
.article header p { color: #c2c8df; font-size: 19px; }
.article-body { padding: 42px; border-radius: var(--radius); white-space: pre-line; color: #d8dcef; line-height: 1.9; }
.article footer { margin-top: 22px; color: var(--muted); font-size: 13px; }
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.pagination a { min-width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }
.pagination a.active { color: white; border-color: rgba(157,142,255,.5); background: rgba(143,125,255,.18); }

.admin-shell { display: grid; gap: 20px; padding-bottom: 90px; }
.admin-shell.narrow { max-width: 940px; }
.admin-nav { display: flex; gap: 7px; padding: 6px; border: 1px solid var(--line); border-radius: 15px; background: rgba(11,14,33,.66); overflow-x: auto; }
.admin-nav a { padding: 9px 16px; border-radius: 10px; color: var(--muted); font-size: 13px; font-weight: 750; white-space: nowrap; }
.admin-nav a.active { color: #fff; background: rgba(143,125,255,.19); box-shadow: inset 0 0 0 1px rgba(154,143,255,.18); }
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.stat-card { display: grid; padding: 22px; border-radius: 18px; }
.stat-card span { color: var(--muted); font-size: 12px; }
.stat-card strong { margin: 9px 0 2px; font-family: var(--font-display); font-size: 36px; font-weight: 500; }
.stat-card small { color: #8790b2; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { color: #929bbb; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; text-align: left; }
th, td { padding: 14px 12px; border-bottom: 1px solid rgba(255,255,255,.07); vertical-align: middle; }
td > strong, td > small { display: block; }
td > small { color: var(--muted); }
.tag { display: inline-flex; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; color: #cbd0e6; background: rgba(255,255,255,.035); font-size: 10px; text-transform: uppercase; }
.tag-active, .tag-published { color: var(--success); border-color: rgba(104,224,163,.25); }
.tag-suspended, .tag-archived { color: var(--danger); border-color: rgba(255,126,158,.26); }
.tag-provisioning, .tag-draft { color: var(--gold); border-color: rgba(255,216,135,.25); }
.table-actions { display: flex; align-items: center; gap: 7px; }
.table-actions form { display: inline-flex; }
.mini-button { display: inline-flex; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.035); color: #dce0f2; cursor: pointer; white-space: nowrap; font-size: 11px; }
.mini-button.danger { color: #ffadc0; }
.muted { color: var(--muted); font-size: 11px; }
.search-form { display: flex; align-items: center; gap: 8px; }
.search-form input { width: 260px; padding-block: 8px; }
.editor-form { display: grid; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.align-end { align-self: end; margin-bottom: 24px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; }

.error-page { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-block: 80px; }
.error-rune { color: rgba(183,170,255,.21); font-family: var(--font-display); font-size: 140px; line-height: 1; text-shadow: 0 0 50px rgba(104,78,225,.2); }
.error-page h1 { font-size: 48px; margin-block: 8px; }
.error-page p { max-width: 560px; color: var(--muted); margin: 0 0 25px; }

.site-footer { margin-top: 40px; border-top: 1px solid var(--line); background: rgba(5,7,18,.65); }
.footer-grid { min-height: 220px; display: grid; grid-template-columns: 1.3fr .7fr 1fr; align-items: center; gap: 40px; }
.footer-brand { margin-bottom: 12px; }
.footer-grid p { max-width: 440px; color: var(--muted); font-size: 13px; }
.footer-links { display: grid; gap: 8px; color: #d0d5e9; font-size: 13px; }
.fine-print { border-left: 1px solid var(--line); padding-left: 30px; }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 100px; }
  .hero-copy > p { margin-inline: auto; }
  .hero-actions, .hero-metrics { justify-content: center; }
  .hero-art { min-height: 420px; }
  .auth-shell { grid-template-columns: 1fr 500px; gap: 35px; }
  .auth-story h1 { font-size: 52px; }
  .news-grid { grid-template-columns: repeat(2,1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-side { grid-template-columns: repeat(2,1fr); }
  .stat-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; padding-block: 45px; }
  .fine-print { grid-column: 1/-1; border-left: 0; padding-left: 0; }
}

@media (max-width: 760px) {
  .shell { width: min(calc(100% - 26px), var(--shell)); }
  .nav { min-height: 68px; }
  .nav-toggle { display: inline-flex; }
  .nav-links { display: none; position: absolute; inset: 68px 13px auto; flex-direction: column; align-items: stretch; gap: 0; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: rgba(11,14,33,.98); box-shadow: var(--shadow); }
  .nav-links.open { display: flex; }
  .nav-links > a, .link-button { display: block; width: 100%; padding: 11px 12px; text-align: left; }
  .nav-links .button { margin-top: 7px; text-align: center; }
  .hero { min-height: auto; padding-block: 75px 25px; }
  .hero h1 { font-size: 52px; }
  .hero-copy > p { font-size: 16px; }
  .hero-metrics { gap: 20px; justify-content: space-between; }
  .hero-art { min-height: 320px; }
  .sigil { width: 270px; }
  .sigil b { font-size: 75px; }
  .orbit-one { width: 330px; height: 230px; }
  .orbit-two { width: 300px; height: 190px; }
  .section { padding-block: 45px; }
  .section-heading, .page-hero { align-items: flex-start; flex-direction: column; }
  .news-grid { grid-template-columns: 1fr; }
  .callout { margin-block: 45px; padding: 31px 23px; flex-direction: column; align-items: flex-start; }
  .callout h2 { font-size: 32px; }
  .auth-shell { grid-template-columns: 1fr; padding-block: 35px 70px; }
  .auth-story { text-align: center; padding: 25px 0 5px; }
  .auth-story h1 { font-size: 46px; margin-inline: auto; }
  .story-rune { display: none; }
  .form-card { padding: 26px 20px; }
  .page-hero.compact { min-height: auto; padding-block: 55px 30px; }
  .page-hero h1 { font-size: 44px; }
  .detail-grid { grid-template-columns: repeat(2,1fr); }
  .character-row { grid-template-columns: auto 1fr; }
  .character-row > div:nth-child(n+3) { padding-left: 62px; }
  .dashboard-side { grid-template-columns: 1fr; }
  .panel { padding: 21px 16px; }
  .panel-heading { align-items: flex-start; }
  .article { padding-block: 50px 80px; }
  .article-body { padding: 25px 20px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stack-mobile { align-items: stretch; flex-direction: column; }
  .search-form input { width: 100%; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 430px) {
  .brand strong { font-size: 15px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-metrics strong { font-size: 20px; }
  .world-card { grid-template-columns: auto 1fr; }
  .world-pop { grid-column: 2; text-align: left; }
  .detail-grid, .stat-grid { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Aura Kingdom landing page */
.home-page {
  color-scheme: light;
  color: #183448;
  background: #f4f8f6;
}
.home-page::before, .home-page .aurora { display: none; }
.home-page main { overflow: hidden; }
.home-page .site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  border-bottom-color: rgba(255,255,255,.28);
  color: #fff;
  background: linear-gradient(180deg, rgba(9,40,65,.52), rgba(9,40,65,.08));
  backdrop-filter: blur(5px);
}
.home-page .brand small, .home-page .nav-links { color: rgba(255,255,255,.88); }
.home-page .nav-links > a:not(.button), .home-page .link-button { text-shadow: 0 1px 12px rgba(5,35,59,.5); }
.home-page .nav-links > a:not(.button):hover, .home-page .link-button:hover { color: #fff1b2; }
.home-page .brand-mark { border-color: rgba(255,255,255,.58); background: linear-gradient(145deg, rgba(66,175,195,.85), rgba(35,94,146,.7)); }
.home-page .site-footer { margin-top: 0; color: #f5f8ff; background: #0d2638; border-color: rgba(255,255,255,.1); }
.home-page .site-footer .brand small, .home-page .site-footer p { color: #aebfca; }

.ak-hero {
  position: relative;
  min-height: max(760px, 100svh);
  display: grid;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  background: #8ed5ef;
}
.ak-hero-sky {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(86,177,221,.02) 25%, rgba(220,248,255,.12) 48%, rgba(238,251,255,.82) 100%),
    url("images/ak-hero-v15.jpg");
  background-position: center center;
  background-size: cover;
  transform: scale(1.015);
  animation: heroBreath 18s ease-in-out infinite alternate;
}
.ak-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 81% 37%, rgba(255,255,255,.72), transparent 24%),
    linear-gradient(180deg, rgba(12,70,114,.16), transparent 24%, transparent 70%, rgba(214,243,247,.52));
}
.ak-hero::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -120px;
  left: -8%;
  height: 220px;
  background: rgba(247,252,249,.92);
  filter: blur(28px);
  border-radius: 50%;
}
@keyframes heroBreath { to { transform: scale(1.045) translate3d(-.5%, -.35%, 0); } }
.ak-hero-content { display: flex; align-items: center; min-height: inherit; padding-top: 95px; padding-bottom: 80px; }
.ak-hero-lockup { width: min(610px, 51%); margin-left: auto; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.ak-game-logo { width: min(480px, 92%); max-height: 285px; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(16,78,106,.2)); }
.ak-kicker, .ak-overline {
  margin: 3px 0 13px;
  color: #21778d;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.ak-hero h1 {
  margin: 0;
  color: #173e5b;
  font-family: var(--font-display);
  font-size: clamp(36px, 4.1vw, 62px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.02;
}
.ak-hero-lead { max-width: 540px; margin: 20px auto 0; color: #3d6577; font-size: 16px; }
.ak-hero-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 31px; }
.ak-play-button {
  position: relative;
  min-width: 205px;
  min-height: 66px;
  display: grid;
  place-content: center;
  padding: 11px 31px;
  border: 1px solid #f6e5a6;
  border-radius: 2px 24px;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #e7b94d, #b77b25);
  box-shadow: 0 12px 30px rgba(141,96,29,.28), inset 0 0 0 3px rgba(255,255,255,.18);
  transition: transform .2s, box-shadow .2s;
}
.ak-play-button::before, .ak-play-button::after { content: "✦"; position: absolute; top: 50%; color: #fff1be; transform: translateY(-50%); font-size: 10px; }
.ak-play-button::before { left: 13px; }
.ak-play-button::after { right: 13px; }
.ak-play-button:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(141,96,29,.36), inset 0 0 0 3px rgba(255,255,255,.2); }
.ak-play-button span, .ak-play-button small { display: block; line-height: 1.2; }
.ak-play-button span { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: .01em; }
.ak-play-button small { margin-top: 4px; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.ak-download-link { display: flex; align-items: center; gap: 12px; color: #25536b; text-align: left; }
.ak-download-link > i { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(32,102,126,.25); border-radius: 50%; font-style: normal; background: rgba(255,255,255,.52); box-shadow: 0 8px 22px rgba(33,102,126,.12); }
.ak-download-link strong, .ak-download-link small { display: block; line-height: 1.3; }
.ak-download-link strong { font-size: 13px; }
.ak-download-link small { color: #648496; font-size: 10px; }
.ak-scroll-cue { position: absolute; z-index: 3; bottom: 39px; left: 50%; display: grid; justify-items: center; gap: 7px; color: #225c72; transform: translateX(-50%); }
.ak-scroll-cue span { font-size: 8px; font-weight: 900; letter-spacing: .25em; }
.ak-scroll-cue i { width: 1px; height: 35px; background: linear-gradient(#2b8198, transparent); animation: scrollCue 1.8s ease-in-out infinite; }
@keyframes scrollCue { 50% { transform: scaleY(.45); transform-origin: top; opacity: .45; } }

.realm-strip { position: relative; z-index: 5; color: #edf8ff; background: linear-gradient(100deg, #0d4967, #167a8c 55%, #0f536d); box-shadow: 0 15px 50px rgba(15,78,104,.22); }
.realm-strip-inner { min-height: 104px; display: grid; grid-template-columns: 1.5fr repeat(4,1fr); align-items: center; }
.realm-strip-inner > div { min-height: 46px; display: grid; align-content: center; padding: 0 27px; border-left: 1px solid rgba(255,255,255,.17); }
.realm-strip-inner > div:first-child { border-left: 0; padding-left: 0; }
.realm-strip-inner span, .realm-strip-inner strong { display: block; }
.realm-strip-inner span { color: rgba(231,250,255,.68); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.realm-strip-inner strong { margin-top: 2px; font-family: var(--font-display); font-size: 19px; font-weight: 500; }
.realm-state { position: relative; padding-left: 24px !important; }
.realm-state .status-dot { position: absolute; top: 19px; left: 0; }

.ak-section { padding-block: 110px; }
.ak-section-title { position: relative; margin-bottom: 48px; text-align: center; }
.ak-section-title::after { content: "✦"; display: block; margin-top: 18px; color: #c2953d; font-size: 14px; }
.ak-section-title > span { color: #2e899e; font-size: 9px; font-weight: 900; letter-spacing: .25em; text-transform: uppercase; }
.ak-section-title h2 { margin: 4px 0 0; color: #1a455e; font-family: var(--font-display); font-size: clamp(52px,7vw,82px); font-weight: 500; letter-spacing: -.025em; line-height: .95; text-transform: uppercase; }
.ak-section-title p { margin: 12px 0 0; color: #7b919a; font-size: 13px; }
.ak-section-title.light > span { color: #b9edf4; }
.ak-section-title.light h2 { color: #fff; text-shadow: 0 4px 30px rgba(0,32,54,.28); }
.ak-section-title.light p { color: rgba(255,255,255,.75); }
.ak-section-title.left { margin-bottom: 36px; text-align: left; }
.ak-section-title.left::after { margin-left: 0; }

.ak-news-section { position: relative; background: #f4f8f6; }
.ak-news-section::before { content: "AZURIA"; position: absolute; top: 45px; left: 2%; color: rgba(36,110,132,.035); font-family: var(--font-display); font-size: 15vw; line-height: 1; pointer-events: none; }
.ak-news-layout { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(390px,.92fr); min-height: 465px; border: 1px solid #d5e2df; background: #fff; box-shadow: 0 25px 60px rgba(41,85,94,.1); }
.ak-featured-news { position: relative; min-height: 465px; display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: linear-gradient(0deg, rgba(9,35,53,.92), rgba(11,61,87,.06) 75%), url("images/azuria-city-v15.jpg") center/cover; }
.ak-featured-news::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(27,111,132,.15), transparent); transition: background .25s; }
.ak-featured-news:hover::before { background: linear-gradient(120deg, rgba(237,191,80,.13), transparent); }
.ak-featured-news > div { position: relative; z-index: 1; padding: 38px 42px; }
.ak-featured-news time { color: #c3dce4; font-size: 10px; letter-spacing: .11em; }
.ak-featured-news h3 { max-width: 610px; margin: 9px 0; font-family: var(--font-display); font-size: clamp(27px,3vw,38px); font-weight: 500; line-height: 1.12; }
.ak-featured-news p { max-width: 580px; margin: 0 0 20px; color: rgba(239,248,251,.78); font-size: 13px; }
.ak-featured-news strong { color: #f2ce73; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.ak-news-badge { position: absolute; z-index: 2; top: 27px; left: 27px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.45); color: #fff; background: rgba(16,83,105,.7); font-size: 8px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; backdrop-filter: blur(8px); }
.ak-news-list { display: flex; flex-direction: column; padding: 29px 35px 24px; }
.ak-news-tabs { display: flex; gap: 27px; padding-bottom: 15px; border-bottom: 1px solid #dfe8e6; color: #a6b3b6; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.ak-news-tabs .active { color: #227c92; }
.ak-news-list > a:not(.ak-all-news) { position: relative; min-height: 82px; display: grid; grid-template-columns: 88px 84px 1fr 15px; align-items: center; gap: 10px; border-bottom: 1px solid #e5ecea; transition: padding-left .2s; }
.ak-news-list > a:not(.ak-all-news):hover { padding-left: 7px; }
.ak-news-list time { color: #9babaf; font-size: 10px; }
.ak-news-list > a > span { color: #30879a; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.ak-news-list h3 { margin: 0; color: #294757; font-size: 13px; font-weight: 700; line-height: 1.4; }
.ak-news-list > a > i { color: #c59a44; font-size: 22px; font-style: normal; }
.ak-all-news { align-self: flex-end; margin-top: auto; padding-top: 20px; color: #277d91; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.ak-news-empty { flex: 1; display: grid; place-content: center; justify-items: center; color: #789199; text-align: center; }
.ak-news-empty span { color: #c29948; font-size: 26px; }
.ak-featured-empty { min-height: 420px; }

.ak-class-showcase { position: relative; min-height: 830px; display: grid; align-items: center; overflow: hidden; color: #fff; background: #14546d url("images/azuria-valley-v15.jpg") center/cover; }
.ak-class-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,42,61,.9) 0%, rgba(8,62,79,.62) 41%, rgba(6,59,75,.12) 75%), linear-gradient(0deg, rgba(4,37,55,.75), transparent 35%, rgba(10,56,74,.15)); }
.ak-showcase-inner { position: relative; z-index: 1; min-height: 830px; display: grid; grid-template-rows: auto 1fr auto; align-content: center; padding-block: 82px 60px; }
.ak-showcase-inner .ak-section-title { justify-self: center; }
.ak-class-copy { width: min(520px,50%); align-self: center; padding: 10px 0 52px 65px; border-left: 1px solid rgba(255,255,255,.35); }
.ak-class-number { display: block; color: #e8c766; font-family: var(--font-display); font-size: 62px; line-height: 1; }
.ak-class-copy .ak-overline { margin-top: 18px; color: #9bdbe4; }
.ak-class-copy h3 { margin: 0 0 14px; font-family: var(--font-display); font-size: clamp(44px,5vw,70px); font-weight: 500; line-height: 1; }
.ak-class-copy > p:not(.ak-overline) { max-width: 490px; color: rgba(244,251,252,.78); font-size: 14px; }
.ak-class-copy > a { display: inline-block; margin-top: 14px; color: #f0cf70; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.ak-class-picker { display: grid; grid-template-columns: repeat(6,1fr); border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); }
.ak-class-picker button { min-height: 98px; display: grid; place-content: center; justify-items: center; gap: 7px; border: 0; border-left: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.64); background: rgba(7,43,60,.35); cursor: pointer; transition: color .2s, background .2s; }
.ak-class-picker button:first-child { border-left: 0; }
.ak-class-picker button i { font-size: 23px; font-style: normal; }
.ak-class-picker button span { font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.ak-class-picker button:hover, .ak-class-picker button.active { color: #ffe38d; background: rgba(7,48,67,.65); }

.ak-eidolon-section { background: #edf5f2; }
.ak-eidolon-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(380px,.85fr); align-items: center; gap: 76px; }
.ak-eidolon-visual { position: relative; padding: 22px 0 0 22px; }
.ak-eidolon-visual::before { content: ""; position: absolute; top: 0; left: 0; width: 72%; height: 73%; border: 1px solid #c3a057; }
.ak-eidolon-visual::after { content: ""; position: absolute; right: -26px; bottom: -26px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(73,188,207,.28), transparent 67%); }
.ak-eidolon-visual img { position: relative; z-index: 1; display: block; aspect-ratio: 16/9; object-fit: cover; object-position: center; box-shadow: 0 25px 55px rgba(24,67,78,.18); }
.ak-eidolon-visual > span { position: absolute; z-index: 2; right: -10px; bottom: 22px; padding: 12px 18px; color: #fff; background: #19798d; font-family: var(--font-display); font-size: 15px; letter-spacing: .08em; }
.ak-eidolon-copy h3 { margin: 0 0 17px; color: #244c60; font-family: var(--font-display); font-size: clamp(36px,4.5vw,55px); font-weight: 500; line-height: 1.05; }
.ak-eidolon-copy > p:not(.ak-overline) { color: #667f89; font-size: 14px; }
.ak-eidolon-points { display: flex; gap: 28px; margin: 31px 0; }
.ak-eidolon-points span { display: grid; color: #416775; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.ak-eidolon-points i { color: #c39a44; font-family: var(--font-display); font-size: 24px; font-style: normal; font-weight: 500; }
.ak-gold-button { border-color: #e4c46e; border-radius: 1px 18px; background: linear-gradient(135deg,#d6aa49,#ad7627); box-shadow: 0 12px 25px rgba(151,105,39,.22); }

.ak-feature-section { background: #fff; }
.ak-feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.ak-feature-card { position: relative; min-height: 475px; display: flex; align-items: flex-end; overflow: hidden; color: #fff; background-position: center; background-size: cover; box-shadow: 0 20px 45px rgba(22,60,72,.14); }
.ak-feature-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,35,53,.92), transparent 72%); transition: background .3s; }
.ak-feature-card:hover::before { background: linear-gradient(0deg, rgba(8,55,73,.95), rgba(20,110,126,.04) 77%); }
.ak-feature-card.city { background-image: url("images/azuria-city-v15.jpg"); }
.ak-feature-card.valley { background-image: url("images/azuria-valley-v15.jpg"); }
.ak-feature-card.dragon { background-image: url("images/eidolon-dragon-v15.jpg"); }
.ak-feature-card > div { position: relative; z-index: 1; padding: 29px; }
.ak-feature-card span { color: #f0cc6d; font-family: var(--font-display); font-size: 29px; }
.ak-feature-card h3 { margin: 4px 0 7px; font-family: var(--font-display); font-size: 25px; font-weight: 500; }
.ak-feature-card p { margin: 0; color: rgba(239,248,251,.75); font-size: 12px; }

.ak-final-cta { position: relative; min-height: 540px; display: grid; place-items: center; overflow: hidden; color: #fff; text-align: center; background: linear-gradient(rgba(8,53,75,.79), rgba(6,38,57,.9)), url("images/azuria-valley-v15.jpg") center/cover; }
.ak-final-cta::before { content: ""; position: absolute; inset: 25px; border: 1px solid rgba(255,255,255,.22); pointer-events: none; }
.ak-final-cta .shell { position: relative; z-index: 1; padding-block: 75px; }
.ak-final-cta img { width: 270px; max-height: 160px; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(0,0,0,.22)); }
.ak-final-cta .shell > span { display: block; color: #f0d37d; font-size: 9px; font-weight: 900; letter-spacing: .24em; text-transform: uppercase; }
.ak-final-cta h2 { margin: 9px 0; font-family: var(--font-display); font-size: clamp(39px,5vw,62px); font-weight: 500; }
.ak-final-cta p { margin: 0 auto 28px; color: rgba(236,247,250,.74); }
.ak-final-cta .shell > div { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 13px; }
.ak-final-cta .button-ghost { min-height: 66px; border-color: rgba(255,255,255,.35); border-radius: 2px 20px; background: rgba(255,255,255,.08); }

@media (max-width: 1050px) {
  .home-page .nav-links { gap: 17px; }
  .ak-hero-lockup { width: 55%; }
  .realm-strip-inner { grid-template-columns: 1.4fr repeat(3,1fr); }
  .realm-name { display: none !important; }
  .ak-news-layout { grid-template-columns: 1fr; }
  .ak-featured-news { min-height: 430px; }
  .ak-news-list { min-height: 400px; }
  .ak-eidolon-grid { grid-template-columns: 1fr; gap: 60px; }
  .ak-eidolon-copy { max-width: 700px; }
  .ak-feature-card { min-height: 410px; }
}

@media (max-width: 760px) {
  .home-page .site-header { background: rgba(8,48,70,.78); backdrop-filter: blur(13px); }
  .home-page .nav-links { color: #e9f6f8; background: rgba(8,48,70,.98); }
  .ak-hero { min-height: 790px; align-items: end; }
  .ak-hero-sky { background-image: linear-gradient(0deg, rgba(232,249,251,.96) 0%, rgba(225,247,251,.7) 39%, rgba(183,232,247,.05) 74%), url("images/ak-hero-v15.jpg"); background-position: 31% center; }
  .ak-hero::before { background: linear-gradient(180deg, transparent 38%, rgba(229,248,251,.8) 74%); }
  .ak-hero-content { align-items: end; padding-top: 360px; padding-bottom: 82px; }
  .ak-hero-lockup { width: 100%; }
  .ak-game-logo { width: 310px; max-height: 180px; }
  .ak-hero h1 { font-size: 38px; }
  .ak-hero-lead { font-size: 14px; }
  .ak-scroll-cue { display: none; }
  .realm-strip-inner { min-height: 88px; grid-template-columns: 1.6fr 1fr 1fr; }
  .realm-strip-inner > div { padding: 0 12px; }
  .realm-strip-inner > div:nth-child(4), .realm-name { display: none; }
  .realm-strip-inner strong { font-size: 15px; }
  .ak-section { padding-block: 75px; }
  .ak-section-title { margin-bottom: 35px; }
  .ak-section-title h2 { font-size: 52px; }
  .ak-news-layout { min-height: 0; }
  .ak-featured-news { min-height: 390px; }
  .ak-featured-news > div { padding: 28px 24px; }
  .ak-news-list { min-height: 360px; padding: 23px 20px; }
  .ak-news-list > a:not(.ak-all-news) { grid-template-columns: 72px 1fr 13px; }
  .ak-news-list > a > span { display: none; }
  .ak-class-showcase, .ak-showcase-inner { min-height: 790px; }
  .ak-class-wash { background: linear-gradient(90deg, rgba(6,42,61,.88), rgba(8,62,79,.52)), linear-gradient(0deg, rgba(4,37,55,.86), transparent 55%); }
  .ak-showcase-inner { padding-block: 64px 45px; }
  .ak-class-copy { width: min(590px,94%); padding-left: 27px; }
  .ak-class-picker { grid-template-columns: repeat(3,1fr); }
  .ak-class-picker button:nth-child(4) { border-left: 0; }
  .ak-class-picker button { min-height: 74px; }
  .ak-eidolon-grid { gap: 50px; }
  .ak-eidolon-visual { padding: 12px 0 0 12px; }
  .ak-eidolon-visual > span { right: -3px; bottom: 10px; }
  .ak-eidolon-copy h3 { font-size: 39px; }
  .ak-feature-grid { grid-template-columns: 1fr; }
  .ak-feature-card { min-height: 380px; }
  .ak-final-cta::before { inset: 12px; }
}

@media (max-width: 450px) {
  .ak-hero { min-height: 740px; }
  .ak-hero-content { padding-top: 335px; padding-bottom: 65px; }
  .ak-game-logo { width: 250px; }
  .ak-kicker { font-size: 9px; }
  .ak-hero h1 { font-size: 32px; }
  .ak-hero-lead { margin-top: 13px; }
  .ak-hero-actions { gap: 13px; margin-top: 23px; }
  .ak-play-button { min-width: 190px; min-height: 59px; }
  .ak-download-link { min-width: 190px; }
  .realm-strip-inner { grid-template-columns: 1.5fr 1fr; }
  .realm-strip-inner > div:nth-child(3) { display: none; }
  .ak-featured-news { min-height: 365px; }
  .ak-featured-news h3 { font-size: 27px; }
  .ak-news-list > a:not(.ak-all-news) { grid-template-columns: 64px 1fr 10px; }
  .ak-class-copy { padding-left: 20px; }
  .ak-class-number { font-size: 49px; }
  .ak-class-copy h3 { font-size: 44px; }
  .ak-class-picker button span { font-size: 8px; }
  .ak-eidolon-points { gap: 17px; }
  .ak-eidolon-points i { font-size: 20px; }
}