/* ==========================================================
   Ultima Online Theme — Sosaria Private Shard
   Classic MMORPG: dungeon stone, blood crimson, aged gold
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Almendra+SC:wght@400&family=Almendra:ital,wght@0,400;0,700;1,400&family=IM+Fell+English:ital@0;1&display=swap');

:root {
  --bg:       #060408;  /* near-black, faint plum */
  --bg-card:  #1a1028;  /* dark stone-purple */
  --bg-hover: #261838;
  --text:     #e0d0a8;  /* aged parchment */
  --muted:    #7a6878;  /* dusty plum */
  --border:   #281d3a;
  --accent:   #8b1a1a;  /* blood crimson — PKer red */
  --accent2:  #c9a227;  /* antique gold */
  --link:     #80a0e0;  /* scroll blue */
  --crimson:  #c41e3a;
  --gold:     #c9a227;
  --rune:     #9060d0;  /* magic purple */
  --poison:   #5a9a30;  /* poison green */
  --bone:     #d4c4a0;

  --font-h:    'Almendra SC', Georgia, serif;
  --font-body: 'IM Fell English', Georgia, serif;
  --font-mono: 'Share Tech Mono', monospace;
}

/* ── Background: dungeon depths ──────────────────────────── */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 10% 90%, rgba(139,26,26,.08) 0%, transparent 45%),
    radial-gradient(ellipse at 90% 10%, rgba(201,162,39,.06) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(144,96,208,.04) 0%, transparent 60%);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.75;
}

/* ── Typography ──────────────────────────────────────────── */
h1,h2,h3,h4 { font-family: var(--font-h); letter-spacing: .04em; }

h1 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--accent2);
  text-shadow:
    0 0 20px rgba(201,162,39,.35),
    0 0 45px rgba(139,26,26,.2),
    2px 2px 4px #000;
}
h2 {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  color: var(--bone);
  text-shadow: 0 0 12px rgba(212,196,160,.2), 1px 1px 3px #000;
}
h3 { font-size: 1.2rem; color: var(--accent2); }
h4 { font-size: 1rem;   color: var(--muted); }

/* ── Navigation ──────────────────────────────────────────── */
.site-header {
  background: rgba(6,4,8,.97);
  border-bottom: 1px solid rgba(139,26,26,.35);
  box-shadow: 0 2px 20px rgba(139,26,26,.1);
  position: relative;
}
/* Gold shimmer line under nav */
.site-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent2) 50%, transparent 100%);
}
.site-logo {
  font-family: var(--font-h) !important;
  color: var(--accent2) !important;
  text-shadow: 0 0 18px rgba(201,162,39,.4) !important;
  font-size: 1.1rem !important;
}
.site-nav a {
  font-family: var(--font-h);
  letter-spacing: .04em;
  color: var(--muted);
}
.site-nav a:hover,
.site-nav a.active {
  background: rgba(139,26,26,.12);
  border-color: rgba(139,26,26,.4);
  color: var(--bone);
  opacity: 1;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(ellipse at center top, rgba(139,26,26,.12) 0%, transparent 55%),
    radial-gradient(ellipse at center, rgba(144,96,208,.06) 0%, transparent 65%),
    var(--bg);
  border-bottom: 1px solid rgba(201,162,39,.12);
}
.hero h1 { font-size: clamp(2rem, 5vw, 3.8rem); }

/* ── Cards: stone tablets ────────────────────────────────── */
.game-card, .post-card, .section-card, .server-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  position: relative;
}
/* Runic corner marks */
.section-card::before, .game-card::before {
  content: '᛭';
  position: absolute;
  top: 8px; left: 10px;
  color: var(--accent);
  font-size: .75rem;
  opacity: .5;
}
.section-card::after, .game-card::after {
  content: '᛭';
  position: absolute;
  top: 8px; right: 10px;
  color: var(--accent);
  font-size: .75rem;
  opacity: .5;
}
.game-card:hover, .section-card:hover {
  border-color: rgba(139,26,26,.5);
  box-shadow: 0 0 20px rgba(139,26,26,.18), 0 8px 40px rgba(0,0,0,.85);
  transform: translateY(-4px);
}
.post-card:hover { border-color: rgba(201,162,39,.3); }

/* ── Info box: parchment note ────────────────────────────── */
.info-box {
  border-left: 3px solid var(--accent2);
  background: linear-gradient(90deg, rgba(201,162,39,.06) 0%, var(--bg-card) 35%);
}

/* ── Buttons: rune-carved stone ──────────────────────────── */
.btn {
  font-family: var(--font-h) !important;
  letter-spacing: .05em !important;
  border-color: var(--accent2) !important;
  color: var(--accent2) !important;
}
.btn:hover {
  background: rgba(201,162,39,.14) !important;
  box-shadow: 0 0 16px rgba(201,162,39,.3) !important;
  color: var(--accent2) !important;
  opacity: 1;
}

/* ── Server card ─────────────────────────────────────────── */
.server-card { border: 1px solid var(--border); border-top: 2px solid var(--accent); }
.server-card__ip { color: var(--bone); text-shadow: 0 0 8px rgba(212,196,160,.35); font-size: 1.15rem; }

/* ── UO status colors ────────────────────────────────────── */
.uo-murderer { color: var(--crimson); }
.uo-innocent { color: #7eb8ff; }
.uo-criminal { color: #c8a860; }
.uo-poison   { color: var(--poison); }
.uo-rune     { color: var(--rune); }
.uo-gold     { color: var(--gold); }

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb { font-family: var(--font-h); font-size: .7rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--bone); opacity: 1; }

/* ── Page content ────────────────────────────────────────── */
.page-content { font-family: var(--font-body); }
.page-content strong { color: var(--accent2); }
.page-content em     { color: var(--bone); }
.page-header__eyebrow { color: var(--accent); }

/* ── Section title ───────────────────────────────────────── */
.section-title { font-family: var(--font-h); color: var(--muted); }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer { border-top: 1px solid rgba(139,26,26,.25); }