/* ===========================================================================
   MAVEN RAGNAROK ONLINE — play.mavenro.xyz theme sync
   ---------------------------------------------------------------------------
   Brings the browser-client gate onto the v2 site theme (bright sky, drawn
   chrome wordmark, gold trim) without touching a single element id.

   WHY IT IS A TOKEN REMAP AND NOT A REWRITE

   play.js and the four overlay kits (companion, agency, afk-farm, system-ui)
   between them query 43 element ids in index.html. Rewriting the markup to
   restyle it would put every one of those at risk for a change that is purely
   visual. The v1 shell is driven end-to-end by CSS custom properties declared
   in brand.css — an oxblood ramp (--ox-*), a parchment ink ramp (--parch-*),
   a gold ramp, and a handful of composite --surface-* gradients. Rebinding
   those values re-themes the whole page and leaves the DOM byte-identical.

   THE TWO RAMPS INVERT

   v1 is dark-on-dark: --ox-900 is the page background and --parch-100 is body
   text. v2 is light. So --ox-* is remapped DARKEST-TO-LIGHTEST (ox-950, the
   old near-black page floor, becomes the lightest paper) and --parch-* is
   remapped LIGHTEST-TO-DARKEST (parch-050, the old brightest ink, becomes the
   deepest azure slate). Everything that consumed them keeps working, and
   contrast direction flips as one piece instead of per-rule.

   Loaded AFTER brand.css and play.css. Nothing here is !important except the
   handful of places brand.css sets a literal colour rather than a token.
   ======================================================================== */

:root {
  /* ---- the oxblood ramp becomes sky + paper, inverted ------------------
     Old: ox-100 brightest crimson ... ox-950 near-black.
     New: ox-100 strongest sky ...... ox-950 lightest paper. */
  --ox-100: #22a2e8;
  --ox-150: #3aadeb;
  --ox-200: #5cb8f0;
  --ox-250: #6ec1f2;
  --ox-300: #80c9f4;
  --ox-350: #8ccff6;
  --ox-400: #93d2f7;
  --ox-450: #a6dbf8;
  --ox-500: #bfe5fa;
  --ox-550: #cbeafb;
  --ox-600: #ddf1fc;
  --ox-650: #e6f5fd;
  --ox-700: #f2fafe;
  --ox-750: #efe4cc;
  --ox-800: #f8f2e4;
  --ox-850: #f8f2e4;
  --ox-900: #fdfaf2;
  --ox-950: #fffdf8;

  /* ---- the parchment ink ramp becomes azure slate, inverted ------------ */
  --parch-050: #1e3049;
  --parch-100: #253c58;
  --parch-200: #33526f;
  --parch-300: #4a6b88;
  --parch-400: #6b87a1;
  --parch-500: #93a9bd;
  --parch-600: #aec1d2;
  --parch-700: #cddae6;

  /* ---- gold: v1 used near-white golds as ink on black. On paper those
     vanish, so the bright end darkens into real bronze. ------------------ */
  --gold-000: #8c6a22;
  --gold-050: #96731f;
  --gold-100: #ae8930;
  --gold-200: #d0a936;
  --gold-300: #e6b750;
  --gold-400: #f0ce6e;
  --gold-500: #f7e3a8;
  --gold-600: #ae8930;
  --gold-700: #8c6a22;
  --gold-800: #6f5420;
  --gold-900: #533f18;
  --gold-950: #3b2d11;

  /* ---- flat backgrounds ------------------------------------------------ */
  --bg: #fdfaf2;
  --bg-deep: #fffdf8;
  --bg-field: #f2fafe;
  --bg-band: #bfe5fa;
  --bg-crimson: #5cb8f0;
  --bg-panel: #ffffff;
  --bg-panel-2: #fdfaf2;
  --bg-inset: #f2fafe;
  --bg-scrim: rgb(22 61 90 / 0.42);

  /* ---- ink -------------------------------------------------------------- */
  --ink: #253c58;
  --ink-strong: #1e3049;
  --ink-dim: #4a6b88;
  --ink-mute: #6b87a1;
  --ink-faint: #93a9bd;
  --ink-gold: #8c6a22;
  --ink-gold-bright: #ae8930;
  --ink-on-crimson: #1e3049;
  --ink-on-gold: #2a1f08;

  /* ---- composite surfaces ---------------------------------------------- */
  --surface-crimson:
    linear-gradient(178deg, #ffffff5c 0%, #0000 42%),
    radial-gradient(120% 130% at 50% 0%, #93d2f7 0%, #bfe5fa 52%, #f2fafe 100%);
  --surface-band:
    linear-gradient(180deg, #163d5a14 0%, #0000 24%),
    linear-gradient(180deg, #ddf1fc 0%, #f2fafe 60%, #fdfaf2 100%);
  --surface-panel:
    linear-gradient(178deg, #ffffffcc 0%, #0000 44%),
    linear-gradient(180deg, #ffffff 0%, #fdfaf2 62%, #f8f2e4 100%);
  --surface-raised:
    linear-gradient(178deg, #ffffff 0%, #0000 40%),
    linear-gradient(180deg, #ffffff 0%, #fdfaf2 100%);
  --surface-inset:
    linear-gradient(180deg, #163d5a12 0%, #0000 30%),
    linear-gradient(180deg, #f2fafe 0%, #e6f5fd 100%);

  /* ---- rules and edges -------------------------------------------------- */
  --rule-bright: #d0a936;
  --rule-strong: #c9b489;
  --rule-dark: #163d5a24;
  --rule-ember: #d0a93666;

  /* ---- glows: crimson/ember light does not exist on a daylight page ----- */
  --glow-crimson: 0 0 40px #93d2f755;
  --glow-ember: 0 0 26px #e6b75055;
  --glow-ember-lg: 0 0 90px #e6b75033;
  --glow-gold: 0 0 22px #d0a93630;
  --glow-gold-lg: 0 0 56px #d0a93626;
  --glow-gold-sm: 0 0 10px #d0a93640;
  --glow-gold-xs: 0 0 4px #d0a9364d;
  --glow-online: 0 0 10px #6ea13488;

  /* ---- ember / rose accents used by buttons and the ribbon -------------- */
  --ember-500: #e6b750;
  --ember-600: #d0a936;
  --rose-200: #33526f;
  --rose-300: #4a6b88;

  /* ---- shadows: on paper these must be neutral, not black --------------- */
  --shadow-sm: 0 1px 2px rgb(22 61 90 / 0.08);
  --shadow-md: 0 6px 18px rgb(22 61 90 / 0.10);
  --shadow-lg: 0 18px 48px rgb(22 61 90 / 0.14);
}

/* ---------------------------------------------------------------------------
   Literals brand.css sets directly rather than through a token. Each of these
   is a hard-coded near-black or crimson that the remap above cannot reach.
   ------------------------------------------------------------------------ */

html,
body {
  background: #fdfaf2;
  color: #253c58;
}

/* The page-level vignette and ember field are night-sky effects. On a daylight
   page they read as dirt. */
.mv-ember,
.mv-hero__smoke,
.mv-hero__vignette,
.mv-orn,
.mv-ornament {
  display: none !important;
}

/* The masthead sat on near-black with a crimson underglow. */
.rag-masthead {
  background: linear-gradient(180deg, #fffdf8 0%, #fdfaf2 100%) !important;
  border-bottom: 1px solid #e0d0ae;
  box-shadow: 0 1px 0 #ffffff inset, 0 6px 18px rgb(22 61 90 / 0.06);
}

.rag-nav__link,
.rag-account__link {
  color: #33526f !important;
}

.rag-nav__link:hover,
.rag-nav__link.is-active,
.rag-account__link:hover {
  color: #8c6a22 !important;
}

.rag-nav__menu {
  background: #ffffff !important;
  border: 1px solid #e0d0ae;
  box-shadow: 0 18px 48px rgb(22 61 90 / 0.14);
}

.rag-nav__menu a { color: #33526f !important; }
.rag-nav__menu a:hover { color: #8c6a22 !important; background: #f8f2e4; }

/* Primary button: was a crimson slab with pale gold type. Now gold on ink,
   matching the site's PLAY IN BROWSER control.

   NOTE the !important and the doubled class. brand.css composes the face from
   the --ox-* ramp inside a `.rag-btn.rag-btn--primary` rule, so a single-class
   override here loses on specificity and the button inherits the REMAPPED sky
   ramp — which renders it pale blue and reads as disabled. Verified on the
   first deploy of this file. */
.rag-btn.rag-btn--primary,
.rag-btn--primary {
  --btn-face: linear-gradient(180deg, #f0ce6e 0%, #d0a936 52%, #ae8930 100%) !important;
  --btn-ink: #2a1f08 !important;
  --btn-edge: #8c6a22 !important;
  background: linear-gradient(180deg, #f0ce6e 0%, #d0a936 52%, #ae8930 100%) !important;
  border-color: #8c6a22 !important;
  color: #2a1f08 !important;
  text-shadow: 0 1px 0 #f7e3a8;
}

.rag-btn.rag-btn--primary .rag-btn__label,
.rag-btn.rag-btn--primary .rag-btn__chev { color: #2a1f08 !important; }

.rag-btn.rag-btn--primary:hover {
  background: linear-gradient(180deg, #f7e3a8 0%, #e6b750 52%, #c09a2e 100%) !important;
}

.rag-btn--ghost {
  --btn-face: none;
  --btn-ink: #253c58;
  --btn-edge: #c9b489;
  color: #253c58 !important;
}

/* Panels, plaques and framed boxes. */
.rag-panel,
.rag-plaque,
.rag-card,
.play-card,
.play-panel {
  background: #ffffff !important;
  border-color: #e0d0ae !important;
  color: #253c58;
  box-shadow: 0 6px 18px rgb(22 61 90 / 0.08);
}

.rag-plaque__k { color: #6b87a1 !important; }
.rag-plaque__v { color: #1e3049 !important; }

/* Section headings were gold-on-black display type. */
.rag-section__title,
.rag-heading,
h1, h2, h3, h4, h5, h6 {
  color: #1e3049;
}

.rag-kicker,
.rag-section__num,
.rag-eyebrow {
  color: #ae8930 !important;
}

/* Form fields were black insets. */
input[type='text'],
input[type='password'],
input[type='email'],
select,
textarea {
  background: #ffffff !important;
  border: 1px solid #c9b489 !important;
  color: #1e3049 !important;
}

input::placeholder { color: #93a9bd !important; }

input[type='text']:focus,
input[type='password']:focus,
input[type='email']:focus {
  border-color: #22a2e8 !important;
  outline: 2px solid rgb(34 162 232 / 0.28);
  outline-offset: 1px;
}

label,
.rag-label,
.play-label {
  color: #33526f !important;
}

/* Footer sat on the deepest oxblood. */
.rag-footer,
.rag-footer__body {
  background: #f8f2e4 !important;
  color: #33526f;
}

.rag-footer__legal {
  background: #efe4cc !important;
  color: #4a6b88;
}

.rag-footer__col h6 { color: #8c6a22 !important; }
.rag-footer__col a,
.rag-footer__blurb,
.rag-footer__legal p { color: #4a6b88 !important; }
.rag-footer__col a:hover { color: #8c6a22 !important; }

/* The torn-edge SVGs read as a rock silhouette against night. Against paper
   they only need to be a soft parchment tear. */
.mv-tear__glow { opacity: 0.16 !important; }
.mv-tear__rim,
.mv-tear__rim-hi { opacity: 0.42 !important; }
.mv-tear__chip,
.mv-tear__chiplit { opacity: 0.3 !important; }

/* The status ribbon. */
.rag-ribbon,
.play-ribbon {
  background: linear-gradient(180deg, #ffffff 0%, #f8f2e4 100%) !important;
  color: #4a6b88 !important;
  border-bottom: 1px solid #e0d0ae;
}

.rag-ribbon strong,
.play-ribbon strong { color: #1e3049 !important; }

/* ---------------------------------------------------------------------------
   THE GATE ITSELF — the one screen a player actually reads.
   Sky plate behind it, matching the site hero.
   ------------------------------------------------------------------------ */

.rag-section--tight,
main.rag-section {
  position: relative;
  background:
    linear-gradient(180deg, rgb(255 253 248 / 0.72) 0%, rgb(255 253 248 / 0.9) 62%, #fdfaf2 100%),
    url('/bg/bg01.webp') center 28% / cover no-repeat,
    #f2fafe;
}

/* Loader / stage overlay sat on black. */
.play-loader,
.play-stage {
  background: linear-gradient(180deg, #f2fafe 0%, #fdfaf2 100%) !important;
  color: #253c58 !important;
}

.play-loader__title,
#play-loader-title { color: #1e3049 !important; }
.play-loader__sub,
#play-loader-sub { color: #4a6b88 !important; }

#play-meter {
  background: #ddf1fc !important;
  border: 1px solid #aec1d2;
}

#play-meter > * ,
.play-meter__fill {
  background: linear-gradient(90deg, #22a2e8 0%, #5cb8f0 100%) !important;
}

/* The engine frame itself is the game. It keeps its own dark canvas — that is
   roBrowserLegacy's, not ours, and it is out of scope. */
#ro-engine-frame,
#ro-canvas,
#ro-canvas-mount {
  background: #0b1622;
}

/* ---------------------------------------------------------------------------
   The overlay kits (companion, agency, afk-farm) ship their own dark chrome
   and float over the GAME, not over the page. They stay dark on purpose — a
   pale panel over a dark game canvas is unreadable. Left alone deliberately.
   ------------------------------------------------------------------------ */

/* ===========================================================================
   SIMPLE LOGIN PAGE
   ---------------------------------------------------------------------------
   Per Ramil: "just make it a SIMPLE LOGIN page no MANY TEXT OR EXPLANTION."

   Everything below is HIDDEN, NOT DELETED. play.js and the four overlay kits
   query 43 element ids in this document; #webgl, #connect, #server, #storage,
   #secure, #assets and #client all live inside the preflight list and are
   written to on every boot. `display:none` keeps them in the DOM and keeps
   those writes harmless. Deleting them would throw.

   What survives above the fold: the wordmark, username, password, sign in,
   and one line pointing at registration. That is the whole page.
   ======================================================================== */

/* the 7-item stat ribbon */
.rag-ribbon { display: none !important; }

/* the full primary nav — the wordmark still links home, and the account row
   still carries Log in / Create Account */
.rag-nav { display: none !important; }

/* "05 · ENTER MIDGARD · PLAY IN THE BROWSER — NOTHING TO INSTALL" */
main.rag-section > .rag-wrap > .rag-heading { display: none !important; }

/* "Before you launch" — the four preflight rows. Hidden, still populated. */
.rag-frame:has(.play-checks) { display: none !important; }
.play-checks { display: none !important; }

/* "What actually happens" + the Server Charter plaque — the second .play-gate */
.play-gate + .play-gate { display: none !important; }

/* the four-column footer with its blurb, link lists and charter */
.rag-footer__body { display: none !important; }
.rag-footer .mv-tear { display: none !important; }

.rag-footer__legal {
  background: #f8f2e4 !important;
  border-top: 1px solid #e0d0ae;
  padding-block: 1rem;
}
/* keep only the trademark line; drop the donations sentence */
.rag-footer__legalin p + p { display: none !important; }
.rag-footer__legal p { font-size: 0.72rem; line-height: 1.5; }

/* ---- centre the card ---------------------------------------------------- */
main.rag-section--tight {
  min-height: calc(100vh - 76px);
  display: grid;
  place-items: center;
  padding-block: clamp(1.5rem, 6vh, 4rem);
}

main.rag-section--tight > .rag-wrap {
  width: min(460px, 100%);
}

/* the gate was a two-column grid; with the checks panel gone it is one column */
.play-gate {
  display: block !important;
  grid-template-columns: none !important;
}

#gate-frame {
  width: 100%;
  background: rgb(255 255 255 / 0.94) !important;
  backdrop-filter: blur(2px);
  box-shadow: 0 18px 48px rgb(22 61 90 / 0.16);
}

/* the plate is the page; the card is the only thing on it */
main.rag-section--tight,
main.rag-section {
  background:
    linear-gradient(180deg, rgb(253 250 242 / 0.55) 0%, rgb(253 250 242 / 0.72) 100%),
    url('/bg/gate.webp') center center / cover no-repeat,
    #f2fafe;
}

/* the masthead over a photograph needs its own ground */
.rag-masthead {
  background: rgb(255 253 248 / 0.92) !important;
  backdrop-filter: blur(6px);
}

@media (max-width: 640px) {
  main.rag-section--tight { min-height: calc(100vh - 60px); }
  main.rag-section--tight > .rag-wrap { width: min(400px, 100%); }
}

/* ---------------------------------------------------------------------------
   FINAL PASS — let the art actually show.
   First deploy veiled the plate at 0.55-0.72 alpha to guarantee contrast for
   body copy that no longer exists: the page is a card on a picture now, and
   the card carries its own opaque ground. So the veil drops to a light haze
   that only takes the edge off, and the art reads.
   ------------------------------------------------------------------------ */
main.rag-section--tight,
main.rag-section {
  background:
    linear-gradient(180deg, rgb(242 250 254 / 0.20) 0%, rgb(253 250 242 / 0.14) 100%),
    url('/bg/gate.webp') center center / cover no-repeat,
    #cfe9f7 !important;
}

/* The torn parchment edge under the masthead belongs to the v1 layered-section
   look. Over a single full-bleed plate it reads as a rip across the picture. */
.rag-masthead .mv-tear,
.rag-masthead .rag-torn { display: none !important; }

/* The card is the only opaque thing on the page — give it a real edge. */
#gate-frame {
  background: rgb(255 255 255 / 0.96) !important;
  border: 1px solid rgb(255 255 255 / 0.9);
  box-shadow:
    0 24px 60px rgb(22 61 90 / 0.28),
    0 2px 0 rgb(255 255 255 / 0.7) inset;
}

/* Masthead: glass over the picture rather than a paper bar. */
.rag-masthead {
  background: rgb(255 253 248 / 0.86) !important;
  border-bottom: 1px solid rgb(208 169 54 / 0.35);
}

/* The footer legal line sits on the plate too. */
.rag-footer,
.rag-footer__legal {
  background: rgb(253 250 242 / 0.86) !important;
  border-top: 1px solid rgb(208 169 54 / 0.3);
}