/* ==========================================================
   Core Keeper Theme — Underground Cave World
   Amber torch glow, teal & purple crystals, dark stone
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=Nunito:wght@400;600;700&family=VT323&display=swap');

:root {
  --bg:       #090807;
  --bg-card:  #121009;
  --bg-hover: #1c1814;
  --text:     #d4c8a8;
  --muted:    #7a6e58;
  --border:   #28221c;
  --amber:    #ff9020;
  --amber-d:  #c86800;
  --teal:     #00c8a8;
  --purple:   #9060d0;
  --green:    #70c040;
  --gold:     #ffd040;
  --iron:     #909898;
  --accent:   #ff9020;
  --accent2:  #00c8a8;
  --link:     #60c8e0;

  --font-h:    'Silkscreen', 'Press Start 2P', monospace;
  --font-body: 'Nunito', sans-serif;
  --font-pixel: 'VT323', monospace;
  --font-mono:  'Share Tech Mono', monospace;
}

/* ── Background: underground cave ──────────────────────── */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 8% 92%,  rgba(255,144,32,.07) 0%, transparent 40%),
    radial-gradient(ellipse at 92% 8%,  rgba(0,200,168,.05) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(144,96,208,.04) 0%, transparent 55%);
  font-family: var(--font-body);
}

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

h1 {
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  color: var(--amber);
  text-shadow:
    0 0 15px rgba(255,144,32,.55),
    0 0 30px rgba(200,104,0,.3),
    2px 2px 0 rgba(0,0,0,.85);
  animation: torch-flicker 3.5s ease-in-out infinite;
}
h2 {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: var(--teal);
  text-shadow: 0 0 10px rgba(0,200,168,.3);
}
h3 { font-size: .95rem; color: var(--gold); }

@keyframes torch-flicker {
  0%,100% { text-shadow: 0 0 15px rgba(255,144,32,.55), 0 0 30px rgba(200,104,0,.3), 2px 2px 0 rgba(0,0,0,.85); }
  25%      { text-shadow: 0 0 20px rgba(255,144,32,.7),  0 0 38px rgba(200,104,0,.4), 2px 2px 0 rgba(0,0,0,.85); }
  50%      { text-shadow: 0 0 10px rgba(255,144,32,.4),  0 0 22px rgba(200,104,0,.2), 2px 2px 0 rgba(0,0,0,.85); }
  75%      { text-shadow: 0 0 22px rgba(255,144,32,.75), 0 0 42px rgba(200,104,0,.42),2px 2px 0 rgba(0,0,0,.85); }
}

/* ── Navigation: underground control panel ─────────────── */
.site-header {
  background: linear-gradient(180deg, #0a0807 0%, #0d0b08 100%);
  border-bottom: 2px solid var(--amber-d);
}
.site-logo {
  font-family: var(--font-h) !important;
  font-size: 1.1rem !important;
  color: var(--amber) !important;
  text-shadow: 0 0 15px rgba(255,144,32,.4) !important;
  letter-spacing: .06em !important;
}
.site-nav a {
  font-family: var(--font-h);
  font-size: .72rem;
  color: var(--muted);
}
.site-nav a:hover,
.site-nav a.active {
  background: rgba(255,144,32,.1);
  border-color: var(--amber-d);
  color: var(--amber);
  opacity: 1;
}

/* ── Hero: cave entrance glow ───────────────────────────── */
.hero {
  background:
    radial-gradient(ellipse at center, rgba(255,144,32,.12) 0%, transparent 50%),
    var(--bg);
}
.hero h1 { font-size: clamp(1.8rem, 5vw, 3.2rem); }

/* ── Cards: carved stone blocks ─────────────────────────── */
.game-card, .post-card, .section-card, .server-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  position: relative;
}
/* Mineral vein gem in top-right */
.section-card::before, .game-card::before {
  content: '◆';
  position: absolute;
  top: 8px; right: 10px;
  color: var(--teal);
  font-size: .8rem;
  opacity: .5;
  text-shadow: 0 0 6px var(--teal);
}
.game-card:hover, .section-card:hover {
  border-color: var(--amber-d);
  box-shadow: 0 0 20px rgba(255,144,32,.16), 0 8px 30px rgba(0,0,0,.85);
  transform: translateY(-4px);
}
.post-card:hover { border-color: var(--amber-d); }

/* ── Info box: journal note ─────────────────────────────── */
.info-box {
  border-left: 3px solid var(--amber);
  background: linear-gradient(90deg, rgba(255,144,32,.06) 0%, var(--bg-card) 30%);
}

/* ── Buttons: carved stone rune ─────────────────────────── */
.btn {
  font-family: var(--font-h) !important;
  font-size: .76rem !important;
  letter-spacing: .06em !important;
  border-color: var(--amber-d) !important;
  color: var(--amber) !important;
}
.btn:hover {
  background: rgba(255,144,32,.16) !important;
  box-shadow: 0 0 14px rgba(255,144,32,.35) !important;
  color: var(--amber) !important;
  opacity: 1;
}

/* ── Server card ────────────────────────────────────────── */
.server-card { border: 1px solid var(--amber-d); }
.server-card__ip { color: var(--teal); text-shadow: 0 0 8px rgba(0,200,168,.4); }

/* ── Ore color palette ──────────────────────────────────── */
.ore-copper  { color: #b87333; }
.ore-iron    { color: var(--iron); }
.ore-gold    { color: var(--gold); }
.ore-teal    { color: var(--teal); }
.ore-scarlet { color: #e03030; }
.ore-purple  { color: var(--purple); }

/* ── Page content ────────────────────────────────────────── */
.page-content { font-family: var(--font-body); }
.page-content strong { color: var(--amber); }
.page-content em     { color: var(--teal); font-style: normal; }
.page-header__eyebrow { color: var(--amber); }

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

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

/* ── Footer ─────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--amber-d); }