/* NytheraDragon — Ember & Moon global theme for the DragonFable private server.
   Visual layer only: no game scripts, backend endpoints, form IDs, or data-id hooks are changed. */
:root {
  color-scheme: dark;
  --nd-void: #08060b;
  --nd-night: #100a12;
  --nd-night-2: #180d15;
  --nd-panel: rgba(24, 14, 23, .91);
  --nd-panel-solid: #170e17;
  --nd-panel-raised: #22121d;
  --nd-blood: #8f1d2c;
  --nd-blood-bright: #c33340;
  --nd-blood-soft: rgba(160, 31, 47, .18);
  --nd-gold: #d9a64e;
  --nd-gold-light: #f4d58b;
  --nd-moon: #f4e6c7;
  --nd-text: #f7f0e7;
  --nd-muted: #b8a6aa;
  --nd-dim: #897780;
  --nd-border: rgba(215, 164, 77, .18);
  --nd-border-strong: rgba(215, 164, 77, .38);
  --nd-radius: 18px;
  --nd-shadow: 0 22px 70px rgba(0,0,0,.42);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; background: var(--nd-void); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--nd-text) !important;
  background:
    radial-gradient(ellipse at 80% -12%, rgba(117, 20, 39, .22), transparent 42%),
    radial-gradient(ellipse at 7% 22%, rgba(74, 34, 55, .14), transparent 34%),
    var(--nd-void) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body, body * { box-sizing: border-box; }
img { max-width: 100%; }
a { color: var(--nd-gold-light); text-decoration: none; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; }
a:hover { color: #fff8e9; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, input[type="button"], input[type="submit"] { cursor: pointer; }
:focus-visible { outline: 2px solid var(--nd-gold-light); outline-offset: 3px; }
::selection { background: rgba(195,51,64,.4); color: white; }

/* Modern shared header; preserves original logo/navigation links. */
body > header {
  position: sticky !important; z-index: 100 !important; top: 0;
  display: flex !important; align-items: center !important; justify-content: space-between;
  gap: clamp(14px, 2vw, 32px); width: 100%; min-height: 92px;
  padding: 10px clamp(16px, 4.3vw, 68px) !important;
  overflow: visible !important;
  border-bottom: 1px solid rgba(217,166,78,.26) !important;
  background: linear-gradient(90deg, rgba(8,6,11,.97), rgba(21,9,17,.94) 54%, rgba(9,7,12,.97)) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.28), inset 0 -1px rgba(195,51,64,.10);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
}
body > header::after {
  content: ""; position: absolute; bottom: -1px; left: 0; width: min(360px, 40vw); height: 2px;
  background: linear-gradient(90deg, var(--nd-blood-bright), var(--nd-gold), transparent); pointer-events: none;
}
body > header .header-logo,
body > header .header-nav { background: none !important; background-image: none !important; }
body > header .header-logo {
  display: inline-flex !important; align-items: center; justify-content: flex-start;
  flex: 0 1 260px; width: auto; min-width: 0; padding: 0 !important;
  text-decoration: none; border: 0; position: relative; z-index: 1;
}
body > header .header-logo img {
  display: block; width: min(100%, 250px) !important; height: auto !important;
  max-height: 78px; object-fit: contain; object-position: left center;
  filter: drop-shadow(0 4px 15px rgba(120,20,31,.25));
}
body > header .header-nav { flex: 1 1 auto !important; min-width: 0; }
body > header .nav-links {
  display: flex !important; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: 4px; margin: 0 !important; padding: 0 !important; list-style: none !important;
}
body > header .nav-links li { margin: 0; padding: 0; list-style: none !important; }
body > header .nav-link {
  position: relative; display: inline-flex !important; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 13px !important; border: 1px solid transparent; border-radius: 10px;
  background: transparent !important; background-image: none !important; color: #c9b9bb !important;
  font-family: inherit !important; font-size: 12px; font-weight: 690; letter-spacing: .025em;
  white-space: nowrap; text-decoration: none !important; transition: all .18s ease;
}
body > header .nav-link:hover,
body > header .nav-link.active {
  border-color: rgba(217,166,78,.23); color: var(--nd-gold-light) !important;
  background: linear-gradient(135deg, rgba(143,29,44,.23), rgba(217,166,78,.06)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.015), 0 5px 18px rgba(0,0,0,.12);
}
body > header .nav-link.active::after { content: ""; position: absolute; bottom: 3px; left: 25%; right: 25%; height: 2px; background: var(--nd-gold); border-radius: 2px; }
body > header .banner-overlap, body > header .banner-background { display: none !important; }

/* Legacy banner is not used on the new home. */
body:not(.portal-home) .main-banner { display: none !important; }
.container { width: min(1120px, calc(100% - 36px)); max-width: 1120px !important; margin-inline: auto; padding-inline: 0 !important; }
main:not(.flash-content) { min-height: 48vh; }

/* Content pages: ToS, manage account, recovery, character details. */
section.content {
  position: relative; width: 100%; margin: 0 auto; padding: 42px 0 76px;
  background: none !important; background-image: none !important;
}
section.content .container { width: min(1000px, calc(100% - 36px)); }
section.content .section-title {
  position: relative; margin: 0 0 23px !important; padding: 7px 0 21px !important;
  border-bottom: 1px solid var(--nd-border); color: var(--nd-text) !important;
}
section.content .section-title::before {
  display: block; margin-bottom: 9px; color: var(--nd-gold); font-size: 10px;
  font-weight: 850; letter-spacing: .22em; text-transform: uppercase;
  content: "NYTHERADRAGON · REALM ARCHIVES";
}
body.page-account section.content .section-title::before { content: "NYTHERADRAGON · ACCOUNT SANCTUARY"; }
body.page-terms section.content .section-title::before { content: "NYTHERADRAGON · CODE OF THE REALM"; }
body.page-recovery section.content .section-title::before { content: "NYTHERADRAGON · ACCOUNT SECURITY"; }
body.page-character section.content .section-title::before { content: "NYTHERADRAGON · HERO RECORD"; }
section.content .section-title h2 {
  margin: 0 !important; color: var(--nd-moon) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(30px, 4vw, 42px) !important; font-weight: 700; letter-spacing: -.035em; line-height: 1.15;
}
section.content .section-content { color: #ded0d0; }
section.content .section-content.content-post {
  padding: clamp(22px, 4vw, 42px) !important;
  border: 1px solid var(--nd-border); border-radius: var(--nd-radius);
  background: linear-gradient(145deg, rgba(27,15,26,.96), rgba(13,9,16,.97)) !important;
  box-shadow: var(--nd-shadow), inset 0 1px rgba(255,255,255,.025);
}
section.content .section-content.content-post h2 {
  margin: 27px 0 10px !important; padding-bottom: 9px;
  border-bottom: 1px solid rgba(217,166,78,.13); color: var(--nd-gold-light) !important;
  font-family: Georgia, "Times New Roman", serif !important; font-size: 21px !important; line-height: 1.4;
}
section.content .section-content.content-post h2:first-child { margin-top: 0 !important; }
section.content .section-content.content-post p,
section.content .section-content.content-post li { color: #cbbcc0; font-size: 14px; line-height: 1.9 !important; }
section.content .section-content.content-post p { margin: 12px 0 !important; }
section.content .section-content.content-post ul,
section.content .section-content.content-post ol { padding-left: 24px; }
section.content .section-content.content-post b,
section.content .section-content.content-post strong { color: var(--nd-moon); }
section.content .section-content.content-post a { color: var(--nd-gold-light); text-decoration: underline; text-decoration-color: rgba(217,166,78,.45); text-underline-offset: 3px; }

/* Account forms: keep all original data-id and event hooks untouched. */
section.content .content-form {
  padding: clamp(22px, 4vw, 38px) !important; border: 1px solid var(--nd-border) !important;
  border-radius: var(--nd-radius) !important;
  background: linear-gradient(145deg, rgba(29,16,27,.97), rgba(13,9,16,.98)) !important;
  box-shadow: var(--nd-shadow), inset 0 1px rgba(255,255,255,.025);
}
section.content .content-form .form-container { width: 100%; max-width: 590px; margin: 0 auto; }
section.content .content-form p { color: #bbaeb5; line-height: 1.85; }
section.content .content-form label { display: block; margin: 18px 0 7px !important; color: #eadde0 !important; font-family: inherit !important; font-size: 12px; font-weight: 750; }
section.content .content-form .input-text,
section.content .content-form input:not([type="button"]):not([type="submit"]),
section.content .content-form select,
section.content .content-form textarea {
  display: block; width: 100% !important; min-height: 48px; padding: 12px 14px !important;
  border: 1px solid rgba(217,166,78,.23) !important; border-radius: 10px !important;
  background: #0a070d !important; color: var(--nd-text) !important; box-shadow: inset 0 2px 7px rgba(0,0,0,.28);
  transition: border-color .18s ease, box-shadow .18s ease;
}
section.content .content-form input::placeholder,
section.content .content-form textarea::placeholder { color: #74636e; }
section.content .content-form input:focus,
section.content .content-form select:focus,
section.content .content-form textarea:focus { border-color: var(--nd-gold) !important; box-shadow: 0 0 0 3px rgba(217,166,78,.12); }
section.content .content-form .button,
section.content .content-form input.button,
.button {
  display: inline-flex !important; align-items: center; justify-content: center; min-height: 46px;
  min-width: 150px; width: auto; padding: 0 21px !important; margin: 18px 0 10px !important;
  border: 1px solid rgba(244,213,139,.55) !important; border-radius: 10px !important;
  background: linear-gradient(135deg, #f2d28a, #c78a35) !important; color: #1a0b0e !important;
  box-shadow: 0 9px 25px rgba(132,28,43,.2), inset 0 1px rgba(255,255,255,.35);
  font-family: inherit !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: .04em;
  text-decoration: none !important; transition: transform .18s ease, filter .18s ease;
}
section.content .content-form .button:hover,
section.content .content-form input.button:hover,
.button:hover { transform: translateY(-2px); filter: brightness(1.06); }
section.content .content-form .small { color: var(--nd-muted) !important; font-size: 12px !important; }
section.content .content-form .error { color: #ff9da7 !important; }

/* Intros previously added to Register and Play pages. */
.portal-page-hero {
  position: relative; isolation: isolate; overflow: hidden; width: min(1120px, calc(100% - 36px));
  margin: 31px auto 0; padding: clamp(25px, 4vw, 39px) clamp(22px, 4vw, 44px);
  border: 1px solid var(--nd-border-strong); border-radius: var(--nd-radius);
  background: linear-gradient(105deg, rgba(77,14,28,.35), rgba(22,12,22,.94) 60%, rgba(10,7,13,.96)) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.23);
}
.portal-page-hero::after { content: ""; position: absolute; z-index: -1; right: -60px; top: -100px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(195,51,64,.16), transparent 70%); }
.portal-page-hero .portal-eyebrow { color: var(--nd-gold); font-size: 10px; font-weight: 850; letter-spacing: .22em; text-transform: uppercase; }
.portal-page-hero h1 { margin: 8px 0; color: var(--nd-moon); font: 700 clamp(27px, 4vw, 39px)/1.2 Georgia, "Times New Roman", serif; }
.portal-page-hero p { max-width: 720px; margin: 8px 0 0; color: #bfafb6; font-size: 14px; line-height: 1.8; }

/* Ruffle/legacy game clients: preserve their required IDs, dimensions and scripts. */
main.flash-content {
  display: flex !important; align-items: flex-start; justify-content: center !important; gap: 18px;
  width: min(1240px, calc(100% - 36px)); margin: 24px auto 46px; padding: 16px;
  border: 1px solid var(--nd-border); border-radius: 18px;
  background: linear-gradient(145deg, rgba(22,12,21,.96), rgba(8,6,11,.99)) !important;
  box-shadow: var(--nd-shadow), inset 0 1px rgba(255,255,255,.025);
}
main.flash-content > #FFable,
body.page-register #FFable,
body.page-play #FFable {
  display: block; max-width: 100%; height: auto; border: 1px solid rgba(217,166,78,.22);
  border-radius: 8px; overflow: hidden; background: #0b070d !important;
}
body.page-register main.flash-content { width: min(1170px, calc(100% - 36px)); }
body.page-register #FFable { width: min(100%, 1140px) !important; aspect-ratio: 1140 / 640; }
body.page-play main.flash-content { align-items: stretch !important; }
body.page-play #FFable { width: min(100%, 873px) !important; aspect-ratio: 873 / 640; }
body.page-register #FFable embed, body.page-play #FFable embed { max-width: 100%; }
body.page-play section.chat {
  display: flex; flex-direction: column; flex: 0 0 300px; width: 300px !important; min-width: 0;
  min-height: 640px; overflow: hidden; border: 1px solid var(--nd-border);
  border-radius: 10px; background: rgba(11,7,14,.92) !important;
}
body.page-play section.chat .section-content { background: transparent !important; }
body.page-play section.chat .content-chat { flex: 1 1 auto; min-height: 420px; height: auto !important; color: #eadde0; }
body.page-play section.chat .content-chat-input { border-top: 1px solid var(--nd-border) !important; }
body.page-play section.chat .chat-item { border: 1px solid rgba(217,166,78,.1); border-radius: 8px; background: rgba(255,255,255,.035) !important; }
body.page-play section.chat .chat-item-me { background: rgba(143,29,44,.2) !important; }
body.page-play section.chat input, body.page-play section.chat textarea { max-width: 100%; background: #0a070d !important; color: var(--nd-text) !important; border-color: var(--nd-border) !important; }

/* Shared footer. */
body > footer {
  position: relative; margin-top: 26px !important; padding: 31px 0 28px !important;
  border-top: 1px solid rgba(217,166,78,.20); background: rgba(8,6,11,.7) !important;
  color: #95838d !important; text-align: center; font-size: 11px; line-height: 1.9;
}
body > footer::before { content: ""; display: block; width: min(220px, 38vw); height: 2px; margin: -32px auto 26px; background: linear-gradient(90deg, transparent, var(--nd-blood), var(--nd-gold), transparent); }
body > footer .container { width: min(1120px, calc(100% - 36px)); }
body > footer .title { color: #d7c4c4; }
body > footer .footer-info { margin-top: 10px; color: #88757f; }
body > footer a { color: var(--nd-gold-light); }

/* NytheraDragon home. */
.portal-home { background: var(--nd-void) !important; }
.portal-home .portal-main { min-height: 0; }
.portal-hero {
  position: relative; isolation: isolate; display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .72fr); align-items: center;
  gap: clamp(28px, 5vw, 72px); width: 100%; min-height: 610px;
  padding: clamp(56px, 8vw, 100px) max(20px, calc((100vw - 1180px) / 2));
  overflow: hidden; border-bottom: 1px solid rgba(217,166,78,.18);
}
.portal-hero::before {
  position: absolute; z-index: -2; inset: 0; content: "";
  background: url('/assets/images/bg-launcher-df2.jpg') center 30% / cover no-repeat;
  filter: saturate(.85) sepia(.12) brightness(.55); transform: scale(1.025);
}
.portal-hero::after {
  position: absolute; z-index: -1; inset: 0; content: "";
  background:
    radial-gradient(ellipse at 78% 18%, rgba(171,43,49,.18), transparent 38%),
    linear-gradient(90deg, rgba(8,6,11,.98) 0%, rgba(15,7,14,.91) 39%, rgba(18,7,15,.54) 100%),
    linear-gradient(0deg, var(--nd-void) 0%, transparent 34%, rgba(8,6,11,.24) 100%);
}
.portal-hero-copy { width: 100%; max-width: 710px; }
.portal-pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px;
  border: 1px solid rgba(217,166,78,.28); border-radius: 999px;
  background: rgba(20,8,16,.64); color: var(--nd-gold-light); font-size: 10px;
  font-weight: 850; letter-spacing: .16em; text-transform: uppercase; backdrop-filter: blur(12px);
}
.portal-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: #d84a52; box-shadow: 0 0 0 5px rgba(195,51,64,.12), 0 0 17px rgba(216,74,82,.82); }
.portal-hero h1 {
  max-width: 760px; margin: 22px 0 20px; color: var(--nd-moon);
  font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(42px, 6.5vw, 78px);
  font-weight: 750; letter-spacing: -.055em; line-height: 1.02; text-wrap: balance;
  text-shadow: 0 5px 35px rgba(0,0,0,.38);
}
.portal-hero h1 span { display: block; color: var(--nd-gold); }
.portal-hero-copy > p { max-width: 610px; margin: 0; color: #cbb8c0; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.9; }
.portal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.portal-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px;
  padding: 0 20px; border: 1px solid rgba(217,166,78,.24); border-radius: 10px;
  background: rgba(20,10,18,.82); color: var(--nd-moon); font-size: 12px; font-weight: 850;
  text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.22); backdrop-filter: blur(12px);
}
.portal-button:hover { transform: translateY(-2px); border-color: var(--nd-gold); color: white; }
.portal-button-primary { border-color: rgba(244,213,139,.72); background: linear-gradient(135deg,#f1d28b,#c78a35); color: #1b0b0e; box-shadow: 0 12px 30px rgba(132,28,43,.24); }
.portal-button-primary:hover { color: #1b0b0e; filter: brightness(1.06); }
.portal-button svg { width: 16px; height: 16px; }
.portal-live-card {
  position: relative; overflow: hidden; justify-self: end; width: 100%; max-width: 365px; padding: 25px;
  border: 1px solid rgba(217,166,78,.3); border-radius: 16px;
  background: linear-gradient(150deg, rgba(39,17,29,.92), rgba(12,8,15,.94));
  box-shadow: 0 28px 85px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.035); backdrop-filter: blur(22px);
}
.portal-live-card::before { position:absolute; right:-48px; top:-70px; width:190px; height:190px; border-radius:50%; content:""; background:radial-gradient(circle,rgba(195,51,64,.20),transparent 70%); pointer-events:none; }
.portal-live-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:18px; border-bottom:1px solid var(--nd-border); }
.portal-live-title { color: var(--nd-moon); font-size: 13px; font-weight: 850; letter-spacing: .035em; }
.portal-live-badge { display:inline-flex; align-items:center; gap:7px; padding:5px 8px; border:1px solid rgba(217,166,78,.18); border-radius:999px; color:var(--nd-gold-light); font-size:9px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.portal-live-badge::before { width:6px; height:6px; border-radius:50%; background:#cf3d49; content:""; box-shadow:0 0 12px rgba(207,61,73,.65); }
.portal-online-block { padding:23px 0 20px; }
.portal-online-label { display:block; color:#cbb8c0; font-size:11px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.portal-online-row { display:flex; align-items:baseline; gap:12px; margin-top:3px; }
.portal-online-count { color:var(--nd-gold-light) !important; font-size:clamp(58px,6vw,80px); font-weight:900; letter-spacing:-.075em; line-height:1.1; font-variant-numeric:tabular-nums; text-shadow:0 0 28px rgba(217,166,78,.16); }
.portal-online-caption { color:#aa929e; font-size:11px; }
.portal-server-line { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:15px; border-top:1px solid var(--nd-border); color:#a28c98; font-size:11px; }
.portal-server-status { color:#e8bb78 !important; font-weight:850; }
.portal-live-note { margin:16px 0 0; color:#88717e; font-size:10px; line-height:1.7; }
.portal-content { width:min(1180px, calc(100% - 40px)); margin:0 auto; padding:58px 0 74px; }
.portal-section-head { display:flex; align-items:end; justify-content:space-between; gap:22px; margin-bottom:24px; }
.portal-section-kicker { display:block; margin-bottom:8px; color:#d65b63; font-size:10px; font-weight:900; letter-spacing:.22em; text-transform:uppercase; }
.portal-section-head h2 { margin:0; color:var(--nd-moon); font-family:Georgia,"Times New Roman",serif !important; font-size:clamp(27px,3vw,36px); font-weight:750; letter-spacing:-.025em; }
.portal-section-head p { max-width:470px; margin:0; color:var(--nd-muted); font-size:13px; line-height:1.8; }
.portal-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.portal-feature-card {
  position:relative; display:flex; flex-direction:column; min-height:215px; padding:24px;
  border:1px solid var(--nd-border); border-radius:14px;
  background:linear-gradient(145deg,rgba(29,15,27,.94),rgba(12,8,15,.97));
  transition:transform .2s ease,border-color .2s ease,background .2s ease; overflow:hidden;
}
.portal-feature-card::after { content:""; position:absolute; right:-36px; bottom:-60px; width:130px; height:130px; border-radius:50%; background:radial-gradient(circle,rgba(143,29,44,.13),transparent 70%); pointer-events:none; }
.portal-feature-card:hover { transform:translateY(-4px); border-color:rgba(217,166,78,.42); background:linear-gradient(145deg,rgba(47,19,34,.96),rgba(13,8,16,.98)); }
.portal-feature-icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:22px; border:1px solid rgba(217,166,78,.24); border-radius:11px; background:rgba(143,29,44,.16); color:var(--nd-gold-light); font-size:20px; }
.portal-feature-card h3 { margin:0 0 8px; color:var(--nd-moon); font-size:16px; font-weight:850; letter-spacing:-.02em; }
.portal-feature-card p { margin:0 0 18px; color:#a995a0; font-size:12px; line-height:1.8; }
.portal-feature-link { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; color:var(--nd-gold-light); font-size:11px; font-weight:900; }
.portal-footer-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }
.portal-footer-meta .dot { opacity:.35; }
.portal-home > footer { margin-top:0 !important; }

/* NytheraDragon ranking and profile palette. */
.df-ranking .df-intro { padding: 1.25rem 0 1.5rem; }
.df-ranking .df-intro h1 { color:var(--nd-moon) !important; font-family:Georgia,"Times New Roman",serif !important; }
.df-ranking .df-eyebrow { color:var(--nd-gold) !important; }
.df-ranking .df-intro p, .df-ranking .df-muted { color:var(--nd-muted) !important; }
.df-ranking .df-stats { gap:14px !important; }
.df-ranking .df-stat, .df-ranking .df-board, .df-ranking .df-profile,
.df-ranking .df-profile-stat, .df-ranking .df-rank-card {
  border-color:var(--nd-border) !important; border-radius:13px !important;
  background:linear-gradient(145deg,rgba(29,15,27,.96),rgba(12,8,15,.98)) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.18);
}
.df-ranking .df-stat-value, .df-ranking .df-score, .df-ranking .df-rank-number { color:var(--nd-gold-light) !important; }
.df-ranking .df-stat-label, .df-ranking .df-score-label { color:var(--nd-muted) !important; }
.df-ranking .df-tabs { border-bottom-color:var(--nd-border) !important; gap:7px !important; }
.df-ranking .df-tab { border:1px solid var(--nd-border) !important; border-radius:9px !important; background:#140b13 !important; color:#d5c3c9 !important; }
.df-ranking .df-tab:hover, .df-ranking .df-tab.active { border-color:var(--nd-gold) !important; background:linear-gradient(135deg,rgba(143,29,44,.38),rgba(217,166,78,.09)) !important; color:var(--nd-gold-light) !important; }
.df-ranking .df-heading h2, .df-ranking .df-profile-section h2 { color:var(--nd-moon) !important; font-family:Georgia,"Times New Roman",serif !important; }
.df-ranking .df-rank-card.first { border-color:rgba(217,166,78,.58) !important; background:linear-gradient(145deg,rgba(78,41,24,.67),rgba(24,13,22,.98)) !important; }
.df-ranking .df-rank-card .df-character-name, .df-ranking .df-back-link { color:var(--nd-gold-light) !important; }
.df-ranking .df-class-name { color:#d5a1b0 !important; }
.df-ranking th { background:#24121e !important; color:#bc9fac !important; }
.df-ranking td { border-top-color:rgba(217,166,78,.12) !important; color:#e4d8dc; }
.df-ranking tbody tr:hover { background:rgba(143,29,44,.10) !important; }
.df-ranking .df-attribute { border-color:var(--nd-border) !important; background:rgba(20,10,18,.72) !important; }
.df-ranking .df-attribute strong { color:var(--nd-gold-light) !important; }

@media (max-width: 1050px) {
  body > header { gap:14px; padding-inline:20px !important; }
  body > header .header-logo { flex-basis:210px; }
  body > header .header-logo img { width:min(100%,220px) !important; }
  body > header .nav-link { padding-inline:9px !important; font-size:11px; }
  .portal-hero { gap:30px; padding-inline:28px; }
  .portal-hero h1 { font-size:clamp(41px,6vw,68px); }
  body.page-play main.flash-content { width:calc(100% - 30px); }
  body.page-play section.chat { flex-basis:270px; width:270px !important; }
}
@media (max-width: 760px) {
  body > header { position:relative !important; display:flex !important; flex-wrap:wrap; gap:8px; min-height:0; padding:10px 15px 0 !important; }
  body > header .header-logo { flex:0 1 auto; width:100%; min-height:0; justify-content:center; padding:4px 0 0 !important; }
  body > header .header-logo img { width:min(78vw, 260px) !important; max-height:82px; object-position:center; }
  body > header .header-nav { width:calc(100% + 30px); margin:0 -15px; padding:0 12px 10px; overflow-x:auto; scrollbar-width:thin; }
  body > header .nav-links { width:max-content; min-width:100%; justify-content:flex-start; flex-wrap:nowrap; }
  body > header .nav-link { min-height:38px; padding-inline:11px !important; }
  .portal-hero { grid-template-columns:1fr; gap:28px; min-height:0; padding:58px 22px 38px; }
  .portal-hero::before { background-position:58% center; }
  .portal-hero::after { background:linear-gradient(90deg,rgba(8,6,11,.95),rgba(16,7,14,.74)),linear-gradient(0deg,var(--nd-void),transparent 60%); }
  .portal-hero h1 { max-width:590px; font-size:clamp(39px,11vw,61px); }
  .portal-live-card { justify-self:stretch; max-width:100%; padding:21px; }
  .portal-online-count { font-size:68px; }
  .portal-content { width:calc(100% - 30px); padding:40px 0 48px; }
  .portal-section-head { display:block; }
  .portal-section-head p { margin-top:10px; }
  .portal-feature-grid { grid-template-columns:1fr; }
  .portal-feature-card { min-height:175px; }
  body.page-register main.flash-content, body.page-play main.flash-content { display:flex !important; flex-direction:column; align-items:stretch !important; width:calc(100% - 20px); margin-top:15px; padding:9px; }
  body.page-register #FFable, body.page-play #FFable { width:100% !important; max-width:100%; flex:auto; }
  body.page-play section.chat { width:100% !important; min-width:0 !important; flex:auto; min-height:350px; }
  body.page-play section.chat .content-chat { min-height:270px; }
  .portal-page-hero { width:calc(100% - 20px); margin-top:18px; padding:23px 18px; }
  section.content { padding-top:27px; }
  section.content .section-content.content-post, section.content .content-form { padding:21px !important; }
  .df-ranking .df-stats { grid-template-columns:1fr !important; }
  .df-ranking .df-profile { padding:14px !important; }
  body > footer { padding:25px 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}