/* ============================================================
   NavenRO — FluxCP theme stylesheet
   Loads AFTER Bootstrap 3.3.7 CDN, so these rules win on shared
   elements (body, links, tables) while pages we haven't reskinned
   keep rendering with plain Bootstrap 3 styling.
   ============================================================ */

:root{
  --bg-0:#0a0c18;
  --bg-1:#10132a;
  --bg-2:#141731;
  --primary:#d9b45b;
  --secondary:#8B5CF6;
  --accent:#f0d48a;
  --success:#57E389;
  --warning:#F59E0B;
  --error:#EF4444;
  --text-0:#ece9f6;
  --text-1:#8b93b8;
  --text-2:#6B7591;
  --line:rgba(217,180,91,0.16);
  --glass:rgba(255,255,255,0.045);
  --glass-strong:rgba(255,255,255,0.07);
  --ff-display:'Cinzel',serif;
  --ff-body:'Inter',sans-serif;
  --ff-mono:'JetBrains Mono',monospace;
  --ff-ledger:'Cinzel',serif;
  --gold:#d9b45b;
  --gold-bright:#f0d48a;
  --gold-dim:rgba(217,180,91,0.35);
  --sakura:#f2a7c3;
  --night:#0a0c18;
}

/* ---- Base overrides (undo Bootstrap's light theme) ---- */
html, body{
  background: radial-gradient(1200px 600px at 70% -10%, rgba(120,80,200,0.22), transparent 60%),
              radial-gradient(900px 500px at 15% 5%, rgba(242,167,195,0.09), transparent 55%),
              var(--bg-0) !important;
  color: var(--text-0) !important;
  font-family: var(--ff-body) !important;
}
body > .container{ padding-top: 84px !important; } /* clears the fixed nav */
a{ color: var(--accent); }
a:hover, a:focus{ color: var(--primary); }
h1,h3,h4,h5,h6{ font-family: var(--ff-display); color: var(--text-0); }

/* ============================================================
   AMBIENT BACKGROUND ("Embers+") — fixed behind all page content.
   z-index:-1 (not 0) so it stacks behind normal static content
   instead of on top of it; pointer-events:none so it never
   intercepts clicks.
   ============================================================ */
.ambient{ position:fixed; top:0; left:0; right:0; bottom:0; z-index:0; pointer-events:none; overflow:hidden; }
/* Lift all page content above the fixed effect layers (mockup-style stacking:
   effects at z-index 0, content at z-index 1+). */
body > .container{ position:relative; z-index:1; }
.nro-footer{ position:relative; z-index:1; }
.ambient-glow{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 40% at 70% 8%, rgba(120,80,200,0.30), transparent 60%),
    radial-gradient(50% 35% at 20% 18%, rgba(242,167,195,0.14), transparent 60%),
    radial-gradient(45% 30% at 50% 100%, rgba(217,180,91,0.08), transparent 60%),
    radial-gradient(80% 50% at 50% 110%, rgba(36,27,69,0.9), transparent 70%);
  animation:ambientGlowDrift 16s ease-in-out infinite;
}
@keyframes ambientGlowDrift{ 0%,100%{ opacity:.9; } 50%{ opacity:1; } }
.ambient .ember{
  position:absolute; border-radius:50%; opacity:0;
  background:radial-gradient(circle, rgba(253,186,116,0.95), transparent 70%);
  animation:ambientEmberRise linear infinite;
}
@keyframes ambientEmberRise{
  0%{ opacity:0; transform:translateY(0) translateX(0); }
  8%{ opacity:.85; }
  92%{ opacity:.5; }
  100%{ opacity:0; transform:translateY(-100vh) translateX(24px); }
}
@media (prefers-reduced-motion: reduce){
  .ambient-glow, .ambient .ember{ animation:none !important; }
}

/* ============================================================
   IMMERSIVE AUTH SCENE (login / register) — full-bleed, no nav/footer.
   Original art/copy; not a reproduction of any reference site.
   ============================================================ */
body.auth-mode{ margin:0; overflow-x:hidden; }
body.auth-mode > .container{ padding-top:0 !important; }

.auth-scene{
  position:relative; width:100%; min-height:100vh; overflow:hidden;
  background:
    radial-gradient(1400px 900px at 50% -10%, rgba(139,92,246,0.28), transparent 55%),
    radial-gradient(900px 600px at 50% 100%, rgba(34,211,238,0.10), transparent 60%),
    linear-gradient(180deg, #171226 0%, #0B0810 55%);
  display:flex; align-items:center; justify-content:center; padding:60px 20px;
}
.auth-canopy{ position:absolute; top:-60px; left:0; right:0; height:340px; opacity:0.9; pointer-events:none; }
.auth-canopy svg{ width:100%; height:100%; }
.auth-canopy path{ animation:authGlowPulse 5s ease-in-out infinite; }
@keyframes authGlowPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:.85; } }

.auth-leaf{
  position:absolute; top:0; width:5px; height:8px; background:var(--gold); opacity:0;
  border-radius:0 60% 0 60%; animation:authLeafFall linear infinite; pointer-events:none;
}
@keyframes authLeafFall{
  0%{ opacity:0; transform:translateY(0) rotate(0deg); }
  10%{ opacity:.85; }
  90%{ opacity:.5; }
  100%{ opacity:0; transform:translateY(80vh) rotate(200deg); }
}

.auth-pillar{
  position:absolute; top:0; bottom:0; width:70px; display:flex; flex-direction:column;
  align-items:center; justify-content:space-evenly; opacity:0.22; pointer-events:none;
}
.auth-pillar.left{ left:24px; }
.auth-pillar.right{ right:24px; }
.auth-pillar span{ font-size:16px; color:var(--gold); text-shadow:0 0 8px rgba(216,180,92,0.6); }
@media (max-width:900px){ .auth-pillar{ display:none; } }

.auth-vignette{ position:absolute; inset:0; box-shadow:inset 0 0 220px 60px rgba(0,0,0,0.75); pointer-events:none; }

.auth-wrap{ position:relative; z-index:5; display:flex; flex-direction:column; align-items:center; width:100%; }

.auth-card{
  position:relative; width:460px; max-width:88vw; padding:36px 38px;
  background:linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border:1px solid var(--gold-dim); border-radius:14px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.75), inset 0 0 40px rgba(139,92,246,0.06);
  backdrop-filter:blur(6px);
  animation:authCardIn .6s cubic-bezier(.2,.8,.2,1);
}
.auth-card-wide{ width:640px; }
.auth-card-xwide{ width:1040px; }

.auth-ranking-tabs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-bottom:16px; max-width:1040px; width:100%;
}
.auth-ranking-tabs a{
  font-family:var(--ff-mono); font-size:12px; font-weight:700; text-decoration:none; color:var(--text-1);
  padding:8px 14px; border-radius:100px; border:1px solid var(--line); background:rgba(255,255,255,0.03);
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.auth-ranking-tabs a:hover{ color:var(--gold); border-color:var(--gold-dim); }
.auth-ranking-tabs a.active{
  background:linear-gradient(135deg, var(--primary), var(--secondary)); color:#fff; border-color:transparent;
}
@keyframes authCardIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }

.auth-close{
  position:absolute; top:16px; right:16px; width:28px; height:28px; border-radius:8px;
  background:rgba(255,255,255,0.05); border:1px solid var(--gold-dim); color:var(--text-1);
  display:flex; align-items:center; justify-content:center; font-size:13px; text-decoration:none;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.auth-close:hover{ color:var(--gold); border-color:var(--gold); background:rgba(216,180,92,0.1); }

.auth-links{ text-align:center; margin-top:18px; font-size:12px; }
.auth-links a{ color:var(--text-1); text-decoration:none; }
.auth-links a:hover{ color:var(--gold); }
.auth-links-sep{ color:var(--text-2); margin:0 8px; }

/* Restyle the REAL login.php / create.php markup to fit the card —
   same classes as the rest of the site, just forced into the compact
   card layout regardless of viewport width. */
.auth-card h2{
  font-family:var(--ff-ledger); font-weight:700; font-size:20px; text-align:center; letter-spacing:.04em;
  color:var(--gold); text-transform:uppercase; margin:0 0 18px; display:block;
}
.auth-card h2::before{ content:none; }
.auth-card > p{ text-align:center; color:var(--text-2); font-size:12.5px; margin-bottom:16px; }
.auth-card > p a{ color:var(--gold); }
.auth-card .message{ margin-bottom:16px; }
.auth-card .red{ margin-bottom:16px; }

.auth-card .generic-form,
.auth-card .generic-form-div{
  background:none !important; border:none !important; padding:0 !important; box-shadow:none !important;
}
.auth-card .generic-form::before, .auth-card .generic-form::after{ content:none !important; }

.auth-card .generic-form-table,
.auth-card .generic-form-table tbody,
.auth-card .generic-form-table tr,
.auth-card .generic-form-table th,
.auth-card .generic-form-table td{
  display:block; width:100%; border:none !important; background:none !important; padding:0 !important;
}
.auth-card .generic-form-table{ box-shadow:none; margin:0; }
.auth-card .generic-form-table tr{ margin-bottom:16px; }
.auth-card .generic-form-table th{
  text-align:left !important; padding-bottom:7px !important; color:var(--text-1) !important;
  font-size:10.5px !important;
}
.auth-card .generic-form-table th label{ padding:0 !important; }
.auth-card .generic-form-table input[type=text],
.auth-card .generic-form-table input[type=password],
.auth-card .generic-form-table select{ width:100%; }
.auth-card .generic-form-table input[type=submit]{
  width:100%; padding:13px !important; font-size:14.5px !important;
  background:linear-gradient(135deg, var(--gold), #a9821f) !important; color:#241a02 !important;
}
.auth-card p:has(> strong:first-child){ font-size:12px; }
.auth-card .security-code img{ max-width:100%; }

@media (max-width:480px){
  .auth-card{ padding:26px 22px; }
}
h2{
  font-family:var(--ff-ledger); color:var(--gold); text-transform:uppercase; letter-spacing:.04em;
  font-weight:700; display:flex; align-items:center; gap:11px;
}
h2::before{
  content:''; width:9px; height:9px; background:var(--accent); transform:rotate(45deg);
  box-shadow:0 0 8px var(--accent); flex-shrink:0;
}

.message{
  background: rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.35);
  color:#bdf5cf; border-radius:10px; padding:12px 16px !important; font-weight:600 !important;
}
.notice{
  background: rgba(245,158,11,0.12); border:1px solid rgba(245,158,11,0.35);
  color:#ffe1ad; border-radius:10px; padding:12px 16px !important;
}

/* ============================================================
   NAV
   ============================================================ */
.nro-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000; height:72px;
  background:rgba(11,16,32,0.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nro-nav-inner{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:72px;
}
.nro-nav-center{
  grid-column:2; display:flex; align-items:center; gap:32px; justify-self:center;
}
.nro-brand{ display:flex; align-items:center; gap:10px; font-family:var(--ff-display); font-weight:800; font-size:18px; text-decoration:none; }
.nro-brand-mark{ width:30px; height:30px; flex-shrink:0; }
.nro-brand-logo{ height:34px; width:auto; display:block; }
.nro-brand-name{
  background:linear-gradient(120deg,#fff, var(--accent) 60%, var(--secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nro-nav-links{ display:flex; align-items:center; gap:2px; }
.nro-nav-right{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:14px; }
.nro-btn-play{
  display:inline-flex; align-items:center; gap:8px; padding:10px 22px; border-radius:8px;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, #b08d3e);
  color:#221a08 !important; font-weight:700; font-size:13.5px; letter-spacing:.04em;
  text-decoration:none; position:relative; overflow:hidden;
  box-shadow:0 0 0 1px rgba(240,212,138,.5) inset, 0 6px 24px rgba(217,180,91,.25);
  transition:transform .2s, box-shadow .2s;
}
.nro-btn-play:hover{
  transform:translateY(-2px); color:#221a08 !important; text-decoration:none;
  box-shadow:0 0 0 1px rgba(240,212,138,.7) inset, 0 10px 32px rgba(217,180,91,.4);
}
.nro-btn-play:hover{ opacity:.92; }
.nro-nav-item{ position:relative; }
.nro-nav-toggle{
  background:none !important; border:none !important; color:var(--text-1) !important; font-weight:600; font-size:14px;
  padding:10px 14px !important; border-radius:0 !important; cursor:pointer; display:flex; align-items:center; gap:6px;
  font-family:var(--ff-body); position:relative; transition:color .2s ease; text-decoration:none !important;
}
.nro-nav-toggle::after{
  content:''; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:linear-gradient(90deg, var(--gold), var(--accent));
  transform:scaleX(0); transform-origin:center; transition:transform .25s ease;
  box-shadow:0 0 8px rgba(216,180,92,0.6);
}
.nro-nav-toggle:hover{ color:var(--gold) !important; }
.nro-nav-toggle:hover::after{ transform:scaleX(1); }
.nro-nav-toggle svg{ opacity:.6; transition:transform .2s ease; }
.nro-nav-item.open .nro-nav-toggle svg{ transform:rotate(180deg); }
.nro-nav-dropdown{
  display:none; position:absolute; top:calc(100% + 8px); left:0; min-width:210px;
  background:linear-gradient(160deg, #1b2340, #0d1220);
  border:1px solid var(--gold-dim); border-radius:12px; padding:8px;
  box-shadow:0 24px 48px -16px rgba(0,0,0,0.85);
  z-index:1100;
  opacity:0; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease;
}
.nro-nav-dropdown.open{ display:block; opacity:1; transform:translateY(0); }
.nro-nav-dropdown a{
  display:block; padding:9px 12px; border-radius:8px; font-size:13.5px; color:var(--text-1) !important; font-weight:600;
  text-decoration:none; background:none !important; border:none !important; transition:background .15s ease, color .15s ease, padding-left .15s ease;
}
.nro-nav-dropdown a:hover{ background:rgba(216,180,92,0.1) !important; color:var(--gold) !important; padding-left:16px; }

.nro-hamburger{
  display:none; width:40px; height:40px; border-radius:9px !important; border:1px solid var(--line) !important;
  background:var(--glass) !important; cursor:pointer; align-items:center; justify-content:center;
  flex-direction:column; gap:4px; padding:0 !important;
}
.nro-hamburger span{ width:18px; height:2px; background:var(--text-0); border-radius:2px; }

.nro-mobile-panel{
  display:none; position:fixed; inset:72px 0 0 0; z-index:10000;
  background:rgba(11,16,32,0.97); backdrop-filter:blur(20px);
  padding:20px 24px; overflow-y:auto;
}
.nro-mobile-panel.open{ display:block; }
.nro-mobile-panel .nro-mobile-link{
  display:block; padding:15px 6px; font-size:16px; font-weight:600; color:var(--text-0);
  border-bottom:1px solid var(--line); text-decoration:none;
}
.nro-mobile-group{ border-bottom:1px solid var(--line); }
.nro-mobile-cat-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; padding:15px 6px; font-size:16px; font-weight:600; color:var(--text-0);
  font-family:var(--ff-body); cursor:pointer;
}
.nro-mobile-cat-toggle svg{ opacity:.6; transition:transform .2s ease; flex-shrink:0; }
.nro-mobile-group.open .nro-mobile-cat-toggle svg{ transform:rotate(180deg); }
.nro-mobile-sub{ display:none; padding-bottom:8px; }
.nro-mobile-group.open .nro-mobile-sub{ display:block; }
.nro-mobile-sub a{
  display:block; padding:12px 6px 12px 18px; font-size:14.5px; font-weight:600; color:var(--text-1);
  text-decoration:none;
}
.nro-mobile-sub a:hover{ color:var(--gold); }

@media (max-width: 900px){
  .nro-nav-links{ display:none; }
  .nro-hamburger{ display:flex; }
}

/* Hide the Play Now button on phones and tablets (≤1024px covers phones,
   iPad portrait, and iPad landscape). Raise the number if you also want it
   hidden on larger tablets like iPad Pro 12.9" landscape (1366px). */
@media (max-width: 1024px){
  .nro-btn-play{ display:none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.nro-footer{
  margin-top:64px; border-top:1px solid var(--line); padding:48px 0 24px; background:var(--bg-1);
}
.nro-foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:28px; margin-bottom:32px; }
.nro-foot-grid-wide{ grid-template-columns:1.3fr 1fr 1fr 1.1fr; }
.nro-foot-socials{ display:flex; gap:8px; margin-top:14px; }
.nro-foot-socials a{
  width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,0.04); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--text-1); text-decoration:none;
}
.nro-foot-socials a:hover{ color:var(--gold); border-color:var(--gold-dim); }
.nro-foot-support{ background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:12px; padding:16px; align-self:start; }
.nro-foot-support h4{ font-family:var(--ff-display); font-size:13px; margin:0 0 6px; color:var(--text-0); }
.nro-foot-support p{ font-size:11.5px; color:var(--text-1); margin:0 0 12px; line-height:1.5; }
.nro-btn-donate{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, #b08d3e);
  color:#221a08 !important; font-weight:700; font-size:14px; letter-spacing:.04em;
  padding:14px; border-radius:8px; text-decoration:none;
  position:relative; overflow:hidden;
  box-shadow:0 0 0 1px rgba(240,212,138,.5) inset, 0 6px 24px rgba(217,180,91,.25);
  transition:transform .2s, box-shadow .2s;
}
.nro-btn-donate:hover{
  transform:translateY(-2px); color:#221a08 !important; text-decoration:none; opacity:1;
  box-shadow:0 0 0 1px rgba(240,212,138,.7) inset, 0 10px 32px rgba(217,180,91,.4);
}
.nro-btn-donate:hover{ opacity:.92; }
.nro-foot-blurb{ color:var(--text-1); font-size:13.5px; max-width:320px; margin-top:8px; }
.nro-foot-grid h4{
  font-family:var(--ff-ledger); font-size:12.5px; color:var(--gold); text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:14px; font-weight:700;
}
.nro-foot-grid ul{ list-style:none; padding:0; margin:0; }
.nro-foot-grid li{ margin-bottom:9px; }
.nro-foot-grid a{
  color:var(--text-1); font-size:13.5px; text-decoration:none; position:relative;
  transition:color .2s ease, padding-left .2s ease;
}
.nro-foot-grid a::before{
  content:'\25B8'; position:absolute; left:-14px; top:0; opacity:0; color:var(--gold);
  transition:opacity .2s ease, left .2s ease;
}
.nro-foot-grid a:hover{ color:var(--gold); padding-left:14px; }
.nro-foot-grid a:hover::before{ opacity:1; left:0; }
.nro-foot-bottom{ padding-top:20px; border-top:1px solid var(--line); }
.nro-foot-bottom p{ color:var(--text-2) !important; font-size:12.5px; }
.nro-foot-select select{
  background:var(--bg-0); color:var(--text-1); border:1px solid var(--line); border-radius:6px; padding:3px 6px;
}

@media (max-width:900px){
  .nro-foot-grid-wide{ grid-template-columns:1fr 1fr; }
}
@media (max-width:700px){
  .nro-foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .nro-foot-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   Shared design-system classes (hero, cards, tables) — ready for
   main/index.php and any module views you reskin next.
   ============================================================ */
.glass-card{
  background:linear-gradient(160deg, var(--glass-strong), var(--glass));
  border:1px solid var(--line); border-radius:20px; backdrop-filter:blur(10px);
}
.btn-nro{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:11px; font-weight:700; font-size:14.5px;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
}
.btn-nro-primary{
  background:linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, #b08d3e);
  color:#221a08 !important; font-weight:700;
  box-shadow:0 0 0 1px rgba(240,212,138,.5) inset, 0 6px 24px rgba(217,180,91,.25);
  position:relative; overflow:hidden;
}
.btn-nro-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(240,212,138,.7) inset, 0 10px 32px rgba(217,180,91,.4);
}
.btn-nro-primary::after, .nro-btn-play::after, .nro-btn-donate::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg); transition:left .5s; pointer-events:none;
}
.btn-nro-primary:hover::after, .nro-btn-play:hover::after, .nro-btn-donate:hover::after{ left:120%; }
.btn-nro-ghost{ background:var(--glass); border-color:var(--line); color:var(--text-0); }

/* ============================================================
   HOMEPAGE (main/index.php)
   ============================================================ */
.nro-hero{ padding:56px 0 40px; text-align:center; }
.nro-hero-inner{ max-width:680px; margin:0 auto; }
.nro-hero-logo{ height:64px; width:auto; margin:0 auto 20px; display:block; }
.nro-status-pill{
  display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:100px;
  background:var(--glass); border:1px solid var(--line); font-size:13px; font-weight:600; margin-bottom:20px;
}
.nro-dot{ width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px rgba(34,197,94,0.22); }
.nro-hero h1{ font-size:clamp(28px,4vw,42px); font-weight:800; line-height:1.15; margin-bottom:16px; }
.nro-lede{ color:var(--text-1); font-size:16px; margin-bottom:10px; }
.nro-hero-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:24px; }

.nro-hero-ctas-secondary{ margin-top:16px; gap:10px; align-items:center; }
.btn-nro-text{ color:var(--text-1); font-size:13.5px; font-weight:600; text-decoration:none; }
.btn-nro-text:hover{ color:var(--gold); }
.nro-hero-ctas-sep{ color:var(--text-2); }

.nro-rates-bar{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0;
  margin-top:36px; padding:18px 8px; border-radius:14px;
  border:1px solid var(--gold-dim); background:rgba(255,255,255,0.025);
}
.nro-rate{ display:flex; flex-direction:column; align-items:center; padding:0 26px; }
.nro-rate .k{ font-family:var(--ff-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-2); margin-bottom:5px; }
.nro-rate .v{ font-family:var(--ff-display); font-weight:800; font-size:18px; color:var(--gold); }
.nro-rate-sep{ width:1px; height:32px; background:var(--gold-dim); }
@media (max-width:640px){
  .nro-rates-bar{ gap:14px 0; }
  .nro-rate{ padding:0 14px; width:45%; }
  .nro-rate-sep{ display:none; }
}

.nro-news-section{ padding:24px 0 56px; }
.nro-news-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:22px; }
.nro-news-card{ padding:0; overflow:hidden; }
.nro-news-body{ padding:24px 26px; }
.nro-news-date{ font-family:var(--ff-mono); font-size:11.5px; color:var(--accent); letter-spacing:.04em; margin-bottom:8px; }
.nro-news-body h3{ font-size:18px; margin:0 0 10px; font-weight:700; }
.nro-news-content{ color:var(--text-1); font-size:14px; line-height:1.6; }
.nro-news-content p{ margin:0 0 10px; }
.nro-news-content img{ max-width:100%; border-radius:8px; }
.nro-news-modified{ color:var(--text-2); font-size:12px; margin-top:10px; }
.read-more{ display:inline-block; margin-top:14px; font-size:13px; font-weight:700; color:var(--accent); text-decoration:none; }
.read-more:hover{ color:var(--primary); }
.nro-empty{ text-align:center; color:var(--text-1); padding:40px 0; }

.nro-setup-card{ max-width:560px; margin:24px auto 0; padding:28px 30px; }
.nro-setup-card ol{ padding-left:20px; color:var(--text-1); }
.nro-setup-card li{ margin-bottom:8px; }
.nro-thanks{ color:var(--text-2); margin-top:14px; }

/* ============================================================
   Inherited partials: #submenu (tab bar) and #pagemenu (page actions)
   These come straight from bootstrap/default — only styling the IDs
   and classes they already output.
   ============================================================ */
#submenu, #pagemenu{
  background:var(--glass); border:1px solid var(--line); border-radius:12px;
  padding:12px 18px; margin:20px 0; font-size:13.5px; color:var(--text-1);
}
#submenu a, #pagemenu a{ color:var(--text-0); font-weight:600; text-decoration:none; margin-left:6px; }
#submenu a:hover, #pagemenu a:hover{ color:var(--accent); }
#submenu a.current-sub-menu{ color:var(--accent); }

/* ============================================================
   COMPATIBILITY LAYER — re-themes every class the inherited
   bootstrap/default module views (account, item, character, etc.)
   actually render. None of those .php files are touched; this just
   recolors/restyles the classes they already output for dark mode.
   ============================================================ */

h3{
  font-family:var(--ff-ledger); font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--gold); border-bottom:1px solid var(--gold-dim); padding-bottom:8px;
  margin:28px 0 14px; display:flex; align-items:center; gap:9px;
}
h3::before{
  content:''; width:7px; height:7px; background:var(--accent); transform:rotate(45deg);
  box-shadow:0 0 6px var(--accent); flex-shrink:0; border-radius:0;
}
h3:first-letter{ font-weight:700; }

/* Inline alert boxes (module-level errors/success, distinct from the
   session flash-message .message/.notice styled earlier) */
.red{
  display:block; padding:12px 16px; border-radius:10px; font-weight:600; font-size:14px;
  color:#ffd7d7; background:rgba(239,68,68,0.14); border:1px solid rgba(239,68,68,0.35);
  margin-bottom:14px;
}
.green{
  display:block; padding:12px 16px; border-radius:10px; font-weight:600; font-size:14px;
  color:#bdf5cf; background:rgba(34,197,94,0.14); border:1px solid rgba(34,197,94,0.35);
  margin-bottom:14px;
}
.note{ padding:10px 14px; border-radius:8px; color:var(--text-1); background:var(--glass); font-style:italic; }

/* Data tables: account list, char list, storage, ban log, xfer log, etc. */
.horizontal-table, .vertical-table, .generic-form-table{
  border-spacing:0; border-collapse:collapse; width:100%; margin:16px 0 24px;
  font-size:13.5px; background:rgba(255,255,255,0.025);
  border:1px solid var(--gold-dim);
  border-radius:12px; overflow:hidden;
  position:relative;
}
.horizontal-table th, .vertical-table th, .generic-form-table th{
  padding:11px 14px; background:rgba(216,180,92,0.08); color:var(--text-0);
  font-family:var(--ff-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; text-align:left;
  border:1px solid var(--gold-dim); border-bottom:2px solid var(--gold);
  font-weight:700;
}
.horizontal-table td, .vertical-table td, .generic-form-table td{
  padding:11px 14px; background:transparent; border:1px solid rgba(148,163,220,0.18); color:var(--text-0);
}
.horizontal-table td, .horizontal-table th, .vertical-table td, .vertical-table th{
  border-left:none !important; border-right:none !important; border-bottom:1px solid rgba(148,163,220,0.16) !important;
}
.horizontal-table th, .vertical-table th{ border-bottom:2px solid var(--gold) !important; }
.horizontal-table tr:nth-child(even) td, .vertical-table tr:nth-child(even) td{
  background:rgba(255,255,255,0.03);
}
.horizontal-table tr:hover td, .vertical-table tr:hover td{ background:rgba(34,211,238,0.06); }
.vertical-table label{ display:block; padding:4px 0; color:var(--text-1); }
.vertical-table .td-action{ text-align:right; }
.td-action{ color:var(--text-2); text-align:center; }

/* Account view: stat-card grid (replaces the old label/value table for the
   read-only summary fields — everything else stays a table). */
.acct-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:18px 0 26px; }
.acct-stat-card{ padding:14px 16px; }
.acct-stat-card .k{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-1); font-family:var(--ff-mono); margin-bottom:6px; }
.acct-stat-card .v{ font-size:15px; font-weight:700; color:var(--text-0); }
.acct-stat-card.gold .v{ color:var(--gold); }
.acct-stat-card.full{ grid-column:1 / -1; }
@media (max-width:900px){ .acct-stat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .acct-stat-grid{ grid-template-columns:1fr; } }

.not-applicable{ font-style:italic; color:var(--text-2); }
/* Base pill treatment for any account-state span, regardless of which
   specific state suffix it carries — so an unnamed/custom state still
   reads as a badge instead of plain text. Specific states below override
   the color. */
.account-state{
  display:inline-flex; align-items:center; padding:2px 10px; border-radius:100px; font-size:11px; font-weight:700;
  font-family:var(--ff-mono); background:rgba(148,163,220,0.12); color:var(--text-1); border:1px solid var(--line);
}
.state-normal, .account-state.state-normal{
  background:rgba(34,197,94,0.14); color:#8ff0b4; border-color:rgba(34,197,94,0.35);
}
.state-pending, .account-state.state-pending{
  display:inline-flex; align-items:center; padding:2px 10px; border-radius:100px; font-size:11px; font-weight:700;
  font-family:var(--ff-mono); background:rgba(245,158,11,0.14); color:#ffd48a; border:1px solid rgba(245,158,11,0.35);
}
.state-banned, .account-state.state-banned,
.state-suspended, .account-state.state-suspended{
  display:inline-flex; align-items:center; padding:2px 10px; border-radius:100px; font-size:11px; font-weight:700;
  font-family:var(--ff-mono); background:rgba(239,68,68,0.14); color:#ff9d9d; border:1px solid rgba(239,68,68,0.35);
}
.state-permanently-banned{
  display:inline-flex; align-items:center; padding:2px 10px; border-radius:100px; font-size:11px; font-weight:700;
  font-family:var(--ff-mono); background:rgba(239,68,68,0.22); color:#ffbdbd; border:1px solid rgba(239,68,68,0.5);
}
.account-state.state-unknown{
  display:inline-flex; align-items:center; padding:2px 10px; border-radius:100px; font-size:11px; font-weight:700;
  font-family:var(--ff-mono); background:rgba(148,163,220,0.12); color:var(--text-1); border:1px solid var(--line);
}

.online{
  display:inline-flex; align-items:center; gap:6px; color:var(--success); font-weight:600; font-size:12.5px;
}
.online::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 6px var(--success); }
.offline{ display:inline-flex; align-items:center; gap:6px; color:var(--text-2); font-size:12.5px; }
.offline::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--text-2); }

.toggler{ font-weight:700; font-size:13.5px; }
.toggler a{ color:var(--accent); text-decoration:none; }
.toggler a:hover{ color:var(--primary); }

/* Search/filter forms (account index, item index, etc.) */
.search-form, .search-form2{
  display:none; margin:0 0 18px; padding:16px; border:1px solid var(--line); border-radius:12px;
  background:var(--glass);
}
.search-form p, .search-form2 p{ margin:0 0 10px; padding:0 0 10px; color:var(--text-1); border-bottom:1px solid var(--line); }
.search-form label, .search-form2 label{ display:inline-block; margin:0 8px 4px 0; font-size:12.5px; color:var(--text-1); font-style:normal; }

.sortable{ color:var(--text-1); text-decoration:none; border-bottom:1px dotted var(--text-2); }
.sortable:hover{ color:var(--accent); }

.remaining-balance, .exchange-rate, .important{ color:var(--text-0); font-weight:700; }
.important .server-name{ color:var(--accent); }

.generic-form, .generic-form-div{
  padding:22px 24px; background:rgba(255,255,255,0.035) !important; border:1px solid var(--gold-dim) !important; border-radius:12px; width:auto;
  position:relative;
}
.generic-form-table th{ text-align:left; color:var(--gold); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; background:transparent !important; border-bottom-color:var(--gold-dim) !important; }
.generic-form-table th label{ display:block; padding:6px; color:var(--gold); }
.generic-form-table td div{ display:block; padding:6px 0; }
.generic-form-table td input[type=checkbox]{ display:inline-block; margin-top:6px; }
.generic-form-table td p{ margin:6px 0; color:var(--text-1); font-size:12.5px; }

/* Chrome/Safari force their own background on autofilled fields; this
   overrides that back to the theme instead of the browser's default white. */
input:-webkit-autofill, input:-webkit-autofill:hover,
input:-webkit-autofill:focus, input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px rgba(255,255,255,0.05) inset !important;
  -webkit-text-fill-color:var(--text-0) !important;
  caret-color:var(--text-0);
  transition:background-color 9999s ease-in-out 0s;
}

.security-code{ margin:8px 0; }
.action{ color:var(--text-2); font-size:12.5px; }
.action a, .action span.anchor{ color:var(--accent); border-bottom:none; }
.block-link{ display:inline-block; padding:4px 10px; border-radius:6px; color:var(--accent); background:var(--glass); font-size:12.5px; text-decoration:none; }
.block-link:hover{ background:var(--glass-strong); }

.identified.yes, .broken.no{ color:var(--success); font-weight:600; }
.identified.no, .broken.yes{ color:var(--text-2); }
.item_name{ color:var(--text-0); }

/* Paginator output ($paginator->getHTML() / ->infoText()) */
.pages{ margin-top:18px; padding-top:14px; text-align:center; border-top:1px solid var(--line); color:var(--text-2); }
.pages a{ text-decoration:none; }
.pages .page-prev, .pages .page-next{ color:var(--accent); font-weight:600; }
.pages .page-prev:hover, .pages .page-next:hover{ color:var(--primary); }
.pages .page-num{ padding:0 4px; }
.pages .page-num a{ color:var(--text-1); padding:3px 8px; border-radius:6px; }
.pages .page-num a:hover{ background:var(--glass); color:var(--text-0); }
.pages .current-page{ color:#fff; font-weight:700; background:linear-gradient(135deg,var(--primary),var(--secondary)); padding:3px 9px; border-radius:6px; }
.pages input[type=text]{ width:50px; text-align:center; }
.info-text{
  margin-bottom:12px; padding:10px 14px; color:var(--text-1); background:var(--glass);
  border:1px solid var(--line); border-radius:10px; text-align:center; font-size:13px;
}
.info-text-total, .info-text-results{ color:var(--text-0); font-weight:700; }

.character-stats{ color:var(--text-1); }
.character-stats .stat-name{ color:var(--text-2); }
.character-stats .stat-value{ color:var(--text-0); font-weight:700; }

/* Generic form controls sitewide — login, register, account forms, etc. */
input[type=text], input[type=password], input[type=email], input[type=number],
select, textarea{
  background:rgba(255,255,255,0.05) !important; color:var(--text-0) !important;
  border:1px solid rgba(148,163,220,0.35) !important; border-radius:8px !important;
  padding:9px 12px !important; font-family:var(--ff-body) !important; font-size:14px !important;
  box-shadow:none !important;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
select:focus, textarea:focus{ outline:none !important; border-color:var(--accent) !important; }
/* The open dropdown list is a separate render surface from the closed
   <select> box — without this, Chrome/Edge fall back to a white list
   with barely-visible text even though the closed box looks themed. */
select option{
  background:var(--bg-1) !important;
  color:var(--text-0) !important;
}
select option:checked, select option:hover{
  background:var(--primary) !important;
  color:#fff !important;
}
input[type=radio], input[type=checkbox]{ accent-color: var(--accent); width:15px; height:15px; vertical-align:middle; }
input[type=submit], input[type=button], input[type=reset], button{
  background:linear-gradient(135deg, var(--gold), #a9821f) !important; color:#241a02 !important; border:1px solid rgba(216,180,92,0.6) !important;
  border-radius:8px !important; padding:10px 22px !important; font-weight:700 !important; font-size:13.5px !important;
  cursor:pointer; font-family:var(--ff-body);
}
input[type=submit]:hover, button:hover{ opacity:.92; }
label{ color:var(--text-1); }

/* "Note: ..." style paragraphs above forms (matched structurally, no PHP
   class exists for these) get a quiet highlighted treatment instead of
   a wall of plain bold text. Falls back gracefully if :has() isn't supported. */
p:has(> strong:first-child){
  background:var(--glass); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0; padding:9px 14px; margin:8px 0; font-size:13.5px; color:var(--text-1);
}
p:has(> strong:first-child) strong{ color:var(--text-0); }

.security-code img{ border-radius:8px; border:1px dashed var(--gold-dim); display:block; }

/* Responsive forms: generic-form-table is a rigid <table>, so on small
   screens we drop the table semantics and stack label above field. */
@media (max-width: 640px){
  .generic-form{ padding:18px; }
  .generic-form-table, .generic-form-table tbody,
  .generic-form-table tr, .generic-form-table th, .generic-form-table td{
    display:block; width:100%; border:none !important; padding:0 !important;
  }
  .generic-form-table tr{ margin-bottom:14px; }
  .generic-form-table th{ text-align:left !important; padding-bottom:6px !important; background:none !important; }
  .generic-form-table td{ padding-bottom:4px !important; }
  .generic-form-table th label{ padding:0 !important; }
  .horizontal-table, .horizontal-table thead, .horizontal-table tbody{ display:block; }
  .horizontal-table{ overflow-x:auto; display:block; white-space:nowrap; }
}

/* ============================================================
   SERVER INFO PAGE (info/index.php) — medallion stat cards + class chips
   ============================================================ */
.nro-medallion-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin:18px 0 28px; }
.nro-medallion-card{ text-align:center; padding:20px 12px; }
.nro-medallion-card .medallion{
  width:52px; height:52px; margin:0 auto 12px; border-radius:50%; position:relative;
  background:radial-gradient(circle at 35% 30%, rgba(216,180,92,0.18), rgba(0,0,0,0.2));
  border:2px solid var(--gold); box-shadow:0 0 0 3px rgba(11,16,32,0.6), 0 0 0 4px rgba(216,180,92,0.2);
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.nro-medallion-card .medallion::before{
  content:''; position:absolute; inset:-5px; border-radius:50%; border:1px dashed rgba(216,180,92,0.35);
}
.nro-medallion-card .k{ font-family:var(--ff-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-1); margin-bottom:4px; }
.nro-medallion-card .v{ font-family:var(--ff-display); font-weight:800; font-size:17px; color:var(--text-0); }
.nro-medallion-card.gold .v{ color:var(--gold); }

.nro-class-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:18px 0 10px; }
.nro-class-chip{
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px;
  background:rgba(255,255,255,0.025); border:1px solid var(--gold-dim); border-radius:9px;
}
.nro-class-chip .name{ font-size:12.5px; color:var(--text-1); font-weight:600; }
.nro-class-chip .count{ font-family:var(--ff-mono); font-size:13px; color:var(--gold); font-weight:700; }

@media (max-width:900px){
  .nro-medallion-grid{ grid-template-columns:repeat(3,1fr); }
  .nro-class-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px){
  .nro-medallion-grid{ grid-template-columns:repeat(2,1fr); }
  .nro-class-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   LARGE-MONITOR SCALING for the Tailwind-based pages (Server Info +
   all 8 ranking pages). Tailwind's sizing is rem-based, so bumping the
   root font-size scales text/spacing/gaps proportionally everywhere
   without touching each file individually. Card widths grow to match
   so they don't look small/adrift on a wide viewport either.
   Scoped to auth-mode pages only — doesn't affect the rest of the site,
   which is built in px, not rem. */
@media (min-width: 1600px){
  html.auth-mode{ font-size:18px; }
  .auth-card-xwide{ width:1240px; }
  .auth-card-wide{ width:760px; }
}
@media (min-width: 2200px){
  html.auth-mode{ font-size:21px; }
  .auth-card-xwide{ width:1480px; }
  .auth-card-wide{ width:860px; }
}
@media (min-width: 3000px){
  html.auth-mode{ font-size:24px; }
  .auth-card-xwide{ width:1720px; }
  .auth-card-wide{ width:960px; }
}

/* ============================================================
   HOMEPAGE DASHBOARD LAYOUT (main/index.php)
   ============================================================ */
.nro-dash-layout{ display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; max-width:1400px; margin:0 auto; padding:24px 24px 56px; }
@media (max-width:1000px){ .nro-dash-layout{ grid-template-columns:1fr; } }

/* Hero */
.nro-dash-hero{
  position:relative; overflow:hidden; border-radius:16px; padding:44px 40px; min-height:300px;
  background:
    radial-gradient(700px 500px at 85% 30%, rgba(139,92,246,0.24), transparent 60%),
    radial-gradient(600px 400px at 100% 90%, rgba(34,211,238,0.12), transparent 55%),
    radial-gradient(500px 400px at 100% 10%, rgba(216,180,92,0.09), transparent 55%),
    linear-gradient(115deg, #141024 0%, #0d1220 55%, #171029 100%);
  border:1px solid var(--line); text-align:center;
}
.nro-dash-hero-inner{ position:relative; max-width:560px; margin:0 auto; }
.nro-dash-hero-logo{ height:56px; margin:14px auto 16px; display:block; }
.nro-sakura{
  position:absolute; border-radius:0 60% 60% 60%; pointer-events:none; opacity:0;
  animation:nroSakuraFall linear infinite;
}
@keyframes nroSakuraFall{
  0%{ opacity:0; transform:translate(0,-10%) rotate(0deg); }
  8%{ opacity:.85; }
  92%{ opacity:.6; }
  100%{ opacity:0; transform:translate(60px, 320px) rotate(340deg); }
}

/* Why Play section */
.nro-section-card{
  background:linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border:1px solid var(--line); border-radius:16px; padding:24px; margin-top:20px;
}
.nro-banner{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.nro-banner .rune{ color:var(--gold); font-size:11px; }
.nro-banner-title{ font-family:var(--ff-ledger); font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); }
.nro-why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:800px){ .nro-why-grid{ grid-template-columns:repeat(2,1fr); } }
.nro-why-card{ padding:18px 16px; border-radius:12px; background:rgba(255,255,255,0.02); border:1px solid var(--line); }
.nro-why-ico{ width:38px; height:38px; border-radius:10px; background:rgba(216,180,92,0.1); border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center; font-size:17px; margin-bottom:12px; }
.nro-why-card h3{ font-family:var(--ff-display); font-size:14px; margin:0 0 6px; color:var(--gold); }
.nro-why-card p{ font-size:12.5px; color:var(--text-1); line-height:1.55; margin:0; }

/* Sidebar */
.nro-sidebar-card{
  background:linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border:1px solid var(--line); border-radius:16px; padding:20px; margin-bottom:20px;
}
.nro-sidebar-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.nro-sidebar-head .t{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-1); }
.nro-live-tag{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--success); font-weight:600; }

.nro-status-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.nro-status-item{ display:flex; align-items:center; gap:10px; }
.nro-status-ico{ width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,0.05); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.nro-status-item .k{ font-size:10.5px; color:var(--text-2); text-transform:uppercase; letter-spacing:.04em; }
.nro-status-item .v{ font-family:var(--ff-mono); font-weight:700; font-size:16px; color:var(--gold); }

.nro-btn-view-full{
  display:flex; align-items:center; justify-content:space-between; width:100%; padding:11px 14px;
  background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:9px; color:var(--text-1);
  font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; text-decoration:none;
}
.nro-btn-view-full:hover{ color:var(--gold); border-color:var(--gold-dim); }

.nro-quick-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.nro-quick-item{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px;
  background:rgba(255,255,255,0.02); border:1px solid var(--line); border-radius:10px; color:var(--text-1);
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; text-decoration:none;
}
.nro-quick-item:hover{ border-color:var(--gold-dim); color:var(--gold); }
.nro-quick-ico{ width:36px; height:36px; border-radius:9px; background:rgba(255,255,255,0.04); display:flex; align-items:center; justify-content:center; font-size:15px; }

.nro-feat-list{ display:grid; grid-template-columns:1fr 1fr; gap:12px 10px; }
.nro-feat-item{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-1); }
.nro-feat-ico{ font-size:14px; flex-shrink:0; }


/* ============================================================
   V2 "REALM AT DUSK" REDESIGN — homepage components matching the
   approved mockup. All classes prefixed nro2- so nothing collides
   with the earlier dashboard layout or inherited pages.
   ============================================================ */

/* ---- Starfield + sakura canvas (site-wide, behind everything) ---- */
#nroSky{ position:fixed; top:0; left:0; right:0; bottom:0; z-index:0; pointer-events:none; }

/* ---- Layout shell ---- */
.nro2-wrap{ max-width:1080px; margin:0 auto; padding:0 20px; }

/* ---- Hero ---- */
.nro2-hero{
  position:relative; text-align:center;
  padding:64px 20px 120px;
}
.nro2-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--sakura); margin-bottom:26px;
}
.nro2-eyebrow::before, .nro2-eyebrow::after{
  content:""; width:36px; height:1px;
  background:linear-gradient(90deg, transparent, var(--sakura));
}
.nro2-eyebrow::after{ background:linear-gradient(90deg, var(--sakura), transparent); }
.nro2-dot{
  width:7px; height:7px; border-radius:50%; background:var(--success);
  box-shadow:0 0 12px var(--success); animation:nro2Pulse 2s infinite;
}
@keyframes nro2Pulse{ 50%{ opacity:.4; } }
.nro2-hero-logo{
  width:min(560px, 86vw); height:auto; display:block; margin:0 auto 10px;
  filter:drop-shadow(0 6px 40px rgba(217,180,91,.30));
  animation:nro2HeroGlow 5s ease-in-out infinite;
}
@keyframes nro2HeroGlow{
  0%,100%{ filter:drop-shadow(0 6px 40px rgba(217,180,91,.30)); }
  50%{ filter:drop-shadow(0 6px 52px rgba(242,167,195,.40)); }
}
.nro2-lede{
  font-size:clamp(16px, 2.2vw, 20px); font-weight:300; color:var(--text-1);
  max-width:560px; margin:0 auto 38px; line-height:1.6;
}
.nro2-lede em{ font-style:normal; color:var(--text-0); font-weight:400; }
.nro2-ctas{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-bottom:20px; }
.nro2-sub{ font-size:13px; color:var(--text-1); }
.nro2-sub a{ color:var(--gold); text-decoration:none; border-bottom:1px dotted var(--gold-dim); }
.nro2-sub a:hover{ color:var(--gold-bright); }
.btn-nro-lg{ padding:14px 30px; font-size:15px; border-radius:8px; }

/* ---- HUD status strip ---- */
.nro2-hud{ position:relative; z-index:2; margin:-72px auto 0; }
.nro2-hud-inner{
  display:grid; grid-template-columns:repeat(5, 1fr);
  background:linear-gradient(180deg, rgba(26,29,61,.92), rgba(16,19,42,.95));
  border:1px solid var(--line); border-radius:10px;
  backdrop-filter:blur(10px);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  overflow:hidden;
}
.nro2-hud-cell{ padding:22px 16px 18px; text-align:center; position:relative; }
.nro2-hud-cell + .nro2-hud-cell::before{
  content:""; position:absolute; left:0; top:20%; bottom:20%; width:1px;
  background:linear-gradient(180deg, transparent, var(--gold-dim), transparent);
}
.nro2-hud-label{
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--text-1); margin-bottom:6px;
}
.nro2-hud-value{
  font-family:var(--ff-mono); font-weight:600;
  font-size:clamp(17px, 2.2vw, 24px); color:var(--gold-bright);
}
.nro2-hud-value .ok{ color:var(--success); font-size:14px; }
.nro2-hud-value small{ font-size:12px; color:var(--text-1); font-weight:400; }

/* ---- Section headings ---- */
.nro2-section{ position:relative; z-index:1; padding-top:88px; }
.nro2-sec-head{ text-align:center; margin-bottom:44px; }
.nro2-sec-eyebrow{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--sakura); display:block; margin-bottom:12px;
}
.nro2-sec-head h2, .nro2-cta h2{
  display:block; justify-content:center;
}
.nro2-sec-head h2::before, .nro2-cta h2::before{ content:none; }
.nro2-sec-head h2{
  font-family:var(--ff-ledger); font-weight:600;
  font-size:clamp(24px, 3.6vw, 34px); letter-spacing:.05em;
  color:var(--gold-bright); margin:0;
}
.nro2-sec-head p{ color:var(--text-1); max-width:520px; margin:14px auto 0; font-weight:300; }

/* ---- Corner-bracket panels ---- */
.nro2-panel{
  position:relative;
  background:linear-gradient(180deg, rgba(26,29,61,.55), rgba(16,19,42,.7));
  border:1px solid var(--line); border-radius:10px;
  padding:28px 24px;
}
.nro2-panel::before, .nro2-panel::after,
.nro2-panel .c3::before, .nro2-panel .c3::after{
  content:""; position:absolute; width:14px; height:14px;
  border-color:var(--gold); border-style:solid; opacity:.75;
}
.nro2-panel::before{ top:-1px; left:-1px; border-width:2px 0 0 2px; border-radius:4px 0 0 0; }
.nro2-panel::after{ top:-1px; right:-1px; border-width:2px 2px 0 0; border-radius:0 4px 0 0; }
.nro2-panel .c3::before{ bottom:-1px; left:-1px; border-width:0 0 2px 2px; border-radius:0 0 0 4px; }
.nro2-panel .c3::after{ bottom:-1px; right:-1px; border-width:0 2px 2px 0; border-radius:0 0 4px 0; }

/* ---- Features ---- */
.nro2-features{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.nro2-feature{ transition:transform .25s, border-color .25s; }
.nro2-feature:hover{ transform:translateY(-6px); border-color:var(--gold-dim); }
.nro2-glyph{
  width:52px; height:52px; margin-bottom:16px;
  display:grid; place-items:center;
  border:1px solid var(--gold-dim); border-radius:8px;
  background:radial-gradient(circle at 50% 30%, rgba(217,180,91,.14), transparent 70%);
}
.nro2-glyph svg{
  width:26px; height:26px; stroke:var(--gold-bright); fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.nro2-feature h3{
  font-family:var(--ff-ledger); font-size:15px; letter-spacing:.06em;
  color:var(--text-0); margin:0 0 8px;
}
.nro2-feature p{ font-size:13.5px; color:var(--text-1); font-weight:300; margin:0; line-height:1.55; }

/* ---- Rates band ---- */
.nro2-band{
  margin-top:88px; position:relative; z-index:1;
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, rgba(36,27,69,.35), rgba(217,180,91,.06), rgba(36,27,69,.35));
}
.nro2-band-inner{
  max-width:1080px; margin:0 auto; padding:32px 20px;
  display:flex; justify-content:center; gap:clamp(24px, 6vw, 80px); flex-wrap:wrap;
}
.nro2-rate{ text-align:center; }
.nro2-rate b{
  font-family:var(--ff-ledger); font-size:clamp(22px, 3vw, 32px); font-weight:700;
  color:var(--gold-bright); display:block;
}
.nro2-rate span{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--text-1);
}

/* ---- Server-features chips ---- */
.nro2-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:36px; }
.nro2-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:999px;
  border:1px solid var(--line); background:rgba(26,29,61,.5);
  font-size:13px; color:var(--text-1);
}
.nro2-chip .i{ color:var(--gold-bright); }

/* ---- Quick access ---- */
.nro2-quick{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.nro2-quick a{
  text-decoration:none; color:var(--text-0); text-align:center;
  padding:32px 14px 26px;
  transition:transform .25s, border-color .25s, background .25s;
}
.nro2-quick a:hover{
  transform:translateY(-6px); border-color:var(--gold); text-decoration:none; color:var(--text-0);
  background:linear-gradient(180deg, rgba(36,27,69,.7), rgba(16,19,42,.8));
}
.nro2-q-icon{ font-size:25px; margin-bottom:10px; color:var(--gold-bright); }
.nro2-q-label{ font-family:var(--ff-ledger); font-size:13.5px; letter-spacing:.14em; }
.nro2-q-hint{ display:block; font-size:12px; color:var(--text-1); margin-top:6px; font-weight:300; }

/* ---- Final CTA ---- */
.nro2-cta{ text-align:center; padding:96px 20px 40px; }
.nro2-cta .nro2-panel{ max-width:720px; margin:0 auto; padding:56px 28px; }
.nro2-cta h2{
  font-family:var(--ff-ledger); font-weight:600;
  font-size:clamp(24px, 3.6vw, 34px); letter-spacing:.05em;
  color:var(--gold-bright); margin:0 0 14px;
}
.nro2-cta p{ color:var(--text-1); font-weight:300; max-width:440px; margin:0 auto 30px; }

/* ---- Scroll reveal ---- */
.nro2-reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.nro2-reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .nro2-reveal{ opacity:1; transform:none; }
  .nro2-hero-logo{ animation:none; }
  .nro2-dot{ animation:none; }
}

/* ---- Responsive ---- */
@media (max-width:900px){
  .nro2-features{ grid-template-columns:repeat(2, 1fr); }
  .nro2-quick{ grid-template-columns:repeat(2, 1fr); }
  .nro2-hud-inner{ grid-template-columns:repeat(2, 1fr); }
  .nro2-hud-cell:nth-child(2n+1)::before{ display:none; }
  .nro2-hud-cell{ border-bottom:1px solid rgba(217,180,91,.08); }
}
@media (max-width:640px){
  .nro2-features{ grid-template-columns:1fr; }
  .nro2-quick{ grid-template-columns:1fr 1fr; }
  .nro2-hud{ margin-top:-52px; }
  .nro2-hero{ padding:40px 16px 100px; }
}


/* ============================================================
   RUNIC CIRCLE LOADER — full-screen overlay for page loads and
   form submissions (see main/loader.php). Vector SVG + font
   runes, so it stays razor sharp at any resolution.
   ============================================================ */
#nroLoader{
  position:fixed; top:0; left:0; right:0; bottom:0; z-index:99999;
  background:#0a0c18;
  display:flex; align-items:center; justify-content:center;
  opacity:1; transition:opacity .45s ease;
}
#nroLoader.nro-loader-fade{ opacity:0; pointer-events:none; }
#nroLoader.nro-loader-hidden{ display:none; }
.nro-loader-aurora{
  position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none;
  background:
    radial-gradient(60% 40% at 70% 8%, rgba(120,80,200,.30), transparent 60%),
    radial-gradient(50% 35% at 20% 18%, rgba(242,167,195,.14), transparent 60%),
    radial-gradient(45% 30% at 50% 100%, rgba(217,180,91,.08), transparent 60%);
}
.nro-loader-inner{ position:relative; text-align:center; }
.nro-runic{
  position:relative; width:190px; height:190px; margin:0 auto 26px;
}
.nro-runic-guides{
  position:absolute; top:0; left:0; width:100%; height:100%;
}
.nro-runic-arc{
  transform-origin:50% 50%;
  animation:nroSpin 2.2s linear infinite;
}
.nro-runic-ring{
  position:absolute; top:0; left:0; width:100%; height:100%;
  animation:nroSpin 14s linear infinite;
}
.nro-runic-ring span{
  position:absolute; left:50%; top:50%;
  font-size:19px; line-height:1; color:var(--gold);
  text-shadow:0 0 10px rgba(217,180,91,.65);
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(-80px);
}
.nro-runic-ring span:nth-child(3n){ color:var(--gold-bright); }
.nro-runic-ring span:nth-child(4n){ text-shadow:0 0 10px rgba(242,167,195,.55); }
.nro-runic-core{
  position:absolute; top:0; left:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.nro-runic-core svg{
  width:52px; height:52px;
  animation:nroCorePulse 2s ease-in-out infinite;
}
.nro-loader-label{
  font-family:var(--ff-ledger); font-size:19px; letter-spacing:.14em;
  color:var(--gold-bright);
  animation:nroLabelBreathe 2s ease-in-out infinite;
}
.nro-loader-flavor{
  font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.12em;
  color:var(--mist, #8b93b8); margin-top:12px; min-height:18px;
  opacity:0; transform:translateY(4px);
  transition:opacity .35s ease, transform .35s ease;
  max-width:82vw; margin-left:auto; margin-right:auto;
}
.nro-loader-flavor.in{ opacity:.9; transform:none; color:var(--sakura); }

/* Variant B: Runestone Cast */
.nro-stones{
  display:flex; gap:22px; justify-content:center;
  height:190px; align-items:center; margin:0 auto 26px;
}
.nro-stone{
  width:56px; height:76px; border-radius:12px 12px 15px 15px;
  background:linear-gradient(180deg, #1a1d3d, #0e1128);
  border:1px solid var(--gold-dim);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.55), 0 0 0 1px rgba(240,212,138,.06) inset;
  animation:nroStoneFlip 1.8s ease-in-out infinite;
}
.nro-stone span{
  font-size:30px; line-height:1; color:var(--gold-bright);
  text-shadow:0 0 12px rgba(217,180,91,.6);
}
.nro-stone:nth-child(2){ animation-delay:.2s; }
.nro-stone:nth-child(3){ animation-delay:.4s; }
@keyframes nroStoneFlip{
  0%,60%,100%{ transform:translateY(0) rotateX(0); }
  20%{ transform:translateY(-22px) rotateX(180deg); }
  35%{ transform:translateY(0) rotateX(360deg); }
}
.nro-stone:nth-child(1) span{ color:var(--gold-bright); }
.nro-stone:nth-child(2) span{ color:var(--sakura); text-shadow:0 0 12px rgba(242,167,195,.6); }
.nro-stone:nth-child(3) span{ color:var(--gold); }
@keyframes nroSpin{ to{ transform:rotate(360deg); } }
@keyframes nroCorePulse{
  0%,100%{ transform:scale(1);    filter:drop-shadow(0 0 5px rgba(217,180,91,.5)); }
  50%    { transform:scale(1.14); filter:drop-shadow(0 0 18px rgba(242,167,195,.8)); }
}
@keyframes nroLabelBreathe{ 0%,100%{ opacity:.65; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .nro-runic-ring, .nro-runic-arc, .nro-runic-core svg, .nro-loader-label, .nro-stone{ animation:none; }
}
@media (max-width:480px){
  .nro-runic{ width:150px; height:150px; }
  .nro-runic-ring span{ transform:translate(-50%,-50%) rotate(var(--a)) translateY(-63px); font-size:15px; }
  .nro-stones{ height:150px; gap:16px; }
  .nro-stone{ width:46px; height:62px; }
  .nro-stone span{ font-size:24px; }
}


/* ============================================================
   DOWNLOAD CLIENT MODAL — opened by the homepage Download
   buttons; mirrors + info come from conf/config.php.
   Same visual language as the immersive auth card.
   ============================================================ */
.dlm-backdrop{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:100000;
  background:rgba(6,8,16,.78);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.dlm-backdrop.open{opacity:1;pointer-events:auto}
.dlm-card{
  position:relative;width:100%;max-width:440px;
  background:linear-gradient(180deg, rgba(26,29,61,.97), rgba(16,19,42,.98));
  border:1px solid var(--line);border-radius:12px;
  padding:38px 34px 30px;text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(240,212,138,.05) inset;
  transform:translateY(16px) scale(.97);transition:transform .3s ease;
}
.dlm-backdrop.open .dlm-card{transform:none}
.dlm-card::before,.dlm-card::after,.dlm-card .c3::before,.dlm-card .c3::after{
  content:"";position:absolute;width:15px;height:15px;
  border-color:var(--gold);border-style:solid;opacity:.75;
}
.dlm-card::before{top:-1px;left:-1px;border-width:2px 0 0 2px;border-radius:5px 0 0 0}
.dlm-card::after{top:-1px;right:-1px;border-width:2px 2px 0 0;border-radius:0 5px 0 0}
.dlm-card .c3::before{bottom:-1px;left:-1px;border-width:0 0 2px 2px;border-radius:0 0 0 5px}
.dlm-card .c3::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;border-radius:0 0 5px 0}
button.dlm-close{
  position:absolute;top:12px;right:14px;
  width:32px !important;height:32px !important;
  min-width:0 !important;padding:0 !important;margin:0 !important;
  display:grid;place-items:center;border-radius:7px !important;
  color:var(--text-1) !important;text-decoration:none;
  font-size:15px !important;line-height:1 !important;font-weight:400 !important;
  cursor:pointer;border:1px solid transparent !important;
  background:none !important;box-shadow:none !important;
  transition:color .2s, border-color .2s;
}
button.dlm-close:hover{
  color:var(--gold-bright) !important;border-color:var(--gold-dim) !important;
  opacity:1 !important;transform:none !important;
}
.dlm-eyebrow{
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--sakura);display:block;margin-bottom:10px;
}
.dlm-title{
  font-family:var(--ff-ledger);font-size:22px;letter-spacing:.08em;
  color:var(--gold-bright);margin-bottom:6px;
}
.dlm-note{font-size:12.5px;color:var(--text-1);font-weight:300;margin-bottom:24px}
.dlm-note b{color:var(--text-0);font-weight:600}
.dlm-list{display:flex;flex-direction:column;gap:11px;margin-bottom:20px}
.dlm-opt{
  display:flex;align-items:center;gap:14px;text-align:left;
  padding:14px 16px;border-radius:9px;text-decoration:none;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  transition:border-color .2s, background .2s, transform .2s;
}
.dlm-opt:hover{border-color:var(--gold);background:rgba(217,180,91,.07);transform:translateX(3px);text-decoration:none}
.dlm-ico{
  width:40px;height:40px;flex-shrink:0;border-radius:9px;
  display:grid;place-items:center;
  border:1px solid var(--gold-dim);
  background:radial-gradient(circle at 50% 30%, rgba(217,180,91,.14), transparent 70%);
}
.dlm-ico svg{width:20px;height:20px;stroke:var(--gold-bright);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dlm-opt-name{font-weight:600;font-size:14.5px;color:var(--text-0);display:block}
.dlm-opt-sub{font-size:11.5px;color:var(--text-1);font-weight:300;margin-top:2px;display:block}
.dlm-arrow{margin-left:auto;color:var(--gold);opacity:0;transform:translateX(-6px);transition:all .2s;font-size:15px}
.dlm-opt:hover .dlm-arrow{opacity:1;transform:none}
.dlm-foot{
  font-size:11px;color:var(--text-1);font-weight:300;
  border-top:1px solid rgba(139,147,184,.12);padding-top:14px;margin-bottom:0;
}
.dlm-foot a{color:var(--gold);text-decoration:none}
.dlm-foot a:hover{color:var(--gold-bright)}
@media (max-width:420px){ .dlm-card{padding:32px 20px 24px} }