/* ============================================
   Steampunk Theme Components
   ============================================ */

/* Airship/Steampunk Decorative Elements */

/* Brass Frame Border */
.brass-frame {
  position: relative;
  padding: var(--spacing-lg);
  border: 4px solid var(--color-gold);
  background: url('../assets/images/textures/light-aluminum.png'), linear-gradient(135deg, var(--color-ivory) 0%, var(--color-cream) 100%);
  box-shadow:
    inset 0 0 20px rgba(212, 168, 88, 0.1),
    0 4px 8px rgba(58, 50, 38, 0.15);
}

.brass-frame::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border: 2px solid var(--color-primary-teal);
  pointer-events: none;
  z-index: -1;
}

/* Corner Rivets */
.brass-frame::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: var(--color-brown);
  border-radius: 50%;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(255, 255, 255, 0.3);
  top: 8px;
  left: 8px;
}

/* Additional corner rivets */
.rivet-tl,
.rivet-tr,
.rivet-bl,
.rivet-br {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: var(--color-brown);
  border-radius: 50%;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(255, 255, 255, 0.3);
}

.rivet-tl {
  top: 8px;
  left: 8px;
}

.rivet-tr {
  top: 8px;
  right: 8px;
}

.rivet-bl {
  bottom: 8px;
  left: 8px;
}

.rivet-br {
  bottom: 8px;
  right: 8px;
}

/* Gear Decoration SVG (inline) */
.gear-decoration {
  width: 60px;
  height: 60px;
  fill: var(--color-brass-polished);
  opacity: 0.85;
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
  display: inline-block;
  vertical-align: middle;
}

.gear-decoration-sm,
.gear-decoration.small {
  width: 30px;
  height: 30px;
}

.gear-decoration-lg {
  width: 100px;
  height: 100px;
}

/* Announcement Banner (Ad) */
.announcement-banner {
  background: url('../assets/images/textures/gun-metal.png'), linear-gradient(135deg, var(--color-primary-teal) 0%, var(--color-secondary-teal) 100%);
  color: var(--color-ivory);
  border-bottom: 3px solid var(--color-gold);
  position: relative;
  overflow: hidden;
  height: 0;
}

.announcement-banner-content {
  position: relative;
  max-width: var(--max-width-xl);
  margin: 0 auto;
  padding: var(--spacing-sm) var(--spacing-md);
}

/* --- Mini (collapsed) view --- */
.ad-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  cursor: pointer;
  padding: var(--spacing-xs) var(--spacing-md);
  margin-right: 2.5rem;
  background: linear-gradient(135deg, rgba(42, 34, 24, 0.92) 0%, rgba(58, 50, 38, 0.95) 100%);
  border: 3px solid var(--color-brass-polished);
  border-radius: var(--radius-md);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(212, 168, 88, 0.2),
    inset 0 -1px 0 rgba(0,0,0,0.4);
  position: relative;
}

.ad-mini::before,
.ad-mini::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-brass-aged) 30%, var(--color-bronze-dark) 70%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}

.ad-mini::before {
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
}

.ad-mini::after {
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}

.ad-mini-img {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-gold);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.ad-mini-teaser {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Full (expanded) view --- */
.ad-full {
  display: flex;
  gap: var(--spacing-lg);
  padding: 0 3rem 0 0;
  align-items: flex-start;
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.ad-full.ad-visible {
  opacity: 1;
  height: auto;
  overflow: visible;
  pointer-events: auto;
  padding: var(--spacing-sm) 3rem var(--spacing-sm) 0;
}

.ad-full-img {
  max-width: 240px;
  width: 100%;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-gold);
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.ad-full-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  background: linear-gradient(135deg, rgba(42, 34, 24, 0.92) 0%, rgba(58, 50, 38, 0.95) 100%);
  border: 4px solid var(--color-brass-polished);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg) var(--spacing-xl);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(212, 168, 88, 0.2),
    inset 0 -1px 0 rgba(0,0,0,0.4);
  position: relative;
}

.ad-full-body::before,
.ad-full-body::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-brass-aged) 30%, var(--color-bronze-dark) 70%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}

.ad-full-body::before {
  top: 10px;
  left: 10px;
}

.ad-full-body::after {
  top: 10px;
  right: 10px;
}

.ad-full-title {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.ad-full-desc {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.ad-full-link,
.ad-full-link:hover,
.ad-full-link:active,
.ad-full-link:visited {
  align-self: center;
  text-decoration: none;
  display: inline-block;
  color: var(--color-iron-dark);
  position: relative;
}

/* Rotating teal edge-light glow via animated box-shadow */
.ad-full-link.brass-button {
  animation: ad-btn-edge-glow 3s ease-in-out infinite;
}

@keyframes ad-btn-edge-glow {
  0%, 100% {
    box-shadow:
      0 4px 0 var(--color-brass-oxidized),
      0 6px 8px rgba(0,0,0,0.4),
      inset 0 1px 0 rgba(255,255,255,0.4),
      -4px -2px 8px rgba(60, 130, 122, 0.5),
      -2px -3px 16px rgba(60, 130, 122, 0.2);
  }
  25% {
    box-shadow:
      0 4px 0 var(--color-brass-oxidized),
      0 6px 8px rgba(0,0,0,0.4),
      inset 0 1px 0 rgba(255,255,255,0.4),
      4px -2px 8px rgba(60, 130, 122, 0.5),
      2px -3px 16px rgba(60, 130, 122, 0.2);
  }
  50% {
    box-shadow:
      0 4px 0 var(--color-brass-oxidized),
      0 6px 8px rgba(0,0,0,0.4),
      inset 0 1px 0 rgba(255,255,255,0.4),
      4px 2px 8px rgba(60, 130, 122, 0.5),
      2px 3px 16px rgba(60, 130, 122, 0.2);
  }
  75% {
    box-shadow:
      0 4px 0 var(--color-brass-oxidized),
      0 6px 8px rgba(0,0,0,0.4),
      inset 0 1px 0 rgba(255,255,255,0.4),
      -4px 2px 8px rgba(60, 130, 122, 0.5),
      -2px 3px 16px rgba(60, 130, 122, 0.2);
  }
}

.ad-full-link.brass-button:hover {
  animation-play-state: paused;
}

/* Hidden state for mini during expand animation */
.ad-mini.ad-hidden {
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  padding: 0;
  border-width: 0;
  margin: 0;
}

/* --- Close button (brass X) --- */
.announcement-banner-close {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  background: url('../assets/images/textures/brushed-alum.png'), radial-gradient(ellipse at 40% 40%, var(--color-brass-polished), var(--color-brass-aged));
  border: 2px solid var(--color-bronze-dark);
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-bronze-dark);
  transition: all 0.15s ease;
  box-shadow:
    0 2px 0 var(--color-brass-oxidized),
    0 3px 6px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.3);
  z-index: 2;
}

.announcement-banner-close:hover {
  background: radial-gradient(ellipse at 40% 40%, #E5B968, var(--color-brass-polished));
  box-shadow:
    0 3px 0 var(--color-brass-oxidized),
    0 4px 8px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

.announcement-banner-close:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 var(--color-brass-oxidized),
    0 1px 3px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.3);
}

.ad-full.ad-visible ~ .announcement-banner-close {
  top: var(--spacing-lg);
}

/* --- Mobile --- */
@media (max-width: 768px) {
  .ad-mini-teaser {
    font-size: var(--font-size-sm);
  }

  .ad-full {
    flex-direction: column;
    align-items: center;
  }

  .ad-full-img {
    max-width: 180px;
  }

  .ad-full-body {
    text-align: center;
    align-items: center;
  }

  .ad-full-link {
    align-self: center;
  }
}

/* Stream Embed Container */
.stream-embed-wrapper {
  position: relative;
}

.stream-embed-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  background-color: #000;
  border: 4px solid var(--color-gold);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.stream-embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Stream Switcher */
.stream-switcher {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.stream-switcher-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: var(--color-cream);
  border: 2px solid var(--color-gold);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-dark);
  cursor: pointer;
  transition: all var(--transition-base);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stream-switcher-btn:hover {
  background-color: var(--color-gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stream-switcher-btn.active {
  background-color: var(--color-primary-teal);
  color: var(--color-ivory);
  border-color: var(--color-primary-teal);
}

/* Quick Links Spring Wrapper  -  extends beyond container for edge springs */
.quick-links-spring-wrapper {
  position: relative;
  overflow: visible;
}

/* Quick Links Grid */
.quick-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  position: relative;
  overflow: visible;
}

/* Spring connector SVGs  -  behind cards */
.spring-connector {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
  transform-origin: center center;
}

.quick-link-card {
  position: relative;
  z-index: 2;
}

.quick-link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  background: url('../assets/images/textures/light-aluminum.png'), linear-gradient(145deg, var(--color-ivory) 0%, var(--color-cream) 60%, #d9c9a8 100%);
  border: 3px solid var(--color-gold);
  border-radius: var(--radius-lg);
  text-align: center;
  text-decoration: none;
  color: var(--color-text-dark);
  position: relative;
  /* anime.js controls transforms  -  no CSS transition on transform */
  transition: box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  box-shadow:
    0 2px 4px rgba(58, 50, 38, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(107, 83, 68, 0.08);
  will-change: transform;
}

/* Corner rivets */
.quick-link-card::before,
.quick-link-card::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e0c580, var(--color-brass-aged) 60%, var(--color-bronze-dark));
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.3);
  pointer-events: none;
  z-index: 1;
}
.quick-link-card::before {
  top: 10px;
  left: 10px;
}
.quick-link-card::after {
  bottom: 10px;
  right: 10px;
}

/* Brass warm glow on hover  -  NOT teal */
.quick-link-card:hover {
  border-color: var(--color-brass-polished);
  box-shadow:
    0 6px 20px rgba(212, 168, 88, 0.3),
    0 2px 8px rgba(107, 83, 68, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 6px rgba(184, 147, 110, 0.12);
  background: url('../assets/images/textures/light-aluminum.png'), linear-gradient(145deg, #f5edd6 0%, #ede0c4 50%, #dac59c 100%);
}

.quick-link-icon {
  font-size: var(--font-size-3xl);
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3)) sepia(0.4) saturate(1.5) hue-rotate(10deg) brightness(0.7);
  transition: filter 0.3s ease;
}

.quick-link-card:hover .quick-link-icon {
  filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.35)) sepia(0.3) saturate(2) hue-rotate(15deg) brightness(0.85);
}

.quick-link-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin: 0;
  transition: color 0.3s ease;
}

.quick-link-card:hover .quick-link-title {
  color: var(--color-bronze-dark);
}

.quick-link-card .stamped-label {
  font-size: var(--font-size-base);
  letter-spacing: 0.05em;
}

.quick-link-desc {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-brown);
  margin: 0;
}

.quick-link-card.primary {
  border-width: 4px;
  box-shadow:
    0 2px 4px rgba(58, 50, 38, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(107, 83, 68, 0.08),
    inset 0 0 12px rgba(212, 168, 88, 0.08);
}

/* Stats Counter Section */
.stats-grid {
  display: grid;
  gap: var(--spacing-lg);
}

.stat-card {
  text-align: center;
  padding: var(--spacing-lg) var(--spacing-md);
  background: url('../assets/images/textures/brushed-alum-dark.png'), linear-gradient(135deg, var(--color-brass-polished) 0%, var(--color-brass-aged) 50%, var(--color-brass-oxidized) 100%);
  border: 3px solid var(--color-bronze-dark);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.2);
  /* Override pressure-gauge sizing when used as stat cards */
  width: auto;
  height: auto;
  display: block;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(212, 168, 88, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--font-size-4xl);
  font-weight: 900;
  color: var(--color-ivory);
  margin-bottom: var(--spacing-xs);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.5), 0 0 10px rgba(212, 168, 88, 0.3);
}

.stat-label {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-iron-dark);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

/* Schedule Board */
.schedule-board {
  background: url('../assets/images/textures/dark-wood.png'), linear-gradient(160deg,
    #2a3d3a 0%,
    var(--color-primary-teal) 40%,
    #2e4a44 100%);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  border: 6px solid var(--color-brass-polished);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.3);
}

.schedule-board-title,
.schedule-board-title.embossed-text {
  color: var(--color-gold);
  text-align: center;
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-3xl);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow:
    2px 2px 0 rgba(0,0,0,0.7),
    0 0 20px rgba(212, 168, 88, 0.45),
    0 0 40px rgba(212, 168, 88, 0.2);
  line-height: 1.2;
}

.schedule-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* ── Schedule row ── */
.schedule-item {
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) 8rem 1fr auto;
  gap: var(--spacing-md);
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background: linear-gradient(135deg,
    rgba(20, 35, 32, 0.7) 0%,
    rgba(30, 52, 48, 0.55) 100%);
  border-radius: var(--radius-md);
  border: 1px solid rgba(212, 168, 88, 0.35);
  border-left: 4px solid var(--color-brass-polished);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.3);
  transition: background 0.2s ease, border-left-color 0.2s ease;
}

.schedule-item:hover {
  background: linear-gradient(135deg,
    rgba(30, 50, 46, 0.8) 0%,
    rgba(44, 70, 64, 0.65) 100%);
  border-left-color: #E5B968;
}

.schedule-item--past {
  opacity: 0.45;
  border-left-color: var(--color-brass-oxidized);
}

/* Day label */
.schedule-day {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-base);
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.6);
}

/* Time */
.schedule-time {
  font-family: var(--font-technical);
  font-size: var(--font-size-lg);
  color: var(--color-steam-white);
  letter-spacing: 0.04em;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}

/* Activity name */
.schedule-activity {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-xl);
  color: var(--color-ivory);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Platform icon buttons */
.schedule-platforms {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  flex-shrink: 0;
}

/* Reuse .brass-button styles but override for compact icon size */
.schedule-platform-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.65rem;
  background: url('../assets/images/textures/brushed-alum.png'),
    radial-gradient(ellipse at 40% 40%, var(--color-brass-polished), var(--color-brass-aged));
  border: 2px solid var(--color-bronze-dark);
  border-radius: var(--radius-sm);
  box-shadow:
    0 3px 0 var(--color-brass-oxidized),
    0 5px 8px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.4);
  transition: all 0.15s ease;
  text-decoration: none;
}

.schedule-platform-link:hover {
  background: radial-gradient(ellipse at 40% 40%, #E5B968, var(--color-brass-polished));
  box-shadow:
    0 4px 0 var(--color-brass-oxidized),
    0 7px 10px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.5);
  transform: translateY(-1px);
}

.schedule-platform-link:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 var(--color-brass-oxidized),
    0 2px 4px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

.schedule-platform-link img {
  display: block;
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
}

/* Timezone note — styled as a riveted brass plate */
.schedule-tz-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--spacing-md);
  padding: 0.55rem var(--spacing-md);
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(212, 168, 88, 0.25);
  border-radius: var(--radius-sm);
  font-family: var(--font-technical);
  font-size: var(--font-size-sm);
  color: rgba(212, 168, 88, 0.75);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.schedule-tz-note::before,
.schedule-tz-note::after {
  content: '◆';
  font-size: 0.5rem;
  opacity: 0.6;
}

/* Community Highlights */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

.highlight-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.highlight-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.highlight-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.highlight-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-md);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: var(--color-ivory);
}

.highlight-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  margin: 0;
}

/* Fanart Gallery */
.fanart-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-md);
  background: url('../assets/images/textures/light-aluminum.png'), var(--color-ivory);
  border: 3px solid var(--color-gold);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.3);
}

.fanart-filters {
  display: flex;
  gap: var(--spacing-sm);
}

.filter-btn {
  padding: var(--spacing-xs) var(--spacing-md);
  background-color: var(--color-cream);
  border: 2px solid var(--color-primary-teal);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-dark);
  cursor: pointer;
  transition: all var(--transition-base);
}

.filter-btn:hover {
  background: var(--color-primary-teal);
  color: var(--color-ivory);
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}

.filter-btn.active {
  background: var(--color-primary-teal);
  color: var(--color-ivory);
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  border-color: var(--color-secondary-teal);
  box-shadow:
    0 2px 0 var(--color-secondary-teal),
    0 3px 6px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.2);
}

/* NSFW Toggle - Lever Switch */
.nsfw-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.nsfw-toggle-label {
  font-family: var(--font-technical);
  font-size: var(--font-size-xs);
  font-weight: 600;
  user-select: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-iron-dark);
}

/* Lever Switch - Compact inline version for toggle */
.lever-switch {
  position: relative;
  width: 56px;
  height: 80px;
  display: inline-block;
  cursor: pointer;
}

.lever-switch-base {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 24px;
  background: linear-gradient(to bottom, var(--color-brass-aged), var(--color-bronze-dark));
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
  border: 1px solid var(--color-bronze-dark);
}

.lever-switch-arm {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(-30deg);
  width: 6px;
  height: 44px;
  background: linear-gradient(to right, var(--color-iron-dark), #6B6B6B, var(--color-iron-dark));
  border-radius: 3px;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.lever-switch-arm::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 35% 35%, var(--color-brass-polished), var(--color-brass-aged));
  border-radius: 50%;
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.3);
}

.lever-switch.active .lever-switch-arm {
  transform: translateX(-50%) rotate(30deg);
}

.lever-switch-light {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4a4a4a;
  border: 1px solid var(--color-bronze-dark);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.5);
  transition: all 0.3s ease;
}

.lever-switch.active .lever-switch-light {
  background: #ff4444;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.2),
    0 0 8px rgba(255, 68, 68, 0.6),
    0 0 16px rgba(255, 68, 68, 0.3);
}

/* Lever switch label plate */
.lever-switch-label-plate {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: linear-gradient(to bottom, var(--color-brass-aged), var(--color-brass-oxidized));
  border: 2px solid var(--color-bronze-dark);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px rgba(0,0,0,0.3);
}

.lever-switch-label-plate .status-text {
  font-family: var(--font-technical);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8B4444;
  transition: color 0.3s ease;
}

.lever-switch.active ~ .lever-switch-label-plate .status-text,
.nsfw-toggle-wrapper:has(.lever-switch.active) .status-text {
  color: #448B44;
}

/* Sort Controls */
.fanart-sort-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.sort-label {
  font-family: var(--font-technical);
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-iron-dark);
  white-space: nowrap;
}

.sort-select {
  appearance: none;
  -webkit-appearance: none;
  padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-xs) var(--spacing-sm);
  background: linear-gradient(to bottom, var(--color-brass-aged), var(--color-brass-oxidized));
  border: 2px solid var(--color-bronze-dark);
  border-radius: 2px;
  font-family: var(--font-technical);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-iron-dark);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px rgba(0,0,0,0.3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233A3226' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  min-width: 140px;
  transition: all 0.15s ease;
}

.sort-select:hover {
  background-color: var(--color-brass-polished);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 3px 6px rgba(0,0,0,0.3);
}

.sort-select:focus {
  outline: 2px solid var(--color-primary-teal);
  outline-offset: 1px;
}

.sort-direction-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, var(--color-brass-aged), var(--color-brass-oxidized));
  border: 2px solid var(--color-bronze-dark);
  border-radius: 2px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px rgba(0,0,0,0.3);
  transition: all 0.15s ease;
  padding: 0;
  color: var(--color-iron-dark);
  font-size: 14px;
  line-height: 1;
}

.sort-direction-btn:hover {
  background-color: var(--color-brass-polished);
}

.sort-direction-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.3);
}

/* Fanart date display */
.fanart-date {
  display: block;
  font-family: var(--font-technical);
  font-size: var(--font-size-xs);
  color: var(--color-brown);
  letter-spacing: 0.05em;
  margin-top: var(--spacing-xs);
  opacity: 0.8;
}

/* Fanart Grid */
.fanart-grid {
  display: grid;
  gap: var(--spacing-lg);
}

.fanart-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: all var(--transition-base);
  background: url('../assets/images/textures/light-aluminum.png'), var(--color-ivory);
  border: 3px solid var(--color-gold);
}

.fanart-card.hidden {
  display: none;
}

.fanart-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.fanart-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

.fanart-info {
  padding: var(--spacing-md);
}

.fanart-artist {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-primary-teal);
  margin-bottom: var(--spacing-xs);
}

.fanart-handle {
  color: var(--color-brown);
  font-size: var(--font-size-sm);
}

.fanart-hashtag {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--color-peach);
  color: var(--color-text-dark);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  margin-top: var(--spacing-xs);
}

/* NSFW Blur Effect */
.fanart-card[data-nsfw="true"]:not(.nsfw-visible) .fanart-image {
  filter: blur(20px);
}

.fanart-card[data-nsfw="true"]:not(.nsfw-visible)::after {
  content: '18+';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-size: var(--font-size-4xl);
  font-weight: 900;
  color: var(--color-ivory);
  background-color: rgba(58, 50, 38, 0.8);
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

/* Game Cards */
.games-grid {
  display: grid;
  gap: var(--spacing-xl);
}

.game-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  background: url('../assets/images/textures/light-aluminum.png'), linear-gradient(135deg, var(--color-ivory) 0%, var(--color-cream) 100%);
  border: 4px solid var(--color-gold);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: all var(--transition-base);
}

.game-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.game-thumbnail {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-primary-teal);
}

.game-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.game-title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-sm);
  color: var(--color-primary-teal);
}

.game-description {
  margin-bottom: var(--spacing-md);
  color: var(--color-text-dark);
}

.game-meta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.game-credit {
  font-size: var(--font-size-sm);
  color: var(--color-brown);
}

.game-credit a {
  color: var(--color-primary-teal);
  font-weight: 600;
}

/* Footer */
.site-footer {
  background: url('../assets/images/textures/dark-wood.png'), linear-gradient(180deg, #2a2218 0%, var(--color-text-dark) 100%);
  color: var(--color-ivory);
  padding: var(--spacing-xl) 0 var(--spacing-md);
  margin-top: var(--spacing-lg);
  border-top: 4px solid var(--color-brass-polished);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
}

.footer-section h4 {
  color: var(--color-gold);
  margin-bottom: var(--spacing-md);
}

.footer-links {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: var(--spacing-sm);
}

.footer-links a {
  color: var(--color-ivory);
  transition: color var(--transition-base);
}

.footer-links a:hover {
  color: var(--color-gold);
}

.footer-bottom {
  text-align: center;
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-brown);
  font-size: var(--font-size-sm);
  color: var(--color-brass-aged);
}

.footer-bottom a {
  color: var(--color-gold);
}

/* ========== HERO TITLE PANEL ========== */

.hero-title-panel {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  background: linear-gradient(135deg, rgb(42, 34, 24) 0%, rgb(58, 50, 38) 100%);
  border: 4px solid var(--color-brass-polished);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg) var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(212, 168, 88, 0.2),
    inset 0 -1px 0 rgba(0,0,0,0.4);
  position: relative;
}

.hero-title-panel::before,
.hero-title-panel::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-brass-aged) 30%, var(--color-bronze-dark) 70%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}

.hero-title-panel::before {
  top: 10px;
  left: 10px;
}

.hero-title-panel::after {
  top: 10px;
  right: 10px;
}

.hero-portrait {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 3px solid var(--color-gold);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(212, 168, 88, 0.4);
}

.hero-title-text {
  flex: 1;
  min-width: 0;
}

.hero-title-text h1 {
  font-size: var(--font-size-3xl);
  line-height: 1.1;
  text-shadow:
    2px 2px 0 rgba(0,0,0,0.6),
    0 0 20px rgba(212, 168, 88, 0.3);
}

/* ========== QUICK LINK PLATFORM ICONS ========== */

.quick-link-card .quick-link-icon {
  filter: none;
  transition: transform 0.4s ease;
}

.quick-link-card:hover .quick-link-icon {
  transform: scale(1.15);
  filter: none;
}

/* ========== AIRSHIP WINDOW ========== */

.airship-window-section {
  padding: var(--spacing-xl) 0;
  background: url('../assets/images/textures/dark-wood.png'), linear-gradient(180deg, #2a2218 0%, #1e1812 50%, #2a2218 100%);
  border-top: 4px solid var(--color-brass-polished);
  border-bottom: 4px solid var(--color-brass-polished);
  position: relative;
  overflow: hidden;
}


.airship-window-frame {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  border: 12px solid transparent;
  border-image: linear-gradient(
    135deg,
    var(--color-brass-polished) 0%,
    var(--color-brass-aged) 25%,
    var(--color-brass-oxidized) 50%,
    var(--color-brass-aged) 75%,
    var(--color-brass-polished) 100%
  ) 12;
  padding: 8px;
  background: var(--color-bronze-dark);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.6),
    inset 0 0 30px rgba(0,0,0,0.4),
    0 0 0 2px var(--color-bronze-dark),
    0 0 0 4px var(--color-brass-oxidized);
  border-radius: 8px;
}

.airship-window-glass {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  border-radius: 4px;
  border: 2px solid var(--color-bronze-dark);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.5);
  background: url('../assets/images/textures/sky.jpg') center center / cover fixed;
}

.airship-window-sky {
  display: none;
}

.window-overlay-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
  text-align: center;
  padding: var(--spacing-lg);
}

.window-overlay-text p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--color-gold);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8), 0 0 20px rgba(212, 168, 88, 0.3);
}

.window-glass-shine {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.15) 0%, transparent 50%),
    linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.05) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Window crossbars */
.window-crossbar {
  position: absolute;
  background: linear-gradient(to bottom, var(--color-brass-polished), var(--color-brass-oxidized));
  z-index: 3;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.3);
}

.window-crossbar-h {
  top: 50%;
  left: 8px;
  right: 8px;
  height: 6px;
  transform: translateY(-50%);
}

.window-crossbar-v {
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 6px;
  transform: translateX(-50%);
}

/* Window rivets */
.window-rivet {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--color-brass-polished), var(--color-bronze-dark));
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.5),
    0 1px 2px rgba(255,255,255,0.2);
  z-index: 4;
}

.window-rivet-tl { top: -4px; left: -4px; }
.window-rivet-tr { top: -4px; right: -4px; }
.window-rivet-bl { bottom: -4px; left: -4px; }
.window-rivet-br { bottom: -4px; right: -4px; }

/* Window bolts (midpoints) */
.window-bolt {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--color-brass-aged), var(--color-bronze-dark));
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
  z-index: 4;
}

.window-bolt-top { top: -4px; left: 50%; transform: translateX(-50%); }
.window-bolt-bottom { bottom: -4px; left: 50%; transform: translateX(-50%); }
.window-bolt-left { left: -4px; top: 50%; transform: translateY(-50%); }
.window-bolt-right { right: -4px; top: 50%; transform: translateY(-50%); }

/* ========== STATIC HIGHLIGHTS GRID ========== */

.highlights-grid-static {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

.highlight-card-static {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-text-dark);
  border: 4px solid var(--color-gold);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  transition: all var(--transition-base);
  background: var(--color-ivory);
}

.highlight-card-static:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  color: var(--color-text-dark);
}

.highlight-card-img {
  width: 100%;
  flex: 1;
  object-fit: cover;
  display: block;
  min-height: 200px;
}

.highlight-embed-wrapper {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 200px;
}

.highlight-embed-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.highlight-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: linear-gradient(135deg, var(--color-brass-polished) 0%, var(--color-brass-aged) 100%);
  border-top: 2px solid var(--color-bronze-dark);
  flex-shrink: 0;
}

.highlight-info .engraved-text {
  color: var(--color-iron-dark);
}

/* ========== FOOTER TAG INDICATORS ========== */

.footer-tags li {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.tag-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px currentColor;
}

.tag-live {
  background: #ff4444;
  box-shadow: 0 0 6px rgba(255, 68, 68, 0.6);
}

.tag-art {
  background: var(--color-gold);
  box-shadow: 0 0 6px rgba(212, 168, 88, 0.6);
}

.tag-nsfw {
  background: var(--color-copper-bright);
  box-shadow: 0 0 6px rgba(184, 115, 51, 0.6);
}

.tag-clips {
  background: var(--color-primary-teal);
  box-shadow: 0 0 6px rgba(60, 130, 122, 0.6);
}

.tag-memes {
  background: var(--color-secondary-teal);
  box-shadow: 0 0 6px rgba(91, 155, 142, 0.6);
}

/* ========== SCHEDULE CONTRAST IMPROVEMENTS ========== */

.schedule-item {
  background-color: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(212, 168, 88, 0.35);
}

.schedule-day {
  color: var(--color-gold);
  font-size: var(--font-size-base);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.7);
}

.schedule-time {
  color: var(--color-ivory);
  font-size: var(--font-size-base);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.7);
}

.schedule-activity {
  color: var(--color-steam-white);
  font-size: var(--font-size-base);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.7);
}

/* ========== STAT CARD IMPROVEMENTS ========== */

.stat-card {
  padding: var(--spacing-xl) var(--spacing-lg);
  border-width: 4px;
}

.stat-number {
  font-size: var(--font-size-4xl);
  color: var(--color-ivory);
  text-shadow:
    2px 2px 0 rgba(0,0,0,0.6),
    0 0 15px rgba(212, 168, 88, 0.4);
}

.stat-label,
.stat-label.stamped-label {
  font-size: var(--font-size-base);
  color: var(--color-iron-dark);
  text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}

/* Welding torch light effect */
.welding-torch {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 240, 220, 0.55) 0%,
    rgba(255, 225, 180, 0.3) 12%,
    rgba(220, 190, 140, 0.12) 30%,
    rgba(180, 150, 100, 0.04) 50%,
    transparent 65%
  );
  opacity: 0;
  mix-blend-mode: screen;
}