/* ============================================================
   THE DAILY MISANTHROPE — Design Tokens & Styles
   A broadsheet for human folly. Ink, parchment, and contempt.
   ============================================================ */

/* --- FONTS --- */
/* Boska: Victorian-editorial display serif (Fontshare)
   Satoshi: Clean, modern body sans-serif (Fontshare) */

/* --- TYPE SCALE --- */
:root {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    8rem);

  /* SPACING (4px base) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* RADIUS */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* TRANSITION */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* CONTENT WIDTHS */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
  --content-full: 100%;

  /* FONTS */
  --font-display: 'Boska', 'Georgia', serif;
  --font-body: 'Satoshi', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* === LIGHT MODE (Deep Sepia Parchment) === */
:root, [data-theme="light"] {
  --color-bg:             #e8ddc4;
  --color-surface:        #f0e6d0;
  --color-surface-2:      #f4edd8;
  --color-surface-offset: #ddd0b4;
  --color-surface-offset-2: #d3c5a6;
  --color-surface-dynamic: #c8b998;
  --color-divider:        #b5a484;
  --color-border:         #a08c6c;

  --color-text:           #2c2010;
  --color-text-muted:     #5e4e36;
  --color-text-faint:     #8c7a5e;
  --color-text-inverse:   #f0e6d0;

  /* Primary: Dark burnt sienna ink */
  --color-primary:        #6e3817;
  --color-primary-hover:  #52280f;
  --color-primary-active: #3a1c0a;
  --color-primary-highlight: #d8c4a8;

  /* Accent: Candy-apple red — the pulse of outrage */
  --color-accent:         #cc1a1a;
  --color-accent-hover:   #a01212;
  --color-accent-subtle:  #cc1a1a20;

  --color-error:          #7a2210;
  --color-success:        #3d5e2a;
  --color-warning:        #7a5c14;

  --shadow-sm: 0 1px 3px oklch(0.22 0.03 60 / 0.12);
  --shadow-md: 0 4px 14px oklch(0.22 0.03 60 / 0.15);
  --shadow-lg: 0 12px 36px oklch(0.22 0.03 60 / 0.20);
}

/* === DARK MODE (Aged Leather & Lampblack) === */
[data-theme="dark"] {
  --color-bg:             #12100a;
  --color-surface:        #1a1610;
  --color-surface-2:      #201c14;
  --color-surface-offset: #1e1a12;
  --color-surface-offset-2: #262118;
  --color-surface-dynamic: #302a1e;
  --color-divider:        #352e22;
  --color-border:         #443c2e;

  --color-text:           #d0c8b0;
  --color-text-muted:     #8a7e64;
  --color-text-faint:     #5e5440;
  --color-text-inverse:   #1a1710;

  --color-primary:        #c48850;
  --color-primary-hover:  #a87038;
  --color-primary-active: #8b5a28;
  --color-primary-highlight: #2e261a;

  --color-accent:         #e63030;
  --color-accent-hover:   #c42020;
  --color-accent-subtle:  #e6303018;

  --color-error:          #e63030;
  --color-success:        #6a9050;
  --color-warning:        #b89030;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.35);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.45);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:             #12100a;
    --color-surface:        #1a1610;
    --color-surface-2:      #201c14;
    --color-surface-offset: #1e1a12;
    --color-surface-offset-2: #262118;
    --color-surface-dynamic: #302a1e;
    --color-divider:        #352e22;
    --color-border:         #443c2e;
    --color-text:           #d0c8b0;
    --color-text-muted:     #8a7e64;
    --color-text-faint:     #5e5440;
    --color-text-inverse:   #1a1710;
    --color-primary:        #c48850;
    --color-primary-hover:  #a87038;
    --color-primary-active: #8b5a28;
    --color-primary-highlight: #2e261a;
    --color-accent:         #e63030;
    --color-accent-hover:   #c42020;
    --color-accent-subtle:  #e6303018;
    --color-error:          #e63030;
    --color-success:        #6a9050;
    --color-warning:        #b89030;
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.35);
    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.45);
    --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.55);
  }
}

/* ============================================================
   PARCHMENT TEXTURE & FRAYED EDGES
   ============================================================ */

/* Paper grain overlay using SVG noise filter */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.06;
  filter: url(#paper-grain);
  background: var(--color-text);
  mix-blend-mode: multiply;
}

[data-theme="dark"] body::before {
  opacity: 0.04;
  mix-blend-mode: soft-light;
  background: #a09070;
}

/* Aged stain/foxing spots */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background:
    radial-gradient(ellipse 120px 80px at 15% 25%, oklch(0.55 0.06 70 / 0.06), transparent),
    radial-gradient(ellipse 80px 100px at 85% 60%, oklch(0.50 0.05 60 / 0.05), transparent),
    radial-gradient(ellipse 150px 60px at 50% 90%, oklch(0.52 0.04 65 / 0.04), transparent),
    radial-gradient(ellipse 60px 60px at 70% 15%, oklch(0.48 0.05 55 / 0.05), transparent);
}

[data-theme="dark"] body::after {
  background:
    radial-gradient(ellipse 120px 80px at 15% 25%, oklch(0.30 0.04 60 / 0.08), transparent),
    radial-gradient(ellipse 80px 100px at 85% 60%, oklch(0.28 0.03 55 / 0.06), transparent),
    radial-gradient(ellipse 150px 60px at 50% 90%, oklch(0.25 0.03 50 / 0.05), transparent),
    radial-gradient(ellipse 60px 60px at 70% 15%, oklch(0.30 0.04 60 / 0.06), transparent);
}

/* Frayed / torn edge effect on the main parchment */
.parchment-wrapper {
  position: relative;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-4);
  background: var(--color-bg);
}

/* Frayed left and right edges */
.parchment-wrapper::before,
.parchment-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  z-index: 10;
  pointer-events: none;
}

.parchment-wrapper::before {
  left: -10px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-bg) 30%,
    var(--color-bg) 100%
  );
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 800'%3E%3Cpath d='M20 0 L20 800 L8 800 Q12 780 6 760 Q10 740 4 720 Q9 700 5 680 Q11 660 7 640 Q10 620 3 600 Q8 580 5 560 Q12 540 6 520 Q9 500 4 480 Q11 460 7 440 Q10 420 3 400 Q8 380 5 360 Q12 340 6 320 Q9 300 4 280 Q11 260 7 240 Q10 220 3 200 Q8 180 5 160 Q12 140 6 120 Q9 100 4 80 Q11 60 7 40 Q10 20 8 0 Z' fill='black'/%3E%3C/svg%3E");
  mask-size: 20px 800px;
  mask-repeat: repeat-y;
}

.parchment-wrapper::after {
  right: -10px;
  background: linear-gradient(270deg,
    transparent 0%,
    var(--color-bg) 30%,
    var(--color-bg) 100%
  );
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 800'%3E%3Cpath d='M0 0 L0 800 L12 800 Q8 780 14 760 Q10 740 16 720 Q11 700 15 680 Q9 660 13 640 Q10 620 17 600 Q12 580 15 560 Q8 540 14 520 Q11 500 16 480 Q9 460 13 440 Q10 420 17 400 Q12 380 15 360 Q8 340 14 320 Q11 300 16 280 Q9 260 13 240 Q10 220 17 200 Q12 180 15 160 Q8 140 14 120 Q11 100 16 80 Q9 60 13 40 Q10 20 12 0 Z' fill='black'/%3E%3C/svg%3E");
  mask-size: 20px 800px;
  mask-repeat: repeat-y;
}

/* Outer shadow to reinforce the "floating parchment" look */
.parchment-wrapper {
  box-shadow:
    -4px 0 12px oklch(0.25 0.03 60 / 0.08),
    4px 0 12px oklch(0.25 0.03 60 / 0.08),
    0 4px 16px oklch(0.25 0.03 60 / 0.06);
}

/* Frayed top edge */
.frayed-edge-top {
  display: block;
  width: 100%;
  height: 12px;
  margin-bottom: -1px;
  background: var(--color-bg);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 12'%3E%3Cpath d='M0 12 L0 4 Q30 0 60 3 Q90 6 120 2 Q150 0 180 4 Q210 7 240 2 Q270 0 300 5 Q330 8 360 3 Q390 0 420 4 Q450 7 480 2 Q510 0 540 5 Q570 8 600 3 Q630 0 660 4 Q690 7 720 2 Q750 0 780 5 Q810 8 840 3 Q870 0 900 4 Q930 7 960 2 Q990 0 1020 5 Q1050 8 1080 3 Q1110 0 1140 4 Q1170 7 1200 3 L1200 12Z' fill='black'/%3E%3C/svg%3E");
  mask-size: 1200px 12px;
  mask-repeat: repeat-x;
}

/* Frayed bottom edge */
.frayed-edge-bottom {
  display: block;
  width: 100%;
  height: 12px;
  margin-top: -1px;
  background: var(--color-bg);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 12'%3E%3Cpath d='M0 0 L0 8 Q30 12 60 9 Q90 6 120 10 Q150 12 180 8 Q210 5 240 10 Q270 12 300 7 Q330 4 360 9 Q390 12 420 8 Q450 5 480 10 Q510 12 540 7 Q570 4 600 9 Q630 12 660 8 Q690 5 720 10 Q750 12 780 7 Q810 4 840 9 Q870 12 900 8 Q930 5 960 10 Q990 12 1020 7 Q1050 4 1080 9 Q1110 12 1140 8 Q1170 5 1200 9 L1200 0Z' fill='black'/%3E%3C/svg%3E");
  mask-size: 1200px 12px;
  mask-repeat: repeat-x;
}

/* Page background behind the parchment */
body {
  background-color: #b8a888;
}

[data-theme="dark"] body {
  background-color: #080704;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) body {
    background-color: #080704;
  }
}

/* ============================================================
   LAYOUT
   ============================================================ */

.site-container {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* --- MASTHEAD --- */
.masthead {
  text-align: center;
  padding: var(--space-8) 0 var(--space-4);
  border-bottom: 3px double var(--color-accent);
  position: relative;
}

.masthead-top-rule {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--color-accent);
  margin-bottom: var(--space-4);
}

.masthead-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.masthead-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.masthead-edition {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.05em;
}

.masthead-controls {
  position: absolute;
  top: var(--space-8);
  right: 0;
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.theme-toggle {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  padding: 0;
  overflow: hidden;
}
.theme-toggle:hover {
  color: var(--color-text);
}

/* The Clown — spinning eternally in the corner */
@keyframes clown-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.clown-spinner {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
  animation: clown-spin 20s linear infinite;
  filter: sepia(0.25) contrast(1.1) brightness(0.95);
  border: 1.5px solid var(--color-border);
  transition: filter var(--transition-interactive);
}

.clown-spinner:hover {
  filter: sepia(0) contrast(1.15) brightness(1.05);
  animation-duration: 3s;
}

[data-theme="dark"] .clown-spinner {
  filter: sepia(0.4) contrast(1.0) brightness(0.65);
}

[data-theme="dark"] .clown-spinner:hover {
  filter: sepia(0.1) contrast(1.0) brightness(0.8);
  animation-duration: 3s;
}

/* --- EPIGRAPH --- */
.epigraph {
  text-align: center;
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--color-accent);
  position: relative;
}

.epigraph-mascot {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  filter: sepia(0.4) contrast(1.1) brightness(0.95);
  opacity: 0.85;
  border: 2px solid var(--color-border);
  box-shadow: var(--shadow-md);
  transition: opacity var(--transition-interactive), filter var(--transition-interactive);
}

.epigraph-mascot:hover {
  opacity: 1;
  filter: sepia(0.2) contrast(1.1) brightness(1);
}

[data-theme="dark"] .epigraph-mascot {
  filter: sepia(0.5) contrast(1.0) brightness(0.7);
  opacity: 0.7;
  border-color: var(--color-border);
}

[data-theme="dark"] .epigraph-mascot:hover {
  opacity: 0.9;
  filter: sepia(0.3) contrast(1.0) brightness(0.8);
}

@media (max-width: 640px) {
  .epigraph-mascot {
    position: static;
    transform: none;
    margin: 0 auto var(--space-3);
    width: 70px;
    height: 70px;
  }
}

.epigraph-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text-muted);
  max-width: 55ch;
  margin-inline: auto;
  line-height: 1.5;
}

.epigraph-attribution {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- MISANTHROPE INDEX --- */
.misanthrope-index {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-divider);
}

.index-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 540px;
  justify-content: center;
}

.index-endpoint {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--color-text-faint);
  white-space: nowrap;
  flex-shrink: 0;
}

.index-endpoint--high {
  color: var(--color-accent);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.02em;
}

@media (max-width: 480px) {
  .index-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
  }
  .index-endpoint {
    font-size: 0.6875rem;
  }
}

.index-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.index-meter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.index-bar-track {
  width: 120px;
  height: 6px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.index-bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.index-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  min-width: 2.5em;
}

/* Walken reaction image beside the meter */
.index-walken {
  width: 49px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  filter: sepia(0.45) contrast(1.05) brightness(0.95);
  opacity: 0.8;
  border: 1.5px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: opacity var(--transition-interactive), filter var(--transition-interactive), transform var(--transition-interactive);
  flex-shrink: 0;
}

.index-walken:hover {
  opacity: 1;
  filter: sepia(0.15) contrast(1.1) brightness(1);
  transform: scale(1.08);
}

[data-theme="dark"] .index-walken {
  filter: sepia(0.5) contrast(1.0) brightness(0.65);
  opacity: 0.65;
}

[data-theme="dark"] .index-walken:hover {
  opacity: 0.85;
  filter: sepia(0.3) contrast(1.0) brightness(0.75);
  transform: scale(1.08);
}

@media (max-width: 480px) {
  .index-walken {
    width: 40px;
    height: 65px;
  }
}

.index-scale {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* --- MAIN CONTENT GRID --- */
.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding-top: var(--space-6);
}

@media (min-width: 768px) {
  .content-grid {
    grid-template-columns: 2fr 1fr;
    gap: var(--space-6);
  }
}

/* --- FOLLY OF THE DAY --- */
.folly-section {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}

@media (min-width: 768px) {
  .folly-section {
    border-bottom: none;
    border-right: 1px solid var(--color-divider);
    padding-right: var(--space-6);
  }
}

.section-header {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.section-header::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 1px;
}

.folly-headline {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.folly-category {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-accent);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

.folly-summary {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  max-width: 65ch;
}

.folly-commentary {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-style: italic;
  line-height: 1.6;
  color: var(--color-text-muted);
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-accent);
  margin-bottom: var(--space-4);
  max-width: 60ch;
}

.folly-source {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.folly-source a {
  color: var(--color-accent);
  text-decoration: none;
}
.folly-source a:hover {
  text-decoration: underline;
}

/* --- HEADLINE WIRE --- */
.wire-section {
  padding-top: var(--space-6);
}

@media (min-width: 768px) {
  .wire-section {
    padding-top: 0;
  }
}

.wire-list {
  list-style: none;
  padding: 0;
}

.wire-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}

.wire-item:last-child {
  border-bottom: none;
}

.wire-category {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-1);
}

.wire-headline {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: var(--space-1);
}

.wire-headline a {
  color: var(--color-text);
  text-decoration: none;
}
.wire-headline a:hover {
  color: var(--color-accent);
}

.wire-headline--loud {
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.wire-headline--normal {
  font-size: var(--text-sm);
}

.wire-source {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  color: var(--color-text-faint);
}

/* --- FOOTER --- */
.site-footer {
  margin-top: var(--space-12);
  padding: var(--space-6) 0;
  border-top: 3px double var(--color-accent);
  text-align: center;
}

.footer-motto {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.footer-copy {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.footer-copy a {
  color: var(--color-text-faint);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-copy a:hover {
  color: var(--color-text-muted);
}

/* --- UTILITY --- */
.divider-ornament {
  text-align: center;
  padding: var(--space-3) 0;
  color: var(--color-accent);
  font-size: var(--text-sm);
  letter-spacing: 0.3em;
  opacity: 0.6;
}

/* === BUSEY EASTER EGG === */
.busey-egg {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease-in;
}

.busey-egg.active {
  opacity: 1;
  pointer-events: auto;
}

.busey-egg img {
  display: block;
  width: 81px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  filter: sepia(0.35) contrast(1.1) brightness(0.9);
  border: 1.5px solid var(--color-border);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform var(--transition-interactive), filter var(--transition-interactive);
}

.busey-egg img:hover {
  filter: sepia(0) contrast(1.1) brightness(1.05);
  transform: scale(1.15) rotate(0deg) !important;
}

[data-theme="dark"] .busey-egg img {
  filter: sepia(0.5) contrast(1.0) brightness(0.6);
  opacity: 0.75;
}

[data-theme="dark"] .busey-egg img:hover {
  filter: sepia(0.1) contrast(1.0) brightness(0.8);
  opacity: 1;
}

@media (max-width: 640px) {
  .busey-egg img {
    width: 60px;
    height: 67px;
  }
}

/* Skeleton loading */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--color-surface-offset) 25%, var(--color-surface-dynamic) 50%, var(--color-surface-offset) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}