/* ==========================================================================
   Middengeard site theme — the in-game Vitals / menu look (client MenuSkin).
   Loaded LAST on every page, so it overrides each page's inline styles.
   Colours are MenuSkin.java's, converted to hex:
     panel  = taupe slab, 2px gold border, 1px bevel
     row    = light tan card, 1px border, bevel, dark ink
     header = dark band, gold hairline + 2px bottom rule, gold title
     sub    = dark sub-header band with pale-gold text (section titles)
     bars   = recessed track + glossy amber / red / blue fills
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=Pixelify+Sans:wght@400;600;700&family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  /* MenuSkin palette */
  --mg-panel:        #786B57;
  --mg-panel-border: #C7B078;
  --mg-row:          #B8A887;
  --mg-row-border:   #D6C294;
  --mg-row-down:     #D1C29E;
  --mg-hl:           #CCB373;
  --mg-hl-border:    #F0D68F;
  --mg-btn:          #BDAB85;
  --mg-btn-border:   #E0C98F;
  --mg-btn-down:     #D6C7A1;
  --mg-hdr:          #3D3024;
  --mg-hdr-border:   #CCAD6B;
  --mg-sub:          #4F4230;
  --mg-sub-border:   #B89E6B;
  --mg-hud:          #382F24;
  --mg-hud-edge:     #211A12;
  --mg-hud-trim:     #8C754D;
  --mg-text:         #291F12;
  --mg-text-sub:     #4A3C27;
  --mg-title:        #FAE099;
  --mg-header-text:  #F0D99E;
  --mg-light:        #F5E8CC;
  --mg-track:        #332B21;
  --mg-track-border: #706147;
  --mg-amber:        #DBA83D;  --mg-amber-top: #FAD67A;
  --mg-hp:           #B82924;  --mg-hp-top:    #EB5C4D;
  --mg-mp:           #3361BD;  --mg-mp-top:    #70A3F0;
  --mg-ok:           #479E3D;  --mg-ok-top:    #80D16B;

  --mg-bevel: inset 1px 1px 0 rgba(255,255,255,.16), inset -1px -1px 0 rgba(0,0,0,.20);
  --mg-font-ui:   'MedievalSharp', 'Open Sans', serif;
  --mg-font-num:  'Pixelify Sans', 'Open Sans', monospace;
  --mg-font-body: 'Open Sans', system-ui, sans-serif;

  /* Re-point the old page tokens so every page's own CSS picks the new palette. */
  --parchment:      var(--mg-row);
  --parchment-dark: #D9CBA9;
  --ink:            var(--mg-text);
  --ink-light:      var(--mg-text-sub);
  --gold:           var(--mg-title);
  --gold-dim:       var(--mg-hdr-border);
  --blood:          #8E2A1E;
  --blood-bright:   var(--mg-hp-top);
  --forest:         #3E6B33;
  --shadow:         var(--mg-hud-edge);
}

/* ── Page ─────────────────────────────────────────────────────────────── */
html { background: var(--mg-hud-edge); }
body {
  background-color: var(--mg-hud-edge) !important;
  background-image:
    radial-gradient(ellipse 120% 70% at 50% 0%, rgba(140,117,77,.22) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='4' height='4' fill='%23ffffff' fill-opacity='.018'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%23ffffff' fill-opacity='.018'/%3E%3C/svg%3E") !important;
  color: var(--mg-text);
  font-family: var(--mg-font-body) !important;
  font-size: 16px;
  line-height: 1.6;
}
::selection { background: var(--mg-hl); color: var(--mg-text); }
img.px, .px img, img[src*="img/ui/"] { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ── Top bar = HUD slab ───────────────────────────────────────────────── */
.top-bar {
  background: var(--mg-hud) !important;
  border-bottom: 1px solid var(--mg-hud-edge) !important;
  box-shadow: inset 0 -2px 0 var(--mg-hud-trim), 0 2px 0 var(--mg-hud-edge), 0 6px 18px rgba(0,0,0,.45) !important;
}
.top-bar::after { display: none !important; }
.top-bar a {
  font-family: var(--mg-font-ui) !important;
  font-size: 15px !important;
  letter-spacing: .3px !important;
  text-transform: none !important;
  color: var(--mg-light) !important;
  border-radius: 2px;
}
.top-bar a:hover { color: var(--mg-title) !important; background: rgba(250,224,153,.08) !important; }
.top-bar a.active, .top-bar a[aria-current] {
  color: var(--mg-title) !important;
  background: var(--mg-sub) !important;
  box-shadow: inset 0 0 0 1px var(--mg-sub-border), inset 0 -2px 0 var(--mg-hdr-border);
}
.top-bar .nav-logo {
  font-size: 22px !important;
  color: var(--mg-title) !important;
  text-shadow: 0 2px 0 var(--mg-hud-edge);
  display: inline-flex; align-items: center; gap: 8px;
}
.top-bar .nav-logo::before {
  content: ''; width: 26px; height: 26px; flex: none;
  background: url('/img/ui/menu_party.png') center / contain no-repeat;
  image-rendering: pixelated;
}
.top-bar a.locked { opacity: .55 !important; }
.top-bar a.locked .soon-badge {
  font-family: var(--mg-font-num); font-size: 9px !important;
  color: var(--mg-light) !important; background: var(--mg-hp) !important; border-color: var(--mg-hp-top) !important;
}

/* ── Hero / countdown / page header = title band ──────────────────────── */
.hero, .page-header, .dl-hero {
  background: var(--mg-hdr) !important;
  border-bottom: 2px solid var(--mg-hdr-border) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 0 var(--mg-hud-edge);
}
.hero { height: auto !important; min-height: 360px; padding: 56px 0 96px; }
.hero-bg {
  background:
    radial-gradient(ellipse 70% 80% at 50% 30%, rgba(219,168,61,.16) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 15% 80%, rgba(51,97,189,.10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 85% 80%, rgba(184,41,36,.10) 0%, transparent 70%) !important;
}
.hero-texture { opacity: .06 !important; }
.hero-content h1, .page-header h1, .dl-hero h1 {
  font-family: var(--mg-font-ui) !important;
  font-weight: 400 !important;
  color: var(--mg-title) !important;
  letter-spacing: 1px !important;
  text-shadow: 0 3px 0 var(--mg-hud-edge), 0 0 28px rgba(219,168,61,.25) !important;
}
.hero-content h1 span {
  font-family: var(--mg-font-num) !important;
  letter-spacing: 3px !important;
  color: var(--mg-header-text) !important;
  font-size: .3em !important;
}
.hero-tagline, .page-header p, .dl-hero p {
  font-family: var(--mg-font-body) !important;
  font-style: normal !important;
  color: var(--mg-light) !important;
  opacity: .85 !important;
}
.hero-divider { background: var(--mg-hdr-border) !important; }
.hero-divider::before { background: var(--mg-hdr) !important; color: var(--mg-hdr-border) !important; }

/* Countdown → a vitals-style strip of number tiles */
.countdown-banner {
  background: var(--mg-hud) !important;
  border-bottom: 1px solid var(--mg-hud-edge) !important;
  box-shadow: inset 0 -1px 0 var(--mg-hud-trim);
}
.countdown-banner::before { display: none !important; }
.countdown-eyebrow, .countdown-label {
  font-family: var(--mg-font-ui) !important; color: var(--mg-title) !important;
  letter-spacing: .5px !important; text-transform: none !important; font-size: 18px !important;
}
.countdown-unit {
  background: var(--mg-row); border: 1px solid var(--mg-row-border); border-radius: 2px;
  box-shadow: var(--mg-bevel); padding: 6px 10px 4px;
}
.countdown-value, .countdown-sep { font-family: var(--mg-font-num) !important; font-weight: 700 !important; }
.countdown-value { color: var(--mg-text) !important; text-shadow: none !important; }
.countdown-sep { color: var(--mg-hdr-border) !important; align-self: center !important; }
.countdown-unit-label { font-family: var(--mg-font-body) !important; color: var(--mg-text-sub) !important; letter-spacing: .5px !important; }
.countdown-when { font-family: var(--mg-font-num); color: var(--mg-header-text); }
.countdown-note {
  font-family: var(--mg-font-body) !important; font-style: normal !important; color: var(--mg-light) !important;
  background: var(--mg-sub) !important; border: 1px solid var(--mg-sub-border) !important; border-radius: 2px !important;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.08), inset -1px -1px 0 rgba(0,0,0,.25) !important;
  font-size: 17px !important; opacity: 1 !important;
}
/* every paragraph / list in the site uses the game's body face */
p, li, td, th, label, .body-text, .intro-text, .lead, .sub { font-family: var(--mg-font-body) !important; }
.countdown-live { font-family: var(--mg-font-ui) !important; color: var(--mg-ok-top) !important; text-shadow: none !important; }

/* ── Buttons (MenuSkin button: tan, 2px gold border, bevel) ───────────── */
.hero-cta, .dl-btn, .discord-btn, .btn, button.primary, a.primary, .links a {
  font-family: var(--mg-font-ui) !important;
  text-transform: none !important;
  letter-spacing: .3px !important;
  color: var(--mg-text) !important;
  background: var(--mg-btn) !important;
  border: 2px solid var(--mg-btn-border) !important;
  border-radius: 3px !important;
  box-shadow: var(--mg-bevel), 0 2px 0 var(--mg-hud-edge) !important;
  text-shadow: none !important;
  transition: background .12s, transform .05s !important;
}
.hero-cta:hover, .dl-btn:hover, .discord-btn:hover, .btn:hover, button.primary:hover, a.primary:hover, .links a:hover {
  background: var(--mg-btn-down) !important;
}
.hero-cta:active, .dl-btn:active, .discord-btn:active, .btn:active { transform: translateY(1px); box-shadow: var(--mg-bevel) !important; }
.hero-cta { font-size: 18px !important; padding: 12px 34px !important; }

/* ── Main panel (taupe slab) ──────────────────────────────────────────── */
.parchment-wrap { max-width: 1000px !important; }
.parchment {
  background: var(--mg-panel) !important;
  border: 2px solid var(--mg-panel-border) !important;
  border-radius: 3px !important;
  box-shadow: var(--mg-bevel), 0 0 0 2px var(--mg-hud-edge), 0 24px 60px rgba(0,0,0,.55) !important;
  padding: 26px 26px 30px !important;
  color: var(--mg-light);
}
.parchment::before { display: none !important; }
.parchment > p, .parchment .body-text, .parchment .intro-text { color: var(--mg-light); }
/* bold/italic on the taupe panel: gold, like menu highlights; inside tan cards stays dark */
.parchment strong, .parchment b, .parchment em { color: var(--mg-title) !important; }
.parchment :is(.intro, .lore-block, .feature, .class-card, .callout, .highlight, .dl-card, .pkg, .faq-item,
  .skill-card, .step, .rank-panel, .panel, .success-box, .policy-block, .guide, .src-box, .find-item, .stat) :is(strong, b, em) {
  color: #5A2A10 !important;
}
@media (max-width: 720px) { .parchment { padding: 14px 12px 18px !important; } }

/* Section titles → the dark sub-header band with a pale-gold title */
.section-head {
  text-align: left !important;
  margin: 26px 0 10px !important;
  background: var(--mg-sub);
  border: 1px solid var(--mg-sub-border);
  border-radius: 2px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.08), inset -1px -1px 0 rgba(0,0,0,.25);
  padding: 7px 14px 6px;
  display: flex; align-items: center; gap: 10px;
}
.section-head:first-child { margin-top: 0 !important; }
.section-head h2 {
  font-family: var(--mg-font-ui) !important;
  font-weight: 400 !important;
  font-size: 21px !important;
  letter-spacing: .4px !important;
  text-transform: none !important;
  color: var(--mg-header-text) !important;
  margin: 0 !important;
}
.section-head .rule { margin: 0 0 0 auto !important; }
.section-head .rule::before, .section-head .rule::after { display: none !important; }
.section-head .rule span { color: var(--mg-hdr-border) !important; font-size: 12px !important; }

/* ── Cards (MenuSkin row) ─────────────────────────────────────────────── */
.intro, .lore-block, .feature, .class-card, .callout, .highlight, .dl-card, .pkg, .faq-item,
.skill-card, .step, .rank-panel, .community-card, .panel, .success-box, .policy-block,
.guide, .src-box, .find-item, .stat, .img-slot, .dmg {
  background: var(--mg-row) !important;
  border: 1px solid var(--mg-row-border) !important;
  border-radius: 2px !important;
  box-shadow: var(--mg-bevel) !important;
  color: var(--mg-text) !important;
}
.intro, .lore-block { max-width: none !important; margin: 0 0 8px !important; padding: 16px 18px !important; text-align: left !important; }
.intro { font-size: 16px !important; color: var(--mg-text) !important; }
.intro strong, .intro em { color: #5A2A10; }
.intro .drop-cap::first-letter {
  font-family: var(--mg-font-ui) !important; color: #7A2A1A !important;
  font-size: 54px !important;
}
.lore-block {
  font-family: var(--mg-font-ui) !important; font-style: normal !important;
  background: var(--mg-hl) !important; border-color: var(--mg-hl-border) !important;
  font-size: 17px !important; text-align: center !important;
}
.lore-block::before, .lore-block::after { color: var(--mg-text-sub) !important; }

/* Feature tiles: icon over a title over text — like the vitals icon tiles */
.features { gap: 8px !important; margin: 0 0 8px !important; }
.feature { padding: 16px 14px 14px !important; text-align: center !important; }
.feature-icon {
  transform: none !important; border: 0 !important; opacity: 1 !important;
  width: 64px !important; height: 64px !important; margin: 0 auto 8px !important;
  background: var(--mg-hdr); border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--mg-hdr-border), inset 0 -2px 0 var(--mg-hdr-border), 0 1px 0 rgba(255,255,255,.2);
}
.feature-icon span { transform: none !important; }
.feature-icon img { width: 48px; height: 48px; image-rendering: pixelated; display: block; }
.feature h3, .class-card h4, .dl-card h3, .faq-item h4, .skill-card h3, .skill-card h4, .pkg-label {
  font-family: var(--mg-font-ui) !important; font-weight: 400 !important;
  letter-spacing: .3px !important; text-transform: none !important;
  color: var(--mg-text) !important; font-size: 18px !important;
}
.feature p, .class-card p, .dl-card p, .faq-item p, .skill-card p { color: var(--mg-text-sub) !important; font-size: 14.5px !important; }

/* Class cards: a row with a level-badge style tag + stat chips */
.class-grid { gap: 8px !important; margin: 0 0 8px !important; }
.class-card { padding: 16px 18px !important; }
.class-type, .class-tag {
  display: inline-block !important; font-family: var(--mg-font-num) !important;
  font-size: 12px !important; letter-spacing: .5px !important; text-transform: none !important;
  color: var(--mg-text) !important; background: var(--mg-hl) !important;
  border: 1px solid var(--mg-hl-border) !important; border-radius: 2px; padding: 1px 8px !important;
  box-shadow: var(--mg-bevel);
}
.class-stats span, .stat-name {
  font-family: var(--mg-font-num) !important; font-size: 12px !important;
  background: var(--mg-track) !important; color: var(--mg-light) !important;
  border: 1px solid var(--mg-track-border) !important; border-radius: 2px !important;
  letter-spacing: .3px !important; text-transform: none !important;
}

/* Bars (classes page stat bars etc.): recessed track + glossy fill */
.bar {
  background: var(--mg-track) !important; border: 1px solid var(--mg-track-border) !important;
  border-radius: 2px !important; box-shadow: inset 0 1px 0 rgba(0,0,0,.35) !important; overflow: hidden;
}
.bar .fill, .fill {
  background: linear-gradient(180deg, var(--mg-amber-top) 0 2px, var(--mg-amber) 2px calc(100% - 1px), #B8892F calc(100% - 1px)) !important;
  border-radius: 1px !important;
}
.warrior .fill { background: linear-gradient(180deg, var(--mg-hp-top) 0 2px, var(--mg-hp) 2px calc(100% - 1px), #8E1F1B calc(100% - 1px)) !important; }
.wizard .fill, .arcane .fill { background: linear-gradient(180deg, var(--mg-mp-top) 0 2px, var(--mg-mp) 2px calc(100% - 1px), #234A94 calc(100% - 1px)) !important; }
.stat-val { font-family: var(--mg-font-num) !important; color: var(--mg-text) !important; }

/* Tables (rankings) */
table, .rank-table { border-collapse: separate !important; border-spacing: 0 2px !important; }
.rank-table th {
  background: var(--mg-sub) !important; color: var(--mg-header-text) !important;
  font-family: var(--mg-font-ui) !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: .3px !important;
  border: 0 !important;
}
.rank-table td {
  background: var(--mg-row) !important; color: var(--mg-text) !important;
  border-top: 1px solid var(--mg-row-border) !important; border-bottom: 1px solid #9C8D6D !important;
}
.rank-table td.num, .rank-table .num { font-family: var(--mg-font-num) !important; }
.rank-table tr:hover td { background: var(--mg-row-down) !important; }
.rank-tabs { gap: 4px !important; }
.rank-tab {
  font-family: var(--mg-font-ui) !important; text-transform: none !important; letter-spacing: .3px !important;
  background: var(--mg-btn) !important; color: var(--mg-text) !important;
  border: 2px solid var(--mg-btn-border) !important; border-radius: 3px !important; box-shadow: var(--mg-bevel) !important;
}
.rank-tab.active { background: var(--mg-hl) !important; border-color: var(--mg-hl-border) !important; }

/* Form fields (MenuSkin text field: dark inset) */
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea,
.card-field-input, .char-input-wrap input {
  background: #4D4233 !important; color: var(--mg-light) !important;
  border: 1px solid #A8946B !important; border-radius: 2px !important;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.35) !important;
  font-family: var(--mg-font-body) !important;
}
input::placeholder, textarea::placeholder { color: #BDAE8F !important; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--mg-hl-border) !important; outline-offset: 0; }

/* Donate packages: highlight tile like the level badge */
.pkg.best, .pkg.ultimate, .pkg.selected, .pkg:hover { background: var(--mg-hl) !important; border-color: var(--mg-hl-border) !important; }
.pkg-plat, .pkg-price { font-family: var(--mg-font-num) !important; color: var(--mg-text) !important; }
.pkg-plat::before {
  content: ''; display: inline-block; width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px;
  background: url('/img/ui/gold_coin.png') center / contain no-repeat; image-rendering: pixelated;
}

/* Misc text accents */
.step-num, .num, .rk { font-family: var(--mg-font-num) !important; }
.step-num { background: var(--mg-hdr) !important; color: var(--mg-title) !important; border: 1px solid var(--mg-hdr-border) !important; }
.msg.error, .error { color: #FFD9D2; }
.ok { color: var(--mg-ok-top); }
hr, .hr, .divider, .card-rule { border-color: var(--mg-sub-border) !important; }
a { color: inherit; }
.parchment a:not([class]) { color: #F7D27A; text-decoration-color: rgba(247,210,122,.5); }
.intro a:not([class]), .feature a:not([class]), .faq-item a:not([class]), .dl-card a:not([class]), .callout a:not([class]) { color: #6B2C10; }

/* ── Catch-all: every heading in the game's UI face, no old Cinzel caps ── */
h1, h2, h3, h4, h5, h6, .big, .lbl, .pay-header, .pay-methods-label, .step h4, .policy-block h3, .policy-block h4,
.community-card h2, .dl-card h3, .char-hint, .small-print strong, .ph-label, .lightbox-caption {
  font-family: var(--mg-font-ui) !important;
  text-transform: none !important;
  letter-spacing: .3px !important;
  font-weight: 400 !important;
}
.parchment h3, .parchment h4, .community-card h2 { color: var(--mg-text) !important; }
.highlight .big, .highlights .big { color: #7A2A1A !important; font-size: 26px !important; }
.highlight .lbl, .highlights .lbl { font-family: var(--mg-font-num) !important; color: var(--mg-text-sub) !important; font-size: 12px !important; }

/* Any button inside the content uses the MenuSkin button */
.parchment button:not(.lang-switch button), .parchment input[type=submit], .community-card button, #paypal-button-fallback {
  font-family: var(--mg-font-ui) !important; text-transform: none !important; letter-spacing: .3px !important;
  color: var(--mg-text) !important; background: var(--mg-btn) !important;
  border: 2px solid var(--mg-btn-border) !important; border-radius: 3px !important;
  box-shadow: var(--mg-bevel), 0 2px 0 var(--mg-hud-edge) !important; opacity: 1 !important;
  font-size: 16px !important;
}
.parchment button:not(.lang-switch button):hover { background: var(--mg-btn-down) !important; }
.parchment button:disabled { opacity: .6 !important; cursor: not-allowed; }
.radio-row label { color: var(--mg-light) !important; }
.panel label, .parchment label { color: var(--mg-light); }
.panel, .community-card { color: var(--mg-text) !important; }
.panel label { color: var(--mg-text) !important; }

/* ── Footer = HUD slab ────────────────────────────────────────────────── */
.site-footer {
  background: var(--mg-hud) !important;
  border-top: 1px solid var(--mg-hud-edge) !important;
  box-shadow: inset 0 2px 0 var(--mg-hud-trim) !important;
  margin-top: 40px !important;
  max-width: none !important; width: 100% !important;
}
.footer-logo { font-family: var(--mg-font-ui) !important; color: var(--mg-title) !important; text-shadow: 0 2px 0 var(--mg-hud-edge); }
.footer-links a { font-family: var(--mg-font-ui) !important; color: var(--mg-light) !important; text-transform: none !important; letter-spacing: .3px !important; }
.footer-links a:hover { color: var(--mg-title) !important; }
.footer-copy { font-family: var(--mg-font-body) !important; color: #BFAE8C !important; font-style: normal !important; }

/* Language switch inside the HUD bar */
.lang-switch button { border-color: var(--mg-hud-trim) !important; color: var(--mg-light) !important; border-radius: 2px !important; }
.lang-switch button.active { background: var(--mg-sub) !important; border-color: var(--mg-hdr-border) !important; color: var(--mg-title) !important; }