/* =====================================================
   RSRealm — Dark Fantasy Theme Overlay (v3 Immersive)
   =====================================================
   Full atmospheric redesign. Layers on top of custom.css.
   OSRS warm browns + gold accents + atmospheric effects.

   TO REVERT: Remove the two <link> lines from head.ejs:
     - Google Fonts (Cinzel + Crimson Text)
     - This stylesheet
   ===================================================== */

/* ===== VARIABLES ===== */
:root {
  --df-gold: #c9a84c;
  --df-gold-light: #f0d878;
  --df-gold-dark: #8a6f1e;
  --df-parchment: #e8dcc4;

  --df-bg-deepest: #1e1810;
  --df-bg-deep: #252014;
  --df-bg-mid: #2e261c;
  --df-bg-card: #352c22;
  --df-bg-surface: #3e3528;
  --df-bg-hover: #4a4032;

  --df-border: rgba(201, 168, 76, 0.18);
  --df-border-bright: rgba(201, 168, 76, 0.35);
  --df-border-glow: rgba(201, 168, 76, 0.5);

  --df-text: #c4b48a;
  --df-text-dim: rgba(201, 168, 76, 0.45);
  --df-text-bright: #e8dcc4;

  --df-glow-gold: 0 0 15px rgba(201, 168, 76, 0.25);
  --df-glow-gold-strong: 0 0 25px rgba(201, 168, 76, 0.4), 0 0 50px rgba(201, 168, 76, 0.15);
  --df-glow-red: 0 0 12px rgba(220, 50, 50, 0.3);
  --df-glow-green: 0 0 12px rgba(74, 222, 128, 0.3);
  --df-glow-purple: 0 0 12px rgba(160, 120, 255, 0.3);
}

/* ===== KEYFRAMES ===== */
@keyframes df-breathe {

  0%,
  100% {
    border-color: rgba(201, 168, 76, 0.18);
  }

  50% {
    border-color: rgba(201, 168, 76, 0.4);
  }
}

@keyframes df-shimmer {
  0% {
    background-position: 200% 0;
  }

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

@keyframes df-glow-pulse {

  0%,
  100% {
    box-shadow: 0 3px 16px rgba(201, 168, 76, 0.3);
  }

  50% {
    box-shadow: 0 4px 28px rgba(201, 168, 76, 0.55), 0 0 50px rgba(201, 168, 76, 0.15);
  }
}

@keyframes df-xp-shine {
  0% {
    background-position: -200% 0;
  }

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

@keyframes df-loot-flash {
  0% {
    box-shadow: 0 0 0 rgba(201, 168, 76, 0);
  }

  30% {
    box-shadow: 0 0 25px rgba(201, 168, 76, 0.6), 0 0 50px rgba(201, 168, 76, 0.2);
  }

  100% {
    box-shadow: 0 0 8px rgba(201, 168, 76, 0.15);
  }
}

@keyframes df-ticker-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes df-orb-pulse {

  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.04);
    filter: brightness(1.2);
  }
}

@keyframes df-float {

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

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

@keyframes df-fog-drift {
  0% {
    transform: translateX(-5%) scaleY(1);
    opacity: 0.4;
  }

  50% {
    opacity: 0.6;
  }

  100% {
    transform: translateX(5%) scaleY(1.05);
    opacity: 0.4;
  }
}

@keyframes df-ember-rise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-120px) translateX(var(--drift, 20px)) scale(0);
  }
}

@keyframes df-banner-sweep {
  0% {
    left: -30%;
  }

  100% {
    left: 130%;
  }
}

@keyframes df-pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

@keyframes df-title-glow {

  0%,
  100% {
    text-shadow: 0 0 10px rgba(201, 168, 76, 0.2), 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  50% {
    text-shadow: 0 0 20px rgba(201, 168, 76, 0.4), 0 0 40px rgba(201, 168, 76, 0.15), 0 2px 4px rgba(0, 0, 0, 0.5);
  }
}

@keyframes df-ember-float {
  0% {
    transform: translateY(0) translateX(0);
  }

  25% {
    transform: translateY(-12px) translateX(6px);
  }

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

  75% {
    transform: translateY(-16px) translateX(3px);
  }

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

@keyframes df-ember-float-alt {
  0% {
    transform: translateY(0) translateX(0);
  }

  20% {
    transform: translateY(-8px) translateX(-5px);
  }

  40% {
    transform: translateY(-18px) translateX(4px);
  }

  60% {
    transform: translateY(-6px) translateX(-3px);
  }

  80% {
    transform: translateY(-14px) translateX(7px);
  }

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

@keyframes df-torch-flicker {

  0%,
  100% {
    opacity: 0.7;
  }

  10% {
    opacity: 0.85;
  }

  20% {
    opacity: 0.65;
  }

  35% {
    opacity: 0.9;
  }

  50% {
    opacity: 0.6;
  }

  65% {
    opacity: 0.82;
  }

  80% {
    opacity: 0.68;
  }

  90% {
    opacity: 0.78;
  }
}

@keyframes df-ambient-shift {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  33% {
    opacity: 0.8;
    transform: scale(1.05);
  }

  66% {
    opacity: 0.9;
    transform: scale(0.95);
  }
}

/* ===== GLOBAL / TYPOGRAPHY / ARCANE THEME ===== */
body {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(75, 55, 15, 0.4), transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(80, 50, 15, 0.3), transparent 60%),
    radial-gradient(circle at 20% 80%, rgba(50, 40, 15, 0.3), transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 20%, rgba(15, 10, 5, 0.95) 100%),
    linear-gradient(180deg, #100b05 0%, #1a120d 40%, #120a05 80%, #0d0703 100%) !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #0d0703 !important;
  color: var(--df-text) !important;
  height: auto !important;
  min-height: 100vh !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
}

/* Orb canvas — above fog, atmospheric overlay */
#df-orbs {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}

h1,
h2,
h3,
h4,
h5,
h6,
.rs-header,
.rs-nav,
.rs-action-bar,
.modal-title,
.rs-pn-title {
  font-family: 'Cinzel', serif !important;
}

p,
label,
.modal-body,
.popover-content,
.popover-body {
  font-family: 'Crimson Text', Georgia, serif;
}

a {
  color: var(--df-gold-dark);
}

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

::selection {
  background: rgba(201, 168, 76, 0.35);
  color: var(--df-parchment);
}

/* =====================================================
   ATMOSPHERIC BACKGROUND
   ===================================================== */
html {
  background: #171109 !important;
}

.app,
.app-container {
  background: transparent !important;
}

/* Mobile responsive fix — override fixed 900px width from styles.min.css */
@media (max-width: 991px) {
  .app {
    width: 100% !important;
    padding: 0 15px !important;
    overflow-x: hidden !important;
  }
}

@media (max-width: 767px) {
  .app {
    padding: 0 8px !important;
  }
}

/* --- Mobile responsive fixes --- */

/* 1) rs-header: wrap nav links to next row on medium/small screens */
@media (max-width: 991px) {
  body {
    --rs-header-height: 76px !important;
  }

  .rs-header {
    height: 76px !important;
    padding: 4px 0 !important;
    overflow: hidden !important;
  }

  .rs-header-top {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 2px !important;
  }

  .rs-player-count {
    width: 100% !important;
    text-align: center !important;
    font-size: 10px !important;
  }

  .rs-user-info-center {
    width: 100% !important;
    text-align: center !important;
    font-size: 11px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
  }

  .rs-header-links {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 4px 12px !important;
  }

  .rs-header-links a {
    font-size: 11px !important;
    min-height: 0 !important;
    min-width: 0 !important;
  }
}

/* 2) rs-ticker: speed up on mobile (viewport is narrower so same duration = very slow) */
@media (max-width: 991px) {
  .rs-ticker-scroll {
    animation-duration: 12s !important;
  }
}

@media (max-width: 575px) {
  .rs-ticker-scroll {
    animation-duration: 8s !important;
  }
}

/* 3) citadel-rooms tabs: allow horizontal scroll, don't scrunch */
@media (max-width: 991px) {
  .citadel-rooms {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .citadel-rooms::-webkit-scrollbar {
    display: none !important;
  }

  .citadel-room-tab {
    padding: 6px 10px !important;
    font-size: 10px !important;
    flex-shrink: 0 !important;
  }
}

/* 4) guild about/events: stack vertically on medium screens */
@media (max-width: 991px) {

  .citadel-hall-grid,
  .citadel-hall-grid.citadel-hall-grid-overview {
    grid-template-columns: 1fr !important;
  }
}

/* 5) footer: reduce spacing on mobile — uses body prefix to beat base !important */
@media (max-width: 767px) {
  body .df-footer {
    padding: 10px 8px 60px !important;
  }

  body .df-footer-brand {
    font-size: 13px !important;
    letter-spacing: 2px !important;
    margin-bottom: 4px !important;
  }

  body .df-footer-links {
    gap: 6px !important;
    margin-bottom: 2px !important;
  }

  body .df-footer-link {
    letter-spacing: 0.5px !important;
    font-size: 9px !important;
    min-height: 0 !important;
    min-width: 0 !important;
  }

  body .df-footer-sep {
    width: 2px !important;
    height: 2px !important;
  }

  body .df-footer-copy {
    letter-spacing: 0.5px !important;
    font-size: 8px !important;
    margin-top: 0 !important;
  }
}

/* 6) WYSIWYG toolbar buttons: override touch-friendly 44px min-height */
@media (max-width: 991px) {

  .ql-toolbar.ql-snow button,
  .ql-toolbar.ql-snow .ql-picker,
  .ql-toolbar.ql-snow .ql-picker-label,
  .forum-bbcode-toolbar button,
  .forum-bbcode-toolbar select {
    min-height: 0 !important;
    min-width: 0 !important;
  }

  .ql-toolbar.ql-snow {
    padding: 4px !important;
  }

  .ql-toolbar.ql-snow .ql-formats {
    margin-right: 8px !important;
  }
}

/* 7) df-hub-banner: icon-only buttons on mobile */
@media (max-width: 991px) {
  .df-hub-banner:not(.df-city-viewport) {
    padding: 8px 10px !important;
  }

  .df-hub-banner-content {
    gap: 8px !important;
  }

  .df-hub-loc-name {
    font-size: 14px !important;
    flex: 1 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
  }

  /* Icon-only buttons: hide text, show only the <i> icon */
  .df-hub-bank-btn,
  .df-hub-travel-btn,
  .df-hub-ge-btn {
    font-size: 0 !important;
    padding: 5px 7px !important;
    letter-spacing: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
  }

  .df-hub-bank-btn i,
  .df-hub-travel-btn i,
  .df-hub-ge-btn i {
    font-size: 12px !important;
    margin: 0 !important;
  }

  /* Hide the caret arrow in Travel button */
  .df-hub-travel-btn i.fa-caret-down {
    display: none !important;
  }

  .df-hub-loc-icon {
    font-size: 20px !important;
  }

  .df-hub-loc-desc {
    font-size: 10px !important;
  }

  .df-hub-loc-badges {
    display: none !important;
  }

  /* Hide ornate corner brackets on mobile */
  .df-hub-banner-content::before,
  .df-hub-banner-content::after {
    display: none !important;
  }
}

/* 8) Guild forum tab: responsive layout */
@media (max-width: 768px) {
  .citadel-archive-head {
    display: none !important;
  }

  .citadel-archive-row {
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 8px 10px !important;
  }

  .citadel-archive-row>span[style*="width:60px"] {
    display: none !important;
  }

  .citadel-archive-row>div[style*="width:160px"] {
    display: none !important;
  }
}

/* 9) Guild list: responsive layout with labels */
@media (max-width: 768px) {
  .citadel-list-head {
    display: none !important;
  }

  .citadel-guild-row {
    flex-wrap: wrap !important;
    gap: 2px 8px !important;
    padding: 8px 10px !important;
  }

  .citadel-guild-row .gl-tier,
  .citadel-guild-row .gl-members,
  .citadel-guild-row .gl-owner,
  .citadel-guild-row .gl-status {
    width: auto !important;
    font-size: 10px !important;
    text-align: left !important;
  }

  .citadel-guild-row .gl-tier::before,
  .citadel-guild-row .gl-members::before,
  .citadel-guild-row .gl-owner::before,
  .citadel-guild-row .gl-status::before {
    font-size: 9px;
    color: #888;
    margin-right: 3px;
  }

  .citadel-guild-row .gl-tier::before {
    content: 'Tier: ';
  }

  .citadel-guild-row .gl-members::before {
    content: 'Members: ';
  }

  .citadel-guild-row .gl-owner::before {
    content: 'Owner: ';
  }

  .citadel-guild-row .gl-status::before {
    content: 'Status: ';
  }

  .citadel-guild-name-cell {
    width: 100% !important;
    flex: none !important;
  }
}

/* All atmospheric pseudo-element overlays removed — orbs handle lighting */
.app-container::before,
.app-container::after,
.app-content-wrapped::after,
.container::before,
.container::after,
.app::before,
.app::after {
  content: none !important;
}

.app-content-wrapped {
  background: transparent !important;
  position: relative !important;
  padding-bottom: 0 !important;
}

/* Game area glow handled by canvas — not clipped by parent overflow */
.app-content-wrapped::before {
  content: none !important;
}

.container {
  background: transparent !important;
  position: relative !important;
  z-index: 1 !important;
}

/* =====================================================
   HEADER — Atmospheric top bar
   ===================================================== */
.rs-header {
  background: linear-gradient(180deg, rgba(42, 35, 26, 0.95), rgba(26, 22, 16, 0.98)) !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.25) !important;
  box-shadow:
    0 1px 0 rgba(201, 168, 76, 0.1) inset,
    0 4px 30px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.rs-player-count {
  color: var(--df-text) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
}

.rs-player-count b {
  color: var(--df-gold) !important;
  text-shadow: 0 0 8px rgba(201, 168, 76, 0.3) !important;
}

.rs-user-info-center {
  color: var(--df-text) !important;
  font-family: 'Crimson Text', serif !important;
}

.rs-user-info-center a {
  transition: all 0.3s ease !important;
}

.rs-user-info-center a:hover {
  text-shadow: 0 0 14px rgba(201, 168, 76, 0.5) !important;
}

.rs-header-links a {
  color: var(--df-text) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

.rs-header-links a:hover {
  color: var(--df-gold-light) !important;
  text-shadow: 0 0 14px rgba(201, 168, 76, 0.5) !important;
}

/* =====================================================
   NAVIGATION — Epic atmospheric nav
   ===================================================== */
.rs-nav {
  background: linear-gradient(180deg, rgba(48, 40, 32, 0.96), rgba(33, 28, 20, 0.98)) !important;
  border-bottom: 2px solid transparent !important;
  border-image: linear-gradient(90deg, transparent 5%, rgba(201, 168, 76, 0.4) 30%, rgba(201, 168, 76, 0.6) 50%, rgba(201, 168, 76, 0.4) 70%, transparent 95%) 1 !important;
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(201, 168, 76, 0.08) inset !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  animation: df-breathe 6s ease-in-out infinite !important;
}

/* Logo as text */
.rs-logo {
  text-decoration: none !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.rs-logo:hover {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-decoration: none !important;
}

.rs-logo img {
  display: none !important;
}

.rs-logo-text {
  font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 6px !important;
  text-transform: uppercase !important;
  background: linear-gradient(180deg, var(--df-parchment), var(--df-gold)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 0 !important;
  line-height: 1.2 !important;
}

.rs-logo:hover .rs-logo-text {
  letter-spacing: 6px !important;
}

/* Nav links */
.rs-nav-link {
  color: var(--df-text) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  padding: 8px 14px !important;
}

.rs-nav-link::after {
  content: '' !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 50% !important;
  width: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--df-gold), transparent) !important;
  transition: all 0.4s ease !important;
  transform: translateX(-50%) !important;
}

.rs-nav-link:hover {
  color: var(--df-parchment) !important;
  text-shadow: 0 0 14px rgba(201, 168, 76, 0.5) !important;
  background: transparent !important;
}

.rs-nav-link:hover::after {
  width: 80% !important;
}

.rs-nav-link.active {
  color: var(--df-gold) !important;
  text-shadow: 0 0 18px rgba(201, 168, 76, 0.6) !important;
}

.rs-nav-link.active::after {
  width: 60% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--df-gold-light), transparent) !important;
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.4) !important;
}

/* Play Now Button */
.rs-play-now-btn {
  background: linear-gradient(180deg, #c9a84c, #8a6f1e) !important;
  border: 1px solid rgba(240, 216, 120, 0.4) !important;
  color: var(--df-bg-deepest) !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-shadow: none !important;
  -webkit-text-fill-color: var(--df-bg-deepest) !important;
  animation: df-glow-pulse 3s ease-in-out infinite !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.rs-play-now-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
  transition: left 0.6s ease !important;
}

.rs-play-now-btn:hover::before {
  left: 150% !important;
}

.rs-play-now-btn::after {
  display: none !important;
}

.rs-play-now-btn:hover {
  background: linear-gradient(180deg, #e0c060, #a08830) !important;
  transform: translateY(-1px) !important;
}

/* Nav dropdowns */
.rs-nav-dropdown-menu {
  background: rgba(42, 35, 26, 0.97) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--df-border-bright) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(201, 168, 76, 0.06),
    inset 0 1px 0 rgba(201, 168, 76, 0.08) !important;
  border-radius: 8px !important;
}

.rs-nav-dropdown-menu a {
  color: var(--df-text) !important;
  transition: all 0.25s ease !important;
  border-radius: 4px !important;
}

.rs-nav-dropdown-menu a:hover {
  background: rgba(201, 168, 76, 0.12) !important;
  color: var(--df-gold-light) !important;
  transform: translateX(3px) !important;
  text-shadow: 0 0 8px rgba(201, 168, 76, 0.2) !important;
}

.rs-nav-loading {
  color: var(--df-text-dim) !important;
}

/* Skills dropdown skill links */
.rs-skill-link {
  transition: all 0.25s ease !important;
}

.rs-skill-link:hover {
  background: rgba(201, 168, 76, 0.12) !important;
}

/* Mobile nav */
.rs-hamburger span {
  background: var(--df-gold-dark) !important;
}

@media (max-width: 991px) {
  .rs-nav-links.active {
    background: rgba(42, 35, 26, 0.98) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--df-border) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
  }
}

/* =====================================================
   ACTION BAR — Immersive status bar
   ===================================================== */
.rs-action-bar {
  background: linear-gradient(180deg, rgba(42, 35, 26, 0.96), rgba(26, 22, 16, 0.98)) !important;
  border-bottom: 1px solid var(--df-border) !important;
  box-shadow:
    0 2px 20px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(201, 168, 76, 0.06) inset !important;
  backdrop-filter: blur(8px) !important;
}

.rs-ab-idle {
  color: rgba(196, 180, 138, 0.55) !important;
  font-style: italic !important;
}

.rs-ab-idle i {
  color: rgba(196, 180, 138, 0.4) !important;
}

.rs-ab-skill {
  color: var(--df-gold) !important;
  font-family: 'Cinzel', serif !important;
  text-shadow: 0 0 12px rgba(201, 168, 76, 0.3) !important;
  animation: df-title-glow 4s ease-in-out infinite !important;
}

.rs-ab-action {
  color: var(--df-text) !important;
}

/* Progress bars with shimmer */
.rs-ab-bar {
  background: rgba(26, 22, 16, 0.8) !important;
  border-color: var(--df-border) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

.rs-ab-xp-fill {
  background:
    linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%),
    linear-gradient(90deg, #4ade80, #22863a, #166534) !important;
  background-size: 200% 100%, 100% 100% !important;
  animation: df-xp-shine 2s linear infinite !important;
  border-radius: 4px !important;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.2) !important;
}

.rs-ab-action-fill {
  background:
    linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%),
    linear-gradient(90deg, var(--df-gold-light), var(--df-gold), var(--df-gold-dark)) !important;
  background-size: 200% 100%, 100% 100% !important;
  animation: df-xp-shine 2s linear infinite !important;
  border-radius: 4px !important;
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.2) !important;
}

.rs-ab-bar-label {
  color: rgba(196, 180, 138, 0.65) !important;
}

.rs-ab-bar-text {
  color: var(--df-text) !important;
}

.rs-ab-stop {
  background: linear-gradient(180deg, #c41818, #7f1212) !important;
  border-color: rgba(220, 50, 50, 0.4) !important;
  transition: all 0.3s ease !important;
}

.rs-ab-stop:hover {
  box-shadow: var(--df-glow-red), 0 0 20px rgba(220, 50, 50, 0.2) !important;
  transform: scale(1.05) !important;
}

/* Skill icon level badge */
.rs-ab-icon span {
  background: linear-gradient(180deg, var(--df-gold-light), var(--df-gold-dark)) !important;
  color: var(--df-bg-deepest) !important;
  font-weight: 800 !important;
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.3) !important;
}

/* Player section */
.rs-ab-player {
  border-right-color: var(--df-border) !important;
  background: rgba(26, 22, 16, 0.4) !important;
}

.rs-ab-player-name {
  font-family: 'Cinzel', serif !important;
  transition: all 0.3s ease !important;
}

a.rs-ab-player-name:hover {
  text-shadow: 0 0 12px rgba(201, 168, 76, 0.4) !important;
}

.rs-ab-player-combat {
  color: var(--df-text) !important;
}

.rs-ab-player-combat span {
  color: var(--df-gold) !important;
}

.rs-ab-player-info a,
.rs-ab-player-info span {
  min-height: 0 !important;
  min-width: 0 !important;
}

/* Health & Prayer Orbs */
.rs-ab-orb-container {
  width: 34px !important;
  height: 34px !important;
}

.rs-ab-orb-regen {
  width: 34px !important;
  height: 34px !important;
}

.rs-ab-orb-bg {
  width: 28px !important;
  height: 28px !important;
  background: radial-gradient(circle at 30% 30%, #2a231a, #14110b) !important;
  border-color: var(--df-border-bright) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

.rs-ab-orb-text {
  color: var(--df-parchment) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  font-weight: 700 !important;
}

.rs-ab-health-fill,
.rs-ab-orb-fill-hp {
  animation: df-orb-pulse 3s ease-in-out infinite !important;
}

.rs-ab-health-orb .rs-ab-orb-bg {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 8px rgba(220, 50, 50, 0.15) !important;
}

.rs-ab-prayer-fill,
.rs-ab-orb-fill-pray {
  animation: df-orb-pulse 3s ease-in-out infinite !important;
  animation-delay: 1s !important;
}

.rs-ab-prayer-orb .rs-ab-orb-bg {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 8px rgba(160, 120, 255, 0.12) !important;
}

img.rs-ab-orb-icon {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)) !important;
  font-size: 0 !important;
  color: transparent !important;
}

/* Prayer orb - no glow on any state */
.rs-ab-prayer-orb,
.rs-ab-prayer-orb.active,
.rs-ab-prayer-orb:focus,
.rs-ab-prayer-orb:active {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.rs-ab-prayer-orb.active .rs-ab-orb-bg {
  border-color: #4a6a90 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.rs-ab-prayer-orb.active .rs-ab-orb-container {
  box-shadow: none !important;
  outline: none !important;
}

.rs-ab-prayer-orb.active .rs-ab-prayer-fill {
  background: linear-gradient(to top, #1a3060, #305080) !important;
}

.rs-ab-prayer-orb.active img.rs-ab-orb-icon {
  filter: brightness(1.3) drop-shadow(0 0 2px rgba(100, 200, 255, 0.6)) !important;
}

/* Special Attack Orb */
.rs-ab-special-orb .rs-ab-orb-icon {
  width: 22px !important;
  height: 22px !important;
}

.rs-ab-special-orb .rs-ab-orb-bg {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 8px rgba(200, 168, 0, 0.12) !important;
}

.rs-ab-special-fill {
  animation: df-orb-pulse 3s ease-in-out infinite !important;
  animation-delay: 2s !important;
}

.rs-ab-special-orb.spec-active .rs-ab-orb-bg {
  border-color: var(--df-gold) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 10px rgba(200, 168, 0, 0.4) !important;
}

.rs-ab-special-orb.spec-active .rs-ab-special-fill {
  background: linear-gradient(to top, #8a7500, #f0d000) !important;
}

.rs-ab-special-orb .rs-ab-regen-ring {
  stroke: rgba(200, 168, 0, 0.7) !important;
  filter: drop-shadow(0 0 4px rgba(200, 168, 0, 0.3)) !important;
}

/* Regen ring glow */
.rs-ab-regen-ring {
  stroke: rgba(74, 222, 128, 0.6) !important;
  filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.3)) !important;
}

/* Orbs mobile - override theme sizes for small screens */
@media (max-width: 767px) {
  .rs-ab-orb-container {
    width: 28px !important;
    height: 28px !important;
  }

  .rs-ab-orb-regen {
    width: 28px !important;
    height: 28px !important;
  }

  .rs-ab-orb-bg {
    top: 2px !important;
    left: 2px !important;
    width: 24px !important;
    height: 24px !important;
  }

  img.rs-ab-orb-icon {
    width: 16px !important;
    height: 16px !important;
  }

  .rs-ab-special-orb .rs-ab-orb-icon {
    width: 16px !important;
    height: 16px !important;
  }
}

/* Loot popup */
.rs-ab-loot-popup {
  background: linear-gradient(180deg, var(--df-bg-card), var(--df-bg-deep)) !important;
  border: 1px solid var(--df-border-bright) !important;
  color: var(--df-parchment) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), var(--df-glow-gold) !important;
}

.rs-ab-loot-popup.show {
  animation: df-loot-flash 0.6s ease-out !important;
}

/* =====================================================
   CHAT SYSTEM
   ===================================================== */

/* ── Wrapper — flex column so chat content sits above tabs ── */
._chat-box-wrap_1pskg_111 {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  left: 12px !important;
  gap: 0 !important;
  margin-bottom: 2px !important;
  width: 519px !important;
  max-width: calc(100% - 24px) !important;
}

/* ── Chat content container — override absolute positioning to stay in flow ── */
._chat-box-wrap_1pskg_111>#chatBoxContainer {
  position: relative !important;
  bottom: auto !important;
  left: 0 !important;
  right: auto !important;
  float: none !important;
  margin: 0 !important;
  order: 1 !important;
}

/* ── Tab row — horizontal strip spanning full chat width ── */
.chat-tabs-row {
  display: flex !important;
  flex-direction: row !important;
  order: 2 !important;
  flex-shrink: 0;
  width: 519px !important;
  max-width: 100% !important;
}

.chat-tabs-row>div {
  flex: 1 !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

.chat-tabs-row a {
  display: block !important;
  text-decoration: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

/* ── Chat content box — dimensions & dark fantasy background ── */
#chatBoxContainer>.osrs-chat-content {
  height: 135px !important;
  width: 519px !important;
  max-width: 100% !important;
  opacity: 1 !important;
  position: relative !important;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #7e7364 0%, #786d5e 50%, #726758 100%) !important;
  background-size: 512px 512px, cover !important;
  border: 1px solid rgba(201, 168, 76, 0.2) !important;
  border-bottom: none !important;
  border-radius: 4px 4px 0 0 !important;
  margin-bottom: 0 !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* ── Chat viewport — scrollable message area ── */
.osrs-chat-viewport {
  height: 109px !important;
  max-height: 109px !important;
  width: 510px !important;
  max-width: calc(100% - 9px) !important;
  top: 0 !important;
  position: absolute !important;
  margin-left: 5px !important;
  overflow: hidden !important;
  padding-bottom: 110px !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.1) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 168, 76, 0.25) transparent;
}

.osrs-chat-viewport::-webkit-scrollbar {
  width: 6px !important;
}

.osrs-chat-viewport::-webkit-scrollbar-track {
  background: transparent !important;
  border: none !important;
}

.osrs-chat-viewport::-webkit-scrollbar-thumb {
  background: rgba(201, 168, 76, 0.2) !important;
  border: none !important;
  border-radius: 3px !important;
}

.osrs-chat-viewport::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 168, 76, 0.35) !important;
}

/* ── Chat inner elements — all transparent so parent bg shows through ── */
#chatArea,
#chatArea .tab-pane,
#chatArea .scroll,
#chatArea .table,
#chatArea .table>tbody,
#chatArea .table>tbody>tr,
#chatArea .table>tbody>tr>td,
.osrs-chat-content .tab-content,
.osrs-chat-content .table,
.osrs-chat-viewport ._overview_1pskg_893 {
  background: transparent !important;
  background-color: transparent !important;
}

#chatArea .scroll {
  height: 109px !important;
}

#chatArea .table {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#chatArea .table>tbody>tr>td {
  border: none !important;
}

#chatArea .chat-line {
  outline: none !important;
  border: 0 !important;
  line-height: 15px !important;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15) !important;
}

/* Private messages — cyan */
.chat-msg-private,
#privateChatBox .chat-line {
  color: #00FFFF !important;
}

.chat-username {
  cursor: pointer !important;
  text-decoration: none !important;
}

.chat-username:hover {
  text-decoration: none !important;
  color: inherit !important;
}

.chat-msg-private .chat-username {
  color: #00FFFF !important;
}

/* Game log — all black text like OSRS */
.chat-msg-game,
.chat-msg-game * {
  color: #000000 !important;
}

/* Channel colors for All tab (match each channel's native color) */
.chat-msg-general {
  color: blue !important;
}

.chat-msg-general .chat-username {
  color: blue !important;
}

.chat-msg-guild {
  color: #7F0000 !important;
}

.chat-msg-guild .chat-username {
  color: #7F0000 !important;
}

.chat-msg-trade {
  color: #7F007F !important;
}

.chat-msg-trade .chat-username {
  color: #7F007F !important;
}

/* ── Chat input area ── */
#chatInput {
  padding-top: 3px !important;
}

#chatInput .input-group {
  top: 108px !important;
  position: relative !important;
  left: 0 !important;
  background: transparent !important;
}

#chatDisplayName {
  color: #000000 !important;
  font-weight: bold !important;
  font-size: 12px !important;
  line-height: 14px !important;
  font-family: inherit !important;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15) !important;
  box-shadow: none !important;
  margin-left: 7px !important;
  cursor: default !important;
  text-decoration: none !important;
  user-select: text !important;
}

#chatDisplayName img {
  border: 0 !important;
  vertical-align: baseline !important;
  height: 1em !important;
}

#chatMessage {
  all: unset !important;
  width: 300px !important;
  color: #0000ff !important;
  font-size: 12px !important;
  line-height: 14px !important;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15) !important;
}

#chatMessage:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════
   TAB STATES — Closed (small form) vs Open (chat visible)
   ══════════════════════════════════════════════════════════════ */

/* ── Base tab head — shared properties ── */
.chat-tabs-row ._chat-box-head_1pskg_133 {
  margin-top: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 34px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px 4px !important;
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-mid)) !important;
  border: 1px solid var(--df-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

/* ── Report Abuse tab — reddish tint ── */
#reportAbuseButton ._chat-box-head_1pskg_133 {
  background: linear-gradient(180deg, #6e2220, #2a1312) !important;
  border-color: rgba(180, 60, 50, 0.3) !important;
  color: var(--df-gold) !important;
}

#reportAbuseButton:hover ._chat-box-head_1pskg_133 {
  background: linear-gradient(180deg, #8a2a27, #3d1a17) !important;
  border-color: rgba(200, 70, 60, 0.4) !important;
}

/* ── CLOSED STATE — compact icon-only buttons (match interface tabs) ── */
.chat-tabs-row:not(.chat-open) {
  gap: 0 !important;
}

.chat-tabs-row:not(.chat-open)>div {
  flex: 0 0 auto !important;
  margin: 0 1px !important;
}

.chat-tabs-row:not(.chat-open) ._chat-box-head_1pskg_133 {
  height: 34px !important;
  width: 34px !important;
  max-width: 34px !important;
  border-radius: 5px !important;
  border-color: rgba(201, 168, 76, 0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.chat-tabs-row:not(.chat-open) .chat-tab-label {
  display: none !important;
}

/* All tab has no icon — always show its label */
.chat-tabs-row:not(.chat-open) #allChatButton .chat-tab-label {
  display: inline !important;
  font-size: 9px;
}

.chat-tabs-row:not(.chat-open) .chat-filter-indicator,
.chat-tabs-row:not(.chat-open) .chat-filter-indicator.filter-on,
.chat-tabs-row:not(.chat-open) .chat-filter-indicator.filter-friends,
.chat-tabs-row:not(.chat-open) .chat-filter-indicator.filter-off {
  display: none !important;
}

.chat-tabs-row:not(.chat-open) a:hover ._chat-box-head_1pskg_133 {
  background: linear-gradient(180deg, var(--df-bg-hover), var(--df-bg-surface)) !important;
  border-color: var(--df-border-bright) !important;
}

/* ── OPEN STATE — connected to chat content above ── */
.chat-tabs-row.chat-open ._chat-box-head_1pskg_133 {
  border-radius: 0 0 4px 4px !important;
  border-top-color: rgba(0, 0, 0, 0.25) !important;
}

/* Separator lines between tabs */
.chat-tabs-row.chat-open>div:not(:last-child) ._chat-box-head_1pskg_133 {
  border-right-color: rgba(201, 168, 76, 0.2) !important;
}

/* Inactive tabs when open — slightly recessed */
.chat-tabs-row.chat-open a:not(.chat-tab-active) ._chat-box-head_1pskg_133 {
  background: linear-gradient(180deg, var(--df-bg-card), var(--df-bg-deep)) !important;
}

.chat-tabs-row.chat-open a:not(.chat-tab-active):hover ._chat-box-head_1pskg_133 {
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-mid)) !important;
  border-color: var(--df-border-bright) !important;
  border-top-color: rgba(0, 0, 0, 0.25) !important;
}

/* Active tab when open — connects seamlessly to chat content */
.chat-tabs-row.chat-open a.chat-tab-active ._chat-box-head_1pskg_133 {
  background: linear-gradient(180deg, #3a3228, var(--df-bg-mid)) !important;
  border-color: var(--df-border-bright) !important;
  border-top: 1px solid transparent !important;
  box-shadow: 0 -2px 10px rgba(201, 168, 76, 0.1) inset !important;
}

/* Hover on any tab */
.chat-tabs-row a:hover ._chat-box-head_1pskg_133 {
  background: linear-gradient(180deg, var(--df-bg-hover), var(--df-bg-surface)) !important;
}

/* Active tab label gold */
.chat-tabs-row a.chat-tab-active .chat-tab-label {
  color: var(--df-gold) !important;
}

/* ── Tab inner layout: icon + name on top, filter below ── */
.chat-tab-top {
  display: flex;
  align-items: center;
  gap: 3px;
  line-height: 1;
}

.chat-tab-icon {
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  vertical-align: middle;
  flex-shrink: 0;
}

i.chat-tab-icon {
  font-size: 16px !important;
  width: auto !important;
  height: auto !important;
}

.chat-tab-label {
  font-size: 10px;
  color: #9e8e6e;
  white-space: nowrap;
  line-height: 1;
  transition: color 0.15s ease;
}

/* ── Filter status — plain centered text, override base badge styles ── */
.chat-tabs-row .chat-filter-indicator {
  position: static !important;
  display: block !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-transform: none !important;
  font-weight: normal !important;
  font-size: 8px !important;
  line-height: 1;
  text-align: center;
  margin-top: 1px;
  width: 100%;
}

.chat-tabs-row .chat-filter-indicator.filter-on {
  display: block !important;
  color: #4a4;
}

.chat-tabs-row .chat-filter-indicator.filter-friends {
  display: block !important;
  color: #bb4;
  background: none !important;
}

.chat-tabs-row .chat-filter-indicator.filter-off {
  display: block !important;
  color: #a44;
  background: none !important;
}

/* ── Unread message indicator — dot on tab ── */
.chat-tabs-row a.chat-tab-unread ._chat-box-head_1pskg_133 {
  position: relative;
}

.chat-tabs-row a.chat-tab-unread ._chat-box-head_1pskg_133::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  background: #ff4444;
  border-radius: 50%;
  box-shadow: 0 0 4px #ff4444;
  animation: unread-pulse 1.5s ease-in-out infinite;
}

@keyframes unread-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

/* ── Override base theme for all chat tab heads ── */
[class*="_chat-box-head_"] {
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-mid)) !important;
  border-color: var(--df-border) !important;
}

/* ── Filter context menu ── */
.chat-filter-menu {
  background: linear-gradient(180deg, #6b5a3e, #3b3121) !important;
  border: 2px solid #5c4c32 !important;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6) !important;
}

.chat-filter-menu .chat-filter-menu-header {
  color: #ff981f !important;
  text-shadow: 1px 1px 0 #000;
  border-bottom: 1px solid #5c4c32;
}

.chat-filter-menu .chat-filter-option {
  color: #ff981f !important;
  text-shadow: 1px 1px 0 #000;
}

.chat-filter-menu .chat-filter-option:hover {
  background: rgba(255, 152, 31, 0.15) !important;
  color: #ffff00 !important;
}

.chat-filter-menu .chat-filter-option.active {
  color: #ffff00 !important;
}

/* ══════════════════════════════════════════════════════
   Report Abuse Modal — Dark Fantasy
   ══════════════════════════════════════════════════════ */
.report-abuse-modal {
  position: fixed;
  inset: 0;
  z-index: 10015;
  background: rgba(14, 11, 7, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: calc(var(--rs-header-height) + var(--rs-nav-height) + var(--rs-action-bar-height) + 40px) 16px 20px;
  animation: ra-fade-in 0.2s ease;
}

@keyframes ra-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.report-abuse-panel {
  background:
    radial-gradient(ellipse 60% 30% at 50% 0%, rgba(201, 168, 76, 0.04) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--df-bg-card), var(--df-bg-deep));
  border: 1px solid var(--df-border-bright);
  border-top: 2px solid rgba(201, 168, 76, 0.5);
  border-radius: 6px;
  width: 380px;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 0 1px 0 rgba(201, 168, 76, 0.20),
    inset 0 -2px 0 rgba(0, 0, 0, 0.4),
    inset 0 0 40px rgba(0, 0, 0, 0.3),
    0 20px 80px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(201, 168, 76, 0.08);
  animation: ra-slide-in 0.25s ease;
}

@keyframes ra-slide-in {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.97);
  }

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

.report-abuse-header {
  padding: 12px 16px;
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--df-gold);
  text-shadow: 0 1px 8px rgba(201, 168, 76, 0.25);
  text-align: center;
  border-bottom: 1px solid var(--df-border);
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card));
  border-radius: 6px 6px 0 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.report-abuse-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--df-gold-dark);
  font-size: 22px;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.2s ease;
  line-height: 1;
}

.report-abuse-close:hover {
  color: var(--df-gold-light);
  opacity: 1;
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.4);
}

.report-abuse-body {
  padding: 14px 16px;
  overflow-y: auto;
  flex: 1;
}

.report-abuse-field {
  margin-bottom: 12px;
}

.report-abuse-field:last-child {
  margin-bottom: 0;
}

.report-abuse-field label {
  display: block;
  color: var(--df-gold);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.report-abuse-input {
  width: 100%;
  padding: 8px 10px;
  background: var(--df-bg-deep);
  border: 1px solid var(--df-border);
  border-radius: 4px;
  color: var(--df-parchment);
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.report-abuse-input::placeholder {
  color: var(--df-text-dim);
}

.report-abuse-input:focus {
  border-color: var(--df-gold-dark);
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.15);
}

.report-abuse-rules {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 250px;
  overflow-y: auto;
  background: var(--df-bg-deep);
  border: 1px solid var(--df-border);
  border-radius: 4px;
  padding: 4px;
}

.report-abuse-rules::-webkit-scrollbar {
  width: 6px;
}

.report-abuse-rules::-webkit-scrollbar-track {
  background: transparent;
}

.report-abuse-rules::-webkit-scrollbar-thumb {
  background: var(--df-border);
  border-radius: 3px;
}

.report-abuse-rules::-webkit-scrollbar-thumb:hover {
  background: var(--df-gold-dark);
}

.report-abuse-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  text-align: left;
  font-size: 12px;
  color: var(--df-parchment);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.report-rule-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  font-size: 10px;
  font-weight: 700;
  color: var(--df-gold-dark);
  background: rgba(201, 168, 76, 0.08);
  border-radius: 3px;
  flex-shrink: 0;
}

.report-abuse-rule:hover {
  background: rgba(201, 168, 76, 0.06);
  border-color: var(--df-border);
  color: var(--df-gold-light);
}

.report-abuse-rule:hover .report-rule-num {
  color: var(--df-gold);
}

.report-abuse-rule.selected {
  background: rgba(201, 168, 76, 0.12) !important;
  border-color: var(--df-gold-dark) !important;
  color: var(--df-gold-light) !important;
}

.report-abuse-rule.selected .report-rule-num {
  background: var(--df-gold-dark) !important;
  color: var(--df-bg-deep) !important;
}

.report-abuse-footer {
  padding: 12px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--df-border);
  background: var(--df-bg-deep);
  border-radius: 0 0 6px 6px;
}

.report-abuse-btn {
  padding: 7px 18px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Cinzel', serif;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.report-abuse-btn-cancel {
  background: transparent;
  border: 1px solid var(--df-border);
  color: var(--df-text-dim);
}

.report-abuse-btn-cancel:hover {
  border-color: var(--df-border-bright);
  color: var(--df-parchment);
  background: rgba(201, 168, 76, 0.04);
}

.report-abuse-btn-submit {
  background: linear-gradient(180deg, rgba(180, 50, 40, 0.5), rgba(120, 25, 20, 0.6));
  border: 1px solid rgba(200, 60, 50, 0.4);
  color: #f0c8c4;
}

.report-abuse-btn-submit:hover {
  background: linear-gradient(180deg, rgba(200, 55, 45, 0.6), rgba(140, 30, 25, 0.7));
  border-color: rgba(220, 70, 60, 0.5);
  color: #fff;
  box-shadow: 0 0 12px rgba(200, 60, 50, 0.2);
}

/* Quick Mute Toggle (staff only) */
.report-abuse-mute-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 0 -1px;
  background: rgba(229, 62, 62, 0.08);
  border-top: 1px solid rgba(229, 62, 62, 0.2);
}

.report-mute-label {
  color: var(--df-gold);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.report-mute-label i {
  color: #e53e3e;
  margin-right: 4px;
}

.report-toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

.report-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.report-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(30, 28, 22, 0.8);
  border: 1px solid var(--df-border);
  border-radius: 10px;
  transition: all 0.25s ease;
}

.report-toggle-slider::before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background: var(--df-text-dim);
  border-radius: 50%;
  transition: all 0.25s ease;
}

.report-toggle-switch input:checked+.report-toggle-slider {
  background: rgba(229, 62, 62, 0.3);
  border-color: rgba(229, 62, 62, 0.5);
}

.report-toggle-switch input:checked+.report-toggle-slider::before {
  transform: translateX(16px);
  background: #e53e3e;
  box-shadow: 0 0 6px rgba(229, 62, 62, 0.4);
}

.report-mute-hint {
  color: var(--df-text-dim);
  font-size: 10px;
  font-style: italic;
}

/* =====================================================
   INTERFACE TAB BAR & TAB BUTTONS
   ===================================================== */

/* Tab bar container — fixed bottom-right, vertical column */
.interface-tab-bar {
  position: fixed !important;
  right: 12px !important;
  bottom: 0 !important;
  z-index: 1000 !important;
  margin-bottom: 2px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Individual tab buttons — stacked vertically, match minimized chat tabs */
.interface-tab {
  display: block !important;
  float: none !important;
  height: 34px !important;
  min-height: 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-mid)) !important;
  border: 1px solid var(--df-border) !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.interface-tab:hover {
  background: linear-gradient(180deg, #3a3228, var(--df-bg-mid)) !important;
  border-color: var(--df-border-bright) !important;
}

.interface-tab.interface-tab-active {
  background: linear-gradient(180deg, #3a3228, var(--df-bg-mid)) !important;
  border-color: var(--df-border-bright) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 -2px 10px rgba(201, 168, 76, 0.1) inset !important;
}

/* Tab icon images */
.interface-tab img {
  height: 22px !important;
  width: 22px !important;
  margin: 5px !important;
  display: inline-block !important;
}

#equipBoxButton img {
  height: 28px !important;
  width: 28px !important;
  margin: 2px !important;
}

/* =====================================================
   INTERFACE PANEL — Content Container
   ===================================================== */

/* Content panel — positioned to the left of the tab column */
#interfaceBoxContainer {
  position: absolute !important;
  bottom: 0 !important;
  right: 100% !important;
  margin-right: 4px !important;
}

/* Content panel — uniform 204×275, edge-to-edge (no padding) */
#interfaceBoxContainer .interface-panel-content {
  width: 204px !important;
  height: 275px !important;
  opacity: 0.85 !important;
  background-image: none !important;
  background-color: #3e3629 !important;
  border: 2px solid var(--df-border-bright) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Tab content fills entire panel */
#interfaceBoxContainer .tab-content {
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* All tab panes fill container edge-to-edge */
#interfaceBoxContainer .tab-pane {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* =====================================================
   INVENTORY — no cell backgrounds, items float on panel bg
   ===================================================== */
#interfaceBoxContainer .inven-cell {
  background: none !important;
  border: none !important;
}

#interfaceBoxContainer .inven-cell.inven-empty {
  background: none !important;
  border: none !important;
}

#interfaceBoxContainer .inven-cell .inven img,
#interfaceBoxContainer .inven-cell .inven>img {
  image-rendering: pixelated !important;
}

/* Item equip flash — white glow on item, no square bg, faster */
.item-flash {
  animation: none !important;
  background: none !important;
}

.item-flash img {
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 2px #fff) !important;
  animation: item-glow-pulse 0.5s linear infinite alternate !important;
}

@keyframes item-glow-pulse {
  0% {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.3));
  }

  100% {
    filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 3px #fff);
  }
}

/* Item "Use" mode selection — no square glow, white outline on item */
.inven.use-mode {
  box-shadow: none !important;
  border-color: transparent !important;
  background: none !important;
}

.inven.use-mode img {
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 2px #fff) !important;
}

/* =====================================================
   SOCIAL PANELS (Friends / Ignores / Guild)
   ===================================================== */

/* Remove margin so list fills the tab pane edge-to-edge */
#interfaceBoxContainer .rs-social-list {
  margin: 0 !important;
  border: none !important;
  height: 100% !important;
  max-height: 100% !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Entries expand to fill space, pushing actions to bottom */
#interfaceBoxContainer .rs-social-entries {
  flex: 1 !important;
  max-height: none !important;
  overflow-y: auto !important;
}

/* Actions pinned to bottom as footer */
#interfaceBoxContainer .rs-social-actions {
  margin-top: auto !important;
  flex-shrink: 0 !important;
}

/* Guild actions — match friends/ignores button sizing */
#guild-box .rs-social-btn {
  font-size: 10px !important;
  padding: 5px 8px !important;
}

#guild-box .rs-social-actions select {
  font-size: 10px !important;
  padding: 3px 4px !important;
  background: var(--df-bg-deep) !important;
  color: var(--df-text) !important;
  border: 1px solid var(--df-border) !important;
  border-radius: 2px !important;
}

/* =====================================================
   SKILLS PANEL — sprite-based (174.png left, 175.png right)
   ===================================================== */

/* Skills box + panel fill the full tab pane height */
#interfaceBoxContainer #skills-box {
  height: 100% !important;
  max-height: 100% !important;
}

.osrs-skills-panel {
  height: 100% !important;
  background: #2d2b24 !important;
  border: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(8, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* Each skill cell — 293.png sprite background with dark border fallback */
.osrs-skill-cell {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  background: #2d2b24 url('/assets/game/slots/skill-cell.png') 0 0 / 100% 100% no-repeat !important;
  image-rendering: pixelated !important;
  cursor: pointer !important;
  position: relative !important;
  gap: 0 !important;
  overflow: visible !important;
}

.osrs-skill-cell:hover {
  filter: brightness(1.25) !important;
  box-shadow: none !important;
  z-index: 10 !important;
}

/* Children positioned absolutely — no flex layout influence */
.osrs-skill-left {
  position: absolute !important;
  top: 0 !important;
  left: 3px !important;
  width: 50% !important;
  height: 100% !important;
  background: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.osrs-skill-icon {
  width: auto !important;
  height: auto !important;
  image-rendering: pixelated !important;
}

.osrs-skill-right {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 50% !important;
  height: 100% !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Hide old separator */
.osrs-level-separator {
  display: none !important;
}

/* XP progress bar — thin bar at the bottom of each skill cell */
.osrs-skill-progress {
  position: absolute !important;
  bottom: 1px !important;
  left: 2px !important;
  right: 2px !important;
  height: 3px !important;
  background: #0d0d0d !important;
  border-radius: 0 !important;
  z-index: 2 !important;
}

.osrs-skill-progress-fill {
  height: 100% !important;
  background: linear-gradient(to bottom, #00b400 0%, #007800 100%) !important;
  border-radius: 0 !important;
  transition: width 0.3s ease !important;
}

/* Draw "/" separator line — replaces .osrs-skill-levels::before (element removed) */
.osrs-skill-right::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 28px !important;
  height: 1px !important;
  background: #000 !important;
  transform: translate(-50%, -50%) rotate(-50deg) !important;
  box-shadow: none !important;
  z-index: 1 !important;
}

/* Level numbers — 10px, not bold, tightly packed around / */
.osrs-level-current {
  font-size: 10px !important;
  font-weight: normal !important;
  top: 6px !important;
  left: 5px !important;
}

.osrs-level-max {
  font-size: 10px !important;
  font-weight: normal !important;
  bottom: 6px !important;
  right: 5px !important;
}

/* Boosted skill — green */
.osrs-level-current.skill-boosted {
  color: #00ff00 !important;
}

/* Last two rows: show tooltip above instead of below to prevent clipping */
.osrs-skill-cell:nth-child(n+19):hover::after,
.osrs-total-level:hover::after {
  top: auto !important;
  bottom: 100% !important;
}

/* Total level row — spans cols 2-3, black background like OSRS */
.osrs-total-level {
  grid-column: 2 / 4 !important;
  background: #000 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 !important;
}

.osrs-total-label {
  color: #ffff00 !important;
  font-size: 11px !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 !important;
  font-family: 'runescape_uf', sans-serif !important;
}

.osrs-total-value {
  color: #ffff00 !important;
  font-size: 11px !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 !important;
  font-family: 'runescape_uf', sans-serif !important;
}

/* =====================================================
   EQUIPMENT PANEL
   ===================================================== */

/* Equipment tab fills container */
#interfaceBoxContainer #equip-box {
  height: 100% !important;
  max-height: 100% !important;
}

#interfaceBoxContainer #equip-box.active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Panel fills available width */
.osrs-equipment-panel {
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  border: none !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}

/* Equipment rows — allow connector overflow */
.osrs-equip-row {
  display: flex !important;
  justify-content: center !important;
  gap: 4px !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
  position: relative !important;
}

/* Rows 3 & 5 (weapon/body/shield, hands/feet/ring) — wider spread */
.osrs-equip-row:nth-child(3),
.osrs-equip-row:nth-child(5) {
  gap: 16px !important;
}

/* Slots — use 170.png as the actual slot background */
.osrs-equip-slot {
  width: 36px !important;
  height: 36px !important;
  background: url('/assets/game/slots/170.png') center / contain no-repeat !important;
  border: none !important;
  border-radius: 0 !important;
  transition: all 0.3s ease !important;
  overflow: visible !important;
  image-rendering: pixelated !important;
}

.osrs-equip-spacer {
  width: 36px !important;
  height: 36px !important;
}

/* Slot icon images — centered inside the slot bg */
.osrs-slot-bg {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  image-rendering: pixelated !important;
  pointer-events: none !important;
}

/* Hide slot icon when item is equipped */
.osrs-equip-slot.has-item .osrs-slot-bg {
  opacity: 0 !important;
  display: none !important;
}

/* Item container — fill slot and center content */
.osrs-slot-item {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Equip div — fill slot, no extra border/spacing */
.osrs-slot-item .equip {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: none !important;
}

/* Item images — fit within slot */
.osrs-slot-item .equip>img {
  max-width: 32px !important;
  max-height: 32px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  filter: none !important;
}

/* Direct img in slot-item (initial page load without .equip wrapper) */
.osrs-slot-item>img {
  max-width: 32px !important;
  max-height: 32px !important;
  image-rendering: pixelated !important;
  filter: none !important;
}

/* Stackable item amounts in equipment slots (ammo etc) */
.osrs-slot-item .item-amount {
  position: absolute !important;
  top: 1px !important;
  left: 2px !important;
  font-size: 10px !important;
  z-index: 2 !important;
}

.osrs-equip-slot:hover {
  filter: brightness(1.3) !important;
}

.osrs-equip-slot.has-item {
  /* No extra border — 170.png bg is the boundary */
}

/* ── Connector lines between slots ── */
.osrs-equip-slot::before,
.osrs-equip-slot::after {
  content: none;
  position: absolute;
  background: rgba(60, 50, 35, 0.8);
  z-index: 0;
  pointer-events: none;
}

/* Vertical: Head → Neck */
#equip-slot-head::after {
  content: '' !important;
  left: 50% !important;
  top: 100% !important;
  width: 1px !important;
  height: 2px !important;
  transform: translateX(-50%) !important;
}

/* Horizontal: Cape → Neck */
#equip-slot-cape::after {
  content: '' !important;
  left: 100% !important;
  top: 50% !important;
  width: 4px !important;
  height: 1px !important;
  transform: translateY(-50%) !important;
}

/* Vertical: Neck → Body */
#equip-slot-neck::before {
  content: '' !important;
  left: 50% !important;
  top: 100% !important;
  width: 1px !important;
  height: 2px !important;
  transform: translateX(-50%) !important;
}

/* Horizontal: Neck → Ammo */
#equip-slot-neck::after {
  content: '' !important;
  left: 100% !important;
  top: 50% !important;
  width: 4px !important;
  height: 1px !important;
  transform: translateY(-50%) !important;
}

/* Horizontal: Weapon → Body */
#equip-slot-weapon::after {
  content: '' !important;
  left: 100% !important;
  top: 50% !important;
  width: 16px !important;
  height: 1px !important;
  transform: translateY(-50%) !important;
}

/* Vertical: Weapon → Hands (long, spans row 4) */
#equip-slot-weapon::before {
  content: '' !important;
  left: 50% !important;
  top: 100% !important;
  width: 1px !important;
  height: 40px !important;
  transform: translateX(-50%) !important;
}

/* Horizontal: Body ← Shield */
#equip-slot-shield::before {
  content: '' !important;
  right: 100% !important;
  top: 50% !important;
  width: 16px !important;
  height: 1px !important;
  transform: translateY(-50%) !important;
}

/* Vertical: Shield → Ring (long, spans row 4) */
#equip-slot-shield::after {
  content: '' !important;
  left: 50% !important;
  top: 100% !important;
  width: 1px !important;
  height: 40px !important;
  transform: translateX(-50%) !important;
}

/* Vertical: Body → Legs */
#equip-slot-body::after {
  content: '' !important;
  left: 50% !important;
  top: 100% !important;
  width: 1px !important;
  height: 2px !important;
  transform: translateX(-50%) !important;
}

/* Vertical: Legs → Feet */
#equip-slot-legs::after {
  content: '' !important;
  left: 50% !important;
  top: 100% !important;
  width: 1px !important;
  height: 2px !important;
  transform: translateX(-50%) !important;
}

/* Bottom buttons — compact */
.osrs-equip-buttons {
  gap: 4px !important;
  margin-top: 2px !important;
}

.osrs-equip-btn {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  background: url('/assets/game/slots/170.png') center / contain no-repeat !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  image-rendering: pixelated !important;
  transition: filter 0.3s ease !important;
}

.osrs-equip-btn>img {
  max-width: 30px !important;
  max-height: 30px !important;
  image-rendering: pixelated !important;
  opacity: 1 !important;
}

.osrs-equip-btn:hover {
  filter: brightness(1.3) !important;
}

/* =====================================================
   COMBAT OPTIONS
   ===================================================== */
.osrs-combat-options {
  background: var(--df-bg-deep) !important;
  border-color: var(--df-border) !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.osrs-combat-header {
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-mid)) !important;
  border-bottom: 1px solid var(--df-border) !important;
  padding: 4px 6px !important;
  margin: -4px -4px 4px -4px !important;
  width: calc(100% + 8px) !important;
  box-sizing: border-box !important;
}

.osrs-combat-title {
  align-items: flex-start !important;
}

.osrs-combat-title>span:first-child {
  color: var(--df-gold) !important;
  text-shadow: 0 0 8px rgba(201, 168, 76, 0.2) !important;
  font-size: 12px !important;
}

.osrs-combat-level {
  color: var(--df-text-dim) !important;
  font-size: 11px !important;
}

.osrs-style-btn {
  background: var(--df-bg-card) !important;
  border-color: var(--df-border) !important;
  color: var(--df-text) !important;
  transition: all 0.3s ease !important;
}

.osrs-style-btn:hover {
  background: rgba(201, 168, 76, 0.1) !important;
  border-color: var(--df-border-bright) !important;
}

.osrs-style-btn.active {
  background: rgba(201, 168, 76, 0.15) !important;
  border-color: var(--df-gold) !important;
  color: var(--df-gold) !important;
  box-shadow: inset 0 0 10px rgba(201, 168, 76, 0.1), 0 0 10px rgba(201, 168, 76, 0.15) !important;
}

.osrs-style-name {
  color: var(--df-gold) !important;
}

.osrs-auto-retaliate {
  background: var(--df-bg-card) !important;
  border-color: var(--df-border) !important;
  color: var(--df-text) !important;
  transition: all 0.3s ease !important;
}

.osrs-auto-retaliate.on,
.osrs-auto-retaliate.active {
  border-color: rgba(74, 222, 128, 0.4) !important;
  box-shadow: var(--df-glow-green) !important;
}

.osrs-auto-retaliate.off {
  border-color: rgba(220, 50, 50, 0.3) !important;
}

.osrs-spec-bar-fill,
.osrs-special-fill {
  background:
    linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, 0.15) 50%, transparent 70%),
    linear-gradient(90deg, var(--df-gold-light), var(--df-gold-dark)) !important;
  background-size: 200% 100%, 100% 100% !important;
  animation: df-xp-shine 2s linear infinite !important;
}

.osrs-special-bar.spec-active {
  background: rgba(255, 215, 0, 0.25) !important;
  border-color: #FFD700 !important;
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.5), inset 0 0 4px rgba(255, 215, 0, 0.3) !important;
}

.osrs-special-bar.spec-active .osrs-special-fill {
  background:
    linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%),
    linear-gradient(90deg, #FFD700, #FFA500) !important;
  background-size: 200% 100%, 100% 100% !important;
}

/* =====================================================
   PRAYER PANEL
   ===================================================== */
.osrs-prayer-panel {
  background: var(--df-bg-deep) !important;
  border-color: var(--df-border) !important;
}

.osrs-prayer-header {
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-mid)) !important;
  border-bottom-color: var(--df-border) !important;
  color: var(--df-gold) !important;
}

.osrs-prayer-grid {
  background: var(--df-bg-deepest) !important;
}

.osrs-prayer-slot {
  border-color: rgba(201, 168, 76, 0.06) !important;
  transition: all 0.25s ease !important;
}

.osrs-prayer-slot:hover {
  background: rgba(201, 168, 76, 0.06) !important;
}

.osrs-prayer-slot.prayer-active {
  background: rgba(201, 168, 76, 0.12) !important;
  border-color: var(--df-gold) !important;
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.2) !important;
}

.osrs-prayer-slot.prayer-active img {
  filter: brightness(1.3) drop-shadow(0 0 4px rgba(201, 168, 76, 0.4)) !important;
}

.osrs-prayer-slot.locked {
  opacity: 0.3 !important;
}

.osrs-quick-prayers-btn {
  border-color: var(--df-gold-dark) !important;
  color: var(--df-gold) !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

/* =====================================================
   FRIENDS/SOCIAL
   ===================================================== */
.rs-social-list {
  background: var(--df-bg-deep) !important;
  border-color: var(--df-border) !important;
}

.rs-social-header {
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-mid)) !important;
  border-bottom-color: var(--df-border) !important;
  color: var(--df-gold) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.rs-social-toggle-icon {
  filter: brightness(1.2) !important;
}

.rs-social-btn {
  background: var(--df-bg-card) !important;
  border-color: var(--df-border) !important;
  color: var(--df-gold) !important;
}

/* Guild system message in chat */
.guild-system-msg {
  color: var(--df-gold) !important;
  font-style: italic !important;
}

.guild-guest-tag {
  color: #7a9cc6 !important;
  font-size: 10px !important;
  margin-right: 3px !important;
}

/* =====================================================
   TRAVEL PANEL — Collapsible redesign
   ===================================================== */
.rs-travel-panel {
  background: linear-gradient(180deg, rgba(42, 35, 26, 0.95), rgba(26, 22, 16, 0.98)) !important;
  border: 1px solid var(--df-border-bright) !important;
  border-radius: 10px !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(201, 168, 76, 0.04),
    inset 0 1px 0 rgba(201, 168, 76, 0.08) !important;
  overflow: hidden !important;
}

/* Toggle chevron */
.rs-travel-toggle {
  margin-left: auto !important;
  color: var(--df-gold-dark) !important;
  font-size: 14px !important;
  transition: transform 0.35s ease, color 0.3s ease !important;
  padding: 4px 8px !important;
}

.rs-travel-panel:not(.collapsed) .rs-travel-toggle {
  transform: rotate(180deg) !important;
}

.rs-location-header:hover .rs-travel-toggle {
  color: var(--df-gold-light) !important;
}

/* Collapsible body */
.rs-travel-body {
  max-height: 800px !important;
  overflow: hidden !important;
  transition: max-height 0.4s ease, opacity 0.3s ease !important;
  opacity: 1 !important;
}

.rs-travel-panel.collapsed .rs-travel-body {
  max-height: 0 !important;
  opacity: 0 !important;
}

/* Collapsed state — compact header */
.rs-travel-panel.collapsed {
  border-radius: 8px !important;
}

.rs-travel-panel.collapsed .rs-location-header {
  border-bottom: none !important;
  padding: 10px 16px !important;
}

/* Location header — atmospheric, flex row for toggle */
.rs-location-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(201, 168, 76, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, rgba(58, 50, 40, 0.9), rgba(42, 35, 26, 0.95)) !important;
  border-bottom: 1px solid var(--df-border) !important;
  padding: 12px 16px !important;
  transition: all 0.3s ease !important;
}

.rs-location-header:hover {
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(201, 168, 76, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, rgba(62, 54, 44, 0.95), rgba(46, 39, 30, 0.98)) !important;
}

.rs-location-icon {
  background: radial-gradient(circle, rgba(201, 168, 76, 0.12), rgba(26, 22, 16, 0.8)) !important;
  border: 1px solid var(--df-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.08) !important;
  font-size: 1.8em !important;
}

.rs-location-name {
  color: var(--df-gold) !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  text-shadow: 0 0 12px rgba(201, 168, 76, 0.25) !important;
  animation: df-title-glow 5s ease-in-out infinite !important;
}

.rs-location-region {
  color: var(--df-text-dim) !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-size: 0.75em !important;
}

.rs-location-description {
  color: rgba(196, 180, 138, 0.6) !important;
  font-family: 'Crimson Text', serif !important;
  font-style: italic !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.08) !important;
}

/* Location badges */
.rs-badge {
  font-family: 'Cinzel', serif !important;
  letter-spacing: 1px !important;
}

.rs-badge-bank {
  background: rgba(74, 222, 128, 0.15) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(74, 222, 128, 0.3) !important;
}

.rs-badge-pvp {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.rs-badge-danger {
  background: rgba(180, 50, 50, 0.2) !important;
  color: #ff6666 !important;
  border: 1px solid rgba(180, 50, 50, 0.3) !important;
}

/* Action tabs */
.rs-action-tabs {
  background: var(--df-bg-deep) !important;
  border-bottom: 1px solid var(--df-border) !important;
}

.rs-action-tab {
  color: rgba(201, 168, 76, 0.4) !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  transition: all 0.3s ease !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
}

.rs-action-tab:hover {
  color: var(--df-parchment) !important;
  background: rgba(201, 168, 76, 0.04) !important;
}

.rs-action-tab.active {
  color: var(--df-gold) !important;
  border-bottom-color: var(--df-gold) !important;
  text-shadow: 0 0 8px rgba(201, 168, 76, 0.25) !important;
  background: rgba(201, 168, 76, 0.06) !important;
}

/* Tab content */
.rs-tab-content {
  background: transparent !important;
  scrollbar-color: rgba(201, 168, 76, 0.2) transparent !important;
}

/* Travel routes — atmospheric cards */
.rs-route-item {
  background: linear-gradient(180deg, rgba(58, 50, 40, 0.5), rgba(42, 35, 26, 0.5)) !important;
  border: 1px solid rgba(201, 168, 76, 0.1) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.rs-route-item::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, transparent 40%, rgba(201, 168, 76, 0.03) 50%, transparent 60%) !important;
  background-size: 200% 200% !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
}

.rs-route-item:hover::before {
  opacity: 1 !important;
  animation: df-shimmer 2s ease-in-out !important;
}

.rs-route-item:hover {
  border-color: var(--df-border-bright) !important;
  background: linear-gradient(180deg, rgba(58, 50, 40, 0.8), rgba(42, 35, 26, 0.7)) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 12px rgba(201, 168, 76, 0.06) !important;
  transform: translateX(3px) !important;
}

.rs-route-dest {
  color: var(--df-gold) !important;
  font-family: 'Cinzel', serif !important;
}

.rs-route-meta {
  color: var(--df-text-dim) !important;
}

.rs-route-cost {
  color: #ff9900 !important;
}

.rs-route-free {
  color: #4ade80 !important;
}

.rs-route-method {
  font-size: 1.4em !important;
}

/* ── Travel Method Route Icons (inline medallions) ── */
.tm-route-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  border: 2px solid rgba(201, 168, 76, 0.3);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}

.rs-route-item:hover .tm-route-icon {
  transform: scale(1.1);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.4), 0 0 8px var(--tm-glow, rgba(201, 168, 76, 0.3));
}

/* Navbar small variant */
.tm-route-icon-sm {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border: 1px solid rgba(201, 168, 76, 0.3);
}

/* ── Theme colors per travel method ── */
.tm-walk {
  background: linear-gradient(135deg, #4a3c28, #362b1a);
  color: #c9a84c;
  --tm-glow: rgba(201, 168, 76, 0.3);
  border-color: rgba(201, 168, 76, 0.3);
}

.tm-boat {
  background: linear-gradient(135deg, #1a3a5c, #0f2840);
  color: #5cb8e6;
  --tm-glow: rgba(92, 184, 230, 0.35);
  border-color: rgba(92, 184, 230, 0.35);
}

.tm-glider {
  background: linear-gradient(135deg, #2a4a2a, #1a351a);
  color: #7acc7a;
  --tm-glow: rgba(122, 204, 122, 0.35);
  border-color: rgba(122, 204, 122, 0.3);
}

.tm-minecart {
  background: linear-gradient(135deg, #4a3a2a, #3a2a1a);
  color: #d4956a;
  --tm-glow: rgba(212, 149, 106, 0.35);
  border-color: rgba(212, 149, 106, 0.3);
}

.tm-teleport {
  background: linear-gradient(135deg, #3a2a5c, #281a4a);
  color: #b088e8;
  --tm-glow: rgba(176, 136, 232, 0.4);
  border-color: rgba(176, 136, 232, 0.35);
}

.tm-fairy {
  background: linear-gradient(135deg, #3a2a4a, #2a1a3a);
  color: #e088d4;
  --tm-glow: rgba(224, 136, 212, 0.4);
  border-color: rgba(224, 136, 212, 0.3);
}

.tm-spirit {
  background: linear-gradient(135deg, #1a4a2a, #0f3a1a);
  color: #5ce68a;
  --tm-glow: rgba(92, 230, 138, 0.35);
  border-color: rgba(92, 230, 138, 0.3);
}

.tm-canoe {
  background: linear-gradient(135deg, #1a3a4a, #0f2a3a);
  color: #5abed4;
  --tm-glow: rgba(90, 190, 212, 0.35);
  border-color: rgba(90, 190, 212, 0.3);
}

.tm-charter {
  background: linear-gradient(135deg, #2a3a5c, #1a2a4a);
  color: #6aa0d4;
  --tm-glow: rgba(106, 160, 212, 0.35);
  border-color: rgba(106, 160, 212, 0.35);
}

/* Facilities */
.rs-facility-item {
  background: rgba(42, 35, 26, 0.4) !important;
  border: 1px solid rgba(201, 168, 76, 0.08) !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
}

.rs-facility-item:hover {
  border-color: var(--df-border) !important;
  background: rgba(42, 35, 26, 0.7) !important;
}

/* Enemies list */
.rs-enemy-item {
  background: rgba(42, 35, 26, 0.4) !important;
  border: 1px solid rgba(201, 168, 76, 0.08) !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
}

.rs-enemy-item:hover {
  border-color: rgba(220, 50, 50, 0.3) !important;
  background: rgba(60, 30, 30, 0.3) !important;
  box-shadow: 0 0 10px rgba(220, 50, 50, 0.08) !important;
}

/* Map locations */
.rs-map-location {
  background: rgba(42, 35, 26, 0.5) !important;
  border: 1px solid rgba(201, 168, 76, 0.1) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

.rs-map-location:hover {
  border-color: var(--df-border-bright) !important;
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.08) !important;
}

.rs-map-location.rs-current-location {
  border-color: var(--df-gold) !important;
  box-shadow: 0 0 15px rgba(201, 168, 76, 0.15) !important;
}

/* Region filter */
.rs-region-btn {
  background: var(--df-bg-card) !important;
  border: 1px solid var(--df-border) !important;
  color: var(--df-text-dim) !important;
  font-family: 'Cinzel', serif !important;
  transition: all 0.3s ease !important;
}

.rs-region-btn:hover {
  color: var(--df-parchment) !important;
}

.rs-region-btn.active {
  color: var(--df-gold) !important;
  border-color: var(--df-gold) !important;
  background: rgba(201, 168, 76, 0.1) !important;
}

/* Travel modal */
.rs-travel-modal {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}

.rs-travel-modal-content {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--df-bg-card), var(--df-bg-deep)) !important;
  border: 1px solid var(--df-border-bright) !important;
  border-top: 2px solid rgba(201, 168, 76, 0.4) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(201, 168, 76, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(201, 168, 76, 0.06) !important;
  padding: 0 !important;
  overflow: hidden !important;
  width: 380px !important;
  max-width: 90vw !important;
  position: relative !important;
}

.rs-travel-animation {
  display: none !important;
}

/* Info panel below scene */
.ts-info {
  padding: 20px 30px 28px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.rs-travel-progress-bar {
  background: var(--df-bg-deepest) !important;
  border: 1px solid var(--df-border) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.rs-travel-progress-fill {
  background:
    linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, 0.15) 50%, transparent 70%),
    linear-gradient(90deg, var(--df-gold-light), var(--df-gold), var(--df-gold-dark)) !important;
  background-size: 200% 100%, 100% 100% !important;
  animation: df-xp-shine 1.5s linear infinite !important;
  border-radius: 6px !important;
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.25) !important;
}

.rs-travel-progress-text {
  color: var(--df-parchment) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 13px !important;
  letter-spacing: 0.3px !important;
  margin-bottom: 12px !important;
}

.rs-fast-travel-btn {
  background: linear-gradient(180deg, var(--df-gold), var(--df-gold-dark)) !important;
  border: 1px solid rgba(240, 216, 120, 0.4) !important;
  color: var(--df-bg-deepest) !important;
  font-family: 'Cinzel', serif !important;
  margin-top: 14px !important;
}

/* ── Travel Method Label ── */
.ts-method-label {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--df-text-dim);
  margin-bottom: 6px;
}

.ts-method-label i {
  margin-right: 4px;
}

/* ══════════════════════════════════════════════════════
   Travel Scenes — unique animated visuals per method
   ══════════════════════════════════════════════════════ */
.ts-scene {
  position: relative;
  width: 100%;
  height: 110px;
  overflow: hidden;
  border-bottom: 1px solid var(--df-border);
}

/* ── WALK: Footstep trail with castles ── */
.ts-walk {
  background:
    radial-gradient(ellipse 60% 50% at 50% 60%, rgba(42, 36, 24, 0.4) 0%, transparent 70%),
    linear-gradient(180deg, #1e1a12 0%, #2a2418 50%, #1e1a12 100%);
}

/* Parchment-like subtle texture for the trail area */
.ts-walk::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Location vexillums at origin and destination */
.ts-loc {
  position: absolute;
  z-index: 2;
}

.ts-loc-origin {
  top: 2px;
  left: 4px;
}

.ts-loc-dest {
  bottom: 4px;
  right: 4px;
  animation: ts-dest-glow 2s ease-in-out infinite alternate;
}

@keyframes ts-dest-glow {
  from {
    filter: drop-shadow(0 0 3px rgba(92, 200, 92, 0.15));
  }

  to {
    filter: drop-shadow(0 0 8px rgba(92, 200, 92, 0.35));
  }
}

/* Mini vexillum container */
.ts-vex-mini {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Scaled-down vexillum */
.ts-vex-sm {
  width: 24px !important;
  height: 34px !important;
}

.ts-vex-sm .vex-pole {
  width: 2px !important;
}

.ts-vex-sm .vex-pole::before {
  margin-left: -3px !important;
  border-left-width: 3px !important;
  border-right-width: 3px !important;
  border-bottom-width: 5px !important;
  top: -4px !important;
}

.ts-vex-sm .vex-crossbar {
  top: 5px !important;
  height: 2px !important;
  left: 1px !important;
  right: 1px !important;
}

.ts-vex-sm .vex-crossbar::before,
.ts-vex-sm .vex-crossbar::after {
  width: 3px !important;
  height: 5px !important;
  top: -1px !important;
}

.ts-vex-sm .vex-banner {
  top: 7px !important;
  left: 2px !important;
  right: 2px !important;
  bottom: 2px !important;
}

.ts-vex-sm .vex-emblem {
  font-size: 9px !important;
  margin-top: 0 !important;
}

.ts-vex-sm .vex-fringe {
  height: 3px !important;
}

/* Vexillum square icons in travel route lists — use city emblem colors */
.rs-route-vex .vex-emblem {
  font-size: inherit;
  margin-top: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

/* Location name label */
.ts-vex-name {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 600;
  color: var(--df-parchment);
  opacity: 0.7;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.5px;
}

/* Individual footstep — hidden until revealed by progress */
.ts-footstep {
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.4s ease;
  transform-origin: center center;
  z-index: 1;
}

.ts-footstep.revealed {
  opacity: 1;
}

/* Foot shape — small boot print */
.ts-foot-shape {
  width: 4px;
  height: 9px;
  position: relative;
}

/* Ball of foot / sole */
.ts-foot-shape::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 6px;
  background: rgba(160, 120, 60, 0.55);
  border-radius: 50% 50% 35% 35%;
  box-shadow: 0 0 3px rgba(160, 120, 60, 0.15);
}

/* Heel */
.ts-foot-shape::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 3px;
  height: 3px;
  background: rgba(160, 120, 60, 0.4);
  border-radius: 30% 30% 45% 45%;
}

/* Left foot arch curves inward */
.ts-foot-l .ts-foot-shape::before {
  border-radius: 55% 45% 30% 40%;
}

/* Right foot arch curves inward (mirrored) */
.ts-foot-r .ts-foot-shape::before {
  border-radius: 45% 55% 40% 30%;
}

/* Subtle glow on most recently revealed footstep */
.ts-footstep.revealed~.ts-footstep:not(.revealed),
.ts-footstep:not(.revealed) {
  opacity: 0;
}

.ts-footstep.revealed {
  opacity: 1;
}

/* ── BOAT / CHARTER: Waves with ship sailing ── */
.ts-boat,
.ts-charter {
  background: linear-gradient(180deg, #5a8ab5 0%, #7ab0d4 30%, #3a7aa8 55%, #1a5a88 70%, #0f3a5c 100%);
}

.ts-wave {
  position: absolute;
  left: -10%;
  right: -10%;
  height: 30px;
  bottom: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath d='M0 30 Q150 0 300 30 T600 30 T900 30 T1200 30 V60 H0Z' fill='rgba(255,255,255,0.2)'/%3E%3C/svg%3E");
  background-size: 300px 30px;
  background-repeat: repeat-x;
  animation: ts-wave-flow 3s linear infinite;
}

@keyframes ts-wave-flow {
  to {
    background-position-x: -300px;
  }
}

/* Brigantine ship — centered, bobbing */
.ts-ship {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  animation: ts-ship-bob 2.5s ease-in-out infinite;
}

@keyframes ts-ship-bob {

  0%,
  100% {
    transform: translateX(-50%) translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateX(-50%) translateY(4px) rotate(1.5deg);
  }
}

/* Hull — wooden brigantine with raised stern & bow */
.ts-hull {
  width: 62px;
  height: 16px;
  position: relative;
  background: linear-gradient(180deg, #7a4c2a 0%, #5a3518 60%, #3e2410 100%);
  clip-path: polygon(0% 30%, 8% 0%, 92% 0%, 100% 40%, 95% 100%, 5% 100%);
}

/* Waterline stripe */
.ts-hull::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 5%;
  right: 5%;
  height: 4px;
  background: linear-gradient(180deg, #2a1a0e, #1a0f08);
  border-radius: 0 0 2px 2px;
}

/* Portholes */
.ts-hull::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 14px;
  width: 3px;
  height: 3px;
  background: rgba(255, 220, 140, 0.5);
  border-radius: 50%;
  box-shadow: 9px 0 0 rgba(255, 220, 140, 0.4), 18px 0 0 rgba(255, 220, 140, 0.4), 27px 0 0 rgba(255, 220, 140, 0.35);
}

/* Stern cabin */
.ts-stern {
  position: absolute;
  bottom: 14px;
  left: 0;
  width: 14px;
  height: 10px;
  background: linear-gradient(180deg, #6b4226, #4a2e18);
  border-radius: 2px 1px 0 0;
  border-top: 1px solid #8a5a32;
}

.ts-stern::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 2px;
  height: 2px;
  background: rgba(255, 220, 140, 0.5);
  border-radius: 50%;
  box-shadow: 5px 0 0 rgba(255, 220, 140, 0.4);
}

/* Bowsprit — angled spar at front */
.ts-bowsprit {
  position: absolute;
  bottom: 12px;
  right: -10px;
  width: 18px;
  height: 2px;
  background: linear-gradient(90deg, #5a3a1e, #4a2e14);
  transform: rotate(-20deg);
  transform-origin: left center;
}

/* Rigging line from bowsprit to foremast */
.ts-bowsprit::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 2px;
  height: 1px;
  background: rgba(160, 140, 100, 0.3);
  transform: rotate(25deg);
  transform-origin: left center;
}

/* Masts */
.ts-mast {
  position: absolute;
  bottom: 16px;
  left: 16px;
  width: 2px;
  height: 44px;
  background: linear-gradient(180deg, #6b4a2e, #4a2e18);
}

.ts-mast-fore {
  left: 40px;
  height: 32px;
}

/* Crow's nest on main mast */
.ts-mast::before {
  content: '';
  position: absolute;
  top: 2px;
  left: -3px;
  width: 8px;
  height: 3px;
  background: #5a3a1e;
  border-radius: 1px;
}

/* Sails — filled canvas, wind-filled to the right */
.ts-sail {
  position: absolute;
  left: 2px;
  background: linear-gradient(135deg, rgba(235, 225, 200, 0.9), rgba(210, 195, 165, 0.8));
  border-radius: 0 5px 5px 0;
  border-left: 1px solid rgba(160, 140, 100, 0.4);
  animation: ts-sail-billow 3s ease-in-out infinite;
}

.ts-sail-main {
  bottom: 6px;
  width: 18px;
  height: 22px;
}

.ts-sail-top {
  bottom: 30px;
  width: 13px;
  height: 12px;
}

.ts-sail-fore {
  bottom: 4px;
  width: 15px;
  height: 18px;
}

@keyframes ts-sail-billow {

  0%,
  100% {
    border-radius: 0 5px 5px 0;
    transform: scaleX(1);
  }

  50% {
    border-radius: 0 7px 7px 0;
    transform: scaleX(1.08);
  }
}

/* Flag at top of main mast — trailing right with the wind */
.ts-flag {
  position: absolute;
  bottom: 58px;
  left: 8px;
  width: 10px;
  height: 6px;
  background: rgba(180, 40, 40, 0.85);
  border-radius: 2px 0 0 2px;
  animation: ts-flag-wave 1.2s ease-in-out infinite;
  transform-origin: right center;
}

.ts-flag i {
  display: none;
}

@keyframes ts-flag-wave {

  0%,
  100% {
    transform: skewY(-3deg) scaleX(1);
  }

  25% {
    transform: skewY(2deg) scaleX(0.9);
  }

  50% {
    transform: skewY(-4deg) scaleX(1.05);
  }

  75% {
    transform: skewY(1deg) scaleX(0.95);
  }
}

/* Sea spray near hull */
.ts-spray-wrap {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 20px;
  pointer-events: none;
}

.ts-spray {
  position: absolute;
  bottom: 0;
  width: 4px;
  height: 4px;
  background: rgba(180, 220, 255, 0.6);
  border-radius: 50%;
  animation: ts-spray-up 2.8s ease-out infinite;
  left: 50%;
}

@keyframes ts-spray-up {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }

  15% {
    opacity: 0.8;
    transform: translate(calc(-10px + var(--spray-x, 0px)), -10px) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(calc(-20px + var(--spray-x, 0px)), -4px) scale(0.3);
  }
}

.ts-spray:nth-child(1) {
  --spray-x: -12px;
}

.ts-spray:nth-child(2) {
  --spray-x: 4px;
}

.ts-spray:nth-child(3) {
  --spray-x: -6px;
}

.ts-spray:nth-child(4) {
  --spray-x: 14px;
}

/* Wind lines — streaking across */
.ts-wind-line {
  position: absolute;
  left: 110%;
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180, 220, 255, 0.25), transparent);
  animation: ts-wind-blow 5s linear infinite;
}

@keyframes ts-wind-blow {
  from {
    left: 110%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  to {
    left: -20%;
    opacity: 0;
  }
}

/* Sun — top-right corner glow */
.ts-sun {
  position: absolute;
  top: 6px;
  right: 14px;
  width: 18px;
  height: 18px;
  background: radial-gradient(circle, rgba(255, 240, 180, 0.95) 30%, rgba(255, 220, 100, 0.6) 60%, transparent 70%);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 220, 100, 0.4), 0 0 30px rgba(255, 200, 60, 0.15);
  z-index: 1;
}

/* Clouds drifting slowly left-to-right */
.ts-sea-cloud {
  position: absolute;
  left: -50px;
  width: 40px;
  height: 12px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  animation: ts-cloud-drift 14s linear infinite;
  z-index: 1;
}

.ts-sea-cloud::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 8px;
  width: 16px;
  height: 10px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}

.ts-sea-cloud::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 20px;
  width: 10px;
  height: 8px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
}

@keyframes ts-cloud-drift {
  from {
    left: 110%;
  }

  to {
    left: -50px;
  }
}

/* Birds — simple V shapes flying across */
.ts-bird {
  position: absolute;
  left: -20px;
  width: 8px;
  height: 3px;
  border-top: 1.5px solid rgba(40, 40, 40, 0.5);
  border-left: 1.5px solid rgba(40, 40, 40, 0.5);
  border-right: 1.5px solid rgba(40, 40, 40, 0.5);
  border-bottom: none;
  border-radius: 50% 50% 0 0;
  animation: ts-bird-fly 8s linear infinite;
  z-index: 1;
}

@keyframes ts-bird-fly {
  0% {
    left: -20px;
    transform: translateY(0);
  }

  25% {
    transform: translateY(-2px);
  }

  50% {
    transform: translateY(1px);
  }

  75% {
    transform: translateY(-1px);
  }

  100% {
    left: 110%;
    transform: translateY(0);
  }
}

/* Wake trail behind the ship */
.ts-wake {
  position: absolute;
  bottom: -2px;
  left: -20px;
  width: 24px;
  height: 6px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1), transparent);
  border-radius: 0 0 4px 2px;
  animation: ts-wake-ripple 2s ease-in-out infinite;
}

@keyframes ts-wake-ripple {

  0%,
  100% {
    width: 24px;
    opacity: 0.6;
  }

  50% {
    width: 28px;
    opacity: 0.3;
  }
}

/* Foam line at waterline across the scene */
.ts-foam {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  height: 2px;
  background:
    repeating-linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25) 4px, transparent 8px);
  animation: ts-foam-shimmer 4s linear infinite;
  z-index: 1;
}

@keyframes ts-foam-shimmer {
  to {
    background-position-x: 40px;
  }
}

/* ── GLIDER: Clouds drifting, glider soaring ── */
/* Glider scene — bright daytime sky */
.ts-glider,
.ts-gnome_glider {
  background: linear-gradient(180deg, #4a90cc 0%, #6ab0e0 40%, #8ac8f0 70%, #c8e8ff 100%);
}

/* Sun */
.ts-gl-sun {
  position: absolute;
  top: 8px;
  left: 12px;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle, rgba(255, 240, 180, 0.95) 30%, rgba(255, 220, 100, 0.5) 60%, transparent 70%);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 220, 100, 0.3);
  z-index: 1;
}

/* Puffy white clouds */
.ts-gl-cloud {
  position: absolute;
  right: -60px;
  width: 45px;
  height: 14px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  animation: ts-gl-cloud-drift 16s linear infinite;
  z-index: 1;
}

.ts-gl-cloud::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 10px;
  width: 18px;
  height: 12px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}

.ts-gl-cloud::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 24px;
  width: 12px;
  height: 9px;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 50%;
}

@keyframes ts-gl-cloud-drift {
  from {
    right: -60px;
  }

  to {
    right: 110%;
  }
}

/* Birds */
.ts-gl-bird {
  position: absolute;
  right: -15px;
  width: 7px;
  height: 3px;
  border-top: 1.5px solid rgba(40, 40, 40, 0.4);
  border-left: 1.5px solid rgba(40, 40, 40, 0.4);
  border-right: 1.5px solid rgba(40, 40, 40, 0.4);
  border-bottom: none;
  border-radius: 50% 50% 0 0;
  animation: ts-gl-bird-fly 9s linear infinite;
  z-index: 1;
}

@keyframes ts-gl-bird-fly {
  0% {
    right: -15px;
    transform: translateY(0);
  }

  25% {
    transform: translateY(-2px);
  }

  50% {
    transform: translateY(1px);
  }

  75% {
    transform: translateY(-1px);
  }

  100% {
    right: 110%;
    transform: translateY(0);
  }
}

/* Ground — distant rolling hills with color patches */
.ts-gl-ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18px;
  background: linear-gradient(180deg, #6a9a50 0%, #4a8a3a 40%, #3a7a2a 100%);
  z-index: 1;
  overflow: hidden;
}

.ts-gl-hills {
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  height: 12px;
  background:
    radial-gradient(ellipse 25% 100% at 15% 100%, #5a9a40 0%, transparent 70%),
    radial-gradient(ellipse 20% 100% at 40% 100%, #4a8a35 0%, transparent 70%),
    radial-gradient(ellipse 30% 100% at 65% 100%, #5a9545 0%, transparent 70%),
    radial-gradient(ellipse 22% 100% at 85% 100%, #4a8a30 0%, transparent 70%);
}

/* Faint field patches on ground */
.ts-gl-ground::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 15% 60% at 20% 50%, rgba(90, 140, 50, 0.4), transparent),
    radial-gradient(ellipse 12% 50% at 50% 60%, rgba(70, 120, 40, 0.3), transparent),
    radial-gradient(ellipse 18% 70% at 78% 40%, rgba(100, 150, 60, 0.35), transparent);
}

/* Gnome glider — SVG chevron flying right */
.ts-gl-craft {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  animation: ts-gl-bob 3s ease-in-out infinite;
  z-index: 3;
}

.ts-gl-svg {
  width: 70px;
  height: 32px;
  display: block;
}

@keyframes ts-gl-bob {

  0%,
  100% {
    transform: translateX(-50%) translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateX(-50%) translateY(3px) rotate(1.5deg);
  }
}

/* Wind streaks */
.ts-gl-wind {
  position: absolute;
  left: 110%;
  width: 25px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: ts-gl-wind-blow 4s linear infinite;
}

@keyframes ts-gl-wind-blow {
  from {
    left: 110%;
  }

  to {
    left: -15%;
  }
}

/* ── MINECART: Rails with cart and sparks ── */
.ts-minecart {
  background: linear-gradient(180deg, #0e0b08 0%, #1a1510 30%, #2a1e14 60%, #3a2a1a 100%);
}

/* Cave ceiling — rough rocky top edge */
.ts-cave-ceiling {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  background: linear-gradient(180deg, #0a0806 0%, #1a1510 60%, transparent 100%);
  z-index: 2;
}

/* Stalactites hanging from ceiling */
.ts-stalactite {
  position: absolute;
  top: 0;
  width: 6px;
  background: linear-gradient(180deg, #3a3028, #2a2018, transparent);
  clip-path: polygon(0% 0%, 100% 0%, 60% 100%, 40% 100%);
  z-index: 2;
}

.ts-stalactite::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 2px;
  background: rgba(140, 180, 220, 0.4);
  border-radius: 50%;
  animation: ts-drip 3s ease-in infinite;
}

.ts-stalactite:nth-child(odd)::after {
  animation-delay: 1.5s;
}

@keyframes ts-drip {

  0%,
  80% {
    opacity: 0.6;
    transform: translateX(-50%) translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
}

/* Hanging lanterns */
.ts-lantern {
  position: absolute;
  top: 14px;
  width: 8px;
  height: 10px;
  background: rgba(60, 45, 25, 0.8);
  border: 1px solid rgba(100, 75, 40, 0.6);
  border-radius: 0 0 3px 3px;
  text-align: center;
  line-height: 8px;
  animation: ts-lantern-sway 2.5s ease-in-out infinite alternate;
  z-index: 3;
}

.ts-lantern::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 4px;
  background: rgba(100, 75, 40, 0.5);
}

.ts-lantern::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 8px;
  background: radial-gradient(ellipse, rgba(255, 160, 64, 0.2), transparent 70%);
  border-radius: 50%;
}

@keyframes ts-lantern-sway {
  from {
    transform: rotate(-3deg);
  }

  to {
    transform: rotate(3deg);
  }
}

/* Flickering torch glow — ambient light on the scene */
.ts-torch-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 60%, rgba(255, 160, 64, 0.06), transparent 70%);
  animation: ts-torch-flicker 0.3s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes ts-torch-flicker {
  from {
    opacity: 0.7;
  }

  to {
    opacity: 1;
  }
}

/* Ore chunks inside the cart */
.ts-ore {
  position: absolute;
  border-radius: 2px;
}

.ts-ore-1 {
  top: -4px;
  left: 8px;
  width: 7px;
  height: 6px;
  background: linear-gradient(135deg, #8a7a5a, #6a5a3a);
}

.ts-ore-2 {
  top: -6px;
  left: 16px;
  width: 6px;
  height: 5px;
  background: linear-gradient(135deg, #5a8aaa, #3a6a8a);
}

.ts-ore-3 {
  top: -3px;
  left: 12px;
  width: 5px;
  height: 5px;
  background: linear-gradient(135deg, #aa6a3a, #8a4a2a);
}

/* Dust particles floating in the tunnel */
.ts-dust {
  position: absolute;
  top: 30%;
  width: 2px;
  height: 2px;
  background: rgba(180, 160, 120, 0.3);
  border-radius: 50%;
  animation: ts-dust-float 6s ease-in-out infinite;
  z-index: 1;
}

@keyframes ts-dust-float {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }

  20% {
    opacity: 0.5;
  }

  80% {
    opacity: 0.3;
  }

  100% {
    transform: translate(-30px, -15px);
    opacity: 0;
  }
}

.ts-rails {
  position: absolute;
  bottom: 35px;
  left: 0;
  right: 0;
  height: 20px;
}

.ts-rail {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(212, 149, 106, 0.3);
  box-shadow: 0 0 4px rgba(212, 149, 106, 0.15);
}

.ts-rail:first-child {
  top: 0;
}

.ts-rail:nth-child(2) {
  top: 14px;
}

.ts-sleepers {
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 20px;
  background: repeating-linear-gradient(90deg, rgba(140, 100, 60, 0.3) 0px, rgba(140, 100, 60, 0.3) 4px, transparent 4px, transparent 30px);
  animation: ts-sleepers-scroll 0.6s linear infinite;
}

@keyframes ts-sleepers-scroll {
  to {
    background-position-x: -30px;
  }
}

.ts-cart {
  position: absolute;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);
  animation: ts-cart-shake 0.15s linear infinite alternate;
}

.ts-cart-body {
  width: 32px;
  height: 20px;
  position: relative;
  background: rgba(120, 90, 50, 0.85);
  border: 2px solid rgba(160, 120, 60, 0.9);
  border-bottom: 3px solid rgba(100, 75, 40, 0.95);
  border-radius: 0 0 3px 3px;
  clip-path: polygon(4px 0, 28px 0, 32px 20px, 0 20px);
}

.ts-cart-body::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  right: 6px;
  bottom: 3px;
  background: rgba(80, 60, 30, 0.5);
  border-radius: 1px;
}

.ts-cart-wheel {
  position: absolute;
  bottom: -4px;
  width: 9px;
  height: 9px;
  background: rgba(90, 70, 45, 0.9);
  border: 2px solid rgba(140, 110, 60, 0.9);
  border-radius: 50%;
}

.ts-cart-wl {
  left: 3px;
}

.ts-cart-wr {
  right: 3px;
}

@keyframes ts-cart-shake {
  from {
    transform: translateX(-50%) translateY(0);
  }

  to {
    transform: translateX(-50%) translateY(-2px);
  }
}

.ts-sparks {
  position: absolute;
  bottom: 38px;
  left: 45%;
}

.ts-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #ffa500;
  border-radius: 50%;
  opacity: 0;
  animation: ts-spark-fly 0.8s ease-out infinite;
}

@keyframes ts-spark-fly {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }

  100% {
    opacity: 0;
    transform: translate(calc(-20px + 40px * var(--sx, 0.5)), calc(-15px - 20px * var(--sy, 0.5)));
  }
}

.ts-spark:nth-child(1) {
  --sx: 0.2;
  --sy: 0.8;
}

.ts-spark:nth-child(2) {
  --sx: 0.7;
  --sy: 0.4;
}

.ts-spark:nth-child(3) {
  --sx: 0.3;
  --sy: 0.9;
}

.ts-spark:nth-child(4) {
  --sx: 0.8;
  --sy: 0.6;
}

.ts-spark:nth-child(5) {
  --sx: 0.1;
  --sy: 0.7;
}

.ts-spark:nth-child(6) {
  --sx: 0.6;
  --sy: 0.5;
}

/* ── TELEPORT: Magic portal with orbiting runes ── */
.ts-teleport {
  background: linear-gradient(180deg, #0a0418 0%, #14082a 40%, #1e1040 100%);
}

/* Central vortex — spinning rings */
.ts-tp-vortex {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(176, 136, 232, 0.4);
  animation: ts-tp-spin 3s linear infinite;
}

.ts-tp-vortex-inner {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border-radius: 50%;
  border: 2px solid rgba(200, 160, 255, 0.5);
  animation: ts-tp-spin 2s linear infinite reverse;
}

.ts-tp-vortex-inner::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 160, 255, 0.25) 0%, rgba(140, 80, 220, 0.1) 50%, transparent 70%);
  animation: ts-tp-core-pulse 1.5s ease-in-out infinite;
}

@keyframes ts-tp-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes ts-tp-core-pulse {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Spiraling particles — orbit inward toward center */
.ts-tp-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

.ts-tp-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(200, 160, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(176, 136, 232, 0.6);
  animation: ts-tp-spiral 3s linear infinite;
}

@keyframes ts-tp-spiral {
  0% {
    transform: rotate(var(--tp-angle)) translateX(55px) scale(1);
    opacity: 0.8;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: rotate(calc(var(--tp-angle) + 720deg)) translateX(0px) scale(0);
    opacity: 0;
  }
}

/* Rune circle — symbols orbiting slowly */
.ts-tp-runes {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 90px;
  transform: translate(-50%, -50%);
  animation: ts-tp-runes-orbit 10s linear infinite;
}

@keyframes ts-tp-runes-orbit {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.ts-tp-rune {
  position: absolute;
  font-size: 11px;
  color: rgba(176, 136, 232, 0.6);
  text-shadow: 0 0 6px rgba(176, 136, 232, 0.4);
  top: calc(50% + sin(calc(var(--rune-i) * 60deg)) * 42px - 6px);
  left: calc(50% + cos(calc(var(--rune-i) * 60deg)) * 42px - 4px);
  animation: ts-tp-rune-glow 2s ease-in-out infinite alternate;
}

@keyframes ts-tp-rune-glow {
  from {
    opacity: 0.3;
  }

  to {
    opacity: 0.8;
  }
}

/* Energy bolts — streaking from edges to center */
.ts-tp-bolt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 20px;
  background: linear-gradient(180deg, transparent, rgba(200, 160, 255, 0.7), transparent);
  transform-origin: center top;
  animation: ts-tp-bolt-strike 2.4s ease-in infinite;
}

.ts-tp-bolt:nth-child(1) {
  transform: rotate(0deg) translateY(-50px);
}

.ts-tp-bolt:nth-child(2) {
  transform: rotate(90deg) translateY(-50px);
}

.ts-tp-bolt:nth-child(3) {
  transform: rotate(180deg) translateY(-50px);
}

.ts-tp-bolt:nth-child(4) {
  transform: rotate(270deg) translateY(-50px);
}

@keyframes ts-tp-bolt-strike {

  0%,
  70% {
    opacity: 0;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* Background flash pulse */
.ts-tp-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(176, 136, 232, 0.08), transparent 60%);
  animation: ts-tp-flash-pulse 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ts-tp-flash-pulse {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }
}

/* ── FAIRY RING: Enchanted forest with mushroom ring ── */
.ts-fairy_ring {
  background: linear-gradient(180deg, #0a1a10 0%, #122818 40%, #1a3520 100%);
}

/* Grass ground */
.ts-fr-grass {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, #1a3520, #162e1a, #122618);
}

.ts-fr-grass::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(40, 80, 40, 0.4) 3px, rgba(40, 80, 40, 0.4) 4px);
}

/* Dark trees on edges */
.ts-fr-tree {
  position: absolute;
  bottom: 20px;
  width: 20px;
  height: 50px;
  background: linear-gradient(180deg, #0a1a0a, #142814);
  clip-path: polygon(50% 0%, 90% 40%, 80% 42%, 95% 70%, 75% 72%, 85% 100%, 15% 100%, 25% 72%, 5% 70%, 20% 42%, 10% 40%);
  opacity: 0.5;
}

/* Ring glow on the ground */
.ts-fr-glow {
  position: absolute;
  bottom: 8%;
  left: 50%;
  width: 55%;
  height: 30px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(120, 220, 160, 0.12), transparent 70%);
  box-shadow: 0 0 20px rgba(120, 220, 160, 0.08);
  animation: ts-fr-glow-pulse 3s ease-in-out infinite;
}

@keyframes ts-fr-glow-pulse {

  0%,
  100% {
    opacity: 0.6;
    transform: translateX(-50%) scale(1);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.05);
  }
}

/* CSS mushrooms — stem + cap */
.ts-fr-shroom {
  position: absolute;
  width: 6px;
  height: 10px;
  z-index: 2;
}

/* Stem */
.ts-fr-shroom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 5px;
  background: linear-gradient(180deg, #d4c8a0, #b8a878);
  border-radius: 1px;
}

/* Cap */
.ts-fr-shroom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 5px;
  background: radial-gradient(ellipse at 50% 80%, #cc4444, #aa2222);
  border-radius: 50% 50% 20% 20%;
  box-shadow: 0 0 3px rgba(200, 60, 60, 0.3);
}

/* Bigger mushrooms */
.ts-fr-shroom-lg {
  width: 8px;
  height: 13px;
}

.ts-fr-shroom-lg::after {
  width: 4px;
  height: 7px;
}

.ts-fr-shroom-lg::before {
  width: 10px;
  height: 7px;
}

/* Sparkles floating up from the ring */
.ts-fr-sparkle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(180, 255, 200, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(120, 220, 160, 0.6);
  animation: ts-fr-sparkle-rise 3s ease-out infinite;
  z-index: 3;
}

@keyframes ts-fr-sparkle-rise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }

  20% {
    opacity: 1;
    transform: translateY(-5px) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-35px) scale(0);
  }
}

/* Fireflies drifting around */
.ts-fr-firefly {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(200, 255, 150, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(200, 255, 150, 0.5);
  animation: ts-fr-firefly-drift 6s ease-in-out infinite;
  z-index: 3;
}

@keyframes ts-fr-firefly-drift {
  0% {
    top: 30%;
    left: 30%;
    opacity: 0;
  }

  15% {
    opacity: 0.9;
  }

  25% {
    top: 20%;
    left: 45%;
  }

  50% {
    top: 35%;
    left: 65%;
    opacity: 0.4;
  }

  75% {
    top: 15%;
    left: 50%;
    opacity: 0.8;
  }

  85% {
    opacity: 0.6;
  }

  100% {
    top: 30%;
    left: 30%;
    opacity: 0;
  }
}

/* ── SPIRIT TREE: Growing branches with falling leaves ── */
/* ── SPIRIT TREE ── */
.ts-spirit_tree {
  background: linear-gradient(180deg, #08140a 0%, #0e200e 40%, #142a14 100%);
}

.ts-st-grass {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(180deg, #1a3518, #142a12);
}

.ts-st-grass::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, transparent 0, transparent 4px, rgba(40, 70, 30, 0.4) 4px, rgba(40, 70, 30, 0.4) 5px);
}

/* Tree container */
.ts-st-tree {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

/* Trunk — thick, gnarled */
.ts-st-trunk {
  width: 20px;
  height: 55px;
  background: linear-gradient(90deg, #3a2a14, #4a3a1e, #3a2a14);
  border-radius: 4px 4px 0 0;
  position: relative;
}

.ts-st-trunk::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 3px;
  width: 2px;
  height: 30px;
  background: rgba(60, 45, 20, 0.5);
  border-radius: 1px;
}

.ts-st-trunk::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 4px;
  width: 1px;
  height: 25px;
  background: rgba(60, 45, 20, 0.4);
  border-radius: 1px;
}

/* Roots spreading at base */
.ts-st-roots {
  position: absolute;
  bottom: -4px;
  left: -8px;
  width: 36px;
  height: 8px;
  background: linear-gradient(180deg, #3a2a14, transparent);
  clip-path: polygon(10% 0%, 25% 0%, 15% 100%, 0% 100%, 8% 0%, 40% 0%, 35% 100%, 25% 80%, 50% 0%, 60% 0%, 55% 80%, 65% 100%, 75% 0%, 90% 0%, 100% 100%, 85% 100%);
}

/* Canopy — irregular bumpy leaf clusters wrapping around top */
.ts-st-canopy {
  position: absolute;
  top: -14px;
  left: -26px;
  width: 72px;
  height: 34px;
  background: transparent;
}

/* Left cluster */
.ts-st-canopy::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 28px;
  background: radial-gradient(ellipse at 50% 55%, #2a6a22, #1e5018 55%, transparent 75%);
  border-radius: 45% 55% 40% 50%;
}

/* Right cluster */
.ts-st-canopy::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: 0;
  width: 32px;
  height: 30px;
  background: radial-gradient(ellipse at 50% 50%, #266020, #1c4c16 55%, transparent 75%);
  border-radius: 55% 45% 50% 40%;
}

/* Top center cluster — large, fills gap to trunk */
.ts-st-canopy-top {
  position: absolute;
  top: -22px;
  left: -12px;
  width: 44px;
  height: 30px;
  background: radial-gradient(ellipse at 50% 60%, #2e7226, #1e5018 50%, transparent 75%);
  border-radius: 45% 50% 40% 45%;
}

.ts-st-canopy-top::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 6px;
  width: 24px;
  height: 16px;
  background: radial-gradient(ellipse at 50% 60%, #347e2c, transparent 70%);
  border-radius: 50% 55% 45% 50%;
}

.ts-st-canopy-top::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: -14px;
  width: 72px;
  height: 18px;
  background:
    radial-gradient(ellipse 22% 80% at 8% 50%, #225a1a 0%, transparent 70%),
    radial-gradient(ellipse 22% 80% at 92% 50%, #205618 0%, transparent 70%),
    radial-gradient(ellipse 40% 90% at 50% 40%, #24601c 0%, transparent 65%);
}

/* Branches — arm-like, extending down and outward */
.ts-st-branch-l {
  position: absolute;
  top: 26px;
  left: -16px;
  width: 18px;
  height: 4px;
  background: #3a2a14;
  border-radius: 2px;
  transform: rotate(15deg);
  transform-origin: right center;
}

.ts-st-branch-r {
  position: absolute;
  top: 28px;
  right: -14px;
  width: 16px;
  height: 3px;
  background: #3a2a14;
  border-radius: 2px;
  transform: rotate(-12deg);
  transform-origin: left center;
}

/* Face on the trunk — two eyes and a mouth */
.ts-st-face {
  position: absolute;
  top: 18px;
  left: 3px;
  width: 14px;
  height: 14px;
}

.ts-st-eye {
  position: absolute;
  top: 0;
  width: 4px;
  height: 3px;
  background: rgba(92, 230, 138, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(92, 230, 138, 0.5);
  animation: ts-st-blink 4s ease-in-out infinite;
}

.ts-st-eye-l {
  left: 1px;
}

.ts-st-eye-r {
  right: 1px;
}

@keyframes ts-st-blink {

  0%,
  90%,
  100% {
    transform: scaleY(1);
  }

  95% {
    transform: scaleY(0.1);
  }
}

.ts-st-mouth {
  position: absolute;
  bottom: 0;
  left: 3px;
  width: 8px;
  height: 3px;
  border-bottom: 2px solid rgba(30, 20, 10, 0.6);
  border-radius: 0 0 50% 50%;
}

/* Green glow around the tree base */
.ts-st-glow {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 70px;
  height: 30px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(92, 230, 138, 0.15), transparent 70%);
  animation: ts-st-glow-pulse 2.5s ease-in-out infinite;
  z-index: 1;
}

@keyframes ts-st-glow-pulse {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

/* Leaves swirling upward */
.ts-st-leaf {
  position: absolute;
  bottom: 30px;
  width: 4px;
  height: 4px;
  background: rgba(92, 230, 138, 0.7);
  border-radius: 50% 0 50% 0;
  animation: ts-st-leaf-swirl 4s ease-out infinite;
  z-index: 3;
}

@keyframes ts-st-leaf-swirl {
  0% {
    opacity: 0;
    transform: translateY(0) rotate(0deg) translateX(0);
  }

  15% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    transform: translateY(-60px) rotate(360deg) translateX(20px);
  }
}

.ts-st-leaf:nth-child(odd) {
  animation-name: ts-st-leaf-swirl-alt;
}

@keyframes ts-st-leaf-swirl-alt {
  0% {
    opacity: 0;
    transform: translateY(0) rotate(0deg) translateX(0);
  }

  15% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    transform: translateY(-55px) rotate(-360deg) translateX(-18px);
  }
}

/* Energy orbs spiraling around the tree */
.ts-st-energy-wrap {
  position: absolute;
  bottom: 40px;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 3;
}

.ts-st-energy {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(92, 230, 138, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(92, 230, 138, 0.6);
  animation: ts-st-orbit 3s linear infinite;
}

@keyframes ts-st-orbit {
  from {
    transform: rotate(var(--st-angle)) translateX(28px);
    opacity: 0.8;
  }

  to {
    transform: rotate(calc(var(--st-angle) + 360deg)) translateX(28px);
    opacity: 0.8;
  }
}

/* ── CANOE: Flowing river with ripples ── */
.ts-canoe {
  background: linear-gradient(180deg, #1a3518 0%, #0e2a3a 20%, #0f3048 40%, #0f3048 60%, #0e2a3a 85%, #1a3518 100%);
}

/* Riverbanks — green top and bottom */
.ts-cn-bank {
  position: absolute;
  left: 0;
  right: 0;
  height: 22%;
  z-index: 2;
}

.ts-cn-bank-l {
  top: 0;
  height: 28% !important;
  background: linear-gradient(180deg, #1a3518, #163018 70%, transparent);
}

.ts-cn-bank-r {
  bottom: 0;
  background: linear-gradient(0deg, #1a3518, #163018 70%, transparent);
}

/* Trees along the banks */
.ts-cn-tree {
  position: absolute;
  top: -2px;
  width: 10px;
  background: #0e220e;
  clip-path: polygon(50% 0%, 85% 45%, 70% 47%, 90% 80%, 65% 82%, 80% 100%, 20% 100%, 35% 82%, 10% 80%, 30% 47%, 15% 45%);
  opacity: 0.6;
  z-index: 3;
}

.ts-cn-tree-r {
  top: auto;
  bottom: -2px;
  transform: rotate(180deg);
}

/* Reeds at water edge */
.ts-cn-reeds {
  position: absolute;
  width: 12px;
  height: 25px;
  z-index: 5;
  --reed-scale: 1;
  animation: ts-cn-reed-drift 10s linear infinite;
  transform-origin: bottom center;
}

.ts-cn-reeds-l {
  bottom: 76%;
}

.ts-cn-reeds-r {
  bottom: 16%;
}

.ts-cn-reeds::before,
.ts-cn-reeds::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 1.5px;
  background: rgba(60, 100, 40, 0.8);
  border-radius: 1px;
  animation: ts-cn-reed-sway 3s ease-in-out infinite;
  transform-origin: bottom center;
}

.ts-cn-reeds::before {
  left: 2px;
  height: 18px;
}

.ts-cn-reeds::after {
  left: 6px;
  height: 22px;
  animation-delay: 0.5s;
}

@keyframes ts-cn-reed-drift {
  from {
    left: 110%;
  }

  to {
    left: -10%;
  }
}

@keyframes ts-cn-reed-sway {

  0%,
  100% {
    transform: scale(var(--reed-scale)) rotate(-3deg);
  }

  50% {
    transform: scale(var(--reed-scale)) rotate(3deg);
  }
}

/* Water current lines flowing right */
.ts-cn-current {
  position: absolute;
  left: -20%;
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(100, 180, 210, 0.25), transparent);
  animation: ts-cn-flow 12s linear infinite;
}

@keyframes ts-cn-flow {
  from {
    left: 110%;
  }

  to {
    left: -20%;
  }
}

/* Canoe — centered, gently rocking */
.ts-cn-boat {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
  animation: ts-cn-rock 10s ease-in-out infinite;
  z-index: 4;
}

@keyframes ts-cn-rock {

  0%,
  100% {
    transform: translateX(-50%) translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateX(-50%) translateY(2px) rotate(1deg);
  }
}

/* Canoe SVG */
.ts-cn-svg {
  width: 60px;
  height: 12px;
  display: block;
}

/* Paddle — angled, with blade */
.ts-cn-paddle {
  position: absolute;
  top: -8px;
  right: 4px;
  width: 2px;
  height: 20px;
  background: #6b4a28;
  transform: rotate(25deg);
  transform-origin: bottom center;
  animation: ts-cn-paddle-stroke 2s ease-in-out infinite;
}

.ts-cn-paddle::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -2px;
  width: 5px;
  height: 6px;
  background: #5a3a1e;
  border-radius: 2px 2px 50% 50%;
}

@keyframes ts-cn-paddle-stroke {

  0%,
  100% {
    transform: rotate(25deg);
  }

  50% {
    transform: rotate(15deg);
  }
}

/* V-wake trailing behind the canoe */
.ts-cn-wake {
  position: absolute;
  top: 47%;
  left: 38%;
  width: 30px;
  height: 16px;
  transform: translateY(-50%);
  z-index: 3;
  animation: ts-cn-wake-fade 2s ease-out infinite;
}

.ts-cn-wake::before,
.ts-cn-wake::after {
  content: '';
  position: absolute;
  right: 0;
  width: 28px;
  height: 1px;
  background: linear-gradient(270deg, rgba(100, 180, 210, 0.3), transparent);
}

.ts-cn-wake::before {
  top: 2px;
  transform: rotate(8deg);
  transform-origin: right center;
}

.ts-cn-wake::after {
  bottom: 2px;
  transform: rotate(-8deg);
  transform-origin: right center;
}

@keyframes ts-cn-wake-fade {
  0% {
    opacity: 0.8;
    width: 30px;
  }

  50% {
    opacity: 0.5;
    width: 35px;
  }

  100% {
    opacity: 0.8;
    width: 30px;
  }
}

/* =====================================================
   WORLD EVENTS TICKER — Fixed bar below action bar
   ===================================================== */

/* Add ticker height to body padding */
body {
  --rs-ticker-height: 0px;
  padding-top: calc(var(--rs-header-height) + var(--rs-nav-height) + var(--rs-action-bar-height) + var(--rs-ticker-height)) !important;
}

.rs-ticker {
  position: fixed !important;
  top: calc(var(--rs-header-height) + var(--rs-nav-height) + var(--rs-action-bar-height));
  left: 0;
  right: 0;
  height: var(--rs-ticker-height, 28px);
  z-index: 9999;
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg, rgba(30, 24, 16, 0.97), rgba(22, 18, 12, 0.98));
  border-bottom: 1px solid var(--df-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(201, 168, 76, 0.06);
  overflow: hidden;
  backdrop-filter: blur(8px);
}

/* Hidden when no events */
.rs-ticker.hidden {
  display: none !important;
}

/* Label section (left side, static) */
.rs-ticker-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: rgba(48, 40, 32, 0.6);
  border-right: 1px solid rgba(201, 168, 76, 0.15);
  color: var(--df-gold);
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.rs-ticker-label i {
  font-size: 10px;
  filter: drop-shadow(0 0 4px rgba(201, 168, 76, 0.4));
}

/* Scrolling track */
.rs-ticker-track {
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* Scrolling content (duplicated for seamless loop) */
.rs-ticker-scroll {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: df-ticker-scroll var(--ticker-duration, 30s) linear infinite;
  height: 100%;
}

.rs-ticker-scroll:hover {
  animation-play-state: paused;
}

/* Individual event item */
.rs-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  height: 100%;
  cursor: default;
  position: relative;
}

.rs-ticker-item:hover .rs-ticker-title {
  color: var(--df-gold-light);
  text-shadow: 0 0 8px rgba(201, 168, 76, 0.4);
}

/* Icon (emoji or font-awesome) */
.rs-ticker-icon {
  font-size: 13px;
  flex-shrink: 0;
}

/* Event title */
.rs-ticker-title {
  color: var(--df-gold);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: color 0.2s, text-shadow 0.2s;
}

/* Inline dash separator between title/desc/timer */
.rs-ticker-dash {
  color: rgba(201, 168, 76, 0.3);
  font-size: 10px;
  padding: 0 2px;
}

/* Event description (inline) */
.rs-ticker-desc {
  color: var(--df-text);
  font-size: 10px;
  letter-spacing: 0.3px;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Timer badge */
.rs-ticker-timer {
  color: var(--df-text-dim);
  font-size: 10px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* Separator dot between events */
.rs-ticker-sep {
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  color: rgba(201, 168, 76, 0.25);
  font-size: 6px;
}

/* Tooltip on hover */
.rs-ticker-item .rs-ticker-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--df-bg-card);
  border: 1px solid var(--df-border-bright);
  border-radius: 4px;
  padding: 8px 12px;
  min-width: 200px;
  max-width: 300px;
  white-space: normal;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  z-index: 10;
  pointer-events: none;
}

.rs-ticker-item:hover .rs-ticker-tooltip {
  display: block;
}

.rs-ticker-tooltip-title {
  color: var(--df-gold);
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}

.rs-ticker-tooltip-desc {
  color: var(--df-text);
  font-size: 11px;
  line-height: 1.4;
}

.rs-ticker-tooltip-loc {
  color: var(--df-text-dim);
  font-size: 10px;
  margin-top: 4px;
}

/* =====================================================
   CONTENT AREA — Game area atmosphere
   ===================================================== */
#gameArea {
  position: relative !important;
}

/* Hide old patch notes structure (if still present) */
.rs-patch-notes {
  display: none !important;
}

/* =====================================================
   PATCH NOTES — Timeline style (matching landing page)
   ===================================================== */
.df-updates-section {
  padding: 30px 0 40px !important;
}

.df-updates-header {
  text-align: center !important;
  margin-bottom: 40px !important;
}

.df-orn-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}

.df-orn-line {
  width: 60px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.3)) !important;
}

.df-orn-line:last-child {
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.3), transparent) !important;
}

.df-orn-diamond {
  width: 8px !important;
  height: 8px !important;
  border: 1px solid rgba(201, 168, 76, 0.4) !important;
  transform: rotate(45deg) !important;
}

.df-updates-title {
  font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--df-gold) !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 15px rgba(201, 168, 76, 0.25) !important;
  margin: 0 0 8px !important;
  animation: df-title-glow 5s ease-in-out infinite !important;
}

.df-updates-sub {
  font-family: 'Crimson Text', serif !important;
  font-style: italic !important;
  font-size: 14px !important;
  color: rgba(201, 168, 76, 0.4) !important;
  letter-spacing: 2px !important;
  margin: 0 !important;
}

/* Timeline grid */
.df-updates-grid {
  max-width: 700px !important;
  margin: 0 auto !important;
}

/* Each timeline entry */
.df-update-entry {
  position: relative !important;
  padding: 0 0 40px 50px !important;
  border-left: 1px solid rgba(201, 168, 76, 0.12) !important;
  margin-left: 6px !important;
  transition: border-color 0.3s ease !important;
}

.df-update-entry:last-child {
  border-left-color: transparent !important;
  padding-bottom: 0 !important;
}

.df-update-entry:hover {
  border-left-color: rgba(201, 168, 76, 0.25) !important;
}

/* Timeline dot */
.df-update-dot {
  position: absolute !important;
  left: -6px !important;
  top: 4px !important;
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(201, 168, 76, 0.3) !important;
  background: var(--df-bg-deepest) !important;
  transition: all 0.3s ease !important;
}

.df-update-entry:first-child .df-update-dot {
  border-color: var(--df-gold) !important;
  background: rgba(201, 168, 76, 0.15) !important;
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.3) !important;
}

.df-update-entry:hover .df-update-dot {
  border-color: var(--df-gold) !important;
  background: rgba(201, 168, 76, 0.18) !important;
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.3) !important;
}

/* Date */
.df-update-date {
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: rgba(201, 168, 76, 0.45) !important;
  margin-bottom: 7px !important;
}

.df-update-entry:first-child .df-update-date {
  color: var(--df-gold) !important;
}

/* Category tag */
.df-update-tag {
  display: inline-block !important;
  padding: 2px 10px !important;
  border-radius: 4px !important;
  font-family: 'Cinzel', serif !important;
  font-size: 9px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
}

.df-tag-major {
  background: rgba(201, 168, 76, 0.14) !important;
  color: var(--df-gold) !important;
  border: 1px solid rgba(201, 168, 76, 0.22) !important;
}

.df-tag-patch {
  background: rgba(74, 222, 128, 0.1) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(74, 222, 128, 0.18) !important;
}

.df-tag-hotfix {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.18) !important;
}

.df-tag-content {
  background: rgba(167, 139, 250, 0.1) !important;
  color: #a78bfa !important;
  border: 1px solid rgba(167, 139, 250, 0.18) !important;
}

/* Title */
.df-update-title {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 1.5px !important;
  color: var(--df-parchment) !important;
  margin: 0 0 9px !important;
  transition: color 0.3s ease !important;
}

.df-update-entry:hover .df-update-title {
  color: var(--df-gold-light) !important;
}

.df-update-title a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.df-update-title a:hover {
  color: var(--df-gold-light) !important;
}

/* Body text */
.df-update-body {
  font-family: 'Crimson Text', serif !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: rgba(240, 228, 196, 0.45) !important;
}

/* Read more link */
.df-update-read-more {
  display: inline-block !important;
  margin-top: 8px !important;
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(201, 168, 76, 0.45) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.df-update-read-more:hover {
  color: var(--df-gold) !important;
  text-shadow: 0 0 8px rgba(201, 168, 76, 0.2) !important;
  text-decoration: none !important;
}

/* =====================================================
   ACTION PANEL — Skill actions redesign
   ===================================================== */
.rs-action-panel {
  background: linear-gradient(180deg, rgba(48, 40, 32, 0.95), rgba(33, 28, 20, 0.98)) !important;
  background-image: none !important;
  border: 1px solid var(--df-border-bright) !important;
  border-radius: 10px !important;
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(201, 168, 76, 0.08) !important;
  color: var(--df-text) !important;
  font-family: 'Crimson Text', serif !important;
}

/* Remove ALL parchment textures */
.rs-action-panel,
.rs-action-panel * {
  background-image: none !important;
}

/* Re-apply only our gradients */
.rs-action-panel-header {
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(201, 168, 76, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card)) !important;
  border-bottom: 1px solid var(--df-border) !important;
  border-radius: 10px 10px 0 0 !important;
}

.rs-action-panel-header h3,
.rs-al-header-text h3 {
  color: var(--df-gold) !important;
  font-family: 'Cinzel', serif !important;
  text-shadow: 0 0 12px rgba(201, 168, 76, 0.3) !important;
}

.rs-al-header-text p,
.rs-action-panel-header p {
  color: var(--df-text-dim) !important;
}

.rs-al-skill-icon {
  filter: drop-shadow(0 0 6px rgba(201, 168, 76, 0.3)) !important;
}

/* Action grid */
.rs-action-grid {
  background: transparent !important;
}

/* Action cards — dark atmospheric */
.rs-action-card {
  background: linear-gradient(180deg, rgba(58, 50, 40, 0.7), rgba(42, 35, 26, 0.7)) !important;
  border: 1px solid rgba(201, 168, 76, 0.12) !important;
  border-radius: 8px !important;
  transition: all 0.35s ease !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.rs-action-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, transparent 40%, rgba(201, 168, 76, 0.04) 50%, transparent 60%) !important;
  background-size: 200% 200% !important;
  opacity: 0 !important;
  transition: opacity 0.4s !important;
}

.rs-action-card:hover::before {
  opacity: 1 !important;
  animation: df-shimmer 2.5s ease-in-out !important;
}

.rs-action-card:hover {
  border-color: var(--df-border-bright) !important;
  background: linear-gradient(180deg, rgba(58, 50, 40, 0.9), rgba(42, 35, 26, 0.85)) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(201, 168, 76, 0.06) !important;
  transform: translateY(-2px) !important;
}

.rs-ac-header {
  border-bottom-color: rgba(201, 168, 76, 0.08) !important;
}

.rs-ac-name {
  color: var(--df-gold) !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
}

.rs-ac-type {
  color: var(--df-text-dim) !important;
}

.rs-ac-reward-item {
  color: var(--df-gold-light) !important;
}

.rs-ac-req-label {
  color: var(--df-text-dim) !important;
}

.rs-ac-req-item {
  color: var(--df-text) !important;
}

.rs-ac-stat {
  color: var(--df-text-dim) !important;
}

.rs-ac-stat i {
  color: var(--df-gold-dark) !important;
}

.rs-success-good,
.rs-success-high {
  background: rgba(74, 222, 128, 0.15) !important;
  color: #4ade80 !important;
  border-color: rgba(74, 222, 128, 0.25) !important;
}

.rs-success-med,
.rs-success-medium {
  background: rgba(201, 168, 76, 0.15) !important;
  color: var(--df-gold) !important;
  border-color: rgba(201, 168, 76, 0.25) !important;
}

.rs-success-low {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}

/* =====================================================
   SKILL ACTION MODAL — Immersive dark fantasy
   ===================================================== */

/* Z-index above fixed headers (rs-header 10002, rs-nav 10001, action-bar 10000) */
.df-skill-modal {
  z-index: 10010 !important;
}

/* Popovers (item tooltips) must render above the skill modal */
.popover {
  z-index: 10020 !important;
}
#equipDetailModal ~ .popover,
.quest-modal-backdrop ~ .popover {
  z-index: 100001 !important;
}

/* --- Modal shell --- */
.df-skill-modal .modal-dialog {
  width: 90% !important;
  max-width: 820px !important;
  margin: 40px auto !important;
}

.df-skill-modal .modal-content {
  background: linear-gradient(180deg, var(--df-bg-card), var(--df-bg-deep)) !important;
  border: 2px solid var(--df-border-bright) !important;
  border-radius: 8px !important;
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.05), 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(201, 168, 76, 0.05) !important;
  overflow: hidden !important;
}

/* --- Header --- */
.df-skill-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 20px !important;
  background:
    radial-gradient(ellipse 80% 120% at 50% 0%, rgba(201, 168, 76, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card)) !important;
  border-bottom: 1px solid var(--df-border) !important;
  position: relative !important;
}

.df-skill-header-icon {
  width: 48px !important;
  height: 48px !important;
  border: 2px solid var(--df-border-bright) !important;
  border-radius: 6px !important;
  background: var(--df-bg-deep) !important;
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.15) !important;
  image-rendering: pixelated !important;
  flex-shrink: 0 !important;
}

.df-skill-header-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.df-skill-header-name {
  margin: 0 !important;
  font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--df-gold) !important;
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.3) !important;
  letter-spacing: 1px !important;
}

.df-skill-header-desc {
  margin: 2px 0 0 !important;
  font-family: 'Crimson Text', serif !important;
  font-size: 14px !important;
  color: var(--df-text-dim) !important;
  font-style: italic !important;
}

.df-skill-close {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  background: none !important;
  border: none !important;
  color: var(--df-gold-dark) !important;
  font-size: 18px !important;
  cursor: pointer !important;
  opacity: 0.7 !important;
  transition: all 0.25s ease !important;
  padding: 4px 8px !important;
  line-height: 1 !important;
}

.df-skill-close:hover {
  color: var(--df-gold-light) !important;
  opacity: 1 !important;
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.4) !important;
}

/* --- Body --- */
.df-skill-body {
  padding: 16px !important;
  max-height: 65vh !important;
  overflow-y: auto !important;
}

.df-skill-body::-webkit-scrollbar {
  width: 6px;
}

.df-skill-body::-webkit-scrollbar-track {
  background: var(--df-bg-deep);
}

.df-skill-body::-webkit-scrollbar-thumb {
  background: var(--df-border-bright);
  border-radius: 3px;
}

/* --- Skill modal category tabs (horizontal row) --- */
#skillModalCategories {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-bottom: 12px !important;
  border-bottom: 2px solid var(--df-border-dark) !important;
  padding-bottom: 8px !important;
}

.osrs-skill-category {
  display: inline-flex !important;
  margin-bottom: 0 !important;
  padding: 4px 10px !important;
  border-radius: 4px 4px 0 0 !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

/* --- Skill modal action icons (fit NPC/spell/object images) --- */
.osrs-action-icon {
  object-fit: contain !important;
  image-rendering: auto !important;
}

/* --- Action grid --- */
.df-action-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  gap: 12px !important;
}

/* --- Action cards --- */
.df-action-card {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(58, 50, 40, 0.5), rgba(42, 35, 26, 0.5)) !important;
  border: 1px solid rgba(201, 168, 76, 0.1) !important;
  border-radius: 6px !important;
  padding: 12px 10px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 6px !important;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.2) !important;
}

.df-action-card:hover {
  background: linear-gradient(180deg, rgba(65, 55, 42, 0.85), rgba(48, 40, 28, 0.75)) !important;
  border-color: var(--df-border-glow) !important;
  box-shadow:
    inset 0 1px 0 rgba(201, 168, 76, 0.25),
    inset 0 0 15px rgba(201, 168, 76, 0.04),
    0 6px 24px rgba(0, 0, 0, 0.4),
    0 0 25px rgba(201, 168, 76, 0.15) !important;
  transform: translateY(-2px) !important;
}

.df-action-card:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Card image */
.df-action-img {
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.df-action-img img {
  max-width: 40px !important;
  max-height: 40px !important;
  image-rendering: pixelated !important;
}

/* Card name */
.df-action-name {
  font-family: 'Cinzel', serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--df-gold) !important;
  line-height: 1.2 !important;
}

/* Stats row (XP + time) */
.df-action-stats {
  display: flex !important;
  gap: 8px !important;
  font-size: 11px !important;
  color: var(--df-text-dim) !important;
}

.df-action-stats i {
  margin-right: 2px !important;
}

.df-action-stats .fa-star {
  color: #5fa82a !important;
}

.df-action-stats .fa-clock {
  color: var(--df-text-dim) !important;
}

/* Rewards (green tint) */
.df-action-rewards {
  font-size: 11px !important;
  color: #6dca4a !important;
  line-height: 1.3 !important;
}

.df-action-rewards .fa-fire-alt {
  color: #e06040 !important;
}

/* Requirements (amber tint) */
.df-action-requires {
  font-size: 11px !important;
  color: #c9a84c !important;
  line-height: 1.3 !important;
}

.df-action-requires .fa-fire-alt {
  color: #e06040 !important;
}

.df-action-requires .fa-shield-alt {
  margin-right: 2px !important;
}

/* Success badge */
.df-action-success {
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  margin-top: 2px !important;
}

.df-success-high {
  color: #4ade80 !important;
  background: rgba(74, 222, 128, 0.1) !important;
}

.df-success-good {
  color: #86efac !important;
  background: rgba(134, 239, 172, 0.08) !important;
}

.df-success-med {
  color: var(--df-gold-light) !important;
  background: rgba(240, 216, 120, 0.1) !important;
}

.df-success-low {
  color: #f87171 !important;
  background: rgba(248, 113, 113, 0.1) !important;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .df-action-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 8px !important;
  }

  .df-skill-modal .modal-dialog {
    margin: 10px auto !important;
  }
}

/* =====================================================
   MODALS — Dark atmospheric
   ===================================================== */
.modal-backdrop {
  background: rgba(14, 11, 7, 0.7) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.modal-content {
  background:
    radial-gradient(ellipse 60% 30% at 50% 0%, rgba(201, 168, 76, 0.04) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--df-bg-card), var(--df-bg-deep)) !important;
  border: 1px solid var(--df-border-bright) !important;
  border-top: 2px solid rgba(201, 168, 76, 0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(201, 168, 76, 0.20),
    inset 0 -2px 0 rgba(0, 0, 0, 0.4),
    inset 0 0 40px rgba(0, 0, 0, 0.3),
    0 20px 80px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(201, 168, 76, 0.08) !important;
  color: var(--df-parchment) !important;
}

.modal-header {
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card)) !important;
  border-bottom-color: var(--df-border) !important;
}

.modal-title {
  color: var(--df-gold) !important;
  text-shadow: 0 1px 8px rgba(201, 168, 76, 0.25) !important;
}

.modal-header .close {
  color: var(--df-gold-dark) !important;
  text-shadow: none !important;
  opacity: 0.7 !important;
  transition: all 0.3s ease !important;
}

.modal-header .close:hover {
  color: var(--df-gold-light) !important;
  opacity: 1 !important;
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.4) !important;
}

.modal-body {
  color: rgba(232, 220, 196, 0.65) !important;
}

.modal-footer {
  border-top-color: var(--df-border) !important;
  background: var(--df-bg-deep) !important;
}

.rs-modal .modal-content {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--df-bg-card), var(--df-bg-deep)) !important;
  border: 1px solid var(--df-border-bright) !important;
  border-top: 2px solid rgba(201, 168, 76, 0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(201, 168, 76, 0.20),
    inset 0 -2px 0 rgba(0, 0, 0, 0.4),
    inset 0 0 40px rgba(0, 0, 0, 0.3),
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 25px rgba(201, 168, 76, 0.08) !important;
}

.rs-modal .modal-body {
  color: rgba(232, 220, 196, 0.65) !important;
}

/* =====================================================
   SETTINGS MODAL — Overlay (mirrors df-shop-modal pattern)
   ===================================================== */
.df-settings-modal {
  z-index: 10010 !important;
  pointer-events: none !important;
}

.df-settings-modal .modal-dialog {
  pointer-events: auto !important;
  width: 520px !important;
  max-width: 95% !important;
  margin: 50px auto !important;
}

.df-settings-modal .modal-content {
  background: linear-gradient(180deg, var(--df-bg-card), var(--df-bg-deep)) !important;
  border: 2px solid var(--df-border-bright) !important;
  border-radius: 8px !important;
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.05), 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(201, 168, 76, 0.05) !important;
  overflow: hidden !important;
}

.df-settings-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 20px !important;
  background:
    radial-gradient(ellipse 80% 120% at 50% 0%, rgba(201, 168, 76, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card)) !important;
  border-bottom: 1px solid var(--df-border) !important;
  position: relative !important;
}

.df-settings-header-name {
  margin: 0 !important;
  font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--df-gold) !important;
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.3) !important;
  letter-spacing: 1px !important;
  flex: 1 !important;
}

.df-settings-header-name i {
  margin-right: 8px !important;
  font-size: 18px !important;
}

.df-settings-close {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  background: none !important;
  border: none !important;
  color: var(--df-gold-dark) !important;
  font-size: 18px !important;
  cursor: pointer !important;
  opacity: 0.7 !important;
  transition: all 0.25s ease !important;
  padding: 4px 8px !important;
  line-height: 1 !important;
}

.df-settings-close:hover {
  color: var(--df-gold-light) !important;
  opacity: 1 !important;
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.4) !important;
}

.df-settings-body {
  padding: 16px 20px !important;
  color: rgba(232, 220, 196, 0.65) !important;
}

/* Name availability indicator */
.name-availability {
  display: block;
  min-height: 20px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 20px;
}

.name-available {
  color: #4caf50 !important;
}

.name-unavailable {
  color: #e57373 !important;
}

/* Name cooldown display */
.name-cooldown {
  font-size: 12px;
  color: var(--df-text-dim);
  margin-top: 4px;
}

.name-cooldown i {
  color: var(--df-gold-dark);
  margin-right: 4px;
}

/* Two-Factor Authentication */
#twofa-qr {
  max-width: 200px;
  border-radius: 8px;
  border: 2px solid var(--df-border-bright);
  background: #fff;
  padding: 8px;
}

#twofa-setup-code:focus {
  border-color: var(--df-gold) !important;
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.2) !important;
}

/* =====================================================
   BUTTONS — Gold gradient with glows
   ===================================================== */
.btn-primary {
  background: linear-gradient(180deg, #b89530, #7a6320) !important;
  border-color: var(--df-gold-dark) !important;
  color: var(--df-parchment) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  box-shadow: 0 3px 12px rgba(201, 168, 76, 0.2) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-primary::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent) !important;
  transition: left 0.6s ease !important;
}

.btn-primary:hover::before {
  left: 100% !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: linear-gradient(180deg, #c9a84c, #8a6f1e) !important;
  border-color: var(--df-gold) !important;
  box-shadow: 0 4px 24px rgba(201, 168, 76, 0.35), 0 0 15px rgba(201, 168, 76, 0.1) !important;
}

.btn-default {
  background: transparent !important;
  border: 1px solid var(--df-border) !important;
  color: var(--df-text-dim) !important;
  transition: all 0.3s ease !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
  background: rgba(201, 168, 76, 0.06) !important;
  border-color: var(--df-border-bright) !important;
  color: var(--df-parchment) !important;
}

.btn-success {
  background: linear-gradient(180deg, #3a9628, #1a6a12) !important;
  border-color: #166534 !important;
  color: #d0ffd0 !important;
  box-shadow: 0 3px 12px rgba(74, 222, 128, 0.15) !important;
  transition: all 0.3s ease !important;
}

.btn-success:hover {
  box-shadow: var(--df-glow-green), 0 4px 16px rgba(74, 222, 128, 0.2) !important;
}

.btn-danger {
  background: linear-gradient(180deg, #c41818, #7f1212) !important;
  border-color: #7f1d1d !important;
  color: #ffe0e0 !important;
  box-shadow: 0 3px 12px rgba(220, 50, 50, 0.15) !important;
  transition: all 0.3s ease !important;
}

.btn-danger:hover {
  box-shadow: var(--df-glow-red), 0 4px 16px rgba(220, 50, 50, 0.2) !important;
}

.btn-warning {
  background: linear-gradient(180deg, #b8860b, #8b6914) !important;
  border-color: #6b5012 !important;
  color: var(--df-parchment) !important;
  transition: all 0.3s ease !important;
}

.btn-info {
  background: linear-gradient(180deg, #4a3f8a, #352d6e) !important;
  border-color: #2d2560 !important;
  color: #c8bfff !important;
  transition: all 0.3s ease !important;
}

.btn-info:hover {
  box-shadow: var(--df-glow-purple) !important;
}

.btn-clean {
  background: transparent !important;
  border-color: var(--df-border) !important;
  color: var(--df-text-dim) !important;
  transition: all 0.3s ease !important;
}

.btn-clean:hover {
  background: rgba(201, 168, 76, 0.06) !important;
  color: var(--df-parchment) !important;
}

/* =====================================================
   ALERTS — Colored left accent
   ===================================================== */
.alert-danger,
.alert.alert-danger {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  border-left: 4px solid rgba(239, 68, 68, 0.6) !important;
  color: #ef4444 !important;
  box-shadow: inset 0 0 20px rgba(239, 68, 68, 0.04) !important;
}

.alert-success,
.alert.alert-success {
  background: rgba(74, 222, 128, 0.1) !important;
  border: 1px solid rgba(74, 222, 128, 0.2) !important;
  border-left: 4px solid rgba(74, 222, 128, 0.6) !important;
  color: #4ade80 !important;
}

.alert-warning,
.alert.alert-warning {
  background: rgba(201, 168, 76, 0.1) !important;
  border: 1px solid rgba(201, 168, 76, 0.2) !important;
  border-left: 4px solid rgba(201, 168, 76, 0.6) !important;
  color: var(--df-gold) !important;
}

.alert-info,
.alert.alert-info {
  background: rgba(167, 139, 250, 0.1) !important;
  border: 1px solid rgba(167, 139, 250, 0.2) !important;
  border-left: 4px solid rgba(167, 139, 250, 0.6) !important;
  color: #a78bfa !important;
}

.alert-default,
.alert.alert-default {
  background: rgba(201, 168, 76, 0.06) !important;
  border: 1px solid var(--df-border) !important;
  border-left: 4px solid rgba(201, 168, 76, 0.4) !important;
  color: var(--df-text) !important;
}

/* =====================================================
   TOOLTIPS & POPOVERS
   ===================================================== */
.GameTooltip {
  border: 1px solid var(--df-border-bright) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 10px rgba(201, 168, 76, 0.06) !important;
  background: var(--df-bg-card) !important;
}

.popover {
  background: rgba(48, 40, 32, 0.97) !important;
  backdrop-filter: blur(12px) !important;
  border-color: var(--df-border-bright) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 15px rgba(201, 168, 76, 0.05) !important;
}

.popover-title,
.popover-header {
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card)) !important;
  border-bottom-color: var(--df-border) !important;
  color: var(--df-gold) !important;
}

.popover-content,
.popover-body {
  color: rgba(232, 220, 196, 0.65) !important;
}

.tooltip-inner {
  background: var(--df-bg-card) !important;
  border: 1px solid var(--df-border) !important;
  color: var(--df-gold-light) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

.tooltip.top .tooltip-arrow {
  border-top-color: var(--df-border) !important;
}

.tooltip.bottom .tooltip-arrow {
  border-bottom-color: var(--df-border) !important;
}

.tooltip.left .tooltip-arrow {
  border-left-color: var(--df-border) !important;
}

.tooltip.right .tooltip-arrow {
  border-right-color: var(--df-border) !important;
}

/* =====================================================
   SHOP
   ===================================================== */
.osrs-shop-container {
  background: linear-gradient(135deg, var(--df-bg-card), var(--df-bg-surface), var(--df-bg-card)) !important;
  border: 1px solid var(--df-border) !important;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3), 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.osrs-shop-header {
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card)) !important;
  border-bottom-color: var(--df-border) !important;
}

.osrs-shop-header .shop-title {
  color: var(--df-gold) !important;
  text-shadow: 0 1px 6px rgba(201, 168, 76, 0.25) !important;
}

.osrs-shop-content {
  background: rgba(0, 0, 0, 0.15) !important;
  border-color: rgba(201, 168, 76, 0.08) !important;
}

.osrs-shop-grid {
  background: var(--df-bg-deepest) !important;
  border-color: rgba(201, 168, 76, 0.08) !important;
}

.osrs-shop-slot {
  background: var(--df-bg-deep) !important;
  border-color: rgba(201, 168, 76, 0.06) !important;
  transition: all 0.25s ease !important;
}

.osrs-shop-slot:hover {
  background: var(--df-bg-surface) !important;
  border-color: var(--df-border-bright) !important;
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.1) !important;
}

.osrs-shop-slot.selected {
  border-color: var(--df-gold) !important;
  box-shadow: 0 0 14px rgba(201, 168, 76, 0.2) !important;
}

.osrs-shop-footer {
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card)) !important;
  border-top-color: var(--df-border) !important;
  color: var(--df-text-dim) !important;
}

.osrs-shop-context {
  background: rgba(48, 40, 32, 0.97) !important;
  backdrop-filter: blur(8px) !important;
  border-color: var(--df-border-bright) !important;
  box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.6) !important;
}

.osrs-shop-context .context-title {
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card)) !important;
  border-bottom-color: var(--df-border) !important;
  color: var(--df-gold) !important;
}

.osrs-shop-context .context-option {
  transition: all 0.2s ease !important;
}

.osrs-shop-context .context-option:hover {
  background: rgba(201, 168, 76, 0.1) !important;
}

.osrs-shop-context .context-option .action-name {
  color: var(--df-gold) !important;
}

.osrs-shop-amount-modal {
  background: var(--df-bg-card) !important;
  border-color: var(--df-border) !important;
}

.osrs-shop-amount-modal input[type="number"] {
  background: var(--df-bg-deepest) !important;
  border-color: var(--df-border) !important;
  color: var(--df-parchment) !important;
}

/* =====================================================
   SHOP MODAL — Overlay (mirrors df-skill-modal pattern)
   ===================================================== */
.df-shop-modal {
  z-index: 10010 !important;
  pointer-events: none !important;
  /* let clicks pass through the full-screen overlay */
}

.df-shop-modal .modal-dialog {
  pointer-events: auto !important;
  /* restore clicks on the actual dialog */
  width: 90% !important;
  max-width: 960px !important;
  margin: 40px auto !important;
}

.df-shop-modal .modal-content {
  background: linear-gradient(180deg, var(--df-bg-card), var(--df-bg-deep)) !important;
  border: 2px solid var(--df-border-bright) !important;
  border-radius: 8px !important;
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.05), 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(201, 168, 76, 0.05) !important;
  overflow: hidden !important;
}

.df-shop-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 20px !important;
  background:
    radial-gradient(ellipse 80% 120% at 50% 0%, rgba(201, 168, 76, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card)) !important;
  border-bottom: 1px solid var(--df-border) !important;
  position: relative !important;
}

.df-shop-header-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.df-shop-header-name {
  margin: 0 !important;
  font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--df-gold) !important;
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.3) !important;
  letter-spacing: 1px !important;
}

.df-shop-header-desc {
  margin: 2px 0 0 !important;
  font-family: 'Crimson Text', serif !important;
  font-size: 14px !important;
  color: var(--df-text-dim) !important;
  font-style: italic !important;
}

.df-shop-close {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  background: none !important;
  border: none !important;
  color: var(--df-gold-dark) !important;
  font-size: 18px !important;
  cursor: pointer !important;
  opacity: 0.7 !important;
  transition: all 0.25s ease !important;
  padding: 4px 8px !important;
  line-height: 1 !important;
}

.df-shop-close:hover {
  color: var(--df-gold-light) !important;
  opacity: 1 !important;
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.4) !important;
}

.df-shop-body {
  padding: 0 !important;
  overflow: hidden !important;
}

.df-shop-footer {
  padding: 10px 20px !important;
  font-family: 'Crimson Text', serif !important;
  font-size: 13px !important;
  font-style: italic !important;
  color: var(--df-text-dim) !important;
  border-top: 1px solid var(--df-border) !important;
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card)) !important;
  text-align: center !important;
}

/* Shop two-panel layout: shop left, inventory right */
.df-shop-layout {
  display: flex !important;
  height: 100% !important;
  max-height: 70vh !important;
}

.df-shop-panel-main {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  padding: 16px !important;
}

.df-shop-panel-inv {
  width: 210px !important;
  flex-shrink: 0 !important;
  border-left: 1px solid var(--df-border) !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(0, 0, 0, 0.15) !important;
}

.df-shop-inv-header {
  padding: 8px 10px !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--df-gold-dark) !important;
  border-bottom: 1px solid var(--df-border) !important;
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.06), transparent) !important;
  text-align: center !important;
}

.df-shop-inv-grid {
  padding: 4px !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2px !important;
  align-content: flex-start !important;
}

.df-shop-inv-grid .inven {
  width: 100% !important;
  aspect-ratio: 1 !important;
  background: rgba(37, 34, 25, 0.8) !important;
  border: 1px solid rgba(13, 12, 10, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: relative !important;
  border-radius: 2px !important;
}

.df-shop-inv-grid .inven:hover {
  background: rgba(62, 53, 41, 0.9) !important;
  border-color: rgba(90, 80, 64, 0.8) !important;
}

.df-shop-inv-grid .inven img {
  max-width: 30px !important;
  max-height: 30px !important;
  image-rendering: pixelated !important;
}

.df-shop-inv-grid .inven .item-amount {
  position: absolute !important;
  top: 1px !important;
  left: 2px !important;
  font-size: 9px !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 !important;
}

.df-shop-inv-grid .inven .item-amount.yellow {
  color: #ffff00 !important;
}

.df-shop-inv-grid .inven .item-amount.white {
  color: #ffffff !important;
}

.df-shop-inv-grid .inven .item-amount.green {
  color: #00ff00 !important;
}

.df-shop-inv-grid .placeholder {
  display: none !important;
}

.df-shop-inv-grid .inven-empty {
  width: 100% !important;
  aspect-ratio: 1 !important;
  background: rgba(26, 24, 20, 0.5) !important;
  border: 1px solid rgba(13, 12, 10, 0.3) !important;
  border-radius: 2px !important;
}

/* Scrollbar for shop inventory panel */
.df-shop-inv-grid::-webkit-scrollbar {
  width: 8px;
}

.df-shop-inv-grid::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.df-shop-inv-grid::-webkit-scrollbar-thumb {
  background: rgba(62, 53, 41, 0.8);
  border-radius: 4px;
}

.df-shop-inv-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(90, 80, 64, 0.9);
}

/* Mobile: stack shop panels vertically */
@media (max-width: 768px) {
  .df-shop-modal .modal-dialog {
    width: 98% !important;
    margin: 10px auto !important;
  }

  .df-shop-layout {
    flex-direction: column !important;
    max-height: 80vh !important;
  }

  .df-shop-panel-main {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  .df-shop-panel-inv {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid var(--df-border) !important;
    max-height: 200px !important;
  }

  .df-shop-inv-grid {
    grid-template-columns: repeat(7, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .df-shop-inv-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }

  .df-shop-layout {
    max-height: 85vh !important;
  }
}

/* Lock interface panel inventory while shop modal is open */
.df-shop-inv-locked {
  position: relative !important;
  pointer-events: none !important;
  opacity: 0.4 !important;
}

.df-shop-inv-locked::after {
  content: 'Using Shop' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: rgba(0, 0, 0, 0.7) !important;
  color: var(--df-gold-dark) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  border: 1px solid var(--df-border) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* Context menu & amount modal sit above the shop modal when moved to body */
.osrs-shop-context {
  z-index: 10015 !important;
}

.osrs-shop-amount-modal {
  z-index: 10015 !important;
}

/* =====================================================
   BANK MODAL
   ===================================================== */
.df-bank-modal {
  z-index: 10010 !important;
  pointer-events: none !important;
}

.df-bank-modal .modal-dialog {
  pointer-events: auto !important;
  width: 95% !important;
  max-width: 960px !important;
  margin: 20px auto !important;
}

.df-bank-modal .modal-content {
  background: linear-gradient(180deg, var(--df-bg-card), var(--df-bg-deep)) !important;
  border: 2px solid var(--df-border-bright) !important;
  border-radius: 8px !important;
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.05), 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(201, 168, 76, 0.05) !important;
  overflow: hidden !important;
}

.df-bank-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 74px 12px 16px !important;
  background:
    radial-gradient(ellipse 80% 120% at 50% 0%, rgba(201, 168, 76, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card)) !important;
  border-bottom: 1px solid var(--df-border) !important;
  position: relative !important;
}

.df-bank-header-name {
  margin: 0 !important;
  flex: 1 !important;
  font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--df-gold) !important;
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.3) !important;
  letter-spacing: 1px !important;
}

.df-bank-slots {
  font-family: 'Crimson Text', serif !important;
  font-size: 13px !important;
  color: var(--df-text-dim) !important;
  white-space: nowrap !important;
}

.df-bank-close {
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  background: none !important;
  border: none !important;
  color: var(--df-gold-dark) !important;
  font-size: 18px !important;
  cursor: pointer !important;
  opacity: 0.7 !important;
  transition: all 0.25s ease !important;
  padding: 4px 8px !important;
  line-height: 1 !important;
  z-index: 5 !important;
}

.df-bank-close:hover {
  color: var(--df-gold-light) !important;
  opacity: 1 !important;
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.4) !important;
}

.df-bank-body {
  padding: 0 !important;
  max-height: 75vh !important;
  overflow: hidden !important;
}

.df-bank-footer {
  padding: 8px 16px !important;
  font-family: 'Crimson Text', serif !important;
  font-size: 12px !important;
  font-style: italic !important;
  color: var(--df-text-dim) !important;
  border-top: 1px solid var(--df-border) !important;
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card)) !important;
  text-align: center !important;
}

/* Two-panel layout: bank (left) + inventory (right) */
.df-bank-layout {
  display: flex !important;
  height: 100% !important;
  max-height: 75vh !important;
}

.df-bank-panel-main {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
}

.df-bank-panel-inv {
  width: 210px !important;
  flex-shrink: 0 !important;
  border-left: 1px solid var(--df-border) !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(0, 0, 0, 0.15) !important;
}

.df-bank-inv-header {
  padding: 8px 10px !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--df-gold-dark) !important;
  border-bottom: 1px solid var(--df-border) !important;
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.06), transparent) !important;
  text-align: center !important;
}

.df-bank-inv-grid {
  padding: 4px !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2px !important;
  align-content: flex-start !important;
}

.df-bank-inv-grid .inven {
  width: 100% !important;
  aspect-ratio: 1 !important;
  background: rgba(37, 34, 25, 0.8) !important;
  border: 1px solid rgba(13, 12, 10, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: relative !important;
  border-radius: 2px !important;
}

.df-bank-inv-grid .inven:hover {
  background: rgba(62, 53, 41, 0.9) !important;
  border-color: rgba(90, 80, 64, 0.8) !important;
}

.df-bank-inv-grid .inven img {
  max-width: 30px !important;
  max-height: 30px !important;
  image-rendering: pixelated !important;
}

.df-bank-inv-grid .inven .item-amount {
  position: absolute !important;
  top: 1px !important;
  left: 2px !important;
  font-size: 9px !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 !important;
}

.df-bank-inv-grid .inven .item-amount.yellow {
  color: #ffff00 !important;
}

.df-bank-inv-grid .inven .item-amount.white {
  color: #ffffff !important;
}

.df-bank-inv-grid .inven .item-amount.green {
  color: #00ff00 !important;
}

.df-bank-inv-grid .placeholder {
  display: none !important;
}

.df-bank-inv-grid .inven-empty {
  width: 100% !important;
  aspect-ratio: 1 !important;
  background: rgba(26, 24, 20, 0.5) !important;
  border: 1px solid rgba(13, 12, 10, 0.3) !important;
  border-radius: 2px !important;
}

.df-bank-inv-empty {
  padding: 20px 10px !important;
  text-align: center !important;
  color: var(--df-text-dim) !important;
  font-family: 'Crimson Text', serif !important;
  font-size: 12px !important;
  font-style: italic !important;
}

/* Fixed 28-slot inventory grid — dark fantasy overrides */
.inven-fixed-grid {
  gap: 2px !important;
}

.inven-cell {
  background: rgba(26, 24, 20, 0.5) !important;
  border: 1px solid rgba(62, 53, 41, 0.4) !important;
  border-radius: 2px !important;
}

.inven-cell.inven-empty {
  background: rgba(13, 12, 10, 0.3) !important;
  border-color: rgba(62, 53, 41, 0.2) !important;
}

.inven-cell.inven-drag-over {
  border: 2px solid rgba(255, 215, 0, 0.8) !important;
  background: rgba(255, 215, 0, 0.1) !important;
}

.inven-cell.inven-drag-source {
  opacity: 0.4 !important;
}

/* Override bank.css heights inside modal */
.df-bank-modal .osrs-bank-grid {
  min-height: 200px !important;
  max-height: none !important;
  flex: 1 !important;
}

/* Scrollbar for inventory panel */
.df-bank-inv-grid::-webkit-scrollbar {
  width: 8px;
}

.df-bank-inv-grid::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.df-bank-inv-grid::-webkit-scrollbar-thumb {
  background: rgba(62, 53, 41, 0.8);
  border-radius: 4px;
}

.df-bank-inv-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(90, 80, 64, 0.9);
}

/* Mobile: stack panels vertically */
@media (max-width: 768px) {
  .df-bank-modal .modal-dialog {
    width: 98% !important;
    margin: 10px auto !important;
  }

  .df-bank-header-name {
    font-size: 14px !important;
  }

  .df-bank-layout {
    flex-direction: column !important;
    max-height: 80vh !important;
  }

  .df-bank-panel-main {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  .df-bank-panel-main .osrs-bank-grid {
    max-height: 35vh !important;
  }

  .df-bank-panel-inv {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid var(--df-border) !important;
    max-height: 200px !important;
  }

  .df-bank-inv-grid {
    grid-template-columns: repeat(7, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .df-bank-inv-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }

  .df-bank-body {
    max-height: 85vh !important;
  }

  .df-bank-layout {
    max-height: 85vh !important;
  }
}

/* Lock interface panel inventory while bank modal is open */
.df-bank-inv-locked {
  position: relative !important;
  pointer-events: none !important;
  opacity: 0.4 !important;
}

.df-bank-inv-locked::after {
  content: 'Using Bank' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: rgba(0, 0, 0, 0.7) !important;
  color: var(--df-gold-dark) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  border: 1px solid var(--df-border) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* Lock interface panel tabs while trade modal is open */
.df-trade-locked {
  position: relative !important;
  pointer-events: none !important;
  opacity: 0.4 !important;
}

.df-trade-locked::after {
  content: 'Trading' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: rgba(0, 0, 0, 0.7) !important;
  color: var(--df-gold-dark) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  border: 1px solid var(--df-border) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* Disabled tab buttons during trade */
.df-trade-tab-disabled {
  pointer-events: none !important;
  opacity: 0.35 !important;
}

/* Bank PIN settings button in header */
.df-bank-pin-settings-btn {
  position: absolute !important;
  top: 8px !important;
  right: 42px !important;
  background: none !important;
  border: none !important;
  color: var(--df-gold-dark) !important;
  font-size: 16px !important;
  cursor: pointer !important;
  opacity: 0.7 !important;
  transition: all 0.25s ease !important;
  padding: 4px 8px !important;
  line-height: 1 !important;
  z-index: 5 !important;
}

.df-bank-pin-settings-btn:hover {
  color: var(--df-gold-light) !important;
  opacity: 1 !important;
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.4) !important;
}

/* Bank PIN dropdown (anchored to header) */
.df-pin-dropdown {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  right: 10px !important;
  width: 280px !important;
  box-sizing: border-box !important;
  background: linear-gradient(180deg, var(--df-bg-card), var(--df-bg-deep)) !important;
  border: 2px solid var(--df-border-bright) !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  z-index: 100 !important;
  padding: 14px !important;
}

.df-pin-dropdown.active {
  display: block !important;
}

.df-pin-status {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.df-pin-status-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

.df-pin-status-icon.active {
  background: rgba(74, 222, 128, 0.15) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(74, 222, 128, 0.3) !important;
}

.df-pin-status-icon.inactive {
  background: rgba(201, 168, 76, 0.1) !important;
  color: var(--df-gold-dark) !important;
  border: 1px solid var(--df-border) !important;
}

.df-pin-status-text {
  font-family: 'Crimson Text', serif !important;
  font-size: 14px !important;
  color: var(--df-text) !important;
}

.df-pin-status-text strong {
  color: var(--df-text-bright) !important;
}

.df-pin-description {
  font-family: 'Crimson Text', serif !important;
  font-size: 12px !important;
  color: var(--df-text-dim) !important;
  line-height: 1.4 !important;
  margin: 0 0 12px 0 !important;
}

.df-pin-notice {
  padding: 6px 10px !important;
  border-radius: 4px !important;
  font-family: 'Crimson Text', serif !important;
  font-size: 12px !important;
  margin-bottom: 10px !important;
}

.df-pin-notice i {
  margin-right: 4px !important;
}

.df-pin-notice.warning {
  background: rgba(220, 170, 50, 0.1) !important;
  border: 1px solid rgba(220, 170, 50, 0.25) !important;
  color: #dcaa32 !important;
}

.df-pin-notice.info {
  background: rgba(100, 160, 255, 0.1) !important;
  border: 1px solid rgba(100, 160, 255, 0.2) !important;
  color: #8ab4f8 !important;
}

.df-pin-action-btn {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  padding: 8px 12px !important;
  margin-bottom: 6px !important;
  border: 1px solid var(--df-border-bright) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card)) !important;
  color: var(--df-text) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.df-pin-action-btn:last-child {
  margin-bottom: 0 !important;
}

.df-pin-action-btn i {
  margin-right: 5px !important;
}

.df-pin-action-btn:hover {
  background: linear-gradient(180deg, var(--df-bg-hover), var(--df-bg-surface)) !important;
  border-color: var(--df-border-glow) !important;
  color: var(--df-gold-light) !important;
}

.df-pin-action-btn.primary {
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.2), rgba(201, 168, 76, 0.1)) !important;
  border-color: var(--df-gold-dark) !important;
  color: var(--df-gold) !important;
}

.df-pin-action-btn.primary:hover {
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.3), rgba(201, 168, 76, 0.15)) !important;
  color: var(--df-gold-light) !important;
  box-shadow: var(--df-glow-gold) !important;
}

.df-pin-action-btn.danger {
  border-color: rgba(220, 50, 50, 0.3) !important;
  color: #e06060 !important;
}

.df-pin-action-btn.danger:hover {
  background: rgba(220, 50, 50, 0.1) !important;
  border-color: rgba(220, 50, 50, 0.5) !important;
  color: #f07070 !important;
}

/* Bank context menus & modals above bank modal when moved to body */
#bankContextMenu,
#inventoryContextMenu {
  z-index: 10015 !important;
}

#bankPinModal,
#bankAmountModal {
  z-index: 10015 !important;
}

/* =====================================================
   CONTEXT MENU
   ===================================================== */
.osrs-context-menu {
  background: rgba(48, 40, 32, 0.97) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--df-border-bright) !important;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.6), 0 0 10px rgba(201, 168, 76, 0.04) !important;
}

.osrs-context-menu-header {
  background: var(--df-bg-surface) !important;
  border-bottom: 1px solid var(--df-border) !important;
  color: var(--df-gold) !important;
}

.osrs-context-menu-option {
  color: var(--df-text) !important;
  transition: all 0.2s ease !important;
}

.osrs-context-menu-option:hover {
  background: rgba(201, 168, 76, 0.1) !important;
}

.osrs-context-menu-separator {
  background: var(--df-border) !important;
}

#osrsUseIndicator {
  background: var(--df-bg-card) !important;
  border-color: var(--df-border) !important;
}

/* =====================================================
   FORM CONTROLS
   ===================================================== */
.form-control {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--df-border) !important;
  color: var(--df-parchment) !important;
  transition: all 0.3s ease !important;
}

.form-control:focus {
  border-color: var(--df-border-glow) !important;
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.15), 0 0 4px rgba(201, 168, 76, 0.08) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.form-control::placeholder {
  color: rgba(201, 168, 76, 0.25) !important;
}

select.form-control {
  background: var(--df-bg-card) !important;
}

select.form-control option {
  background: var(--df-bg-card) !important;
  color: var(--df-parchment) !important;
}

/* =====================================================
   TABS (Bootstrap)
   ===================================================== */
.nav-tabs {
  border-bottom-color: var(--df-border) !important;
}

.nav-tabs>li>a {
  color: var(--df-text-dim) !important;
  border-color: transparent !important;
  transition: all 0.3s ease !important;
}

.nav-tabs>li>a:hover {
  color: var(--df-parchment) !important;
  background: rgba(201, 168, 76, 0.06) !important;
  border-color: var(--df-border) !important;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
  color: var(--df-gold) !important;
  background: var(--df-bg-deep) !important;
  border-color: var(--df-border) !important;
  border-bottom-color: var(--df-bg-deep) !important;
}

.tab-content {
  background: var(--df-bg-deep) !important;
  border-color: var(--df-border) !important;
}

/* =====================================================
   HISCORES
   ===================================================== */
.rs-hs-skills,
.rs-hs-main {
  background: linear-gradient(180deg, var(--df-bg-card), var(--df-bg-deep)) !important;
  border-color: var(--df-border) !important;
}

.rs-hs-table th {
  background: var(--df-bg-surface) !important;
  color: var(--df-gold) !important;
  border-bottom-color: var(--df-border) !important;
}

.rs-hs-table td {
  color: rgba(232, 220, 196, 0.65) !important;
  border-bottom-color: rgba(201, 168, 76, 0.06) !important;
}

.rs-hs-skill-item {
  color: var(--df-text-dim) !important;
  transition: all 0.25s ease !important;
}

.rs-hs-skill-item:hover {
  background: rgba(201, 168, 76, 0.08) !important;
  color: var(--df-gold) !important;
}

.rs-hs-skill-item.active {
  background: rgba(201, 168, 76, 0.12) !important;
  color: var(--df-gold) !important;
}

.rs-hs-btn {
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card)) !important;
  color: var(--df-gold) !important;
  border-color: var(--df-border) !important;
}

.rs-hs-btn:hover {
  border-color: #c9a84c !important;
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.15) !important;
}

/* Mobile skills dropdown */
.rs-hs-skills-selected {
  background: linear-gradient(180deg, var(--df-bg-card), var(--df-bg-deep)) !important;
  color: var(--df-text-dim) !important;
  border-color: var(--df-border) !important;
}

.rs-hs-skills-options {
  background: var(--df-bg-deep) !important;
  border-color: var(--df-border) !important;
}

.rs-hs-skills-option {
  color: var(--df-text-dim) !important;
}

.rs-hs-skills-option:hover {
  background: rgba(201, 168, 76, 0.08) !important;
  color: var(--df-gold) !important;
}

.rs-hs-skills-option.active {
  background: rgba(201, 168, 76, 0.12) !important;
  color: var(--df-gold) !important;
}

/* Skills sidebar header */
.rs-hs-skills-header {
  background: linear-gradient(180deg, #2a2318, #1e1a12) !important;
  color: #c9a84c !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.18) !important;
  text-shadow: 0 0 8px rgba(201, 168, 76, 0.3) !important;
}

/* Main header */
.rs-hs-main-header {
  background: linear-gradient(180deg, #2a2318, #1e1a12) !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.18) !important;
}

.rs-hs-title {
  color: #c9a84c !important;
  text-shadow: 0 0 8px rgba(201, 168, 76, 0.3) !important;
}

/* Type filter buttons (All / Ironman / Hardcore) */
.rs-hs-type-btn {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(201, 168, 76, 0.18) !important;
  color: #8a7a5a !important;
}

.rs-hs-type-btn:hover {
  background: rgba(201, 168, 76, 0.1) !important;
  color: #c9a84c !important;
}

.rs-hs-type-btn.active {
  background: rgba(201, 168, 76, 0.2) !important;
  border-color: #c9a84c !important;
  color: #c9a84c !important;
}

/* Back button */
.rs-hs-back-btn {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(201, 168, 76, 0.18) !important;
  color: #8a7a5a !important;
}

.rs-hs-back-btn:hover {
  background: rgba(201, 168, 76, 0.1) !important;
  color: #c9a84c !important;
}

/* Table row hover */
.rs-hs-row:hover {
  background: rgba(201, 168, 76, 0.06) !important;
}

/* Name links */
.rs-hs-name a {
  color: #e8dcc4 !important;
}

.rs-hs-name a:hover {
  color: #c9a84c !important;
  text-shadow: 0 0 6px rgba(201, 168, 76, 0.3) !important;
}

/* Rank column gold tint */
.rs-hs-rank {
  color: rgba(201, 168, 76, 0.55) !important;
}

/* Medal rows — gold, silver, bronze */
.rs-hs-gold {
  background: rgba(201, 168, 76, 0.12) !important;
  border-left: 3px solid #c9a84c !important;
}

.rs-hs-gold .rs-hs-rank {
  color: #c9a84c !important;
  text-shadow: 0 0 6px rgba(201, 168, 76, 0.4) !important;
}

.rs-hs-silver {
  background: rgba(180, 180, 200, 0.08) !important;
  border-left: 3px solid #b4b4c8 !important;
}

.rs-hs-silver .rs-hs-rank {
  color: #b4b4c8 !important;
}

.rs-hs-bronze {
  background: rgba(180, 120, 60, 0.08) !important;
  border-left: 3px solid #b4783c !important;
}

.rs-hs-bronze .rs-hs-rank {
  color: #b4783c !important;
}

.rs-hs-overall {
  background: rgba(201, 168, 76, 0.06) !important;
}

/* Sidebar boxes */
.rs-hs-sidebar .rs-hs-box {
  background: linear-gradient(180deg, #1e1a12, #16120c) !important;
  border: 1px solid rgba(201, 168, 76, 0.12) !important;
}

.rs-hs-box-title {
  color: #c9a84c !important;
}

/* Inputs */
.rs-hs-input {
  background: #1a1510 !important;
  border: 1px solid rgba(201, 168, 76, 0.18) !important;
  color: #c4b48a !important;
}

.rs-hs-input:focus {
  border-color: #c9a84c !important;
  box-shadow: 0 0 6px rgba(201, 168, 76, 0.2) !important;
}

.rs-hs-input::placeholder {
  color: rgba(201, 168, 76, 0.35) !important;
}

.rs-hs-input::-webkit-input-placeholder {
  color: rgba(201, 168, 76, 0.35) !important;
}

.rs-hs-input::-moz-placeholder {
  color: rgba(201, 168, 76, 0.35) !important;
}

.rs-hs-input:-ms-input-placeholder {
  color: rgba(201, 168, 76, 0.35) !important;
}

/* Compare view */
.rs-hs-compare-bar {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(201, 168, 76, 0.12) !important;
}

.rs-hs-vs {
  color: #c9a84c !important;
}

.rs-arrow-up {
  color: #4a8c50 !important;
}

.rs-arrow-down {
  color: #8c4a4a !important;
}

.rs-arrow-eq {
  color: rgba(201, 168, 76, 0.35) !important;
}

/* Activity badges */
.rs-hs-online {
  background: rgba(76, 140, 80, 0.25) !important;
}

.rs-hs-idle {
  background: rgba(128, 128, 128, 0.2) !important;
}

/* Responsive overrides */
@media (max-width: 900px) {
  .rs-hs-skill-item {
    border-color: rgba(201, 168, 76, 0.1) !important;
  }
}

/* =====================================================
   ADVENTURER'S LOG — Full Dark Fantasy Restyle
   ===================================================== */

/* Container */
.rs-al-container {
  background: linear-gradient(180deg, var(--df-bg-card), var(--df-bg-deep)) !important;
  border: 1px solid var(--df-border) !important;
  border-top: 2px solid rgba(201, 168, 76, 0.4) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(201, 168, 76, 0.15) !important;
  border-radius: 3px !important;
}

/* Header Bar */
.rs-al-header-bar {
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card)) !important;
  border-bottom: 1px solid var(--df-border-bright) !important;
  border-top: 2px solid rgba(201, 168, 76, 0.35) !important;
}

.rs-al-back-link {
  color: var(--df-text-dim) !important;
  transition: color 0.2s ease !important;
}

.rs-al-back-link:hover {
  color: var(--df-gold) !important;
}

.rs-al-title {
  color: var(--df-gold) !important;
  font-family: 'Cinzel', serif !important;
  text-shadow: 0 0 12px rgba(201, 168, 76, 0.25) !important;
  letter-spacing: 1px !important;
}

/* Search */
.rs-al-search input {
  background: var(--df-bg-deep) !important;
  border: 1px solid var(--df-border) !important;
  color: var(--df-text-bright) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.rs-al-search input:focus {
  border-color: var(--df-gold) !important;
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.2) !important;
  outline: none !important;
}

.rs-al-search input::placeholder {
  color: var(--df-text-dim) !important;
}

.rs-al-search button {
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.2), rgba(201, 168, 76, 0.1)) !important;
  border: 1px solid var(--df-border-bright) !important;
  color: var(--df-gold) !important;
  transition: all 0.2s ease !important;
}

.rs-al-search button:hover {
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.3), rgba(201, 168, 76, 0.15)) !important;
  box-shadow: 0 0 6px rgba(201, 168, 76, 0.2) !important;
}

/* Search Autocomplete */
.rs-al-autocomplete {
  background: var(--df-bg-deep) !important;
  border: 1px solid var(--df-border-bright) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

.rs-al-autocomplete-item {
  color: var(--df-text-bright) !important;
  border-bottom-color: rgba(201, 168, 76, 0.08) !important;
  transition: background 0.15s ease !important;
}

.rs-al-autocomplete-item:hover {
  background: rgba(201, 168, 76, 0.1) !important;
  color: var(--df-gold) !important;
}

.rs-al-autocomplete-name {
  color: var(--df-parchment) !important;
}

.rs-al-autocomplete-level {
  color: var(--df-text-dim) !important;
}

/* Player Panel — Full immersive restyle */
.rs-al-player-panel {
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(201, 168, 76, 0.06) 0%, transparent 70%),
    linear-gradient(180deg, var(--df-bg-surface) 0%, var(--df-bg-card) 100%) !important;
  border: 1px solid var(--df-border-bright) !important;
  border-top: 2px solid rgba(201, 168, 76, 0.4) !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 1px 0 rgba(201, 168, 76, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 6px 24px rgba(0, 0, 0, 0.4) !important;
  padding: 16px !important;
}

/* Avatar Area */
.rs-al-avatar-area {
  gap: 14px !important;
}

.rs-al-avatar {
  width: 72px !important;
  height: 72px !important;
  border: 3px solid var(--df-gold) !important;
  border-radius: 50% !important;
  background: var(--df-bg-deepest) !important;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.4),
    0 0 16px rgba(201, 168, 76, 0.25),
    inset 0 0 8px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden !important;
}

.rs-al-avatar img {
  border-radius: 50% !important;
}

/* Player Name */
.rs-al-player-name {
  color: var(--df-gold) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 20px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 12px rgba(201, 168, 76, 0.2) !important;
  letter-spacing: 0.5px !important;
}

/* Badges */
.rs-al-player-badges {
  gap: 6px !important;
  margin-top: 5px !important;
}

.rs-al-badge {
  background: var(--df-bg-deep) !important;
  border: 1px solid var(--df-border) !important;
  color: var(--df-text) !important;
  border-radius: 3px !important;
  font-size: 11px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.rs-al-badge.premium {
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.2), rgba(201, 168, 76, 0.08)) !important;
  color: var(--df-gold) !important;
  border-color: rgba(201, 168, 76, 0.4) !important;
  box-shadow: 0 0 6px rgba(201, 168, 76, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.rs-al-badge.ironman {
  color: #aaa !important;
  border-color: rgba(170, 170, 170, 0.2) !important;
}

.rs-al-badge.hardcore {
  color: #e74c3c !important;
  border-color: rgba(231, 76, 60, 0.25) !important;
  box-shadow: 0 0 6px rgba(220, 50, 50, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Stats Grid */
.rs-al-stats-grid {
  border-top: 1px solid rgba(201, 168, 76, 0.1) !important;
  padding-top: 10px !important;
  margin-top: 10px !important;
  gap: 6px !important;
}

.rs-al-stat-item {
  background: rgba(20, 15, 10, 0.5) !important;
  border: 1px solid rgba(201, 168, 76, 0.1) !important;
  border-radius: 3px !important;
  padding: 7px 10px !important;
  transition: all 0.2s ease !important;
}

.rs-al-stat-item:hover {
  background: rgba(201, 168, 76, 0.08) !important;
  border-color: var(--df-border) !important;
}

.rs-al-stat-icon {
  color: var(--df-gold) !important;
  font-size: 13px !important;
  text-shadow: 0 0 6px rgba(201, 168, 76, 0.3) !important;
}

.rs-al-stat-label {
  color: var(--df-text-dim) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.rs-al-stat-value {
  color: var(--df-text-bright) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* Info Section (time played, created, last active) */
.rs-al-info-section {
  border-top: 1px solid rgba(201, 168, 76, 0.1) !important;
  padding-top: 10px !important;
  margin-top: 10px !important;
  gap: 12px !important;
}

.rs-al-info-row {
  color: var(--df-text) !important;
}

.rs-al-info-label {
  color: var(--df-text-dim) !important;
}

.rs-al-info-label i {
  color: var(--df-gold-dark) !important;
  text-shadow: 0 0 4px rgba(201, 168, 76, 0.2) !important;
}

.rs-al-info-value {
  color: var(--df-text-bright) !important;
  font-weight: 600 !important;
}

.rs-al-online-indicator {
  background: #4ade80 !important;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.5) !important;
  animation: df-online-pulse 2s ease-in-out infinite !important;
}

@keyframes df-online-pulse {

  0%,
  100% {
    box-shadow: 0 0 4px rgba(74, 222, 128, 0.3);
  }

  50% {
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.6);
  }
}

/* Activity Indicator */
.rs-al-activity {
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.08), rgba(201, 168, 76, 0.03)) !important;
  border: 1px solid rgba(201, 168, 76, 0.18) !important;
  border-left: 3px solid var(--df-gold) !important;
  border-radius: 3px !important;
  padding: 8px 14px !important;
}

.rs-al-activity-icon {
  filter: drop-shadow(0 0 3px rgba(201, 168, 76, 0.3)) !important;
}

.rs-al-activity-text {
  color: var(--df-gold) !important;
  font-weight: 600 !important;
  text-shadow: 0 0 6px rgba(201, 168, 76, 0.15) !important;
}

/* Settings Button */
.rs-al-settings-btn {
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.12), rgba(201, 168, 76, 0.04)) !important;
  border: 1px solid var(--df-border) !important;
  color: var(--df-text-dim) !important;
  border-radius: 3px !important;
  padding: 5px 14px !important;
  font-size: 11px !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
}

.rs-al-settings-btn:hover {
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.22), rgba(201, 168, 76, 0.10)) !important;
  color: var(--df-gold) !important;
  border-color: var(--df-border-bright) !important;
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.12) !important;
}

/* Skills Panel */
.rs-al-skills-panel {
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card)) !important;
  border: 1px solid var(--df-border) !important;
  border-radius: 3px !important;
  box-shadow: inset 0 1px 0 rgba(201, 168, 76, 0.1), 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.rs-al-total-header {
  border-bottom: 2px solid rgba(201, 168, 76, 0.2) !important;
}

.rs-al-total-label {
  color: var(--df-gold) !important;
  font-family: 'Cinzel', serif !important;
}

.rs-al-total-stats {
  color: var(--df-text-dim) !important;
}

.rs-al-total-stats span {
  color: var(--df-text-bright) !important;
}

.rs-al-level-text span,
.rs-al-xp-text span,
.rs-al-combat-text span {
  color: var(--df-gold) !important;
}

/* Skill Items */
.rs-al-skill-item {
  color: var(--df-text) !important;
  transition: all 0.2s ease !important;
  border-radius: 2px !important;
}

.rs-al-skill-item:hover {
  background: rgba(201, 168, 76, 0.08) !important;
  color: var(--df-gold) !important;
}

.rs-al-skill-level {
  color: var(--df-gold) !important;
  font-weight: 600 !important;
}

/* Skill Progress Bars */
.rs-al-skill-progress {
  background: var(--df-bg-deepest) !important;
  border: 1px solid rgba(201, 168, 76, 0.1) !important;
  border-radius: 2px !important;
}

.rs-al-skill-progress-fill {
  background: linear-gradient(90deg, var(--df-gold-dark), var(--df-gold)) !important;
  border-radius: 1px !important;
  box-shadow: 0 0 4px rgba(201, 168, 76, 0.3) !important;
}

.rs-al-bottom-section {
  margin-bottom: 15px !important;
}

/* Events Panels */
.rs-al-events-panel {
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card)) !important;
  border: 1px solid var(--df-border) !important;
  border-radius: 3px !important;
  box-shadow: inset 0 1px 0 rgba(201, 168, 76, 0.1), 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.rs-al-panel-header {
  background: linear-gradient(180deg, var(--df-bg-hover), var(--df-bg-surface)) !important;
  border-bottom: 2px solid rgba(201, 168, 76, 0.2) !important;
  color: var(--df-gold) !important;
}

.rs-al-panel-title {
  color: var(--df-gold) !important;
  font-family: 'Cinzel', serif !important;
}

.rs-al-event-item {
  border-bottom: 1px solid rgba(201, 168, 76, 0.06) !important;
}

.rs-al-event-item:last-child {
  border-bottom: none !important;
}

a.rs-al-event-item.rs-al-event-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}

a.rs-al-event-item.rs-al-event-link:hover {
  background: rgba(201, 168, 76, 0.06) !important;
}

a.rs-al-event-item.rs-al-event-link .rs-al-event-content {
  flex: 1 !important;
  min-width: 0 !important;
}

a.rs-al-event-item.rs-al-event-link .rs-al-event-time {
  margin-top: 0 !important;
  flex-shrink: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

.rs-al-event-header a {
  color: var(--df-gold) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.rs-al-event-header a:hover {
  color: var(--df-gold-light) !important;
  text-decoration: underline !important;
}

.rs-al-event-content {
  color: var(--df-text) !important;
}

.rs-al-event-time {
  color: var(--df-text-dim) !important;
  font-size: 11px !important;
}

.rs-al-friend-link {
  color: var(--df-gold) !important;
  text-decoration: none !important;
  font-weight: bold;
}

.rs-al-friend-link:hover {
  color: var(--df-gold-light) !important;
  text-decoration: underline !important;
}

.rs-al-empty {
  color: var(--df-text-dim) !important;
  font-style: italic !important;
}

/* Achievements & Quests Panels */
.rs-al-achievements-panel,
.rs-al-quests-panel {
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card)) !important;
  border: 1px solid var(--df-border) !important;
  border-radius: 3px !important;
  box-shadow: inset 0 1px 0 rgba(201, 168, 76, 0.1), 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Tab Buttons */
.rs-al-tabs {
  border-bottom: 1px solid rgba(201, 168, 76, 0.1) !important;
}

.rs-al-tab {
  background: transparent !important;
  color: var(--df-text-dim) !important;
  border: 1px solid transparent !important;
  transition: all 0.25s ease !important;
}

.rs-al-tab:hover {
  color: var(--df-text) !important;
  background: rgba(201, 168, 76, 0.05) !important;
}

.rs-al-tab.active {
  background: rgba(201, 168, 76, 0.12) !important;
  color: var(--df-gold) !important;
  border-color: var(--df-border-bright) !important;
  border-bottom-color: transparent !important;
}

/* List Items */
.rs-al-list-item {
  border-bottom: 1px solid rgba(201, 168, 76, 0.06) !important;
  transition: background 0.15s ease !important;
}

.rs-al-list-item:hover {
  background: rgba(201, 168, 76, 0.04) !important;
}

.rs-al-list-item:last-child {
  border-bottom: none !important;
}

.rs-al-item-name {
  color: var(--df-parchment) !important;
}

.rs-al-item-date {
  color: var(--df-text-dim) !important;
  font-size: 11px !important;
}

.rs-al-item-desc {
  color: rgba(232, 220, 196, 0.5) !important;
}

/* Progress Bars (Achievements/Quests) */
.rs-al-progress-bar {
  background: var(--df-bg-deepest) !important;
  border: 1px solid rgba(201, 168, 76, 0.1) !important;
  border-radius: 2px !important;
}

.rs-al-progress-fill {
  background: linear-gradient(90deg, var(--df-gold-dark), var(--df-gold)) !important;
  box-shadow: 0 0 4px rgba(201, 168, 76, 0.3) !important;
  border-radius: 1px !important;
}

.rs-al-progress-text {
  color: var(--df-text-dim) !important;
}

/* Pagination */
.rs-al-pagination {
  color: var(--df-text-dim) !important;
  border-top: 1px solid rgba(201, 168, 76, 0.08) !important;
}

.rs-al-pagination button {
  background: rgba(201, 168, 76, 0.08) !important;
  border: 1px solid var(--df-border) !important;
  color: var(--df-text-dim) !important;
  transition: all 0.2s ease !important;
}

.rs-al-pagination button:hover {
  background: rgba(201, 168, 76, 0.15) !important;
  color: var(--df-gold) !important;
  border-color: var(--df-border-bright) !important;
}

/* Compare Link */
.rs-al-compare-link a {
  color: var(--df-gold) !important;
  transition: color 0.2s ease !important;
}

.rs-al-compare-link a:hover {
  color: var(--df-gold-light) !important;
}

/* Footer */
.rs-al-footer {
  background: var(--df-bg-deep) !important;
  border-top: 1px solid var(--df-border) !important;
  color: var(--df-text-dim) !important;
}

.rs-al-footer .btn {
  background: rgba(201, 168, 76, 0.1) !important;
  border-color: var(--df-border) !important;
  color: var(--df-gold) !important;
}

/* Friends in AL */
.rs-al-friend-item {
  border-bottom: 1px solid rgba(201, 168, 76, 0.06) !important;
}

.rs-al-friend-item a {
  color: var(--df-text) !important;
  transition: color 0.2s ease !important;
}

.rs-al-friend-item a:hover {
  color: var(--df-gold) !important;
}

.rs-al-friend-item.online a {
  color: var(--df-gold) !important;
}

.rs-al-online-dot {
  background: #4ade80 !important;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.4) !important;
}

/* =====================================================
   BANK
   ===================================================== */
.rs-bank-container {
  background: var(--df-bg-card) !important;
  border: 1px solid var(--df-border) !important;
}

.rs-bank-header {
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card)) !important;
  border-bottom-color: var(--df-border) !important;
}

.rs-bank-tab {
  background: var(--df-bg-deep) !important;
  border-color: rgba(201, 168, 76, 0.1) !important;
  color: var(--df-text-dim) !important;
  transition: all 0.25s ease !important;
}

.rs-bank-tab.active {
  background: rgba(201, 168, 76, 0.12) !important;
  color: var(--df-gold) !important;
  border-color: var(--df-border-bright) !important;
}

.rs-bank-slot {
  background: var(--df-bg-deep) !important;
  border-color: rgba(201, 168, 76, 0.06) !important;
  transition: all 0.2s ease !important;
}

.rs-bank-slot:hover {
  background: var(--df-bg-surface) !important;
  border-color: var(--df-border) !important;
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.06) !important;
}

/* =====================================================
   PANELS / WELLS
   ===================================================== */
.panel {
  background:
    radial-gradient(ellipse 60% 30% at 50% 0%, rgba(201, 168, 76, 0.04) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--df-bg-surface) 0%, var(--df-bg-card) 100%) !important;
  border: 1px solid var(--df-border-bright) !important;
  border-top: 2px solid rgba(201, 168, 76, 0.5) !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.15) !important;
  box-shadow:
    inset 0 1px 0 rgba(201, 168, 76, 0.25),
    inset 0 -2px 0 rgba(0, 0, 0, 0.4),
    inset 2px 0 8px rgba(0, 0, 0, 0.2),
    inset -2px 0 8px rgba(0, 0, 0, 0.2),
    inset 0 0 30px rgba(0, 0, 0, 0.35),
    0 6px 20px rgba(0, 0, 0, 0.5) !important;
  border-radius: 2px !important;
}

.panel-heading {
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(201, 168, 76, 0.10) 0%, transparent 70%),
    linear-gradient(180deg, var(--df-bg-hover), var(--df-bg-surface)) !important;
  border-bottom: 1px solid var(--df-border-bright) !important;
  color: var(--df-gold) !important;
  text-shadow: 0 1px 8px rgba(201, 168, 76, 0.3), 0 0 20px rgba(201, 168, 76, 0.1) !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

.panel-body {
  color: rgba(232, 220, 196, 0.65) !important;
}

.well {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--df-bg-deep), var(--df-bg-deepest)) !important;
  border: 1px solid var(--df-border) !important;
  border-top: 1px solid rgba(201, 168, 76, 0.12) !important;
  box-shadow:
    inset 0 3px 12px rgba(0, 0, 0, 0.5),
    inset 0 0 25px rgba(0, 0, 0, 0.3),
    inset 0 -1px 0 rgba(201, 168, 76, 0.05) !important;
  color: rgba(232, 220, 196, 0.65) !important;
  border-radius: 2px !important;
}

/* =====================================================
   TABLES
   ===================================================== */
.table {
  color: rgba(232, 220, 196, 0.65) !important;
}

.table>thead>tr>th {
  border-bottom-color: var(--df-border) !important;
  color: var(--df-gold) !important;
  background: rgba(201, 168, 76, 0.04) !important;
}

.table>tbody>tr>td {
  border-top-color: rgba(201, 168, 76, 0.06) !important;
}

.table-striped>tbody>tr:nth-of-type(odd) {
  background: rgba(201, 168, 76, 0.02) !important;
}

.table-striped>tbody>tr:nth-of-type(even) {
  background: rgba(201, 168, 76, 0.04) !important;
}

.table-hover>tbody>tr:hover {
  background: rgba(201, 168, 76, 0.08) !important;
}

/* =====================================================
   DATATABLES
   ===================================================== */
.dataTables_wrapper .dataTables_info {
  color: rgba(201, 168, 76, 0.4) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--df-text-dim) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: rgba(201, 168, 76, 0.12) !important;
  border-color: var(--df-border) !important;
  color: var(--df-gold) !important;
}

/* =====================================================
   LABELS & BADGES
   ===================================================== */
.label-default {
  background: rgba(201, 168, 76, 0.15) !important;
  color: var(--df-gold) !important;
}

.label-primary {
  background: rgba(201, 168, 76, 0.2) !important;
  color: var(--df-gold-light) !important;
}

.label-success {
  background: rgba(74, 222, 128, 0.2) !important;
  color: #4ade80 !important;
}

.label-danger {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #ef4444 !important;
}

.label-warning {
  background: rgba(201, 168, 76, 0.2) !important;
  color: var(--df-gold) !important;
}

.label-info {
  background: rgba(167, 139, 250, 0.2) !important;
  color: #a78bfa !important;
}

/* =====================================================
   SCROLLBARS
   ===================================================== */
.mCSB_scrollTools .mCSB_draggerRail {
  background: rgba(201, 168, 76, 0.06) !important;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background: rgba(201, 168, 76, 0.2) !important;
  border-radius: 3px !important;
  transition: background 0.3s ease !important;
}

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background: rgba(201, 168, 76, 0.35) !important;
}

::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-track {
  background: var(--df-bg-deepest) !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(201, 168, 76, 0.2) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 168, 76, 0.35) !important;
}

/* =====================================================
   LISTING ITEMS
   ===================================================== */
.listing-item {
  border-bottom-color: rgba(201, 168, 76, 0.06) !important;
  color: rgba(232, 220, 196, 0.65) !important;
}

.listing-item a {
  color: var(--df-gold-dark) !important;
}

.listing-item a:hover {
  color: var(--df-gold) !important;
}

/* =====================================================
   SWEETALERT v1 — Toast style, below action bar
   ===================================================== */

/* Overlay — subtle, non-blocking */
.sweet-overlay {
  background: rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Main container — positioned below the action bar, centered like loot popups */
.sweet-alert {
  position: fixed !important;
  top: calc(var(--rs-header-height, 35px) + var(--rs-nav-height, 60px) + var(--rs-action-bar-height, 42px) + 12px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  width: 360px !important;
  max-width: 90vw !important;
  background: linear-gradient(180deg, rgba(30, 25, 20, 0.97), rgba(20, 16, 12, 0.97)) !important;
  border: 1px solid rgba(139, 105, 20, 0.5) !important;
  border-radius: 8px !important;
  color: var(--df-parchment) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(139, 105, 20, 0.15) !important;
  padding: 18px 20px 16px !important;
  text-align: center !important;
  animation: swal-drop-in 0.3s ease-out !important;
  z-index: 10020 !important;
}

@keyframes swal-drop-in {
  from {
    transform: translateX(-50%) translateY(-15px);
    opacity: 0;
  }

  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

/* ── Icons — keep default 80px, just fix colors for dark bg ── */
.sweet-alert .sa-icon {
  margin: 10px auto 10px !important;
}

/* Success — green border, remove white half-circles entirely */
.sweet-alert .sa-icon.sa-success {
  border-color: rgba(92, 190, 92, 0.5) !important;
}

.sweet-alert .sa-icon.sa-success::before,
.sweet-alert .sa-icon.sa-success::after {
  display: none !important;
}

.sweet-alert .sa-icon.sa-success .sa-placeholder {
  border-color: rgba(92, 190, 92, 0.15) !important;
}

.sweet-alert .sa-icon.sa-success .sa-line {
  background-color: #5cb85c !important;
}

.sweet-alert .sa-icon.sa-success .sa-fix {
  display: none !important;
}

/* Error — red */
.sweet-alert .sa-icon.sa-error {
  border-color: rgba(190, 70, 70, 0.5) !important;
}

.sweet-alert .sa-icon.sa-error .sa-line {
  background-color: #be4646 !important;
}

/* Warning — gold */
.sweet-alert .sa-icon.sa-warning {
  border-color: rgba(201, 168, 76, 0.5) !important;
}

.sweet-alert .sa-icon.sa-warning .sa-body,
.sweet-alert .sa-icon.sa-warning .sa-dot {
  background-color: #c9a84c !important;
}

/* Info — blue */
.sweet-alert .sa-icon.sa-info {
  border-color: rgba(92, 180, 220, 0.5) !important;
}

.sweet-alert .sa-icon.sa-info::before,
.sweet-alert .sa-icon.sa-info::after {
  background-color: #5cb4dc !important;
}

/* ── Title ── */
.sweet-alert h2 {
  font-family: 'Cinzel', serif !important;
  color: #ffd700 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 4px 0 4px !important;
  line-height: 1.3 !important;
}

/* ── Body text ── */
.sweet-alert p {
  font-family: 'Crimson Text', Georgia, serif !important;
  color: #c0b090 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Buttons ── */
.sweet-alert .sa-button-container {
  margin-top: 14px !important;
  text-align: center !important;
}

.sweet-alert button.confirm,
.sweet-alert .sa-confirm-button-container .confirm {
  background: linear-gradient(180deg, #5a8a5a, #3d6b3d) !important;
  color: #e0ffe0 !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  border: 1px solid #2d4d2d !important;
  border-radius: 4px !important;
  padding: 7px 20px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s ease !important;
}

.sweet-alert button.confirm:hover,
.sweet-alert .sa-confirm-button-container .confirm:hover {
  background: linear-gradient(180deg, #6a9a6a, #4d7b4d) !important;
}

.sweet-alert button.cancel,
.sweet-alert .sa-button-container .cancel {
  background: linear-gradient(180deg, #6b4a4a, #4d3535) !important;
  border: 1px solid #3d2525 !important;
  color: #ffcccc !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  border-radius: 4px !important;
  padding: 7px 20px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.sweet-alert button.cancel:hover,
.sweet-alert .sa-button-container .cancel:hover {
  background: linear-gradient(180deg, #7b5a5a, #5d4545) !important;
}

/* ── Input fields ── */
.sweet-alert fieldset {
  border-color: transparent !important;
  padding: 0 !important;
}

.sweet-alert input,
.sweet-alert .sa-input-field input {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid #5c4a32 !important;
  border-radius: 4px !important;
  color: #e0d0c0 !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
}

.sweet-alert input:focus,
.sweet-alert .sa-input-field input:focus {
  border-color: #ffd700 !important;
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.3) !important;
  outline: none !important;
}

.sweet-alert input::placeholder {
  color: #8b7355 !important;
}

/* ── Error container ── */
.sweet-alert .sa-error-container {
  background: rgba(100, 50, 50, 0.3) !important;
  border-top: 1px solid rgba(190, 70, 70, 0.15) !important;
}

.sweet-alert .sa-error-container p {
  color: #ff9999 !important;
}

.sweet-alert .sa-error-container .icon {
  color: #be4646 !important;
  border-color: #be4646 !important;
}

/* ── Loading spinner ── */
.sweet-alert .la-ball-fall div {
  background: #ffd700 !important;
}

/* ═══ Arrival toast — green accent ═══ */
.sweet-alert.swal-arrival {
  border-left: 3px solid rgba(92, 200, 92, 0.6) !important;
}

.sweet-alert.swal-arrival h2 {
  color: #6cd86c !important;
}

/* =====================================================
   FOOTER — Atmospheric redesign
   ===================================================== */
/* Hide old footer */
.app-footer.app-footer-default {
  display: none !important;
}

/* Consistent bottom spacing for all page content before footer */
.rs-hiscores,
.rs-al-container,
.ge-page-wrap,
.forum-container {
  margin-bottom: 40px;
}

.df-footer {
  position: relative !important;
  text-align: center !important;
  padding: 40px 24px 30px !important;
  background: transparent !important;
  border-top: none !important;
}

/* Hide the ornament */
.df-footer-ornament {
  display: none !important;
  gap: 16px !important;
  margin-bottom: 28px !important;
}

.df-footer-line {
  width: 120px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.45), rgba(201, 168, 76, 0.6)) !important;
  box-shadow: 0 0 6px rgba(201, 168, 76, 0.15) !important;
}

.df-footer-line:last-child {
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.6), rgba(201, 168, 76, 0.45), transparent) !important;
}

.df-footer-diamond {
  width: 10px !important;
  height: 10px !important;
  border: 1px solid rgba(201, 168, 76, 0.6) !important;
  transform: rotate(45deg) !important;
  position: relative !important;
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.25), inset 0 0 4px rgba(201, 168, 76, 0.15) !important;
  flex-shrink: 0 !important;
}

.df-footer-diamond::after {
  content: '' !important;
  position: absolute !important;
  inset: 1px !important;
  background: rgba(201, 168, 76, 0.45) !important;
  box-shadow: 0 0 6px rgba(201, 168, 76, 0.3) !important;
}

.df-footer-brand {
  font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 6px !important;
  text-transform: uppercase !important;
  background: linear-gradient(180deg, var(--df-parchment), var(--df-gold)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 6px !important;
}

.df-footer-tagline {
  display: none !important;
}

.df-footer-links {
  display: flex !important;
  gap: 20px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}

.df-footer-link {
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(201, 168, 76, 0.35) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

.df-footer-link::after {
  content: '' !important;
  position: absolute !important;
  bottom: -3px !important;
  left: 0 !important;
  width: 0 !important;
  height: 1px !important;
  background: var(--df-gold) !important;
  transition: width 0.3s ease !important;
}

.df-footer-link:hover {
  color: var(--df-gold) !important;
  text-shadow: 0 0 8px rgba(201, 168, 76, 0.2) !important;
}

.df-footer-link:hover::after {
  width: 100% !important;
}

.df-footer-sep {
  width: 3px !important;
  height: 3px !important;
  background: rgba(201, 168, 76, 0.2) !important;
  border-radius: 50% !important;
}

.df-footer-copy {
  font-family: 'Cinzel', serif !important;
  font-size: 9px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(201, 168, 76, 0.2) !important;
}

/* =====================================================
   MISC
   ===================================================== */
.avatar-upload-section {
  background: var(--df-bg-deep) !important;
  border-color: var(--df-border) !important;
}

.avatar-hint {
  color: var(--df-text-dim) !important;
}

.app-widget-tile {
  background:
    radial-gradient(ellipse 60% 20% at 50% 0%, rgba(201, 168, 76, 0.05) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--df-bg-surface) 0%, var(--df-bg-card) 100%) !important;
  border: 1px solid var(--df-border-bright) !important;
  border-top: 2px solid rgba(201, 168, 76, 0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(201, 168, 76, 0.25),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    inset 0 0 20px rgba(0, 0, 0, 0.3),
    0 4px 16px rgba(0, 0, 0, 0.4) !important;
  color: var(--df-text) !important;
  transition: all 0.3s ease !important;
}

.app-widget-tile:hover {
  border-color: var(--df-border-glow) !important;
  box-shadow:
    inset 0 1px 0 rgba(201, 168, 76, 0.35),
    inset 0 0 20px rgba(0, 0, 0, 0.3),
    0 8px 30px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(201, 168, 76, 0.12) !important;
  transform: translateY(-1px) !important;
}

.app-widget-tile .title {
  color: var(--df-gold) !important;
}

.app-widget-tile .intval {
  color: var(--df-parchment) !important;
}

.app-heading .title h3 {
  color: var(--df-gold) !important;
  text-shadow: 0 0 8px rgba(201, 168, 76, 0.15) !important;
}

.text-muted {
  color: rgba(201, 168, 76, 0.35) !important;
}

.text-primary {
  color: var(--df-gold) !important;
}

.text-success {
  color: #4ade80 !important;
}

.text-danger {
  color: #ef4444 !important;
}

.text-warning {
  color: var(--df-gold) !important;
}

.text-info {
  color: #a78bfa !important;
}

/* Dropdown menus */
.dropdown-menu {
  background: rgba(48, 40, 32, 0.97) !important;
  backdrop-filter: blur(12px) !important;
  border-color: var(--df-border-bright) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.dropdown-menu>li>a {
  color: rgba(232, 220, 196, 0.65) !important;
  transition: all 0.25s ease !important;
}

.dropdown-menu>li>a:hover {
  background: rgba(201, 168, 76, 0.1) !important;
  color: var(--df-parchment) !important;
}

.dropdown-menu .divider {
  background: var(--df-border) !important;
}

/* Select2 */
.select2-container--default .select2-selection--multiple {
  background: var(--df-bg-card) !important;
  border-color: var(--df-border) !important;
}

.select2-container--default .select2-results__option {
  background: var(--df-bg-card) !important;
  color: var(--df-text) !important;
}

.select2-container--default .select2-results__option--highlighted {
  background: rgba(201, 168, 76, 0.12) !important;
  color: var(--df-gold) !important;
}

.select2-dropdown {
  background: var(--df-bg-card) !important;
  border-color: var(--df-border) !important;
}

hr {
  border-top-color: var(--df-border) !important;
}

/* Pagination */
.pagination>li>a,
.pagination>li>span {
  background: var(--df-bg-deep) !important;
  border-color: var(--df-border) !important;
  color: var(--df-text-dim) !important;
  transition: all 0.25s ease !important;
}

.pagination>li>a:hover {
  background: rgba(201, 168, 76, 0.08) !important;
  color: var(--df-parchment) !important;
}

.pagination>.active>a,
.pagination>.active>a:hover {
  background: rgba(201, 168, 76, 0.15) !important;
  border-color: var(--df-border-bright) !important;
  color: var(--df-gold) !important;
}

.app-statusbar {
  background: var(--df-bg-card) !important;
  border-top: 1px solid var(--df-border) !important;
  color: var(--df-text) !important;
}

#inventory-box {
  background: transparent !important;
}

#inventory-box .table td {
  border: none !important;
}

.app-checkbox label {
  color: var(--df-text-dim) !important;
}

.input-group-btn .btn {
  border-color: var(--df-border) !important;
}

/* Buff box */
#buffBox {
  color: var(--df-text) !important;
}

/* Progress bars */
.progress {
  background: var(--df-bg-deepest) !important;
  border: 1px solid var(--df-border) !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

.progress-bar {
  background:
    linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%),
    linear-gradient(90deg, var(--df-gold), var(--df-gold-dark)) !important;
  background-size: 200% 100%, 100% 100% !important;
  animation: df-xp-shine 2.5s linear infinite !important;
}

.progress-bar-success {
  background:
    linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%),
    linear-gradient(90deg, #4ade80, #166534) !important;
  background-size: 200% 100%, 100% 100% !important;
}

.progress-bar-danger {
  background:
    linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%),
    linear-gradient(90deg, #ef4444, #7f1d1d) !important;
  background-size: 200% 100%, 100% 100% !important;
}

/* =====================================================
   TRAVEL PANEL — Hidden (JS still runs inside)
   ===================================================== */
#travelPanel {
  display: none !important;
}

/* =====================================================
   BANK LINK — Hidden from navbar
   ===================================================== */
#rsBankLink {
  display: none !important;
}

/* =====================================================
   NAVBAR LOCATION / TRAVEL DROPDOWN
   ===================================================== */
/* Location button — matches other nav links, no extra chrome */
.rs-location-btn {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

.rs-location-btn #rsLocationNavName {
  /* Inherits Cinzel/uppercase/letter-spacing from .rs-nav-link */
}

.rs-location-btn .fa-caret-down {
  margin-left: 2px;
  opacity: 0.6;
  transition: transform 0.2s;
}

.rs-nav-dropdown:hover .rs-location-btn .fa-caret-down {
  transform: rotate(180deg);
}

/* Travel dropdown menu */
.rs-travel-dropdown {
  min-width: 320px !important;
  max-height: 420px !important;
  overflow-y: auto !important;
  background: linear-gradient(180deg, var(--df-bg-card), var(--df-bg-deep)) !important;
  border: 1px solid var(--df-border-bright) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), var(--df-glow-gold) !important;
  border-radius: 8px !important;
  padding: 0 !important;
}

.rs-travel-dropdown-header {
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card));
  border-bottom: 1px solid var(--df-border);
  border-radius: 8px 8px 0 0;
}

.rs-travel-region {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: var(--df-text-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* Route items */
.rs-travel-route-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.06) !important;
  color: var(--df-text) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.rs-travel-route-item:hover {
  background: rgba(201, 168, 76, 0.1) !important;
  color: var(--df-gold-light) !important;
  text-decoration: none !important;
}

.rs-travel-route-item:last-child {
  border-bottom: none !important;
}

.rs-travel-route-method {
  font-size: 18px;
  width: 26px;
  text-align: center;
  flex-shrink: 0;
}

.rs-travel-route-dest {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--df-text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rs-travel-route-time {
  font-size: 11px;
  color: var(--df-text-dim);
  flex-shrink: 0;
  background: rgba(201, 168, 76, 0.08);
  padding: 2px 7px;
  border-radius: 4px;
  font-family: monospace;
}

.rs-travel-route-cost {
  font-size: 12px;
  color: var(--df-gold);
  font-weight: 600;
  flex-shrink: 0;
}

.rs-travel-route-cost img {
  filter: drop-shadow(0 0 2px rgba(201, 168, 76, 0.4));
}

.rs-travel-route-free {
  font-size: 11px;
  color: #4ade80;
  flex-shrink: 0;
  font-weight: 600;
}

/* Travel dropdown scrollbar */
.rs-travel-dropdown::-webkit-scrollbar {
  width: 6px;
}

.rs-travel-dropdown::-webkit-scrollbar-track {
  background: var(--df-bg-deep);
}

.rs-travel-dropdown::-webkit-scrollbar-thumb {
  background: var(--df-border-bright);
  border-radius: 3px;
}

/* =====================================================
   GAME AREA PANEL — Below chat in col-7
   ===================================================== */
.df-game-area-panel {
  margin-top: 15px;
  background: linear-gradient(180deg, var(--df-bg-card), var(--df-bg-deep));
  border: 1px solid var(--df-border);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  animation: df-breathe 6s ease-in-out infinite;
}

/* Compact timeline variant for narrower col-7 width */
.df-updates-compact .df-updates-header {
  padding: 10px 0 15px !important;
}

.df-updates-compact .df-updates-title {
  font-size: 18px !important;
}

.df-updates-compact .df-updates-sub {
  font-size: 12px !important;
  margin-top: 4px !important;
}

.df-updates-compact .df-update-entry {
  padding-left: 22px !important;
}

.df-updates-compact .df-update-entry::before {
  left: 0 !important;
}

.df-updates-compact .df-update-dot {
  left: -4px !important;
  width: 8px !important;
  height: 8px !important;
}

.df-updates-compact .df-update-title {
  font-size: 14px !important;
}

.df-updates-compact .df-update-body {
  font-size: 12px !important;
  -webkit-line-clamp: 2 !important;
}

.df-updates-compact .df-update-date {
  font-size: 10px !important;
}

.df-updates-compact .df-update-tag {
  font-size: 9px !important;
  padding: 1px 6px !important;
}

/* =====================================================
   TRAVEL MODAL — Ensure visibility (lives outside hidden panel)
   ===================================================== */
#travelModal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}

#travelModal .rs-travel-modal-content {
  background: linear-gradient(180deg, var(--df-bg-card), var(--df-bg-deep)) !important;
  border: 2px solid var(--df-border-bright) !important;
  border-radius: 12px !important;
  padding: 30px !important;
  max-width: 400px !important;
  margin: 15vh auto !important;
  text-align: center !important;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.8), var(--df-glow-gold-strong) !important;
  pointer-events: auto !important;
}

#travelModal .rs-travel-progress-bar {
  background: var(--df-bg-deepest) !important;
  border: 1px solid var(--df-border) !important;
  border-radius: 6px !important;
  height: 12px !important;
  overflow: hidden !important;
  margin-top: 15px !important;
}

#travelModal .rs-travel-progress-fill {
  background: linear-gradient(90deg, var(--df-gold-dark), var(--df-gold), var(--df-gold-light)) !important;
  height: 100% !important;
  border-radius: 6px !important;
  transition: width 0.1s linear !important;
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.5) !important;
}

#travelModal .rs-travel-progress-text {
  color: var(--df-text-bright) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 15px !important;
  margin-top: 10px !important;
}

#travelModal .rs-travel-method-icon {
  font-size: 48px !important;
  display: block !important;
  margin-bottom: 10px !important;
  animation: df-float 2s ease-in-out infinite !important;
}

#travelModal .rs-fast-travel-btn {
  margin-top: 15px !important;
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card)) !important;
  border: 1px solid var(--df-border-bright) !important;
  color: var(--df-gold) !important;
  border-radius: 6px !important;
  padding: 6px 16px !important;
  cursor: pointer !important;
  font-size: 12px !important;
}

/* =====================================================
   TOWN HUB DASHBOARD
   ===================================================== */

/* Container */
.df-hub {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: visible;
  position: relative;
  background: url('/assets/images/scrolls/scrollContent.png') repeat-y center top;
  background-size: 100% auto;
  margin-top: 24px;
  margin-bottom: 24px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.df-hub::before,
.df-hub::after {
  content: '';
  position: absolute;
  /* Rolls are 765px wide vs 745px content — extend ~1.35% beyond each side */
  left: -1.4%;
  right: -1.4%;
  height: 47px;
  z-index: 5;
  pointer-events: none;
}

/* Scroll top roll — curl above, transition overlaps parchment */
.df-hub::before {
  top: -24px;
  background: url('/assets/images/scrolls/scrollTop.png') no-repeat center center;
  background-size: 100% 100%;
}

/* Scroll bottom roll — curl below, transition overlaps parchment */
.df-hub::after {
  bottom: -24px;
  background: url('/assets/images/scrolls/scrollBottom.png') no-repeat center center;
  background-size: 100% 100%;
}

.df-hub-banner {
  margin-bottom: 12px;
}

.df-hub-nav {
  margin-bottom: 0;
}

/* ===== EVENT MODAL ===== */
.ge-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ge-modal-fade-in 0.2s ease;
}

@keyframes ge-modal-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.ge-modal-box {
  background: #1a1410;
  border: 1px solid #5c4a2e;
  border-radius: 6px;
  width: 420px;
  max-width: 92vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  animation: ge-modal-slide-in 0.2s ease;
}

@keyframes ge-modal-slide-in {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }

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

.ge-modal-head {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #5c4a2e;
  background: linear-gradient(135deg, #2a2117, #1e1810);
}

.ge-modal-head span {
  flex: 1;
  color: var(--df-gold);
  font-size: 13px;
  font-weight: bold;
  font-family: var(--df-font);
}

.ge-modal-close {
  background: none;
  border: none;
  color: #888;
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.ge-modal-close:hover {
  color: #c0a070;
}

.ge-modal-body {
  padding: 14px;
}

.ge-modal-body label {
  color: #888;
  font-size: 10px;
  margin-bottom: 2px;
  display: block;
}

.ge-modal-body .form-control {
  font-size: 12px;
  background: #12100d;
  border-color: #3d3225;
  color: #c4a882;
}

.ge-modal-body .form-control:focus {
  border-color: var(--df-gold);
  box-shadow: 0 0 0 1px rgba(192, 160, 112, 0.2);
}

.ge-modal-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.ge-modal-row>div {
  flex: 1;
}

.ge-modal-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 10px 14px;
  border-top: 1px solid #2a2117;
}

/* ===== VEXILLUM BANNERS ===== */
.vex-wrap {
  position: relative;
  width: 48px;
  height: 64px;
  flex-shrink: 0;
}

/* Vertical pole */
.vex-pole {
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 100%;
  margin-left: -1.5px;
  background: var(--fc-pole, linear-gradient(90deg, #6b5630, #b8a068, #8b7340));
  border-radius: 2px;
  z-index: 1;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

/* Pole finial (spear tip) */
.vex-pole::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: -4px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 8px solid var(--fc-cap-solid, #d4b85c);
  filter: drop-shadow(0 -1px 2px rgba(201, 168, 76, 0.5));
}

/* Horizontal crossbar */
.vex-crossbar {
  position: absolute;
  top: 8px;
  left: 2px;
  right: 2px;
  height: 3px;
  background: var(--fc-bar, linear-gradient(180deg, #b8a068, #8b7340));
  border-radius: 1px;
  z-index: 4;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Crossbar end caps */
.vex-crossbar::before,
.vex-crossbar::after {
  content: '';
  position: absolute;
  top: -2px;
  width: 5px;
  height: 7px;
  background: var(--fc-cap, radial-gradient(circle, #d4b85c, #9a7e3c));
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(201, 168, 76, 0.3);
}

.vex-crossbar::before {
  left: -2px;
}

.vex-crossbar::after {
  right: -2px;
}

/* Hanging banner cloth */
.vex-banner {
  position: absolute;
  top: 11px;
  left: 5px;
  right: 5px;
  bottom: 4px;
  border-radius: 0 0 2px 2px;
  overflow: hidden;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: vex-sway 4s ease-in-out infinite;
  transform-origin: top center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

/* Cloth shading overlay */
.vex-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.12) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 20%, transparent 85%, rgba(0, 0, 0, 0.15) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Vertical fold lines */
.vex-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
      transparent 0px,
      transparent 6px,
      rgba(0, 0, 0, 0.04) 6px,
      rgba(0, 0, 0, 0.04) 7px,
      transparent 7px,
      transparent 13px,
      rgba(255, 255, 255, 0.03) 13px,
      rgba(255, 255, 255, 0.03) 14px);
  z-index: 1;
  pointer-events: none;
}

/* Emblem on the banner */
.vex-emblem {
  position: relative;
  z-index: 2;
  font-size: 16px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  margin-top: -2px;
}

/* Decorative fringe at bottom */
.vex-fringe {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  z-index: 2;
  background: repeating-linear-gradient(90deg,
      transparent 0px,
      transparent 2px,
      currentColor 2px,
      currentColor 3px);
  opacity: 0.4;
  mask-image: linear-gradient(180deg, transparent, black 40%);
  -webkit-mask-image: linear-gradient(180deg, transparent, black 40%);
}

/* ---- Vexillum Color Themes ---- */

/* Varrock: Crimson & Gold (Capital) */
.vex-varrock {
  background: linear-gradient(180deg, #8b1a1a 0%, #a52020 30%, #961c1c 70%, #7a1515 100%);
  border-left: 2px solid #d4a845;
  border-right: 2px solid #d4a845;
}

.vex-varrock .vex-emblem {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.vex-varrock .vex-fringe {
  color: #d4a845;
}

/* Lumbridge: Royal Blue & Gold (Starter) */
.vex-lumbridge {
  background: linear-gradient(180deg, #1a3a7a 0%, #2050a0 30%, #1c4890 70%, #153070 100%);
  border-left: 2px solid #d4a845;
  border-right: 2px solid #d4a845;
}

.vex-lumbridge .vex-emblem {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.vex-lumbridge .vex-fringe {
  color: #d4a845;
}

/* Falador: White & Blue (White Knights) */
.vex-falador {
  background: linear-gradient(180deg, #c8cdd5 0%, #e0e4ea 30%, #d0d5dd 70%, #b8bcc5 100%);
  border-left: 2px solid #3a6cb8;
  border-right: 2px solid #3a6cb8;
}

.vex-falador .vex-emblem {
  color: #2a5090;
  text-shadow: 0 0 6px rgba(60, 100, 180, 0.4);
}

.vex-falador .vex-fringe {
  color: #3a6cb8;
}

/* Al Kharid: Sandy Gold & Brown (Desert) */
.vex-alkharid {
  background: linear-gradient(180deg, #c8a040 0%, #d4b050 30%, #c09838 70%, #a88030 100%);
  border-left: 2px solid #6b4020;
  border-right: 2px solid #6b4020;
}

.vex-alkharid .vex-emblem {
  color: #fff8e0;
  text-shadow: 0 0 6px rgba(255, 200, 80, 0.5);
}

.vex-alkharid .vex-fringe {
  color: #6b4020;
}

/* Ardougne: Deep Purple & Silver (Market/Thievery) */
.vex-ardougne {
  background: linear-gradient(180deg, #4a1a6b 0%, #5c2880 30%, #502270 70%, #3e1558 100%);
  border-left: 2px solid #b0b0c0;
  border-right: 2px solid #b0b0c0;
}

.vex-ardougne .vex-emblem {
  color: #d0d0e0;
  text-shadow: 0 0 8px rgba(200, 200, 230, 0.4);
}

.vex-ardougne .vex-fringe {
  color: #b0b0c0;
}

/* Barbarian (Outpost & Village): Leather Brown & Red */
.vex-barbarian {
  background: linear-gradient(180deg, #5a3a1a 0%, #6b4525 30%, #604020 70%, #4a3015 100%);
  border-left: 2px solid #a03020;
  border-right: 2px solid #a03020;
}

.vex-barbarian .vex-emblem {
  color: #d04030;
  text-shadow: 0 0 6px rgba(200, 60, 50, 0.4);
}

.vex-barbarian .vex-fringe {
  color: #a03020;
}

/* Brimhaven: Black & Crimson (Pirate) */
.vex-brimhaven {
  background: linear-gradient(180deg, #1a1a1a 0%, #2a2020 30%, #1e1818 70%, #121212 100%);
  border-left: 2px solid #8b1a1a;
  border-right: 2px solid #8b1a1a;
}

.vex-brimhaven .vex-emblem {
  color: #d03030;
  text-shadow: 0 0 8px rgba(200, 40, 40, 0.5);
}

.vex-brimhaven .vex-fringe {
  color: #8b1a1a;
}

/* Canifis: Dark Purple & Silver (Morytania/Werewolf) */
.vex-canifis {
  background: linear-gradient(180deg, #2a1530 0%, #3a2040 30%, #301a38 70%, #201025 100%);
  border-left: 2px solid #808090;
  border-right: 2px solid #808090;
}

.vex-canifis .vex-emblem {
  color: #c0b8d0;
  text-shadow: 0 0 8px rgba(180, 170, 210, 0.5);
}

.vex-canifis .vex-fringe {
  color: #808090;
}

/* Catherby: Ocean Blue & White (Fishing) */
.vex-catherby {
  background: linear-gradient(180deg, #1a5080 0%, #2068a0 30%, #1c5a90 70%, #154870 100%);
  border-left: 2px solid #e0e8f0;
  border-right: 2px solid #e0e8f0;
}

.vex-catherby .vex-emblem {
  color: #e8f0f8;
  text-shadow: 0 0 6px rgba(200, 220, 255, 0.5);
}

.vex-catherby .vex-fringe {
  color: #e0e8f0;
}

/* Draynor: Dark Green & Brown (Haunted Village) */
.vex-draynor {
  background: linear-gradient(180deg, #1a3020 0%, #254030 30%, #203828 70%, #152518 100%);
  border-left: 2px solid #5a4020;
  border-right: 2px solid #5a4020;
}

.vex-draynor .vex-emblem {
  color: #80a070;
  text-shadow: 0 0 6px rgba(120, 160, 100, 0.4);
}

.vex-draynor .vex-fringe {
  color: #5a4020;
}

/* Edgeville: Charcoal & Blood Red (Wilderness Border) */
.vex-edgeville {
  background: linear-gradient(180deg, #2a2428 0%, #383035 30%, #302830 70%, #221c22 100%);
  border-left: 2px solid #8b2020;
  border-right: 2px solid #8b2020;
}

.vex-edgeville .vex-emblem {
  color: #cc3030;
  text-shadow: 0 0 8px rgba(200, 40, 40, 0.5);
}

.vex-edgeville .vex-fringe {
  color: #8b2020;
}

/* Entrana: Cream & Light Blue (Holy Island) */
.vex-entrana {
  background: linear-gradient(180deg, #e8e0d0 0%, #f0e8d8 30%, #e4dcc8 70%, #d8d0c0 100%);
  border-left: 2px solid #6090c0;
  border-right: 2px solid #6090c0;
}

.vex-entrana .vex-emblem {
  color: #4878a8;
  text-shadow: 0 0 6px rgba(80, 130, 190, 0.4);
}

.vex-entrana .vex-fringe {
  color: #6090c0;
}

/* Tree Gnome Stronghold: Forest Green & Brown */
.vex-gnome {
  background: linear-gradient(180deg, #2a5020 0%, #356830 30%, #305828 70%, #224018 100%);
  border-left: 2px solid #6b4a20;
  border-right: 2px solid #6b4a20;
}

.vex-gnome .vex-emblem {
  color: #90d060;
  text-shadow: 0 0 8px rgba(140, 210, 90, 0.4);
}

.vex-gnome .vex-fringe {
  color: #6b4a20;
}

/* Jatizso: Steel Grey & Ice Blue (Norse Mining) */
.vex-jatizso {
  background: linear-gradient(180deg, #484850 0%, #585860 30%, #505058 70%, #404048 100%);
  border-left: 2px solid #7090b0;
  border-right: 2px solid #7090b0;
}

.vex-jatizso .vex-emblem {
  color: #a0c0e0;
  text-shadow: 0 0 6px rgba(160, 190, 220, 0.4);
}

.vex-jatizso .vex-fringe {
  color: #7090b0;
}

/* Karamja: Tropical Green & Yellow */
.vex-karamja {
  background: linear-gradient(180deg, #2a6020 0%, #358030 30%, #306828 70%, #225018 100%);
  border-left: 2px solid #d0a020;
  border-right: 2px solid #d0a020;
}

.vex-karamja .vex-emblem {
  color: #f0d040;
  text-shadow: 0 0 8px rgba(240, 210, 60, 0.5);
}

.vex-karamja .vex-fringe {
  color: #d0a020;
}

/* Keldagrim: Stone Grey & Forge Orange (Dwarven) */
.vex-keldagrim {
  background: linear-gradient(180deg, #3a3530 0%, #4a4540 30%, #403b38 70%, #302b28 100%);
  border-left: 2px solid #c07020;
  border-right: 2px solid #c07020;
}

.vex-keldagrim .vex-emblem {
  color: #f09030;
  text-shadow: 0 0 8px rgba(240, 140, 40, 0.5);
}

.vex-keldagrim .vex-fringe {
  color: #c07020;
}

/* Lunar Isle: Deep Navy & Silver (Lunar Magic) */
.vex-lunarisle {
  background: linear-gradient(180deg, #101830 0%, #182040 30%, #141c38 70%, #0c1425 100%);
  border-left: 2px solid #a0a8c0;
  border-right: 2px solid #a0a8c0;
}

.vex-lunarisle .vex-emblem {
  color: #d0d8f0;
  text-shadow: 0 0 10px rgba(200, 210, 240, 0.5);
}

.vex-lunarisle .vex-fringe {
  color: #a0a8c0;
}

/* Neitiznot: Ice Blue & White (Viking) */
.vex-neitiznot {
  background: linear-gradient(180deg, #3060a0 0%, #4078b8 30%, #3868a8 70%, #285890 100%);
  border-left: 2px solid #e0e8f0;
  border-right: 2px solid #e0e8f0;
}

.vex-neitiznot .vex-emblem {
  color: #f0f4f8;
  text-shadow: 0 0 6px rgba(220, 230, 250, 0.5);
}

.vex-neitiznot .vex-fringe {
  color: #e0e8f0;
}

/* Port Sarim: Navy & White (Port) */
.vex-portsarim {
  background: linear-gradient(180deg, #1a2850 0%, #203060 30%, #1c2c58 70%, #152045 100%);
  border-left: 2px solid #d0d8e0;
  border-right: 2px solid #d0d8e0;
}

.vex-portsarim .vex-emblem {
  color: #e8f0f8;
  text-shadow: 0 0 6px rgba(220, 235, 255, 0.4);
}

.vex-portsarim .vex-fringe {
  color: #d0d8e0;
}

/* Prifddinas: Crystal Teal & Light (Elven Endgame) */
.vex-prifddinas {
  background: linear-gradient(180deg, #105058 0%, #186870 30%, #146060 70%, #0c4548 100%);
  border-left: 2px solid #80e0d0;
  border-right: 2px solid #80e0d0;
}

.vex-prifddinas .vex-emblem {
  color: #a0f0e8;
  text-shadow: 0 0 10px rgba(160, 240, 230, 0.5);
}

.vex-prifddinas .vex-fringe {
  color: #80e0d0;
}

/* Rellekka: Dark Teal & Grey (Fremennik) */
.vex-rellekka {
  background: linear-gradient(180deg, #1a3038 0%, #204048 30%, #1c3840 70%, #152830 100%);
  border-left: 2px solid #808888;
  border-right: 2px solid #808888;
}

.vex-rellekka .vex-emblem {
  color: #b0c0c0;
  text-shadow: 0 0 6px rgba(170, 190, 190, 0.4);
}

.vex-rellekka .vex-fringe {
  color: #808888;
}

/* Rimmington: Earthy Brown & Green (Village) */
.vex-rimmington {
  background: linear-gradient(180deg, #4a3820 0%, #5a4830 30%, #504028 70%, #403018 100%);
  border-left: 2px solid #508040;
  border-right: 2px solid #508040;
}

.vex-rimmington .vex-emblem {
  color: #80b060;
  text-shadow: 0 0 6px rgba(120, 180, 90, 0.4);
}

.vex-rimmington .vex-fringe {
  color: #508040;
}

/* Seers' Village: Deep Blue & Purple (Magic/Prophecy) */
.vex-seers {
  background: linear-gradient(180deg, #1a2060 0%, #282e78 30%, #222868 70%, #181c50 100%);
  border-left: 2px solid #9070c0;
  border-right: 2px solid #9070c0;
}

.vex-seers .vex-emblem {
  color: #c0a0e8;
  text-shadow: 0 0 10px rgba(190, 160, 230, 0.5);
}

.vex-seers .vex-fringe {
  color: #9070c0;
}

/* Shilo Village: Jungle Green & Gold (Gem Mine) */
.vex-shilo {
  background: linear-gradient(180deg, #1a4828 0%, #205a30 30%, #1c5028 70%, #143820 100%);
  border-left: 2px solid #d0a840;
  border-right: 2px solid #d0a840;
}

.vex-shilo .vex-emblem {
  color: #50d8c0;
  text-shadow: 0 0 8px rgba(80, 216, 190, 0.5);
}

.vex-shilo .vex-fringe {
  color: #d0a840;
}

/* Taverley: Herb Green & Brown (Herblore) */
.vex-taverley {
  background: linear-gradient(180deg, #2a4820 0%, #356030 30%, #305028 70%, #224018 100%);
  border-left: 2px solid #6b5030;
  border-right: 2px solid #6b5030;
}

.vex-taverley .vex-emblem {
  color: #70c050;
  text-shadow: 0 0 8px rgba(110, 190, 70, 0.5);
}

.vex-taverley .vex-fringe {
  color: #6b5030;
}

/* Waterbirth Island: Dark Sea & Grey (Dagannoth) */
.vex-waterbirth {
  background: linear-gradient(180deg, #1a2830 0%, #203840 30%, #1c3038 70%, #142028 100%);
  border-left: 2px solid #607070;
  border-right: 2px solid #607070;
}

.vex-waterbirth .vex-emblem {
  color: #70c8a0;
  text-shadow: 0 0 8px rgba(110, 200, 160, 0.4);
}

.vex-waterbirth .vex-fringe {
  color: #607070;
}

/* Wilderness: Black & Blood Red (PvP Danger) */
.vex-wilderness {
  background: linear-gradient(180deg, #0e0808 0%, #1a0c0c 30%, #140a0a 70%, #0a0505 100%);
  border-left: 2px solid #8b1010;
  border-right: 2px solid #8b1010;
}

.vex-wilderness .vex-emblem {
  color: #e02020;
  text-shadow: 0 0 10px rgba(220, 30, 30, 0.6);
}

.vex-wilderness .vex-fringe {
  color: #8b1010;
}

/* Wizard's Tower: Blue-Purple & Purple */
.vex-wizards {
  background: linear-gradient(180deg, #2a1860 0%, #382478 30%, #302068 70%, #221550 100%);
  border-left: 2px solid #8060b8;
  border-right: 2px solid #8060b8;
}

.vex-wizards .vex-emblem {
  color: #b090e0;
  text-shadow: 0 0 10px rgba(180, 140, 230, 0.5);
}

.vex-wizards .vex-fringe {
  color: #8060b8;
}

/* Yanille: Rich Purple & Gold (Magic Guild) */
.vex-yanille {
  background: linear-gradient(180deg, #3a1860 0%, #4a2878 30%, #402068 70%, #301550 100%);
  border-left: 2px solid #d4a845;
  border-right: 2px solid #d4a845;
}

.vex-yanille .vex-emblem {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.vex-yanille .vex-fringe {
  color: #d4a845;
}

/* ---- Guild Vexillums ---- */

/* Champions' Guild: Gold & Red (Champions) */
.vex-champions {
  background: linear-gradient(180deg, #8b6a1a 0%, #a58020 30%, #96741c 70%, #7a5e15 100%);
  border-left: 2px solid #cc3030;
  border-right: 2px solid #cc3030;
}

.vex-champions .vex-emblem {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.vex-champions .vex-fringe {
  color: #cc3030;
}

/* Crafting Guild: Brown & Gold (Leather/Craft) */
.vex-craftingg {
  background: linear-gradient(180deg, #5a3a20 0%, #6b4a2a 30%, #604025 70%, #4a3018 100%);
  border-left: 2px solid #d4a845;
  border-right: 2px solid #d4a845;
}

.vex-craftingg .vex-emblem {
  color: #f0d060;
  text-shadow: 0 0 6px rgba(240, 208, 96, 0.4);
}

.vex-craftingg .vex-fringe {
  color: #d4a845;
}

/* Mining Guild: Dark Gray & Silver (Ore) */
.vex-miningg {
  background: linear-gradient(180deg, #2a2a30 0%, #383840 30%, #303038 70%, #222228 100%);
  border-left: 2px solid #a0a0b0;
  border-right: 2px solid #a0a0b0;
}

.vex-miningg .vex-emblem {
  color: #c0c0d0;
  text-shadow: 0 0 6px rgba(192, 192, 210, 0.4);
}

.vex-miningg .vex-fringe {
  color: #a0a0b0;
}

/* Cooking Guild: Warm Red & Cream (Kitchen) */
.vex-cookingg {
  background: linear-gradient(180deg, #7a2a18 0%, #903520 30%, #80301c 70%, #682215 100%);
  border-left: 2px solid #f0d8b0;
  border-right: 2px solid #f0d8b0;
}

.vex-cookingg .vex-emblem {
  color: #ffe8c0;
  text-shadow: 0 0 6px rgba(255, 232, 192, 0.4);
}

.vex-cookingg .vex-fringe {
  color: #f0d8b0;
}

/* Fishing Guild: Deep Sea Blue & White */
.vex-fishingg {
  background: linear-gradient(180deg, #0c3060 0%, #104080 30%, #0e3870 70%, #0a2850 100%);
  border-left: 2px solid #e0f0f8;
  border-right: 2px solid #e0f0f8;
}

.vex-fishingg .vex-emblem {
  color: #e8f4ff;
  text-shadow: 0 0 8px rgba(230, 244, 255, 0.5);
}

.vex-fishingg .vex-fringe {
  color: #e0f0f8;
}

/* Ranging Guild: Forest Green & Red (Target) */
.vex-rangingg {
  background: linear-gradient(180deg, #1a4020 0%, #205228 30%, #1c4824 70%, #143618 100%);
  border-left: 2px solid #cc3030;
  border-right: 2px solid #cc3030;
}

.vex-rangingg .vex-emblem {
  color: #ff4040;
  text-shadow: 0 0 8px rgba(255, 64, 64, 0.4);
}

.vex-rangingg .vex-fringe {
  color: #cc3030;
}

/* Wizards' Guild: Deep Blue & Purple (Magic) */
.vex-wizardsg {
  background: linear-gradient(180deg, #1a1860 0%, #282478 30%, #222068 70%, #181550 100%);
  border-left: 2px solid #a080d0;
  border-right: 2px solid #a080d0;
}

.vex-wizardsg .vex-emblem {
  color: #c0a0f0;
  text-shadow: 0 0 10px rgba(192, 160, 240, 0.5);
}

.vex-wizardsg .vex-fringe {
  color: #a080d0;
}

/* Heroes' Guild: Royal Blue & Gold */
.vex-heroesg {
  background: linear-gradient(180deg, #1a3070 0%, #204090 30%, #1c3880 70%, #152860 100%);
  border-left: 2px solid #d4a845;
  border-right: 2px solid #d4a845;
}

.vex-heroesg .vex-emblem {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.vex-heroesg .vex-fringe {
  color: #d4a845;
}

/* Legends' Guild: Deep Purple & Gold (Ancient) */
.vex-legendsg {
  background: linear-gradient(180deg, #30104a 0%, #401860 30%, #381455 70%, #280c3a 100%);
  border-left: 2px solid #d4a845;
  border-right: 2px solid #d4a845;
}

.vex-legendsg .vex-emblem {
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.vex-legendsg .vex-fringe {
  color: #d4a845;
}

/* Warriors' Guild: Steel Gray & Gold */
.vex-warriorsg {
  background: linear-gradient(180deg, #404048 0%, #505058 30%, #484850 70%, #383840 100%);
  border-left: 2px solid #d4a845;
  border-right: 2px solid #d4a845;
}

.vex-warriorsg .vex-emblem {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.vex-warriorsg .vex-fringe {
  color: #d4a845;
}

/* Woodcutting Guild: Forest & Brown */
.vex-woodcuttingg {
  background: linear-gradient(180deg, #2a4818 0%, #356028 30%, #305022 70%, #224015 100%);
  border-left: 2px solid #6b4a20;
  border-right: 2px solid #6b4a20;
}

.vex-woodcuttingg .vex-emblem {
  color: #90c060;
  text-shadow: 0 0 6px rgba(144, 192, 96, 0.4);
}

.vex-woodcuttingg .vex-fringe {
  color: #6b4a20;
}

/* Farming Guild: Earth Green & Gold */
.vex-farmingg {
  background: linear-gradient(180deg, #2a4020 0%, #355830 30%, #304828 70%, #223818 100%);
  border-left: 2px solid #c0a030;
  border-right: 2px solid #c0a030;
}

.vex-farmingg .vex-emblem {
  color: #80d040;
  text-shadow: 0 0 8px rgba(128, 208, 64, 0.4);
}

.vex-farmingg .vex-fringe {
  color: #c0a030;
}

/* Myths' Guild: Dragon Red & Gold */
.vex-mythsg {
  background: linear-gradient(180deg, #6a1010 0%, #801818 30%, #701414 70%, #580c0c 100%);
  border-left: 2px solid #d4a845;
  border-right: 2px solid #d4a845;
}

.vex-mythsg .vex-emblem {
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.vex-mythsg .vex-fringe {
  color: #d4a845;
}

/* Slayer Tower: Dark Blood & Silver */
.vex-slayertower {
  background: linear-gradient(180deg, #1a0c0c 0%, #2a1414 30%, #221010 70%, #140808 100%);
  border-left: 2px solid #808088;
  border-right: 2px solid #808088;
}

.vex-slayertower .vex-emblem {
  color: #cc2020;
  text-shadow: 0 0 10px rgba(200, 30, 30, 0.5);
}

.vex-slayertower .vex-fringe {
  color: #808088;
}

/* ---- Additional City Vexillums ---- */

/* Port Phasmatys: Spectral Teal & Silver (Ghost) */
.vex-phasmatys {
  background: linear-gradient(180deg, #103838 0%, #184848 30%, #144040 70%, #0c3030 100%);
  border-left: 2px solid #80b0b0;
  border-right: 2px solid #80b0b0;
}

.vex-phasmatys .vex-emblem {
  color: #a0e0d8;
  text-shadow: 0 0 10px rgba(160, 224, 216, 0.5);
}

.vex-phasmatys .vex-fringe {
  color: #80b0b0;
}

/* Sophanem: Sandy Gold & Dark (Egyptian) */
.vex-sophanem {
  background: linear-gradient(180deg, #a08030 0%, #b89040 30%, #a88035 70%, #907028 100%);
  border-left: 2px solid #4a3018;
  border-right: 2px solid #4a3018;
}

.vex-sophanem .vex-emblem {
  color: #fff0c0;
  text-shadow: 0 0 6px rgba(255, 240, 192, 0.5);
}

.vex-sophanem .vex-fringe {
  color: #4a3018;
}

/* Pollnivneach: Desert Red & Gold */
.vex-pollnivneach {
  background: linear-gradient(180deg, #8a4020 0%, #a05030 30%, #904828 70%, #783818 100%);
  border-left: 2px solid #d4a845;
  border-right: 2px solid #d4a845;
}

.vex-pollnivneach .vex-emblem {
  color: #ffd060;
  text-shadow: 0 0 6px rgba(255, 208, 96, 0.4);
}

.vex-pollnivneach .vex-fringe {
  color: #d4a845;
}

/* Nardah: Sun Gold & White (Oasis) */
.vex-nardah {
  background: linear-gradient(180deg, #c09030 0%, #d0a040 30%, #c09838 70%, #a88028 100%);
  border-left: 2px solid #f0e8d0;
  border-right: 2px solid #f0e8d0;
}

.vex-nardah .vex-emblem {
  color: #fff8e0;
  text-shadow: 0 0 8px rgba(255, 248, 224, 0.5);
}

.vex-nardah .vex-fringe {
  color: #f0e8d0;
}

/* Camelot: Royal Blue & Gold (Knights) */
.vex-camelot {
  background: linear-gradient(180deg, #1a3080 0%, #2040a0 30%, #1c3890 70%, #152870 100%);
  border-left: 2px solid #d4a845;
  border-right: 2px solid #d4a845;
}

.vex-camelot .vex-emblem {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.vex-camelot .vex-fringe {
  color: #d4a845;
}

/* Burthorpe: Military Gray & Red (Imperial Guard) */
.vex-burthorpe {
  background: linear-gradient(180deg, #3a3838 0%, #4a4848 30%, #424040 70%, #323030 100%);
  border-left: 2px solid #a03020;
  border-right: 2px solid #a03020;
}

.vex-burthorpe .vex-emblem {
  color: #d04030;
  text-shadow: 0 0 6px rgba(208, 64, 48, 0.4);
}

.vex-burthorpe .vex-fringe {
  color: #a03020;
}

/* Lletya: Forest Silver & Green (Elven) */
.vex-lletya {
  background: linear-gradient(180deg, #1a3020 0%, #254030 30%, #203828 70%, #152518 100%);
  border-left: 2px solid #90c0a0;
  border-right: 2px solid #90c0a0;
}

.vex-lletya .vex-emblem {
  color: #b0e0c0;
  text-shadow: 0 0 8px rgba(176, 224, 192, 0.4);
}

.vex-lletya .vex-fringe {
  color: #90c0a0;
}

/* Corsair Cove: Navy & White (Pirate Cove) */
.vex-corsair {
  background: linear-gradient(180deg, #1a2040 0%, #203050 30%, #1c2848 70%, #141c38 100%);
  border-left: 2px solid #d0d8e0;
  border-right: 2px solid #d0d8e0;
}

.vex-corsair .vex-emblem {
  color: #e8f0f8;
  text-shadow: 0 0 6px rgba(232, 240, 248, 0.4);
}

.vex-corsair .vex-fringe {
  color: #d0d8e0;
}

/* Fossil Island: Earthy Brown & Tan (Ancient) */
.vex-fossil {
  background: linear-gradient(180deg, #4a3820 0%, #5a4830 30%, #504028 70%, #403018 100%);
  border-left: 2px solid #c0a870;
  border-right: 2px solid #c0a870;
}

.vex-fossil .vex-emblem {
  color: #e0d0a0;
  text-shadow: 0 0 6px rgba(224, 208, 160, 0.4);
}

.vex-fossil .vex-fringe {
  color: #c0a870;
}

/* Ape Atoll: Jungle Green & Brown (Primate) */
.vex-apeatoll {
  background: linear-gradient(180deg, #1a4020 0%, #205030 30%, #1c4828 70%, #143818 100%);
  border-left: 2px solid #6b4020;
  border-right: 2px solid #6b4020;
}

.vex-apeatoll .vex-emblem {
  color: #90d060;
  text-shadow: 0 0 6px rgba(144, 208, 96, 0.4);
}

.vex-apeatoll .vex-fringe {
  color: #6b4020;
}

/* Mos Le'Harmless: Black & Red (Pirate Island) */
.vex-mosleharmless {
  background: linear-gradient(180deg, #1a1010 0%, #281818 30%, #201414 70%, #140c0c 100%);
  border-left: 2px solid #8b2020;
  border-right: 2px solid #8b2020;
}

.vex-mosleharmless .vex-emblem {
  color: #d03030;
  text-shadow: 0 0 8px rgba(208, 48, 48, 0.5);
}

.vex-mosleharmless .vex-fringe {
  color: #8b2020;
}

/* Slepe: Dusky Purple & Gray (Morytania Town) */
.vex-slepe {
  background: linear-gradient(180deg, #201828 0%, #2a2038 30%, #241c30 70%, #181420 100%);
  border-left: 2px solid #707078;
  border-right: 2px solid #707078;
}

.vex-slepe .vex-emblem {
  color: #a098b0;
  text-shadow: 0 0 6px rgba(160, 152, 176, 0.4);
}

.vex-slepe .vex-fringe {
  color: #707078;
}

/* Darkmeyer: Vampire Red & Black (Vampyre City) */
.vex-darkmeyer {
  background: linear-gradient(180deg, #300808 0%, #401010 30%, #380c0c 70%, #280606 100%);
  border-left: 2px solid #600810;
  border-right: 2px solid #600810;
}

.vex-darkmeyer .vex-emblem {
  color: #cc1020;
  text-shadow: 0 0 10px rgba(200, 16, 32, 0.6);
}

.vex-darkmeyer .vex-fringe {
  color: #600810;
}

/* Burgh de Rott: Muted Brown & Gray (Ruined Town) */
.vex-burghderott {
  background: linear-gradient(180deg, #302820 0%, #403830 30%, #383028 70%, #282018 100%);
  border-left: 2px solid #606058;
  border-right: 2px solid #606058;
}

.vex-burghderott .vex-emblem {
  color: #a09880;
  text-shadow: 0 0 6px rgba(160, 152, 128, 0.4);
}

.vex-burghderott .vex-fringe {
  color: #606058;
}

/* Mort'ton: Ashen Gray & Orange (Plagued Village) */
.vex-mortton {
  background: linear-gradient(180deg, #282420 0%, #383430 30%, #302c28 70%, #201c18 100%);
  border-left: 2px solid #c07030;
  border-right: 2px solid #c07030;
}

.vex-mortton .vex-emblem {
  color: #f09040;
  text-shadow: 0 0 8px rgba(240, 144, 64, 0.5);
}

.vex-mortton .vex-fringe {
  color: #c07030;
}

/* Castle Wars: Red & Blue (Two Factions) */
.vex-castlewars {
  background: linear-gradient(180deg, #6a1a1a 0%, #1a1a6a 50%, #6a1a1a 100%);
  border-left: 2px solid #d0d0d0;
  border-right: 2px solid #d0d0d0;
}

.vex-castlewars .vex-emblem {
  color: #e0e0e0;
  text-shadow: 0 0 6px rgba(224, 224, 224, 0.4);
}

.vex-castlewars .vex-fringe {
  color: #d0d0d0;
}

/* Duel Arena: Sandy Gold & Red (Combat) */
.vex-duelarena {
  background: linear-gradient(180deg, #a08020 0%, #b89030 30%, #a88028 70%, #907018 100%);
  border-left: 2px solid #8b1a1a;
  border-right: 2px solid #8b1a1a;
}

.vex-duelarena .vex-emblem {
  color: #cc2020;
  text-shadow: 0 0 8px rgba(204, 32, 32, 0.5);
}

.vex-duelarena .vex-fringe {
  color: #8b1a1a;
}

/* Barrows: Dark Purple & Bone (Crypt) */
.vex-barrows {
  background: linear-gradient(180deg, #181018 0%, #201820 30%, #1c141c 70%, #100c10 100%);
  border-left: 2px solid #706068;
  border-right: 2px solid #706068;
}

.vex-barrows .vex-emblem {
  color: #b0a090;
  text-shadow: 0 0 8px rgba(176, 160, 144, 0.5);
}

.vex-barrows .vex-fringe {
  color: #706068;
}

/* Tree Gnome Village: Bright Green & Brown */
.vex-gnomevillage {
  background: linear-gradient(180deg, #2a5818 0%, #357028 30%, #306022 70%, #224815 100%);
  border-left: 2px solid #6b4a20;
  border-right: 2px solid #6b4a20;
}

.vex-gnomevillage .vex-emblem {
  color: #a0e050;
  text-shadow: 0 0 8px rgba(160, 224, 80, 0.4);
}

.vex-gnomevillage .vex-fringe {
  color: #6b4a20;
}

/* Miscellania: Royal Purple & Gold (Kingdom) */
.vex-miscellania {
  background: linear-gradient(180deg, #3a1860 0%, #4a2878 30%, #402068 70%, #301550 100%);
  border-left: 2px solid #d4a845;
  border-right: 2px solid #d4a845;
}

.vex-miscellania .vex-emblem {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.vex-miscellania .vex-fringe {
  color: #d4a845;
}

/* Piscatoris: Ocean Blue & Silver */
.vex-piscatoris {
  background: linear-gradient(180deg, #103858 0%, #184868 30%, #144060 70%, #0c3048 100%);
  border-left: 2px solid #b0c8d8;
  border-right: 2px solid #b0c8d8;
}

.vex-piscatoris .vex-emblem {
  color: #d0e8f0;
  text-shadow: 0 0 6px rgba(208, 232, 240, 0.4);
}

.vex-piscatoris .vex-fringe {
  color: #b0c8d8;
}

/* ---- Dungeon Vexillums ---- */
.vex-dg-slayer {
  background: linear-gradient(180deg, #2a1a2e 0%, #3d2040 30%, #2a1a2e 70%, #1a101e 100%);
  border-left: 2px solid #8b6f9e;
  border-right: 2px solid #8b6f9e;
}

.vex-dg-slayer .vex-emblem {
  color: #c0a0d0;
}

.vex-dg-slayer .vex-fringe {
  color: #8b6f9e;
}

.vex-dg-barrows {
  background: linear-gradient(180deg, #141014 0%, #1e181e 30%, #161216 70%, #0e0a0e 100%);
  border-left: 2px solid #605858;
  border-right: 2px solid #605858;
}

.vex-dg-barrows .vex-emblem {
  color: #a09088;
}

.vex-dg-barrows .vex-fringe {
  color: #605858;
}

.vex-dg-catacombs {
  background: linear-gradient(180deg, #1a1510 0%, #2a2018 30%, #1e1a12 70%, #12100a 100%);
  border-left: 2px solid #8a5a20;
  border-right: 2px solid #8a5a20;
}

.vex-dg-catacombs .vex-emblem {
  color: #d09030;
}

.vex-dg-catacombs .vex-fringe {
  color: #8a5a20;
}

.vex-dg-mine {
  background: linear-gradient(180deg, #1a1810 0%, #282418 30%, #201c12 70%, #14120a 100%);
  border-left: 2px solid #706050;
  border-right: 2px solid #706050;
}

.vex-dg-mine .vex-emblem {
  color: #b0a080;
}

.vex-dg-mine .vex-fringe {
  color: #706050;
}

.vex-dg-meiyerditch {
  background: linear-gradient(180deg, #200a10 0%, #301018 30%, #280c14 70%, #18060a 100%);
  border-left: 2px solid #8b2030;
  border-right: 2px solid #8b2030;
}

.vex-dg-meiyerditch .vex-emblem {
  color: #c04050;
}

.vex-dg-meiyerditch .vex-fringe {
  color: #8b2030;
}

.vex-dg-darkmeyer {
  background: linear-gradient(180deg, #180818 0%, #241020 30%, #1c0c1a 70%, #100610 100%);
  border-left: 2px solid #600818;
  border-right: 2px solid #600818;
}

.vex-dg-darkmeyer .vex-emblem {
  color: #a080b0;
}

.vex-dg-darkmeyer .vex-fringe {
  color: #600818;
}

.vex-dg-nightmare {
  background: linear-gradient(180deg, #0a0a14 0%, #14101e 30%, #0e0c18 70%, #06060e 100%);
  border-left: 2px solid #5050a0;
  border-right: 2px solid #5050a0;
}

.vex-dg-nightmare .vex-emblem {
  color: #9090e0;
}

.vex-dg-nightmare .vex-fringe {
  color: #5050a0;
}

.vex-dg-edgeville {
  background: linear-gradient(180deg, #1a1418 0%, #282025 30%, #201a1e 70%, #141012 100%);
  border-left: 2px solid #7a2020;
  border-right: 2px solid #7a2020;
}

.vex-dg-edgeville .vex-emblem {
  color: #c03030;
}

.vex-dg-edgeville .vex-fringe {
  color: #7a2020;
}

.vex-dg-sewers {
  background: linear-gradient(180deg, #101810 0%, #182018 30%, #141a14 70%, #0a120a 100%);
  border-left: 2px solid #406040;
  border-right: 2px solid #406040;
}

.vex-dg-sewers .vex-emblem {
  color: #70a070;
}

.vex-dg-sewers .vex-fringe {
  color: #406040;
}

.vex-dg-stronghold {
  background: linear-gradient(180deg, #1a1410 0%, #282018 30%, #201a12 70%, #14100a 100%);
  border-left: 2px solid #8b7030;
  border-right: 2px solid #8b7030;
}

.vex-dg-stronghold .vex-emblem {
  color: #d0b050;
}

.vex-dg-stronghold .vex-fringe {
  color: #8b7030;
}

.vex-dg-taverley {
  background: linear-gradient(180deg, #141a20 0%, #1e2830 30%, #182028 70%, #101418 100%);
  border-left: 2px solid #508080;
  border-right: 2px solid #508080;
}

.vex-dg-taverley .vex-emblem {
  color: #80c0b0;
}

.vex-dg-taverley .vex-fringe {
  color: #508080;
}

.vex-dg-brimhaven {
  background: linear-gradient(180deg, #121012 0%, #1c181c 30%, #161216 70%, #0c0a0c 100%);
  border-left: 2px solid #702020;
  border-right: 2px solid #702020;
}

.vex-dg-brimhaven .vex-emblem {
  color: #c03030;
}

.vex-dg-brimhaven .vex-fringe {
  color: #702020;
}

.vex-dg-fremennik {
  background: linear-gradient(180deg, #101828 0%, #182438 30%, #141e30 70%, #0c1420 100%);
  border-left: 2px solid #6888b0;
  border-right: 2px solid #6888b0;
}

.vex-dg-fremennik .vex-emblem {
  color: #a0c8e8;
}

.vex-dg-fremennik .vex-fringe {
  color: #6888b0;
}

.vex-dg-dwarven {
  background: linear-gradient(180deg, #1a1610 0%, #28221a 30%, #201c14 70%, #14120c 100%);
  border-left: 2px solid #907040;
  border-right: 2px solid #907040;
}

.vex-dg-dwarven .vex-emblem {
  color: #d0a860;
}

.vex-dg-dwarven .vex-fringe {
  color: #907040;
}

.vex-dg-icemtn {
  background: linear-gradient(180deg, #c8d8e8 0%, #e0eaf4 30%, #d0dcea 70%, #b8c8d8 100%);
  border-left: 2px solid #4878a8;
  border-right: 2px solid #4878a8;
}

.vex-dg-icemtn .vex-emblem {
  color: #306090;
}

.vex-dg-icemtn .vex-fringe {
  color: #4878a8;
}

.vex-dg-wizards {
  background: linear-gradient(180deg, #10102a 0%, #181840 30%, #141435 70%, #0c0c20 100%);
  border-left: 2px solid #5858b0;
  border-right: 2px solid #5858b0;
}

.vex-dg-wizards .vex-emblem {
  color: #9090e0;
}

.vex-dg-wizards .vex-fringe {
  color: #5858b0;
}

.vex-dg-kalphite {
  background: linear-gradient(180deg, #201810 0%, #302418 30%, #281e14 70%, #18140c 100%);
  border-left: 2px solid #a08030;
  border-right: 2px solid #a08030;
}

.vex-dg-kalphite .vex-emblem {
  color: #e0c050;
}

.vex-dg-kalphite .vex-fringe {
  color: #a08030;
}

.vex-dg-smoke {
  background: linear-gradient(180deg, #181818 0%, #262626 30%, #1e1e1e 70%, #121212 100%);
  border-left: 2px solid #606060;
  border-right: 2px solid #606060;
}

.vex-dg-smoke .vex-emblem {
  color: #a0a0a0;
}

.vex-dg-smoke .vex-fringe {
  color: #606060;
}

.vex-dg-volcanic {
  background: linear-gradient(180deg, #2a0a0a 0%, #401010 30%, #300c0c 70%, #200808 100%);
  border-left: 2px solid #c05010;
  border-right: 2px solid #c05010;
}

.vex-dg-volcanic .vex-emblem {
  color: #f08030;
}

.vex-dg-volcanic .vex-fringe {
  color: #c05010;
}

.vex-dg-wyvern {
  background: linear-gradient(180deg, #141820 0%, #1e2430 30%, #181e28 70%, #101418 100%);
  border-left: 2px solid #5878a0;
  border-right: 2px solid #5878a0;
}

.vex-dg-wyvern .vex-emblem {
  color: #88b0d0;
}

.vex-dg-wyvern .vex-fringe {
  color: #5878a0;
}

.vex-dg-lithkren {
  background: linear-gradient(180deg, #1a1010 0%, #281818 30%, #201414 70%, #140c0c 100%);
  border-left: 2px solid #906040;
  border-right: 2px solid #906040;
}

.vex-dg-lithkren .vex-emblem {
  color: #d09060;
}

.vex-dg-lithkren .vex-fringe {
  color: #906040;
}

.vex-dg-apeatoll {
  background: linear-gradient(180deg, #142010 0%, #1e3018 30%, #182814 70%, #10180c 100%);
  border-left: 2px solid #605020;
  border-right: 2px solid #605020;
}

.vex-dg-apeatoll .vex-emblem {
  color: #a09040;
}

.vex-dg-apeatoll .vex-fringe {
  color: #605020;
}

.vex-dg-pirate {
  background: linear-gradient(180deg, #101010 0%, #1a1a1a 30%, #141414 70%, #0c0c0c 100%);
  border-left: 2px solid #8b2020;
  border-right: 2px solid #8b2020;
}

.vex-dg-pirate .vex-emblem {
  color: #d03030;
}

.vex-dg-pirate .vex-fringe {
  color: #8b2020;
}

.vex-dg-kraken {
  background: linear-gradient(180deg, #0a1020 0%, #101830 30%, #0c1428 70%, #060c18 100%);
  border-left: 2px solid #305880;
  border-right: 2px solid #305880;
}

.vex-dg-kraken .vex-emblem {
  color: #6090c0;
}

.vex-dg-kraken .vex-fringe {
  color: #305880;
}

.vex-dg-champions {
  background: linear-gradient(180deg, #201810 0%, #302418 30%, #281e14 70%, #18140c 100%);
  border-left: 2px solid #c09030;
  border-right: 2px solid #c09030;
}

.vex-dg-champions .vex-emblem {
  color: #f0c040;
}

.vex-dg-champions .vex-fringe {
  color: #c09030;
}

.vex-dg-heroes {
  background: linear-gradient(180deg, #18182a 0%, #20203a 30%, #1c1c32 70%, #141422 100%);
  border-left: 2px solid #a08040;
  border-right: 2px solid #a08040;
}

.vex-dg-heroes .vex-emblem {
  color: #d0b060;
}

.vex-dg-heroes .vex-fringe {
  color: #a08040;
}

.vex-dg-cyclops {
  background: linear-gradient(180deg, #181820 0%, #242430 30%, #1e1e28 70%, #141418 100%);
  border-left: 2px solid #708090;
  border-right: 2px solid #708090;
}

.vex-dg-cyclops .vex-emblem {
  color: #a0b0c0;
}

.vex-dg-cyclops .vex-fringe {
  color: #708090;
}

.vex-dg-myths {
  background: linear-gradient(180deg, #1a1020 0%, #281830 30%, #201428 70%, #140c18 100%);
  border-left: 2px solid #806030;
  border-right: 2px solid #806030;
}

.vex-dg-myths .vex-emblem {
  color: #c09050;
}

.vex-dg-myths .vex-fringe {
  color: #806030;
}

.vex-dg-hespori {
  background: linear-gradient(180deg, #0c1a0c 0%, #142814 30%, #102010 70%, #08140a 100%);
  border-left: 2px solid #408040;
  border-right: 2px solid #408040;
}

.vex-dg-hespori .vex-emblem {
  color: #70c070;
}

.vex-dg-hespori .vex-fringe {
  color: #408040;
}

.vex-dg-rogues {
  background: linear-gradient(180deg, #141414 0%, #1e1e1e 30%, #181818 70%, #101010 100%);
  border-left: 2px solid #505050;
  border-right: 2px solid #505050;
}

.vex-dg-rogues .vex-emblem {
  color: #909090;
}

.vex-dg-rogues .vex-fringe {
  color: #505050;
}

.vex-dg-troll {
  background: linear-gradient(180deg, #1a1a18 0%, #282820 30%, #20201c 70%, #141412 100%);
  border-left: 2px solid #686058;
  border-right: 2px solid #686058;
}

.vex-dg-troll .vex-emblem {
  color: #a09888;
}

.vex-dg-troll .vex-fringe {
  color: #686058;
}

.vex-dg-pyramid {
  background: linear-gradient(180deg, #201810 0%, #302418 30%, #281e14 70%, #18140c 100%);
  border-left: 2px solid #b09030;
  border-right: 2px solid #b09030;
}

.vex-dg-pyramid .vex-emblem {
  color: #e8c050;
}

.vex-dg-pyramid .vex-fringe {
  color: #b09030;
}

.vex-dg-corsair {
  background: linear-gradient(180deg, #101820 0%, #182030 30%, #141c28 70%, #0c1218 100%);
  border-left: 2px solid #507080;
  border-right: 2px solid #507080;
}

.vex-dg-corsair .vex-emblem {
  color: #80a8c0;
}

.vex-dg-corsair .vex-fringe {
  color: #507080;
}

.vex-dg-giants {
  background: linear-gradient(180deg, #181410 0%, #282018 30%, #201a14 70%, #14100c 100%);
  border-left: 2px solid #806040;
  border-right: 2px solid #806040;
}

.vex-dg-giants .vex-emblem {
  color: #c09060;
}

.vex-dg-giants .vex-fringe {
  color: #806040;
}

.vex-dg-sulphur {
  background: linear-gradient(180deg, #1a1810 0%, #282418 30%, #201e14 70%, #14140c 100%);
  border-left: 2px solid #908020;
  border-right: 2px solid #908020;
}

.vex-dg-sulphur .vex-emblem {
  color: #d0c040;
}

.vex-dg-sulphur .vex-fringe {
  color: #908020;
}

.vex-dg-lizardman {
  background: linear-gradient(180deg, #141a10 0%, #1e2818 30%, #182014 70%, #10180c 100%);
  border-left: 2px solid #506830;
  border-right: 2px solid #506830;
}

.vex-dg-lizardman .vex-emblem {
  color: #80a050;
}

.vex-dg-lizardman .vex-fringe {
  color: #506830;
}

.vex-dg-karuulm {
  background: linear-gradient(180deg, #181018 0%, #241820 30%, #1c1018 70%, #140c10 100%);
  border-left: 2px solid #705060;
  border-right: 2px solid #705060;
}

.vex-dg-karuulm .vex-emblem {
  color: #b08090;
}

.vex-dg-karuulm .vex-fringe {
  color: #705060;
}

.vex-dg-wintertodt {
  background: linear-gradient(180deg, #0c1420 0%, #141e30 30%, #101828 70%, #081018 100%);
  border-left: 2px solid #5080b0;
  border-right: 2px solid #5080b0;
}

.vex-dg-wintertodt .vex-emblem {
  color: #90c0e8;
}

.vex-dg-wintertodt .vex-fringe {
  color: #5080b0;
}

.vex-dg-xeric {
  background: linear-gradient(180deg, #1a1420 0%, #282030 30%, #201828 70%, #141018 100%);
  border-left: 2px solid #706080;
  border-right: 2px solid #706080;
}

.vex-dg-xeric .vex-emblem {
  color: #a898b8;
}

.vex-dg-xeric .vex-fringe {
  color: #706080;
}

/* Gentle sway animation */
@keyframes vex-sway {

  0%,
  100% {
    transform: skewX(0deg) scaleY(1);
  }

  20% {
    transform: skewX(1.5deg) scaleY(1.002);
  }

  40% {
    transform: skewX(-0.5deg) scaleY(0.999);
  }

  60% {
    transform: skewX(1deg) scaleY(1.001);
  }

  80% {
    transform: skewX(-0.8deg) scaleY(1);
  }
}

/* Location Banner */
.df-hub-banner {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 15% 40%, rgba(201, 168, 76, 0.15), transparent 70%),
    radial-gradient(ellipse at 85% 60%, rgba(180, 50, 40, 0.1), transparent 50%),
    linear-gradient(135deg, #2b2218, #18120c);
  border: 2px solid #6b5332;
  border-top: 2px solid #8a6f1e;
  border-bottom: 3px solid #3d2f1f;
  border-radius: 4px;
  padding: 22px 28px;
  position: relative;
  overflow: visible;
  z-index: 10;
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.9),
    inset 0 2px 20px rgba(201, 168, 76, 0.15),
    inset 0 -5px 25px rgba(0, 0, 0, 0.8);
}

/* Noise texture overlay removed since it's now embedded in the background prop */
.df-hub-banner::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 2px;
  pointer-events: none;
}

/* Bottom gold accent line */
.df-hub-banner::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.4), transparent);
}

/* Ornate corner brackets */
.df-hub-banner-content {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.df-hub-banner-content::before,
.df-hub-banner-content::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: 3;
}

/* Top-left corner bracket */
.df-hub-banner-content::before {
  top: -12px;
  left: -16px;
  border-top: 3px solid rgba(201, 168, 76, 0.6);
  border-left: 3px solid rgba(201, 168, 76, 0.6);
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.8), -1px -1px 3px rgba(0, 0, 0, 0.8);
}

/* Bottom-right corner bracket */
.df-hub-banner-content::after {
  bottom: -12px;
  right: -16px;
  border-bottom: 3px solid rgba(201, 168, 76, 0.6);
  border-right: 3px solid rgba(201, 168, 76, 0.6);
  box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.8), 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.df-hub-loc-icon {
  font-size: 38px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.8));
}

.df-hub-loc-name {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  color: var(--df-gold-light);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 4px;
  margin: 0;
  text-shadow:
    0 1px 3px #000,
    0 0 25px rgba(201, 168, 76, 0.8),
    0 0 50px rgba(201, 168, 76, 0.5);
  animation: df-banner-shimmer 4s ease-in-out infinite;
}

@keyframes df-banner-shimmer {

  0%,
  100% {
    text-shadow: 0 1px 3px #000, 0 0 25px rgba(201, 168, 76, 0.8), 0 0 50px rgba(201, 168, 76, 0.5);
  }

  50% {
    text-shadow: 0 1px 3px #000, 0 0 35px rgba(201, 168, 76, 1), 0 0 60px rgba(201, 168, 76, 0.7);
  }
}

.df-hub-loc-info {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 5;
}

.df-hub-loc-badges {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.df-hub-loc-desc {
  display: block;
  color: var(--df-text-dim);
  font-family: 'Crimson Text', serif;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 2px;
}

/* ===== Banner Stats (medallions inside banner) ===== */
.df-hub-banner-stats {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(201, 168, 76, 0.12);
}

.df-hub-medallion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  padding: 0 12px;
  min-width: 0;
  position: relative;
}

.df-hub-medallion+.df-hub-medallion::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(201, 168, 76, 0.2), transparent);
}

.df-hub-medallion-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #5a462b;
  border-radius: 50%;
  background: radial-gradient(circle at center, #231c15 0%, #0d0a06 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 10px rgba(201, 168, 76, 0.1);
  position: relative;
}

.df-hub-medallion-icon::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.15);
  pointer-events: none;
}

.df-hub-medallion-icon .df-hub-stat-img {
  width: auto;
  height: 14px;
  image-rendering: pixelated;
}

.df-hub-medallion-value {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--df-gold);
  text-shadow: 0 0 6px rgba(201, 168, 76, 0.25);
  line-height: 1.2;
}

.df-hub-medallion-label {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--df-text-dim);
}

@media (max-width: 768px) {
  .df-hub-banner-stats {
    gap: 0;
  }

  .df-hub-medallion {
    padding: 0 6px;
  }

  .df-hub-medallion-value {
    font-size: 13px;
  }

  .df-hub-medallion-icon {
    width: 22px;
    height: 22px;
  }

  .df-hub-medallion-icon .df-hub-stat-img {
    height: 11px;
  }
}

/* ===== City Leveling Gauges Overlay ===== */
.df-city-stats-overlay {
  position: relative;
  z-index: 3;
  margin-top: 15px;
  padding: 15px;
  background: radial-gradient(ellipse at 50% 100%, rgba(30, 20, 10, 0.8), rgba(15, 10, 5, 0.95));
  border-top: 2px solid rgba(201, 168, 76, 0.3);
  box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.6);
}

.df-city-gauge-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Floating Orb Gauges */
.df-city-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 70px;
  animation: gauge-float 4s ease-in-out infinite alternate;
}

.df-city-gauge:nth-child(even) {
  animation-delay: -2s;
}

@keyframes gauge-float {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(-5px);
  }
}

.df-city-gauge-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: conic-gradient(var(--df-gold) calc(var(--gauge-pct, 0) * 1%),
      rgba(61, 47, 31, 0.6) calc(var(--gauge-pct, 0) * 1%));
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.8),
    0 0 15px rgba(201, 168, 76, 0.3),
    0 0 5px rgba(201, 168, 76, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.df-city-gauge-ring::before {
  content: '';
  position: absolute;
  inset: 4px;
  background: radial-gradient(circle at 30% 30%, #3a2b1a, #0d0a06);
  border-radius: 50%;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1);
  z-index: 1;
}

.df-city-gauge-img {
  position: relative;
  z-index: 2;
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 0 5px var(--df-gold));
}

.df-city-gauge-val {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--df-gold-light);
  text-shadow: 0 0 8px rgba(201, 168, 76, 0.6);
}

.df-city-gauge-lbl {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ===== City Viewport Portal Banner ===== */
.df-hub-banner.df-city-viewport {
  min-height: 280px;
  padding: 0;
  overflow: hidden;
  position: relative;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, #d4c08e 0%, #c2aa76 60%, #b89a60 100%);
  border: 1px solid #4a3821;
  border-top: 2px solid #856338;
  border-bottom: 2px solid #1c140c;
  border-radius: 50% 50% 0 0 / 20px 20px 0 0;
  box-shadow:
    0 15px 50px rgba(0, 0, 0, 0.9),
    inset 0 0 40px rgba(194, 170, 118, 0.3),
    0 0 30px rgba(200, 150, 50, 0.1);
}

.df-hub-banner.df-city-viewport::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("https://c4.wallpaperflare.com/wallpaper/973/923/759/adventure-fantasy-map-runescape-wallpaper-preview.jpg") center/cover no-repeat;
  opacity: 0.35;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
  animation: df-map-pan 120s linear infinite alternate;
}

@keyframes df-map-pan {
  0% {
    transform: scale(1.5) translate(2%, 2%);
    opacity: 0.15;
  }

  100% {
    transform: scale(1.5) translate(-2%, -2%);
    opacity: 0.3;
  }
}

/* Atmosphere container */
.df-city-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Fog layer */
.df-city-fog {
  position: absolute;
  bottom: 0;
  left: -20%;
  right: -20%;
  height: 80%;
  background:
    radial-gradient(ellipse at 40% 100%, rgba(201, 168, 76, 0.1), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(138, 111, 30, 0.08), transparent 50%);
  animation: df-fog-drift-left 15s ease-in-out infinite alternate;
  opacity: 0.6;
}

.df-city-fog::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -5%;
  right: -5%;
  height: 70%;
  background:
    radial-gradient(ellipse at 60% 90%, rgba(201, 168, 76, 0.05), transparent 50%),
    radial-gradient(ellipse at 25% 85%, rgba(160, 120, 40, 0.04), transparent 40%);
  animation: df-fog-drift-right 16s ease-in-out infinite;
  opacity: 0.35;
}

/* Ember particles */
.df-city-embers {
  position: absolute;
  inset: 0;
}

.df-city-embers::before {
  content: '';
  position: absolute;
  bottom: 20%;
  left: 25%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 200, 100, 0.8);
  box-shadow:
    60px 20px 4px rgba(201, 168, 76, 0.6),
    120px -20px 4px rgba(255, 220, 120, 0.5),
    180px 30px 3px rgba(255, 150, 50, 0.7),
    240px -10px 4px rgba(201, 168, 76, 0.4);
  animation: df-ember-drift 8s ease-in-out infinite;
  filter: blur(1px);
}

.df-city-embers::after {
  content: '';
  position: absolute;
  bottom: 10%;
  right: 25%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(120, 180, 255, 0.8);
  box-shadow:
    -50px 15px 3px rgba(100, 150, 255, 0.6),
    -110px -15px 2px rgba(80, 120, 255, 0.5),
    -170px 20px 3px rgba(100, 180, 255, 0.4);
  animation: df-ember-drift-alt 10s ease-in-out infinite 2s;
  filter: blur(1px);
}

.df-city-gate-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow:
    inset 0 0 60px rgba(194, 170, 118, 0.7),
    inset 0 0 120px rgba(194, 170, 118, 0.35),
    inset 0 5px 20px rgba(201, 168, 76, 0.3);
  border-radius: 50% 50% 0 0 / 20px 20px 0 0;
  border-left: 5px solid rgba(194, 170, 118, 0.6);
  border-right: 5px solid rgba(194, 170, 118, 0.6);
}

.df-city-gate-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.5), transparent);
  border-radius: 50% 50% 0 0 / 5px 5px 0 0;
  box-shadow: 0 5px 15px rgba(201, 168, 76, 0.4);
}

.df-city-gate-frame::after {
  display: none;
}

/* Content layer above atmosphere */
.df-city-viewport .df-hub-banner-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding: 40px 30px 20px;
}

/* City actions (buttons column) */
.df-city-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  flex-shrink: 0;
  justify-content: center;
  width: 100%;
}

/* Floating Arcane Runes (Buttons) */
.df-city-actions .df-hub-bank-btn {
  background: rgba(25, 15, 5, 0.8);
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: 20px;
  color: var(--df-gold-light);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  white-space: nowrap;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.8),
    0 0 15px rgba(201, 168, 76, 0.2),
    inset 0 0 10px rgba(201, 168, 76, 0.1);
  text-shadow: 0 0 5px rgba(201, 168, 76, 0.8);
  backdrop-filter: blur(4px);
  animation: float-btn 6s ease-in-out infinite alternate;
}

.df-city-actions .df-hub-bank-btn:nth-child(even) {
  animation-delay: -3s;
}

@keyframes float-btn {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-4px);
  }
}

.df-city-actions .df-hub-bank-btn::before {
  display: none;
}

.df-city-actions .df-hub-bank-btn:hover {
  background: rgba(40, 25, 10, 0.9);
  border-color: var(--df-gold);
  color: #fff;
  transform: translateY(-5px) scale(1.05);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.9),
    0 0 25px rgba(201, 168, 76, 0.6),
    inset 0 0 20px rgba(201, 168, 76, 0.4);
  text-shadow: 0 0 10px #fff, 0 0 20px var(--df-gold);
}

.df-city-actions .df-hub-bank-btn i {
  margin-right: 6px;
  font-size: 12px;
  filter: drop-shadow(0 1px 2px #000);
}

/* Dungeon button override — Deep Red Magic */
.df-city-actions .df-hub-dungeon-btn {
  border-color: rgba(255, 60, 60, 0.4);
  color: #ff9b9b;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8), 0 0 15px rgba(200, 40, 40, 0.2), inset 0 0 10px rgba(255, 60, 60, 0.1);
  text-shadow: 0 0 5px rgba(255, 60, 60, 0.8);
}

.df-city-actions .df-hub-dungeon-btn:hover {
  border-color: #ff5555;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9), 0 0 25px rgba(255, 60, 60, 0.6), inset 0 0 20px rgba(255, 60, 60, 0.4);
  text-shadow: 0 0 10px #fff, 0 0 20px #ff5555;
  color: #fff;
}

/* Guild button — Viridian Magic */
.df-city-actions .df-hub-guild-btn {
  border-color: rgba(60, 255, 120, 0.3);
  color: #9effbc;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8), 0 0 15px rgba(40, 200, 80, 0.2), inset 0 0 10px rgba(60, 255, 120, 0.1);
  text-shadow: 0 0 5px rgba(60, 255, 120, 0.8);
}

.df-city-actions .df-hub-guild-btn:hover {
  border-color: #55ff77;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9), 0 0 25px rgba(60, 255, 120, 0.6), inset 0 0 20px rgba(60, 255, 120, 0.4);
  text-shadow: 0 0 10px #fff, 0 0 20px #55ff77;
  color: #fff;
}

/* GE button — Astral Blue Magic */
.df-city-actions .df-hub-ge-btn {
  border-color: rgba(60, 180, 255, 0.4);
  color: #9bd6ff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8), 0 0 15px rgba(40, 120, 200, 0.2), inset 0 0 10px rgba(60, 180, 255, 0.1);
  text-shadow: 0 0 5px rgba(60, 180, 255, 0.8);
}

.df-city-actions .df-hub-ge-btn:hover {
  border-color: #55bdff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9), 0 0 25px rgba(60, 180, 255, 0.6), inset 0 0 20px rgba(60, 180, 255, 0.4);
  text-shadow: 0 0 10px #fff, 0 0 20px #55bdff;
  color: #fff;
}

/* Travel button — Ethereal Gold */
.df-city-actions .df-hub-travel-btn {
  background: rgba(25, 18, 5, 0.8);
  border: 1px solid rgba(255, 200, 80, 0.4);
  border-radius: 20px;
  color: #ffe699;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8), 0 0 15px rgba(200, 150, 40, 0.2), inset 0 0 10px rgba(255, 200, 80, 0.1);
  text-shadow: 0 0 5px rgba(255, 200, 80, 0.8);
  backdrop-filter: blur(4px);
  animation: float-btn 6s ease-in-out infinite alternate;
}

.df-city-actions .df-hub-travel-btn:hover {
  background: rgba(45, 30, 10, 0.9);
  border-color: #ffcc55;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9), 0 0 25px rgba(255, 200, 80, 0.6), inset 0 0 20px rgba(255, 200, 80, 0.4);
  text-shadow: 0 0 10px #fff, 0 0 20px #ffcc55;
  color: #fff;
  transform: translateY(-5px) scale(1.05);
}

.df-city-actions .df-hub-travel-btn i {
  margin-right: 6px;
  font-size: 12px;
  filter: drop-shadow(0 1px 2px #000);
}

/* ===== Circular Action Orbs (Banner Overlay) ===== */
.df-city-actions-overlay {
  background: linear-gradient(180deg, transparent 0%, rgba(13, 10, 6, 0.7) 30%, rgba(13, 10, 6, 0.9) 100%);
  padding: 12px 16px 14px;
}

.df-city-actions-circular {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

/* Individual action orb — matches gauge ring size */
.df-action-orb {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%, #3a2b1a, #0d0a06);
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow:
    0 0 12px rgba(201, 168, 76, 0.15),
    inset 0 0 0 3px rgba(201, 168, 76, 0.35);
  animation: df-gauge-pulse 4s ease-in-out infinite;
}

.df-action-orb:nth-child(even) {
  animation-delay: -2s;
}

.df-action-orb i {
  font-size: 18px;
  color: var(--df-gold-light);
  filter: drop-shadow(0 0 5px rgba(201, 168, 76, 0.6));
  position: relative;
  z-index: 2;
  margin: 0;
}

/* Hide text labels inside orbs (icon-only) */
.df-action-orb .df-action-orb-label {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cinzel', serif;
  font-size: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--df-text-dim);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.df-action-orb:hover .df-action-orb-label {
  opacity: 1;
}

/* Conic ring effect (like gauges) */
.df-action-orb::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(
    var(--df-gold) 0%,
    rgba(201, 168, 76, 0.4) 25%,
    rgba(201, 168, 76, 0.12) 50%,
    rgba(201, 168, 76, 0.4) 75%,
    var(--df-gold) 100%
  );
  z-index: -1;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.df-action-orb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #3a2b1a, #0d0a06);
  z-index: 0;
}

.df-action-orb i {
  z-index: 2;
  position: relative;
}

/* Hover glow */
.df-action-orb:hover {
  transform: translateY(-4px) scale(1.1);
  box-shadow:
    0 0 20px rgba(201, 168, 76, 0.4),
    0 6px 15px rgba(0, 0, 0, 0.5),
    inset 0 0 0 3px rgba(201, 168, 76, 0.6);
}

.df-action-orb:hover::before {
  opacity: 1;
}

/* --- Per-button color theming --- */

/* Bank — Gold */
.df-action-orb-bank::before {
  background: conic-gradient(
    var(--df-gold) 0%, rgba(201, 168, 76, 0.3) 25%,
    rgba(201, 168, 76, 0.1) 50%, rgba(201, 168, 76, 0.3) 75%,
    var(--df-gold) 100%
  );
}
.df-action-orb-bank i { color: var(--df-gold-light); }
.df-action-orb-bank:hover {
  box-shadow:
    0 0 25px rgba(201, 168, 76, 0.5),
    0 6px 15px rgba(0, 0, 0, 0.5),
    inset 0 0 0 3px var(--df-gold);
}

/* Grand Exchange — Astral Blue */
.df-action-orb-ge::before {
  background: conic-gradient(
    #55bdff 0%, rgba(60, 180, 255, 0.3) 25%,
    rgba(60, 180, 255, 0.1) 50%, rgba(60, 180, 255, 0.3) 75%,
    #55bdff 100%
  );
}
.df-action-orb-ge i { color: #9bd6ff; filter: drop-shadow(0 0 5px rgba(60, 180, 255, 0.6)); }
.df-action-orb-ge:hover {
  box-shadow:
    0 0 25px rgba(60, 180, 255, 0.5),
    0 6px 15px rgba(0, 0, 0, 0.5),
    inset 0 0 0 3px #55bdff;
}

/* Dungeon — Deep Red */
.df-action-orb-dungeon::before {
  background: conic-gradient(
    #ff5555 0%, rgba(255, 60, 60, 0.3) 25%,
    rgba(255, 60, 60, 0.1) 50%, rgba(255, 60, 60, 0.3) 75%,
    #ff5555 100%
  );
}
.df-action-orb-dungeon i { color: #ff9b9b; filter: drop-shadow(0 0 5px rgba(255, 60, 60, 0.6)); }
.df-action-orb-dungeon:hover {
  box-shadow:
    0 0 25px rgba(255, 60, 60, 0.5),
    0 6px 15px rgba(0, 0, 0, 0.5),
    inset 0 0 0 3px #ff5555;
}

/* Guild — Viridian Green */
.df-action-orb-guild::before {
  background: conic-gradient(
    #55ff77 0%, rgba(60, 255, 120, 0.3) 25%,
    rgba(60, 255, 120, 0.1) 50%, rgba(60, 255, 120, 0.3) 75%,
    #55ff77 100%
  );
}
.df-action-orb-guild i { color: #9effbc; filter: drop-shadow(0 0 5px rgba(60, 255, 120, 0.6)); }
.df-action-orb-guild:hover {
  box-shadow:
    0 0 25px rgba(60, 255, 120, 0.5),
    0 6px 15px rgba(0, 0, 0, 0.5),
    inset 0 0 0 3px #55ff77;
}

/* Travel — Ethereal Gold */
.df-action-orb-travel::before {
  background: conic-gradient(
    #ffcc55 0%, rgba(255, 200, 80, 0.3) 25%,
    rgba(255, 200, 80, 0.1) 50%, rgba(255, 200, 80, 0.3) 75%,
    #ffcc55 100%
  );
}
.df-action-orb-travel i { color: #ffe699; filter: drop-shadow(0 0 5px rgba(255, 200, 80, 0.6)); }
.df-action-orb-travel:hover {
  box-shadow:
    0 0 25px rgba(255, 200, 80, 0.5),
    0 6px 15px rgba(0, 0, 0, 0.5),
    inset 0 0 0 3px #ffcc55;
}

/* Travel dropdown wrapper — keep relative positioning */
.df-action-orb-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Hide caret-down icon inside circular travel orb */
.df-action-orb-travel i.fa-caret-down {
  display: none;
}

/* ===== Activity Section Gauges ===== */
/* ===== Activity Panel (top of hub) ===== */
.df-arcane-activity {
  margin-bottom: 0;
}

.df-arcane-activity > .df-activity-header > .df-arcane-title {
  margin-bottom: 8px;
}

.df-activity-header {
  display: flex;
  flex-direction: column;
}

.df-activity-gauges {
  padding: 0 0 10px;
  margin-bottom: 0;
  border-bottom: none;
}

.df-activity-gauges .df-city-gauge-row {
  display: flex;
  justify-content: center;
  gap: 2px;
  flex-wrap: wrap;
}

.df-activity-gauges .df-city-gauge {
  width: auto;
  min-width: 56px;
  flex-direction: row;
  gap: 6px;
  padding: 4px 8px;
  align-items: center;
}

.df-activity-gauges .df-city-gauge-ring {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.df-activity-gauges .df-city-gauge-img {
  height: 14px;
}

.df-activity-gauges .df-city-gauge-val {
  font-size: 12px;
  line-height: 1;
}

.df-activity-gauges .df-city-gauge-lbl {
  display: none;
}

/* Collapsible log toggle */
.df-activity-log-wrap {
  border-top: 1px solid rgba(138, 111, 30, 0.15);
}

.df-activity-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(100, 80, 40, 0.5);
  transition: color 0.2s;
}

.df-activity-toggle:hover {
  color: var(--df-gold-dark);
}

.df-activity-toggle i {
  font-size: 10px;
  transition: transform 0.2s;
}

.df-activity-log {
  padding: 6px 0 0;
}

/* Parchment scrollbar for hub scroll areas */
.df-arcane-hub ::-webkit-scrollbar {
  width: 6px;
}

.df-arcane-hub ::-webkit-scrollbar-track {
  background: rgba(138, 111, 30, 0.08);
  border-radius: 3px;
}

.df-arcane-hub ::-webkit-scrollbar-thumb {
  background: rgba(138, 111, 30, 0.25);
  border-radius: 3px;
}

.df-arcane-hub ::-webkit-scrollbar-thumb:hover {
  background: rgba(138, 111, 30, 0.4);
}

.df-arcane-hub {
  scrollbar-width: thin;
  scrollbar-color: rgba(138, 111, 30, 0.25) rgba(138, 111, 30, 0.08);
}

@media (max-width: 480px) {
  .df-activity-gauges .df-city-gauge {
    min-width: 48px;
    padding: 3px 5px;
    gap: 4px;
  }

  .df-activity-gauges .df-city-gauge-ring {
    width: 26px;
    height: 26px;
  }

  .df-activity-gauges .df-city-gauge-val {
    font-size: 10px;
  }
}

/* Responsive: circular orbs on mobile */
@media (max-width: 768px) {
  .df-action-orb {
    width: 44px;
    height: 44px;
  }

  .df-action-orb i {
    font-size: 15px;
  }

  .df-city-actions-circular {
    gap: 6px;
  }

  .df-city-actions-overlay {
    padding: 8px 10px 10px;
  }
}

@media (max-width: 480px) {
  .df-action-orb {
    width: 38px;
    height: 38px;
  }

  .df-action-orb i {
    font-size: 13px;
  }

  .df-city-actions-circular {
    gap: 4px;
  }
}

/* Badges inline below desc */
.df-city-viewport .df-hub-loc-badges {
  margin-left: 0;
  margin-top: 6px;
}

/* Location name glow */
.df-city-viewport .df-hub-loc-name {
  font-size: 26px;
  animation: df-title-glow 5s ease-in-out infinite;
}

/* Stats overlay — leveling gauge rings in banner */
.df-city-stats-overlay {
  position: relative;
  z-index: 3;
  background: linear-gradient(180deg, transparent 0%, rgba(13, 10, 6, 0.6) 30%, rgba(13, 10, 6, 0.85) 100%);
  padding: 14px 16px 16px;
  margin-top: 0;
  border-top: 1px solid rgba(201, 168, 76, 0.1);
}

.df-city-gauge-row {
  display: flex;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* Each gauge */
.df-city-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px;
  width: 72px;
  cursor: default;
}

/* Conic-gradient ring */
.df-city-gauge-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    conic-gradient(var(--df-gold-dark) calc(var(--gauge-pct, 0) * 1%),
      rgba(138, 111, 30, 0.15) calc(var(--gauge-pct, 0) * 1%));
  box-shadow:
    inset 0 0 0 4px rgba(232, 220, 196, 0.6);
  animation: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.df-city-gauge:hover .df-city-gauge-ring {
  transform: translateY(-2px);
  box-shadow:
    0 2px 8px rgba(138, 111, 30, 0.2),
    inset 0 0 0 4px rgba(232, 220, 196, 0.8);
}

.df-city-gauge-img {
  width: auto;
  height: 16px;
  image-rendering: pixelated;
  filter: none;
}

/* Level value */
.df-city-gauge-val {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--df-gold-dark);
  text-shadow: none;
  line-height: 1.2;
}

/* Skill name label */
.df-city-gauge-lbl {
  font-size: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(100, 80, 40, 0.6);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Empty state */
.df-city-gauge-empty {
  color: var(--df-text-dim);
  font-size: 11px;
  font-style: italic;
  text-align: center;
  padding: 8px;
  width: 100%;
}

/* City Viewport Keyframes */
@keyframes df-fog-drift-left {

  0%,
  100% {
    transform: translateX(0);
    opacity: 0.3;
  }

  50% {
    transform: translateX(-8%);
    opacity: 0.5;
  }
}

@keyframes df-fog-drift-right {

  0%,
  100% {
    transform: translateX(0);
    opacity: 0.25;
  }

  50% {
    transform: translateX(6%);
    opacity: 0.4;
  }
}

@keyframes df-ember-drift {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }

  15% {
    opacity: 0.8;
  }

  100% {
    transform: translateY(-130px) scale(0.3);
    opacity: 0;
  }
}

@keyframes df-ember-drift-alt {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }

  20% {
    opacity: 0.7;
  }

  100% {
    transform: translateY(-110px) translateX(15px) scale(0.3);
    opacity: 0;
  }
}

@keyframes df-title-glow {

  0%,
  100% {
    text-shadow: 0 0 20px rgba(201, 168, 76, 0.35), 0 0 40px rgba(201, 168, 76, 0.15);
  }

  50% {
    text-shadow: 0 0 30px rgba(201, 168, 76, 0.55), 0 0 60px rgba(201, 168, 76, 0.25), 0 0 80px rgba(201, 168, 76, 0.1);
  }
}

@keyframes df-medallion-hover-float {

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

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

/* City Viewport Mobile (<=991px) */
@media (max-width: 991px) {
  .df-hub-banner.df-city-viewport {
    min-height: 160px;
  }

  .df-city-viewport .df-hub-banner-content {
    padding: 20px 16px 14px;
    flex-wrap: wrap;
  }

  .df-city-viewport .df-hub-loc-name {
    font-size: 20px;
  }

  .df-city-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
    margin-top: 4px;
  }

  .df-city-embers {
    opacity: 0.5;
  }

  .df-city-stats-overlay {
    padding: 10px 12px 12px;
  }

  .df-city-gauge {
    width: 62px;
    padding: 2px;
  }

  .df-city-gauge-ring {
    width: 42px;
    height: 42px;
  }

  .df-city-gauge-img {
    height: 13px;
  }

  .df-city-gauge-val {
    font-size: 11px;
  }
}

/* City Viewport Small Mobile (<=480px) */
@media (max-width: 480px) {

  .df-city-fog,
  .df-city-embers {
    display: none;
  }

  .df-city-viewport .df-hub-banner-content {
    padding: 16px 12px 10px;
  }

  .df-city-viewport .df-hub-loc-name {
    font-size: 18px;
  }

  .df-city-gauge {
    width: 56px;
  }

  .df-city-gauge-ring {
    width: 36px;
    height: 36px;
  }

  .df-city-gauge-img {
    height: 11px;
  }

  .df-city-gauge-val {
    font-size: 10px;
  }

  .df-city-gauge-lbl {
    font-size: 7px;
  }
}

/* ===== Immersive Epic Layout ===== */
.df-epic-layout {
  display: flex;
  gap: 24px;
  margin-top: 24px;
  align-items: flex-start;
}

@media (max-width: 991px) {
  .df-epic-layout {
    flex-direction: column;
  }
}

.df-epic-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ===== ARCHITECTURAL MATRIX (Arcane Hub) ===== */
.df-arcane-hub {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 24px 20px;
  margin-top: 0;
  position: relative;
  z-index: 2;
}

/* Section title — clean parchment style */
.df-arcane-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--df-gold-dark);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 10px 0;
  padding: 14px 0 8px;
  text-align: left;
  text-shadow: none;
  border-bottom: 1px solid rgba(138, 111, 30, 0.25);
}

.df-arcane-title i {
  color: var(--df-gold-dark);
  margin-right: 8px;
  font-size: 13px;
  filter: none;
  opacity: 0.7;
}

/* The Nexus (Directory Center) */
.df-arcane-nexus {
  position: relative;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.df-arcane-nexus::before {
  display: none;
}

.df-arcane-nexus-glow {
  display: none;
}

.df-arcane-nexus-content {
  position: relative;
  z-index: 2;
}

/* The Orbitals (Skills & Bestiary) */
.df-arcane-orbitals {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.df-arcane-shard {
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.df-arcane-shard::before,
.df-arcane-shard::after {
  display: none;
}

/* Pedestal (News & Logs) */
.df-arcane-pedestal {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.df-arcane-chronicle,
.df-arcane-activity {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
}

/* News carousel nav buttons */
.df-arcane-nav-btn {
  color: var(--df-gold-dark) !important;
  text-shadow: none;
}

.df-arcane-news-item {
  background: rgba(138, 111, 30, 0.06) !important;
  border: 1px solid rgba(138, 111, 30, 0.15) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.df-arcane-news-item .df-hub-update-tag {
  background: rgba(138, 111, 30, 0.15);
  color: var(--df-gold-dark);
  border-color: rgba(138, 111, 30, 0.3);
}

.df-arcane-news-item .df-hub-update-fullpost {
  color: var(--df-gold-dark);
}

.df-arcane-activity-list {
  background: transparent !important;
  border: none !important;
  color: var(--df-gold-dark);
}

.df-hub-panel-body {
  padding: 0;
  min-width: 0;
  position: relative;
}

.df-hub-panel-body::before {
  display: none;
}

/* Sub-tabs within What's Here */
.df-hub-panel-subtabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--df-border);
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.06) 0%, rgba(201, 168, 76, 0.02) 50%, rgba(201, 168, 76, 0.06) 100%);
}

/* ===== Leveling Gauges (inside panel) ===== */
.df-hub-gauge-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 8px 0;
}

.df-hub-gauge-row .df-hub-skill-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px;
  width: 80px;
  position: relative;
  cursor: default;
}

.df-hub-gauge-row .df-hub-skill-bar,
.df-hub-gauge-row .df-hub-skill-pct {
  display: none;
}

/* Circular ring via conic-gradient */
.df-hub-gauge-row .df-hub-skill-icon {
  width: 58px;
  height: 58px;
  padding: 14px;
  border-radius: 50%;
  background:
    conic-gradient(var(--df-gold) calc(var(--gauge-pct, 0) * 1%),
      rgba(201, 168, 76, 0.12) calc(var(--gauge-pct, 0) * 1%));
  box-shadow:
    0 0 12px rgba(201, 168, 76, 0.15),
    inset 0 0 0 4px var(--df-bg-deep);
  image-rendering: pixelated;
  position: relative;
}

.df-hub-gauge-row .df-hub-skill-name {
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--df-text-dim);
  width: auto;
  text-align: center;
}

.df-hub-gauge-row .df-hub-skill-lvl {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--df-gold);
  width: auto;
  text-align: center;
  text-shadow: 0 0 6px rgba(201, 168, 76, 0.3);
}

.df-hub-gauge-row .df-hub-skill-row[data-tooltip]:hover::after {
  bottom: auto;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes df-gauge-pulse {

  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(201, 168, 76, 0.1));
  }

  50% {
    filter: drop-shadow(0 0 10px rgba(201, 168, 76, 0.25));
  }
}

.df-hub-gauge-row .df-hub-skill-icon {
  animation: df-gauge-pulse 4s ease-in-out infinite;
}

@media (max-width: 768px) {
  .df-hub-gauge-row .df-hub-skill-row {
    width: 68px;
  }

  .df-hub-gauge-row .df-hub-skill-icon {
    width: 48px;
    height: 48px;
    padding: 11px;
  }
}

/* Empty state for gauge strip */
.df-hub-sidebar .df-hub-leveling-empty {
  text-align: center;
  padding: 12px;
}

/* Links inside hub content */
.df-hub-content a {
  text-decoration: none !important;
}

.df-hub-content a:hover {
  text-decoration: none !important;
}

/* Legacy stat-img class (used by medallion icons) */
.df-hub-stat-img {
  width: auto;
  height: 1em;
  image-rendering: pixelated;
  vertical-align: middle;
}

.df-hub-skill-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  position: relative;
  cursor: default;
}

.df-hub-skill-row[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.95);
  color: #ffff00;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  border: 1px solid var(--df-border);
}

.df-hub-skill-icon {
  width: 16px;
  height: 16px;
}

.df-hub-skill-name {
  color: var(--df-text);
  font-size: 11px;
  width: 80px;
}

.df-hub-skill-lvl {
  color: var(--df-gold);
  font-size: 11px;
  width: 24px;
  text-align: right;
}

.df-hub-skill-bar {
  flex: 1;
  height: 6px;
  background: var(--df-bg-deepest);
  border-radius: 3px;
  overflow: hidden;
}

.df-hub-skill-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--df-gold-dark), var(--df-gold));
  border-radius: 3px;
  transition: width 0.5s ease;
}

.df-hub-skill-pct {
  color: var(--df-text-dim);
  font-size: 10px;
  width: 32px;
  text-align: right;
}

/* What's Here — sub-tabs */
.df-hub-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: var(--df-text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none !important;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.df-hub-tab:hover {
  color: var(--df-text-bright);
  background: rgba(201, 168, 76, 0.04);
  text-decoration: none !important;
}

.df-hub-tab.active {
  color: var(--df-gold);
  border-bottom-color: var(--df-gold);
}

.df-hub-tab-content {
  display: none;
}

.df-hub-tab-content.active {
  display: block;
  animation: df-tab-enter 0.35s ease-out;
}

@keyframes df-tab-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

/* What's Here — action rows */
.df-hub-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.df-hub-action-row:hover {
  background: var(--df-bg-hover);
}

.df-hub-action-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.df-hub-action-name {
  color: var(--df-text);
  font-size: 12px;
  flex: 1;
}

.df-hub-action-meta {
  color: var(--df-text-dim);
  font-size: 10px;
}

/* Activity feed */
.df-hub-activity-list .listing-item {
  padding: 6px 8px !important;
  border-bottom: 1px solid rgba(138, 111, 30, 0.12) !important;
  color: var(--df-gold-dark) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.df-hub-activity-list .listing-item-icon {
  height: 1em !important;
  width: auto !important;
  vertical-align: middle !important;
  margin-right: 3px !important;
}

/* Unlock lines in level-up entries */
.df-hub-activity-list .listing-item .listing-unlock {
  display: block !important;
  font-size: 10px !important;
  color: rgba(138, 111, 30, 0.5) !important;
  padding-left: 6px !important;
}

/* Travel dropdown in banner */
.df-hub-loc-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.df-hub-bank-btn {
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid var(--df-border);
  border-radius: 4px;
  color: var(--df-gold);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.df-hub-bank-btn:hover {
  background: rgba(201, 168, 76, 0.18);
  border-color: var(--df-border-bright);
}

.df-hub-travel-dropdown {
  position: relative;
}

.df-hub-travel-btn {
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid var(--df-border);
  border-radius: 4px;
  color: var(--df-gold);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.df-hub-travel-btn:hover {
  background: rgba(201, 168, 76, 0.18);
  border-color: var(--df-border-bright);
}

.df-hub-travel-menu {
  display: none;
  position: fixed;
  min-width: 260px;
  max-height: 320px;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--df-bg-card), var(--df-bg-deep));
  border: 1px solid var(--df-border-bright);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(201, 168, 76, 0.05);
  z-index: 9999;
}

.df-hub-travel-menu.open {
  display: block;
}

.df-hub-travel-route {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  color: var(--df-text);
  text-decoration: none;
  font-size: 12px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.06);
  transition: background 0.15s;
}

.df-hub-travel-route:hover {
  background: rgba(201, 168, 76, 0.1);
  color: var(--df-gold-light);
  text-decoration: none;
}

.df-hub-travel-route:last-child {
  border-bottom: none;
}

.rs-travel-divider {
  font-size: 10px;
  font-weight: 600;
  color: #5a4a3a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 14px 3px;
  border-top: 1px solid rgba(201, 168, 76, 0.1);
  margin-top: 2px;
}

.rs-travel-divider i {
  color: #5a4a3a;
  margin-right: 4px;
  font-size: 9px;
}

.df-hub-travel-route-name {
  flex: 1;
  font-weight: 600;
  color: var(--df-text-bright);
}

.df-hub-route-method {
  font-size: 14px;
  flex-shrink: 0;
}

.df-hub-route-time {
  color: var(--df-text-dim);
  font-size: 10px;
  flex-shrink: 0;
}

/* =====================================================
   HUB — "WHAT'S HERE" TABS (Skills, Combat, Shops)
   ===================================================== */

/* Shared: empty state */
.wh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 16px;
  color: var(--df-text-dim);
  font-size: 12px;
  font-style: italic;
}

.wh-empty i {
  font-size: 20px;
  opacity: 0.4;
}

/* Shared: action buttons */
.wh-btn {
  flex-shrink: 0;
  padding: 5px 14px;
  font-size: 10px;
  font-family: 'Cinzel', serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 3px;
  text-decoration: none !important;
  transition: all 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
}

.wh-btn i {
  margin-right: 4px;
}

.wh-btn-attack {
  color: #fdd !important;
  background: linear-gradient(180deg, rgba(160, 40, 30, 0.7), rgba(100, 20, 10, 0.8));
  border: 1px solid rgba(200, 60, 50, 0.4);
}

.wh-btn-attack:hover {
  background: linear-gradient(180deg, rgba(190, 50, 35, 0.9), rgba(130, 30, 15, 0.95));
  border-color: rgba(230, 70, 60, 0.7);
  box-shadow: 0 0 12px rgba(200, 50, 40, 0.35);
  color: #fff !important;
  text-decoration: none !important;
}

.wh-btn-group {
  display: flex;
  flex-direction: row;
  gap: 4px;
  flex-shrink: 0;
  align-items: center;
}

.wh-btn-action {
  color: var(--df-parchment, #d4c9a8) !important;
  background: linear-gradient(180deg, rgba(60, 90, 120, 0.7), rgba(35, 55, 80, 0.8));
  border: 1px solid rgba(80, 130, 180, 0.35);
}

.wh-btn-action:hover {
  background: linear-gradient(180deg, rgba(70, 110, 150, 0.9), rgba(45, 70, 100, 0.95));
  border-color: rgba(100, 160, 210, 0.6);
  box-shadow: 0 0 10px rgba(80, 140, 190, 0.25);
  color: #fff !important;
  text-decoration: none !important;
}

.wh-btn-shop {
  color: var(--df-parchment) !important;
  background: linear-gradient(180deg, rgba(140, 115, 45, 0.65), rgba(100, 80, 25, 0.75));
  border: 1px solid rgba(201, 168, 76, 0.4);
}

.wh-btn-shop:hover {
  background: linear-gradient(180deg, rgba(170, 140, 55, 0.85), rgba(130, 105, 35, 0.9));
  border-color: rgba(201, 168, 76, 0.7);
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.3);
  color: #fff !important;
  text-decoration: none !important;
}

/* ---- SKILLS TAB: Icon grid ---- */
.wh-skill-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px;
}

.wh-skill-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px 8px;
  background: var(--df-bg-deep);
  border: 1px solid rgba(201, 168, 76, 0.1);
  border-radius: 4px;
  text-decoration: none !important;
  color: var(--df-text) !important;
  transition: all 0.2s ease;
  cursor: pointer;
}

.wh-skill-card:hover {
  background: rgba(201, 168, 76, 0.12);
  border-color: var(--df-gold);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), 0 0 8px rgba(201, 168, 76, 0.1);
  text-decoration: none !important;
  color: var(--df-gold) !important;
}

.wh-skill-card img {
  max-width: 25px;
  max-height: 25px;
  image-rendering: pixelated;
}

.wh-skill-name {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 1.2;
}

/* ---- COMBAT TAB: Enemy cards ---- */
.wh-enemy-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin: 0 8px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.06);
  transition: background 0.15s;
}

.wh-enemy-card:last-child {
  border-bottom: none;
}

.wh-enemy-card:hover {
  background: rgba(201, 168, 76, 0.06);
}

.wh-enemy-info {
  flex: 1;
  min-width: 0;
}

.wh-enemy-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--df-text-bright);
  line-height: 1.3;
}

.wh-enemy-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.wh-enemy-lvl {
  font-size: 10px;
  font-weight: 600;
  color: var(--df-gold);
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 3px;
  padding: 0 5px;
  line-height: 16px;
}

.wh-enemy-style {
  font-size: 10px;
  color: var(--df-text-dim);
}

/* ---- SHOPS TAB: Shop cards ---- */
.wh-shop-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 5px;
  background: linear-gradient(180deg, #18120c, #0a0805);
  border: 1px solid #3d2f1f;
  border-left: 3px solid var(--df-gold-dark);
  border-radius: 2px;
  transition: all 0.2s ease;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.05), 0 4px 8px rgba(0, 0, 0, 0.5);
}

.wh-shop-card:last-child {
  margin-bottom: 0;
}

.wh-shop-card:hover {
  background: linear-gradient(180deg, #2b2218, #18120c);
  border-left-color: var(--df-gold);
  transform: translateX(4px);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.7);
}

.wh-shop-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  color: var(--df-gold);
  text-shadow: 0 1px 3px #000;
}

.wh-shop-info {
  flex: 1;
  min-width: 0;
}

.wh-shop-name {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: bold;
  color: var(--df-gold-light);
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.wh-shop-npc {
  display: block;
  font-size: 10px;
  color: var(--df-text-dim);
  margin-top: 1px;
}

/* ---- LOCALS TAB: NPC cards ---- */
.wh-npc-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 5px;
  background: linear-gradient(180deg, #11151a, #0b0d11);
  border: 1px solid #232c3b;
  border-left: 3px solid #3a506b;
  border-radius: 2px;
  transition: all 0.2s ease;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.05), 0 4px 8px rgba(0, 0, 0, 0.5);
}

.wh-npc-card:last-child {
  margin-bottom: 0;
}

.wh-npc-card:hover {
  background: linear-gradient(180deg, #1a222c, #11151a);
  border-left-color: #5b85aa;
  transform: translateX(4px);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.7);
}

.wh-npc-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 2px;
  background: #000;
  border: 1px solid #1a222c;
  image-rendering: pixelated;
}

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

.wh-npc-name {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: bold;
  color: #c4d7e8;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.wh-npc-type {
  display: block;
  font-size: 10px;
  color: var(--df-text-dim);
  margin-top: 1px;
}

.wh-btn-talk {
  color: #d4eaff !important;
  background: linear-gradient(180deg, rgba(40, 90, 160, 0.65), rgba(25, 60, 110, 0.75));
  border: 1px solid rgba(76, 140, 201, 0.4);
}

.wh-btn-talk:hover {
  background: linear-gradient(180deg, rgba(55, 110, 190, 0.85), rgba(35, 80, 140, 0.9));
  border-color: rgba(76, 140, 201, 0.7);
  box-shadow: 0 0 12px rgba(76, 140, 201, 0.3);
  color: #fff !important;
  text-decoration: none !important;
}

/* Responsive */
@media (max-width: 480px) {
  .wh-skill-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== Unified What's Here Panel ===== */
.df-wh-unified {
  padding: 0 !important;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.df-wh-section {
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

.df-wh-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* Carousel row: arrow [track] arrow */
.df-wh-carousel-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

.df-wh-carousel-row>.df-wh-skills-track-wrap,
.df-wh-carousel-row>.df-wh-bestiary-track-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.df-wh-section-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--df-gold);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.df-wh-section-title i {
  font-size: 14px;
  opacity: 0.7;
}

/* Ornamental dividers */
.df-wh-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(201, 168, 76, 0.2) 30%, rgba(201, 168, 76, 0.35) 50%, rgba(201, 168, 76, 0.2) 70%, transparent 95%);
  position: relative;
  margin: 0 16px;
}

.df-wh-divider::before {
  content: '\25C6';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8px;
  color: rgba(201, 168, 76, 0.4);
  background: var(--df-bg-card);
  padding: 0 10px;
  line-height: 1;
}

/* --- Carousel Arrows (flanking tracks) --- */
.df-wh-carousel-arrow {
  width: 24px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 3px;
  border: 1px solid rgba(138, 111, 30, 0.3);
  background: rgba(138, 111, 30, 0.1);
  color: var(--df-gold-dark);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
  line-height: 1;
  opacity: 0.7;
  box-shadow: none;
}

.df-wh-carousel-arrow:hover {
  background: rgba(138, 111, 30, 0.2);
  border-color: rgba(138, 111, 30, 0.5);
  box-shadow: none;
  color: var(--df-gold);
  opacity: 1;
  transform: none;
}

.df-wh-skills-track-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.df-wh-skills-track-wrap::before,
.df-wh-skills-track-wrap::after {
  display: none;
}

.df-wh-skills-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 6px 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.df-wh-skills-track::-webkit-scrollbar {
  display: none;
}

/* Skill cards — parchment carousel items */
.df-wh-skills-track .wh-skill-card {
  flex-shrink: 0;
  width: 82px;
  padding: 8px 4px 6px;
  margin: 0;
  border: none;
  border-right: 1px solid rgba(138, 111, 30, 0.2);
  border-radius: 0;
  background: transparent;
  position: relative;
  transition: all 0.2s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.df-wh-skills-track .wh-skill-card:last-child {
  border-right: none;
}

.df-wh-skills-track .wh-skill-card:hover {
  background: rgba(138, 111, 30, 0.1);
  transform: translateY(-2px);
  text-decoration: none;
}

.df-wh-skills-track .wh-skill-card img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: none;
}

.df-wh-skills-track .wh-skill-name {
  font-family: 'Cinzel', serif;
  font-size: 7px;
  color: var(--df-gold-dark);
  letter-spacing: 0.5px;
  text-shadow: none;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* --- Bestiary (horizontal carousel matching skills) --- */
.df-wh-bestiary-track-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.df-wh-bestiary-track-wrap::before,
.df-wh-bestiary-track-wrap::after {
  display: none;
}

.df-wh-bestiary-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.df-wh-bestiary-track::-webkit-scrollbar {
  display: none;
}

/* Enemy cards — parchment carousel items */
.df-wh-bestiary-track .wh-enemy-card {
  flex-shrink: 0;
  width: 100px;
  flex-direction: column;
  padding: 0;
  border-radius: 0;
  border: none;
  border-right: 1px solid rgba(138, 111, 30, 0.2);
  background: transparent;
  overflow: hidden;
  transition: all 0.2s ease;
}

.df-wh-bestiary-track .wh-enemy-card:last-child {
  border-right: none;
}

.df-wh-bestiary-track .wh-enemy-card:hover {
  background: rgba(160, 60, 40, 0.08);
  transform: translateY(-2px);
}

.wh-enemy-img {
  width: 100%;
  height: 56px;
  object-fit: contain;
  background: rgba(80, 50, 30, 0.15);
  image-rendering: pixelated;
  display: block;
  padding: 4px 0;
}

.df-wh-bestiary-track .wh-enemy-info {
  padding: 4px 6px;
  border-top: 1px solid rgba(138, 111, 30, 0.15);
}

.df-wh-bestiary-track .wh-enemy-name {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: #8b4513;
  letter-spacing: 1px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: none;
}

.df-wh-bestiary-track .wh-enemy-meta {
  font-size: 8px;
}

.df-wh-bestiary-track .wh-btn-attack {
  display: block;
  width: 100%;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 3px 4px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  border-top: 1px solid rgba(138, 111, 30, 0.15);
  background: rgba(139, 69, 19, 0.12);
  color: #8b4513 !important;
}

.df-wh-bestiary-track .wh-btn-attack:hover {
  background: rgba(139, 69, 19, 0.22);
}

/* Empty state */
.df-wh-bestiary-track .wh-empty {
  flex: 1 1 100%;
  padding: 16px;
}

/* --- Town Directory (shops + locals side-by-side) --- */
.df-wh-directory-grid {
  display: flex;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

.df-wh-directory-col {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.df-wh-directory-col-header {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--df-gold-dark);
  padding: 0 0 6px 0;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(138, 111, 30, 0.2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.df-wh-directory-col-header i {
  font-size: 11px;
  opacity: 0.6;
}

/* Cards inside directory columns */
.df-wh-directory-col .wh-shop-card,
.df-wh-directory-col .wh-npc-card {
  padding: 8px 10px;
}

.df-wh-directory-col .wh-shop-card:hover,
.df-wh-directory-col .wh-npc-card:hover {
  background: rgba(138, 111, 30, 0.08);
}

.df-wh-directory-col .wh-btn {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.df-wh-directory-col .wh-shop-name,
.df-wh-directory-col .wh-npc-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Override old sub-tab visibility (safety fallback) */
.df-wh-unified .df-hub-panel-subtabs {
  display: none !important;
}

.df-wh-unified .df-hub-tab-content {
  display: block !important;
}

/* Unified panel responsive */
@media (max-width: 768px) {
  .df-wh-directory-grid {
    flex-direction: column;
  }

  .df-wh-section {
    padding: 12px;
  }

  .df-wh-divider {
    margin: 0 12px;
  }

  .df-wh-bestiary-track .wh-enemy-card {
    width: 88px;
  }

  .df-wh-carousel-arrow {
    width: 22px;
    height: 40px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .df-wh-bestiary-track .wh-enemy-card {
    width: 80px;
  }

  .wh-enemy-img {
    height: 48px;
  }

  .df-wh-carousel-arrow {
    width: 20px;
    height: 36px;
    font-size: 11px;
  }
}

/* Travel routes in hub dropdown (reuse navbar rs-travel-route-item styles) */
.df-hub-travel-menu .rs-travel-route-item {
  padding: 8px 14px !important;
}

.df-hub-travel-menu .rs-travel-route-method {
  font-size: 16px;
  width: 22px;
  text-align: center;
}

.df-hub-travel-menu .rs-travel-route-dest {
  font-size: 12px;
}

.df-hub-travel-menu .rs-travel-route-time {
  font-size: 10px;
  padding: 1px 5px;
}

.df-hub-travel-menu .rs-travel-route-cost {
  font-size: 11px;
}

.df-hub-travel-menu .rs-travel-route-free {
  font-size: 10px;
}

/* Skeleton loading state */
.df-hub-skeleton {
  color: rgba(100, 80, 40, 0.5);
  font-style: italic;
  padding: 20px;
  text-align: center;
  font-size: 12px;
}

/* Nav: Town Hub link in travel dropdown */
.rs-travel-home-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  color: var(--df-gold);
  font-family: 'Cinzel', serif;
  font-size: 12px;
  text-decoration: none;
}

.rs-travel-home-link:hover {
  background: var(--df-bg-hover);
  color: var(--df-gold-light);
  text-decoration: none;
}

.rs-travel-dropdown-divider {
  height: 1px;
  background: var(--df-border);
  margin: 2px 0;
}

/* Skill modal width — handled by .df-skill-modal below */

/* =====================================================
   COMPACT GAME UPDATES CARD — with expand/collapse
   ===================================================== */
/* Each update item wrapper */
.df-hub-update-item {
  border-bottom: 1px solid rgba(201, 168, 76, 0.06);
}

.df-hub-update-item:last-child {
  border-bottom: none;
}

/* Collapsed row header */
.df-hub-update-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.df-hub-update-row:hover {
  background: rgba(201, 168, 76, 0.04);
}

.df-hub-update-date {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: var(--df-text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 70px;
}

/* Smaller category badge for hub */
.df-hub-update-tag {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  line-height: 1.4;
}

.df-hub-update-tag.df-tag-major {
  background: rgba(201, 168, 76, 0.15);
  color: var(--df-gold);
  border: 1px solid rgba(201, 168, 76, 0.3);
}

.df-hub-update-tag.df-tag-patch {
  background: rgba(100, 180, 100, 0.1);
  color: #7cb87c;
  border: 1px solid rgba(100, 180, 100, 0.25);
}

.df-hub-update-tag.df-tag-hotfix {
  background: rgba(220, 80, 80, 0.1);
  color: #d47070;
  border: 1px solid rgba(220, 80, 80, 0.25);
}

.df-hub-update-tag.df-tag-content {
  background: rgba(100, 150, 220, 0.1);
  color: #7caed4;
  border: 1px solid rgba(100, 150, 220, 0.25);
}

.df-hub-update-title {
  flex: 1;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--df-text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Toggle chevron */
.df-hub-update-toggle {
  color: var(--df-text-dim);
  font-size: 10px;
  flex-shrink: 0;
  transition: transform 0.3s ease, color 0.2s;
}

.df-hub-update-item.open .df-hub-update-toggle {
  transform: rotate(180deg);
  color: var(--df-gold);
}

/* Expanded body content */
.df-hub-update-body {
  display: none;
  padding: 0 16px 14px;
  animation: df-fadeIn 0.25s ease;
}

.df-hub-update-item.open .df-hub-update-body {
  display: block;
}

.df-hub-update-content {
  color: var(--df-text);
  font-family: 'Crimson Text', serif;
  font-size: 13px;
  line-height: 1.6;
  max-height: 200px;
  overflow-y: auto;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  border: 1px solid rgba(201, 168, 76, 0.06);
}

.df-hub-update-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.df-hub-update-content a {
  color: var(--df-gold) !important;
}

.df-hub-update-content a:hover {
  color: var(--df-gold-light) !important;
}

.df-hub-update-fullpost {
  display: inline-block;
  margin-top: 8px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--df-text-dim) !important;
  text-decoration: none !important;
  transition: color 0.2s;
}

.df-hub-update-fullpost:hover {
  color: var(--df-gold) !important;
}

@keyframes df-fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

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

/* ===== Game Updates Carousel ===== */
.df-hub-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

.df-hub-carousel-btn {
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 4px;
  color: var(--df-gold);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 10px;
  transition: all 0.2s;
  padding: 0;
}

.df-hub-carousel-btn:hover {
  background: rgba(201, 168, 76, 0.25);
  border-color: var(--df-gold);
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.15);
}

.df-hub-carousel-counter {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: var(--df-text-dim);
  letter-spacing: 1px;
  min-width: 30px;
  text-align: center;
}

.df-hub-carousel-track {
  position: relative;
}

.df-hub-carousel-slide {
  display: none;
}

.df-hub-carousel-slide.active {
  display: block;
  animation: df-carousel-enter 0.4s ease-out;
}

@keyframes df-carousel-enter {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

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

/* Hero title for carousel slides */
.df-hub-update-hero-title {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--df-text-bright);
  margin: 8px 0 10px;
  line-height: 1.3;
}

/* Carousel slide update item — always expanded */
.df-hub-carousel-slide .df-hub-update-item {
  border-bottom: none;
  padding: 4px 0;
}

.df-hub-carousel-slide .df-hub-update-body {
  display: block;
  padding: 0;
  animation: none;
}

.df-hub-carousel-slide .df-hub-update-content {
  max-height: 160px;
}

/* ===== Activity Feed Enhancement ===== */
.df-hub-activity {
  max-height: 280px;
  overflow-y: auto;
  position: relative;
}

/* Fade-in for new entries */
.df-hub-activity-list .listing-item:first-child {
  animation: df-activity-flash 1.5s ease-out;
}

@keyframes df-activity-flash {
  0% {
    background: rgba(138, 111, 30, 0.12);
  }

  100% {
    background: transparent;
  }
}

/* Scroll fade at bottom of activity */
.df-hub-activity::after {
  content: '';
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: linear-gradient(transparent, var(--df-bg-card));
  pointer-events: none;
  display: block;
}

/* =====================================================
   FOOTER — Spacing from game area
   ===================================================== */
.df-hub {
  margin-bottom: 10px;
}

/* =====================================================
   BOTTOM SCROLL SHADOW
   ===================================================== */
.df-scroll-shadow {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(to top, rgba(5, 3, 1, 0.9) 0%, transparent 100%);
  pointer-events: none;
  z-index: 999;
  transition: height 0.4s ease;
}

.df-scroll-shadow.active {
  height: 8px;
}

/* =====================================================
   GAME PAGE PRELOADER
   ===================================================== */
.df-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #171109;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.df-preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.df-preloader-text {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: 14px;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: var(--df-gold-dark);
  animation: df-preloader-pulse 1.5s ease-in-out infinite;
}

.df-preloader-bar {
  width: 200px;
  height: 2px;
  background: rgba(201, 168, 76, 0.15);
  margin-top: 20px;
  border-radius: 2px;
  overflow: hidden;
}

.df-preloader-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--df-gold-dark), var(--df-gold-light));
  animation: df-preloader-fill 2.5s ease-in-out forwards;
}

@keyframes df-preloader-pulse {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

@keyframes df-preloader-fill {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

/* =====================================================
   CHAT GIFT — dark fantasy themed clickable banner
   ===================================================== */
.chat-gift td {
  padding: 0 2px !important;
}

.chat-gift .alert,
.chat-gift .alert.alert-icon-block {
  all: unset !important;
  display: block !important;
  color: var(--df-gold) !important;
  font-size: 11px !important;
  line-height: 15px !important;
  cursor: pointer !important;
  padding: 1px 0 !important;
}

.chat-gift .alert:hover {
  text-decoration: underline !important;
}

.chat-gift .alert-icon {
  display: inline !important;
  position: static !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
}

.chat-gift .alert-icon span {
  font-size: 11px !important;
  margin-right: 3px !important;
}

/* =====================================================
   FORUMS
   ===================================================== */

/* Forum container */
.forum-container {
  max-width: 960px;
  margin: 20px auto;
  padding: 0 15px;
  position: relative;
  z-index: 3;
}

/* Category box */
.forum-category-box {
  background: var(--df-bg-card);
  border: 1px solid var(--df-border);
  border-radius: 4px;
  margin-bottom: 10px;
  overflow: hidden;
}

.forum-category-header {
  background: linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-deep));
  padding: 5px 10px;
  border-bottom: 1px solid var(--df-border);
  color: var(--df-gold);
  font-family: 'Cinzel', serif;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.forum-category-header:hover {
  background: linear-gradient(180deg, var(--df-bg-hover), var(--df-bg-deep));
}

.forum-cat-arrow {
  font-size: 10px;
  opacity: 0.6;
  width: 12px;
  transition: transform 0.15s;
}

.forum-category-header .forum-icon-img {
  width: 20px;
  height: 20px;
}

.forum-category-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: default;
  user-select: auto;
}

.forum-category-name {
  font-weight: 600;
}

.forum-category-desc {
  font-size: 10px;
  color: var(--df-text);
  font-family: 'Crimson Text', serif;
}

.forum-category-cols {
  margin-left: auto;
  display: flex;
  gap: 0;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--df-text);
  font-family: 'Crimson Text', serif;
}

.forum-category-cols span {
  width: 60px;
  text-align: center;
}

.forum-category-cols span:last-child {
  width: 150px;
  text-align: left;
}

/* Subcategory grid header */
.forum-subcategory-head {
  display: grid;
  grid-template-columns: 32px 1fr 60px 60px 150px;
  padding: 4px 10px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--df-text-dim);
  border-bottom: 1px solid var(--df-border);
  background: var(--df-bg-deep);
}

/* Subcategory row */
.forum-subcategory-row {
  display: grid;
  grid-template-columns: 32px 1fr 60px 60px 150px;
  padding: 3px 10px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.08);
  align-items: center;
  font-size: 11px;
  text-decoration: none;
  color: var(--df-text);
  transition: background 0.15s;
}

.forum-subcategory-row:last-child {
  border-bottom: none;
}

.forum-subcategory-row:hover {
  background: var(--df-bg-hover);
  text-decoration: none;
  color: var(--df-text);
}

.forum-sub-icon {
  text-align: center;
  color: var(--df-gold);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.forum-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.forum-sub-icon .forum-icon-img {
  width: 22px;
  height: 22px;
}

.forum-sub-info {
  min-width: 0;
  line-height: 1.1;
}

.forum-sub-name {
  color: var(--df-gold);
  font-weight: 600;
  font-size: 12px;
}

.forum-sub-desc {
  color: var(--df-text);
  font-size: 10px;
}

.forum-sub-stat {
  text-align: center;
  color: var(--df-text);
  font-size: 11px;
}

.forum-sub-lastpost {
  font-size: 10px;
  line-height: 1.1;
}

.forum-lastpost-date {
  color: var(--df-text);
  display: block;
}

.forum-lastpost-user {
  color: var(--df-text);
  font-size: 9px;
  display: block;
}

.forum-lastpost-empty {
  color: var(--df-text);
  font-style: italic;
}

/* Thread list header */
.forum-thread-head {
  display: grid;
  grid-template-columns: 1fr 60px 140px;
  padding: 6px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--df-text);
  border-bottom: 1px solid var(--df-border);
  background: var(--df-bg-deep);
}

/* Thread row */
.forum-thread-row {
  display: grid;
  grid-template-columns: 1fr 60px 140px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.08);
  align-items: center;
  font-size: 12px;
  text-decoration: none;
  color: var(--df-text);
  transition: background 0.15s;
}

.forum-thread-row:last-child {
  border-bottom: none;
}

.forum-thread-row:hover {
  background: var(--df-bg-hover);
  text-decoration: none;
  color: var(--df-text);
}

.forum-thread-row.sticky {
  background: rgba(201, 168, 76, 0.06);
  border-left: 3px solid var(--df-gold);
}

.forum-thread-row.locked {
  opacity: 0.7;
}

.forum-thread-title {
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.forum-thread-title:hover {
  text-decoration: none;
}

.forum-thread-name {
  color: var(--df-gold-light);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.forum-thread-creator {
  font-size: 10px;
  color: var(--df-text);
  display: block;
  line-height: 1.3;
}

.forum-thread-creator span {
  color: inherit !important;
}

.forum-thread-creator i,
.forum-thread-creator img {
  display: none !important;
}

.forum-lastpost-user span {
  color: inherit !important;
}

.forum-lastpost-user i,
.forum-lastpost-user img {
  display: none !important;
}

.forum-thread-stat {
  text-align: center;
  color: var(--df-text);
  font-size: 12px;
}

.forum-thread-lastpost {
  font-size: 11px;
  line-height: 1.3;
}

/* Bulk mod checkbox column */
.forum-mod-mode .forum-thread-head,
.forum-mod-mode .forum-thread-row {
  grid-template-columns: 20px 1fr 60px 140px;
}

.forum-thread-check-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.forum-bulk-check {
  cursor: pointer;
  accent-color: var(--df-gold);
}

/* Bulk mod toolbar */
.forum-bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--df-bg-deep);
  border: 1px solid var(--df-border);
  border-radius: 3px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.forum-bulk-toolbar form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.forum-bulk-count {
  font-size: 11px;
  color: var(--df-gold);
  font-weight: bold;
  margin-right: 4px;
}

/* Empty state */
.forum-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--df-text-dim);
}

.forum-empty i {
  font-size: 32px;
  margin-bottom: 10px;
  display: block;
  opacity: 0.4;
}

.forum-empty p {
  margin: 0;
  font-size: 14px;
}

/* Thread header */
.forum-thread-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.forum-thread-title-main {
  color: var(--df-gold);
  font-family: 'Cinzel', serif;
  font-size: 18px;
  margin: 0;
  flex: 1;
  min-width: 0;
}

.forum-thread-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 3px;
}

.forum-badge-locked {
  background: rgba(160, 160, 160, 0.15);
  color: #aaa;
}

.forum-badge-sticky {
  background: rgba(201, 168, 76, 0.15);
  color: var(--df-gold);
}

/* Post box */
.forum-post {
  display: flex;
  border: 1px solid var(--df-border);
  margin-bottom: 10px;
  border-radius: 4px;
  overflow: hidden;
}

.forum-post-sidebar {
  width: 150px;
  min-width: 150px;
  background: var(--df-bg-deep);
  padding: 12px;
  text-align: center;
  border-right: 1px solid var(--df-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.forum-post-username {
  font-weight: 700;
  font-size: 13px;
  word-break: break-word;
}

.forum-post-rank {
  font-size: 10px;
}

.forum-post-title {
  display: block;
  font-size: 10px;
  font-weight: 600;
  margin: 2px 0;
  text-align: center;
}

.forum-post-count {
  display: none;
}

.forum-post-joined {
  display: none;
}

.forum-post-rank {
  display: none !important;
}

/* Guild section in post sidebar */
.forum-post-guild {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--df-border, #3a3730);
  font-size: 10px;
}

.forum-post-guild-vex {
  transform: scale(0.3);
  transform-origin: center center;
  margin: -18px -12px;
  pointer-events: none;
}

.forum-post-guild-name {
  color: var(--df-text-dim);
  text-decoration: none;
  word-break: break-word;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forum-post-guild-name:hover {
  color: var(--df-gold, #c5a44e);
}

/* Mythical title shimmer effect */
.forum-title-mythical {
  background: linear-gradient(90deg, #FFD700, #FFA500, #FFD700);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: forumTitleShimmer 3s ease-in-out infinite;
}

@keyframes forumTitleShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.forum-post-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--df-bg-card);
  min-width: 0;
}

.forum-post-topbar {
  padding: 4px 10px;
  font-size: 9px;
  color: var(--df-text-dim);
  text-align: right;
  border-bottom: 1px solid rgba(201, 168, 76, 0.06);
  line-height: 1.4;
}

.forum-post-date {}

.forum-post-edited {
  display: block;
  font-style: italic;
  font-size: 9px;
}

.forum-post-body {
  flex: 1;
  padding: 10px 12px;
}

.forum-post-content {
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--df-text-bright);
}

.forum-post-footer {
  border-top: 1px solid var(--df-border);
  padding: 3px 10px;
  display: flex;
  gap: 4px;
  align-items: center;
}

.forum-post-footer-qfc {
  margin-left: auto;
  font-family: monospace;
  font-size: 9px;
  color: var(--df-text-dim);
}

.forum-post-actions {
  display: flex;
  gap: 2px;
  align-items: center;
}

.forum-post-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--df-text-dim);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  background: transparent;
  border: none;
  line-height: 1;
}

.forum-post-action-btn:hover {
  background: var(--df-bg-hover);
  color: var(--df-gold-light);
  text-decoration: none;
}

.forum-post-action-btn.forum-liked {
  color: #e53e3e;
}

.forum-post-action-btn.forum-liked:hover {
  color: #fc5c5c;
}

.forum-post-action-btn.forum-mod-btn {
  color: var(--df-text-dim);
  font-size: 10px;
}

.forum-post-action-btn.forum-mod-btn:hover {
  background: rgba(229, 62, 62, 0.1);
  color: #e53e3e;
}

/* Breadcrumb */
.forum-breadcrumb {
  padding: 8px 0;
  font-size: 12px;
  color: var(--df-text-dim);
  margin-bottom: 10px;
}

.forum-breadcrumb a {
  color: var(--df-gold);
  text-decoration: none;
}

.forum-breadcrumb a:hover {
  color: var(--df-gold-light);
  text-decoration: underline;
}

.forum-breadcrumb a.forum-btn-xs {
  color: var(--df-text);
  text-decoration: none;
  font-size: 9px;
}

.forum-breadcrumb a.forum-btn-xs:hover {
  color: var(--df-gold-light);
  text-decoration: none;
}

.forum-breadcrumb-sep {
  margin: 0 6px;
  opacity: 0.5;
}

/* Pagination */
.forum-pagination {
  display: flex;
  gap: 4px;
  justify-content: center;
  padding: 10px 0;
  flex-wrap: wrap;
}

.forum-pagination a,
.forum-pagination span {
  padding: 4px 10px;
  border: 1px solid var(--df-border);
  border-radius: 3px;
  font-size: 12px;
  color: var(--df-text);
  text-decoration: none;
}

.forum-pagination a:hover {
  background: var(--df-bg-hover);
  text-decoration: none;
  color: var(--df-gold-light);
}

.forum-pagination .active {
  background: var(--df-gold);
  color: var(--df-bg-deepest);
  font-weight: bold;
  border-color: var(--df-gold);
}

.forum-pagination-dots {
  border: none !important;
}

/* Forms */
.forum-form {
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  width: 100%;
}

.forum-form-group {
  margin-bottom: 12px;
}

.forum-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--df-gold);
  font-weight: 600;
}

.forum-form>input[type="text"],
.forum-form>.forum-form-group input[type="text"],
.forum-form>textarea,
.forum-form>.forum-form-group>textarea {
  background: var(--df-bg-deep);
  border: 1px solid var(--df-border);
  color: var(--df-text-bright);
  padding: 8px 12px;
  border-radius: 3px;
  width: 100%;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}

.forum-form>input[type="text"]:focus,
.forum-form>.forum-form-group input[type="text"]:focus,
.forum-form>textarea:focus,
.forum-form>.forum-form-group>textarea:focus {
  outline: none;
  border-color: var(--df-gold);
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.2);
}

.forum-form>textarea,
.forum-form>.forum-form-group>textarea {
  min-height: 200px;
  resize: vertical;
}

.forum-form textarea[style*="display:none"] {
  min-height: 0 !important;
}

.forum-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.forum-new-thread-form {
  padding: 15px;
}

/* Buttons */
.forum-btn {
  background: linear-gradient(180deg, var(--df-gold), var(--df-gold-dark));
  color: var(--df-bg-deepest);
  border: none;
  padding: 8px 20px;
  border-radius: 3px;
  font-weight: bold;
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: filter 0.15s;
}

.forum-btn:hover {
  filter: brightness(1.1);
  text-decoration: none;
  color: var(--df-bg-deepest);
}

.forum-btn-small {
  background: var(--df-bg-surface);
  color: var(--df-text);
  border: 1px solid var(--df-border);
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s;
}

.forum-btn-small:hover {
  background: var(--df-bg-hover);
  text-decoration: none;
  color: var(--df-gold-light);
}

.forum-btn-xs {
  background: var(--df-bg-surface);
  color: var(--df-text);
  border: 1px solid var(--df-border);
  padding: 2px 6px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 9px;
  font-family: 'Cinzel', serif;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: background 0.15s;
}

.forum-btn-xs:hover {
  background: var(--df-bg-hover);
  text-decoration: none;
  color: var(--df-gold-light);
}

/* Links */
.forum-link {
  color: var(--df-gold);
  text-decoration: none;
}

.forum-link:hover {
  color: var(--df-gold-light);
  text-decoration: underline;
}

/* User rank colors: admin=gold, gmod=green, fmod=purple, pmod=orange */
.forum-rank-member {
  color: var(--df-text) !important;
  font-weight: bold;
}

.forum-rank-pmod {
  color: #E89B3E !important;
}

.forum-rank-fmod {
  color: #B266FF !important;
}

.forum-rank-gmod {
  color: #3ECF3E !important;
}

.forum-rank-admin {
  color: #FFD700 !important;
}

.forum-post-username span,
.forum-post-username img {
  color: inherit !important;
  vertical-align: middle;
}

.forum-post-username .fas {
  font-size: 11px;
}

/* QFC */
.forum-qfc {
  font-family: monospace;
  font-size: 11px;
  color: var(--df-text-dim);
}

/* Reply box */
.forum-reply-box {
  margin-top: 15px;
  padding: 12px 15px;
  background: var(--df-bg-mid);
  border: 1px solid var(--df-border);
  border-radius: 4px;
}

.forum-reply-heading {
  color: var(--df-gold);
  font-family: 'Cinzel', serif;
  font-size: 14px;
  margin: 0;
  padding: 10px 0;
}

.forum-reply-locked {
  text-align: center;
  color: var(--df-text-dim);
  font-size: 13px;
}

.forum-reply-locked p {
  margin: 0;
}

/* Edit overlay */
.forum-edit-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.forum-edit-modal {
  background: var(--df-bg-card);
  border: 1px solid var(--df-border-bright);
  border-radius: 6px;
  padding: 20px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
}

.forum-edit-modal h3 {
  color: var(--df-gold);
  font-family: 'Cinzel', serif;
  margin: 0 0 12px 0;
  font-size: 16px;
}

/* ===== Staff Post Markup ===== */
/* Admin posts - gold */
.forum-post.admin-post {
  border: 1px solid #FFD700;
}

.forum-post.admin-post .forum-post-sidebar {
  background: rgba(255, 215, 0, 0.15);
  border-right-color: rgba(255, 215, 0, 0.3);
}

/* Global Mod posts - green */
.forum-post.gmod-post {
  border: 1px solid #3ECF3E;
}

.forum-post.gmod-post .forum-post-sidebar {
  background: rgba(62, 207, 62, 0.12);
  border-right-color: rgba(62, 207, 62, 0.3);
}

/* Forum Mod posts - purple */
.forum-post.fmod-post {
  border: 1px solid #B266FF;
}

.forum-post.fmod-post .forum-post-sidebar {
  background: rgba(178, 102, 255, 0.12);
  border-right-color: rgba(178, 102, 255, 0.3);
}

/* Player Mod posts - orange */
.forum-post.pmod-post {
  border: 1px solid #E89B3E;
}

.forum-post.pmod-post .forum-post-sidebar {
  background: rgba(232, 155, 62, 0.12);
  border-right-color: rgba(232, 155, 62, 0.3);
}

.forum-rank-admin {
  text-shadow: 0 0 3px rgba(255, 215, 0, 0.5);
}

.forum-rank-gmod {
  text-shadow: 0 0 3px rgba(62, 207, 62, 0.4);
}

.forum-rank-fmod {
  text-shadow: 0 0 3px rgba(178, 102, 255, 0.4);
}

.forum-rank-pmod {
  text-shadow: 0 0 3px rgba(232, 155, 62, 0.4);
}

.forum-crown-admin {
  color: #FFD700;
  font-size: 12px;
}

.forum-crown-gmod {
  color: #3ECF3E;
  font-size: 11px;
}

.forum-crown-fmod {
  color: #B266FF;
  font-size: 11px;
}

.forum-crown-pmod {
  color: #E89B3E;
  font-size: 11px;
}

.forum-thread-row.jmod-replied {
  background: rgba(255, 215, 0, 0.05);
}

.forum-jmod-replied-icon {
  color: #FFD700;
  font-size: 10px;
  margin-left: 4px;
  vertical-align: middle;
}

.forum-poll-icon {
  color: var(--df-gold);
  font-size: 10px;
  margin-left: 4px;
  vertical-align: middle;
  opacity: 0.7;
}

/* ===== PHASE 2: BBCode Rendered Content ===== */
.forum-quote {
  border-left: 3px solid var(--df-gold);
  background: rgba(0, 0, 0, 0.25);
  padding: 8px 12px;
  margin: 8px 0;
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  color: var(--df-text);
}

.forum-quote cite {
  display: block;
  font-size: 11px;
  color: var(--df-gold);
  font-style: normal;
  margin-bottom: 4px;
  font-weight: 600;
}

.forum-quote .forum-quote {
  border-left-color: var(--df-text-dim);
  background: rgba(0, 0, 0, 0.15);
  margin: 6px 0;
}

/* Staff-colored quotes */
.forum-quote-admin {
  background: rgba(255, 215, 0, 0.15);
  border-left-color: #FFD700;
}

.forum-quote-admin cite {
  color: #FFD700;
}

.forum-quote-gmod {
  background: rgba(62, 207, 62, 0.12);
  border-left-color: #3ECF3E;
}

.forum-quote-gmod cite {
  color: #3ECF3E;
}

.forum-quote-fmod {
  background: rgba(178, 102, 255, 0.12);
  border-left-color: #B266FF;
}

.forum-quote-fmod cite {
  color: #B266FF;
}

.forum-quote-pmod {
  background: rgba(232, 155, 62, 0.12);
  border-left-color: #E89B3E;
}

.forum-quote-pmod cite {
  color: #E89B3E;
}

/* Forum Like Button */
.forum-like-btn {
  transition: color 0.2s;
}

.forum-like-btn .fa-heart {
  color: var(--df-text-dim);
}

.forum-like-btn.liked .fa-heart {
  color: #e53e3e;
}

.forum-like-btn:hover .fa-heart {
  color: #e53e3e;
}

.forum-like-btn.liked {
  color: #e53e3e;
}

.forum-like-count {
  margin-left: 2px;
}

.forum-code {
  background: var(--df-bg-deepest);
  border: 1px solid var(--df-border);
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--df-text-bright);
  overflow-x: auto;
  white-space: pre;
  margin: 8px 0;
}

.forum-code code {
  font-family: monospace;
}

.forum-post-image {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 6px 0;
  display: block;
}

.forum-text-center {
  text-align: center;
}

.forum-text-right {
  text-align: right;
}

.forum-text-size-1 {
  font-size: 10px;
}

.forum-text-size-2 {
  font-size: 11px;
}

.forum-text-size-3 {
  font-size: 14px;
}

.forum-text-size-4 {
  font-size: 18px;
}

.forum-text-size-5 {
  font-size: 24px;
}

.forum-list {
  margin: 6px 0 6px 20px;
  padding: 0;
}

.forum-list li {
  margin: 2px 0;
  color: var(--df-text-bright);
}

.forum-list li::marker {
  color: var(--df-gold);
}

.forum-hr {
  border: none;
  border-top: 1px solid var(--df-border-bright);
  margin: 10px 0;
}

.forum-table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
}

.forum-table td {
  border: 1px solid var(--df-border);
  padding: 6px 10px;
  color: var(--df-text-bright);
  font-size: 12px;
}

.forum-table tr:nth-child(odd) td {
  background: rgba(201, 168, 76, 0.03);
}

.forum-table tr:hover td {
  background: rgba(201, 168, 76, 0.06);
}

/* ===== PHASE 2: BBCode Toolbar ===== */
.forum-bbcode-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  padding: 4px 6px;
  background: var(--df-bg-deep);
  border: 1px solid var(--df-border);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
}

.forum-bb-btn {
  background: var(--df-bg-surface);
  color: var(--df-text);
  border: 1px solid var(--df-border);
  padding: 2px 5px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  transition: background 0.15s;
}

.forum-bb-btn:hover {
  background: var(--df-bg-hover);
  color: var(--df-gold-light);
}

.forum-bb-sep {
  width: 1px;
  height: 14px;
  background: var(--df-border);
  margin: 0 1px;
}

.forum-bb-select {
  background: var(--df-bg-surface);
  color: var(--df-text);
  border: 1px solid var(--df-border);
  padding: 2px 4px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 9px;
}

.forum-bbcode-toolbar+textarea {
  border-radius: 0 0 3px 3px;
}

/* ===== PHASE 2: Mod Tools ===== */
.forum-mod-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  padding: 4px 8px;
  background: var(--df-bg-deep);
  border: 1px solid var(--df-border);
  border-radius: 3px;
  margin-bottom: 8px;
}

.forum-mod-btn {
  background: var(--df-bg-surface);
  color: var(--df-text);
  border: 1px solid var(--df-border);
  padding: 2px 6px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 9px;
  transition: background 0.15s;
  font-family: 'Cinzel', serif;
  line-height: 1.4;
}

.forum-mod-btn:hover {
  background: var(--df-bg-hover);
  color: var(--df-gold-light);
}

.forum-mod-btn.danger {
  color: #e53e3e;
  border-color: rgba(229, 62, 62, 0.3);
}

.forum-mod-btn.danger:hover {
  background: rgba(229, 62, 62, 0.15);
}

.forum-mod-select {
  background: var(--df-bg-surface);
  color: var(--df-text);
  border: 1px solid var(--df-border);
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 9px;
  max-width: 220px;
  font-family: 'Cinzel', serif;
  line-height: 1.4;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%23b8a683' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
  padding-right: 16px;
}

/* ===== Forum Modal ===== */
.forum-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.forum-modal-box {
  background: var(--df-bg-card);
  border: 1px solid var(--df-border);
  border-radius: 4px;
  width: 90%;
  max-width: 400px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.forum-modal-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-family: 'Cinzel', serif;
  color: var(--df-gold);
}

.forum-modal-message {
  font-size: 12px;
  color: var(--df-text);
  margin-bottom: 10px;
  line-height: 1.5;
}

.forum-modal-input {
  width: 100% !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  margin-bottom: 10px;
  box-sizing: border-box !important;
}

.forum-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.forum-modal-confirm-btn {
  background: var(--df-accent, #c5a44e) !important;
  color: #000 !important;
}

/* ===== PHASE 2: Search ===== */
.forum-search-box {
  padding: 15px;
}

.forum-search-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.forum-search-input {
  flex: 1;
  min-width: 200px;
  background: var(--df-bg-deep);
  border: 1px solid var(--df-border);
  color: var(--df-text-bright);
  padding: 8px 12px;
  border-radius: 3px;
  font-size: 13px;
}

.forum-search-input:focus {
  outline: none;
  border-color: var(--df-gold);
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.2);
}

.forum-search-result {
  display: block;
  padding: 10px 15px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.08);
  text-decoration: none;
  color: var(--df-text);
  transition: background 0.15s;
}

.forum-search-result:hover {
  background: var(--df-bg-hover);
  text-decoration: none;
  color: var(--df-text);
}

.forum-search-result-header {
  margin-bottom: 4px;
}

.forum-search-result-thread {
  color: var(--df-gold-light);
  font-weight: 600;
  font-size: 13px;
}

.forum-search-result-meta {
  font-size: 10px;
  color: var(--df-text-dim);
  margin-left: 8px;
}

.forum-search-result-excerpt {
  font-size: 12px;
  color: var(--df-text);
  line-height: 1.5;
  opacity: 0.8;
}

/* ===== PHASE 2: Polls ===== */
.forum-poll {
  background: var(--df-bg-card);
  border: 1px solid var(--df-border);
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 10px;
}

.forum-poll-header {
  color: var(--df-gold);
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.forum-poll-question {
  font-size: 14px;
  color: var(--df-text-bright);
  margin-bottom: 12px;
  font-weight: 600;
}

.forum-poll-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--df-text);
}

.forum-poll-option input[type="radio"] {
  accent-color: var(--df-gold);
}

.forum-poll-option-text {
  color: var(--df-text-bright);
}

.forum-poll-result {
  margin-bottom: 8px;
}

.forum-poll-result .forum-poll-option-text {
  font-size: 12px;
  color: var(--df-text);
  margin-bottom: 3px;
}

.forum-poll-bar {
  background: var(--df-bg-deep);
  border-radius: 3px;
  height: 18px;
  overflow: hidden;
  position: relative;
}

.forum-poll-bar-fill {
  background: linear-gradient(90deg, var(--df-gold-dark), var(--df-gold));
  height: 100%;
  border-radius: 3px;
  min-width: 0;
  transition: width 0.3s;
}

.forum-poll-pct {
  font-size: 11px;
  color: var(--df-text-dim);
  margin-left: 4px;
}

.forum-poll-total {
  font-size: 11px;
  color: var(--df-text-dim);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--df-border);
}

.forum-poll-option-row {
  margin-bottom: 6px;
}

.forum-poll-option-row input[type="text"] {
  background: var(--df-bg-deep);
  border: 1px solid var(--df-border);
  color: var(--df-text-bright);
  padding: 6px 10px;
  border-radius: 3px;
  width: 100%;
  font-size: 13px;
  box-sizing: border-box;
}

/* ===== PHASE 2: Subscriptions ===== */
.forum-sub-btn {
  background: var(--df-bg-surface);
  color: var(--df-text-dim);
  border: 1px solid var(--df-border);
  padding: 2px 6px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 9px;
  transition: all 0.15s;
}

.forum-sub-btn:hover {
  background: var(--df-bg-hover);
  color: var(--df-gold-light);
}

.forum-sub-btn.active {
  background: rgba(201, 168, 76, 0.15);
  color: var(--df-gold);
  border-color: var(--df-gold-dark);
}

/* ===== PHASE 3: Reports ===== */
.forum-report-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.forum-report-modal {
  background: var(--df-bg-card);
  border: 1px solid var(--df-gold-dark);
  border-radius: 6px;
  padding: 20px;
  max-width: 450px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.forum-report-modal h3 {
  color: var(--df-gold);
  font-family: 'Cinzel', serif;
  margin: 0 0 12px 0;
  font-size: 15px;
}

.forum-report-row {
  border-bottom: 1px solid var(--df-border);
  transition: background 0.15s;
}

.forum-report-row:hover {
  background: var(--df-bg-hover);
}

.forum-report-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.forum-report-status.pending {
  background: rgba(237, 186, 62, 0.15);
  color: #edba3e;
}

.forum-report-status.reviewed {
  background: rgba(66, 153, 225, 0.15);
  color: #4299e1;
}

.forum-report-status.actioned {
  background: rgba(72, 187, 120, 0.15);
  color: #48bb78;
}

.forum-report-status.dismissed {
  background: rgba(160, 160, 160, 0.15);
  color: #a0a0a0;
}

.forum-report-priority {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.forum-report-priority.critical {
  color: #e53e3e;
}

.forum-report-priority.high {
  color: #dd6b20;
}

.forum-report-priority.medium {
  color: #edba3e;
}

.forum-report-priority.low {
  color: #a0a0a0;
}

/* ===== PHASE 3: Warnings & Bans ===== */
.forum-warning-badge {
  display: inline-block;
  background: rgba(237, 186, 62, 0.2);
  color: #edba3e;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}

.forum-reply-banned {
  background: rgba(229, 62, 62, 0.08) !important;
  border-color: rgba(229, 62, 62, 0.3) !important;
  text-align: center;
  padding: 20px !important;
}

.forum-reply-banned p {
  margin: 4px 0;
  color: var(--df-text);
  font-size: 13px;
}

.forum-reply-banned i.fa-ban {
  color: #e53e3e;
  font-size: 18px;
}

.forum-warn-form,
.forum-ban-form {
  padding: 0;
}

/* ===== PHASE 3: Mod Log ===== */
.forum-mod-log-row {
  border-bottom: 1px solid var(--df-border);
  transition: background 0.15s;
}

.forum-mod-log-row:hover {
  background: var(--df-bg-hover);
}

.forum-mod-log-action {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(201, 168, 76, 0.12);
  color: var(--df-gold);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.forum-mod-log-filters {
  border-bottom: 1px solid var(--df-border);
}

/* ===== PHASE 3: QFC ===== */
.forum-qfc-input {
  width: 90px;
  padding: 4px 8px;
  background: var(--df-bg-deep);
  border: 1px solid var(--df-border);
  color: var(--df-text-bright);
  border-radius: 3px;
  font-size: 11px;
  font-family: monospace;
}

.forum-qfc-input::placeholder {
  color: var(--df-text-dim);
}

/* ===== PHASE 3: My Posts ===== */
.forum-my-post-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--df-border);
  transition: background 0.15s;
}

.forum-my-post-row:hover {
  background: var(--df-bg-hover);
}

.forum-my-post-excerpt {
  font-size: 12px;
  color: var(--df-text-dim);
  margin-top: 4px;
  line-height: 1.4;
  max-height: 40px;
  overflow: hidden;
}

/* ===== Forum Staff Bar ===== */
.forum-staff-bar {
  background: linear-gradient(135deg, rgba(25, 15, 8, 0.95), rgba(45, 28, 12, 0.9));
  border: 1px solid rgba(218, 165, 32, 0.25);
  border-radius: 4px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(218, 165, 32, 0.08);
}

.forum-staff-bar-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  flex-wrap: wrap;
}

.forum-staff-bar-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--df-gold);
  margin-right: 4px;
  opacity: 0.7;
  display: flex;
  align-items: center;
  gap: 3px;
}

.forum-staff-bar-label i {
  font-size: 10px;
}

.forum-staff-link {
  font-size: 9px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  color: var(--df-text-bright) !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.forum-staff-link:hover {
  background: rgba(218, 165, 32, 0.12);
  border-color: rgba(218, 165, 32, 0.4);
  color: var(--df-gold) !important;
  box-shadow: 0 0 6px rgba(218, 165, 32, 0.15);
  transform: translateY(-1px);
}

.forum-staff-link i {
  font-size: 11px;
  opacity: 0.8;
}

.forum-staff-link:hover i {
  opacity: 1;
}

.forum-staff-link-admin {
  border-color: rgba(218, 165, 32, 0.3) !important;
  color: var(--df-gold) !important;
  background: rgba(218, 165, 32, 0.06);
}

.forum-staff-link-admin:hover {
  background: rgba(218, 165, 32, 0.18);
  border-color: var(--df-gold) !important;
  box-shadow: 0 0 10px rgba(218, 165, 32, 0.2);
}

/* ===== Forum Admin Panel ===== */
.forum-admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.forum-admin-stat {
  background: var(--df-bg-card);
  border: 1px solid var(--df-border);
  border-radius: 4px;
  padding: 16px;
  text-align: center;
}

.forum-admin-stat-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--df-gold);
}

.forum-admin-stat-label {
  font-size: 11px;
  color: var(--df-text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}

/* Tabs */
.fadmin-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 0;
  border-bottom: 2px solid var(--df-border);
}

.fadmin-tab {
  padding: 10px 18px;
  background: none;
  border: none;
  color: var(--df-text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fadmin-tab:hover {
  color: var(--df-text-bright);
  background: rgba(255, 255, 255, 0.02);
}

.fadmin-tab.active {
  color: var(--df-gold);
  border-bottom-color: var(--df-gold);
}

.fadmin-panel {
  padding-top: 16px;
}

/* Category bars */
.fadmin-category {
  margin-bottom: 8px;
  border: 1px solid var(--df-border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--df-bg-card);
}

.fadmin-cat-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.fadmin-cat-bar:hover {
  background: var(--df-bg-hover);
}

.fadmin-cat-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.fadmin-cat-arrow {
  font-size: 10px;
  color: var(--df-text-dim);
  width: 12px;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.fadmin-cat-icon {
  color: var(--df-gold);
  opacity: 0.7;
  flex-shrink: 0;
}

.fadmin-cat-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.fadmin-cat-name {
  font-size: 14px;
  font-weight: bold;
  color: var(--df-text-bright);
}

.fadmin-cat-meta {
  font-size: 11px;
  color: var(--df-text-dim);
}

.fadmin-cat-edit-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  color: var(--df-text-dim);
  padding: 5px 8px;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.15s;
  flex-shrink: 0;
}

.fadmin-cat-edit-btn:hover {
  color: var(--df-gold);
  border-color: rgba(218, 165, 32, 0.3);
  background: rgba(218, 165, 32, 0.08);
}

/* Category edit panel */
.fadmin-cat-edit {
  padding: 14px;
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid var(--df-border);
}

/* Subcategory list */
.fadmin-cat-body {
  border-top: 1px solid var(--df-border);
}

.fadmin-sub {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.fadmin-sub:last-child {
  border-bottom: none;
}

.fadmin-sub-disabled {
  opacity: 0.5;
}

.fadmin-sub-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.fadmin-sub-summary:hover {
  background: rgba(255, 255, 255, 0.02);
}

.fadmin-sub-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.fadmin-sub-icon {
  color: var(--df-text-dim);
  font-size: 13px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.fadmin-sub-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fadmin-sub-name {
  font-size: 13px;
  color: var(--df-text-bright);
}

.fadmin-disabled-tag {
  font-size: 9px;
  background: rgba(229, 62, 62, 0.2);
  color: #e53e3e;
  padding: 1px 5px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

.fadmin-sub-perms {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.fadmin-sub-perms span {
  font-size: 10px;
  color: var(--df-text-dim);
  white-space: nowrap;
}

.fadmin-sub-perms span i {
  margin-right: 2px;
  opacity: 0.6;
}

.fadmin-sub-id {
  font-size: 10px;
  color: var(--df-text-dim);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 10px;
}

/* Subcategory edit panel */
.fadmin-sub-edit {
  padding: 14px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* Shared edit form layout */
.fadmin-edit-form {}

.fadmin-edit-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 10px;
}

.fadmin-edit-row:last-child {
  margin-bottom: 0;
}

.fadmin-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.fadmin-field-grow {
  flex: 1;
}

.fadmin-field label {
  font-size: 10px;
  color: var(--df-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.fadmin-field label i {
  font-size: 10px;
  opacity: 0.7;
}

/* Inputs — use !important to override Bootstrap 3 global selectors */
input.fadmin-input,
select.fadmin-input,
textarea.fadmin-input,
.fadmin-input {
  padding: 6px 8px !important;
  background: var(--df-bg-deep) !important;
  border: 1px solid var(--df-border) !important;
  color: var(--df-text-bright) !important;
  border-radius: 3px !important;
  font-size: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s !important;
  height: auto !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  font-family: inherit !important;
}

input.fadmin-input:focus,
select.fadmin-input:focus,
textarea.fadmin-input:focus,
.fadmin-input:focus {
  border-color: var(--df-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.2) !important;
}

select.fadmin-input {
  padding: 6px 4px !important;
  cursor: pointer !important;
}

select.fadmin-input option {
  background: var(--df-bg-deep);
  color: var(--df-text-bright);
}

/* Save button */
button.fadmin-save-btn,
.fadmin-save-btn {
  padding: 6px 14px !important;
  background: rgba(218, 165, 32, 0.12) !important;
  border: 1px solid rgba(218, 165, 32, 0.3) !important;
  border-radius: 3px !important;
  color: var(--df-gold) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  height: auto !important;
  line-height: 1.4 !important;
}

button.fadmin-save-btn:hover,
.fadmin-save-btn:hover {
  background: rgba(218, 165, 32, 0.22) !important;
  border-color: var(--df-gold) !important;
}

/* Toggle switch */
.fadmin-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
  margin-top: 2px;
}

.fadmin-toggle input[type="checkbox"] {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
}

.fadmin-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--df-border);
  border-radius: 10px;
  transition: all 0.2s;
}

.fadmin-toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  top: 2px;
  background: var(--df-text-dim);
  border-radius: 50%;
  transition: all 0.2s;
}

.fadmin-toggle input:checked+.fadmin-toggle-slider {
  background: rgba(218, 165, 32, 0.2);
  border-color: rgba(218, 165, 32, 0.4);
}

.fadmin-toggle input:checked+.fadmin-toggle-slider::before {
  transform: translateX(16px);
  background: var(--df-gold);
}

/* Create tab */
.fadmin-create-section {
  background: var(--df-bg-card);
  border: 1px solid var(--df-border);
  border-radius: 4px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.fadmin-create-section h3 {
  margin: 0 0 4px !important;
  font-size: 15px !important;
  color: var(--df-gold) !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fadmin-create-desc {
  font-size: 12px;
  color: var(--df-text-dim);
  margin: 0 0 14px;
  line-height: 1.5;
}

/* Help button in tab bar */
.fadmin-help-btn {
  margin-left: auto !important;
  padding: 6px 10px !important;
  background: none !important;
  border: 1px solid var(--df-border) !important;
  border-radius: 50% !important;
  color: var(--df-text-dim) !important;
  cursor: pointer !important;
  font-size: 13px !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s !important;
  align-self: center !important;
}

.fadmin-help-btn:hover {
  color: var(--df-gold) !important;
  border-color: var(--df-gold) !important;
  background: rgba(218, 165, 32, 0.08) !important;
}

/* Help modal overlay */
.fadmin-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  z-index: 10000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  backdrop-filter: blur(2px);
}

.fadmin-modal-overlay.active {
  display: flex !important;
}

.fadmin-modal {
  background: var(--df-bg-mid) !important;
  border: 1px solid var(--df-border-bright) !important;
  border-radius: 6px !important;
  max-width: 720px !important;
  width: 100% !important;
  max-height: 80vh !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(201, 168, 76, 0.1) !important;
  overflow: hidden !important;
}

.fadmin-modal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--df-border) !important;
  flex-shrink: 0 !important;
}

.fadmin-modal-header h3 {
  margin: 0 !important;
  font-size: 15px !important;
  color: var(--df-gold) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.fadmin-modal-close {
  background: none !important;
  border: 1px solid var(--df-border) !important;
  color: var(--df-text-dim) !important;
  font-size: 20px !important;
  cursor: pointer !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  transition: all 0.15s !important;
}

.fadmin-modal-close:hover {
  color: var(--df-text-bright) !important;
  border-color: var(--df-text-dim) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.fadmin-modal-body {
  padding: 16px 18px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 !important;
  min-height: 0 !important;
}

/* Help content (shared between modal and any context) */
.fadmin-help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.fadmin-help-card {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  padding: 14px 16px;
}

.fadmin-help-icon {
  font-size: 18px;
  color: var(--df-gold);
  opacity: 0.7;
  margin-bottom: 6px;
}

.fadmin-help-card h4 {
  margin: 0 0 6px !important;
  font-size: 13px !important;
  color: var(--df-text-bright) !important;
}

.fadmin-help-card p {
  margin: 0 0 8px !important;
  font-size: 12px !important;
  color: var(--df-text) !important;
  line-height: 1.5 !important;
}

.fadmin-help-card p strong {
  color: var(--df-text-bright) !important;
}

.fadmin-help-example {
  font-size: 11px;
  color: var(--df-text-dim);
  font-style: italic;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  line-height: 1.4;
}

table.fadmin-rank-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-top: 8px !important;
}

table.fadmin-rank-table tr {
  border: none !important;
}

table.fadmin-rank-table tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.1) !important;
}

td.fadmin-rank-td-num {
  width: 30px !important;
  padding: 4px 8px !important;
  text-align: center !important;
  color: var(--df-gold) !important;
  font-weight: bold !important;
  font-size: 12px !important;
  border: none !important;
}

td.fadmin-rank-td-label {
  padding: 4px 8px !important;
  color: var(--df-text) !important;
  font-size: 12px !important;
  border: none !important;
}

/* Override custom.css 44px touch targets for all forum elements */
@media (max-width: 991.98px) {
  .forum-container a,
  .forum-container button,
  .forum-container [role="button"],
  .forum-modal-overlay a,
  .forum-modal-overlay button,
  .forum-modal-overlay [role="button"],
  .forum-edit-modal a,
  .forum-edit-modal button,
  .forum-edit-modal [role="button"] {
    min-height: auto !important;
    min-width: auto !important;
  }

  .forum-container .form-control,
  .forum-container input,
  .forum-container select,
  .forum-container textarea,
  .forum-modal-overlay input,
  .forum-modal-overlay select,
  .forum-modal-overlay textarea,
  .forum-edit-modal input,
  .forum-edit-modal select,
  .forum-edit-modal textarea {
    min-height: auto !important;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .forum-category-cols {
    display: none;
  }

  .forum-subcategory-head,
  .forum-subcategory-row {
    grid-template-columns: 30px 1fr 50px 50px;
  }

  .forum-subcategory-head span:last-child,
  .forum-subcategory-row .forum-sub-lastpost {
    display: none;
  }

  .forum-thread-head,
  .forum-thread-row {
    grid-template-columns: 1fr 50px;
  }

  .forum-mod-mode .forum-thread-head,
  .forum-mod-mode .forum-thread-row {
    grid-template-columns: 20px 1fr 50px;
  }

  .forum-thread-head span:last-child,
  .forum-thread-row .forum-thread-lastpost {
    display: none;
  }

  .forum-post {
    flex-direction: column;
  }

  .forum-post-sidebar {
    width: 100%;
    min-width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-right: none;
    border-bottom: 1px solid var(--df-border);
    text-align: left;
  }

  .forum-post-sidebar .forum-post-avatar-link {
    flex-shrink: 0;
    order: -1;
  }

  .forum-post-sidebar .forum-post-avatar {
    width: 36px;
    height: 36px;
    margin: 0;
  }

  .forum-post-sidebar .forum-post-username {
    font-size: 12px;
  }

  .forum-post-sidebar .forum-post-title {
    text-align: left;
    font-size: 9px;
    margin: 0;
  }

  .forum-post-sidebar .forum-post-guild {
    display: none;
  }

  .forum-post-footer {
    flex-wrap: wrap;
    gap: 4px;
  }

  .forum-post-actions {
    flex-wrap: wrap;
  }

  .forum-post-action-btn {
    padding: 4px 6px;
    font-size: 12px;
  }

  .forum-btn {
    padding: 6px 14px;
    font-size: 11px;
  }

  .forum-btn-small {
    padding: 4px 8px;
    font-size: 10px;
  }

  .forum-btn-xs {
    padding: 3px 6px;
    font-size: 9px;
  }

  .forum-container {
    padding: 0 8px;
  }
}

/* =====================================================
   FORUM QUOTE PREVIEW (static blocks above editor)
   ===================================================== */

.forum-quote-preview {
  background: rgba(0, 0, 0, 0.25);
  border-left: 3px solid var(--df-gold);
  border-radius: 0 4px 4px 0;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--df-text);
  position: relative;
}

.forum-quote-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.forum-quote-preview-header cite {
  font-size: 11px;
  color: var(--df-gold);
  font-style: normal;
  font-weight: 600;
}

.forum-quote-preview-remove {
  background: none;
  border: none;
  color: var(--df-text-dim, #6a5d4d);
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}

.forum-quote-preview-remove:hover {
  color: #e53e3e;
}

.forum-quote-preview-body {
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  opacity: 0.85;
}

/* Staff-colored quote previews */
.forum-quote-preview-admin {
  background: rgba(255, 215, 0, 0.15);
  border-left-color: #FFD700;
}

.forum-quote-preview-admin cite {
  color: #FFD700;
}

.forum-quote-preview-gmod {
  background: rgba(62, 207, 62, 0.12);
  border-left-color: #3ECF3E;
}

.forum-quote-preview-gmod cite {
  color: #3ECF3E;
}

.forum-quote-preview-fmod {
  background: rgba(178, 102, 255, 0.12);
  border-left-color: #B266FF;
}

.forum-quote-preview-fmod cite {
  color: #B266FF;
}

.forum-quote-preview-pmod {
  background: rgba(232, 155, 62, 0.12);
  border-left-color: #E89B3E;
}

.forum-quote-preview-pmod cite {
  color: #E89B3E;
}

#forumQuotePreview:empty {
  display: none;
}

#forumQuotePreview {
  margin-bottom: 10px;
}

/* =====================================================
   QUILL EDITOR — DARK FANTASY OVERRIDES
   ===================================================== */

/* Toolbar */
.ql-toolbar.ql-snow {
  background: var(--df-bg-deep) !important;
  border: 1px solid var(--df-border-bright) !important;
  border-bottom: none !important;
  border-radius: 4px 4px 0 0 !important;
}

.ql-toolbar.ql-snow .ql-stroke {
  stroke: var(--df-text) !important;
}

.ql-toolbar.ql-snow .ql-fill {
  fill: var(--df-text) !important;
}

.ql-toolbar.ql-snow .ql-picker-label {
  color: var(--df-text) !important;
}

.ql-toolbar.ql-snow button:hover .ql-stroke,
.ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke {
  stroke: var(--df-gold) !important;
}

.ql-toolbar.ql-snow button:hover .ql-fill,
.ql-toolbar.ql-snow .ql-picker-label:hover .ql-fill {
  fill: var(--df-gold) !important;
}

.ql-toolbar.ql-snow button:hover,
.ql-toolbar.ql-snow .ql-picker-label:hover {
  color: var(--df-gold) !important;
}

.ql-toolbar.ql-snow button.ql-active .ql-stroke {
  stroke: var(--df-gold-light) !important;
}

.ql-toolbar.ql-snow button.ql-active .ql-fill {
  fill: var(--df-gold-light) !important;
}

.ql-toolbar.ql-snow button.ql-active {
  color: var(--df-gold-light) !important;
}

/* Picker dropdowns */
.ql-toolbar.ql-snow .ql-picker-options {
  background: var(--df-bg-card) !important;
  border: 1px solid var(--df-border-bright) !important;
  border-radius: 3px !important;
}

.ql-toolbar.ql-snow .ql-picker-item {
  color: var(--df-text) !important;
}

.ql-toolbar.ql-snow .ql-picker-item:hover {
  color: var(--df-gold) !important;
}

/* Editor container */
.ql-container.ql-snow {
  background: var(--df-bg-deep) !important;
  border: 1px solid var(--df-border-bright) !important;
  border-radius: 0 0 4px 4px !important;
  color: var(--df-text-bright) !important;
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: 14px !important;
  min-height: 150px !important;
}

/* Ensure Quill editors fill their parent width in forum forms */
.forum-reply-box .ql-toolbar.ql-snow,
.forum-reply-box .ql-container.ql-snow,
.forum-edit-modal .ql-toolbar.ql-snow,
.forum-edit-modal .ql-container.ql-snow,
.forum-new-thread-form .ql-toolbar.ql-snow,
.forum-new-thread-form .ql-container.ql-snow {
  width: 100% !important;
  box-sizing: border-box !important;
}

.ql-editor {
  min-height: 150px !important;
  color: var(--df-text-bright) !important;
}

.ql-editor.ql-blank::before {
  color: var(--df-text-dim, #6a5d4d) !important;
  font-style: italic !important;
}

/* Blockquotes in editor — merge consecutive blockquotes visually */
.ql-editor blockquote {
  border-left: 3px solid var(--df-gold-dark) !important;
  background: rgba(0, 0, 0, 0.25) !important;
  padding: 4px 12px !important;
  margin: 0 !important;
  color: var(--df-text) !important;
  border-radius: 0 !important;
}

.ql-editor blockquote:first-child,
.ql-editor :not(blockquote)+blockquote {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-radius: 0 4px 0 0 !important;
}

.ql-editor blockquote:last-child,
.ql-editor blockquote:not(:has(+ blockquote)) {
  margin-bottom: 8px !important;
  padding-bottom: 8px !important;
  border-radius: 0 0 4px 0 !important;
}

/* Single blockquote (first and last) */
.ql-editor blockquote:first-child:last-child,
.ql-editor :not(blockquote)+blockquote:not(:has(+ blockquote)) {
  border-radius: 0 4px 4px 0 !important;
}

/* Heading above Quill toolbar — clear separation */
.forum-reply-heading {
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--df-border) !important;
}

/* Code blocks in editor */
.ql-editor pre.ql-syntax {
  background: var(--df-bg-deepest) !important;
  border: 1px solid var(--df-border) !important;
  color: var(--df-gold-light) !important;
  border-radius: 3px !important;
  padding: 8px !important;
}

/* Links in editor */
.ql-editor a {
  color: var(--df-gold) !important;
}

/* Snow theme tooltip */
.ql-snow .ql-tooltip {
  background: var(--df-bg-card) !important;
  border: 1px solid var(--df-border-bright) !important;
  color: var(--df-text-bright) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.ql-snow .ql-tooltip input[type="text"] {
  background: var(--df-bg-deep) !important;
  border: 1px solid var(--df-border) !important;
  color: var(--df-text-bright) !important;
}

.ql-snow .ql-tooltip a.ql-action,
.ql-snow .ql-tooltip a.ql-remove {
  color: var(--df-gold) !important;
}

/* Quill alignment dropdown */
.ql-snow .ql-picker.ql-align .ql-picker-label,
.ql-snow .ql-picker.ql-align .ql-picker-item {
  color: var(--df-text-dim) !important;
}

.ql-snow .ql-picker.ql-align .ql-picker-label:hover,
.ql-snow .ql-picker.ql-align .ql-picker-item:hover {
  color: var(--df-gold) !important;
}

.ql-snow .ql-picker.ql-align .ql-picker-label svg .ql-stroke,
.ql-snow .ql-picker.ql-align .ql-picker-item svg .ql-stroke {
  stroke: currentColor !important;
}

/* Edit modal Quill sizing */
.forum-edit-modal .ql-container.ql-snow {
  min-height: 120px !important;
  max-height: 400px !important;
  overflow-y: auto !important;
}

/* Emoji toolbar button */
.ql-toolbar.ql-snow .ql-emoji {
  font-size: 16px !important;
  line-height: 24px !important;
  width: 28px !important;
  padding: 0 !important;
  text-align: center !important;
  cursor: pointer !important;
  filter: grayscale(0.3);
  transition: filter 0.15s;
}

.ql-toolbar.ql-snow .ql-emoji:hover {
  filter: grayscale(0) brightness(1.15);
}

/* Smiley Picker Popup — positioned below the emoji toolbar button */
.forum-smiley-picker {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1060;
  width: 320px;
  background: var(--df-bg-card, #1a1410);
  border: 1px solid var(--df-border-bright, #5a4a35);
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  margin-top: 4px;
}

.forum-smiley-tabs {
  display: flex;
  border-bottom: 1px solid var(--df-border, #3a2e22);
  padding: 0;
}

.forum-smiley-tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--df-text-dim, #6a5d4d);
  font-size: 11px;
  font-family: 'Cinzel', serif;
  padding: 7px 4px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  border-bottom: 2px solid transparent;
}

.forum-smiley-tab:hover {
  color: var(--df-text-bright, #e8dcc8);
}

.forum-smiley-tab.active {
  color: var(--df-gold, #c9a84c);
  border-bottom-color: var(--df-gold, #c9a84c);
}

.forum-smiley-grid {
  display: none;
  padding: 8px;
  gap: 2px;
  flex-wrap: wrap;
  max-height: 180px;
  overflow-y: auto;
}

.forum-smiley-grid.active {
  display: flex;
}

.forum-smiley-btn {
  width: 34px;
  height: 34px;
  font-size: 20px;
  line-height: 34px;
  text-align: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
}

.forum-smiley-btn:hover {
  background: rgba(201, 168, 76, 0.12);
  border-color: var(--df-border-bright, #5a4a35);
  transform: scale(1.15);
}

/* Smiley picker scrollbar */
.forum-smiley-grid::-webkit-scrollbar {
  width: 6px;
}

.forum-smiley-grid::-webkit-scrollbar-track {
  background: transparent;
}

.forum-smiley-grid::-webkit-scrollbar-thumb {
  background: var(--df-border, #3a2e22);
  border-radius: 3px;
}

.forum-smiley-grid::-webkit-scrollbar-thumb:hover {
  background: var(--df-gold-dark, #8b7332);
}

/* =====================================================
   FORUM NEW POST NOTIFICATION BAR
   ===================================================== */

.forum-new-post-bar {
  position: sticky;
  top: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--df-bg-deep) 0%, var(--df-bg-card) 100%);
  border-bottom: 2px solid var(--df-gold-dark);
  color: var(--df-text-bright);
  font-size: 13px;
  font-family: 'Crimson Text', Georgia, serif;
  animation: forumNewPostBarSlide 0.3s ease-out;
}

@keyframes forumNewPostBarSlide {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

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

.forum-new-post-bar a {
  color: var(--df-gold) !important;
  text-decoration: underline;
  font-weight: 600;
}

.forum-new-post-bar a:hover {
  color: var(--df-gold-light) !important;
}

.forum-new-post-bar-close {
  background: none;
  border: none;
  color: var(--df-text);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.forum-new-post-bar-close:hover {
  color: var(--df-text-bright);
}

/* =====================================================
   FORUM POST — NEW POST HIGHLIGHT
   ===================================================== */

.forum-post.forum-post-new {
  animation: forumPostHighlight 2s ease-out;
}

@keyframes forumPostHighlight {
  0% {
    box-shadow: 0 0 0 3px var(--df-gold), 0 0 15px rgba(201, 168, 76, 0.3);
  }

  100% {
    box-shadow: none;
  }
}

/* =====================================================
   REDUCED MOTION
   ===================================================== */
/* =====================================================
   RULES PAGE
   ===================================================== */

.rules-section-body {
  padding: 12px 15px;
  color: var(--df-text);
  font-size: 12px;
  line-height: 1.7;
}

.rules-section-body>p {
  margin: 0 0 10px 0;
}

.rules-section-body>p:last-child {
  margin-bottom: 0;
}

.rules-preface {
  color: var(--df-text-dim);
  font-style: italic;
  font-size: 11px;
  margin: 0 0 12px 0 !important;
}

.rules-list {
  margin: 0;
  padding-left: 28px;
  list-style: none;
  counter-reset: rules-counter;
  float: none !important;
  width: 100% !important;
}

.rules-list>li {
  counter-increment: rules-counter;
  position: relative;
  margin-bottom: 10px;
  padding-left: 4px;
  float: none !important;
  width: auto !important;
}

.rules-list>li::before {
  content: counter(rules-counter) ".";
  position: absolute;
  left: -24px;
  width: 20px;
  text-align: right;
  color: var(--df-gold);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 12px;
}

.rules-list>li:last-child {
  margin-bottom: 0;
}

.rules-list ul {
  margin: 4px 0 0 0;
  padding-left: 16px;
  list-style: none;
  float: none !important;
  width: 100% !important;
}

.rules-list ul li {
  position: relative;
  padding-left: 12px;
  margin-top: 3px;
  color: var(--df-text-dim);
  font-size: 11px;
  float: none !important;
  width: auto !important;
}

.rules-list ul li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--df-gold-dim);
}

.rules-section-body a.forum-link {
  color: var(--df-gold);
  text-decoration: underline;
}

.rules-section-body a.forum-link:hover {
  color: var(--df-text-bright);
}

.rules-offences-footer {
  padding: 10px 15px;
  background: var(--df-bg-deep);
  border-top: 1px solid var(--df-border);
}

.rules-offences-title {
  font-family: 'Cinzel', serif;
  color: var(--df-gold);
  font-size: 11px;
  margin-bottom: 8px;
}

.rules-offences-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px 20px;
}

.rules-offences-grid span {
  font-size: 11px;
  color: var(--df-text-dim);
  padding: 2px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.rules-offences-grid span:nth-last-child(-n+2) {
  border-bottom: none;
}

@media (max-width: 600px) {
  .rules-offences-grid {
    grid-template-columns: 1fr;
  }

  .rules-offences-grid span:last-child {
    border-bottom: none;
  }
}

/* =====================================================
   CONTACT PAGE
   ===================================================== */

.contact-methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.contact-method-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--df-bg-deep);
  border: 1px solid var(--df-border);
  border-radius: 4px;
  transition: border-color 0.2s;
}

.contact-method-card:hover {
  border-color: var(--df-gold-dim);
}

.contact-method-icon {
  font-size: 22px;
  color: var(--df-gold);
  min-width: 30px;
  text-align: center;
  padding-top: 2px;
}

.contact-method-info {
  flex: 1;
}

.contact-method-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  color: var(--df-gold);
  margin-bottom: 4px;
}

.contact-method-desc {
  font-size: 11px;
  color: var(--df-text);
  line-height: 1.5;
}

.contact-method-desc .forum-link {
  color: var(--df-gold);
  text-decoration: underline;
}

@media (max-width: 600px) {
  .contact-methods-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   FIREWORKS — Fixed overlay + Fantasy gold colors
   ===================================================== */
.pyro {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 9999 !important;
  pointer-events: none !important;
}

.pyro>.before,
.pyro>.after {
  box-shadow:
    -120px -218px #c9a84c,
    248px -16px #FFD700,
    190px 16px #FF8C00,
    -113px -308px #FFF8DC,
    -109px -287px #B87333,
    -50px -313px #ECC94B,
    226px -31px #D4A017,
    180px -351px #c9a84c,
    -12px -338px #FFD700,
    220px -388px #FF8C00,
    -69px -27px #FFF8DC,
    -111px -339px #c9a84c,
    155px -237px #FFD700,
    -152px -380px #B87333,
    -50px -37px #ECC94B,
    -95px -175px #D4A017,
    -88px 10px #c9a84c,
    112px -309px #FFD700,
    69px -415px #FF8C00,
    168px -100px #FFF8DC,
    -244px 24px #B87333,
    97px -325px #ECC94B,
    -211px -182px #D4A017,
    236px -126px #c9a84c,
    140px -196px #FFD700,
    125px -175px #FF8C00,
    118px -381px #FFF8DC,
    144px -111px #B87333,
    36px -78px #ECC94B,
    -63px -196px #D4A017,
    -218px -227px #c9a84c,
    -134px -377px #FFD700,
    -36px -412px #FF8C00,
    209px -106px #FFF8DC,
    91px -278px #B87333,
    -22px -191px #ECC94B,
    139px -392px #D4A017,
    56px -2px #c9a84c,
    -156px -276px #FFD700,
    -163px -233px #FF8C00,
    -238px -346px #FFF8DC,
    62px -363px #B87333,
    244px -170px #ECC94B,
    224px -142px #D4A017,
    141px -208px #c9a84c,
    211px -285px #FFD700,
    181px -128px #FF8C00,
    90px -123px #FFF8DC,
    189px 70px #B87333,
    -18px -383px #ECC94B,
    100px -6px #D4A017 !important;
}

/* =====================================================
   NAV — Upgrade link gold accent + GE button
   ===================================================== */

/* Upgrade link — gold accent */
.rs-nav-upgrade {
  color: var(--df-gold) !important;
}

.rs-nav-upgrade:hover {
  color: var(--df-gold-light) !important;
  text-shadow: 0 0 8px rgba(201, 168, 76, 0.3) !important;
}

/* =====================================================
   FORUM — Profile Page
   ===================================================== */

.forum-profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
}

.forum-profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid var(--df-gold);
  object-fit: cover;
  flex-shrink: 0;
}

.forum-profile-info {
  flex: 1;
  min-width: 0;
}

.forum-profile-name {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  color: var(--df-gold);
  line-height: 1.3;
}

.forum-profile-rank {
  margin-top: 2px;
}

.forum-profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--df-text-dim);
  margin-top: 6px;
}

.forum-profile-stats strong {
  color: var(--df-text-bright);
}

/* =====================================================
   FORUM — Post Sidebar Avatar
   ===================================================== */

.forum-post-avatar {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  border: 2px solid var(--df-border-bright);
  object-fit: contain;
  background: var(--df-bg-deep);
  margin: 4px 0;
}

.forum-post-avatar-link {
  display: block;
}

.forum-post-avatar-link:hover .forum-post-avatar {
  border-color: var(--df-gold);
}

a.forum-post-username {
  text-decoration: none;
}

a.forum-post-username:hover {
  text-decoration: underline;
}

/* =====================================================
   FORUM — Profile Page Stat Cards & Thread Grid
   ===================================================== */
.forum-profile-sep {
  color: var(--df-text-dim);
  margin: 0 6px;
  font-size: 11px;
}

.forum-profile-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0 16px 16px;
}

.forum-profile-stat-card {
  background: var(--df-bg-deep);
  border: 1px solid var(--df-border);
  border-radius: 6px;
  padding: 12px 10px;
  text-align: center;
}

.forum-profile-stat-icon {
  font-size: 14px;
  color: var(--df-text-dim);
  margin-bottom: 4px;
}

.forum-profile-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--df-text-dim);
  margin-bottom: 2px;
}

.forum-profile-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--df-gold);
}

/* Forum Profile - Card List */
.fp-card-list {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Thread Cards */
.fp-thread-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--df-bg-deep);
  border: 1px solid rgba(201, 168, 76, 0.1);
  border-radius: 4px;
  text-decoration: none;
  color: var(--df-text);
  transition: background 0.15s, border-color 0.15s;
}

.fp-thread-card:hover {
  background: var(--df-bg-hover);
  border-color: rgba(201, 168, 76, 0.25);
  text-decoration: none;
  color: var(--df-text);
}

.fp-thread-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 168, 76, 0.08);
  border-radius: 4px;
  color: var(--df-gold);
  font-size: 14px;
}

.fp-thread-body {
  flex: 1;
  min-width: 0;
}

.fp-thread-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--df-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.fp-thread-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: 10px;
  color: var(--df-text-dim);
}

.fp-thread-meta i {
  margin-right: 2px;
  font-size: 9px;
}

.fp-thread-stats {
  flex-shrink: 0;
  display: flex;
  gap: 12px;
  text-align: center;
}

.fp-thread-stat-num {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--df-text-bright);
  font-family: 'Cinzel', serif;
  line-height: 1.2;
}

.fp-thread-stat-label {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--df-text-dim);
}

/* Post Cards */
.fp-post-card {
  display: block;
  padding: 10px 12px;
  background: var(--df-bg-deep);
  border: 1px solid rgba(201, 168, 76, 0.1);
  border-radius: 4px;
  text-decoration: none;
  color: var(--df-text);
  transition: background 0.15s, border-color 0.15s;
}

.fp-post-card:hover {
  background: var(--df-bg-hover);
  border-color: rgba(201, 168, 76, 0.25);
  text-decoration: none;
  color: var(--df-text);
}

.fp-post-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px;
}

.fp-post-thread-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--df-gold);
  line-height: 1.3;
}

.fp-post-thread-title i {
  font-size: 11px;
  margin-right: 3px;
  color: var(--df-text-dim);
}

.fp-post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--df-text-dim);
}

.fp-post-meta i {
  margin-right: 2px;
  font-size: 9px;
}

.fp-post-meta .fa-heart {
  color: var(--df-gold);
}

.fp-post-excerpt {
  font-size: 12px;
  color: var(--df-text-dim);
  margin-top: 6px;
  line-height: 1.5;
  max-height: 38px;
  overflow: hidden;
  border-left: 2px solid rgba(201, 168, 76, 0.2);
  padding-left: 8px;
}

/* Shared pill */
.forum-profile-post-pill {
  display: inline-block;
  background: rgba(201, 168, 76, 0.06);
  border: 1px solid var(--df-border);
  border-radius: 3px;
  padding: 0 5px;
  font-size: 10px;
  line-height: 16px;
  color: var(--df-text-dim);
}

@media (max-width: 600px) {
  .forum-profile-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fp-thread-card {
    flex-wrap: wrap;
  }

  .fp-thread-icon {
    display: none;
  }

  .fp-thread-stats {
    gap: 8px;
  }

  .fp-post-header {
    flex-direction: column;
  }
}

/* ===== ACCOUNT SETTINGS TABS ===== */
.settings-tabs {
  border-bottom: 1px solid var(--df-border) !important;
  margin-bottom: 15px;
}

.settings-tabs>li>a {
  color: var(--df-text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 3px 3px 0 0 !important;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  padding: 8px 14px;
  transition: color 0.2s, border-color 0.2s;
}

.settings-tabs>li>a:hover {
  color: var(--df-gold-light) !important;
  border-color: var(--df-border) var(--df-border) transparent !important;
  background: var(--df-bg-deep) !important;
}

.settings-tabs>li.active>a,
.settings-tabs>li.active>a:hover,
.settings-tabs>li.active>a:focus {
  color: var(--df-gold-light) !important;
  background: var(--df-bg-card) !important;
  border: 1px solid var(--df-border) !important;
  border-bottom-color: var(--df-bg-card) !important;
}

.settings-tab-content {
  min-height: 200px;
}

.settings-section {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--df-border);
}

.settings-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.settings-label {
  display: block !important;
  color: var(--df-gold) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.5px !important;
}

.settings-sublabel {
  display: block;
  color: var(--df-text-bright) !important;
  font-size: 12px;
  margin-bottom: 5px;
}

.settings-hint {
  color: var(--df-text-dim) !important;
  font-size: 11px;
  margin-top: 4px;
  margin-bottom: 0;
}

.settings-hint a {
  color: var(--df-gold) !important;
}

.settings-input {
  margin-bottom: 8px !important;
}

.settings-email-status {
  margin-bottom: 8px;
  font-size: 13px;
}

.settings-email-status .btn {
  margin-left: 8px;
}

.settings-sig-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

/* Signature Quill editor styling */
#sigQuillEditor {
  background: var(--df-bg-deep) !important;
  color: var(--df-text-bright) !important;
  border: 1px solid var(--df-border) !important;
  border-radius: 0 0 3px 3px;
}

#sigEditorContainer .ql-toolbar {
  background: var(--df-bg-mid) !important;
  border: 1px solid var(--df-border) !important;
  border-bottom: none !important;
  border-radius: 3px 3px 0 0;
}

#sigEditorContainer .ql-toolbar .ql-stroke {
  stroke: var(--df-text) !important;
}

#sigEditorContainer .ql-toolbar .ql-fill {
  fill: var(--df-text) !important;
}

#sigEditorContainer .ql-toolbar .ql-picker-label {
  color: var(--df-text) !important;
}

#sigEditorContainer .ql-toolbar button:hover .ql-stroke,
#sigEditorContainer .ql-toolbar .ql-active .ql-stroke {
  stroke: var(--df-gold-light) !important;
}

#sigEditorContainer .ql-toolbar button:hover .ql-fill,
#sigEditorContainer .ql-toolbar .ql-active .ql-fill {
  fill: var(--df-gold-light) !important;
}

/* ===== FORUM POST SIGNATURES ===== */
.forum-post-signature {
  margin-top: 12px;
}

.forum-signature-divider {
  border: none;
  border-top: 1px solid var(--df-border);
  margin: 8px 0;
}

.forum-signature-content {
  color: var(--df-text-dim);
  font-size: 11px;
  line-height: 1.5;
  max-height: 80px;
  overflow: hidden;
  opacity: 0.7;
}

.forum-signature-content a {
  color: var(--df-gold);
}

/* ===== RANK ICONS ===== */
i.rank-icon {
  font-size: 10px;
  margin-right: 0;
  line-height: 1;
  vertical-align: baseline;
  position: relative;
  top: -1px;
}

i.rank-icon.rank-icon-lg {
  font-size: 12px;
  margin-right: 0;
}

/* ===== CLAN RANK ICONS ===== */
img.clan-rank-icon {
  width: 11px !important;
  height: 11px !important;
  vertical-align: baseline !important;
  margin-right: 0;
  image-rendering: pixelated;
}

/* ===== STAFF PAGE ===== */
.staff-tier-blurb {
  margin: 0 0 12px;
  font-family: 'Crimson Text', serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--df-text-dim);
  font-style: italic;
}

.staff-user-grid {
  /* no flex/grid — block stacking avoids layout conflicts */
}

.staff-user-card {
  display: block;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--df-bg-deep);
  border: 1px solid var(--df-border);
  border-radius: 6px;
  transition: all 0.2s ease;
  text-decoration: none !important;
  color: inherit !important;
  overflow: hidden;
}

.staff-user-card-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.staff-user-card:hover {
  background: var(--df-bg-mid);
  border-color: var(--df-border-bright);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

a.staff-user-card:hover {
  text-decoration: none !important;
}

.staff-user-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--df-border);
  overflow: visible;
}

.staff-user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--df-bg-deepest);
}

.staff-online-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #555;
  border: 2px solid var(--df-bg-deep);
}

.staff-online-dot.online {
  background: #3ECF3E;
  box-shadow: 0 0 6px rgba(62, 207, 62, 0.6);
  animation: staffPulse 2s ease-in-out infinite;
}

@keyframes staffPulse {

  0%,
  100% {
    box-shadow: 0 0 6px rgba(62, 207, 62, 0.6);
  }

  50% {
    box-shadow: 0 0 12px rgba(62, 207, 62, 0.9);
  }
}

.staff-user-info {
  min-width: 0;
  flex: 1;
}

.staff-user-name {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-user-badges {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}

.staff-user-status {
  font-size: 11px;
  color: var(--df-text-dim);
  margin-top: 2px;
}

.staff-user-status.online {
  color: #3ECF3E;
}

/* ── Vexillum mini icons in route lists ── */
.rs-route-vex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
  font-size: 10px;
}

/* ── Travel method text badges ── */
.tm-route-badge,
.rs-travel-route-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.tm-route-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
}

.rs-travel-route-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  margin-right: 6px;
}

/* Staff Online Players modal */
#staffOnlinePlayers .modal-body,
#staffOnlinePlayers .table,
#staffOnlinePlayers .table th,
#staffOnlinePlayers .table td,
#staffOnlinePlayers .table td span:not([class*="forum-rank-"]),
#staffOnlinePlayers .table td i:not(.fa-crown):not(.fa-shield-alt) {
  color: #c4b48a !important;
}

#staffOnlinePlayers .table th {
  color: #f0d878 !important;
  border-bottom-color: rgba(201, 168, 76, 0.18) !important;
}

#staffOnlinePlayers .table td {
  border-top-color: rgba(201, 168, 76, 0.18) !important;
}

#staffOnlinePlayers .table-hover>tbody>tr:hover>td {
  background-color: rgba(232, 220, 196, 0.06) !important;
}

#staffOnlinePlayers .text-muted {
  color: rgba(201, 168, 76, 0.45) !important;
}

#staffOnlinePlayers .form-control {
  background: #252014 !important;
  border-color: rgba(201, 168, 76, 0.18) !important;
  color: #c4b48a !important;
}

#staffOnlinePlayers .form-control::placeholder {
  color: rgba(201, 168, 76, 0.4) !important;
}

#staffOnlinePlayers .form-control::-webkit-input-placeholder {
  color: rgba(201, 168, 76, 0.4) !important;
}

#staffOnlinePlayers .form-control::-moz-placeholder {
  color: rgba(201, 168, 76, 0.4) !important;
  opacity: 1 !important;
}

#staffOnlinePlayers .pagination>li>a {
  background: #252014 !important;
  border-color: rgba(201, 168, 76, 0.18) !important;
  color: #c4b48a !important;
}

#staffOnlinePlayers .pagination>li.active>a {
  background: #c9a84c !important;
  border-color: #c9a84c !important;
  color: #1a1a2e !important;
}

#staffOnlinePlayers .badge {
  color: #fff !important;
}

#staffOnlinePlayers .btn-default {
  background: #252014 !important;
  border-color: rgba(201, 168, 76, 0.18) !important;
  color: #c4b48a !important;
}

/* ═══════════════════════════════════════════════════════════════
   GUILD SETTINGS
   ═══════════════════════════════════════════════════════════════ */
/* Loot share button & dropdown */
.guild-lootshare-wrap {
  float: right;
  position: relative;
}

.guild-settings-btn {
  background: none;
  border: none;
  color: #8b6914;
  cursor: pointer;
  font-size: 13px;
  opacity: 0.5;
  padding: 0 4px;
  min-height: 0 !important;
  min-width: 0 !important;
}

.guild-settings-btn:hover {
  opacity: 1;
  color: #c4a882;
}

.guild-settings-btn.guild-lootshare-active {
  opacity: 1;
  color: #ffd700;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}

.guild-lootshare-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 100;
  background: var(--df-bg-card);
  border: 1px solid var(--df-border);
  border-radius: 3px;
  min-width: 110px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.guild-lootshare-option {
  padding: 4px 10px;
  font-size: 11px;
  color: #c0a070;
  cursor: pointer;
  white-space: nowrap;
}

.guild-lootshare-option:hover {
  background: var(--df-bg-surface);
  color: var(--df-gold);
}

.guild-lootshare-option.guild-lootshare-selected {
  color: #ffd700;
  font-weight: bold;
}

/* Roster table headers */
.guild-roster-headers {
  display: flex;
  padding: 2px 4px;
  border-bottom: 1px solid var(--df-border);
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.guild-roster-col {
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}

.guild-roster-col:hover {
  color: var(--df-gold);
}

.guild-roster-col.guild-sort-active {
  color: var(--df-gold);
}

.guild-col-rank {
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.guild-col-name {
  flex: 1;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guild-col-status {
  flex: 1;
  text-align: right;
  flex-shrink: 0;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sort arrow */
.guild-sort-arrow {
  font-size: 8px;
  margin-left: 2px;
}

/* Roster rows */
.guild-roster-row {
  display: flex;
  align-items: center;
  padding: 3px 4px;
  font-size: 11px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid #3d3020;
  border-radius: 2px;
  margin-bottom: 1px;
}

.guild-roster-row:hover {
  background: rgba(255, 255, 255, 0.1);
}

.guild-roster-row .guild-col-rank {
  display: flex;
  align-items: center;
  justify-content: center;
}

.guild-roster-row .guild-col-name {
  color: #c0a070;
}

.guild-roster-row .guild-col-status {
  font-size: 10px;
}

/* Friends/Ignores list — allow name to shrink so location text fits */
.rs-social-entry-name {
  flex-shrink: 1 !important;
  min-width: 40px !important;
}

#guildSettingsModal .nav-tabs>li>a {
  color: #888 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
}

#guildSettingsModal .nav-tabs>li.active>a,
#guildSettingsModal .nav-tabs>li>a:hover {
  color: #c4a882 !important;
  border-bottom-color: #8b6914 !important;
}

#guildSettingsModal .tab-content {
  background: #1e1812;
}

#guildSettingsModal .form-control {
  background: #2a2117 !important;
  color: #c0a070 !important;
  border: 1px solid #5c4a2e !important;
  font-size: 12px;
}

#guildSettingsModal label {
  font-weight: normal;
}

/* ═══════════════════════════════════════════════════════════════
   GUILD CITADEL & COFFERS
   ═══════════════════════════════════════════════════════════════ */
#guildCitadelModal .nav-tabs>li>a,
#guildCoffersModal .nav-tabs>li>a {
  color: #888 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
}

#guildCitadelModal .nav-tabs>li.active>a,
#guildCitadelModal .nav-tabs>li>a:hover,
#guildCoffersModal .nav-tabs>li.active>a,
#guildCoffersModal .nav-tabs>li>a:hover {
  color: #c4a882 !important;
  border-bottom-color: #8b6914 !important;
}

#guildCitadelModal .tab-content,
#guildCoffersModal .tab-content {
  background: #1e1812;
}

#guildCitadelModal .form-control,
#guildCoffersModal .form-control {
  background: #2a2117 !important;
  color: #c0a070 !important;
  border: 1px solid #5c4a2e !important;
  font-size: 12px;
}

.citadel-plot-btn {
  background: #2a2117 !important;
  border: 1px solid #5c4a2e !important;
  color: #c4a882 !important;
  transition: background 0.2s, border-color 0.2s;
}

.citadel-plot-btn:hover {
  background: #3a2e1e !important;
  border-color: #8b6914 !important;
  color: #f5c842 !important;
}

/* ═══════════════════════════════════════════════════════════════
   GUILD PAGES
   ═══════════════════════════════════════════════════════════════ */
.guild-list-row:hover {
  background: rgba(139, 105, 20, 0.08);
}

.guild-list-row a:hover {
  color: #f5c842 !important;
}

/* Guild Vexillum Configurator */

/* Modal body: sidebar + controls */
.gvex-modal-body {
  display: flex !important;
  gap: 16px;
  padding: 14px !important;
  max-height: 75vh;
  overflow-y: auto;
}

.gvex-sidebar {
  position: sticky;
  top: 0;
  flex: 0 0 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: #12100d;
  border: 1px solid #2a2117;
  border-radius: 6px;
  align-self: flex-start;
}

.gvex-controls {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gvex-section {
  background: #1a1410;
  border: 1px solid #2a2117;
  border-radius: 6px;
  padding: 10px;
}

.gvex-section-head {
  color: var(--df-gold);
  font-size: 11px;
  font-weight: bold;
  font-family: var(--df-font);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #2a2117;
}

.gvex-section-head i {
  width: 16px;
  text-align: center;
  margin-right: 4px;
  opacity: 0.7;
}

.gvex-section-row {
  display: flex;
  gap: 12px;
}

.gvex-section-row>.gvex-field {
  flex: 1;
  min-width: 0;
}

.gvex-field {
  margin-bottom: 8px;
}

.gvex-field:last-child {
  margin-bottom: 0;
}

.gvex-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.gvex-swatch {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid #5c4a2e;
  transition: border-color 0.2s, transform 0.15s;
}

.gvex-swatch:hover {
  transform: scale(1.15);
}

.gvex-swatch.active {
  border-color: #f5c842 !important;
  box-shadow: 0 0 6px rgba(245, 200, 66, 0.4);
}

.gvex-emblem-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #5c4a2e;
  border-radius: 4px;
  cursor: pointer;
  background: #2a2117;
  color: #c4a882;
  font-size: 13px;
  transition: border-color 0.2s, transform 0.15s;
}

.gvex-emblem-btn:hover {
  transform: scale(1.1);
  border-color: #8b6914;
  color: #f5c842;
}

.gvex-emblem-btn.active {
  border-color: #f5c842 !important;
  box-shadow: 0 0 6px rgba(245, 200, 66, 0.4);
  color: #f5c842;
}

.gvex-label {
  color: #c4a882;
  font-size: 10px;
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.gvex-select {
  width: 100%;
  background: #2a2117;
  color: #c4a882;
  border: 1px solid #5c4a2e;
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 12px;
  outline: none;
  cursor: pointer;
}

.gvex-select:focus {
  border-color: #8b6914;
}

.gvex-save-btn {
  background: linear-gradient(180deg, #8b6914, #6b500e);
  border: 1px solid #f5c842;
  color: #f5c842;
  padding: 6px 24px;
  font-size: 13px;
  border-radius: 3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.gvex-save-btn:hover {
  background: linear-gradient(180deg, #a07818, #8b6914);
  color: #fff;
}

.gs-gold-btn {
  background: linear-gradient(180deg, #8b6914, #6b500e);
  border: 1px solid #f5c842;
  color: #f5c842;
  padding: 4px 16px;
  font-size: 12px;
  border-radius: 3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.gs-gold-btn:hover,
.gs-gold-btn:focus {
  background: linear-gradient(180deg, #a07818, #8b6914);
  color: #fff;
}

/* Emblem icon grid — scrollable area of icon buttons */
.gvex-emblem-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 148px;
  overflow-y: auto;
  padding: 2px;
}

.gvex-emblem-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #3d3225;
  border-radius: 4px;
  cursor: pointer;
  background: #221d16;
  color: #9a8a6e;
  font-size: 14px;
  transition: border-color 0.2s, transform 0.15s, color 0.2s;
  position: relative;
}

.gvex-emblem-icon:hover {
  transform: scale(1.1);
  border-color: #8b6914;
  color: #f5c842;
  background: #2a2117;
}

.gvex-emblem-icon.active {
  border-color: #f5c842 !important;
  box-shadow: 0 0 6px rgba(245, 200, 66, 0.4);
  color: #f5c842;
  background: #2a2117;
}

.gvex-emblem-icon .gvex-none-x {
  font-size: 11px;
  color: #666;
  font-weight: bold;
}

/* Style icon grid */
.gvex-style-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.gvex-style-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 2px solid #3d3225;
  border-radius: 4px;
  cursor: pointer;
  background: #221d16;
  color: #9a8a6e;
  font-size: 11px;
  transition: border-color 0.2s, color 0.2s;
}

.gvex-style-btn i {
  font-size: 12px;
  width: 14px;
  text-align: center;
}

.gvex-style-btn:hover {
  border-color: #8b6914;
  color: #f5c842;
}

.gvex-style-btn.active {
  border-color: #f5c842 !important;
  box-shadow: 0 0 6px rgba(245, 200, 66, 0.4);
  color: #f5c842;
}

/* Effect icon grid */
.gvex-effect-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.gvex-effect-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 2px solid #3d3225;
  border-radius: 4px;
  cursor: pointer;
  background: #221d16;
  color: #9a8a6e;
  font-size: 11px;
  transition: border-color 0.2s, color 0.2s;
}

.gvex-effect-btn i {
  font-size: 12px;
  width: 14px;
  text-align: center;
}

.gvex-effect-btn:hover {
  border-color: #8b6914;
  color: #f5c842;
}

.gvex-effect-btn.active {
  border-color: #f5c842 !important;
  box-shadow: 0 0 6px rgba(245, 200, 66, 0.4);
  color: #f5c842;
}

/* Preview */
.gvex-preview {
  min-height: 100px;
  display: flex;
  justify-content: center;
}

.gvex-preview .vex-wrap {
  width: 72px;
  height: 96px;
  margin: 0 auto;
}

/* Responsive: stack on small screens */
@media (max-width: 600px) {
  .gvex-modal-body {
    flex-direction: column;
  }

  .gvex-sidebar {
    flex: 0 0 auto;
    flex-direction: row;
    position: static;
    gap: 10px;
    justify-content: center;
  }

  .gvex-sidebar .gvex-save-btn {
    width: auto;
    margin-top: 0;
  }
}

/* ═══ Banner 2-layer trim (accent color visible through clip-path) ═══ */
.vex-banner-trim {
  position: absolute;
  top: 11px;
  left: 4px;
  right: 4px;
  bottom: 2px;
  z-index: 2;
  overflow: visible;
  animation: vex-sway 4s ease-in-out infinite;
  transform-origin: top center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.vex-banner-inner {
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.vex-banner-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.12) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 20%, transparent 85%, rgba(0, 0, 0, 0.15) 100%);
  z-index: 1;
  pointer-events: none;
}

.vex-banner-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
      transparent 0px, transparent 6px,
      rgba(0, 0, 0, 0.04) 6px, rgba(0, 0, 0, 0.04) 7px,
      transparent 7px, transparent 13px,
      rgba(255, 255, 255, 0.03) 13px, rgba(255, 255, 255, 0.03) 14px);
  z-index: 1;
  pointer-events: none;
}

/* ═══ War Banner: thick ornamental rod ═══ */
.war-banner-rod {
  position: absolute;
  top: 5px;
  left: 0px;
  right: 0px;
  height: 6px;
  background: var(--fc-bar, linear-gradient(180deg, #d4b85c 0%, #b8a048 30%, #8b7340 60%, #b8a068 100%));
  border-radius: 3px;
  z-index: 4;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.war-banner-rod::before,
.war-banner-rod::after {
  content: '';
  position: absolute;
  top: -2px;
  width: 8px;
  height: 10px;
  background: var(--fc-cap, radial-gradient(circle, #e8c84c, #9a7e3c));
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(201, 168, 76, 0.4);
}

.war-banner-rod::before {
  left: -3px;
}

.war-banner-rod::after {
  right: -3px;
}

.war-banner {
  width: 140px;
  height: 100px;
}

.war-banner .vex-banner-trim {
  top: 13px;
  left: 2px;
  right: 2px;
}

.gvex-preview .war-banner {
  width: 160px;
  height: 115px;
}

/* ── Emblem multi-layout group ── */
.vex-emblem-group {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ── Preview sizing ── */
.gvex-preview .vex-banner-trim {}

.gvex-preview .war-banner {
  height: 100px;
}

/* ═══════════════════════════════════════════════════════════ */
/* GUILD BANNER EFFECTS (selectable)                           */
/* ═══════════════════════════════════════════════════════════ */

/* ── Base effect layers ── */
.vfx-glow {
  position: absolute;
  inset: -10px;
  border-radius: 6px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}

.vfx-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}

.vfx-particles {
  position: absolute;
  inset: -12px;
  z-index: 7;
  pointer-events: none;
  overflow: visible;
}

.vfx-p {
  position: absolute;
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  opacity: 0;
}

/* Particle positions */
.vfx-p-0 {
  left: 8%;
  bottom: 5%;
  animation-delay: 0s;
}

.vfx-p-1 {
  left: 22%;
  bottom: 12%;
  animation-delay: 0.45s;
}

.vfx-p-2 {
  left: 38%;
  bottom: 2%;
  animation-delay: 0.9s;
}

.vfx-p-3 {
  left: 52%;
  bottom: 8%;
  animation-delay: 1.35s;
}

.vfx-p-4 {
  left: 68%;
  bottom: 15%;
  animation-delay: 1.8s;
}

.vfx-p-5 {
  left: 82%;
  bottom: 3%;
  animation-delay: 2.25s;
}

.vfx-p-6 {
  left: 15%;
  bottom: 18%;
  animation-delay: 0.3s;
}

.vfx-p-7 {
  left: 45%;
  bottom: 0%;
  animation-delay: 0.75s;
}

.vfx-p-8 {
  left: 60%;
  bottom: 10%;
  animation-delay: 1.2s;
}

.vfx-p-9 {
  left: 75%;
  bottom: 6%;
  animation-delay: 1.65s;
}

.vfx-p-10 {
  left: 90%;
  bottom: 14%;
  animation-delay: 2.1s;
}

.vfx-p-11 {
  left: 32%;
  bottom: 8%;
  animation-delay: 2.55s;
}

/* ═══ Shared keyframes ═══ */
@keyframes vfx-rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0
  }

  10% {
    opacity: 1
  }

  60% {
    opacity: .7
  }

  100% {
    transform: translateY(-55px) scale(.2);
    opacity: 0
  }
}

@keyframes vfx-fall {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0
  }

  10% {
    opacity: .8
  }

  70% {
    opacity: .5
  }

  100% {
    transform: translateY(50px) scale(.3);
    opacity: 0
  }
}

@keyframes vfx-float {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0
  }

  15% {
    opacity: .7
  }

  50% {
    transform: translate(8px, -20px) scale(.8)
  }

  85% {
    opacity: .5
  }

  100% {
    transform: translate(-5px, -40px) scale(.3);
    opacity: 0
  }
}

@keyframes vfx-orbit {
  0% {
    transform: rotate(0deg) translateX(18px) rotate(0deg) scale(1);
    opacity: 0
  }

  10% {
    opacity: .8
  }

  90% {
    opacity: .6
  }

  100% {
    transform: rotate(360deg) translateX(18px) rotate(-360deg) scale(.5);
    opacity: 0
  }
}

@keyframes vfx-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: .6
  }

  50% {
    transform: scale(1.08);
    opacity: 1
  }
}

@keyframes vfx-flicker {

  0%,
  100% {
    opacity: .7
  }

  10% {
    opacity: 1
  }

  12% {
    opacity: .3
  }

  14% {
    opacity: 1
  }

  50% {
    opacity: .8
  }

  70% {
    opacity: 1
  }

  72% {
    opacity: .2
  }

  74% {
    opacity: .9
  }
}

@keyframes vfx-sweep {
  0% {
    left: -60%
  }

  100% {
    left: 120%
  }
}

@keyframes vfx-drift {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 0
  }

  20% {
    opacity: .4
  }

  80% {
    opacity: .3
  }

  100% {
    transform: translateX(15px) translateY(-30px);
    opacity: 0
  }
}

@keyframes vfx-shimmer {

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

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

@keyframes vfx-swirl {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 0
  }

  15% {
    opacity: .6
  }

  85% {
    opacity: .4
  }

  100% {
    transform: rotate(540deg) scale(.2);
    opacity: 0
  }
}

/* ═══ 1: Radiant Glow ═══ */
.vfx-1 .vfx-glow {
  opacity: 1;
  background: radial-gradient(ellipse, var(--vfx-p) 0%, transparent 70%);
  animation: vfx-pulse 2.5s ease-in-out infinite;
}

.vfx-1 .vfx-layer {
  opacity: 1;
}

.vfx-1 .vfx-layer::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -60%;
  width: 40%;
  height: 140%;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .2) 48%, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, .2) 52%, transparent 70%);
  animation: vfx-sweep 3.5s ease-in-out infinite;
}

.vfx-1 .vfx-p {
  background: var(--vfx-p);
  box-shadow: 0 0 4px var(--vfx-p);
  animation: vfx-rise 3.5s ease-out infinite;
}

.vfx-1 .vfx-p:nth-child(even) {
  background: var(--vfx-s);
  box-shadow: 0 0 4px var(--vfx-s);
}

/* ═══ 2: Embers ═══ */
.vfx-2 .vfx-glow {
  opacity: 1;
  background: radial-gradient(ellipse at 50% 80%, rgba(255, 100, 0, .35) 0%, transparent 65%);
  animation: vfx-pulse 2s ease-in-out infinite;
}

.vfx-2 .vfx-p {
  width: 2px;
  height: 4px;
  border-radius: 40%;
  background: var(--vfx-p);
  box-shadow: 0 0 5px var(--vfx-p), 0 0 10px rgba(255, 80, 0, .3);
  animation: vfx-rise 2.8s ease-out infinite;
}

.vfx-2 .vfx-p:nth-child(3n) {
  background: #ff6000;
  box-shadow: 0 0 5px #ff6000;
}

.vfx-2 .vfx-p:nth-child(3n+1) {
  width: 1px;
  height: 3px;
  background: #ffaa00;
  animation-duration: 3.2s;
}

/* ═══ 3: Frost ═══ */
.vfx-3 .vfx-glow {
  opacity: 1;
  background: radial-gradient(ellipse, rgba(100, 180, 255, .3) 0%, transparent 65%);
  animation: vfx-pulse 3s ease-in-out infinite;
}

.vfx-3 .vfx-p {
  background: #a0d4ff;
  box-shadow: 0 0 4px #80c0ff;
  animation: vfx-fall 4s ease-out infinite;
}

.vfx-3 .vfx-p:nth-child(even) {
  background: #e0f0ff;
  width: 2px;
  height: 2px;
  animation-duration: 4.5s;
}

.vfx-3 .vfx-p-0,
.vfx-3 .vfx-p-2,
.vfx-3 .vfx-p-4,
.vfx-3 .vfx-p-6,
.vfx-3 .vfx-p-8,
.vfx-3 .vfx-p-10 {
  top: 0;
  bottom: auto;
}

/* ═══ 4: Shadow Smoke ═══ */
.vfx-4 .vfx-glow {
  opacity: 1;
  background: radial-gradient(ellipse, rgba(60, 0, 80, .4) 0%, transparent 65%);
  animation: vfx-pulse 3s ease-in-out infinite;
}

.vfx-4 .vfx-p {
  width: 6px;
  height: 6px;
  background: rgba(40, 0, 60, .6);
  box-shadow: 0 0 8px rgba(80, 0, 120, .3);
  filter: blur(2px);
  animation: vfx-float 4s ease-out infinite;
}

.vfx-4 .vfx-p:nth-child(even) {
  width: 8px;
  height: 8px;
  background: rgba(20, 0, 30, .4);
  animation-duration: 5s;
}

/* ═══ 5: Holy Light ═══ */
.vfx-5 .vfx-glow {
  opacity: 1;
  inset: -14px;
  background: radial-gradient(ellipse, rgba(255, 255, 200, .45) 0%, rgba(255, 220, 100, .1) 50%, transparent 70%);
  animation: vfx-pulse 2s ease-in-out infinite;
}

.vfx-5 .vfx-layer {
  opacity: 1;
}

.vfx-5 .vfx-layer::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -60%;
  width: 40%;
  height: 140%;
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 180, .25) 45%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 180, .25) 55%, transparent 75%);
  animation: vfx-sweep 2.5s ease-in-out infinite;
}

.vfx-5 .vfx-p {
  background: #fff8d0;
  box-shadow: 0 0 6px #ffd700, 0 0 12px rgba(255, 215, 0, .3);
  animation: vfx-rise 3s ease-out infinite;
}

/* ═══ 6: Storm ═══ */
.vfx-6 .vfx-glow {
  opacity: 1;
  background: radial-gradient(ellipse, rgba(80, 140, 255, .35) 0%, transparent 65%);
  animation: vfx-flicker 1.5s ease-in-out infinite;
}

.vfx-6 .vfx-p {
  background: #80b0ff;
  box-shadow: 0 0 5px #4080ff, 0 0 10px rgba(60, 120, 255, .3);
  animation: vfx-rise 2.2s ease-out infinite;
}

.vfx-6 .vfx-p:nth-child(3n) {
  width: 1px;
  height: 8px;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 0 8px #80b0ff;
  animation: vfx-flicker .8s linear infinite;
  animation-delay: inherit;
}

/* ═══ 7: Blood Mist ═══ */
.vfx-7 .vfx-glow {
  opacity: 1;
  background: radial-gradient(ellipse, rgba(180, 0, 0, .35) 0%, rgba(100, 0, 0, .1) 55%, transparent 70%);
  animation: vfx-pulse 2.5s ease-in-out infinite;
}

.vfx-7 .vfx-p {
  width: 7px;
  height: 7px;
  background: rgba(180, 0, 0, .5);
  box-shadow: 0 0 6px rgba(200, 0, 0, .3);
  filter: blur(2px);
  animation: vfx-drift 4.5s ease-out infinite;
}

.vfx-7 .vfx-p:nth-child(even) {
  background: rgba(120, 0, 0, .4);
  width: 5px;
  height: 5px;
  animation-duration: 5s;
}

/* ═══ 8: Arcane ═══ */
.vfx-8 .vfx-glow {
  opacity: 1;
  background: radial-gradient(ellipse, rgba(160, 60, 255, .35) 0%, transparent 65%);
  animation: vfx-pulse 2.5s ease-in-out infinite;
}

.vfx-8 .vfx-p {
  background: var(--vfx-p);
  box-shadow: 0 0 5px var(--vfx-p), 0 0 10px rgba(160, 60, 255, .2);
  animation: vfx-orbit 3.5s linear infinite;
}

.vfx-8 .vfx-p:nth-child(even) {
  background: #e060ff;
  box-shadow: 0 0 5px #c040ff;
  animation-direction: reverse;
}

.vfx-8 .vfx-p {
  left: 50%;
  top: 50%;
}

/* ═══ 9: Inferno ═══ */
.vfx-9 .vfx-glow {
  opacity: 1;
  inset: -14px;
  background: radial-gradient(ellipse at 50% 90%, rgba(255, 80, 0, .5) 0%, rgba(255, 40, 0, .15) 45%, transparent 70%);
  animation: vfx-pulse 1.8s ease-in-out infinite;
}

.vfx-9 .vfx-layer {
  opacity: 1;
}

.vfx-9 .vfx-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(255, 60, 0, .12) 0%, transparent 40%);
  animation: vfx-pulse 1.5s ease-in-out infinite;
}

.vfx-9 .vfx-p {
  width: 3px;
  height: 6px;
  border-radius: 40%;
  background: #ff4000;
  box-shadow: 0 0 6px #ff6000, 0 0 14px rgba(255, 80, 0, .4);
  animation: vfx-rise 2s ease-out infinite;
}

.vfx-9 .vfx-p:nth-child(even) {
  background: #ffaa00;
  box-shadow: 0 0 5px #ff8800;
  width: 2px;
  height: 4px;
  animation-duration: 2.5s;
}

.vfx-9 .vfx-p:nth-child(3n) {
  background: #ff0000;
  animation-duration: 1.8s;
}

/* ═══ 10: Spectral ═══ */
.vfx-10 .vfx-glow {
  opacity: 1;
  background: radial-gradient(ellipse, rgba(60, 255, 120, .3) 0%, transparent 65%);
  animation: vfx-pulse 3s ease-in-out infinite;
}

.vfx-10 .vfx-p {
  width: 5px;
  height: 5px;
  background: rgba(80, 255, 140, .5);
  box-shadow: 0 0 6px rgba(60, 255, 120, .3);
  filter: blur(1px);
  animation: vfx-float 5s ease-out infinite;
}

.vfx-10 .vfx-p:nth-child(even) {
  background: rgba(120, 255, 180, .4);
  width: 4px;
  height: 4px;
  animation-duration: 5.5s;
  animation-direction: reverse;
}

/* ═══ 11: Divine ═══ */
.vfx-11 .vfx-glow {
  opacity: 1;
  inset: -16px;
  background: radial-gradient(ellipse, rgba(255, 215, 0, .5) 0%, rgba(255, 200, 60, .12) 50%, transparent 72%);
  animation: vfx-pulse 2s ease-in-out infinite;
}

.vfx-11 .vfx-layer {
  opacity: 1;
}

.vfx-11 .vfx-layer::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -60%;
  width: 35%;
  height: 140%;
  background: linear-gradient(105deg, transparent 28%, rgba(255, 215, 0, .2) 44%, rgba(255, 255, 255, .4) 50%, rgba(255, 215, 0, .2) 56%, transparent 72%);
  animation: vfx-sweep 2.8s ease-in-out infinite;
}

.vfx-11 .vfx-p {
  background: #ffd700;
  box-shadow: 0 0 6px #ffd700, 0 0 14px rgba(255, 215, 0, .4);
  animation: vfx-rise 3s ease-out infinite;
}

.vfx-11 .vfx-p:nth-child(even) {
  background: #fff8d0;
  box-shadow: 0 0 5px #ffeaa0;
}

/* ═══ 12: Void ═══ */
.vfx-12 .vfx-glow {
  opacity: 1;
  inset: -12px;
  background: radial-gradient(ellipse, rgba(20, 0, 40, .6) 0%, rgba(40, 0, 80, .15) 50%, transparent 70%);
  animation: vfx-pulse 3s ease-in-out infinite;
}

.vfx-12 .vfx-p {
  background: rgba(100, 0, 180, .7);
  box-shadow: 0 0 6px rgba(80, 0, 160, .4);
  animation: vfx-swirl 4s ease-in-out infinite;
}

.vfx-12 .vfx-p:nth-child(even) {
  background: rgba(40, 0, 80, .5);
  animation-direction: reverse;
  animation-duration: 5s;
}

.vfx-12 .vfx-p {
  left: 50%;
  top: 50%;
}

/* ═══ 13: Nature ═══ */
.vfx-13 .vfx-glow {
  opacity: 1;
  background: radial-gradient(ellipse, rgba(40, 180, 60, .3) 0%, transparent 65%);
  animation: vfx-pulse 3.5s ease-in-out infinite;
}

.vfx-13 .vfx-p {
  width: 4px;
  height: 4px;
  background: #40c040;
  box-shadow: 0 0 4px #30a030;
  animation: vfx-fall 4.5s ease-out infinite;
}

.vfx-13 .vfx-p:nth-child(3n) {
  background: #80e040;
  width: 3px;
  height: 5px;
  animation: vfx-float 5s ease-out infinite;
}

.vfx-13 .vfx-p:nth-child(3n+1) {
  background: #20a050;
  animation-duration: 5.5s;
}

.vfx-13 .vfx-p-0,
.vfx-13 .vfx-p-2,
.vfx-13 .vfx-p-4,
.vfx-13 .vfx-p-6,
.vfx-13 .vfx-p-8,
.vfx-13 .vfx-p-10 {
  top: 0;
  bottom: auto;
}

/* ═══ 14: Celestial ═══ */
.vfx-14 .vfx-glow {
  opacity: 1;
  inset: -14px;
  background: radial-gradient(ellipse, rgba(100, 120, 255, .35) 0%, rgba(60, 80, 200, .08) 55%, transparent 70%);
  animation: vfx-pulse 3s ease-in-out infinite;
}

.vfx-14 .vfx-layer {
  opacity: 1;
}

.vfx-14 .vfx-layer::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -60%;
  width: 35%;
  height: 140%;
  background: linear-gradient(105deg, transparent 30%, rgba(140, 160, 255, .2) 46%, rgba(200, 210, 255, .35) 50%, rgba(140, 160, 255, .2) 54%, transparent 70%);
  animation: vfx-sweep 4s ease-in-out infinite;
}

.vfx-14 .vfx-p {
  background: #c0d0ff;
  box-shadow: 0 0 4px #8090ff;
  animation: vfx-float 5s ease-out infinite;
}

.vfx-14 .vfx-p:nth-child(even) {
  background: #e0e8ff;
  width: 2px;
  height: 2px;
  animation-duration: 6s;
}

/* ═══ 15: Sandstorm ═══ */
.vfx-15 .vfx-glow {
  opacity: 1;
  background: radial-gradient(ellipse, rgba(200, 170, 100, .3) 0%, transparent 65%);
  animation: vfx-pulse 2.5s ease-in-out infinite;
}

.vfx-15 .vfx-p {
  width: 2px;
  height: 2px;
  background: #d4b878;
  box-shadow: 0 0 3px rgba(200, 170, 100, .4);
  animation: vfx-drift 3s ease-out infinite;
}

.vfx-15 .vfx-p:nth-child(even) {
  background: #c0a060;
  width: 3px;
  height: 1px;
  border-radius: 0;
  animation-duration: 3.5s;
}

.vfx-15 .vfx-p:nth-child(3n) {
  animation-direction: reverse;
}

/* ═══ 16: Toxic ═══ */
.vfx-16 .vfx-glow {
  opacity: 1;
  background: radial-gradient(ellipse at 50% 80%, rgba(80, 200, 0, .35) 0%, rgba(40, 120, 0, .1) 50%, transparent 70%);
  animation: vfx-pulse 2.5s ease-in-out infinite;
}

.vfx-16 .vfx-p {
  width: 5px;
  height: 5px;
  background: rgba(100, 220, 0, .5);
  box-shadow: 0 0 6px rgba(80, 200, 0, .3);
  filter: blur(1px);
  animation: vfx-rise 3.5s ease-out infinite;
}

.vfx-16 .vfx-p:nth-child(even) {
  background: rgba(60, 180, 0, .4);
  width: 4px;
  height: 4px;
  animation-duration: 4s;
}

.vfx-16 .vfx-p:nth-child(3n) {
  background: rgba(140, 255, 0, .6);
  width: 2px;
  height: 2px;
  filter: none;
}

/* ═══ 17: Crystal ═══ */
.vfx-17 .vfx-glow {
  opacity: 1;
  inset: -12px;
  background: radial-gradient(ellipse, rgba(180, 220, 255, .4) 0%, rgba(140, 180, 220, .1) 50%, transparent 70%);
  animation: vfx-pulse 2.5s ease-in-out infinite;
}

.vfx-17 .vfx-layer {
  opacity: 1;
}

.vfx-17 .vfx-layer::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -60%;
  width: 30%;
  height: 140%;
  background: linear-gradient(105deg, transparent 30%, rgba(200, 230, 255, .3) 46%, rgba(255, 255, 255, .5) 50%, rgba(200, 230, 255, .3) 54%, transparent 70%);
  animation: vfx-sweep 3s ease-in-out infinite;
}

.vfx-17 .vfx-p {
  background: #d0e8ff;
  box-shadow: 0 0 5px #a0c8ff, 0 0 10px rgba(140, 200, 255, .3);
  width: 2px;
  height: 5px;
  border-radius: 1px;
  animation: vfx-rise 4s ease-out infinite;
}

.vfx-17 .vfx-p:nth-child(even) {
  background: #e8f4ff;
  height: 3px;
  animation-duration: 4.5s;
}

/* ═══ 18: Runic ═══ */
.vfx-18 .vfx-glow {
  opacity: 1;
  background: radial-gradient(ellipse, rgba(0, 180, 200, .35) 0%, transparent 65%);
  animation: vfx-flicker 2s ease-in-out infinite;
}

.vfx-18 .vfx-layer {
  opacity: 1;
}

.vfx-18 .vfx-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0, 200, 220, .15);
  animation: vfx-pulse 2s ease-in-out infinite;
}

.vfx-18 .vfx-p {
  background: #00d4e0;
  box-shadow: 0 0 5px #00b8c8;
  animation: vfx-orbit 4s linear infinite;
}

.vfx-18 .vfx-p:nth-child(even) {
  background: #40e8f0;
  animation-direction: reverse;
  animation-duration: 5s;
}

.vfx-18 .vfx-p {
  left: 50%;
  top: 50%;
}

/* ═══ 19: Phoenix ═══ */
.vfx-19 .vfx-glow {
  opacity: 1;
  inset: -14px;
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 120, 0, .45) 0%, rgba(255, 60, 0, .1) 50%, transparent 70%);
  animation: vfx-pulse 2s ease-in-out infinite;
}

.vfx-19 .vfx-layer {
  opacity: 1;
}

.vfx-19 .vfx-layer::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -60%;
  width: 40%;
  height: 140%;
  background: linear-gradient(105deg, transparent 28%, rgba(255, 180, 0, .2) 44%, rgba(255, 255, 200, .4) 50%, rgba(255, 180, 0, .2) 56%, transparent 72%);
  animation: vfx-sweep 2.5s ease-in-out infinite;
}

.vfx-19 .vfx-p {
  width: 2px;
  height: 5px;
  border-radius: 40%;
  background: #ff8800;
  box-shadow: 0 0 6px #ff6000, 0 0 12px rgba(255, 100, 0, .3);
  animation: vfx-rise 2.2s ease-out infinite;
}

.vfx-19 .vfx-p:nth-child(even) {
  background: #ffd000;
  box-shadow: 0 0 5px #ffaa00;
  animation-duration: 2.8s;
}

.vfx-19 .vfx-p:nth-child(3n) {
  background: #ff4000;
  height: 4px;
  animation-duration: 2s;
}

/* ═══ 20: Abyssal ═══ */
.vfx-20 .vfx-glow {
  opacity: 1;
  inset: -14px;
  background: radial-gradient(ellipse, rgba(30, 0, 60, .55) 0%, rgba(80, 0, 120, .12) 50%, transparent 70%);
  animation: vfx-pulse 3s ease-in-out infinite;
}

.vfx-20 .vfx-layer {
  opacity: 1;
}

.vfx-20 .vfx-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(120, 0, 200, .08) 0%, transparent 60%);
  animation: vfx-flicker 2.5s ease-in-out infinite;
}

.vfx-20 .vfx-p {
  width: 4px;
  height: 4px;
  background: rgba(120, 0, 200, .6);
  box-shadow: 0 0 6px rgba(100, 0, 180, .4), 0 0 14px rgba(60, 0, 120, .2);
  animation: vfx-swirl 5s ease-in-out infinite;
}

.vfx-20 .vfx-p:nth-child(even) {
  background: rgba(180, 0, 255, .4);
  animation-direction: reverse;
  animation-duration: 6s;
}

.vfx-20 .vfx-p:nth-child(3n) {
  background: rgba(60, 0, 100, .7);
  filter: blur(1px);
  width: 6px;
  height: 6px;
}

.vfx-20 .vfx-p {
  left: 50%;
  top: 50%;
}

/* ═══ Hub banner vex sizing ═══ */
.df-hub-banner .vex-wrap {
  width: 48px;
  height: 64px;
}

.df-hub-banner .war-banner {
  width: 140px;
  height: 100px;
}

/* ═══ Guild Interest Badge ═══ */
.gs-interest-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.6;
}

.gs-interest-badge i {
  margin-right: 3px;
  font-size: 9px;
}

/* ═══════════════════════════════════════════════════════════════
   GUILD CITADEL STRONGHOLD — Visual Redesign
   Fortress-themed UI for guild list + guild profile pages.
   All classes prefixed with citadel-* to avoid conflicts.
   ═══════════════════════════════════════════════════════════════ */

/* ===== CITADEL VARIABLES ===== */
:root {
  --citadel-stone-dark: #1a1612;
  --citadel-stone-mid: #2a241c;
  --citadel-stone-light: #3a3228;
  --citadel-stone-highlight: #4a4036;
  --citadel-mortar: #151210;
  --citadel-iron: #4a4a52;
  --citadel-iron-light: #6a6a72;
  --citadel-iron-rust: #6b4a30;
  --citadel-flame-core: #ff9030;
  --citadel-torch-glow: rgba(255, 144, 48, 0.12);
  --citadel-gold-bright: #e8c86c;
  --citadel-text-heading: #e0d0b0;
  --citadel-text-body: #b8a880;
  --citadel-text-dim: #7a6a50;
}

/* ===== CITADEL KEYFRAMES ===== */
@keyframes citadel-torch {

  0%,
  100% {
    opacity: 0.85;
    transform: scaleY(1);
  }

  25% {
    opacity: 1;
    transform: scaleY(1.04);
  }

  50% {
    opacity: 0.9;
    transform: scaleY(0.97);
  }

  75% {
    opacity: 1;
    transform: scaleY(1.02);
  }
}

@keyframes citadel-ember {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-60px) scale(0);
  }
}

@keyframes citadel-stone-breathe {

  0%,
  100% {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  50% {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 20px rgba(255, 144, 48, 0.03);
  }
}

@keyframes citadel-gate-reveal {
  0% {
    clip-path: inset(0 50% 0 50%);
  }

  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes citadel-room-enter {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes citadel-dust {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }

  20% {
    opacity: 0.4;
  }

  80% {
    opacity: 0.3;
  }

  100% {
    opacity: 0;
    transform: translate(var(--dust-dx, 30px), var(--dust-dy, -80px));
  }
}

@keyframes citadel-flame-dance {

  0%,
  100% {
    transform: scaleX(1) scaleY(1);
    opacity: 0.9;
  }

  25% {
    transform: scaleX(0.92) scaleY(1.08);
    opacity: 1;
  }

  50% {
    transform: scaleX(1.05) scaleY(0.94);
    opacity: 0.85;
  }

  75% {
    transform: scaleX(0.96) scaleY(1.04);
    opacity: 1;
  }
}

@keyframes citadel-name-glow {

  0%,
  100% {
    text-shadow: 0 0 8px rgba(232, 200, 108, 0.2), 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  50% {
    text-shadow: 0 0 18px rgba(232, 200, 108, 0.5), 0 0 40px rgba(255, 144, 48, 0.15), 0 2px 4px rgba(0, 0, 0, 0.5);
  }
}

@keyframes citadel-online-pulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 4px rgba(62, 207, 62, 0.5);
  }

  50% {
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(62, 207, 62, 0.8);
  }
}

/* ===== CITADEL CONTAINER ===== */
.citadel-wrap {
  position: relative;
  background: none;
  padding: 0;
  padding-bottom: 60px;
  min-height: 200px;
}

.citadel-wrap::before,
.citadel-wrap::after {
  display: none;
}

.citadel-wrap>* {
  position: relative;
  z-index: 1;
}

/* Atmosphere dust particles */
.citadel-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.citadel-dust {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(200, 180, 140, 0.3);
  border-radius: 50%;
  animation: citadel-dust 8s ease-in-out infinite;
}

.citadel-dust:nth-child(1) {
  left: 10%;
  top: 80%;
  --dust-dx: 20px;
  --dust-dy: -120px;
  animation-delay: 0s;
}

.citadel-dust:nth-child(2) {
  left: 25%;
  top: 70%;
  --dust-dx: -15px;
  --dust-dy: -100px;
  animation-delay: 1.2s;
}

.citadel-dust:nth-child(3) {
  left: 40%;
  top: 90%;
  --dust-dx: 25px;
  --dust-dy: -90px;
  animation-delay: 2.5s;
  width: 3px;
  height: 3px;
}

.citadel-dust:nth-child(4) {
  left: 55%;
  top: 75%;
  --dust-dx: -20px;
  --dust-dy: -110px;
  animation-delay: 3.8s;
}

.citadel-dust:nth-child(5) {
  left: 70%;
  top: 85%;
  --dust-dx: 10px;
  --dust-dy: -130px;
  animation-delay: 5s;
}

.citadel-dust:nth-child(6) {
  left: 85%;
  top: 65%;
  --dust-dx: -30px;
  --dust-dy: -80px;
  animation-delay: 6.2s;
  width: 3px;
  height: 3px;
}

.citadel-dust:nth-child(7) {
  left: 15%;
  top: 60%;
  --dust-dx: 35px;
  --dust-dy: -70px;
  animation-delay: 4s;
}

.citadel-dust:nth-child(8) {
  left: 60%;
  top: 95%;
  --dust-dx: -10px;
  --dust-dy: -140px;
  animation-delay: 7s;
}

.citadel-dust:nth-child(9) {
  left: 5%;
  top: 50%;
  --dust-dx: 40px;
  --dust-dy: -60px;
  animation-delay: 1.8s;
}

.citadel-dust:nth-child(10) {
  left: 35%;
  top: 55%;
  --dust-dx: -25px;
  --dust-dy: -100px;
  animation-delay: 3.2s;
  width: 3px;
  height: 3px;
}

.citadel-dust:nth-child(11) {
  left: 75%;
  top: 45%;
  --dust-dx: 15px;
  --dust-dy: -90px;
  animation-delay: 5.5s;
}

.citadel-dust:nth-child(12) {
  left: 90%;
  top: 80%;
  --dust-dx: -20px;
  --dust-dy: -110px;
  animation-delay: 0.8s;
  width: 3px;
  height: 3px;
}

/* Atmosphere fog layer */
.citadel-fog {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(0deg, rgba(21, 18, 16, 0.4) 0%, transparent 100%);
  animation: df-fog-drift 15s ease-in-out infinite;
  pointer-events: none;
}

/* Atmospheric light pools */
.citadel-light-pool {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 144, 48, 0.06) 0%, transparent 70%);
  filter: blur(20px);
  animation: citadel-torch 4s ease-in-out infinite;
  pointer-events: none;
}

.citadel-light-pool:nth-child(1) {
  left: -30px;
  top: 40%;
}

.citadel-light-pool:nth-child(2) {
  right: -30px;
  top: 60%;
  animation-delay: 2s;
}

/* ===== FORTRESS GATE BANNER ===== */
.citadel-gate {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--citadel-stone-light) 0%, var(--citadel-stone-mid) 60%, var(--citadel-stone-dark) 100%);
  border: 1px solid var(--citadel-stone-highlight);
  border-top-color: rgba(255, 255, 255, 0.08);
  border-bottom-color: var(--citadel-mortar);
  border-radius: 4px;
  margin-bottom: 10px;
  position: relative;
  overflow: visible;
}

/* Crenellation pattern at top */
.citadel-gate::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg,
      var(--citadel-stone-highlight) 0px,
      var(--citadel-stone-highlight) 14px,
      transparent 14px,
      transparent 20px);
  opacity: 0.6;
}

/* Stone ledge at bottom */
.citadel-gate::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(180deg, var(--citadel-stone-highlight), var(--citadel-mortar));
}

.citadel-gate-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 14px 16px;
  background: radial-gradient(ellipse at 30% 50%, rgba(255, 144, 48, 0.04) 0%, transparent 70%);
}

/* Iron bolt decorations */
.citadel-gate-bolts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.citadel-gate-bolts::before,
.citadel-gate-bolts::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--citadel-iron-light) 30%, var(--citadel-iron) 70%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 3px rgba(0, 0, 0, 0.3);
  top: 10px;
}

.citadel-gate-bolts::before {
  left: 10px;
}

.citadel-gate-bolts::after {
  right: 10px;
}

/* Vexillum alcove */
.citadel-vex-stage {
  flex-shrink: 0;
  position: relative;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.08) 0%, transparent 70%);
  padding: 4px;
  border-radius: 4px;
}

.citadel-vex-stage .vex-wrap {
  width: 56px;
  height: 72px;
}

.citadel-vex-stage .war-banner {
  width: 160px;
  height: 112px;
}

/* Guild identity block */
.citadel-identity {
  flex: 1;
  min-width: 0;
}

.citadel-guild-name {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--citadel-gold-bright);
  text-shadow: 0 0 12px rgba(232, 200, 108, 0.3), 0 2px 4px rgba(0, 0, 0, 0.5);
  margin: 0;
  line-height: 1.3;
}

.citadel-guild-name .guild-tag {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: normal;
  color: #c0a070;
}

.citadel-motto {
  font-family: 'Crimson Text', serif;
  font-style: italic;
  font-size: 13px;
  color: #a89060;
  margin-top: 2px;
}

.citadel-req-badge {
  display: inline-block;
  font-size: 10px;
  color: #c0a070;
  background: rgba(26, 22, 18, 0.6);
  border: 1px solid rgba(201, 168, 76, 0.15);
  padding: 1px 7px;
  border-radius: 10px;
  margin-right: 4px;
  margin-top: 4px;
}

.citadel-req-badge i {
  font-size: 8px;
  margin-right: 2px;
}

.citadel-actions {
  margin-left: auto;
  align-self: center;
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ===== CASTLE ROOM NAVIGATION (TABS) ===== */
.citadel-rooms {
  display: flex;
  gap: 0;
  background: var(--citadel-stone-dark);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 4px 4px 0 0;
  margin-bottom: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.citadel-room-tab {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--citadel-text-dim);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  white-space: nowrap;
  position: relative;
}

.citadel-room-tab:hover {
  color: var(--citadel-text-body);
  background: rgba(255, 255, 255, 0.02);
}

.citadel-room-tab.active {
  color: var(--citadel-gold-bright);
  border-bottom-color: var(--citadel-flame-core);
}

/* Torch glow on active tab */
.citadel-room-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 6px;
  background: var(--citadel-flame-core);
  border-radius: 50%;
  filter: blur(4px);
  opacity: 0.5;
}

.citadel-room-tab i {
  margin-right: 4px;
  font-size: 10px;
}

.citadel-room-badge {
  display: inline-block;
  background: #c0392b;
  color: #fff;
  font-size: 9px;
  font-family: sans-serif;
  padding: 0 5px;
  border-radius: 8px;
  margin-left: 4px;
  line-height: 1.6;
  vertical-align: middle;
}

/* Room content area */
.citadel-room-content {
  animation: citadel-room-enter 0.3s ease-out both;
}

/* ===== STONE TABLET CARDS ===== */
.citadel-stone {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23s)' opacity='0.03'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--citadel-stone-mid) 0%, var(--citadel-stone-dark) 100%);
  border: 1px solid var(--citadel-stone-highlight);
  border-top-color: rgba(255, 255, 255, 0.06);
  border-bottom-color: var(--citadel-stone-highlight);
  border-radius: 3px;
  margin-bottom: 10px;
  overflow: hidden;
}

.citadel-stone-head {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--citadel-gold-bright);
  padding: 8px 12px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Carved groove line under header */
.citadel-stone-head::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10px;
  right: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--citadel-stone-highlight), var(--citadel-iron-rust), var(--citadel-stone-highlight), transparent);
}

.citadel-stone-body {
  padding: 10px 12px;
}

/* Iron bolt decorations on stone cards */
.citadel-stone.has-bolts {
  position: relative;
}

.citadel-stone.has-bolts::before,
.citadel-stone.has-bolts::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--citadel-iron-light) 30%, var(--citadel-iron) 70%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  top: 8px;
  z-index: 2;
}

.citadel-stone.has-bolts::before {
  left: 8px;
}

.citadel-stone.has-bolts::after {
  right: 8px;
}

/* ===== GREAT HALL (OVERVIEW) ===== */
.citadel-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.citadel-stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(21, 18, 16, 0.5);
  border: 1px solid rgba(74, 64, 54, 0.3);
  border-radius: 3px;
  padding: 8px 6px;
}

.citadel-stat-value {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  color: var(--citadel-gold-bright);
  text-shadow: 0 0 8px rgba(232, 200, 108, 0.2);
  font-weight: 700;
}

.citadel-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--citadel-text-dim);
  margin-top: 2px;
}

.citadel-parchment {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23p)' opacity='0.02'/%3E%3C/svg%3E"),
    rgba(26, 22, 18, 0.4);
  border-left: 3px solid var(--citadel-gold-bright);
  padding: 10px 14px;
  border-radius: 0 3px 3px 0;
  color: #c4a882;
  font-size: 12px;
}

.citadel-parchment-title {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--citadel-text-dim);
  padding-bottom: 4px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(74, 64, 54, 0.3);
}

/* Event board */
.citadel-event-board {
  padding: 0;
}

.citadel-event-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(58, 50, 40, 0.4);
  transition: background 0.15s;
}

.citadel-event-item:last-child {
  border-bottom: none;
}

.citadel-event-item:hover {
  background: rgba(255, 255, 255, 0.02);
}

.citadel-event-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(21, 18, 16, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.citadel-event-active {
  color: #3ECF3E;
  font-size: 10px;
  font-weight: bold;
}

/* ===== WAR COUNCIL (MEMBERS) ===== */
.citadel-roster {
  padding: 0;
}

.citadel-roster-head {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: rgba(26, 22, 18, 0.5);
  border-bottom: 1px solid rgba(74, 64, 54, 0.3);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--citadel-text-dim);
}

.citadel-roster-row {
  display: flex;
  align-items: center;
  padding: 5px 12px;
  border-bottom: 1px solid rgba(58, 50, 40, 0.2);
  transition: background 0.15s;
}

.citadel-roster-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.citadel-roster-online {
  color: #3ECF3E;
}

.citadel-roster-online::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ECF3E;
  box-shadow: 0 0 4px rgba(62, 207, 62, 0.5);
  margin-right: 4px;
  vertical-align: middle;
}

.citadel-roster-offline {
  color: #666;
}

.citadel-roster-offline::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #555;
  margin-right: 4px;
  vertical-align: middle;
}

/* ===== ARCHIVES (FORUMS) ===== */
.citadel-archive-head {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: rgba(26, 22, 18, 0.5);
  border-bottom: 1px solid rgba(74, 64, 54, 0.3);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--citadel-text-dim);
}

.citadel-archive-row {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(58, 50, 40, 0.2);
  cursor: pointer;
  transition: background 0.15s;
}

.citadel-archive-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.citadel-archive-icon {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: rgba(21, 18, 16, 0.5);
  border: 1px solid rgba(74, 64, 54, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #c0a070;
  flex-shrink: 0;
  margin-right: 10px;
}

/* ===== GATE HOUSE (APPLICATIONS) ===== */
.citadel-application {
  background: rgba(42, 33, 23, 0.6);
  border: 1px solid rgba(58, 50, 40, 0.5);
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 8px;
  animation: citadel-room-enter 0.3s ease-out both;
}

.citadel-app-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.citadel-app-name {
  font-size: 13px;
  font-weight: bold;
  color: #c4a882;
}

.citadel-skill-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 8px;
}

.citadel-skill-cell {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(30, 24, 15, 0.5);
  padding: 2px 4px;
  border-radius: 2px;
  border: 1px solid rgba(92, 74, 46, 0.2);
}

.citadel-skill-cell img {
  width: 14px;
  height: 14px;
}

.citadel-skill-cell span {
  font-size: 10px;
  color: #c4a882;
}

.citadel-app-message {
  background: rgba(30, 24, 15, 0.6);
  border-left: 3px solid var(--citadel-iron-rust);
  padding: 6px 10px;
  margin-bottom: 8px;
  border-radius: 0 3px 3px 0;
  font-size: 12px;
  color: #c4a882;
  font-style: italic;
}

.citadel-app-message i.fa-quote-left {
  font-size: 8px;
  color: #888;
  margin-right: 4px;
}

/* ===== CHRONICLE (ACTIVITY LOG) ===== */
.citadel-chronicle {
  padding: 0;
}

.citadel-chronicle-filters {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(58, 50, 40, 0.3);
  align-items: center;
  flex-wrap: wrap;
}

.citadel-chronicle-filters .form-control {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--citadel-stone-dark) !important;
  color: var(--citadel-text-body) !important;
  border: 1px solid var(--citadel-stone-highlight) !important;
}

.citadel-chronicle-body {
  padding: 6px 12px;
  max-height: 500px;
  overflow-y: auto;
}

.citadel-log-entry {
  display: flex;
  align-items: flex-start;
  padding: 4px 0;
  border-bottom: 1px solid rgba(58, 50, 40, 0.15);
  gap: 8px;
}

.citadel-log-time {
  font-size: 10px;
  color: #555;
  min-width: 80px;
  flex-shrink: 0;
}

.citadel-log-tag {
  font-size: 9px;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}

.citadel-log-detail {
  font-size: 11px;
  flex: 1;
  min-width: 0;
}

.citadel-log-detail .log-user {
  color: #c4a882;
  font-weight: 600;
}

.citadel-log-detail .log-info {
  color: #888;
  font-size: 10px;
}

/* ===== COMMAND CHAMBER (SETTINGS) ===== */
.citadel-stone .form-control,
.citadel-wrap .form-control {
  background: var(--citadel-stone-dark) !important;
  color: var(--citadel-text-body) !important;
  border: 1px solid var(--citadel-stone-highlight) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.citadel-stone .form-control:focus,
.citadel-wrap .form-control:focus {
  border-color: rgba(232, 200, 108, 0.4) !important;
  box-shadow: 0 0 8px rgba(232, 200, 108, 0.15) !important;
}

.citadel-perm-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

.citadel-perm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  width: calc(50% - 10px);
}

.citadel-perm-row label {
  color: #c4a882;
  font-size: 12px;
  font-weight: normal;
}

.citadel-perm-select {
  width: 130px;
  font-size: 11px !important;
  padding: 2px 4px !important;
  background: var(--citadel-stone-dark) !important;
  color: #c0a070 !important;
  border: 1px solid rgba(92, 74, 46, 0.4) !important;
}

/* ===== FORGED BUTTONS ===== */
.citadel-btn {
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.3px;
  border: none;
  border-radius: 2px;
  padding: 5px 14px;
  cursor: pointer;
  transition: filter 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.citadel-btn:hover {
  filter: brightness(1.15);
}

.citadel-btn:active {
  filter: brightness(0.9);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.citadel-btn-gold {
  background: linear-gradient(180deg, #c9a84c 0%, #a08030 50%, #8a6f1e 100%);
  color: #1a1612;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.citadel-btn-iron {
  background: linear-gradient(180deg, #5a5a62 0%, #4a4a52 50%, #3a3a42 100%);
  color: #ccc;
}

.citadel-btn-accept {
  background: linear-gradient(180deg, #3a8a3a 0%, #2a6a2a 50%, #1a5a1a 100%);
  color: #d0ffd0;
}

.citadel-btn-danger {
  background: linear-gradient(180deg, #8a2a2a 0%, #6a1a1a 50%, #5a1010 100%);
  color: #ffd0d0;
}

.citadel-btn-sm {
  font-size: 10px;
  padding: 3px 10px;
}

/* ===== GUILD LIST (WAR TABLE) ===== */
.citadel-war-table {
  padding: 0;
}

.citadel-dispatch {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 12px;
}

.citadel-sort-btn {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  text-transform: uppercase;
  background: var(--citadel-stone-dark);
  color: var(--citadel-text-dim);
  border: 1px solid var(--citadel-stone-highlight);
  padding: 2px 8px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
}

.citadel-sort-btn:hover {
  color: var(--citadel-text-body);
  border-color: var(--citadel-iron-rust);
}

.citadel-sort-btn.active {
  background: linear-gradient(180deg, #c9a84c, #8a6f1e);
  color: #1a1612;
  border-color: #c9a84c;
}

.citadel-list-head {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: rgba(26, 22, 18, 0.5);
  border-bottom: 1px solid rgba(74, 64, 54, 0.3);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--citadel-text-dim);
}

.citadel-guild-row {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(58, 50, 40, 0.2);
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}

.citadel-guild-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* Gold left-border on hover */
.citadel-guild-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--citadel-gold-bright);
  opacity: 0;
  transition: opacity 0.2s;
}

.citadel-guild-row:hover::before {
  opacity: 1;
}

.citadel-list-vex {
  flex-shrink: 0;
  margin-right: 8px;
  position: relative;
  overflow: hidden;
}

.citadel-guild-name-cell {
  flex: 1;
  min-width: 0;
}

.citadel-guild-name-cell .guild-row-name {
  font-size: 13px;
  font-weight: 600;
  color: #c4a882;
}

.citadel-guild-name-cell .guild-row-tag {
  color: #c0a070;
  font-size: 11px;
  font-weight: normal;
}

.citadel-guild-name-cell .guild-row-motto {
  font-size: 11px;
  color: #888;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.citadel-guild-name-cell .guild-row-reqs {
  font-size: 10px;
  color: #a08560;
  margin-top: 1px;
}

.citadel-guild-name-cell .guild-row-reqs .sep {
  color: #5c4a2e;
}

/* Pagination */
.citadel-pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 10px 0;
}

.citadel-page-btn {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  background: var(--citadel-stone-dark);
  color: var(--citadel-text-dim);
  border: 1px solid var(--citadel-stone-highlight);
  padding: 3px 10px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
}

.citadel-page-btn:hover {
  color: var(--citadel-text-body);
  border-color: var(--citadel-iron-rust);
}

.citadel-page-btn.active {
  background: linear-gradient(180deg, #c9a84c, #8a6f1e);
  color: #1a1612;
  border-color: #c9a84c;
  font-weight: bold;
}

/* ===== BREADCRUMB ===== */
.citadel-breadcrumb {
  font-size: 11px;
  color: #888;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.citadel-breadcrumb a,
.citadel-breadcrumb .cb-link {
  color: #c0a070;
  text-decoration: none;
  cursor: pointer;
}

.citadel-breadcrumb a:hover,
.citadel-breadcrumb .cb-link:hover {
  color: var(--citadel-gold-bright);
}

.citadel-breadcrumb .cb-sep {
  color: #555;
  margin: 0 2px;
}

.citadel-breadcrumb .cb-current {
  color: #c4a882;
}

.citadel-breadcrumb i.fa-shield-alt {
  color: #c0a070;
}

/* ===== SCROLLBAR ===== */
.citadel-wrap ::-webkit-scrollbar {
  width: 6px;
}

.citadel-wrap ::-webkit-scrollbar-track {
  background: var(--citadel-mortar);
}

.citadel-wrap ::-webkit-scrollbar-thumb {
  background: var(--citadel-stone-highlight);
  border-radius: 3px;
}

.citadel-wrap ::-webkit-scrollbar-thumb:hover {
  background: var(--citadel-iron-rust);
}

/* ===== CITADEL QUILL OVERRIDES ===== */
.citadel-stone .ql-toolbar,
.citadel-stone .ql-container {
  border-color: var(--citadel-stone-highlight) !important;
}

.citadel-stone .ql-editor {
  background: var(--citadel-stone-dark);
  color: var(--citadel-text-body);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 700px) {

  .citadel-hall-grid,
  .citadel-hall-grid.citadel-hall-grid-overview {
    grid-template-columns: 1fr;
  }

  .citadel-rampart {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }

  .citadel-rampart-stat {
    min-width: 60px;
    padding: 4px 8px;
  }

  .citadel-rampart-divider {
    display: none;
  }
}

@media (max-width: 600px) {
  .citadel-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .citadel-skill-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .citadel-perm-row {
    width: 100%;
  }

  .citadel-gate-inner {
    flex-wrap: wrap;
  }

  .citadel-guild-name {
    font-size: 18px;
  }

  .citadel-guild-name-epic {
    font-size: 20px !important;
  }

  .citadel-room-tab {
    padding: 6px 10px;
    font-size: 10px;
  }

  .citadel-actions,
  .citadel-gate-actions {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    justify-content: center;
  }

  .citadel-gate-meta {
    gap: 4px;
  }

  .citadel-gate-chip {
    font-size: 10px;
    padding: 2px 6px;
  }

  .citadel-torch-sconce {
    display: none;
  }

  .citadel-dispatch-stat {
    min-width: 45px;
    padding: 0 4px;
  }

  .citadel-dispatch-stat-value {
    font-size: 12px;
  }

  .citadel-guild-dispatch {
    padding: 8px 10px;
  }
}

/* ===== EPIC GATE BANNER ===== */
.citadel-gate-epic .citadel-gate-inner {
  flex-direction: row;
  align-items: stretch;
  padding: 16px;
  gap: 16px;
}

/* Vexillum hero — left side, primary focus */
.citadel-vex-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  padding: 12px 16px;
}

.citadel-vex-hero .citadel-vex-alcove {
  position: absolute;
  inset: -12px;
  background: radial-gradient(ellipse, rgba(201, 168, 76, 0.10) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.citadel-vex-hero .citadel-vex-stage {
  position: relative;
  z-index: 1;
}

.citadel-vex-hero .citadel-vex-stage .vex-wrap {
  width: 80px;
  height: 106px;
}

.citadel-vex-hero .citadel-vex-stage .war-banner {
  width: 220px;
  height: 154px;
}

.citadel-vex-hero .citadel-vex-plinth {
  width: 90px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--citadel-iron), var(--citadel-gold-bright), var(--citadel-iron), transparent);
  border-radius: 2px;
  margin-top: 6px;
}

/* Guild identity — right side */
.citadel-gate-epic .citadel-identity {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.citadel-guild-name-epic {
  font-size: 22px !important;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

/* Requirements bar — prominent */
.citadel-requirements {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.citadel-req-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
}

.citadel-req-status i {
  font-size: 11px;
}

.citadel-req-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--citadel-text-body);
  background: rgba(21, 18, 16, 0.4);
  border: 1px solid rgba(74, 64, 54, 0.3);
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
}

.citadel-req-item i {
  font-size: 9px;
  color: var(--citadel-gold-dim);
}

/* Action buttons — subtle row */
.citadel-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-top: 4px;
}

.citadel-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 10px;
  font-family: 'Cinzel', serif;
  color: var(--citadel-text-body);
  background: rgba(21, 18, 16, 0.5);
  border: 1px solid rgba(74, 64, 54, 0.4);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.citadel-btn-sm:hover {
  background: rgba(201, 168, 76, 0.1);
  border-color: rgba(201, 168, 76, 0.3);
  color: var(--citadel-gold-bright);
}

.citadel-btn-sm i {
  font-size: 10px;
  color: var(--citadel-gold-dim);
}

.citadel-btn-sm:hover i {
  color: var(--citadel-gold-bright);
}

/* Extra-small button variant for gate actions */
.citadel-btn-xs {
  padding: 2px 7px !important;
  font-size: 10px !important;
  min-height: 0 !important;
}

.citadel-btn-xs i {
  font-size: 9px !important;
}

/* Hide bolt rivets on epic gate */
.citadel-gate-epic .citadel-gate-bolts {
  display: none;
}

/* Recruiting dropdown fix — absolute positioning within banner */
/* Motto textarea */
.citadel-textarea {
  width: 100%;
  background: rgba(21, 18, 16, 0.6);
  border: 1px solid rgba(74, 64, 54, 0.4);
  border-radius: 3px;
  color: var(--citadel-text-body);
  font-size: 12px;
  padding: 8px 10px;
  resize: vertical;
  font-family: inherit;
}

.citadel-textarea:focus {
  outline: none;
  border-color: var(--citadel-gold-dim);
}

/* Torch sconces — bigger, connected to banner edge */
.citadel-gate-epic .citadel-torch-sconce {
  position: absolute;
  top: 14px;
  width: 20px;
  height: 50px;
  z-index: 3;
}

.citadel-gate-epic .citadel-torch-sconce::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 24px;
  background: linear-gradient(180deg, var(--citadel-iron-light), var(--citadel-iron));
  border-radius: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.citadel-gate-epic .citadel-torch-sconce::after {
  content: '';
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 4px;
  background: var(--citadel-iron);
  border-radius: 1px;
}

.citadel-gate-epic .citadel-torch-left {
  left: 8px;
}

.citadel-gate-epic .citadel-torch-right {
  right: 8px;
}

.citadel-gate-epic .citadel-flame {
  position: absolute;
  top: 8px;
  left: 4px;
  width: 12px;
  height: 18px;
  background: radial-gradient(ellipse at 50% 60%, #fff 0%, #ffcc33 25%, var(--citadel-flame-core) 55%, transparent 80%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  filter: blur(1px);
  animation: citadel-flame-dance 0.8s ease-in-out infinite alternate;
}

.citadel-gate-epic .citadel-torch-right .citadel-flame {
  animation-delay: 0.3s;
}

.citadel-gate-epic .citadel-flame-glow {
  position: absolute;
  top: -8px;
  left: -20px;
  width: 60px;
  height: 70px;
  background: radial-gradient(ellipse, rgba(255, 144, 48, 0.12) 0%, transparent 70%);
  animation: citadel-torch 3s ease-in-out infinite;
  pointer-events: none;
}

.citadel-gate-epic .citadel-torch-right .citadel-flame-glow {
  animation-delay: 1.5s;
}

/* Responsive: stack on narrow */
@media (max-width: 500px) {
  .citadel-gate-epic .citadel-gate-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .citadel-requirements {
    justify-content: center;
  }

  .citadel-gate-actions {
    justify-content: center;
  }

  .citadel-hall-grid.citadel-hall-grid-overview {
    grid-template-columns: 1fr;
  }
}

/* ===== STAT RAMPART BAND ===== */
.citadel-rampart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: linear-gradient(180deg, var(--citadel-stone-mid) 0%, var(--citadel-stone-dark) 100%);
  border: 1px solid var(--citadel-stone-highlight);
  border-top-color: rgba(255, 255, 255, 0.06);
  border-bottom-color: var(--citadel-mortar);
  border-radius: 3px;
  padding: 8px 16px;
  margin-bottom: 10px;
  position: relative;
  flex-wrap: wrap;
}

.citadel-rampart::before {
  display: none;
}

.citadel-rampart-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 14px;
  min-width: 70px;
}

.citadel-rampart-value {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--citadel-gold-bright);
}

.citadel-rampart-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--citadel-text-dim);
  margin-top: 1px;
}

.citadel-rampart-divider {
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg, transparent, var(--citadel-stone-highlight), var(--citadel-iron-rust), var(--citadel-stone-highlight), transparent);
  flex-shrink: 0;
}

.citadel-val-online {
  color: #3ECF3E !important;
  -webkit-text-fill-color: #3ECF3E !important;
  background: none !important;
  text-shadow: 0 0 8px rgba(62, 207, 62, 0.4);
}

/* ===== GREAT HALL GRID ===== */
.citadel-hall-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.citadel-hall-grid.citadel-hall-grid-overview {
  grid-template-columns: 2fr 1fr;
}

.citadel-hall-grid .citadel-stone {
  margin-bottom: 0;
}

.citadel-hall-full {
  grid-column: 1 / -1;
}

.citadel-hall-members .citadel-stone,
.citadel-hall-events .citadel-stone {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.citadel-hall-members .citadel-stone-body,
.citadel-hall-events .citadel-stone-body {
  flex: 1;
}

/* Leadership preview */
.citadel-leader-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(58, 50, 40, 0.2);
}

.citadel-leader-row:last-child {
  border-bottom: none;
}

.citadel-leader-name {
  font-size: 12px;
  color: #c4a882;
  flex: 1;
  min-width: 0;
}

.citadel-leader-rank {
  font-size: 10px;
  color: var(--citadel-text-dim);
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
}

.citadel-leader-online {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.citadel-leader-online.is-online {
  background: #3ECF3E;
  box-shadow: 0 0 4px rgba(62, 207, 62, 0.5);
  animation: citadel-online-pulse 2s ease-in-out infinite;
}

.citadel-leader-online.is-offline {
  background: #555;
}

/* ===== ROSTER TIERS ===== */
.citadel-roster-section {
  margin-bottom: 0;
}

.citadel-roster-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(26, 22, 18, 0.6);
  border-bottom: 1px solid rgba(74, 64, 54, 0.3);
  border-top: 1px solid rgba(74, 64, 54, 0.15);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--citadel-gold-bright);
}

.citadel-roster-section-title i {
  font-size: 10px;
}

.citadel-roster-section-title .citadel-tier-count {
  font-family: sans-serif;
  font-size: 9px;
  color: var(--citadel-text-dim);
  text-transform: none;
  letter-spacing: 0;
  margin-left: auto;
}

.citadel-roster-row.rank-owner {
  border-left: 3px solid var(--citadel-gold-bright);
  background: rgba(201, 168, 76, 0.06);
}

.citadel-roster-row.rank-owner .citadel-member-name {
  color: var(--citadel-gold-bright);
  font-weight: 700;
}

.citadel-roster-row.rank-officer {
  border-left: 2px solid rgba(201, 168, 76, 0.3);
  background: rgba(201, 168, 76, 0.02);
}

.citadel-member-name {
  font-size: 12px;
  color: #c4a882;
}

/* Enhanced online indicator */
.citadel-roster-online::before {
  animation: citadel-online-pulse 2s ease-in-out infinite;
}

/* Staggered entrance for roster rows */
.citadel-roster-row {
  animation: citadel-room-enter 0.3s ease-out both;
}

.citadel-roster-row:nth-child(1) {
  animation-delay: 0s;
}

.citadel-roster-row:nth-child(2) {
  animation-delay: 0.03s;
}

.citadel-roster-row:nth-child(3) {
  animation-delay: 0.06s;
}

.citadel-roster-row:nth-child(4) {
  animation-delay: 0.09s;
}

.citadel-roster-row:nth-child(5) {
  animation-delay: 0.12s;
}

.citadel-roster-row:nth-child(6) {
  animation-delay: 0.15s;
}

.citadel-roster-row:nth-child(7) {
  animation-delay: 0.18s;
}

.citadel-roster-row:nth-child(8) {
  animation-delay: 0.21s;
}

.citadel-roster-row:nth-child(9) {
  animation-delay: 0.24s;
}

.citadel-roster-row:nth-child(10) {
  animation-delay: 0.27s;
}

.citadel-roster-row:nth-child(n+11) {
  animation-delay: 0.3s;
}

/* ===== DISPATCH CARDS (GUILD LIST) ===== */
.citadel-guild-dispatch {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(58, 50, 40, 0.2);
  cursor: pointer;
  position: relative;
  background: linear-gradient(90deg, rgba(26, 22, 18, 0.6) 0%, rgba(42, 36, 28, 0.3) 100%);
  border-left: 3px solid transparent;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.3s, background 0.2s;
  overflow: hidden;
}

.citadel-guild-dispatch:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 12px rgba(255, 144, 48, 0.08);
  border-left-color: var(--citadel-gold-bright);
  background: linear-gradient(90deg, rgba(42, 36, 28, 0.6) 0%, rgba(58, 50, 40, 0.3) 100%);
}

/* Shimmer sweep on hover */
.citadel-guild-dispatch::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.03) 50%, transparent 100%);
  transition: left 0.5s ease;
  pointer-events: none;
}

.citadel-guild-dispatch:hover::after {
  left: 100%;
}

/* Dispatch vex — slightly larger */
.citadel-dispatch-vex {
  flex-shrink: 0;
  margin-right: 10px;
  position: relative;
  overflow: hidden;
}

/* Dispatch name in Cinzel */
.citadel-dispatch-name {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 600;
  color: #c4a882;
}

.citadel-dispatch-tag {
  font-family: 'Cinzel', serif;
  color: #c0a070;
  font-size: 11px;
  font-weight: normal;
}

.citadel-dispatch-motto {
  font-family: 'Crimson Text', serif;
  font-style: italic;
  font-size: 11px;
  color: #888;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dispatch stat cells */
.citadel-dispatch-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 55px;
  padding: 0 6px;
}

.citadel-dispatch-stat-value {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  color: var(--citadel-gold-bright);
  font-weight: 700;
}

.citadel-dispatch-stat-label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--citadel-text-dim);
}

/* ===== MICRO-INTERACTIONS ===== */
/* Stone card hover */
.citadel-stone {
  transition: transform 0.2s, box-shadow 0.3s;
}

.citadel-stone:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 144, 48, 0.04);
}

.citadel-stone.has-bolts:hover {
  border-color: rgba(201, 168, 76, 0.2);
}

/* Staggered entrance for stone cards */
.citadel-room-content>.citadel-stone:nth-child(1),
.citadel-room-content>.citadel-hall-grid .citadel-stone:nth-child(1),
.citadel-room-content>.citadel-rampart {
  animation: citadel-room-enter 0.3s ease-out both;
}

.citadel-room-content>.citadel-stone:nth-child(2),
.citadel-room-content>.citadel-hall-grid .citadel-stone:nth-child(2) {
  animation: citadel-room-enter 0.3s ease-out 0.1s both;
}

.citadel-room-content>.citadel-stone:nth-child(3),
.citadel-room-content>.citadel-hall-grid .citadel-stone:nth-child(3) {
  animation: citadel-room-enter 0.3s ease-out 0.2s both;
}

.citadel-room-content>.citadel-stone:nth-child(4) {
  animation: citadel-room-enter 0.3s ease-out 0.3s both;
}

/* Tab bar enhancements */
.citadel-rooms {
  position: relative;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23s)' opacity='0.03'/%3E%3C/svg%3E"),
    var(--citadel-stone-dark) !important;
}

.citadel-rooms::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg,
      var(--citadel-stone-highlight) 0px,
      var(--citadel-stone-highlight) 8px,
      transparent 8px,
      transparent 12px);
  opacity: 0.4;
  z-index: 1;
}

.citadel-room-tab:hover {
  background: linear-gradient(0deg, rgba(255, 144, 48, 0.04) 0%, transparent 60%) !important;
}

.citadel-room-tab.active::after {
  width: 40px !important;
  height: 10px !important;
  filter: blur(6px) !important;
  opacity: 0.6 !important;
  background: linear-gradient(0deg, var(--citadel-flame-core), rgba(255, 144, 48, 0.3)) !important;
}

.citadel-room-badge {
  animation: vfx-pulse 2s ease-in-out infinite;
}

/* Button polish */
.citadel-btn:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 12px rgba(255, 144, 48, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.citadel-btn-gold:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 16px rgba(201, 168, 76, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ===== RECRUITING DROPDOWN FIX ===== */
#guildRecruitDropdown {
  position: relative;
  z-index: 100;
}

#guildRecruitMenu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 180px;
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  margin-top: 2px;
  z-index: 9999 !important;
}

.citadel-gate-epic .citadel-identity {
  overflow: visible !important;
}

.citadel-gate-epic .citadel-gate-actions {
  overflow: visible !important;
}

.citadel-gate-epic .citadel-gate-inner {
  overflow: visible !important;
}

.citadel-gate-epic {
  z-index: 10 !important;
  position: relative !important;
}

/* ===== CITADEL CASTLE VISUAL ===== */
.cit-castle {
  position: relative;
  width: 210px;
  height: 150px;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 4px;
  margin-right: 16px;
}

/* Ground / foundation base */
.cc-ground {
  position: absolute;
  bottom: 0;
  left: 5px;
  right: 5px;
  height: 12px;
  background: linear-gradient(180deg, #2a2622 0%, #221f1c 60%, #1a1816 100%);
  border-radius: 0 0 3px 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.cc-ground::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, rgba(74, 69, 64, 0.5) 20%, rgba(74, 69, 64, 0.5) 80%, transparent 95%);
}

/* --- Tier label --- */
.cc-tier-label {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--cc-b, #5c4a2e);
  opacity: 0.6;
  text-transform: uppercase;
  pointer-events: none;
}

/* --- Stone brick texture mixin (applied via background-image) --- */
/* Use on any castle surface: walls, towers, gatehouse, keep */

/* --- Gatehouse (always visible) --- */
.cc-gatehouse {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 52px;
  z-index: 3;
}

.cc-gh-body {
  position: absolute;
  inset: 0;
  background-color: #3e3a35;
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 5px,
      rgba(0, 0, 0, 0.12) 5px, rgba(0, 0, 0, 0) 6px),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 13px,
      rgba(0, 0, 0, 0.08) 13px, rgba(0, 0, 0, 0) 14px);
  background-size: 14px 6px;
  border: 1px solid #5a5550;
  border-bottom: none;
  border-radius: 2px 2px 0 0;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.04), inset 0 -2px 6px rgba(0, 0, 0, 0.3);
}

/* Offset every other row of bricks */
.cc-gh-body::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 13px,
      rgba(0, 0, 0, 0.08) 13px, rgba(0, 0, 0, 0) 14px);
  background-size: 14px 6px;
  background-position: 7px 3px;
  pointer-events: none;
}

.cc-gh-tag {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(0, 0, 0, 0.85);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

/* Gatehouse horizontal ledge */
.cc-gh-ledge {
  position: absolute;
  bottom: 28px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06) 20%, rgba(255, 255, 255, 0.06) 80%, transparent);
  pointer-events: none;
}

.cc-gh-arch {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 28px;
  background: #080604;
  border-radius: 10px 10px 0 0;
  border-top: 2px solid var(--cc-b, #5c4a2e);
  border-left: 2px solid var(--cc-b, #5c4a2e);
  border-right: 2px solid var(--cc-b, #5c4a2e);
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.6), 0 0 4px rgba(0, 0, 0, 0.5);
}

.cc-gh-gate {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 24px;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  /* Portcullis: vertical bars */
  background-image:
    repeating-linear-gradient(90deg,
      #4a3a28 0px, #4a3a28 1px,
      transparent 1px, transparent 3.5px),
    repeating-linear-gradient(0deg,
      #4a3a28 0px, #4a3a28 1px,
      transparent 1px, transparent 4px);
  opacity: 0.7;
}

.cc-gh-cap-l,
.cc-gh-cap-r {
  position: absolute;
  top: -5px;
  width: 8px;
  height: 8px;
  background: var(--cc-sg1, #4a4540);
  border: 1px solid var(--cc-sb, #5a5550);
  border-radius: 1px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cc-gh-cap-l {
  left: -3px;
}

.cc-gh-cap-r {
  right: -3px;
}

.cc-gh-cap-l::after,
.cc-gh-cap-r::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid var(--cc-g1, #5a5550);
}

/* --- Walls --- */
.cc-walls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 184px;
  height: 20px;
  background-color: #38342f;
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 5px,
      rgba(0, 0, 0, 0.12) 5px, rgba(0, 0, 0, 0) 6px),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 15px,
      rgba(0, 0, 0, 0.08) 15px, rgba(0, 0, 0, 0) 16px);
  background-size: 16px 6px;
  border: 1px solid #4a4540;
  border-bottom: none;
  z-index: 2;
  display: none;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.03), inset 0 -2px 4px rgba(0, 0, 0, 0.25);
}

/* Offset brick rows on walls */
.cc-walls::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 15px,
      rgba(0, 0, 0, 0.08) 15px, rgba(0, 0, 0, 0) 16px);
  background-size: 16px 6px;
  background-position: 8px 3px;
  pointer-events: none;
}

.cc-walls .cc-merlon {
  position: absolute;
  top: -5px;
  width: 8px;
  height: 5px;
  background-color: #4a4540;
  border: 1px solid #5a5550;
  border-bottom: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cc-walls .cc-merlon:nth-child(1) {
  left: 2px;
}

.cc-walls .cc-merlon:nth-child(2) {
  left: 22px;
}

.cc-walls .cc-merlon:nth-child(3) {
  left: 42px;
}

.cc-walls .cc-merlon:nth-child(4) {
  left: 62px;
}

.cc-walls .cc-merlon:nth-child(5) {
  left: 88px;
}

.cc-walls .cc-merlon:nth-child(6) {
  left: 114px;
}

.cc-walls .cc-merlon:nth-child(7) {
  left: 134px;
}

.cc-walls .cc-merlon:nth-child(8) {
  left: 154px;
}

.cc-walls .cc-merlon:nth-child(9) {
  left: 174px;
}

/* Wall banners (mini vexillums) */
.cc-wall-banner {
  position: absolute;
  top: -4px;
  z-index: 3;
  display: none;
}

.cit-castle[data-tier="5"] .cc-wall-banner,
.cit-castle[data-tier="6"] .cc-wall-banner,
.cit-castle[data-tier="7"] .cc-wall-banner {
  display: block;
}

.cc-wb-l {
  left: 32px;
}

.cc-wb-r {
  right: 32px;
}

.cc-wb-center {
  display: none;
}

.cc-wb-flag {
  position: absolute;
  top: -8px;
  left: -6px;
  width: 14px;
  height: 18px;
  overflow: hidden;
  z-index: 2;
}

.cc-wb-flag .vex-wrap {
  transform: scale(0.18);
  transform-origin: top left;
  width: 80px;
  height: 106px;
}

.cc-wb-flag .vex-frame {
  display: none;
}

.cc-wb-flag .war-banner-rod {
  display: none;
}

.cc-wb-flag .vex-wrap.war-banner {
  width: 140px !important;
  height: 100px !important;
}

/* Wide banner styles (4-7): widen flag container */
.cit-castle[data-vex-style="4"] .cc-wb-flag,
.cit-castle[data-vex-style="5"] .cc-wb-flag,
.cit-castle[data-vex-style="6"] .cc-wb-flag,
.cit-castle[data-vex-style="7"] .cc-wb-flag {
  width: 26px;
  height: 20px;
  left: -13px;
}

/* Wall horizontal ledge detail */
.cc-wall-ledge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  right: 4px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.05) 85%, transparent);
  pointer-events: none;
}

/* --- Towers --- */
.cc-tower {
  position: absolute;
  bottom: 10px;
  width: 26px;
  height: 58px;
  z-index: 4;
  display: none;
}

.cc-tower-l {
  left: 4px;
}

.cc-tower-r {
  right: 4px;
}

.cc-tower-body {
  position: absolute;
  inset: 8px 0 0 0;
  background-color: #403c37;
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 5px,
      rgba(0, 0, 0, 0.12) 5px, rgba(0, 0, 0, 0) 6px),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 10px,
      rgba(0, 0, 0, 0.08) 10px, rgba(0, 0, 0, 0) 11px);
  background-size: 11px 6px;
  border: 1px solid #5a5550;
  border-bottom: none;
  border-radius: 2px 2px 0 0;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.04), inset 0 -2px 4px rgba(0, 0, 0, 0.25);
}

/* Offset brick rows on towers */
.cc-tower-body::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 10px,
      rgba(0, 0, 0, 0.08) 10px, rgba(0, 0, 0, 0) 11px);
  background-size: 11px 6px;
  background-position: 5.5px 3px;
  border-radius: 2px 2px 0 0;
  pointer-events: none;
}

.cc-tower-cap {
  position: absolute;
  top: 4px;
  left: -2px;
  right: -2px;
  height: 6px;
  background: var(--cc-sg1, #3a2e1e);
  border: 1px solid var(--cc-sb, #5c4a2e);
  border-radius: 1px;
  border-bottom: 2px solid var(--cc-sb, #5c4a2e);
}

.cc-tower-spike {
  position: absolute;
  top: -8px;
  left: -2px;
  right: -2px;
  height: 12px;
  background: var(--cc-g1, #3a2e1e);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  display: none;
}

/* Small window near top of tower */
.cc-tower-window {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 6px;
  background: #0e0c0a;
  border-radius: 2px 2px 0 0;
  box-shadow: inset 0 0 2px 1px var(--cc-b, rgba(92, 74, 46, 0.2));
  z-index: 2;
}

.cc-arrow-slit {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 10px;
  background: #0e0c0a;
  display: none;
}

.cc-arrow-slit::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 2px;
  background: #0e0c0a;
}

/* --- Keep --- */
.cc-keep {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: none;
}

.cc-keep-body {
  position: relative;
  width: 72px;
  height: 40px;
  background-color: #3a3632;
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 5px,
      rgba(0, 0, 0, 0.12) 5px, rgba(0, 0, 0, 0) 6px),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 10px,
      rgba(0, 0, 0, 0.08) 10px, rgba(0, 0, 0, 0) 11px);
  background-size: 11px 6px;
  border: 1px solid #4a4540;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.04), inset 0 -2px 4px rgba(0, 0, 0, 0.25);
}

.cc-keep-window {
  width: 5px;
  height: 8px;
  background: #0e0c0a;
  border-radius: 2px 2px 0 0;
  box-shadow: inset 0 0 3px 1px var(--cc-b, rgba(92, 74, 46, 0.3));
}

.cc-keep-parapet {
  position: absolute;
  top: -6px;
  left: -2px;
  right: -2px;
  height: 6px;
  background: #3a3632;
  border: 1px solid #4a4540;
  border-bottom: none;
}

.cc-keep-merlon {
  position: absolute;
  top: -5px;
  width: 8px;
  height: 5px;
  background: #3a3632;
  border: 1px solid #4a4540;
  border-bottom: none;
}

.cc-keep-merlon:nth-child(1) {
  left: 2px;
}

.cc-keep-merlon:nth-child(2) {
  left: 18px;
}

.cc-keep-merlon:nth-child(3) {
  left: 50%;
  transform: translateX(-50%);
}

.cc-keep-merlon:nth-child(4) {
  right: 18px;
}

.cc-keep-merlon:nth-child(5) {
  right: 2px;
}

/* === Tier-based visibility === */
/* Tier 1: gatehouse only (default) */

/* Tier 2: shorter walls */
.cit-castle[data-tier="2"] .cc-walls {
  display: block;
  height: 14px;
}

/* Tier 3: short walls */
.cit-castle[data-tier="3"] .cc-walls {
  display: block;
}

/* Tier 4: medium walls */
.cit-castle[data-tier="4"] .cc-walls {
  display: block;
  height: 28px;
}

/* Tier 5+: tall walls */
.cit-castle[data-tier="5"] .cc-walls,
.cit-castle[data-tier="6"] .cc-walls,
.cit-castle[data-tier="7"] .cc-walls {
  display: block;
  height: 36px;
}

/* Tier 3+: left tower */
.cit-castle[data-tier="3"] .cc-tower-l,
.cit-castle[data-tier="4"] .cc-tower-l,
.cit-castle[data-tier="5"] .cc-tower-l,
.cit-castle[data-tier="6"] .cc-tower-l,
.cit-castle[data-tier="7"] .cc-tower-l {
  display: block;
}

/* Tier 5+: right tower */
.cit-castle[data-tier="5"] .cc-tower-r,
.cit-castle[data-tier="6"] .cc-tower-r,
.cit-castle[data-tier="7"] .cc-tower-r {
  display: block;
}

/* Tier 6+: keep */
.cit-castle[data-tier="6"] .cc-keep,
.cit-castle[data-tier="7"] .cc-keep {
  display: block;
  bottom: 18px;
}

.cit-castle[data-tier="6"] .cc-keep-body,
.cit-castle[data-tier="7"] .cc-keep-body {
  width: 80px;
  height: 52px;
}

/* Keep turrets (tier 7 only) */
.cc-keep-turret {
  position: absolute;
  bottom: 0;
  width: 14px;
  height: 66px;
  background-color: #3a3632;
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 5px,
      rgba(0, 0, 0, 0.12) 5px, rgba(0, 0, 0, 0) 6px),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 10px,
      rgba(0, 0, 0, 0.08) 10px, rgba(0, 0, 0, 0) 11px);
  background-size: 11px 6px;
  border: 1px solid #4a4540;
  border-bottom: none;
  display: none;
  z-index: 2;
}

.cc-keep-turret-l {
  left: -10px;
}

.cc-keep-turret-r {
  right: -10px;
}

.cc-keep-turret-cap {
  position: absolute;
  top: -3px;
  left: -1px;
  right: -1px;
  height: 4px;
  background: var(--cc-sg1, #3a2e1e);
  border: 1px solid var(--cc-sb, #5c4a2e);
  border-bottom: 2px solid var(--cc-sb, #5c4a2e);
}

.cc-keep-turret-spike {
  position: absolute;
  top: -11px;
  left: -1px;
  right: -1px;
  height: 10px;
  background: var(--cc-g1, #3a2e1e);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.cc-keep-turret-slit {
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 7px;
  background: #0e0c0a;
  box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.5);
  display: none;
}

.cc-keep-turret-slit::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 2px;
  background: #0e0c0a;
}

.cit-castle[data-tier="7"] .cc-keep-turret-slit {
  display: block;
}

.cit-castle[data-tier="7"] .cc-keep-turret {
  display: block;
}

/* Tier 4+: left tower spike */
.cit-castle[data-tier="4"] .cc-tower-l .cc-tower-spike,
.cit-castle[data-tier="5"] .cc-tower-l .cc-tower-spike,
.cit-castle[data-tier="6"] .cc-tower-l .cc-tower-spike,
.cit-castle[data-tier="7"] .cc-tower-l .cc-tower-spike {
  display: block;
}

/* Tier 6+: right tower spike */
.cit-castle[data-tier="6"] .cc-tower-r .cc-tower-spike,
.cit-castle[data-tier="7"] .cc-tower-r .cc-tower-spike {
  display: block;
}

/* Tier 7: arrow slits */
.cit-castle[data-tier="7"] .cc-arrow-slit {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE CHAT — Bottom Sheet Drawer
   Only active at ≤767.98px. Desktop/tablet completely untouched.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

  /* ── FAB Button (left side) ── */
  .chat-mobile-fab {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 16px;
    left: 16px;
    z-index: 10010;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid #c9aa71;
    background: linear-gradient(145deg, #2a1f14, #1a120b);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(201, 170, 113, 0.2);
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .chat-mobile-fab img {
    image-rendering: pixelated;
    width: 28px;
    height: 28px;
    pointer-events: none;
  }

  body.chat-sheet-active .chat-mobile-fab {
    display: none !important;
  }

  /* ── Unread Dot on FAB ── */
  .chat-mobile-unread-dot {
    display: none;
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e74c3c;
    border: 2px solid #1a120b;
    animation: unread-pulse 2s ease-in-out infinite;
  }

  /* ── Backdrop ── */
  .chat-mobile-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10011;
    background: rgba(14, 11, 7, 0.5);
  }

  body.chat-sheet-active .chat-mobile-backdrop {
    display: block;
  }

  /* ── Bottom Sheet (wrap) ── */
  ._chat-box-wrap_1pskg_111 {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    z-index: 10012 !important;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 16px 16px 0 0 !important;
    background: linear-gradient(180deg, #1e1510 0%, #14100c 100%) !important;
    border: 1px solid #c9aa7133 !important;
    border-bottom: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    align-items: stretch !important;
  }

  ._chat-box-wrap_1pskg_111.chat-mobile-open {
    transform: translateY(0);
  }

  /* Drag handle bar */
  ._chat-box-wrap_1pskg_111.chat-mobile-open::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #c9aa7155;
    margin: 8px auto 4px;
    flex-shrink: 0;
  }

  /* ── Tab Row inside sheet ── */
  .chat-tabs-row {
    order: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    max-width: 100vw !important;
    flex-shrink: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    padding: 0 4px !important;
    background: transparent !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  .chat-tabs-row>div {
    flex: 1 1 0 !important;
    float: none !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
  }

  .chat-tabs-row [class*="_chat-box-head_"] {
    height: 40px !important;
    min-height: 40px !important;
    max-width: none !important;
    width: 100% !important;
  }

  .chat-tabs-row .chat-tab-label {
    display: inline !important;
  }

  .chat-tabs-row .chat-filter-indicator {
    display: inline !important;
  }

  /* ── Chat Content inside sheet ── */
  #chatBoxContainer {
    order: 2 !important;
    width: 100% !important;
    max-width: 100vw !important;
    flex: 1 1 auto !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #chatBoxContainer>.osrs-chat-content {
    height: calc(40vh - 90px) !important;
    width: 100% !important;
    max-width: 100vw !important;
    border: none !important;
    border-radius: 0 !important;
    position: relative !important;
    max-height: none !important;
    min-height: auto !important;
    box-sizing: border-box !important;
  }

  ._chat-box-content_1pskg_478 {
    width: 100% !important;
    max-width: 100vw !important;
    max-height: none !important;
    height: auto !important;
  }

  .osrs-chat-viewport,
  ._viewport_1pskg_572 {
    position: relative !important;
    height: calc(40vh - 110px) !important;
    max-height: none !important;
    padding-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  ._overview_1pskg_893 {
    width: 100% !important;
  }

  #chatArea {
    width: 100% !important;
  }

  #chatArea .table {
    width: 100% !important;
    table-layout: fixed !important;
  }

  .scroll {
    max-height: calc(40vh - 130px) !important;
  }

  /* ── Chat Input — username + text field on one row ── */
  #chatInput {
    padding: 4px 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #chatInput .input-group {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  #chatDisplayName {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    margin-left: 0 !important;
    margin-right: 4px !important;
  }

  #chatMessage {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    font-size: 16px !important;
    /* Prevent iOS zoom on focus */
  }

  /* ── Context menus above sheet ── */
  .chat-filter-menu,
  #usernameContextMenu {
    z-index: 10020 !important;
  }

  /* ── Hide chat wrap by default (only shown via .chat-mobile-open) ── */
  ._chat-box-wrap_1pskg_111:not(.chat-mobile-open) #chatBoxContainer {
    display: none !important;
  }

  ._chat-box-wrap_1pskg_111:not(.chat-mobile-open) .chat-tabs-row {
    display: none !important;
  }
}

/* Castle responsive */
@media (max-width: 768px) {
  .cit-castle {
    display: none;
  }
}

/* ===== END GUILD CITADEL ===== */

/* ===== TRAVEL BLOCKING — only the town hub dashboard is disabled ===== */
body.traveling .df-hub {
  pointer-events: none !important;
  opacity: 0.4 !important;
  transition: opacity 0.3s ease !important;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* SPELLBOOK PANEL                                                           */
/* ═══════════════════════════════════════════════════════════════════════════ */

.spellbook-panel {
  padding: 4px !important;
  height: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* ── Filter bar ── */
.spellbook-filters {
  display: flex !important;
  gap: 2px !important;
  padding: 2px 0 4px !important;
}

.spellbook-filter-btn {
  flex: 1 !important;
  padding: 2px 4px !important;
  font-size: 9px !important;
  cursor: pointer !important;
  min-height: 0 !important;
  min-width: 0 !important;
  background: rgba(20, 15, 10, 0.6) !important;
  border: 1px solid #3a2a1a !important;
  color: #c4a882 !important;
  font-family: 'Cinzel', serif !important;
  text-align: center !important;
  transition: background 0.15s, border-color 0.15s !important;
}

.spellbook-filter-btn:hover {
  background: rgba(40, 30, 15, 0.7) !important;
  border-color: #6b5020 !important;
}

.spellbook-filter-btn.active {
  background: rgba(60, 40, 20, 0.8) !important;
  border-color: #8b6914 !important;
  color: #f5d78e !important;
}

.spellbook-filter-btn[data-filter="all"] {
  flex: 0.5 !important;
}

/* ── Spell grid ── */
.spellbook-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  grid-auto-rows: min-content !important;
  align-content: start !important;
  gap: 1px !important;
  overflow-y: auto !important;
  flex: 1 !important;
  min-height: 0 !important;
  padding: 1px !important;
  scrollbar-width: none !important;
}

.spellbook-grid::-webkit-scrollbar {
  display: none !important;
}

/* ── Spell slots ── */
.spell-slot {
  width: 100% !important;
  cursor: pointer !important;
  position: relative !important;
  background: rgba(20, 15, 10, 0.4) !important;
  border: 1px solid #2a1f14 !important;
  border-radius: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color 0.15s, background 0.15s !important;
}

.spell-slot:hover {
  border-color: #8b6914 !important;
  background: rgba(40, 30, 15, 0.6) !important;
}

.spell-slot img {
  width: 18px !important;
  height: 18px !important;
  image-rendering: pixelated !important;
}

/* ── Spell slot states ── */
.spell-slot.locked {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  filter: grayscale(80%) !important;
}

.spell-slot.coming-soon {
  opacity: 0.25 !important;
  cursor: help !important;
}

.spell-slot.no-runes {
  opacity: 0.6 !important;
}

.spell-slot.autocast-active {
  border-color: #4a9 !important;
  box-shadow: 0 0 4px rgba(68, 170, 153, 0.5) !important;
  background: rgba(30, 60, 50, 0.4) !important;
}

.spell-slot.spell-hidden {
  display: none !important;
}

/* ── Level requirement overlay ── */
.spell-level-req {
  position: absolute !important;
  bottom: 0 !important;
  right: 1px !important;
  font-size: 8px !important;
  color: #ff6a6a !important;
  text-shadow: 0 0 2px #000, 1px 1px 1px #000 !important;
  font-weight: bold !important;
  line-height: 1 !important;
}

/* ── Spell tooltip ── */
.spell-tooltip {
  position: absolute !important;
  z-index: 10000 !important;
  background: rgba(15, 10, 5, 0.95) !important;
  border: 1px solid #5c4a2e !important;
  border-radius: 3px !important;
  padding: 6px 8px !important;
  max-width: 180px !important;
  pointer-events: none !important;
  font-size: 11px !important;
  color: #c4a882 !important;
  line-height: 1.3 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
}

.spell-tip-name {
  font-weight: bold !important;
  color: #f5d78e !important;
  margin-bottom: 2px !important;
  font-size: 12px !important;
}

.spell-tip-level {
  font-weight: normal !important;
  color: #9a8a6a !important;
  font-size: 10px !important;
}

.spell-tip-desc {
  color: #a89878 !important;
  font-size: 10px !important;
  margin-bottom: 3px !important;
}

.spell-tip-hit {
  color: #e8c87a !important;
  font-size: 10px !important;
  margin-bottom: 2px !important;
}

.spell-tip-runes {
  font-size: 10px !important;
  margin-bottom: 2px !important;
}

.spell-tip-runes .rune-have {
  color: #5dba5d !important;
}

.spell-tip-runes .rune-need {
  color: #e85555 !important;
}

.spell-tip-quest {
  color: #e8a855 !important;
  font-size: 10px !important;
  font-style: italic !important;
}

.spell-tip-soon {
  color: #888 !important;
  font-size: 10px !important;
  font-style: italic !important;
}

.spell-tip-cooldown {
  color: #e85555 !important;
  font-size: 10px !important;
  font-weight: bold !important;
  margin-top: 3px !important;
}

.spell-slot.on-cooldown {
  opacity: 0.4 !important;
  filter: grayscale(50%) !important;
}

.spell-slot.on-cooldown:hover {
  opacity: 0.55 !important;
}

/* ===== END SPELLBOOK PANEL ===== */

/* =====================================================
   DUNGEON MODAL
   ===================================================== */

.df-dungeon-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.df-dungeon-modal-content {
  background: linear-gradient(180deg, var(--df-bg-card), var(--df-bg-deep));
  border: 2px solid var(--df-gold-dark);
  border-radius: 10px;
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(201, 168, 76, 0.08);
}

.df-dungeon-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--df-border);
  background: rgba(201, 168, 76, 0.04);
  border-radius: 10px 10px 0 0;
}

.df-dungeon-modal-header h3 {
  margin: 0;
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: 16px;
  color: var(--df-gold);
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.3);
}

.df-dungeon-close {
  background: none;
  border: none;
  color: var(--df-text-dim);
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.2s;
}

.df-dungeon-close:hover {
  color: var(--df-text-bright);
}

.df-dungeon-modal-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.df-dungeon-loading {
  text-align: center;
  color: var(--df-text-dim);
  padding: 30px;
  font-size: 13px;
}

/* Dungeon Cards */
.df-dungeon-card {
  background: rgba(201, 168, 76, 0.03);
  border: 1px solid var(--df-border);
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.df-dungeon-card:last-child {
  margin-bottom: 0;
}

.df-dungeon-card:hover {
  border-color: rgba(201, 168, 76, 0.3);
  box-shadow: 0 2px 12px rgba(201, 168, 76, 0.06);
}

.df-dungeon-card.df-dungeon-locked {
  opacity: 0.6;
}

.df-dungeon-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.df-dg-mini-vex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 28px;
  border-radius: 2px;
  margin-right: 8px;
  flex-shrink: 0;
  font-size: 10px;
}

.df-dungeon-name {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--df-text-bright);
  flex: 1;
}

.df-dungeon-reqs {
  margin-bottom: 8px;
}

.df-dungeon-req {
  padding: 2px 0;
  font-size: 11px;
}

.df-req-met {
  color: #4ade80;
}

.df-req-met i {
  margin-right: 4px;
}

.df-req-not-met {
  color: #f87171;
}

.df-req-not-met i {
  margin-right: 4px;
}

.df-dungeon-cost {
  font-size: 11px;
  margin-bottom: 6px;
}

.df-dungeon-notes {
  font-size: 11px;
  color: var(--df-text-dim);
  margin-bottom: 8px;
}

.df-dungeon-enter-btn {
  display: block;
  width: 100%;
  padding: 8px 16px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--df-bg-deepest);
  background: linear-gradient(180deg, var(--df-gold), var(--df-gold-dark));
  border: 1px solid var(--df-gold-dark);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.df-dungeon-enter-btn:hover {
  background: linear-gradient(180deg, var(--df-gold-light), var(--df-gold));
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.3);
}

.df-dungeon-enter-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #444;
  border-color: #555;
  color: #888;
}

.df-dungeon-enter-btn:disabled:hover {
  box-shadow: none;
}

/* Membership Badges */
.df-badge-p2p {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: linear-gradient(180deg, #d4a845, #a08030);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  flex-shrink: 0;
}

.df-badge-f2p {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background: rgba(160, 160, 170, 0.2);
  color: #a0a0aa;
  border: 1px solid rgba(160, 160, 170, 0.3);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  flex-shrink: 0;
}

/* =====================================================
   GUILD TRAVEL SECTION (in travel dropdown)
   ===================================================== */

.df-hub-travel-section-header {
  padding: 8px 14px 6px;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--df-gold);
  border-top: 1px solid var(--df-border);
  margin-top: 4px;
  opacity: 0.7;
}

.df-hub-travel-section-header:first-child {
  border-top: none;
  margin-top: 0;
}

.df-hub-travel-section-header i {
  margin-right: 4px;
  font-size: 10px;
}

.df-hub-guild-locked {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}

.df-hub-guild-locked:hover {
  background: none;
}

.df-guild-req-note {
  font-size: 9px;
  color: #f87171;
  font-style: italic;
  margin-left: auto;
  white-space: nowrap;
}

.df-guild-req-note i {
  margin-right: 3px;
  font-size: 8px;
}

/* Dungeon button style (in hub banner) */
.df-hub-dungeon-btn {
  background: rgba(140, 40, 30, 0.15);
  border-color: rgba(200, 60, 50, 0.3);
  color: #e88070;
}

.df-hub-dungeon-btn:hover {
  background: rgba(160, 50, 35, 0.25);
  border-color: rgba(230, 70, 60, 0.5);
  color: #ffa090;
}

/* Guild button in hub banner */
.df-hub-guild-btn {
  background: rgba(80, 140, 60, 0.15);
  border-color: rgba(80, 140, 60, 0.3);
  color: #7cc06a;
}

.df-hub-guild-btn:hover {
  background: rgba(90, 160, 70, 0.25);
  border-color: rgba(100, 180, 80, 0.5);
  color: #9dd88e;
}

/* Exit guild button */
.df-hub-exit-guild-btn {
  background: rgba(200, 120, 40, 0.15);
  border-color: rgba(200, 120, 40, 0.3);
  color: #e0a050;
}

.df-hub-exit-guild-btn:hover {
  background: rgba(220, 140, 50, 0.25);
  border-color: rgba(240, 160, 60, 0.5);
  color: #f0c070;
}

/* Exit dungeon button */
.df-hub-exit-dungeon-btn {
  background: rgba(200, 120, 40, 0.15);
  border-color: rgba(200, 120, 40, 0.3);
  color: #e0a050;
}

.df-hub-exit-dungeon-btn:hover {
  background: rgba(220, 140, 50, 0.25);
  border-color: rgba(240, 160, 60, 0.5);
  color: #f0c070;
}

/* =====================================================
   GUILD MODAL (mirrors dungeon modal)
   ===================================================== */
.df-guild-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.df-guild-modal-content {
  background: linear-gradient(180deg, var(--df-bg-card), var(--df-bg-deep));
  border: 2px solid var(--df-gold-dark);
  border-radius: 10px;
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(201, 168, 76, 0.08);
}

.df-guild-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--df-border);
  background: rgba(80, 140, 60, 0.06);
  border-radius: 10px 10px 0 0;
}

.df-guild-modal-header h3 {
  margin: 0;
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: 16px;
  color: var(--df-gold);
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.3);
}

.df-guild-close {
  background: none;
  border: none;
  color: var(--df-text-dim);
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.2s;
}

.df-guild-close:hover {
  color: var(--df-text-bright);
}

.df-guild-modal-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.df-guild-loading {
  text-align: center;
  color: var(--df-text-dim);
  padding: 30px;
  font-size: 13px;
}

/* Guild Cards */
.df-guild-card {
  background: rgba(80, 140, 60, 0.03);
  border: 1px solid var(--df-border);
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.df-guild-card:last-child {
  margin-bottom: 0;
}

.df-guild-card:hover {
  border-color: rgba(80, 140, 60, 0.3);
  box-shadow: 0 2px 12px rgba(80, 140, 60, 0.06);
}

.df-guild-card.df-guild-locked {
  opacity: 0.6;
}

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

.df-guild-name {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--df-text-bright);
  flex: 1;
}

.df-guild-reqs {
  margin-bottom: 8px;
}

.df-guild-req {
  padding: 2px 0;
  font-size: 11px;
}

.df-guild-enter-btn {
  display: block;
  width: 100%;
  padding: 8px 16px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #1a1a1a;
  background: linear-gradient(180deg, #6abf5e, #4a9040);
  border: 1px solid #4a9040;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.df-guild-enter-btn:hover {
  background: linear-gradient(180deg, #7cd070, #5aa050);
  box-shadow: 0 0 12px rgba(80, 140, 60, 0.3);
}

.df-guild-enter-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #444;
  border-color: #555;
  color: #888;
}

.df-guild-enter-btn:disabled:hover {
  box-shadow: none;
}

/* Mobile responsive: icon-only for guild/exit buttons */
@media (max-width: 991px) {

  .df-hub-guild-btn span,
  .df-hub-guild-btn .btn-label {
    font-size: 0;
  }

  .df-hub-exit-guild-btn #hubExitGuildLabel {
    font-size: 0;
  }

  .df-hub-exit-dungeon-btn #hubExitDungeonLabel {
    font-size: 0;
  }
}

/* ===== LOOT BAG & GRAVESTONE ALERT BANNERS ===== */

.df-alert-banner {
  width: 100%;
  padding: 8px 14px;
  border-radius: 6px;
  margin-bottom: 8px;
  background: rgba(30, 22, 14, 0.85);
  border: 1px solid #5a4a3a;
  animation: df-alert-pulse 3s ease-in-out infinite;
}

@keyframes df-alert-pulse {

  0%,
  100% {
    border-color: #5a4a3a;
  }

  50% {
    border-color: #7a6a5a;
  }
}

.df-alert-lootbag {
  border-image: linear-gradient(90deg, #8b6914, #c8a83e, #8b6914) 1;
}

.df-alert-gravestone {
  border-image: linear-gradient(90deg, #6b2222, #a04040, #6b2222) 1;
}

.df-alert-banner-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.df-alert-icon {
  font-size: 16px;
  color: #c8a83e;
  flex-shrink: 0;
}

.df-alert-icon-img {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.df-alert-btn-icon {
  width: 14px;
  height: 14px;
  image-rendering: pixelated;
  vertical-align: middle;
  margin-right: 2px;
}

.df-alert-gravestone .df-alert-icon {
  color: #a04040;
}

.df-alert-text {
  color: #c8b89a;
  font-size: 13px;
  flex: 1;
  min-width: 100px;
}

.df-alert-timer {
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  font-size: 14px;
  color: #e8a83e;
  flex-shrink: 0;
}

.df-alert-gravestone .df-alert-timer {
  color: #e05050;
}

.df-alert-btn {
  background: rgba(40, 30, 20, 0.9);
  border: 1px solid #5a4a3a;
  color: #c8b89a;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.df-alert-btn:hover {
  background: rgba(60, 45, 30, 0.95);
  border-color: #8a7a5a;
  color: #e8d8b0;
}

/* ===== LOOT BAG & GRAVESTONE MODAL HEADERS ===== */

.df-lootbag-header {
  background: linear-gradient(180deg, #4a3a1a, #2e2010) !important;
  border-bottom: 2px solid #8b6914 !important;
}

.df-gravestone-header {
  background: linear-gradient(180deg, #3a1a1a, #2e1010) !important;
  border-bottom: 2px solid #6b2222 !important;
}

.df-lootbag-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  margin-right: 12px;
  color: #c8b89a;
  font-size: 13px;
}

/* ===== LOOT BAG & GRAVESTONE ITEM GRIDS ===== */

.df-lootbag-grid,
.df-gravestone-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 4px;
  min-height: 200px;
}

.df-lootbag-slot,
.df-gravestone-slot {
  position: relative;
  aspect-ratio: 1;
  background: rgba(20, 15, 10, 0.6);
  border: 1px solid #3a3020;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.df-lootbag-slot:hover,
.df-gravestone-slot:hover {
  background: rgba(50, 40, 25, 0.8);
  border-color: #8a7a5a;
}

.df-lootbag-slot.empty,
.df-gravestone-slot.empty {
  cursor: default;
  opacity: 0.3;
}

.df-lootbag-slot.empty:hover,
.df-gravestone-slot.empty:hover {
  background: rgba(20, 15, 10, 0.6);
  border-color: #3a3020;
}

.df-lootbag-slot img,
.df-gravestone-slot img {
  max-width: 80%;
  max-height: 80%;
  image-rendering: pixelated;
}

.df-lootbag-slot .item-qty,
.df-gravestone-slot .item-qty {
  position: absolute;
  bottom: 1px;
  left: 3px;
  font-size: 10px;
  color: #ff0;
  text-shadow: 1px 1px 1px #000, -1px -1px 1px #000;
  font-weight: bold;
}

/* Equipped item highlight in gravestone */
.df-gravestone-slot.df-gravestone-equipped {
  border-color: #8b6914;
  box-shadow: inset 0 0 6px rgba(200, 168, 62, 0.3);
}

.df-gravestone-slot.df-gravestone-equipped::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  background: #c8a83e;
  border-radius: 50%;
}

/* ===== EQUIPMENT ITEM AMOUNT (match inventory styling) ===== */
.equip .item-amount {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 10px;
  font-weight: bold;
  font-family: 'RuneScape Small', Arial, sans-serif;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  z-index: 1;
}

.equip .item-amount.yellow {
  color: #ffff00;
}

.equip .item-amount.white {
  color: #ffffff;
}

.equip .item-amount.green {
  color: #00ff80;
}

/* ===== PLAYERS NEARBY TAB (interface panel) ===== */
/* Miniature vexillum for the tab button */
.ts-vex-tab {
  width: 18px !important;
  height: 24px !important;
  margin: 4px auto 0 !important;
}

.ts-vex-tab .vex-pole {
  width: 1px !important;
}

.ts-vex-tab .vex-pole::before {
  margin-left: -2px !important;
  border-left-width: 2px !important;
  border-right-width: 2px !important;
  border-bottom-width: 3px !important;
  top: -3px !important;
}

.ts-vex-tab .vex-crossbar {
  top: 3px !important;
  height: 1px !important;
  left: 1px !important;
  right: 1px !important;
}

.ts-vex-tab .vex-crossbar::before,
.ts-vex-tab .vex-crossbar::after {
  width: 2px !important;
  height: 3px !important;
  top: -1px !important;
}

.ts-vex-tab .vex-banner {
  top: 4px !important;
  left: 1px !important;
  right: 1px !important;
  bottom: 1px !important;
}

.ts-vex-tab .vex-emblem {
  font-size: 7px !important;
  margin-top: 0 !important;
}

.ts-vex-tab .vex-fringe {
  height: 2px !important;
}

/* Search input */
.players-tab-search-wrap {
  padding: 4px 6px;
}

.players-tab-search {
  width: 100%;
  background: #252014 !important;
  border: 1px solid rgba(201, 168, 76, 0.18) !important;
  border-radius: 3px;
  color: #c4b48a !important;
  font-size: 11px;
  padding: 4px 6px;
  outline: none;
}

.players-tab-search::placeholder {
  color: rgba(201, 168, 76, 0.4);
  font-size: 9px;
}

.players-tab-search::-webkit-input-placeholder {
  color: rgba(201, 168, 76, 0.4);
  font-size: 9px;
}

.players-tab-search::-moz-placeholder {
  color: rgba(201, 168, 76, 0.4);
  font-size: 9px;
  opacity: 1;
}

.players-tab-search:focus {
  border-color: rgba(201, 168, 76, 0.4) !important;
}

/* Player entries */
.players-tab-entry {
  display: flex !important;
  align-items: center;
  gap: 4px;
  padding: 3px 6px !important;
  font-size: 11px;
  cursor: pointer;
}

.players-tab-entry:hover {
  background: rgba(201, 168, 76, 0.08) !important;
}

.players-tab-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(232, 220, 196, 0.85);
}

.players-tab-iron {
  width: 12px;
  height: 12px;
  margin-right: 3px;
  vertical-align: middle;
}

.players-tab-combat {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--df-gold);
  font-size: 10px;
  font-family: 'Cinzel', serif;
  line-height: 1.3;
}

.players-tab-combat i {
  font-size: 8px;
  opacity: 0.7;
}

.players-tab-cb-icon {
  width: 12px;
  height: 12px;
  image-rendering: pixelated;
  vertical-align: middle;
}

.players-tab-trade-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(46, 204, 113, 0.3);
  border-radius: 3px;
  color: #2ecc71;
  font-size: 10px;
  padding: 1px 6px;
  cursor: pointer;
  line-height: 1.3;
  transition: all 0.15s;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
}

.players-tab-trade-btn:hover {
  background: rgba(46, 204, 113, 0.15);
  border-color: rgba(46, 204, 113, 0.5);
  color: #3ddc84;
}

.players-tab-empty {
  text-align: center;
  color: rgba(201, 168, 76, 0.45) !important;
  font-style: italic;
  font-size: 11px;
  padding: 12px 6px !important;
}

/* Pagination */
.players-tab-pagination {
  text-align: center;
  padding: 4px 0;
}

.players-tab-pagination .pagination {
  margin: 0;
}

.players-tab-pagination .pagination>li>a {
  background: #252014 !important;
  border-color: rgba(201, 168, 76, 0.18) !important;
  color: #c4b48a !important;
  padding: 2px 7px;
  font-size: 10px;
}

.players-tab-pagination .pagination>li>a:hover {
  background: rgba(201, 168, 76, 0.1) !important;
  color: var(--df-gold) !important;
}

.players-tab-pagination .pagination>.active>a,
.players-tab-pagination .pagination>.active>a:hover {
  background: rgba(201, 168, 76, 0.2) !important;
  border-color: rgba(201, 168, 76, 0.4) !important;
  color: var(--df-gold) !important;
}

/* ===== TRADE MODAL ===== */
.df-trade-modal {
  z-index: 10010 !important;
  pointer-events: none !important;
}

.df-trade-modal .modal-dialog {
  pointer-events: auto !important;
  max-width: 720px !important;
  margin: 30px auto !important;
}

.df-trade-modal .modal-content {
  background: linear-gradient(180deg, var(--df-bg-card), var(--df-bg-deep)) !important;
  border: 2px solid var(--df-border-bright) !important;
  border-radius: 8px !important;
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.05), 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(201, 168, 76, 0.05) !important;
  overflow: hidden !important;
  color: var(--df-text, #d4c9a8) !important;
}

.trade-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  background:
    radial-gradient(ellipse 80% 120% at 50% 0%, rgba(201, 168, 76, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card)) !important;
  border-bottom: 1px solid var(--df-border) !important;
  position: relative !important;
}

.trade-header-title {
  font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--df-gold) !important;
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.3) !important;
  letter-spacing: 1px !important;
  margin: 0 !important;
}

.trade-header-title i {
  margin-right: 8px !important;
  font-size: 16px !important;
}

.trade-phase-label {
  font-size: 11px !important;
  color: var(--df-text-dim, #8a7e60) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-family: 'Cinzel', serif !important;
}

.trade-body {
  padding: 16px 20px !important;
}

.trade-panels {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.trade-panel {
  flex: 1 !important;
  border: 1px solid var(--df-border, #3d3523) !important;
  border-radius: 4px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  display: flex !important;
  flex-direction: column !important;
}

.trade-panel-header {
  font-family: 'Cinzel', serif !important;
  font-size: 12px !important;
  color: var(--df-gold, #c9a84c) !important;
  padding: 6px 10px !important;
  border-bottom: 1px solid var(--df-border, #3d3523) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.trade-items {
  min-height: 120px !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  padding: 6px !important;
}

.trade-offer-empty {
  text-align: center !important;
  color: var(--df-text-dim, #8a7e60) !important;
  font-style: italic !important;
  padding: 40px 10px !important;
  font-size: 12px !important;
}

.trade-offer-item {
  display: flex !important;
  align-items: center !important;
  padding: 3px 6px !important;
  border-radius: 3px !important;
  gap: 6px !important;
  font-size: 12px !important;
  transition: background 0.15s !important;
}

.trade-removable {
  cursor: pointer !important;
}

.trade-removable:hover {
  background: rgba(231, 76, 60, 0.15) !important;
}

.trade-offer-icon {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
}

.trade-offer-name {
  color: var(--df-text, #d4c9a8) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.trade-offer-amount {
  color: #ffff00 !important;
  font-size: 11px !important;
}

.trade-offer-value {
  color: var(--df-text-dim, #8a7e60) !important;
  font-size: 10px !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}

.trade-panel-footer {
  display: flex !important;
  justify-content: space-between !important;
  padding: 4px 10px !important;
  border-top: 1px solid var(--df-border, #3d3523) !important;
  font-size: 10px !important;
}

.trade-value {
  color: var(--df-gold, #c9a84c) !important;
}

.trade-slots {
  color: var(--df-text-dim, #8a7e60) !important;
}

.trade-slots-warning {
  color: #e74c3c !important;
  font-weight: bold !important;
}

.trade-inventory-section {
  border: 1px solid var(--df-border, #3d3523) !important;
  border-radius: 4px !important;
  background: rgba(0, 0, 0, 0.15) !important;
  margin-bottom: 12px !important;
}

.trade-inventory-header {
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  color: var(--df-gold, #c9a84c) !important;
  padding: 5px 10px !important;
  border-bottom: 1px solid var(--df-border, #3d3523) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.trade-inventory {
  display: flex !important;
  flex-wrap: wrap !important;
  padding: 4px !important;
  gap: 2px !important;
}

.trade-inv-item {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(61, 53, 35, 0.5) !important;
  border-radius: 2px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  cursor: pointer !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color 0.15s !important;
}

.trade-inv-item:hover {
  border-color: var(--df-gold, #c9a84c) !important;
}

.trade-inv-item img {
  max-width: 32px !important;
  max-height: 32px !important;
}

.trade-inv-untradable {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

.trade-inv-untradable:hover {
  border-color: #e74c3c !important;
}

.trade-inv-offered {
  opacity: 0.25 !important;
  cursor: not-allowed !important;
}

.trade-inv-offered:hover {
  border-color: rgba(61, 53, 35, 0.5) !important;
}

.trade-inv-empty {
  cursor: default !important;
  opacity: 0.3 !important;
}

.trade-inv-empty:hover {
  border-color: rgba(61, 53, 35, 0.5) !important;
}

.trade-inv-amount {
  position: absolute !important;
  top: 0 !important;
  left: 2px !important;
  font-size: 9px !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 !important;
  pointer-events: none !important;
}

.trade-status-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 0 0 !important;
}

.trade-status {
  color: var(--df-gold, #c9a84c) !important;
  font-size: 12px !important;
  font-style: italic !important;
  text-shadow: 0 0 6px rgba(201, 168, 76, 0.4) !important;
}

.trade-buttons {
  display: flex !important;
  gap: 8px !important;
}

.trade-btn-accept {
  background: rgba(46, 204, 113, 0.15) !important;
  border: 1px solid rgba(46, 204, 113, 0.4) !important;
  color: #2ecc71 !important;
  font-family: 'Cinzel', serif !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 11px !important;
  padding: 5px 16px !important;
}

.trade-btn-accept:hover:not(:disabled) {
  background: rgba(46, 204, 113, 0.3) !important;
  color: #3ddc84 !important;
}

.trade-btn-accept:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.trade-btn-decline {
  background: rgba(231, 76, 60, 0.15) !important;
  border: 1px solid rgba(231, 76, 60, 0.4) !important;
  color: #e74c3c !important;
  font-family: 'Cinzel', serif !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 11px !important;
  padding: 5px 16px !important;
}

.trade-btn-decline:hover {
  background: rgba(231, 76, 60, 0.3) !important;
  color: #ff6b6b !important;
}

/* Trade offer grid mode (first screen — inventory-style boxes) */
.trade-items-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
  padding: 4px !important;
}

.trade-grid-item {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(61, 53, 35, 0.5) !important;
  border-radius: 2px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color 0.15s !important;
}

.trade-grid-item img {
  max-width: 32px !important;
  max-height: 32px !important;
}

.trade-grid-item.trade-removable {
  cursor: pointer !important;
}

.trade-grid-item.trade-removable:hover {
  border-color: #e74c3c !important;
  background: rgba(231, 76, 60, 0.1) !important;
}

.trade-grid-amount {
  position: absolute !important;
  top: 0 !important;
  left: 2px !important;
  font-size: 9px !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 !important;
  pointer-events: none !important;
}

/* Trade offer list mode (confirm screen) */
.trade-items-list .trade-offer-item {
  display: flex !important;
  align-items: center !important;
  padding: 3px 6px !important;
  border-radius: 3px !important;
  gap: 6px !important;
  font-size: 12px !important;
}

/* Trade item flash animation */
@keyframes trade-item-flash {
  0% {
    filter: brightness(1) drop-shadow(0 0 0 transparent);
  }

  30% {
    filter: brightness(1.6) drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
  }

  100% {
    filter: brightness(1) drop-shadow(0 0 0 transparent);
  }
}

.trade-item-flash {
  animation: trade-item-flash 0.6s ease-out !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {

  .df-lootbag-grid,
  .df-gravestone-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .df-alert-banner-content {
    font-size: 12px;
  }

  .trade-panels {
    flex-direction: column;
  }

  .df-trade-modal .modal-dialog {
    width: 98% !important;
    margin: 10px auto !important;
  }
}

/* ===== MODCP — COMMAND CENTER (v2 Redesign) ===== */

/* Keyframe Animations */
@keyframes modcp-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes modcp-flash {
  0% {
    background-color: rgba(237, 139, 54, 0.3);
  }

  100% {
    background-color: transparent;
  }
}

@keyframes modcp-glow {

  0%,
  100% {
    box-shadow: 0 0 5px rgba(255, 170, 0, 0.2);
  }

  50% {
    box-shadow: 0 0 15px rgba(255, 170, 0, 0.4);
  }
}

@keyframes modcp-scanline {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 4px;
  }
}

@keyframes modcp-slide-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }

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

/* === Integrated Header Bar (replaces banner + live-bar) === */
.modcp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(16, 12, 8, 0.97) 0%, rgba(30, 24, 16, 0.95) 50%, rgba(20, 15, 10, 0.97) 100%);
  border: 1px solid var(--df-border);
  border-bottom: 2px solid var(--df-gold);
  border-radius: 4px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.modcp-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.06) 2px, rgba(0, 0, 0, 0.06) 4px);
  pointer-events: none;
}

.modcp-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.modcp-header-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--df-gold);
  text-transform: uppercase;
  letter-spacing: 3px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modcp-header-title i {
  font-size: 20px;
  animation: modcp-pulse 2s ease-in-out infinite;
}

.modcp-header-subtitle {
  font-size: 9px;
  color: var(--df-text-dim);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: 'Courier New', monospace;
}

.modcp-header-stats {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  z-index: 1;
}

.modcp-header-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 14px;
}

.modcp-header-stat .header-stat-label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--df-text-dim);
  font-family: 'Courier New', monospace;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.modcp-header-stat .header-stat-value {
  font-size: 18px;
  font-weight: bold;
  color: var(--df-gold);
  font-family: 'Courier New', monospace;
  line-height: 1.2;
}

.modcp-header-stat .header-stat-value.warn {
  color: #ed8936;
}

.modcp-header-stat .header-stat-value.crit {
  color: #e53e3e;
}

.modcp-header-stat .live-indicator {
  width: 5px;
  height: 5px;
  background: #48bb78;
  border-radius: 50%;
  display: inline-block;
  animation: modcp-pulse 1.5s ease-in-out infinite;
}

.modcp-header-divider {
  width: 1px;
  height: 28px;
  background: var(--df-border);
}

/* === Primary Stat Cards (3 big) === */
.modcp-primary-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.modcp-primary-card {
  flex: 1;
  padding: 18px 16px;
  background: var(--df-bg-card);
  border: 1px solid var(--df-border);
  border-radius: 4px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.modcp-primary-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.modcp-primary-card.reports::before {
  background: linear-gradient(90deg, #ed8936, rgba(237, 139, 54, 0.3));
}

.modcp-primary-card.escalated::before {
  background: linear-gradient(90deg, #e53e3e, rgba(229, 62, 62, 0.3));
}

.modcp-primary-card.bans::before {
  background: linear-gradient(90deg, #e53e3e, rgba(229, 62, 62, 0.3));
}

.modcp-primary-card:hover {
  border-color: var(--df-border-bright);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.modcp-primary-card .primary-card-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 36px;
  opacity: 0.06;
  color: var(--df-gold);
}

.modcp-primary-card .primary-card-number {
  font-size: 36px;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  line-height: 1;
  color: var(--df-gold);
  position: relative;
}

.modcp-primary-card.reports .primary-card-number {
  color: #ed8936;
}

.modcp-primary-card.escalated .primary-card-number {
  color: #e53e3e;
}

.modcp-primary-card.bans .primary-card-number {
  color: #e53e3e;
}

.modcp-primary-card .primary-card-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--df-text-dim);
  margin-top: 6px;
  position: relative;
}

/* === Secondary Metric Pills === */
.modcp-metric-pills {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.modcp-metric-pill {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--df-bg-deep);
  border: 1px solid var(--df-border);
  border-radius: 20px;
  font-size: 11px;
}

.modcp-metric-pill i {
  color: var(--df-text-dim);
  font-size: 11px;
}

.modcp-metric-pill .metric-pill-value {
  color: var(--df-gold);
  font-weight: bold;
  font-family: 'Courier New', monospace;
  font-size: 14px;
}

.modcp-metric-pill .metric-pill-label {
  color: var(--df-text-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* === Navigation Pills (replaces Quick Links) === */
.modcp-nav-pills {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.modcp-nav-pill {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid var(--df-border);
  background: var(--df-bg-card);
  color: var(--df-text-dim);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.modcp-nav-pill:hover {
  border-color: var(--df-gold);
  color: var(--df-gold);
  background: rgba(201, 168, 76, 0.08);
}

.modcp-nav-pill.warn {
  color: #ed8936;
  border-color: rgba(237, 139, 54, 0.3);
}

.modcp-nav-pill.warn:hover {
  border-color: #ed8936;
  background: rgba(237, 139, 54, 0.1);
}

.modcp-nav-pill.crit {
  color: #e53e3e;
  border-color: rgba(229, 62, 62, 0.3);
}

.modcp-nav-pill.crit:hover {
  border-color: #e53e3e;
  background: rgba(229, 62, 62, 0.1);
}

/* Dashboard grid layout */
.modcp-dashboard-grid {
  display: flex;
  gap: 16px;
}

.modcp-dashboard-left {
  flex: 3;
  min-width: 0;
}

.modcp-dashboard-right {
  flex: 2;
  min-width: 0;
}

/* Section container */
.modcp-section {
  background: var(--df-bg-card);
  border: 1px solid var(--df-border);
  border-radius: 4px;
  margin-bottom: 14px;
  overflow: hidden;
}

.modcp-section-title {
  color: var(--df-gold);
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 10px 15px;
  border-bottom: 1px solid var(--df-border);
  background: rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 8px;
}

.modcp-section-title i {
  font-size: 12px;
  color: var(--df-text-dim);
}

.modcp-section-title .section-title-link {
  margin-left: auto;
  font-size: 10px;
  color: var(--df-text-dim);
  text-decoration: none;
  letter-spacing: 0;
  transition: color 0.2s;
}

.modcp-section-title .section-title-link:hover {
  color: var(--df-gold);
}

/* Live activity feed (deep terminal style) */
.modcp-feed-section {
  border-color: rgba(72, 187, 120, 0.15);
}

.modcp-feed {
  max-height: 400px;
  overflow-y: auto;
  padding: 0;
  background: #111008;
  font-family: 'Courier New', monospace;
  font-size: 11px;
}

.modcp-feed-empty {
  padding: 20px;
  text-align: center;
  color: var(--df-text-dim);
  font-size: 12px;
  font-family: 'Courier New', monospace;
}

.modcp-feed-empty i {
  margin-right: 6px;
}

.modcp-feed-entry {
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.025);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  transition: background-color 0.3s ease;
  cursor: pointer;
  animation: modcp-slide-in 0.3s ease-out;
}

.modcp-feed-entry:hover {
  background: rgba(72, 187, 120, 0.04);
}

.modcp-feed-entry.new {
  animation: modcp-flash 2s ease-out;
}

.modcp-feed-entry .feed-time {
  color: #48bb78;
  white-space: nowrap;
  min-width: 65px;
  font-size: 10px;
  opacity: 0.8;
}

.modcp-feed-entry .feed-icon {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.modcp-feed-entry .feed-icon.report {
  color: #ed8936;
}

.modcp-feed-entry .feed-icon.punish {
  color: #e53e3e;
}

.modcp-feed-entry .feed-icon.resolve {
  color: #48bb78;
}

.modcp-feed-entry .feed-icon.action {
  color: #4299e1;
}

.modcp-feed-entry .feed-icon.lookup {
  color: var(--df-text-dim);
}

.modcp-feed-entry .feed-icon.command {
  color: #b794f4;
}

.modcp-feed-entry .feed-text {
  color: rgba(200, 190, 170, 0.85);
  flex: 1;
}

.modcp-feed-entry .feed-text a {
  color: var(--df-gold);
  text-decoration: none;
}

.modcp-feed-entry .feed-text a:hover {
  text-decoration: underline;
}

.modcp-feed-entry .feed-mod {
  color: var(--df-text-dim);
  font-size: 10px;
}

.modcp-feed-entry .feed-mod::before {
  content: '— ';
}

.modcp-feed-entry .feed-staff-link {
  text-decoration: none !important;
  font-weight: 600;
}

.modcp-feed-entry .feed-staff-link:hover {
  text-decoration: underline !important;
  filter: brightness(1.2);
}

.modcp-feed-entry .feed-staff-name {
  font-weight: 600;
}

/* Rank colors for feed usernames — matches game rank colors */
.modcp-feed-entry .feed-staff-link.forum-rank-admin {
  color: #FFD700 !important;
  text-shadow: 0 0 3px rgba(255, 215, 0, 0.5);
}

.modcp-feed-entry .feed-staff-link.forum-rank-gmod {
  color: #3ECF3E !important;
  text-shadow: 0 0 3px rgba(62, 207, 62, 0.4);
}

.modcp-feed-entry .feed-staff-link.forum-rank-fmod {
  color: #B266FF !important;
  text-shadow: 0 0 3px rgba(178, 102, 255, 0.4);
}

.modcp-feed-entry .feed-staff-link.forum-rank-pmod {
  color: #E89B3E !important;
  text-shadow: 0 0 3px rgba(232, 155, 62, 0.4);
}

.modcp-feed-entry .feed-staff-name.forum-rank-admin {
  color: #FFD700 !important;
  text-shadow: 0 0 3px rgba(255, 215, 0, 0.5);
}

.modcp-feed-entry .feed-staff-name.forum-rank-gmod {
  color: #3ECF3E !important;
  text-shadow: 0 0 3px rgba(62, 207, 62, 0.4);
}

.modcp-feed-entry .feed-staff-name.forum-rank-fmod {
  color: #B266FF !important;
  text-shadow: 0 0 3px rgba(178, 102, 255, 0.4);
}

.modcp-feed-entry .feed-staff-name.forum-rank-pmod {
  color: #E89B3E !important;
  text-shadow: 0 0 3px rgba(232, 155, 62, 0.4);
}

/* Target rank colors in feed */
.modcp-feed-entry .feed-text a.forum-rank-admin {
  color: #FFD700 !important;
  text-shadow: 0 0 3px rgba(255, 215, 0, 0.5);
}

.modcp-feed-entry .feed-text a.forum-rank-gmod {
  color: #3ECF3E !important;
  text-shadow: 0 0 3px rgba(62, 207, 62, 0.4);
}

.modcp-feed-entry .feed-text a.forum-rank-fmod {
  color: #B266FF !important;
  text-shadow: 0 0 3px rgba(178, 102, 255, 0.4);
}

.modcp-feed-entry .feed-text a.forum-rank-pmod {
  color: #E89B3E !important;
  text-shadow: 0 0 3px rgba(232, 155, 62, 0.4);
}

.modcp-feed-entry .feed-sep {
  color: var(--df-text-dim);
  margin: 0 3px;
}

.modcp-feed-entry .feed-text img {
  height: 1em;
  border: 0 !important;
  vertical-align: middle;
  margin-right: 1px;
}

.modcp-feed-entry .feed-text .rank-icon {
  font-size: 9px;
  margin-right: 2px;
  vertical-align: middle;
}

.modcp-feed-entry .feed-staff-link img,
.modcp-feed-entry .feed-staff-name img {
  height: 1em;
  border: 0 !important;
  vertical-align: middle;
}

/* Quick search */
.modcp-search-section {
  border-color: var(--df-border-bright);
}

.modcp-search-wrap {
  position: relative;
  margin-bottom: 15px;
  z-index: 200;
}

.modcp-section:has(.modcp-search-wrap) {
  overflow: visible;
}

.modcp-search-input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  background: var(--df-bg-deep);
  border: 1px solid var(--df-border);
  color: var(--df-text-bright);
  border-radius: 4px;
  font-size: 14px;
  font-family: 'Courier New', monospace;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.modcp-search-input:focus {
  outline: none;
  border-color: var(--df-gold);
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.2), 0 0 4px rgba(201, 168, 76, 0.1);
  background: rgba(17, 16, 8, 0.9);
}

.modcp-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--df-text-dim);
  font-size: 13px;
  transition: color 0.2s;
}

.modcp-search-input:focus+.modcp-search-icon,
.modcp-search-wrap:focus-within .modcp-search-icon {
  color: var(--df-gold);
}

.modcp-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--df-bg-card);
  border: 1px solid var(--df-border);
  border-top: none;
  border-radius: 0 0 3px 3px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 100;
  display: none;
}

.modcp-search-results.active {
  display: block;
}

.modcp-search-result {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  font-size: 12px;
  transition: background 0.15s;
  text-decoration: none !important;
  color: inherit;
}

.modcp-search-result:hover,
.modcp-search-result:focus {
  background: rgba(255, 170, 0, 0.08);
  text-decoration: none !important;
}

.modcp-search-result .result-name {
  color: var(--df-text-bright);
  font-weight: bold;
}

.modcp-search-result .result-meta {
  color: var(--df-text-dim);
  font-size: 10px;
  margin-left: auto;
}

/* Report cards */
.modcp-report-card {
  display: flex;
  align-items: stretch;
  background: var(--df-bg-card);
  border: 1px solid var(--df-border);
  border-radius: 4px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.modcp-report-card:hover {
  border-color: var(--df-gold);
}

.modcp-report-card .report-status-bar {
  width: 4px;
  flex-shrink: 0;
}

.modcp-report-card .report-status-bar.open {
  background: #ed8936;
}

.modcp-report-card .report-status-bar.in_review {
  background: #4299e1;
}

.modcp-report-card .report-status-bar.escalated {
  background: #e53e3e;
}

.modcp-report-card .report-status-bar.resolved {
  background: #48bb78;
}

.modcp-report-card .report-status-bar.dismissed {
  background: var(--df-text-dim);
}

.modcp-report-card.escalated {
  box-shadow: 0 0 8px rgba(229, 62, 62, 0.2);
}

.modcp-report-card.open {
  animation: modcp-glow 3s ease-in-out infinite;
}

.modcp-report-card .report-body {
  flex: 1;
  padding: 12px 15px;
}

.modcp-report-card .report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.modcp-report-card .report-id {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: var(--df-text-dim);
}

.modcp-report-card .report-time {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: var(--df-text-dim);
}

.modcp-report-card .report-target {
  color: var(--df-gold);
  font-weight: bold;
  font-size: 13px;
}

.modcp-report-card .report-target a {
  color: var(--df-gold);
  text-decoration: none;
}

.modcp-report-card .report-target a:hover {
  text-decoration: underline;
}

.modcp-report-card .report-rule {
  color: var(--df-text);
  font-size: 12px;
  margin-top: 2px;
}

.modcp-report-card .report-reporter {
  color: var(--df-text-dim);
  font-size: 11px;
  margin-top: 4px;
}

.modcp-report-card .report-actions {
  display: flex;
  gap: 6px;
  padding: 12px 15px;
  align-items: center;
  border-left: 1px solid var(--df-border);
  flex-direction: column;
  justify-content: center;
}

.modcp-report-card .report-preview {
  margin-top: 8px;
  padding: 6px 8px;
  background: var(--df-bg-deep);
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: var(--df-text-dim);
  max-height: 36px;
  overflow: hidden;
  cursor: pointer;
  transition: max-height 0.3s ease;
}

.modcp-report-card .report-preview.expanded {
  max-height: 200px;
  overflow-y: auto;
}

/* Filter pills */
.modcp-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.modcp-filter-pill {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid var(--df-border);
  background: transparent;
  color: var(--df-text-dim);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.modcp-filter-pill:hover {
  border-color: var(--df-gold);
  color: var(--df-text);
}

.modcp-filter-pill.active {
  background: var(--df-gold);
  color: #1a1a2e;
  border-color: var(--df-gold);
  font-weight: bold;
}

.modcp-filter-pill .pill-count {
  background: rgba(0, 0, 0, 0.3);
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 9px;
}

.modcp-filter-pill.active .pill-count {
  background: rgba(0, 0, 0, 0.2);
}

.modcp-filter-pill.pulse {
  animation: modcp-glow 2s ease-in-out infinite;
}

/* Player dossier header */
.modcp-dossier-header {
  background: var(--df-bg-card);
  border: 1px solid var(--df-border);
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 15px;
  position: relative;
}

.modcp-dossier-header .dossier-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.modcp-dossier-header .dossier-name {
  font-size: 22px;
  font-weight: bold;
  color: var(--df-gold);
  display: flex;
  align-items: center;
  gap: 10px;
}

.modcp-dossier-header .dossier-rank-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.modcp-dossier-header .dossier-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.modcp-dossier-header .dossier-status.online {
  color: #48bb78;
}

.modcp-dossier-header .dossier-status.online .status-dot {
  width: 8px;
  height: 8px;
  background: #48bb78;
  border-radius: 50%;
  animation: modcp-pulse 1.5s ease-in-out infinite;
}

.modcp-dossier-header .dossier-status.offline {
  color: #e53e3e;
  opacity: 0.7;
}

.modcp-dossier-header .dossier-status.offline .status-dot {
  width: 8px;
  height: 8px;
  background: #e53e3e;
  border-radius: 50%;
}

.modcp-dossier-header .dossier-activity-inline {
  font-size: 10px;
  color: var(--df-text-dim);
  font-weight: normal;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 4px;
  font-family: 'Courier New', monospace;
}

.modcp-dossier-header .dossier-info-row {
  display: flex;
  gap: 20px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--df-border);
  font-size: 11px;
  color: var(--df-text-dim);
  flex-wrap: wrap;
}

.modcp-dossier-header .dossier-info-row span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.modcp-dossier-header .dossier-info-row .info-value {
  color: var(--df-text-bright);
}

.modcp-dossier-header .dossier-quick-actions {
  display: flex;
  gap: 6px;
}

/* Threat assessment bar */
.modcp-threat-bar {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modcp-threat-bar .threat-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--df-text-dim);
  white-space: nowrap;
}

.modcp-threat-bar .threat-track {
  flex: 1;
  height: 4px;
  background: var(--df-bg-deep);
  border-radius: 2px;
  overflow: hidden;
}

.modcp-threat-bar .threat-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease, background 0.5s ease;
}

/* threat-fill width/color/animation set inline from backend threatPct */

/* Tab navigation for dossier */
.modcp-tab-nav {
  display: flex;
  border-bottom: 2px solid var(--df-border);
  margin-bottom: 15px;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.modcp-tab-nav::-webkit-scrollbar {
  display: none;
}

.modcp-tab-nav .modcp-tab {
  padding: 10px 18px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--df-text-dim);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
  white-space: nowrap;
  text-decoration: none;
  display: block;
  flex-shrink: 0;
  position: relative;
}

.modcp-tab-nav .modcp-tab:hover {
  color: var(--df-text);
  background: rgba(255, 170, 0, 0.03);
}

.modcp-tab-nav .modcp-tab.active {
  color: var(--df-gold);
  border-bottom-color: var(--df-gold);
  font-weight: bold;
}

.modcp-tab-nav .modcp-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 6px;
  background: var(--df-gold);
  border-radius: 50%;
  filter: blur(4px);
  opacity: 0.5;
}

@media (max-width: 991px) {
  .modcp-tab-nav .modcp-tab {
    padding: 8px 12px !important;
    font-size: 10px !important;
    letter-spacing: 0.8px !important;
  }
}

@media (max-width: 576px) {
  .modcp-tab-nav .modcp-tab {
    padding: 7px 10px !important;
    font-size: 9px !important;
    letter-spacing: 0.5px !important;
  }
}

.modcp-tab-content {
  min-height: 200px;
}

/* Terminal / chat snapshot box */
.modcp-terminal {
  background: var(--df-bg-deep);
  border: 1px solid var(--df-border);
  border-radius: 3px;
  padding: 10px 12px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: var(--df-text);
  max-height: 350px;
  overflow-y: auto;
  line-height: 1.6;
}

.modcp-terminal .chat-line {
  display: flex;
  gap: 8px;
}

.modcp-terminal .chat-time {
  color: #48bb78;
  white-space: nowrap;
  min-width: 60px;
  font-size: 10px;
}

.modcp-terminal .chat-user {
  color: var(--df-text-bright);
  white-space: nowrap;
  font-weight: bold;
}

.modcp-terminal .chat-user.highlighted {
  color: #ed8936;
}

.modcp-terminal .chat-msg {
  color: var(--df-text);
  word-break: break-word;
}

/* Timeline (infractions) */
.modcp-timeline {
  position: relative;
  padding-left: 24px;
}

.modcp-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--df-border);
}

.modcp-timeline-item {
  position: relative;
  padding: 10px 0 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.modcp-timeline-item::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--df-border);
  background: var(--df-bg-card);
}

.modcp-timeline-item.active::before {
  border-color: #e53e3e;
  background: #e53e3e;
  animation: modcp-pulse 2s ease-in-out infinite;
}

.modcp-timeline-item.expired::before {
  border-color: var(--df-text-dim);
  background: var(--df-text-dim);
  opacity: 0.5;
}

.modcp-timeline-item.revoked {
  opacity: 0.5;
  text-decoration: line-through;
}

.modcp-timeline-item .timeline-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.modcp-timeline-item .timeline-date {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: var(--df-text-dim);
}

.modcp-timeline-item .timeline-detail {
  font-size: 12px;
  color: var(--df-text);
}

.modcp-timeline-item .timeline-mod {
  font-size: 10px;
  color: var(--df-text-dim);
  margin-top: 2px;
}

/* Action bar (sticky bottom) */
.modcp-action-bar {
  position: sticky;
  bottom: 0;
  padding: 12px 15px;
  background: var(--df-bg-card);
  border-top: 2px solid var(--df-gold);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 50;
  margin-top: 15px;
  border-radius: 0 0 4px 4px;
}

.modcp-action-btn {
  padding: 4px 10px;
  border: 1px solid var(--df-border);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--df-text-dim);
  cursor: pointer;
  font-size: 10px;
  transition: all 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.modcp-action-btn:hover {
  border-color: var(--df-gold);
  color: var(--df-gold);
  background: rgba(0, 0, 0, 0.5);
}

.modcp-action-btn.btn-mute {
  border-color: rgba(237, 137, 54, 0.4);
  color: #ed8936;
  background: rgba(237, 137, 54, 0.08);
}

.modcp-action-btn.btn-mute:hover {
  border-color: #ed8936;
  background: rgba(237, 137, 54, 0.2);
  color: #f6ad55;
}

.modcp-action-btn.btn-ban {
  border-color: rgba(229, 62, 62, 0.4);
  color: #e53e3e;
  background: rgba(229, 62, 62, 0.08);
}

.modcp-action-btn.btn-ban:hover {
  border-color: #e53e3e;
  background: rgba(229, 62, 62, 0.2);
  color: #fc8181;
}

.modcp-action-btn.btn-lock {
  border-color: rgba(66, 153, 225, 0.4);
  color: #4299e1;
  background: rgba(66, 153, 225, 0.08);
}

.modcp-action-btn.btn-lock:hover {
  border-color: #4299e1;
  background: rgba(66, 153, 225, 0.2);
  color: #63b3ed;
}

.modcp-action-btn.btn-resolve {
  border-color: rgba(72, 187, 120, 0.4);
  color: #48bb78;
  background: rgba(72, 187, 120, 0.08);
}

.modcp-action-btn.btn-resolve:hover {
  border-color: #48bb78;
  background: rgba(72, 187, 120, 0.2);
  color: #68d391;
}

/* Punishment modal */
.modcp-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  padding-top: 80px;
  box-sizing: border-box;
}

.modcp-modal-overlay.active {
  display: flex;
}

.modcp-modal {
  background: var(--df-bg-card);
  border: 1px solid var(--df-gold);
  border-radius: 4px;
  width: 480px;
  max-width: 95vw;
  max-height: calc(85vh - 80px);
  overflow-y: auto;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 170, 0, 0.1);
}

.modcp-modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--df-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modcp-modal-header h3 {
  color: var(--df-gold);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0;
}

.modcp-modal-close {
  background: none;
  border: none;
  color: var(--df-text-dim);
  cursor: pointer;
  font-size: 18px;
  padding: 0;
  line-height: 1;
}

.modcp-modal-close:hover {
  color: var(--df-text);
}

.modcp-modal-body {
  padding: 20px;
}

.modcp-modal-body label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--df-text-dim);
  margin-bottom: 6px;
  margin-top: 12px;
}

.modcp-modal-body label:first-child {
  margin-top: 0;
}

.modcp-modal-body select,
.modcp-modal-body textarea,
.modcp-modal-body input[type="text"],
.modcp-modal-body input[type="number"] {
  width: 100%;
  padding: 8px 10px;
  background: var(--df-bg-deep);
  border: 1px solid var(--df-border);
  color: var(--df-text-bright);
  border-radius: 3px;
  font-size: 13px;
  box-sizing: border-box;
}

.modcp-modal-body textarea {
  min-height: 60px;
  resize: vertical;
  font-family: inherit;
}

.modcp-modal-body select:focus,
.modcp-modal-body textarea:focus,
.modcp-modal-body input[type="text"]:focus,
.modcp-modal-body input[type="number"]:focus {
  outline: none;
  border-color: var(--df-gold);
}

.modcp-duration-input {
  margin-top: 6px;
}

.modcp-duration-helper {
  font-size: 10px;
  color: var(--df-text-dim);
  margin-top: 4px;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.5px;
}

.modcp-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--df-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.modcp-modal-footer button {
  padding: 8px 20px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modcp-modal-footer .btn-cancel {
  background: transparent;
  border: 1px solid var(--df-border);
  color: var(--df-text-dim);
}

.modcp-modal-footer .btn-cancel:hover {
  color: var(--df-text);
  border-color: var(--df-text-dim);
}

.modcp-modal-footer .btn-confirm {
  background: #e53e3e;
  border: 1px solid #e53e3e;
  color: white;
  font-weight: bold;
}

.modcp-modal-footer .btn-confirm:hover {
  background: #c53030;
}

.modcp-modal-footer .btn-confirm.btn-mute-confirm {
  background: #ed8936;
  border-color: #ed8936;
}

.modcp-modal-footer .btn-confirm.btn-mute-confirm:hover {
  background: #dd7826;
}

.modcp-modal-footer .btn-confirm.btn-lock-confirm {
  background: #4299e1;
  border-color: #4299e1;
}

.modcp-modal-footer .btn-confirm.btn-lock-confirm:hover {
  background: #3289d1;
}

/* Duration presets */
.modcp-duration-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.modcp-duration-preset {
  padding: 4px 10px;
  border: 1px solid var(--df-border);
  border-radius: 3px;
  background: transparent;
  color: var(--df-text-dim);
  cursor: pointer;
  font-size: 11px;
  transition: all 0.15s;
}

.modcp-duration-preset:hover {
  border-color: var(--df-gold);
  color: var(--df-text);
}

.modcp-duration-preset.active {
  border-color: var(--df-gold);
  background: var(--df-gold);
  color: #1a1a2e;
}

/* Infraction badges */
.modcp-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modcp-badge-ban {
  background: #e53e3e;
  color: white;
}

.modcp-badge-mute {
  background: #ed8936;
  color: white;
}

.modcp-badge-trade_lock,
.modcp-badge-ge_lock,
.modcp-badge-duel_lock {
  background: #4299e1;
  color: white;
}

.modcp-badge-open {
  background: #ed8936;
  color: white;
}

.modcp-badge-in_review {
  background: #4299e1;
  color: white;
}

.modcp-badge-escalated {
  background: #e53e3e;
  color: white;
}

.modcp-badge-resolved {
  background: #48bb78;
  color: white;
}

.modcp-badge-dismissed {
  background: var(--df-text-dim);
  color: var(--df-bg-deep);
}

.modcp-badge-active {
  box-shadow: 0 0 6px rgba(229, 62, 62, 0.4);
}

/* Countdown timer */
.modcp-countdown {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #ed8936;
  font-weight: bold;
}

/* Status indicators */
.modcp-online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.modcp-online-dot.online {
  background: #48bb78;
  animation: modcp-pulse 1.5s ease-in-out infinite;
}

.modcp-online-dot.offline {
  background: #e53e3e;
  opacity: 0.6;
}

/* Overview rows */
.modcp-overview-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.modcp-overview-col {
  flex: 1;
  min-width: 0;
}

.modcp-overview-row-3col .modcp-overview-col {
  flex: 1;
}

.modcp-section-fill {
  height: 100%;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

.modcp-section-fill>div:last-child {
  flex: 1;
}

@media (max-width: 800px) {
  .modcp-overview-row {
    flex-direction: column;
  }
}

/* Mini skill grid */
.modcp-skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  font-size: 10px;
}

.modcp-skill-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 5px;
  background: var(--df-bg-deep);
  border-radius: 2px;
}

.modcp-skill-cell img {
  width: 15px;
  height: 15px;
}

.modcp-skill-cell .skill-level {
  color: var(--df-gold);
  font-weight: bold;
  font-family: 'Courier New', monospace;
}

/* Equipment OSRS grid (5-row layout) */
.modcp-equip-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.modcp-equip-row {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.modcp-equip-spacer {
  width: 36px;
  height: 36px;
}

.modcp-equip-slot {
  width: 36px;
  height: 36px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  overflow: hidden;
}

.modcp-equip-slot .modcp-equip-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  z-index: 0;
}

.modcp-equip-slot .modcp-equip-silhouette {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 30px;
  max-height: 30px;
  opacity: 0.5;
  z-index: 1;
}

.modcp-equip-slot .modcp-equip-item {
  position: relative;
  max-width: 30px;
  max-height: 30px;
  z-index: 2;
}

.modcp-equip-slot:hover {
  outline: 1px solid var(--df-gold);
}

/* OSRS item amount overlays */
.modcp-item-amount {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 9px;
  font-weight: bold;
  line-height: 1;
  z-index: 3;
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
}

.modcp-item-amount.yellow {
  color: #ffff00;
}

.modcp-item-amount.white {
  color: #ffffff;
}

.modcp-item-amount.green {
  color: #00ff80;
}

/* Inventory grid (compact) */
.modcp-inv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}

.modcp-inv-slot {
  width: 36px;
  height: 36px;
  background: var(--df-bg-deep);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.modcp-inv-slot img {
  max-width: 30px;
  max-height: 30px;
}

.modcp-inv-slot:hover {
  border-color: var(--df-gold);
}

/* Bank grid */
.modcp-bank-grid {
  display: grid;
  grid-template-columns: repeat(8, 36px);
  gap: 3px;
  justify-content: center;
  max-height: 350px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--df-border) transparent;
}

.modcp-bank-slot {
  width: 36px;
  height: 36px;
  background: var(--df-bg-deep);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.modcp-bank-slot img {
  max-width: 30px;
  max-height: 30px;
}

.modcp-bank-slot:hover {
  border-color: var(--df-gold);
}

/* Bank tab filter pills */
.modcp-bank-pill {
  padding: 3px 10px;
  border: 1px solid var(--df-border);
  border-radius: 12px;
  font-size: 10px;
  color: var(--df-text-dim);
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modcp-bank-pill:hover {
  border-color: var(--df-gold);
  color: var(--df-text);
}

.modcp-bank-pill.active {
  border-color: var(--df-gold);
  background: rgba(201, 168, 76, 0.15);
  color: var(--df-gold);
}

/* Inline search */
.modcp-inline-search-wrap {
  display: flex;
  align-items: center;
  background: var(--df-bg-deep);
  border: 1px solid var(--df-border);
  border-radius: 3px;
  padding: 0 8px;
  gap: 6px;
}

.modcp-inline-search-wrap i {
  color: var(--df-text-dim);
  font-size: 10px;
}

.modcp-inline-search {
  background: transparent;
  border: none;
  color: var(--df-text-bright);
  font-size: 11px;
  padding: 4px 0;
  outline: none;
  width: 100px;
  flex: 1;
  min-width: 0;
  font-family: inherit;
}

.modcp-inline-search::placeholder {
  color: var(--df-text-dim);
}

/* View toggle buttons */
.modcp-view-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--df-border);
  border-radius: 3px;
  overflow: hidden;
}

.modcp-view-btn {
  padding: 3px 7px;
  background: transparent;
  border: none;
  color: var(--df-text-dim);
  cursor: pointer;
  font-size: 10px;
  transition: all 0.15s;
}

.modcp-view-btn:hover {
  color: var(--df-text);
}

.modcp-view-btn.active {
  background: rgba(201, 168, 76, 0.15);
  color: var(--df-gold);
}

/* Item list table (list view) */
.modcp-item-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.modcp-item-list-table th {
  padding: 6px 8px;
  text-align: left;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--df-text-dim);
  border-bottom: 1px solid var(--df-border);
}

.modcp-item-list-table td {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.025);
  color: var(--df-text);
}

.modcp-item-list-table tr:hover {
  background: rgba(201, 168, 76, 0.04);
}

/* Active restrictions banner */
.modcp-restrictions {
  padding: 10px 12px;
  background: rgba(229, 62, 62, 0.08);
  border: 1px solid rgba(229, 62, 62, 0.3);
  border-radius: 4px;
  margin-top: 12px;
}

.modcp-restriction-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
}

.modcp-restriction-item i {
  color: #e53e3e;
}

/* Notes section */
.modcp-note {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.modcp-note:last-child {
  border-bottom: none;
}

.modcp-note .note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.modcp-note .note-author {
  color: var(--df-gold);
  font-size: 11px;
  font-weight: bold;
}

.modcp-note .note-date {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: var(--df-text-dim);
}

.modcp-note .note-body {
  font-size: 12px;
  color: var(--df-text);
  line-height: 1.5;
}

/* Case file layout */
.modcp-case-grid {
  display: flex;
  gap: 20px;
}

.modcp-case-left {
  flex: 55;
  min-width: 0;
}

.modcp-case-right {
  flex: 45;
  min-width: 0;
}

/* Load more button */
.modcp-load-more {
  display: block;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px dashed var(--df-border);
  color: var(--df-text-dim);
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.2s;
  text-align: center;
  margin-top: 10px;
  border-radius: 3px;
}

.modcp-load-more:hover {
  border-color: var(--df-gold);
  color: var(--df-gold);
}

/* Punishments table (dashboard) */
.modcp-punish-table-wrap {
  overflow-x: auto;
}

.modcp-punish-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.modcp-punish-table thead tr {
  text-align: left;
  color: var(--df-text-dim);
  border-bottom: 1px solid var(--df-border);
}

.modcp-punish-table th {
  padding: 8px 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 9px;
}

.modcp-punish-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.025);
  transition: background 0.15s;
}

.modcp-punish-table tbody tr:hover {
  background: rgba(201, 168, 76, 0.04);
}

.modcp-punish-table td {
  padding: 7px 10px;
}

.modcp-punish-table .punish-date {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: var(--df-text-dim);
  white-space: nowrap;
}

.modcp-punish-table .punish-target {
  color: var(--df-gold);
  text-decoration: none;
}

.modcp-punish-table .punish-target:hover {
  text-decoration: underline;
}

.modcp-punish-table .punish-reason {
  color: var(--df-text);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modcp-punish-table .punish-duration {
  font-family: 'Courier New', monospace;
  color: var(--df-text-dim);
  font-size: 10px;
}

.modcp-punish-table .perm-tag {
  color: #e53e3e;
  font-weight: bold;
  font-size: 10px;
}

.modcp-punish-table .punish-mod {
  color: var(--df-text-dim);
}

.modcp-punish-table .punish-empty {
  padding: 15px;
  text-align: center;
  color: var(--df-text-dim);
}

/* Report mini cards (dashboard right) */
.modcp-reports-list {
  padding: 0;
}

.modcp-report-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.025);
  text-decoration: none;
  transition: background 0.15s;
}

.modcp-report-mini:hover {
  background: rgba(201, 168, 76, 0.04);
  text-decoration: none;
}

a.modcp-report-mini,
a.modcp-report-mini:hover,
a.modcp-report-mini:focus {
  text-decoration: none !important;
  color: inherit;
}

.modcp-report-mini .report-mini-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.modcp-report-mini .report-mini-status.open {
  background: #ed8936;
  animation: modcp-pulse 1.5s ease-in-out infinite;
}

.modcp-report-mini .report-mini-status.escalated {
  background: #e53e3e;
  animation: modcp-pulse 1s ease-in-out infinite;
}

.modcp-report-mini .report-mini-status.in_review {
  background: #4299e1;
}

.modcp-report-mini .report-mini-status.resolved {
  background: #48bb78;
}

.modcp-report-mini .report-mini-status.dismissed {
  background: var(--df-text-dim);
}

.modcp-report-mini .report-mini-body {
  flex: 1;
  min-width: 0;
}

.modcp-report-mini .report-mini-name {
  color: var(--df-gold);
  font-size: 12px;
  font-weight: bold;
}

.modcp-report-mini .report-mini-rule {
  color: var(--df-text-dim);
  font-size: 11px;
  margin-left: 6px;
}

.modcp-report-mini .report-mini-time {
  font-family: 'Courier New', monospace;
  font-size: 9px;
  color: var(--df-text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .modcp-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .modcp-header-stats {
    flex-wrap: wrap;
    gap: 6px;
  }

  .modcp-header-divider {
    display: none;
  }

  .modcp-header-stat {
    padding: 0 8px;
  }

  .modcp-primary-stats {
    flex-direction: column;
  }

  .modcp-metric-pills {
    flex-direction: column;
  }

  .modcp-nav-pills {
    flex-wrap: wrap;
  }

  .modcp-dashboard-grid,
  .modcp-case-grid {
    flex-direction: column;
  }

  .modcp-dossier-header .dossier-top {
    flex-direction: column;
  }

  .modcp-overview-grid {
    flex-direction: column;
  }
}

/* ========== ModCP Phase 3: Dossier UX Polish ========== */

/* Bank + Recent Chat: fixed same height in overview row 2 */
.modcp-overview-row:last-child>.modcp-overview-col>.modcp-section {
  display: flex;
  flex-direction: column;
  height: 450px;
}

.modcp-overview-row:last-child>.modcp-overview-col>.modcp-section>.modcp-terminal,
.modcp-overview-row:last-child>.modcp-overview-col>.modcp-section>div:last-child {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Section Toolbar (consistent sub-header bar for search/controls) */
.modcp-section-toolbar {
  padding: 6px 12px;
  border-bottom: 1px solid var(--df-border);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Chat type pills (Public/PM/Guild) */
.modcp-chat-pill {
  display: inline-block;
  padding: 2px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--df-text-dim);
  background: var(--df-bg-deep);
  border: 1px solid var(--df-border);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}

.modcp-chat-pill:hover {
  color: var(--df-text);
  border-color: var(--df-gold);
}

.modcp-chat-pill.active {
  color: var(--df-gold);
  border-color: var(--df-gold);
  background: rgba(201, 168, 76, 0.1);
}

/* Chat direction/channel badges */
.chat-dir {
  color: #4299e1;
  font-size: 11px;
  font-weight: bold;
  margin-right: 2px;
}

.chat-channel {
  color: #48bb78;
  font-size: 11px;
  font-weight: bold;
  margin-right: 2px;
}

/* Game-style item popovers */
.modcp-item-popover {
  font-size: 11px;
  line-height: 1.5;
  min-width: 175px;
  max-width: 250px;
}

.modcp-pop-name {
  color: #c9a84c;
  font-weight: bold;
  font-size: 13px;
}

.modcp-pop-hr {
  height: 1px;
  margin: 4px 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.modcp-pop-img {
  width: 36px;
  height: 36px;
  float: right;
  margin: 0 0 4px 8px;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.6));
}

.modcp-pop-examine {
  color: #999;
  font-style: italic;
  margin-top: 4px;
  font-size: 10px;
  clear: both;
}

/* Activity chart (GitHub-style contribution graph) */
.modcp-activity-months {
  display: flex;
  gap: 0;
  margin-bottom: 2px;
}

.modcp-activity-month-label {
  font-size: 9px;
  color: var(--df-text-dim);
  width: 12px;
  text-align: left;
  white-space: nowrap;
  overflow: visible;
}

.modcp-activity-month-spacer {
  width: 12px;
}

.modcp-activity-grid {
  display: flex;
  gap: 0;
}

.modcp-activity-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-right: 4px;
}

.modcp-activity-label {
  width: 24px;
  height: 10px;
  font-size: 9px;
  color: var(--df-text-dim);
  line-height: 10px;
  text-align: right;
}

.modcp-activity-weeks {
  display: flex;
  gap: 2px;
}

.modcp-activity-week {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.modcp-activity-cell {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--df-bg-deep);
}

.modcp-activity-cell[data-toggle="popover"]:hover {
  outline: 1px solid var(--df-text-dim);
}

/* Location reset button */
.modcp-reset-loc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  margin-left: 4px;
  background: transparent;
  border: none;
  color: var(--df-text-dim);
  cursor: pointer;
  font-size: 10px;
  vertical-align: middle;
  transition: color 0.15s;
}

.modcp-reset-loc-btn:hover {
  color: #e53e3e;
}

/* ===== ModCP Admin Tabs: Economy, Game Abuse, Global Bans ===== */

/* Economy stat cards */
.econ-stat-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
}

.econ-stat-card {
  flex: 1 1 120px;
  min-width: 110px;
  background: var(--df-bg-deep);
  border: 1px solid var(--df-border);
  border-radius: 4px;
  padding: 10px 12px;
  text-align: center;
  transition: border-color 0.2s;
}

.econ-stat-card:hover {
  border-color: var(--df-border-bright);
}

.econ-stat-icon {
  font-size: 16px;
  color: var(--df-gold);
  margin-bottom: 4px;
}

.econ-stat-value {
  font-size: 16px;
  font-weight: bold;
  color: var(--df-text-bright);
  font-family: 'Courier New', monospace;
}

.econ-stat-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--df-text-dim);
  margin-top: 2px;
}

/* Admin tables (used in economy, abuse, global bans) */
.modcp-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.modcp-admin-table thead tr {
  text-align: left;
  color: var(--df-text-dim);
  border-bottom: 1px solid var(--df-border);
}

.modcp-admin-table th {
  padding: 6px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: normal;
}

.modcp-admin-table td {
  padding: 5px 10px;
  color: var(--df-text);
  border-bottom: 1px solid rgba(201, 168, 76, 0.06);
}

.modcp-admin-table tbody tr:hover {
  background: rgba(201, 168, 76, 0.04);
}

/* Economy item link */
.econ-item-link {
  color: var(--df-gold) !important;
  cursor: pointer;
  text-decoration: none;
}

.econ-item-link:hover {
  text-decoration: underline;
}

/* Economy item detail */
.econ-item-detail {
  margin: 10px 12px;
  background: var(--df-bg-deep);
  border: 1px solid var(--df-border-bright);
  border-radius: 4px;
  padding: 0;
}

.econ-item-header {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--df-border);
}

/* Game Abuse section headers */
.abuse-section-header {
  padding: 8px 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: bold;
  border-bottom: 1px solid var(--df-border);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.abuse-section-header i {
  font-size: 12px;
}

.abuse-section-header.abuse-yellow {
  color: #ecc94b;
  background: rgba(236, 201, 75, 0.06);
  border-left: 3px solid #ecc94b;
}

.abuse-section-header.abuse-orange {
  color: #ed8936;
  background: rgba(237, 137, 54, 0.06);
  border-left: 3px solid #ed8936;
}

.abuse-section-header.abuse-red {
  color: #e53e3e;
  background: rgba(229, 62, 62, 0.06);
  border-left: 3px solid #e53e3e;
}

.abuse-section-header.abuse-purple {
  color: #b266ff;
  background: rgba(178, 102, 255, 0.06);
  border-left: 3px solid #b266ff;
}

.abuse-count {
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: bold;
}

/* Global Ban button in dossier */
.btn-global-ban {
  background: rgba(229, 62, 62, 0.12) !important;
  border-color: rgba(229, 62, 62, 0.35) !important;
  color: #e53e3e !important;
}

.btn-global-ban:hover {
  background: rgba(229, 62, 62, 0.25) !important;
  border-color: rgba(229, 62, 62, 0.5) !important;
}

/* Staff Online card */
.staff-online-group {
  margin-bottom: 8px;
}

.staff-online-group:last-child {
  margin-bottom: 0;
}

.staff-online-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8a8577;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(200, 184, 154, 0.08);
}

.staff-online-entry {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  margin: 2px 4px 2px 0;
  font-size: 12px;
  color: #c8b89a !important;
  background: rgba(200, 184, 154, 0.06);
  border: 1px solid rgba(200, 184, 154, 0.1);
  border-radius: 4px;
  text-decoration: none !important;
  transition: background 0.15s;
}

.staff-online-entry:hover {
  background: rgba(200, 184, 154, 0.14);
  color: #e8d5b0 !important;
}

.staff-online-none {
  font-size: 11px;
  color: #5a564d;
  font-style: italic;
  padding: 2px 0;
}

/* Punishment alert banners */
.df-alert-punishment {
  border-image: linear-gradient(90deg, #8b6914, #c87e14, #8b6914) 1 !important;
  background: rgba(200, 126, 20, 0.08) !important;
}

.df-alert-punishment-ban {
  border-image: linear-gradient(90deg, #6b2222, #a04040, #6b2222) 1 !important;
  background: rgba(229, 62, 62, 0.08) !important;
}

.df-alert-icon-punishment {
  font-size: 20px;
  color: #e8a83e;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.df-alert-punishment-ban .df-alert-icon-punishment {
  color: #e53e3e;
}

.df-alert-btn-support {
  background: rgba(200, 184, 154, 0.1) !important;
  border: 1px solid rgba(200, 184, 154, 0.2) !important;
  color: #c8b89a !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.15s;
}

.df-alert-btn-support:hover {
  background: rgba(200, 184, 154, 0.2) !important;
  color: #e8d5b0 !important;
}

/* Dossier inventory — game-style grid */
.modcp-inven-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

.modcp-inven-grid .inven-cell {
  height: 36px;
  background: var(--df-bg-deep);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modcp-inven-grid .inven-cell.inven-empty {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.02);
}

.modcp-inven-grid .inven-cell:hover:not(.inven-empty) {
  border-color: var(--df-gold);
}

.modcp-inven-grid .inven {
  width: 36px;
  height: 32px;
  position: relative;
  cursor: default;
  margin: 0;
  float: none;
}

.modcp-inven-grid .inven>img {
  height: 85%;
  width: 85%;
  object-fit: contain;
  margin: 4px;
  filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, .3));
}

.modcp-inven-grid .item-amount {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 10px;
  font-weight: bold;
  font-family: 'RuneScape Small', Arial, sans-serif;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  z-index: 1;
}

.modcp-inven-grid .item-amount.yellow {
  color: #ffff00;
}

.modcp-inven-grid .item-amount.white {
  color: #ffffff;
}

.modcp-inven-grid .item-amount.green {
  color: #00ff80;
}

/* Warning button + badge */
.btn-warn {
  background: rgba(236, 201, 75, 0.12) !important;
  border-color: rgba(236, 201, 75, 0.35) !important;
  color: #ecc94b !important;
}

.btn-warn:hover {
  background: rgba(236, 201, 75, 0.25) !important;
  border-color: rgba(236, 201, 75, 0.5) !important;
}

.modcp-badge-warning {
  background: rgba(236, 201, 75, 0.15) !important;
  color: #ecc94b !important;
  border: 1px solid rgba(236, 201, 75, 0.3) !important;
}

.modcp-timeline-item.warning {
  border-left-color: #ecc94b;
  background: rgba(236, 201, 75, 0.04);
}

.timeline-offence {
  font-size: 10px;
  color: var(--df-text);
  background: rgba(200, 184, 154, 0.08);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
}

/* =====================================================
   OPTIONS PANEL — Keybind Customization
   ===================================================== */
.options-panel {
  padding: 6px 8px;
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
}

.options-section-title {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: var(--df-gold);
  text-transform: uppercase;
  border-bottom: 1px solid var(--df-border);
  padding-bottom: 2px;
  margin: 6px 0 4px;
  letter-spacing: 0.5px;
}

.options-section-title:first-child {
  margin-top: 0;
}

.options-layout-buttons {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

.options-layout-btn {
  flex: 1;
  height: 26px;
  background: var(--df-bg-dark);
  border: 1px solid var(--df-border);
  border-radius: 3px;
  color: var(--df-text-muted);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s ease;
}

.options-layout-btn:hover {
  border-color: var(--df-border-bright);
  color: var(--df-text);
}

.options-layout-btn.active {
  background: rgba(201, 168, 76, 0.15);
  border-color: var(--df-gold);
  color: var(--df-gold);
}

.options-keybind-row {
  display: flex;
  align-items: center;
  height: 20px;
  margin: 1px 0;
}

.options-keybind-label {
  flex: 1;
  font-size: 10px;
  color: var(--df-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.options-keybind-capture {
  width: 56px;
  height: 18px;
  background: var(--df-bg-dark);
  border: 1px solid var(--df-border);
  border-radius: 2px;
  color: var(--df-gold);
  font-family: monospace;
  font-size: 10px;
  text-align: center;
  cursor: pointer;
  padding: 0 2px;
  line-height: 16px;
  transition: border-color 0.15s ease;
}

.options-keybind-capture:hover {
  border-color: var(--df-border-bright);
}

.options-keybind-capture.capturing {
  border-color: var(--df-gold);
  color: #fff;
  animation: keybind-pulse 1s ease-in-out infinite;
}

@keyframes keybind-pulse {

  0%,
  100% {
    border-color: var(--df-gold);
  }

  50% {
    border-color: rgba(201, 168, 76, 0.3);
  }
}

.options-reset-btn {
  display: block;
  margin: 8px auto 4px;
  padding: 3px 12px;
  background: var(--df-bg-dark);
  border: 1px solid var(--df-border);
  border-radius: 3px;
  color: var(--df-text-muted);
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.options-reset-btn:hover {
  border-color: var(--df-border-bright);
  color: var(--df-text);
}

/* ── Game Options: Toggle Rows, Threshold, Split PM ── */
.options-toggle-row {
  display: flex;
  align-items: center;
  height: 22px;
  margin: 2px 0;
  padding: 0 4px;
}

.options-toggle-label {
  flex: 1;
  font-size: 10px;
  color: var(--df-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.options-toggle-group {
  display: flex;
  gap: 2px;
}

.options-toggle-btn {
  width: 36px;
  height: 18px;
  padding: 0;
  background: var(--df-bg-dark);
  border: 1px solid var(--df-border);
  border-radius: 2px;
  color: var(--df-text-muted);
  font-size: 9px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 16px;
  text-align: center;
}

.options-toggle-btn:hover {
  border-color: var(--df-border-bright);
  color: var(--df-text);
}

.options-toggle-btn.active {
  background: linear-gradient(to bottom, #c9a84c, #8a6d2b);
  border-color: var(--df-gold);
  color: #1a1a2e;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.options-threshold-row {
  display: flex;
  align-items: center;
  height: 22px;
  margin: 2px 0;
  padding: 0 4px;
}

.options-threshold-row .options-toggle-label {
  flex: 1;
}

.options-threshold-input {
  width: 48px;
  height: 16px;
  padding: 0 3px;
  background: var(--df-bg-dark);
  border: 1px solid var(--df-border);
  border-radius: 2px;
  color: var(--df-gold);
  font-size: 9px !important;
  font-family: monospace;
  text-align: right;
  outline: none;
  line-height: 14px;
  -moz-appearance: textfield;
}

.options-threshold-input::-webkit-inner-spin-button,
.options-threshold-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.options-threshold-input:focus {
  border-color: var(--df-gold);
}

.options-threshold-suffix {
  font-size: 9px;
  color: var(--df-text-muted);
  margin-left: 3px;
}

/* Split Private Chat Overlay */
.split-private-overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 50;
  padding: 2px 6px;
  overflow: hidden;
}

.split-pm-line {
  color: #00ffff;
  font-size: 11px;
  line-height: 14px;
  text-shadow: 1px 1px 1px #000, -1px -1px 1px #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Keybind Modal ── */
.keybind-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10015;
  background: rgba(14, 11, 7, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: calc(var(--rs-header-height, 35px) + var(--rs-nav-height, 60px) + var(--rs-action-bar-height, 42px) + 40px) 16px 20px;
  animation: keybind-modal-fade 0.2s ease;
}

@keyframes keybind-modal-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.keybind-modal-panel {
  background:
    radial-gradient(ellipse 60% 30% at 50% 0%, rgba(201, 168, 76, 0.04) 0%, transparent 70%),
    linear-gradient(180deg, var(--df-bg-card), var(--df-bg-deep));
  border: 1px solid var(--df-border-bright);
  border-top: 2px solid rgba(201, 168, 76, 0.5);
  border-radius: 6px;
  width: 300px;
  max-width: 95vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 0 1px 0 rgba(201, 168, 76, 0.20),
    inset 0 -2px 0 rgba(0, 0, 0, 0.4),
    inset 0 0 40px rgba(0, 0, 0, 0.3),
    0 20px 80px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(201, 168, 76, 0.08);
  animation: keybind-modal-slide 0.25s ease;
}

@keyframes keybind-modal-slide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

.keybind-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background:
    radial-gradient(ellipse 80% 120% at 50% 0%, rgba(201, 168, 76, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--df-bg-surface), var(--df-bg-card));
  border-bottom: 1px solid var(--df-border);
  position: relative;
  border-radius: 6px 6px 0 0;
}

.keybind-modal-icon {
  color: var(--df-gold);
  font-size: 14px;
  opacity: 0.8;
}

.keybind-modal-title {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--df-gold);
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.3);
  letter-spacing: 1px;
  flex: 1;
}

.keybind-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--df-gold-dark);
  font-size: 18px;
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.25s ease;
  padding: 4px 8px;
  line-height: 1;
  min-height: 0 !important;
  min-width: 0 !important;
}

.keybind-modal-close:hover {
  color: var(--df-gold-light);
  opacity: 1;
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.4);
}

.keybind-modal-body {
  padding: 8px 14px 12px;
  overflow-y: auto;
  flex: 1;
}

/* Kill 44px touch targets inside keybind modal */
.keybind-modal-body button,
.keybind-modal-body .options-keybind-capture,
.keybind-modal-body input {
  min-height: 0 !important;
  min-width: 0 !important;
}

/* ── Mobile: options panel overrides ── */
@media (max-width: 991px) {

  /* Kill the 44px touch-target rule for options panel elements */
  .options-panel button,
  .options-panel a,
  .options-panel .options-toggle-btn,
  .options-panel .options-layout-btn,
  .options-panel .options-reset-btn,
  .options-panel .options-threshold-input,
  .options-panel input {
    min-height: 0 !important;
    min-width: 0 !important;
  }

  .options-panel .form-control,
  .options-panel input {
    min-height: 0 !important;
    font-size: 10px !important;
  }

  /* Slightly bigger toggle buttons for touch */
  .options-toggle-btn {
    width: 40px !important;
    height: 22px !important;
    font-size: 10px !important;
    line-height: 20px !important;
  }

  .options-layout-btn {
    height: 28px !important;
  }

  .options-toggle-row {
    height: 26px !important;
  }

  .options-threshold-row {
    height: 26px !important;
  }

  .options-threshold-input {
    height: 20px !important;
    width: 54px !important;
  }
}

/* =====================================================
   TAB LAYOUT MODES — Horizontal & Split
   ===================================================== */

/* Vertical (explicit resets when switching back) */
body.tab-layout-vertical .interface-tab-bar {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  max-width: none !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

body.tab-layout-vertical .interface-tab {
  order: 0 !important;
  margin: 1px 0 !important;
}

body.tab-layout-vertical #interfaceBoxContainer {
  order: 0 !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 100% !important;
  margin: 0 4px 0 0 !important;
  width: auto !important;
}

/* Horizontal: single row of tabs, panel above */
body.tab-layout-horizontal .interface-tab-bar {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

body.tab-layout-horizontal .interface-tab {
  order: 0 !important;
  margin: 1px !important;
}

body.tab-layout-horizontal #interfaceBoxContainer {
  order: 0 !important;
  position: absolute !important;
  bottom: 100% !important;
  right: 0 !important;
  margin: 0 0 4px 0 !important;
  width: auto !important;
}

/* Split: top row (6 tabs) → panel → bottom row (5 tabs) */
body.tab-layout-split .interface-tab-bar {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  width: 218px !important;
  justify-content: center !important;
  align-items: center !important;
}

body.tab-layout-split .interface-tab {
  margin: 1px !important;
}

/* Top row: first 6 tabs */
body.tab-layout-split #combatBoxButton,
body.tab-layout-split #skillsBoxButton,
body.tab-layout-split #questBoxButton,
body.tab-layout-split #inventoryBoxButton,
body.tab-layout-split #equipBoxButton,
body.tab-layout-split #prayerBoxButton {
  order: -1 !important;
}

/* Bottom row: last 5 tabs */
body.tab-layout-split #spellbookBoxButton,
body.tab-layout-split #guildBoxButton,
body.tab-layout-split #friendsBoxButton,
body.tab-layout-split #optionsBoxButton,
body.tab-layout-split #playersBoxButton {
  order: 1 !important;
}

/* Content panel: sits between the two rows */
body.tab-layout-split #interfaceBoxContainer {
  order: 0 !important;
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  margin: 2px 0 !important;
}

body.tab-layout-split #interfaceBoxContainer .interface-panel-content {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ═══════════════════════════════════════════════════════════
   OSRS-Style Parchment Banner
   Clean parchment look with hanging vexillum
   ═══════════════════════════════════════════════════════════ */

/* Transparent banner — let scroll texture show through */
.df-hub-banner.df-city-viewport {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: auto !important;
  overflow: visible !important;
  padding: 38px 24px 0 !important;
  margin-top: -20px !important;
  margin-bottom: 0 !important;
  position: relative;
  z-index: 2 !important;
}

/* Map overlay — extends up under scroll top roll */
.df-hub-banner.df-city-viewport::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: -24px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-position: center 60% !important;
  opacity: 0.1 !important;
  mix-blend-mode: multiply !important;
  pointer-events: none !important;
  z-index: 0 !important;
  border-radius: 0 !important;
  animation: none !important;
  transform: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Light tan separator at bottom of banner (OSRS-style) */
.df-hub-banner.df-city-viewport::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 15% !important;
  right: 15% !important;
  height: 1px !important;
  background: #b5a484 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 5 !important;
  box-shadow: none !important;
}

/* Remove inner border pseudo on non-viewport banner */
.df-hub-banner:not(.df-city-viewport)::before {
  display: none !important;
}

/* Hide atmospheric layers — no fog, embers */
.df-city-atmosphere,
.df-city-gate-frame {
  display: none !important;
}

/* Banner content — left-aligned, clean layout */
.df-city-viewport .df-hub-banner-content {
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  padding: 0 !important;
  gap: 6px !important;
  position: relative;
  z-index: 3;
  max-width: 100% !important;
  width: 100% !important;
}

/* Remove corner bracket pseudo-elements */
.df-city-viewport .df-hub-banner-content::before,
.df-city-viewport .df-hub-banner-content::after {
  display: none !important;
}

/* Hide emoji location icon */
.df-city-viewport .df-hub-loc-icon {
  display: none !important;
}

/* Location name — grand title */
.df-city-viewport .df-hub-loc-name {
  font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
  color: #3d2b1f !important;
  font-size: 34px !important;
  font-weight: 900 !important;
  letter-spacing: 5px !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 0 rgba(210, 190, 150, 0.5) !important;
  text-align: left !important;
  animation: none !important;
  margin: 0 !important;
  line-height: 1.1 !important;
  -webkit-text-fill-color: unset !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  filter: none !important;
}

/* Location description — warm brown body text */
.df-city-viewport .df-hub-loc-desc {
  color: #5a4230 !important;
  font-family: 'Crimson Text', serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  text-align: left !important;
  margin-top: 4px !important;
}

/* Location badges — parchment-friendly */
.df-city-viewport .df-hub-loc-badges {
  margin-top: 6px;
}

/* ── Vexillum — hanging ribbon on the location banner, top-right ── */
.df-hub-banner > .df-hub-vexillum {
  position: absolute !important;
  top: -8px !important;
  right: 28px !important;
  width: 64px !important;
  height: 150px !important;
  z-index: 4 !important;
  flex-shrink: 0 !important;
}

/* Hide the pole and crossbar frame */
.df-hub-banner > .df-hub-vexillum .vex-pole,
.df-hub-banner > .df-hub-vexillum .vex-crossbar {
  display: none !important;
}

/* Banner cloth — fills the full wrapper, hangs like a ribbon */
.df-hub-banner > .df-hub-vexillum .vex-banner {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%) !important;
}

/* Emblem centered in ribbon */
.df-hub-banner > .df-hub-vexillum .vex-emblem {
  font-size: 24px !important;
  margin-top: 16px !important;
}

/* Hide fringe */
.df-hub-banner > .df-hub-vexillum .vex-fringe {
  display: none !important;
}

/* Mobile: shorten vexillum so it doesn't overlap action buttons */
@media (max-width: 480px) {
  .df-hub-banner > .df-hub-vexillum {
    width: 36px !important;
    height: 55px !important;
    right: 10px !important;
  }
  .df-hub-banner > .df-hub-vexillum .vex-emblem {
    font-size: 12px !important;
    margin-top: 6px !important;
  }
}

/* ── Stats/Actions overlay — inside banner-content now ── */
.df-city-viewport .df-city-stats-overlay {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 10px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 3 !important;
  isolation: isolate !important;
}

/* ── Parchment Pill Buttons (replaces dark orbs on scroll) ── */

/* Strip the dark gradient overlay behind the actions */
.df-city-viewport .df-city-actions-overlay {
  background: none !important;
  padding: 2px 0 6px !important;
  border-bottom: 1px solid var(--df-border) !important;
}

/* Pill shape base — warm brown on light parchment tint */
.df-city-viewport .df-action-orb {
  width: auto !important;
  height: auto !important;
  border-radius: 14px !important;
  padding: 6px 14px !important;
  background: rgba(90, 66, 48, 0.08) !important;
  border: 1px solid rgba(90, 66, 48, 0.3) !important;
  box-shadow: 0 1px 3px rgba(60, 40, 20, 0.12) !important;
  animation: none !important;
  display: inline-flex;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

/* Kill conic gradient ring */
.df-city-viewport .df-action-orb::before {
  display: none !important;
}

/* Kill inner dark circle background */
.df-city-viewport .df-action-orb::after {
  display: none !important;
}

/* Icons — warm brown, no glow */
.df-city-viewport .df-action-orb i {
  font-size: 13px !important;
  color: #5a4230 !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Labels — always visible, inline with icon */
.df-city-viewport .df-action-orb .df-action-orb-label {
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #5a4230 !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
}

/* Hover — subtle darken + lift */
.df-city-viewport .df-action-orb:hover {
  background: rgba(90, 66, 48, 0.15) !important;
  border-color: rgba(90, 66, 48, 0.45) !important;
  box-shadow: 0 2px 6px rgba(60, 40, 20, 0.2) !important;
  transform: translateY(-1px) !important;
}

.df-city-viewport .df-action-orb:hover i {
  color: #3d2a1a !important;
}

.df-city-viewport .df-action-orb:hover .df-action-orb-label {
  color: #3d2a1a !important;
  opacity: 1 !important;
}

/* Override all per-color variants to uniform brown */
.df-city-viewport .df-action-orb-bank::before,
.df-city-viewport .df-action-orb-ge::before,
.df-city-viewport .df-action-orb-dungeon::before,
.df-city-viewport .df-action-orb-guild::before,
.df-city-viewport .df-action-orb-travel::before {
  display: none !important;
}

.df-city-viewport .df-action-orb-bank i,
.df-city-viewport .df-action-orb-ge i,
.df-city-viewport .df-action-orb-dungeon i,
.df-city-viewport .df-action-orb-guild i,
.df-city-viewport .df-action-orb-travel i {
  color: #5a4230 !important;
  filter: none !important;
}

.df-city-viewport .df-action-orb-bank:hover,
.df-city-viewport .df-action-orb-ge:hover,
.df-city-viewport .df-action-orb-dungeon:hover,
.df-city-viewport .df-action-orb-guild:hover,
.df-city-viewport .df-action-orb-travel:hover {
  background: rgba(90, 66, 48, 0.15) !important;
  box-shadow: 0 2px 6px rgba(60, 40, 20, 0.2) !important;
}

/* Travel dropdown caret — show it for pills */
.df-city-viewport .df-action-orb-travel i.fa-caret-down {
  display: inline-block !important;
  font-size: 10px !important;
  margin-left: -2px !important;
}

/* Circular layout — tighter gap for pills */
.df-city-viewport .df-city-actions-circular {
  gap: 6px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

/* Even-child animation delay kill */
.df-city-viewport .df-action-orb:nth-child(even) {
  animation: none !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .df-hub-banner.df-city-viewport {
    padding: 20px 16px 10px !important;
  }

  .df-city-viewport .df-hub-loc-name {
    font-size: 18px !important;
    letter-spacing: 1px !important;
  }

  .df-hub > .df-hub-vexillum {
    width: 50px !important;
    height: 115px !important;
    right: 16px !important;
    top: 4px !important;
  }

  .df-hub > .df-hub-vexillum .vex-emblem {
    font-size: 18px !important;
    margin-top: 12px !important;
  }

  /* Pill buttons — tablet */
  .df-city-viewport .df-action-orb {
    padding: 5px 10px !important;
  }

  .df-city-viewport .df-action-orb .df-action-orb-label {
    font-size: 9px !important;
  }

  .df-city-viewport .df-action-orb i {
    font-size: 12px !important;
  }
}

@media (max-width: 480px) {
  .df-hub-banner.df-city-viewport {
    padding: 16px 12px 8px !important;
  }

  .df-city-viewport .df-hub-loc-name {
    font-size: 15px !important;
    letter-spacing: 0.5px !important;
  }

  .df-city-viewport .df-hub-loc-desc {
    font-size: 12px !important;
  }

  .df-hub > .df-hub-vexillum {
    width: 36px !important;
    height: 38px !important;
    right: 10px !important;
    top: 2px !important;
  }

  .df-hub > .df-hub-vexillum .vex-emblem {
    font-size: 12px !important;
    margin-top: 5px !important;
  }

  /* Pill buttons — mobile */
  .df-city-viewport .df-action-orb {
    padding: 4px 8px !important;
    border-radius: 12px !important;
    gap: 4px !important;
  }

  .df-city-viewport .df-action-orb .df-action-orb-label {
    font-size: 8px !important;
    letter-spacing: 0.3px !important;
  }

  .df-city-viewport .df-action-orb i {
    font-size: 11px !important;
  }

  .df-city-viewport .df-city-actions-circular {
    gap: 4px !important;
  }
}

/* =====================================================
   TOWNSQUARE — MINIMAL INK ON PARCHMENT
   =====================================================
   Strips dark-fantasy card styles from the hub sections
   (carousels, activity, news, directory) and restyles
   everything as flat ink-on-parchment.
   ===================================================== */

/* ---------- 3B: CAROUSEL RESTYLE ---------- */

/* Skill cards — transparent, brown ink */
.df-wh-skills-track .wh-skill-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.df-wh-skills-track .wh-skill-card:hover {
  background: rgba(90, 66, 48, 0.08) !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

.df-wh-skills-track .wh-skill-name {
  color: #5a4230 !important;
  text-shadow: none !important;
}

.df-wh-skills-track .wh-skill-card img {
  filter: none !important;
}

/* Enemy cards — transparent, brown ink */
.df-wh-bestiary-track .wh-enemy-card {
  background: transparent !important;
  border: none !important;
  border-right: 1px solid rgba(90, 66, 48, 0.15) !important;
  box-shadow: none !important;
}

.df-wh-bestiary-track .wh-enemy-card:last-child {
  border-right: none !important;
}

.df-wh-bestiary-track .wh-enemy-card:hover {
  background: rgba(90, 66, 48, 0.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

.wh-enemy-img {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.df-wh-bestiary-track .wh-enemy-name {
  color: #5a4230 !important;
  text-shadow: none !important;
}

.df-wh-bestiary-track .wh-enemy-info {
  border-top: none !important;
  padding: 2px 6px !important;
}

.wh-enemy-lvl {
  background: rgba(90, 66, 48, 0.08) !important;
  border: 1px solid rgba(90, 66, 48, 0.2) !important;
  color: #5a4230 !important;
  font-weight: 400 !important;
}

.wh-enemy-style {
  color: rgba(90, 66, 48, 0.5) !important;
}

/* Attack button — red text */
.df-wh-bestiary-track .wh-btn-attack {
  background: transparent !important;
  border-top: none !important;
  color: #a03020 !important;
  font-weight: 600 !important;
  padding: 2px 4px !important;
}

.df-wh-bestiary-track .wh-btn-attack:hover {
  background: rgba(160, 48, 32, 0.08) !important;
  color: #c0392b !important;
  box-shadow: none !important;
}

/* Carousel arrows — brown border, no gold */
.df-wh-carousel-arrow {
  border: 1px solid rgba(90, 66, 48, 0.25) !important;
  background: transparent !important;
  color: #7a5a3e !important;
  box-shadow: none !important;
}

.df-wh-carousel-arrow:hover {
  background: rgba(90, 66, 48, 0.1) !important;
  border-color: rgba(90, 66, 48, 0.4) !important;
  color: #5a4230 !important;
  box-shadow: none !important;
}

/* Section title — brown ink */
.df-wh-section-title {
  color: #5a4230 !important;
}

.df-wh-section-title i {
  color: #7a5a3e !important;
}

/* Divider — subtle brown */
.df-wh-divider {
  background: linear-gradient(90deg, transparent 5%, rgba(90, 66, 48, 0.15) 30%, rgba(90, 66, 48, 0.25) 50%, rgba(90, 66, 48, 0.15) 70%, transparent 95%) !important;
}

.df-wh-divider::before {
  color: rgba(90, 66, 48, 0.3) !important;
  background: transparent !important;
}

/* ---------- 3C: ACTIVITY RESTYLE ---------- */

/* Gauge values — brown */
.df-activity-gauges .df-city-gauge-val {
  color: #5a4230 !important;
  text-shadow: none !important;
}

.df-activity-gauges .df-city-gauge-ring {
  box-shadow: none !important;
}

/* Kill the gauge pulse animation */
.df-hub-gauge-row .df-hub-skill-icon {
  animation: none !important;
}

.df-hub-gauge-row .df-hub-skill-icon {
  box-shadow: inset 0 0 0 4px rgba(90, 66, 48, 0.08) !important;
}

.df-hub-gauge-row .df-hub-skill-lvl {
  color: #5a4230 !important;
  text-shadow: none !important;
}

.df-hub-gauge-row .df-hub-skill-name {
  color: rgba(90, 66, 48, 0.5) !important;
}

/* Activity toggle — brown tones */
.df-activity-toggle {
  color: rgba(90, 66, 48, 0.45) !important;
}

.df-activity-toggle:hover {
  color: #5a4230 !important;
}

/* Activity log wrap — subtle brown divider */
.df-activity-log-wrap {
  border-top: 1px solid rgba(90, 66, 48, 0.12) !important;
}

/* Activity feed items — brown */
.df-hub-activity-list .listing-item {
  border-bottom: 1px solid rgba(90, 66, 48, 0.1) !important;
  color: #5a4230 !important;
}

/* Activity flash — brown tint */
@keyframes df-activity-flash-parchment {
  0% { background: rgba(90, 66, 48, 0.1); }
  100% { background: transparent; }
}

.df-hub-activity-list .listing-item:first-child {
  animation: df-activity-flash-parchment 1.5s ease-out !important;
}

/* Activity scroll fade — transparent (parchment shows through) */
.df-hub-activity::after {
  background: linear-gradient(transparent, rgba(232, 220, 196, 0.6)) !important;
}

.df-hub-activity-list .listing-item .listing-unlock {
  color: rgba(90, 66, 48, 0.45) !important;
}

/* Arcane title — brown ink */
.df-arcane-title {
  color: #5a4230 !important;
  border-bottom: 1px solid rgba(90, 66, 48, 0.2) !important;
  text-shadow: none !important;
}

.df-arcane-title i {
  color: #7a5a3e !important;
}

/* ---------- 3D: NEWS — EXPANDED + PAGINATED ---------- */

.df-arcane-pedestal {
  display: block !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.df-news-list {
  display: block;
}

/* Each news item — fully expanded */
.df-news-item {
  padding: 8px 0;
  border-bottom: 1px solid rgba(90, 66, 48, 0.1);
}

.df-news-item:last-child {
  border-bottom: none;
}

/* Header row — title left, date right */
.df-news-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
}

.df-news-title {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 600;
  color: #3d2b1f;
  text-shadow: none !important;
  line-height: 1.3;
}

.df-news-date {
  flex-shrink: 0;
  font-size: 9px;
  color: rgba(90, 66, 48, 0.35);
  white-space: nowrap;
}

/* Excerpt — inline text with "Read more" */
.df-news-excerpt {
  color: #5a4230;
  font-family: 'Crimson Text', serif;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

/* "Read more" link — inline with text */
.df-news-readmore {
  color: #7a5a3e !important;
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
}

.df-news-readmore:hover {
  color: #3d2b1f !important;
}

/* Pagination */
.df-news-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 0 2px;
}

.df-news-pg-btn {
  background: none;
  border: none;
  color: rgba(90, 66, 48, 0.4);
  font-size: 10px;
  cursor: pointer;
  padding: 2px 6px;
}

.df-news-pg-btn:hover:not(:disabled) {
  color: #5a4230;
}

.df-news-pg-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.df-news-pg-info {
  font-size: 9px;
  color: rgba(90, 66, 48, 0.3);
  letter-spacing: 1px;
}

/* Legacy carousel/news classes — hide unused */
.df-arcane-chronicle {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.df-arcane-activity-list {
  color: #5a4230 !important;
}

/* ---------- 3A: MERGED DIRECTORY ---------- */

/* Hide old two-column grid */
.df-wh-directory-grid {
  display: none !important;
}

/* Fix clipping from .app overflow:hidden */
.df-hub {
  overflow: visible !important;
}

.df-arcane-nexus-content {
  overflow: visible !important;
}

/* Merged directory — 2-column compact grid with scroll */
.df-ts-directory {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  max-height: 260px;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border: none !important;
  border-radius: 0 !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(90, 66, 48, 0.2) transparent;
  min-height: 40px;
  width: 100% !important;
  box-sizing: border-box !important;
}

.df-ts-directory::-webkit-scrollbar {
  width: 4px;
}

.df-ts-directory::-webkit-scrollbar-track {
  background: transparent;
}

.df-ts-directory::-webkit-scrollbar-thumb {
  background: rgba(90, 66, 48, 0.2);
  border-radius: 2px;
}

/* Each cell — compact, icon left + text right, action at bottom-right */
.df-ts-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(90, 66, 48, 0.08);
  border-right: 1px solid rgba(90, 66, 48, 0.08);
  transition: background 0.15s;
  min-width: 0;
  box-sizing: border-box;
}

/* Remove right border on every 2nd column cell */
.df-ts-row:nth-child(2n) {
  border-right: none;
}

/* Remove bottom border on last row */
.df-ts-row:last-child,
.df-ts-row:nth-last-child(2):nth-child(odd) {
  border-bottom: none;
}

.df-ts-row:hover {
  background: rgba(90, 66, 48, 0.06);
}

/* Icon column — smaller for compact grid */
.df-ts-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #7a5a3e;
}

.df-ts-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  image-rendering: pixelated;
  border-radius: 2px;
}

/* Name + subtext — compact */
.df-ts-info {
  flex: 1;
  min-width: 0;
}

.df-ts-name {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  color: #3d2b1f;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.df-ts-sub {
  display: block;
  font-size: 9px;
  color: rgba(90, 66, 48, 0.5);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Type tag — hide by default in grid to save space, show on wider screens */
.df-ts-tag {
  display: none;
}

/* Action link — compact, right-aligned */
.df-ts-action {
  flex-shrink: 0;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #7a5a3e !important;
  text-decoration: none !important;
  padding: 2px 4px;
  transition: color 0.15s;
  white-space: nowrap;
}

.df-ts-action:hover {
  color: #3d2b1f !important;
  text-decoration: none !important;
}

.df-ts-action i {
  margin-left: 2px;
  font-size: 7px;
}

/* Empty state — spans full grid */
.df-ts-empty {
  grid-column: 1 / -1;
  padding: 16px 4px;
  text-align: center;
  color: rgba(90, 66, 48, 0.4);
  font-size: 12px;
  font-style: italic;
}

.df-ts-empty i {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
  opacity: 0.4;
}

/* Shared button overrides — also flatten old btn styles on parchment */
.wh-btn-attack {
  background: transparent !important;
  border: none !important;
  color: #7a5a3e !important;
  box-shadow: none !important;
}

.wh-btn-attack:hover {
  background: rgba(90, 66, 48, 0.08) !important;
  color: #5a4230 !important;
  box-shadow: none !important;
}

.wh-btn-shop {
  background: transparent !important;
  border: none !important;
  color: #7a5a3e !important;
  box-shadow: none !important;
}

.wh-btn-shop:hover {
  background: rgba(90, 66, 48, 0.08) !important;
  color: #5a4230 !important;
  box-shadow: none !important;
}

.wh-btn-talk {
  background: transparent !important;
  border: none !important;
  color: #7a5a3e !important;
  box-shadow: none !important;
}

.wh-btn-talk:hover {
  background: rgba(90, 66, 48, 0.08) !important;
  color: #5a4230 !important;
  box-shadow: none !important;
}

/* Shop/NPC cards inside old columns — flatten (fallback if old grid still shows) */
.wh-shop-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(90, 66, 48, 0.12) !important;
  border-left: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

.wh-shop-card:hover {
  background: rgba(90, 66, 48, 0.06) !important;
  transform: none !important;
  box-shadow: none !important;
}

.wh-shop-name {
  color: #3d2b1f !important;
  text-shadow: none !important;
}

.wh-shop-npc {
  color: rgba(90, 66, 48, 0.5) !important;
}

.wh-shop-icon {
  text-shadow: none !important;
}

.wh-npc-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(90, 66, 48, 0.12) !important;
  border-left: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

.wh-npc-card:hover {
  background: rgba(90, 66, 48, 0.06) !important;
  transform: none !important;
  box-shadow: none !important;
}

.wh-npc-name {
  color: #3d2b1f !important;
  text-shadow: none !important;
}

.wh-npc-type {
  color: rgba(90, 66, 48, 0.5) !important;
}

.wh-npc-img {
  background: rgba(90, 66, 48, 0.06) !important;
  border: 1px solid rgba(90, 66, 48, 0.12) !important;
}

/* Directory column header — brown */
.df-wh-directory-col-header {
  color: #5a4230 !important;
  border-bottom: 1px solid rgba(90, 66, 48, 0.15) !important;
}

.df-wh-directory-col-header i {
  color: #7a5a3e !important;
}

/* Show tags on wider screens only */
@media (min-width: 700px) {
  .df-ts-tag {
    display: inline-block;
    flex-shrink: 0;
    font-family: 'Cinzel', serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1.4;
    white-space: nowrap;
  }

  .df-ts-tag-shop {
    background: rgba(138, 111, 30, 0.1);
    color: #8a6f1e;
    border: 1px solid rgba(138, 111, 30, 0.2);
  }

  .df-ts-tag-npc {
    background: rgba(90, 66, 48, 0.08);
    color: #7a5a3e;
    border: 1px solid rgba(90, 66, 48, 0.18);
  }
}

/* Mobile: single column, tighter */
@media (max-width: 480px) {
  .df-ts-directory {
    grid-template-columns: 1fr;
    max-height: 200px;
  }

  .df-ts-row {
    padding: 5px 6px;
    gap: 6px;
    border-right: none !important;
  }

  .df-ts-icon {
    width: 20px;
    height: 20px;
    font-size: 13px;
  }

  .df-ts-icon img {
    width: 20px;
    height: 20px;
  }

  .df-ts-name {
    font-size: 10px;
  }

  .df-ts-sub {
    font-size: 8px;
  }

  .df-ts-action {
    font-size: 8px;
    padding: 2px 3px;
  }
}

/* ---------- SECTION DIVIDER LABELS ---------- */
/* Thin line with centered section name — replaces bulky h4 titles */

.df-section-divider {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 2px 0 2px;
  width: 100%;
}

.df-section-divider::before,
.df-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(90, 66, 48, 0.2);
}

.df-section-divider > span {
  flex-shrink: 0;
  padding: 0 12px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(90, 66, 48, 0.45);
  white-space: nowrap;
}

.df-section-divider > span i {
  margin-right: 5px;
  font-size: 9px;
  opacity: 0.6;
}

/* Hide old h4 titles (safety fallback) */
.df-arcane-activity > .df-activity-header > .df-arcane-title,
.df-arcane-shard > .df-arcane-title,
.df-arcane-nexus-content > .df-arcane-title,
.df-arcane-chronicle > .df-arcane-title {
  display: none !important;
}

/* Remove activity section entirely */
.df-arcane-activity {
  display: none !important;
}

/* ---------- FOOTER SPACING ---------- */
.df-arcane-hub {
  padding-bottom: 30px !important;
}

/* ---------- CAROUSEL ARROWS — COMPACT ---------- */
.df-wh-carousel-arrow {
  width: 18px !important;
  height: 28px !important;
  font-size: 11px !important;
  border-radius: 2px !important;
  opacity: 0.5 !important;
}

.df-wh-carousel-arrow:hover {
  opacity: 0.8 !important;
}

@media (max-width: 768px) {
  .df-wh-carousel-arrow {
    width: 16px !important;
    height: 24px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 480px) {
  .df-wh-carousel-arrow {
    width: 14px !important;
    height: 20px !important;
    font-size: 9px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PARCHMENT CARDS — Replace scroll with standalone cards
   ═══════════════════════════════════════════════════════════ */

/* Step 1: Remove scroll wrapper from .df-hub */
.df-hub {
  background: none !important;
  margin-top: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  gap: 8px !important;
}

.df-hub::before,
.df-hub::after {
  display: none !important;
}

/* Step 2: Banner card */
.df-hub-banner.df-city-viewport {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    #e2d5b8 !important;
  border-radius: 8px !important;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.12),
    inset 0 0 20px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 38px 24px 0 !important;
  border: 1px solid rgba(160, 140, 100, 0.3) !important;
  z-index: auto !important;
}

/* Map overlay — clip to card, no negative overhang */
.df-hub-banner.df-city-viewport::before {
  top: 0 !important;
  border-radius: 8px !important;
}

/* Remove bottom separator line (scroll style) */
.df-hub-banner.df-city-viewport::after {
  display: none !important;
}

/* Step 3: Hub content card */
.df-arcane-hub {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    #e2d5b8 !important;
  border-radius: 8px !important;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.12),
    inset 0 0 20px rgba(0, 0, 0, 0.04) !important;
  padding: 16px 24px 30px !important;
  border: 1px solid rgba(160, 140, 100, 0.3) !important;
  z-index: auto !important;
}

/* Vexillum — pinned to top edge of banner card, shorter */
.df-hub > .df-hub-vexillum {
  height: 105px !important;
  top: 0 !important;
}

.df-hub > .df-hub-vexillum .vex-emblem {
  font-size: 20px !important;
  margin-top: 12px !important;
}

@media (max-width: 768px) {
  .df-hub > .df-hub-vexillum {
    height: 85px !important;
    top: 0 !important;
  }

  .df-hub > .df-hub-vexillum .vex-emblem {
    font-size: 16px !important;
    margin-top: 10px !important;
  }
}

@media (max-width: 480px) {
  .df-hub > .df-hub-vexillum {
    height: 38px !important;
    top: 0 !important;
  }

  .df-hub > .df-hub-vexillum .vex-emblem {
    font-size: 12px !important;
    margin-top: 5px !important;
  }
}

/* ── Override touch-friendly 44px min on carousel arrows ── */
.df-wh-carousel-arrow {
  min-height: 0 !important;
  min-width: 0 !important;
}

/* ── Mobile: compact skill & combat carousel cards ── */

/* Remove side borders on combat NPC cards (all sizes) */
.df-wh-bestiary-track .wh-enemy-card {
  border-right: none !important;
}

/* Reduce skill carousel padding */
.df-wh-skills-track {
  padding: 3px 2px !important;
}

.df-wh-skills-track .wh-skill-card {
  width: 68px !important;
  padding: 5px 2px 4px !important;
}

/* Reduce combat carousel padding */
.df-wh-bestiary-track {
  padding: 3px 2px !important;
}

.df-wh-bestiary-track .wh-enemy-card {
  width: 85px !important;
  padding: 0 !important;
}

.wh-enemy-img {
  height: 48px !important;
  padding: 2px 0 !important;
}

.df-wh-bestiary-track .wh-enemy-info {
  padding: 2px 4px !important;
}

.df-wh-bestiary-track .wh-btn-attack {
  padding: 2px 3px !important;
  font-size: 9px !important;
}

@media (max-width: 768px) {
  .df-wh-skills-track .wh-skill-card {
    width: 60px !important;
    padding: 4px 2px 3px !important;
  }

  .df-wh-skills-track .wh-skill-card img {
    width: 20px !important;
    height: 20px !important;
  }

  .df-wh-skills-track .wh-skill-name {
    font-size: 6px !important;
  }

  .df-wh-bestiary-track .wh-enemy-card {
    width: 72px !important;
  }

  .wh-enemy-img {
    height: 40px !important;
  }

  .df-wh-bestiary-track .wh-enemy-name {
    font-size: 8px !important;
  }
}

@media (max-width: 480px) {
  .df-wh-skills-track .wh-skill-card {
    width: 52px !important;
    padding: 3px 1px 2px !important;
  }

  .df-wh-skills-track .wh-skill-card img {
    width: 18px !important;
    height: 18px !important;
  }

  .df-wh-bestiary-track .wh-enemy-card {
    width: 64px !important;
  }

  .wh-enemy-img {
    height: 36px !important;
  }

  .df-wh-bestiary-track .wh-enemy-name {
    font-size: 7px !important;
  }

  .df-wh-bestiary-track .wh-btn-attack {
    font-size: 8px !important;
  }
}

/* ── Combat icon in enemy cards ── */
.wh-enemy-cb-icon {
  height: 10px;
  width: auto;
  vertical-align: middle;
  image-rendering: pixelated;
  margin-right: 1px;
}

/* ── Attack button closer to NPC ── */
.df-wh-bestiary-track .wh-enemy-card {
  gap: 0 !important;
}

.df-wh-bestiary-track .wh-enemy-info {
  padding: 1px 4px !important;
  text-align: center !important;
}

.df-wh-bestiary-track .wh-btn-attack {
  padding: 1px 2px !important;
  margin: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  border-top: none !important;
}

.wh-enemy-img {
  padding: 1px 0 !important;
  margin: 0 !important;
}

.df-wh-bestiary-track .wh-enemy-meta {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  display: flex !important;
  justify-content: center !important;
}

/* ── News section spacing from Locals ── */
.df-arcane-pedestal {
  margin-top: 8px !important;
}

/* ── Locals directory: single column on mobile ── */
@media (max-width: 768px) {
  .df-ts-directory {
    grid-template-columns: 1fr !important;
    max-height: 220px;
  }
}

/* ── Map background: retain zoom on banner card ── */
.df-hub-banner.df-city-viewport::before {
  transform: scale(1.3) !important;
}

@media (max-width: 768px) {
  .df-hub-banner.df-city-viewport::before {
    transform: scale(1.6) !important;
  }
}

@media (max-width: 480px) {
  .df-hub-banner.df-city-viewport::before {
    transform: scale(1.8) !important;
  }
}

/* ── Override touch-friendly 44px min on city action orbs ── */
.df-city-viewport .df-action-orb {
  min-height: 0 !important;
  min-width: 0 !important;
}

/* ── Mobile: bigger city name, less top padding ── */
@media (max-width: 768px) {
  .df-hub-banner.df-city-viewport {
    padding: 10px 16px 10px !important;
  }

  .df-city-viewport .df-hub-loc-name {
    font-size: 22px !important;
  }

  .df-hub {
    margin-top: 4px !important;
  }
}

@media (max-width: 480px) {
  .df-hub-banner.df-city-viewport {
    padding: 8px 12px 8px !important;
  }

  .df-city-viewport .df-hub-loc-name {
    font-size: 20px !important;
  }

  .df-hub {
    margin-top: 2px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   INLINE SKILL ACTIONS — below skills carousel
   ═══════════════════════════════════════════════════════════ */

.df-hub-skill-actions {
  margin-top: 4px;
  padding: 8px 10px;
  border-top: 1px solid rgba(90, 66, 48, 0.15);
  animation: df-tab-enter 0.25s ease-out;
}

.df-hub-skill-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.df-hub-skill-header-icon {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
}

.df-hub-skill-header-name {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  color: #5a4230;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.df-hub-skill-header-desc {
  font-size: 10px;
  color: rgba(90, 66, 48, 0.5);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.df-hub-skill-close {
  margin-left: auto;
  background: none;
  border: none;
  color: rgba(90, 66, 48, 0.4);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 12px;
  min-height: 0 !important;
  min-width: 0 !important;
}

.df-hub-skill-close:hover {
  color: #5a4230;
}

.df-hub-skill-empty {
  text-align: center;
  padding: 12px;
  color: rgba(90, 66, 48, 0.5);
  font-size: 11px;
}

.df-hub-skill-empty i {
  margin-right: 4px;
}

/* Action cards — grid matching combat NPC card size, parchment style */
.df-hub-skill-actions .df-action-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  padding: 2px 0 !important;
}

.df-hub-skill-actions .df-action-card {
  width: 100px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: background 0.15s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

.df-hub-skill-actions .df-action-card:hover {
  background: rgba(90, 66, 48, 0.08) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.df-hub-skill-actions .df-action-card:active {
  transform: none !important;
  box-shadow: none !important;
}

.df-hub-skill-actions .df-action-img {
  width: 100% !important;
  height: auto !important;
}

.df-hub-skill-actions .df-action-img img {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  display: block !important;
  padding: 0 !important;
}

.df-hub-skill-actions .df-action-name {
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #5a4230 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.2 !important;
  padding: 1px 4px !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow: visible !important;
  max-width: 100% !important;
}

.df-hub-skill-actions .df-action-stats {
  display: flex !important;
  gap: 4px !important;
  font-size: 9px !important;
  color: rgba(90, 66, 48, 0.5) !important;
  padding: 1px 0 !important;
}

.df-hub-skill-actions .df-action-stats i {
  margin-right: 1px !important;
}

.df-hub-skill-actions .df-action-stats .fa-star {
  color: rgba(90, 66, 48, 0.5) !important;
}

.df-hub-skill-actions .df-action-stats .fa-clock {
  color: rgba(90, 66, 48, 0.5) !important;
}

.df-hub-skill-actions .df-action-rewards {
  font-size: 9px !important;
  color: #5a4230 !important;
  line-height: 1.2 !important;
}

.df-hub-skill-actions .df-action-rewards .fa-fire-alt {
  color: #5a4230 !important;
}

.df-hub-skill-actions .df-action-requires {
  font-size: 9px !important;
  color: #5a4230 !important;
  line-height: 1.2 !important;
}

.df-hub-skill-actions .df-action-requires .fa-fire-alt {
  color: #5a4230 !important;
}

.df-action-equip-icon {
  height: 12px;
  width: auto;
  vertical-align: middle;
  image-rendering: pixelated;
  margin-right: 1px;
}

/* Muted text inside parchment cards — brown instead of gold */
.df-hub-skill-actions .text-muted,
.df-arcane-hub .text-muted {
  color: rgba(90, 66, 48, 0.55) !important;
}

/* Empty state messages inside parchment cards — brown ink, centered */
.df-arcane-hub .wh-empty {
  color: rgba(90, 66, 48, 0.5) !important;
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
}

.df-arcane-hub .wh-empty i {
  color: rgba(90, 66, 48, 0.35) !important;
  opacity: 1 !important;
}

.df-hub-skill-actions .df-action-success {
  display: none !important;
}

@media (max-width: 768px) {
  .df-hub-skill-actions .df-action-card {
    width: 85px !important;
  }

  .df-hub-skill-actions .df-action-img img {
    width: 36px !important;
    height: 36px !important;
  }
}

@media (max-width: 480px) {
  .df-hub-skill-actions .df-action-card {
    width: 75px !important;
  }

  .df-hub-skill-actions .df-action-img img {
    width: 36px !important;
    height: 36px !important;
  }

  .df-hub-skill-actions .df-action-name {
    font-size: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PARCHMENT TRAVEL DROPDOWN — matches card aesthetic
   ═══════════════════════════════════════════════════════════ */

.df-hub-travel-menu {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    #e2d5b8 !important;
  border: 1px solid rgba(160, 140, 100, 0.4) !important;
  border-radius: 8px !important;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.18),
    inset 0 0 16px rgba(0, 0, 0, 0.03) !important;
  z-index: 9999 !important;
  min-width: 260px !important;
  max-height: 360px !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(90, 66, 48, 0.25) rgba(90, 66, 48, 0.08);
}

.df-hub-travel-menu::-webkit-scrollbar {
  width: 6px;
}

.df-hub-travel-menu::-webkit-scrollbar-track {
  background: rgba(90, 66, 48, 0.06);
}

.df-hub-travel-menu::-webkit-scrollbar-thumb {
  background: rgba(90, 66, 48, 0.2);
  border-radius: 3px;
}

/* Section headers */
.df-hub-travel-menu .df-hub-travel-section-header {
  color: #5a4230 !important;
  border-top-color: rgba(90, 66, 48, 0.12) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 8px 14px 6px !important;
  opacity: 0.7 !important;
}

/* Route items */
.df-hub-travel-menu .rs-travel-route-item,
.df-hub-travel-menu .df-hub-travel-route {
  border-bottom: 1px solid rgba(90, 66, 48, 0.08) !important;
  color: #5a4230 !important;
  padding: 8px 14px !important;
  transition: background 0.15s ease !important;
}

.df-hub-travel-menu .rs-travel-route-item:hover,
.df-hub-travel-menu .df-hub-travel-route:hover {
  background: rgba(90, 66, 48, 0.08) !important;
  color: #3d2a18 !important;
  text-decoration: none !important;
}

.df-hub-travel-menu .rs-travel-route-item:last-child,
.df-hub-travel-menu .df-hub-travel-route:last-child {
  border-bottom: none !important;
}

/* Destination name */
.df-hub-travel-menu .rs-travel-route-dest,
.df-hub-travel-menu .df-hub-travel-route-name {
  color: #3d2a18 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

/* Travel time badge */
.df-hub-travel-menu .rs-travel-route-time {
  color: rgba(90, 66, 48, 0.55) !important;
  background: rgba(90, 66, 48, 0.08) !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  font-size: 10px !important;
  font-family: monospace !important;
}

/* Cost */
.df-hub-travel-menu .rs-travel-route-cost {
  color: #7a5c20 !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}

/* Free label */
.df-hub-travel-menu .rs-travel-route-free {
  color: #3d7a37 !important;
  font-weight: 600 !important;
  font-size: 10px !important;
}

/* Method badge */
.df-hub-travel-menu .rs-travel-route-badge {
  font-size: 9px !important;
  color: rgba(90, 66, 48, 0.6) !important;
  background: rgba(90, 66, 48, 0.06) !important;
  border: 1px solid rgba(90, 66, 48, 0.1) !important;
  border-radius: 3px !important;
  padding: 1px 5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Method emoji */
.df-hub-travel-menu .rs-travel-route-method {
  font-size: 14px !important;
}

/* Vexillum mini icons in routes */
.df-hub-travel-menu .rs-route-vex {
  font-size: 12px !important;
}

/* Guild locked routes */
.df-hub-travel-menu .df-hub-guild-locked {
  opacity: 0.4 !important;
}

/* Loading/empty state */
.df-hub-travel-menu .df-hub-skeleton {
  color: rgba(90, 66, 48, 0.4) !important;
  padding: 16px !important;
  text-align: center !important;
  font-style: italic !important;
  font-size: 12px !important;
}

/* Travel modal — parchment style */
#travelModal .rs-travel-modal-content {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    #e2d5b8 !important;
  border: 1px solid rgba(160, 140, 100, 0.4) !important;
  border-top: 1px solid rgba(160, 140, 100, 0.4) !important;
  border-radius: 10px !important;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.3),
    inset 0 0 20px rgba(0, 0, 0, 0.04) !important;
  padding: 0 !important;
  overflow: hidden !important;
  width: 380px !important;
  max-width: 90vw !important;
}

#travelModal .ts-info {
  padding: 20px 30px 24px !important;
  text-align: center !important;
}

#travelModal .rs-travel-progress-text {
  color: #5a4230 !important;
  font-family: 'Cinzel', serif !important;
  font-size: 14px !important;
  text-shadow: none !important;
  letter-spacing: 0.3px !important;
  margin-bottom: 10px !important;
}

#travelModal .ts-method-label {
  color: rgba(90, 66, 48, 0.55) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

#travelModal .rs-travel-progress-bar {
  background: rgba(90, 66, 48, 0.1) !important;
  border: 1px solid rgba(90, 66, 48, 0.15) !important;
  border-radius: 6px !important;
  height: 10px !important;
  overflow: hidden !important;
  margin: 0 auto !important;
  width: 100% !important;
}

#travelModal .rs-travel-progress-fill {
  background: linear-gradient(90deg, #8b6914, #b8860b, #d4a017) !important;
  height: 100% !important;
  border-radius: 6px !important;
  box-shadow: 0 0 6px rgba(139, 105, 20, 0.3) !important;
  animation: none !important;
}

/* Fast travel admin button */
#travelModal .rs-fast-travel-btn {
  background: rgba(90, 66, 48, 0.1) !important;
  border: 1px solid rgba(90, 66, 48, 0.2) !important;
  color: #5a4230 !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  padding: 4px 12px !important;
  margin-top: 10px !important;
  cursor: pointer !important;
}

#travelModal .rs-fast-travel-btn:hover {
  background: rgba(90, 66, 48, 0.18) !important;
}

/* Travel modal backdrop — subtle darkening */
#travelModal {
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  pointer-events: auto !important;
}

/* Travel scene — parchment-compatible colors */
#travelModal .ts-scene {
  border-bottom: 1px solid rgba(90, 66, 48, 0.15) !important;
  border-radius: 6px 6px 0 0 !important;
  overflow: hidden !important;
}

#travelModal .ts-walk {
  background:
    radial-gradient(ellipse 60% 50% at 50% 60%, rgba(90, 66, 48, 0.12) 0%, transparent 70%),
    linear-gradient(180deg, #d8c9a8 0%, #e2d5b8 50%, #d8c9a8 100%) !important;
}

#travelModal .ts-walk::before {
  opacity: 0.08 !important;
}

/* Footstep prints — darker on parchment */
#travelModal .ts-foot-shape::before {
  background: rgba(90, 66, 48, 0.45) !important;
  box-shadow: 0 0 3px rgba(90, 66, 48, 0.15) !important;
}

#travelModal .ts-foot-shape::after {
  background: rgba(90, 66, 48, 0.35) !important;
}

/* ═══════════════════════════════════════════════════════════
   DUNGEON THEME — dark, ominous override when inside dungeon
   Activated by .df-dungeon-active on .df-hub
   ═══════════════════════════════════════════════════════════ */

/* Banner card — dark stone */
.df-dungeon-active .df-hub-banner.df-city-viewport {
  background: #1a1614 !important;
  border-color: rgba(80, 60, 50, 0.5) !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    inset 0 0 30px rgba(0, 0, 0, 0.3) !important;
}

/* Map overlay — skulls dungeon background (matches city map style) */
.df-dungeon-active .df-hub-banner.df-city-viewport::before {
  background-image: url('/assets/game/dungeon-bg.jpg') !important;
  background-position: center center !important;
  background-size: cover !important;
  opacity: 0.4 !important;
  mix-blend-mode: multiply !important;
  animation: none !important;
  transform: scale(1.3) !important;
  filter: saturate(0.3) !important;
}

/* Fog overlay on banner — drifting mist */
.df-dungeon-active .df-hub-banner.df-city-viewport::after {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -50% !important;
  right: -50% !important;
  bottom: 0 !important;
  background:
    radial-gradient(ellipse 40% 60% at 20% 50%, rgba(100, 90, 80, 0.3) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 70% 40%, rgba(80, 70, 65, 0.25) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 40% 70%, rgba(90, 80, 70, 0.2) 0%, transparent 60%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  animation: df-dungeon-fog 20s ease-in-out infinite alternate !important;
  opacity: 0.8 !important;
}

@keyframes df-dungeon-fog {
  0% {
    transform: translateX(0) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translateX(5%) scale(1.05);
    opacity: 0.9;
  }
  100% {
    transform: translateX(-3%) scale(1.02);
    opacity: 0.75;
  }
}

/* City name — pale ghostly text */
.df-dungeon-active .df-city-viewport .df-hub-loc-name {
  color: #c8bba8 !important;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}

/* Location description */
.df-dungeon-active .df-city-viewport .df-hub-loc-desc {
  color: rgba(180, 165, 145, 0.7) !important;
}

/* Action orb labels in dungeon */
.df-dungeon-active .df-action-orb .df-action-orb-label {
  color: rgba(180, 165, 145, 0.5) !important;
}

/* Vexillum pole/banner — darker */
.df-dungeon-active .df-hub-vexillum .vex-pole {
  background: linear-gradient(180deg, #3a3028, #1a1510) !important;
}

/* Hub content card — dark dungeon stone */
.df-dungeon-active .df-arcane-hub {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #1e1b17 0%, #161310 100%) !important;
  border-color: rgba(80, 60, 50, 0.4) !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    inset 0 0 30px rgba(0, 0, 0, 0.2) !important;
}

/* Section dividers — muted bone color */
.df-dungeon-active .df-section-divider span {
  color: rgba(180, 165, 145, 0.6) !important;
}

.df-dungeon-active .df-section-divider::before,
.df-dungeon-active .df-section-divider::after {
  background: rgba(180, 165, 145, 0.12) !important;
}

/* Skill cards — dark with pale text */
.df-dungeon-active .wh-skill-card {
  color: #c8bba8 !important;
}

.df-dungeon-active .wh-skill-name {
  color: rgba(180, 165, 145, 0.7) !important;
}

/* Combat NPC cards — no background, just dark text */
.df-dungeon-active .wh-enemy-card {
  background: transparent !important;
}

.df-dungeon-active .wh-enemy-name {
  color: #c8bba8 !important;
}

.df-dungeon-active .wh-enemy-lvl {
  color: rgba(180, 165, 145, 0.6) !important;
}

.df-dungeon-active .wh-btn-attack {
  color: #c44040 !important;
  border-color: rgba(196, 64, 64, 0.3) !important;
}

.df-dungeon-active .wh-btn-attack:hover {
  background: rgba(196, 64, 64, 0.15) !important;
}

/* Carousel arrows */
.df-dungeon-active .df-wh-carousel-arrow {
  color: rgba(180, 165, 145, 0.4) !important;
  border-color: rgba(180, 165, 145, 0.15) !important;
}

.df-dungeon-active .df-wh-carousel-arrow:hover {
  color: rgba(180, 165, 145, 0.7) !important;
  background: rgba(180, 165, 145, 0.08) !important;
}

/* Inline skill actions — dark dungeon variant */
.df-dungeon-active .df-hub-skill-header-name {
  color: #c8bba8 !important;
}

.df-dungeon-active .df-hub-skill-header-desc {
  color: rgba(180, 165, 145, 0.4) !important;
}

.df-dungeon-active .df-hub-skill-close {
  color: rgba(180, 165, 145, 0.35) !important;
}

.df-dungeon-active .df-hub-skill-close:hover {
  color: #c8bba8 !important;
}

.df-dungeon-active .df-hub-skill-actions {
  border-top-color: rgba(180, 165, 145, 0.1) !important;
}

.df-dungeon-active .df-hub-skill-actions .df-action-name {
  color: #c8bba8 !important;
}

.df-dungeon-active .df-hub-skill-actions .df-action-stats {
  color: rgba(180, 165, 145, 0.45) !important;
}

.df-dungeon-active .df-hub-skill-actions .df-action-rewards {
  color: rgba(180, 165, 145, 0.6) !important;
}

.df-dungeon-active .df-hub-skill-actions .df-action-requires {
  color: rgba(180, 165, 145, 0.6) !important;
}

.df-dungeon-active .df-hub-skill-actions .df-action-card:hover {
  background: rgba(180, 165, 145, 0.06) !important;
}

.df-dungeon-active .df-hub-skill-actions .text-muted {
  color: rgba(180, 165, 145, 0.4) !important;
}

/* Exit dungeon button — red highlight */
.df-dungeon-active #hubExitDungeonBtn {
  box-shadow:
    0 0 15px rgba(255, 60, 60, 0.3),
    inset 0 0 0 1px rgba(255, 60, 60, 0.5) !important;
}

.df-dungeon-active #hubExitDungeonBtn i {
  color: #ff6b6b !important;
  filter: drop-shadow(0 0 6px rgba(255, 60, 60, 0.7)) !important;
}

.df-dungeon-active #hubExitDungeonBtn .df-action-orb-label {
  color: #ff6b6b !important;
  opacity: 1 !important;
}

/* Empty state — readable on dark */
.df-dungeon-active .wh-empty {
  color: rgba(180, 165, 145, 0.45) !important;
}

.df-dungeon-active .wh-empty i {
  color: rgba(180, 165, 145, 0.3) !important;
}

/* Locals directory text readable on dark dungeon backgrounds */
.df-dungeon-active .df-ts-name {
  color: #d4c8b0 !important;
}

.df-dungeon-active .df-ts-sub {
  color: rgba(200, 187, 168, 0.6) !important;
}

.df-dungeon-active .df-ts-tag {
  color: rgba(200, 187, 168, 0.7) !important;
}

.df-dungeon-active .df-ts-directory a {
  color: #c8bba8 !important;
}

.df-dungeon-active .df-ts-directory a:hover {
  color: #e0d5c2 !important;
}

.df-dungeon-active .df-hub-update-item {
  border-color: rgba(180, 165, 145, 0.08) !important;
}

/* Hide news section in dungeon and guild views */
.df-dungeon-active .df-arcane-pedestal,
.df-guild-active .df-arcane-pedestal {
  display: none !important;
}

/* Responsive dungeon background zoom (matches city map scaling) */
@media (max-width: 768px) {
  .df-dungeon-active .df-hub-banner.df-city-viewport::before {
    transform: scale(1.6) !important;
  }
}

@media (max-width: 480px) {
  .df-dungeon-active .df-hub-banner.df-city-viewport::before {
    transform: scale(1.8) !important;
  }
}

/* Body background — true black dungeon */
body.df-dungeon-active {
  background: #000000 !important;
  background-attachment: fixed !important;
  background-color: #000000 !important;
}

body.df-dungeon-active::before {
  background: none !important;
  opacity: 0 !important;
}

/* Hide orbs in dungeon */
body.df-dungeon-active #df-orbs {
  display: none !important;
}

/* Fog layers — real image-based fog (injected via JS) */
.df-fogwrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  filter: blur(1px) grayscale(0.3) saturate(1.1) sepia(0.15);
  overflow: hidden;
}

#foglayer_01, #foglayer_02, #foglayer_03 {
  height: 100%;
  position: absolute;
  width: 200%;
}

#foglayer_01 .image01, #foglayer_01 .image02,
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02 {
  float: left;
  height: 100%;
  width: 50%;
}

#foglayer_01 .image01, #foglayer_01 .image02 {
  background: url('/assets/game/fog1.png') center center/cover no-repeat transparent;
}

#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02 {
  background: url('/assets/game/fog2.png') center center/cover no-repeat transparent;
}

#foglayer_01 {
  animation: df-fog-opacity-1 60s linear infinite, df-fog-move 120s linear infinite;
}

#foglayer_02 {
  animation: df-fog-opacity-2 70s linear infinite, df-fog-move 105s linear infinite;
}

#foglayer_03 {
  animation: df-fog-opacity-3 65s linear infinite, df-fog-move 110s linear infinite;
}

@keyframes df-fog-opacity-1 {
  0% { opacity: .03; }
  22% { opacity: .09; }
  40% { opacity: .06; }
  58% { opacity: .08; }
  80% { opacity: .04; }
  100% { opacity: .03; }
}

@keyframes df-fog-opacity-2 {
  0% { opacity: .07; }
  25% { opacity: .04; }
  50% { opacity: .02; }
  80% { opacity: .06; }
  100% { opacity: .07; }
}

@keyframes df-fog-opacity-3 {
  0% { opacity: .1; }
  27% { opacity: .04; }
  52% { opacity: .08; }
  68% { opacity: .05; }
  100% { opacity: .1; }
}

/* Dungeon fog — stronger opacity */
body.df-dungeon-active #foglayer_01 {
  animation: df-dgfog-opacity-1 60s linear infinite, df-fog-move 120s linear infinite !important;
}

body.df-dungeon-active #foglayer_02 {
  animation: df-dgfog-opacity-2 70s linear infinite, df-fog-move 105s linear infinite !important;
}

body.df-dungeon-active #foglayer_03 {
  animation: df-dgfog-opacity-3 65s linear infinite, df-fog-move 110s linear infinite !important;
}

@keyframes df-dgfog-opacity-1 {
  0% { opacity: .08; }
  22% { opacity: .35; }
  40% { opacity: .2; }
  58% { opacity: .3; }
  80% { opacity: .12; }
  100% { opacity: .08; }
}

@keyframes df-dgfog-opacity-2 {
  0% { opacity: .35; }
  25% { opacity: .15; }
  50% { opacity: .08; }
  80% { opacity: .22; }
  100% { opacity: .35; }
}

@keyframes df-dgfog-opacity-3 {
  0% { opacity: .55; }
  27% { opacity: .15; }
  52% { opacity: .4; }
  68% { opacity: .2; }
  100% { opacity: .55; }
}

@keyframes df-fog-move {
  0% { left: 0; }
  100% { left: -100%; }
}

@media (max-width: 767px) {
  #foglayer_01 .image01, #foglayer_01 .image02,
  #foglayer_02 .image01, #foglayer_02 .image02,
  #foglayer_03 .image01, #foglayer_03 .image02 {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════
   GUILD THEME — rich, ornate golden hall when inside a guild
   Activated by .df-guild-active on .df-hub and body
   ═══════════════════════════════════════════════════════════ */

/* Body background — deep forest green with warm vignette */
body.df-guild-active {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(180, 150, 50, 0.15), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(30, 80, 50, 0.3), transparent 55%),
    radial-gradient(circle at 20% 70%, rgba(30, 60, 30, 0.25), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.5), transparent 70%),
    linear-gradient(180deg, #0d1a0d 0%, #0a180f 30%, #061208 60%, #030a05 100%) !important;
  background-attachment: fixed !important;
  background-color: #030a05 !important;
}

body.df-guild-active::before {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E") !important;
}

/* Banner card — guild background image overlay */
.df-guild-active .df-hub-banner.df-city-viewport::before {
  background-image: url('/assets/game/guild-bg.jpg') !important;
  background-position: center 15% !important;
  background-size: 100% auto !important;
  opacity: 0.15 !important;
  mix-blend-mode: multiply !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

/* Exit guild button — green highlight, readable on parchment */
.df-guild-active .df-hub-exit-guild-btn {
  background: rgba(30, 100, 50, 0.85) !important;
  border-color: rgba(60, 180, 80, 0.6) !important;
  color: #fff !important;
  box-shadow:
    0 0 12px rgba(60, 180, 80, 0.3),
    inset 0 0 0 1px rgba(60, 180, 80, 0.4) !important;
}

.df-guild-active .df-hub-exit-guild-btn:hover {
  background: rgba(40, 130, 60, 0.9) !important;
  border-color: rgba(80, 200, 100, 0.7) !important;
  color: #fff !important;
}

.df-guild-active .df-hub-exit-guild-btn i,
.df-guild-active .df-hub-exit-guild-btn span {
  color: #fff !important;
  filter: none !important;
}

/* Fog — slightly green-tinted in guild */
body.df-guild-active .df-fogwrapper {
  filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.1) hue-rotate(60deg) !important;
}

/* Responsive guild background zoom */
@media (max-width: 768px) {
  .df-guild-active .df-hub-banner.df-city-viewport::before {
    transform: scale(1.6) !important;
  }
}

@media (max-width: 480px) {
  .df-guild-active .df-hub-banner.df-city-viewport::before {
    transform: scale(1.8) !important;
  }
}

/* ===== ENEMY CARD — CLICKABLE (context menu) ===== */
.wh-enemy-clickable {
  cursor: pointer;
  transition: background 0.15s ease;
}
.wh-enemy-clickable:hover {
  background: rgba(201, 168, 76, 0.08);
}

/* ===== INTERACTIVE FACILITIES (Wheat Field, etc.) ===== */
.df-facilities-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.df-facility-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(90, 66, 48, 0.08);
  transition: background 0.15s;
  min-width: 0;
  box-sizing: border-box;
}

.df-facility-card:last-child {
  border-bottom: none;
}

.df-facility-card:hover {
  background: rgba(90, 66, 48, 0.06);
}

.df-facility-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #7a5a3e;
}

.df-facility-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
  border-radius: 2px;
}

.df-facility-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.df-facility-name {
  font-size: 11px;
  font-weight: 600;
  color: #c9a84c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.df-facility-action-name {
  font-size: 10px;
  color: #8a7a6a;
}

.df-facility-req {
  font-size: 9px;
  color: #6a5a4a;
}

@media (max-width: 600px) {
  .df-facility-icon {
    width: 22px;
    height: 22px;
    font-size: 13px;
  }
  .df-facility-icon img {
    width: 22px;
    height: 22px;
  }
  .df-facility-name {
    font-size: 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   EQUIPMENT MODAL PANELS (Stats, Guide Prices, Items Kept on Death)
   ═══════════════════════════════════════════════════════════════════════════════ */

.equip-modal-panel {
  max-width: 320px;
  text-align: left;
}

.equip-modal-title {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--df-gold, #c8a254);
  text-align: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(200, 162, 84, 0.25);
}

.equip-modal-empty {
  color: #999;
  text-align: center;
  padding: 16px 0;
  font-style: italic;
  font-size: 12px;
}

/* --- Equipment Stats --- */
.equip-stat-section {
  color: var(--df-gold, #c8a254);
  font-size: 11px;
  font-weight: bold;
  padding: 8px 0 3px;
  border-bottom: 1px solid rgba(200, 162, 84, 0.2);
  margin-bottom: 2px;
  font-family: 'Cinzel', serif;
}

.equip-stat-section:first-child {
  padding-top: 0;
}

.equip-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 4px;
  font-size: 12px;
}

.equip-stat-row:hover {
  background: rgba(255, 215, 0, 0.05);
}

.equip-stat-label {
  color: var(--df-text-bright, #e8dcc8);
}

.equip-stat-value {
  color: #ffff00;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000;
}

/* --- Guide Prices --- */
.equip-price-list {
  max-height: 300px;
  overflow-y: auto;
}

.equip-price-list::-webkit-scrollbar { width: 5px; }
.equip-price-list::-webkit-scrollbar-track { background: transparent; }
.equip-price-list::-webkit-scrollbar-thumb { background: rgba(200, 162, 84, 0.4); border-radius: 3px; }

.equip-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px;
  border-bottom: 1px solid rgba(200, 162, 84, 0.12);
  font-size: 12px;
}

.equip-price-row:hover {
  background: rgba(255, 215, 0, 0.06);
}

.equip-price-icon {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  flex-shrink: 0;
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.8));
}

.equip-price-name {
  color: var(--df-text-bright, #e8dcc8);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.equip-price-val {
  color: #ffff00;
  font-weight: bold;
  white-space: nowrap;
  text-shadow: 1px 1px 2px #000;
}

.equip-price-total {
  display: flex;
  justify-content: space-between;
  padding: 8px 4px 0;
  margin-top: 8px;
  border-top: 1px solid rgba(200, 162, 84, 0.25);
  font-size: 13px;
  font-weight: bold;
  color: var(--df-gold, #c8a254);
  font-family: 'Cinzel', serif;
}

.equip-price-total-val {
  color: #ffff00;
  text-shadow: 1px 1px 2px #000;
}

/* --- Items Kept on Death --- */
.equip-death-section {
  font-size: 12px;
  font-weight: bold;
  padding: 6px 0 4px;
  font-family: 'Cinzel', serif;
}

.equip-death-keep {
  color: #4ade80;
}

.equip-death-lose {
  color: #ef4444;
  border-top: 1px solid rgba(200, 162, 84, 0.2);
  margin-top: 6px;
  padding-top: 8px;
}

.equip-death-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px 0;
}

.equip-death-slot {
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(200, 162, 84, 0.3);
  border-radius: 3px;
  position: relative;
  cursor: default;
  transition: border-color 0.15s;
}

.equip-death-slot:hover {
  border-color: var(--df-gold, #c8a254);
}

.equip-death-slot img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.8));
}

.equip-death-qty {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 9px;
  color: #ffff00;
  font-weight: bold;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  line-height: 1;
  font-family: Arial, sans-serif;
}
.equip-death-qty.white { color: #ffffff; }
.equip-death-qty.green { color: #00ff80; }

.equip-death-info {
  font-size: 11px;
  color: #9ca3af;
  text-align: center;
  padding: 8px 0 0;
  border-top: 1px solid rgba(200, 162, 84, 0.2);
  margin-top: 8px;
}

/* =====================================================
   Tutorial Island
   ===================================================== */

/* Tutorial Banner */
.df-tutorial-banner {
  background: linear-gradient(135deg, rgba(30, 40, 60, 0.95), rgba(20, 30, 50, 0.95)) !important;
  border: 1px solid rgba(212, 168, 69, 0.6) !important;
  border-left: 3px solid #d4a845 !important;
}
.df-tutorial-banner .df-alert-icon-punishment {
  font-size: 18px;
}

/* Tutorial Progress Bar */
.df-tutorial-progressbar {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 0 0 4px 4px;
  overflow: hidden;
  margin-top: 2px;
}
.df-tutorial-progressbar-fill {
  height: 100%;
  background: linear-gradient(90deg, #d4a845, #e8c86e);
  border-radius: 0 0 4px 4px;
  transition: width 0.5s ease;
}

/* Tutorial Tab Lock */
.df-tutorial-locked {
  opacity: 0.3 !important;
  filter: grayscale(1) !important;
  pointer-events: none !important;
  position: relative;
}

/* Tutorial Tab Unlock Flash */
@keyframes tutorialTabUnlock {
  0% { box-shadow: 0 0 0 0 rgba(212, 168, 69, 0.8); }
  25% { box-shadow: 0 0 12px 4px rgba(212, 168, 69, 0.6); }
  50% { box-shadow: 0 0 4px 1px rgba(212, 168, 69, 0.3); }
  75% { box-shadow: 0 0 12px 4px rgba(212, 168, 69, 0.6); }
  100% { box-shadow: 0 0 0 0 rgba(212, 168, 69, 0); }
}
.df-tutorial-tab-unlocked {
  animation: tutorialTabUnlock 1.5s ease 2;
  opacity: 1 !important;
  filter: none !important;
}

/* Tutorial Welcome Modal */
.df-tutorial-welcome-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.82);
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: questModalFadeIn 0.3s ease;
}
.df-tutorial-welcome {
  position: relative;
  background: linear-gradient(180deg, #352c22 0%, #252014 100%);
  border: 2px solid #c8a254;
  border-radius: 6px;
  padding: 0;
  max-width: 440px;
  width: 92%;
  max-height: 80vh;
  overflow-y: auto;
  color: #e8dcc8;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.9), 0 0 20px rgba(200, 162, 84, 0.2);
  font-family: 'Crimson Text', serif;
  font-size: 14px;
  line-height: 1.5;
}
.df-tutorial-welcome::-webkit-scrollbar { width: 5px; }
.df-tutorial-welcome::-webkit-scrollbar-track { background: transparent; }
.df-tutorial-welcome::-webkit-scrollbar-thumb { background: rgba(200, 162, 84, 0.4); border-radius: 3px; }
.df-tutorial-welcome-header {
  background: linear-gradient(180deg, rgba(200, 162, 84, 0.15), transparent);
  padding: 20px 22px 14px;
  text-align: center;
  border-bottom: 1px solid rgba(200, 162, 84, 0.2);
}
.df-tutorial-welcome-title {
  font-size: 22px;
  font-weight: 700;
  color: #d4a845;
  letter-spacing: 1px;
  margin: 0 0 4px;
}
.df-tutorial-welcome-subtitle {
  font-size: 13px;
  color: #a09580;
  font-style: italic;
}
.df-tutorial-welcome-body {
  padding: 16px 22px 10px;
}
.df-tutorial-welcome-body p {
  margin: 0 0 12px;
  color: #d0c4b0;
  font-size: 13.5px;
}
.df-tutorial-welcome-section {
  margin: 14px 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #d4a845;
  border-bottom: 1px solid rgba(200, 162, 84, 0.15);
  padding-bottom: 4px;
}
.df-tutorial-welcome-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.df-tutorial-welcome-steps li {
  padding: 5px 0 5px 22px;
  position: relative;
  color: #c8baa8;
  font-size: 13px;
}
.df-tutorial-welcome-steps li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 10px;
  width: 8px;
  height: 8px;
  border: 2px solid #c8a254;
  border-radius: 50%;
  background: transparent;
}
.df-tutorial-welcome-steps li span {
  color: #e8dcc8;
  font-weight: 600;
}
.df-tutorial-welcome-footer {
  padding: 12px 22px 18px;
  text-align: center;
}
.df-tutorial-welcome-btn {
  display: inline-block;
  background: linear-gradient(180deg, #c8a254, #a08030);
  color: #1a1410;
  font-family: 'Crimson Text', serif;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 32px;
  border: 1px solid #d4a845;
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.15s;
}
.df-tutorial-welcome-btn:hover {
  background: linear-gradient(180deg, #d4b060, #b89040);
  box-shadow: 0 0 12px rgba(212, 168, 69, 0.4);
}
.df-tutorial-welcome-tip {
  margin-top: 10px;
  font-size: 11px;
  color: #7a7060;
  font-style: italic;
}

/* ══════════════════════════════════════════════════════
   PARTY CHEST — Falador
   ══════════════════════════════════════════════════════ */

/* Party Chest Orb — Festive Gold/Orange */
.df-action-orb-party::before {
  background: conic-gradient(
    #f1c40f 0%, rgba(241, 196, 15, 0.3) 25%,
    rgba(230, 126, 34, 0.1) 50%, rgba(241, 196, 15, 0.3) 75%,
    #f1c40f 100%
  );
}
.df-action-orb-party i { color: #f1c40f; filter: drop-shadow(0 0 5px rgba(241, 196, 15, 0.6)); }
.df-action-orb-party:hover {
  box-shadow:
    0 0 25px rgba(241, 196, 15, 0.5),
    0 6px 15px rgba(0, 0, 0, 0.5),
    inset 0 0 0 3px #f1c40f;
}

/* City viewport override for party orb */
.df-city-viewport .df-action-orb-party::before { display: none !important; }
.df-city-viewport .df-action-orb-party i { color: #5a4230 !important; filter: none !important; }
.df-city-viewport .df-action-orb-party:hover {
  background: rgba(90, 66, 48, 0.15) !important;
  box-shadow: none !important;
}

/* Party Chest Modal Header */
.df-party-chest-header {
  background: linear-gradient(135deg, #3d2a1a 0%, #2a1a0f 100%) !important;
  border-bottom: 2px solid #f1c40f !important;
}
.df-party-chest-count {
  color: #f1c40f;
  font-size: 13px;
  font-weight: 600;
  margin-left: 12px;
}
.df-party-chest-footer {
  display: flex;
  align-items: center;
}
.df-party-chest-footer .btn-warning {
  background: linear-gradient(180deg, #f1c40f, #d4a017);
  border: 1px solid #b8860b;
  color: #2a1a0f;
  font-weight: 600;
}
.df-party-chest-footer .btn-warning:hover {
  background: linear-gradient(180deg, #f9d62e, #e6b422);
  box-shadow: 0 0 10px rgba(241, 196, 15, 0.4);
}
.df-party-chest-footer .btn-warning:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* ─── Balloon Overlay & Balloons ─── */

.party-balloon-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1040;
  pointer-events: none;
  overflow: hidden;
}

.party-balloon {
  position: absolute;
  width: 30px;
  height: 38px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.15s ease, filter 0.15s ease;
  animation: balloon-float 3s ease-in-out infinite;
  box-shadow: inset -4px -4px 8px rgba(0,0,0,0.2), inset 4px 4px 8px rgba(255,255,255,0.25);
}

.party-balloon::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 12px;
  background: rgba(200, 200, 200, 0.6);
}

.party-balloon:hover {
  transform: scale(1.15);
  filter: brightness(1.2);
  z-index: 2;
}

.party-balloon.popping {
  pointer-events: none;
}

.party-balloon.popped {
  pointer-events: none;
  animation: balloon-pop 0.6s ease-out forwards;
}

@keyframes balloon-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

@keyframes balloon-pop {
  0% { transform: scale(1); opacity: 1; }
  30% { transform: scale(1.4); opacity: 0.8; }
  100% { transform: scale(0); opacity: 0; }
}

/* Item reveal floating upward */
.party-balloon-item-reveal {
  position: absolute;
  pointer-events: none;
  animation: balloon-item-float 1.5s ease-out forwards;
  z-index: 3;
}
.party-balloon-item-reveal img {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 0 6px rgba(241, 196, 15, 0.8));
}

@keyframes balloon-item-float {
  0% { transform: translateY(0) scale(0.5); opacity: 0; }
  20% { transform: translateY(-10px) scale(1.2); opacity: 1; }
  100% { transform: translateY(-60px) scale(0.8); opacity: 0; }
}

/* =====================================================
   ITEM-ON-ITEM — Selection dialog options
   ===================================================== */
.df-item-on-item-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.df-item-option {
  padding: 8px 12px;
  background: var(--df-bg-card);
  border: 1px solid var(--df-border);
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  color: var(--df-text-bright);
  transition: background 0.15s, border-color 0.15s;
}
.df-item-option:hover {
  background: var(--df-bg-hover);
  border-color: var(--df-border-bright);
}

/* =====================================================
   MOUSEOVER TEXT — OSRS-style action bar hover colors
   ===================================================== */
.rs-action-bar:not(.active) .rs-ab-player {
  flex: 1 1 50% !important;
  justify-content: flex-end !important;
}
.rs-ab-idle {
  flex: 1 1 50% !important;
  justify-content: flex-start !important;
}
.rs-ab-idle .rs-mot-action {
  color: #ffffff !important;
  font-style: normal !important;
  font-weight: 700 !important;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 !important;
}
.rs-ab-idle .rs-mot-npc, .rs-ab-idle .rs-mot-skill {
  color: #ffff00 !important;
  font-style: normal !important;
  font-weight: 700 !important;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 !important;
}
.rs-ab-idle .rs-mot-scenery {
  color: #00ffff !important;
  font-style: normal !important;
  font-weight: 700 !important;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 !important;
}
.rs-ab-idle .rs-mot-item {
  color: #ff9040 !important;
  font-style: normal !important;
  font-weight: 700 !important;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 !important;
}