@charset "utf-8";

@layer properties {
  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
  *, ::before, ::after, ::backdrop { --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; }
}
}

@layer theme {
  :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --spacing: .25rem; --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); }
}

@layer base {
  *, ::after, ::before, ::backdrop { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; }
  ::file-selector-button { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; }
  html, :host { text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings,normal); font-variation-settings: var(--default-font-variation-settings,normal); -webkit-tap-highlight-color: transparent; }
  hr { height: 0px; color: inherit; border-top-width: 1px; }
  abbr:where([title]) { text-decoration: underline dotted; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
  a { color: inherit; text-decoration: inherit; }
  b, strong { font-weight: bolder; }
  code, kbd, samp, pre { font-family: var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings,normal); font-variation-settings: var(--default-mono-font-variation-settings,normal); font-size: 1em; }
  small { font-size: 80%; }
  sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; }
  sub { bottom: -0.25em; }
  sup { top: -0.5em; }
  table { text-indent: 0px; border-color: inherit; border-collapse: collapse; }
  progress { vertical-align: baseline; }
  summary { display: list-item; }
  ol, ul, menu { list-style: none; }
  img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; }
  img, video { max-width: 100%; height: auto; }
  button, input, select, optgroup, textarea { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; }
  ::file-selector-button { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; }
  :where(select:is([multiple], [size])) optgroup { font-weight: bolder; }
  :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; }
  ::file-selector-button { margin-inline-end: 4px; }
  ::placeholder { opacity: 1; }
  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
  ::placeholder { color: currentcolor; }
  @supports (color:color-mix(in lab, red, red)) {
  ::placeholder { color: color-mix(currentcolor, transparent); }
}
}
  textarea { resize: vertical; }
  ::-webkit-search-decoration { appearance: none; }
  ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; }
  ::-webkit-datetime-edit { display: inline-flex; }
  ::-webkit-datetime-edit-fields-wrapper { padding: 0px; }
  ::-webkit-datetime-edit { padding-block: 0px; }
  ::-webkit-datetime-edit-year-field { padding-block: 0px; }
  ::-webkit-datetime-edit-month-field { padding-block: 0px; }
  ::-webkit-datetime-edit-day-field { padding-block: 0px; }
  ::-webkit-datetime-edit-hour-field { padding-block: 0px; }
  ::-webkit-datetime-edit-minute-field { padding-block: 0px; }
  ::-webkit-datetime-edit-second-field { padding-block: 0px; }
  ::-webkit-datetime-edit-millisecond-field { padding-block: 0px; }
  ::-webkit-datetime-edit-meridiem-field { padding-block: 0px; }
  ::-webkit-calendar-picker-indicator { line-height: 1; }
  button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; }
  ::file-selector-button { appearance: button; }
  ::-webkit-inner-spin-button { height: auto; }
  ::-webkit-outer-spin-button { height: auto; }
  [hidden]:where(:not([hidden="until-found"])) { display: none !important; }
}

@layer components;

@layer utilities {
  .visible { visibility: visible; }
  .relative { position: relative; }
  .start { inset-inline-start: var(--spacing); }
  .table { display: table; }
  .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); }
}

:root { --cream: #fff8e8; --gold: #f5c365; --deep-gold: #b9782c; --navy: #071827; --teal: #1c8f91; --line: #ffffff3d; }

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0px; overflow: hidden; }

body { color: rgb(255, 255, 255); -webkit-font-smoothing: antialiased; background: rgb(16, 45, 58); font-family: Inter, "Helvetica Neue", Arial, sans-serif; }

button, a, summary { font: inherit; }

button { color: inherit; }

a { color: inherit; text-decoration: none; }

img { display: block; }

::selection { background: var(--gold); color: var(--navy); }

.site { isolation: isolate; width: 100vw; height: 100svh; position: relative; overflow: hidden; }

.world { z-index: -4; background: url("/rah-hero-v2.webp") 50% 54% / cover no-repeat; transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), background-position 1.1s; position: absolute; inset: -2%; transform: scale(1.025); }

.slide-1 .world { background-position: 40% 54%; transform: scale(1.07) translate(1.5%); }

.slide-2 .world { background-position: 61% 54%; transform: scale(1.08) translate(-1%); }

.slide-3 .world { background-position: 68% 54%; transform: scale(1.06) translate(-2%); }

.atmosphere { z-index: -3; background: linear-gradient(rgba(4, 21, 30, 0.58) 0%, rgba(4, 21, 30, 0.08) 23%, rgba(4, 21, 30, 0.12) 58%, rgba(3, 17, 24, 0.78) 100%); transition: background 0.6s; position: absolute; inset: 0px; }

.slide-1 .atmosphere, .slide-2 .atmosphere, .slide-3 .atmosphere { background: linear-gradient(90deg, rgba(4, 20, 29, 0.9) 0%, rgba(4, 20, 29, 0.73) 46%, rgba(4, 20, 29, 0.18) 100%), linear-gradient(rgba(0, 0, 0, 0) 45%, rgba(4, 17, 24, 0.72)); }

.topbar { z-index: 20; backdrop-filter: blur(4px); background: linear-gradient(rgba(3, 17, 25, 0.82), rgba(3, 17, 25, 0.15)); border-bottom: 1px solid rgba(255, 255, 255, 0.19); grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr); align-items: center; height: 82px; padding: 0px clamp(22px, 4vw, 68px); display: grid; position: absolute; top: 0px; left: 0px; right: 0px; }

.brand { cursor: pointer; text-align: left; background: 0px 0px; border: 0px; align-items: center; gap: 11px; width: max-content; padding: 0px; display: flex; }

.brand img { object-fit: cover; border-radius: 50%; width: 50px; height: 50px; box-shadow: rgba(245, 195, 101, 0.55) 0px 0px 0px 1px, rgba(0, 0, 0, 0.25) 0px 5px 20px; }

.brand span { flex-direction: column; display: flex; }

.brand b { letter-spacing: 0.06em; font-family: Georgia, serif; font-size: 21px; }

.brand small { color: rgb(248, 215, 143); letter-spacing: 0.17em; text-transform: uppercase; margin-top: 3px; font-size: 8px; font-weight: 800; }

.mainNav { height: 100%; display: flex; }

.mainNav button { color: rgba(255, 255, 255, 0.73); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; background: 0px 0px; border: 0px; min-width: 92px; padding: 2px 18px 0px; font-size: 10px; font-weight: 800; transition: 0.25s; position: relative; }

.mainNav button span { color: rgba(245, 195, 101, 0.65); margin-right: 6px; font-family: Georgia, serif; font-size: 9px; }

.mainNav button::after { content: ""; background: var(--gold); height: 3px; transition: 0.3s; position: absolute; bottom: 0px; left: 50%; right: 50%; }

.mainNav button:hover, .mainNav button.active { color: rgb(255, 255, 255); }

.mainNav button.active::after { left: 20px; right: 20px; }

.accountNav { justify-self: end; align-items: center; gap: 20px; display: flex; }

.accountNav a { letter-spacing: 0.13em; text-transform: uppercase; font-size: 9px; font-weight: 850; }

.accountNav .login { color: rgba(255, 255, 255, 0.8); }

.accountNav .register { background: rgba(7, 24, 39, 0.25); border: 1px solid rgba(255, 220, 146, 0.7); align-items: center; gap: 22px; min-height: 43px; padding: 0px 15px 0px 18px; display: flex; }

.accountNav .register:hover { background: var(--gold); color: var(--navy); }

.mobileNav { display: none; }

.carousel { z-index: 2; touch-action: pan-y; position: absolute; inset: 0px; }

.track { will-change: transform; height: 100%; transition: transform 0.72s cubic-bezier(0.22, 0.78, 0.22, 1); display: flex; }

.slide { flex: 0 0 100vw; align-items: center; height: 100svh; padding: 82px clamp(70px, 8vw, 145px) 108px; display: flex; position: relative; }

.homeSlide { text-align: center; justify-content: center; }

.homeContent { text-shadow: rgba(1, 11, 18, 0.62) 0px 3px 18px; flex-direction: column; align-items: center; width: min(830px, 76vw); margin-top: -2vh; display: flex; }

.liveBadge { backdrop-filter: blur(8px); letter-spacing: 0.18em; text-transform: uppercase; background: rgba(5, 28, 38, 0.4); border: 1px solid rgba(255, 255, 255, 0.38); border-radius: 30px; align-items: center; gap: 9px; padding: 8px 14px; font-size: 8px; font-weight: 850; display: flex; box-shadow: rgba(0, 0, 0, 0.14) 0px 8px 28px; }

.liveBadge i, .realmState > i { background: rgb(128, 243, 179); border-radius: 50%; width: 7px; height: 7px; display: inline-block; box-shadow: rgba(128, 243, 179, 0.14) 0px 0px 0px 4px, rgb(112, 231, 163) 0px 0px 18px; }

.liveBadge span { color: var(--gold); }

.wordmark { flex-direction: column; align-items: center; margin-top: 18px; line-height: 0.82; display: flex; }

.wordmark > span { letter-spacing: -0.055em; color: rgb(255, 248, 233); -webkit-text-stroke: 1.2px rgb(145, 96, 32); text-shadow: rgb(113, 68, 21) 0px 3px, rgba(0, 0, 0, 0.75) 0px 8px 26px, rgba(255, 218, 135, 0.45) 0px 0px 48px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(68px, 7.9vw, 126px); font-weight: 800; }

.wordmark b { letter-spacing: 0.32em; color: rgb(235, 206, 140); text-shadow: rgb(24, 40, 18) 0px 3px 12px; margin-top: 12px; font-family: Georgia, serif; font-size: clamp(24px, 2.4vw, 38px); font-weight: 500; }

.wordmark small { color: rgb(255, 248, 230); letter-spacing: 0.56em; border-top: 1px solid rgba(255, 232, 176, 0.7); border-bottom: 1px solid rgba(255, 232, 176, 0.7); margin-top: 19px; padding: 6px 30px; font-size: 9px; font-weight: 800; }

.homeContent > p { color: rgb(255, 249, 233); letter-spacing: 0.025em; margin: 25px 0px 0px; font-size: 14px; font-weight: 650; }

.heroActions { text-shadow: none; gap: 12px; margin-top: 28px; display: flex; }

.playButton { color: rgb(22, 32, 24); letter-spacing: 0.12em; text-transform: uppercase; background: linear-gradient(rgb(245, 206, 125), rgb(199, 134, 52)); border: 1px solid rgb(248, 215, 149); justify-content: space-between; align-items: center; min-width: 202px; height: 56px; padding: 0px 19px 0px 24px; font-size: 10px; font-weight: 900; transition: 0.2s; display: flex; box-shadow: rgb(255, 241, 191) 0px 1px inset, rgba(66, 40, 8, 0.35) 0px 10px 30px; }

.playButton span { font-size: 17px; }

.playButton:hover { filter: brightness(1.08); transform: translateY(-3px); }

.downloadButton { backdrop-filter: blur(9px); background: rgba(5, 34, 43, 0.46); border: 1px solid rgba(255, 255, 255, 0.48); align-items: center; gap: 14px; min-width: 190px; height: 56px; padding: 0px 19px; transition: 0.2s; display: flex; }

.downloadButton:hover { background: rgba(5, 34, 43, 0.72); border-color: rgb(255, 255, 255); transform: translateY(-3px); }

.downloadButton > i { color: var(--gold); font-size: 23px; font-style: normal; }

.downloadButton > span { letter-spacing: 0.08em; flex-direction: column; align-items: flex-start; font-size: 10px; font-weight: 850; display: flex; }

.downloadButton small { color: rgba(255, 255, 255, 0.65); letter-spacing: 0.2em; margin-bottom: 3px; font-size: 7px; }

.featurePanel, .newsPanel, .startPanel { width: min(1120px, 82vw); margin: 0px auto; }

.featurePanel { padding-left: 1vw; }

.eyebrow { color: rgb(255, 221, 148); letter-spacing: 0.24em; text-transform: uppercase; font-size: 9px; font-weight: 900; }

.featurePanel h1, .newsHeading h1, .startPanel h1 { letter-spacing: -0.035em; text-shadow: rgba(0, 0, 0, 0.45) 0px 5px 24px; margin: 17px 0px 0px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(43px, 4.6vw, 71px); font-weight: 500; line-height: 0.98; }

.featurePanel h1 span, .newsHeading h1 span, .startPanel h1 span { color: var(--gold); font-style: italic; }

.featureLead { color: rgba(255, 255, 255, 0.78); max-width: 580px; margin: 20px 0px 0px; font-size: 13px; line-height: 1.7; }

.featureGrid { background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.28); grid-template-columns: repeat(2, 1fr); gap: 1px; width: min(810px, 100%); margin-top: 28px; display: grid; box-shadow: rgba(0, 0, 0, 0.22) 0px 24px 70px; }

.featureGrid > div { backdrop-filter: blur(12px); background: rgba(7, 30, 39, 0.68); grid-template-columns: 38px 1fr; align-content: center; min-height: 105px; padding: 20px 25px; display: grid; }

.featureGrid i { color: rgba(245, 195, 101, 0.75); grid-row: 1 / 3; font-family: Georgia, serif; font-size: 16px; font-style: normal; }

.featureGrid b { font-family: Georgia, serif; font-size: 18px; font-weight: 500; }

.featureGrid small { color: rgba(255, 255, 255, 0.62); margin-top: 7px; font-size: 10px; line-height: 1.45; }

.inlineLink { color: rgb(255, 218, 139); letter-spacing: 0.13em; text-transform: uppercase; border-bottom: 1px solid rgba(245, 195, 101, 0.7); align-items: center; gap: 17px; margin-top: 22px; padding-bottom: 7px; font-size: 9px; font-weight: 850; display: inline-flex; }

.newsPanel { grid-template-columns: 0.7fr 1.4fr; align-items: end; gap: 7vw; display: grid; }

.newsCards { grid-template-columns: repeat(2, 1fr); gap: 12px; display: grid; }

.newsCard { color: rgb(20, 44, 50); background: rgba(247, 244, 226, 0.91); flex-direction: column; justify-content: space-between; min-height: 165px; padding: 20px; transition: 0.25s; display: flex; position: relative; box-shadow: rgba(0, 0, 0, 0.2) 0px 15px 40px; }

.newsCard:hover { background: rgb(255, 253, 245); transform: translateY(-5px); }

.primaryNews { color: rgb(255, 255, 255); background: linear-gradient(110deg, rgba(6, 54, 65, 0.95), rgba(20, 112, 115, 0.88)); border: 1px solid rgba(255, 255, 255, 0.25); grid-column: 1 / -1; min-height: 205px; }

.primaryNews:hover { background: linear-gradient(110deg, rgba(6, 65, 76, 0.98), rgba(24, 128, 130, 0.94)); }

.newsTag { color: rgb(255, 255, 255); letter-spacing: 0.17em; background: rgb(196, 134, 55); width: max-content; padding: 5px 8px; font-size: 7px; font-weight: 900; }

.newsCard small { letter-spacing: 0.14em; opacity: 0.58; font-size: 7px; font-weight: 850; }

.newsCard h2 { max-width: 520px; margin: 7px 0px 5px; font-family: Georgia, serif; font-size: 22px; font-weight: 500; line-height: 1.08; }

.primaryNews h2 { font-size: 31px; }

.newsCard p { opacity: 0.7; margin: 0px; font-size: 9px; line-height: 1.5; }

.newsCard > i { font-size: 17px; font-style: normal; position: absolute; top: 18px; right: 18px; }

.startSlide { justify-content: flex-end; }

.startPanel { backdrop-filter: blur(13px); background: rgba(5, 29, 38, 0.76); border: 1px solid rgba(255, 255, 255, 0.28); max-width: 680px; margin-left: auto; margin-right: 4vw; padding: 36px 40px; box-shadow: rgba(0, 0, 0, 0.28) 0px 28px 80px; }

.startPanel h1 { font-size: clamp(40px, 4vw, 60px); }

.steps { border-top: 1px solid rgba(255, 255, 255, 0.2); margin-top: 27px; }

.steps a { border-bottom: 1px solid rgba(255, 255, 255, 0.2); grid-template-columns: 46px 1fr 25px; align-items: center; min-height: 73px; transition: 0.2s; display: grid; }

.steps a:hover { background: rgba(255, 255, 255, 0.055); padding-left: 9px; }

.steps i { color: var(--gold); font-family: Georgia, serif; font-size: 14px; font-style: normal; }

.steps span { flex-direction: column; display: flex; }

.steps b { font-family: Georgia, serif; font-size: 19px; font-weight: 500; }

.steps small { color: rgba(255, 255, 255, 0.53); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; font-size: 8px; }

.steps em { color: var(--gold); font-size: 17px; font-style: normal; }

.quickLinks { gap: 8px; margin-top: 19px; display: flex; }

.quickLinks a { color: rgba(255, 255, 255, 0.7); text-align: center; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.2); flex: 1 1 0%; padding: 9px 5px; font-size: 8px; font-weight: 800; }

.quickLinks a:hover { color: rgb(255, 255, 255); border-color: var(--gold); }

.arrow { z-index: 10; backdrop-filter: blur(7px); cursor: pointer; background: rgba(4, 25, 34, 0.34); border: 1px solid rgba(255, 255, 255, 0.38); border-radius: 50%; place-items: center; width: 48px; height: 48px; transition: 0.2s; display: grid; position: absolute; top: 50%; transform: translateY(-50%); }

.arrowLeft { left: 24px; }

.arrowRight { right: 24px; }

.arrow:hover:not(:disabled) { background: var(--gold); color: var(--navy); border-color: var(--gold); }

.arrow:disabled { opacity: 0.18; cursor: default; }

.bottomDock { z-index: 11; backdrop-filter: blur(13px); background: rgba(4, 25, 34, 0.68); border: 1px solid rgba(255, 255, 255, 0.26); grid-template-columns: 1.1fr 1.2fr 0.8fr 1.1fr auto; align-items: center; min-height: 70px; display: grid; position: absolute; bottom: 18px; left: clamp(22px, 4vw, 68px); right: clamp(22px, 4vw, 68px); box-shadow: rgba(0, 0, 0, 0.22) 0px 15px 45px; }

.bottomDock > div { border-right: 1px solid rgba(255, 255, 255, 0.18); align-items: center; height: 42px; padding: 0px 22px; display: flex; }

.realmState { gap: 13px; }

.realmState span, .dockStat, .launchDate { flex-direction: column; align-items: flex-start; display: flex; }

.bottomDock small { color: rgba(255, 255, 255, 0.52); letter-spacing: 0.16em; font-size: 7px; font-weight: 800; }

.bottomDock b { letter-spacing: 0.07em; margin-top: 4px; font-family: Georgia, serif; font-size: 15px; font-weight: 500; }

.dockStat b i { color: rgba(245, 195, 101, 0.5); font-style: normal; }

.launchDate b { color: var(--gold); }

.bottomDock .pager { border-right: 0px; gap: 7px; height: 100%; }

.pager button { cursor: pointer; background: 0px 0px; border: 0px; place-items: center; width: 20px; height: 20px; padding: 0px; display: grid; }

.pager button span { background: rgba(255, 255, 255, 0.5); border-radius: 50%; width: 4px; height: 4px; transition: 0.2s; }

.pager button.active span { background: var(--gold); border-radius: 4px; width: 18px; }

@media (width <= 1080px) {
  .topbar { grid-template-columns: 1fr auto; }
  .mainNav { display: none; }
  .accountNav { margin-right: 55px; }
  .mobileNav { display: block; position: absolute; right: 25px; }
  .mobileNav summary { cursor: pointer; align-content: center; gap: 7px; width: 35px; height: 35px; list-style: none; display: grid; }
  .mobileNav summary::-webkit-details-marker { display: none; }
  .mobileNav summary i { background: rgb(255, 255, 255); width: 27px; height: 1px; transition: 0.2s; display: block; }
  .mobileNav[open] summary i:first-child { transform: translateY(4px) rotate(45deg); }
  .mobileNav[open] summary i:last-child { transform: translateY(-4px) rotate(-45deg); }
  .mobileNav > div { background: rgba(5, 27, 36, 0.97); border-bottom: 1px solid rgba(255, 255, 255, 0.25); padding: 18px 28px 25px; display: grid; position: fixed; top: 82px; left: 0px; right: 0px; }
  .mobileNav button, .mobileNav a { text-align: left; letter-spacing: 0.14em; text-transform: uppercase; background: 0px 0px; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgba(255, 255, 255, 0.14); border-image: none; padding: 12px 0px; font-size: 10px; font-weight: 800; }
  .newsPanel { grid-template-columns: 0.6fr 1.4fr; gap: 4vw; }
  .bottomDock { grid-template-columns: 1.1fr 1.2fr 1fr auto; }
  .playerStat { display: none !important; }
}

@media (width <= 720px) {
  .topbar { height: 66px; padding: 0px 16px; }
  .brand img { width: 42px; height: 42px; }
  .brand b { font-size: 17px; }
  .accountNav { display: none; }
  .mobileNav { right: 15px; }
  .mobileNav > div { top: 66px; }
  .world { background-position: 48% center; inset: -3%; }
  .slide-1 .world, .slide-2 .world, .slide-3 .world { background-position: 50% center; }
  .atmosphere { background: linear-gradient(rgba(4, 21, 30, 0.68), rgba(4, 21, 30, 0.05) 22%, rgba(4, 21, 30, 0.14) 52%, rgba(3, 17, 24, 0.9)); }
  .slide-1 .atmosphere, .slide-2 .atmosphere, .slide-3 .atmosphere { background: rgba(4, 20, 29, 0.72); }
  .slide { padding: 66px 20px 91px; }
  .homeContent { width: 100%; margin-top: -6vh; }
  .liveBadge { font-size: 7px; }
  .wordmark > span { font-size: clamp(53px, 15.5vw, 75px); }
  .wordmark b { letter-spacing: 0.22em; font-size: clamp(19px, 5.5vw, 28px); }
  .wordmark small { letter-spacing: 0.38em; font-size: 7px; }
  .homeContent > p { max-width: 330px; font-size: 11px; line-height: 1.5; }
  .heroActions { margin-top: 21px; }
  .playButton { min-width: 164px; height: 49px; padding: 0px 14px 0px 17px; font-size: 8px; }
  .downloadButton { justify-content: center; width: 52px; min-width: auto; height: 49px; padding: 0px; }
  .downloadButton > span { display: none; }
  .featurePanel, .newsPanel, .startPanel { width: 100%; }
  .featurePanel { padding: 0px 10px; }
  .featurePanel h1, .newsHeading h1, .startPanel h1 { font-size: clamp(37px, 11vw, 50px); }
  .featureLead { margin-top: 13px; font-size: 10px; line-height: 1.5; }
  .featureGrid { margin-top: 17px; }
  .featureGrid > div { grid-template-columns: 30px 1fr; min-height: 86px; padding: 13px; }
  .featureGrid i { font-size: 12px; }
  .featureGrid b { font-size: 14px; }
  .featureGrid small { font-size: 8px; }
  .inlineLink { margin-top: 14px; }
  .newsPanel { padding: 0px 9px; display: block; }
  .newsHeading h1 { margin-top: 10px; }
  .newsCards { gap: 8px; margin-top: 20px; }
  .newsCard, .primaryNews { min-height: 128px; padding: 14px; }
  .primaryNews { min-height: 145px; }
  .newsCard h2, .primaryNews h2 { font-size: 18px; }
  .newsCard p { display: none; }
  .startSlide { justify-content: center; }
  .startPanel { margin: 0px; padding: 25px 23px; }
  .steps { margin-top: 18px; }
  .steps a { min-height: 61px; }
  .steps b { font-size: 16px; }
  .quickLinks { margin-top: 13px; }
  .quickLinks a { font-size: 7px; }
  .arrow { width: 38px; height: 38px; top: auto; bottom: 28px; }
  .arrowLeft { left: 14px; }
  .arrowRight { right: 14px; }
  .bottomDock { backdrop-filter: none; min-height: 45px; box-shadow: none; background: 0px 0px; border: 0px; justify-content: center; display: flex; bottom: 18px; left: 58px; right: 58px; }
  .bottomDock > div { display: none; }
  .bottomDock .pager { border: 0px; padding: 0px; display: flex; }
}

@media (height <= 690px) and (width >= 721px) {
  .slide { padding-bottom: 88px; }
  .homeContent { transform: scale(0.86); }
  .featurePanel, .newsPanel, .startPanel { transform-origin: 50% center; transform: scale(0.88); }
  .bottomDock { min-height: 58px; bottom: 10px; }
  .bottomDock > div { height: 35px; }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@property --tw-rotate-x { syntax: "*"; inherits: false; }

@property --tw-rotate-y { syntax: "*"; inherits: false; }

@property --tw-rotate-z { syntax: "*"; inherits: false; }

@property --tw-skew-x { syntax: "*"; inherits: false; }

@property --tw-skew-y { syntax: "*"; inherits: false; }
/* ==========================================================================
   Tambahan RAH — layar kecil.

   Desain aslinya menyembunyikan SELURUH isi dock di bawah 720px dan hanya
   menyisakan titik pager. Untuk server RO yang mayoritas pemainnya membuka
   dari ponsel, itu berarti angka rate dan status server — dua hal yang paling
   dicari calon pemain — tidak pernah terlihat di perangkat utama mereka.
   Dua kartu itu dimunculkan kembali dalam bentuk ringkas; sisanya (grand
   opening, jumlah pemain) tetap disembunyikan supaya tidak sesak.
   ========================================================================== */
@media (width <= 720px) {
  .bottomDock { gap: 10px; }
  .bottomDock > .realmState,
  .bottomDock > .dockStat:not(.playerStat) {
    display: flex;
    align-items: center;
    height: auto;
    padding: 0 10px;
    border: 0;
  }
  .bottomDock > .realmState small,
  .bottomDock > .dockStat:not(.playerStat) small { display: none; }
  .bottomDock > .realmState b,
  .bottomDock > .dockStat:not(.playerStat) b {
    /* nowrap wajib: tanpa ini "7× / 7× / 1×" patah jadi dua baris di ponsel */
    font-size: 11.5px;
    letter-spacing: .02em;
    white-space: nowrap;
    line-height: 1;
  }
  .bottomDock > .dockStat:not(.playerStat) b i { margin: 0 2px; }
  .bottomDock > .dockStat:not(.playerStat) { border-left: 1px solid var(--line, #ffffff3d); }
}