/* Basic reset / layout */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* ===== THEMES ===== */
  
  /* 
    1) THEME MODERN: 
       Still has radial cosmic overlay + flicker (unchanged) 160020
  */
  .theme-modern {
    --bg-gradient: radial-gradient(circle, #0d1a2d, #1a3a5c);
    --text-color: #ffffff;
    --button-bg: #0d1a2d;
    position: relative; 
    animation: flickerBG 5s infinite;
  }
  @keyframes flickerBG {
    0%, 100% {
      filter: brightness(100%);
    }
    10% {
      filter: brightness(120%);
    }
    20% {
      filter: brightness(80%);
    }
    30% {
      filter: brightness(110%);
    }
    40% {
      filter: brightness(95%);
    }
    50% {
      filter: brightness(105%);
    }
    60% {
      filter: brightness(90%);
    }
    70% {
      filter: brightness(115%);
    }
    80% {
      filter: brightness(85%);
    }
    90% {
      filter: brightness(100%);
    }
  }
  .theme-modern::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none; 
    background: radial-gradient(circle, rgba(255,255,255,0.3), transparent 60%);
    opacity: 0;
    animation: cosmicFlash 8s infinite; 
  }
  @keyframes cosmicFlash {
    0%, 100% { opacity: 0; }
    10%      { opacity: 0.6; }
    11%      { opacity: 0; }
    50%      { opacity: 0.2; }
    51%      { opacity: 0; }
    90%      { opacity: 0.4; }
    91%      { opacity: 0; }
  }
  
  /* 
    2) THEME NEO-NOIR (unchanged)
  */
  .theme-neo-noir {
    --bg-gradient: radial-gradient(circle, #0f0f0f, #1a1a1a);
    --text-color: #00ff99;
    --button-bg: #00cc66;
  }
  
  /* 
    3) THEME VINTAGE GAME: 
       Sweeping golden linear leak
  */
  .theme-vintage-game {
    --bg-gradient: radial-gradient(circle, #1b1b32, #4e4376);
    --text-color: #ffcc00;
    --button-bg: #cc9900;
  
    position: relative; 
  }
  .theme-vintage-game::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  
    /* Golden stripes + transparent gaps sweeping across */
    background: linear-gradient(
      120deg,
      rgba(255, 204, 0, 0.3) 0%,
      transparent 40%,
      rgba(255, 204, 0, 0.3) 60%,
      transparent 100%
    );
    background-size: 200% 100%;
    opacity: 0;
  
    animation: vintageSweep 6s infinite;
  }
  @keyframes vintageSweep {
    0% {
      opacity: 0;
      background-position: -200% 0%;
    }
    10% {
      opacity: 1;
      background-position: 0% 0%;
    }
    90% {
      opacity: 1;
      background-position: 200% 0%;
    }
    100% {
      opacity: 0;
      background-position: 300% 0%;
    }
  }
  
  /* 
    4) THEME TRON:
       Sweeping neon or “multiversal” leak
  */
  .theme-tron {
    --bg-gradient: radial-gradient(circle, #000428, #004e92);
    --text-color: #00ffff;
    --button-bg: #0088cc;
  
    position: relative;
  }
  .theme-tron::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  
    /* A bright cyan-pink beam with transparent stripes */
    background: linear-gradient(
      130deg,
      rgba(0, 255, 255, 0.4) 0%,
      rgba(255, 0, 255, 0.25) 20%,
      transparent 40%,
      rgba(0, 255, 255, 0.4) 60%,
      rgba(255, 0, 255, 0.25) 80%,
      transparent 100%
    );
    background-size: 300% 100%;
    opacity: 0;
  
    animation: tronSweep 8s infinite;
  }
  @keyframes tronSweep {
    0% {
      opacity: 0;
      background-position: -300% 0%;
    }
    10% {
      opacity: 1;
      background-position: 0% 0%;
    }
    90% {
      opacity: 1;
      background-position: 300% 0%;
    }
    100% {
      opacity: 0;
      background-position: 400% 0%;
    }
  }
  
  /* BODY uses whichever theme is on it */
  body {
    margin: 0;
    font-family: "Playfair Display", serif;
    background: var(--bg-gradient);
    overflow: hidden;
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    transition: background 1s ease, color 1s ease;
    position: relative;
  }
  
  /* cosmic background behind everything */
  #underworld {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    display: none; 
    background: url('https://cdn.jsdelivr.net/gh/naptha/tessdata/nebula.jpg') no-repeat center center / cover;
    animation: cosmicFlashBg 6s ease-in-out infinite alternate;
  }
  @keyframes cosmicFlashBg {
    0% {
      filter: hue-rotate(0deg) brightness(1);
    }
    20% {
      filter: hue-rotate(60deg) brightness(2);
    }
    40% {
      filter: hue-rotate(180deg) brightness(1.5);
    }
    60% {
      filter: hue-rotate(300deg) brightness(2.2);
    }
    80% {
      filter: hue-rotate(240deg) brightness(1);
    }
    100% {
      filter: hue-rotate(360deg) brightness(1.8);
    }
  }
  
  /* Main container */
  .container {
    text-align: center;
    z-index: 1; 
  }
  h1 {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    animation: fadeIn 2s ease-in-out;
    transition: font-family 1s ease, transform 1s ease;
  }
  .button-container {
    display: inline-block;
  }
  .button {
    font-size: 1.5rem;
    padding: 1rem 2rem;
    margin: 0.5rem;
    background: var(--button-bg);
    border: none;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 1s ease;
  }
  .button:hover {
    transform: scale(1.1);
    box-shadow: 0px 4px 15px rgba(255, 255, 255, 0.3);
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  .hidden {
    display: none;
  }
  
  /* background animation canvas */
  #background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  
  /* Fractured Lens Section */
  .lens-section {
    margin-top: 2rem;
  }

  .lens-section h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    opacity: 0.9;
  }

  .lens-container {
    display: flex;
    justify-content: center;
  }

  /* Outer lens ring */
  .lens {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    box-shadow:
      inset 0 0 30px rgba(0, 0, 0, 0.4),
      0 0 0 4px rgba(160, 180, 200, 0.3),
      0 0 0 7px rgba(80, 100, 120, 0.25),
      0 0 0 10px rgba(40, 60, 80, 0.15),
      0 0 50px rgba(0, 168, 255, 0.12),
      0 0 80px rgba(255, 120, 50, 0.06);
  }

  /* Rotated grid inside the circle — rotation makes grid lines look like cracks */
  .lens-inner {
    display: grid;
    grid-template-columns: 2fr 3fr 2fr;
    grid-template-rows: 3fr 2fr;
    gap: 2px;
    width: 100%;
    height: 100%;
    transform: rotate(-10deg) scale(1.2);
    background: rgba(180, 210, 255, 0.25);
  }

  /* 5th image spans two columns on bottom row */
  .lens-inner img:nth-child(4) {
    grid-column: 1 / 3;
  }

  .lens-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.3s ease, transform 0.3s ease;
  }

  .lens-inner img:hover {
    filter: brightness(1.2);
    transform: scale(1.05);
    z-index: 1;
  }

  /* Glass curvature / reflection highlight */
  .lens-glare {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(
      circle at 32% 30%,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.05) 25%,
      transparent 50%,
      rgba(0, 0, 0, 0.12) 100%
    );
    pointer-events: none;
    z-index: 2;
  }

  /* Social Links */
  .social-links {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
  }

  .social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem;
    transition: all 0.3s ease;
  }

  .social-link:hover {
    background: rgba(0, 168, 255, 0.2);
    border-color: rgba(0, 168, 255, 0.5);
    color: #fff;
    transform: scale(1.05);
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    h1 {
      font-size: 3rem;
    }

    .button {
      font-size: 1.2rem;
      padding: 0.8rem 1.5rem;
    }

    .lens {
      width: 300px;
      height: 300px;
    }

    .lens-section h2 {
      font-size: 1.2rem;
    }
  }

  @media (max-width: 400px) {
    .lens {
      width: 250px;
      height: 250px;
    }
  }