/* ----- Tier Dividers ----- */
.tier {
    margin: 40px 0;
    padding: 20px 10px;
    border-radius: 16px;
    position: relative;
  }
  
  .tier-header {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
  }
  
  /* ----- Cookie Crumbs 🍪 ----- */
  .tier-1 {
    background: linear-gradient(180deg, #1a1a1a, #2a1a1a);
  }
  .tier-1 .tier-header {
    color: #ffcf99;
    text-shadow: 0 0 4px #ff7ab6, 0 0 8px #ff2d8d;
    font-style: italic;
  }
  
  /* ----- Velvet Keys ♢ ----- */
  .tier-2 {
    background: linear-gradient(180deg, #141423, #1f1a2f);
  }
  .tier-2 .tier-header {
    color: #bbaaff;
    text-shadow: 0 0 6px #8855ff, 0 0 10px #5500ff;
  }
  
  /* ----- Starlight Relics ✦ ----- */
  .tier-3 {
    background: radial-gradient(circle, #1a1a2b, #0a0a0f);
  }
  .tier-3 .tier-header {
    color: #aee7ff;
    text-shadow: 0 0 6px #66ccff, 0 0 12px #33bbff;
    animation: twinkle 2s infinite ease-in-out;
  }
  
  /* Twinkling stars */
  @keyframes twinkle {
    0%, 100% { text-shadow: 0 0 6px #66ccff, 0 0 12px #33bbff; }
    50% { text-shadow: 0 0 12px #ffffff, 0 0 20px #66ccff; }
  }
  
  /* ----- Forbidden Secrets ✶ ----- */
  .tier-4 {
    background: linear-gradient(180deg, #151527, #0a0a0f);
  }
  .tier-4 .tier-header {
    color: #ff7ab6;
    text-shadow: 0 0 6px #ff2d8d, 0 0 12px rgba(255,45,141,.6);
    font-family: "Great Vibes", cursive;
  }
  
  /* ----- Eternal Flame 🔥 ----- */
  .tier-5 {
    background: linear-gradient(180deg, #2a0a0a, #0a0a0f);
  }
  .tier-5 .tier-header {
    color: #ff4d4d;
    text-shadow: 0 0 6px #ff2222, 0 0 12px rgba(255,77,77,0.7);
    animation: flame-flicker 1.2s infinite alternate;
  }

  /* Tier-based card styling */
.card-tier-1 {
    border: 1px solid #ffcf99;
    background: rgba(255, 207, 153, 0.05);
  }
  .card-tier-2 {
    border: 1px solid #bbaaff;
    background: rgba(187, 170, 255, 0.05);
  }
  .card-tier-3 {
    border: 1px solid #66ccff;
    background: rgba(102, 204, 255, 0.05);
  }
  .card-tier-4 {
    border: 1px solid #ff7ab6;
    background: rgba(255, 122, 182, 0.05);
  }
  .card-tier-5 {
    border: 1px solid #ff4d4d;
    background: rgba(255, 77, 77, 0.05);
  }  
  
  @keyframes flame-flicker {
    from { text-shadow: 0 0 8px #ff2222, 0 0 15px rgba(255,77,77,0.8); }
    to { text-shadow: 0 0 12px #ff4444, 0 0 20px rgba(255,100,100,0.9); }
  }