:root { color-scheme: dark; --night: #101a2d; --deep: #0b1322; --surface: #152239; --gold: #f0c887; --white: #f5f7ff; --muted: #aebed3; --line: #2e405a; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--deep); color: var(--white); font: 15px/1.65 'Segoe UI', Arial, sans-serif; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: #ffdda7; text-decoration: underline; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: Cinzel, Georgia, serif; color: var(--white); font-weight: 500; letter-spacing: normal; border: 0; text-transform: none; }
h3:first-letter { font-weight: inherit; }
h1, h2, h3, p { margin: 0 0 16px; }
h2 { font-size: 28px; line-height: 1.3; } h3 { font-size: 18px; }
p { color: var(--muted); } strong { color: inherit; }
.wrap { width: min(1200px, calc(100% - 80px)); margin-inline: auto; }
.site-header { background: var(--night); border-bottom: 1px solid var(--line); }
.nav { min-height: 90px; display: flex; align-items: center; gap: 28px; }
.brand { width: 212px; flex-shrink: 0; } .brand img { display: block; width: 100%; }
.nav nav { display: flex; align-self: stretch; align-items: center; gap: 24px; margin-left: auto; }
.nav nav a { display: flex; align-items: center; min-height: 48px; height: 100%; font-size: 13px; color: #b9c8dc; border-bottom: 2px solid transparent; }
.nav a[aria-current=page] { color: var(--gold); border-color: var(--gold); }
.account-nav { display: flex; gap: 12px; align-items: center; }
.small-link { font-size: 13px; padding: 12px; }
.outline { border: 1px solid #7b694e; border-radius: 3px; color: var(--gold); padding: 10px 20px; min-height: 44px; font-size: 13px; white-space: nowrap; }
.utility { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-block: 8px; font-size: 12px; }
.session-label { margin: 0; margin-left: auto; }
.module-menu { position: relative; width: 100%; } .module-menu summary { cursor: pointer; color: var(--muted); width: fit-content; padding: 8px 0; }
.module-menu nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 24px; padding: 24px; border: 1px solid var(--line); background: var(--surface); }
.module-menu h2 { font-size: 15px; color: var(--gold); } .module-menu nav a { display: block; padding: 6px 0; color: var(--white); }
#submenu.context-menu, #pagemenu.context-menu { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-block: 12px; background: transparent; color: var(--white); border: 0; font-size: 13px; }
.context-menu a { padding: 5px 0; }
#content { padding: 0; background: transparent; border: 0; color: var(--white); }
/* FluxCP defines several numeric and status values with dark colors intended for a white theme. Keep them legible on RuneHaven's dark surfaces. */
#content .online { color: #9ee3b5; }
#content .offline { color: #ffd0d8; }
#content .info-text { color: var(--white); background: #1b3352; border-color: #52749a; }
#content .shop-table, #content .shop-table td { color: var(--white); background: transparent; border-color: var(--line); }
#content .shop-item-name, #content .cost, #content .qty, #content .script-line-num { color: var(--white); }
/* Server information renders totals inside <p>; FluxCP gives these paragraphs black text by default. */
#content .generic-form-table td p { color: var(--white); }
#content .generic-form-table td p.important { color: var(--gold); }
#content .script-line-num { background: #101c30; border-color: var(--line); }
#content input[type=number] { color: var(--white); background: #0c1729; }
#content.inner-content { padding: 34px; margin-block: 20px 55px; min-height: 48vh; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); overflow-x: auto; }
.hero { position: relative; min-height: 568px; display: flex; align-items: center; isolation: isolate; overflow: hidden; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0a152bf2 0%, #0a152bae 37%, #0a152b18 78%), linear-gradient(0deg, #0b1322, transparent 30%); z-index: -1; }
.hero-copy { padding: 65px 0; max-width: 600px; }
.eyebrow { color: var(--gold); letter-spacing: .19em; font-size: 11px; margin-bottom: 24px; }
.hero h1 { font-size: clamp(38px, 4vw, 58px); line-height: 1.2; margin-bottom: 24px; }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero-copy > p:not(.eyebrow) { font-size: 17px; line-height: 1.8; color: #c7d7e9; }
.hero-actions { display: flex; align-items: center; gap: 27px; margin-top: 28px; }
.ornate { display: inline-flex; align-items: center; justify-content: center; text-align: center; width: 265px; min-height: 90px; padding: 20px 35px; background: var(--ornate-image) center / 100% 100% no-repeat; color: #fce8b5; font: 600 14px Cinzel, Georgia, serif; text-shadow: 0 2px 4px #000; }
.ornate:hover { filter: brightness(1.15); text-decoration: none; } .quiet-link { font-size: 13px; color: #d3dfef; }
.caption { position: absolute; right: 40px; bottom: 32px; font-size: 9px; letter-spacing: .25em; color: #dee9fb; }
.server-strip { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: center; }
.server-strip small { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; } .server-strip strong, .server-strip a { font-size: 14px; }
.rate-panel { padding: 40px 0 10px; border-bottom: 1px solid var(--line); }.rate-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }.rate-grid > div { padding: 18px; border: 1px solid #3a4a61; border-radius: 5px; background: linear-gradient(135deg, #1a2d48, #142036); }.rate-grid small { display: block; color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }.rate-grid strong { display: block; margin: 4px 0 6px; color: var(--gold); font: 26px Cinzel, Georgia, serif; }.rate-grid p { margin: 0; font-size: 12px; line-height: 1.45; }
.lower { display: grid; grid-template-columns: 1.45fr 1fr; gap: 64px; padding: 54px 0 64px; }
.section-top { display: flex; align-items: baseline; gap: 20px; justify-content: space-between; }.section-top h2 { font-size: 25px; }.section-top span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.journey-list { list-style: none; margin: 0; padding: 0; }.journey { display: flex; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }.journey h3 { margin-bottom: 6px; }.journey p { font-size: 14px; margin-bottom: 8px; }.journey a { font-size: 13px; }.number { font: 26px Cinzel, Georgia, serif; color: var(--gold); min-width: 38px; }
.welcome { align-self: start; position: relative; overflow: hidden; background: linear-gradient(135deg, #1a2d48, #142036); border: 1px solid #3a4a61; border-radius: 5px; padding: 34px; }.welcome h2 { font-size: 32px; }.mascot { display: block; width: 165px; margin: 0 0 22px auto; }.welcome-links { display: grid; gap: 12px; }.welcome-bottom { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 28px; display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.site-footer { border-top: 1px solid var(--line); background: var(--night); padding: 30px 0; font-size: 12px; }.footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; }.site-footer nav { display: flex; flex-wrap: wrap; gap: 12px 22px; align-content: start; }.preferences label { display: block; }.preferences form { margin-bottom: 14px; }
/* Keep the default form/table semantics and visibility rules, including search-form. */
#content .generic-form, #content .generic-form-div { background: transparent; border: 0; padding: 0; color: var(--white); }
#content .generic-form-table { max-width: 720px; }
#content .generic-form-table th { width: 36%; text-align: left; }
#content .generic-form-table input[type=text], #content .generic-form-table input[type=password], #content .generic-form-table input[type=email] { width: 100%; }
#content .generic-form-table td { overflow-wrap: anywhere; }
#content table { font: inherit; border-collapse: collapse; max-width: 100%; }
#content .horizontal-table, #content .vertical-table, #content .generic-form-table { background: transparent; color: var(--white); border: 1px solid var(--line); }
#content table th, #content table td { padding: 12px; border-color: var(--line); background: transparent; color: var(--white); }
#content table th { background: #101c30; font-weight: 600; }
#content table tr:nth-child(even) td { background: #ffffff04; }
#content input:not([type=checkbox]):not([type=radio]):not([type=hidden]), #content select, #content textarea, .preferences select { max-width: 100%; min-height: 42px; background: #0c1729; color: var(--white); border: 1px solid #526682; border-radius: 3px; padding: 9px 12px; font: inherit; }
#content input[type=checkbox], #content input[type=radio] { accent-color: var(--gold); }
#content label { color: var(--white); } #content .generic-form-table { width: 100%; } #content .generic-form-table td { text-align: left; }
button, #content input[type=submit], #content input[type=button] { min-height: 44px; padding: 10px 20px; background: var(--gold); border: 1px solid var(--gold); color: #172036; border-radius: 3px; font: 600 14px 'Segoe UI', sans-serif; cursor: pointer; }
#content .generic-form input[type=submit], #content .search-form input[type=submit] { background: var(--gold); border-color: var(--gold); color: #172036; font-weight: 600; }
#content .message, .message, #content .notice { color: #e3eeff; background: #1b3352; border: 1px solid #52749a; font-size: 14px; padding: 16px; overflow-wrap: anywhere; }
#content .error { color: #ffd0d8; background: #3a1e2d; padding: 14px; border: 1px solid #b57487; }
#content .red { color: #ffadba; } #content .green { color: #9ee3b5; }
#content .pages { display: flex; flex-wrap: wrap; gap: 8px; } #content .pages a { padding: 8px 12px; }
:focus-visible { outline: 2px solid var(--gold) !important; outline-offset: 4px; }
.skip-link { position: absolute; top: -100px; left: 20px; padding: 12px; background: var(--deep); z-index: 10; }.skip-link:focus { top: 12px; }
@media (min-width: 1600px) { .hero { min-height: 630px; } .hero-art { object-position: center 42%; } }
@media (max-width: 1050px) { .wrap { width: calc(100% - 44px); }.nav { gap: 16px; flex-wrap: wrap; padding-top: 12px; }.brand { width: 175px; }.nav nav { gap: 18px; }.account-nav { margin-left: auto; }.lower { gap: 30px; }.caption { display: none; }.hero-copy { max-width: 530px; }.section-top { display: block; } }
@media (max-width: 740px) {
 .wrap { width: calc(100% - 36px); }.nav { justify-content: space-between; gap: 8px; }.brand { width: 145px; }.account-nav { gap: 8px; }.small-link { font-size: 11px; padding: 5px; }.outline { font-size: 11px; padding: 8px 10px; }
 .nav nav { order: 3; flex-basis: 100%; justify-content: space-between; margin: 0; height: 48px; gap: 10px; }.nav nav a { font-size: 12px; }
 .hero { min-height: 545px; }.hero-art { object-position: 65% center; }.hero::before { background: linear-gradient(90deg, #0a152bee, #0a152b85); }.hero-copy { padding: 45px 0; }.hero-copy > p:not(.eyebrow) { font-size: 14px; max-width: 300px; }.hero-actions { gap: 14px; flex-wrap: wrap; }.ornate { width: 235px; min-height: 80px; font-size: 12px; }.eyebrow { font-size: 10px; }
 .server-strip { grid-template-columns: 1fr 1fr; gap: 18px; }.server-strip strong, .server-strip a { font-size: 12px; }.server-strip small { font-size: 9px; }.rate-grid { grid-template-columns: 1fr 1fr; }.rate-panel { padding-top: 30px; }
 .lower { grid-template-columns: 1fr; padding: 35px 0; gap: 30px; }.section-top h2 { font-size: 22px; }.journey { gap: 12px; }.journey p { font-size: 13px; }.number { font-size: 22px; min-width: 30px; }.welcome { padding: 24px; }
 #content.inner-content { padding: 20px 14px; }.footer-grid { grid-template-columns: 1fr; gap: 24px; }.site-footer nav a { min-height: 44px; display: flex; align-items: center; }
 #content .horizontal-table { display: block; overflow-x: auto; } #content .generic-form-table, #content .generic-form-table tbody, #content .generic-form-table tr, #content .generic-form-table th, #content .generic-form-table td { display: block; width: 100%; text-align: left; }
 #content table th, #content table td { padding: 10px; font-size: 13px; }.module-menu nav { padding: 16px; }.session-label { margin-left: 0; }
}
@media (prefers-reduced-motion: no-preference) { a, button { transition: color .15s, background .15s, filter .15s; } }