/* ================================================================
           NFL "BROADCAST" THEME
        ================================================================ */
        :root {
            --ink:        #06090f;
            --ink-2:      #0c1119;
            --panel:      #111826;
            --panel-2:    #0e1420;
            --line:       #1e2a3c;
            --nfl-blue:   #013369;
            --nfl-blue-2: #0257b8;
            --nfl-red:    #d50a0a;
            --nfl-red-2:  #ff3535;
            --chrome:     #eef2f8;
            --steel:      #8b97a7;
            --turf:       #0c5c2e;

            /* Re-tint Bootstrap 5 utilities used by the dynamic ranking markup */
            --bs-primary: #d50a0a;
            --bs-primary-rgb: 213, 10, 10;
            --bs-link-color: #ff3535;
            --bs-link-hover-color: #ffffff;
            --bs-border-color: #1e2a3c;
        }

        * { box-sizing: border-box; }

        body {
            margin: 0;
            overflow-x: hidden;
            background-color: var(--ink);
            background-image:
                radial-gradient(1200px 600px at 50% -10%, rgba(2, 87, 184, .18), transparent 60%),
                radial-gradient(900px 500px at 100% 0%, rgba(213, 10, 10, .12), transparent 55%),
                repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 2px, transparent 2px 96px);
            color: var(--chrome);
            font-family: 'Barlow Condensed', 'Roboto', sans-serif;
            font-size: 16px;
            text-align: center;
            letter-spacing: .2px;
            min-height: 100vh;
        }

        h1,h2,h3,h4,h5,h6,.font-display {
            font-family: 'Oswald', 'Barlow Condensed', sans-serif;
            letter-spacing: .5px;
        }

        ::selection { background: var(--nfl-red); color:#fff; }

        /* ---------- Keyframes / effects ---------- */
        @keyframes wipe        { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
        @keyframes marquee     { from{transform:translateX(0)} to{transform:translateX(-50%)} }
        @keyframes shine       { 0%{left:-140%} 60%{left:140%} 100%{left:140%} }
        @keyframes pulseRing   { 0%{box-shadow:0 0 0 0 rgba(213,10,10,.55)} 70%{box-shadow:0 0 0 18px rgba(213,10,10,0)} 100%{box-shadow:0 0 0 0 rgba(213,10,10,0)} }
        @keyframes bootGlow    { 0%{opacity:0; filter:brightness(2) blur(6px)} 100%{opacity:1; filter:none} }
        @keyframes liveBlink   { 0%,100%{opacity:1} 50%{opacity:.25} }
        @keyframes floatUp     { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }

        /* ================================================================
           TOP NAV (fixed) — ticker + navbar + yard-line divider
        ================================================================ */
        .nav-bar {
            position: fixed !important;
            top: 0 !important; left: 0 !important;
            width: 100% !important;
            z-index: 1030 !important; /* debajo del backdrop de los modales (1050) */
            background: linear-gradient(180deg, #05070c 0%, #0a0f18 100%) !important;
            border-bottom: 2px solid var(--nfl-red);
            display: block !important;
            box-shadow: 0 10px 40px rgba(0,0,0,.6);
        }

        /* Broadcast ticker */
        .ticker {
            position: relative;
            overflow: hidden;
            background: linear-gradient(90deg, var(--nfl-blue) 0%, #05070c 35%, var(--nfl-red) 65%, #05070c 100%);
            background-size: 260% auto;
            animation: wipe 10s linear infinite;
            border-bottom: 1px solid rgba(255,255,255,.12);
        }
        .ticker__track {
            display: inline-flex;
            white-space: nowrap;
            padding: 7px 0;
            animation: marquee 26s linear infinite;
        }
        .ticker__item {
            font-family: 'Oswald', sans-serif;
            font-weight: 600;
            font-size: .82rem;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: #fff;
            padding: 0 26px;
            text-shadow: 0 1px 6px rgba(0,0,0,.6);
        }
        .ticker__item i { color: #ffd23f; margin: 0 8px; }
        .ticker__dot {
            color: var(--nfl-red-2);
            animation: liveBlink 1.1s ease-in-out infinite;
        }

        .navbar.nfl-nav {
            background: transparent !important;
            padding: .35rem 1rem;
            position: relative;
        }
        /* faint yard lines behind the navbar row */
        .navbar.nfl-nav::before {
            content: "";
            position: absolute; inset: 0;
            background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 70px);
            pointer-events: none;
        }
        .navbar-brand img { height: 92px; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(0,0,0,.6)); }

        .brand-wordmark {
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            line-height: .95;
            text-align: left;
        }
        .brand-wordmark .big {
            display: block;
            font-size: 1.5rem;
            letter-spacing: 3px;
            background: linear-gradient(90deg, #fff, #9fc3ff);
            -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .brand-wordmark .small {
            display: block;
            font-size: .62rem;
            letter-spacing: 3px;
            color: var(--steel);
        }

        /* Sits in (and is centred within) the gap between the wordmark and the menu */
        .nav-strap {
            font-family: 'Oswald', sans-serif;
            color: #fff;
            flex: 1 1 auto;
            min-width: 0;
            align-items: center;   /* centra las dos líneas (flex-column) */
            text-align: center;
            padding: 0 16px;
        }
        .nav-strap .kicker {
            font-size: .62rem; letter-spacing: 4px; color: #ffd23f;
            text-transform: uppercase;
        }
        .nav-strap .headline {
            font-size: 1.15rem; font-weight: 700; letter-spacing: 1px;
            text-transform: uppercase;
            text-shadow: 0 0 16px rgba(2,87,184,.5);
        }

        .navbar-nav .nav-link {
            font-family: 'Oswald', sans-serif;
            font-size: .85rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #c7d0dc !important;
            transition: color .2s ease, transform .2s ease;
        }
        .navbar-nav .nav-link:hover { color: #fff !important; transform: translateY(-1px); }
        .dropdown-menu { background: #0c1119; border: 1px solid var(--line); }
        .dropdown-item { color: #c7d0dc; letter-spacing: 1px; font-family: 'Oswald', sans-serif; font-size:.85rem; }
        .dropdown-item:hover { background: var(--nfl-blue); color: #fff; }
        .navbar-toggler { border-color: var(--line); }

        /* Yard-line divider that "shimmers" under the nav */
        .yard-divider {
            height: 4px;
            background:
                linear-gradient(90deg, var(--nfl-blue), var(--nfl-red)),
                repeating-linear-gradient(90deg, #fff 0 3px, transparent 3px 40px);
            background-blend-mode: overlay;
            opacity: .9;
        }

        /* ================================================================
           CTA BUTTON — metallic, shine sweep, pulse ring
        ================================================================ */
        .btn-claim {
            position: relative;
            overflow: hidden;
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #fff !important;
            border: 1px solid rgba(255,255,255,.25) !important;
            border-radius: 4px;
            padding: .62rem 1.4rem;
            background: linear-gradient(135deg, #b00808 0%, #d50a0a 45%, #7a0505 100%);
            box-shadow: 0 6px 20px rgba(213,10,10,.35), inset 0 1px 0 rgba(255,255,255,.25);
            animation: pulseRing 2.6s ease-out infinite;
            transition: transform .18s cubic-bezier(.175,.885,.32,1.275), box-shadow .18s ease;
        }
        .btn-claim::after {
            content: "";
            position: absolute; top: 0; left: -140%;
            width: 60%; height: 100%;
            background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
            transform: skewX(-20deg);
            animation: shine 3.4s ease-in-out infinite;
        }
        .btn-claim:hover {
            transform: translateY(-2px) scale(1.03);
            box-shadow: 0 12px 30px rgba(213,10,10,.55), inset 0 1px 0 rgba(255,255,255,.35);
            color: #fff !important;
        }

        /* ================================================================
           SCOREBOARD CAPTION + CANVAS "STADIUM SCREEN"
        ================================================================ */
        .board-wrap { padding: 150px 0 60px; }

        /* Barra: [líder equipo]  [TABLERO EN VIVO ...]  [líder fan] */
        .board-topbar {
            display: flex;
            align-items: stretch;
            justify-content: center;
            gap: 14px;
            flex-wrap: wrap;
            margin-bottom: 18px;
        }

        .scoreboard {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            padding: 8px 20px;
            border: 1px solid var(--line);
            border-radius: 4px;
            background: linear-gradient(180deg, #0d1420, #080c14);
            font-family: 'Oswald', sans-serif;
            letter-spacing: 3px;
            text-transform: uppercase;
            font-size: .8rem;
            color: var(--steel);
            box-shadow: 0 8px 24px rgba(0,0,0,.5);
        }
        .scoreboard .live {
            color: var(--nfl-red-2);
            font-weight: 700;
        }
        .scoreboard .live i { animation: liveBlink 1.1s ease-in-out infinite; margin-right: 6px; }
        .scoreboard b,
        .scoreboard .sb-item { color: #fff; font-weight: 600; }

        /* Líderes: prestigioso pero discreto */
        .lider {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 14px;
            border: 1px solid rgba(255,210,63,.22);
            border-radius: 4px;
            background: linear-gradient(180deg, rgba(255,210,63,.05), rgba(0,0,0,0));
            font-family: 'Oswald', sans-serif;
            text-align: left;
            color: #c7d0dc;
        }
        .lider-ico { color: #d9b23a; font-size: .95rem; opacity: .85; flex-shrink: 0; display: inline-flex; }
        .lider-ico img {
            width: 20px; height: 13px; object-fit: cover;
            border-radius: 2px; border: 1px solid rgba(255,255,255,.15);
        }
        .lider-body { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
        .lider-tag { font-size: .56rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--steel); }
        .lider-nombre {
            font-size: .82rem; letter-spacing: .5px; color: #eef2f8; font-weight: 600;
            max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .lider-yardas { font-size: .8rem; letter-spacing: 1px; color: #ffd23f; font-weight: 700; white-space: nowrap; }
        button.lider {
            cursor: pointer;
            transition: border-color .2s ease, background .2s ease, transform .15s ease;
        }
        button.lider:hover {
            border-color: rgba(255,210,63,.55);
            background: linear-gradient(180deg, rgba(255,210,63,.12), rgba(0,0,0,0));
            transform: translateY(-1px);
        }
        @media (max-width: 575px) {
            .lider { padding: 5px 10px; gap: 7px; }
            .lider-nombre { max-width: 108px; font-size: .74rem; }
            .lider-tag { letter-spacing: 1.5px; }
        }

        /* Always 10px from each edge, centred, at any zoom level.
           width is % (not vw) so it already excludes the scrollbar. */
        .board-frame {
            position: relative;
            display: block;
            width: calc(100% - 20px);
            margin: 0 auto;
            padding: 6px;
            border-radius: 8px;
            background: linear-gradient(180deg, #0f1622, #070b12);
            border: 1px solid var(--line);
            box-shadow:
                0 30px 80px rgba(0,0,0,.75),
                0 0 40px rgba(2,87,184,.15),
                inset 0 0 0 2px rgba(255,255,255,.03);
        }
        /* corner brackets */
        .board-frame::before, .board-frame::after {
            content: "";
            position: absolute;
            width: 30px; height: 30px;
            border: 3px solid var(--nfl-red);
            pointer-events: none;
        }
        .board-frame::before { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
        .board-frame::after  { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }

        #pixelCanvas {
            display: block;
            width: 100%;
            height: auto;
            image-rendering: pixelated;
            border: 1px solid #05070c;
            border-radius: 3px;
            background: #0b3b1e; /* fallback turf until canvas.js paints the field */
            /* Sobre el grid: cursor de balón; fuera del grid vuelve al normal.
               Safari no soporta cursores SVG -> usa el fallback crosshair. */
            cursor: url('../images/cursor-football.svg') 15 15, crosshair;
            animation: bootGlow 1.1s ease-out both;
        }

        /* ---------- Tooltip: broadcast lower-third ---------- */
        /* Lupa del tablero (canvas.js la crea y posiciona) */
        #boardLoupe {
            position: fixed;
            z-index: 9998;
            display: none;
            pointer-events: none;
            border-radius: 6px;
            border: 2px solid var(--nfl-red);
            box-shadow: 0 14px 40px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.06);
            background: #0b3b1e;
        }

        #pixelTooltip {
            position: fixed;
            z-index: 9999;
            display: none;
            background: linear-gradient(180deg, #0c1119, #06090f);
            color: #fff;
            padding: 9px 14px;
            border-radius: 3px;
            border-left: 4px solid var(--nfl-red);
            font-family: 'Oswald', sans-serif;
            letter-spacing: 1px;
            text-transform: uppercase;
            font-size: 12.5px;
            pointer-events: none;
            box-shadow: 0 10px 30px rgba(0,0,0,.7);
            white-space: nowrap;
            text-align: left;
        }

        /* ================================================================
           MODALS
        ================================================================ */
        /* El nav ahora queda por DEBAJO del backdrop (z-index 1030), así que
           los modales se posicionan solos: sin hacks de padding-top. */
        .modal-content {
            background: linear-gradient(180deg, #0e1420 0%, #0a0e16 100%);
            color: #fff;
            border: 1px solid var(--line);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 40px 100px rgba(0,0,0,.8);
        }
        /* red/blue accent bar on top of every modal */
        .modal-content::before {
            content: "";
            display: block;
            height: 4px;
            flex-shrink: 0;
            background: linear-gradient(90deg, var(--nfl-blue), var(--nfl-red));
        }
        @media (max-width: 575.98px) {
            .modal-fullscreen-sm-down .modal-content { border-radius: 0; border: 0; }
        }
        .modal-header, .modal-footer { border-color: var(--line) !important; }
        .modal-title {
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #fff !important;
        }

        .form-label {
            font-family: 'Oswald', sans-serif;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            font-size: .72rem;
            color: var(--steel) !important;
        }
        .form-control, .form-select {
            background-color: #0b111b !important;
            color: #fff !important;
            border: 1px solid var(--line) !important;
            border-radius: 4px;
        }
        .form-control:focus, .form-select:focus {
            border-color: var(--nfl-red) !important;
            box-shadow: 0 0 0 .2rem rgba(213,10,10,.25) !important;
            background-color: #0b111b !important; color: #fff !important;
        }
        .form-control::placeholder { color: #5c6675; }

        .panel-cost {
            background: linear-gradient(180deg, #0b1017, #070b11) !important;
            border: 1px solid var(--line) !important;
            border-radius: 6px;
        }
        #montoTotalDisplay {
            font-family: 'Oswald', sans-serif;
            letter-spacing: 1px;
            color: #29d17a !important;
            text-shadow: 0 0 18px rgba(41,209,122,.35);
        }

        /* Returning-fan box + token */
        .returning-box {
            background: #0b1017;
            border: 1px solid var(--line);
            border-radius: 6px;
        }
        .form-check-label {
            font-family: 'Oswald', sans-serif;
            letter-spacing: 1px;
            text-transform: uppercase;
            font-size: .78rem;
            color: #c7d0dc;
        }
        /* Checkboxes / switches con borde rojo fijo bien visible sobre el fondo oscuro */
        .form-check-input {
            background-color: #0b111b;
            border: 2px solid var(--nfl-red) !important;
            box-shadow: 0 0 6px rgba(213,10,10,.35);
        }
        .form-check-input:checked {
            background-color: var(--nfl-red);
            border-color: var(--nfl-red) !important;
        }
        .form-check-input:focus {
            border-color: var(--nfl-red-2) !important;
            box-shadow: 0 0 0 .2rem rgba(213,10,10,.4);
        }
        /* Perilla del switch visible en oscuro cuando está apagado */
        .form-switch .form-check-input {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23c7d0dc'/%3e%3c/svg%3e");
        }
        .form-switch .form-check-input:checked {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
        }
        #compraToken, #profileToken { font-family: 'Courier New', monospace; letter-spacing: 1px; }
        #tokenEstado .ok  { color: #29d17a; }
        #tokenEstado .err { color: var(--nfl-red-2); }
        .input-group .btn { white-space: nowrap; }
        .input-group-text {
            background: #0b111b !important;
            border-color: var(--line) !important;
            color: var(--steel) !important;
        }

        /* Pago con tarjeta (PayPal Card Fields) */
        .pay-divider {
            display: flex; align-items: center;
            color: var(--steel);
            font-family: 'Oswald', sans-serif;
            letter-spacing: 2px; text-transform: uppercase; font-size: .7rem;
            margin: 4px 0 12px;
        }
        .pay-divider::before, .pay-divider::after {
            content: ""; flex: 1; height: 1px; background: var(--line);
        }
        .pay-divider span { padding: 0 12px; }
        .cf-input {
            background: #0b111b;
            border: 1px solid var(--line);
            border-radius: 4px;
            padding: 2px 8px;
            min-height: 42px;
            transition: border-color .15s ease, box-shadow .15s ease;
        }
        .cf-input.cf-focus {
            border-color: var(--nfl-red);
            box-shadow: 0 0 0 .2rem rgba(213,10,10,.25);
        }
        #cfError:not(:empty) { color: var(--nfl-red-2); }
        /* El formulario de tarjeta alojado por PayPal es claro: lo enmarcamos */
        #cardFallbackWrap { background: #fff; border-radius: 8px; padding: 10px; }

        /* ---------- Loader de pago: balón NFL girando en el centro ---------- */
        #payLoader {
            position: fixed; inset: 0; z-index: 5000;
            display: none;
            align-items: center; justify-content: center;
            background: rgba(6, 9, 15, .82);
            -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
        }
        #payLoader.show { display: flex; }
        #payLoader .pl-inner { text-align: center; }
        #payLoader .pl-ball-wrap {
            display: inline-block;
            perspective: 700px;
            animation: plBob 1.3s ease-in-out infinite;
        }
        #payLoader .nfl-ball {
            width: 64px; height: 104px; position: relative;
            border-radius: 50% / 42%;
            background:
                radial-gradient(circle at 34% 28%, rgba(255,255,255,.28), transparent 46%),
                linear-gradient(150deg, #93502a 0%, #6f3717 55%, #4a2410 100%);
            box-shadow: inset 0 0 16px rgba(0,0,0,.55), 0 14px 30px rgba(0,0,0,.55);
            transform-style: preserve-3d;
            animation: plThrow .66s linear infinite;
        }
        #payLoader .nfl-ball::before {  /* costura central */
            content: ""; position: absolute; left: 50%; top: 16%;
            width: 3px; height: 68%; transform: translateX(-50%);
            background: rgba(255,255,255,.92); border-radius: 3px;
        }
        #payLoader .nfl-ball::after {   /* cordones */
            content: ""; position: absolute; left: 50%; top: 50%;
            width: 24px; height: 34px; transform: translate(-50%,-50%);
            background: repeating-linear-gradient(0deg, rgba(255,255,255,.92) 0 3px, transparent 3px 9px);
        }
        #payLoader .pl-text {
            margin-top: 26px;
            font-family: 'Oswald', sans-serif;
            letter-spacing: 3px; text-transform: uppercase;
            font-size: .78rem; color: #c7d0dc;
        }
        @keyframes plThrow {
            from { transform: rotate(-32deg) rotateY(0); }
            to   { transform: rotate(-32deg) rotateY(360deg); }
        }
        @keyframes plBob {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-12px); }
        }

        /* ---------- Chip "Tus yardas" (resaltado activo) ---------- */
        #misYardasChip {
            position: fixed; left: 50%; top: 150px; transform: translateX(-50%);
            z-index: 1020;
            display: flex; align-items: center; gap: 10px;
            background: linear-gradient(180deg, #1a1305, #0e0a02);
            border: 1px solid #d4af1a;
            color: #ffe27a;
            font-family: 'Oswald', sans-serif;
            letter-spacing: 2px; text-transform: uppercase; font-size: .72rem;
            padding: 7px 8px 7px 14px; border-radius: 999px;
            box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 20px rgba(212,175,26,.25);
        }
        #misYardasChip span { cursor: pointer; }
        #misYardasChip button {
            background: none; border: none; color: #ffe27a;
            font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0 6px;
        }
        @media (max-width: 575px) {
            #misYardasChip { top: 122px; font-size: .64rem; letter-spacing: 1.5px; }
        }

        /* ---------- FAB "Comprar yardas": solo cuando hay menú hamburguesa ---------- */
        .fab-comprar {
            display: none;
            position: fixed;
            right: 16px; bottom: 16px;
            z-index: 1025;
            align-items: center; gap: 9px;
            padding: 13px 18px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.28);
            background: linear-gradient(135deg, #b00808 0%, #d50a0a 45%, #7a0505 100%);
            color: #fff !important;
            text-decoration: none;
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            font-size: .82rem;
            cursor: pointer;
            box-shadow: 0 10px 26px rgba(213,10,10,.45), 0 4px 12px rgba(0,0,0,.5);
            animation: fabIn .35s ease-out both;
        }
        .fab-comprar i { font-size: 1rem; }
        .fab-comprar:active { transform: scale(.96); }
        @keyframes fabIn {
            from { opacity: 0; transform: translateY(22px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @media (max-width: 991.98px) {
            .fab-comprar { display: inline-flex; }
            .board-wrap  { padding-bottom: 90px; }
        }
        @media (max-width: 400px) {
            .fab-comprar { padding: 15px; }
            .fab-comprar span { display: none; }
        }

        .field-locked {
            opacity: .7;
            background-color: #10161f !important;
            cursor: not-allowed;
        }

        .btn-outline-light, .btn-outline-primary, .btn-outline-danger {
            font-family: 'Oswald', sans-serif;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            font-size: .8rem;
        }
        .btn-outline-primary { color: var(--nfl-red-2) !important; border-color: var(--nfl-red) !important; }
        .btn-outline-primary:hover { background: var(--nfl-red) !important; color: #fff !important; }

        /* ================================================================
           USER / PROFILE MODAL
        ================================================================ */
        .user-img-modal {
            width: 168px; height: 168px;
            border-radius: 14px;
            object-fit: contain;      /* el logo completo, sin recortar */
            padding: 10px;
            border: 3px solid var(--nfl-red);
            box-shadow: 0 0 30px rgba(213,10,10,.4);
            margin-bottom: 14px;
            background: #0b111b;
        }
        #userName { font-family:'Oswald',sans-serif; letter-spacing:2px; text-transform:uppercase; }
        #userCountry {
            font-family:'Oswald',sans-serif; letter-spacing:3px; text-transform:uppercase;
            color: var(--nfl-red-2) !important;
        }
        .social-icons a {
            color: #c7d0dc;
            font-size: 1.4rem;
            margin: 0 9px;
            transition: transform .2s ease, color .2s ease;
            display: inline-block;
        }
        .social-icons a:hover { color: #fff; transform: translateY(-3px) scale(1.15); }

        /* ================================================================
           POWER RANKINGS MODAL
        ================================================================ */
        .modal-ranking-header {
            border-bottom: 1px solid var(--line);
            background: linear-gradient(135deg, #0c1524 0%, #070b12 100%);
        }
        .nav-ranking .nav-link {
            font-family: 'Oswald', sans-serif;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-size: .82rem;
            color: #c7d0dc !important;
            border: none !important;
            border-bottom: 3px solid transparent !important;
            padding: 10px 18px;
            transition: .25s;
        }
        .nav-ranking .nav-link:hover { color: #fff !important; }
        .nav-ranking .nav-link.active {
            background: transparent !important;
            color: #fff !important;
            border-bottom: 3px solid var(--nfl-red) !important;
        }

        .ranking-list-item {
            background: linear-gradient(180deg, #0e1521, #0a0f19);
            border: 1px solid var(--line);
            border-left: 3px solid transparent;
            border-radius: 6px;
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        }
        .ranking-list-item:hover {
            transform: translateX(4px);
            border-left-color: var(--nfl-red);
            box-shadow: 0 8px 26px rgba(2,87,184,.28);
        }
        .rank-number {
            font-family: 'Oswald', sans-serif;
            font-size: 1.15rem;
            font-weight: 700;
            width: 34px; height: 34px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 6px;
            flex-shrink: 0;
        }
        .rank-1 { background: linear-gradient(135deg,#ffe27a,#d4af1a); color:#1a1205; box-shadow:0 0 16px rgba(212,175,26,.5); }
        .rank-2 { background: linear-gradient(135deg,#e8edf5,#9aa6b6); color:#10151d; }
        .rank-3 { background: linear-gradient(135deg,#e0955a,#a45a26); color:#fff; }
        .rank-default { background:#16202f; color:#c7d0dc; }

        .progress-ranking {
            height: 6px;
            background: #0b111b;
            border-radius: 3px;
            overflow: hidden;
        }
        .progress-ranking .progress-bar {
            background: linear-gradient(90deg, var(--nfl-blue-2), var(--nfl-red)) !important;
        }

        .text-muted { color: #6f7b8b !important; }

        /* ================================================================
           SELECT2 (team picker) — dark
        ================================================================ */
        .select2-container--bootstrap-5 .select2-selection,
        .select2-container--bootstrap-5 .select2-dropdown,
        .select2-container--bootstrap-5 .select2-search__field {
            background-color: #0b111b !important;
            color: #fff !important;
            border-color: var(--line) !important;
        }
        .select2-container--bootstrap-5 .select2-results__option { color: #fff !important; }
        .select2-results__option[aria-disabled="true"] { display: none !important; }
        .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
        .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
            color: #fff !important; opacity: 1 !important;
        }
        .select2-container--bootstrap-5 .select2-results__option--highlighted {
            background-color: var(--nfl-blue) !important;
            color: #fff !important;
        }

        /* ---------- misc ---------- */
        .transition-all { transition: transform .3s ease, filter .3s ease; }
        .transition-all:hover { transform: scale(1.03); filter: drop-shadow(0 0 10px rgba(2,87,184,.5)); }

        @media (max-width: 991px) {
            .board-wrap { padding-top: 138px; }
            .navbar-brand img { height: 66px; }
        }

        /* ---------------- PHONES ---------------- */
        @media (max-width: 575px) {
            body { font-size: 15px; }

            /* nav más compacto */
            .navbar.nfl-nav { padding: .3rem .6rem; }
            .navbar-brand img { height: 48px; }
            .navbar-brand.d-flex { gap: .5rem !important; }
            .brand-wordmark .big { font-size: 1rem; letter-spacing: 1.5px; }
            .brand-wordmark .small { font-size: .48rem; letter-spacing: 1.2px; }
            .ticker__item { font-size: .72rem; letter-spacing: 1.5px; padding: 0 16px; }

            /* menú desplegado: ítems full-width y separados */
            #navbarCollapse .navbar-nav { padding: .5rem .25rem 1rem !important; gap: .35rem; }
            #navbarCollapse .nav-link { padding: .6rem .25rem; }
            #navbarCollapse .btn-claim { width: 100%; margin: .35rem 0 0; }
            #navbarCollapse .dropdown-menu { width: 100%; }

            .board-wrap { padding-top: 112px; }

            /* scoreboard: que envuelva y no desborde */
            .scoreboard {
                flex-wrap: wrap;
                justify-content: center;
                gap: 3px 12px;
                font-size: .66rem;
                letter-spacing: 1.3px;
                padding: 7px 12px;
                max-width: calc(100% - 20px);
            }

            /* modales */
            .modal-title { font-size: 1.05rem; letter-spacing: 1px; }
            .modal-ranking-header { padding: 1rem !important; }
            .modal-header, .modal-body, .modal-footer { padding: 1rem !important; }
            .nav-ranking .nav-link { padding: .55rem .4rem; letter-spacing: 1px; font-size: .74rem; }
            .modal-footer .btn { flex: 1 1 auto; }
        }

        @media (max-width: 360px) {
            .brand-wordmark .small { display: none; }
        }