:root {
  color-scheme: dark;
  --bg: #17100d;
  --panel: #211a15;
  --line: #66513a;
  --gold: #e3bf7b;
  --text: #eee4d1;
  --muted: #b6a58e;
  --teal: #b6cda8;
  --danger: #ffb3a0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
}
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.65; background: radial-gradient(ellipse at 50% 20%, #4b30241a, transparent 65%), #17100d; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold); }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.world-backdrop { position: absolute; inset: 0 0 auto; height: 640px; pointer-events: none; background: linear-gradient(#17100dc9, #17100d), url('/assets/game/world.webp') center 35% / cover; opacity: .6; }
.site-header { position: absolute; top: 25px; left: 50%; transform: translateX(-50%); z-index: 5; width: calc(100% - 64px); max-width: 1440px; height: 78px; display: flex; align-items: stretch; background: linear-gradient(180deg, #4b3628, #2a1f19 16%, #251a15 78%, #35261b); border: 1px solid #9a7750; box-shadow: inset 0 0 0 3px #1c130e, inset 0 0 0 4px #71523977, 0 8px 28px #000a; }
.site-header::before, .site-header::after { content: ''; position: absolute; height: 9px; width: 9px; top: 33px; border: 1px solid #b89355; background: #352619; transform: rotate(45deg); }
.site-header::before { left: -5px; }.site-header::after { right: -5px; }
.brand { padding: 0 30px; display: flex; align-items: center; color: #e8c183; font: bold 32px Georgia, 'Times New Roman', serif; letter-spacing: -.035em; text-shadow: 0 2px 1px #000, 0 0 12px #d6a25422; border-right: 1px solid #73563866; }
.site-header nav { display: flex; flex: 1; align-items: stretch; padding: 0 12px; }
.site-header nav a { display: flex; align-items: center; padding: 0 21px; font: bold 14px Georgia, serif; color: #d8c29d; white-space: nowrap; text-transform: uppercase; text-shadow: 0 2px #000; }
.site-header nav a:hover, .site-header nav a[aria-current=page] { color: #f3d9a7; background: #b8843433; }
.account-link { padding: 0 25px; display: flex; align-items: center; gap: 13px; color: #ccb18a; font-size: 12px; white-space: nowrap; border-left: 1px solid #73563866; }
.header-download { margin: 7px; min-width: 144px; display: flex; justify-content: center; align-items: center; color: #f2d49e; font: bold 15px Georgia, serif; text-transform: uppercase; border: 1px solid #a0703f; background: linear-gradient(#8b3d25, #5d2019); box-shadow: inset 0 0 0 3px #3a1c14; text-shadow: 0 2px #32120d; }
.header-download:hover { background: linear-gradient(#a54e2e, #762c1f); color: #fff1ca; }
.menu-toggle { display: none; }
main { position: relative; }
.page-shell { position: relative; max-width: 1240px; margin: auto; padding: 175px 32px 90px; min-height: 70vh; }
h1, h2, h3, h4 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; line-height: 1.17; }
h1 { font-size: 48px; margin: 0 0 20px; color: #f0d2a0; }
h2 { font-size: 34px; margin: 0; color: #e6c28a; }
h3 { font-size: 25px; }
p { margin: 12px 0; }
.intro { color: #c1af96; max-width: 760px; }
.home-page { position: relative; }
.game-hero { min-height: 760px; height: 100svh; max-height: 1250px; position: relative; display: flex; justify-content: center; align-items: flex-end; overflow: hidden; background: #352b23; border-bottom: 2px solid #8b6741; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.hero-vignette { position: absolute; inset: 0; background: linear-gradient(0deg, #100b08 0%, #120a0666 19%, transparent 46%, #130c0633 80%, #120c08aa), radial-gradient(ellipse at center, transparent 25%, #0b070744 100%); }
.hero-center { position: relative; z-index: 1; text-align: center; margin-bottom: 105px; padding: 35px 22px 0; width: 100%; }
.game-logo { display: block; margin: 0 auto; font: bold clamp(94px, 10vw, 176px)/.95 Georgia, 'Times New Roman', serif; letter-spacing: -.065em; padding-right: .065em; color: #f1d28e; -webkit-text-stroke: 1px #6b3a13; text-shadow: 0 2px #2d1708, 0 4px #75501e, 0 7px 3px #1a0e07, 0 0 35px #000, 0 0 80px #120900; }
.hero-subtitle { margin: 18px 0 27px; color: #f0d3a3; font: 15px Georgia, serif; letter-spacing: .36em; padding-left: .36em; text-shadow: 0 2px 6px #000, 0 0 20px #000; }
.actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 28px; }
.hero-center .actions { justify-content: center; }
.button { min-height: 52px; padding: 13px 30px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; border: 1px solid #ca9855; background: linear-gradient(#963e26, #612217); color: #f8ddb2; font: bold 15px Georgia, serif; text-transform: uppercase; text-shadow: 0 2px 1px #34150c; box-shadow: inset 0 0 0 3px #39170f, inset 0 0 0 4px #bb804038, 0 3px 12px #0006; }
.button:hover { background: linear-gradient(#b3502f, #7a2c1b); color: #fff0d1; border-color: #e3b774; }
.button.secondary { background: linear-gradient(#5b4933, #34281e); color: #f0d3a1; box-shadow: inset 0 0 0 3px #211811, inset 0 0 0 4px #ad86502b, 0 3px 12px #0006; }
.button.secondary:hover { background: linear-gradient(#715a3b, #483322); }
.hero-center .button { min-width: 222px; }
.development-note { font-size: 11px; color: #d7c5ab; margin-top: 20px; text-shadow: 0 1px 4px #000; }
.hero-scroll { position: absolute; z-index: 1; bottom: 22px; left: 50%; transform: translateX(-50%); text-align: center; color: #c6ac84; font-size: 11px; text-transform: uppercase; letter-spacing: .18em; }
.hero-scroll span { display: block; font-size: 29px; line-height: 1; }
.home-content { max-width: 1340px; padding: 0 35px 58px; margin: auto; }
.realm-strip { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 15px 0; border-bottom: 1px solid #59432b; color: #bfa784; }
.realm-status { display: flex; align-items: center; gap: 12px; }
.realm-strip strong { font-size: 12px; font-weight: 400; }
.realm-strip small { font-size: 10px; color: #a18d73; }
.realm-strip br { display: none; }.realm-strip strong::after { content: ' · '; color: #6c573c; padding: 0 8px; }
.status-dot { height: 6px; width: 6px; border-radius: 50%; background: #8a8171; flex-shrink: 0; }
.status-dot.online { background: #a5b878; box-shadow: 0 0 7px #a5b87855; }.status-dot.offline { background: #c48467; }
.text-link { color: #d4ad73; font-size: 13px; }.text-link:hover { color: #ffe0a4; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 25px; margin: 44px 0 25px; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { border: 1px solid #705335; background: linear-gradient(120deg, #302319, #201711); padding: 27px; position: relative; }
.news-card { padding: 0; overflow: hidden; }.news-art { display: block; height: 210px; border-bottom: 1px solid #705335; overflow: hidden; }
.news-art img { display: block; height: 100%; width: 100%; object-fit: cover; object-position: center 30%; }
.news-copy { padding: 25px; }.news-card h3 { margin: 12px 0; color: #e5c18b; }.news-card p { color: #ad997e; font-size: 13px; line-height: 1.7; }.news-card .text-link { display: inline-block; margin-top: 13px; }
.meta { color: #b18b58; text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.empty { border-top: 1px solid #60462e; border-bottom: 1px solid #60462e; background: #261b1455; padding: 26px; color: #b3a087; font-size: 14px; }
.world-feature { position: relative; height: 650px; overflow: hidden; border-block: 2px solid #795330; }
.world-feature > img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.feature-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #120b07ed 0%, #120b07aa 31%, transparent 72%), linear-gradient(0deg, #140c0877, transparent 50%); }
.world-feature-copy { position: absolute; top: 50%; left: max(6vw, calc((100vw - 1220px) / 2)); transform: translateY(-50%); max-width: 460px; padding-right: 30px; }
.world-feature-copy h2 { font-size: 52px; text-shadow: 0 3px 10px #000; }.world-feature-copy p { color: #d2bfa3; margin: 24px 0 32px; font-size: 16px; }
.game-features { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid #795330; gap: 2px; background: #795330; }
.image-feature { display: block; position: relative; height: 550px; overflow: hidden; background: #20150f; }
.image-feature > img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.image-feature::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #100907 5%, #120a08aa 29%, transparent 75%); }
.image-feature > div { position: absolute; z-index: 1; bottom: 45px; left: 7%; right: 7%; text-align: center; }
.image-feature h2 { font-size: 37px; color: #ebc388; text-shadow: 0 2px 8px #000; }.image-feature p { color: #c0aa8e; max-width: 470px; margin: 14px auto; font-size: 14px; }.image-feature .text-link { text-transform: uppercase; font-size: 11px; letter-spacing: .07em; }
.home-account { padding: 70px 30px 80px; text-align: center; background: radial-gradient(ellipse at bottom, #46302066, transparent); }.home-account h2 { font-size: 31px; }.home-account p { color: #ad9679; font-size: 14px; }.home-account .actions { justify-content: center; }
.panel { background: linear-gradient(135deg, #2b211aee, #201712ee); border: 1px solid #755537; box-shadow: inset 0 0 0 3px #1b120b66; padding: 30px; margin-top: 28px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }.narrow { max-width: 580px; margin-inline: auto; }
.form-grid { display: grid; gap: 18px; margin-top: 25px; }label { display: grid; gap: 7px; font-size: 13px; color: #d2baa0; }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid #7f6245; background: #150f0b; color: #e9d6b8; padding: 9px 12px; border-radius: 0; box-shadow: inset 0 2px 4px #0008; }
input:focus, textarea:focus { border-color: #d7ac70; }textarea { min-height: 160px; resize: vertical; }
.hint { font-size: 12px; color: #a38e74; }.form-status { min-height: 1.5em; font-size: 13px; overflow-wrap: anywhere; }
.error { color: var(--danger); }.success { color: #c2d5a2; }.notice { padding: 17px 22px; border: 1px solid #7a5834; background: #ae7b2720; color: #d1b88b; font-size: 13px; margin: 25px 0; }
.list { display: grid; gap: 12px; margin-top: 28px; }.list-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 25px; background: linear-gradient(#2e221a, #241912); border: 1px solid #664b31; }.list-row:hover { border-color: #b3864d; }.list-row h3 { margin: 0 0 5px; font-size: 23px; color: #d9b382; }.list-row p { color: #a18b72; font-size: 13px; margin: 0; }.list-row small { color: #ba9663; font-size: 12px; white-space: nowrap; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: #bd9561; margin-bottom: 30px; }.prose { white-space: pre-wrap; overflow-wrap: anywhere; color: #d0bda2; line-height: 1.85; }
.post { padding: 25px 0; border-bottom: 1px solid #5d452f; }.post:last-child { border: 0; }.post .meta { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.character-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 25px; }.character-icon { color: #c29760; font-size: 42px; }.character-list h3 { margin: 8px 0; }.character-list dl { font-size: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; color: #a89172; }.character-list dd { text-align: right; color: #dec5a0; margin: 0; }
.account-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; }.data-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 28px; }.data-list dt, .data-list dd { padding: 16px; border-bottom: 1px solid #5d452f; margin: 0; }.data-list dt { color: #a99171; }.data-list dd { text-align: right; }.pagination { display: flex; gap: 20px; margin-top: 25px; }
.guide-art { height: 480px; position: relative; overflow: hidden; margin-top: 35px; border: 1px solid #795330; }.guide-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }.guide-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #140b06, transparent 80%); }.guide-art > div { position: absolute; z-index: 1; bottom: 30px; left: 35px; right: 35px; max-width: 600px; }.guide-art p { color: #d1ba98; font-size: 14px; }.tribe-list { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 0; border-left: 1px solid #725032; }.tribe-list span { padding: 15px; text-align: center; font: 17px Georgia, serif; color: #d5af79; background: #2c1e15; border: 1px solid #725032; border-left: 0; }
.site-footer { position: relative; padding: 45px max(5vw, calc((100vw - 1230px) / 2)) 40px; border-top: 1px solid #5a3e25; display: grid; grid-template-columns: 1fr auto; gap: 10px 35px; background: #100b08; }.footer-brand { color: #b58b53; font: bold 30px Georgia, serif; letter-spacing: -.04em; }.site-footer p { color: #87735a; font-size: 12px; margin: 0; }.site-footer nav { grid-column: 2; grid-row: 1/3; display: flex; gap: 25px; align-items: center; font-size: 12px; color: #b29672; }.site-footer small { grid-column: 1/-1; font-size: 10px; color: #79664e; margin-top: 17px; }
.skip-link { position: fixed; top: -100px; left: 15px; z-index: 10; background: #261a11; padding: 10px; color: var(--gold); }.skip-link:focus { top: 10px; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }.check-label { display: flex; align-items: start; gap: 10px; }.check-label input { min-height: 0; width: 18px; margin-top: 4px; accent-color: #b88d50; }.thread-title { font-size: 38px; overflow-wrap: anywhere; }.inline-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }.badge { border: 1px solid #926534; padding: 4px 9px; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #d1ab70; }.loading { color: #b39b7b; padding: 40px 0; }.eyebrow { font-size: 11px; text-transform: uppercase; color: #b39163; letter-spacing: .08em; }
@media (min-width: 1750px) { .hero-center { margin-bottom: 125px; }.world-feature { height: 720px; }.game-features .image-feature { height: 650px; } }
@media (max-width: 1120px) { .site-header { width: calc(100% - 40px); }.brand { padding: 0 22px; font-size: 28px; }.site-header nav { padding: 0 8px; }.site-header nav a { padding: 0 13px; font-size: 12px; }.account-link { padding: 0 18px; }.header-download { min-width: 125px; }.world-feature-copy { max-width: 440px; }.world-feature-copy h2 { font-size: 43px; } }
@media (max-width: 850px) { .site-header { top: 18px; height: 68px; }.site-header::before, .site-header::after { top: 28px; }.brand { padding: 0 18px; font-size: 27px; }.site-header nav a { padding: 0 10px; font-size: 11px; }.account-link { padding: 0 14px; font-size: 11px; }.account-link span { display: none; }.header-download { display: none; }.game-hero { min-height: 710px; height: 92svh; }.game-logo { font-size: 120px; }.hero-center { margin-bottom: 100px; }.hero-art { object-position: 52% center; }.news-grid, .character-list { grid-template-columns: repeat(2, 1fr); }.world-feature { height: 560px; }.world-feature-copy { left: 7%; max-width: 360px; }.world-feature-copy h2 { font-size: 40px; }.image-feature { height: 470px; }.image-feature h2 { font-size: 29px; }.image-feature p { font-size: 12px; }.split { grid-template-columns: 1fr; }.page-shell { padding-top: 145px; }.guide-art { height: 420px; } }
@media (max-width: 620px) { .site-header { top: 12px; width: calc(100% - 24px); height: 62px; }.site-header::before, .site-header::after { top: 25px; }.brand { flex: 1; font-size: 27px; border: 0; padding-left: 18px; }.account-link { padding: 0 14px; max-width: 135px; text-overflow: ellipsis; overflow: hidden; border-left: 0; font-size: 11px; }.menu-toggle { display: block; border: 0; border-left: 1px solid #725236; background: #3b291b; padding: 0 17px; color: #d5b581; font: 12px Georgia, serif; text-transform: uppercase; order: 4; }.site-header nav { display: none; position: absolute; top: 61px; left: -1px; right: -1px; padding: 10px; background: #251a12; border: 1px solid #906a3e; box-shadow: 0 10px 20px #0008; }.site-header nav.open { display: grid; grid-template-columns: 1fr 1fr; }.site-header nav a { padding: 16px; font-size: 12px; }.game-hero { min-height: 700px; height: 100svh; max-height: 950px; }.hero-art { object-position: 53% center; }.hero-vignette { background: linear-gradient(0deg, #100907 0%, #140b0766 28%, transparent 60%, #130c0633); }.hero-center { margin-bottom: 95px; padding-inline: 16px; }.game-logo { font-size: clamp(86px, 22vw, 125px); }.hero-subtitle { font-size: 11px; letter-spacing: .25em; margin: 18px 0 26px; }.hero-center .actions { flex-direction: column; gap: 12px; }.hero-center .button { min-width: 235px; }.development-note { font-size: 10px; }.hero-scroll { bottom: 19px; font-size: 10px; }.home-content { padding: 0 22px 40px; }.realm-strip { gap: 12px; align-items: start; }.realm-strip br { display: block; }.realm-strip strong::after { display: none; }.realm-status { align-items: start; gap: 8px; }.status-dot { margin-top: 9px; }.realm-strip .text-link { font-size: 10px; padding-top: 4px; white-space: nowrap; }.realm-strip strong { font-size: 11px; }.realm-strip small { font-size: 9px; }.section-heading { margin: 32px 0 20px; gap: 15px; }.section-heading h2 { font-size: 27px; }.text-link { font-size: 12px; }.news-grid, .character-list { grid-template-columns: 1fr; }.empty { padding: 22px; font-size: 13px; }.world-feature { height: 590px; }.world-feature > img { object-position: 65% center; }.feature-shade { background: linear-gradient(0deg, #140b07f0, #140b0755 65%, transparent); }.world-feature-copy { left: 25px; right: 25px; top: auto; bottom: 42px; transform: none; padding: 0; max-width: none; }.world-feature-copy h2 { font-size: 38px; }.world-feature-copy p { font-size: 14px; max-width: 360px; margin: 20px 0 26px; }.game-features { grid-template-columns: 1fr; }.image-feature { height: 500px; }.image-feature > div { bottom: 35px; left: 25px; right: 25px; }.image-feature h2 { font-size: 35px; }.image-feature p { font-size: 13px; max-width: 350px; }.home-account { padding: 48px 25px 55px; }.home-account h2 { font-size: 28px; }.home-account p { font-size: 13px; }.home-account .actions { gap: 23px; }.page-shell { padding: 118px 22px 55px; }.page-title { font-size: 35px; }.intro { font-size: 14px; }.panel, .card { padding: 23px; }.news-card { padding: 0; }.news-copy { padding: 24px; }.list-row { padding: 20px; align-items: start; }.list-row h3 { font-size: 20px; }.list-row p { font-size: 12px; }.list-row small { font-size: 10px; }.account-heading { align-items: start; flex-wrap: wrap; }.thread-title { font-size: 29px; }.post .meta { display: block; }.data-list dt, .data-list dd { padding: 13px 6px; font-size: 13px; }.guide-art { height: 390px; }.guide-art > div { left: 23px; right: 23px; bottom: 25px; }.guide-art h2 { font-size: 30px; }.guide-art p { font-size: 12px; }.tribe-list { grid-template-columns: repeat(2, 1fr); }.tribe-list span { font-size: 15px; padding: 13px; }.site-footer { display: block; padding: 35px 24px; }.site-footer nav { margin: 20px 0; flex-wrap: wrap; gap: 17px; font-size: 11px; }.site-footer small { display: block; font-size: 9px; }.button { font-size: 13px; padding-inline: 24px; }.page-shell h2 { font-size: 28px; } }
@media (prefers-reduced-motion: no-preference) { a, button { transition: color .16s, background .16s, border-color .16s; }.news-art img, .image-feature > img { transition: transform .45s; }.news-card:hover .news-art img, .image-feature:hover > img { transform: scale(1.035); } }