/* Kartonath Classic — Shared Styles v1 */
:root {
  --gold: #c8a84e;
  --gold-dark: #8a6e2a;
  --gold-light: #e8c860;
  --bg: #0d0d10;
  --bg-deep: #080810;
  --bg-card: #0f0f14;
  --bg-card-hover: #121218;
  --text: #c8b89a;
  --text-dim: #7a6a5a;
  --border: rgba(200,168,78,0.15);
  --border-bright: rgba(200,168,78,0.35);
  --green: #4ade80;
  --red: #f87171;
  --orange: #fb923c;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: 'Crimson Text', Georgia, serif; min-height: 100vh; overflow-x: hidden; }

/* ─── Top accent bar ─── */
.top-accent { height: 3px; background: linear-gradient(90deg, transparent, var(--gold-dark), var(--gold), var(--gold-dark), transparent); }

/* ─── Navigation ─── */
nav { background: #0a0a0d; border-bottom: 1px solid var(--border); padding: 8px 20px; display: flex; align-items: center; gap: 4px; font-family: 'Cinzel', serif; position: relative; z-index: 1000; flex-wrap: wrap; }
nav .brand { color: var(--gold); font-size: 0.72rem; letter-spacing: 0.2em; margin-right: 16px; font-weight: 700; }
nav > a { color: #7a6a5a; text-decoration: none; font-size: 0.68rem; letter-spacing: 0.15em; padding: 5px 10px; border: 1px solid transparent; font-family: 'Cinzel', serif; transition: color 0.15s, border-color 0.15s; }
nav > a:hover { color: var(--gold); border-color: rgba(200,168,78,0.3); }

/* ─── Mega Menu ─── */
.knav-drop { position: relative; display: inline-block; }
.knav-drop > a { color: #7a6a5a; text-decoration: none; font-size: 0.68rem; letter-spacing: 0.15em; padding: 5px 10px; border: 1px solid transparent; cursor: pointer; font-family: 'Cinzel', serif; display: inline-block; transition: color 0.15s; }
.knav-drop > a:hover { color: var(--gold); }
.knav-drop:hover > .knav-mega { display: flex; }
.knav-mega { display: none; position: absolute; top: 100%; left: 0; background: #0a0a0d; border: 1px solid rgba(200,168,78,0.2); min-width: 600px; z-index: 9999; box-shadow: 0 8px 24px rgba(0,0,0,0.9); padding: 16px 8px; flex-direction: row; gap: 0; }
.knav-mega a { display: block; padding: 5px 16px; color: #7a6a5a !important; text-decoration: none; font-family: 'Cinzel', serif; font-size: 0.62rem; letter-spacing: 0.12em; border-bottom: 1px solid rgba(200,168,78,0.05); transition: color 0.15s, background 0.15s; }
.knav-mega a:hover { color: #87ceeb !important; background: rgba(135,206,235,0.05) !important; }
.knav-col { flex: 1; min-width: 140px; padding: 0 12px; border-right: 1px solid rgba(200,168,78,0.08); }
.knav-col:last-child { border-right: none; }
.knav-col-title { font-family: 'Cinzel', serif; font-size: 0.58rem; letter-spacing: 0.18em; color: var(--gold); text-transform: uppercase; padding: 0 16px 6px; margin-bottom: 4px; border-bottom: 1px solid rgba(200,168,78,0.15); }

/* ─── Layout ─── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px 60px; }
.section-title { font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 0.3em; color: var(--gold-dark); text-transform: uppercase; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }

/* ─── Cards ─── */
.card { background: var(--bg-card); border: 1px solid var(--border); padding: 20px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); border-color: var(--border-bright); }

/* ─── Glassmorphism ─── */
.glass { background: rgba(15, 15, 20, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(200,168,78,0.12); }

/* ─── Status dots ─── */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot-online { background: var(--green); box-shadow: 0 0 6px var(--green); animation: pgreen 2.5s ease-in-out infinite; }
.dot-offline { background: var(--red); }

/* ─── Buttons ─── */
.btn-primary { display: inline-block; background: linear-gradient(135deg, var(--gold-dark), var(--gold)); color: #0d0d10; font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 0.15em; text-decoration: none; padding: 12px 28px; font-weight: 700; text-transform: uppercase; transition: opacity 0.2s, transform 0.2s; }
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-secondary { display: inline-block; background: transparent; color: var(--gold); border: 1px solid var(--gold-dark); font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 0.15em; text-decoration: none; padding: 12px 28px; font-weight: 700; text-transform: uppercase; transition: background 0.2s, color 0.2s; }
.btn-secondary:hover { background: rgba(200,168,78,0.08); }
.btn-shimmer { background-size: 200% auto; background-image: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light), var(--gold), var(--gold-dark)); animation: shimmer 3s linear infinite; }

/* ─── Copy boxes ─── */
.copy-box { display: flex; align-items: center; gap: 8px; background: #09090c; border: 1px solid var(--border); padding: 8px 12px; font-family: monospace; font-size: 0.85rem; }
.copy-btn { background: rgba(200,168,78,0.15); border: 1px solid var(--gold-dark); color: var(--gold); font-size: 0.7rem; padding: 3px 8px; cursor: pointer; font-family: 'Cinzel', serif; letter-spacing: 0.1em; white-space: nowrap; transition: background 0.15s; }
.copy-btn:hover { background: rgba(200,168,78,0.25); }

/* ─── Empty state ─── */
.empty-state { color: var(--text-dim); font-size: 0.85rem; font-style: italic; padding: 12px 0; }

/* ─── LIVE badge ─── */
.live-badge { display: inline-flex; align-items: center; gap: 5px; font-family: 'Cinzel', serif; font-size: 0.55rem; letter-spacing: 0.15em; color: var(--green); text-transform: uppercase; }
.live-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pgreen 2s ease-in-out infinite; }

/* ─── Gradient text ─── */
.gradient-text { background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ─── Footer ─── */
footer { text-align: center; padding: 20px; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--text-dim); font-family: 'Cinzel', serif; letter-spacing: 0.1em; }

/* ─── Scroll reveal ─── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ─── Keyframe animations ─── */
@keyframes pgreen { 0%, 100% { box-shadow: 0 0 6px var(--green); } 50% { box-shadow: 0 0 14px var(--green); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { from { background-position: -200% center; } to { background-position: 200% center; } }
@keyframes breathe { 0%, 100% { border-color: var(--border); } 50% { border-color: var(--border-bright); } }
@keyframes heroShift { 0% { background-position: 20% 30%, 80% 70%, 50% 0%; } 100% { background-position: 80% 70%, 20% 30%, 50% 100%; } }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 rgba(200,168,78,0); } 50% { box-shadow: 0 0 30px rgba(200,168,78,0.15); } }
@keyframes drawLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes scrollHint { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 0.7; transform: translateY(6px); } }

/* ─── Responsive ─── */
@media (max-width: 700px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .knav-mega { min-width: 95vw; flex-wrap: wrap; }
  .knav-col { min-width: 45%; }
  nav { padding: 8px 12px; }
  .container { padding: 0 12px 40px; }
}
@media (max-width: 480px) {
  nav .brand { font-size: 0.6rem; margin-right: 8px; }
}

/* ─── Era-themed link colors ─── */
/* Default wiki/item links: Velious ice blue (scoped to content, not nav) */
/* Wiki link colors: only in loot tables, timeline, and detail pages - NOT nav or home cards */
.loot-table a, .replacement-table a, .tl-body a[href*="/wiki/"] { color: #87ceeb; }
.loot-table a:hover, .replacement-table a:hover, .tl-body a[href*="/wiki/"]:hover { color: #bde0f5; }

/* Era-specific accent colors for badges and contextual use */
.link-classic, .era-classic a { color: var(--gold); }
.link-classic:hover, .era-classic a:hover { color: #e8c860; }
.link-kunark, .era-kunark a { color: #4ade80; }
.link-kunark:hover, .era-kunark a:hover { color: #86efac; }
.link-velious, .era-velious a { color: #87ceeb; }
.link-velious:hover, .era-velious a:hover { color: #bde0f5; }

/* ─── Status nav dropdown ─── */
.status-drop { left: 0 !important; }
.svc-row { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:0.68rem; font-family:'Cinzel',serif; letter-spacing:0.08em; color:var(--text-dim); }
.svc-row .svc-dot { width:7px; height:7px; border-radius:50%; background:var(--text-dim); flex-shrink:0; }
.svc-row .svc-state { margin-left:auto; font-size:0.6rem; }
.svc-row.online .svc-dot { background:#4ade80; box-shadow:0 0 6px #4ade80; }
.svc-row.online .svc-state { color:#4ade80; }
.svc-row.offline .svc-dot { background:#f87171; }
.svc-row.offline .svc-state { color:#f87171; }