/* ============================================================
   Union Gaming Network — visual theme layer.
   Loaded *after* /assets/site.css and per-page styles so it can
   override default-Reptile look on the gaming.* subdomain only.
   The theme leans on the green watercolor "U" identity, the
   existing Japanese landscape backdrop, and an inked/stamped
   feel for buttons, dividers, and cards.
   ============================================================ */

:root {
  /* Union palette extends site.css. These show through on the gaming
     subdomain regardless of which page you're on. */
  --uGreen:        #3dffa0;
  --uGreenSoft:    rgba(61,255,160,0.12);
  --uGreenDeep:    #1d8a55;
  --uGold:         #c8a84c;
  --uGoldSoft:     rgba(200,168,76,0.12);
  --uInk:          rgba(2,10,6,0.78);
  --uPaper:        rgba(3,18,12,0.55);
  --uPaperBright:  rgba(3,18,12,0.72);
  --uWatercolor:   radial-gradient(ellipse at 35% 30%,
                     rgba(61,255,160,0.18) 0%,
                     rgba(61,255,160,0.06) 28%,
                     transparent 60%);
}

/* ── 1. Body backdrop: layer a faded U watermark behind the landscape ─ */
body {
  position: relative;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    url('/assets/logo-union.webp') center center / 60vh auto no-repeat;
  opacity: 0.025;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 50px rgba(61,255,160,0.4));
}

/* ── 2. Header: subtle gold underline + larger brand mark ─────────── */
header .nav {
  border-bottom: 1px solid rgba(61,255,160,0.18);
  background: linear-gradient(180deg, rgba(2,10,6,0.55) 0%, rgba(2,10,6,0.20) 100%);
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  position: relative;
}
header .nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--uGold) 30%,
    var(--uGreen) 50%,
    var(--uGold) 70%,
    transparent 100%);
  opacity: 0.45;
}
header .brand .brandLogo {
  width: 38px !important;
  height: 38px !important;
  filter: drop-shadow(0 0 14px rgba(61,255,160,0.55))
          drop-shadow(0 0 24px rgba(61,255,160,0.22));
  transition: transform 0.35s ease, filter 0.35s ease;
}
header .brand:hover .brandLogo {
  transform: rotate(-3deg) scale(1.05);
  filter: drop-shadow(0 0 18px rgba(61,255,160,0.75))
          drop-shadow(0 0 32px rgba(61,255,160,0.35));
}
header .brand span {
  font-family: var(--serif);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 13.5px;
  font-weight: 700;
  background: linear-gradient(180deg, #ffffff 0%, var(--uGreen) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 28px rgba(61,255,160,0.18);
}

/* Auth slot (right of nav) feels like a stamp */
#ugnAuthSlot {
  border-left: 1px solid rgba(61,255,160,0.18);
  padding-left: 14px;
}
#ugnAuthSlot a[href="/account/"] {
  color: var(--uGold);
  border: 1px solid rgba(200,168,76,0.32);
  padding: 3px 9px;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 10px;
  transition: background 0.18s, border-color 0.18s;
}
#ugnAuthSlot a[href="/account/"]:hover {
  background: var(--uGoldSoft);
  border-color: var(--uGold);
}

/* ── 3. Page hero: prominent U watermark + Union mark beside title ── */
.pageWrap {
  position: relative;
  z-index: 1;
}
.pageHeader {
  position: relative;
  padding: 56px 0 32px;
  margin-bottom: 28px;
  isolation: isolate;
}
.pageHeader::before {
  content: '';
  position: absolute;
  right: -20px; top: -10px;
  width: 280px; height: 280px;
  background: url('/assets/logo-union.webp') center / contain no-repeat;
  opacity: 0.08;
  filter: drop-shadow(0 0 40px rgba(61,255,160,0.5));
  z-index: -1;
  transform: rotate(-4deg);
  pointer-events: none;
}
.pageHeader h1 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, #ffffff 0%, #c4e6d3 60%, var(--uGreen) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 30px rgba(61,255,160,0.18));
}
.pageHeader p.lead {
  max-width: 70ch;
}
.pageHeader::after {
  /* Inked underline under the hero — a brush-stroke bar */
  content: '';
  display: block;
  width: 96px;
  height: 3px;
  margin-top: 22px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--uGreen) 0%, var(--uGold) 100%);
  box-shadow: 0 0 16px rgba(61,255,160,0.45);
}

/* ── 4. Section dividers: ink-line between major sections ─────────── */
section.sectionPreview {
  position: relative;
  padding-top: 18px;
}
section.sectionPreview + section.sectionPreview::before {
  content: '◆';
  position: absolute;
  top: -28px; left: 50%; transform: translateX(-50%);
  font-size: 12px;
  color: var(--uGold);
  opacity: 0.55;
  text-shadow: 0 0 12px rgba(200,168,76,0.4);
}
section.sectionPreview h2 {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.02em;
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
section.sectionPreview h2::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--uGreen) 0%, transparent 70%);
  opacity: 0.65;
  border-radius: 2px;
}

/* ── 5. Cards: ink/paper feel with painted edge ────────────────────── */
.card,
.card.box,
.card.tile {
  background: var(--uPaper) !important;
  border: 1px solid rgba(61,255,160,0.18) !important;
  position: relative;
  overflow: hidden;
}
.card.box::before,
.card.tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(61,255,160,0.5) 35%,
    rgba(200,168,76,0.35) 70%,
    transparent 100%);
}
.card .tag {
  font-family: var(--mono);
  background: var(--uGoldSoft);
  border: 1px solid rgba(200,168,76,0.32);
  color: var(--uGold);
  letter-spacing: 0.14em;
  font-size: 10px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  display: inline-block;
}
.card h3 {
  font-family: var(--serif);
  color: #fff;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}
.card.ctaBlock {
  position: relative;
  background:
    radial-gradient(ellipse at center, rgba(61,255,160,0.12) 0%, rgba(2,10,6,0.78) 60%),
    var(--uPaperBright) !important;
  border: 1px solid rgba(61,255,160,0.32) !important;
  text-align: center;
}
.card.ctaBlock h2 {
  font-family: var(--serif);
  background: linear-gradient(180deg, #fff 0%, var(--uGreen) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── 6. Buttons: stamped, with ink-bleed glow ──────────────────────── */
.btn {
  font-family: var(--mono) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn.btnPrimary {
  background:
    linear-gradient(180deg, rgba(61,255,160,0.20) 0%, rgba(61,255,160,0.08) 100%) !important;
  border: 1px solid rgba(61,255,160,0.55) !important;
  color: var(--uGreen) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(61,255,160,0.05),
    0 4px 14px rgba(61,255,160,0.18);
}
.btn.btnPrimary:hover {
  border-color: var(--uGreen) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 0 1px rgba(61,255,160,0.20),
    0 6px 20px rgba(61,255,160,0.35);
}

/* ── 7. Footer: prominent Union mark, painterly border ────────────── */
footer {
  position: relative;
  margin-top: 80px;
  padding-top: 28px;
  border-top: 1px solid rgba(61,255,160,0.16);
  background: linear-gradient(180deg, transparent 0%, rgba(2,10,6,0.45) 100%);
}
footer::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--uGold) 30%,
    var(--uGreen) 50%,
    var(--uGold) 70%,
    transparent 100%);
  opacity: 0.55;
}
footer .footLogo {
  filter: drop-shadow(0 0 12px rgba(61,255,160,0.55));
}
footer .footColLabel {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--uGold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
footer .footCompliance {
  border-top: 1px dashed rgba(61,255,160,0.14);
  margin-top: 24px;
  padding-top: 18px;
}

/* ── 8. Server cards on the homepage — Union polish on top of per-game accents ── */
.scard {
  position: relative;
  /* keep per-game palette from index.html; just add finishing flourish */
}
.scard::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--cardAccent, rgba(61,255,160,0.45)) 50%,
    transparent 100%);
  opacity: 0.4;
}
.scard:hover {
  box-shadow:
    0 0 0 1px var(--cardAccentHover, rgba(61,255,160,0.30)),
    0 8px 32px rgba(0,0,0,0.45),
    0 0 60px rgba(61,255,160,0.06);
}
.sname { font-family: var(--serif); }
.sname a { transition: color 0.2s; }
.sname a:hover { color: var(--cardAccentText, var(--uGold)) !important; }

/* ── 9. Per-server hero polish (extends server.css per-game accents) ── */
.svHero {
  background:
    radial-gradient(ellipse at 88% -10%, var(--gameAccentSoft) 0%, transparent 55%),
    linear-gradient(135deg, rgba(3,18,12,0.92) 0%, rgba(8,28,18,0.72) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 8px 36px rgba(0,0,0,0.45);
}
.svHero::after {
  content: '';
  position: absolute;
  right: -40px; bottom: -40px;
  width: 220px; height: 220px;
  background: url('/assets/logo-union.webp') center / contain no-repeat;
  opacity: 0.05;
  pointer-events: none;
  transform: rotate(8deg);
}
.svName {
  font-family: var(--serif);
  background: linear-gradient(180deg, #fff 0%, #c4e6d3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── 10. Login page polish ─────────────────────────────────────── */
.ugnLoginLogo img {
  width: 88px !important;
  height: 88px !important;
  filter:
    drop-shadow(0 0 18px rgba(61,255,160,0.55))
    drop-shadow(0 0 38px rgba(61,255,160,0.22)) !important;
}
.ugnLoginLogo p {
  font-family: var(--serif) !important;
  font-size: 11px !important;
  letter-spacing: 0.32em !important;
  background: linear-gradient(180deg, #fff 0%, var(--uGreen) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ugnLoginCard .card {
  position: relative;
}
.ugnLoginCard .card::before {
  content: '';
  position: absolute;
  top: -1px; left: 25%; right: 25%; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--uGreen) 50%, transparent 100%);
  opacity: 0.55;
}

/* ── 11. Inputs: brushed feel ───────────────────────────────────── */
input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="url"],
textarea,
select {
  background: rgba(0,0,0,0.32) !important;
  border: 1px solid rgba(61,255,160,0.20) !important;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--uGreen) !important;
  background: rgba(0,0,0,0.48) !important;
  box-shadow: 0 0 0 3px rgba(61,255,160,0.10) !important;
  outline: none !important;
}

/* ── 12. Account page extra polish ─────────────────────────────── */
.acctIdentity {
  background:
    radial-gradient(ellipse at 100% 50%, rgba(200,168,76,0.10) 0%, transparent 60%),
    var(--uPaper) !important;
}
.acctIdentity img {
  filter: drop-shadow(0 0 14px rgba(61,255,160,0.32));
}
.acctSection {
  background:
    linear-gradient(180deg, var(--uPaper) 0%, rgba(2,10,6,0.40) 100%) !important;
}

/* ── 13. Better focus / a11y across the lot ────────────────────── */
*:focus-visible {
  outline: 2px solid var(--uGreen) !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 14. Mobile niceties ───────────────────────────────────────── */
@media (max-width: 720px) {
  .pageHeader::before { width: 160px; height: 160px; right: -10px; opacity: 0.06; }
  header .brand .brandLogo { width: 32px !important; height: 32px !important; }
  body::after { background-size: 80vw auto; opacity: 0.02; }
}