@import url("/assets/fonts/return-fonts-local.css");
:root { --bg: #101413; --panel: #191e1b; --gold: #c9a66a; --text: #ece8dd; --muted: #a4aaa1; --line: #ffffff15; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 95px; }
body { margin: 0px; background: var(--bg); color: var(--text); font: 14px / 1.7 Inter, Arial, sans-serif; }
button, a, input { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
header { height: 88px; display: flex; align-items: center; justify-content: space-between; padding: 0px 5%; border-bottom: 1px solid var(--line); background: rgba(16, 20, 19, 0.96); position: sticky; top: 0px; z-index: 10; }
.brand { font: 600 25px Cinzel, Georgia, serif; letter-spacing: 3px; }
.brand em { color: var(--gold); font-style: normal; }
.brand small { font: 9px Inter; letter-spacing: 5px; display: block; color: var(--muted); text-align: center; }
nav { display: flex; gap: 28px; align-items: center; }
nav a { color: rgb(180, 184, 175); font-size: 12px; }
nav a:hover { color: var(--gold); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 14px 25px; border: 1px solid var(--gold); background: var(--gold); color: rgb(23, 27, 22); font-size: 11px; letter-spacing: 1.5px; font-weight: 700; text-transform: uppercase; transition: 0.2s; }
.btn:hover { background: rgb(224, 194, 143); transform: translateY(-2px); }
.outline { background: transparent; color: var(--text); border-color: rgba(201, 166, 106, 0.44); }
.outline:hover { background: rgba(201, 166, 98, 0.125); }
.hero { position: relative; min-height: 650px; display: flex; align-items: center; overflow: hidden; }
.landscape { position: absolute; right: 0px; top: 0px; height: 100%; width: 85%; opacity: 0.95; }
.hero::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(90deg, rgb(16, 20, 19) 0%, rgba(16, 20, 19, 0.79) 26%, rgba(16, 20, 19, 0.063) 75%), linear-gradient(0deg, rgb(16, 20, 19), transparent 45%); }
.hero-copy { z-index: 1; position: relative; width: 620px; margin: 55px 0px 80px 8%; }
.eyebrow { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); display: flex; gap: 12px; align-items: center; }
.eyebrow::before { content: ""; height: 1px; width: 30px; background: var(--gold); }
h1, h2, h3 { font-family: Cinzel, Georgia, serif; font-weight: 400; line-height: 1.18; }
h1 { font-size: clamp(45px, 5.5vw, 78px); margin: 28px 0px; }
h1 span { color: var(--gold); }
.hero p { max-width: 390px; color: rgb(182, 187, 176); font-size: 14px; }
.actions { display: flex; gap: 13px; margin-top: 32px; }
.hero-foot { display: flex; gap: 24px; margin-top: 36px; color: rgb(164, 170, 161); font-size: 10px; letter-spacing: 1px; }
.hero-foot b { color: var(--gold); }
.wrap { max-width: 1200px; margin: auto; padding: 0px 30px; }
.status { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); border: 1px solid var(--line); background: rgba(25, 30, 27, 0.85); margin-top: -18px; position: relative; z-index: 2; }
.status > div { padding: 25px 30px; border-right: 1px solid var(--line); }
.status small { display: block; font-size: 9px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; }
.status strong { font: 22px Cinzel; display: block; margin-top: 8px; }
.status .state { font: 14px Inter; color: var(--gold); }
.dot { display: inline-block; height: 6px; width: 6px; background: var(--gold); border-radius: 50%; margin-right: 8px; }
.section { padding: 90px 0px 0px; }
.heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 35px; }
h2 { font-size: 35px; margin: 15px 0px 0px; }
.sub { color: var(--muted); max-width: 420px; font-size: 13px; }
.story { display: grid; grid-template-columns: 1.1fr 1fr; gap: 70px; align-items: center; }
.art { position: relative; background: radial-gradient(at 50% 80%, rgba(143, 117, 68, 0.255), transparent 70%), rgb(27, 36, 31); min-height: 360px; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(201, 166, 106, 0.145); }
.art svg { height: 310px; width: 100%; }
.art-label { position: absolute; bottom: 22px; left: 25px; font-size: 9px; letter-spacing: 2px; color: var(--gold); }
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.feature { border-top: 1px solid var(--line); padding-top: 15px; }
.feature b { display: block; font-size: 12px; font-weight: 500; }
.feature span { font-size: 11px; color: var(--muted); }
.feature i { color: var(--gold); font-style: normal; margin-right: 8px; }
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { background: var(--panel); border: 1px solid var(--line); padding: 26px; text-align: left; color: inherit; }
.card:hover { border-color: rgba(201, 166, 106, 0.44); }
.card .num { font: 45px Cinzel; color: rgba(201, 166, 106, 0.23); }
.tag { font-size: 9px; color: var(--gold); letter-spacing: 2px; text-transform: uppercase; }
h3 { font-size: 20px; margin: 18px 0px 12px; }
.card p { color: var(--muted); font-size: 12px; }
.card .link { font-size: 11px; color: var(--gold); display: block; margin-top: 30px; }
.community { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.board { border: 1px solid var(--line); padding: 30px; }
.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin: 20px 0px; }
.tabs button { background: none; border: 0px; color: var(--muted); padding: 12px 0px; }
.tabs button.active { color: var(--gold); border-bottom: 1px solid var(--gold); }
.empty { padding: 35px 10px; text-align: center; color: var(--muted); }
.empty b { display: block; color: var(--text); font: 20px Cinzel; margin: 12px; }
.kingdoms { display: flex; gap: 15px; margin-top: 30px; }
.kingdoms span { flex: 1 1 0%; text-align: center; padding: 15px 5px; border: 1px solid var(--line); font-size: 11px; }
.kingdoms i { font: 28px Cinzel; display: block; }
.red { color: rgb(189, 113, 104); }
.yellow { color: rgb(201, 172, 105); }
.blue { color: rgb(126, 158, 175); }
.cta { margin-top: 85px; padding: 60px 35px; text-align: center; border: 1px solid rgba(201, 166, 106, 0.208); background: radial-gradient(at center top, rgba(180, 147, 85, 0.125), transparent 80%); }
.cta .eyebrow { justify-content: center; }
.cta p { color: var(--muted); }
footer { display: flex; justify-content: space-between; gap: 25px; padding: 45px 0px; color: var(--muted); font-size: 10px; }
footer .brand { font-size: 17px; }
footer button { background: none; border: 0px; color: var(--muted); font-size: 10px; }
.note { margin-top: 30px; font-size: 10px; color: var(--muted); }
dialog { background: var(--panel); color: var(--text); border: 1px solid rgba(201, 166, 106, 0.44); max-width: 570px; width: calc(100% - 30px); padding: 35px; }
dialog::backdrop { background: rgba(0, 0, 0, 0.733); backdrop-filter: blur(6px); }
dialog h2 { font-size: 27px; }
dialog p { color: var(--muted); }
.close { float: right; background: transparent; color: var(--text); border: 0px; font-size: 25px; }
.menu { display: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
@media (max-width: 850px) {
  header { height: 75px; }
  nav { gap: 15px; }
  nav a { display: none; }
  .hero { min-height: 590px; }
  .hero-copy { margin-left: 7%; padding-right: 20px; }
  .landscape { width: 140%; right: -45%; opacity: 0.65; }
  .status { grid-template-columns: 1fr 1fr; }
  .status > div { padding: 20px; }
  .story { grid-template-columns: 1fr; gap: 30px; }
  .news { grid-template-columns: 1fr; }
  .community { grid-template-columns: 1fr; }
  .heading { display: block; }
  .section { padding-top: 60px; }
  h2 { font-size: 29px; }
  .art { min-height: 290px; }
  .wrap { padding: 0px 20px; }
  footer { flex-direction: column; }
  .hero-foot { gap: 13px; font-size: 8px; }
  .actions { flex-wrap: wrap; }
  .status strong { font-size: 19px; }
}
.page-top { padding: 65px 0px 40px; border-bottom: 1px solid var(--line); background: radial-gradient(at 80% 0px, rgba(168, 139, 71, 0.125), transparent 65%); }
.page-top h1 { font-size: clamp(35px, 5vw, 60px); margin: 22px 0px; }
.crumb { font-size: 11px; color: var(--muted); }
.content { padding: 45px 0px 75px; min-height: 420px; }
.cols { display: grid; grid-template-columns: 250px 1fr; gap: 35px; }
.side { padding: 22px; background: var(--panel); border: 1px solid var(--line); align-self: start; }
.side a { display: block; padding: 10px 0px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.prose { max-width: 780px; }
.prose p, .prose li { color: var(--muted); }
.prose h2 { font-size: 26px; margin: 32px 0px 18px; }
.prose h3 { font-size: 19px; }
.prose li { margin-bottom: 10px; }
.notice { padding: 18px 22px; border: 1px solid rgba(201, 166, 106, 0.25); background: rgba(201, 166, 106, 0.035); color: rgb(199, 181, 142); font-size: 12px; margin-bottom: 28px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pill { padding: 7px 14px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 11px; }
.pill.active { border-color: var(--gold); color: var(--gold); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 25px; }
details { border-bottom: 1px solid var(--line); padding: 20px 0px; }
summary { cursor: pointer; font-size: 14px; color: var(--text); }
details p { max-width: 750px; color: var(--muted); font-size: 13px; }
.search { width: 100%; padding: 15px 18px; border: 1px solid var(--line); background: var(--panel); color: var(--text); margin-bottom: 20px; }
.step { display: flex; gap: 20px; padding: 20px 0px; border-bottom: 1px solid var(--line); }
.step > span { font: 30px Cinzel; color: var(--gold); }
.step h3 { margin: 0px 0px 8px; }
.step p { margin: 0px; color: var(--muted); font-size: 13px; }
.specs { width: 100%; border-collapse: collapse; margin: 25px 0px; }
.specs td { border-bottom: 1px solid var(--line); padding: 13px 8px; font-size: 13px; }
.specs td:first-child { color: var(--muted); }
nav a[aria-current="page"] { color: var(--gold); }
.mobile-toggle { display: none; }
.disabled { opacity: 0.5; cursor: not-allowed; }
.empty.large { padding: 55px 20px; border: 1px solid var(--line); background: var(--panel); }
.article-meta { font-size: 11px; color: var(--gold); }
.back { display: inline-block; margin-top: 30px; color: var(--gold); font-size: 12px; }
.skip { position: fixed; top: -70px; left: 15px; z-index: 99; padding: 10px; background: var(--gold); color: rgb(17, 17, 17); }
.skip:focus { top: 10px; }
footer a:hover { color: var(--gold); }
[hidden] { display: none !important; }
@media (max-width: 1000px) {
  header { padding: 0px 4%; }
  nav { gap: 16px; }
  nav a { font-size: 11px; }
  .brand { font-size: 21px; }
}
@media (max-width: 850px) {
  .mobile-toggle { display: block; background: none; border: 1px solid var(--line); color: var(--text); padding: 7px 12px; font-size: 19px; }
  nav { display: none; position: absolute; top: 75px; left: 0px; right: 0px; padding: 20px; background: rgb(20, 26, 22); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; }
  nav.open { display: flex; }
  nav a { display: block; padding: 9px; }
  .cols, .grid2 { grid-template-columns: 1fr; }
  .side { display: flex; gap: 18px; overflow: auto; }
  .side a { white-space: nowrap; }
  .page-top { padding: 40px 0px 25px; }
  .content { padding-top: 30px; }
}
.realm-stats { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); position: relative; z-index: 2; margin-top: -18px; background: linear-gradient(110deg, rgb(37, 42, 32), rgb(22, 30, 24)); border: 1px solid rgba(201, 166, 106, 0.25); box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 55px; }
.stat-heading, .realm-stat { padding: 27px 24px; }
.stat-heading p { font: 20px Cinzel; margin: 12px 0px 9px; }
.stat-heading small, .realm-stat small { color: var(--muted); font-size: 9px; }
.realm-stat { border-left: 1px solid var(--line); position: relative; }
.stat-icon { position: absolute; right: 22px; top: 23px; color: rgba(201, 166, 106, 0.396); font-size: 25px; }
.stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: rgb(201, 203, 187); }
.realm-stat strong { display: block; font: 48px / 1.4 Cinzel; color: var(--gold); }
.text-link { color: var(--gold); font-size: 11px; white-space: nowrap; }
.update-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 25px; }
.update-feature { padding: 30px; min-height: 345px; border: 1px solid rgba(201, 166, 106, 0.25); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(at 90% 0px, rgba(158, 130, 77, 0.22), transparent 65%), rgb(26, 33, 27); }
.update-feature:hover { border-color: var(--gold); }
.update-feature > div, .update-feature > .tag { position: relative; z-index: 1; }
.update-art { position: absolute; right: -15px; top: -30px; font: 230px Georgia; color: rgba(201, 166, 106, 0.094); }
.update-feature time { font-size: 9px; letter-spacing: 1.5px; color: var(--muted); }
.update-feature h3 { font-size: 26px; margin: 15px 0px; }
.update-feature p { color: var(--muted); font-size: 12px; max-width: 330px; }
.update-list { border-top: 1px solid var(--line); }
.update-list > a { display: flex; gap: 22px; align-items: center; padding: 22px 5px; border-bottom: 1px solid var(--line); transition: 0.2s; }
.update-list > a:hover { background: rgba(201, 166, 106, 0.03); }
.update-date { font: 29px Cinzel; color: var(--gold); min-width: 40px; text-align: center; }
.update-date small { display: block; font: 8px Inter; letter-spacing: 2px; }
.update-list h3 { font-size: 17px; margin: 7px 0px; }
.update-list p { font-size: 11px; color: var(--muted); margin: 0px; }
.arrow { margin-left: auto; color: var(--gold); }
.event-layout { display: grid; grid-template-columns: minmax(0px, 1.65fr) minmax(260px, 1fr); gap: 25px; }
.event-calendar { padding: 28px; border: 1px solid rgba(201, 166, 106, 0.19); background: rgb(23, 30, 25); align-self: start; }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 25px; }
.calendar-toolbar h3 { margin: 8px 0px 0px; font-size: 24px; text-transform: capitalize; }
.calendar-controls { display: flex; gap: 7px; }
.calendar-controls button { border: 1px solid var(--line); color: var(--text); background: rgba(255, 255, 255, 0.01); min-height: 34px; padding: 5px 12px; font-size: 11px; }
.calendar-controls button:hover { border-color: var(--gold); color: var(--gold); }
.calendar-week, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0px, 1fr)); gap: 6px; }
.calendar-week { font-size: 10px; text-align: center; color: var(--muted); margin-bottom: 13px; }
.calendar-days button { position: relative; min-height: 57px; border: 1px solid rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.008); color: rgb(197, 201, 189); font-size: 13px; }
.calendar-days button:hover { border-color: rgba(201, 166, 106, 0.5); background: rgba(201, 166, 106, 0.063); }
.calendar-days button.is-today { color: var(--gold); box-shadow: rgba(201, 166, 106, 0.376) 0px 0px 0px 1px inset; }
.calendar-days button[aria-pressed="true"] { border-color: var(--gold); background: rgba(201, 166, 106, 0.125); color: rgb(243, 215, 165); }
.calendar-days button.has-events::after { content: ""; position: absolute; bottom: 7px; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: rgb(131, 181, 145); }
.calendar-legend { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; font-size: 9px; color: var(--muted); padding: 20px 0px; border-bottom: 1px solid var(--line); }
.calendar-legend span { display: flex; align-items: center; gap: 6px; }
.calendar-legend i { width: 5px; height: 5px; border-radius: 50%; }
.today-key { background: var(--gold); }
.event-key { background: rgb(131, 181, 145); }
.calendar-legend small { margin-left: auto; font-size: 8px; }
.day-detail { padding-top: 18px; min-height: 105px; }
.day-detail h4 { font-size: 12px; font-weight: 500; margin: 0px 0px 10px; text-transform: capitalize; }
.day-detail p { font-size: 11px; color: var(--muted); margin: 0px; }
.day-detail article { border-top: 1px solid var(--line); padding: 15px 0px; }
.day-detail article h5 { font: 16px Cinzel; margin: 5px 0px; }
.day-detail time { color: var(--gold); font-size: 10px; }
.event-sidebar { display: flex; flex-direction: column; gap: 20px; }
.next-event { padding: 27px; border: 1px solid var(--line); background: radial-gradient(at right top, rgba(167, 140, 73, 0.098), transparent 60%); position: relative; overflow: hidden; }
.next-event h3 { font-size: 23px; }
.next-event p { font-size: 12px; color: var(--muted); max-width: 290px; }
.event-emblem { position: absolute; right: 15px; top: 18px; font-size: 80px; line-height: 1; color: rgba(201, 166, 106, 0.086); }
.discord-panel { position: relative; padding: 27px; border: 1px solid rgba(137, 150, 206, 0.25); background: radial-gradient(at right top, rgba(88, 101, 242, 0.18), transparent 70%), rgb(27, 32, 48); overflow: hidden; }
.discord-panel > .tag { color: rgb(174, 184, 236); }
.discord-panel h3 { font-size: 25px; }
.discord-panel p { font-size: 12px; color: rgb(174, 181, 208); }
.discord-emblem { position: absolute; right: 20px; top: 12px; font-size: 70px; line-height: 1; color: rgba(153, 169, 237, 0.145); }
.discord-button { padding: 13px 20px; background: rgb(88, 101, 189); border: 1px solid rgba(137, 152, 236, 0.44); color: rgb(230, 233, 255); font-size: 10px; letter-spacing: 0.5px; width: 100%; cursor: not-allowed; }
.discord-panel small { display: block; font-size: 9px; color: rgb(153, 164, 204); margin-top: 12px; }
.event-calendar [data-days]:empty::before { content: "Chargement…"; color: var(--muted); font-size: 12px; }
.event-calendar [data-days]:empty::before { content: "Se încarcă…"; }
@media (min-width: 851px) {
  header nav { gap: 12px; }
  header nav a { font-size: 10px; }
  header .btn { padding: 12px 16px; }
}
@media (max-width: 1000px) {
  .realm-stats { grid-template-columns: 1fr 1fr; }
  .realm-stat:nth-child(3) { border-left: 0px; }
  .realm-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .update-layout, .event-layout { grid-template-columns: 1fr; }
  .event-sidebar { display: grid; grid-template-columns: 1fr 1fr; }
  .calendar-days button { min-height: 65px; }
}
@media (max-width: 600px) {
  .realm-stat, .stat-heading { padding: 20px 16px; }
  .stat-icon { right: 12px; font-size: 18px; }
  .stat-label { font-size: 8px; letter-spacing: 1px; }
  .stat-heading p { font-size: 17px; }
  .realm-stat strong { font-size: 38px; }
  .realm-stat small, .stat-heading small { font-size: 8px; }
  .event-sidebar { display: flex; }
  .event-calendar { padding: 17px; }
  .calendar-toolbar { align-items: start; flex-direction: column; }
  .calendar-toolbar h3 { font-size: 23px; }
  .calendar-controls { width: 100%; justify-content: space-between; }
  .calendar-days { gap: 4px; }
  .calendar-days button { min-height: 44px; }
  .calendar-legend { gap: 10px; }
  .calendar-legend small { margin-left: 0px; width: 100%; }
  .update-list > a { gap: 15px; }
  .update-list h3 { font-size: 16px; }
  .heading > .text-link { display: inline-block; margin-top: 15px; }
}
@media (min-width: 1001px) {
  .realm-stat { padding-left: 18px; padding-right: 18px; }
  .stat-label { display: block; max-width: 135px; min-height: 34px; line-height: 1.7; }
  .stat-icon { right: 12px; top: 58px; font-size: 20px; }
}
@media (max-width: 1000px) {
  .stat-heading { grid-column: 1 / -1; }
  .realm-stat { border-top: 1px solid var(--line); }
  .realm-stat:nth-child(2n) { border-left: 0px; }
  .realm-stat:nth-child(2n+1) { border-left: 1px solid var(--line); }
}
:root { --bg: #0b0b0e; --panel: #151416; --gold: #c9a16b; --text: #eae4d9; --muted: #a29b98; --line: #c9a16b20; --crimson: #8d252b; }
body { background: radial-gradient(at 0px 40%, rgba(65, 20, 26, 0.07), transparent 45%), radial-gradient(at 100% 80%, rgba(151, 109, 48, 0.063), transparent 40%), rgb(11, 11, 14); }
header { height: 92px; background: linear-gradient(rgba(22, 19, 22, 0.98), rgba(12, 11, 14, 0.96)); border-bottom: 1px solid rgba(201, 161, 107, 0.275); box-shadow: rgba(0, 0, 0, 0.4) 0px 6px 30px; backdrop-filter: blur(15px); }
header .brand { font-size: 24px; letter-spacing: 2.7px; text-shadow: rgba(201, 161, 107, 0.125) 0px 1px 10px; position: relative; padding-left: 36px; }
header .brand::before { content: "◆"; position: absolute; left: 0px; top: 1px; color: var(--gold); font: 26px Georgia; filter: drop-shadow(rgba(189, 52, 48, 0.267) 0px 0px 10px); }
header .brand em { color: rgb(185, 78, 72); }
header .brand small { font-size: 8px; letter-spacing: 3.5px; color: rgb(173, 152, 121); }
header nav a { color: rgb(185, 175, 170); }
header nav a:hover, header nav a[aria-current="page"] { color: rgb(229, 192, 138); }
header nav a[aria-current="page"]:not(.btn) { position: relative; }
header nav a[aria-current="page"]:not(.btn)::after { content: ""; position: absolute; bottom: -15px; left: 20%; right: 20%; height: 2px; background: rgb(185, 81, 67); box-shadow: rgba(198, 78, 67, 0.376) 0px 0px 12px; }
.btn { background: linear-gradient(135deg, rgb(160, 53, 53), rgb(100, 29, 36)); color: rgb(244, 231, 213); border: 1px solid rgb(194, 120, 90); box-shadow: rgba(255, 255, 255, 0.094) 0px 1px inset, rgba(0, 0, 0, 0.2) 0px 8px 22px; letter-spacing: 1.2px; }
.btn:hover { background: linear-gradient(135deg, rgb(177, 69, 61), rgb(127, 39, 48)); border-color: rgb(229, 176, 119); }
.btn.outline { background: linear-gradient(135deg, rgba(35, 29, 28, 0.565), rgba(20, 17, 20, 0.753)); border-color: rgba(188, 149, 99, 0.36); color: rgb(219, 198, 167); }
.btn.outline:hover { background: rgba(75, 48, 41, 0.27); border-color: var(--gold); }
.hero { min-height: 720px; isolation: isolate; border-bottom: 1px solid rgba(179, 137, 80, 0.208); background: rgb(11, 11, 14); }
.hero-art { position: absolute; inset: 0px; z-index: -2; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 48%; display: block; }
.hero::after { z-index: -1; background: linear-gradient(90deg, rgba(9, 10, 14, 0.91) 0%, rgba(9, 10, 14, 0.71) 27%, rgba(9, 10, 14, 0.27) 49%, transparent 72%), linear-gradient(0deg, rgb(11, 11, 14) 0%, rgba(11, 11, 14, 0.07) 35%, rgba(8, 9, 11, 0.07) 85%, rgba(8, 9, 11, 0.333) 100%); }
.hero-copy { width: 610px; margin: 65px 0px 95px 8%; }
.hero h1 { font-size: clamp(46px, 5.2vw, 74px); line-height: 1.16; text-shadow: rgba(0, 0, 0, 0.533) 0px 3px 30px; }
.hero h1 span { background: linear-gradient(rgb(234, 209, 163), rgb(187, 142, 82)) text; color: transparent; }
.hero p { color: rgb(193, 185, 174); max-width: 370px; line-height: 1.9; }
.hero .eyebrow { font-size: 9px; letter-spacing: 2.7px; }
.hero-foot { color: rgb(179, 165, 149); border-top: 1px solid rgba(189, 155, 97, 0.19); padding-top: 20px; width: max-content; }
.realm-stats { margin-top: -36px; background: linear-gradient(110deg, rgb(32, 25, 26), rgb(19, 18, 21) 55%, rgb(27, 23, 22)); border: 1px solid rgba(181, 139, 80, 0.333); box-shadow: rgba(0, 0, 0, 0.533) 0px 12px 45px, rgba(210, 171, 96, 0.125) 0px 1px inset; }
.stat-heading { background: linear-gradient(135deg, rgba(141, 37, 43, 0.082), transparent); }
.stat-icon { color: rgba(185, 133, 97, 0.3); }
.realm-stat strong { color: rgb(206, 177, 138); }
.section { padding-top: 85px; }
.eyebrow { color: rgb(192, 154, 105); }
.eyebrow::before { background: linear-gradient(90deg, rgb(141, 37, 43), rgb(201, 161, 107)); }
.heading h2 { font-size: 33px; }
.heading .eyebrow::before { width: 35px; }
.art { background: radial-gradient(at 50% 80%, rgba(135, 83, 46, 0.19), transparent 70%), linear-gradient(135deg, rgb(25, 22, 25), rgb(16, 15, 18)); border: 1px solid rgba(189, 146, 83, 0.196); box-shadow: rgba(0, 0, 0, 0.333) 0px 0px 90px inset; }
.art svg { filter: sepia(0.25); }
.art-label { color: rgb(199, 163, 115); }
.feature { border-color: rgba(201, 161, 107, 0.145); }
.feature i { color: rgb(185, 85, 71); }
.card, .board { background: linear-gradient(140deg, rgb(28, 24, 25), rgb(18, 17, 20)); border-color: rgba(201, 161, 107, 0.145); box-shadow: rgba(0, 0, 0, 0.133) 0px 8px 25px; }
.card:hover { border-color: rgba(201, 161, 107, 0.5); }
.card h3, .board h2 { color: rgb(228, 214, 195); }
.kingdoms span { background: linear-gradient(rgba(255, 255, 255, 0.008), rgba(0, 0, 0, 0.2)); border-color: rgba(201, 161, 107, 0.157); }
.update-feature { background: radial-gradient(at 95% 0px, rgba(128, 35, 41, 0.19), transparent 68%), linear-gradient(135deg, rgb(34, 26, 27), rgb(18, 17, 20)); border-color: rgba(183, 139, 75, 0.314); }
.update-feature::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(201, 161, 107, 0.07); pointer-events: none; }
.update-art { color: rgba(185, 135, 77, 0.075); }
.update-list > a:hover { background: rgba(141, 37, 43, 0.07); }
.update-date { color: rgb(196, 162, 116); }
.next-event { background: radial-gradient(at right top, rgba(141, 37, 43, 0.133), transparent 65%), rgb(21, 18, 21); border-color: rgba(181, 138, 78, 0.208); }
.event-emblem { color: rgba(183, 128, 79, 0.125); }
.event-calendar { background: linear-gradient(145deg, rgb(28, 23, 25), rgb(18, 17, 20)); border-color: rgba(165, 125, 74, 0.27); }
.calendar-days button { background: linear-gradient(rgba(33, 27, 29, 0.376), rgba(255, 255, 255, 0.008)); border-color: rgba(201, 161, 107, 0.07); }
.calendar-days button[aria-pressed="true"] { background: rgba(128, 35, 41, 0.27); border-color: rgb(193, 154, 105); color: rgb(241, 211, 164); }
.calendar-days button.is-today { box-shadow: rgba(201, 161, 107, 0.44) 0px 0px 0px 1px inset; }
.discord-panel { background: radial-gradient(at right top, rgba(69, 73, 117, 0.145), transparent 70%), linear-gradient(145deg, rgb(28, 26, 36), rgb(18, 17, 24)); border-color: rgba(124, 113, 150, 0.267); }
.discord-button { background: linear-gradient(135deg, rgb(74, 71, 108), rgb(48, 46, 73)); border-color: rgba(143, 130, 173, 0.44); }
.cta { background: radial-gradient(at 50% 0px, rgba(133, 41, 42, 0.137), transparent 65%), linear-gradient(135deg, rgb(27, 21, 24), rgb(16, 15, 18)); border-color: rgba(201, 161, 107, 0.25); position: relative; padding: 55px 30px; }
.cta::before, .cta::after { content: "◆"; position: absolute; top: -9px; color: rgb(167, 128, 80); font: 14px Georgia; background: var(--bg); padding: 0px 10px; }
.cta::before { left: calc(50% - 15px); }
.cta::after { display: none; }
.page-top { position: relative; background: linear-gradient(90deg, rgba(11, 11, 14, 0.96) 20%, rgba(11, 11, 14, 0.773)), url("/assets/hero.webp") center 38% / cover; border-bottom: 1px solid rgba(201, 161, 107, 0.19); padding: 60px 0px 40px; }
.page-top h1 { color: rgb(230, 215, 190); text-shadow: rgba(0, 0, 0, 0.533) 0px 4px 20px; }
.side { background: rgb(21, 18, 21); border-color: rgba(201, 161, 107, 0.145); }
.notice { background: rgba(201, 161, 107, 0.027); border-color: rgba(201, 161, 107, 0.19); color: rgb(199, 178, 146); }
.search { background: rgb(18, 17, 20); border-color: rgba(201, 161, 107, 0.19); }
.search:focus { outline: rgb(201, 161, 107) solid 1px; }
.wiki-side { background: linear-gradient(rgb(21, 17, 20), rgb(14, 13, 16)); border-color: rgba(201, 161, 107, 0.145); top: 92px; max-height: calc(-92px + 100vh); }
.wiki-main { background: radial-gradient(at right top, rgba(141, 37, 43, 0.047), transparent 50%); }
.wiki-intro { background: linear-gradient(90deg, rgba(23, 17, 20, 0.96), rgba(23, 17, 20, 0.847)), url("/assets/hero.webp") center center / cover; border-color: rgba(201, 161, 107, 0.25); }
.wiki-seal { color: rgba(201, 161, 107, 0.07); }
.wiki-card { background: linear-gradient(140deg, rgb(33, 25, 28), rgb(17, 16, 19)); border-color: rgba(183, 139, 76, 0.157); }
.wiki-card:hover { background: linear-gradient(140deg, rgb(43, 29, 32), rgb(21, 17, 20)); border-color: rgba(201, 161, 107, 0.5); }
.wiki-card-top > span { color: rgb(185, 116, 86); }
.wiki-nav a:hover, .wiki-nav a[aria-current] { background: rgba(141, 37, 43, 0.11); border-left-color: rgb(186, 102, 80); }
.wiki-pending, #wiki-results { background: rgb(25, 19, 23); border-color: rgba(201, 161, 107, 0.19); }
.wiki-bottom { background: linear-gradient(120deg, rgb(35, 23, 25), rgb(18, 17, 20)); border-color: rgba(201, 161, 107, 0.19); }
.wiki-badge { background: rgba(128, 35, 41, 0.082); }
.empty.large { background: linear-gradient(140deg, rgb(27, 21, 24), rgb(18, 17, 20)); }
footer { border-top: 1px solid rgba(201, 161, 107, 0.11); margin-top: 25px; }
footer .brand { color: rgb(195, 172, 139); }
::selection { background: rgb(124, 48, 59); color: rgb(255, 240, 219); }
@media (max-width: 1100px) {
  header { height: 78px; padding: 0px 5%; }
  header .mobile-toggle { display: block; background: rgb(34, 25, 28); border: 1px solid rgba(201, 161, 107, 0.25); color: rgb(219, 198, 167); padding: 7px 12px; font-size: 19px; }
  header nav { display: none; position: absolute; top: 78px; left: 0px; right: 0px; background: rgba(16, 14, 18, 0.98); padding: 22px 5%; border-bottom: 1px solid rgba(201, 161, 107, 0.27); flex-direction: column; align-items: stretch; gap: 5px; }
  header nav.open { display: flex; }
  header nav a { display: block; padding: 10px; font-size: 12px; }
  header nav a[aria-current="page"]:not(.btn)::after { display: none; }
  .wiki-side { top: 78px; max-height: calc(-78px + 100vh); }
  .hero { min-height: 650px; }
  .hero-copy { margin-left: 6%; width: 530px; }
  .hero h1 { font-size: 58px; }
  .hero-art img { object-position: 62% center; }
}
@media (max-width: 850px) {
  .hero { min-height: 650px; }
  .hero-art img { object-position: 64% center; opacity: 0.8; }
  .hero::after { background: linear-gradient(90deg, rgba(9, 10, 14, 0.81), rgba(9, 10, 14, 0.46) 55%, rgba(9, 10, 14, 0.22)), linear-gradient(0deg, rgb(11, 11, 14), transparent 70%); }
  .hero-copy { margin: 80px 6% 95px; width: auto; max-width: 500px; }
  .hero h1 { font-size: clamp(44px, 7vw, 58px); }
  .hero p { max-width: 340px; }
  .wiki-side { position: static; max-height: none; }
  .realm-stats { margin-top: -25px; }
  .section { padding-top: 60px; }
  .heading h2 { font-size: 29px; }
  .wiki-nav { background: transparent; }
  .page-top { background-position: 65% 35%; }
}
@media (max-width: 500px) {
  header .brand { font-size: 21px; }
  .hero { min-height: 680px; align-items: flex-end; }
  .hero-art img { object-position: 64% top; opacity: 0.75; }
  .hero::after { background: linear-gradient(0deg, rgb(11, 11, 14) 2%, rgba(11, 11, 14, 0.91) 30%, rgba(11, 11, 14, 0.5) 60%, rgba(11, 11, 14, 0.063)), linear-gradient(90deg, rgba(8, 9, 12, 0.44), transparent); }
  .hero-copy { margin: 210px 6% 55px; max-width: none; }
  .hero h1 { font-size: 43px; margin: 20px 0px; }
  .hero .eyebrow { font-size: 7px; letter-spacing: 1.6px; }
  .hero p { font-size: 12px; max-width: 320px; }
  .hero .actions { gap: 10px; margin-top: 24px; }
  .hero .btn { padding: 13px 16px; font-size: 9px; }
  .hero-foot { font-size: 7px; gap: 12px; margin-top: 24px; }
  .realm-stats { margin-top: 0px; }
  .page-top h1 { font-size: 37px; }
  .cta { padding: 40px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { transition: none !important; animation: auto ease 0s 1 normal none running none !important; }
}
:root { --bg: #100d0b; --panel: #1c1713; --gold: #b59761; --text: #e3d8c5; --muted: #aa9e8c; --line: #a88b572b; }
body { background: radial-gradient(at center top, rgba(70, 48, 37, 0.145), transparent 65%), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.004) 0px, rgba(255, 255, 255, 0.004) 1px, transparent 1px, transparent 5px), rgb(16, 13, 11); font-size: 13px; }
header { height: 85px; background: linear-gradient(rgb(36, 27, 22), rgb(16, 13, 11) 60%, rgb(37, 27, 19)); border-top: 2px solid rgb(92, 66, 41); border-bottom: 3px double rgba(142, 112, 70, 0.24); box-shadow: rgba(0, 0, 0, 0.467) 0px 5px 18px; backdrop-filter: none; }
header .brand { color: rgb(216, 195, 154); font-size: 25px; text-shadow: rgb(0, 0, 0) 1px 2px; letter-spacing: 2px; }
header .brand::before { color: rgb(152, 123, 77); font-size: 24px; }
header .brand em { color: rgb(165, 78, 62); }
header .brand small { color: rgb(158, 137, 107); }
header nav a { font-family: Georgia, serif; color: rgb(198, 181, 153); font-size: 13px !important; }
header nav a[aria-current="page"]:not(.btn)::after { background: rgb(176, 147, 95); box-shadow: none; height: 1px; }
.btn { border: 1px solid rgb(141, 107, 69); outline: rgba(0, 0, 0, 0.333) solid 1px; outline-offset: -4px; background: linear-gradient(rgb(121, 71, 52), rgb(84, 43, 36) 52%, rgb(66, 34, 27)); box-shadow: rgba(196, 154, 99, 0.25) 0px 1px inset, rgba(0, 0, 0, 0.4) 0px -2px inset, rgba(0, 0, 0, 0.4) 0px 2px 6px; color: rgb(236, 216, 181); font: 600 11px Georgia, serif; letter-spacing: 1px; }
.btn:hover { background: linear-gradient(rgb(141, 88, 64), rgb(99, 54, 43)); border-color: rgb(195, 158, 105); transform: none; }
.btn.outline { background: linear-gradient(rgb(48, 37, 28), rgb(29, 23, 18)); border-color: rgb(122, 96, 62); color: rgb(209, 189, 152); }
.btn.outline:hover { background: linear-gradient(rgb(59, 45, 32), rgb(40, 28, 21)); }
.hero { min-height: 610px; border-bottom: 3px double rgba(149, 120, 73, 0.333); background: rgb(16, 13, 11); }
.hero-art img { object-position: center center; }
.hero::after { background: linear-gradient(90deg, rgba(16, 13, 11, 0.52) 0%, rgba(16, 13, 11, 0.208) 35%, transparent 65%), linear-gradient(0deg, rgb(16, 13, 11), transparent 28%, transparent 80%, rgba(16, 13, 11, 0.2)); }
.hero-copy { margin: 60px 0px 90px 8%; width: 550px; }
.hero h1 { font-size: clamp(43px, 4.7vw, 65px); text-shadow: rgb(0, 0, 0) 2px 3px 3px; color: rgb(230, 215, 185); }
.hero h1 span { background: none; color: rgb(197, 164, 109); }
.hero p { color: rgb(200, 185, 159); max-width: 355px; font-size: 13px; text-shadow: rgb(0, 0, 0) 0px 1px 3px; }
.hero .eyebrow { color: rgb(189, 161, 113); }
.hero-foot { color: rgb(179, 155, 125); border-color: rgba(155, 119, 71, 0.275); }
.realm-stats { margin-top: -25px; border: 3px double rgba(146, 112, 68, 0.4); background: linear-gradient(110deg, rgb(44, 33, 24), rgb(24, 18, 14) 55%, rgb(39, 28, 20)); box-shadow: rgba(0, 0, 0, 0.533) 0px 0px 22px inset, rgba(0, 0, 0, 0.333) 0px 6px 15px; }
.stat-heading { background: rgba(123, 79, 39, 0.125); }
.stat-heading p { font-size: 18px; }
.realm-stat strong { font-size: 42px; color: rgb(196, 169, 120); text-shadow: rgb(0, 0, 0) 1px 2px; }
.stat-label { color: rgb(198, 181, 150); }
.stat-icon { color: rgba(137, 110, 71, 0.376); }
h2, h3 { color: rgb(216, 197, 162); }
.heading h2 { font-size: 29px; }
.eyebrow::before { background: rgb(148, 114, 68); }
.card, .board, .art, .event-calendar, .next-event, .wiki-card, .wiki-pending, .side { background: linear-gradient(135deg, rgb(38, 29, 22), rgb(23, 18, 14)); border: 1px solid rgba(117, 91, 55, 0.31); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 3px inset, rgba(0, 0, 0, 0.2) 0px 0px 40px inset, rgba(0, 0, 0, 0.2) 0px 4px 12px; }
.card:hover, .wiki-card:hover { transform: none; border-color: rgb(168, 139, 87); background: linear-gradient(135deg, rgb(48, 35, 25), rgb(29, 21, 15)); }
.art svg { filter: sepia(0.6) saturate(0.7); }
.art-label { color: rgb(173, 143, 94); }
.feature b { color: rgb(210, 193, 163); }
.feature i { color: rgb(169, 136, 88); }
.kingdoms span { background: rgb(18, 14, 12); border: 1px solid rgba(118, 93, 62, 0.376); }
.update-feature { background: linear-gradient(135deg, rgb(51, 34, 25), rgb(24, 17, 13)); border: 3px double rgba(155, 120, 74, 0.376); }
.update-feature h3 { font-size: 23px; }
.update-feature::after { border-color: rgba(177, 145, 88, 0.07); }
.update-art { color: rgba(168, 139, 87, 0.08); }
.update-list > a:hover { background: rgba(155, 112, 64, 0.063); }
.update-list h3 { font-size: 17px; }
.update-date { color: rgb(191, 160, 108); }
.event-calendar { border: 3px double rgba(149, 114, 67, 0.376); }
.calendar-days button { background: linear-gradient(rgb(42, 33, 24), rgb(27, 21, 16)); border-color: rgba(110, 86, 53, 0.204); color: rgb(199, 182, 152); }
.calendar-days button[aria-pressed="true"] { background: linear-gradient(rgb(88, 65, 42), rgb(56, 39, 27)); border-color: rgb(193, 154, 105); color: rgb(241, 211, 164); }
.calendar-controls button { background: rgb(36, 26, 19); border-color: rgba(146, 112, 68, 0.25); }
.discord-panel { background: linear-gradient(135deg, rgb(37, 34, 37), rgb(21, 18, 22)); border: 3px double rgba(109, 101, 114, 0.3); box-shadow: rgba(0, 0, 0, 0.333) 0px 0px 25px inset; }
.discord-panel h3 { color: rgb(196, 186, 198); }
.discord-panel > .tag { color: rgb(163, 153, 175); }
.discord-button { background: linear-gradient(rgb(71, 64, 76), rgb(45, 39, 52)); border-color: rgba(126, 112, 136, 0.3); color: rgb(200, 187, 206); }
.cta { background: radial-gradient(at 50% 0px, rgba(135, 86, 40, 0.125), transparent 65%), linear-gradient(rgb(33, 23, 15), rgb(20, 15, 11)); border: 3px double rgba(160, 125, 71, 0.333); box-shadow: rgba(0, 0, 0, 0.333) 0px 0px 20px inset; }
.cta h2 { font-size: 30px; }
.cta::before { background: rgb(16, 13, 11); color: rgb(174, 142, 88); }
.page-top { background: linear-gradient(90deg, rgba(16, 13, 11, 0.96) 20%, rgba(16, 13, 11, 0.73)), url("/assets/hero.webp") center 55% / cover; border-bottom: 3px double rgba(146, 112, 68, 0.25); }
.page-top h1 { font-size: 49px; color: rgb(216, 196, 159); }
.wiki-side { background: linear-gradient(rgb(29, 21, 15), rgb(19, 14, 11)); border-color: rgba(146, 112, 68, 0.25); top: 85px; max-height: calc(-85px + 100vh); }
.wiki-main { background: transparent; }
.wiki-intro { background: linear-gradient(90deg, rgba(27, 18, 13, 0.96), rgba(27, 18, 13, 0.75)), url("/assets/hero.webp") center 55% / cover; border: 3px double rgba(146, 112, 68, 0.376); }
.wiki-intro h1 { font-size: 46px; }
.wiki-nav a:hover, .wiki-nav a[aria-current] { background: rgba(140, 105, 59, 0.106); border-left-color: rgb(161, 135, 91); }
.wiki-card-top > span { color: rgb(168, 139, 87); }
.wiki-card h2 { color: rgb(209, 188, 150); }
.wiki-card-bottom { color: rgb(168, 139, 87); }
.wiki-bottom { background: linear-gradient(rgb(33, 23, 15), rgb(20, 15, 11)); border: 3px double rgba(146, 112, 68, 0.25); }
.search, #wiki-results { background: rgb(21, 15, 12); border-color: rgba(146, 112, 68, 0.27); color: rgb(214, 194, 158); }
.notice { background: rgba(138, 107, 49, 0.035); border-color: rgba(146, 112, 68, 0.25); color: rgb(187, 165, 129); }
.wiki-badge { background: rgba(138, 107, 49, 0.043); border-color: rgba(146, 112, 68, 0.27); }
.empty.large { background: linear-gradient(rgb(34, 24, 15), rgb(19, 14, 11)); }
footer { border-color: rgba(146, 112, 68, 0.2); }
footer .brand { color: rgb(166, 141, 101); }
::selection { background: rgb(114, 82, 55); color: rgb(244, 225, 189); }
@media (max-width: 1100px) {
  header { height: 78px; }
  header nav { top: 78px; background: rgba(23, 17, 13, 0.99); border-color: rgba(146, 112, 68, 0.333); }
  header .mobile-toggle { background: rgb(44, 32, 21); border-color: rgba(146, 112, 68, 0.376); color: rgb(199, 174, 133); }
  .wiki-side { top: 78px; max-height: calc(-78px + 100vh); }
  .hero { min-height: 590px; }
  .hero h1 { font-size: 54px; }
  .hero-copy { margin-left: 6%; width: 490px; }
  .hero-art img { object-position: 65% center; }
}
@media (max-width: 850px) {
  .hero { min-height: 600px; }
  .hero-art img { opacity: 0.9; object-position: 70% center; }
  .hero::after { background: linear-gradient(90deg, rgba(16, 13, 11, 0.79), rgba(16, 13, 11, 0.4) 60%, rgba(16, 13, 11, 0.125)), linear-gradient(0deg, rgb(16, 13, 11), transparent 60%); }
  .hero-copy { width: auto; margin: 70px 6% 80px; }
  .hero h1 { font-size: 49px; }
  .wiki-side { position: static; max-height: none; }
  .heading h2 { font-size: 27px; }
  .realm-stats { margin-top: -15px; }
}
@media (max-width: 500px) {
  .hero { min-height: 640px; }
  .hero-art img { object-position: 75% top; }
  .hero::after { background: linear-gradient(0deg, rgb(16, 13, 11) 0%, rgba(16, 13, 11, 0.918) 30%, rgba(16, 13, 11, 0.4) 65%, rgba(16, 13, 11, 0.125)); }
  .hero-copy { margin: 205px 6% 45px; }
  .hero h1 { font-size: 39px; }
  .hero p { font-size: 12px; }
  .hero .eyebrow { font-size: 7px; }
  .realm-stats { margin-top: 0px; }
  .hero .btn { font-size: 9px; }
  .page-top h1 { font-size: 35px; }
  .wiki-intro h1 { font-size: 33px; }
  .cta h2 { font-size: 26px; }
}
:root { --bg: #080808; --panel: #151311; --muted: #a59d90; --text: #e4dccd; }
body { background: radial-gradient(at center top, rgba(61, 41, 25, 0.106), transparent 65%), rgb(8, 8, 8); }
header { background: linear-gradient(rgb(24, 21, 17), rgb(9, 9, 9) 70%, rgb(23, 18, 13)); border-color: rgba(111, 86, 50, 0.208); }
.hero { background: radial-gradient(at 75% 50%, rgba(93, 62, 35, 0.17), transparent 55%), radial-gradient(at 60% 80%, rgba(50, 32, 24, 0.2), transparent 50%), linear-gradient(rgb(10, 9, 8), rgb(17, 16, 14) 65%, rgb(8, 8, 8)); min-height: 585px; overflow: hidden; }
.hero::after { z-index: 0; pointer-events: none; background: linear-gradient(0deg, rgb(8, 8, 8), transparent 30%), linear-gradient(90deg, rgba(8, 8, 8, 0.333), transparent 55%); }
.hero-copy { z-index: 2; width: 535px; margin-top: 65px; margin-bottom: 80px; }
.hero h1 { font-size: clamp(42px, 4.6vw, 62px); }
.classic-hero-art { position: absolute; right: 3%; bottom: 20px; width: 49%; height: 470px; z-index: 1; }
.hero-moon { position: absolute; width: 330px; height: 330px; left: calc(50% - 165px); top: 25px; border-radius: 50%; border: 1px solid rgba(179, 140, 75, 0.14); background: radial-gradient(circle, rgba(161, 123, 62, 0.075), transparent 70%); box-shadow: rgba(161, 123, 62, 0.016) 0px 0px 0px 12px, rgba(161, 123, 62, 0.07) 0px 0px 0px 13px; }
.hero-class { position: absolute; bottom: 40px; width: 230px; height: auto; object-fit: contain; filter: drop-shadow(rgba(0, 0, 0, 0.733) 0px 12px 9px); }
.hero-shaman { left: 1%; width: 210px; bottom: 90px; z-index: 1; }
.hero-sura { right: 0px; width: 215px; bottom: 90px; z-index: 1; }
.hero-ninja { left: 17%; bottom: 35px; z-index: 3; width: 245px; }
.hero-warrior { right: 12%; bottom: 32px; z-index: 4; width: 260px; }
.hero-class-caption { position: absolute; bottom: 16px; width: 100%; text-align: center; font: 9px Cinzel, Georgia, serif; letter-spacing: 2px; color: rgb(187, 161, 117); text-shadow: rgb(0, 0, 0) 0px 2px; }
.page-top { background: radial-gradient(at 80% 50%, rgba(78, 54, 35, 0.11), transparent 60%), linear-gradient(rgb(19, 16, 12), rgb(8, 8, 8)); border-color: rgba(128, 97, 59, 0.208); }
.wiki-intro { background: radial-gradient(at right center, rgba(78, 54, 35, 0.17), transparent 70%), linear-gradient(rgb(23, 18, 13), rgb(12, 10, 8)); }
.realm-stats, .board, .card, .art, .event-calendar, .next-event, .wiki-card, .wiki-pending, .side { background: linear-gradient(135deg, rgb(27, 23, 18), rgb(14, 12, 10)); }
.cta, .wiki-bottom { background: linear-gradient(rgb(23, 17, 12), rgb(10, 9, 8)); }
.wiki-side { background: linear-gradient(rgb(20, 16, 12), rgb(9, 8, 8)); }
.server-brief { position: relative; }
.brief-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 3px double rgba(139, 107, 60, 0.333); border-bottom: 3px double rgba(139, 107, 60, 0.333); background: linear-gradient(rgb(33, 24, 15), rgb(16, 13, 9)); text-align: center; }
.brief-strip span { padding: 17px 8px; color: rgb(195, 170, 127); font-size: 9px; letter-spacing: 1.5px; border-right: 1px solid rgba(139, 107, 60, 0.19); }
.brief-strip span:last-child { border: 0px; }
.brief-system-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin: 25px 0px; }
.brief-system { display: flex; gap: 22px; padding: 25px; border: 1px solid rgba(139, 107, 60, 0.19); background: rgb(18, 16, 13); }
.brief-symbol { font: 45px / 1.3 Georgia; color: rgb(169, 138, 87); min-width: 45px; }
.brief-system h3 { margin: 10px 0px; font-size: 24px; }
.brief-system p { font-size: 12px; line-height: 1.8; color: var(--muted); margin: 0px; }
.activity-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.activity-card { padding: 30px 25px; border: 3px double rgba(139, 107, 60, 0.27); background: radial-gradient(at 50% 0px, rgba(112, 80, 46, 0.086), transparent 70%), linear-gradient(rgb(25, 20, 14), rgb(13, 11, 8)); position: relative; transition: border-color 0.2s; }
.activity-card:hover { border-color: rgba(172, 135, 78, 0.533); }
.activity-icon { display: block; font: 38px Georgia; color: rgb(175, 138, 82); margin-bottom: 24px; }
.activity-card h3 { font-size: 22px; margin: 15px 0px; }
.activity-card p { font-size: 12px; color: var(--muted); min-height: 85px; line-height: 1.9; }
.activity-card a { display: block; border-top: 1px solid rgba(139, 107, 60, 0.145); padding-top: 17px; color: rgb(183, 154, 105); font-size: 10px; }
.activity-card .tag { font-size: 8px; }
.brief-note { color: rgb(143, 132, 114); font-size: 10px; margin: 20px 0px 0px; }
@media (max-width: 1100px) {
  .hero { min-height: 570px; }
  .hero-copy { width: 460px; }
  .hero h1 { font-size: 49px; }
  .classic-hero-art { right: 0px; width: 48%; height: 410px; }
  .hero-class { max-width: 48%; }
  .hero-shaman { left: 0px; bottom: 100px; }
  .hero-sura { right: 0px; bottom: 100px; }
  .hero-warrior { right: 4%; bottom: 40px; }
  .hero-ninja { left: 7%; bottom: 40px; }
  .hero-class-caption { font-size: 7px; letter-spacing: 1px; }
}
@media (max-width: 850px) {
  .hero { min-height: 760px; align-items: flex-start; }
  .hero-copy { margin: 45px 6% 0px; width: auto; max-width: 550px; }
  .hero h1 { font-size: 46px; margin: 20px 0px; }
  .hero p { max-width: 380px; }
  .hero .hero-foot { display: none; }
  .classic-hero-art { width: 420px; max-width: 95%; height: 350px; bottom: 0px; right: calc(50% - 210px); }
  .hero-class { max-width: 42%; bottom: 25px; }
  .hero-shaman, .hero-sura { bottom: 70px; }
  .hero-warrior { right: 12%; }
  .hero-ninja { left: 12%; }
  .hero-moon { width: 270px; height: 270px; left: calc(50% - 135px); top: 15px; }
  .hero-class-caption { bottom: 10px; }
  .brief-strip { grid-template-columns: 1fr 1fr; }
  .brief-strip span:nth-child(-n+2) { border-bottom: 1px solid rgba(139, 107, 60, 0.19); }
  .brief-strip span:nth-child(2) { border-right: 0px; }
  .brief-system-grid { grid-template-columns: 1fr; gap: 15px; }
  .activity-cards { grid-template-columns: 1fr; }
  .activity-card p { min-height: 0px; }
  .activity-icon { float: right; margin: 0px; }
  .activity-card { padding: 25px; }
  .activity-card h3 { margin-right: 45px; }
}
@media (max-width: 500px) {
  .hero { min-height: 740px; }
  .hero-copy { margin: 35px 6% 0px; }
  .hero h1 { font-size: 39px; }
  .hero p { font-size: 12px; }
  .hero .actions { margin-top: 20px; }
  .classic-hero-art { width: 360px; right: calc(50% - 180px); height: 335px; }
  .hero-class { max-width: 46%; }
  .hero-warrior { right: 10%; bottom: 28px; }
  .hero-ninja { left: 10%; bottom: 28px; }
  .hero-shaman { left: 0px; bottom: 75px; }
  .hero-sura { right: 0px; bottom: 75px; }
  .brief-strip span { font-size: 8px; letter-spacing: 1px; }
  .brief-system { padding: 20px; gap: 15px; }
  .brief-system h3 { font-size: 21px; }
  .hero .eyebrow { font-size: 7px; }
}
.story { display: block; max-width: 950px; margin-left: auto; margin-right: auto; padding-bottom: 15px; }
.story > div { padding: 35px; border-top: 3px double rgba(146, 112, 68, 0.27); border-bottom: 3px double rgba(146, 112, 68, 0.208); background: linear-gradient(120deg, rgba(27, 20, 15, 0.5), transparent); }
.story .sub { max-width: 680px; }
.story .features { grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 22px; margin-top: 30px; }
.story h2 { font-size: 34px; }
.story .note { margin-bottom: 0px; }
@media (max-width: 850px) {
  .story .features { grid-template-columns: 1fr 1fr; }
  .story > div { padding: 25px; }
  .story h2 { font-size: 29px; }
}
@media (max-width: 450px) {
  .story > div { padding: 22px 15px; }
  .story .features { gap: 18px; }
  .story .feature b { font-size: 11px; }
  .story .feature span { font-size: 10px; }
}
:root { --bg: #070709; --panel: #141418; --gold: #edcb49; --text: #eeeef0; --muted: #a6a6b0; --line: #ffffff14; --crimson: #b82036; }
body { background: radial-gradient(at 0px 20%, rgba(169, 15, 34, 0.063), transparent 45%), radial-gradient(at 100% 75%, rgba(169, 15, 34, 0.035), transparent 45%), rgb(7, 7, 9); color: var(--text); }
header { background: linear-gradient(rgb(21, 21, 25), rgb(9, 9, 12)); border-top: 2px solid rgb(166, 25, 45); border-bottom: 1px solid rgba(240, 203, 67, 0.157); box-shadow: rgba(0, 0, 0, 0.533) 0px 5px 24px; }
header .brand { color: rgb(238, 238, 240); text-shadow: rgb(0, 0, 0) 0px 2px; }
header .brand::before { color: rgb(237, 203, 73); }
header .brand em { color: rgb(220, 53, 73); }
header .brand small { color: rgb(152, 152, 164); }
header nav a { color: rgb(194, 194, 203); }
header nav a:hover, header nav a[aria-current="page"] { color: rgb(242, 214, 95); }
header nav a[aria-current="page"]:not(.btn)::after { background: rgb(215, 36, 64); box-shadow: rgba(197, 30, 62, 0.376) 0px 0px 8px; }
.btn { background: linear-gradient(135deg, rgb(180, 28, 52), rgb(121, 16, 39)); border: 1px solid rgb(219, 57, 79); color: rgb(255, 244, 223); box-shadow: rgba(255, 255, 255, 0.11) 0px 1px inset, rgba(104, 13, 35, 0.145) 0px 5px 18px; outline-color: rgba(0, 0, 0, 0.333); }
.btn:hover { background: linear-gradient(135deg, rgb(209, 39, 66), rgb(152, 19, 44)); border-color: rgb(240, 203, 67); color: rgb(255, 255, 255); }
.btn.outline { background: linear-gradient(rgb(32, 32, 36), rgb(17, 17, 21)); border-color: rgba(230, 195, 60, 0.396); color: rgb(241, 212, 108); }
.btn.outline:hover { background: rgba(237, 203, 73, 0.063); border-color: rgb(240, 210, 78); color: rgb(255, 230, 136); }
.hero { background: rgb(7, 7, 9); border-color: rgba(185, 36, 57, 0.25); }
.hero::after { background: linear-gradient(90deg, rgba(7, 7, 9, 0.73) 0%, rgba(7, 7, 9, 0.376) 35%, transparent 62%), linear-gradient(0deg, rgb(7, 7, 9), transparent 33%); }
.hero h1 { color: rgb(241, 240, 238); }
.hero h1 span { color: rgb(240, 206, 74); background: none; }
.hero p { color: rgb(194, 194, 201); }
.hero .eyebrow, .eyebrow { color: rgb(231, 201, 78); }
.eyebrow::before { background: linear-gradient(90deg, rgb(192, 29, 54), rgb(237, 203, 73)); }
.hero-foot { color: rgb(170, 170, 182); border-color: rgba(255, 255, 255, 0.11); background: rgba(7, 7, 9, 0.19); }
.hero-foot b { color: rgb(237, 203, 73); }
.realm-stats { background: linear-gradient(110deg, rgb(28, 17, 24), rgb(17, 17, 22) 55%, rgb(20, 20, 25)); border: 1px solid rgba(211, 36, 60, 0.4); box-shadow: rgba(0, 0, 0, 0.467) 0px 8px 30px, rgba(237, 203, 73, 0.08) 0px 2px inset; }
.stat-heading { background: rgba(163, 24, 47, 0.063); }
.stat-heading p { color: rgb(237, 237, 240); }
.stat-heading .tag { color: rgb(240, 206, 74); }
.dot { background: rgb(237, 203, 73); }
.stat-label { color: rgb(191, 192, 202); }
.realm-stat strong { color: rgb(240, 206, 74); }
.stat-icon { color: rgba(201, 67, 87, 0.31); }
.realm-stat small, .stat-heading small { color: rgb(143, 144, 158); }
.realm-stat { border-color: rgba(255, 255, 255, 0.07); }
.heading h2, h2, h3 { color: rgb(233, 232, 236); }
.sub, .prose p, .prose li, .card p { color: rgb(166, 166, 176); }
.text-link, .card .link, .back { color: rgb(237, 203, 73); }
.tag { color: rgb(231, 201, 78); }
.card, .board, .art, .event-calendar, .next-event, .wiki-card, .wiki-pending, .side, .empty.large { background: linear-gradient(135deg, rgb(25, 25, 31), rgb(16, 16, 20)); border-color: rgba(255, 255, 255, 0.094); box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 15px, rgba(255, 255, 255, 0.01) 0px 1px inset; }
.card:hover, .wiki-card:hover { border-color: rgba(213, 42, 66, 0.4); background: linear-gradient(135deg, rgb(33, 21, 29), rgb(18, 18, 23)); }
.card h3, .board h2 { color: rgb(238, 238, 240); }
.card .num { color: rgba(237, 203, 73, 0.19); }
.feature { border-color: rgba(255, 255, 255, 0.094); }
.feature b { color: rgb(221, 221, 228); }
.feature span { color: rgb(170, 170, 180); }
.feature i { color: rgb(237, 203, 73); }
.story > div { border-color: rgba(211, 36, 60, 0.25); background: linear-gradient(120deg, rgba(32, 16, 25, 0.4), rgba(16, 16, 20, 0.2)); }
.story h2 { color: rgb(238, 238, 240); }
.note, .brief-note { color: rgb(141, 141, 154); }
.kingdoms span { background: rgb(16, 16, 20); border-color: rgba(255, 255, 255, 0.1); }
.red { color: rgb(237, 102, 119); }
.yellow { color: rgb(237, 203, 73); }
.blue { color: rgb(126, 155, 216); }
.update-feature { background: radial-gradient(at right top, rgba(186, 23, 51, 0.16), transparent 65%), linear-gradient(rgb(28, 20, 28), rgb(16, 16, 20)); border: 1px solid rgba(213, 42, 66, 0.333); }
.update-feature::after { border-color: rgba(237, 203, 73, 0.06); }
.update-feature h3 { color: rgb(238, 238, 240); }
.update-feature p, .update-feature time { color: rgb(166, 166, 176); }
.update-art { color: rgba(236, 51, 74, 0.075); }
.update-list > a:hover { background: rgba(204, 25, 51, 0.047); }
.update-list h3 { color: rgb(225, 225, 231); }
.update-list p { color: rgb(150, 150, 164); }
.update-date { color: rgb(237, 203, 73); }
.update-list, .update-list > a { border-color: rgba(255, 255, 255, 0.086); }
.arrow { color: rgb(237, 203, 73); }
.brief-strip { background: linear-gradient(rgb(26, 21, 27), rgb(16, 16, 20)); border-color: rgba(208, 42, 66, 0.314); }
.brief-strip span { color: rgb(232, 206, 102); border-color: rgba(255, 255, 255, 0.07); }
.brief-system { background: rgb(18, 18, 22); border-color: rgba(255, 255, 255, 0.086); }
.brief-symbol { color: rgb(237, 203, 73); }
.brief-system h3 { color: rgb(238, 238, 240); }
.brief-system p { color: rgb(166, 166, 176); }
.activity-card { background: radial-gradient(at center top, rgba(182, 26, 49, 0.07), transparent 70%), rgb(18, 18, 22); border: 1px solid rgba(255, 255, 255, 0.106); }
.activity-card:hover { border-color: rgba(213, 42, 66, 0.467); }
.activity-icon { color: rgb(213, 42, 66); }
.activity-card a { color: rgb(237, 203, 73); border-color: rgba(255, 255, 255, 0.08); }
.activity-card p { color: rgb(166, 166, 176); }
.activity-card h3 { color: rgb(238, 238, 240); }
.next-event { background: radial-gradient(at right top, rgba(201, 30, 54, 0.125), transparent 60%), rgb(18, 18, 22); }
.next-event h3 { color: rgb(237, 237, 240); }
.next-event p { color: rgb(166, 166, 176); }
.event-emblem { color: rgba(213, 37, 61, 0.13); }
.event-calendar { border: 1px solid rgba(195, 36, 59, 0.333); }
.calendar-toolbar h3 { color: rgb(238, 238, 240); }
.calendar-controls button { background: rgb(28, 28, 35); border-color: rgba(255, 255, 255, 0.11); color: rgb(219, 219, 225); }
.calendar-controls button:hover { border-color: rgb(237, 203, 73); color: rgb(240, 214, 96); }
.calendar-week { color: rgb(159, 159, 173); }
.calendar-days button { background: linear-gradient(rgb(29, 29, 37), rgb(21, 21, 27)); border-color: rgba(255, 255, 255, 0.043); color: rgb(192, 192, 205); }
.calendar-days button:hover { border-color: rgba(213, 42, 66, 0.44); background: rgba(162, 26, 47, 0.1); }
.calendar-days button.is-today { color: rgb(237, 203, 73); box-shadow: rgba(237, 203, 73, 0.44) 0px 0px 0px 1px inset; }
.calendar-days button[aria-pressed="true"] { background: rgba(156, 25, 47, 0.25); border-color: rgb(214, 43, 68); color: rgb(255, 225, 107); }
.calendar-days button.has-events::after { background: rgb(224, 191, 62); }
.today-key { background: rgb(237, 203, 73); }
.event-key { background: rgb(221, 47, 73); }
.calendar-legend, .day-detail p { color: rgb(150, 150, 164); }
.day-detail h4 { color: rgb(221, 221, 228); }
.day-detail time { color: rgb(237, 203, 73); }
.discord-panel { background: radial-gradient(at right top, rgba(175, 25, 48, 0.1), transparent 70%), linear-gradient(rgb(25, 21, 31), rgb(17, 17, 22)); border: 1px solid rgba(204, 37, 64, 0.3); }
.discord-panel h3 { color: rgb(237, 237, 240); }
.discord-panel > .tag { color: rgb(237, 203, 73); }
.discord-panel p, .discord-panel small { color: rgb(170, 164, 181); }
.discord-button { background: linear-gradient(rgb(147, 32, 57), rgb(97, 19, 41)); border-color: rgba(200, 50, 75, 0.4); color: rgb(234, 200, 208); }
.discord-emblem { color: rgba(213, 42, 66, 0.125); }
.cta, .wiki-bottom { background: radial-gradient(at center top, rgba(180, 27, 52, 0.125), transparent 65%), linear-gradient(rgb(25, 18, 24), rgb(12, 12, 16)); border: 1px solid rgba(213, 42, 66, 0.314); box-shadow: rgba(237, 203, 73, 0.05) 0px 1px inset; }
.cta h2, .wiki-bottom h2 { color: rgb(238, 238, 240); }
.cta::before { background: rgb(7, 7, 9); color: rgb(237, 203, 73); }
.page-top { background: radial-gradient(at 85% 50%, rgba(184, 27, 52, 0.125), transparent 60%), linear-gradient(rgb(21, 16, 23), rgb(9, 9, 13)); border-color: rgba(197, 38, 62, 0.25); }
.page-top h1 { color: rgb(238, 238, 240); }
.crumb { color: rgb(150, 150, 164); }
.wiki-side { background: linear-gradient(rgb(20, 17, 23), rgb(10, 10, 14)); border-color: rgba(255, 255, 255, 0.07); }
.wiki-main { background: transparent; }
.wiki-home { color: rgb(237, 203, 73); }
.side-group { color: rgb(217, 68, 89); }
.wiki-nav a { color: rgb(166, 166, 176); }
.wiki-nav a:hover, .wiki-nav a[aria-current] { background: rgba(165, 28, 48, 0.125); color: rgb(243, 214, 99); border-left-color: rgb(223, 48, 72); }
.wiki-intro { background: radial-gradient(at right center, rgba(187, 28, 53, 0.125), transparent 65%), linear-gradient(rgb(25, 19, 26), rgb(14, 14, 19)); border: 1px solid rgba(197, 42, 66, 0.333); }
.wiki-intro h1 { color: rgb(238, 238, 240); }
.wiki-intro h1 span { color: rgb(237, 203, 73); }
.wiki-intro p { color: rgb(170, 170, 181); }
.wiki-seal { color: rgba(237, 203, 73, 0.05); }
.wiki-card h2 { color: rgb(228, 228, 235); }
.wiki-card p { color: rgb(159, 159, 172); }
.wiki-card-top > span { color: rgb(217, 54, 77); }
.wiki-card-top small { color: rgb(150, 150, 164); }
.wiki-card-bottom { color: rgb(237, 203, 73); border-color: rgba(255, 255, 255, 0.07); }
.wiki-badge { background: rgba(167, 29, 50, 0.125); border-color: rgba(213, 42, 66, 0.25); color: rgb(236, 205, 86); }
.wiki-toc a { color: rgb(159, 159, 172); }
.wiki-toc a:hover { color: rgb(237, 203, 73); }
.wiki-related a { color: rgb(212, 212, 223); }
.wiki-pager { color: rgb(237, 203, 73); }
.search, #wiki-results { background: rgb(16, 16, 21); border-color: rgba(255, 255, 255, 0.145); color: rgb(221, 221, 231); }
.search:focus { outline-color: rgb(237, 203, 73); }
.notice { background: rgba(237, 203, 73, 0.024); border-color: rgba(237, 203, 73, 0.157); color: rgb(199, 188, 143); }
.pill { color: rgb(170, 170, 180); border-color: rgba(255, 255, 255, 0.114); }
.pill.active { color: rgb(240, 212, 99); border-color: rgb(213, 42, 66); background: rgba(171, 25, 48, 0.094); }
.tabs button { color: rgb(147, 147, 163); }
.tabs button.active { color: rgb(237, 203, 73); border-color: rgb(237, 203, 73); }
.specs td:first-child { color: rgb(166, 166, 176); }
.empty { color: rgb(150, 150, 164); }
.empty b { color: rgb(230, 230, 238); }
.empty span { color: rgb(237, 203, 73); }
.game-image-dialog, dialog { background: rgb(20, 18, 25); border-color: rgba(213, 42, 66, 0.44); }
footer { border-color: rgba(255, 255, 255, 0.082); color: rgb(146, 146, 159); }
footer .brand { color: rgb(219, 219, 227); }
footer .brand em { color: rgb(223, 48, 72); }
footer a:hover { color: rgb(237, 203, 73); }
::selection { background: rgb(158, 25, 49); color: rgb(255, 245, 189); }
.skip { background: rgb(237, 203, 73); color: rgb(16, 16, 20); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline-color: rgb(237, 203, 73); }
@media (max-width: 1100px) {
  header nav { background: rgba(14, 13, 18, 0.98); border-color: rgba(197, 38, 62, 0.333); }
  header .mobile-toggle { background: rgb(33, 19, 26); border-color: rgba(206, 40, 64, 0.3); color: rgb(237, 203, 73); }
}
@media (max-width: 850px) {
  .hero::after { background: linear-gradient(0deg, rgb(7, 7, 9) 0%, rgba(7, 7, 9, 0.94) 24%, rgba(7, 7, 9, 0.69) 42%, rgba(7, 7, 9, 0.082) 75%); }
  .brief-strip span:nth-child(-n+2) { border-color: rgba(255, 255, 255, 0.086); }
}
.simple-header { display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 88px; height: 88px; padding: 0px 5%; z-index: 30; }
.simple-header .brand { flex-shrink: 0; }
.simple-header > nav { position: static; display: flex; flex-direction: row; align-items: center; gap: 35px; padding: 0px; border: 0px; background: transparent; }
.simple-header > nav > a { display: inline-block; padding: 8px 0px; color: rgb(197, 197, 206); font: 13px Georgia, serif !important; }
.simple-header > nav > a:hover, .simple-header > nav > a[aria-current] { color: rgb(237, 203, 73); }
.header-actions { display: flex; align-items: center; gap: 18px; }
.account-dropdown { position: relative; }
.account-trigger { min-width: 155px; gap: 18px; padding: 13px 19px; white-space: nowrap; min-height: 44px; }
.account-chevron { font-size: 18px; line-height: 1; transition: transform 0.15s; }
.account-trigger[aria-expanded="true"] { border-color: rgb(237, 203, 73); background: rgb(33, 22, 30); }
.account-trigger[aria-expanded="true"] .account-chevron { transform: rotate(180deg); }
.account-links { position: absolute; top: calc(100% + 10px); right: 0px; width: 230px; padding: 12px; background: linear-gradient(rgb(30, 23, 32), rgb(16, 16, 20)); border: 1px solid rgba(213, 42, 66, 0.376); box-shadow: rgba(0, 0, 0, 0.733) 0px 12px 30px; z-index: 50; }
.account-links::before { content: ""; position: absolute; top: -12px; left: 0px; right: 0px; height: 12px; }
.account-menu-label { display: block; padding: 5px 10px 10px; font-size: 8px; letter-spacing: 2px; color: rgb(136, 133, 148); }
.account-links a { display: flex; justify-content: space-between; align-items: center; padding: 12px 10px; font-size: 12px; color: rgb(221, 221, 230); border-top: 1px solid rgba(255, 255, 255, 0.043); }
.account-links a:hover, .account-links a:focus-visible { background: rgba(167, 27, 50, 0.145); color: rgb(241, 212, 101); outline-offset: -2px; }
.header-discord { width: 43px; height: 43px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.094); background: rgb(21, 21, 27); color: rgb(193, 193, 213); transition: 0.15s; }
.header-discord svg { width: 24px; height: 24px; }
.header-discord:hover { color: rgb(255, 255, 255); background: rgb(88, 101, 242); border-color: rgb(130, 144, 255); }
.account-page { min-height: calc(-250px + 100vh); padding: 65px 20px 70px; background: radial-gradient(at 50% 15%, rgba(182, 29, 52, 0.07), transparent 60%); }
.account-page-heading { text-align: center; margin-bottom: 30px; }
.account-page-heading .eyebrow { justify-content: center; }
.account-page-heading h1 { font-size: 40px; margin: 20px 0px 12px; }
.account-page-heading p { color: rgb(166, 166, 176); font-size: 13px; }
.account-form-panel { max-width: 460px; margin: auto; padding: 30px; background: linear-gradient(rgb(25, 20, 27), rgb(16, 16, 20)); border: 1px solid rgba(213, 42, 66, 0.25); box-shadow: rgba(0, 0, 0, 0.267) 0px 12px 40px; }
.account-form-panel .notice { font-size: 11px; margin-bottom: 22px; }
.account-form-panel fieldset { margin: 0px; padding: 0px; border: 0px; min-width: 0px; }
.account-form-panel label { display: block; font-size: 11px; color: rgb(182, 180, 192); margin: 15px 0px 7px; }
.account-form-panel input { display: block; width: 100%; padding: 12px 13px; color: rgb(177, 173, 185); background: rgb(13, 13, 18); border: 1px solid rgba(255, 255, 255, 0.086); font-size: 12px; border-radius: 0px; }
.account-form-panel input:disabled { opacity: 0.6; cursor: not-allowed; }
.account-form-panel fieldset .btn { display: block; width: 100%; margin-top: 25px; opacity: 0.5; cursor: not-allowed; }
.account-switch { font-size: 11px; text-align: center; color: rgb(165, 162, 177); margin: 25px 0px; }
.account-switch a { color: rgb(237, 203, 73); }
.account-back { display: block; text-align: center; font-size: 10px; color: rgb(135, 132, 145); border-top: 1px solid rgba(255, 255, 255, 0.063); padding-top: 18px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }
@media (max-width: 1100px) {
  .simple-header { gap: 20px; height: 82px; min-height: 82px; padding: 0px 4%; }
  .simple-header .brand { font-size: 22px; }
  .simple-header > nav { gap: 22px; }
  .simple-header > nav > a { font-size: 12px !important; }
  .account-trigger { min-width: 140px; padding: 12px 15px; font-size: 10px; }
  .header-actions { gap: 12px; }
  .wiki-side { top: 82px; max-height: calc(-82px + 100vh); }
}
@media (max-width: 750px) {
  .simple-header { flex-wrap: wrap; height: auto; min-height: 115px; gap: 0px; padding: 14px 5% 0px; }
  .simple-header .brand { font-size: 21px; padding-left: 28px; }
  .simple-header .brand::before { font-size: 20px; }
  .simple-header .brand small { font-size: 6px; letter-spacing: 2.5px; }
  .simple-header > nav { order: 3; width: 100%; justify-content: center; gap: 45px; margin-top: 12px; padding: 9px 0px; border-top: 1px solid rgba(255, 255, 255, 0.063); }
  .simple-header > nav > a { padding: 5px 0px; font-size: 12px !important; }
  .simple-header > nav > a[aria-current="page"]:not(.btn)::after { display: none; }
  .header-actions { margin-left: auto; gap: 10px; }
  .account-trigger { min-width: 0px; min-height: 38px; padding: 10px 12px; gap: 8px; font-size: 9px; }
  .header-discord { width: 36px; height: 38px; }
  .header-discord svg { width: 22px; }
  .account-links { width: 210px; right: -40px; top: calc(100% + 8px); }
  .wiki-side { position: static; max-height: none; }
  .account-page { padding: 45px 15px; }
  .account-form-panel { padding: 22px; }
  .account-page-heading h1 { font-size: 33px; }
}
@media (max-width: 380px) {
  .simple-header { padding-left: 4%; padding-right: 4%; }
  .simple-header .brand { font-size: 18px; padding-left: 22px; letter-spacing: 1px; }
  .simple-header .brand::before { font-size: 17px; }
  .header-actions { gap: 7px; }
  .account-trigger { padding: 9px; font-size: 8px; }
  .header-discord { width: 31px; }
  .simple-header > nav { gap: 35px; }
}
.simple-header { justify-content: flex-start; gap: 18px; }
.simple-header > nav { margin-left: auto; gap: 0px; }
.simple-header > nav > .download-card { display: inline-flex; gap: 20px; align-items: center; justify-content: center; min-height: 44px; min-width: 145px; padding: 13px 19px; color: rgb(241, 212, 108); background: linear-gradient(rgb(32, 32, 36), rgb(17, 17, 21)); border: 1px solid rgba(230, 195, 60, 0.396); box-shadow: rgba(255, 255, 255, 0.11) 0px 1px inset, rgba(0, 0, 0, 0.2) 0px 5px 18px; letter-spacing: 1px; font: 600 11px Georgia, serif !important; }
.simple-header > nav > .download-card:hover { background: rgba(237, 203, 73, 0.063); border-color: rgb(240, 210, 78); color: rgb(255, 230, 136); }
.simple-header > nav > .download-card::after { display: none !important; }
.download-card > span { font-size: 17px; line-height: 1; }
.header-actions { gap: 12px; }
.header-wiki { color: rgb(222, 222, 231); }
.header-wiki svg { width: 27px; height: 27px; fill: currentcolor; }
.header-wiki:hover { color: rgb(255, 255, 255); background: rgb(50, 50, 61); border-color: rgb(199, 199, 213); }
.simple-header .brand { margin-right: 20px; }
@media (max-width: 1100px) {
  .simple-header { height: 82px; min-height: 82px; gap: 12px; }
  .simple-header > nav > .download-card { min-width: 130px; padding: 12px 15px; gap: 15px; font-size: 10px !important; }
  .simple-header .brand { margin-right: 0px; }
  .header-actions { gap: 10px; }
}
@media (max-width: 750px) {
  .simple-header { display: grid; grid-template-columns: auto auto; justify-content: center; height: auto; gap: 13px 10px; padding: 15px 5% 13px; }
  .simple-header > .brand { grid-column: 1 / -1; justify-self: center; margin: 0px 0px 2px; }
  .simple-header > nav { order: 0; grid-area: 2 / 1; display: flex; width: auto; margin: 0px; padding: 0px; border: 0px; justify-content: flex-start; }
  .header-actions { grid-area: 2 / 2; margin: 0px; gap: 9px; }
  .simple-header > nav > .download-card { min-height: 38px; min-width: 110px; padding: 10px 13px; gap: 13px; font-size: 9px !important; }
  .account-trigger { min-height: 38px; padding: 10px 12px; }
  .header-wiki, .header-discord { width: 36px; height: 38px; }
  .header-wiki svg { width: 26px; height: 26px; }
  .account-links { right: -76px; }
  .simple-header > nav > .download-card:hover { background: rgba(237, 203, 73, 0.063); }
}
@media (max-width: 380px) {
  .simple-header { padding-left: 3%; padding-right: 3%; gap: 12px 8px; }
  .simple-header > nav > .download-card { min-width: 96px; gap: 8px; padding: 10px; }
  .account-trigger { font-size: 8px; padding: 10px 9px; gap: 6px; }
  .header-actions { gap: 7px; }
  .header-wiki, .header-discord { width: 31px; }
  .account-links { right: -68px; }
}
.hero.original-game-hero { min-height: 660px; display: block; position: relative; overflow: hidden; background: rgb(7, 7, 9); isolation: isolate; border-bottom: 1px solid rgba(198, 41, 66, 0.333); }
.original-game-hero::after { display: none; }
.game-world-background { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0.65; z-index: -3; filter: none; }
.game-world-shade { position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(7, 7, 9, 0.96) 0%, rgba(7, 7, 9, 0.85) 32%, rgba(7, 7, 9, 0.467) 65%, rgba(7, 7, 9, 0.353)), linear-gradient(0deg, rgb(7, 7, 9) 0%, transparent 35%, rgba(7, 7, 9, 0.2)); z-index: -2; }
.hero-layout { max-width: 1250px; margin: auto; padding: 65px 35px 40px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 70px; align-items: center; }
.original-game-hero .hero-copy { width: auto; max-width: none; margin: 0px; position: relative; z-index: 1; padding: 15px 0px; }
.hero-edition { display: flex; align-items: center; gap: 10px; font-size: 8px; font-weight: 600; letter-spacing: 2px; color: rgb(226, 196, 77); }
.hero-edition > span { width: 6px; height: 6px; background: rgb(224, 53, 76); box-shadow: rgba(214, 39, 69, 0.376) 0px 0px 12px; }
.original-game-hero h1 { font: 400 clamp(40px, 4.1vw, 60px) / 1.22 Cinzel, Georgia, serif; color: rgb(241, 240, 236); margin: 26px 0px; text-shadow: rgba(0, 0, 0, 0.533) 0px 3px 22px; }
.original-game-hero h1 > span { color: rgb(242, 207, 71); background: none; }
.original-game-hero .hero-copy > p { font-size: 13px; line-height: 2; color: rgb(191, 191, 199); max-width: 430px; }
.original-game-hero .actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 32px; }
.hero-primary { padding: 16px 24px; font-size: 10px; gap: 20px; }
.hero-wiki-link { font-size: 11px; color: rgb(224, 203, 129); display: flex; gap: 15px; }
.hero-wiki-link:hover { color: rgb(255, 223, 101); }
.hero-real-facts { display: flex; gap: 13px; align-items: center; flex-wrap: wrap; margin-top: 36px; padding-top: 23px; border-top: 1px solid rgba(255, 255, 255, 0.09); color: rgb(146, 147, 159); font-size: 7px; letter-spacing: 1px; }
.hero-real-facts i { color: rgb(209, 44, 69); font-size: 6px; font-style: normal; }
.hero-character-panel { max-width: 450px; width: 100%; justify-self: end; box-shadow: rgba(0, 0, 0, 0.533) 0px 18px 50px; border: 1px solid rgba(255, 255, 255, 0.133); background: linear-gradient(rgba(21, 20, 25, 0.93), rgba(13, 12, 18, 0.96)); position: relative; }
.hero-character-panel::before { content: ""; position: absolute; top: -1px; left: 22px; right: 22px; height: 2px; background: linear-gradient(90deg, rgb(197, 39, 64), rgb(239, 203, 69), rgb(197, 39, 64)); }
.character-panel-top { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.character-panel-top .tag { font-size: 8px; letter-spacing: 1.6px; }
.capture-mark { border: 1px solid rgba(255, 255, 255, 0.14); color: rgb(165, 165, 177); font-size: 7px; letter-spacing: 1.5px; padding: 4px 7px; }
.original-character-stage { position: relative; min-height: 310px; display: flex; justify-content: center; align-items: center; overflow: hidden; background: radial-gradient(at 50% 55%, rgba(77, 75, 57, 0.07), transparent 70%), rgb(11, 11, 15); padding: 15px 15px 48px; }
.original-character-stage > img { display: block; width: 300px; max-width: 100%; height: auto; object-fit: contain; position: relative; z-index: 1; box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 30px; }
.character-index { position: absolute; top: 5px; right: 15px; color: rgba(255, 255, 255, 0.016); font: 100px / 1 Cinzel, Georgia, serif; }
.character-stage-caption { position: absolute; bottom: 0px; left: 0px; right: 0px; padding: 22px 20px 12px; text-align: center; z-index: 2; background: linear-gradient(transparent, rgb(13, 12, 18) 55%); }
.character-stage-caption > span { color: rgb(141, 142, 158); letter-spacing: 2px; font-size: 6px; }
.character-stage-caption h2 { font-size: 23px; color: rgb(239, 223, 180); margin: 6px 0px 0px; }
.character-choice-row { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.07); }
.character-choice { border-width: 0px 1px 0px 0px; border-style: none solid none none; border-color: currentcolor rgba(255, 255, 255, 0.05) currentcolor currentcolor; border-image: none; background: rgb(18, 17, 23); color: rgb(161, 160, 174); padding: 12px 3px; font: 11px Georgia, serif; min-height: 58px; transition: background 0.15s, color 0.15s; }
.character-choice:last-child { border-right: 0px; }
.character-choice > span { display: block; font: 6px Inter, Arial, sans-serif; color: rgb(102, 102, 116); letter-spacing: 1px; margin-bottom: 7px; }
.character-choice:hover { background: rgb(43, 20, 32); color: rgb(240, 206, 74); }
.character-choice.selected { background: linear-gradient(rgba(82, 19, 41, 0.4), rgb(34, 16, 26)); color: rgb(240, 212, 100); box-shadow: rgb(215, 44, 71) 0px -2px inset; }
.character-choice.selected > span { color: rgb(213, 54, 78); }
.character-caption-line { display: flex; align-items: center; gap: 15px; padding: 15px 18px; min-height: 62px; border-top: 1px solid rgba(255, 255, 255, 0.03); }
.character-caption-line p { color: rgb(153, 152, 165); font-size: 10px; line-height: 1.7; margin: 0px; flex: 1 1 0%; }
.character-caption-line a { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: rgb(237, 203, 73); border: 1px solid rgba(255, 255, 255, 0.082); flex-shrink: 0; }
.hero-bottom-line { max-width: 1180px; margin: 0px auto; padding: 17px 0px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.075); font-size: 7px; letter-spacing: 2px; color: rgb(140, 140, 153); }
.hero-bottom-line i { font-style: normal; color: rgb(181, 39, 63); padding: 0px 15px; font-size: 6px; }
.hero-bottom-line > a { display: flex; align-items: center; gap: 20px; color: rgb(183, 169, 109); }
.realm-stats { margin-top: 0px; }
@media (max-width: 1100px) {
  .hero-layout { gap: 35px; padding: 45px 30px 30px; }
  .original-game-hero h1 { font-size: 45px; }
  .original-game-hero .hero-copy > p { font-size: 12px; }
  .hero-bottom-line { margin: 0px 30px; }
  .hero-character-panel { max-width: 390px; }
  .original-character-stage { min-height: 300px; }
  .hero-real-facts { gap: 10px; font-size: 6px; }
  .hero-primary { padding: 14px 18px; font-size: 9px; }
}
@media (max-width: 850px) {
  .hero-layout { grid-template-columns: 1fr; gap: 30px; padding: 40px 25px 30px; max-width: 650px; }
  .original-game-hero .hero-copy { margin: 0px; width: auto; padding: 0px; text-align: center; }
  .hero-edition { justify-content: center; font-size: 7px; }
  .original-game-hero h1 { font-size: 44px; margin: 22px 0px; }
  .original-game-hero .hero-copy > p { max-width: 450px; margin-left: auto; margin-right: auto; }
  .original-game-hero .actions { justify-content: center; margin-top: 25px; }
  .hero-real-facts { justify-content: center; margin-top: 25px; padding-top: 18px; }
  .hero-character-panel { justify-self: center; max-width: 420px; }
  .hero-bottom-line { padding: 18px 0px; margin: 0px 25px; font-size: 6px; letter-spacing: 1px; }
  .game-world-background { height: 450px; opacity: 0.5; }
  .game-world-shade { background: linear-gradient(0deg, rgb(7, 7, 9) 0%, rgba(7, 7, 9, 0.8) 55%, rgba(7, 7, 9, 0.467)); }
}
@media (max-width: 450px) {
  .hero-layout { padding: 35px 20px 25px; gap: 26px; }
  .original-game-hero h1 { font-size: 36px; }
  .hero-edition { letter-spacing: 1.2px; font-size: 6px; }
  .original-game-hero .hero-copy > p { font-size: 11px; }
  .hero-real-facts { gap: 8px; font-size: 5px; letter-spacing: 0.5px; }
  .original-game-hero .actions { gap: 16px; }
  .hero-wiki-link { font-size: 10px; }
  .original-character-stage { min-height: 290px; padding-left: 10px; padding-right: 10px; }
  .hero-bottom-line { margin: 0px 20px; gap: 15px; letter-spacing: 0.7px; }
  .hero-bottom-line i { padding: 0px 8px; }
  .character-choice { font-size: 10px; }
  .character-caption-line p { font-size: 9px; }
  .character-panel-top { padding: 15px 17px; }
}
.hero.original-game-hero { min-height: 490px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.original-game-hero .hero-layout { display: block; width: 100%; max-width: 1200px; padding: 65px 35px 45px; margin: auto; }
.original-game-hero .hero-copy { max-width: 580px; width: 100%; text-align: left; margin: 0px; padding: 0px; }
.original-game-hero .game-world-background { inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; filter: none; }
.original-game-hero .game-world-shade { background: linear-gradient(90deg, rgba(7, 7, 9, 0.92) 0%, rgba(7, 7, 9, 0.69) 33%, rgba(7, 7, 9, 0.19) 65%, rgba(7, 7, 9, 0.063)), linear-gradient(0deg, rgba(7, 7, 9, 0.85) 0%, transparent 30%, rgba(7, 7, 9, 0.125)); z-index: -2; }
.original-game-hero h1 { font-size: clamp(39px, 4.2vw, 57px); margin: 24px 0px; }
.original-game-hero .hero-copy > p { font-size: 13px; max-width: 430px; color: rgb(208, 208, 214); }
.original-game-hero .hero-edition { justify-content: flex-start; }
.original-game-hero .actions { justify-content: flex-start; }
.original-game-hero .hero-real-facts { justify-content: flex-start; width: max-content; max-width: 100%; margin-top: 30px; }
.original-game-hero .hero-bottom-line { width: calc(100% - 70px); max-width: 1130px; padding: 17px 0px; margin: 0px auto 5px; }
.realm-stats { margin-top: 0px; }
@media (max-width: 850px) {
  .hero.original-game-hero { min-height: 470px; }
  .original-game-hero .hero-layout { max-width: none; padding: 50px 30px 35px; }
  .original-game-hero .game-world-background { height: 100%; object-position: 60% center; opacity: 1; }
  .original-game-hero .game-world-shade { background: linear-gradient(90deg, rgba(7, 7, 9, 0.88), rgba(7, 7, 9, 0.627) 50%, rgba(7, 7, 9, 0.25)), linear-gradient(0deg, rgba(7, 7, 9, 0.69), transparent 50%); }
  .original-game-hero .hero-copy { max-width: 550px; text-align: left; }
  .original-game-hero h1 { font-size: 44px; }
  .original-game-hero .hero-copy > p { margin-left: 0px; max-width: 400px; }
  .original-game-hero .hero-edition { font-size: 7px; }
  .original-game-hero .hero-bottom-line { width: calc(100% - 60px); }
}
@media (max-width: 450px) {
  .hero.original-game-hero { min-height: 460px; }
  .original-game-hero .hero-layout { padding: 40px 22px 30px; }
  .original-game-hero h1 { font-size: 36px; }
  .original-game-hero .hero-copy > p { font-size: 11px; }
  .original-game-hero .hero-real-facts { font-size: 5px; gap: 8px; letter-spacing: 0.4px; }
  .original-game-hero .hero-bottom-line { width: calc(100% - 44px); font-size: 5px; letter-spacing: 0.6px; }
  .original-game-hero .hero-edition { font-size: 6px; letter-spacing: 1px; }
}
.hero.original-game-hero { min-height: 565px; }
.merchant-header-art { position: absolute; inset: 0px; z-index: -3; display: block; }
.original-game-hero .merchant-header-art .game-world-background { position: static; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; filter: none; }
.original-game-hero .game-world-shade { background: linear-gradient(90deg, rgba(7, 7, 9, 0.86) 0%, rgba(7, 7, 9, 0.627) 27%, rgba(7, 7, 9, 0.19) 47%, transparent 66%), linear-gradient(0deg, rgba(7, 7, 9, 0.66), transparent 23%); }
.original-game-hero .hero-layout { padding-top: 70px; padding-bottom: 55px; }
.original-game-hero .hero-copy { max-width: 520px; }
.original-game-hero h1 { font-size: clamp(39px, 4vw, 56px); }
@media (max-width: 850px) {
  .hero.original-game-hero { min-height: 600px; }
  .original-game-hero .merchant-header-art .game-world-background { object-position: 72% center; }
  .original-game-hero .game-world-shade { background: linear-gradient(90deg, rgba(7, 7, 9, 0.83), rgba(7, 7, 9, 0.5) 50%, rgba(7, 7, 9, 0.082)), linear-gradient(0deg, rgba(7, 7, 9, 0.81), transparent 40%); }
  .original-game-hero .hero-layout { padding-top: 80px; padding-bottom: 65px; }
  .original-game-hero .hero-copy { max-width: 470px; }
  .original-game-hero h1 { font-size: 43px; }
}
@media (max-width: 500px) {
  .hero.original-game-hero { min-height: 650px; justify-content: flex-end; }
  .original-game-hero .merchant-header-art .game-world-background { object-position: 75% top; }
  .original-game-hero .game-world-shade { background: linear-gradient(0deg, rgb(7, 7, 9) 0%, rgba(7, 7, 9, 0.93) 28%, rgba(7, 7, 9, 0.604) 50%, rgba(7, 7, 9, 0.125) 78%); }
  .original-game-hero .hero-layout { margin: auto 0px 0px; padding: 260px 22px 30px; }
  .original-game-hero h1 { font-size: 36px; }
  .original-game-hero .hero-copy > p { font-size: 11px; }
  .original-game-hero .hero-real-facts { margin-top: 24px; }
  .original-game-hero .hero-bottom-line { margin-bottom: 5px; }
}
.brief-system-grid { grid-template-columns: 1fr; }
.brief-system-grid .brief-system { max-width: none; }
.original-game-hero .merchant-header-art .game-world-background { object-position: center 35%; filter: none; }
.original-game-hero .game-world-shade { background: linear-gradient(90deg, rgba(7, 7, 9, 0.733) 0%, rgba(7, 7, 9, 0.5) 30%, rgba(7, 7, 9, 0.063) 58%, transparent 78%), linear-gradient(0deg, rgba(7, 7, 9, 0.565), transparent 25%); }
@media (max-width: 850px) {
  .original-game-hero .merchant-header-art .game-world-background { object-position: 70% 35%; }
  .original-game-hero .game-world-shade { background: linear-gradient(90deg, rgba(7, 7, 9, 0.79), rgba(7, 7, 9, 0.5) 45%, rgba(7, 7, 9, 0.063)), linear-gradient(0deg, rgba(7, 7, 9, 0.69), transparent 45%); }
}
@media (max-width: 500px) {
  .original-game-hero .merchant-header-art .game-world-background { object-position: 74% top; }
  .original-game-hero .game-world-shade { background: linear-gradient(0deg, rgb(7, 7, 9) 0%, rgba(7, 7, 9, 0.93) 26%, rgba(7, 7, 9, 0.5) 50%, rgba(7, 7, 9, 0.063) 78%); }
}
.ranking-calendar { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 25px; align-items: stretch; }
.ranking-calendar > #clasament { padding: 27px; display: flex; flex-direction: column; min-width: 0px; margin: 0px; }
.ranking-calendar > #clasament h2 { font-size: 29px; margin-top: 12px; }
.ranking-calendar > #clasament .empty { display: flex; flex: 1 1 0%; align-items: center; justify-content: center; flex-direction: column; min-height: 250px; padding: 30px 15px; }
.ranking-calendar > #clasament .empty b { font-size: 21px; }
.ranking-calendar > .compact-calendar { margin: 0px; width: 100%; min-width: 0px; padding: 24px; align-self: stretch; box-sizing: border-box; display: flex; flex-direction: column; }
.compact-calendar .calendar-toolbar { margin-bottom: 18px; gap: 12px; align-items: center; }
.compact-calendar .calendar-toolbar h3 { font-size: 23px; margin-top: 8px; }
.compact-calendar .calendar-controls { gap: 5px; }
.compact-calendar .calendar-controls button { min-height: 30px; padding: 4px 8px; font-size: 9px; }
.compact-calendar .calendar-week { font-size: 9px; margin-bottom: 9px; gap: 5px; }
.compact-calendar .calendar-days { gap: 5px; }
.compact-calendar .calendar-days button { min-height: 34px; height: 34px; font-size: 11px; }
.compact-calendar .calendar-legend { font-size: 8px; gap: 12px; padding: 14px 0px; }
.compact-calendar .calendar-legend small { font-size: 7px; margin-left: 0px; width: 100%; }
.compact-calendar .day-detail { padding-top: 13px; min-height: 70px; }
.compact-calendar .day-detail h4 { font-size: 11px; margin: 0px 0px 8px; }
.compact-calendar .day-detail p { font-size: 10px; }
.compact-calendar .calendar-toolbar .tag { font-size: 8px; }
.community-highlights .event-layout { display: block; }
.community-highlights .event-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.community-highlights .next-event, .community-highlights .discord-panel { margin: 0px; }
.community-highlights .heading { margin-bottom: 25px; }
.hero.original-game-hero .hero-layout { padding-bottom: 55px; }
.hero.original-game-hero { min-height: 530px; }
@media (max-width: 1050px) {
  .compact-calendar .calendar-toolbar { flex-wrap: wrap; }
  .compact-calendar .calendar-controls { margin-left: auto; }
  .compact-calendar .calendar-days button { min-height: 32px; height: 32px; }
  .ranking-calendar > .compact-calendar { padding: 21px; }
  .ranking-calendar > #clasament { padding: 24px; }
}
@media (max-width: 750px) {
  .ranking-calendar { grid-template-columns: 1fr; gap: 20px; }
  .ranking-calendar > #clasament .empty { min-height: 180px; }
  .ranking-calendar > .compact-calendar { padding: 22px; }
  .compact-calendar .calendar-toolbar { flex-flow: wrap; }
  .compact-calendar .calendar-controls { width: auto; gap: 7px; }
  .compact-calendar .calendar-controls button { padding: 5px 10px; min-height: 32px; font-size: 10px; }
  .compact-calendar .calendar-days button { min-height: 37px; height: 37px; }
  .compact-calendar .calendar-legend small { width: auto; margin-left: auto; }
  .community-highlights .event-sidebar { grid-template-columns: 1fr; gap: 20px; }
  .hero.original-game-hero { min-height: 500px; }
}
@media (max-width: 450px) {
  .compact-calendar .calendar-toolbar h3 { font-size: 21px; }
  .compact-calendar .calendar-controls button { font-size: 9px; padding: 5px 8px; }
  .compact-calendar .calendar-legend small { width: 100%; margin: 0px; }
  .hero.original-game-hero { min-height: 530px; }
}
.story .features { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.brief-strip { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
@media (max-width: 600px) {
  .story .features, .brief-strip { grid-template-columns: 1fr; }
  .brief-strip span { border-right: 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.086); }
  .brief-strip span:last-child { border-bottom: 0px; }
}
.ranking-calendar.community-row { grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 20px; padding-top: 30px; align-items: stretch; }
.community-row > #clasament { padding: 23px; min-width: 0px; }
.community-row > #clasament h2 { font-size: 27px; }
.community-row > #clasament .eyebrow { font-size: 8px; letter-spacing: 1.4px; gap: 8px; }
.community-row > #clasament .eyebrow::before { width: 20px; }
.community-row > #clasament .empty { min-height: 220px; padding: 25px 0px; }
.community-row > #clasament .empty b { font-size: 18px; line-height: 1.5; }
.community-row > #clasament .empty > span:last-child { font-size: 11px; }
.community-row > .compact-calendar { padding: 20px; display: flex; min-width: 0px; }
.community-row .calendar-toolbar { flex-direction: column; align-items: flex-start; gap: 13px; margin-bottom: 15px; }
.community-row .calendar-toolbar h3 { font-size: 22px; margin-top: 7px; }
.community-row .calendar-controls { width: 100%; justify-content: space-between; margin: 0px; }
.community-row .calendar-controls button { padding: 4px 9px; font-size: 9px; min-height: 28px; }
.community-row .calendar-days, .community-row .calendar-week { gap: 4px; }
.community-row .calendar-days button { height: 29px; min-height: 29px; font-size: 10px; }
.community-row .calendar-legend { font-size: 7px; gap: 9px; padding: 12px 0px; }
.community-row .calendar-legend small { font-size: 7px; }
.community-row .day-detail { min-height: 60px; padding-top: 12px; }
.community-row .day-detail h4 { font-size: 10px; }
.community-row .day-detail p { font-size: 9px; }
.community-row > .discord-panel { margin: 0px; padding: 28px 25px; display: flex; flex-direction: column; min-width: 0px; align-self: stretch; }
.community-row > .discord-panel .tag { font-size: 8px; position: relative; z-index: 1; }
.community-row > .discord-panel h3 { font-size: 30px; line-height: 1.35; margin-top: 40px; position: relative; z-index: 1; }
.community-row > .discord-panel p { font-size: 12px; line-height: 1.9; max-width: 235px; margin-bottom: 35px; }
.community-row > .discord-panel .discord-button { margin-top: auto; padding: 15px 10px; font-size: 10px; }
.community-row > .discord-panel small { font-size: 9px; line-height: 1.8; margin-top: 14px; }
.community-row > .discord-panel .discord-emblem { top: 48px; right: 23px; font-size: 85px; opacity: 0.7; }
@media (max-width: 1050px) {
  .ranking-calendar.community-row { gap: 15px; }
  .community-row > #clasament { padding: 20px; }
  .community-row > .compact-calendar { padding: 17px; }
  .community-row > .discord-panel { padding: 25px 20px; }
  .community-row > .discord-panel h3 { font-size: 26px; }
  .community-row > #clasament .empty b { font-size: 17px; }
  .community-row > #clasament .eyebrow { font-size: 7px; letter-spacing: 0.8px; }
  .community-row > #clasament .eyebrow::before { width: 12px; }
}
@media (max-width: 850px) {
  .ranking-calendar.community-row { grid-template-columns: 1fr 1fr; gap: 20px; }
  .community-row > .discord-panel { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; padding: 25px; }
  .community-row > .discord-panel .tag { grid-column: 1; }
  .community-row > .discord-panel h3 { grid-area: 2 / 1; margin: 17px 0px; font-size: 27px; }
  .community-row > .discord-panel p { grid-column: 1; margin: 0px; max-width: none; }
  .community-row > .discord-panel .discord-button { grid-area: 2 / 2; align-self: center; margin: 0px; }
  .community-row > .discord-panel small { grid-area: 3 / 2; margin: 0px; }
  .community-row > .discord-panel .discord-emblem { top: 20px; right: 30px; font-size: 70px; }
  .community-row .calendar-days button { height: 33px; min-height: 33px; }
}
@media (max-width: 600px) {
  .ranking-calendar.community-row { grid-template-columns: 1fr; padding-top: 25px; }
  .community-row > .discord-panel { grid-column: 1; display: flex; padding: 26px; }
  .community-row > .discord-panel h3 { margin: 25px 0px 15px; }
  .community-row > .discord-panel p { margin: 0px 0px 25px; }
  .community-row > .discord-panel .discord-button { width: 100%; align-self: stretch; }
  .community-row > .discord-panel small { margin-top: 12px; }
  .community-row .calendar-toolbar { flex-flow: wrap; align-items: center; }
  .community-row .calendar-controls { width: auto; gap: 7px; margin-left: auto; }
  .community-row .calendar-days button { height: 37px; min-height: 37px; }
  .community-row > #clasament .empty { min-height: 180px; }
  .community-row > #clasament .eyebrow { font-size: 8px; }
  .community-row > .compact-calendar { padding: 22px; }
}
#noutati .update-layout { grid-template-columns: 1fr; }
.server-brief .brief-system-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 20px; align-items: stretch; }
.server-brief .brief-system { display: flex; flex-direction: column; gap: 12px; padding: 25px; min-width: 0px; height: 100%; border-top: 2px solid rgba(213, 42, 66, 0.27); }
.server-brief .brief-symbol { font-size: 32px; line-height: 1.2; min-width: 0px; }
.server-brief .brief-system > div { min-width: 0px; }
.server-brief .brief-system .tag { font-size: 8px; letter-spacing: 1.4px; }
.server-brief .brief-system h3 { font-size: 22px; line-height: 1.4; margin: 14px 0px 12px; }
.server-brief .brief-system p { font-size: 12px; line-height: 1.9; }
.server-brief .brief-system:nth-child(2) { border-top-color: rgba(237, 203, 73, 0.333); }
.server-brief .brief-system:nth-child(3) { border-top-color: rgba(213, 42, 66, 0.27); }
@media (max-width: 950px) {
  .server-brief .brief-system-grid { gap: 15px; }
  .server-brief .brief-system { padding: 20px; }
  .server-brief .brief-system h3 { font-size: 20px; }
  .server-brief .brief-system .tag { font-size: 7px; letter-spacing: 0.8px; }
  .server-brief .brief-system p { font-size: 11px; }
}
@media (max-width: 700px) {
  .server-brief .brief-system-grid { grid-template-columns: 1fr; gap: 15px; }
  .server-brief .brief-system { display: flex; flex-direction: row; align-items: flex-start; gap: 18px; padding: 23px; }
  .server-brief .brief-symbol { min-width: 35px; font-size: 34px; }
  .server-brief .brief-system h3 { font-size: 22px; margin: 10px 0px; }
  .server-brief .brief-system .tag { font-size: 8px; }
  .server-brief .brief-system p { font-size: 12px; }
}
.server-brief .brief-system-grid { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.35fr); grid-template-rows: 1fr 1fr; gap: 0px 35px; margin: 30px 0px 45px; }
.server-brief .brief-system-grid > .brief-system { min-height: 0px; height: auto; max-width: none; border: 0px; border-radius: 0px; box-shadow: none; background: transparent; padding: 25px 0px; display: flex; flex-direction: row; gap: 20px; align-items: flex-start; }
.server-brief .brief-system-grid > .brief-system:first-child { grid-area: 1 / 1 / 3; display: flex; flex-direction: column; justify-content: center; padding: 35px; background: radial-gradient(at left top, rgba(181, 28, 48, 0.125), transparent 75%), linear-gradient(135deg, rgb(25, 19, 25), rgb(14, 14, 18)); border: 1px solid rgba(197, 43, 66, 0.27); position: relative; overflow: hidden; }
.server-brief .brief-system-grid > .brief-system:first-child::after { content: "⊘"; position: absolute; right: -15px; bottom: -35px; font: 210px Georgia; color: rgba(255, 255, 255, 0.01); pointer-events: none; }
.server-brief .brief-system-grid > .brief-system:first-child .brief-symbol { font-size: 50px; color: rgb(214, 51, 75); margin-bottom: 10px; }
.server-brief .brief-system-grid > .brief-system:first-child h3 { font-size: 29px; line-height: 1.45; max-width: 300px; position: relative; z-index: 1; }
.server-brief .brief-system-grid > .brief-system:first-child p { max-width: 310px; position: relative; z-index: 1; }
.server-brief .brief-system-grid > .brief-system:nth-child(2) { grid-area: 1 / 2; border-top: 1px solid rgba(237, 203, 73, 0.208); border-bottom: 1px solid rgba(255, 255, 255, 0.075); }
.server-brief .brief-system-grid > .brief-system:nth-child(3) { grid-area: 2 / 2; border-bottom: 1px solid rgba(255, 255, 255, 0.075); }
.server-brief .brief-system-grid > .brief-system:not(:first-child) .brief-symbol { font-size: 34px; min-width: 40px; line-height: 1.3; color: rgb(228, 198, 76); margin-top: 5px; }
.server-brief .brief-system-grid > .brief-system:not(:first-child) h3 { font-size: 23px; margin: 10px 0px; }
.server-brief .brief-system-grid > .brief-system .tag { font-size: 8px; letter-spacing: 1.4px; }
.server-brief .brief-system-grid > .brief-system p { font-size: 12px; line-height: 1.9; }
.server-brief .activity-cards { display: grid; grid-template-columns: minmax(0px, 1.1fr) minmax(0px, 1fr); grid-template-rows: 1fr 1fr; gap: 0px 35px; }
.server-brief .activity-card { margin: 0px; min-width: 0px; background: transparent; box-shadow: none; border: 0px; padding: 23px 0px; position: relative; }
.server-brief .activity-card:first-child { grid-area: 1 / 1 / 3; display: flex; flex-direction: column; justify-content: center; padding: 35px; border: 1px solid rgba(255, 255, 255, 0.11); background: radial-gradient(at right bottom, rgba(237, 203, 73, 0.063), transparent 70%), linear-gradient(rgb(23, 23, 29), rgb(14, 14, 19)); min-height: 325px; overflow: hidden; }
.server-brief .activity-card:first-child::after { content: "⚑"; position: absolute; right: 25px; bottom: 30px; font: 110px Georgia; color: rgba(237, 203, 73, 0.035); pointer-events: none; }
.server-brief .activity-card:first-child .activity-icon { float: none; font-size: 45px; color: rgb(237, 203, 73); margin-bottom: 24px; }
.server-brief .activity-card:first-child h3 { font-size: 29px; margin: 17px 0px; position: relative; z-index: 1; }
.server-brief .activity-card:first-child p { max-width: 350px; min-height: 0px; position: relative; z-index: 1; }
.server-brief .activity-card:first-child a { margin-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.075); }
.server-brief .activity-card:nth-child(2) { grid-area: 1 / 2; border-top: 1px solid rgba(213, 42, 66, 0.227); border-bottom: 1px solid rgba(255, 255, 255, 0.075); padding-right: 65px; }
.server-brief .activity-card:nth-child(3) { grid-area: 2 / 2; border-bottom: 1px solid rgba(255, 255, 255, 0.075); padding-right: 65px; }
.server-brief .activity-card:not(:first-child) .activity-icon { position: absolute; right: 8px; top: 27px; font-size: 34px; float: none; margin: 0px; color: rgb(199, 49, 73); }
.server-brief .activity-card:not(:first-child) h3 { font-size: 23px; margin: 10px 0px; }
.server-brief .activity-card:not(:first-child) p { min-height: 0px; font-size: 12px; line-height: 1.9; margin: 10px 0px; }
.server-brief .activity-card:not(:first-child) a { border: 0px; padding-top: 8px; }
.server-brief .activity-card .tag { font-size: 8px; letter-spacing: 1.3px; }
.server-brief .brief-note { margin-top: 22px; }
@media (max-width: 950px) {
  .server-brief .brief-system-grid, .server-brief .activity-cards { column-gap: 25px; }
  .server-brief .brief-system-grid > .brief-system:first-child, .server-brief .activity-card:first-child { padding: 28px; }
  .server-brief .brief-system-grid > .brief-system:first-child h3 { font-size: 25px; }
  .server-brief .activity-card:first-child h3 { font-size: 25px; }
  .server-brief .brief-system-grid > .brief-system:not(:first-child) h3, .server-brief .activity-card:not(:first-child) h3 { font-size: 21px; }
  .server-brief .brief-system-grid > .brief-system { gap: 15px; }
}
@media (max-width: 700px) {
  .server-brief .brief-system-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: 0px; margin-bottom: 35px; }
  .server-brief .brief-system-grid > .brief-system:first-child { grid-area: auto / 1; padding: 25px; margin-bottom: 20px; display: block; }
  .server-brief .brief-system-grid > .brief-system:first-child .brief-symbol { font-size: 35px; margin-bottom: 15px; }
  .server-brief .brief-system-grid > .brief-system:first-child h3 { max-width: none; font-size: 25px; }
  .server-brief .brief-system-grid > .brief-system:first-child p { max-width: none; }
  .server-brief .brief-system-grid > .brief-system:nth-child(2), .server-brief .brief-system-grid > .brief-system:nth-child(3) { grid-area: auto / 1; padding: 23px 5px; }
  .server-brief .activity-cards { grid-template-columns: 1fr; grid-template-rows: auto; gap: 0px; }
  .server-brief .activity-card:first-child { grid-area: auto / 1; padding: 25px; min-height: 0px; margin-bottom: 20px; }
  .server-brief .activity-card:first-child .activity-icon { font-size: 34px; margin-bottom: 18px; }
  .server-brief .activity-card:first-child h3 { font-size: 26px; }
  .server-brief .activity-card:first-child p { max-width: none; }
  .server-brief .activity-card:nth-child(2), .server-brief .activity-card:nth-child(3) { grid-area: auto / 1; padding: 25px 60px 25px 5px; }
  .server-brief .activity-card:not(:first-child) .activity-icon { right: 10px; top: 30px; }
  .server-brief .activity-card:not(:first-child) h3 { margin-right: 0px; }
}
.realm-stats { grid-template-columns: 1.2fr repeat(3, minmax(0px, 1fr)); }
.brief-strip { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.brief-strip span { border-bottom: 0px; }
.brief-strip span:last-child { border-right: 0px; }
.server-brief .brief-system-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 0px 40px; margin: 32px 0px 50px; padding: 0px; border-top: 1px solid rgba(237, 203, 73, 0.19); border-bottom: 1px solid rgba(255, 255, 255, 0.094); background: transparent; }
.server-brief .brief-system-grid > .brief-system:first-child { grid-area: 1 / 1 / auto / -1; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 25px; padding: 27px 5px; background: transparent; box-shadow: none; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgba(255, 255, 255, 0.075); border-image: none; border-radius: 0px; overflow: visible; }
.server-brief .brief-system-grid > .brief-system:first-child::after { display: none; }
.server-brief .brief-system-grid > .brief-system:first-child .brief-symbol { font-size: 32px; margin: 0px; min-width: 43px; color: rgb(214, 51, 75); }
.server-brief .brief-system-grid > .brief-system:first-child > div { display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px 35px; align-items: center; width: 100%; }
.server-brief .brief-system-grid > .brief-system:first-child .tag { grid-area: 1 / 1; }
.server-brief .brief-system-grid > .brief-system:first-child h3 { grid-area: 2 / 1; font-size: 25px; line-height: 1.4; max-width: none; margin: 2px 0px; }
.server-brief .brief-system-grid > .brief-system:first-child p { grid-area: 1 / 2 / 3; max-width: none; margin: 0px; font-size: 12px; color: rgb(168, 167, 180); }
.server-brief .brief-system-grid > .brief-system:nth-child(2) { grid-area: 2 / 1; padding: 25px 5px; border: 0px; background: transparent; box-shadow: none; }
.server-brief .brief-system-grid > .brief-system:nth-child(3) { grid-area: 2 / 2; padding: 25px 5px; border: 0px; background: transparent; box-shadow: none; }
.server-brief .brief-system-grid > .brief-system:not(:first-child) .brief-symbol { font-size: 28px; min-width: 40px; color: rgb(237, 203, 73); }
.server-brief .brief-system-grid > .brief-system:not(:first-child) h3 { font-size: 21px; margin: 9px 0px; }
.server-brief .brief-system-grid > .brief-system:not(:first-child) p { font-size: 12px; }
.server-brief .brief-system-grid > .brief-system .tag { font-size: 7px; letter-spacing: 1.5px; }
.ranking-calendar.community-row { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 25px; }
.community-row > #clasament { padding: 28px; }
.community-row > #clasament .eyebrow { font-size: 9px; letter-spacing: 1.7px; }
.community-row > #clasament .empty { min-height: 200px; padding: 25px 10px; }
.community-row > #clasament .empty b { font-size: 22px; }
.community-row > .discord-panel { grid-area: auto; display: flex; flex-direction: column; padding: 30px; }
.community-row > .discord-panel .tag, .community-row > .discord-panel h3, .community-row > .discord-panel p, .community-row > .discord-panel .discord-button, .community-row > .discord-panel small { grid-area: auto; }
.community-row > .discord-panel h3 { font-size: 32px; margin: 25px 0px 18px; }
.community-row > .discord-panel p { max-width: 330px; margin: 0px 0px 25px; font-size: 13px; }
.community-row > .discord-panel .discord-button { margin-top: auto; width: 100%; align-self: stretch; }
.community-row > .discord-panel small { margin-top: 12px; }
.community-row > .discord-panel .discord-emblem { font-size: 95px; top: 37px; right: 30px; }
.calendar-section { padding-top: 55px; }
.calendar-section > .heading { max-width: 760px; margin: 0px auto 25px; }
.calendar-section > .heading h2 { font-size: 29px; }
.calendar-section > .lower-calendar { max-width: 760px; margin: 0px auto; padding: 28px; }
.lower-calendar .calendar-toolbar { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.lower-calendar .calendar-toolbar h3 { font-size: 25px; }
.lower-calendar .calendar-controls { width: auto; margin-left: auto; gap: 8px; }
.lower-calendar .calendar-controls button { font-size: 10px; padding: 6px 12px; min-height: 32px; }
.lower-calendar .calendar-days button { height: 40px; min-height: 40px; font-size: 12px; }
.lower-calendar .calendar-legend { font-size: 9px; padding: 17px 0px; }
.lower-calendar .calendar-legend small { font-size: 8px; }
.lower-calendar .day-detail { min-height: 65px; padding-top: 16px; }
.lower-calendar .day-detail h4 { font-size: 12px; }
.lower-calendar .day-detail p { font-size: 11px; }
@media (max-width: 1000px) {
  .realm-stats { grid-template-columns: 1fr 1fr; }
  .realm-stats .stat-heading { grid-column: auto; }
  .realm-stats .realm-stat { border-top: 0px; border-left: 1px solid rgba(255, 255, 255, 0.07); }
  .realm-stats .realm-stat:nth-child(3) { border-left: 0px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
  .realm-stats .realm-stat:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, 0.07); }
  .server-brief .brief-system-grid { column-gap: 25px; }
  .server-brief .brief-system-grid > .brief-system:first-child > div { gap: 8px 25px; }
  .server-brief .brief-system-grid > .brief-system:first-child h3 { font-size: 23px; }
}
@media (max-width: 700px) {
  .server-brief .brief-system-grid { grid-template-columns: 1fr; gap: 0px; margin: 25px 0px 35px; }
  .server-brief .brief-system-grid > .brief-system:first-child { grid-area: auto / 1; margin: 0px; padding: 24px 5px; gap: 18px; align-items: flex-start; }
  .server-brief .brief-system-grid > .brief-system:first-child > div { display: block; }
  .server-brief .brief-system-grid > .brief-system:first-child h3 { font-size: 23px; margin: 10px 0px; }
  .server-brief .brief-system-grid > .brief-system:first-child p { font-size: 12px; }
  .server-brief .brief-system-grid > .brief-system:nth-child(2), .server-brief .brief-system-grid > .brief-system:nth-child(3) { grid-area: auto / 1; padding: 24px 5px; margin: 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.063); }
  .server-brief .brief-system-grid > .brief-system:nth-child(3) { border-bottom: 0px; }
  .ranking-calendar.community-row { grid-template-columns: 1fr; gap: 20px; }
  .community-row > .discord-panel { grid-column: 1; display: flex; padding: 26px; }
  .community-row > #clasament { padding: 25px; }
  .calendar-section { padding-top: 40px; }
  .calendar-section > .heading h2 { font-size: 26px; }
  .calendar-section > .lower-calendar { padding: 22px; }
  .lower-calendar .calendar-toolbar { flex-wrap: wrap; gap: 15px; }
  .lower-calendar .calendar-days button { height: 36px; min-height: 36px; }
  .brief-strip { grid-template-columns: 1fr 1fr; }
  .brief-strip span { border-bottom: 0px; }
  .brief-strip span:first-child { border-right: 1px solid rgba(255, 255, 255, 0.07); }
}
@media (max-width: 450px) {
  .realm-stats .stat-heading { grid-column: 1 / -1; }
  .realm-stats .realm-stat:nth-child(2) { border-left: 0px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
  .realm-stats .realm-stat:nth-child(3) { border-left: 1px solid rgba(255, 255, 255, 0.07); }
  .realm-stats .realm-stat:nth-child(4) { grid-column: 1 / -1; border-left: 0px; }
  .lower-calendar .calendar-controls { margin-left: 0px; width: 100%; justify-content: space-between; }
  .lower-calendar .calendar-days button { height: 32px; min-height: 32px; }
  .lower-calendar .calendar-legend small { width: 100%; margin: 0px; }
}
.server-brief.equal-card-rows .brief-system-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); grid-template-rows: auto; grid-auto-rows: 1fr; gap: 22px; margin: 28px 0px 35px; padding: 0px; border: 0px; background: none; align-items: stretch; }
.server-brief.equal-card-rows .brief-system-grid > .brief-system { grid-area: auto; position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 18px; padding: 28px; margin: 0px; min-width: 0px; min-height: 285px; height: 100%; max-width: none; background: linear-gradient(135deg, rgb(28, 29, 36), rgb(16, 17, 22)); border-width: 2px 1px 1px; border-style: solid; border-color: rgba(225, 194, 66, 0.5) rgba(255, 255, 255, 0.106) rgba(255, 255, 255, 0.106); border-image: none; border-radius: 4px; box-shadow: rgba(255, 255, 255, 0.016) 0px 1px inset; overflow: hidden; }
.server-brief.equal-card-rows .brief-system-grid > .brief-system::after { display: none; }
.server-brief.equal-card-rows .brief-system-grid > .brief-system .brief-symbol { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; min-width: 42px; font: 30px / 1 Georgia, serif; color: rgb(237, 203, 73); background: rgba(237, 203, 73, 0.035); border: 1px solid rgba(237, 203, 73, 0.145); border-radius: 50%; margin: 0px; flex-shrink: 0; }
.server-brief.equal-card-rows .brief-system-grid > .brief-system > div { display: block; width: 100%; min-width: 0px; }
.server-brief.equal-card-rows .brief-system-grid > .brief-system .tag { display: block; font: 7px Inter, Arial, sans-serif; letter-spacing: 1.5px; color: rgb(201, 184, 111); margin: 0px; }
.server-brief.equal-card-rows .brief-system-grid > .brief-system h3 { font: 400 23px / 1.4 Cinzel, Georgia, serif; max-width: none; color: rgb(238, 238, 241); margin: 13px 0px 12px; position: static; }
.server-brief.equal-card-rows .brief-system-grid > .brief-system p { font: 12px / 1.9 Inter, Arial, sans-serif; color: rgb(166, 167, 178); max-width: none; min-height: 0px; margin: 0px; position: static; }
.server-brief.equal-card-rows .activity-cards { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); grid-template-rows: auto; grid-auto-rows: 1fr; gap: 22px; margin: 0px; padding: 0px; align-items: stretch; }
.server-brief.equal-card-rows .activity-cards > .activity-card { grid-area: auto; position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; min-width: 0px; min-height: 310px; height: 100%; margin: 0px; padding: 28px; background: radial-gradient(at right top, rgba(175, 24, 48, 0.137), transparent 75%), linear-gradient(rgb(27, 17, 25), rgb(16, 13, 19)); border-width: 1px 1px 1px 3px; border-style: solid; border-color: rgba(177, 37, 61, 0.333) rgba(177, 37, 61, 0.333) rgba(177, 37, 61, 0.333) rgb(189, 38, 62); border-image: none; box-shadow: rgba(0, 0, 0, 0.133) 0px 6px 20px; border-radius: 0px; overflow: hidden; }
.server-brief.equal-card-rows .activity-cards > .activity-card::after { display: none; }
.server-brief.equal-card-rows .activity-cards > .activity-card .activity-icon { position: static; display: flex; align-items: center; justify-content: center; float: none; width: 45px; height: 45px; margin: 0px 0px 22px; font: 30px / 1 Georgia, serif; color: rgb(224, 74, 96); background: rgba(178, 32, 55, 0.1); border: 1px solid rgba(189, 38, 62, 0.25); }
.server-brief.equal-card-rows .activity-cards > .activity-card .tag { display: block; font: 7px Inter, Arial, sans-serif; letter-spacing: 1.5px; color: rgb(198, 104, 121); margin: 0px; }
.server-brief.equal-card-rows .activity-cards > .activity-card h3 { font: 400 23px / 1.4 Cinzel, Georgia, serif; color: rgb(240, 230, 236); margin: 13px 0px 12px; position: static; }
.server-brief.equal-card-rows .activity-cards > .activity-card p { font: 12px / 1.9 Inter, Arial, sans-serif; color: rgb(170, 162, 176); min-height: 0px; max-width: none; margin: 0px 0px 23px; position: static; }
.server-brief.equal-card-rows .activity-cards > .activity-card a { display: block; align-self: stretch; font-size: 10px; color: rgb(237, 203, 73); border-top: 1px solid rgba(189, 38, 62, 0.2); padding-top: 16px; margin-top: auto; }
.server-brief.equal-card-rows .activity-cards > .activity-card:hover { border-color: rgba(219, 54, 82, 0.48); background: radial-gradient(at right top, rgba(188, 32, 53, 0.17), transparent 75%), linear-gradient(rgb(33, 19, 29), rgb(18, 14, 22)); }
@media (max-width: 1000px) {
  .server-brief.equal-card-rows .brief-system-grid, .server-brief.equal-card-rows .activity-cards { gap: 17px; }
  .server-brief.equal-card-rows .brief-system-grid > .brief-system, .server-brief.equal-card-rows .activity-cards > .activity-card { padding: 23px; min-height: 290px; }
  .server-brief.equal-card-rows .brief-system-grid > .brief-system h3, .server-brief.equal-card-rows .activity-cards > .activity-card h3 { font-size: 21px; }
  .server-brief.equal-card-rows .brief-system-grid > .brief-system p, .server-brief.equal-card-rows .activity-cards > .activity-card p { font-size: 11px; }
}
@media (max-width: 700px) {
  .server-brief.equal-card-rows .brief-system-grid, .server-brief.equal-card-rows .activity-cards { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 16px; }
  .server-brief.equal-card-rows .brief-system-grid { margin-bottom: 30px; }
  .server-brief.equal-card-rows .brief-system-grid > .brief-system, .server-brief.equal-card-rows .activity-cards > .activity-card { grid-area: auto; padding: 25px; min-height: 0px; height: auto; }
  .server-brief.equal-card-rows .brief-system-grid > .brief-system { gap: 17px; }
  .server-brief.equal-card-rows .brief-system-grid > .brief-system h3, .server-brief.equal-card-rows .activity-cards > .activity-card h3 { font-size: 23px; }
  .server-brief.equal-card-rows .brief-system-grid > .brief-system p, .server-brief.equal-card-rows .activity-cards > .activity-card p { font-size: 12px; }
  .server-brief.equal-card-rows .activity-cards > .activity-card .activity-icon { margin-bottom: 18px; }
  .server-brief.equal-card-rows .activity-cards > .activity-card a { margin-top: 0px; }
}
.server-brief .brief-strip.detailed-strip { display: grid; grid-template-columns: 1fr 1fr; padding: 0px; border-top: 1px solid rgba(237, 203, 73, 0.208); border-bottom: 1px solid rgba(237, 203, 73, 0.208); background: linear-gradient(110deg, rgb(24, 21, 29), rgb(17, 17, 22)); margin-bottom: 37px; }
.detailed-strip > .realm-summary, .detailed-strip > .class-summary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 17px; padding: 27px 15px; min-height: 115px; }
.detailed-strip > .realm-summary { border-right: 1px solid rgba(255, 255, 255, 0.07); }
.detailed-strip strong { font: 500 9px / 1.5 Inter, Arial, sans-serif; color: rgb(155, 153, 168); letter-spacing: 2.4px; }
.summary-names { display: flex; justify-content: center; align-items: center; gap: 17px; flex-wrap: wrap; }
.summary-names b { font: 400 16px Cinzel, Georgia, serif; letter-spacing: 1.5px; }
.summary-names i { font-style: normal; font-size: 6px; color: rgb(111, 100, 114); line-height: 1; }
.kingdom-names .name-shinsoo { color: rgb(223, 104, 119); }
.kingdom-names .name-chunjo { color: rgb(227, 203, 102); }
.kingdom-names .name-jinno { color: rgb(121, 153, 209); }
.class-names b { color: rgb(217, 199, 143); font-size: 16px; letter-spacing: 1px; }
.class-names i { font-size: 13px; color: rgb(138, 117, 64); }
.server-brief .summary-subtitle { display: flex; align-items: center; gap: 15px; font: 600 11px / 1.5 Inter, Arial, sans-serif; letter-spacing: 3px; margin: 0px 0px 20px; color: rgb(226, 201, 87); }
.server-brief .summary-subtitle::before { content: ""; width: 25px; height: 2px; background: rgb(226, 201, 87); }
.server-brief .summary-subtitle::after { content: ""; flex: 1 1 0%; height: 1px; background: rgba(226, 201, 87, 0.133); }
.server-brief .events-subtitle { color: rgb(221, 114, 131); margin-top: 35px; }
.server-brief .events-subtitle::before { background: rgb(205, 51, 78); }
.server-brief .events-subtitle::after { background: rgba(205, 51, 78, 0.19); }
.server-brief.equal-card-rows .brief-system-grid { margin-top: 0px; margin-bottom: 0px; }
.server-brief.equal-card-rows .brief-system-grid > .brief-system h3 { margin-top: 0px; }
.server-brief.equal-card-rows .brief-system-grid > .brief-system { gap: 22px; min-height: 265px; }
.server-brief.equal-card-rows .activity-cards { margin-top: 0px; }
@media (max-width: 850px) {
  .summary-names { gap: 12px; }
  .summary-names b { font-size: 14px; letter-spacing: 0.8px; }
  .class-names b { font-size: 14px; }
  .detailed-strip strong { font-size: 8px; letter-spacing: 1.7px; }
  .detailed-strip > .realm-summary, .detailed-strip > .class-summary { padding: 25px 12px; gap: 15px; }
}
@media (max-width: 550px) {
  .server-brief .brief-strip.detailed-strip { grid-template-columns: 1fr; margin-bottom: 30px; }
  .detailed-strip > .realm-summary { border-right: 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.063); }
  .detailed-strip > .realm-summary, .detailed-strip > .class-summary { min-height: 100px; padding: 22px 12px; }
  .summary-names { gap: 16px; }
  .summary-names b, .class-names b { font-size: 15px; }
  .server-brief .summary-subtitle { font-size: 10px; letter-spacing: 2px; gap: 12px; }
  .server-brief .events-subtitle { margin-top: 30px; }
  .server-brief.equal-card-rows .brief-system-grid > .brief-system { min-height: 0px; }
}
.simple-header > .brand, footer > .brand { display: flex; align-items: center; gap: 13px; padding-left: 0px; letter-spacing: 0px; text-shadow: none; }
.simple-header > .brand::before { display: none; }
.simple-header > .brand .return-logo { display: block; width: 64px; height: 64px; object-fit: contain; border-radius: 3px; border: 1px solid rgba(158, 53, 66, 0.17); box-shadow: rgba(144, 19, 42, 0.09) 0px 0px 15px; flex-shrink: 0; }
.simple-header > .brand .return-wordmark { display: block; font: 500 23px / 1.2 Cinzel, Georgia, serif; color: rgb(238, 225, 190); letter-spacing: 0.5px; }
.simple-header > .brand .return-wordmark em { color: rgb(226, 195, 93); font-style: normal; }
.simple-header > .brand .return-wordmark small { display: block; text-align: left; font: 9px / 1.5 Georgia, serif; letter-spacing: 1px; text-transform: none; color: rgb(184, 169, 149); margin-top: 6px; }
.simple-header { min-height: 94px; height: 94px; }
.wiki-side { top: 94px; max-height: calc(-94px + 100vh); }
footer > .brand { gap: 11px; align-self: flex-start; }
footer > .brand .return-logo { width: 48px; height: 48px; object-fit: contain; border: 1px solid rgba(143, 42, 54, 0.145); border-radius: 3px; }
footer > .brand .return-wordmark { font: 500 17px / 1.3 Cinzel, Georgia, serif; color: rgb(213, 198, 159); }
footer > .brand .return-wordmark em { color: rgb(200, 169, 90); font-style: normal; }
footer > .brand .return-wordmark small { display: block; font: 8px / 1.6 Georgia, serif; letter-spacing: 0.5px; color: rgb(143, 133, 147); margin-top: 4px; }
@media (max-width: 1100px) {
  .simple-header { height: 88px; min-height: 88px; }
  .simple-header > .brand { gap: 10px; }
  .simple-header > .brand .return-logo { width: 57px; height: 57px; }
  .simple-header > .brand .return-wordmark { font-size: 21px; }
  .simple-header > .brand .return-wordmark small { font-size: 8px; letter-spacing: 0.7px; }
  .wiki-side { top: 88px; max-height: calc(-88px + 100vh); }
}
@media (max-width: 750px) {
  .simple-header { height: auto; min-height: 0px; padding-top: 13px; padding-bottom: 13px; }
  .simple-header > .brand { justify-self: center; margin-bottom: 5px; gap: 12px; }
  .simple-header > .brand .return-logo { width: 62px; height: 62px; }
  .simple-header > .brand .return-wordmark { font-size: 24px; }
  .simple-header > .brand .return-wordmark small { font-size: 9px; letter-spacing: 1px; }
  .wiki-side { position: static; max-height: none; }
}
@media (max-width: 380px) {
  .simple-header > .brand .return-wordmark { font-size: 22px; }
  .simple-header > .brand .return-logo { width: 56px; height: 56px; }
  .simple-header > .brand .return-wordmark small { font-size: 8px; }
}

.simple-header { height: 124px; min-height: 124px; background: radial-gradient(at 12% 50%, rgba(91, 8, 23, 0.533) 0%, rgba(41, 5, 13, 0.467) 24%, transparent 56%), linear-gradient(100deg, rgb(8, 1, 2) 0%, rgb(23, 4, 7) 40%, rgb(11, 5, 8) 77%, rgb(8, 6, 9)); border-top: 1px solid rgba(178, 34, 58, 0.4); border-bottom: 1px solid rgba(194, 154, 60, 0.25); box-shadow: rgba(0, 0, 0, 0.467) 0px 8px 28px; padding-left: 4%; padding-right: 5%; }
.simple-header > .brand { gap: 17px; margin-right: 30px; }
.simple-header > .brand .return-logo { display: block; width: 110px; height: 110px; object-fit: contain; flex-shrink: 0; border: 0px; border-radius: 0px; box-shadow: none; mask-image: radial-gradient(69% 69%, rgb(0, 0, 0) 54%, rgba(0, 0, 0, 0.8) 66%, transparent 76%); filter: brightness(1.12) contrast(1.03); }
.simple-header > .brand .return-wordmark { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; letter-spacing: 0px; min-width: 190px; }
.simple-header > .brand .return-title-top { font: 600 16px / 1 "Cormorant Garamond", Georgia, serif; letter-spacing: 6px; text-transform: uppercase; color: rgb(221, 208, 175); margin-left: 3px; }
.simple-header > .brand .return-title-main { display: block; font: 600 30px / 0.95 "Cormorant Garamond", Georgia, serif; letter-spacing: 4px; text-transform: uppercase; color: rgb(237, 207, 131); margin-top: 5px; text-shadow: rgba(0, 0, 0, 0.533) 0px 2px 9px; }
.simple-header > .brand .return-wordmark small { font: italic 500 15px / 1.3 "Cormorant Garamond", Georgia, serif; letter-spacing: 0.5px; color: rgb(195, 175, 164); margin-top: 9px; padding-top: 7px; border-top: 1px solid rgba(204, 156, 75, 0.145); align-self: stretch; text-align: center; text-transform: none; }
.simple-header > nav > .download-card, .simple-header .account-trigger { background: linear-gradient(rgb(38, 17, 24), rgb(16, 8, 13)); border-color: rgba(213, 172, 80, 0.4); color: rgb(234, 214, 156); box-shadow: rgba(255, 255, 255, 0.027) 0px 1px inset; }
.simple-header > nav > .download-card:hover, .simple-header .account-trigger:hover { background: linear-gradient(rgb(60, 20, 32), rgb(28, 10, 18)); border-color: rgb(239, 211, 122); }
.simple-header .header-discord { background: rgb(25, 11, 18); border-color: rgba(189, 122, 120, 0.153); }
.simple-header .header-discord:hover { background: rgb(88, 101, 242); }
.simple-header .header-wiki:hover { background: rgb(51, 33, 42); }
.simple-header .account-links { background: linear-gradient(rgb(36, 16, 26), rgb(16, 7, 14)); border-color: rgba(179, 56, 76, 0.467); }
.wiki-side { top: 124px; max-height: calc(-124px + 100vh); }
footer > .brand .return-wordmark { display: block; }
footer > .brand .return-title-top { font: 500 10px / 1.3 "Cormorant Garamond", Georgia, serif; letter-spacing: 2px; text-transform: uppercase; }
footer > .brand .return-title-main { font: 600 24px / 1.2 "Cormorant Garamond", Georgia, serif; display: block; letter-spacing: 2px; text-transform: uppercase; }
footer > .brand .return-wordmark small { font: italic 500 10px / 1.4 "Cormorant Garamond", Georgia, serif; letter-spacing: 0.3px; }
@media (max-width: 1100px) {
  .simple-header { height: 112px; min-height: 112px; padding: 0px 4%; gap: 12px; }
  .simple-header > .brand { gap: 12px; margin-right: 12px; }
  .simple-header > .brand .return-logo { width: 100px; height: 100px; }
  .simple-header > .brand .return-wordmark { min-width: 172px; }
  .simple-header > .brand .return-title-top { font-size: 14px; letter-spacing: 5px; }
  .simple-header > .brand .return-title-main { font-size: 28px; letter-spacing: 3.5px; }
  .simple-header > .brand .return-wordmark small { font-size: 14px; letter-spacing: 0.3px; }
  .wiki-side { top: 112px; max-height: calc(-112px + 100vh); }
}
@media (max-width: 750px) {
  .simple-header { height: auto; min-height: 0px; padding: 10px 5% 15px; gap: 12px 10px; background: radial-gradient(at 50% 20%, rgba(105, 14, 35, 0.467), transparent 65%), linear-gradient(rgb(21, 2, 7), rgb(8, 6, 9)); }
  .simple-header > .brand { gap: 13px; margin: 0px; justify-self: center; }
  .simple-header > .brand .return-logo { width: 114px; height: 114px; }
  .simple-header > .brand .return-wordmark { min-width: 183px; }
  .simple-header > .brand .return-title-top { font-size: 16px; letter-spacing: 5px; }
  .simple-header > .brand .return-title-main { font-size: 30px; letter-spacing: 4px; }
  .simple-header > .brand .return-wordmark small { font-size: 15px; letter-spacing: 0.4px; }
  .wiki-side { position: static; max-height: none; }
}
@media (max-width: 380px) {
  .simple-header > .brand { gap: 8px; }
  .simple-header > .brand .return-logo { width: 100px; height: 100px; }
  .simple-header > .brand .return-wordmark { min-width: 170px; }
  .simple-header > .brand .return-title-top { font-size: 14px; }
  .simple-header > .brand .return-title-main { font-size: 28px; }
  .simple-header > .brand .return-wordmark small { font-size: 14px; }
}
.simple-header > .brand .return-title-top { font-variant: normal; font-feature-settings: "smcp" 0, "c2sc" 0, "onum" 0; letter-spacing: 5px; }
.simple-header > .brand .return-title-top { font-family: Cinzel, Georgia, serif; font-variant-numeric: lining-nums; }
.simple-header > .brand .return-title-top .return-two { font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 1em; line-height: inherit; vertical-align: baseline; letter-spacing: 0px; }
.simple-header > .brand .return-wordmark { align-items: center; }
.simple-header > .brand .return-title-top { margin-left: 0px; }
.simple-header > .brand .return-wordmark small { font-style: normal; text-align: center; align-self: stretch; }
.simple-header .account-trigger { justify-content: center; }
.simple-header .header-wiki { display: flex; align-items: center; justify-content: center; padding: 0px; }
.simple-header .header-wiki svg { display: block; flex-shrink: 0; }
/* Whole event cards are links. */
.activity-cards>a.activity-card{color:inherit;text-decoration:none;cursor:pointer}.activity-cards>a.activity-card:focus-visible{outline:2px solid #edcb49;outline-offset:5px}.activity-cards>a.activity-card p{margin-bottom:0!important}