:root {
  --gold: #d7a72f;
  --gold-bright: #ffd45b;
  --gold-dark: #6d4c11;
  --blue: #7d90b8;
  --ivory: #d6d1b5;
  --green: #71ca59;
  --red: #df6e55;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: #000; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ivory);
  background-color: #000;
  background-image: url('/assets/og2004/pagebg.jpg');
  background-repeat: repeat-x;
  background-position: center 0;
  font-family: Arial, Helvetica, sans-serif;
}

.masthead {
  height: 112px;
  border-bottom: 1px solid #3f310c;
  background-color: #080808;
  background-image: url('/assets/og2004/topbar-bg.gif');
  background-repeat: repeat-x;
  background-position: top center;
  box-shadow: 0 3px 8px #000;
}

.masthead-inner { width: min(100%, 980px); height: 112px; margin: 0 auto; display: flex; justify-content: center; overflow: hidden; }
.wow-logo { display: block; width: min(586px, 100%); height: auto; object-fit: contain; }

.realm-nav {
  position: relative;
  z-index: 2;
  height: 53px;
  border-top: 1px solid #030303;
  border-bottom: 1px solid #5e4310;
  background-color: #030506;
  background-image: url('/assets/og2004/linksbar-bg.gif');
  background-repeat: repeat-x;
  background-position: center;
  box-shadow: 0 4px 9px #000;
}

.realm-nav-inner {
  width: min(890px, calc(100% - 130px));
  height: 53px;
  margin: 0 auto;
  padding-left: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  color: #d2a32a;
  font: 700 .74rem Georgia, 'Times New Roman', serif;
  text-shadow: 1px 1px #000;
}

.realm-nav-inner i { color: #6e5119; font-style: normal; }
.client-download {
  position: absolute;
  z-index: 3;
  top: 8px;
  left: max(10px, calc(50% - 480px));
  width: 142px;
  height: 37px;
  padding: 0 .55rem 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #765516;
  color: #d9aa35;
  background: linear-gradient(#1c2227, #050709 52%, #11161a);
  font: 700 .64rem Georgia, 'Times New Roman', serif;
  letter-spacing: .025em;
  text-decoration: none;
  text-shadow: 1px 1px #000;
  box-shadow: inset 0 0 0 2px #2c353a, 0 2px 5px #000;
}

.client-download::before,
.client-download::after { content: ''; position: absolute; top: 5px; bottom: 5px; width: 1px; background: #49350f; }
.client-download::before { left: 1.7rem; }
.client-download::after { right: .35rem; }
.client-download span { position: absolute; left: .55rem; width: 12px; height: 12px; border: 2px solid #5b4315; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6a1, #3f7db9 28%, #0d2850 65%); box-shadow: 0 0 5px #2d68a1; }
.client-download:hover { color: #ffe176; border-color: #b48627; filter: brightness(1.16); }
.client-download:focus-visible { outline: 2px solid #f0c14c; outline-offset: 2px; }

.page-frame {
  position: relative;
  width: min(980px, calc(100% - 1.5rem));
  margin: 1.1rem auto 2rem;
  padding: 10px;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 8px;
  border: 1px solid #765618;
  outline: 3px solid #080808;
  background: #050505;
  box-shadow: 0 0 0 5px #222, 0 0 0 7px #050505, 0 10px 35px #000;
}

.page-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid #1d2730;
  box-shadow: inset 0 0 22px #000;
}

.pane {
  position: relative;
  min-width: 0;
  padding: 2.4rem 2.2rem 2.8rem;
  border: 1px solid #745414;
  background-color: rgba(0,0,0,.94);
  background-image:
    url('/assets/og2004/intropane-left-bg.gif'),
    url('/assets/og2004/intropane-right-bg.gif'),
    url('/assets/og2004/intropane-center-bg.gif');
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: left top, right top, center top;
  background-size: auto 100%, auto 100%, auto 100%;
  box-shadow: inset 0 0 28px #000, 0 0 0 3px #171717;
}

.pane-ornament {
  position: absolute;
  top: 8px;
  right: 10%;
  left: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #72510e, #d2a327, #72510e, transparent);
}

.welcome { text-align: left; }
.community-globe { display: block; max-width: 100%; height: auto; margin: -.8rem auto .7rem; }
.kicker { margin: 0 0 .2rem; color: #778db1; font: 700 .58rem Georgia, serif; letter-spacing: .18em; text-align: center; }
h1 { margin: 0 0 1.2rem; color: #d7a72f; font: 700 1.75rem Georgia, 'Times New Roman', serif; text-align: center; text-shadow: 1px 2px #000; }
.intro { margin: 0 0 1.35rem; color: #c8c5b3; font: .78rem/1.55 Arial, sans-serif; }
.dropcap::first-letter { float: left; margin: -.14rem .35rem -.2rem 0; color: #d6ab3c; font: 700 3rem/1 Georgia, serif; text-shadow: 1px 1px #000; }

.features { margin: 0 0 1.6rem; padding: 0; list-style: none; }
.features li { position: relative; margin: .8rem 0; padding-left: 1.7rem; color: #c9c6b4; font-size: .74rem; line-height: 1.35; }
.features li::before { content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 16px; background: url('/assets/og2004/bullet2.gif') no-repeat; }

.realm-status {
  min-height: 61px;
  padding: .65rem .8rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .65rem;
  border: 1px solid #6d511a;
  background: linear-gradient(#111a25, #03070a);
  box-shadow: inset 0 0 0 2px #202b34, 0 2px 5px #000;
}

.status-gem { width: 14px; height: 14px; border: 2px solid #5b481b; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #eaffbd, #62b952 40%, #173a14 75%); box-shadow: 0 0 7px rgba(90,192,74,.7); }
.realm-status small { display: block; margin-bottom: .2rem; color: #7386a5; font: 700 .48rem Arial, sans-serif; letter-spacing: .15em; }
.realm-status strong { color: #ded7b4; font: 700 .78rem Georgia, serif; }
.online { color: var(--green); font-size: .53rem; font-weight: 700; letter-spacing: .13em; }
.realm-footnote { margin: .8rem 0 0; color: #5f6a70; font: italic .65rem Georgia, serif; text-align: center; }

.signup { padding-right: clamp(2.2rem, 5vw, 4.2rem); padding-left: clamp(2.2rem, 5vw, 4.2rem); }
.section-title { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .7rem; text-align: center; }
.section-title > span { height: 1px; background: linear-gradient(90deg, transparent, #8d681d); }
.section-title > span:last-child { transform: scaleX(-1); }
.section-title p { margin: 0 0 .25rem; color: #7588a6; font: 700 .53rem Arial, sans-serif; letter-spacing: .18em; }
h2 { margin: 0; color: #d8a92d; font: 700 clamp(1.55rem, 3vw, 2.15rem) Georgia, 'Times New Roman', serif; text-shadow: 1px 2px #000; }
.subtitle { margin: .55rem 0 1.5rem; color: #777b76; font: italic .72rem Georgia, serif; text-align: center; }

form { width: 100%; max-width: 430px; margin: 0 auto; }
label { display: block; margin: .95rem 0 .35rem; color: #d3a32b; font: 700 .63rem Georgia, serif; text-shadow: 1px 1px #000; }
.field-wrap { position: relative; padding: 3px; border: 1px solid #765718; background: #090b0d; box-shadow: 0 0 0 2px #222a30, 0 2px 5px #000; }
input { width: 100%; height: 2.75rem; padding: 0 4rem 0 .75rem; border: 1px solid #141d24; border-radius: 0; outline: 0; color: #e7ddbd; caret-color: #ffd85b; background: linear-gradient(#101923, #05080b); font: 700 .82rem Arial, sans-serif; box-shadow: inset 0 1px 7px #000; }
input:focus { border-color: #a37a20; box-shadow: inset 0 1px 7px #000, 0 0 8px rgba(204,155,39,.45); }
.count, .reveal { position: absolute; top: 50%; right: .75rem; transform: translateY(-50%); color: #697078; font: 700 .53rem Arial, sans-serif; }
.reveal { padding: .45rem 0; border: 0; color: #ad8429; background: none; cursor: pointer; }
.reveal:hover { color: #f1c757; }
.hint, .privacy { margin: .42rem 0 0; color: #5f686e; font: .58rem/1.4 Arial, sans-serif; }
.message { min-height: 1.2rem; margin-top: .8rem; color: var(--red); font: 700 .68rem/1.4 Arial, sans-serif; text-align: center; }
.message.success { color: #7dcc68; }

.submit {
  width: min(275px, 100%);
  height: 3rem;
  margin: .45rem auto 0;
  display: block;
  border: 1px solid #8b681d;
  outline: 2px solid #141719;
  color: #e6ba46;
  background:
    linear-gradient(90deg, rgba(0,0,0,.75), transparent 18%, transparent 82%, rgba(0,0,0,.75)),
    linear-gradient(#20272c, #080b0d 50%, #010203 53%, #171c20);
  cursor: pointer;
  font: 700 .74rem Georgia, serif;
  letter-spacing: .08em;
  text-shadow: 1px 1px #000;
  box-shadow: inset 0 0 0 2px #323b40, 0 3px 6px #000;
}

.submit::before { content: '[ '; color: #68501b; }
.submit::after { content: ' ]'; color: #68501b; }
.submit:hover { color: #ffe17b; border-color: #c09228; filter: brightness(1.18); }
.submit:active { transform: translateY(1px); }
.submit:disabled { opacity: .55; cursor: wait; }
.privacy { text-align: center; }
.pane-bottom { width: 72%; height: 2px; margin: 1.7rem auto 0; background: linear-gradient(90deg, transparent, #7a5918, #d2a22a, #7a5918, transparent); }

footer { width: min(980px, calc(100% - 2rem)); margin: 0 auto 2rem; color: #6f5a2b; font: 700 .57rem/1.5 Arial, sans-serif; letter-spacing: .08em; text-align: center; text-shadow: 1px 1px #000; }
footer small { display: block; margin-top: .45rem; color: #3f4547; font-size: .52rem; font-weight: 400; letter-spacing: 0; }

@media (max-width: 760px) {
  .masthead, .masthead-inner { height: 92px; }
  .wow-logo { width: min(480px, 100%); }
  .realm-nav-inner { width: 100%; padding: 0 .5rem 0 130px; justify-content: flex-start; gap: .25rem; font-size: .61rem; }
  .realm-nav-inner span:nth-of-type(3), .realm-nav-inner i:nth-of-type(3) { display: none; }
  .client-download { left: 8px; width: 116px; font-size: .56rem; }
  .page-frame { grid-template-columns: 1fr; margin-top: .8rem; }
  .pane { min-height: 520px; }
  .welcome { padding-top: 2.2rem; }
}

@media (max-width: 430px) {
  .masthead, .masthead-inner { height: 76px; }
  .realm-nav { height: 46px; }
  .realm-nav-inner { height: 46px; padding-left: 128px; flex-wrap: wrap; gap: .15rem .3rem; line-height: 1; }
  .realm-nav-inner span:not(:first-of-type), .realm-nav-inner i { display: none; }
  .client-download { top: 5px; height: 35px; }
  .page-frame { width: calc(100% - .8rem); padding: 7px; }
  .pane { padding: 2.4rem 1.45rem 2.6rem; }
  .community-globe { width: 210px; }
  .features li { font-size: .7rem; }
  .signup { min-height: 560px; }
  h2 { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Preserve the original artwork, palette, frames and typography. */
.join-steps { margin: 1.2rem 0 0; padding: .35rem .9rem; list-style: none; border: 1px solid #5e4310; background: linear-gradient(135deg, #211c13, #101215); box-shadow: inset 0 0 0 3px #0b0d0e; }
.join-steps li { display: flex; align-items: center; gap: .8rem; padding: .65rem 0; }
.join-steps li + li { border-top: 1px solid #40341d; }
.join-steps strong { color: var(--gold); font: 700 .8rem Georgia, serif; }
.join-steps .step-number { display: grid; place-items: center; flex: 0 0 2rem; height: 2rem; border: 1px solid #765718; color: #dbb76a; background: #090b0d; font: 700 .85rem Georgia, serif; }
.download-panel { margin-top: 1.8rem; padding-top: 1.3rem; border-top: 1px solid #5e4310; text-align: center; }
.download-panel h3 { color: var(--gold); font: 700 1rem Georgia, serif; }
.download-panel p { color: #b8b6a7; font-size: .75rem; line-height: 1.5; }
.download-link { display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: .66rem; }
.download-link[aria-disabled="true"] { opacity: .55; cursor: default; }
.online.unavailable { color: #b6ab8a; }
.status-gem.unavailable { background: #5c5542; box-shadow: none; }
.hint, .privacy { color: #969d9f; }
.subtitle { color: #a4a69c; }
footer small { color: #888d8e; }
@media (max-width: 760px) {
  .realm-nav-inner { padding-left: .5rem; justify-content: center; }
}