body {
            font-family: 'Inter', sans-serif;
            background-color: var(--od-marine-dark);
            color: var(--od-text-light);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
        }

        .bg-layer {
            position: fixed;
            inset: 0;
            z-index: -1;
            background-image: url('../img/backgrounds/background1.jpg');
            background-size: cover;
            background-position: center center;
        }

        .overlay {
            background: linear-gradient(180deg, rgba(var(--od-marine-darker-rgb), 0.55) 0%, rgba(var(--od-marine-darker-rgb), 0.85) 100%);
            min-height: 100vh;
            width: 100%;
            display: flex;
            flex-direction: column;
        }

                        .nav-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 38px;
            padding: 0 18px;
            border-radius: 999px;
            font-family: 'Inter', sans-serif;
            font-size: 0.875rem;
            font-weight: 500;
            letter-spacing: 0.01em;
            line-height: 1;
            white-space: nowrap;
            text-decoration: none;
            cursor: pointer;
            border: 1px solid rgba(var(--od-border-rgb), 0.45);
            background: rgba(var(--od-glass-rgb), 0.28);
            color: var(--od-text-dark);
            backdrop-filter: blur(12px) saturate(140%);
            -webkit-backdrop-filter: blur(12px) saturate(140%);
            box-shadow: 0 1px 2px rgba(var(--od-shadow-rgb), 0.16);
            -webkit-tap-highlight-color: transparent;
            transition: background-color 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
        }
        .nav-button:hover {
            background: rgba(var(--od-glass-rgb), 0.5);
            border-color: rgba(var(--od-border-rgb), 0.8);
            color: var(--od-text-light);
            transform: translateY(-1px);
            box-shadow: 0 5px 16px rgba(var(--od-shadow-rgb), 0.3);
        }
        .nav-button:active {
            transform: translateY(0) scale(0.97);
        }
        .nav-button:focus-visible {
            outline: 2px solid var(--od-marine-accent);
            outline-offset: 2px;
        }
        .nav-button-secondary {
            background: rgba(var(--od-glass-rgb), 0.28);
            border-color: rgba(var(--od-border-rgb), 0.45);
            color: var(--od-text-dark);
        }
        .nav-button-secondary:hover {
            background: rgba(var(--od-glass-rgb), 0.5);
            border-color: rgba(var(--od-border-rgb), 0.8);
            color: var(--od-text-light);
        }
    .page-particles {
            position: fixed;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
            z-index: 0;
        }

        .page-particle {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 2px;
            background: var(--od-gold-light);
            box-shadow: 0 0 8px rgba(234, 179, 8, 0.7);
            opacity: 0;
            animation: particleFloat 9s linear infinite;
        }

        @keyframes particleFloat {
            0% { transform: translateY(40px) rotate(0deg); opacity: 0; }
            15% { opacity: 0.6; }
            85% { opacity: 0.4; }
            100% { transform: translateY(-340px) rotate(170deg); opacity: 0; }
        }
            /* =============================================================
           Botones de la web
           Un solo bloque para todos: pastilla, fondo translucido, sin
           contorno y hover que solo levanta el fondo. Antes cada boton
           tenia reglas propias que competian entre si.
           ============================================================= */
        .news-filter-btn,
        .lang-btn,
        .rating-btn,
        .rating-submit,
        .cb-btn,
        .btn-copy-tag,
        .gold-btn,
        .btn-delete-mini,
        .btn-danger,
        .btn-logout,
        .btn-action,
        .btn-continue,
        .btn-gold,
        .btn-online,
        .btn-rating-del {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 38px;
            padding: 0 18px;
            border-radius: 999px;
            border: 1px solid rgba(253, 230, 138, 0.6);
            background: linear-gradient(180deg, #fde68a 0%, #eab308 100%);
            color: var(--od-ink);
            font-family: 'Inter', sans-serif;
            font-size: 0.8125rem;
            font-weight: 600;
            letter-spacing: 0.01em;
            line-height: 1;
            text-decoration: none;
            white-space: nowrap;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
                0 4px 14px rgba(234, 179, 8, 0.24);
            transition: background-color 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease,
                filter 0.18s ease;
        }
        .nav-button svg),
        .news-filter-btn svg,
        .cb-btn svg,
        .btn-copy-tag svg,
        .gold-btn svg,
        .rating-btn svg,
        .btn-delete-mini svg,
        .btn-danger svg,
        .btn-logout svg {
            width: 17px;
            height: 17px;
            flex-shrink: 0;
        }
        .news-filter-btn:hover,
        .lang-btn:hover,
        .rating-btn:hover,
        .rating-submit:hover,
        .cb-btn:hover,
        .btn-copy-tag:hover,
        .gold-btn:hover,
        .btn-delete-mini:hover,
        .btn-danger:hover,
        .btn-logout:hover,
        .btn-action:hover,
        .btn-continue:hover,
        .btn-gold:hover,
        .btn-online:hover,
        .btn-rating-del:hover {
            background: linear-gradient(180deg, #fef3c7 0%, #f0c02c 100%);
            transform: translateY(-1px);
            color: var(--od-ink);
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset,
                0 9px 22px rgba(234, 179, 8, 0.34);
        }
        .news-filter-btn:active,
        .lang-btn:active,
        .rating-btn:active,
        .rating-submit:active,
        .cb-btn:active,
        .btn-copy-tag:active,
        .gold-btn:active,
        .btn-delete-mini:active,
        .btn-danger:active,
        .btn-logout:active,
        .btn-action:active,
        .btn-continue:active,
        .btn-gold:active,
        .btn-online:active,
        .btn-rating-del:active {
            transform: translateY(0) scale(0.98);
        }
        .news-filter-btn:focus-visible,
        .lang-btn:focus-visible,
        .rating-btn:focus-visible,
        .rating-submit:focus-visible,
        .cb-btn:focus-visible,
        .btn-copy-tag:focus-visible,
        .gold-btn:focus-visible,
        .btn-delete-mini:focus-visible,
        .btn-danger:focus-visible,
        .btn-logout:focus-visible,
        .btn-action:focus-visible,
        .btn-continue:focus-visible,
        .btn-gold:focus-visible,
        .btn-online:focus-visible,
        .btn-rating-del:focus-visible {
            outline: 2px solid var(--od-marine-accent);
            outline-offset: 2px;
        }
        /* Estado activo: se invierte a oscuro con texto dorado, para que
           se distinga de los botones dorados de alrededor. */
        .news-filter-btn.active {
            background: var(--od-ink);
            border-color: rgba(253, 230, 138, 0.75);
            color: var(--od-gold-light);
            font-weight: 700;
            box-shadow: 0 0 0 1px rgba(253, 230, 138, 0.35) inset,
                0 4px 16px rgba(0, 0, 0, 0.35);
        }
        .news-filter-btn.active:hover {
            background: #0a0a0a;
            color: var(--od-gold-light);
        }
        /* Accion positiva: el boton de aceptar. */
        .cb-accept {
            background: linear-gradient(180deg, #fef3c7 0%, #eab308 100%);
            color: var(--od-ink);
        }
        /* Peligro: borrar, banear, cerrar. */
        .btn-danger,
        .btn-rating-del,
        .cb-decline {
            background: rgba(220, 38, 38, 0.16);
            color: #fca5a5;
        }
        .btn-danger:hover,
        .btn-rating-del:hover,
        .cb-decline:hover {
            background: rgba(220, 38, 38, 0.34);
            color: #fee2e2;
        }
        /* Cantidad del carrito: botones pequenos y cuadrados. */
        .cart-qty-btn,
        .cart-remove {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            min-height: 0;
            padding: 0;
            border-radius: 10px;
            border: 1px solid transparent;
            background: linear-gradient(180deg, #fde68a 0%, #eab308 100%);
            border-color: rgba(253, 230, 138, 0.6);
            color: var(--od-ink);
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
            font-family: 'Inter', sans-serif;
            font-size: 0.9rem;
            font-weight: 600;
            line-height: 1;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
        }
        .cart-qty-btn:hover,
        .cart-remove:hover {
            background: linear-gradient(180deg, #fef3c7 0%, #f0c02c 100%);
            transform: translateY(-1px);
        }
        .cart-qty-btn:active,
        .cart-remove:active {
            transform: translateY(0) scale(0.95);
        }
        /* El menu desplegable no va en dorado: son filas de icono y
           texto sobre fondo translucido, como en la referencia. */
        .nav-button {
              background: transparent;
              border: 1px solid transparent;
              color: var(--od-text-dark);
              box-shadow: none;
          }
        .nav-button:hover {
              background: rgba(var(--od-glass-rgb), 0.28);
              color: var(--od-text-light);
          }
        /* La pagina actual si es la unica pastilla dorada del menu. */
        .nav-button[aria-current='page'] {
            background: linear-gradient(180deg, #fde68a 0%, #eab308 100%);
            border-color: rgba(253, 230, 138, 0.6);
            color: var(--od-ink);
            font-weight: 600;
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
                0 4px 14px rgba(234, 179, 8, 0.24);
        }
        .nav-button[aria-current='page']:hover {
            background: linear-gradient(180deg, #fef3c7 0%, #f0c02c 100%);
            color: var(--od-ink);
        }
        /* Contorno dorado: fondo transparente, borde y texto dorados.
           Los del hero (Discord y Proximamente, con el contador de
           jugadores encima) y los del pie (Discord y TikTok). */
        .discord-btn,
        .tiktok-btn,
        .gold-btn,
        .btn-ghost {
            background: transparent;
            border: 1px solid rgba(234, 179, 8, 0.7);
            color: var(--od-marine-accent);
            box-shadow: none;
        }
        .discord-btn:hover,
        .tiktok-btn:hover,
        .gold-btn:hover,
        .btn-ghost:hover {
            background: rgba(234, 179, 8, 0.14);
            border-color: var(--od-marine-accent);
            color: var(--od-gold-light);
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(234, 179, 8, 0.2);
        }
        .discord-btn:active,
        .tiktok-btn:active,
        .gold-btn:active,
        .btn-ghost:active {
            transform: translateY(0) scale(0.98);
        }