/*
=========================================================
MK Ultra PvP — /assets/css/app.css
High-Fantasy MMO / WoW-Inspired UI (LEGAL)
FULL DROP-IN — RUNES + GLOW + PULSE + HOVER
=========================================================
*/

/* =========================
   TOKENS
   ========================= */
:root{
  --bg:#070a0f;

  --text:#e7eefc;
  --muted:rgba(231,238,252,.72);

  --accent:#d7b46a;
  --accentRgb:215,180,106;

  --shadow:0 18px 55px rgba(0,0,0,.58);

  --radius:18px;
  --radiusSm:12px;

  --maxw:1120px;
  --pad:22px;
}

/* =========================
   CLASS THEMES (optional)
   ========================= */
.theme-rogue{--accent:#f2d14b;--accentRgb:242,209,75;}
.theme-mage{--accent:#69c7ff;--accentRgb:105,199,255;}
.theme-warrior{--accent:#c89b6a;--accentRgb:200,155,106;}
.theme-deathknight{--accent:#c41f3b;--accentRgb:196,31,59;}

/* =========================
   RESET / BASE
   ========================= */
*{box-sizing:border-box;}
html,body{height:100%;}

body{
  margin:0;
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  /* BASE BACKGROUND (no runes here) */
  background:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.55)),
    radial-gradient(1200px 520px at 15% 0%, rgba(var(--accentRgb),.14), transparent 60%),
    radial-gradient(1000px 520px at 85% 0%, rgba(42,163,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.25)),
    var(--bg);

  background-attachment: fixed;
}

/* =================================================
   BLOOD RUNE BACKGROUND — REAL GLOW + PULSE
   ================================================= */

/* GLOW PASS (blurred + animated) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;

  background:url("../runes.png") center top / cover no-repeat;

  filter:
    brightness(2.6)
    saturate(3.0)
    hue-rotate(-8deg)
    blur(18px);

  opacity:.28;
  mix-blend-mode:screen;

  animation:runePulse 5.2s ease-in-out infinite;

  z-index:0;
}

/* SHARP RUNE + VIGNETTE */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;

  background:
    url("../runes.png") center top / cover no-repeat,
    radial-gradient(
      1200px 700px at 50% 20%,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,.35) 75%
    );

  opacity:.42;
  z-index:1;
}

/* PULSE ANIMATION */
@keyframes runePulse{
  0%,100%{
    opacity:.18;
    filter:
      brightness(2.1)
      saturate(2.4)
      hue-rotate(-6deg)
      blur(14px);
  }
  50%{
    opacity:.45;
    filter:
      brightness(3.4)
      saturate(4.0)
      hue-rotate(-10deg)
      blur(26px);
  }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  body::before{animation:none;}
}

/* =========================
   LAYOUT
   ========================= */
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:var(--pad);
  position:relative;
  z-index:2;
}

a{color:inherit;text-decoration:none;}
a:hover{filter:brightness(1.06);}

/* =========================
   NAV
   ========================= */
.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  border-radius:22px;

  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(var(--accentRgb),.22);
  box-shadow:var(--shadow);
}

.brand{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
}

.brand .sig{
  color:var(--accent);
  text-shadow:0 0 14px rgba(var(--accentRgb),.28);
}

.pills{display:flex;gap:10px;flex-wrap:wrap;}

/* =========================
   CARDS
   ========================= */
.card{
  position:relative;
  z-index:3;
  padding:18px;
  border-radius:var(--radius);

  background:
    radial-gradient(900px 260px at 30% 0%, rgba(var(--accentRgb),.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));

  border:1px solid rgba(var(--accentRgb),.18);
  box-shadow:var(--shadow);

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease,
    filter .2s ease;
}

/* SOLID ON HOVER */
.card:hover{
  background:linear-gradient(180deg, rgba(15,22,34,.94), rgba(10,16,26,.94));
  border-color:rgba(var(--accentRgb),.35);
  transform:translateY(-2px);
  filter:brightness(1.06);
}

/* =========================
   TEXT
   ========================= */
h1,h2,h3{margin:.2rem 0 .6rem;}
h1{text-shadow:0 0 18px rgba(var(--accentRgb),.12);}
.muted{color:var(--muted);}

/* =========================
   GRID
   ========================= */
.grid{display:grid;gap:16px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:800px){.grid-2{grid-template-columns:1fr;}}

/* =========================
   BUTTONS — CLEAN STANDARD
   (Calm default. Strong primary. Legendary is footer-only.)
   ========================= */

/* Base button: calm (prevents index from looking busy) */
.btn{
  cursor:pointer;
  height:auto;

  padding: 14px 26px;
  border-radius: var(--radiusSm);

  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .2px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background: rgba(0,0,0,.55);
  color: var(--text);

  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 10px rgba(0,0,0,.45);

  transition:
    transform .12s ease,
    filter .12s ease,
    box-shadow .12s ease,
    background .12s ease,
    color .12s ease,
    border-color .12s ease;
}

.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
  border-color: rgba(var(--accentRgb), .35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 6px 14px rgba(0,0,0,.55);
}

.btn:active{
  transform: translateY(1px) scale(.98);
  filter: brightness(1.08);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.55);
}

/* Primary: stronger CTA, still not “legendary everywhere” */
.btn-primary{
  border-color: rgba(var(--accentRgb), .45);
  background: linear-gradient(
    180deg,
    rgba(var(--accentRgb), .22),
    rgba(0,0,0,.45)
  );
}

.btn-primary:hover{
  filter: brightness(1.10);
  box-shadow:
    0 0 14px rgba(var(--accentRgb), .35),
    0 8px 16px rgba(0,0,0,.6);
}

/* Optional: Discord can be its own vibe later if you want */
.btn-discord{}

/* Discord icon inside buttons */
.btn .btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn .btn-icon svg{
  width:18px;
  height:18px;
  margin-right:6px;
  opacity:.9;
}

/* =========================
   FOOTER
   ========================= */
.footer{
  margin-top:15px;
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  color:var(--muted);
}

/* Footer layout + typography */
.footer{
  font-weight:600;
  text-align:center;
}

.footer strong{
  font-weight:800;
  letter-spacing:.3px;
}

.footer .u-row{
  justify-content:center;
  text-align:center;
  margin-top:14px;
}

.footer .u-row > div{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Keep footer buttons side-by-side */
.footer .u-row .u-row{
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin-top:14px;
}

/* Footer buttons: LEGENDARY (scoped here only) */
.footer .btn{
  padding: 18px 34px;
  border-radius: 14px;

  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .3px;

  background: linear-gradient(
    180deg,
    rgba(215,180,106,.85),
    rgba(170,130,55,.85)
  );
  color:#1a1206;

  border:1px solid rgba(215,180,106,.55);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 6px rgba(120,80,20,.55),
    0 6px 16px rgba(0,0,0,.6);
}

.footer .btn:hover{
  transform: translateY(-2px);
  color:#ffcc66;
  filter: brightness(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 0 18px rgba(215,180,106,.65),
    0 8px 18px rgba(0,0,0,.65);
}

.footer .btn:active{
  transform: translateY(1px) scale(.97);
  filter: brightness(1.18);
  background: linear-gradient(
    180deg,
    rgba(170,130,55,.95),
    rgba(120,85,25,.95)
  );
  box-shadow:
    inset 0 3px 8px rgba(80,50,10,.75),
    0 0 14px rgba(215,180,106,.55);
}

/* =========================
   NAV ALIGNMENT FIX
   ========================= */
.pills{
  display:flex;
  align-items:center;
  gap:12px;
}

.nav .pills a{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:38px;
  padding:0 14px;

  font-size:14.5px;
  font-weight:700;
  line-height:1;

  border-radius:999px;
}

.nav .pills a:not(.btn){
  opacity:.92;
}

.nav .pills .btn{
  height:38px;
  padding:0 16px;
}

.nav .pills a{
  position: relative;
  transition: transform .14s ease, filter .14s ease, background .14s ease, border-color .14s ease;
}

.nav .pills a:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.nav .pills a:not(.btn){
  background: rgba(255,255,255,0);
  border: 1px solid rgba(255,255,255,0);
}

.nav .pills a:not(.btn):hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(var(--accentRgb), .20);
}

.nav .pills a:not(.btn)::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 7px;
  height: 2px;
  border-radius: 999px;

  background: linear-gradient(90deg,
    transparent,
    rgba(var(--accentRgb), .55),
    transparent
  );

  opacity: 0;
  transform: scaleX(.65);
  transition: opacity .14s ease, transform .14s ease;
}

.nav .pills a:not(.btn):hover::after{
  opacity: 1;
  transform: scaleX(1);
}

.nav .pills .btn:hover{
  border-color: rgba(var(--accentRgb), .35);
  background: linear-gradient(180deg,
    rgba(var(--accentRgb), .16),
    rgba(255,255,255,.03)
  );
}

/* =========================
   HERO LOGO CARD
   ========================= */
.logo-card{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:260px;

  background:
    radial-gradient(600px 260px at 50% 50%,
      rgba(var(--accentRgb), .18),
      transparent 60%
    ),
    linear-gradient(180deg,
      rgba(15,22,34,.55),
      rgba(10,16,26,.55)
    );
}

.hero-logo{
  width: 75%;
  max-width: 220px;
  min-width: 90px;
  height: auto;

  filter:
    drop-shadow(0 0 14px rgba(255,40,40,.35))
    drop-shadow(0 0 36px rgba(255,40,40,.20));

  animation: logoPulse 6s ease-in-out infinite;
}

@keyframes logoPulse{
  0%,100%{
    transform: scale(1);
    filter:
      drop-shadow(0 0 12px rgba(255,40,40,.28))
      drop-shadow(0 0 28px rgba(255,40,40,.16));
  }
  50%{
    transform: scale(1.04);
    filter:
      drop-shadow(0 0 20px rgba(255,40,40,.45))
      drop-shadow(0 0 48px rgba(255,40,40,.28));
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-logo{ animation:none; }
}

/* =========================
   NAV LOGO (TINY EMBLEM)
   ========================= */
.nav .brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-logo{
  height:22px;
  width:auto;
  flex-shrink:0;

  filter:
    drop-shadow(0 0 4px rgba(255,40,40,.35))
    drop-shadow(0 0 8px rgba(255,40,40,.18));
}

/* =========================
   LOGIN PAGE LAYOUT
   ========================= */
.login-wrap{
  min-height: calc(50vh - 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.login-card{
  width: 100%;
  max-width: 520px;
  padding: 28px;

  background:
    radial-gradient(800px 240px at 50% -10%,
      rgba(var(--accentRgb), .22),
      transparent 60%
    ),
    linear-gradient(180deg,
      rgba(15,22,34,.92),
      rgba(10,16,26,.92)
    );

  border-color: rgba(var(--accentRgb), .32);
}

/* Active nav link */
.nav .pills a{
  position: relative;
  padding: 10px 12px;
  border-radius: 12px;
}

.nav .pills a.is-active{
  opacity: 1;
  border: 1px solid rgba(var(--accentRgb), .30);
  background:
    radial-gradient(420px 120px at 50% 0%,
      rgba(var(--accentRgb), .22),
      rgba(0,0,0,.10)
    );
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.35),
    0 10px 18px rgba(0,0,0,.22);
}

.nav .pills a.is-active::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(var(--accentRgb), .70), transparent);
  opacity: .9;
}

/* Login page button polish (kept, but now base buttons are calm) */
.page-login .btn-primary{
  color: #ffcc66;
  text-shadow:
    0 0 6px rgba(255, 204, 102, .55),
    0 0 14px rgba(255, 128, 0, .35);
  margin-top: 18px;
  width: 100%;
  justify-content: center;
  padding: 14px 18px;
  font-size: 1.05rem;
}

.page-login .btn-primary:hover{
  filter: brightness(1.10);
  text-shadow:
    0 0 10px rgba(255, 204, 102, .75),
    0 0 22px rgba(255, 153, 51, .55);
}

/* Login: align labels perfectly */
.page-login .login-card .field{
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 10px;
}

.page-login .login-card .field label{
  margin: 0;
  text-align: right;
  white-space: nowrap;
  color: var(--muted);
  font-size: 13px;
}

.page-login .login-card .field .input{
  width: 100%;
}

/* =========================
   LOGIN FORM — LEGENDARY BUTTON
   ========================= */

.page-login .btn-primary{
  width: 100%;                 /* full-width = important action */
  margin-top: 18px;

  padding: 16px 18px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .4px;

  color: #140c03;

  background: linear-gradient(
    180deg,
    rgba(255,204,102,.95),
    rgba(200,150,60,.95)
  );

  border: 1px solid rgba(255,204,102,.75);
  border-radius: 14px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 6px rgba(120,80,20,.55),
    0 8px 22px rgba(0,0,0,.65);

  text-shadow:
    0 0 6px rgba(255,204,102,.55),
    0 0 14px rgba(255,153,51,.35);

  transition:
    transform .12s ease,
    filter .12s ease,
    box-shadow .12s ease,
    background .12s ease;
}

.page-login .btn-primary:hover{
  transform: translateY(-2px);
  filter: brightness(1.1);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 0 26px rgba(255,204,102,.75),
    0 10px 26px rgba(0,0,0,.75);
}

.page-login .btn-primary:active{
  transform: translateY(1px) scale(.97);

  background: linear-gradient(
    180deg,
    rgba(200,150,60,.98),
    rgba(160,115,45,.98)
  );

  box-shadow:
    inset 0 3px 8px rgba(80,50,10,.75),
    0 0 18px rgba(255,204,102,.65);
}


/* =========================
   VIDEOS — Title alignment fix
   ========================= */
.video-card h3,
.video-card .video-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  line-height: 1.25;
  min-height: 2.5em;
}

.grid{display:grid;}
.grid-2{
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
}
.grid .card{
  display:flex;
  flex-direction:column;
}

/* sword pulse keyframes (kept) */
@keyframes swdPulse{
  0%,100%{
    filter:
      drop-shadow(0 0 6px rgba(255,255,255,.35))
      drop-shadow(0 0 12px rgba(180,40,40,.45))
      drop-shadow(0 0 26px rgba(120,0,0,.25));
    transform:translate(-50%,-50%) scale(1);
  }
  50%{
    filter:
      drop-shadow(0 0 10px rgba(255,255,255,.65))
      drop-shadow(0 0 22px rgba(200,60,60,.75))
      drop-shadow(0 0 48px rgba(160,0,0,.55));
    transform:translate(-50%,-50%) scale(1.04);
  }
}

/* =========================
   FEAR IMAGE — SHADOW BOX
   ========================= */

.fear-panel{
  display:flex;
  justify-content:center;
  align-items:center;
}

.fear-img{
  max-width:100%;
  height:auto;

  /* keep it crisp */
  filter:
    drop-shadow(0 0 10px rgba(120,0,0,.35))
    drop-shadow(0 0 22px rgba(180,40,40,.45));
}



/* ======================================================
   TEXT PANEL (TEST LAYER)
   ====================================================== */
.text-panel{
  background: rgba(0,0,0,.95);
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:14px;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 8px 22px rgba(0,0,0,.45);
}

/* ======================================================
   UTILITIES
   ====================================================== */
.u-center{
  width:100%;
  text-align:center;
}
.u-row.u-center{
  justify-content:center !important;
}

/* =========================
   NAV — LEGENDARY LOGIN
   ========================= */

/* Target ONLY the login button in the nav */
.nav .btn-login,
.nav .btn-primary.login{
  background: linear-gradient(
    180deg,
    rgba(255,204,102,.95),
    rgba(200,150,60,.95)
  );
  color:#140c03;

  border:1px solid rgba(255,204,102,.75);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 6px rgba(120,80,20,.55),
    0 6px 18px rgba(0,0,0,.65);

  text-shadow:
    0 0 6px rgba(255,204,102,.55),
    0 0 14px rgba(255,153,51,.35);
}

/* Hover — gem pop, not chaos */
.nav .btn-login:hover,
.nav .btn-primary.login:hover{
  color:#fff1c2;
  filter: brightness(1.1);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 0 22px rgba(255,204,102,.75),
    0 8px 20px rgba(0,0,0,.7);
}

/* =========================
   INDEX — TOP SWORD BAR
   ========================= */

.topbar{
  position: relative;
  border-radius: var(--radius);
  padding: 18px 14px;

  background:
    radial-gradient(900px 220px at 50% 0%,
      rgba(var(--accentRgb), .18),
      transparent 60%),
    linear-gradient(180deg, rgba(15,22,34,.78), rgba(10,16,26,.78));

  border: 1px solid rgba(var(--accentRgb), .22);
  box-shadow: var(--shadow);

  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
}

.topbar-sword{
  height: 80px;
  width: auto;
  max-width: 92%;
  object-fit: contain;

  /* matches your sword vibe */
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.25))
    drop-shadow(0 0 18px rgba(180,40,40,.45))
    drop-shadow(0 0 36px rgba(120,0,0,.25));
}

/* =========================
   CTA CARD — FRESH BLOOD CRIMSON
   ========================= */

/* =========================
   CTA CARD — BRIGHT FRESH BLOOD
   ========================= */

.cta-card{
  background:
    /* HOT blood glow */
    radial-gradient(
      900px 320px at 50% 0%,
      rgba(255,60,80,.65),   /* bright fresh blood */
      rgba(220,30,50,.45) 35%,
      rgba(120,10,20,.18) 55%,
      transparent 70%
    ),
    /* LIFTED base (this is the key change) */
    linear-gradient(
      180deg,
      rgba(70,22,30,.96),    /* much lighter crimson base */
      rgba(38,12,16,.96)
    );

  border: 1px solid rgba(255,90,110,.75);
  border-radius: var(--radius);

  box-shadow:
    /* glossy wet interior */
    inset 0 0 0 1px rgba(255,140,150,.35),
    inset 0 10px 22px rgba(255,80,95,.28),

    /* visible blood aura */
    0 0 36px rgba(255,40,60,.85),
    0 18px 40px rgba(0,0,0,.6);
}


/* =========================
   CTA CARD — BLOOD HOVER OVERRIDE
   ========================= */

.cta-card:hover{
  /* OVERRIDE the generic dark hover */
  background:
    radial-gradient(
      900px 340px at 50% 0%,
      rgba(255,80,100,.85),
      rgba(230,40,60,.55) 35%,
      rgba(140,20,30,.25) 55%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      rgba(90,30,40,.98),
      rgba(50,16,22,.98)
    );

  border-color: rgba(255,120,140,.95);

  box-shadow:
    /* wet inner glow */
    inset 0 0 0 1px rgba(255,160,170,.45),
    inset 0 12px 26px rgba(255,90,110,.38),

    /* aggressive blood aura */
    0 0 46px rgba(255,50,70,.95),
    0 22px 48px rgba(0,0,0,.7);

  transform: translateY(-2px);
}



/* =========================
   SWORD — BREATHING GLOW
   ========================= */

.topbar-sword{
  height: 80px;
  width: auto;
  max-width: 92%;
  object-fit: contain;

  animation: swordBreath 6.5s ease-in-out infinite;

  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.25))
    drop-shadow(0 0 18px rgba(180,40,40,.45))
    drop-shadow(0 0 36px rgba(120,0,0,.25));
}

/* Subtle, controlled pulse — not flashy */
@keyframes swordBreath{
  0%,100%{
    transform: scale(1);
    filter:
      drop-shadow(0 0 8px rgba(255,255,255,.22))
      drop-shadow(0 0 16px rgba(180,40,40,.38))
      drop-shadow(0 0 30px rgba(120,0,0,.22));
  }
  50%{
    transform: scale(1.04);
    filter:
      drop-shadow(0 0 14px rgba(255,255,255,.35))
      drop-shadow(0 0 26px rgba(200,60,60,.65))
      drop-shadow(0 0 48px rgba(160,0,0,.45));
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .topbar-sword{
    animation:none;
  }
}

/* ======================================================
   PAGE: Register — Royal Decree Scroll (REAL PARCHMENT)
   Scope: .page-register
   ====================================================== */

.page-register .decree-scroll{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 22px 70px rgba(0,0,0,.45),
    0 10px 22px rgba(0,0,0,.30);
}

/* solid “paper” base + parchment image on top */
.page-register .decree-scroll__inner{
  position: relative;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: 22px;

  /* IMPORTANT: not transparent */
  background-color: #e7d6b6; /* parchment base */

  /* REAL IMAGE */
  background-image: url("/assets/img/parchment-01.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* IMPORTANT: remove blend modes */
  background-blend-mode: normal;

  /* make text sit above overlays */
  z-index: 1;
}

/* paper shading + vignette (on parchment layer, not “over the whole card”) */
.page-register .decree-scroll__inner::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  border-radius: 22px;

  background:
    radial-gradient(1200px 800px at 50% 35%, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(1200px 800px at 50% 55%, transparent 58%, rgba(0,0,0,.35) 100%),
    radial-gradient(900px 250px at 50% -60px, rgba(0,0,0,.22), transparent 70%),
    radial-gradient(900px 250px at 50% calc(100% + 60px), rgba(0,0,0,.22), transparent 70%);
  opacity: .95;
}

/* inner rim so it looks like a framed parchment sheet */
.page-register .decree-scroll__inner::after{
  content:"";
  position:absolute;
  inset: 12px;
  pointer-events:none;
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 1px rgba(80,55,25,.35),
    inset 0 16px 24px rgba(255,255,255,.10),
    inset 0 -16px 24px rgba(0,0,0,.18);
  opacity: .9;
}

/* ensure content stays above overlays */
.page-register .decree-scroll__inner > *{
  position: relative;
  z-index: 2;
}

.page-register .decree-scroll{
  margin-top: 1.25rem;
}

/* headings + body ink */
.page-register .decree-scroll h2{
  color: #2a1c10;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}

.page-register .decree-scroll .muted{
  color: rgba(42,28,16,.72);
}

/* form controls should NOT look see-through */
.page-register .decree-scroll .input{
  background: #f7f0e2;               /* solid, paper-safe */
  border: 1px solid rgba(60,40,18,.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 6px 14px rgba(0,0,0,.10);
}

.page-register .decree-scroll .input:focus{
  outline: none;
  border-color: rgba(120,80,40,.70);
  box-shadow:
    0 0 0 3px rgba(120,80,40,.18),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* ======================================================
   PAGE: Register — Decree Typography Boost
   ====================================================== */

.page-register .decree-scroll label{
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #2a1c10;
  margin-bottom: .35rem;
}

.page-register .decree-scroll .input{
  font-size: 1.15rem;
  font-weight: 600;
  padding: .75rem .9rem;
}

.page-register .decree-scroll button.btn{
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .8rem 1.2rem;
}

/* “Already have an account?” text */
.page-register .decree-scroll .register-meta{
  font-size: 1rem;
  font-weight: 600;
  margin-top: .5rem;
}

.page-register .decree-scroll .register-link{
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: underline;
}

/* ======================================================
   PAGE: Register — Form Layout + Actions (CLEAN)
   Scope: .page-register .decree-scroll
   ====================================================== */

/* Form layout */
.page-register .decree-scroll .register-form{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-register .decree-scroll .field{
  display: grid;
  gap: 8px;
  margin: 0;
}

.page-register .decree-scroll .input{
  width: 100%;
  box-sizing: border-box;
}

/* 2-column fields on desktop */
@media (min-width: 720px){
  .page-register .decree-scroll .register-form{
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
  }
}

/* Actions row — ALWAYS centered, always spans full width */
.page-register .decree-scroll .register-actions{
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  text-align: center;
}

/* Blood submit button */
.page-register .decree-scroll .register-actions .btn{
  display: inline-block;
  width: auto;
  margin: 0 auto;

  font-family: 'Nosifer', cursive;
  font-size: 1.35rem;
  letter-spacing: .08em;


  background: linear-gradient(to bottom, #2a1c10, #1a120a);
  border: none;
  padding: 14px 28px;
  border-radius: 14px;

  color: #b30000 !important; /* brighter blood */

  text-shadow:
    -1px -1px 0 rgba(245,230,210,.9),
     1px -1px 0 rgba(245,230,210,.9),
    -1px  1px 0 rgba(245,230,210,.9),
     1px  1px 0 rgba(245,230,210,.9),
     0  3px 8px rgba(0,0,0,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 10px 26px rgba(0,0,0,.55);

  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.page-register .decree-scroll .register-actions .btn:hover{
  transform: translateY(-1px);
  filter: saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 14px 32px rgba(0,0,0,.65);
}

.page-register .decree-scroll .register-actions .btn:active{
  transform: translateY(1px);
  box-shadow: inset 0 4px 10px rgba(0,0,0,.6);
}

/* "Already have an account? Login" */
.page-register .decree-scroll .register-meta{
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  text-align: center;
  white-space: normal;
}

/* Fix SWD emblem size in the scroll */
.page-register .decree-scroll img.decree-emblem{
  width: 90px;        /* pick your size */
  max-width: 90px;
  height: auto;
}

/* Re-center SWD emblem */
.page-register .decree-scroll .decree-emblem{
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;

  width: 72px;        /* keep your size */
  max-width: 72px;
  height: auto;
}

/* ======================================================
   PAGE: Register — Blood Subtitle (button-style readability)
   ====================================================== */

.page-register .decree-scroll .blood-subtitle{
  font-family: 'Nosifer', cursive;
  font-size: 1.15rem;
  letter-spacing: .06em;

  color: #b30000 !important;
  text-align: center;
  margin: 0 0 1rem 0;

  /* same readability trick as the button */
  text-shadow:
    -1px -1px 0 rgba(245,230,210,.9),
     1px -1px 0 rgba(245,230,210,.9),
    -1px  1px 0 rgba(245,230,210,.9),
     1px  1px 0 rgba(245,230,210,.9),
     0  3px 8px rgba(0,0,0,.9);
}

/* ======================================================
   PAGE: Login — Registration Success (Bloody, readable)
   ====================================================== */

.page-login .register-ok{
  font-family: inherit;       /* 👈 normal site font */
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: .02em;

  color: #c40000 !important;  /* fresh blood red */

  background: rgba(245,230,210,.75); /* parchment backing */
  padding: 14px 18px;
  border-radius: 12px;
  border: 2px solid rgba(180,0,0,.45);

  text-align: center;
  margin-bottom: 1.25rem;

  /* bloody ink edge + depth */
  text-shadow:
    -1px -1px 0 rgba(255,255,255,.85),
     1px -1px 0 rgba(255,255,255,.85),
    -1px  1px 0 rgba(255,255,255,.85),
     1px  1px 0 rgba(255,255,255,.85),
     0  4px 10px rgba(0,0,0,.9);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 10px 26px rgba(0,0,0,.45);
}

/* ======================================================
   PAGE: Login — Bigger Card & Labels
   ====================================================== */

/* Card itself */
.page-login .login-card{
  padding: 2.2rem 2rem;      /* more breathing room */
  max-width: 460px;          /* slightly wider */
}

/* Heading */
.page-login .login-card h2{
  font-size: 1.9rem;
  font-weight: 900;
  margin-bottom: .5rem;
}

/* Subtitle */
.page-login .login-card .muted{
  font-size: 1.05rem;
}

/* Form spacing */
.page-login .login-card .form-row{
  display: grid;
  gap: 16px;
}

/* Labels — THIS is the big one */
.page-login .login-card label{
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: 4px;
  color: var(--text, #1f140b);
}

/* Inputs */
.page-login .login-card .input{
  font-size: 1.05rem;
  padding: 12px 14px;
}

/* Login button */
.page-login .login-card .btn{
  margin-top: 8px;
  padding: 12px 18px;
  font-size: 1.05rem;
  font-weight: 800;
}

.page-login .login-meta{
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  text-align: center;
}

/* ======================================================
   PAGE: Dashboard — Blood CTA Button
   ====================================================== */

.page-dashboard .btn-blood-cta{
  display: inline-block;
  width: fit-content;
  margin: 0 auto;              /* center within card if parent allows */
  padding: 14px 22px;
  border-radius: 14px;

  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-decoration: none;
  text-align: center;

  color: #ffe6e6 !important;    /* pale text for contrast */
  background: linear-gradient(to bottom, #2a0b0b, #120707);

  border: 2px solid rgba(255, 40, 40, .45);

  text-shadow:
    0 0 8px rgba(255, 35, 35, .75),
    0 2px 10px rgba(0,0,0,.9);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 1px rgba(120, 0, 0, .35),
    0 10px 24px rgba(0,0,0,.55),
    0 0 18px rgba(255, 30, 30, .35);
  
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.page-dashboard .btn-blood-cta:hover{
  transform: translateY(-1px);
  filter: saturate(1.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 1px rgba(150, 0, 0, .45),
    0 14px 30px rgba(0,0,0,.65),
    0 0 26px rgba(255, 35, 35, .55);
}

.page-dashboard .btn-blood-cta:active{
  transform: translateY(1px);
  box-shadow:
    inset 0 6px 14px rgba(0,0,0,.55),
    0 10px 22px rgba(0,0,0,.45),
    0 0 14px rgba(255, 30, 30, .35);
}

/* Optional: center inside the card reliably */
.page-dashboard .card .btn-blood-cta{
  display: block;
}

/* ======================================================
   PAGE: Merch — Armory "Always Dark" Cards
   Scope: .page-merch
   Makes the hover dark state the default state
   ====================================================== */

.page-merch .card{
  /* the same background you use on .card:hover */
  background: linear-gradient(180deg, rgba(15,22,34,.94), rgba(10,16,26,.94));

  /* keep the nicer hover border as the default too (optional) */
  border-color: rgba(var(--accentRgb), .35);

  /* NO lift at rest */
  transform: none;

  /* keep a tiny polish but avoid the “pop in/out” feeling */
  filter: brightness(1.03);
}

/* Optional: on hover, make it slightly more intense (not necessary) */
.page-merch .card:hover{
  background: linear-gradient(180deg, rgba(15,22,34,.97), rgba(10,16,26,.97));
  border-color: rgba(var(--accentRgb), .45);
  transform: translateY(-2px);
  filter: brightness(1.06);
}


/* ======================================================
   PAGE: Stay Tuned
   Scope: .page-stay-tuned
   ====================================================== */

.page-stay-tuned{
  min-height:100vh;
}

.page-stay-tuned .stay-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 2.25rem 0;
}

.page-stay-tuned .stay-hero{
  position:relative;
  text-align:center;
  padding: 1.25rem 0;
}

.page-stay-tuned .stay-logo{
  width: 110px;
  height: auto;
  margin: 0 auto 1rem;
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.18))
    drop-shadow(0 0 26px rgba(200,60,60,.30));
  opacity:.95;
}

.page-stay-tuned .stay-card{
  max-width: 760px;
  margin: 0 auto;
  padding: 1.6rem 1.6rem 1.4rem;
}

.page-stay-tuned .stay-kicker{
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size: 12px;
  color: rgba(231,238,252,.78);
  margin-bottom: .6rem;
}

.page-stay-tuned .stay-title{
  font-family: 'Nosifer', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.03;
  margin: 0 0 .85rem;
  text-shadow:
    0 0 18px rgba(215,180,106,.22),
    0 0 32px rgba(150,30,30,.18);
}

.page-stay-tuned .stay-lead{
  font-size: 15px;
  line-height: 1.55;
  margin: 0 auto 1.2rem;
  max-width: 54ch;
}

.page-stay-tuned .stay-divider{
  height: 1px;
  margin: 1.15rem auto 1rem;
  max-width: 440px;
  background: linear-gradient(90deg,
    rgba(215,180,106,0),
    rgba(215,180,106,.42),
    rgba(215,180,106,0)
  );
}

.page-stay-tuned .stay-small{
  font-size: 13px;
}

.page-stay-tuned .stay-footer{
  margin-top: 1.05rem;
  font-size: 12px;
  opacity:.85;
}

/* Small screens */
@media (max-width: 520px){
  .page-stay-tuned .stay-card{
    padding: 1.35rem 1.15rem 1.15rem;
  }
  .page-stay-tuned .stay-logo{ width: 92px; }
}