@font-face {
      font-family: 'MilkyNice';
      src: url('../images/MilkyNice.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    :root {
      --primary: #ff6b35;
      --secondary: #f7931e;
      --bg-dark: #1a1a1a;
      --bg-light: #2d2d2d;
      --text-primary: #f0f0f0;
      --text-secondary: #b0b0b0;
    }
    body {
      background-color: var(--bg-dark);
      color: var(--text-primary);
      font-family: 'Space Grotesk', sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      line-height: 1.6;
      scroll-behavior: smooth;
      overflow-x: hidden;
      overflow-y: auto;
    }
    
    /* Scrollbar personalizado para PC */
    ::-webkit-scrollbar {
      width: 12px;
    }
    
    ::-webkit-scrollbar-track {
      background: var(--bg-dark);
      border-radius: 6px;
    }
    
    ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--primary), var(--secondary));
      border-radius: 6px;
      border: 2px solid var(--bg-dark);
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, var(--secondary), var(--primary));
    }
    
    /* Firefox scrollbar */
    html {
      scrollbar-width: thin;
      scrollbar-color: var(--primary) var(--bg-dark);
    }
    .navbar {
      background-color: rgba(10, 10, 18, 0.9);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(0, 240, 255, 0.1);
      padding: 0.75rem 0;
    }
    .navbar-brand {
      font-weight: 700;
      color: var(--primary) !important;
      letter-spacing: 1px;
      position: relative;
      font-size: 1.25rem;
    }
    .nav-link.active {
      color: var(--primary) !important;
      text-shadow: 0 0 10px var(--primary);
    }
    .navbar-nav {
      gap: 0.5rem;
    }
    .nav-link {
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      padding: 0.4rem 0.6rem;
      font-size: 0.85rem;
      white-space: nowrap;
    }
    .nav-link:active {
      transform: scale(0.95);
      color: var(--primary) !important;
    }
    .btn-neon:active {
      transform: scale(0.95);
      box-shadow: 0 0 20px var(--primary);
    }
    .btn-outline-neon:active {
      transform: scale(0.9);
      box-shadow: 0 0 15px var(--primary);
    }
    .filter-btn:active {
      transform: scale(0.95);
      box-shadow: 0 0 10px var(--primary);
    }
    #theme-toggle:active {
      transform: scale(0.9) rotate(180deg);
    }
    .hero {
      padding: 7rem 2rem 4rem;
      background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-light) 100%);
      position: relative;
      overflow: hidden;
      margin-bottom: 2rem;
      min-height: 90vh;
      display: flex;
      align-items: center;
    }
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 15% 50%, rgba(var(--primary-rgb, 255,107,53), 0.12) 0%, transparent 40%),
        radial-gradient(circle at 85% 20%, rgba(var(--secondary-rgb, 247,147,30), 0.08) 0%, transparent 35%);
      pointer-events: none;
    }

    /* Hero layout split */
    .hero-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    /* Hero — texto izquierdo */
    .hero-text {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: rgba(var(--primary-rgb, 255,107,53), 0.1);
      border: 1px solid rgba(var(--primary-rgb, 255,107,53), 0.3);
      color: var(--primary);
      padding: 0.35rem 0.9rem;
      border-radius: 999px;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.5px;
      width: fit-content;
    }
    .hero-text h1 {
      font-weight: 700;
      font-size: clamp(2.2rem, 4vw, 3.4rem);
      color: var(--text-primary);
      line-height: 1.1;
      margin: 0;
    }
    .hero-accent {
      color: var(--primary);
      display: block;
    }
    .hero-text p {
      font-size: 1.05rem;
      color: var(--text-secondary);
      max-width: 480px;
      margin: 0;
      line-height: 1.7;
    }
    .hero-actions {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .btn-neon-ghost {
      background: transparent;
      border: 1px solid rgba(var(--primary-rgb, 255,107,53), 0.4);
      color: var(--text-secondary);
      font-weight: 500;
      padding: 0.75rem 1.75rem;
      border-radius: 4px;
      transition: all 0.3s ease;
      font-size: 0.95rem;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
    }
    .btn-neon-ghost:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: rgba(var(--primary-rgb, 255,107,53), 0.05);
    }
    .hero-stats {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      padding-top: 0.5rem;
    }
    .hero-stat {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }
    .hero-stat-value {
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--primary);
      line-height: 1;
    }
    .hero-stat-label {
      font-size: 0.72rem;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .hero-stat-divider {
      width: 1px;
      height: 2rem;
      background: rgba(var(--primary-rgb, 255,107,53), 0.2);
    }

    /* Hero — card derecha */
    .hero-visual {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .hero-card {
      background: var(--bg-light);
      border: 1px solid rgba(var(--primary-rgb, 255,107,53), 0.2);
      border-radius: 12px;
      overflow: hidden;
      width: 100%;
      max-width: 420px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    }
    .hero-card-header {
      background: var(--bg-dark);
      padding: 0.75rem 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      border-bottom: 1px solid rgba(var(--primary-rgb, 255,107,53), 0.1);
    }
    .hero-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }
    .hero-dot.red    { background: #ff5f57; }
    .hero-dot.yellow { background: #febc2e; }
    .hero-dot.green  { background: #28c840; }
    .hero-card-title {
      font-size: 0.78rem;
      color: var(--text-secondary);
      margin-left: auto;
      font-family: 'Courier New', monospace;
    }
    .hero-card-body {
      padding: 1.25rem 1.5rem 1.5rem;
      font-family: 'Courier New', monospace;
      font-size: 0.85rem;
      line-height: 2;
    }
    .hero-code-line {
      display: block;
    }
    .hero-code-line.indent {
      padding-left: 1.5rem;
    }
    .hero-code-line.mt-2 {
      margin-top: 0.5rem;
    }
    .code-keyword { color: var(--primary); }
    .code-var     { color: var(--text-primary); }
    .code-op      { color: var(--text-secondary); }
    .code-string  { color: #4ade80; }
    .code-comment { color: var(--text-secondary); opacity: 0.6; font-style: italic; }
    .hero-cursor {
      display: inline-block;
      width: 2px;
      height: 1rem;
      background: var(--primary);
      margin-left: 2px;
      vertical-align: middle;
      animation: blink 1s step-end infinite;
    }
    @keyframes blink {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0; }
    }

    /* Elementos flotantes decorativos */
    .hero-float {
      position: absolute;
      width: 44px;
      height: 44px;
      border-radius: 10px;
      background: var(--bg-light);
      border: 1px solid rgba(var(--primary-rgb, 255,107,53), 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      color: var(--primary);
      box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    }
    .hero-float-1 {
      top: -10px;
      right: -10px;
      animation: floatA 4s ease-in-out infinite;
    }
    .hero-float-2 {
      bottom: 20px;
      right: -20px;
      animation: floatB 5s ease-in-out infinite 1s;
    }
    .hero-float-3 {
      top: 40%;
      left: -20px;
      animation: floatA 6s ease-in-out infinite 0.5s;
    }
    @keyframes floatA {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-10px); }
    }
    @keyframes floatB {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50%       { transform: translateY(-8px) rotate(5deg); }
    }

    /* Navbar — clases limpias */
    .nav-achievements {
      white-space: nowrap;
      min-width: fit-content;
      display: flex;
      align-items: center;
      gap: 0.2rem;
      font-size: 0.8rem;
      padding: 0.3rem 0.5rem;
    }
    .nav-achievements .bi-trophy { font-size: 0.9rem; }
    #points-display { font-weight: bold; font-size: 0.75rem; }
    .streak-indicator { margin-left: 0; font-size: 0.65rem; }
    .nav-stat-value { font-weight: bold; }

    /* Hero responsive */
    @media (max-width: 991px) {
      .hero-container {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
      }
      .hero-text {
        align-items: center;
      }
      .hero-text p {
        max-width: 100%;
      }
      .hero-stats {
        justify-content: center;
      }
      .hero-visual {
        max-width: 420px;
        margin: 0 auto;
        width: 100%;
      }
      .hero-float-3 {
        left: -10px;
      }
    }
    @media (max-width: 576px) {
      .hero {
        padding: 6rem 1.5rem 3rem;
        min-height: auto;
      }
      .hero-card-body {
        font-size: 0.78rem;
      }
      .hero-actions {
        flex-direction: column;
        align-items: stretch;
      }
      .hero-actions .btn-neon,
      .hero-actions .btn-neon-ghost {
        text-align: center;
        justify-content: center;
      }
    }
    .btn-neon {
      background: transparent;
      border: 2px solid var(--primary);
      color: var(--primary);
      font-weight: 500;
      padding: 0.75rem 2rem;
      border-radius: 4px;
      transition: all 0.3s ease;
      letter-spacing: 0.5px;
      font-size: 0.95rem;
    }
    .btn-neon:hover {
      color: var(--bg-dark);
      background-color: var(--primary);
    }
    section {
      padding: 4rem 0;
      position: relative;
    }
    section h2,
    .credits-section h2 {
      font-weight: 700;
      margin-bottom: 0.75rem;
      text-align: center;
      font-size: 2.5rem;
      position: relative;
      display: block;
    }
    /* Línea decorativa bajo cada h2 */
    section h2::after,
    .credits-section h2::after {
      content: '';
      display: block;
      width: 48px;
      height: 3px;
      background: var(--primary);
      border-radius: 2px;
      margin: 0.5rem auto 0;
      transition: width 0.3s ease;
    }
    section h2:hover::after,
    .credits-section h2:hover::after {
      width: 80px;
    }
    section h2 + *,
    .credits-section h2 + * {
      margin-top: 2.25rem;
    }
    .card {
      background: var(--bg-light);
      border: 1px solid rgba(0, 240, 255, 0.1);
      border-radius: 8px;
      transition: all 0.3s ease;
      min-height: 350px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
    }
    .card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }
    .card-img-top {
      width: 100%;
      height: 180px;
      object-fit: cover;
      filter: grayscale(30%);
      transition: filter 0.3s ease;
      background: var(--bg-dark);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .card-img-top::before {
      content: "Preview no disponible";
      color: var(--text-secondary);
      font-size: 0.9rem;
      display: none;
    }
    .card-img-top[src*="placeholder"]::before {
      display: block;
    }
    .card:hover .card-img-top {
      filter: grayscale(0%);
    }
    .card-body {
      padding: 1.5rem;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }
    .card-title {
      font-weight: 500;
      font-size: 1.3rem;
      margin-bottom: 1rem;
      color: var(--primary);
    }
    .card-text {
      flex-grow: 1;
      font-size: 0.95rem;
      color: var(--text-secondary);
      margin-bottom: 1.5rem;
    }
    .btn-group {
      margin-top: auto;
      display: flex;
      gap: 0.75rem;
      justify-content: center;
      position: relative;
      z-index: 10;
    }
    .btn-outline-neon {
      background: transparent;
      border: 1px solid var(--primary);
      color: var(--primary);
      transition: all 0.3s ease;
      border-radius: 4px;
      padding: 0.5rem 1.25rem;
      font-size: 0.85rem;
      position: relative;
      z-index: 10;
      pointer-events: auto;
    }
    .btn-outline-neon:hover {
      background: var(--primary);
      color: var(--bg-dark);
    }
    #repos-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
    }
    /* Skeleton loader */
    .skeleton {
      animation: skeleton-loading 1s linear infinite alternate;
    }

    @keyframes skeleton-loading {
      0% {
        background-color: var(--bg-light);
      }
      100% {
        background-color: rgba(255, 255, 255, 0.05);
      }
    }
    .skeleton-text {
      width: 100%;
      height: 1rem;
      margin-bottom: 0.5rem;
      border-radius: 0.25rem;
    }
    .profile-img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid var(--primary);
      box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
      margin-bottom: 1.5rem;
    }
    .social-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid var(--primary);
      color: var(--primary);
      margin: 0 0.5rem;
      transition: all 0.3s ease;
    }
    .social-btn:hover {
      background: var(--primary);
      color: var(--bg-dark);
      transform: translateY(-2px);
    }
    .footer {
      background: var(--bg-light);
      color: var(--text-secondary);
      border-top: 1px solid rgba(var(--primary-rgb, 255,107,53), 0.12);
      font-size: 0.875rem;
      margin-top: auto;
    }
    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      padding: 1.5rem 1rem;
      flex-wrap: wrap;
    }
    .footer-brand {
      display: flex;
      align-items: center;
      font-weight: 700;
      font-size: 1rem;
      color: var(--primary);
      letter-spacing: 0.5px;
    }
    .footer-links {
      display: flex;
      gap: 1.5rem;
    }
    .footer-links a {
      color: var(--text-secondary);
      text-decoration: none;
      transition: color 0.2s ease;
      font-size: 0.85rem;
    }
    .footer-links a:hover {
      color: var(--primary);
    }
    .footer-meta {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.8rem;
      color: var(--text-secondary);
    }
    .footer-meta a {
      color: var(--primary);
      text-decoration: none;
    }
    .footer-meta a:hover {
      text-decoration: underline;
    }
    .footer-version {
      background: rgba(var(--primary-rgb, 255,107,53), 0.1);
      border: 1px solid rgba(var(--primary-rgb, 255,107,53), 0.25);
      color: var(--primary);
      padding: 0.15rem 0.55rem;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 600;
    }
    .footer-sep {
      opacity: 0.4;
    }
    @media (max-width: 768px) {
      .footer-inner {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        padding: 1.25rem 1rem;
      }
      .footer-links {
        gap: 1rem;
      }
    }

    /* ── Navbar Stats Dropdown ── */
    .nav-stats-dropdown {
      position: relative;
    }
    .nav-stats-trigger {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      background: none;
      border: none;
      cursor: pointer;
    }
    .nav-stats-chevron {
      font-size: 0.65rem;
      transition: transform 0.2s ease;
    }
    .nav-stats-dropdown.open .nav-stats-chevron {
      transform: rotate(180deg);
    }
    .nav-stats-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      background: var(--bg-light);
      border: 1px solid rgba(var(--primary-rgb, 255,107,53), 0.2);
      border-radius: 10px;
      padding: 0.5rem;
      min-width: 200px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.25);
      z-index: 10002;
      opacity: 0;
      transform: translateY(-6px);
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .nav-stats-dropdown.open .nav-stats-menu {
      opacity: 1;
      transform: translateY(0);
      pointer-events: all;
    }
    .nav-stats-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      width: 100%;
      background: none;
      border: none;
      border-radius: 7px;
      padding: 0.6rem 0.75rem;
      cursor: pointer;
      transition: background 0.15s ease;
      text-align: left;
      color: var(--text-primary);
    }
    .nav-stats-item:hover {
      background: rgba(var(--primary-rgb, 255,107,53), 0.08);
    }
    .nav-stats-item .bi,
    .nav-stats-emoji {
      font-size: 1.1rem;
      color: var(--primary);
      width: 22px;
      text-align: center;
      flex-shrink: 0;
    }
    .nav-stats-info {
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
    }
    .nav-stats-name {
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1;
    }
    .nav-stats-val {
      font-size: 0.75rem;
      color: var(--primary);
      font-weight: 500;
    }
    /* Separador entre items */
    .nav-stats-item + .nav-stats-item {
      border-top: 1px solid rgba(var(--primary-rgb, 255,107,53), 0.08);
    }
    /* Cerrar al hacer click fuera */
    @media (max-width: 991px) {
      .nav-stats-menu {
        position: static;
        opacity: 1;
        transform: none;
        pointer-events: all;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0 0 0 1rem;
        display: none;
      }
      .nav-stats-dropdown.open .nav-stats-menu {
        display: block;
      }
    }
    #btn-top {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      background: var(--primary);
      border: none;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      opacity: 0;
      visibility: hidden;
      z-index: 999;
      box-shadow: 0 0 10px var(--primary);
    }
    #btn-top.visible {
      opacity: 1;
      visibility: visible;
    }
    #btn-top:hover {
      transform: translateY(-3px);
    }
    /* Efectos de partículas */
    .particles {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: -1;
      overflow: hidden;
    }
    .particle {
      position: absolute;
      background: var(--primary);
      border-radius: 50%;
      opacity: 0.3;
      animation: float linear infinite;
    }

    @keyframes float {
      0% {
        transform: translateY(0) translateX(0);
      }
      100% {
        transform: translateY(-100vh) translateX(20px);
      }
    }
    /* Giscus */
    .giscus {
      background: var(--bg-light);
      padding: 2rem;
      border: 1px solid rgba(0, 240, 255, 0.1);
    }
    /* Panel de Temas - Diseño Moderno */
    .theme-panel {
      position: fixed;
      top: 0;
      right: -100%;
      width: 500px;
      height: 100vh;
      background: var(--bg-dark);
      border-left: 2px solid rgba(var(--primary-rgb, 255,107,53), 0.3);
      z-index: 10001;
      display: flex;
      flex-direction: column;
      transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: -8px 0 32px rgba(0,0,0,0.3);
    }
    .theme-panel.show {
      right: 0;
    }
    
    /* Header del panel */
    .theme-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.5rem 2rem;
      border-bottom: 2px solid rgba(var(--primary-rgb, 255,107,53), 0.2);
      background: linear-gradient(135deg, rgba(var(--primary-rgb, 255,107,53), 0.05), transparent);
    }
    .theme-panel-title {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    .theme-panel-icon {
      font-size: 2rem;
      animation: float 3s ease-in-out infinite;
    }
    .theme-panel-title h3 {
      margin: 0;
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-primary);
    }
    .close-panel {
      background: rgba(var(--primary-rgb, 255,107,53), 0.1);
      border: 1px solid rgba(var(--primary-rgb, 255,107,53), 0.3);
      color: var(--primary);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 1.2rem;
    }
    .close-panel:hover {
      background: var(--primary);
      color: white;
      transform: rotate(90deg);
    }
    
    /* Body del panel */
    .theme-panel-body {
      flex: 1;
      overflow-y: auto;
      padding: 1.5rem 2rem 2rem;
    }
    .theme-panel-body::-webkit-scrollbar {
      width: 8px;
    }
    .theme-panel-body::-webkit-scrollbar-track {
      background: var(--bg-light);
      border-radius: 4px;
    }
    .theme-panel-body::-webkit-scrollbar-thumb {
      background: var(--primary);
      border-radius: 4px;
    }
    
    /* Display de puntos */
    .theme-points-display {
      background: linear-gradient(135deg, rgba(var(--primary-rgb, 255,107,53), 0.1), rgba(var(--secondary-rgb, 247,147,30), 0.1));
      border: 2px solid rgba(var(--primary-rgb, 255,107,53), 0.3);
      border-radius: 12px;
      padding: 1rem 1.5rem;
      margin-bottom: 2rem;
    }
    .points-info {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .points-icon {
      font-size: 2.5rem;
      animation: bounce 2s ease-in-out infinite;
    }
    .points-text {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
    .points-label {
      font-size: 0.85rem;
      color: var(--text-secondary);
      font-weight: 500;
    }
    .points-value {
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--primary);
      line-height: 1;
    }
    
    /* Secciones de temas */
    .theme-section {
      margin-bottom: 2.5rem;
    }
    .theme-category {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1.25rem;
      padding-bottom: 0.75rem;
      border-bottom: 2px solid rgba(var(--primary-rgb, 255,107,53), 0.2);
    }
    .category-icon {
      font-size: 1.5rem;
    }
    .category-name {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text-primary);
      flex: 1;
    }
    .category-badge {
      background: rgba(var(--primary-rgb, 255,107,53), 0.15);
      color: var(--primary);
      padding: 0.25rem 0.75rem;
      border-radius: 12px;
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .category-badge.premium {
      background: rgba(255, 215, 0, 0.15);
      color: #ffd700;
    }
    .category-badge.epic {
      background: linear-gradient(135deg, #ff0080, #ff8c00);
      color: white;
    }
    
    /* Grid de temas */
    .theme-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: 1rem;
    }
    
    /* Cards de temas */
    .theme-card {
      background: var(--bg-light);
      border: 2px solid rgba(var(--primary-rgb, 255,107,53), 0.15);
      border-radius: 12px;
      padding: 0.75rem;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    .theme-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(var(--primary-rgb, 255,107,53), 0.05), transparent);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .theme-card:hover {
      transform: translateY(-4px);
      border-color: var(--primary);
      box-shadow: 0 8px 24px rgba(var(--primary-rgb, 255,107,53), 0.2);
    }
    .theme-card:hover::before {
      opacity: 1;
    }
    .theme-card.active {
      border-color: var(--primary);
      box-shadow: 0 0 20px rgba(var(--primary-rgb, 255,107,53), 0.4);
      background: rgba(var(--primary-rgb, 255,107,53), 0.08);
    }
    .theme-card.active::after {
      content: '✓';
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      background: var(--primary);
      color: white;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      font-weight: 700;
      z-index: 2;
    }
    
    /* Preview de tema */
    .theme-preview {
      width: 100%;
      height: 60px;
      border-radius: 8px;
      margin-bottom: 0.75rem;
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    
    /* Info del tema */
    .theme-info {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      position: relative;
      z-index: 1;
    }
    .theme-name {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-primary);
      text-align: center;
    }
    .theme-status {
      font-size: 0.7rem;
      color: var(--text-secondary);
      text-align: center;
    }
    .theme-cost {
      font-size: 0.75rem;
      font-weight: 700;
      color: #ffd700;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
    }
    
    /* Lock icon para temas premium */
    .theme-lock {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      font-size: 1.2rem;
      z-index: 2;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    }
    .theme-card.unlocked .theme-lock {
      display: none;
    }
    
    /* Settings */
    .theme-settings {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin-bottom: 1.25rem;
      padding: 1rem;
      background: rgba(var(--primary-rgb, 255,107,53), 0.05);
      border-radius: 10px;
      border: 1px solid rgba(var(--primary-rgb, 255,107,53), 0.15);
    }
    .theme-setting-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      cursor: pointer;
      font-size: 0.85rem;
      color: var(--text-secondary);
      transition: color 0.3s ease;
    }
    .theme-setting-item:hover {
      color: var(--text-primary);
    }
    .theme-setting-item input[type="checkbox"] {
      width: 18px;
      height: 18px;
      cursor: pointer;
      accent-color: var(--primary);
    }
    .setting-icon {
      font-size: 1.1rem;
    }
    .setting-text {
      flex: 1;
    }
    
    /* Animaciones */
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-5px); }
    }
    @keyframes bounce {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }

    /* Previews de temas */
    .preview-dark { background: linear-gradient(45deg, #1a1a1a 50%, #ff6b35 50%); }
    .preview-light { background: linear-gradient(45deg, #f8fafc 50%, #3182ce 50%); }
    .preview-neon { background: linear-gradient(45deg, #0a0a0a 50%, #00ff41 50%); }
    .preview-cyberpunk { background: linear-gradient(45deg, #0d1117 50%, #ff0080 50%); }
    .preview-matrix { background: linear-gradient(45deg, #000000 50%, #00ff00 50%); }
    .preview-synthwave { background: linear-gradient(45deg, #2d1b69 50%, #ff6b9d 50%); }
    .preview-ocean { background: linear-gradient(45deg, #0f3460 50%, #00d4ff 50%); }
    .preview-forest { background: linear-gradient(45deg, #1a3d2e 50%, #4ade80 50%); }
    .preview-sunset { background: linear-gradient(45deg, #7c2d12 50%, #f97316 50%); }
    .preview-christmas { background: linear-gradient(45deg, #0f172a 50%, #dc2626 50%); }
    .preview-halloween { background: linear-gradient(45deg, #1c1917 50%, #f97316 50%); }
    .preview-valentine { background: linear-gradient(45deg, #1f1726 50%, #ec4899 50%); }
    .preview-easter { background: linear-gradient(45deg, #fef3c7 50%, #a855f7 50%); }
    .preview-summer { background: linear-gradient(45deg, #fef3c7 50%, #06b6d4 50%); }
    .preview-autumn { background: linear-gradient(45deg, #451a03 50%, #ea580c 50%); }
    .preview-funkyatlas { background: linear-gradient(45deg, #0f0f1a 50%, #ff4444 50%); }
    .preview-galaxy { background: linear-gradient(45deg, #0c0c0c 25%, #4c1d95 25%, #4c1d95 50%, #7c3aed 50%, #7c3aed 75%, #a855f7 75%); }
    .preview-gold { background: linear-gradient(45deg, #451a03 50%, #fbbf24 50%); }
    .preview-rainbow { background: linear-gradient(45deg, #ef4444 0%, #f97316 16%, #eab308 33%, #22c55e 50%, #3b82f6 66%, #8b5cf6 83%, #ec4899 100%); }
    .preview-diamond { background: linear-gradient(45deg, #f8fafc 25%, #e2e8f0 25%, #e2e8f0 50%, #cbd5e1 50%, #cbd5e1 75%, #94a3b8 75%); }
    .preview-custom { background: linear-gradient(45deg, #1a1a1a 25%, #ff6b35 25%, #ff6b35 50%, #f7931e 50%); }
    .preview-vaporwave { background: linear-gradient(45deg, #ff006e 0%, #8338ec 25%, #3a86ff 50%, #06ffa5 75%, #ffbe0b 100%); }
    .preview-hacker { background: linear-gradient(45deg, #000000 50%, #00ff00 50%); animation: glitch 2s infinite; }
    .preview-neon-city { background: linear-gradient(45deg, #0a0a0a 25%, #ff0080 25%, #ff0080 50%, #00ffff 50%, #00ffff 75%, #ff8000 75%); }
    .preview-space { background: linear-gradient(45deg, #000011 25%, #1a0033 25%, #1a0033 50%, #330066 50%, #330066 75%, #000000 75%); }
    .preview-fire { background: linear-gradient(45deg, #ff0000 0%, #ff4500 25%, #ff8c00 50%, #ffd700 75%, #ff0000 100%); }
    .preview-ice { background: linear-gradient(45deg, #e0f6ff 0%, #87ceeb 25%, #4682b4 50%, #191970 75%, #000080 100%); }
    .preview-toxic { background: linear-gradient(45deg, #32cd32 0%, #7fff00 25%, #adff2f 50%, #00ff00 75%, #008000 100%); }
    .preview-royal { background: linear-gradient(45deg, #4b0082 0%, #8a2be2 25%, #9932cc 50%, #ba55d3 75%, #dda0dd 100%); }
    .preview-steampunk { background: linear-gradient(45deg, #8b4513 0%, #cd853f 25%, #daa520 50%, #b8860b 75%, #8b4513 100%); }
    .preview-hologram { background: linear-gradient(45deg, transparent 0%, #00ffff 25%, transparent 50%, #ff00ff 75%, transparent 100%); }
    .preview-legendary { background: linear-gradient(45deg, #ffd700 0%, #ffff00 12%, #ff8c00 25%, #ff0000 37%, #ff1493 50%, #8a2be2 62%, #0000ff 75%, #00ffff 87%, #ffd700 100%); animation: legendary-glow 3s infinite; }

    body.plushie-rain-theme { --bg-dark: #1a0a0a; --bg-light: #2d1a1a; --text-primary: #ffb3c1; --text-secondary: #ff8fa3; --primary: #ff0000; --secondary: #ffff00; }
    body.valentines-love-theme { --bg-dark: #1a0510; --bg-light: #2d1020; --text-primary: #ffd7e8; --text-secondary: #ffb3d9; --primary: #ff1493; --secondary: #ffd700; }
    .preview-plushie-rain { background: linear-gradient(135deg, #ff0000 0%, #ff8800 50%, #ffff00 100%); position: relative; overflow: hidden; }
    .preview-plushie-rain::before { content: '🧸'; position: absolute; top: -10px; left: 50%; animation: plushieFall 2s linear infinite; font-size: 1.2rem; }
    .preview-plushie-rain::after { content: '🧸'; position: absolute; top: -10px; left: 20%; animation: plushieFall 2.5s linear infinite 0.5s; font-size: 1rem; }

    .preview-valentines-love { background: linear-gradient(135deg, #ff1493 0%, #ff69b4 50%, #ffd700 100%); position: relative; overflow: hidden; }
    .preview-valentines-love::before { content: '💘'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.5); animation: heartbeat 1.5s ease-in-out infinite; }

    @keyframes heartbeat {
      0%, 100% { transform: translate(-50%, -50%) scale(1.5); }
      50% { transform: translate(-50%, -50%) scale(1.8); }
    }

    .color-picker-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
    }
    .color-picker-item {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
    .color-picker-item label {
      font-size: 0.8rem;
      color: var(--text-secondary);
    }
    .color-picker-item input[type="color"] {
      width: 100%;
      height: 30px;
      border: 1px solid var(--primary);
      border-radius: 4px;
      background: transparent;
      cursor: pointer;
    }
    .theme-editor {
      background: var(--bg-dark);
      border: 1px solid var(--primary);
      border-radius: 8px;
      padding: 1rem;
      margin-top: 1rem;
    }
    .editor-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 1rem;
      margin-bottom: 1rem;
    }
    .editor-section h5 {
      color: var(--primary);
      margin-bottom: 0.5rem;
      font-size: 0.9rem;
    }
    .editor-section label {
      font-size: 0.8rem;
      color: var(--text-secondary);
      display: block;
      margin-bottom: 0.3rem;
    }
    .editor-actions {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }
    .editor-actions .btn {
      flex: 1;
      min-width: 120px;
      font-size: 0.8rem;
      padding: 0.4rem 0.8rem;
    }

    @media (max-width: 768px) {
      .editor-grid {
        grid-template-columns: 1fr;
      }
      .editor-actions {
        flex-direction: column;
      }
    }
    /* Temas */
    body.light-theme { --bg-dark: #f8fafc; --bg-light: #ffffff; --text-primary: #1a202c; --text-secondary: #4a5568; --primary: #3182ce; --secondary: #805ad5; }
    body.neon-theme { --bg-dark: #0a0a0a; --bg-light: #1a1a1a; --text-primary: #00ff41; --text-secondary: #00cc33; --primary: #00ff41; --secondary: #ff0080; }
    body.cyberpunk-theme { --bg-dark: #0d1117; --bg-light: #161b22; --text-primary: #ff0080; --text-secondary: #c9d1d9; --primary: #ff0080; --secondary: #00d4ff; }
    body.matrix-theme { --bg-dark: #000000; --bg-light: #0d1b0d; --text-primary: #00ff00; --text-secondary: #00cc00; --primary: #00ff00; --secondary: #008800; }
    body.synthwave-theme { --bg-dark: #2d1b69; --bg-light: #3e2a7a; --text-primary: #ffd700; --text-secondary: #ffb347; --primary: #ff6b9d; --secondary: #c44569; }
    body.ocean-theme { --bg-dark: #0f3460; --bg-light: #16537e; --text-primary: #e8f4fd; --text-secondary: #b8dff0; --primary: #00d4ff; --secondary: #0099cc; }
    body.forest-theme { --bg-dark: #1a3d2e; --bg-light: #2d5a47; --text-primary: #ecfdf5; --text-secondary: #bbf7d0; --primary: #4ade80; --secondary: #22c55e; }
    body.sunset-theme { --bg-dark: #7c2d12; --bg-light: #9a3412; --text-primary: #fed7aa; --text-secondary: #fdba74; --primary: #f97316; --secondary: #ea580c; }
    body.christmas-theme { --bg-dark: #0f172a; --bg-light: #1e293b; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --primary: #dc2626; --secondary: #16a34a; }
    body.halloween-theme { --bg-dark: #1c1917; --bg-light: #292524; --text-primary: #fbbf24; --text-secondary: #f59e0b; --primary: #f97316; --secondary: #7c2d12; }
    body.valentine-theme { --bg-dark: #1f1726; --bg-light: #2e1f3e; --text-primary: #fce7f3; --text-secondary: #f9a8d4; --primary: #ec4899; --secondary: #be185d; }
    body.easter-theme { --bg-dark: #fef3c7; --bg-light: #fef9c3; --text-primary: #451a03; --text-secondary: #78350f; --primary: #a855f7; --secondary: #7c3aed; }
    body.summer-theme { --bg-dark: #fef3c7; --bg-light: #fefce8; --text-primary: #0c4a6e; --text-secondary: #0369a1; --primary: #06b6d4; --secondary: #0891b2; }
    body.autumn-theme { --bg-dark: #451a03; --bg-light: #7c2d12; --text-primary: #fed7aa; --text-secondary: #fdba74; --primary: #ea580c; --secondary: #dc2626; }
    body.funkyatlas-theme { --bg-dark: #0f0f1a; --bg-light: #2b1055; --text-primary: #ffffff; --text-secondary: #cccccc; --primary: #ff4444; --secondary: #7597de; }
    body.galaxy-theme { --bg-dark: #0c0c0c; --bg-light: #1a1a2e; --text-primary: #e2e8f0; --text-secondary: #a855f7; --primary: #7c3aed; --secondary: #4c1d95; }
    body.gold-theme { --bg-dark: #451a03; --bg-light: #78350f; --text-primary: #fef3c7; --text-secondary: #fbbf24; --primary: #f59e0b; --secondary: #d97706; }
    body.rainbow-theme { --bg-dark: #1f2937; --bg-light: #374151; --text-primary: #f9fafb; --text-secondary: #d1d5db; --primary: #ec4899; --secondary: #8b5cf6; }
    body.diamond-theme { --bg-dark: #f8fafc; --bg-light: #ffffff; --text-primary: #1e293b; --text-secondary: #475569; --primary: #0f172a; --secondary: #334155; }
    body.custom-theme { --bg-dark: var(--custom-bg, #1a1a1a); --bg-light: var(--custom-bg-light, #2d2d2d); --text-primary: var(--custom-text, #f0f0f0); --text-secondary: var(--custom-text-secondary, #b0b0b0); --primary: var(--custom-primary, #ff6b35); --secondary: var(--custom-secondary, #f7931e); }
    body.vaporwave-theme { --bg-dark: #1a0033; --bg-light: #330066; --text-primary: #ff006e; --text-secondary: #8338ec; --primary: #3a86ff; --secondary: #06ffa5; }
    body.hacker-theme { --bg-dark: #000000; --bg-light: #001100; --text-primary: #00ff00; --text-secondary: #00cc00; --primary: #00ff00; --secondary: #008800; }
    body.neon-city-theme { --bg-dark: #0a0a0a; --bg-light: #1a0a1a; --text-primary: #00ffff; --text-secondary: #ff0080; --primary: #ff8000; --secondary: #00ff80; }
    body.space-theme { --bg-dark: #000011; --bg-light: #1a0033; --text-primary: #ffffff; --text-secondary: #ccccff; --primary: #6666ff; --secondary: #9999ff; }
    body.fire-theme { --bg-dark: #330000; --bg-light: #660000; --text-primary: #ffff00; --text-secondary: #ff8c00; --primary: #ff4500; --secondary: #ff0000; }
    body.ice-theme { --bg-dark: #001133; --bg-light: #003366; --text-primary: #e0f6ff; --text-secondary: #87ceeb; --primary: #4682b4; --secondary: #191970; }
    body.toxic-theme { --bg-dark: #001100; --bg-light: #003300; --text-primary: #adff2f; --text-secondary: #7fff00; --primary: #32cd32; --secondary: #00ff00; }
    body.royal-theme { --bg-dark: #2d1b69; --bg-light: #4b0082; --text-primary: #dda0dd; --text-secondary: #ba55d3; --primary: #9932cc; --secondary: #8a2be2; }
    body.steampunk-theme { --bg-dark: #3d2914; --bg-light: #8b4513; --text-primary: #daa520; --text-secondary: #cd853f; --primary: #b8860b; --secondary: #8b4513; }
    body.hologram-theme { --bg-dark: #000033; --bg-light: #001166; --text-primary: #00ffff; --text-secondary: #0099cc; --primary: #ff00ff; --secondary: #cc00cc; }
    body.legendary-theme { --bg-dark: #1a0a00; --bg-light: #330f00; --text-primary: #ffd700; --text-secondary: #ffff00; --primary: #ff8c00; --secondary: #ff1493; }

    
    /* FunkyAtlas - Navbar */
    body.funkyatlas-theme .navbar { background: linear-gradient(90deg, #2b1055, #7597de); border-bottom: 1px solid rgba(255, 68, 68, 0.3); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); }
    body.funkyatlas-theme .navbar-brand { background: linear-gradient(to right, #ff4444, #ff9e9e); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 10px rgba(255, 68, 68, 0.7); font-family: 'MilkyNice', 'Space Grotesk', sans-serif; letter-spacing: 1.5px; }
    body.funkyatlas-theme .nav-link { color: white !important; transition: all 0.3s ease; }
    body.funkyatlas-theme .nav-link:hover { background-color: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }
    
    /* FunkyAtlas - Hero */
    body.funkyatlas-theme .hero { background: linear-gradient(135deg, #0f0f1a 0%, #2b1055 100%); }
    body.funkyatlas-theme .hero::before { background: radial-gradient(circle at 20% 30%, rgba(255, 68, 68, 0.2) 0%, transparent 20%), radial-gradient(circle at 80% 70%, rgba(117, 151, 222, 0.2) 0%, transparent 20%); }
    body.funkyatlas-theme .hero h1 { background: linear-gradient(to right, #ff4444, #ff9e9e); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 20px rgba(255, 68, 68, 0.5); font-family: 'MilkyNice', 'Space Grotesk', sans-serif; letter-spacing: 2px; }
    body.funkyatlas-theme section h2,
    body.funkyatlas-theme .credits-section h2 { font-family: 'MilkyNice', 'Space Grotesk', sans-serif; letter-spacing: 1.5px; }
    
    /* FunkyAtlas - Cards */
    body.funkyatlas-theme .card { background: linear-gradient(135deg, rgba(43, 16, 85, 0.6), rgba(117, 151, 222, 0.3)); border: 1px solid rgba(255, 68, 68, 0.3); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); border-radius: 12px; }
    body.funkyatlas-theme .card:hover { transform: translateY(-15px) scale(1.02); box-shadow: 0 15px 30px rgba(255, 68, 68, 0.4); }
    body.funkyatlas-theme .card-title { color: #ff4444; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); position: relative; padding-bottom: 0.3rem; }
    body.funkyatlas-theme .card-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 50px; height: 3px; background: #ff4444; transition: width 0.3s ease; }
    body.funkyatlas-theme .card:hover .card-title::after { width: 100%; }
    body.funkyatlas-theme .card-text { color: #ffffff; text-shadow: 1px 1px 2px rgba(0,0,0,0.7); }
    
    /* FunkyAtlas - Buttons */
    body.funkyatlas-theme .btn-neon { border-color: #ff4444; color: #ff4444; box-shadow: 0 2px 6px rgba(255, 68, 68, 0.3); }
    body.funkyatlas-theme .btn-neon:hover { background: #ff4444; color: white; box-shadow: 0 4px 12px rgba(255, 68, 68, 0.5); }
    body.funkyatlas-theme .btn-outline-neon { border-color: #ff4444; color: #ff4444; }
    body.funkyatlas-theme .btn-outline-neon:hover { background: #ff4444; color: white; }
    
    /* FunkyAtlas - Filters */
    body.funkyatlas-theme .filters { background: linear-gradient(135deg, rgba(43, 16, 85, 0.6), rgba(117, 151, 222, 0.3)); border: 1px solid rgba(255, 68, 68, 0.3); }
    body.funkyatlas-theme .search-box { background: rgba(15, 15, 26, 0.8); border-color: #ff4444; color: white; }
    body.funkyatlas-theme .filter-btn { border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.7); }
    body.funkyatlas-theme .filter-btn.active { background: #ff4444; color: white; border-color: #ff4444; }
    
    /* FunkyAtlas - Theme Panel */
    body.funkyatlas-theme .theme-panel { background: linear-gradient(135deg, rgba(43, 16, 85, 0.9), rgba(117, 151, 222, 0.6)); border-color: #ff4444; backdrop-filter: blur(15px); }
    body.funkyatlas-theme .theme-card { background: rgba(15, 15, 26, 0.8); border-color: rgba(255, 68, 68, 0.3); }
    body.funkyatlas-theme .theme-card:hover { border-color: #ff4444; box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3); }
    body.funkyatlas-theme .theme-card.active { border-color: #ff4444; box-shadow: 0 0 15px rgba(255, 68, 68, 0.5); }
    
    /* FunkyAtlas - Footer */
    body.funkyatlas-theme .footer { background: linear-gradient(90deg, #2b1055, #7597de); border-top: 1px solid rgba(255, 68, 68, 0.3); box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3); }
    body.funkyatlas-theme .social-btn { border-color: #ff4444; color: #ff4444; }
    body.funkyatlas-theme .social-btn:hover { background: #ff4444; color: white; }
    
    /* FunkyAtlas - Scrollbars */
    body.funkyatlas-theme ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #ff4444, #ff9e9e); }
    body.funkyatlas-theme ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); }

    /* Matrix Theme - Unique Aesthetics */
    body.matrix-theme .navbar { background: linear-gradient(90deg, #000000, #001100); border-bottom: 1px solid #00ff00; box-shadow: 0 4px 15px rgba(0, 255, 0, 0.3); }
    body.matrix-theme .navbar-brand { font-family: 'Courier New', monospace; text-shadow: 0 0 10px #00ff00; animation: matrixGlow 2s infinite; }
    body.matrix-theme .card { background: linear-gradient(135deg, rgba(0, 20, 0, 0.9), rgba(0, 40, 0, 0.7)); border: 1px solid #00ff00; box-shadow: 0 0 20px rgba(0, 255, 0, 0.2); }
    body.matrix-theme .card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 10px 30px rgba(0, 255, 0, 0.4); }
    body.matrix-theme .card-title { font-family: 'Courier New', monospace; color: #00ff00; text-shadow: 0 0 5px #00ff00; }
    body.matrix-theme .btn-neon, body.matrix-theme .btn-outline-neon { font-family: 'Courier New', monospace; border-color: #00ff00; color: #00ff00; }
    body.matrix-theme .btn-neon:hover, body.matrix-theme .btn-outline-neon:hover { background: #00ff00; color: #000000; box-shadow: 0 0 20px #00ff00; }
    body.matrix-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0, 255, 0, 0.3) 1px, rgba(0, 255, 0, 0.3) 2px, transparent 2px, transparent 8px, rgba(0, 255, 0, 0.2) 8px, rgba(0, 255, 0, 0.2) 9px); z-index: -2; animation: matrixLines 15s linear infinite; }
    
    /* Cyberpunk Theme - Unique Aesthetics */
    body.cyberpunk-theme .navbar { background: linear-gradient(90deg, #0d1117, #ff0080); border-bottom: 2px solid #00d4ff; box-shadow: 0 4px 20px rgba(255, 0, 128, 0.5); }
    body.cyberpunk-theme .navbar-brand { background: linear-gradient(45deg, #ff0080, #00d4ff); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 20px #ff0080; }
    body.cyberpunk-theme .card { background: linear-gradient(135deg, rgba(13, 17, 23, 0.9), rgba(255, 0, 128, 0.1)); border: 2px solid #ff0080; box-shadow: 0 0 30px rgba(255, 0, 128, 0.3); position: relative; overflow: hidden; }
    body.cyberpunk-theme .card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.2), transparent); animation: cyberpunkScan 3s infinite; }
    body.cyberpunk-theme .card:hover { transform: translateY(-15px) rotateX(5deg); box-shadow: 0 20px 40px rgba(255, 0, 128, 0.6); }
    body.cyberpunk-theme .card-title { color: #00d4ff; text-shadow: 0 0 10px #00d4ff; position: relative; }
    body.cyberpunk-theme .card-title::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, #ff0080, #00d4ff); animation: cyberpunkLine 2s infinite; }
    body.cyberpunk-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 80%, rgba(255, 0, 128, 0.25) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(0, 212, 255, 0.2) 0%, transparent 50%); z-index: -2; animation: cyberpunkPulse 8s ease-in-out infinite; }
    
    /* Ocean Theme - Unique Aesthetics */
    body.ocean-theme .navbar { background: linear-gradient(90deg, #0f3460, #16537e); border-bottom: 2px solid rgba(0, 212, 255, 0.5); box-shadow: 0 4px 15px rgba(0, 100, 200, 0.3); }
    body.ocean-theme .hero::before { background: radial-gradient(circle at 30% 40%, rgba(0, 212, 255, 0.3) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(22, 83, 126, 0.4) 0%, transparent 50%); animation: oceanWaves 6s ease-in-out infinite; }
    body.ocean-theme .card { background: linear-gradient(135deg, rgba(15, 52, 96, 0.8), rgba(22, 83, 126, 0.6)); border: 1px solid rgba(0, 212, 255, 0.3); box-shadow: 0 8px 32px rgba(0, 100, 200, 0.2); backdrop-filter: blur(10px); }
    body.ocean-theme .card:hover { transform: translateY(-8px); box-shadow: 0 16px 48px rgba(0, 212, 255, 0.4); }
    body.ocean-theme .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #00d4ff, transparent); animation: oceanShimmer 3s ease-in-out infinite; }
    
    /* Fire Theme - Unique Aesthetics */
    body.fire-theme .navbar { background: linear-gradient(90deg, #330000, #660000); border-bottom: 2px solid #ff4500; box-shadow: 0 4px 20px rgba(255, 69, 0, 0.5); }
    body.fire-theme .navbar-brand { color: #ff4500; text-shadow: 0 0 10px #ff4500, 0 0 20px #ff0000; animation: fireFlicker 1.5s infinite; }
    body.fire-theme .card { background: linear-gradient(135deg, rgba(51, 0, 0, 0.9), rgba(102, 0, 0, 0.7)); border: 2px solid #ff4500; box-shadow: 0 0 30px rgba(255, 69, 0, 0.4); position: relative; }
    body.fire-theme .card::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, #ff0000, #ff4500, #ff8c00, #ffd700); z-index: -1; border-radius: inherit; animation: fireGlow 2s ease-in-out infinite; }
    body.fire-theme .card:hover { transform: translateY(-12px) scale(1.03); box-shadow: 0 20px 50px rgba(255, 69, 0, 0.6); }
    body.fire-theme .card-title { color: #ffd700; text-shadow: 0 0 10px #ff4500; }
    
    /* Steampunk Theme - Unique Aesthetics */
    body.steampunk-theme .navbar { background: linear-gradient(90deg, #3d2914, #8b4513); border-bottom: 3px solid #b8860b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 15px rgba(0, 0, 0, 0.5); }
    body.steampunk-theme .navbar-brand { color: #daa520; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); font-weight: bold; }
    body.steampunk-theme .card { background: linear-gradient(135deg, rgba(61, 41, 20, 0.9), rgba(139, 69, 19, 0.7)); border: 3px solid #b8860b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 25px rgba(0, 0, 0, 0.4); position: relative; }
    body.steampunk-theme .card::before { content: '⚙️'; position: absolute; top: 10px; right: 10px; font-size: 1.2rem; opacity: 0.3; animation: steamGear 4s linear infinite; }
    body.steampunk-theme .card:hover { transform: translateY(-8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 15px 35px rgba(184, 134, 11, 0.3); }
    body.steampunk-theme .card-title { color: #daa520; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); font-family: serif; }
    
    /* Neon Theme - Unique Aesthetics */
    body.neon-theme .navbar { background: linear-gradient(90deg, #0a0a0a, #1a1a1a); border-bottom: 2px solid #00ff41; box-shadow: 0 0 20px rgba(0, 255, 65, 0.5); }
    body.neon-theme .navbar-brand { color: #00ff41; text-shadow: 0 0 10px #00ff41, 0 0 20px #00ff41, 0 0 30px #00ff41; animation: neonPulse 2s ease-in-out infinite; }
    body.neon-theme .card { background: rgba(26, 26, 26, 0.8); border: 2px solid #00ff41; box-shadow: 0 0 20px rgba(0, 255, 65, 0.3), inset 0 0 20px rgba(0, 255, 65, 0.1); }
    body.neon-theme .card:hover { transform: translateY(-10px); box-shadow: 0 0 40px rgba(0, 255, 65, 0.6), inset 0 0 30px rgba(0, 255, 65, 0.2); }
    body.neon-theme .card-title { color: #00ff41; text-shadow: 0 0 10px #00ff41; }
    body.neon-theme .card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid #00ff41; opacity: 0; animation: neonBorder 3s infinite; pointer-events: none; }
    body.neon-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(90deg, rgba(0, 255, 65, 0.15) 0px, transparent 2px, transparent 100px, rgba(0, 255, 65, 0.1) 102px); z-index: -2; animation: neonGrid 10s linear infinite; }
    
    /* Vaporwave Theme - Unique Aesthetics */
    body.vaporwave-theme .navbar { background: linear-gradient(90deg, #1a0033, #330066); border-bottom: 2px solid #ff006e; box-shadow: 0 4px 20px rgba(255, 0, 110, 0.4); }
    body.vaporwave-theme .navbar-brand { background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: vaporwaveShift 4s ease-in-out infinite; }
    body.vaporwave-theme .card { background: linear-gradient(135deg, rgba(26, 0, 51, 0.9), rgba(51, 0, 102, 0.7)); border: 2px solid #ff006e; box-shadow: 0 8px 32px rgba(255, 0, 110, 0.3); position: relative; overflow: hidden; }
    body.vaporwave-theme .card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(58, 134, 255, 0.3), transparent); animation: vaporwaveScan 4s infinite; }
    body.vaporwave-theme .card:hover { transform: translateY(-12px) rotateY(5deg); box-shadow: 0 20px 50px rgba(255, 0, 110, 0.5); }
    
    /* Animations */
    @keyframes matrixGlow { 0%, 100% { text-shadow: 0 0 10px #00ff00; } 50% { text-shadow: 0 0 20px #00ff00, 0 0 30px #00ff00; } }
    @keyframes cyberpunkScan { 0% { left: -100%; } 100% { left: 100%; } }
    @keyframes cyberpunkLine { 0% { width: 0; } 50% { width: 100%; } 100% { width: 0; } }
    @keyframes oceanWaves { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
    @keyframes oceanShimmer { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
    @keyframes fireFlicker { 0%, 100% { text-shadow: 0 0 10px #ff4500, 0 0 20px #ff0000; } 50% { text-shadow: 0 0 20px #ff4500, 0 0 30px #ff0000, 0 0 40px #ff8c00; } }
    @keyframes fireGlow { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
    @keyframes steamGear { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    @keyframes neonPulse { 0%, 100% { text-shadow: 0 0 10px #00ff41, 0 0 20px #00ff41; } 50% { text-shadow: 0 0 20px #00ff41, 0 0 30px #00ff41, 0 0 40px #00ff41; } }
    @keyframes neonBorder { 0%, 100% { opacity: 0; } 50% { opacity: 0.8; } }
    @keyframes vaporwaveShift { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
    @keyframes vaporwaveScan { 0% { left: -100%; } 100% { left: 100%; } }

    /* Animated Backgrounds for Each Theme */
    body.ocean-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(0, 100, 200, 0.3) 25%, transparent 25%), linear-gradient(-45deg, rgba(0, 212, 255, 0.25) 25%, transparent 25%); background-size: 60px 60px; z-index: -2; animation: oceanFlow 15s linear infinite; }
    body.fire-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 30% 70%, rgba(255, 69, 0, 0.4) 0%, transparent 50%), radial-gradient(circle at 70% 30%, rgba(255, 140, 0, 0.3) 0%, transparent 50%); z-index: -2; animation: fireWaves 6s ease-in-out infinite; }
    body.steampunk-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(184, 134, 11, 0.15) 0deg, transparent 30deg, rgba(139, 69, 19, 0.12) 60deg, transparent 90deg); z-index: -2; animation: steamGears 30s linear infinite; }
    body.vaporwave-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(255, 0, 110, 0.25), rgba(131, 56, 236, 0.2), rgba(58, 134, 255, 0.25)); z-index: -2; animation: vaporwaveGradient 12s ease-in-out infinite; }
    body.forest-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 40% 60%, rgba(74, 222, 128, 0.25) 0%, transparent 50%), radial-gradient(circle at 80% 40%, rgba(34, 197, 94, 0.2) 0%, transparent 50%); z-index: -2; animation: forestBreeze 10s ease-in-out infinite; }
    body.sunset-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(249, 115, 22, 0.25) 0%, rgba(234, 88, 12, 0.2) 50%, rgba(124, 45, 18, 0.15) 100%); z-index: -2; animation: sunsetGlow 15s ease-in-out infinite; }
    body.galaxy-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(2px 2px at 20px 30px, rgba(124, 58, 237, 0.8), transparent), radial-gradient(2px 2px at 40px 70px, rgba(168, 85, 247, 0.6), transparent), radial-gradient(1px 1px at 90px 40px, rgba(196, 181, 253, 0.4), transparent); background-size: 100px 100px; z-index: -2; animation: galaxyTwinkle 20s linear infinite; }
    body.gold-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.25) 0%, transparent 20%, rgba(245, 158, 11, 0.15) 40%); z-index: -2; animation: goldShimmer 8s ease-in-out infinite; }
    body.rainbow-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(239, 68, 68, 0.2), rgba(249, 115, 22, 0.2), rgba(234, 179, 8, 0.2), rgba(34, 197, 94, 0.2), rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2)); background-size: 400% 400%; z-index: -2; animation: rainbowShift 10s ease-in-out infinite; }
    body.diamond-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(226, 232, 240, 0.2) 0deg, rgba(203, 213, 225, 0.15) 60deg, rgba(148, 163, 184, 0.18) 120deg, transparent 180deg); background-size: 80px 80px; z-index: -2; animation: diamondSparkle 12s linear infinite; }
    body.hacker-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(90deg, rgba(0, 255, 0, 0.15) 0px, transparent 1px, transparent 20px, rgba(0, 204, 0, 0.1) 21px); z-index: -2; animation: hackerScan 5s linear infinite; }
    body.space-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(1px 1px at 25px 25px, rgba(102, 102, 255, 0.8), transparent), radial-gradient(1px 1px at 75px 75px, rgba(153, 153, 255, 0.6), transparent), radial-gradient(2px 2px at 125px 25px, rgba(255, 255, 255, 0.4), transparent); background-size: 150px 150px; z-index: -2; animation: spaceFloat 25s linear infinite; }
    body.ice-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, rgba(224, 246, 255, 0.25) 0px, transparent 2px, transparent 20px, rgba(135, 206, 235, 0.2) 22px); z-index: -2; animation: iceCrystals 18s linear infinite; }
    body.toxic-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 30% 40%, rgba(50, 205, 50, 0.3) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(0, 255, 0, 0.25) 0%, transparent 50%); z-index: -2; animation: toxicBubbles 12s ease-in-out infinite; }
    body.royal-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-radial-gradient(circle at 50% 50%, rgba(138, 43, 226, 0.25) 0%, transparent 30%, rgba(186, 85, 211, 0.15) 60%); z-index: -2; animation: royalElegance 15s ease-in-out infinite; }
    body.hologram-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, rgba(0, 255, 255, 0.15) 0px, transparent 2px, transparent 10px, rgba(255, 0, 255, 0.15) 12px, transparent 14px, transparent 24px); z-index: -2; animation: hologramFlicker 3s ease-in-out infinite; }
    body.legendary-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 20%, rgba(255, 215, 0, 0.3) 0%, transparent 30%), radial-gradient(circle at 80% 80%, rgba(255, 20, 147, 0.25) 0%, transparent 30%), radial-gradient(circle at 50% 50%, rgba(138, 43, 226, 0.2) 0%, transparent 40%); z-index: -2; animation: legendaryAura 8s ease-in-out infinite; }

    /* Christmas Theme */
    body.christmas-theme .navbar { background: linear-gradient(90deg, #0f172a, #1e293b); border-bottom: 2px solid #dc2626; box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3); }
    body.christmas-theme .navbar-brand { color: #dc2626; text-shadow: 0 0 10px rgba(220, 38, 38, 0.5); font-family: 'MilkyNice', 'Space Grotesk', sans-serif; letter-spacing: 1.5px; }
    body.christmas-theme .hero h1 { font-family: 'MilkyNice', 'Space Grotesk', sans-serif; letter-spacing: 2px; }
    body.christmas-theme section h2,
    body.christmas-theme .credits-section h2 { font-family: 'MilkyNice', 'Space Grotesk', sans-serif; letter-spacing: 1.5px; }
    body.christmas-theme .card { background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.7)); border: 2px solid #dc2626; box-shadow: 0 0 20px rgba(22, 163, 74, 0.2); }
    body.christmas-theme .card:hover { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(220, 38, 38, 0.4); }
    body.christmas-theme .card-title { color: #dc2626; }
    body.christmas-theme .btn-neon { border-color: #dc2626; color: #dc2626; }
    body.christmas-theme .btn-neon:hover { background: #dc2626; color: white; }
    body.christmas-theme .btn-outline-neon { border-color: #dc2626; color: #dc2626; }
    body.christmas-theme .btn-outline-neon:hover { background: #dc2626; color: white; }
    body.christmas-theme .snowflake { position: fixed; top: -10%; color: white; font-size: 1.5em; z-index: 0; pointer-events: none; animation: fall linear infinite; }
    @keyframes fall { to { transform: translateY(110vh); } }
    @keyframes snowflakeFall {
      0% { transform: translateY(-10px) translateX(0); opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { transform: translateY(calc(100vh + 10px)) translateX(20px); opacity: 0; }
    }
    body.christmas-theme::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }

    /* Halloween Theme */
    body.halloween-theme .navbar { background: linear-gradient(90deg, #1c1917, #292524); border-bottom: 2px solid #f97316; box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4); }
    body.halloween-theme .card { background: linear-gradient(135deg, rgba(28, 25, 23, 0.9), rgba(41, 37, 36, 0.7)); border: 2px solid #f97316; box-shadow: 0 0 25px rgba(124, 45, 18, 0.3); }
    body.halloween-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 30% 40%, rgba(249, 115, 22, 0.35) 0%, transparent 30%), radial-gradient(circle at 70% 80%, rgba(124, 45, 18, 0.25) 0%, transparent 25%); z-index: -2; animation: halloweenGlow 10s ease-in-out infinite; }

    /* Valentine Theme */
    body.valentine-theme .navbar { background: linear-gradient(90deg, #1f1726, #2e1f3e); border-bottom: 2px solid #ec4899; box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4); }
    body.valentine-theme .card { background: linear-gradient(135deg, rgba(31, 23, 38, 0.9), rgba(46, 31, 62, 0.7)); border: 2px solid #ec4899; box-shadow: 0 0 20px rgba(190, 24, 93, 0.3); }
    body.valentine-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 25% 25%, rgba(236, 72, 153, 0.3) 0%, transparent 20%), radial-gradient(circle at 75% 75%, rgba(190, 24, 93, 0.25) 0%, transparent 25%); z-index: -2; animation: valentineHearts 15s ease-in-out infinite; }

    /* Easter Theme */
    body.easter-theme .navbar { background: linear-gradient(90deg, #fef3c7, #fef9c3); border-bottom: 2px solid #a855f7; box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3); }
    body.easter-theme .card { background: linear-gradient(135deg, rgba(254, 243, 199, 0.9), rgba(254, 249, 195, 0.8)); border: 2px solid #a855f7; box-shadow: 0 0 20px rgba(124, 58, 237, 0.2); }
    body.easter-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.25) 0%, transparent 15%, rgba(124, 58, 237, 0.15) 30%); z-index: -2; animation: easterSpring 12s ease-in-out infinite; }

    /* Summer Theme */
    body.summer-theme .navbar { background: linear-gradient(90deg, #fef3c7, #fefce8); border-bottom: 2px solid #06b6d4; box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3); }
    body.summer-theme .card { background: linear-gradient(135deg, rgba(254, 243, 199, 0.9), rgba(254, 252, 232, 0.8)); border: 2px solid #06b6d4; box-shadow: 0 0 20px rgba(8, 145, 178, 0.2); }
    body.summer-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 30%, rgba(6, 182, 212, 0.3) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(8, 145, 178, 0.25) 0%, transparent 35%); z-index: -2; animation: summerSun 20s ease-in-out infinite; }

    /* Autumn Theme */
    body.autumn-theme .navbar { background: linear-gradient(90deg, #451a03, #7c2d12); border-bottom: 2px solid #ea580c; box-shadow: 0 4px 15px rgba(234, 88, 12, 0.4); }
    body.autumn-theme .card { background: linear-gradient(135deg, rgba(69, 26, 3, 0.9), rgba(124, 45, 18, 0.7)); border: 2px solid #ea580c; box-shadow: 0 0 20px rgba(220, 38, 38, 0.2); }
    body.autumn-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, rgba(234, 88, 12, 0.25) 0px, transparent 2px, transparent 30px, rgba(220, 38, 38, 0.2) 32px, transparent 34px, transparent 60px); z-index: -2; animation: autumnLeaves 18s linear infinite; }

    /* Background Animations */
    @keyframes matrixLines { 0% { transform: translateY(0); } 100% { transform: translateY(9px); } }
    @keyframes cyberpunkPulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
    @keyframes oceanFlow { 0% { background-position: 0 0; } 100% { background-position: 60px 60px; } }
    @keyframes fireWaves { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
    @keyframes steamGears { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    @keyframes neonGrid { 0% { background-position: 0 0; } 100% { background-position: 100px 0; } }
    @keyframes vaporwaveGradient { 0%, 100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(180deg); } }
    @keyframes synthwaveLines { 0% { transform: translateY(0); } 100% { transform: translateY(42px); } }
    @keyframes forestBreeze { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
    @keyframes sunsetGlow { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
    @keyframes galaxyTwinkle { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
    @keyframes goldShimmer { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
    @keyframes rainbowShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
    @keyframes diamondSparkle { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    @keyframes hackerScan { 0% { background-position: 0 0; } 100% { background-position: 21px 0; } }
    @keyframes spaceFloat { 0% { background-position: 0 0; } 100% { background-position: 150px 150px; } }
    @keyframes iceCrystals { 0% { background-position: 0 0; } 100% { background-position: 22px 22px; } }
    @keyframes toxicBubbles { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
    @keyframes royalElegance { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
    @keyframes hologramFlicker { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.4; } }
    @keyframes legendaryAura { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.1); } }
    @keyframes snowfall { 0% { transform: translateY(-100vh); } 100% { transform: translateY(100vh); } }
    @keyframes batsFlying { 0% { transform: translateX(-100vw); } 100% { transform: translateX(100vw); } }
    @keyframes heartsFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(10deg); } }
    @keyframes bunnyHop { 0%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-10px); } 50% { transform: translateY(-5px); } }
    @keyframes sunRays { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.1); } }
    @keyframes leavesfall { 0% { transform: translateY(-100vh) rotate(0deg); } 100% { transform: translateY(100vh) rotate(360deg); } }
    @keyframes snowfall { 0% { transform: translateY(-100px); background-position: 0 0; } 100% { transform: translateY(100vh); background-position: 0 100vh; } }
    @keyframes halloweenGlow { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
    @keyframes valentineHearts { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
    @keyframes easterSpring { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } }
    @keyframes summerSun { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.05) rotate(180deg); } }
    @keyframes autumnLeaves { 0% { background-position: 0 0; } 100% { background-position: 62px 62px; } }

    /* Cyberpunk 2077 Theme */
    body.cyberpunk2077-theme { --bg-dark: #0a0a0a; --bg-light: #1a1a1a; --text-primary: #00ffff; --text-secondary: #ff0080; --primary: #ffff00; --secondary: #ff0080; }
    body.cyberpunk2077-theme .navbar { background: linear-gradient(90deg, #0a0a0a, #1a1a1a); border-bottom: 2px solid #ffff00; box-shadow: 0 0 20px rgba(255, 255, 0, 0.5); }
    body.cyberpunk2077-theme .card { background: linear-gradient(135deg, rgba(10, 10, 10, 0.9), rgba(26, 26, 26, 0.8)); border: 2px solid #00ffff; box-shadow: 0 0 30px rgba(0, 255, 255, 0.3); }
    body.cyberpunk2077-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(90deg, rgba(255, 255, 0, 0.1) 0px, transparent 2px, transparent 100px, rgba(255, 0, 128, 0.08) 102px); z-index: -2; animation: cyberpunk2077Glitch 3s linear infinite; }
    .preview-cyberpunk2077 { background: linear-gradient(45deg, #0a0a0a 25%, #ffff00 25%, #ffff00 50%, #00ffff 50%, #00ffff 75%, #ff0080 75%); animation: glitch 2s infinite; }

    /* Retro Synthwave Theme */
    body.retro-synthwave-theme { --bg-dark: #1a0033; --bg-light: #330066; --text-primary: #ff00ff; --text-secondary: #00ffff; --primary: #ff0080; --secondary: #8000ff; }
    body.retro-synthwave-theme .navbar { background: linear-gradient(90deg, #1a0033, #330066); border-bottom: 2px solid #ff0080; box-shadow: 0 0 25px rgba(255, 0, 128, 0.6); }
    body.retro-synthwave-theme .card { background: linear-gradient(135deg, rgba(26, 0, 51, 0.9), rgba(51, 0, 102, 0.8)); border: 2px solid #ff00ff; box-shadow: 0 0 25px rgba(255, 0, 255, 0.4); }
    body.retro-synthwave-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, rgba(255, 0, 128, 0.2) 0px, transparent 2px, transparent 50px, rgba(128, 0, 255, 0.15) 52px); z-index: -2; animation: synthwaveGrid 8s linear infinite; }
    .preview-retro-synthwave { background: linear-gradient(45deg, #1a0033 25%, #ff0080 25%, #ff0080 50%, #ff00ff 50%, #ff00ff 75%, #8000ff 75%); }

    /* Glassmorphism Modern Theme */
    body.glassmorphism-theme { --bg-dark: rgba(255, 255, 255, 0.1); --bg-light: rgba(255, 255, 255, 0.2); --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.8); --primary: #00d4ff; --secondary: #ff0080; }
    body.glassmorphism-theme .navbar { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
    body.glassmorphism-theme .card { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); }
    body.glassmorphism-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(0, 212, 255, 0.1), rgba(255, 0, 128, 0.1)); z-index: -2; }
    .preview-glassmorphism { background: linear-gradient(45deg, rgba(255, 255, 255, 0.3), rgba(0, 212, 255, 0.2)); backdrop-filter: blur(10px); }

    /* Terminal Hacker Theme */
    body.terminal-hacker-theme { --bg-dark: #000000; --bg-light: #001100; --text-primary: #00ff00; --text-secondary: #00cc00; --primary: #00ff00; --secondary: #008800; }
    body.terminal-hacker-theme .navbar { background: #000000; border-bottom: 1px solid #00ff00; font-family: 'Courier New', monospace; }
    body.terminal-hacker-theme .card { background: #001100; border: 1px solid #00ff00; font-family: 'Courier New', monospace; }
    body.terminal-hacker-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, rgba(0, 255, 0, 0.1) 0px, transparent 1px, transparent 20px, rgba(0, 255, 0, 0.05) 21px); z-index: -2; animation: terminalScan 2s linear infinite; }
    .preview-terminal-hacker { background: linear-gradient(45deg, #000000 50%, #00ff00 50%); font-family: 'Courier New', monospace; }

    /* Pastel Kawaii Theme */
    body.pastel-kawaii-theme { --bg-dark: #fef7ff; --bg-light: #fdf4ff; --text-primary: #7c3aed; --text-secondary: #a855f7; --primary: #ec4899; --secondary: #f472b6; }
    body.pastel-kawaii-theme .navbar { background: linear-gradient(90deg, #fef7ff, #fdf4ff); border-bottom: 2px solid #ec4899; }
    body.pastel-kawaii-theme .nav-link { color: #7c3aed !important; }
    body.pastel-kawaii-theme .card { background: linear-gradient(135deg, rgba(254, 247, 255, 0.9), rgba(253, 244, 255, 0.8)); border: 2px solid #f472b6; box-shadow: 0 8px 25px rgba(236, 72, 153, 0.2); }
    body.pastel-kawaii-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 30% 40%, rgba(236, 72, 153, 0.1) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(244, 114, 182, 0.08) 0%, transparent 50%); z-index: -2; }
    .preview-pastel-kawaii { background: linear-gradient(45deg, #fef7ff 25%, #ec4899 25%, #ec4899 50%, #f472b6 50%, #f472b6 75%, #a855f7 75%); }

    /* Animations for new themes */
    @keyframes cyberpunk2077Glitch {
      0%, 100% { filter: hue-rotate(0deg) contrast(1); }
      25% { filter: hue-rotate(90deg) contrast(1.2); }
      50% { filter: hue-rotate(180deg) contrast(0.8); }
      75% { filter: hue-rotate(270deg) contrast(1.1); }
    }
    @keyframes synthwaveGrid {
      0% { background-position: 0 0; }
      100% { background-position: 0 52px; }
    }
    @keyframes terminalScan {
      0% { background-position: 0 0; }
      100% { background-position: 0 21px; }
    }
    
    /* Light Theme - Fix navbar text */
    body.light-theme .navbar { background: linear-gradient(90deg, #f8fafc, #ffffff); border-bottom: 2px solid #3182ce; box-shadow: 0 4px 15px rgba(49, 130, 206, 0.2); }
    body.light-theme .navbar-brand { color: #3182ce !important; text-shadow: none; }
    body.light-theme .nav-link { color: #1a202c !important; }
    body.light-theme .card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.8)); border: 2px solid #3182ce; box-shadow: 0 8px 25px rgba(49, 130, 206, 0.15); }
    body.light-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, rgba(49, 130, 206, 0.05) 0px, transparent 2px, transparent 20px, rgba(128, 90, 213, 0.03) 22px); z-index: -2; animation: lightShimmer 12s ease-in-out infinite; }
    
    /* Synthwave Theme - Complete Aesthetics */
    body.synthwave-theme .navbar { background: linear-gradient(90deg, #2d1b69, #3e2a7a); border-bottom: 2px solid #ff6b9d; box-shadow: 0 4px 20px rgba(255, 107, 157, 0.4); }
    body.synthwave-theme .navbar-brand { background: linear-gradient(45deg, #ffd700, #ff6b9d); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 15px #ff6b9d; }
    body.synthwave-theme .card { background: linear-gradient(135deg, rgba(45, 27, 105, 0.9), rgba(62, 42, 122, 0.7)); border: 2px solid #ff6b9d; box-shadow: 0 0 25px rgba(255, 107, 157, 0.3); }
    body.synthwave-theme .card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 15px 40px rgba(255, 107, 157, 0.5); }
    body.synthwave-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, rgba(255, 107, 157, 0.25) 0px, transparent 2px, transparent 40px, rgba(196, 69, 105, 0.2) 42px); z-index: -2; animation: synthwaveLines 8s linear infinite; }
    
    /* Forest Theme - Complete Aesthetics */
    body.forest-theme .navbar { background: linear-gradient(90deg, #1a3d2e, #2d5a47); border-bottom: 2px solid #4ade80; box-shadow: 0 4px 15px rgba(74, 222, 128, 0.3); }
    body.forest-theme .navbar-brand { color: #4ade80; text-shadow: 0 0 10px #4ade80; }
    body.forest-theme .card { background: linear-gradient(135deg, rgba(26, 61, 46, 0.9), rgba(45, 90, 71, 0.7)); border: 2px solid #4ade80; box-shadow: 0 8px 25px rgba(34, 197, 94, 0.2); }
    body.forest-theme .card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(74, 222, 128, 0.4); }
    
    /* Sunset Theme - Complete Aesthetics */
    body.sunset-theme .navbar { background: linear-gradient(90deg, #7c2d12, #9a3412); border-bottom: 2px solid #f97316; box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4); }
    body.sunset-theme .navbar-brand { color: #f97316; text-shadow: 0 0 15px #f97316; }
    body.sunset-theme .card { background: linear-gradient(135deg, rgba(124, 45, 18, 0.9), rgba(154, 52, 18, 0.7)); border: 2px solid #f97316; box-shadow: 0 8px 25px rgba(234, 88, 12, 0.3); }
    body.sunset-theme .card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(249, 115, 22, 0.5); }
    
    /* Ocean Theme - Complete Aesthetics */
    body.ocean-theme .navbar-brand { color: #00d4ff; text-shadow: 0 0 15px #00d4ff; }
    body.ocean-theme .card-title { color: #00d4ff; text-shadow: 0 0 8px #00d4ff; }
    
    /* Neon City Theme - Complete Aesthetics */
    body.neon-city-theme .navbar { background: linear-gradient(90deg, #0a0a0a, #1a0a1a); border-bottom: 2px solid #ff8000; box-shadow: 0 4px 20px rgba(255, 128, 0, 0.5); }
    body.neon-city-theme .navbar-brand { background: linear-gradient(45deg, #ff0080, #00ffff, #ff8000); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: neonCityGlow 3s ease-in-out infinite; }
    body.neon-city-theme .card { background: linear-gradient(135deg, rgba(10, 10, 10, 0.9), rgba(26, 10, 26, 0.7)); border: 2px solid #ff0080; box-shadow: 0 0 30px rgba(255, 0, 128, 0.4); }
    body.neon-city-theme::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(90deg, rgba(255, 0, 128, 0.1) 0px, transparent 2px, transparent 50px, rgba(0, 255, 255, 0.08) 52px, transparent 54px, transparent 100px, rgba(255, 128, 0, 0.06) 102px); z-index: -2; animation: neonCityLines 6s linear infinite; }
    
    /* Additional Missing Animations */
    @keyframes lightShimmer { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
    @keyframes neonCityGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5); } }
    @keyframes neonCityLines { 0% { background-position: 0 0; } 100% { background-position: 102px 0; } }
    
    /* Fix navbar text for all light themes */
    body.easter-theme .nav-link { color: #451a03 !important; }
    body.summer-theme .nav-link { color: #0c4a6e !important; }
    body.diamond-theme .nav-link { color: #1e293b !important; }
    body.diamond-theme .navbar-brand { color: #0f172a !important; text-shadow: none; }

    /* Filtros y búsqueda */
    .filters {
      background: var(--bg-light);
      padding: 2rem;
      border-radius: 8px;
      margin-bottom: 3rem;
      border: 1px solid rgba(0, 240, 255, 0.1);
    }
    .search-box {
      background: var(--bg-dark);
      border: 1px solid var(--primary);
      color: var(--text-primary);
      border-radius: 4px;
      padding: 0.75rem;
    }
    .filter-btn {
      background: transparent;
      border: 1px solid var(--text-secondary);
      color: var(--text-secondary);
      padding: 0.5rem 1rem;
      border-radius: 20px;
      margin: 0.25rem;
      transition: all 0.3s ease;
    }
    .filter-btn.active {
      background: var(--primary);
      color: var(--bg-dark);
      border-color: var(--primary);
    }
    /* Paginación */
    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
      margin-top: 2rem;
      flex-wrap: wrap;
    }
    .page-btn {
      background: transparent;
      border: 1px solid var(--primary);
      color: var(--primary);
      padding: 0.5rem 1rem;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      min-width: 40px;
      justify-content: center;
    }
    .page-btn:hover {
      background: rgba(var(--primary-rgb, 255,107,53), 0.1);
      border-color: var(--primary);
      transform: translateY(-2px);
    }
    .page-btn.active {
      background: var(--primary);
      color: var(--bg-dark);
      font-weight: 700;
      box-shadow: 0 0 10px rgba(var(--primary-rgb, 255,107,53), 0.4);
    }
    .page-ellipsis {
      color: var(--text-secondary);
      padding: 0 0.5rem;
      user-select: none;
    }
    /* Botón para nerds */
    .nerd-btn {
      position: fixed;
      bottom: 6rem;
      right: 2rem;
      background: var(--secondary);
      border: none;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      color: white;
      cursor: pointer;
      transition: all 0.3s ease;
      z-index: 998;
      box-shadow: 0 0 10px var(--secondary);
    }
    .nerd-btn:hover {
      transform: scale(1.1) rotate(360deg);
    }
    /* Panel para nerds */
    .nerd-panel {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: var(--bg-light);
      border: 2px solid var(--primary);
      border-radius: 12px;
      padding: 2rem;
      max-width: 500px;
      width: 90%;
      z-index: 10000;
      box-shadow: 0 0 30px rgba(255, 107, 53, 0.3);
      display: none;
    }
    .nerd-panel.show {
      display: block;
      animation: slideIn 0.3s ease;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translate(-50%, -60%);
      }
      to {
        opacity: 1;
        transform: translate(-50%, -50%);
      }
    }
    .nerd-panel h3 {
      color: var(--primary);
      margin-bottom: 1rem;
      text-align: center;
    }
    .nerd-info {
      font-size: 0.9rem;
      line-height: 1.6;
      margin-bottom: 0.5rem;
    }
    .close-panel {
      position: absolute;
      top: 10px;
      right: 15px;
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 1.5rem;
      cursor: pointer;
    }
    .panel-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      z-index: 9999;
      display: none;
    }
    .panel-overlay.show {
      display: block;
    }
    /* Lazy loading */
    img[loading="lazy"] {
      opacity: 0;
      transition: opacity 0.3s;
    }
    img[loading="lazy"].loaded {
      opacity: 1;
    }
    /* Sistema de carga por secciones */
    .section-loading {
      text-align: center;
      padding: 2rem;
      opacity: 1;
      transition: opacity 0.3s ease;
    }
    .section-loading.loaded {
      opacity: 0;
      height: 0;
      padding: 0;
      overflow: hidden;
    }
    .mini-loader {
      width: 30px;
      height: 30px;
      border: 2px solid rgba(0, 240, 255, 0.3);
      border-top: 2px solid var(--primary);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto 0.5rem;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .loading-text {
      color: var(--text-secondary);
      font-size: 0.9rem;
    }
    /* Sección de créditos */
    .credits-section {
      display: none;
      padding: 8rem 2rem 4rem;
      min-height: 100vh;
    }
    .credits-section.active {
      display: block;
    }

    /* ── Experimentos Showcase ── */
    .exp-showcase {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    /* Card base */
    .exp-card {
      background: var(--bg-light);
      border-radius: 16px;
      overflow: hidden;
      position: relative;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .exp-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 40px rgba(0,0,0,0.25);
    }

    /* Featured — Deadly Pursuer */
    .exp-featured {
      border: 1.5px solid rgba(255,0,0,0.35);
      background: #0a0a0a !important;
      min-height: 260px;
    }
    .exp-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      opacity: 0.06;
      filter: grayscale(100%) contrast(180%);
      pointer-events: none;
    }
    .exp-featured-inner {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      padding: 2.5rem;
    }
    .exp-featured-text {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      flex: 1;
    }
    .exp-featured-icons {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
      flex-shrink: 0;
    }
    .exp-char-icon {
      width: 72px;
      height: 72px;
      border-radius: 12px;
      object-fit: cover;
      border: 2px solid rgba(255,0,0,0.3);
      background: rgba(255,0,0,0.05);
      transition: transform 0.2s ease, border-color 0.2s ease;
    }
    .exp-char-icon:hover {
      transform: scale(1.08);
      border-color: rgba(255,0,0,0.7);
    }

    /* Labels */
    .exp-label {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 0.2rem 0.65rem;
      border-radius: 999px;
      border: 1px solid;
      width: fit-content;
      background: rgba(var(--primary-rgb,255,107,53), 0.1);
      color: var(--primary);
      border-color: rgba(var(--primary-rgb,255,107,53), 0.3);
    }
    .exp-label-danger {
      background: rgba(255,0,0,0.12);
      color: #ff4444;
      border-color: rgba(255,0,0,0.3);
    }

    /* Títulos */
    .exp-title {
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--text-primary);
      margin: 0;
      line-height: 1.2;
    }
    .exp-title-danger {
      color: #ff2222;
      text-shadow: 0 0 20px rgba(255,0,0,0.3);
    }

    /* Descripciones */
    .exp-desc {
      font-size: 0.9rem;
      color: var(--text-secondary);
      margin: 0;
      line-height: 1.6;
      max-width: 480px;
    }
    .exp-desc-danger { color: #ff8888; }

    /* Pills */
    .exp-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }
    .exp-pill {
      background: rgba(var(--primary-rgb,255,107,53), 0.08);
      border: 1px solid rgba(var(--primary-rgb,255,107,53), 0.2);
      color: var(--text-secondary);
      padding: 0.2rem 0.65rem;
      border-radius: 999px;
      font-size: 0.75rem;
    }
    .exp-pill-danger {
      background: rgba(255,0,0,0.08);
      border-color: rgba(255,0,0,0.2);
      color: #ff8888;
    }

    /* Botones */
    .exp-btn {
      display: inline-flex;
      align-items: center;
      padding: 0.6rem 1.4rem;
      border-radius: 8px;
      font-size: 0.88rem;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.2s ease;
      border: none;
      cursor: pointer;
      width: fit-content;
    }
    .exp-btn-danger {
      background: #ffffff;
      color: #ff0000;
      box-shadow: 0 0 20px rgba(255,0,0,0.35);
      font-weight: 700;
      border: 2px solid #ff0000;
    }
    .exp-btn-danger:hover {
      background: #ff0000;
      box-shadow: 0 0 30px rgba(255,0,0,0.55);
      color: #ffffff;
      transform: translateY(-2px);
    }
    .exp-btn-mini {
      background: var(--bg-dark);
      color: var(--text-primary);
      border: 2px solid rgba(var(--exp-accent, 255,107,53), 0.4);
      margin: 0 1.5rem 1.5rem;
      font-weight: 600;
    }
    .exp-btn-mini:hover {
      background: rgba(var(--exp-accent, 255,107,53), 0.15);
      color: var(--text-primary);
      border-color: rgb(var(--exp-accent, 255,107,53));
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(var(--exp-accent, 255,107,53), 0.3);
    }

    /* Grid de mini cards */
    .exp-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
    }
    .exp-mini {
      display: flex;
      flex-direction: column;
      border: 1px solid rgba(var(--primary-rgb,255,107,53), 0.12);
    }
    .exp-mini-icon {
      font-size: 2.5rem;
      padding: 1.5rem 1.5rem 0.5rem;
      line-height: 1;
    }
    .exp-mini-body {
      padding: 0 1.5rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      flex: 1;
    }
    .exp-mini .exp-title {
      font-size: 1.05rem;
    }
    .exp-mini .exp-desc {
      font-size: 0.83rem;
      max-width: 100%;
    }

    /* Responsive */
    @media (max-width: 991px) {
      .exp-grid { grid-template-columns: repeat(2, 1fr); }
      .exp-featured-icons { display: none; }
    }
    @media (max-width: 576px) {
      .exp-grid { grid-template-columns: 1fr; }
      .exp-featured-inner { padding: 1.5rem; }
      .exp-title { font-size: 1.2rem; }
    }

    /* ── Scroll Reveal ── */
    /* El hero nunca se oculta con reveal */
    .hero, .hero * {
      opacity: 1 !important;
      transform: none !important;
    }
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .reveal-visible {
      opacity: 1;
      transform: translateY(0);
    }
    /* Los h2 caen desde arriba */
    section h2.reveal,
    .credits-section h2.reveal {
      transform: translateY(-16px);
    }
    section h2.reveal-visible,
    .credits-section h2.reveal-visible {
      transform: translateY(0);
    }
    /* Respetar preferencia de movimiento reducido */
    @media (prefers-reduced-motion: reduce) {
      .reveal {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }
    .json-viewer {
      background: var(--bg-light);
      border: 1px solid var(--primary);
      border-radius: 8px;
      padding: 2rem;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1rem;
      line-height: 1.8;
      overflow-x: auto;
      color: var(--text-primary);
    }
    .credit-item {
      margin-bottom: 1.5rem;
      padding: 1rem;
      background: var(--bg-dark);
      border-radius: 6px;
      border-left: 3px solid var(--primary);
    }
    .credit-key {
      color: var(--primary);
      font-weight: 600;
      font-size: 1.1rem;
      margin-bottom: 0.5rem;
    }
    .credit-value {
      color: var(--text-secondary);
      margin-left: 1rem;
    }
    .credit-list {
      list-style: none;
      padding-left: 1rem;
    }
    .credit-list li {
      margin-bottom: 0.3rem;
      color: var(--text-secondary);
    }
    .credit-list li:before {
      content: "→ ";
      color: var(--primary);
      font-weight: bold;
    }
    .credit-link {
      color: var(--primary);
      text-decoration: none;
    }
    .credit-link:hover {
      text-decoration: underline;
    }
    .main-content {
      transition: opacity 0.3s ease;
    }
    .main-content.hidden {
      display: none;
    }

    /* ── Créditos — diseño línea de tiempo ── */

    /* Perfil centrado */
    .cr-profile {
      position: relative;
      text-align: center;
      padding: 3rem 2rem 2.5rem;
      margin-bottom: 2.5rem;
      background: var(--bg-light);
      border-radius: 20px;
      border: 1px solid rgba(var(--primary-rgb,255,107,53), 0.15);
      overflow: hidden;
    }
    .cr-profile-glow {
      position: absolute;
      top: -60px;
      left: 50%;
      transform: translateX(-50%);
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(var(--primary-rgb,255,107,53), 0.12) 0%, transparent 70%);
      pointer-events: none;
    }
    .cr-profile-avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid var(--primary);
      box-shadow: 0 0 0 6px rgba(var(--primary-rgb,255,107,53), 0.12);
      margin-bottom: 1rem;
      position: relative;
    }
    .cr-profile-badge {
      display: inline-block;
      background: rgba(var(--primary-rgb,255,107,53), 0.1);
      border: 1px solid rgba(var(--primary-rgb,255,107,53), 0.3);
      color: var(--primary);
      padding: 0.2rem 0.8rem;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 600;
      margin-bottom: 0.75rem;
    }
    .cr-profile-name {
      font-size: 2rem;
      font-weight: 700;
      color: var(--text-primary);
      margin: 0 0 0.75rem;
    }
    .cr-profile-bio {
      font-size: 0.95rem;
      color: var(--text-secondary);
      max-width: 520px;
      margin: 0 auto 1.5rem;
      line-height: 1.6;
    }
    .cr-profile-socials {
      display: flex;
      justify-content: center;
      gap: 0.75rem;
      flex-wrap: wrap;
    }
    .cr-social {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.45rem 1.1rem;
      border: 1px solid rgba(var(--primary-rgb,255,107,53), 0.3);
      border-radius: 8px;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 0.85rem;
      transition: all 0.2s ease;
      background: var(--bg-dark);
    }
    .cr-social:hover {
      border-color: var(--primary);
      color: var(--primary);
      transform: translateY(-2px);
    }

    /* Línea de tiempo */
    .cr-timeline {
      position: relative;
      padding-left: 2.5rem;
    }
    .cr-timeline::before {
      content: '';
      position: absolute;
      left: 0.65rem;
      top: 0;
      bottom: 0;
      width: 2px;
      background: linear-gradient(
        to bottom,
        var(--primary),
        rgba(var(--primary-rgb,255,107,53), 0.1)
      );
      border-radius: 2px;
    }
    .cr-tl-item {
      position: relative;
      margin-bottom: 2.5rem;
    }
    .cr-tl-dot {
      position: absolute;
      left: -2.5rem;
      top: 0.1rem;
      width: 2rem;
      height: 2rem;
      background: var(--bg-light);
      border: 2px solid rgba(var(--primary-rgb,255,107,53), 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.85rem;
    }
    .cr-tl-content {
      background: var(--bg-light);
      border: 1px solid rgba(var(--primary-rgb,255,107,53), 0.12);
      border-radius: 14px;
      padding: 1.5rem;
    }
    .cr-tl-title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--primary);
      margin: 0 0 1.25rem;
    }

    /* Tech chips */
    .cr-tech-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .cr-tech-chip {
      background: var(--bg-dark);
      border: 1px solid rgba(var(--primary-rgb,255,107,53), 0.2);
      color: var(--text-primary);
      padding: 0.3rem 0.8rem;
      border-radius: 6px;
      font-size: 0.8rem;
      font-family: 'Courier New', monospace;
    }

    /* Inspiración */
    .cr-insp-card {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
      background: var(--bg-dark);
      border-radius: 10px;
      padding: 1rem;
    }
    .cr-insp-img {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--primary);
      flex-shrink: 0;
    }
    .cr-insp-name {
      display: block;
      color: var(--text-primary);
      font-size: 0.95rem;
      margin-bottom: 0.35rem;
    }
    .cr-insp-text {
      font-size: 0.82rem;
      color: var(--text-secondary);
      margin: 0 0 0.5rem;
      line-height: 1.5;
    }
    .cr-insp-link {
      font-size: 0.8rem;
      color: var(--primary);
      text-decoration: none;
    }
    .cr-insp-link:hover { text-decoration: underline; }

    /* OC tabs y frame */
    .cr-oc-tabs {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1rem;
    }
    .cr-oc-tab {
      background: var(--bg-dark);
      border: 1px solid rgba(var(--primary-rgb,255,107,53), 0.25);
      color: var(--text-secondary);
      padding: 0.4rem 1.1rem;
      border-radius: 6px;
      font-size: 0.85rem;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .cr-oc-tab:hover,
    .cr-oc-tab.active {
      border-color: var(--primary);
      color: var(--primary);
      background: rgba(var(--primary-rgb,255,107,53), 0.08);
    }
    .cr-oc-frame {
      width: 100%;
      height: 560px;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid rgba(var(--primary-rgb,255,107,53), 0.2);
      background: var(--bg-dark);
    }
    .cr-oc-frame iframe { width: 100%; height: 100%; border: none; }

    /* Planes futuros */
    .cr-plans {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 0.6rem;
    }
    .cr-plan-item {
      background: var(--bg-dark);
      border-left: 3px solid var(--primary);
      border-radius: 0 8px 8px 0;
      padding: 0.6rem 0.9rem;
      font-size: 0.85rem;
      color: var(--text-secondary);
    }

    /* Legal */
    .cr-legal-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.45rem 0;
      border-bottom: 1px solid rgba(var(--primary-rgb,255,107,53), 0.07);
      font-size: 0.85rem;
      color: var(--text-secondary);
      gap: 1rem;
    }
    .cr-legal-ok { color: #4ade80; }
    .cr-license {
      background: rgba(var(--primary-rgb,255,107,53), 0.1);
      border: 1px solid rgba(var(--primary-rgb,255,107,53), 0.25);
      color: var(--primary);
      padding: 0.15rem 0.55rem;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 600;
    }
    .cr-disclaimer {
      font-size: 0.78rem;
      color: var(--text-secondary);
      margin: 0.75rem 0 0;
      font-style: italic;
    }

    /* Mensaje final */
    .cr-farewell {
      text-align: center;
      padding: 2rem;
      border-top: 1px solid rgba(var(--primary-rgb,255,107,53), 0.12);
      margin-top: 1rem;
    }
    .cr-farewell-text {
      color: var(--text-secondary);
      font-size: 0.95rem;
      margin: 0;
      line-height: 1.6;
    }

    /* Responsive créditos */
    @media (max-width: 768px) {
      .cr-timeline { padding-left: 2rem; }
      .cr-tl-dot { left: -2rem; width: 1.6rem; height: 1.6rem; font-size: 0.75rem; }
      .cr-oc-frame { height: 420px; }
      .cr-plans { grid-template-columns: 1fr; }
      .cr-profile-name { font-size: 1.6rem; }
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }
    @keyframes slideUp {
      from { opacity: 0; transform: translateY(50px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    @keyframes shine {
      0% { left: -100%; }
      100% { left: 100%; }
    }
    @keyframes rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateX(-20px); }
      to { opacity: 1; transform: translateX(0); }
    }
    /* PWA Install Button Animation */
    @keyframes pulse {
      0% { box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
      50% { box-shadow: 0 4px 20px rgba(255, 107, 53, 0.6); }
      100% { box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
    }
    /* Mini panel de créditos */
    .credits-mini-panel {
      position: fixed;
      bottom: 2rem;
      left: 2rem;
      background: var(--bg-light);
      border: 2px solid var(--primary);
      border-radius: 12px;
      padding: 1rem;
      max-width: 300px;
      z-index: 10002;
      display: none;
      animation: slideInLeft 0.3s ease;
    }
    .credits-mini-panel.show {
      display: block;
    }

    @keyframes slideInLeft {
      from {
        opacity: 0;
        transform: translateX(-100%);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    .credits-mini-panel h4 {
      color: var(--primary);
      margin-bottom: 0.5rem;
      font-size: 1rem;
    }
    .credits-mini-panel p {
      color: var(--text-secondary);
      font-size: 0.85rem;
      margin-bottom: 0.5rem;
    }
    .credits-mini-panel a {
      color: var(--primary);
      text-decoration: none;
    }
    .credits-mini-panel a:hover {
      text-decoration: underline;
    }
    .close-credits {
      position: absolute;
      top: 5px;
      right: 10px;
      background: none;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 1.2rem;
    }
    /* Parallax optimizado para Android */
    .parallax-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 120%;
      z-index: -3;
      will-change: transform;
    }
    @media (prefers-reduced-motion: reduce) {
      .parallax-bg { transform: none !important; }
    }
    /* Transiciones de página */
    .page-transition {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.6s ease;
    }
    .page-transition.visible {
      opacity: 1;
      transform: translateY(0);
    }
    /* Timeline en cards */
    .card-timeline {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
      font-size: 0.8rem;
      color: var(--text-secondary);
    }
    .commit-dot {
      width: 8px;
      height: 8px;
      background: var(--primary);
      border-radius: 50%;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    /* Sistema de logros - HUD compacto */
    .achievements-panel {
      position: fixed;
      top: 50%;
      right: -100%;
      transform: translateY(-50%);
      background: var(--bg-light);
      border: 2px solid var(--primary);
      border-radius: 12px;
      padding: 1rem;
      width: 280px;
      max-height: 70vh;
      overflow-y: auto;
      z-index: 10003;
      transition: right 0.3s ease;
      display: none;
    }
    .achievements-panel.show {
      right: 10px;
      display: block;
    }
    .achievement-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.5rem;
      margin-bottom: 0.4rem;
      background: var(--bg-dark);
      border-radius: 6px;
      border-left: 2px solid transparent;
    }
    .achievement-item.unlocked {
      border-left-color: var(--primary);
      box-shadow: 0 0 8px rgba(255, 107, 53, 0.2);
    }
    .achievement-icon {
      font-size: 1.2rem;
      width: 30px;
      text-align: center;
    }
    .achievement-item.unlocked .achievement-icon {
      color: var(--primary);
    }
    .achievement-item:not(.unlocked) .achievement-icon {
      color: var(--text-secondary);
      opacity: 0.5;
    }
    .achievement-info h4 {
      margin: 0;
      font-size: 0.8rem;
      color: var(--text-primary);
    }
    .achievement-info p {
      margin: 0;
      font-size: 0.7rem;
      color: var(--text-secondary);
    }
    .points-badge {
      background: var(--primary);
      color: white;
      padding: 0.15rem 0.4rem;
      border-radius: 10px;
      font-size: 0.65rem;
      font-weight: bold;
    }
    /* Tutorial de entrada */
    .tutorial-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      z-index: 10010;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: fadeIn 0.3s ease;
    }
    .tutorial-modal {
      background: var(--bg-light);
      border: 2px solid var(--primary);
      border-radius: 16px;
      padding: 2rem;
      max-width: 500px;
      width: 90%;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      animation: slideIn 0.4s ease;
    }
    .tutorial-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;
    }
    .tutorial-header h3 {
      color: var(--primary);
      margin: 0;
      font-size: 1.5rem;
    }
    .tutorial-close {
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 1.5rem;
      cursor: pointer;
      padding: 0;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tutorial-content p {
      color: var(--text-secondary);
      margin-bottom: 1.5rem;
      text-align: center;
    }
    .tutorial-features {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: 2rem;
    }
    .tutorial-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      background: var(--bg-dark);
      border-radius: 8px;
      border-left: 3px solid var(--primary);
    }
    .tutorial-icon {
      font-size: 2rem;
      width: 50px;
      text-align: center;
    }
    .tutorial-item strong {
      color: var(--primary);
      display: block;
      margin-bottom: 0.25rem;
    }
    .tutorial-item p {
      margin: 0;
      font-size: 0.9rem;
      color: var(--text-secondary);
    }
    .tutorial-btn {
      width: 100%;
      background: var(--primary);
      color: white;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: 8px;
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .tutorial-btn:hover {
      background: var(--secondary);
      transform: translateY(-2px);
    }
    .achievement-notification {
      position: fixed;
      top: 2rem;
      right: -100%;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      color: white;
      padding: 1rem;
      border-radius: 8px;
      z-index: 10004;
      transition: right 0.3s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      width: 300px;
      max-width: 90vw;
    }
    .achievement-notification.show {
      right: 1rem;
    }
    /* Temas premium */
    .premium-theme {
      position: relative;
    }
    .premium-theme.locked {
      opacity: 0.6;
      cursor: not-allowed;
    }
    .premium-theme.locked::before {
      content: '🔒';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 2rem;
      z-index: 10;
    }
    .premium-theme.owned::before {
      display: none !important;
    }
    .premium-theme.owned {
      opacity: 1 !important;
      cursor: pointer !important;
    }
    .theme-cost {
      position: absolute;
      bottom: 5px;
      right: 5px;
      background: var(--primary);
      color: white;
      padding: 0.2rem 0.5rem;
      border-radius: 8px;
      font-size: 0.7rem;
      font-weight: bold;
    }
    .premium-theme.owned .theme-cost {
      background: #22c55e;
    }
    .premium-theme.owned .theme-cost::before {
      content: '✓ ';
    }
    /* Efectos especiales para temas premium */
    body.galaxy-theme .card { background: linear-gradient(135deg, rgba(28, 25, 46, 0.8), rgba(76, 29, 149, 0.3)); box-shadow: 0 0 20px rgba(124, 58, 237, 0.3); }
    body.gold-theme .card { background: linear-gradient(135deg, rgba(120, 53, 15, 0.8), rgba(251, 191, 36, 0.2)); box-shadow: 0 0 20px rgba(245, 158, 11, 0.4); }
    body.rainbow-theme .card { background: linear-gradient(135deg, rgba(55, 65, 81, 0.8), rgba(139, 92, 246, 0.2)); box-shadow: 0 0 20px rgba(236, 72, 153, 0.3); }
    body.diamond-theme .card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(226, 232, 240, 0.7)); box-shadow: 0 0 20px rgba(15, 23, 42, 0.1); }

    /* Asegurar visibilidad del indicador de racha en todos los temas */
    body.light-theme .streak-indicator,
    body.easter-theme .streak-indicator,
    body.summer-theme .streak-indicator,
    body.diamond-theme .streak-indicator {
      color: #f97316 !important;
      background: rgba(0, 0, 0, 0.6);
    }
    /* Cursores personalizados */
    .cursor-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.5rem;
    }
    .cursor-grid:has(.cursor-item:nth-child(5)) {
      grid-template-columns: repeat(3, 1fr);
    }
    .cursor-item {
      background: var(--bg-dark);
      border: 2px solid transparent;
      border-radius: 8px;
      padding: 0.75rem;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
    }
    .cursor-item:hover {
      border-color: var(--primary);
    }
    .cursor-item.active {
      border-color: var(--primary);
      background: rgba(255, 107, 53, 0.1);
    }
    .cursor-item.locked {
      opacity: 0.6;
    }
    .cursor-item.locked::before {
      content: '🔒';
      position: absolute;
      top: 5px;
      right: 5px;
      font-size: 0.8rem;
    }
    .cursor-preview {
      font-size: 1.5rem;
      margin-bottom: 0.25rem;
    }
    .cursor-name {
      font-size: 0.8rem;
      color: var(--text-primary);
      margin-bottom: 0.25rem;
    }
    .cursor-cost {
      font-size: 0.7rem;
      color: var(--primary);
      font-weight: bold;
    }
    .cursor-item.owned .cursor-cost {
      color: #22c55e;
    }
    .cursor-item.owned .cursor-cost::before {
      content: '✓ ';
    }
    /* Indicador de tema estacional */
    .seasonal-indicator {
      font-size: 0.8rem;
      color: var(--primary);
      font-weight: normal;
    }
    .seasonal-theme.current-season {
      border: 2px solid var(--primary);
      box-shadow: 0 0 15px rgba(255, 107, 53, 0.4);
      animation: seasonalPulse 2s infinite;
    }

    @keyframes seasonalPulse {
      0%, 100% { box-shadow: 0 0 15px rgba(255, 107, 53, 0.4); }
      50% { box-shadow: 0 0 25px rgba(255, 107, 53, 0.6); }
    }
    /* Indicador de racha */
    .streak-indicator {
      font-size: 0.7rem;
      color: var(--secondary) !important;
      font-weight: bold;
      display: inline-flex;
      align-items: center;
      text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
      background: rgba(0, 0, 0, 0.3);
      padding: 0.1rem 0.3rem;
      border-radius: 8px;
      margin-left: 0.25rem;
    }
    /* Indicador de sincronización */
    .sync-indicator {
      position: fixed;
      top: 1rem;
      right: 1rem;
      background: var(--bg-light);
      color: var(--primary);
      padding: 0.5rem 1rem;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: bold;
      z-index: 10000;
      opacity: 0;
      transform: translateX(100%);
      transition: all 0.3s ease;
      border: 1px solid var(--primary);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    .sync-indicator.show {
      opacity: 1;
      transform: translateX(0);
    }
    .sync-indicator.syncing {
      animation: pulse 1s infinite;
    }
    .streak-fire {
      animation: fireGlow 1s ease-in-out infinite alternate;
    }
    @keyframes fireGlow {
      0% { text-shadow: 0 0 5px #f97316; }
      100% { text-shadow: 0 0 15px #f97316, 0 0 25px #ea580c; }
    }
    @keyframes glitch {
      0%, 100% { filter: hue-rotate(0deg); }
      20% { filter: hue-rotate(90deg); }
      40% { filter: hue-rotate(180deg); }
      60% { filter: hue-rotate(270deg); }
      80% { filter: hue-rotate(360deg); }
    }
    @keyframes legendary-glow {
      0%, 100% { box-shadow: 0 0 20px #ffd700; }
      50% { box-shadow: 0 0 40px #ff1493, 0 0 60px #8a2be2; }
    }
    @keyframes fadeOut {
      0% { opacity: 1; transform: scale(1); }
      100% { opacity: 0; transform: scale(0.5) translateY(-20px); }
    }
    @keyframes slideInUpdate {
      0% { transform: translateX(100%); opacity: 0; }
      100% { transform: translateX(0); opacity: 1; }
    }
    @keyframes slideOutUpdate {
      0% { transform: translateX(0); opacity: 1; }
      100% { transform: translateX(100%); opacity: 0; }
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    /* 🎮 ESTILOS PARA GAMIFICACIÓN AVANZADA */
    .badge-item {
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    .badge-item.maxed {
      background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
      color: white;
      box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
      animation: badgeGlow 2s ease-in-out infinite;
    }
    .badge-item.maxed::before {
      content: '🏆';
      position: absolute;
      top: 5px;
      right: 10px;
      font-size: 1.2rem;
      animation: bounce 1s ease-in-out infinite;
    }
    .event-item {
      position: relative;
      overflow: hidden;
      animation: eventPulse 3s ease-in-out infinite;
    }
    .event-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      animation: eventShine 2s infinite;
    }
    .combo-indicator {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: linear-gradient(135deg, #ff6b35, #f7931e);
      color: white;
      padding: 1rem 2rem;
      border-radius: 12px;
      font-size: 1.5rem;
      font-weight: bold;
      z-index: 10005;
      animation: comboAppear 0.5s ease, comboDisappear 0.5s ease 2s;
      pointer-events: none;
      box-shadow: 0 8px 25px rgba(255, 107, 53, 0.5);
    }
    .double-points-active {
      animation: doublePointsGlow 2s ease-in-out infinite;
    }
    .theme-festival-active .theme-card {
      animation: festivalShimmer 3s ease-in-out infinite;
    }
    /* Animaciones para gamificación */
    @keyframes badgeGlow {
      0%, 100% { box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3); }
      50% { box-shadow: 0 8px 25px rgba(255, 107, 53, 0.6); }
    }
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }
    @keyframes eventPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.02); }
    }
    @keyframes eventShine {
      0% { left: -100%; }
      100% { left: 100%; }
    }
    @keyframes comboAppear {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
      100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
    @keyframes comboDisappear {
      0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
    }
    @keyframes doublePointsGlow {
      0%, 100% { text-shadow: 0 0 10px #ff6b35; }
      50% { text-shadow: 0 0 20px #ff6b35, 0 0 30px #f7931e; }
    }
    @keyframes festivalShimmer {
      0%, 100% { box-shadow: 0 0 10px rgba(255, 107, 53, 0.3); }
      50% { box-shadow: 0 0 20px rgba(255, 107, 53, 0.6); }
    }
    /* Optimizaciones móviles */
    @media (max-width: 768px) {
      .hero { padding: 4rem 1rem 2rem; }
      .hero h1 { font-size: 2rem; }
      .theme-panel { 
        width: 100%; 
        right: -100%;
      }
      .theme-panel.show {
        right: 0;
      }
      .theme-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 0.75rem;
      }
      .theme-preview {
        height: 50px;
      }
      .achievements-panel { width: 95%; right: -100%; }
      .achievements-panel.show { right: 2.5%; }
      .nerd-panel { width: 95%; }
      /* Optimizar créditos para móviles */
      .credits-section { padding: 6rem 1rem 2rem; }
      .json-viewer { padding: 1rem; font-size: 0.9rem; }
      .credit-header { padding: 1rem; margin-bottom: 1.5rem; }
      .credit-header h3 { font-size: 1.5rem; }
      .credit-section { padding: 1rem; margin-bottom: 1rem; }
      .credit-section h4 { font-size: 1.1rem; }
      .credit-item { padding: 0.75rem; margin-bottom: 0.75rem; }
      .features-grid { grid-template-columns: 1fr; gap: 0.25rem; }
      .feature-item { padding: 0.4rem; font-size: 0.8rem; }
      .social-links { flex-direction: column; gap: 0.5rem; }
      .social-link { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
      .plan-item { padding: 0.5rem; font-size: 0.85rem; }
      .message-box { padding: 1rem; }
      .message-box i { font-size: 1.5rem; }
      /* Mejorar tarjetas en móviles */
      #repos-container { 
        grid-template-columns: 1fr; 
        gap: 1.5rem; 
        padding: 0 0.5rem;
      }
      .card { 
        min-height: 280px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        margin-bottom: 1rem;
      }
      
      .card-img-top {
        height: 160px;
        object-fit: cover;
      }
      .card-body {
        padding: 1.25rem;
      }
      .card-title {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
        line-height: 1.3;
      }
      .card-text {
        font-size: 0.9rem;
        line-height: 1.4;
        margin-bottom: 1rem;
      }
      .btn-group { 
        flex-direction: row;
        gap: 0.5rem;
        justify-content: space-between;
      }
      .btn-outline-neon {
        flex: 1;
        padding: 0.6rem 0.8rem;
        font-size: 0.8rem;
        white-space: nowrap;
      }
      .filter-btn { margin: 0.1rem; padding: 0.4rem 0.8rem; font-size: 0.8rem; }
      .theme-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
      .theme-card { padding: 0.5rem; }
      .theme-preview { width: 40px; height: 25px; }
      .theme-name { font-size: 0.7rem; }
      .cursor-grid { grid-template-columns: repeat(2, 1fr); }
      .social-btn { width: 35px; height: 35px; }
      .navbar-brand { font-size: 1rem; }
      .nav-link { font-size: 0.75rem; padding: 0.3rem 0.4rem; }
      section { padding: 2rem 0; }
      section h2 { font-size: 2rem; }
      .navbar-nav { overflow-x: auto; flex-wrap: nowrap; }
      .navbar-collapse { overflow: visible; }
      /* Fix para botón de puntos en móvil */
      #achievements-btn {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
        gap: 0.15rem !important;
      }
      #points-display {
        font-size: 0.75rem;
      }
      .streak-indicator {
        font-size: 0.6rem;
        padding: 0.05rem 0.2rem;
      }
    }

    @media (max-width: 480px) {
      .hero h1 { font-size: 1.8rem; }
      .theme-panel, .achievements-panel, .nerd-panel { padding: 0.8rem; }
      .achievement-item { padding: 0.5rem; }
      .points-badge { font-size: 0.6rem; padding: 0.1rem 0.3rem; }
      .filter-btn { font-size: 0.7rem; padding: 0.3rem 0.6rem; }
      /* Créditos aún más compactos */
      .credits-section { padding: 5rem 0.5rem 1rem; }
      .json-viewer { padding: 0.75rem; font-size: 0.85rem; }
      .credit-header { padding: 0.75rem; }
      .credit-header h3 { font-size: 1.3rem; }
      .credit-section { padding: 0.75rem; }
      .credit-section h4 { font-size: 1rem; }
      .credit-item { padding: 0.5rem; }
      .social-link { padding: 0.3rem 0.6rem; font-size: 0.75rem; }
      .message-box { padding: 0.75rem; }
      .credit-badge { font-size: 0.8rem; padding: 0.4rem 0.8rem; }
      /* Tarjetas aún más optimizadas para móviles pequeños */
      .card {
        min-height: 260px;
        margin-bottom: 1rem;
      }
      
      .card-img-top {
        height: 140px;
      }
      .card-body {
        padding: 1rem;
      }
      .card-title {
        font-size: 1rem;
      }
      .card-text {
        font-size: 0.85rem;
      }
      .btn-outline-neon {
        padding: 0.5rem 0.6rem;
        font-size: 0.75rem;
      }
    }
    /* Deadly Pursuer - Siempre oscuro */
    #deadly-pursuer {
      background: #0a0a0a !important;
      padding: 4rem 0 !important;
    }
    #deadly-pursuer h2 {
      color: #ff0000 !important;
      text-shadow: 0 0 20px #ff0000 !important;
    }
    .deadly-pursuer-card {
      background: #0a0a0a !important;
      border: 2px solid #ff0000 !important;
      box-shadow: 0 0 30px rgba(255, 0, 0, 0.3) !important;
    }
    .deadly-pursuer-card * {
      color: #ff4444 !important;
    }
    .deadly-pursuer-card .card-title {
      color: #ff0000 !important;
      text-shadow: 0 0 10px #ff0000 !important;
    }
    
    /* Modal de advertencia */
    .deadly-warning-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.95);
      z-index: 10000;
      display: none;
      align-items: center;
      justify-content: center;
    }
    .deadly-warning-content {
      background: #0a0a0a;
      border: 3px solid #ff0000;
      padding: 2rem;
      border-radius: 10px;
      text-align: center;
      max-width: 500px;
      box-shadow: 0 0 50px #ff0000;
    }
    .deadly-warning-content h3 {
      color: #ff0000 !important;
      text-shadow: 0 0 15px #ff0000;
      margin-bottom: 1rem;
    }
    .deadly-warning-content p {
      color: #ff6666 !important;
      margin-bottom: 2rem;
    }
    .deadly-warning-buttons {
      display: flex;
      gap: 1rem;
      justify-content: center;
    }
    .deadly-btn {
      padding: 0.75rem 1.5rem;
      border: 2px solid #ff0000;
      background: transparent;
      color: #ff0000 !important;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .deadly-btn:hover {
      background: #ff0000;
      color: white !important;
      box-shadow: 0 0 20px #ff0000;
    }
    
    /* Optimizaciones RAM para móviles */
    @media (max-width: 768px) {
      /* Deshabilitar efectos pesados */
      .card:hover { transform: none !important; }
      .parallax-bg { display: none !important; }
      .particles { display: none !important; }
      /* Deshabilitar backgrounds animados */
      body::before { display: none !important; }
      /* Simplificar animaciones */
      * { 
        animation-duration: 0.1s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.1s !important;
      }
      /* Optimizar imágenes */
      .card-img-top { will-change: auto !important; }
      /* Reducir complejidad visual */
      .theme-panel { backdrop-filter: none !important; }
      .navbar { backdrop-filter: none !important; }
      /* Mejorar tarjetas para móviles */
      .card { 
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        background: var(--bg-light) !important;
        border: 1px solid rgba(255, 107, 53, 0.2) !important;
      }
      .navbar { box-shadow: none !important; backdrop-filter: none !important; background: var(--bg-dark) !important; }
      
      /* Deshabilitar text-shadow excepto en títulos importantes */
      * { text-shadow: none !important; }
      .card-title { text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important; }
      /* Mejorar legibilidad en móviles */
      .card-text {
        color: var(--text-primary) !important;
        opacity: 0.9;
      }
      /* Botones más grandes para touch */
      .btn-outline-neon {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      /* Deshabilitar Matrix Rain en móviles */
      #matrix-canvas { display: none !important; }
    }

    /* FunkyAtlas Christmas Theme */
    body.funkyatlas-christmas-theme { --bg-dark: #0d1f0d; --bg-light: #1a3d1a; --text-primary: #ffffff; --text-secondary: #cccccc; --primary: #dc2626; --secondary: #16a34a; }
    body.funkyatlas-christmas-theme .navbar { background: linear-gradient(90deg, #8B0000, #DC143C, #8B0000); border-bottom: 1px solid rgba(255, 215, 0, 0.3); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); }
    body.funkyatlas-christmas-theme .navbar-brand { background: linear-gradient(to right, #FFD700, #FFFFFF); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 10px rgba(255, 215, 0, 0.7); font-family: 'MilkyNice', 'Space Grotesk', sans-serif; letter-spacing: 1.5px; }
    body.funkyatlas-christmas-theme .nav-link { color: white !important; transition: all 0.3s ease; }
    body.funkyatlas-christmas-theme .nav-link:hover { background-color: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }
    body.funkyatlas-christmas-theme .hero { background: linear-gradient(135deg, #0d1f0d 0%, #1a3d1a 100%); }
    body.funkyatlas-christmas-theme .hero::before { background: radial-gradient(circle at 20% 30%, rgba(220, 38, 38, 0.2) 0%, transparent 20%), radial-gradient(circle at 80% 70%, rgba(22, 163, 74, 0.2) 0%, transparent 20%); }
    body.funkyatlas-christmas-theme .hero h1 { background: linear-gradient(to right, #FFD700, #FFFFFF); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); font-family: 'MilkyNice', 'Space Grotesk', sans-serif; letter-spacing: 2px; }
    body.funkyatlas-christmas-theme section h2,
    body.funkyatlas-christmas-theme .credits-section h2 { font-family: 'MilkyNice', 'Space Grotesk', sans-serif; letter-spacing: 1.5px; }
    body.funkyatlas-christmas-theme .card { background: linear-gradient(135deg, rgba(139, 0, 0, 0.6), rgba(220, 20, 60, 0.3)); border: 1px solid rgba(255, 215, 0, 0.3); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); border-radius: 12px; }
    body.funkyatlas-christmas-theme .card:hover { transform: translateY(-15px) scale(1.02); box-shadow: 0 15px 30px rgba(220, 38, 38, 0.4); }
    body.funkyatlas-christmas-theme .card-title { color: #FFD700; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); position: relative; padding-bottom: 0.3rem; }
    body.funkyatlas-christmas-theme .card-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 50px; height: 3px; background: #FFD700; transition: width 0.3s ease; }
    body.funkyatlas-christmas-theme .card:hover .card-title::after { width: 100%; }
    body.funkyatlas-christmas-theme .card-text { color: #ffffff; text-shadow: 1px 1px 2px rgba(0,0,0,0.7); }
    body.funkyatlas-christmas-theme .btn-neon { border-color: #dc2626; color: #dc2626; box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3); }
    body.funkyatlas-christmas-theme .btn-neon:hover { background: #dc2626; color: white; box-shadow: 0 4px 12px rgba(220, 38, 38, 0.5); }
    body.funkyatlas-christmas-theme .btn-outline-neon { border-color: #dc2626; color: #dc2626; }
    body.funkyatlas-christmas-theme .btn-outline-neon:hover { background: #dc2626; color: white; }
    body.funkyatlas-christmas-theme .filters { background: linear-gradient(135deg, rgba(139, 0, 0, 0.6), rgba(220, 20, 60, 0.3)); border: 1px solid rgba(255, 215, 0, 0.3); }
    body.funkyatlas-christmas-theme .search-box { background: rgba(13, 31, 13, 0.8); border-color: #dc2626; color: white; }
    body.funkyatlas-christmas-theme .filter-btn { border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.7); }
    body.funkyatlas-christmas-theme .filter-btn.active { background: #dc2626; color: white; border-color: #dc2626; }
    body.funkyatlas-christmas-theme .theme-panel { background: linear-gradient(135deg, rgba(139, 0, 0, 0.9), rgba(220, 20, 60, 0.6)); border-color: #FFD700; backdrop-filter: blur(15px); }
    body.funkyatlas-christmas-theme .theme-card { background: rgba(13, 31, 13, 0.8); border-color: rgba(255, 215, 0, 0.3); }
    body.funkyatlas-christmas-theme .theme-card:hover { border-color: #FFD700; box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3); }
    body.funkyatlas-christmas-theme .theme-card.active { border-color: #FFD700; box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); }
    body.funkyatlas-christmas-theme .footer { background: linear-gradient(90deg, #8B0000, #DC143C, #8B0000); border-top: 1px solid rgba(255, 215, 0, 0.3); box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3); }
    body.funkyatlas-christmas-theme .social-btn { border-color: #dc2626; color: #dc2626; }
    body.funkyatlas-christmas-theme .social-btn:hover { background: #dc2626; color: white; }
    body.funkyatlas-christmas-theme ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #dc2626, #16a34a); }
    body.funkyatlas-christmas-theme ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); }
    body.funkyatlas-christmas-theme .snowflake { position: fixed; top: -10%; color: white; font-size: 1.5em; z-index: -1; pointer-events: none; animation: fall linear infinite; }
    body.funkyatlas-christmas-theme::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
    .preview-funkyatlas-christmas { background: linear-gradient(45deg, #0d1f0d 25%, #8B0000 25%, #8B0000 50%, #FFD700 50%, #FFD700 75%, #16a34a 75%); }

    /* Countdown Timer */
    .countdown-section {
      background: var(--bg-light);
      padding: 2rem 0;
      border-top: 1px solid rgba(255, 107, 53, 0.2);
      border-bottom: 1px solid rgba(255, 107, 53, 0.2);
    }
    .countdown-section h3 {
      color: var(--primary);
      margin-bottom: 1.5rem;
      font-size: 1.5rem;
    }
    .countdown-display {
      display: flex;
      justify-content: center;
      gap: 2rem;
      flex-wrap: wrap;
    }
    .time-unit {
      background: var(--bg-dark);
      border: 2px solid var(--primary);
      border-radius: 12px;
      padding: 1rem;
      min-width: 80px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2);
    }
    .time-unit span {
      display: block;
      font-size: 2rem;
      font-weight: bold;
      color: var(--primary);
      text-shadow: 0 0 10px var(--primary);
    }
    .time-unit label {
      font-size: 0.9rem;
      color: var(--text-secondary);
      margin-top: 0.5rem;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    @media (max-width: 768px) {
      .countdown-display { gap: 1rem; }
      .time-unit { min-width: 60px; padding: 0.75rem; }
      .time-unit span { font-size: 1.5rem; }
      .time-unit label { font-size: 0.8rem; }
    }

    /* Falling Animation */
    .falling-animation * {
      animation: fallDown 3s ease-in forwards;
    }
    
    @keyframes fallDown {
      0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
      }
      100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
      }
    }
    
    /* Fake Collapse Animation */
    .fake-collapse {
      animation: fakeCollapse 5s ease-in forwards;
    }
    
    @keyframes fakeCollapse {
      0% { transform: scale(1) rotate(0deg); filter: brightness(1); }
      25% { transform: scale(0.9) rotate(-2deg); filter: brightness(0.8); }
      50% { transform: scale(0.7) rotate(5deg); filter: brightness(0.5) blur(2px); }
      75% { transform: scale(0.4) rotate(-10deg); filter: brightness(0.2) blur(5px); }
      100% { transform: scale(0) rotate(180deg); filter: brightness(0) blur(10px); opacity: 0; }
    }
/* Animación para pantalla de carga de migración */
@keyframes loading {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

    .falling-plushie, .falling-valentine {
      position: fixed;
      pointer-events: none;
      z-index: 9998;
    }
    
    @keyframes plushieFall {
      from { transform: translateY(-100px) rotate(0deg); opacity: 1; }
      to { transform: translateY(calc(100vh + 100px)) rotate(360deg); opacity: 0.8; }
    }

/* Estilos para el nuevo diseño de actualizaciones */
.version-card {
  cursor: pointer;
  transition: all 0.3s ease;
}

.version-card:hover {
  background: var(--bg-dark) !important;
  transform: translateX(5px);
}

.version-card.active {
  background: var(--bg-dark) !important;
  border-left-width: 4px !important;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2);
}

#version-details::-webkit-scrollbar,
#versions-list::-webkit-scrollbar {
  width: 8px;
}

#version-details::-webkit-scrollbar-track,
#versions-list::-webkit-scrollbar-track {
  background: var(--bg-dark);
  border-radius: 4px;
}

#version-details::-webkit-scrollbar-thumb,
#versions-list::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 4px;
}

@media (max-width: 768px) {
  #updates-section .container > div[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  #versions-list {
    max-height: 200px !important;
    margin-bottom: 1rem;
  }
  
  #version-details {
    max-height: none !important;
  }
}

.version-card {
  position: relative;
}

.version-card:hover {
  background: rgba(255, 107, 53, 0.1) !important;
  transform: translateX(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.version-card.active {
  background: rgba(255, 107, 53, 0.15) !important;
  border-left-width: 5px !important;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.version-card.active::before {
  content: '▶';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 0.8rem;
}

#version-details::-webkit-scrollbar-thumb:hover,
#versions-list::-webkit-scrollbar-thumb:hover {
  background: var(--secondary);
}

@media (max-width: 968px) {
  #updates-section .container > div > div[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  #versions-list {
    max-height: 250px !important;
    position: relative !important;
    top: 0 !important;
  }
  
  #version-details {
    min-height: 300px !important;
  }
}