:root {
  color-scheme: dark;
  --bg: #070c19;
  --bg-soft: #0b1325;
  --panel: #0f192d;
  --panel-2: #121e35;
  --line: rgba(139, 164, 205, .2);
  --line-strong: rgba(222, 186, 101, .45);
  --gold: #e9c86d;
  --gold-light: #ffe49a;
  --cyan: #47d7f0;
  --violet: #a98bff;
  --text: #f3f5fc;
  --muted: #9eabc4;
  --max: 1240px;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  background:
    radial-gradient(circle at 73% 5%, rgba(41, 101, 145, .16), transparent 29rem),
    radial-gradient(circle at 20% 30%, rgba(175, 122, 42, .08), transparent 34rem),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .17;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, #000, transparent 85%);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }

.skip-link {
  position: fixed;
  z-index: 100;
  left: 1rem;
  top: -5rem;
  padding: .75rem 1rem;
  background: var(--gold-light);
  color: #09101f;
  border-radius: .35rem;
}
.skip-link:focus { top: 1rem; }
.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; }

.page-glow {
  position: absolute;
  z-index: -1;
  width: 45rem;
  max-width: 100vw;
  height: 45rem;
  right: 0;
  top: 2rem;
  border-radius: 50%;
  background: rgba(40, 181, 226, .06);
  filter: blur(80px);
}

.site-header {
  position: relative;
  z-index: 20;
  width: min(var(--max), calc(100% - 40px));
  height: 104px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 13px; }
.brand img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(70, 215, 240, .16)); }
.brand span { display: grid; line-height: 1.05; }
.brand strong { font-family: var(--serif); font-size: 19px; letter-spacing: .02em; font-weight: 600; }
.brand small { margin-top: 7px; font-size: 8px; letter-spacing: .24em; color: var(--gold); }
.main-nav { display: flex; align-items: center; gap: 34px; font-size: 13px; color: #c7d0e1; }
.main-nav a { transition: color .2s ease; }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--gold-light); }
.nav-cta { padding: 10px 17px; border: 1px solid var(--line-strong); color: var(--gold-light) !important; }
.language-switch { min-width: 38px; padding: 8px 10px !important; border: 1px solid var(--line); color: var(--cyan) !important; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.language-switch:hover, .language-switch:focus-visible { border-color: rgba(71, 215, 240, .52); background: rgba(71, 215, 240, .07); }
.nav-toggle { display: none; border: 0; background: none; padding: 8px; }
.nav-toggle > span:not(.sr-only) { width: 23px; height: 2px; display: block; margin: 4px; background: var(--text); }

.hero {
  width: min(var(--max), calc(100% - 40px));
  min-height: 690px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 30px;
  padding: 54px 0 74px;
}
.hero-copy { position: relative; z-index: 4; }
.eyebrow, .section-kicker { color: var(--gold); font-size: 11px; letter-spacing: .22em; font-weight: 700; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 7px; height: 7px; border: 1px solid var(--gold); transform: rotate(45deg); box-shadow: 0 0 10px rgba(233, 200, 109, .4); }
h1, h2, h3, p { margin-top: 0; }
h1 {
  margin: 25px 0 24px;
  font-family: var(--serif);
  font-size: clamp(58px, 7vw, 98px);
  line-height: .89;
  font-weight: 500;
  letter-spacing: -.055em;
}
h1 em { color: var(--gold-light); font-weight: 400; }
.hero-lead { max-width: 570px; margin-bottom: 31px; font-size: clamp(17px, 1.5vw, 20px); color: #b7c2d6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { min-height: 49px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 0 23px; border: 1px solid transparent; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button-primary { color: #101321; background: linear-gradient(135deg, var(--gold-light), #cda746); box-shadow: 0 12px 35px rgba(204, 164, 65, .16); }
.button-ghost { border-color: var(--line); color: #dbe3f1; background: rgba(12, 20, 37, .55); }
.button-ghost:hover { border-color: rgba(71, 215, 240, .45); }
.hero-facts { display: flex; gap: 42px; margin: 50px 0 0; }
.hero-facts div { position: relative; }
.hero-facts div + div::before { content: ""; position: absolute; left: -21px; top: 2px; width: 1px; height: 39px; background: var(--line); }
.hero-facts dt { font-family: var(--serif); font-size: 25px; line-height: 1; color: var(--text); }
.hero-facts dd { margin: 7px 0 0; color: var(--muted); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }

.hero-visual { position: relative; min-height: 610px; display: grid; place-items: center; }
.sigil-halo { position: absolute; width: 520px; aspect-ratio: 1; border: 1px solid rgba(71, 215, 240, .12); border-radius: 50%; box-shadow: 0 0 110px rgba(44, 161, 216, .1), inset 0 0 90px rgba(234, 199, 103, .04); }
.sigil-halo::before, .sigil-halo::after { content: ""; position: absolute; inset: 9%; border: 1px dashed rgba(229, 198, 108, .11); border-radius: 50%; }
.sigil-halo::after { inset: 25%; border-style: solid; transform: rotate(45deg); border-radius: 0; }
.hero-emblem { position: absolute; width: 440px; opacity: .16; filter: blur(.2px) drop-shadow(0 0 35px rgba(69, 211, 239, .1)); }
.arena-card {
  position: relative;
  z-index: 3;
  width: min(590px, 95%);
  padding: 17px;
  border: 1px solid rgba(121, 152, 199, .28);
  background: linear-gradient(145deg, rgba(16, 27, 50, .94), rgba(8, 14, 28, .94));
  box-shadow: 0 32px 90px rgba(0, 0, 0, .48);
  transform: perspective(1200px) rotateY(-7deg) rotateX(3deg);
}
.arena-card::before { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(234, 200, 109, .12); pointer-events: none; }
.arena-card-head, .arena-card-foot { display: flex; align-items: center; justify-content: space-between; color: #95a5bf; font-size: 8px; font-weight: 800; letter-spacing: .18em; }
.arena-card-head { padding: 2px 3px 14px; }
.live { color: #8debd2; }
.live i { width: 5px; height: 5px; display: inline-block; margin-right: 5px; border-radius: 50%; background: #6ee6bd; box-shadow: 0 0 8px #6ee6bd; }
.arena-grid { aspect-ratio: 1.5; display: grid; grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(10, 1fr); border: 1px solid rgba(119, 148, 193, .28); background: #0c172b; }
.arena-cell { position: relative; border-right: 1px solid rgba(112, 141, 185, .13); border-bottom: 1px solid rgba(112, 141, 185, .13); }
.arena-cell.alt { background: rgba(78, 108, 153, .035); }
.arena-cell.path { background: rgba(233, 200, 109, .09); }
.arena-piece { position: absolute; inset: 16%; border: 1px solid; display: grid; place-items: center; border-radius: 50%; font-size: clamp(5px, .7vw, 9px); font-weight: 900; box-shadow: 0 0 11px currentColor; }
.arena-piece.gold { color: #f0ce72; background: #372c21; }
.arena-piece.cyan { color: #52daf2; background: #102f43; }
.arena-piece.violet { color: #bd9bff; background: #2b2242; }
.arena-piece.tree { inset: 20%; border-radius: 3px 50% 50%; transform: rotate(45deg); color: #63dbc2; background: #12362f; }
.arena-piece.wall { inset: 25% 8%; border-radius: 1px; color: #7898c2; background: #253a55; box-shadow: none; }
.arena-card-foot { padding: 14px 3px 2px; }
.arena-card-foot strong { color: var(--gold-light); font-weight: 700; }
.arena-card-foot b { display: inline-block; width: 58px; height: 3px; margin-right: 8px; vertical-align: middle; background: linear-gradient(90deg, var(--cyan) 30%, var(--gold) 30%); }

.section { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; padding: 105px 0; }
.intro { border-top: 1px solid var(--line); }
.section-kicker { margin-bottom: 32px; }
.intro-grid { display: grid; grid-template-columns: 1fr .8fr; gap: clamp(50px, 9vw, 130px); }
h2 { font-family: var(--serif); font-size: clamp(40px, 5vw, 66px); line-height: 1.04; font-weight: 500; letter-spacing: -.035em; }
.intro-grid h2 { max-width: 700px; }
.intro-grid p, .roadmap-head p { color: var(--muted); }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding-top: 10px; }
.pillar { position: relative; min-height: 400px; padding: 36px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(19, 31, 55, .74), rgba(10, 17, 31, .8)); }
.pillar::after { content: ""; position: absolute; width: 190px; height: 190px; right: -70px; bottom: -80px; border: 1px solid currentColor; border-radius: 50%; opacity: .1; }
.pillar-gold { color: var(--gold); }
.pillar-cyan { color: var(--cyan); }
.pillar-violet { color: var(--violet); }
.pillar-number { color: #70809d; font-size: 10px; letter-spacing: .18em; }
.pillar-icon { width: 84px; height: 84px; display: grid; place-items: center; margin: 70px 0 32px; border: 1px solid currentColor; transform: rotate(45deg); font-size: 27px; }
.pillar-icon::first-line { transform: rotate(-45deg); }
.pillar h3 { font-family: var(--serif); font-size: 34px; color: var(--text); font-weight: 500; }
.pillar p { color: var(--muted); }

.online-section { padding-top: 80px; }
.online-panel { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; padding: clamp(36px, 6vw, 75px); border: 1px solid var(--line); background: linear-gradient(135deg, #101b31, #080f1e 72%); overflow: hidden; }
.online-panel::before { content: ""; position: absolute; width: 500px; height: 500px; right: -200px; top: -180px; border: 1px solid rgba(72, 214, 240, .12); border-radius: 50%; box-shadow: 0 0 100px rgba(72, 214, 240, .07); }
.online-copy { position: relative; z-index: 2; }
.online-copy h2 { font-size: clamp(38px, 4vw, 57px); }
.online-copy > p { color: var(--muted); }
.feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin: 33px 0 0; padding: 0; list-style: none; font-size: 12px; color: #c5d0e0; }
.feature-list span { color: var(--cyan); margin-right: 8px; }
.lobby-preview { position: relative; z-index: 2; align-self: center; padding: 21px; border: 1px solid rgba(128, 157, 199, .26); background: rgba(5, 11, 23, .8); box-shadow: 0 28px 65px #0007; }
.preview-top { display: flex; justify-content: space-between; margin-bottom: 15px; color: #7f8da5; font-size: 9px; letter-spacing: .15em; }
.preview-top b { color: var(--cyan); }
.room-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 13px; min-height: 70px; padding: 10px 13px; border-top: 1px solid rgba(126, 153, 193, .14); }
.room-row.selected { border: 1px solid rgba(232, 200, 109, .36); background: rgba(232, 200, 109, .055); }
.room-row > span { display: grid; }
.room-row strong { font-size: 13px; }
.room-row small { margin-top: 3px; color: #71809a; font-size: 9px; }
.room-row > b { color: #6f7f9a; font-size: 8px; letter-spacing: .13em; }
.room-row.selected > b { color: var(--gold); }
.room-glyph { width: 20px; height: 20px; display: block; border: 1px solid currentColor; transform: rotate(45deg); }
.room-glyph.gold { color: var(--gold); }
.room-glyph.cyan { color: var(--cyan); }
.room-glyph.violet { color: var(--violet); }
.quick-match { display: flex; justify-content: space-between; margin-top: 17px; padding: 16px; color: #111522; background: linear-gradient(90deg, #ecd079, #cfaa4b); font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.quick-match small { opacity: .65; font-weight: 700; }

.update-section { display: grid; grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr); gap: clamp(55px, 8vw, 105px); align-items: center; padding-top: 90px; }
.update-visual { position: relative; display: grid; place-items: center; min-height: 570px; }
.update-visual::before { content: ""; position: absolute; width: 390px; height: 390px; border: 1px solid rgba(169, 139, 255, .2); border-radius: 50%; box-shadow: 0 0 90px rgba(169, 139, 255, .1); }
.update-badge { position: absolute; z-index: 2; top: 22px; left: 0; padding: 10px 14px; border: 1px solid rgba(233, 200, 109, .35); color: var(--gold-light); background: rgba(7, 12, 25, .9); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.release-preview-frame { position: relative; z-index: 1; width: min(100%, 520px); padding: 18px; border: 1px solid rgba(139, 164, 205, .26); background: linear-gradient(145deg, rgba(18, 30, 53, .94), rgba(6, 12, 24, .96)); box-shadow: 0 35px 85px #0008; }
.release-preview-frame::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(71, 215, 240, .08); pointer-events: none; }
.release-preview-frame img { display: block; width: 100%; height: auto; margin: 0 auto; image-rendering: pixelated; filter: drop-shadow(0 14px 25px rgba(0, 0, 0, .45)); }
.update-copy h2 { max-width: 720px; margin-bottom: 24px; }
.update-copy > p { max-width: 720px; color: #b4bfd2; font-size: clamp(16px, 1.5vw, 19px); }
.update-list { max-width: 720px; margin: 36px 0 30px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.update-list li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--line); color: #c8d2e2; }
.update-list span { color: var(--cyan); font-family: var(--serif); }
.update-copy .update-note { color: #7f8ca4; font-size: 13px; }

.roadmap-head { display: grid; grid-template-columns: 1fr .65fr; gap: 70px; align-items: end; }
.roadmap-head h2 { margin-bottom: 0; }
.roadmap-list { margin: 56px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.roadmap-list li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; min-height: 94px; border-bottom: 1px solid var(--line); color: #596882; }
.roadmap-list li > span { font-family: var(--serif); font-size: 20px; }
.roadmap-list li > div { display: grid; }
.roadmap-list strong { color: #c5cfdf; font-family: var(--serif); font-size: 22px; font-weight: 500; }
.roadmap-list small { color: #738099; }
.roadmap-list li > b { font-size: 9px; letter-spacing: .17em; }
.roadmap-list .done > b { color: #65dcb8; }
.roadmap-list .done > span, .roadmap-list .active > span { color: var(--gold); }
.roadmap-list .active { position: relative; }
.roadmap-list .active::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 34%; height: 1px; background: var(--gold); box-shadow: 0 0 13px var(--gold); }
.roadmap-list .active strong, .roadmap-list .active > b { color: var(--gold-light); }

.tester-section { display: grid; grid-template-columns: 170px 1fr auto; gap: 45px; align-items: center; margin-bottom: 95px; padding: 45px 55px; border: 1px solid var(--line-strong); background: linear-gradient(110deg, rgba(35, 35, 47, .75), rgba(10, 19, 35, .92)); }
.tester-emblem img { width: 150px; filter: drop-shadow(0 0 30px rgba(72, 214, 240, .15)); }
.tester-section h2 { margin: 12px 0 8px; font-size: clamp(34px, 4vw, 51px); }
.tester-section p { margin: 0; color: var(--muted); }

.newsletter-section { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: clamp(45px, 8vw, 110px); align-items: center; }
.newsletter-copy h2 { margin-bottom: 24px; font-size: clamp(38px, 4.5vw, 60px); }
.newsletter-copy > p { max-width: 650px; color: var(--muted); }
.social-link { display: inline-flex; gap: 10px; align-items: center; margin-top: 20px; color: var(--cyan); font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.social-link:hover, .social-link:focus-visible { color: #96efff; }
.newsletter-form { position: relative; padding: clamp(28px, 4vw, 45px); border: 1px solid var(--line-strong); background: linear-gradient(145deg, rgba(17, 29, 52, .96), rgba(8, 15, 29, .96)); box-shadow: 0 28px 70px rgba(0, 0, 0, .28); }
.newsletter-form > label:first-child { display: block; margin-bottom: 10px; color: var(--gold-light); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.newsletter-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.newsletter-input-row input { min-width: 0; height: 52px; padding: 0 17px; border: 1px solid rgba(139, 164, 205, .35); border-radius: 0; outline: none; color: var(--text); background: rgba(4, 10, 21, .8); font: inherit; }
.newsletter-input-row input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(71, 215, 240, .1); }
.newsletter-input-row .button { height: 52px; white-space: nowrap; }
.newsletter-consent { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 18px; color: #8998b1; font-size: 11px; line-height: 1.55; }
.newsletter-consent input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--gold); }
.newsletter-consent a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }
.newsletter-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.newsletter-status { min-height: 22px; margin: 15px 0 0; color: #8f9db6; font-size: 12px; }
.newsletter-status.success { color: #6ee6bd; }
.newsletter-status.error { color: #ff8f9c; }
.newsletter-status.pending { color: var(--gold-light); }
.newsletter-form button:disabled { opacity: .65; cursor: wait; }
.newsletter-unsubscribe-link { display: inline-block; margin-top: 3px; color: #71809a; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.newsletter-unsubscribe-link:hover, .newsletter-unsubscribe-link:focus-visible { color: var(--cyan); }

/* Newsletter unsubscribe */
.unsubscribe-main { width: min(var(--max), calc(100% - 40px)); min-height: calc(100vh - 220px); margin: 0 auto; padding: 90px 0 110px; }
.unsubscribe-hero { max-width: 850px; margin-bottom: 55px; }
.unsubscribe-hero h1 { margin: 22px 0 25px; font-size: clamp(56px, 8vw, 100px); }
.unsubscribe-hero > p { max-width: 720px; color: var(--muted); font-size: clamp(16px, 1.7vw, 20px); }
.unsubscribe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.unsubscribe-card { display: flex; flex-direction: column; min-height: 390px; }
.unsubscribe-card h2 { margin: 18px 0 15px; font-size: clamp(32px, 4vw, 46px); }
.unsubscribe-copy { min-height: 76px; margin-bottom: 26px; color: var(--muted); }
.unsubscribe-card > label { display: block; margin-bottom: 10px; color: var(--gold-light); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.unsubscribe-card > .button { align-self: flex-start; margin-top: 8px; }
.unsubscribe-card .newsletter-status { margin-top: auto; padding-top: 18px; }

.site-footer { width: min(var(--max), calc(100% - 40px)); min-height: 130px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 45px; border-top: 1px solid var(--line); color: #66748d; font-size: 11px; }
.brand-footer img { width: 40px; height: 40px; }
.brand-footer strong { color: #c7d0e1; font-size: 16px; }
.brand-footer small { color: #6f7d96; letter-spacing: .04em; text-transform: none; }
.footer-links { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
.footer-links a { color: #8f9db6; transition: color .2s ease; }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--gold-light); }

/* Privacy policy */
.legal-page { background: radial-gradient(circle at 82% 7%, rgba(71, 215, 240, .1), transparent 28rem), radial-gradient(circle at 8% 33%, rgba(233, 200, 109, .075), transparent 30rem), var(--bg); }
.legal-header-actions { display: flex; align-items: center; gap: 24px; color: #c7d0e1; font-size: 13px; }
.legal-header-actions > a:first-child:hover, .legal-header-actions > a:first-child:focus-visible { color: var(--gold-light); }
.legal-main { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.legal-hero { max-width: 910px; padding: 95px 0 55px; }
.legal-hero h1 { margin: 22px 0 27px; font-size: clamp(58px, 8vw, 104px); }
.legal-lead { max-width: 760px; margin-bottom: 20px; color: #b7c2d6; font-size: clamp(17px, 1.7vw, 21px); }
.legal-updated { color: #71809a; font-size: 12px; letter-spacing: .05em; }
.legal-summary { position: relative; display: grid; grid-template-columns: 160px 1fr; gap: 34px; margin-bottom: 72px; padding: 32px 38px; border: 1px solid var(--line-strong); background: linear-gradient(115deg, rgba(34, 34, 44, .85), rgba(12, 23, 41, .88)); }
.legal-summary::before { content: ""; position: absolute; left: -1px; top: 25px; bottom: 25px; width: 2px; background: var(--gold); box-shadow: 0 0 14px rgba(233, 200, 109, .65); }
.legal-summary > strong { color: var(--gold-light); font-family: var(--serif); font-size: 24px; font-weight: 500; }
.legal-summary ul { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 36px; margin: 0; padding: 0; list-style: none; color: #b6c2d5; font-size: 13px; }
.legal-summary li { position: relative; padding-left: 18px; }
.legal-summary li::before { content: "◇"; position: absolute; left: 0; color: var(--cyan); }
.legal-summary a, .legal-content a { color: var(--cyan); text-decoration: underline; text-decoration-color: rgba(71, 215, 240, .35); text-underline-offset: 3px; }
.legal-summary a:hover, .legal-content a:hover { color: #8cecff; }
.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(45px, 7vw, 95px); align-items: start; padding-bottom: 105px; }
.legal-toc { position: sticky; top: 24px; display: grid; padding: 25px; border: 1px solid var(--line); background: rgba(10, 17, 31, .74); box-shadow: 0 18px 50px rgba(0, 0, 0, .2); }
.legal-toc strong { margin-bottom: 13px; color: var(--gold); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.legal-toc a { padding: 7px 0; color: #8492aa; font-size: 11px; border-bottom: 1px solid rgba(139, 164, 205, .08); }
.legal-toc a:hover, .legal-toc a:focus-visible { color: var(--gold-light); }
.legal-content { min-width: 0; border-top: 1px solid var(--line); }
.legal-section { scroll-margin-top: 24px; display: grid; grid-template-columns: 55px minmax(0, 1fr); gap: 24px; padding: 54px 0; border-bottom: 1px solid var(--line); }
.legal-section > div { min-width: 0; }
.legal-section > span { padding-top: 7px; color: var(--gold); font-family: var(--serif); font-size: 16px; }
.legal-section h2 { margin-bottom: 25px; font-size: clamp(30px, 3.4vw, 44px); }
.legal-section h3 { margin-bottom: 14px; font-family: var(--serif); font-size: 24px; font-weight: 500; }
.legal-section p, .legal-section li { color: #a8b4c9; }
.legal-section p:last-child, .legal-section ul:last-child { margin-bottom: 0; }
.legal-section ul { margin: 0 0 20px; padding-left: 21px; }
.legal-section li { margin: 10px 0; padding-left: 4px; }
.legal-section strong { color: #dce3ef; }
.legal-table-wrap { max-width: 100%; margin: 7px 0 24px; overflow-x: auto; border: 1px solid var(--line); }
.legal-table { width: 100%; min-width: 650px; border-collapse: collapse; color: #a8b4c9; font-size: 12px; }
.legal-table th, .legal-table td { padding: 17px 19px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-table th { color: var(--gold); background: rgba(233, 200, 109, .055); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.legal-table td:first-child { width: 190px; color: #dce3ef; font-weight: 700; }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-callout { margin: 27px 0; padding: 25px 28px; border-left: 2px solid var(--cyan); background: rgba(71, 215, 240, .055); }
.legal-callout > strong { display: block; margin-bottom: 7px; color: #8cecff; font-family: var(--serif); font-size: 20px; font-weight: 500; }
.legal-callout p { margin: 0; }
.legal-footer { margin-top: 0; }

.hero > *, .intro-grid > *, .online-panel > *, .roadmap-head > *, .tester-section > *, .site-footer > * { min-width: 0; }
.footer-links a, .legal-summary a, .legal-section a { overflow-wrap: anywhere; }

@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 80px; text-align: center; }
  .hero-copy { display: grid; justify-items: center; }
  .hero-facts { justify-content: center; }
  .hero-visual { min-height: 530px; }
  .intro-grid, .online-panel, .update-section, .roadmap-head, .newsletter-section { grid-template-columns: 1fr; gap: 35px; }
  .update-visual { min-height: 510px; }
  .update-badge { left: max(0px, calc(50% - 195px)); }
  .pillars { grid-template-columns: 1fr; }
  .pillar { min-height: 290px; }
  .pillar-icon { margin: 38px 0 24px; }
  .tester-section { grid-template-columns: 120px 1fr; }
  .tester-section .button { grid-column: 2; justify-self: start; }
  .tester-emblem img { width: 110px; }
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .unsubscribe-grid { grid-template-columns: 1fr; }
  .legal-toc { position: static; grid-template-columns: repeat(2, 1fr); column-gap: 28px; }
  .legal-toc strong { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .site-header { height: 82px; width: min(100% - 28px, var(--max)); }
  .brand img { width: 43px; height: 43px; }
  .brand strong { font-size: 16px; }
  .brand small { letter-spacing: .16em; }
  .nav-toggle { display: block; color: var(--text); }
  .main-nav { position: absolute; top: 81px; left: 0; right: 0; display: none; align-items: stretch; flex-direction: column; gap: 0; padding: 18px; border: 1px solid var(--line); background: rgba(7, 12, 25, .98); box-shadow: 0 22px 50px #0009; }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 13px 12px; }
  .nav-cta { margin-top: 7px; text-align: center; }
  .main-nav .language-switch { width: 100%; margin-top: 7px; }
  .hero, .section, .site-footer { width: min(100% - 28px, var(--max)); }
  .hero { min-height: auto; padding-top: 65px; }
  h1 { font-size: clamp(52px, 18vw, 76px); }
  .hero-actions { flex-direction: column; width: 100%; }
  .button { width: 100%; }
  .hero-facts { gap: 26px; }
  .hero-facts div + div::before { left: -13px; }
  .hero-visual { min-height: 400px; }
  .sigil-halo { width: min(350px, 100%); }
  .hero-emblem { width: min(330px, 100%); }
  .hero-visual { width: 100%; max-width: 100%; overflow: hidden; }
  .arena-card { width: 100%; max-width: 100%; padding: 11px; transform: none; }
  .section { padding: 75px 0; }
  .intro-grid { gap: 20px; }
  .pillar { padding: 28px; }
  .online-section { width: 100%; }
  .online-panel { padding: 50px 22px; }
  .feature-list { grid-template-columns: 1fr; }
  .lobby-preview { padding: 12px; }
  .room-row { grid-template-columns: 24px 1fr; }
  .room-row > b { display: none; }
  .quick-match small { display: none; }
  .update-section { padding-top: 65px; }
  .update-visual { min-height: auto; padding-top: 58px; }
  .update-visual::before { width: min(330px, 90vw); height: min(330px, 90vw); }
  .update-badge { top: 0; left: 0; }
  .release-preview-frame { width: min(100%, 520px); padding: 12px; }
  .update-copy { padding-top: 25px; }
  .roadmap-list li { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .roadmap-list small { max-width: 190px; }
  .tester-section { grid-template-columns: 1fr; padding: 38px 25px; text-align: center; justify-items: center; }
  .tester-section .button { grid-column: 1; justify-self: stretch; }
  .tester-emblem img { width: 115px; }
  .newsletter-form { padding: 28px 21px; }
  .newsletter-input-row { grid-template-columns: 1fr; }
  .newsletter-input-row .button { width: 100%; }
  .site-footer { grid-template-columns: 1fr; gap: 14px; padding: 35px 0; text-align: center; justify-items: center; }
  .legal-header-actions { gap: 10px; font-size: 11px; }
  .legal-header-actions > a:first-child { display: none; }
  .legal-header .brand small { display: none; }
  .legal-main { width: min(100% - 28px, var(--max)); }
  .unsubscribe-main { width: min(100% - 28px, var(--max)); padding: 65px 0 75px; }
  .unsubscribe-card { min-height: 0; }
  .unsubscribe-copy { min-height: 0; }
  .legal-hero { padding: 65px 0 42px; }
  .legal-summary { grid-template-columns: 1fr; gap: 16px; padding: 28px 25px; }
  .legal-summary ul { grid-template-columns: 1fr; }
  .legal-layout { gap: 42px; padding-bottom: 75px; }
  .legal-toc { grid-template-columns: 1fr; padding: 21px; }
  .legal-section { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 42px 0; }
  .legal-table th, .legal-table td { padding: 14px; }
}

@media (max-width: 420px) {
  .hero-visual { width: 100%; max-width: 100%; min-height: 360px; overflow: hidden; }
  .sigil-halo { width: min(350px, 100%); }
  .hero-emblem { width: min(330px, 100%); }
  .arena-card { width: 100%; max-width: 100%; }
  .hero-facts { width: 100%; justify-content: space-between; gap: 12px; }
  .hero-facts div + div::before { left: -7px; }
  .roadmap-list li { grid-template-columns: 32px minmax(0, 1fr); gap: 8px; padding: 15px 0; }
  .roadmap-list li > b { grid-column: 2; justify-self: start; }
  .roadmap-list small { max-width: 100%; }
  .legal-section { grid-template-columns: minmax(0, 1fr); }
  .legal-section > span { padding-top: 0; }
}

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