/* ═══════════════════════════════════════════════════════════════

   Portal — Aetheria 2027 Modern Glassmorphism

   Frosted glass · aurora gradients · soft neon · clean sans-serif

   ═══════════════════════════════════════════════════════════════ */



/* Fonts: system stack — no external font fetches. */



:root {

  /* Base — aged parchment over dark oak (original palette) */

  --bg: #0e0b07;

  --bg-panel: rgba(28, 22, 16, 0.55);

  --bg-panel-alt: rgba(21, 17, 11, 0.65);

  --bg-input: rgba(10, 8, 5, 0.6);

  --parchment: rgba(42, 33, 24, 0.5);

  --parchment-light: rgba(58, 46, 32, 0.5);

  /* Borders — bronze / iron, brighter for visibility */

  --border: rgba(139, 105, 20, 0.35);

  --border-light: rgba(180, 140, 50, 0.5);

  --border-gold: rgba(232, 193, 112, 0.4);

  /* Text — ink & gold leaf */

  --text: #d8c9a8;

  --text-dim: #9a8a68;

  --text-bright: #f5e8c8;

  --ink: #c9b896;

  /* Accents — vibrant gold leaf primary, others secondary */

  --accent: #e8c170;

  --accent-gold: #f5d98a;

  --accent-gold-bright: #ffe9a8;

  --green: #7fae5e;

  --red: #c45a4a;

  --arcane: #6a8fc4;

  --pink: #c8a0d0;

  --shadow: rgba(0, 0, 0, 0.6);

  /* Glass effect */

  --glass-blur: blur(20px) saturate(160%);

  --glass-border: 1px solid rgba(232, 193, 112, 0.15);

  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

  --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);

  /* Gradients — vibrant gold themed */

  --grad-aurora: linear-gradient(135deg, #f5d98a 0%, #c9a84c 50%, #ffe9a8 100%);

  --grad-cyan: linear-gradient(135deg, #6a8fc4 0%, #4a6a9c 100%);

  --grad-purple: linear-gradient(135deg, #c9a84c 0%, #f5d98a 100%);

  --grad-pink: linear-gradient(135deg, #c45a4a 0%, #a04030 100%);

  --grad-green: linear-gradient(135deg, #7fae5e 0%, #5a8e3e 100%);

  --grad-surface: linear-gradient(180deg, rgba(42,33,24,0.4), rgba(21,17,11,0.6));

  /* Radii */

  --r-sm: 8px;

  --r-md: 12px;

  --r-lg: 16px;

  --r-xl: 24px;

  --r-pill: 100px;

}



* { box-sizing: border-box; }



body {

  margin: 0;

  background:

    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(139, 105, 20, 0.12) 0%, transparent 60%),

    radial-gradient(ellipse 60% 50% at 80% 10%, rgba(196, 90, 74, 0.06) 0%, transparent 55%),

    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(106, 143, 196, 0.05) 0%, transparent 60%),

    var(--bg);

  background-attachment: fixed;

  color: var(--text);

  font-family: "Inter", system-ui, -apple-system, sans-serif;

  font-size: 15px;

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

  transition: background 0.3s ease, color 0.3s ease;

}



a { color: var(--accent-gold); text-decoration: none; transition: color 0.2s; }

a:hover { color: var(--accent-gold-bright); }



/* ── Animations ─────────────────────────────────────────────── */

@keyframes fadeInUp {

  from { opacity: 0; transform: translateY(16px); }

  to   { opacity: 1; transform: translateY(0); }

}

@keyframes fadeIn {

  from { opacity: 0; }

  to   { opacity: 1; }

}

@keyframes shimmer {

  0%   { background-position: -200% center; }

  100% { background-position: 200% center; }

}

@keyframes pulseGlow {

  0%, 100% { box-shadow: 0 0 8px rgba(232, 193, 112, 0.4), 0 0 20px rgba(232, 193, 112, 0.15); }

  50%      { box-shadow: 0 0 16px rgba(232, 193, 112, 0.6), 0 0 36px rgba(232, 193, 112, 0.3); }

}

@keyframes pulseGlowGreen {

  0%, 100% { box-shadow: 0 0 8px var(--green), 0 0 20px rgba(74, 222, 128, 0.2); }

  50%      { box-shadow: 0 0 14px var(--green), 0 0 30px rgba(74, 222, 128, 0.4); }

}

@keyframes pulseGlowRed {

  0%, 100% { box-shadow: 0 0 8px var(--red), 0 0 20px rgba(248, 113, 113, 0.2); }

  50%      { box-shadow: 0 0 14px var(--red), 0 0 30px rgba(248, 113, 113, 0.4); }

}

@keyframes flicker {

  0%, 100% { opacity: 1; }

  45%      { opacity: 0.9; }

  55%      { opacity: 0.95; }

}

@keyframes slideInRight {

  from { opacity: 0; transform: translateX(40px); }

  to   { opacity: 1; transform: translateX(0); }

}

@keyframes float {

  0%, 100% { transform: translateY(0); }

  50%      { transform: translateY(-6px); }

}

@keyframes auroraShift {

  0%   { background-position: 0% 50%; }

  50%  { background-position: 100% 50%; }

  100% { background-position: 0% 50%; }

}



/* ── Header — glass nav bar ─────────────────────────────────── */

.site-header {

  background: var(--bg-panel);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border-bottom: 1px solid var(--border);

  padding: 14px 0;

  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);

  position: sticky;

  top: 0;

  z-index: 100;

}

.site-header::after {

  content: "";

  position: absolute;

  left: 0; right: 0; bottom: -1px;

  height: 1px;

  background: linear-gradient(90deg, transparent, var(--accent-gold), var(--accent), var(--arcane), transparent);

  background-size: 200% 100%;

  animation: auroraShift 8s ease infinite;

}

.header-inner {

  max-width: 1280px; margin: 0 auto; padding: 0 24px;

  display: flex; justify-content: space-between; align-items: center;

  gap: 20px;

}

.site-logo {

  font-family: "Space Grotesk", sans-serif;

  font-size: 30px; font-weight: 800; color: var(--accent-gold-bright);

  letter-spacing: 3px;

  background: linear-gradient(135deg, #ffe9a8 0%, #f5d98a 40%, #e8c170 70%, #c9a84c 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  display: flex; align-items: center; gap: 12px;

  transition: filter 0.2s, transform 0.2s;

  text-shadow: 0 0 20px rgba(232, 193, 112, 0.25);

  flex-shrink: 0;

  text-transform: uppercase;

  position: relative;

}

.logo-crest {

  width: 52px; height: 52px;

  flex-shrink: 0;

  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(245, 217, 138, 0.4));

  transition: filter 0.3s, transform 0.3s;

}

.logo-text {

  display: inline-block;

  line-height: 1;

}

.site-logo:hover { filter: brightness(1.15); transform: translateY(-1px); }

.site-logo:hover .logo-crest {

  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 20px rgba(245, 217, 138, 0.8));

  transform: scale(1.05);

}

.header-status { color: var(--text-dim); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; }



.status-dot {

  display: inline-block; width: 8px; height: 8px; border-radius: 50%;

  background: var(--text-dim); margin-right: 4px;

}

.status-dot.online {

  background: var(--green);

  box-shadow: 0 0 8px var(--green), 0 0 16px rgba(74, 222, 128, 0.4);

  animation: pulseGlowGreen 2.5s ease-in-out infinite;

}

.status-dot.idle { background: #444; }



/* Guild emblem + header */

.guild-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }

.guild-emblem {

  width: 64px; height: 64px;

  border-radius: var(--r-lg);

  background: var(--grad-purple);

  color: #fff;

  display: flex; align-items: center; justify-content: center;

  font-size: 28px; font-weight: 700;

  font-family: "Space Grotesk", sans-serif;

  box-shadow: 0 4px 20px rgba(139, 105, 20, 0.4);

  flex-shrink: 0;

}

.guild-info h1 { margin: 0; }



/* C3: Guild list cards */

.guild-toolbar {

  display: flex;

  gap: 8px;

  margin-bottom: 16px;

}

.guild-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 12px;

}

.guild-card {

  padding: 14px;

  background: var(--bg-panel);

  border: 1px solid var(--border-dim);

  border-radius: var(--r-md);

  transition: all 0.2s;

}

.guild-card:hover {

  border-color: var(--accent);

  background: rgba(20, 20, 35, 0.6);

}

.guild-card-header {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 8px;

}

.guild-emblem-small {

  width: 40px; height: 40px;

  border-radius: var(--r-sm);

  background: var(--grad-purple);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 16px;

  font-weight: 700;

  color: #fff;

  flex-shrink: 0;

}

.guild-card-name {

  font-size: 15px;

  font-weight: 600;

  color: var(--accent-gold);

  text-decoration: none;

}

.guild-card-name:hover { text-decoration: underline; }

.guild-card-leader { font-size: 11px; }

.guild-card-stats {

  display: flex;

  gap: 12px;

  margin-bottom: 6px;

}

.guild-stat {

  font-size: 12px;

  color: var(--muted);

}

.guild-card-motd {

  font-size: 11px;

  margin-top: 4px;

}



/* C3: Guild stats bar */

.guild-stats-bar {

  display: flex;

  gap: 16px;

  margin: 16px 0;

  padding: 12px 16px;

  background: var(--bg-panel);

  border: 1px solid var(--border-dim);

  border-radius: var(--r-md);

}

.gs-stat {

  text-align: center;

  flex: 1;

}

.gs-stat-val {

  display: block;

  font-size: 24px;

  font-weight: 700;

  color: var(--accent-gold);

}

.gs-stat-label {

  display: block;

  font-size: 11px;

  color: var(--muted);

  margin-top: 2px;

}



.role-badge {

  display: inline-block; margin-left: 8px; padding: 3px 10px;

  border: 1px solid var(--accent); border-radius: var(--r-pill);

  color: var(--accent); font-size: 10px; text-transform: uppercase;

  font-family: "Space Grotesk", sans-serif; font-weight: 600; letter-spacing: 1px;

  background: rgba(232, 193, 112, 0.12);

}



.maintenance-banner {

  background: linear-gradient(90deg, rgba(232, 193, 112, 0.18), rgba(196, 90, 74, 0.1));

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  color: var(--accent-gold); text-align: center;

  padding: 10px; border-bottom: 1px solid var(--border);

  font-family: "Space Grotesk", sans-serif; font-weight: 600; letter-spacing: 0.5px;

  font-size: 14px;

}



/* ── Layout ─────────────────────────────────────────────────── */

.layout {

  max-width: 1280px; margin: 24px auto; padding: 0 24px;

  display: grid; grid-template-columns: 220px 1fr 280px; gap: 20px;

  align-items: start;

}

@media (max-width: 1024px) {

  .layout { grid-template-columns: 1fr; }

}



/* ── Mobile nav toggle (hamburger) ──────────────────────────── */

.nav-toggle {

  display: none;

  position: fixed;

  top: 14px; right: 16px;

  z-index: 200;

  width: 40px; height: 40px;

  background: var(--bg-input);

  border: 1px solid var(--border);

  border-radius: var(--r-sm);

  cursor: pointer;

  padding: 8px;

  flex-direction: column;

  justify-content: center;

  gap: 5px;

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

}

.nav-toggle-bar {

  display: block;

  height: 3px;

  width: 100%;

  background: var(--accent-gold);

  border-radius: 2px;

  transition: transform 0.25s, opacity 0.25s;

}

.nav-toggle-active .nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }

.nav-toggle-active .nav-toggle-bar:nth-child(2) { opacity: 0; }

.nav-toggle-active .nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }



@media (max-width: 1024px) {

  .nav-toggle { display: flex; }

  .left-menu {

    position: fixed;

    top: 0; left: 0;

    width: 280px;

    max-width: 85vw;

    height: 100vh;

    overflow-y: auto;

    background: var(--bg-panel-alt);

    backdrop-filter: var(--glass-blur);

    -webkit-backdrop-filter: var(--glass-blur);

    z-index: 150;

    padding: 70px 16px 24px;

    transform: translateX(-100%);

    transition: transform 0.3s ease;

    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);

  }

  .left-menu.nav-open { transform: translateX(0); }

  .left-menu::before {

    content: none;

  }

  .layout { padding-top: 60px; }

  /* Backdrop overlay when mobile menu is open */

  .left-menu.nav-open::after {

    content: "";

    position: fixed;

    top: 0; left: 280px;

    width: calc(100vw - 280px);

    height: 100vh;

    background: rgba(0, 0, 0, 0.4);

    z-index: -1;

  }

}



@media (min-width: 1025px) {

  .left-menu { position: relative; transform: none; height: auto; padding: 0; z-index: 50; }

}



/* ── Left menu — glass panels ───────────────────────────────── */

.menu-section {

  background: var(--bg-panel);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-md); margin-bottom: 12px; overflow: visible;

  box-shadow: var(--glass-shadow);

  animation: fadeInUp 0.4s ease-out both;

}

.menu-section:nth-child(2) { animation-delay: 0.05s; }

.menu-section:nth-child(3) { animation-delay: 0.10s; }

.menu-section:nth-child(4) { animation-delay: 0.15s; }

.menu-heading {

  background: rgba(232, 193, 112, 0.15);

  color: var(--accent-gold);

  padding: 10px 14px; font-size: 11px; font-weight: 700;

  font-family: "Space Grotesk", sans-serif;

  text-transform: uppercase; letter-spacing: 2px;

  border-bottom: 1px solid var(--border);

}

.menu-section a {

  display: block; padding: 9px 14px; color: var(--text);

  border-bottom: 1px solid rgba(139, 105, 20, 0.2); font-size: 14px;

  font-weight: 500;

  transition: background 0.2s, color 0.2s, padding-left 0.2s;

  position: relative;

}

.menu-section a:last-child, .menu-form { border-bottom: none; }

.menu-section a:hover {

  background: rgba(232, 193, 112, 0.15); color: var(--text-bright);

  padding-left: 18px;

}

.menu-section a:hover::before {

  content: "›"; position: absolute; left: 6px; color: var(--accent);

}

.menu-section a.active {

  color: var(--accent-gold); background: rgba(232, 193, 112, 0.15);

  border-left: 3px solid var(--accent);

  padding-left: 11px;

}

.menu-form { padding: 0; margin: 0; }

.menu-logout {

  display: block; width: 100%; padding: 9px 14px; text-align: left;

  background: none; border: none; color: var(--red); font: inherit; cursor: pointer;

  font-weight: 500;

  transition: background 0.2s, padding-left 0.2s;

}

.menu-logout:hover { background: rgba(248, 113, 113, 0.08); padding-left: 18px; }



/* ── Wiki dropdown — hover to expand on desktop ────────────── */

.wiki-dropdown-trigger {

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: space-between;

  user-select: none;

}

.wiki-dropdown-arrow {

  font-size: 10px;

  transition: transform 0.2s ease;

  margin-left: 6px;

}

.wiki-dropdown-content {

  display: none;

  max-height: 340px;

  overflow-y: auto;

  border-top: 1px solid var(--border);

}

.wiki-dropdown-content a {

  padding: 7px 14px 7px 20px;

  font-size: 13px;

}

.wiki-dropdown-section:hover .wiki-dropdown-content,

.wiki-dropdown-section.wiki-open .wiki-dropdown-content {

  display: block;

}

.wiki-dropdown-section:hover .wiki-dropdown-arrow,

.wiki-dropdown-section.wiki-open .wiki-dropdown-arrow {

  transform: rotate(180deg);

}

.wiki-dropdown-content::-webkit-scrollbar { width: 5px; }

.wiki-dropdown-content::-webkit-scrollbar-thumb {

  background: rgba(232, 193, 112, 0.3);

  border-radius: 3px;

}

.wiki-dropdown-content::-webkit-scrollbar-track {

  background: transparent;

}



/* ── Content box — main glass panel ─────────────────────────── */

.content {

  background: var(--bg-panel);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-lg); padding: 28px 32px; min-height: 420px;

  box-shadow: var(--glass-shadow-lg);

  animation: fadeInUp 0.5s ease-out both;

  position: relative;

}

.content::before {

  content: "";

  position: absolute; top: 0; left: 20px; right: 20px;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(232, 193, 112, 0.5), transparent);

}

.content h1 {

  margin: 0 0 20px; font-size: 28px; color: var(--accent-gold-bright);

  font-family: "Space Grotesk", sans-serif; font-weight: 700;

  border-bottom: 2px solid var(--border-gold); padding-bottom: 14px;

  letter-spacing: -0.5px;

  text-shadow: 0 0 20px rgba(232, 193, 112, 0.15);

}

.content h2 {

  font-size: 20px; color: var(--accent-gold); margin: 24px 0 12px;

  font-family: "Space Grotesk", sans-serif; font-weight: 600;

  text-shadow: 0 0 12px rgba(232, 193, 112, 0.1);

}

.content p { line-height: 1.7; }



/* ── Sideboxes — glass widgets ──────────────────────────────── */

.sidebox {

  background: var(--bg-panel);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-md); margin-bottom: 12px; overflow: hidden;

  box-shadow: var(--glass-shadow);

  animation: fadeInUp 0.4s ease-out both;

}

.sidebox:nth-child(2) { animation-delay: 0.1s; }

.sidebox:nth-child(3) { animation-delay: 0.2s; }

.sidebox-title {

  background: rgba(232, 193, 112, 0.15);

  color: var(--accent-gold);

  padding: 10px 14px; font-size: 11px; font-weight: 700;

  font-family: "Space Grotesk", sans-serif;

  text-transform: uppercase; letter-spacing: 1.5px;

  border-bottom: 1px solid var(--border);

}

.sidebox-body { padding: 14px; font-size: 14px; }

.sidebox-body p { margin: 0 0 8px; }



.top-player {

  display: flex; gap: 10px; align-items: center; padding: 6px 0;

  border-bottom: 1px solid rgba(139, 105, 20, 0.2);

  transition: background 0.2s;

  border-radius: var(--r-sm);

}

.top-player:last-child { border-bottom: none; }

.top-player:hover { background: rgba(232, 193, 112, 0.12); }

.top-player img { image-rendering: pixelated; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-sm); }

.top-player small { color: var(--text-dim); }



/* ── Tables ─────────────────────────────────────────────────── */

table.list {

  width: 100%; border-collapse: collapse; font-size: 14px;

}

table.list th, table.list td {

  padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: left;

}

table.list th {

  background: rgba(232, 193, 112, 0.12); color: var(--accent-gold);

  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;

  font-family: "Space Grotesk", sans-serif; font-weight: 600;

}

table.list tr:hover td { background: rgba(232, 193, 112, 0.1); }

table.list td.num, table.list th.num { text-align: right; }



/* C4: Seasonal leaderboard highlights */

tr.rank-gold td { background: rgba(255, 215, 0, 0.08); }

tr.rank-silver td { background: rgba(192, 192, 192, 0.06); }

tr.rank-bronze td { background: rgba(205, 127, 50, 0.06); }

tr.rank-gold:hover td { background: rgba(255, 215, 0, 0.15); }

tr.rank-silver:hover td { background: rgba(192, 192, 192, 0.12); }

tr.rank-bronze:hover td { background: rgba(205, 127, 50, 0.12); }

.rank-change { font-size: 11px; font-weight: bold; }

.rank-up { color: #4ade80; }

.rank-down { color: #f87171; }

.rank-new { color: #fbbf24; font-size: 9px; }

.rank-same { color: var(--muted); }



.outfit-thumb { image-rendering: pixelated; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-sm); vertical-align: middle; }



/* ── Forms ──────────────────────────────────────────────────── */

form.panel {

  background: var(--bg-panel-alt);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-lg); padding: 24px; max-width: 480px;

  box-shadow: var(--glass-shadow);

}

.form-row { margin-bottom: 16px; }

.form-row label { display: block; margin-bottom: 6px; color: var(--accent-gold); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-family: "Space Grotesk", sans-serif; font-weight: 600; }

.form-row input, .form-row select, .form-row textarea {

  width: 100%; padding: 10px 14px; background: var(--bg-input);

  border: 1px solid var(--border-light); border-radius: var(--r-sm);

  color: var(--text); font: inherit; font-family: "Inter", sans-serif;

  transition: border-color 0.2s, box-shadow 0.2s;

}

.form-row input:focus, .form-row select:focus, .form-row textarea:focus {

  outline: none; border-color: var(--accent);

  box-shadow: 0 0 0 3px rgba(232, 193, 112, 0.18);

}

.form-row textarea { min-height: 130px; resize: vertical; }



button.btn, a.btn {

  display: inline-block; padding: 10px 22px; border-radius: var(--r-sm);

  border: 1px solid var(--accent); background: var(--grad-purple);

  color: #fff; font: inherit; cursor: pointer;

  font-family: "Space Grotesk", sans-serif; font-weight: 600; letter-spacing: 0.5px;

  font-size: 13px;

  transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;

  border: none;

}

button.btn:hover, a.btn:hover {

  filter: brightness(1.15);

  box-shadow: 0 4px 20px rgba(139, 105, 20, 0.4);

  transform: translateY(-1px);

}

button.btn:active, a.btn:active { transform: translateY(0); }

button.btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; }

button.btn-danger:hover { box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4); }

button.btn-small { padding: 6px 14px; font-size: 12px; }



/* ── Messages ───────────────────────────────────────────────── */

.msg-box {

  border: 1px solid var(--border-light); border-radius: var(--r-md);

  padding: 14px 18px; margin-bottom: 16px;

  font-weight: 500;

}

.msg-box.error { border-color: rgba(248, 113, 113, 0.3); background: rgba(248, 113, 113, 0.08); color: #fca5a5; }

.msg-box.success { border-color: rgba(74, 222, 128, 0.3); background: rgba(74, 222, 128, 0.08); color: #86efac; }

.msg-box .back-link { display: inline-block; margin-top: 10px; }



/* ── News ───────────────────────────────────────────────────── */

.news-post { margin-bottom: 24px; animation: fadeInUp 0.4s ease-out both; }

.news-post .news-head {

  background: var(--grad-surface);

  border: var(--glass-border);

  border-radius: var(--r-md) var(--r-md) 0 0; padding: 14px 18px;

  display: flex; justify-content: space-between; align-items: baseline;

}

.news-post .news-head h3 { margin: 0; font-size: 18px; color: var(--text-bright); font-family: "Space Grotesk", sans-serif; font-weight: 600; }

.news-post .news-head .news-meta { color: var(--text-dim); font-size: 13px; }

.news-post .news-body {

  border: var(--glass-border); border-top: none;

  border-radius: 0 0 var(--r-md) var(--r-md); padding: 18px;

  background: var(--bg-input);

}

.news-post.hidden-post { opacity: 0.55; }



/* ── Character profile ──────────────────────────────────────── */

.profile-head { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 20px; }

.profile-head img.outfit-big { image-rendering: pixelated; background: var(--bg-input); border: 1px solid var(--border-gold); border-radius: var(--r-md); width: 96px; height: 96px; object-fit: contain; box-shadow: 0 0 20px rgba(232, 193, 112, 0.18); }

.profile-head .profile-name h1 { border: none; margin: 0 0 4px; padding: 0; }

.profile-head .profile-name .muted { margin: 0; }



/* ── Misc ───────────────────────────────────────────────────── */

.muted { color: var(--text-dim); }

.pagination { margin-top: 20px; display: flex; gap: 12px; align-items: center; }

.pagination a.disabled { color: var(--text-dim); pointer-events: none; }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.tabs a {

  padding: 6px 16px; border: 1px solid var(--border); border-radius: var(--r-pill);

  font-size: 13px; color: var(--text); font-weight: 500;

  transition: border-color 0.2s, color 0.2s, background 0.2s;

}

.tabs a:hover { border-color: var(--border-light); }

.tabs a.active { border-color: var(--accent); color: var(--accent-gold); background: rgba(232, 193, 112, 0.12); }

.inline-form { display: inline; }

.search-bar { display: flex; gap: 10px; margin-bottom: 16px; }

.search-bar input { flex: 1; max-width: 340px; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-light); border-radius: var(--r-sm); color: var(--text); font: inherit; font-family: "Inter", sans-serif; }

.search-bar input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232, 193, 112, 0.18); }



.site-footer {

  max-width: 1280px; margin: 0 auto; padding: 20px 24px 40px;

  color: var(--text-dim); font-size: 13px; text-align: center;

  border-top: 1px solid var(--border);

  margin-top: 24px;

}



/* ── Ornamental divider ─────────────────────────────────────── */

.ornate-divider {

  text-align: center; margin: 24px 0; color: var(--accent);

  font-size: 16px; letter-spacing: 8px; opacity: 0.4;

}

.ornate-divider::before { content: "✦ ✦ ✦"; }

/* ── Lore pages ─────────────────────────────────────────────── */

.lore-section {

  background: var(--bg-panel);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-lg);

  padding: 22px 28px;

  margin: 20px 0;

  box-shadow: var(--glass-shadow);

  animation: fadeInUp 0.4s ease-out both;

}

.lore-section h2 {

  color: var(--text-bright);

  font-family: "Space Grotesk", sans-serif; font-weight: 700;

  font-size: 22px;

  margin: 0 0 16px 0;

  border-bottom: 1px solid var(--border);

  padding-bottom: 10px;

  letter-spacing: -0.3px;

}

.lore-section h3 {

  color: var(--accent-gold);

  font-family: "Space Grotesk", sans-serif; font-weight: 600;

  font-size: 16px;

  margin: 18px 0 8px 0;

}

.lore-section p { line-height: 1.75; margin: 12px 0; }

.lore-section p:first-of-type::first-letter {

  font-family: "Space Grotesk", sans-serif; font-size: 36px; font-weight: 700;

  background: var(--grad-aurora);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  float: left; line-height: 0.9;

  margin: 4px 8px 0 0;

}

.lore-section ul { margin: 12px 0; padding-left: 26px; }

.lore-section li { line-height: 1.75; margin: 6px 0; }

.lore-table {

  width: 100%;

  border-collapse: collapse;

  margin: 12px 0;

}

.lore-table th, .lore-table td {

  border: 1px solid var(--border);

  padding: 8px 14px;

  text-align: left;

  font-size: 14px;

}

.lore-table th {

  background: rgba(232, 193, 112, 0.12);

  color: var(--accent-gold);

  font-family: "Space Grotesk", sans-serif; font-weight: 600;

}



/* ── Town cards ─────────────────────────────────────────────── */

.town-card {

  background: var(--bg-panel);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-lg);

  padding: 22px 28px;

  margin: 16px 0;

  box-shadow: var(--glass-shadow);

  animation: fadeInUp 0.4s ease-out both;

  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;

  position: relative;

}

.town-card:hover {

  border-color: var(--border-gold);

  box-shadow: var(--glass-shadow-lg), 0 0 24px rgba(232, 193, 112, 0.12);

  transform: translateY(-2px);

}

.town-card h2 {

  color: var(--text-bright);

  font-family: "Space Grotesk", sans-serif; font-weight: 700;

  font-size: 22px;

  margin: 0 0 14px 0;

  display: flex;

  align-items: center;

  gap: 10px;

  letter-spacing: -0.3px;

}

.town-field { margin: 14px 0; }

.town-label {

  display: inline-block;

  color: var(--accent-gold);

  font-size: 11px; font-weight: 700;

  font-family: "Space Grotesk", sans-serif;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  margin-bottom: 4px;

}

.town-field p { margin: 4px 0; line-height: 1.7; color: var(--text); }



.badge {

  display: inline-block;

  padding: 3px 12px;

  border-radius: var(--r-pill);

  font-size: 10px;

  font-weight: 700;

  font-family: "Space Grotesk", sans-serif;

  text-transform: uppercase;

  letter-spacing: 1px;

}

.badge-starter { background: rgba(74, 222, 128, 0.12); color: var(--green); border: 1px solid rgba(74, 222, 128, 0.3); }

.badge-endgame { background: rgba(248, 113, 113, 0.12); color: var(--red); border: 1px solid rgba(248, 113, 113, 0.3); }

.badge-premium { background: rgba(232, 193, 112, 0.15); color: var(--accent-gold); border: 1px solid rgba(232, 193, 112, 0.35); }



/* ── Quest page ─────────────────────────────────────────────── */

.quest-filter { margin: 16px 0; }

.quest-chain { margin: 24px 0; animation: fadeInUp 0.4s ease-out both; }

.chain-title { font-size: 20px; margin: 16px 0 10px; font-family: "Space Grotesk", sans-serif; color: var(--accent-gold); font-weight: 600; }

.quest-list { display: flex; flex-direction: column; gap: 12px; }

.quest-card {

  background: var(--bg-panel);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-md);

  padding: 16px 20px;

  transition: border-color 0.2s, transform 0.2s;

  position: relative;

}

.quest-card:hover { border-color: var(--border-light); transform: translateX(4px); }

.quest-header {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 10px;

  flex-wrap: wrap;

}

.quest-id {

  color: var(--text-dim);

  font-size: 11px;

  font-family: "Space Grotesk", monospace;

  background: var(--bg-input);

  padding: 3px 8px;

  border-radius: var(--r-sm);

}

.quest-name { color: var(--text-bright); font-weight: 600; font-size: 15px; font-family: "Space Grotesk", sans-serif; }

.quest-city { color: var(--text-dim); font-size: 13px; }

.quest-level { color: var(--arcane); font-size: 12px; margin-left: auto; font-weight: 600; }

.quest-story {

  color: var(--ink);

  font-size: 14px;

  line-height: 1.7;

  margin: 10px 0;

  padding: 12px 16px;

  background: rgba(232, 193, 112, 0.1);

  border-radius: var(--r-sm);

  border-left: 3px solid var(--accent);

}

.quest-meta {

  display: flex;

  gap: 16px;

  font-size: 12px;

  color: var(--text-dim);

  flex-wrap: wrap;

}

.quest-type { color: var(--pink); }

.quest-npc { color: var(--arcane); }

.quest-kill { color: var(--red); }

.quest-rewards { color: var(--accent-gold); }

.quest-reward-sprite { width:16px; height:16px; vertical-align:middle; image-rendering:pixelated; margin-right:2px; border-radius:2px; }



/* ── Factions page ──────────────────────────────────────────── */

.faction-tiers {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin: 12px 0 20px;

}

.tier-badge {

  font-size: 12px;

  padding: 5px 12px;

  background: var(--bg-panel);

  border: 1px solid var(--border);

  border-radius: var(--r-pill);

  font-family: "Space Grotesk", sans-serif;

  font-weight: 500;

}

.faction-list {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

}

.faction-card {

  background: var(--bg-panel);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-md);

  padding: 18px 22px;

  transition: border-color 0.2s, transform 0.2s;

  position: relative;

}

.faction-card:hover { border-color: var(--border-light); transform: translateY(-2px); }

.faction-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 10px;

}

.faction-name {

  color: var(--text-bright);

  font-family: "Space Grotesk", sans-serif; font-weight: 600;

  font-size: 16px;

}

.faction-opposed {

  color: var(--red);

  font-size: 11px;

  font-weight: 500;

}

.faction-alliance {

  font-size: 10px;

  font-weight: 600;

  padding: 2px 8px;

  border-radius: 4px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}

.badge-dawnfire {

  background: rgba(232, 198, 104, 0.15);

  color: #e8c668;

  border: 1px solid rgba(232, 198, 104, 0.3);

}

.badge-voidtide {

  background: rgba(90, 159, 212, 0.15);

  color: #5a9fd4;

  border: 1px solid rgba(90, 159, 212, 0.3);

}

.faction-description {

  color: var(--ink);

  font-size: 14px;

  line-height: 1.7;

  margin: 10px 0;

  padding: 12px 16px;

  background: rgba(232, 193, 112, 0.1);

  border-radius: var(--r-sm);

  border-left: 3px solid var(--accent);

}

.faction-meta {

  display: flex;

  gap: 20px;

  font-size: 12px;

  color: var(--text-dim);

}

.faction-towns { color: var(--arcane); }

.faction-quests { color: var(--pink); }



/* ═══════════════════════════════════════════════════════════════

   WORLD MAP — interactive atlas

   ═══════════════════════════════════════════════════════════════ */

.worldmap-atlas {

  display: grid;

  grid-template-columns: 1fr 360px;

  gap: 20px;

  align-items: start;

}

@media (max-width: 1024px) {

  .worldmap-atlas { grid-template-columns: 1fr; }

}



.worldmap-container {

  overflow: auto;

  border: 1px solid var(--border-gold);

  background: #05040a;

  max-height: 78vh;

  position: relative;

  cursor: grab;

  border-radius: var(--r-lg);

  box-shadow: var(--glass-shadow-lg), inset 0 0 60px rgba(0, 0, 0, 0.5);

}



.worldmap-toolbar {

  display: flex;

  gap: 6px;

  margin-bottom: 8px;

  align-items: center;

}

.wm-search-input {

  flex: 1;

  background: var(--bg-panel);

  border: 1px solid var(--border-gold);

  border-radius: var(--r-sm);

  padding: 4px 10px;

  font-size: 13px;

  color: var(--text);

}

.wm-search-input:focus {

  outline: none;

  border-color: var(--accent);

}

.wm-toggle-btn {

  font-size: 11px;

  opacity: 0.6;

  transition: all 0.2s;

}

.wm-toggle-btn.active {

  opacity: 1;

  background: var(--accent);

  color: #1a1a2e;

  border-color: var(--accent);

}

.worldmap-routes {

  position: absolute;

  top: 0; left: 0;

  width: 100%; height: 100%;

  pointer-events: none;

  z-index: 1;

}

.route-line {

  stroke: rgba(232, 193, 112, 0.4);

  stroke-width: 2;

  stroke-dasharray: 5 3;

}



.worldmap-container:active { cursor: grabbing; }

.worldmap-wrapper {

  position: relative;

  display: inline-block;

  transform-origin: top left;

}

#worldmap-img {

  display: block;

  max-width: none;

  image-rendering: pixelated;

}



/* Town markers — animated map pins */

.town-marker {

  position: absolute;

  transform: translate(-50%, -50%);

  cursor: pointer;

  z-index: 10;

}

.town-pin {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 2px;

}

.town-dot {

  display: inline-block;

  width: 12px; height: 12px;

  border-radius: 50%;

  background: var(--accent);

  border: 2px solid rgba(10, 10, 20, 0.8);

  box-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 12px rgba(232, 193, 112, 0.5);

  animation: pulseGlow 2.8s ease-in-out infinite;

  transition: transform 0.2s;

}

.town-marker.starter .town-dot {

  background: var(--green);

  width: 14px; height: 14px;

  animation: pulseGlowGreen 2.2s ease-in-out infinite;

}

.town-marker.endgame .town-dot {

  background: var(--red);

  width: 14px; height: 14px;

  animation: pulseGlowRed 2.2s ease-in-out infinite;

}

.town-marker:hover .town-dot { transform: scale(1.4); }

.town-marker.selected .town-dot {

  transform: scale(1.5);

  box-shadow: 0 0 16px var(--accent-gold-bright), 0 0 32px rgba(232, 193, 112, 0.6);

}

.town-name-tag {

  background: var(--bg-panel-alt);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  color: var(--accent-gold);

  padding: 3px 10px;

  border-radius: var(--r-sm);

  border: 1px solid var(--border-gold);

  font-size: 11px;

  font-family: "Space Grotesk", sans-serif; font-weight: 600;

  white-space: nowrap;

  pointer-events: none;

  opacity: 0;

  transition: opacity 0.2s;

  margin-top: 2px;

}

.town-marker:hover .town-name-tag,

.town-marker.selected .town-name-tag { opacity: 1; }

/* --- POI markers (castles, waygates, chambers, hazards) --- */
.poi-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: help;
  z-index: 8;
}
.poi-glyph {
  display: inline-block;
  width: 10px; height: 10px;
  border: 1px solid rgba(10, 10, 20, 0.9);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  transition: transform 0.2s;
}
.poi-marker:hover .poi-glyph { transform: scale(1.5); }
.poi-castle .poi-glyph, .legend-poi.poi-castle {
  background: #b266ff;
  box-shadow: 0 0 6px rgba(0,0,0,.8), 0 0 10px rgba(178,102,255,.5);
}
.poi-waygate .poi-glyph, .legend-poi.poi-waygate {
  background: #50dcff;
  transform: rotate(45deg);
  box-shadow: 0 0 6px rgba(0,0,0,.8), 0 0 10px rgba(80,220,255,.5);
}
.poi-chamber .poi-glyph, .legend-poi.poi-chamber {
  background: #ffaa3c;
  transform: rotate(45deg);
  box-shadow: 0 0 6px rgba(0,0,0,.8), 0 0 10px rgba(255,170,60,.5);
}
.poi-hazard .poi-glyph, .legend-poi.poi-hazard {
  background: #ff5a28;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  box-shadow: 0 0 6px rgba(0,0,0,.8);
}
.legend-poi {
  display: inline-block;
  width: 10px; height: 10px;
  border: 1px solid rgba(10, 10, 20, 0.9);
  margin-right: 6px;
  vertical-align: middle;
}

.town-quest-badge {

  position: absolute;

  top: -8px; right: -8px;

  background: var(--red);

  color: #fff;

  font-size: 9px;

  font-weight: 700;

  font-family: "Space Grotesk", sans-serif;

  padding: 2px 6px;

  border-radius: var(--r-pill);

  border: 1px solid rgba(10, 10, 20, 0.8);

  min-width: 18px;

  text-align: center;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);

}



/* Town detail panel */

.town-detail-panel {

  background: var(--bg-panel);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-lg);

  box-shadow: var(--glass-shadow-lg);

  max-height: 78vh;

  overflow-y: auto;

  position: sticky;

  top: 80px;

}

.tdp-empty {

  padding: 48px 24px;

  text-align: center;

  color: var(--text-dim);

}

.tdp-empty .tdp-icon { font-size: 40px; color: var(--accent); margin-bottom: 14px; opacity: 0.4; }

.tdp-header {

  background: rgba(232, 193, 112, 0.15);

  border-bottom: 1px solid var(--border);

  padding: 16px 20px;

  position: sticky; top: 0; z-index: 5;

}

.tdp-header h2 {

  margin: 0; font-size: 20px; color: var(--text-bright);

  font-family: "Space Grotesk", sans-serif; font-weight: 700;

  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;

}

.tdp-badges { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }

.tdp-close {

  float: right;

  background: none; border: 1px solid var(--border);

  color: var(--text-dim); font-size: 18px; cursor: pointer;

  border-radius: var(--r-sm); padding: 0 8px; line-height: 24px;

  transition: color 0.2s, border-color 0.2s;

}

.tdp-close:hover { color: var(--red); border-color: var(--red); }

.tdp-body { padding: 16px 20px; animation: fadeIn 0.3s ease-out; }

.tdp-section { margin-bottom: 18px; }

.tdp-section-title {

  color: var(--accent-gold);

  font-family: "Space Grotesk", sans-serif; font-weight: 600;

  font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px;

  border-bottom: 1px solid var(--border);

  padding-bottom: 6px; margin: 0 0 10px 0;

}

.tdp-lore { font-size: 13px; line-height: 1.7; color: var(--ink); margin: 6px 0 10px; }

.tdp-lore-label { color: var(--accent-gold); font-size: 11px; font-family: "Space Grotesk", sans-serif; text-transform: uppercase; letter-spacing: 1px; }



/* NPC list in panel */

.tdp-npc {

  display: flex; align-items: center; gap: 12px;

  padding: 8px 0;

  border-bottom: 1px solid rgba(139, 105, 20, 0.2);

  animation: fadeInUp 0.3s ease-out both;

}

.tdp-npc:last-child { border-bottom: none; }

.tdp-npc img {

  image-rendering: pixelated;

  background: var(--bg-input);

  border: 1px solid var(--border);

  border-radius: var(--r-sm);

  width: 36px; height: 36px;

  object-fit: contain;

  flex-shrink: 0;

}

.tdp-npc-info { flex: 1; min-width: 0; }

.tdp-npc-name { color: var(--text-bright); font-size: 14px; font-family: "Space Grotesk", sans-serif; font-weight: 600; }

.tdp-npc-role {

  display: inline-block;

  font-size: 10px; padding: 2px 8px; border-radius: var(--r-pill);

  font-family: "Space Grotesk", sans-serif; text-transform: uppercase; letter-spacing: 0.5px;

  margin-left: 6px;

  font-weight: 600;

}

.tdp-npc-role.Captain { background: rgba(56, 189, 248, 0.15); color: var(--arcane); border: 1px solid rgba(56, 189, 248, 0.3); }

.tdp-npc-role.Trainer { background: rgba(74, 222, 128, 0.12); color: var(--green); border: 1px solid rgba(74, 222, 128, 0.3); }

.tdp-npc-role.Merchant { background: rgba(232, 193, 112, 0.15); color: var(--accent-gold); border: 1px solid rgba(232, 193, 112, 0.35); }

.tdp-npc-role.Quest\ Giver { background: rgba(248, 113, 113, 0.12); color: var(--red); border: 1px solid rgba(248, 113, 113, 0.3); }

.tdp-npc-role.NPC { background: var(--bg-panel); color: var(--text-dim); border: 1px solid var(--border); }

.tdp-npc-meta { color: var(--text-dim); font-size: 11px; }



/* Quest list in panel */

.tdp-quest {

  padding: 10px 12px;

  background: var(--bg-input);

  border: 1px solid var(--border);

  border-left: 3px solid var(--accent);

  border-radius: var(--r-sm);

  margin-bottom: 8px;

  animation: fadeInUp 0.3s ease-out both;

  transition: border-color 0.2s;

}

.tdp-quest:hover { border-left-color: var(--accent-gold); }

.tdp-quest-head {

  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;

}

.tdp-quest-name { color: var(--text-bright); font-size: 13px; font-family: "Space Grotesk", sans-serif; font-weight: 600; }

.tdp-quest-level { color: var(--arcane); font-size: 11px; margin-left: auto; }

.tdp-quest-meta { color: var(--text-dim); font-size: 11px; margin-top: 4px; }

.tdp-quest-story {

  color: var(--ink); font-size: 12px;

  margin: 6px 0 0; line-height: 1.6;

  padding: 8px 10px; background: rgba(232, 193, 112, 0.1); border-radius: var(--r-sm);

  border-left: 2px solid var(--accent);

}



/* Quest type badges */

.quest-type-badge {

  display: inline-block;

  font-size: 9px;

  padding: 2px 8px;

  border-radius: var(--r-pill);

  background: var(--bg-panel);

  color: var(--text-dim);

  min-width: 64px;

  text-align: center;

  flex-shrink: 0;

  font-family: "Space Grotesk", sans-serif; text-transform: uppercase; letter-spacing: 0.5px;

  font-weight: 600;

}

.quest-type-badge.type-boss_kill, .quest-type-badge.type-boss_raid {

  background: rgba(248, 113, 113, 0.15); color: #fca5a5; border: 1px solid rgba(248, 113, 113, 0.3);

}

.quest-type-badge.type-kill_task, .quest-type-badge.type-kill_puzzle, .quest-type-badge.type-kill_recon {

  background: rgba(74, 222, 128, 0.12); color: #86efac; border: 1px solid rgba(74, 222, 128, 0.3);

}

.quest-type-badge.type-talk_travel {

  background: rgba(56, 189, 248, 0.12); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, 0.3);

}



/* Legend & stats panels */

.worldmap-legend {

  margin-top: 20px;

  padding: 18px 20px;

  background: var(--bg-panel);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-lg);

  box-shadow: var(--glass-shadow);

  animation: fadeInUp 0.4s ease-out both;

}

.worldmap-legend h3 {

  margin: 4px 0 12px 0;

  font-size: 16px;

  font-family: "Space Grotesk", sans-serif; font-weight: 600;

  color: var(--text-bright);

}

.worldmap-legend ul { list-style: none; padding: 0; margin: 0; }

.worldmap-legend li { padding: 4px 0; font-size: 14px; }

.legend-dot {

  display: inline-block;

  width: 10px; height: 10px;

  border-radius: 50%;

  margin-right: 8px;

}

.legend-dot.starter { background: var(--green); box-shadow: 0 0 8px rgba(74, 222, 128, 0.4); }

.legend-dot.endgame { background: var(--red); box-shadow: 0 0 8px rgba(248, 113, 113, 0.4); }

.legend-dot.town { background: var(--accent); box-shadow: 0 0 8px rgba(232, 193, 112, 0.4); }

.map-stats li { color: var(--text-dim); }

.captain-entry {

  padding: 10px 0;

  border-bottom: 1px solid rgba(139, 105, 20, 0.2);

}

.captain-entry:last-child { border-bottom: none; }

.route-list {

  list-style: none;

  padding-left: 14px;

  margin: 6px 0 0 0;

}

.route-list li {

  font-size: 13px;

  color: var(--ink);

  padding: 3px 0;

}

.route-list li::before { content: "→ "; color: var(--arcane); }



.worldmap-controls {

  margin-top: 16px;

  display: flex;

  align-items: center;

  gap: 10px;

  flex-wrap: wrap;

}

.worldmap-controls .btn { padding: 6px 16px; }

.worldmap-controls .muted { font-size: 13px; }



/* Main story acts */

.main-story-acts {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

  margin-top: 12px;

}

@media (max-width: 768px) { .main-story-acts { grid-template-columns: 1fr; } }

.story-act {

  padding: 14px 16px;

  background: var(--bg-input);

  border-radius: var(--r-md);

  border-left: 3px solid var(--accent);

  animation: fadeInUp 0.4s ease-out both;

}

.story-act-title {

  color: var(--text-bright);

  font-family: "Space Grotesk", sans-serif; font-weight: 600;

  font-size: 15px;

  margin-bottom: 4px;

}

.story-act-towns {

  color: var(--text-dim);

  font-size: 12px;

  margin-bottom: 10px;

}

.story-quest-list { list-style: none; padding: 0; margin: 0; }

.story-quest-list li {

  font-size: 12px;

  padding: 4px 0;

  color: var(--ink);

  display: flex;

  align-items: baseline;

  gap: 6px;

}



/* Scrollbar styling */

.worldmap-container::-webkit-scrollbar,

.town-detail-panel::-webkit-scrollbar { width: 10px; height: 10px; }

.worldmap-container::-webkit-scrollbar-track,

.town-detail-panel::-webkit-scrollbar-track { background: var(--bg-panel); }

.worldmap-container::-webkit-scrollbar-thumb,

.town-detail-panel::-webkit-scrollbar-thumb {

  background: rgba(232, 193, 112, 0.35);

  border-radius: 5px;

}

.worldmap-container::-webkit-scrollbar-thumb:hover,

.town-detail-panel::-webkit-scrollbar-thumb:hover { background: var(--accent); }



/* Floor filter buttons */

.floor-filter {

  display: flex;

  gap: 4px;

  flex-wrap: wrap;

}

.wm-floor-btn {

  font-size: 11px;

  opacity: 0.5;

  transition: all 0.2s;

  min-width: 32px;

  text-align: center;

}

.wm-floor-btn.active {

  opacity: 1;

  background: var(--arcane);

  color: #fff;

  border-color: var(--arcane);

}

.wm-floor-btn:hover { opacity: 0.85; }



/* Floor badge on town name tags */

.floor-badge {

  display: inline-block;

  background: var(--arcane);

  color: #fff;

  font-size: 9px;

  font-weight: 700;

  padding: 1px 5px;

  border-radius: var(--r-pill);

  margin-left: 4px;

  vertical-align: middle;

}



/* Side quest grid */

.side-quest-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 12px;

  margin-top: 10px;

}

.side-quest-chain {

  padding: 10px 14px;

  background: var(--bg-input);

  border-radius: var(--r-md);

  border-left: 3px solid var(--border-gold);

}

.sqc-header {

  font-size: 13px;

  margin-bottom: 6px;

}

.sqc-header .muted { font-size: 11px; }

.side-quest-chain ul {

  list-style: none;

  padding: 0;

  margin: 0;

}

.side-quest-chain li {

  font-size: 12px;

  padding: 3px 0;

  color: var(--ink);

  display: flex;

  align-items: baseline;

  gap: 4px;

  flex-wrap: wrap;

}



/* ---------------------------------------------------------------

   Phase 7B: Items, Bestiary, Crafting, Bosses, Tasks, Events

   --------------------------------------------------------------- */



/* -- Pagination ---------------------------------------------- */

.pagination {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  margin: 20px 0;

}

.page-btn {

  padding: 6px 16px;

  background: var(--bg-panel);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: 1px solid var(--border-gold);

  border-radius: var(--r-sm);

  color: var(--accent-gold);

  text-decoration: none;

  font-size: 13px;

  font-weight: 500;

  transition: background 0.2s;

}

.page-btn:hover { background: rgba(232, 193, 112, 0.12); }

.page-info { font-size: 13px; color: var(--text-dim); }



/* -- Crafting cards ------------------------------------------ */

.craft-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));

  gap: 16px;

  margin: 20px 0;

}

.craft-card {

  background: var(--bg-panel);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-md);

  overflow: hidden;

  transition: border-color 0.2s, transform 0.2s;

}

.craft-card:hover { border-color: var(--border-light); transform: translateY(-2px); }

.craft-card-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 12px 16px;

  background: rgba(232, 193, 112, 0.12);

  border-bottom: 1px solid var(--border);

}

.craft-name { font-weight: 600; color: var(--text-bright); font-size: 14px; font-family: "Space Grotesk", sans-serif; }

.craft-skill { font-size: 12px; color: var(--text-dim); }

.craft-card-body { padding: 14px 16px; }

.craft-result, .craft-station { margin-bottom: 8px; font-size: 13px; }

.craft-label { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-family: "Space Grotesk", sans-serif; }

.craft-item-name { color: var(--text); font-weight: 600; }

.craft-materials ul { list-style: none; padding: 0; margin: 6px 0; }

.craft-materials li { font-size: 12px; color: var(--text); padding: 2px 0 2px 14px; position: relative; }

.craft-materials li::before { content: "•"; position: absolute; left: 0; color: var(--accent); font-size: 10px; top: 3px; }

.craft-xp { font-size: 12px; color: var(--green); margin-top: 8px; font-weight: 500; }



/* -- Boss cards ---------------------------------------------- */

.boss-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));

  gap: 16px;

  margin: 20px 0;

}

.boss-card {

  background: var(--bg-panel);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-md);

  overflow: hidden;

  transition: border-color 0.2s, transform 0.2s;

  position: relative;

}

.boss-card:hover { border-color: rgba(248, 113, 113, 0.3); transform: translateY(-2px); }

.boss-card-header {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 14px 16px;

  background: rgba(248, 113, 113, 0.06);

  border-bottom: 1px solid var(--border);

}

.boss-sprite {

  width: 52px; height: 52px;

  display: flex; align-items: center; justify-content: center;

  background: var(--bg-input);

  border: 1px solid var(--border);

  border-radius: var(--r-sm);

  flex-shrink: 0;

}

.boss-name { font-weight: 700; color: var(--red); font-size: 15px; font-family: "Space Grotesk", sans-serif; }

.boss-location { font-size: 12px; color: var(--text-dim); }

.boss-card-body { padding: 14px 16px; }

.boss-stats { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; margin-bottom: 10px; }

.boss-desc { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; line-height: 1.6; }

.boss-loot ul { list-style: none; padding: 0; margin: 6px 0; }

.boss-loot li { font-size: 12px; padding: 2px 0 2px 14px; position: relative; }

.boss-loot li::before { content: "•"; position: absolute; left: 0; color: var(--accent-gold); font-size: 10px; top: 3px; }



/* -- Events page --------------------------------------------- */

.event-active-banner {

  display: flex;

  align-items: center;

  gap: 10px;

  flex-wrap: wrap;

  padding: 14px 20px;

  background: rgba(255, 200, 0, 0.06);

  border: 1px solid rgba(255, 200, 0, 0.15);

  border-radius: var(--r-md);

  margin: 16px 0;

}

.event-badge-active {

  font-size: 12px;

  color: #fbbf24;

  background: rgba(255, 200, 0, 0.1);

  padding: 3px 12px;

  border-radius: var(--r-pill);

  font-weight: 600;

}



/* C4: Season info bar */

.season-info-bar {

  display: flex;

  gap: 24px;

  align-items: center;

  padding: 12px 20px;

  background: var(--bg-panel);

  border: 1px solid var(--border-dim);

  border-radius: var(--r-md);

  margin: 16px 0;

}

.season-info-item {

  display: flex;

  flex-direction: column;

  gap: 2px;

}

.season-info-label {

  font-size: 10px;

  color: var(--muted);

  text-transform: uppercase;

  letter-spacing: 0.5px;

}

.season-info-val {

  font-size: 14px;

  font-weight: 600;

  color: var(--accent-gold);

}

.season-info-link {

  font-size: 13px;

  color: var(--accent);

  text-decoration: none;

}

.season-info-link:hover { text-decoration: underline; }

.events-section { margin: 24px 0; }

.events-section h2 { font-size: 18px; color: var(--text-bright); border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 14px; font-family: "Space Grotesk", sans-serif; }



.boosted-row { display: flex; gap: 14px; flex-wrap: wrap; }

.boosted-card {

  flex: 1;

  min-width: 220px;

  padding: 16px 20px;

  background: var(--bg-panel);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: 1px solid var(--border-gold);

  border-radius: var(--r-md);

  text-align: center;

}

.boosted-card-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; font-family: "Space Grotesk", sans-serif; font-weight: 600; }

.boosted-card-name { font-size: 16px; font-weight: 600; color: var(--accent-gold); margin: 6px 0; font-family: "Space Grotesk", sans-serif; }

.boosted-card-bonus { font-size: 12px; color: var(--green); font-weight: 500; }



.event-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

  gap: 14px;

}

.event-card {

  padding: 16px 20px;

  background: var(--bg-panel);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-left: 3px solid var(--accent);

  border-radius: var(--r-md);

  transition: border-color 0.2s, transform 0.2s;

}

.event-card:hover { border-left-color: var(--accent-gold); transform: translateY(-2px); }

.event-card-header { font-weight: 600; font-size: 14px; margin-bottom: 8px; color: var(--text-bright); font-family: "Space Grotesk", sans-serif; }

.event-card-desc { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin-bottom: 10px; }

.event-card-mults { display: flex; gap: 8px; flex-wrap: wrap; }

.event-card-mults span { font-size: 11px; color: #fbbf24; background: rgba(255, 200, 0, 0.08); padding: 2px 8px; border-radius: var(--r-pill); font-weight: 500; }



/* Raid calendar grid */

.raid-calendar { margin-bottom: 20px; }

.raid-calendar h3 { font-size: 14px; color: var(--text-dim); margin: 0 0 10px; font-family: "Space Grotesk", sans-serif; }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }

.calendar-day {

  background: var(--bg-panel);

  border: 1px solid var(--border);

  border-radius: var(--r-sm);

  min-height: 90px;

  display: flex; flex-direction: column;

}

.calendar-today { border-color: var(--accent); box-shadow: 0 0 12px rgba(232, 193, 112, 0.2); }

.calendar-day-header {

  display: flex; justify-content: space-between;

  padding: 6px 10px;

  border-bottom: 1px solid var(--border);

  font-size: 11px;

}

.calendar-weekday { font-weight: 700; color: var(--accent-gold); font-family: "Space Grotesk", sans-serif; }

.calendar-date { color: var(--text-dim); }

.calendar-day-body { padding: 6px 8px; flex: 1; overflow-y: auto; }

.calendar-raid {

  font-size: 10px; padding: 3px 6px; margin-bottom: 3px;

  background: rgba(232, 193, 112, 0.12); border-radius: var(--r-sm);

  display: flex; gap: 4px; align-items: baseline;

}

.calendar-raid-time { color: var(--accent-gold); font-weight: 600; white-space: nowrap; }

.calendar-raid-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.calendar-empty { font-size: 10px; color: var(--text-dim); }

@media (max-width: 768px) {

  .calendar-grid { grid-template-columns: repeat(2, 1fr); }

}



/* -- Badge tiers for tasks ----------------------------------- */

.badge-low { background: rgba(74, 222, 128, 0.12); color: #86efac; border: 1px solid rgba(74, 222, 128, 0.3); }

.badge-mid { background: rgba(251, 191, 36, 0.12); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3); }

.badge-high { background: rgba(248, 113, 113, 0.12); color: #fca5a5; border: 1px solid rgba(248, 113, 113, 0.3); }



/* -- Character profile enrichment ----------------------------- */

.equipment-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

  gap: 10px;

  margin: 16px 0;

}

.equipment-slot {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 14px;

  background: var(--bg-panel-alt);

  border: var(--glass-border);

  border-radius: var(--r-sm);

}

.equipment-slot img { flex-shrink: 0; }

.equipment-slot-info { min-width: 0; }

.equipment-slot-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; font-family: "Space Grotesk", sans-serif; }

.equipment-slot-name { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }



.badge-hostile { background: rgba(248, 113, 113, 0.12); color: #fca5a5; border: 1px solid rgba(248, 113, 113, 0.3); }

.badge-unfriendly { background: rgba(251, 146, 60, 0.12); color: #fdba74; border: 1px solid rgba(251, 146, 60, 0.3); }

.badge-neutral { background: rgba(156, 163, 175, 0.12); color: #d1d5db; border: 1px solid rgba(156, 163, 175, 0.3); }

.badge-friendly { background: rgba(74, 222, 128, 0.12); color: #86efac; border: 1px solid rgba(74, 222, 128, 0.3); }

.badge-honored { background: rgba(56, 189, 248, 0.12); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, 0.3); }

.badge-exalted { background: rgba(232, 193, 112, 0.15); color: var(--accent-gold); border: 1px solid rgba(232, 193, 112, 0.35); }



.achievement-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }

.achievement-badge {

  font-size: 12px;

  padding: 4px 12px;

  background: rgba(232, 193, 112, 0.15);

  border: 1px solid var(--border-gold);

  border-radius: var(--r-pill);

  color: var(--accent-gold);

  font-weight: 500;

}



/* C2: Achievement showcase */

.achievement-showcase {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  gap: 10px;

  margin: 16px 0;

}

.achievement-card {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 14px;

  background: rgba(232, 193, 112, 0.08);

  border: 1px solid rgba(232, 193, 112, 0.2);

  border-radius: var(--r-md);

  transition: all 0.2s;

}

.achievement-card:hover {

  background: rgba(232, 193, 112, 0.15);

  border-color: var(--accent);

}

.achievement-icon {

  font-size: 24px;

  color: var(--accent-gold);

  text-shadow: 0 0 8px rgba(232, 193, 112, 0.3);

}

.achievement-name {

  font-size: 13px;

  color: var(--text);

  font-weight: 500;

}



/* C2: Combat summary stat cards */

.combat-summary {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 12px;

  margin: 16px 0;

}

.cs-stat-card {

  text-align: center;

  padding: 16px 8px;

  background: var(--bg-panel);

  border: 1px solid var(--border-dim);

  border-radius: var(--r-md);

}

.cs-stat-icon {

  font-size: 24px;

  margin-bottom: 6px;

}

.cs-stat-val {

  font-size: 22px;

  font-weight: 700;

  color: var(--accent-gold);

}

.cs-stat-label {

  font-size: 11px;

  color: var(--muted);

  margin-top: 2px;

}



/* -- Global search ------------------------------------------- */

.header-search {

  display: inline-block;

  margin-left: 16px;

}

.header-search input {

  padding: 6px 14px;

  font-size: 13px;

  background: var(--bg-input);

  border: 1px solid var(--border);

  border-radius: var(--r-pill);

  color: var(--text);

  width: 200px;

  outline: none;

  font-family: "Inter", sans-serif;

  transition: border-color 0.2s, box-shadow 0.2s;

}

.header-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232, 193, 112, 0.18); }



.search-results-list {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin: 16px 0;

}

.search-result-item {

  display: inline-block;

  padding: 6px 14px;

  background: var(--bg-panel);

  border: var(--glass-border);

  border-radius: var(--r-sm);

  color: var(--text);

  text-decoration: none;

  font-size: 13px;

  font-weight: 500;

  transition: border-color 0.2s, color 0.2s;

}

.search-result-item:hover { border-color: var(--border-gold); color: var(--accent-gold); }



/* -- News enrichment ----------------------------------------- */

.news-category {

  display: inline-block;

  padding: 2px 10px;

  background: rgba(232, 193, 112, 0.15);

  border: 1px solid var(--border-gold);

  border-radius: var(--r-pill);

  font-size: 10px;

  color: var(--accent-gold);

  text-transform: uppercase;

  letter-spacing: 0.5px;

  font-family: "Space Grotesk", sans-serif;

  font-weight: 600;

}

.news-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.news-tag {

  font-size: 11px;

  padding: 2px 8px;

  background: var(--bg-panel);

  border: 1px solid var(--border-gold);

  border-radius: var(--r-sm);

  color: var(--accent-gold);

}

.related-articles { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }

.related-articles h4 { color: var(--text-bright); margin: 0 0 10px; font-size: 15px; font-family: "Space Grotesk", sans-serif; }

.related-list { list-style: none; padding: 0; margin: 0; }

.related-list li { padding: 5px 0; }

.related-list a { color: var(--text); }

.related-list a:hover { color: var(--accent-gold); }



/* ============================================================

   State of the Realm (Server Info) page

   ============================================================ */

.realm-section { margin: 32px 0; }

.realm-section h2 {

  font-family: "Space Grotesk", sans-serif;

  font-size: 22px; font-weight: 700;

  color: var(--text-bright);

  border-bottom: 1px solid var(--border);

  padding-bottom: 12px;

  margin-bottom: 20px;

  letter-spacing: -0.3px;

}

.realm-section h3 {

  font-family: "Space Grotesk", sans-serif;

  font-size: 17px; font-weight: 600;

  color: var(--text);

  margin: 24px 0 12px;

}



/* World cards */

.world-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

.world-card {

  background: var(--bg-panel);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-md);

  padding: 18px;

  transition: border-color 0.2s, transform 0.2s;

}

.world-card:hover { border-color: var(--border-light); transform: translateY(-2px); }

.world-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.world-name { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 16px; color: var(--text-bright); }

.world-type-badge {

  margin-left: auto;

  font-size: 10px; font-weight: 700;

  padding: 3px 10px;

  border-radius: var(--r-pill);

  letter-spacing: 0.5px;

  font-family: "Space Grotesk", sans-serif;

}

.world-type-pvp { background: rgba(248, 113, 113, 0.12); color: #fca5a5; border: 1px solid rgba(248, 113, 113, 0.3); }

.world-type-no-pvp { background: rgba(56, 189, 248, 0.12); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, 0.3); }

.world-type-pvp-enforced { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); }

.world-desc { font-size: 14px; color: var(--text); line-height: 1.6; margin: 8px 0 12px; }

.world-card-footer { font-size: 13px; border-top: 1px solid var(--border); padding-top: 10px; }



/* Day/night cycle */

.cycle-row { display: flex; gap: 16px; flex-wrap: wrap; }

.cycle-card {

  display: flex;

  align-items: center;

  gap: 16px;

  background: var(--bg-panel);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-md);

  padding: 18px 24px;

  min-width: 220px;

}

.cycle-icon { font-size: 40px; line-height: 1; }

.cycle-day .cycle-icon { color: #fbbf24; filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.4)); }

.cycle-night .cycle-icon { color: var(--arcane); filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.4)); }

.cycle-sunset .cycle-icon { color: #f97316; filter: drop-shadow(0 0 12px rgba(249, 115, 22, 0.4)); }

.cycle-sunrise .cycle-icon { color: #fb923c; filter: drop-shadow(0 0 12px rgba(251, 146, 60, 0.4)); }

.cycle-state { font-family: "Space Grotesk", sans-serif; font-size: 17px; color: var(--text-bright); font-weight: 600; }

.cycle-time { font-size: 14px; color: var(--text); }



/* Boosted cards */

.boosted-sprite {

  image-rendering: pixelated;

  display: block;

  margin: 10px auto;

  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));

}



/* Rates table */

.rates-table { max-width: 420px; }

.rates-table td { padding: 10px 16px; }

.rate-boost {

  font-size: 11px; font-weight: 700;

  color: #fbbf24;

  background: rgba(255, 200, 0, 0.1);

  padding: 2px 8px;

  border-radius: var(--r-pill);

  margin-left: 6px;

}



/* ── Paper-doll equipment layout ────── */

.paper-doll {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  grid-template-areas:

    ".       helmet  ."

    "amulet  armor   backpack"

    "ring    legs    right-hand"

    ".       boots   left-hand"

    ".       ammo    .";

  gap: 8px;

  max-width: 440px;

  margin: 16px 0;

}

.pd-slot {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 4px;

  min-height: 70px;

  padding: 8px 6px;

  background: var(--bg-panel-alt);

  border: var(--glass-border);

  border-radius: var(--r-sm);

  text-align: center;

}

.pd-slot img {

  width: 36px;

  height: 36px;

  image-rendering: pixelated;

  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));

}

.pd-name {

  font-size: 10px;

  color: var(--text);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  max-width: 100%;

}

.pd-empty {

  font-size: 10px;

  color: var(--text-dim);

  text-transform: uppercase;

  letter-spacing: 0.5px;

  font-family: "Space Grotesk", sans-serif;

}

.pd-helmet    { grid-area: helmet; }

.pd-amulet    { grid-area: amulet; }

.pd-armor     { grid-area: armor; }

.pd-backpack  { grid-area: backpack; }

.pd-ring      { grid-area: ring; }

.pd-legs      { grid-area: legs; }

.pd-right-hand { grid-area: right-hand; }

.pd-boots     { grid-area: boots; }

.pd-left-hand { grid-area: left-hand; }

.pd-ammo      { grid-area: ammo; }



/* ── Faction reputation bars ────── */

.faction-rep-list {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));

  gap: 12px;

  margin: 16px 0;

}

.faction-rep-card {

  background: var(--bg-panel-alt);

  border: var(--glass-border);

  border-radius: var(--r-sm);

  padding: 12px 14px;

}

.faction-rep-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 8px;

}

.faction-rep-name {

  font-size: 14px;

  color: var(--text-bright);

  font-weight: 600;

  font-family: "Space Grotesk", sans-serif;

}

.rep-bar {

  height: 8px;

  background: var(--bg-input);

  border-radius: 4px;

  overflow: hidden;

  margin-bottom: 6px;

}

.rep-bar-fill {

  height: 100%;

  border-radius: 4px;

  transition: width 0.4s ease;

}

.faction-rep-footer {

  display: flex;

  justify-content: space-between;

  font-size: 11px;

}



/* ── Highscores: period filter + rank change ────── */

.period-filter {

  display: flex;

  gap: 6px;

  margin: 12px 0;

}

.period-filter .period-btn {

  font-size: 12px;

  padding: 5px 14px;

  border-radius: var(--r-pill);

  border: 1px solid var(--border);

  background: var(--bg-panel-alt);

  color: var(--text-dim);

  cursor: not-allowed;

  font-weight: 500;

  text-decoration: none;

}

.period-filter .period-btn.active {

  background: rgba(232, 193, 112, 0.15);

  border-color: var(--accent);

  color: var(--accent-gold);

  cursor: default;

}

.rank-change {

  font-size: 11px;

  font-weight: 700;

}

.rank-up { color: var(--green); }

.rank-down { color: var(--red); }

.rank-same { color: var(--text-dim); }

.rank-new { color: var(--accent-gold); font-size: 10px; }

.period-btn:hover { border-color: var(--accent); color: var(--accent-gold); }

.period-btn.active:hover { color: var(--accent-gold); }



/* Phase 14: Hardcore highscores visual distinction */

.hardcore-name { color: #c44; font-weight: 600; }

.hardcore-tag { color: #c44; font-size: 10px; font-weight: 700; margin-left: 4px; }



/* Vocations */

.vocation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }

.vocation-card {

  background: var(--bg-panel);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-left: 3px solid var(--accent);

  border-radius: var(--r-md);

  padding: 16px 18px;

}

.vocation-name { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 15px; color: var(--text-bright); margin-bottom: 8px; }

.vocation-stats { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; }

.vocation-promo { margin-top: 8px; font-size: 12px; color: var(--accent); }



/* Census */

.census-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 28px; }

.census-card {

  display: flex;

  flex-direction: column;

  align-items: center;

  background: var(--bg-panel);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: 1px solid var(--border-gold);

  border-radius: var(--r-md);

  padding: 22px 14px;

}

.census-num { font-family: "Space Grotesk", sans-serif; font-size: 32px; font-weight: 700; color: var(--text-bright); background: var(--grad-aurora); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.census-label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-top: 6px; font-family: "Space Grotesk", sans-serif; }



.census-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }

.census-detail {

  display: flex;

  flex-direction: column;

  align-items: center;

  background: var(--bg-panel);

  border: var(--glass-border);

  border-radius: var(--r-sm);

  padding: 12px 10px;

}

.census-detail-num { font-family: "Space Grotesk", sans-serif; font-size: 20px; font-weight: 600; color: var(--text); }

.census-detail-label { font-size: 11px; color: var(--text-dim); margin-top: 4px; }



/* Medieval button → modern gradient button */

.btn-medieval {

  display: inline-block;

  padding: 10px 24px;

  background: var(--grad-purple);

  border: none;

  border-radius: var(--r-sm);

  color: #fff !important;

  font-family: "Space Grotesk", sans-serif;

  font-size: 14px; font-weight: 600;

  text-decoration: none;

  transition: all 0.2s;

}

.btn-medieval:hover {

  filter: brightness(1.15);

  box-shadow: 0 4px 20px rgba(139, 105, 20, 0.4);

  transform: translateY(-1px);

}



/* ============================================================

   Live Activity Ticker

   ============================================================ */

.activity-ticker {

  position: fixed;

  bottom: 0; left: 0; right: 0;

  height: 36px;

  background: var(--bg-panel-alt);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border-top: 1px solid var(--border);

  display: flex;

  align-items: center;

  z-index: 100;

  overflow: hidden;

}

.activity-ticker-label {

  padding: 0 16px;

  font-family: "Space Grotesk", sans-serif;

  font-size: 12px; font-weight: 700;

  color: var(--accent-gold);

  border-right: 1px solid var(--border);

  white-space: nowrap;

  flex-shrink: 0;

  display: flex; align-items: center; gap: 6px;

}

.activity-ticker-scroll {

  flex: 1;

  overflow: hidden;

  white-space: nowrap;

  padding-left: 14px;

  display: flex;

  align-items: center;

  gap: 0;

}

.activity-ticker-item {

  font-size: 12px;

  color: var(--text);

  white-space: nowrap;

  font-weight: 500;

}

.activity-ticker-item strong { color: var(--text-bright); }

.activity-ticker-icon { color: var(--accent); margin-right: 4px; }

.activity-ticker-time { color: var(--text-dim); font-size: 10px; margin-left: 4px; }

.activity-ticker-sep { color: var(--border-light); margin: 0 12px; }



/* ============================================================

   Command Palette (Ctrl+K)

   ============================================================ */

.cmd-palette-overlay {

  position: fixed;

  top: 0; left: 0; right: 0; bottom: 0;

  background: rgba(0, 0, 0, 0.6);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  display: flex;

  align-items: flex-start;

  justify-content: center;

  z-index: 1000;

  padding-top: 120px;

}

.cmd-palette-box {

  width: 90%;

  max-width: 600px;

  background: var(--bg-panel-alt);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-lg);

  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 32px rgba(232, 193, 112, 0.18);

  overflow: hidden;

}

.cmd-palette-input {

  width: 100%;

  padding: 18px 24px;

  background: transparent;

  border: none;

  border-bottom: 1px solid var(--border);

  color: var(--text-bright);

  font: inherit;

  font-family: "Inter", sans-serif;

  font-size: 16px;

  outline: none;

  box-sizing: border-box;

}

.cmd-palette-input:focus { border-bottom-color: var(--accent); }

.cmd-palette-input::placeholder { color: var(--text-dim); }

.cmd-palette-results { max-height: 400px; overflow-y: auto; }

.cmd-palette-item {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 12px 24px;

  color: var(--text);

  text-decoration: none;

  font-size: 14px;

  font-weight: 500;

  transition: background 0.1s;

}

.cmd-palette-item:hover, .cmd-palette-item.selected {

  background: rgba(232, 193, 112, 0.12);

  color: var(--text-bright);

}

.cmd-palette-item-icon { font-size: 18px; width: 24px; text-align: center; }

.cmd-palette-item-name { font-family: "Inter", sans-serif; }

.cmd-palette-empty {

  padding: 24px;

  text-align: center;

  color: var(--text-dim);

  font-size: 14px;

}



/* Body bottom padding so ticker doesn't cover content */

body { padding-bottom: 36px; }



/* ============================================================

   Page Transition Fade

   ============================================================ */

.page-fade-in {

  animation: pageFadeIn 0.3s ease-out;

}

@keyframes pageFadeIn {

  from { opacity: 0; transform: translateY(4px); }

  to { opacity: 1; transform: translateY(0); }

}



/* ============================================================

   Sticky Table Headers

   ============================================================ */

table.list thead th {

  position: sticky;

  top: 0;

  z-index: 10;

  background: var(--bg-panel-alt);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border-bottom: 2px solid var(--accent);

}



/* ============================================================

   Scroll-Triggered Reveal

   ============================================================ */

.reveal-hidden {

  opacity: 0;

  transform: translateY(24px);

}

.reveal-hidden.revealed {

  animation: revealFade 0.6s ease-out forwards;

}

@keyframes revealFade {

  to { opacity: 1; transform: translateY(0); }

}



/* ============================================================

   Boosted Sidebar Widget

   ============================================================ */

.boosted-sidebox { display: flex; flex-direction: column; gap: 12px; }

.boosted-side { display: flex; align-items: center; gap: 12px; }

.boosted-side-sprite {

  image-rendering: pixelated;

  background: var(--bg-input);

  border: 1px solid var(--border);

  border-radius: var(--r-sm);

  flex-shrink: 0;

}



/* ============================================================

   Recent Deaths Feed

   ============================================================ */

.deaths-feed { display: flex; flex-direction: column; gap: 8px; }

.death-entry {

  font-size: 13px;

  padding: 6px 0;

  border-bottom: 1px solid rgba(139, 105, 20, 0.2);

}

.death-entry:last-child { border-bottom: none; }

.death-entry a { font-weight: 600; }

.death-entry .muted { display: block; font-size: 11px; }



/* ============================================================

   Notification Bell

   ============================================================ */

.notif-bell {

  display: inline-block;

  cursor: pointer;

  position: relative;

  font-size: 16px;

  margin-left: 6px;

}

.notif-badge {

  position: absolute;

  top: -6px; right: -8px;

  background: var(--red);

  color: #fff;

  font-size: 9px; font-weight: 700;

  border-radius: var(--r-pill);

  padding: 2px 6px;

  min-width: 16px;

  text-align: center;

}

.notif-panel {

  width: 340px;

  background: var(--bg-panel-alt);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-md);

  box-shadow: var(--glass-shadow-lg);

  z-index: 1100;

}

.notif-panel-header {

  padding: 14px 18px;

  font-family: "Space Grotesk", sans-serif;

  font-size: 15px; font-weight: 600;

  color: var(--text-bright);

  border-bottom: 1px solid var(--border);

}

.notif-panel-body { max-height: 320px; overflow-y: auto; }

.notif-empty {

  padding: 24px;

  text-align: center;

  color: var(--text-dim);

  font-size: 14px;

}

.notif-loading { padding: 16px; text-align: center; color: var(--text-dim); font-size: 13px; }

.notif-item {

  padding: 12px 18px;

  border-bottom: 1px solid var(--border);

  transition: background 0.15s;

}

.notif-item:hover { background: rgba(232, 193, 112, 0.08); }

.notif-item a { text-decoration: none; color: inherit; display: block; }

.notif-item-title { font-weight: 600; font-size: 13px; color: var(--text-bright); }

.notif-item-body { font-size: 12px; color: var(--text); margin-top: 2px; }

.notif-item-time { font-size: 10px; color: var(--text-dim); margin-top: 4px; }

.notif-read { opacity: 0.6; }



/* ============================================================

   Hover Preview Cards

   ============================================================ */

.hover-preview-card {

  width: 340px;

  background: var(--bg-panel-alt);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-md);

  box-shadow: var(--glass-shadow-lg), 0 0 16px rgba(232, 193, 112, 0.12);

  z-index: 900;

  display: flex;

  gap: 14px;

  padding: 14px;

  pointer-events: none;

  animation: previewFadeIn 0.15s ease-out;

}

@keyframes previewFadeIn {

  from { opacity: 0; transform: scale(0.95); }

  to { opacity: 1; transform: scale(1); }

}

/* Pinned (click-to-keep-open) state: interactive, scrollable, highlighted */

.hover-preview-card.pinned {

  pointer-events: auto;

  border-color: var(--border-gold);

  box-shadow: var(--glass-shadow-lg), 0 0 24px rgba(232, 193, 112, 0.25);

  cursor: default;

}

.monster-row.pinned {

  background: rgba(232, 193, 112, 0.12) !important;

  outline: 1px solid rgba(232, 193, 112, 0.4);

}

.hover-preview-sprite {

  width: 64px; height: 64px;

  background: var(--bg-input);

  border: 1px solid var(--border);

  border-radius: var(--r-sm);

  display: flex; align-items: center; justify-content: center;

  flex-shrink: 0;

}

.hover-preview-info { flex: 1; min-width: 0; }

.hover-preview-name {

  font-family: "Space Grotesk", sans-serif;

  font-size: 15px; font-weight: 600;

  color: var(--text-bright);

  margin-bottom: 2px;

}

.hover-preview-race {

  font-size: 12px;

  color: var(--text-dim);

  text-transform: capitalize;

  margin-bottom: 10px;

}

.hover-preview-stats {

  display: flex;

  flex-wrap: wrap;

  gap: 8px 14px;

}

.hover-preview-stats span {

  font-size: 13px;

  color: var(--text);

}

.hover-preview-stats small {

  color: var(--text-dim);

  font-size: 10px;

  display: block;

}



/* ═══ Feature 1: Outfit Preview (character page) ═══ */

.outfit-preview-box {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

}

.outfit-direction-buttons {

  display: flex;

  gap: 6px;

}

.dir-btn {

  background: var(--bg-input);

  border: 1px solid var(--border);

  color: var(--text-dim);

  width: 32px; height: 28px;

  border-radius: var(--r-sm);

  cursor: pointer;

  font-size: 11px;

  display: flex; align-items: center; justify-content: center;

  padding: 0;

  transition: border-color 0.2s, color 0.2s;

}

.dir-btn:hover { border-color: var(--border-light); color: var(--text); }

.dir-btn.active { border-color: var(--accent); color: var(--accent-gold); background: rgba(232, 193, 112, 0.12); }

.outfit-walk-toggle {

  display: flex; align-items: center; gap: 6px;

  font-size: 12px; color: var(--text-dim);

  cursor: pointer;

}

.outfit-walk-toggle input { margin: 0; }

.outfit-walk-bg {

  width: 96px; height: 96px;

  background-repeat: no-repeat;

  background-position: 0 0;

  image-rendering: pixelated;

  background-color: var(--bg-input);

  border: 1px solid var(--border-gold);

  border-radius: var(--r-md);

  object-fit: contain;

  box-shadow: 0 0 20px rgba(232, 193, 112, 0.18);

}



/* ═══ Feature 2: Marketplace ═══ */

.market-controls {

  display: flex;

  gap: 12px;

  align-items: center;

  margin-bottom: 20px;

  flex-wrap: wrap;

}

.market-search-form { display: flex; gap: 8px; }

.market-search-input {

  background: var(--bg-input);

  border: 1px solid var(--border);

  color: var(--text);

  padding: 8px 14px;

  border-radius: var(--r-sm);

  width: 240px;

  font-family: "Inter", sans-serif;

}

.market-search-input:focus { outline: none; border-color: var(--accent); }

.market-search-btn {

  background: var(--grad-purple);

  border: none;

  color: #fff;

  padding: 8px 18px;

  border-radius: var(--r-sm);

  cursor: pointer;

  font-size: 13px;

  font-weight: 600;

  font-family: "Space Grotesk", sans-serif;

}

.market-search-btn:hover { filter: brightness(1.15); }

.market-sort-select {

  background: var(--bg-input);

  border: 1px solid var(--border);

  color: var(--text);

  padding: 8px 14px;

  border-radius: var(--r-sm);

  font-family: "Inter", sans-serif;

}

.market-table td img { display: block; margin: 0 auto; }

.offer-badge {

  font-size: 10px; font-weight: 600;

  padding: 3px 10px;

  border-radius: var(--r-pill);

  text-transform: uppercase;

  font-family: "Space Grotesk", sans-serif;

}

.offer-sell { background: rgba(74, 222, 128, 0.12); color: #86efac; border: 1px solid rgba(74, 222, 128, 0.3); }

.offer-buy { background: rgba(251, 191, 36, 0.12); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3); }



/* ═══ Feature 3: Deaths Feed ═══ */

.deaths-table td img { display: block; margin: 0 auto; }

.death-time { font-size: 12px; color: var(--text-dim); }



/* ═══ Feature 5: Boss Tracker enhancements ═══ */

.boss-status { margin-top: 6px; }

.boss-status-badge {

  font-size: 10px; font-weight: 600;

  padding: 3px 10px;

  border-radius: var(--r-pill);

  text-transform: uppercase;

  font-family: "Space Grotesk", sans-serif;

}

.boss-status-available { background: rgba(74, 222, 128, 0.12); color: #86efac; border: 1px solid rgba(74, 222, 128, 0.3); }

.boss-status-cooldown { background: rgba(251, 191, 36, 0.12); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3); }

.boss-last-kill { margin: 8px 0; padding: 6px 0; border-top: 1px solid var(--border); }

.boss-kill-time { color: var(--text-dim); }



/* ═══ Bestiary hover preview: hunting zones ═══ */

.hover-preview-zones { margin-top: 8px; }

.hover-preview-zones .muted { font-size: 10px; display: block; margin-bottom: 4px; }

.zone-tags { display: flex; flex-wrap: wrap; gap: 4px; }

.zone-tag {

  font-size: 10px;

  background: rgba(232, 193, 112, 0.12);

  border: 1px solid rgba(232, 193, 112, 0.35);

  color: var(--accent-gold);

  padding: 2px 8px;

  border-radius: var(--r-sm);

  white-space: nowrap;

  font-weight: 500;

}



/* ═══ Bestiary hover preview: loot box ═══ */

.hover-preview-loot {

  margin-top: 10px;

  border-top: 1px solid var(--border);

  padding-top: 8px;

}

.loot-heading {

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 1px;

  color: var(--accent-gold);

  font-weight: 600;

  display: block;

  margin-bottom: 6px;

}

.loot-list {

  display: flex;

  flex-direction: column;

  gap: 4px;

  max-height: 240px;

  overflow-y: auto;

  padding-right: 4px;

}

/* Scrollbar styling for loot list */

.loot-list::-webkit-scrollbar { width: 6px; }

.loot-list::-webkit-scrollbar-track { background: rgba(10,8,5,0.3); border-radius: 3px; }

.loot-list::-webkit-scrollbar-thumb { background: rgba(232,193,112,0.3); border-radius: 3px; }

.loot-list::-webkit-scrollbar-thumb:hover { background: rgba(232,193,112,0.5); }



/* ── Item comparison tool ────────────────────────────────────── */

.col-compare { width: 70px; text-align: center; }

.compare-cb { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent-gold); }

.compare-tray {

  position: fixed; bottom: 0; left: 0; right: 0;

  background: var(--bg-panel-alt);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border-top: 1px solid var(--border);

  z-index: 100;

  padding: 12px 24px 16px;

  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);

  animation: fadeInUp 0.3s ease-out;

}

.compare-tray-header {

  display: flex; align-items: center; justify-content: space-between;

  margin-bottom: 10px;

}

.compare-tray-title {

  font-family: "Space Grotesk", sans-serif; font-weight: 700;

  font-size: 14px; color: var(--accent-gold);

  text-transform: uppercase; letter-spacing: 2px;

}

.compare-tray-close {

  background: none; border: none; color: var(--text-dim);

  font-size: 24px; cursor: pointer; padding: 0 4px; line-height: 1;

}

.compare-tray-close:hover { color: var(--text-bright); }

.compare-grid {

  display: flex; gap: 12px; flex-wrap: wrap;

}

.compare-card {

  flex: 1 1 200px; min-width: 180px; max-width: 280px;

  background: var(--bg-panel);

  border: var(--glass-border);

  border-radius: var(--r-md);

  padding: 12px;

  box-shadow: var(--glass-shadow);

}

.compare-card-header {

  display: flex; align-items: center; gap: 8px;

  margin-bottom: 10px;

  padding-bottom: 8px;

  border-bottom: 1px solid var(--border);

}

.compare-card-name {

  flex: 1; font-weight: 600; font-size: 13px; color: var(--text-bright);

}

.compare-card-remove {

  background: none; border: none; color: var(--text-dim);

  font-size: 18px; cursor: pointer; padding: 0 2px; line-height: 1;

}

.compare-card-remove:hover { color: var(--danger, #e74c3c); }

.compare-card-stats {

  display: flex; flex-direction: column; gap: 4px;

}

.compare-stat {

  display: flex; justify-content: space-between; align-items: center;

  font-size: 12px; padding: 3px 0;

}

.compare-stat span { color: var(--text-dim); }

.compare-stat strong { color: var(--text-bright); font-weight: 600; }

@media (max-width: 768px) {

  .compare-tray { padding: 8px 12px 12px; }

  .compare-card { flex: 1 1 140px; min-width: 140px; }

}



/* ── Market sparkline ────────────────────────────────────────── */

.col-spark { width: 70px; text-align: center; }

.sparkline { display: inline-block; vertical-align: middle; }



/* ── Item detail page ────────────────────────────────────────── */

.item-detail {

  background: var(--bg-panel);

  border: var(--glass-border);

  border-radius: var(--r-md);

  padding: 20px;

  margin-bottom: 20px;

  box-shadow: var(--glass-shadow);

}

.item-detail-header {

  display: flex; gap: 20px; align-items: flex-start;

}

.item-detail-sprite {

  width: 64px; height: 64px;

  image-rendering: pixelated;

  flex-shrink: 0;

}

.item-detail-info h2 { margin: 0 0 4px 0; }

.item-detail-stats {

  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;

}

.stat-badge {

  display: inline-block;

  padding: 3px 10px;

  background: rgba(232, 193, 112, 0.12);

  border: 1px solid var(--border);

  border-radius: var(--r-sm);

  font-size: 12px; color: var(--text);

}

.rarity-badge {

  display: inline-block;

  padding: 2px 8px;

  border-radius: var(--r-sm);

  font-size: 11px; font-weight: 600;

  text-transform: capitalize;

}

.rarity-common { background: rgba(150, 150, 150, 0.2); color: #ccc; }

.rarity-uncommon { background: rgba(80, 200, 80, 0.2); color: #5cc55c; }

.rarity-rare { background: rgba(80, 150, 255, 0.2); color: #5c9cff; }

.rarity-very-rare { background: rgba(180, 80, 255, 0.2); color: #b45cff; }

.rarity-legendary { background: rgba(255, 180, 30, 0.2); color: #ffb41e; }

@media (max-width: 768px) {

  .item-detail-header { flex-direction: column; align-items: center; text-align: center; }

}



/* ── Activity feed ───────────────────────────────────────────── */

.activity-feed { display: flex; flex-direction: column; gap: 8px; }

.activity-item {

  display: flex; align-items: flex-start; gap: 12px;

  padding: 12px 16px;

  background: var(--bg-panel);

  border: var(--glass-border);

  border-radius: var(--r-sm);

  box-shadow: var(--glass-shadow);

  animation: fadeInUp 0.3s ease-out both;

}

.activity-item:nth-child(even) { animation-delay: 0.03s; }

.activity-icon {

  font-size: 20px; flex-shrink: 0;

  width: 32px; height: 32px;

  display: flex; align-items: center; justify-content: center;

  border-radius: var(--r-sm);

  background: rgba(232, 193, 112, 0.1);

}

.activity-level_up .activity-icon { background: rgba(80, 200, 80, 0.15); }

.activity-boss_kill .activity-icon { background: rgba(200, 50, 50, 0.15); }

.activity-rare_loot .activity-icon { background: rgba(255, 180, 30, 0.15); }

.activity-achievement .activity-icon { background: rgba(180, 80, 255, 0.15); }

.activity-content { flex: 1; }

.activity-player { font-weight: 600; color: var(--accent-gold); text-decoration: none; }

.activity-player:hover { text-decoration: underline; }

.activity-desc { color: var(--text); margin-left: 4px; }

.activity-time { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; }



/* ── News comments ───────────────────────────────────────────── */

.news-comments { margin-top: 24px; }

.news-comments h4 { color: var(--accent-gold); margin-bottom: 12px; }

.comment-list { display: flex; flex-direction: column; gap: 10px; }

.comment-item {

  padding: 12px 16px;

  background: var(--bg-panel);

  border: var(--glass-border);

  border-radius: var(--r-sm);

}

.comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }

.comment-author { font-weight: 600; color: var(--accent-gold); font-size: 13px; }

.comment-time { font-size: 11px; }

.comment-body { font-size: 14px; color: var(--text); white-space: pre-wrap; word-wrap: break-word; }

.comment-form { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }

.comment-form textarea {

  background: var(--bg-panel);

  border: var(--glass-border);

  border-radius: var(--r-sm);

  color: var(--text);

  padding: 10px 14px;

  font-family: inherit;

  font-size: 14px;

  resize: vertical;

}

.comment-form textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }



/* ── Guild recruitment board ─────────────────────────────────── */

.recruit-form-wrap { margin: 16px 0; }

.recruit-form-wrap summary { cursor: pointer; display: inline-block; }

.recruit-form-wrap[open] summary { margin-bottom: 12px; }

.recruit-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

.recruit-card {

  padding: 16px 20px;

  background: var(--bg-panel);

  border: var(--glass-border);

  border-radius: var(--r-md);

  box-shadow: var(--glass-shadow);

}

.recruit-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

.recruit-card-header h3 { margin: 0; color: var(--accent-gold); }

.recruit-description { color: var(--text); margin: 8px 0; }

.recruit-looking, .recruit-contact { font-size: 13px; margin: 4px 0; }

.recruit-looking strong, .recruit-contact strong { color: var(--accent-gold); }

.recruit-updated { font-size: 11px; margin-top: 8px; }

.loot-entry {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 4px 6px;

  border-radius: var(--r-sm);

  background: var(--bg-input);

  border-left: 3px solid var(--text-dim);

  transition: background 0.15s;

}

.loot-entry:hover { background: rgba(232, 193, 112, 0.08); }

.loot-entry-sprite {

  width: 28px; height: 28px;

  flex-shrink: 0;

  background: var(--bg-input);

  border-radius: 4px;

  display: flex; align-items: center; justify-content: center;

  overflow: hidden;

}

.loot-entry-sprite img {

  width: 24px; height: 24px;

  image-rendering: pixelated;

}

.loot-entry-sprite.no-sprite { background: var(--bg-input); }

.loot-no-sprite {

  color: var(--text-dim);

  font-size: 12px;

  font-weight: 700;

}

.loot-entry-info { flex: 1; min-width: 0; }

.loot-entry-name {

  font-size: 11px;

  color: var(--text);

  font-weight: 500;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.loot-entry-meta {

  display: flex;

  gap: 8px;

  font-size: 10px;

  color: var(--text-dim);

}

.loot-entry-id { font-family: "Space Grotesk", monospace; opacity: 0.7; }

.loot-entry-chance { font-weight: 600; }

.loot-entry-qty { color: var(--accent-gold); }



/* Rarity border colors — lower chance = rarer = more vivid */

.loot-entry.rarity-common      { border-left-color: #9a8a68; }

.loot-entry.rarity-uncommon    { border-left-color: #7fae5e; }

.loot-entry.rarity-rare        { border-left-color: #6a8fc4; }

.loot-entry.rarity-very-rare   { border-left-color: #c8a0d0; }

.loot-entry.rarity-legendary   { border-left-color: #f5d98a; box-shadow: inset 0 0 8px rgba(245, 217, 138, 0.1); }



.loot-entry.rarity-uncommon  .loot-entry-chance { color: #7fae5e; }

.loot-entry.rarity-rare      .loot-entry-chance { color: #6a8fc4; }

.loot-entry.rarity-very-rare .loot-entry-chance { color: #c8a0d0; }

.loot-entry.rarity-legendary .loot-entry-chance { color: #f5d98a; }



/* ============================================================

   Language Switcher

   ============================================================ */

.lang-switch {

  display: inline-flex;

  gap: 2px;

  background: var(--bg-input);

  border: 1px solid var(--border);

  border-radius: var(--r-pill);

  padding: 2px;

}

.lang-link {

  padding: 2px 10px;

  font-size: 11px;

  font-weight: 600;

  font-family: "Space Grotesk", sans-serif;

  border-radius: var(--r-pill);

  color: var(--text-dim);

  text-decoration: none;

  transition: background 0.2s, color 0.2s;

}

.lang-link:hover { color: var(--text); }

.lang-link.active {

  background: var(--grad-purple);

  color: #1a1208;

}



/* ── Wiki ─────────────────────────────────────────────────────── */

.wiki-hub-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin:24px 0; }

.wiki-hub-card { display:block; padding:24px 20px; background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; text-decoration:none; color:var(--text); transition:border-color .2s,transform .2s; }

.wiki-hub-card:hover { border-color:var(--accent); transform:translateY(-2px); }

.wiki-hub-icon { font-size:2em; margin-bottom:8px; }

.wiki-hub-title { font-size:1.2em; font-weight:bold; color:var(--accent); margin-bottom:4px; }

.wiki-hub-count { font-size:.85em; color:var(--text-muted); margin-bottom:8px; }

.wiki-hub-desc { font-size:.9em; color:var(--text-muted); line-height:1.4; }

.wiki-search-box { margin:24px 0; }



.wiki-filter-bar { margin:16px 0; }

.wiki-filter-bar input, .wiki-filter-bar select { padding:6px 10px; background:var(--bg-input); border:1px solid var(--border); border-radius:4px; color:var(--text); font-size:13px; }



.wiki-breadcrumb { font-size:.85em; color:var(--text-muted); margin-bottom:12px; }

.wiki-breadcrumb a { color:var(--accent); }



.wiki-quest-chain { margin-bottom:24px; }

.wiki-quest-card { padding:12px 16px; background:var(--bg-panel); border:1px solid var(--border); border-radius:6px; margin-bottom:8px; }

.wiki-quest-card .quest-header { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

.wiki-quest-card .quest-name { font-weight:bold; color:var(--accent); text-decoration:none; }

.wiki-quest-card .quest-type-badge { font-size:.75em; padding:2px 8px; border-radius:10px; background:var(--bg-input); color:var(--text-muted); }

.wiki-quest-card .quest-story { margin:8px 0; font-size:.9em; line-height:1.5; }

.wiki-quest-card .quest-story-muted { margin:8px 0; font-size:.9em; color:var(--text-muted); }

.wiki-quest-card .quest-meta { display:flex; flex-wrap:wrap; gap:12px; font-size:.85em; color:var(--text-muted); }

.wiki-quest-card .quest-prereqs { margin-top:8px; font-size:.85em; }

.wiki-quest-card .prereq-link { color:var(--accent); }



.quest-flowchart { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:12px 0; padding:12px; background:var(--bg-input); border-radius:6px; overflow-x:auto; }

.flowchart-node { display:inline-block; padding:4px 10px; background:var(--bg-panel); border:1px solid var(--border); border-radius:4px; font-size:.8em; text-decoration:none; color:var(--text); white-space:nowrap; }

.flowchart-node:hover { border-color:var(--accent); color:var(--accent); }

.flowchart-arrow { color:var(--text-muted); font-size:.8em; }



.wiki-quest-detail, .wiki-monster-detail, .wiki-item-detail, .wiki-guide-detail { max-width:800px; }

.quest-info-grid, .monster-stats-grid, .item-stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin:16px 0; }

.info-item { padding:8px 12px; background:var(--bg-panel); border:1px solid var(--border); border-radius:6px; }

.info-label { display:block; font-size:.75em; color:var(--text-muted); text-transform:uppercase; }

.info-value { display:block; font-size:1em; font-weight:bold; margin-top:2px; }



.info-table { width:100%; border-collapse:collapse; margin:12px 0; }

.info-table th, .info-table td { padding:6px 12px; border-bottom:1px solid var(--border); text-align:left; }

.info-table th { color:var(--text-muted); font-size:.85em; }



.spoiler-block { margin:16px 0; border:1px solid var(--border); border-radius:6px; overflow:hidden; }

.spoiler-block summary { padding:10px 16px; background:var(--bg-panel); cursor:pointer; font-weight:bold; color:var(--accent); }

.spoiler-block summary:hover { background:var(--bg-input); }

.spoiler-content { padding:16px; }



.walkthrough-steps { margin:16px 0; padding-left:24px; }

.walkthrough-steps li { margin-bottom:8px; line-height:1.5; }



.reward-list { list-style:none; padding:0; }

.reward-list li { padding:6px 0; border-bottom:1px solid var(--border); }



.monster-header, .item-header { display:flex; align-items:center; gap:16px; margin-bottom:16px; }

.monster-description { font-style:italic; color:var(--text-muted); margin-bottom:16px; }



.immunity-badge { display:inline-block; padding:2px 8px; margin:2px; background:var(--bg-input); border:1px solid var(--border); border-radius:10px; font-size:.8em; }

.resist-positive { color:#4a4; }

.resist-negative { color:#a44; }



.zone-monster-link { display:inline-block; padding:2px 8px; margin:2px; background:var(--bg-panel); border:1px solid var(--border); border-radius:4px; font-size:.85em; text-decoration:none; color:var(--text); }

.zone-monster-link:hover { border-color:var(--accent); color:var(--accent); }



.wiki-zones-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin:16px 0; }

.wiki-zone-card { padding:16px 20px; background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; }

.zone-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }

.zone-header h2 { margin:0; font-size:1.1em; }

.zone-level-badge { font-size:.8em; padding:2px 8px; background:var(--grad-purple); color:#1a1208; border-radius:10px; }

.zone-stats { display:flex; gap:16px; font-size:.85em; margin-bottom:8px; }

.zone-monsters { display:flex; flex-wrap:wrap; gap:4px; }



.wiki-guides-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin:16px 0; }

.wiki-guide-card { display:block; padding:16px 20px; background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; text-decoration:none; color:var(--text); }

.wiki-guide-card:hover { border-color:var(--accent); }

.wiki-guide-card h2 { margin:8px 0; font-size:1.1em; color:var(--accent); }

.guide-category-badge { display:inline-block; padding:2px 8px; background:var(--bg-input); border:1px solid var(--border); border-radius:10px; font-size:.75em; color:var(--text-muted); }



.guide-content { margin-top:16px; line-height:1.6; }

.guide-content h1, .guide-content h2, .guide-content h3 { color:var(--accent); margin-top:20px; }

.guide-content p { margin:10px 0; }

.guide-content ul { padding-left:24px; }

.guide-content li { margin-bottom:6px; }

.guide-content code { background:var(--bg-input); padding:2px 6px; border-radius:3px; font-size:.9em; }

.guide-content pre { background:var(--bg-input); padding:12px; border-radius:6px; overflow-x:auto; }

.guide-content pre code { background:none; padding:0; }



.result-type-badge { display:inline-block; padding:2px 8px; background:var(--bg-input); border:1px solid var(--border); border-radius:10px; font-size:.8em; color:var(--text-muted); }



.pagination { display:flex; align-items:center; gap:16px; margin:16px 0; }

.pagination .muted { font-size:.9em; }



/* ── Wiki: NPC, Spell, Boss, Crafting, Town ─────────────────── */

.wiki-npc-detail, .wiki-spell-detail, .wiki-boss-detail, .wiki-town-detail { max-width:800px; }

.npc-header, .boss-header { display:flex; align-items:center; gap:16px; margin-bottom:12px; }

.npc-stats-grid, .spell-stats-grid, .boss-stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin:16px 0; }

.npc-greeting-text, .boss-description { font-size:1.05em; line-height:1.6; padding:12px 16px; background:var(--bg-panel); border-left:3px solid var(--accent); border-radius:0 6px 6px 0; }

.dialogue-topics { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; margin:12px 0; }

.dialogue-topic { padding:12px 16px; background:var(--bg-panel); border:1px solid var(--border); border-radius:6px; }

.dialogue-topic h3 { margin:0 0 6px; font-size:.95em; color:var(--accent); }

.dialogue-topic p { margin:0; font-size:.9em; line-height:1.5; }



.wiki-crafting-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; margin:16px 0; }

.wiki-recipe-card { padding:16px 20px; background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; }

.wiki-recipe-card .recipe-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }

.wiki-recipe-card .recipe-header h2 { margin:0; font-size:1.1em; }

.wiki-recipe-card .recipe-result, .wiki-recipe-card .recipe-station { font-size:.9em; margin-bottom:6px; }

.wiki-recipe-card .recipe-ingredients ul { padding-left:20px; margin:4px 0; }

.wiki-recipe-card .recipe-ingredients li { font-size:.85em; margin-bottom:2px; }



.wiki-towns-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin:16px 0; }

.wiki-town-card { display:block; padding:16px 20px; background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; text-decoration:none; color:var(--text); }

.wiki-town-card:hover { border-color:var(--accent); }

.wiki-town-card .town-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }

.wiki-town-card .town-header h2 { margin:0; font-size:1.1em; color:var(--accent); }

.wiki-town-card .town-stats { display:flex; gap:16px; font-size:.85em; margin-bottom:8px; }

.wiki-town-card .town-lore-preview { font-size:.85em; line-height:1.4; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; }



.town-detail-header { display:flex; align-items:center; gap:16px; margin-bottom:12px; }

.town-badges { display:flex; gap:8px; }

.town-lore-section { margin:16px 0; }

.town-lore-section h2 { font-size:1.1em; color:var(--accent); }

.town-lore-section p { line-height:1.6; }



.boss-lore-section, .boss-connection-section { margin:16px 0; }

.boss-lore-section h2, .boss-connection-section h2 { font-size:1.1em; color:var(--accent); }

.boss-lore-section p, .boss-connection-section p { line-height:1.6; }



.spell-rune-section, .spell-conjure-section, .spell-combat-section, .spell-formula-section, .spell-conditions-section { margin:16px 0; }

.spell-rune-section h2, .spell-conjure-section h2, .spell-combat-section h2, .spell-formula-section h2, .spell-conditions-section h2 { font-size:1.1em; color:var(--accent); }



/* ── Wiki: Vocations, Imbuements, Outfits, Wheel, Gathering, Houses, Raids, Store, Hunting ── */

.wiki-vocations-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin:16px 0; }

.wiki-vocation-card { display:block; padding:16px 20px; background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; text-decoration:none; color:var(--text); }

.wiki-vocation-card:hover { border-color:var(--accent); }

.wiki-vocation-card h2 { margin:0 0 8px; font-size:1.1em; color:var(--accent); }

.vocation-stats { display:flex; flex-wrap:wrap; gap:8px; font-size:.8em; }

.vocation-promotion { margin-top:8px; }



.wiki-vocation-detail { max-width:800px; }

.vocation-formula-section, .vocation-promo-section, .vocation-base-section, .vocation-spells-section { margin:16px 0; }

.vocation-formula-section h2, .vocation-promo-section h2, .vocation-base-section h2, .vocation-spells-section h2 { font-size:1.1em; color:var(--accent); }



.wiki-imbuements-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; margin:16px 0; }

.wiki-imbuement-card { padding:16px 20px; background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; }

.imbuement-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }

.imbuement-header h2 { margin:0; font-size:1.1em; }

.imbuement-tiers { margin-top:8px; }

.imbuement-tier { padding:8px 12px; background:var(--bg-input); border-radius:6px; margin-bottom:6px; }

.imbuement-tier h3 { margin:0 0 4px; font-size:.95em; }

.imbuement-tier ul { padding-left:20px; margin:4px 0; font-size:.85em; }



.wiki-outfits-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin:16px 0; }

.wiki-outfit-card { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--bg-panel); border:1px solid var(--border); border-radius:6px; }

.outfit-info h3 { margin:0; font-size:.95em; }

.tab-links { display:flex; gap:8px; }

.tab-links .active { background:var(--accent); color:var(--bg-dark); }



.wiki-wheel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; margin:16px 0; }

.wiki-wheel-branch { padding:16px 20px; background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; }

.wiki-wheel-branch h2 { margin:0 0 8px; font-size:1.1em; }

.wheel-nodes { margin-top:8px; }

.wheel-node { padding:8px 12px; background:var(--bg-input); border-radius:6px; margin-bottom:6px; }

.wheel-node h3 { margin:0 0 4px; font-size:.9em; }

.wheel-node p { margin:2px 0; font-size:.85em; }

.wiki-wheel-gems-section { margin:24px 0; }

.wiki-gems-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }

.wiki-gem-card { padding:12px 16px; background:var(--bg-panel); border:1px solid var(--border); border-radius:6px; }

.wiki-gem-card h3 { margin:0 0 6px; font-size:.95em; }

.wiki-gem-card ul { padding-left:20px; font-size:.8em; }



.wiki-gathering-section, .wiki-gathering-nodes-section, .wiki-wardens-section, .wiki-warden-shop-section { margin:20px 0; }

.wiki-gathering-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; margin:12px 0; }

.wiki-gathering-card { padding:12px 16px; background:var(--bg-panel); border:1px solid var(--border); border-radius:6px; }

.wiki-gathering-card h3 { margin:0 0 6px; font-size:1em; color:var(--accent); }

.gathering-stats { display:flex; flex-wrap:wrap; gap:8px; font-size:.8em; }



.wiki-raids-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; margin:16px 0; }

.wiki-raid-card { padding:16px 20px; background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; }

.wiki-raid-card h2 { margin:0 0 8px; font-size:1.1em; color:var(--accent); }

.raid-stats { font-size:.85em; margin-bottom:8px; }

.raid-announces ul, .raid-spawns ul, .raid-areas ul { padding-left:20px; font-size:.85em; }



.wiki-hunting-bands { margin:16px 0; }

.hunting-band { padding:16px 20px; background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; margin-bottom:16px; }

.hunting-band h2 { margin:0 0 10px; font-size:1.2em; color:var(--accent); }

.hunting-zones { margin-bottom:10px; }

.hunting-zones .zone-monster-link { margin-right:6px; }

.hunting-quests { margin-top:10px; }

.hunting-quests ul { padding-left:20px; font-size:.85em; }



/* ── Wiki: Forge, Events, Tasks, Cosmetics ──────────────────── */

.wiki-forge-section { margin:24px 0; }

.wiki-forge-section h2 { font-size:1.2em; color:var(--accent); margin-bottom:8px; }

.wiki-forge-section > p { line-height:1.6; margin-bottom:12px; }



.wiki-rarities-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }

.wiki-rarity-card { padding:14px 18px; background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; }

.wiki-rarity-card h3 { margin:0 0 6px; font-size:1.1em; }

.wiki-rarity-card .item-normal { color:#ccc; }

.wiki-rarity-card .item-magic { color:#5b8def; }

.wiki-rarity-card .item-rare { color:#f0c040; }

.wiki-rarity-card .item-unique { color:#ff8c00; }

.rarity-stats { display:flex; flex-wrap:wrap; gap:8px; font-size:.8em; }



.wiki-relics-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }

.wiki-relic-card { padding:14px 18px; background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; }

.relic-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }

.relic-header h3 { margin:0; font-size:1em; }



.wiki-influences-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }

.wiki-influence-card { padding:16px 20px; background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; }

.influence-header { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; }

.influence-header h3 { margin:0; font-size:1.1em; color:var(--accent); }

.influence-affixes { margin-top:8px; font-size:.85em; }

.influence-affixes div { margin-bottom:4px; }



.wiki-events-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; margin:16px 0; }

.wiki-event-card { padding:16px 20px; background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; }

.event-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }

.event-header h2 { margin:0; font-size:1.1em; }

.event-multipliers { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }

.mult-badge { padding:4px 10px; border-radius:4px; font-size:.8em; font-weight:600; color:#fff; }



.wiki-cosmetics-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin:16px 0; }

.wiki-cosmetic-card { padding:12px 16px; background:var(--bg-panel); border:1px solid var(--border); border-radius:6px; }

.wiki-cosmetic-card h3 { margin:0 0 6px; font-size:.95em; color:var(--accent); }



.wiki-hunting-tips { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; margin:16px 0; }

.hunting-tip-card { padding:14px 18px; background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; border-left:4px solid var(--accent); }

.hunting-tip-card h3 { margin:0 0 6px; font-size:1em; color:var(--accent); }

.hunting-tip-card p { margin:0; font-size:.85em; line-height:1.5; }



/* ── Wiki: Detail page section wrappers ──────────────────────── */

.wiki-search-results { margin:16px 0; }



.monster-immunities, .monster-resistances, .monster-loot-section,

.monster-zones-section, .monster-tips-section, .monster-quests-section { margin:16px 0; }

.monster-immunities h2, .monster-resistances h2, .monster-loot-section h2,

.monster-zones-section h2, .monster-tips-section h2, .monster-quests-section h2 { font-size:1.1em; color:var(--accent); }

.immunity-list { display:flex; flex-wrap:wrap; gap:4px; }



.quest-story-section, .quest-walkthrough-section, .quest-prereqs-section,

.quest-dependents-section, .quest-rewards-section, .quest-npc-section,

.quest-spoiler-section, .quest-chain-section { margin:16px 0; }

.quest-story-section h2, .quest-walkthrough-section h2, .quest-prereqs-section h2,

.quest-dependents-section h2, .quest-rewards-section h2, .quest-npc-section h2,

.quest-spoiler-section h2, .quest-chain-section h2 { font-size:1.1em; color:var(--accent); }

.quest-story-text { line-height:1.7; font-size:.95em; padding:12px 16px; background:var(--bg-panel); border-left:3px solid var(--accent); border-radius:0 6px 6px 0; }



.item-drops-section, .item-recipes-section, .item-quest-sources-section,

.item-quest-uses-section, .item-shop-section { margin:16px 0; }

.item-drops-section h2, .item-recipes-section h2, .item-quest-sources-section h2,

.item-quest-uses-section h2, .item-shop-section h2 { font-size:1.1em; color:var(--accent); }

.recipe-block { padding:12px 16px; background:var(--bg-panel); border:1px solid var(--border); border-radius:6px; margin-bottom:8px; }

.recipe-block ul { padding-left:20px; margin:4px 0; font-size:.85em; }



.boss-immunities-section, .boss-resistances-section, .boss-rewards-section,

.boss-quests-section { margin:16px 0; }

.boss-immunities-section h2, .boss-resistances-section h2, .boss-rewards-section h2,

.boss-quests-section h2 { font-size:1.1em; color:var(--accent); }



.npc-greeting-section, .npc-dialogue-section, .npc-shop-section,

.npc-travel-section, .npc-quest-section { margin:16px 0; }

.npc-greeting-section h2, .npc-dialogue-section h2, .npc-shop-section h2,

.npc-travel-section h2, .npc-quest-section h2 { font-size:1.1em; color:var(--accent); }



.town-stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin:16px 0; }

.town-npcs-section, .town-quests-section, .town-faction-section { margin:16px 0; }

.town-npcs-section h2, .town-quests-section h2, .town-faction-section h2 { font-size:1.1em; color:var(--accent); }



.vocation-stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin:16px 0; }



.quest-repeatable { color:var(--green); font-size:.85em; }

.quest-fetch { color:var(--arcane); }

.quest-cost { color:var(--red); }

.quest-story-muted { color:var(--text-muted); font-style:italic; }



/* ── Wiki: Game systems pages (Phase 20) ────────────────────── */

.wiki-info-section { margin:20px 0; padding:16px 20px; background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; }

.wiki-info-section h2 { font-size:1.15em; color:var(--accent); margin:0 0 10px; }

.wiki-info-section ul { padding-left:20px; line-height:1.7; }

.wiki-info-section li { margin:4px 0; }

.wiki-info-section p { line-height:1.7; }



.wiki-warning-box { padding:12px 16px; background:rgba(248,113,113,0.1); border:1px solid rgba(248,113,113,0.3); border-radius:6px; margin:16px 0; color:#fca5a5; }



.race-list { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }

.race-badge { display:inline-block; padding:4px 10px; background:var(--bg-input); border:1px solid var(--border); border-radius:12px; font-size:.8em; color:var(--text); }



.gem-quality-common { color:var(--text-muted); }

.gem-quality-fine { color:#7dd3fc; }

.gem-quality-rare { color:#fde047; }

.gem-quality-epic { color:#c084fc; }

.gem-quality-legendary { color:#fb923c; font-weight:bold; }



/* ── Wiki: Spell area pattern ────────────────────────────────── */

.spell-area-section { margin:16px 0; }

.spell-area-grid { display:inline-block; border:1px solid var(--border); border-radius:4px; padding:4px; background:var(--bg-panel); }

.spell-area-row { display:flex; }

.spell-area-cell { width:24px; height:24px; display:flex; align-items:center; justify-content:center; font-size:.7em; border:1px solid var(--border); color:var(--text-muted); }

.spell-area-cell-hit { background:rgba(56,189,248,0.2); color:var(--accent); font-weight:bold; }



/* ── Spell incantation words ─────────────────────────────────── */

.spell-words-cell { white-space:nowrap; }

.spell-words { font-family:'Georgia',serif; font-size:.85em; color:var(--accent); background:var(--bg-panel); padding:2px 6px; border-radius:3px; border:1px solid var(--border); }



/* ═══════════════════════════════════════════════════════════════

   MODERN PORTAL ENHANCEMENTS

   Collapsible nav · Mega-menu · Bento grid · Skeletons · Toasts

   Theme toggle · FAB · Animated counters · Bottom nav · Load more

   ═══════════════════════════════════════════════════════════════ */



/* ── 1. Collapsible Nav Sections ─────────────────────────────── */

.menu-heading {

  cursor: pointer;

  display: flex;

  justify-content: space-between;

  align-items: center;

  user-select: none;

  transition: background 0.2s;

}

.menu-heading:hover { background: rgba(232, 193, 112, 0.22); }

.menu-heading .nav-collapse-arrow {

  font-size: 10px;

  transition: transform 0.25s ease;

  opacity: 0.6;

}

.menu-section.collapsed .nav-collapse-arrow { transform: rotate(-90deg); }

.menu-section.collapsed > a,

.menu-section.collapsed > .menu-form,

.menu-section.collapsed > .wiki-dropdown-content,

.menu-section.collapsed > .wiki-mega-menu { display: none; }

.menu-section.collapsed .menu-heading { border-bottom: none; }



/* ── 2. Wiki Mega-Menu ──────────────────────────────────────── */

.wiki-mega-menu {

  position: absolute;

  left: 220px;

  top: 0;

  width: 520px;

  max-height: 480px;

  overflow-y: auto;

  background: var(--bg-panel-alt);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-md);

  box-shadow: var(--glass-shadow-lg);

  padding: 16px;

  z-index: 300;

  display: none;

  animation: fadeInUp 0.2s ease-out;

}

.wiki-mega-menu.open { display: block; }

/* Mobile: mega-menu expands inline within the menu instead of floating */

@media (max-width: 1024px) {

  .wiki-mega-menu {

    position: static;

    left: auto; top: auto;

    width: 100%;

    max-height: 300px;

  }

}

.wiki-mega-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 4px 16px;

}

.wiki-mega-category {

  grid-column: 1 / -1;

  font-size: 10px;

  font-weight: 700;

  font-family: "Space Grotesk", sans-serif;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  color: var(--accent-gold);

  padding: 8px 4px 4px;

  border-bottom: 1px solid var(--border);

  margin-top: 4px;

}

.wiki-mega-category:first-child { margin-top: 0; }

.wiki-mega-link {

  display: block;

  padding: 5px 10px;

  font-size: 13px;

  color: var(--text);

  text-decoration: none;

  border-radius: var(--r-sm);

  transition: background 0.15s, color 0.15s;

}

.wiki-mega-link:hover { background: rgba(232, 193, 112, 0.12); color: var(--accent-gold); }



/* ── 3. Bento Grid Homepage ─────────────────────────────────── */

.bento-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-template-rows: auto auto auto;

  gap: 16px;

  margin-bottom: 24px;

}

.bento-tile {

  background: var(--bg-panel);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-lg);

  padding: 20px 24px;

  box-shadow: var(--glass-shadow);

  animation: fadeInUp 0.4s ease-out both;

  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;

  overflow: hidden;

  position: relative;

}

.bento-tile:hover {

  border-color: var(--border-gold);

  box-shadow: var(--glass-shadow-lg), 0 0 24px rgba(232, 193, 112, 0.1);

  transform: translateY(-2px);

}

.bento-tile-large { grid-column: 1 / 3; grid-row: 1 / 3; }

.bento-tile-wide { grid-column: 1 / 3; }

.bento-tile-tall { grid-row: 1 / 3; }

.bento-tile-title {

  font-family: "Space Grotesk", sans-serif;

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  color: var(--accent-gold);

  margin-bottom: 12px;

}

.bento-tile h2 {

  margin: 0 0 8px;

  font-size: 20px;

  font-family: "Space Grotesk", sans-serif;

  font-weight: 700;

  color: var(--text-bright);

}

.bento-tile p { font-size: 14px; line-height: 1.6; margin: 6px 0; }

.bento-stat-row {

  display: flex;

  gap: 20px;

  flex-wrap: wrap;

}

.bento-stat {

  text-align: center;

  flex: 1;

  min-width: 80px;

}

.bento-stat-num {

  font-family: "Space Grotesk", sans-serif;

  font-size: 28px;

  font-weight: 700;

  color: var(--accent-gold);

  display: block;

}

.bento-stat-label {

  font-size: 11px;

  color: var(--text-dim);

  text-transform: uppercase;

  letter-spacing: 1px;

}

@media (max-width: 768px) {

  .bento-grid { grid-template-columns: 1fr; }

  .bento-tile-large, .bento-tile-wide, .bento-tile-tall { grid-column: 1; grid-row: auto; }

}



/* ── 4. Skeleton Loaders ────────────────────────────────────── */

.skeleton {

  background: linear-gradient(90deg,

    rgba(232, 193, 112, 0.06) 25%,

    rgba(232, 193, 112, 0.15) 50%,

    rgba(232, 193, 112, 0.06) 75%);

  background-size: 200% 100%;

  animation: shimmer 1.5s infinite;

  border-radius: var(--r-sm);

  min-height: 16px;

}

.skeleton-text { width: 100%; height: 14px; margin-bottom: 8px; }

.skeleton-text.short { width: 60%; }

.skeleton-avatar { width: 48px; height: 48px; border-radius: var(--r-sm); }

.skeleton-card {

  padding: 16px;

  border: var(--glass-border);

  border-radius: var(--r-md);

  background: var(--bg-panel);

}



/* ── 5. Hover Tooltip Links ────────────────────────────────── */

a[data-tooltip] { position: relative; }

a[data-tooltip]::after {

  content: attr(data-tooltip);

  position: absolute;

  bottom: 100%;

  left: 50%;

  transform: translateX(-50%) translateY(-6px);

  background: var(--bg-panel-alt);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-sm);

  padding: 6px 12px;

  font-size: 12px;

  color: var(--text);

  white-space: nowrap;

  pointer-events: none;

  opacity: 0;

  transition: opacity 0.2s, transform 0.2s;

  z-index: 500;

  box-shadow: var(--glass-shadow);

}

a[data-tooltip]:hover::after {

  opacity: 1;

  transform: translateX(-50%) translateY(-2px);

}



/* ── 6. Parallax Hero Banner ───────────────────────────────── */

.hero-banner {

  position: relative;

  width: 100%;

  min-height: 280px;

  border-radius: var(--r-lg);

  overflow: hidden;

  margin-bottom: 24px;

  box-shadow: var(--glass-shadow-lg);

  animation: fadeInUp 0.5s ease-out both;

}

.hero-banner-bg {

  position: absolute;

  top: 0; left: 0; right: 0; bottom: 0;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  filter: brightness(0.5) saturate(1.2);

  transform: scale(1.1);

  transition: transform 0.4s ease-out;

}

.hero-banner:hover .hero-banner-bg { transform: scale(1.15); }

.hero-banner-overlay {

  position: relative;

  min-height: 280px;

  background: linear-gradient(180deg, transparent 0%, rgba(14, 11, 7, 0.6) 60%, rgba(14, 11, 7, 0.95) 100%);

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 32px 40px;

}

.hero-banner-title {

  font-family: "Space Grotesk", sans-serif;

  font-size: 36px;

  font-weight: 800;

  color: var(--accent-gold-bright);

  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);

  margin: 0;

  letter-spacing: -1px;

}

.hero-banner-subtitle {

  font-size: 16px;

  color: var(--text);

  margin-top: 8px;

  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);

}

.hero-banner-cta {

  display: inline-block;

  margin-top: 16px;

  padding: 10px 28px;

  background: var(--grad-aurora);

  color: #1a1410;

  font-family: "Space Grotesk", sans-serif;

  font-weight: 700;

  font-size: 14px;

  border-radius: var(--r-pill);

  text-decoration: none;

  transition: filter 0.2s, transform 0.2s;

  letter-spacing: 0.5px;

}

.hero-banner-cta:hover { filter: brightness(1.15); transform: translateY(-2px); }

@media (max-width: 768px) {

  .hero-banner { min-height: 200px; }

  .hero-banner-title { font-size: 24px; }

  .hero-banner-overlay { min-height: 200px; padding: 20px 24px; }

}



/* ── 7. Gradient Border on Hover ───────────────────────────── */

.gradient-border-hover {

  position: relative;

  transition: border-color 0.3s;

}

.gradient-border-hover::after {

  content: "";

  position: absolute;

  top: -1px; left: -1px; right: -1px; bottom: -1px;

  border-radius: inherit;

  padding: 1px;

  background: linear-gradient(135deg, var(--accent-gold), var(--accent), var(--arcane), var(--accent-gold));

  background-size: 300% 300%;

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  mask-composite: exclude;

  opacity: 0;

  transition: opacity 0.3s;

  animation: auroraShift 4s ease infinite;

  pointer-events: none;

}

.gradient-border-hover:hover::after { opacity: 1; }

table.list tr:hover td { border-bottom-color: rgba(232, 193, 112, 0.3); }



/* ── 8. Card-based layout enhancements (quests/factions/towns/spells) ── */

.card-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

  gap: 16px;

  margin: 20px 0;

}

.info-card {

  background: var(--bg-panel);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-md);

  padding: 18px 22px;

  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;

  animation: fadeInUp 0.3s ease-out both;

}

.info-card:hover {

  border-color: var(--border-gold);

  transform: translateY(-2px);

  box-shadow: var(--glass-shadow-lg), 0 0 16px rgba(232, 193, 112, 0.08);

}

.info-card h3 {

  margin: 0 0 8px;

  font-family: "Space Grotesk", sans-serif;

  font-weight: 600;

  font-size: 16px;

  color: var(--text-bright);

}

.info-card p { font-size: 14px; line-height: 1.6; margin: 4px 0; }

.info-card .card-meta {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

  font-size: 12px;

  color: var(--text-dim);

  margin-top: 10px;

  padding-top: 10px;

  border-top: 1px solid var(--border);

}



/* ── 9. Sortable Tables ────────────────────────────────────── */

table.list th[data-sort] {

  cursor: pointer;

  user-select: none;

  transition: color 0.2s;

}

table.list th[data-sort]:hover { color: var(--accent-gold-bright); }

table.list th[data-sort]::after {

  content: " \2195";

  opacity: 0.3;

  font-size: 10px;

}

table.list th[data-sort].sort-asc::after { content: " \2191"; opacity: 1; color: var(--accent-gold); }

table.list th[data-sort].sort-desc::after { content: " \2193"; opacity: 1; color: var(--accent-gold); }



/* ── 10. Toast Notifications ───────────────────────────────── */

.toast-container {

  position: fixed;

  top: 80px;

  right: 24px;

  z-index: 1200;

  display: flex;

  flex-direction: column;

  gap: 10px;

  pointer-events: none;

}

.toast {

  min-width: 280px;

  max-width: 400px;

  padding: 14px 20px;

  background: var(--bg-panel-alt);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-md);

  box-shadow: var(--glass-shadow-lg);

  font-size: 14px;

  font-weight: 500;

  color: var(--text);

  display: flex;

  align-items: center;

  gap: 12px;

  animation: slideInRight 0.3s ease-out, toastFadeOut 0.3s ease-in 4.7s forwards;

  pointer-events: auto;

}

.toast.success { border-left: 3px solid var(--green); }

.toast.error { border-left: 3px solid var(--red); }

.toast.info { border-left: 3px solid var(--arcane); }

.toast-icon { font-size: 18px; flex-shrink: 0; }

.toast.success .toast-icon { color: var(--green); }

.toast.error .toast-icon { color: var(--red); }

.toast.info .toast-icon { color: var(--arcane); }

@keyframes toastFadeOut {

  to { opacity: 0; transform: translateX(40px); }

}



/* ── 11. Theme Toggle (Day/Night) ─────────────────────────── */

body.theme-day {

  --bg: #f5f0e8;

  --bg-panel: rgba(255, 250, 240, 0.65);

  --bg-panel-alt: rgba(248, 240, 228, 0.75);

  --bg-input: rgba(240, 230, 215, 0.8);

  --parchment: rgba(250, 240, 225, 0.6);

  --parchment-light: rgba(255, 248, 235, 0.6);

  --border: rgba(139, 105, 20, 0.25);

  --border-light: rgba(180, 140, 50, 0.35);

  --border-gold: rgba(200, 160, 80, 0.3);

  --text: #3a3020;

  --text-dim: #7a6a50;

  --text-bright: #1a1410;

  --ink: #4a3e2e;

  --accent: #b8860b;

  --accent-gold: #a07020;

  --accent-gold-bright: #8b6914;

  --shadow: rgba(139, 105, 20, 0.15);

  --glass-blur: blur(12px) saturate(120%);

  --glass-border: 1px solid rgba(139, 105, 20, 0.12);

  --glass-shadow: 0 4px 16px rgba(139, 105, 20, 0.1);

  --glass-shadow-lg: 0 8px 32px rgba(139, 105, 20, 0.15);

  --grad-surface: linear-gradient(180deg, rgba(250,240,225,0.5), rgba(245,235,220,0.7));

}

body.theme-day {

  background:

    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(139, 105, 20, 0.06) 0%, transparent 60%),

    radial-gradient(ellipse 60% 50% at 80% 10%, rgba(196, 90, 74, 0.03) 0%, transparent 55%),

    var(--bg);

  background-attachment: fixed;

}

/* Override hardcoded dark backgrounds in light mode */

body.theme-day .left-menu,

body.theme-day .site-header,

body.theme-day .content,

body.theme-day .sidebox,

body.theme-day .news-post,

body.theme-day .cmd-palette-box,

body.theme-day .activity-ticker,

body.theme-day .bottom-nav {

  background: var(--bg-panel) !important;

}

body.theme-day .quest-card,

body.theme-day .wiki-mega-menu,

body.theme-day .toast,

body.theme-day .fab-item,

body.theme-day .skeleton-card {

  background: rgba(250, 244, 232, 0.85) !important;

}

body.theme-day .hero-banner-overlay {

  background: linear-gradient(180deg, transparent 0%, rgba(245, 240, 232, 0.5) 60%, rgba(245, 240, 232, 0.9) 100%) !important;

}

body.theme-day input,

body.theme-day textarea,

body.theme-day select {

  background: var(--bg-input) !important;

  color: var(--text) !important;

}

body.theme-dark .hero-banner-overlay {

  background: linear-gradient(180deg, transparent 0%, rgba(14, 11, 7, 0.6) 60%, rgba(14, 11, 7, 0.95) 100%);

}

.theme-toggle {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 32px; height: 32px;

  background: var(--bg-input);

  border: 1px solid var(--border);

  border-radius: var(--r-pill);

  cursor: pointer;

  font-size: 16px;

  color: var(--accent-gold);

  transition: border-color 0.2s, transform 0.2s;

  flex-shrink: 0;

}

.theme-toggle:hover { border-color: var(--accent); transform: scale(1.08); }



/* ── 12. Quick-Action FAB ──────────────────────────────────── */

.fab {

  position: fixed;

  bottom: 50px;

  right: 24px;

  width: 56px; height: 56px;

  border-radius: 50%;

  background: var(--grad-aurora);

  color: #1a1410;

  border: none;

  cursor: pointer;

  font-size: 24px;

  box-shadow: 0 4px 20px rgba(232, 193, 112, 0.4);

  z-index: 90;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.2s, box-shadow 0.2s;

  animation: float 3s ease-in-out infinite;

}

.fab:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(232, 193, 112, 0.6); }

.fab-menu {

  position: absolute;

  bottom: 70px;

  right: 0;

  display: none;

  flex-direction: column;

  gap: 8px;

  animation: fadeInUp 0.2s ease-out;

}

.fab.open .fab-menu { display: flex; }

.fab-item {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 18px;

  background: var(--bg-panel-alt);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border: var(--glass-border);

  border-radius: var(--r-pill);

  color: var(--text);

  font-size: 13px;

  font-weight: 500;

  text-decoration: none;

  white-space: nowrap;

  box-shadow: var(--glass-shadow);

  transition: border-color 0.2s, color 0.2s;

}

.fab-item:hover { border-color: var(--accent); color: var(--accent-gold); }

.fab-item-icon { font-size: 18px; }

@media (max-width: 1024px) { .fab { bottom: 70px; } }



/* ── 13. Animated Counters ─────────────────────────────────── */

.counter { display: inline-block; }



/* ── 14. Responsive Breakpoints ────────────────────────────── */

@media (min-width: 1440px) {

  .layout { max-width: 1440px; grid-template-columns: 240px 1fr 300px; }

  .header-inner { max-width: 1440px; }

  .site-footer { max-width: 1440px; }

}

@media (max-width: 768px) {

  .layout { grid-template-columns: 1fr; padding: 0 12px; margin: 12px auto; }

  .content { padding: 18px 16px; border-radius: var(--r-md); }

  .content h1 { font-size: 22px; }

  .sideboxes { display: none; }

  .header-search { display: none; }

  .header-status { font-size: 12px; }

  .header-status .lang-switch { display: none; }

  .faction-list { grid-template-columns: 1fr; }

  .combat-summary { grid-template-columns: repeat(2, 1fr); }

  .bento-grid { gap: 12px; }

  .bento-tile { padding: 16px; }

  .bento-stat-num { font-size: 22px; }

}

@media (min-width: 769px) and (max-width: 1024px) {

  .layout { grid-template-columns: 220px 1fr; }

  .sideboxes { display: none; }

}



/* ── 15. Bottom Nav Bar (Mobile) ───────────────────────────── */

.bottom-nav {

  display: none;

  position: fixed;

  bottom: 0; left: 0; right: 0;

  height: 56px;

  background: var(--bg-panel-alt);

  backdrop-filter: var(--glass-blur);

  -webkit-backdrop-filter: var(--glass-blur);

  border-top: 1px solid var(--border);

  z-index: 100;

  justify-content: space-around;

  align-items: center;

  padding-bottom: env(safe-area-inset-bottom, 0);

}

.bottom-nav-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 2px;

  color: var(--text-dim);

  text-decoration: none;

  font-size: 10px;

  font-family: "Space Grotesk", sans-serif;

  font-weight: 600;

  transition: color 0.2s;

}

.bottom-nav-item:hover { color: var(--accent-gold); }

.bottom-nav-icon { font-size: 20px; }

@media (max-width: 768px) {

  .bottom-nav { display: flex; }

  body { padding-bottom: 92px; }

  .fab { bottom: 64px; }

}



/* ── 16. Load More Button ──────────────────────────────────── */

.load-more-wrap {

  text-align: center;

  margin: 24px 0;

}

.load-more-btn {

  display: inline-block;

  padding: 10px 32px;

  background: var(--bg-panel);

  border: 1px solid var(--border-gold);

  border-radius: var(--r-pill);

  color: var(--accent-gold);

  font-family: "Space Grotesk", sans-serif;

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

  transition: background 0.2s, border-color 0.2s, transform 0.2s;

}

.load-more-btn:hover {

  background: rgba(232, 193, 112, 0.12);

  border-color: var(--accent);

  transform: translateY(-1px);

}

.load-more-btn:disabled {

  opacity: 0.5;

  cursor: default;

  transform: none;

}

.load-more-spinner {

  display: none;

  width: 20px; height: 20px;

  border: 2px solid var(--border);

  border-top-color: var(--accent-gold);

  border-radius: 50%;

  animation: spin 0.8s linear infinite;

  margin: 0 auto;

}

.load-more-btn.loading .load-more-spinner { display: block; }

.load-more-btn.loading .load-more-text { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }



/* Items hidden by load-more (progressive reveal) */

.load-more-hidden { display: none; }



/* Store offer sprites (item/outfit/mount previews in the Details column) */
.store-sprite {
  image-rendering: pixelated;
  vertical-align: middle;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  object-fit: contain;
}