/* ============================================
           CSS CUSTOM PROPERTIES
           ============================================ */
        :root {
            --red-primary: #c41e3a;
            --red-dark: #8b0000;
            --red-glow: #ff2d55;
            --navy: #1a2744;
            --navy-deep: #0d1520;
            --navy-light: #2a3f66;
            --gold: #c5a55a;
            --gold-light: #dcc88a;
            --white: #f0f0f0;
            --white-dim: #b0b0b0;
            --black: #0a0a0a;
            --bg-dark: #0d0d0d;
            --bg-section: #111111;
            --bg-card: #1a1a1a;
            --font-display: 'Bebas Neue', sans-serif;
            --font-heading: 'Oswald', sans-serif;
            --font-body: 'Barlow', sans-serif;
            --font-condensed: 'Barlow Condensed', sans-serif;
            --red-ember: #ff6b35;
        }

        /* ============================================
           RESET & BASE
           ============================================ */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        
        html { scroll-behavior: smooth; }
        
        body {
            font-family: var(--font-body);
            background: var(--bg-dark);
            color: var(--white);
            line-height: 1.6;
            overflow-x: hidden;
        }

        img { max-width: 100%; display: block; }
        a { color: inherit; text-decoration: none; }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
        }

        /* ============================================
           TEXTURE OVERLAY (global grain)
           ============================================ */
        body::after {
            content: '';
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
            pointer-events: none;
            z-index: 9999;
        }

        /* ============================================
           NAVIGATION
           ============================================ */
        .nav {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 1000;
            background: rgba(10, 10, 10, 0.92);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(196, 30, 58, 0.3);
            transition: all 0.3s ease;
        }

        .nav.scrolled {
            background: rgba(10, 10, 10, 0.98);
            border-bottom: 2px solid var(--red-primary);
        }

        .nav-inner {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 70px;
        }

        .nav-logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .nav-logo img {
            height: 45px;
            width: auto;
        }

        .nav-logo-text {
            font-family: var(--font-display);
            font-size: 1.4rem;
            letter-spacing: 3px;
            color: var(--white);
        }

        .nav-logo-text span {
            color: var(--red-primary);
        }

        .nav-links {
            display: flex;
            gap: 28px;
            list-style: none;
        }

        .nav-links > li {
            position: relative;
        }

        .nav-links a, .nav-links .nav-dropdown-trigger {
            font-family: var(--font-condensed);
            font-weight: 600;
            font-size: 0.95rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--white-dim);
            transition: color 0.3s;
            position: relative;
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
        }

        .nav-links a::after, .nav-links .nav-dropdown-trigger::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--red-primary);
            transition: width 0.3s;
        }

        .nav-links a:hover, .nav-links .nav-dropdown-trigger:hover { color: var(--white); }
        .nav-links a:hover::after, .nav-links .nav-dropdown-trigger:hover::after { width: 100%; }

        .nav-dropdown-trigger .nav-caret {
            font-size: 0.6rem;
            margin-left: 4px;
            opacity: 0.5;
            transition: transform 0.2s;
        }

        /* Dropdown panel */
        .nav-dropdown {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            padding-top: 16px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s, visibility 0.2s;
            z-index: 100;
        }

        .nav-links > li:hover .nav-dropdown {
            opacity: 1;
            visibility: visible;
        }

        .nav-links > li:hover .nav-caret {
            transform: rotate(180deg);
        }

        .nav-dropdown-inner {
            background: rgba(18, 18, 18, 0.97);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255,255,255,0.08);
            border-top: 2px solid var(--red-primary);
            min-width: 180px;
            padding: 8px 0;
        }

        .nav-dropdown a {
            display: block;
            padding: 10px 20px;
            font-size: 0.85rem !important;
            letter-spacing: 1.5px !important;
            white-space: nowrap;
        }

        .nav-dropdown a::after {
            display: none !important;
        }

        .nav-dropdown a:hover {
            background: rgba(196, 30, 58, 0.1);
            color: var(--white) !important;
        }

        .nav-hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 8px;
        }

        .nav-hamburger span {
            width: 28px;
            height: 2px;
            background: var(--white);
            transition: all 0.3s;
        }

        /* ============================================
           HERO SECTION
           ============================================ */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            background: var(--navy-deep);
        }

        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: 
                radial-gradient(ellipse at 20% 50%, rgba(196, 30, 58, 0.2) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 50%, rgba(26, 39, 68, 0.5) 0%, transparent 60%),
                radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.9) 0%, transparent 50%),
                radial-gradient(circle at 50% 20%, rgba(196, 30, 58, 0.08) 0%, transparent 40%);
            animation: heroGradientShift 8s ease-in-out infinite alternate;
        }

        @keyframes heroGradientShift {
            0% { opacity: 1; }
            100% { opacity: 0.7; }
        }

        /* Diagonal red stripe - enhanced */
        .hero::after {
            content: '';
            position: absolute;
            top: -50%;
            right: -10%;
            width: 200px;
            height: 250%;
            background: linear-gradient(180deg, transparent, rgba(196, 30, 58, 0.1), transparent);
            transform: rotate(15deg);
            animation: stripeGlow 4s ease-in-out infinite alternate;
        }

        @keyframes stripeGlow {
            0% { opacity: 0.3; }
            100% { opacity: 1; }
        }

        /* EMBER PARTICLES */
        .hero-embers {
            position: absolute;
            inset: 0;
            overflow: hidden;
            z-index: 1;
            pointer-events: none;
        }

        .ember {
            position: absolute;
            width: 3px;
            height: 3px;
            background: var(--red-ember);
            border-radius: 50%;
            box-shadow: 0 0 6px 2px rgba(255, 107, 53, 0.6), 0 0 12px 4px rgba(196, 30, 58, 0.3);
            animation: emberFloat linear infinite;
            opacity: 0;
        }

        @keyframes emberFloat {
            0% { transform: translateY(100vh) translateX(0) scale(1); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 0.8; }
            100% { transform: translateY(-20vh) translateX(var(--drift)) scale(0.2); opacity: 0; }
        }

        /* Wolf eyes watermark */
        .hero-wolf-eyes {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 600px;
            height: 200px;
            z-index: 0;
            opacity: 0;
            animation: wolfEyesReveal 3s ease-out 1.5s forwards;
        }

        @keyframes wolfEyesReveal {
            0% { opacity: 0; filter: blur(20px); }
            50% { opacity: 0.06; filter: blur(5px); }
            100% { opacity: 0.035; filter: blur(0px); }
        }

        .hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 120px 24px 80px;
        }

        .hero-badge {
            width: 200px;
            height: auto;
            margin: 0 auto 40px;
            animation: badgeEntrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            filter: drop-shadow(0 0 40px rgba(196, 30, 58, 0.4)) drop-shadow(0 0 80px rgba(196, 30, 58, 0.15));
        }

        @keyframes badgeEntrance {
            0% { transform: scale(0.8) rotate(-5deg); }
            60% { transform: scale(1.05) rotate(2deg); }
            100% { transform: scale(1) rotate(0deg); }
        }

        .hero-title {
            font-family: var(--font-display);
            font-size: clamp(3.5rem, 10vw, 8rem);
            letter-spacing: 8px;
            line-height: 0.95;
            color: var(--white);
            text-shadow: 0 0 60px rgba(196, 30, 58, 0.3), 0 4px 20px rgba(0,0,0,0.5);
            animation: titleSlam 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        }

        @keyframes titleSlam {
            0% { letter-spacing: 20px; }
            100% { letter-spacing: 8px; }
        }

        .hero-title .red { 
            color: var(--red-primary);
            text-shadow: 0 0 40px rgba(196, 30, 58, 0.5), 0 0 80px rgba(196, 30, 58, 0.2);
        }

        .hero-subtitle {
            font-family: var(--font-condensed);
            font-size: clamp(1rem, 2.5vw, 1.4rem);
            letter-spacing: 6px;
            text-transform: uppercase;
            color: var(--gold);
            margin-top: 20px;
            animation: fadeInUp 0.8s ease-out 0.5s both;
        }

        .hero-tagline {
            font-family: var(--font-body);
            font-weight: 300;
            font-size: 1.1rem;
            color: var(--white-dim);
            margin-top: 24px;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
            animation: fadeInUp 0.8s ease-out 0.7s both;
        }

        .hero-cta {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-top: 40px;
            padding: 14px 36px;
            background: var(--red-primary);
            color: var(--white);
            font-family: var(--font-condensed);
            font-weight: 700;
            font-size: 1rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            animation: fadeInUp 0.8s ease-out 0.9s both;
            position: relative;
            overflow: hidden;
        }

        .hero-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
            transform: translateX(-100%);
            transition: transform 0.6s;
        }

        .hero-cta:hover::before { transform: translateX(100%); }

        .hero-cta:hover {
            background: var(--red-glow);
            box-shadow: 0 0 30px rgba(255, 45, 85, 0.5), 0 0 60px rgba(255, 45, 85, 0.2);
            transform: translateY(-2px);
        }

        .hero-scroll-indicator {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            animation: bounce 2s infinite;
            z-index: 2;
        }

        .hero-scroll-indicator span {
            display: block;
            width: 2px;
            height: 40px;
            background: linear-gradient(to bottom, var(--red-primary), transparent);
            margin: 0 auto;
        }

        /* ============================================
           SHOP SECTION
           ============================================ */
        .shop-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 24px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .product-card {
            background: var(--bg-card);
            border: 1px solid rgba(255,255,255,0.06);
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;
        }

        .product-card:hover {
            border-color: rgba(196, 30, 58, 0.3);
            box-shadow: 0 8px 30px rgba(196, 30, 58, 0.12);
            transform: translateY(-4px);
        }

        .product-image {
            width: 100%;
            aspect-ratio: 1;
            background: linear-gradient(135deg, var(--navy-deep), var(--bg-card));
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }

        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .product-card:hover .product-image img { transform: scale(1.05); }

        .product-image-placeholder {
            font-size: 4rem;
            opacity: 0.15;
        }

        .product-info {
            padding: 20px;
        }

        .product-name {
            font-family: var(--font-heading);
            font-size: 1.1rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--white);
            margin-bottom: 6px;
        }

        .product-desc {
            font-size: 0.85rem;
            color: var(--white-dim);
            line-height: 1.6;
            margin-bottom: 14px;
        }

        .product-price {
            font-family: var(--font-display);
            font-size: 1.8rem;
            color: var(--red-primary);
            text-shadow: 0 0 15px rgba(196, 30, 58, 0.3);
            margin-bottom: 14px;
        }

        .product-sizes {
            display: flex;
            gap: 6px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }

        .size-btn {
            font-family: var(--font-condensed);
            font-weight: 600;
            font-size: 0.75rem;
            letter-spacing: 1px;
            padding: 6px 12px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.12);
            color: var(--white-dim);
            cursor: pointer;
            transition: all 0.3s;
        }

        .size-btn:hover { border-color: var(--red-primary); color: var(--white); }
        .size-btn.selected {
            background: var(--red-primary);
            border-color: var(--red-primary);
            color: var(--white);
            box-shadow: 0 0 10px rgba(196, 30, 58, 0.3);
        }

        .add-to-cart-btn {
            width: 100%;
            padding: 12px;
            font-family: var(--font-condensed);
            font-weight: 700;
            font-size: 0.85rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            background: transparent;
            border: 2px solid var(--red-primary);
            color: var(--white);
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }

        .add-to-cart-btn:hover {
            background: var(--red-primary);
            box-shadow: 0 0 20px rgba(196, 30, 58, 0.3);
        }

        .add-to-cart-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .add-to-cart-btn.added {
            background: #4ade80;
            border-color: #4ade80;
            color: #111;
        }

        /* Cart */
        .cart-floating {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 900;
            display: none;
        }

        .cart-floating.visible { display: block; }

        .cart-btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--red-primary);
            border: none;
            color: var(--white);
            font-size: 1.5rem;
            cursor: pointer;
            box-shadow: 0 4px 20px rgba(196, 30, 58, 0.4);
            transition: all 0.3s;
            position: relative;
        }

        .cart-btn:hover {
            background: var(--red-glow);
            transform: scale(1.1);
            box-shadow: 0 6px 30px rgba(255, 45, 85, 0.5);
        }

        .cart-count {
            position: absolute;
            top: -4px;
            right: -4px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--gold);
            color: #111;
            font-family: var(--font-condensed);
            font-weight: 700;
            font-size: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Cart modal */
        .cart-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(8px);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
            padding: 24px;
        }

        .cart-modal-overlay.active { opacity: 1; pointer-events: all; }

        .cart-modal {
            background: var(--bg-section);
            border: 1px solid rgba(196, 30, 58, 0.3);
            max-width: 500px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            transform: translateY(20px);
            transition: transform 0.3s;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        }

        .cart-modal-overlay.active .cart-modal { transform: translateY(0); }

        .cart-header {
            padding: 24px;
            border-bottom: 2px solid var(--red-primary);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .cart-header h3 {
            font-family: var(--font-display);
            font-size: 1.5rem;
            letter-spacing: 3px;
        }

        .cart-close {
            background: none;
            border: none;
            color: var(--white-dim);
            font-size: 1.5rem;
            cursor: pointer;
            transition: color 0.3s;
        }

        .cart-close:hover { color: var(--white); }

        .cart-items { padding: 16px 24px; }

        .cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }

        .cart-item-info h4 {
            font-family: var(--font-heading);
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .cart-item-info span {
            font-family: var(--font-condensed);
            font-size: 0.8rem;
            color: var(--white-dim);
        }

        .cart-item-price {
            font-family: var(--font-display);
            font-size: 1.2rem;
            color: var(--red-primary);
            white-space: nowrap;
        }

        .cart-item-remove {
            background: none;
            border: none;
            color: rgba(255,255,255,0.3);
            font-size: 1rem;
            cursor: pointer;
            padding: 4px 8px;
            margin-left: 12px;
        }

        .cart-item-remove:hover { color: var(--red-glow); }

        .cart-total {
            padding: 16px 24px;
            border-top: 1px solid rgba(255,255,255,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .cart-total-label {
            font-family: var(--font-condensed);
            font-weight: 600;
            font-size: 0.9rem;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .cart-total-price {
            font-family: var(--font-display);
            font-size: 2rem;
            color: var(--red-primary);
        }

        .cart-checkout { padding: 0 24px 24px; }

        .cart-form-group {
            margin-bottom: 12px;
        }

        .cart-form-group label {
            display: block;
            font-family: var(--font-condensed);
            font-size: 0.7rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--red-primary);
            margin-bottom: 4px;
        }

        .cart-form-group input {
            width: 100%;
            padding: 10px 14px;
            background: var(--bg-card);
            border: 1px solid rgba(255,255,255,0.1);
            color: var(--white);
            font-family: var(--font-body);
            font-size: 0.9rem;
            transition: border-color 0.3s;
        }

        .cart-form-group input:focus { outline: none; border-color: var(--red-primary); }

        .swish-info {
            background: rgba(196, 30, 58, 0.08);
            border: 1px solid rgba(196, 30, 58, 0.2);
            padding: 16px;
            margin: 16px 0;
            text-align: center;
        }

        .swish-info .swish-number {
            font-family: var(--font-display);
            font-size: 1.8rem;
            color: var(--gold);
            margin: 8px 0 4px;
            letter-spacing: 3px;
        }

        .swish-info p {
            font-size: 0.8rem;
            color: var(--white-dim);
            line-height: 1.6;
        }

        .checkout-btn {
            width: 100%;
            padding: 14px;
            font-family: var(--font-condensed);
            font-weight: 700;
            font-size: 0.95rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            background: var(--red-primary);
            border: none;
            color: var(--white);
            cursor: pointer;
            transition: all 0.3s;
        }

        .checkout-btn:hover {
            background: var(--red-glow);
            box-shadow: 0 0 20px rgba(255, 45, 85, 0.4);
        }

        .order-confirmation {
            padding: 40px 24px;
            text-align: center;
        }

        .order-confirmation h3 {
            font-family: var(--font-display);
            font-size: 1.8rem;
            letter-spacing: 3px;
            color: #4ade80;
            margin-bottom: 12px;
        }

        .order-confirmation p {
            color: var(--white-dim);
            line-height: 1.8;
            margin-bottom: 8px;
        }

        @media (max-width: 600px) {
            .shop-grid { grid-template-columns: 1fr; gap: 16px; }
            .cart-btn { width: 52px; height: 52px; font-size: 1.2rem; }
        }

        /* ============================================
           NYHETER (NEWS) SECTION
           ============================================ */
        .news-grid {
            display: grid;
            gap: 20px;
            max-width: 800px;
            margin: 0 auto;
        }

        .news-card {
            background: var(--bg-card);
            border: 1px solid rgba(255,255,255,0.06);
            padding: 28px 32px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .news-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--red-primary);
            transform: scaleY(0);
            transition: transform 0.4s;
        }

        .news-card:hover::before { transform: scaleY(1); }
        .news-card:hover {
            border-color: rgba(196, 30, 58, 0.2);
            box-shadow: 0 4px 20px rgba(196, 30, 58, 0.08);
        }

        .news-card.pinned {
            border-color: rgba(196, 30, 58, 0.2);
            background: linear-gradient(135deg, var(--bg-card) 0%, rgba(196, 30, 58, 0.04) 100%);
        }

        .news-card.pinned::before {
            transform: scaleY(1);
            background: var(--red-glow);
        }

        .news-pin {
            position: absolute;
            top: 12px;
            right: 16px;
            font-family: var(--font-condensed);
            font-size: 0.65rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--red-glow);
            background: rgba(255, 45, 85, 0.1);
            border: 1px solid rgba(255, 45, 85, 0.2);
            padding: 2px 10px;
            border-radius: 2px;
        }

        .news-date {
            font-family: var(--font-condensed);
            font-size: 0.75rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--red-primary);
            margin-bottom: 8px;
        }

        .news-title {
            font-family: var(--font-heading);
            font-size: 1.3rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--white);
            margin-bottom: 12px;
            line-height: 1.3;
        }

        .news-body {
            color: var(--white-dim);
            font-size: 0.95rem;
            line-height: 1.8;
        }

        .news-author {
            font-family: var(--font-condensed);
            font-size: 0.7rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.25);
            margin-top: 16px;
        }

        @media (max-width: 600px) {
            .news-card { padding: 20px 20px; }
            .news-title { font-size: 1.1rem; }
            .news-body { font-size: 0.9rem; }
        }

        /* ============================================
           DIAGONAL SECTION DIVIDERS
           ============================================ */
        .section-divider-diagonal {
            position: relative;
            height: 80px;
            overflow: hidden;
            z-index: 5;
        }

        .section-divider-diagonal::before {
            content: '';
            position: absolute;
            top: 0;
            left: -5%;
            width: 110%;
            height: 100%;
            background: var(--bg-dark);
            transform: skewY(-1.5deg);
            transform-origin: top left;
        }

        .section-divider-diagonal::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent 5%, var(--red-primary) 20%, var(--red-glow) 50%, var(--red-primary) 80%, transparent 95%);
            transform: skewY(-1.5deg);
            transform-origin: top left;
            box-shadow: 0 0 15px rgba(196, 30, 58, 0.5), 0 0 30px rgba(196, 30, 58, 0.2);
            animation: dividerPulse 3s ease-in-out infinite;
        }

        .section-divider-diagonal.flip::before {
            transform: skewY(1.5deg);
            transform-origin: top right;
        }

        .section-divider-diagonal.flip::after {
            transform: skewY(1.5deg);
            transform-origin: top right;
        }

        .section-divider-diagonal.from-darker::before {
            background: var(--bg-section);
        }

        @keyframes dividerPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }

        /* ============================================
           STORIES (INSIDE THE PACK)
           ============================================ */

        /* Hub: hero feature-kort */
        .stories-hero {
            position: relative;
            background: var(--bg-card);
            border: 1px solid rgba(255,255,255,0.06);
            min-height: 340px;
            margin-bottom: 16px;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
            display: grid;
            grid-template-columns: 1.2fr 1fr;
        }

        .stories-hero:hover {
            border-color: rgba(196, 30, 58, 0.4);
            box-shadow: 0 12px 50px rgba(196,30,58,0.18);
            transform: translateY(-3px);
        }

        .stories-hero-image {
            position: relative;
            background: linear-gradient(135deg, #1a1a1f 0%, #2a1518 50%, #1a1a1f 100%);
            overflow: hidden;
        }

        .stories-hero-image img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.9;
        }

        .stories-hero-image::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent 60%, var(--bg-card) 100%);
            pointer-events: none;
        }

        .stories-hero-content {
            padding: 36px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 16px;
        }

        .stories-category-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 12px;
            font-family: var(--font-condensed);
            font-size: 0.65rem;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            font-weight: 700;
            width: fit-content;
        }

        .stories-category-pill.interview {
            background: rgba(197, 165, 90, 0.12);
            color: var(--gold);
            border: 1px solid rgba(197, 165, 90, 0.35);
        }

        .stories-category-pill.quickfire {
            background: rgba(196, 30, 58, 0.15);
            color: var(--red-glow);
            border: 1px solid rgba(196, 30, 58, 0.35);
        }

        .stories-category-pill.portrait {
            background: rgba(122, 159, 212, 0.15);
            color: #7a9fd4;
            border: 1px solid rgba(122, 159, 212, 0.35);
        }

        .stories-category-pill.motm {
            background: rgba(74, 222, 128, 0.12);
            color: #4ade80;
            border: 1px solid rgba(74, 222, 128, 0.35);
        }

        .stories-category-pill.video {
            background: rgba(147, 51, 234, 0.15);
            color: #c084fc;
            border: 1px solid rgba(147, 51, 234, 0.35);
        }

        .stories-category-pill.matchreport {
            background: rgba(56, 189, 248, 0.12);
            color: #38bdf8;
            border: 1px solid rgba(56, 189, 248, 0.35);
        }

        .stories-category-pill.news {
            background: rgba(255,255,255,0.05);
            color: rgba(255,255,255,0.55);
            border: 1px solid rgba(255,255,255,0.1);
        }

        .stories-hero-title {
            font-family: var(--font-display);
            font-size: 2.4rem;
            font-weight: 800;
            letter-spacing: 2px;
            color: var(--white);
            line-height: 1.1;
        }

        .stories-hero-subtitle {
            font-family: var(--font-body);
            font-size: 1rem;
            color: var(--white-dim);
            line-height: 1.5;
            max-width: 460px;
        }

        .stories-hero-meta {
            display: flex;
            gap: 16px;
            align-items: center;
            font-family: var(--font-condensed);
            font-size: 0.72rem;
            letter-spacing: 1.5px;
            color: rgba(255,255,255,0.4);
            text-transform: uppercase;
            margin-top: 8px;
        }

        .stories-hero-meta .dot {
            width: 3px;
            height: 3px;
            background: rgba(255,255,255,0.3);
            border-radius: 50%;
        }

        /* Grid av mindre story-kort */
        .stories-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .story-card {
            background: var(--bg-card);
            border: 1px solid rgba(255,255,255,0.06);
            overflow: hidden;
            position: relative;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
            display: flex;
            flex-direction: column;
            isolation: isolate;
        }

        .story-card:hover {
            border-color: rgba(196, 30, 58, 0.35);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.3);
        }

        .story-card::before {
            content: '';
            position: absolute;
            left: 0; top: 0; bottom: 0;
            width: 3px;
            background: var(--red-primary);
            transform: scaleY(0);
            transition: transform 0.3s;
            transform-origin: center;
            z-index: 3;
        }

        .story-card:hover::before { transform: scaleY(1); }

        .story-card-image {
            position: relative;
            height: 180px;
            background: linear-gradient(135deg, #1a1a1f, #2a1518);
            overflow: hidden;
            width: 100%;
        }

        .story-card-image img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.85;
            transition: transform 0.5s;
        }

        .story-card:hover .story-card-image img {
            transform: scale(1.05);
            opacity: 1;
        }

        .story-card-image::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.4));
            pointer-events: none;
        }

        /* Placeholder när det saknas bild */
        .story-card-image.empty {
            display: flex;
            align-items: center;
            justify-content: center;
            background:
                radial-gradient(ellipse at top left, rgba(196,30,58,0.12), transparent 60%),
                linear-gradient(135deg, #1a1a1f, #2a1518);
        }

        .story-card-image.empty::before {
            content: '🐺';
            font-size: 3rem;
            opacity: 0.15;
        }

        .story-card-pill-wrap {
            position: absolute;
            top: 12px;
            left: 12px;
            z-index: 3;
        }

        .story-card-body {
            padding: 20px 22px 22px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            flex: 1;
        }

        .story-card-title {
            font-family: var(--font-heading);
            font-size: 1.05rem;
            font-weight: 700;
            letter-spacing: 1px;
            color: var(--white);
            line-height: 1.25;
            text-transform: uppercase;
        }

        .story-card-subtitle {
            font-family: var(--font-body);
            font-size: 0.85rem;
            color: var(--white-dim);
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .story-card-meta {
            display: flex;
            gap: 10px;
            align-items: center;
            font-family: var(--font-condensed);
            font-size: 0.62rem;
            letter-spacing: 1.5px;
            color: rgba(255,255,255,0.4);
            text-transform: uppercase;
            margin-top: auto;
            padding-top: 8px;
        }

        .story-card-meta .dot {
            width: 3px;
            height: 3px;
            background: rgba(255,255,255,0.3);
            border-radius: 50%;
        }

        /* Tom state */
        .stories-empty {
            text-align: center;
            padding: 80px 20px;
            color: var(--white-dim);
            font-family: var(--font-body);
        }

        .stories-empty-icon {
            font-size: 3rem;
            opacity: 0.2;
            margin-bottom: 20px;
        }

        /* ============ STORY DETAIL MODAL / VIEW ============ */
        .story-view-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.96);
            backdrop-filter: blur(14px);
            z-index: 3000;
            overflow-y: auto;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }

        .story-view-overlay.active {
            opacity: 1;
            pointer-events: all;
        }

        .story-view {
            max-width: 780px;
            margin: 0 auto;
            padding: 0;
            min-height: 100vh;
        }

        .story-view-close {
            position: sticky;
            top: 14px;
            margin-left: auto;
            margin-right: 14px;
            margin-top: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: 50%;
            color: var(--white);
            font-size: 1.5rem;
            cursor: pointer;
            z-index: 100;
            float: right;
            line-height: 1;
            transition: all 0.25s;
        }

        .story-view-close:hover {
            border-color: var(--red-primary);
            background: rgba(196,30,58,0.3);
        }

        /* Progress bar */
        .story-progress {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--red-primary), var(--red-glow));
            width: 0%;
            z-index: 3001;
            transition: width 0.15s;
            box-shadow: 0 0 8px rgba(196,30,58,0.5);
        }

        .story-hero {
            position: relative;
            min-height: 320px;
            padding: 80px 40px 60px;
            background: linear-gradient(135deg, #1a1a1f, #2a1518);
            overflow: hidden;
            border-bottom: 2px solid var(--red-primary);
        }

        .story-hero-image {
            position: absolute;
            inset: 0;
            z-index: 0;
        }

        .story-hero-image img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.35;
        }

        .story-hero-image::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.85) 100%);
        }

        .story-hero-content {
            position: relative;
            z-index: 2;
            max-width: 700px;
            margin: 0 auto;
        }

        .story-hero-title {
            font-family: var(--font-display);
            font-size: 3rem;
            font-weight: 800;
            letter-spacing: 2px;
            color: var(--white);
            line-height: 1.05;
            margin: 16px 0;
            text-shadow: 0 2px 12px rgba(0,0,0,0.5);
        }

        .story-hero-subtitle {
            font-family: var(--font-body);
            font-size: 1.15rem;
            color: rgba(255,255,255,0.8);
            line-height: 1.5;
            max-width: 620px;
            font-weight: 300;
        }

        .story-hero-meta {
            display: flex;
            gap: 14px;
            align-items: center;
            font-family: var(--font-condensed);
            font-size: 0.78rem;
            letter-spacing: 2px;
            color: rgba(255,255,255,0.55);
            text-transform: uppercase;
            margin-top: 24px;
            flex-wrap: wrap;
        }

        .story-hero-meta .dot {
            width: 3px;
            height: 3px;
            background: rgba(255,255,255,0.35);
            border-radius: 50%;
        }

        /* Spelarkort i meta (liten klickbar) */
        .story-player-ref {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 6px 14px 6px 6px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.12);
            transition: all 0.2s;
            cursor: pointer;
            text-decoration: none;
        }

        .story-player-ref:hover {
            background: rgba(196,30,58,0.12);
            border-color: rgba(196,30,58,0.4);
        }

        .story-player-ref-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--red-primary), var(--red-dark));
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            font-size: 0.8rem;
            font-weight: 700;
            color: #fff;
        }

        .story-player-ref-name {
            font-family: var(--font-condensed);
            font-size: 0.75rem;
            letter-spacing: 1.5px;
            color: var(--white);
            text-transform: uppercase;
        }

        .story-body {
            max-width: 680px;
            margin: 0 auto;
            padding: 60px 40px 80px;
            font-family: var(--font-body);
            font-size: 1.1rem;
            line-height: 1.75;
            color: #d8d8de;
        }

        .story-body p {
            margin-bottom: 1.5em;
        }

        /* Drop cap på första stycket */
        .story-body > p:first-child::first-letter {
            font-family: var(--font-display);
            font-size: 4.5rem;
            line-height: 0.9;
            float: left;
            margin: 8px 12px 0 0;
            color: var(--red-primary);
            font-weight: 800;
        }

        .story-body h2, .story-body h3 {
            font-family: var(--font-heading);
            color: var(--white);
            margin: 2em 0 0.6em;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .story-body h2 { font-size: 1.4rem; }
        .story-body h3 { font-size: 1.15rem; }

        .story-body strong {
            color: var(--white);
            font-weight: 600;
            display: block;
            font-family: var(--font-heading);
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--red-glow);
            margin-top: 1.5em;
            margin-bottom: 0.3em;
        }

        .story-body blockquote {
            border-left: 4px solid var(--gold);
            background: linear-gradient(90deg, rgba(197,165,90,0.08), transparent);
            padding: 20px 28px;
            margin: 2em 0;
            font-family: var(--font-heading);
            font-size: 1.3rem;
            font-style: italic;
            color: var(--gold-light);
            line-height: 1.4;
            position: relative;
        }

        .story-body blockquote::before {
            content: '❝';
            position: absolute;
            top: -8px;
            left: 16px;
            font-size: 3rem;
            color: var(--gold);
            opacity: 0.5;
            line-height: 1;
        }

        .story-body blockquote em {
            display: block;
            font-style: normal;
            font-size: 0.75rem;
            letter-spacing: 2px;
            color: rgba(197,165,90,0.6);
            margin-top: 8px;
            font-family: var(--font-condensed);
            text-transform: uppercase;
        }

        .story-body a {
            color: var(--red-glow);
            text-decoration: underline;
            text-underline-offset: 3px;
            transition: color 0.2s;
        }

        .story-body a:hover { color: var(--white); }

        .story-body img {
            max-width: 100%;
            height: auto;
            margin: 2em auto;
            display: block;
            border: 1px solid rgba(255,255,255,0.08);
        }

        .story-footer {
            max-width: 680px;
            margin: 0 auto;
            padding: 40px 40px 80px;
            border-top: 1px solid rgba(255,255,255,0.08);
        }

        .story-footer-share {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 30px;
        }

        .story-share-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.1);
            color: var(--white-dim);
            font-family: var(--font-condensed);
            font-size: 0.72rem;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
        }

        .story-share-btn:hover {
            border-color: rgba(196,30,58,0.35);
            background: rgba(196,30,58,0.08);
            color: var(--white);
        }

        /* Mobile */
        @media (max-width: 900px) {
            .stories-hero { grid-template-columns: 1fr; }
            .stories-hero-image { min-height: 220px; }
            .stories-hero-image::after {
                background: linear-gradient(180deg, transparent 40%, var(--bg-card) 100%);
            }
            .stories-hero-title { font-size: 2rem; }
            .stories-grid { grid-template-columns: 1fr; }
        }

        @media (max-width: 600px) {
            .story-hero { padding: 60px 20px 40px; min-height: 260px; }
            .story-hero-title { font-size: 2.1rem; letter-spacing: 1.5px; }
            .story-hero-subtitle { font-size: 1rem; }
            .story-body { padding: 40px 24px 60px; font-size: 1rem; line-height: 1.7; }
            .story-body > p:first-child::first-letter { font-size: 3.5rem; }
            .story-body blockquote { font-size: 1.1rem; padding: 16px 20px; }
            .story-footer { padding: 30px 24px 60px; }
            .stories-hero-content { padding: 24px; }
            .stories-hero-title { font-size: 1.6rem; }
            .stories-hero-subtitle { font-size: 0.9rem; }
            .story-card-image { height: 160px; }
        }

        /* ============================================
           COUNTDOWN TIMER IN TICKER
           ============================================ */
        .ticker-countdown {
            display: inline-flex;
            gap: 6px;
            align-items: center;
        }

        .ticker-countdown-unit {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            line-height: 1;
        }

        .ticker-countdown-number {
            font-family: var(--font-display);
            font-size: 1.1rem;
            letter-spacing: 1px;
        }

        .ticker-countdown-label {
            font-size: 0.5rem;
            letter-spacing: 1px;
            opacity: 0.7;
        }

        .ticker-countdown-sep {
            font-family: var(--font-display);
            font-size: 1rem;
            opacity: 0.5;
            animation: colonBlink 1s step-end infinite;
        }

        @keyframes colonBlink {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 0; }
        }

        /* ============================================
           SECTION SHARED STYLES
           ============================================ */
        .section {
            padding: 100px 0;
            position: relative;
        }

        .section-dark { background: var(--bg-dark); }
        .section-darker { background: var(--bg-section); }

        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-label {
            font-family: var(--font-condensed);
            font-weight: 600;
            font-size: 0.85rem;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--red-primary);
            margin-bottom: 12px;
        }

        .section-title {
            font-family: var(--font-display);
            font-size: clamp(2.5rem, 5vw, 4rem);
            letter-spacing: 4px;
            color: var(--white);
        }

        .section-divider {
            width: 60px;
            height: 3px;
            background: var(--red-primary);
            margin: 20px auto 0;
            box-shadow: 0 0 10px rgba(196, 30, 58, 0.5);
            animation: dividerPulse 3s ease-in-out infinite;
        }

        /* ============================================
           MATCH FILTERS (month tabs + team filter)
           ============================================ */
        .match-filters {
            max-width: 800px;
            margin: 0 auto 28px;
        }

        .match-month-tabs {
            display: flex;
            gap: 0;
            flex-wrap: wrap;
            margin-bottom: 12px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }

        .month-tab {
            font-family: var(--font-condensed);
            font-weight: 600;
            font-size: 0.8rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 10px 18px;
            background: transparent;
            color: var(--white-dim);
            border: none;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.3s;
            position: relative;
        }

        .month-tab:hover { color: var(--white); }
        .month-tab.active {
            color: var(--white);
            border-bottom-color: var(--red-primary);
        }

        .month-tab .month-count {
            font-size: 0.6rem;
            color: var(--red-primary);
            margin-left: 4px;
            opacity: 0.7;
        }

        .match-team-filters {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .team-filter-btn {
            font-family: var(--font-condensed);
            font-weight: 600;
            font-size: 0.7rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 5px 14px;
            background: rgba(255,255,255,0.04);
            color: var(--white-dim);
            border: 1px solid rgba(255,255,255,0.08);
            cursor: pointer;
            transition: all 0.3s;
            border-radius: 2px;
        }

        .team-filter-btn:hover { border-color: rgba(255,255,255,0.2); color: var(--white); }
        .team-filter-btn.active {
            background: rgba(196, 30, 58, 0.15);
            border-color: rgba(196, 30, 58, 0.4);
            color: var(--white);
        }

        @media (max-width: 600px) {
            .month-tab { padding: 8px 12px; font-size: 0.7rem; letter-spacing: 1px; }
            .team-filter-btn { padding: 4px 10px; font-size: 0.65rem; }
        }

        .match-venue {
            font-family: var(--font-body);
            font-size: 0.75rem;
            color: rgba(255,255,255,0.35);
            margin-top: 4px;
        }

        .match-team-badge {
            font-family: var(--font-condensed);
            font-size: 0.6rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 2px 8px;
            border-radius: 2px;
            display: inline-block;
            margin-top: 4px;
        }

        .badge-copco { background: rgba(196, 30, 58, 0.2); color: var(--red-glow); border: 1px solid rgba(196, 30, 58, 0.3); }
        .badge-atlas { background: rgba(197, 165, 90, 0.15); color: var(--gold-light); border: 1px solid rgba(197, 165, 90, 0.3); }
        .badge-berget { background: rgba(42, 63, 102, 0.3); color: #7a9fd4; border: 1px solid rgba(42, 63, 102, 0.5); }
        .badge-f2013 { background: rgba(255,255,255,0.08); color: var(--white-dim); border: 1px solid rgba(255,255,255,0.15); }

        .match-month-header {
            font-family: var(--font-display);
            font-size: 1.4rem;
            letter-spacing: 4px;
            color: var(--white-dim);
            margin-bottom: 16px;
            margin-top: 8px;
        }

        /* ============================================
           SPELARE (PLAYERS) SECTION
           ============================================ */
        .players-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 12px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .player-card {
            background: var(--bg-card);
            border: 1px solid rgba(255,255,255,0.06);
            padding: 20px 12px;
            text-align: center;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .player-card:hover {
            border-color: rgba(196, 30, 58, 0.3);
            transform: translateY(-4px);
            box-shadow: 0 8px 25px rgba(196, 30, 58, 0.15), 0 0 0 1px rgba(196, 30, 58, 0.1);
        }

        .player-photo {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: rgba(255,255,255,0.06);
            margin: 0 auto 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 2px solid rgba(196, 30, 58, 0.2);
            transition: border-color 0.4s, box-shadow 0.4s;
        }

        .player-card:hover .player-photo {
            border-color: rgba(196, 30, 58, 0.5);
            box-shadow: 0 0 15px rgba(196, 30, 58, 0.3);
        }

        .player-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .player-photo-placeholder {
            font-size: 1.3rem;
            opacity: 0.3;
        }

        .player-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--red-primary), var(--red-glow), var(--red-primary), transparent);
            transform: scaleX(0);
            transition: transform 0.4s;
        }

        .player-card:hover::before { transform: scaleX(1); }

        .player-number {
            font-family: var(--font-display);
            font-size: 2.2rem;
            color: var(--red-primary);
            line-height: 1;
            opacity: 0.9;
            transition: text-shadow 0.3s;
        }

        .player-card:hover .player-number {
            text-shadow: 0 0 20px rgba(196, 30, 58, 0.4);
        }

        .player-name {
            font-family: var(--font-condensed);
            font-weight: 600;
            font-size: 0.85rem;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--white);
            margin-top: 8px;
            line-height: 1.3;
        }

        @media (max-width: 600px) {
            .players-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 8px;
            }
            .player-card { padding: 14px 8px; }
            .player-photo { width: 50px; height: 50px; margin-bottom: 8px; }
            .player-number { font-size: 1.4rem; }
            .player-name { font-size: 0.65rem; }
        }

        /* ============================================
           MATCH DETAILS MODAL
           ============================================ */
        .match-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.92);
            backdrop-filter: blur(12px);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
            padding: 24px;
        }
        .match-modal-overlay.active { opacity: 1; pointer-events: all; }

        .match-modal {
            background: var(--bg-section);
            border: 1px solid rgba(196, 30, 58, 0.3);
            max-width: 620px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            overflow-x: hidden;
            transform: translateY(20px);
            transition: transform 0.3s;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        }
        .match-modal-overlay.active .match-modal { transform: translateY(0); }

        .match-modal-header {
            padding: 36px 32px 28px;
            border-bottom: 2px solid var(--red-primary);
            text-align: center;
            position: relative;
            background: linear-gradient(180deg, rgba(196,30,58,0.04), transparent);
        }

        .match-modal-close {
            position: sticky;
            top: 12px;
            margin-left: auto;
            margin-right: 12px;
            margin-top: 12px;
            margin-bottom: -48px;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: 50%;
            width: 38px;
            height: 38px;
            min-width: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.25s;
            line-height: 1;
            z-index: 50;
            float: right;
        }
        .match-modal-close:hover { color: var(--white); border-color: var(--red-primary); background: rgba(196,30,58,0.3); }
        .match-modal-close:active { transform: scale(0.92); }

        .match-modal-teams {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 24px;
            align-items: center;
        }

        .match-modal-team-col {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .match-modal-team-col.home { align-items: flex-end; padding-right: 4px; }
        .match-modal-team-col.away { align-items: flex-start; padding-left: 4px; }

        /* Stor lagbadge i header (rund, gradient) */
        .match-modal-shield {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            font-size: 2.2rem;
            font-weight: 800;
            color: #fff;
            text-shadow: 0 2px 6px rgba(0,0,0,0.5);
            box-shadow: 0 6px 20px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.2);
            flex-shrink: 0;
        }
        .match-modal-shield.copco { background: linear-gradient(135deg, #c41e3a, #8f1628); }
        .match-modal-shield.atlas { background: linear-gradient(135deg, #c5a55a, #8a7340); }
        .match-modal-shield.berget { background: linear-gradient(135deg, #7a9fd4, #4d6a94); }
        .match-modal-shield.neutral {
            background: linear-gradient(135deg, #3a3a42, #1f1f25);
            color: rgba(255,255,255,0.7);
            box-shadow: 0 6px 16px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.1);
        }

        .match-modal-team-name {
            font-family: var(--font-heading);
            font-size: 1rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--white);
            line-height: 1.25;
            max-width: 160px;
        }
        .match-modal-team-col.home .match-modal-team-name { text-align: right; }
        .match-modal-team-col.away .match-modal-team-name { text-align: left; }

        .match-modal-team-side {
            font-family: var(--font-condensed);
            font-size: 0.55rem;
            letter-spacing: 3px;
            color: rgba(255,255,255,0.3);
            text-transform: uppercase;
            font-weight: 600;
        }

        .match-modal-score-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }

        .match-modal-score {
            font-family: var(--font-display);
            font-size: 3rem;
            color: var(--white);
            letter-spacing: 6px;
            white-space: nowrap;
            font-weight: 700;
            line-height: 1;
        }
        .match-modal-score.result-win { color: #4ade80; text-shadow: 0 2px 20px rgba(74,222,128,0.35); }
        .match-modal-score.result-loss { color: var(--white); opacity: 0.92; }
        .match-modal-score.result-draw { color: var(--gold); text-shadow: 0 2px 20px rgba(197,165,90,0.25); }

        .match-modal-vs {
            font-family: var(--font-display);
            font-size: 2.2rem;
            color: rgba(255,255,255,0.35);
            letter-spacing: 6px;
            line-height: 1;
            font-weight: 700;
        }

        .match-modal-meta {
            margin-top: 18px;
            font-family: var(--font-condensed);
            font-size: 0.78rem;
            letter-spacing: 2px;
            color: var(--white-dim);
            text-transform: uppercase;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .match-modal-meta .meta-dot {
            width: 3px;
            height: 3px;
            background: rgba(255,255,255,0.3);
            border-radius: 50%;
        }

        .match-modal-section {
            padding: 22px 32px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .match-modal-section:last-child { border-bottom: none; }
        .match-modal-section h4 {
            font-family: var(--font-condensed);
            font-weight: 700;
            font-size: 0.75rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--red-primary);
            margin-bottom: 16px;
        }

        /* ============ MATCHTIDSLINJE ============ */
        .match-timeline {
            position: relative;
            height: 56px;
            margin: 10px 0 22px;
            background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.2));
            border: 1px solid rgba(255,255,255,0.04);
        }

        /* Halvtidslinje */
        .match-timeline::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 8px;
            bottom: 8px;
            width: 1px;
            background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.2) 0, rgba(255,255,255,0.2) 3px, transparent 3px, transparent 6px);
        }

        /* Centrum-linje */
        .match-timeline::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            height: 1px;
            background: rgba(255,255,255,0.08);
            transform: translateY(-0.5px);
        }

        .match-timeline-labels {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 6px;
            pointer-events: none;
        }

        .match-timeline-label {
            font-family: var(--font-condensed);
            font-size: 0.55rem;
            letter-spacing: 1.5px;
            color: rgba(255,255,255,0.25);
            text-transform: uppercase;
        }

        .match-timeline-label.middle {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        .match-timeline-goal {
            position: absolute;
            transform: translate(-50%, -50%);
            cursor: pointer;
            z-index: 2;
        }

        .match-timeline-goal.our { top: 30%; }
        .match-timeline-goal.their { top: 70%; }

        .match-timeline-goal-dot {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            border: 2px solid var(--bg-section);
            transition: transform 0.2s;
        }

        .match-timeline-goal.our .match-timeline-goal-dot {
            background: #4ade80;
            color: #0a0a0a;
            box-shadow: 0 0 12px rgba(74,222,128,0.5);
        }

        .match-timeline-goal.their .match-timeline-goal-dot {
            background: rgba(255,255,255,0.3);
            color: rgba(255,255,255,0.8);
        }

        .match-timeline-goal:hover .match-timeline-goal-dot {
            transform: scale(1.3);
        }

        .match-timeline-goal-tooltip {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: calc(100% + 8px);
            background: rgba(0,0,0,0.95);
            border: 1px solid var(--red-primary);
            padding: 6px 10px;
            font-family: var(--font-condensed);
            font-size: 0.7rem;
            letter-spacing: 1px;
            color: var(--white);
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s;
            z-index: 10;
        }

        .match-timeline-goal:hover .match-timeline-goal-tooltip {
            opacity: 1;
        }

        /* ============ LEDARE-CHIPS ============ */
        .match-leaders-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .match-leader-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px 6px 6px;
            background: rgba(197,165,90,0.08);
            border: 1px solid rgba(197,165,90,0.25);
            transition: all 0.2s;
            cursor: pointer;
        }

        .match-leader-chip:hover {
            background: rgba(197,165,90,0.15);
            border-color: rgba(197,165,90,0.5);
        }

        .match-leader-chip-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: linear-gradient(135deg, #c5a55a, #8a7340);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            font-size: 0.8rem;
            font-weight: 700;
            color: #1a1a1a;
            flex-shrink: 0;
        }

        .match-leader-chip-name {
            font-family: var(--font-condensed);
            font-size: 0.78rem;
            letter-spacing: 1.5px;
            color: var(--gold-light, #c5a55a);
            text-transform: uppercase;
            font-weight: 600;
        }

        /* ============ LÄS MATCHREPORTAGE-KNAPP (i matchmodal) ============ */
        .match-modal-story-link {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px 20px;
            background: rgba(56, 189, 248, 0.08);
            border: 1px solid rgba(56, 189, 248, 0.3);
            color: var(--white);
            text-decoration: none;
            transition: all 0.2s;
            cursor: pointer;
        }

        .match-modal-story-link:hover {
            background: rgba(56, 189, 248, 0.15);
            border-color: rgba(56, 189, 248, 0.5);
            transform: translateY(-1px);
        }

        .match-modal-story-link-icon {
            font-size: 1.5rem;
            line-height: 1;
            flex-shrink: 0;
        }

        .match-modal-story-link-content {
            flex: 1;
            min-width: 0;
        }

        .match-modal-story-link-label {
            font-family: var(--font-condensed);
            font-size: 0.7rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #38bdf8;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .match-modal-story-link-title {
            font-family: var(--font-condensed);
            font-size: 0.95rem;
            letter-spacing: 0.5px;
            color: var(--white);
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .match-modal-story-link-arrow {
            color: #38bdf8;
            font-size: 1.2rem;
            font-weight: 700;
            flex-shrink: 0;
        }

        /* ============ STATS-SAMMANFATTNING ============ */
        .match-stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 10px;
            margin-top: 8px;
        }

        .match-stat-box {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.05);
            padding: 12px;
            text-align: center;
        }

        .match-stat-box-value {
            font-family: var(--font-display);
            font-size: 1.5rem;
            color: var(--white);
            line-height: 1;
            font-weight: 700;
        }

        .match-stat-box-label {
            font-family: var(--font-condensed);
            font-size: 0.6rem;
            letter-spacing: 2px;
            color: rgba(255,255,255,0.5);
            text-transform: uppercase;
            margin-top: 4px;
        }

        .match-scorers-list { display: flex; flex-direction: column; gap: 8px; }
        .match-scorer-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 12px;
            background: rgba(255,255,255,0.03);
            border-left: 3px solid var(--red-primary);
            transition: background 0.3s;
        }
        .match-scorer-row.goal-home { border-left-color: var(--white-dim); }
        .match-scorer-row.goal-away-clickable { cursor: pointer; }
        .match-scorer-row.goal-away-clickable:hover { background: rgba(196,30,58,0.08); }
        .match-scorer-minute {
            font-family: var(--font-display);
            font-size: 1.1rem;
            color: var(--gold);
            min-width: 40px;
        }
        .match-scorer-score {
            font-family: var(--font-display);
            font-size: 1rem;
            color: var(--white);
            min-width: 44px;
            padding: 2px 8px;
            background: rgba(196,30,58,0.12);
            border: 1px solid rgba(196,30,58,0.3);
            text-align: center;
            letter-spacing: 1px;
        }
        .match-scorer-icon { font-size: 1.1rem; }
        .match-scorer-name {
            flex: 1;
            font-family: var(--font-body);
            font-size: 0.95rem;
            color: var(--white);
        }
        .match-scorer-name .scorer-num {
            font-family: var(--font-condensed);
            font-size: 0.75rem;
            color: var(--red-primary);
            margin-right: 6px;
        }
        .match-scorer-note {
            font-family: var(--font-condensed);
            font-size: 0.7rem;
            color: var(--white-dim);
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .match-lineup-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 8px;
        }

        /* Awards (captain, MOTM) */
        .awards-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .award-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            background: rgba(197,165,90,0.08);
            border-left: 3px solid var(--gold);
            cursor: pointer;
            transition: background 0.3s;
        }
        .award-row:hover { background: rgba(197,165,90,0.15); }
        .award-icon { font-size: 1.3rem; min-width: 30px; }
        .award-label {
            font-family: var(--font-condensed);
            font-size: 0.75rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--gold);
            min-width: 140px;
        }
        .award-player {
            font-family: var(--font-body);
            font-size: 0.95rem;
            color: var(--white);
        }
        @media (max-width: 500px) {
            .award-label { min-width: auto; font-size: 0.65rem; }
            .award-row { gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
        }
        .match-lineup-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 8px;
        }

        .match-lineup-player {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
            border: 1px solid rgba(255,255,255,0.06);
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .match-lineup-player::before {
            content: '';
            position: absolute;
            left: 0; top: 0; bottom: 0;
            width: 3px;
            background: var(--red-primary);
            transform: scaleY(0);
            transition: transform 0.25s;
            transform-origin: center;
        }

        .match-lineup-player:hover {
            background: linear-gradient(135deg, rgba(196,30,58,0.1), rgba(196,30,58,0.02));
            border-color: rgba(196,30,58,0.4);
            transform: translateX(2px);
            box-shadow: 0 4px 16px rgba(196,30,58,0.12);
        }
        .match-lineup-player:hover::before { transform: scaleY(1); }

        /* Kaptens- och MOTM-markering */
        .match-lineup-player.is-captain {
            border-color: rgba(197,165,90,0.4);
            background: linear-gradient(135deg, rgba(197,165,90,0.08), rgba(197,165,90,0.01));
        }
        .match-lineup-player.is-captain::before { background: var(--gold); transform: scaleY(1); }

        .match-lineup-player.is-motm {
            border-color: rgba(197,165,90,0.6);
            background: linear-gradient(135deg, rgba(197,165,90,0.15), rgba(197,165,90,0.02));
            box-shadow: 0 0 0 1px rgba(197,165,90,0.2), 0 4px 16px rgba(197,165,90,0.1);
        }
        .match-lineup-player.is-motm::before { background: linear-gradient(180deg, var(--gold), #e4c87a); transform: scaleY(1); }

        /* Rund spelar-avatar som spelarkorten */
        .match-lineup-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--red-primary), var(--red-dark));
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            font-size: 0.95rem;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
            box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 2px rgba(255,255,255,0.2);
            flex-shrink: 0;
        }

        .match-lineup-player.is-captain .match-lineup-avatar,
        .match-lineup-player.is-motm .match-lineup-avatar {
            background: linear-gradient(135deg, var(--gold), #8a7340);
            color: #1a1a1a;
        }

        .match-lineup-player.guest .match-lineup-avatar {
            background: linear-gradient(135deg, #7a9fd4, #4d6a94);
            font-size: 0.68rem;
            letter-spacing: 0.5px;
        }

        .match-lineup-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }

        .match-lineup-name {
            font-family: var(--font-body);
            font-size: 0.88rem;
            color: var(--white);
            line-height: 1.2;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .match-lineup-pos {
            font-family: var(--font-condensed);
            font-size: 0.58rem;
            letter-spacing: 1.5px;
            color: rgba(255,255,255,0.4);
            text-transform: uppercase;
        }

        .match-lineup-player.is-motm .match-lineup-pos,
        .match-lineup-player.is-captain .match-lineup-pos {
            color: rgba(197,165,90,0.7);
        }

        .match-lineup-num {
            /* gamla klass – behåll bakåtkompatibilitet */
            font-family: var(--font-display);
            font-size: 1.1rem;
            color: var(--red-primary);
            min-width: 26px;
        }

        /* Badge-rutan till höger */
        .lineup-player-badge {
            margin-left: auto;
            display: flex;
            gap: 4px;
            align-items: center;
            flex-shrink: 0;
        }

        .lineup-player-badge .badge-c {
            background: var(--gold);
            color: #1a1a1a;
            font-family: var(--font-condensed);
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 1px;
            border-radius: 50%;
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 6px rgba(197,165,90,0.4);
        }

        .lineup-player-badge .badge-motm {
            color: var(--gold);
            font-size: 1rem;
            text-shadow: 0 0 10px rgba(197,165,90,0.6);
        }

        /* Sektionsrubrik med count */
        .match-lineup-count {
            display: inline-block;
            margin-left: 8px;
            font-family: var(--font-condensed);
            font-size: 0.65rem;
            letter-spacing: 1.5px;
            color: rgba(255,255,255,0.35);
            padding: 2px 8px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08);
            vertical-align: middle;
        }

        /* Football pitch formation */
        .pitch-container {
            width: 100%;
            max-width: 420px;
            margin: 0 auto;
            aspect-ratio: 3 / 4;
            background: linear-gradient(180deg, rgba(34,80,50,0.85), rgba(20,54,32,0.85));
            border: 2px solid rgba(255,255,255,0.2);
            border-radius: 4px;
            position: relative;
            padding: 12px;
            box-shadow: inset 0 0 30px rgba(0,0,0,0.4);
        }
        .pitch-container::before,
        .pitch-container::after {
            content: '';
            position: absolute;
            left: 12px;
            right: 12px;
            height: 20%;
            border: 2px solid rgba(255,255,255,0.2);
            border-top: none;
        }
        .pitch-container::before { top: 12px; border-bottom: 2px solid rgba(255,255,255,0.2); border-left: 2px solid rgba(255,255,255,0.2); border-right: 2px solid rgba(255,255,255,0.2); }
        .pitch-container::after { bottom: 12px; border-bottom: 2px solid rgba(255,255,255,0.2); border-left: 2px solid rgba(255,255,255,0.2); border-right: 2px solid rgba(255,255,255,0.2); border-top: 2px solid rgba(255,255,255,0.2); }

        .pitch-centerline {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 2px;
            background: rgba(255,255,255,0.2);
        }
        .pitch-centercircle {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 70px;
            height: 70px;
            border: 2px solid rgba(255,255,255,0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }
        .pitch-rows {
            position: relative;
            z-index: 2;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        .pitch-row {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .pitch-player {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .pitch-player:hover { transform: scale(1.08); }
        .pitch-player-circle {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--red-primary);
            border: 2px solid var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            font-size: 1.1rem;
            color: var(--white);
            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
            position: relative;
        }
        .captain-badge {
            position: absolute;
            top: -6px;
            right: -6px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--gold);
            color: #1a1a1a;
            font-family: var(--font-condensed);
            font-size: 0.7rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #1a1a1a;
            box-shadow: 0 0 6px rgba(197,165,90,0.5);
        }
        .pitch-player.mv .pitch-player-circle {
            background: var(--gold);
            color: #1a1a1a;
        }
        .pitch-player-name {
            font-family: var(--font-condensed);
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            color: var(--white);
            background: rgba(0,0,0,0.6);
            padding: 2px 6px;
            text-align: center;
            max-width: 85px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        @media (max-width: 500px) {
            .pitch-container { max-width: 100%; }
            .pitch-player-circle { width: 36px; height: 36px; font-size: 0.9rem; }
            .pitch-player-name { font-size: 0.6rem; max-width: 70px; }
        }

        .match-details-btn {
            margin-top: 10px;
            font-family: var(--font-condensed);
            font-weight: 600;
            font-size: 0.75rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 6px 14px;
            background: rgba(196, 30, 58, 0.08);
            color: var(--red-glow);
            border: 1px solid rgba(196, 30, 58, 0.4);
            cursor: pointer;
            transition: all 0.3s;
        }
        .match-details-btn:hover {
            background: var(--red-primary);
            color: var(--white);
            border-color: var(--red-primary);
        }

        @media (max-width: 600px) {
            .match-modal-overlay {
                padding: 12px;
                padding-top: max(40px, env(safe-area-inset-top, 20px));
                align-items: flex-start;
            }
            .match-modal { max-height: calc(100vh - 60px); }
            .match-modal-header { padding: 22px 16px 18px; }

            /* Vertikal stack på mobil */
            .match-modal-teams {
                grid-template-columns: 1fr;
                gap: 14px;
            }

            .match-modal-team-col {
                flex-direction: row;
                align-items: center !important;
                gap: 14px;
                padding: 0 !important;
            }

            .match-modal-team-col.home,
            .match-modal-team-col.away {
                padding: 0 !important;
            }

            .match-modal-team-col.home .match-modal-team-name,
            .match-modal-team-col.away .match-modal-team-name {
                text-align: left;
                flex: 1;
                max-width: none;
            }

            /* Score-wrap hamnar i mitten (order 2) */
            .match-modal-score-wrap {
                order: 2;
                padding: 8px 0;
                border-top: 1px solid rgba(255,255,255,0.06);
                border-bottom: 1px solid rgba(255,255,255,0.06);
            }

            .match-modal-team-col.home { order: 1; }
            .match-modal-team-col.away { order: 3; }

            .match-modal-shield { width: 44px; height: 44px; font-size: 1.3rem; }
            .match-modal-score { font-size: 2.4rem; letter-spacing: 5px; }
            .match-modal-vs { font-size: 1.8rem; letter-spacing: 5px; }
            .match-modal-team-name { font-size: 1rem; letter-spacing: 1.5px; }
            .match-modal-team-side { font-size: 0.5rem; letter-spacing: 2px; }
            .match-modal-section { padding: 16px 18px; }
            .match-modal-meta { font-size: 0.68rem; gap: 5px; padding: 0 8px; }
            .match-lineup-grid { grid-template-columns: 1fr; }
            .match-timeline { height: 48px; }
            .match-timeline-goal-dot { width: 16px; height: 16px; font-size: 0.55rem; }
            .match-leader-chip-name { font-size: 0.7rem; }
            .match-stats-grid { gap: 6px; }
            .match-stat-box { padding: 10px 6px; }
            .match-stat-box-value { font-size: 1.2rem; }
            .match-stat-box-label { font-size: 0.55rem; }
            .match-scorers-list { overflow-x: hidden; }
            .match-scorer-row { flex-wrap: wrap; }
        }

        /* ============================================
           PLAYER MODAL
           ============================================ */
        .player-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.92);
            backdrop-filter: blur(12px);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
            padding: 24px;
            overflow-y: auto;
        }

        .player-modal-overlay.active {
            opacity: 1;
            pointer-events: all;
        }

        /* ── FIFA-KORT ── */
        .player-modal {
            background: transparent;
            border: none;
            max-width: 380px;
            width: 100%;
            position: relative;
            transform: translateY(20px) scale(0.95) rotateY(15deg);
            transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
            overflow: visible;
            margin: auto;
        }

        .player-modal-overlay.active .player-modal {
            transform: translateY(0) scale(1) rotateY(0);
        }

        .player-modal-close {
            position: absolute;
            top: -40px;
            right: 0;
            background: none;
            border: none;
            color: rgba(255,255,255,0.5);
            font-size: 1.8rem;
            cursor: pointer;
            z-index: 10;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.3s;
        }

        .player-modal-close:hover { color: var(--white); }

        /* FIFA-kort container */
        .fifa-card {
            position: relative;
            background:
                radial-gradient(ellipse at top left, rgba(197, 165, 90, 0.4), transparent 50%),
                radial-gradient(ellipse at bottom right, rgba(196, 30, 58, 0.3), transparent 60%),
                linear-gradient(145deg, #1a1a1a 0%, #0a0a0a 50%, #1a1a1a 100%);
            border: 2px solid rgba(197, 165, 90, 0.4);
            box-shadow:
                0 20px 60px rgba(0,0,0,0.6),
                0 0 0 1px rgba(197, 165, 90, 0.2),
                inset 0 2px 20px rgba(255, 255, 255, 0.04);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        /* Diagonala metalliska reflektioner */
        .fifa-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.04) 45%, transparent 50%),
                linear-gradient(70deg, transparent 60%, rgba(197, 165, 90, 0.06) 65%, transparent 70%);
            pointer-events: none;
            z-index: 1;
        }

        /* Guldig innerram */
        .fifa-card::after {
            content: '';
            position: absolute;
            inset: 8px;
            border: 1px solid rgba(197, 165, 90, 0.15);
            pointer-events: none;
            z-index: 1;
        }

        /* Toppdel: betyg + position + foto */
        .fifa-card-top {
            position: relative;
            padding: 24px 24px 12px;
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 18px;
            align-items: start;
            z-index: 2;
        }

        .fifa-rating-block {
            text-align: center;
            padding-top: 6px;
        }

        .fifa-rating {
            font-family: var(--font-display);
            font-size: 3.4rem;
            font-weight: 800;
            color: #f0d77a;
            line-height: 0.9;
            text-shadow: 0 2px 10px rgba(197, 165, 90, 0.3);
            letter-spacing: -2px;
        }

        .fifa-position {
            font-family: var(--font-condensed);
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 3px;
            color: #f0d77a;
            margin-top: 2px;
        }

        .fifa-nationality {
            width: 32px;
            height: 20px;
            margin: 10px auto 0;
            background: #006AA7;
            border: 1px solid rgba(197, 165, 90, 0.4);
            position: relative;
            overflow: hidden;
        }

        /* Gult kors - horisontell stapel */
        .fifa-nationality::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 4px;
            background: #FECC00;
        }

        /* Gult kors - vertikal stapel (flyttad lite till vänster som riktig svensk flagga) */
        .fifa-nationality::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 35%;
            width: 4px;
            background: #FECC00;
            transform: translateX(-50%);
        }

        /* Photo area */
        .fifa-photo {
            aspect-ratio: 1;
            width: 100%;
            background: radial-gradient(circle at center top, rgba(197, 165, 90, 0.1), transparent 70%);
            display: flex;
            align-items: flex-end;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }

        .fifa-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            filter: saturate(1.1) contrast(1.05);
        }

        .fifa-photo-placeholder {
            font-size: 4rem;
            opacity: 0.15;
            margin-bottom: 20px;
        }

        /* Nedre del: namn + stats */
        .fifa-card-bottom {
            padding: 14px 24px 24px;
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            gap: 14px;
            flex: 1;
        }

        .fifa-name {
            font-family: var(--font-heading);
            font-size: 1.5rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 3px;
            color: #f0d77a;
            text-align: center;
            line-height: 1.1;
            padding-bottom: 12px;
            border-bottom: 1px solid rgba(197, 165, 90, 0.25);
            text-shadow: 0 2px 8px rgba(0,0,0,0.5);
        }

        /* Stats-grid 2x2 */
        .fifa-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px 24px;
            padding: 4px 0;
        }

        .fifa-stat {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 8px;
            position: relative;
        }

        .fifa-stat::before {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            right: 0;
            height: 1px;
            background: rgba(197, 165, 90, 0.1);
        }

        .fifa-stat-value {
            font-family: var(--font-display);
            font-size: 1.4rem;
            font-weight: 700;
            color: #f0d77a;
            line-height: 1;
        }

        .fifa-stat-label {
            font-family: var(--font-condensed);
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 2px;
            color: rgba(240, 215, 122, 0.7);
            text-transform: uppercase;
        }

        /* Bio-sektion */
        .fifa-bio {
            margin-top: 6px;
            padding-top: 14px;
            border-top: 1px solid rgba(197, 165, 90, 0.2);
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px 16px;
        }

        .fifa-bio-item {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .fifa-bio-label {
            font-family: var(--font-condensed);
            font-size: 0.58rem;
            font-weight: 700;
            letter-spacing: 2px;
            color: rgba(240, 215, 122, 0.55);
            text-transform: uppercase;
        }

        .fifa-bio-value {
            font-family: var(--font-body);
            font-size: 0.82rem;
            color: rgba(255,255,255,0.9);
        }

        /* ============ MOTM HIGHLIGHT ============ */
        .motm-highlight {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 18px 20px;
            background:
                radial-gradient(ellipse at top left, rgba(197, 165, 90, 0.15), transparent 60%),
                linear-gradient(135deg, rgba(197, 165, 90, 0.08), rgba(197, 165, 90, 0.02));
            border: 1px solid rgba(197, 165, 90, 0.3);
            border-left: 4px solid var(--gold);
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }

        .motm-highlight::after {
            content: '';
            position: absolute;
            top: -20px;
            right: -20px;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(197, 165, 90, 0.12), transparent 70%);
            pointer-events: none;
        }

        .motm-highlight:hover {
            background:
                radial-gradient(ellipse at top left, rgba(197, 165, 90, 0.2), transparent 60%),
                linear-gradient(135deg, rgba(197, 165, 90, 0.12), rgba(197, 165, 90, 0.03));
            border-color: rgba(197, 165, 90, 0.6);
        }

        .motm-star {
            font-size: 2.4rem;
            color: var(--gold);
            text-shadow: 0 0 20px rgba(197, 165, 90, 0.5), 0 0 8px rgba(197, 165, 90, 0.7);
            line-height: 1;
            flex-shrink: 0;
        }

        .motm-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .motm-name {
            font-family: var(--font-heading);
            font-size: 1.1rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #f0d77a;
            line-height: 1.1;
        }

        .motm-label {
            font-family: var(--font-condensed);
            font-size: 0.7rem;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: rgba(197, 165, 90, 0.6);
            font-weight: 600;
        }

        /* ============ TEAMS SECTION - SHOWCASE ============ */
        .fifa-teams {
            margin-top: 14px;
            padding-top: 16px;
            border-top: 1px solid rgba(197, 165, 90, 0.2);
            display: flex;
            flex-direction: column;
            gap: 10px;
            position: relative;
        }

        .fifa-teams-header {
            font-family: var(--font-condensed);
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 3px;
            color: rgba(240, 215, 122, 0.55);
            text-transform: uppercase;
            text-align: center;
            margin-bottom: 2px;
            position: relative;
        }

        .fifa-teams-header::before,
        .fifa-teams-header::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 40px;
            height: 1px;
            background: rgba(197, 165, 90, 0.2);
        }
        .fifa-teams-header::before { left: 20%; }
        .fifa-teams-header::after { right: 20%; }

        .fifa-team-card {
            position: relative;
            padding: 10px 14px;
            background: linear-gradient(90deg, rgba(var(--team-rgb), 0.15), rgba(var(--team-rgb), 0.02));
            border-left: 3px solid rgb(var(--team-rgb));
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 14px;
            align-items: center;
            overflow: hidden;
            transition: transform 0.3s;
        }

        .fifa-team-card::before {
            content: '';
            position: absolute;
            top: 0; right: 0;
            width: 80px;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(var(--team-rgb), 0.12));
            pointer-events: none;
        }

        .fifa-team-card:hover {
            transform: translateX(2px);
        }

        /* Lagbadge (rundad med initial) */
        .fifa-team-badge {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgb(var(--team-rgb)), rgba(var(--team-rgb), 0.6));
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            font-size: 1.2rem;
            font-weight: 800;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
            box-shadow: 0 2px 8px rgba(var(--team-rgb), 0.4), inset 0 1px 2px rgba(255,255,255,0.3);
            flex-shrink: 0;
        }

        .fifa-team-info {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }

        .fifa-team-name-row {
            display: flex;
            align-items: baseline;
            gap: 8px;
        }

        .fifa-team-name {
            font-family: var(--font-heading);
            font-size: 0.95rem;
            font-weight: 700;
            letter-spacing: 2px;
            color: #f0d77a;
            text-transform: uppercase;
            line-height: 1;
        }

        .fifa-team-serie {
            font-family: var(--font-condensed);
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            color: rgba(240, 215, 122, 0.45);
            text-transform: uppercase;
        }

        /* Mini-stats inline */
        .fifa-team-ministats {
            display: flex;
            gap: 14px;
            font-family: var(--font-condensed);
            font-size: 0.65rem;
            letter-spacing: 1px;
            color: rgba(255,255,255,0.6);
        }

        .fifa-team-ministat {
            display: flex;
            align-items: baseline;
            gap: 4px;
        }

        .fifa-team-ministat-num {
            font-family: var(--font-display);
            font-size: 0.95rem;
            color: #fff;
            font-weight: 700;
        }

        .fifa-team-ministat-label {
            text-transform: uppercase;
            font-size: 0.58rem;
            letter-spacing: 1.5px;
            color: rgba(255,255,255,0.45);
        }

        /* Närvaro-cirkel (till höger) */
        .fifa-team-rating {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), transparent 50%), rgb(var(--team-rgb));
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 2px 10px rgba(var(--team-rgb), 0.4), inset 0 -2px 4px rgba(0,0,0,0.2);
            position: relative;
            z-index: 2;
        }

        .fifa-team-rating-num {
            font-family: var(--font-display);
            font-size: 1.3rem;
            font-weight: 800;
            color: #fff;
            line-height: 1;
            text-shadow: 0 1px 2px rgba(0,0,0,0.4);
        }

        .fifa-team-rating-label {
            font-family: var(--font-condensed);
            font-size: 0.48rem;
            letter-spacing: 1px;
            font-weight: 700;
            color: rgba(255,255,255,0.9);
            text-transform: uppercase;
            margin-top: 3px;
        }

        /* Progress bar för målproduktion (mål per match) */
        .fifa-team-progress {
            grid-column: 1 / -1;
            height: 3px;
            background: rgba(0,0,0,0.3);
            position: relative;
            margin-top: 2px;
            overflow: hidden;
        }

        .fifa-team-progress-fill {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            background: linear-gradient(90deg, rgb(var(--team-rgb)), rgba(var(--team-rgb), 0.5));
            width: 0%;
            transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
            box-shadow: 0 0 8px rgba(var(--team-rgb), 0.6);
        }

        @media (max-width: 500px) {
            .player-modal-overlay {
                padding: 16px 12px;
                align-items: flex-start;
                padding-top: 60px;
            }
            .player-modal {
                max-width: 94vw;
            }
            .player-modal-close {
                position: fixed;
                top: 16px;
                right: 16px;
                background: rgba(0, 0, 0, 0.85);
                backdrop-filter: blur(8px);
                border-radius: 50%;
                width: 44px;
                height: 44px;
                color: #f0d77a;
                font-size: 1.8rem;
                z-index: 2100;
                border: 1px solid rgba(197, 165, 90, 0.4);
                box-shadow: 0 4px 16px rgba(0,0,0,0.6);
            }
            .fifa-card-top { padding: 14px 16px 8px; gap: 12px; }
            .fifa-rating { font-size: 2.2rem; }
            .fifa-position { font-size: 0.65rem; letter-spacing: 2px; }
            .fifa-nationality { width: 26px; height: 17px; }
            .fifa-card-bottom { padding: 10px 16px 16px; gap: 10px; }
            .fifa-name { font-size: 1.05rem; letter-spacing: 2px; padding-bottom: 10px; }
            .fifa-stats { gap: 6px 18px; }
            .fifa-stat-value { font-size: 1.05rem; }
            .fifa-stat-label { font-size: 0.58rem; letter-spacing: 1.5px; }
            .fifa-bio { gap: 6px 14px; padding-top: 10px; }
            .fifa-bio-label { font-size: 0.52rem; }
            .fifa-bio-value { font-size: 0.78rem; }
            .fifa-teams { margin-top: 8px; padding-top: 10px; gap: 8px; }
            .fifa-teams-header { font-size: 0.55rem; }
            .fifa-team-card { padding: 8px 10px; gap: 10px; }
            .fifa-team-badge { width: 32px; height: 32px; font-size: 1rem; }
            .fifa-team-name { font-size: 0.85rem; letter-spacing: 1.5px; }
            .fifa-team-serie { font-size: 0.55rem; }
            .fifa-team-ministats { gap: 10px; }
            .fifa-team-ministat-num { font-size: 0.85rem; }
            .fifa-team-ministat-label { font-size: 0.52rem; letter-spacing: 1px; }
            .fifa-team-rating { width: 42px; height: 42px; }
            .fifa-team-rating-num { font-size: 1.1rem; }
            .fifa-team-rating-label { font-size: 0.42rem; }
        }

        /* ============================================
           NEXT MATCH TICKER
           ============================================ */
        .next-match-ticker {
            position: fixed;
            top: 70px;
            left: 0; right: 0;
            z-index: 998;
            background: linear-gradient(135deg, var(--red-dark) 0%, var(--red-primary) 50%, var(--red-dark) 100%);
            background-size: 200% 100%;
            animation: tickerGradient 3s ease-in-out infinite;
            padding: 10px 16px;
            text-align: center;
            transform: translateY(-100%);
            transition: transform 0.4s ease;
            cursor: pointer;
            box-shadow: 0 2px 12px rgba(196, 30, 58, 0.35);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        @keyframes tickerGradient {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        .next-match-ticker:hover {
            background: linear-gradient(135deg, var(--red-primary) 0%, var(--red-glow) 50%, var(--red-primary) 100%);
        }

        .next-match-ticker.visible {
            transform: translateY(0);
        }

        .next-match-ticker-inner {
            font-family: var(--font-condensed);
            font-weight: 700;
            font-size: 0.85rem;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

        .next-match-ticker .ticker-arrow {
            font-size: 0.7rem;
            opacity: 0.7;
            transition: transform 0.3s, opacity 0.3s;
        }

        .next-match-ticker:hover .ticker-arrow {
            transform: translateX(3px);
            opacity: 1;
        }


        @keyframes sportTickerScroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }

        @media (max-width: 600px) {
            .next-match-ticker-inner { font-size: 0.7rem; letter-spacing: 1.5px; gap: 10px; }
            .next-match-ticker { padding: 9px 12px; }
        }

        /* ============================================
           MATCH RESULTS
           ============================================ */
        .match-result {
            font-family: var(--font-display);
            font-size: 3.8rem;
            letter-spacing: 6px;
            line-height: 1;
            font-weight: 700;
            display: block;
            margin: 8px 0 6px;
        }

        .result-win { color: #4ade80; text-shadow: 0 2px 20px rgba(74, 222, 128, 0.3); }
        .result-loss { color: var(--white); opacity: 0.92; }
        .result-draw { color: var(--gold); text-shadow: 0 2px 20px rgba(197, 165, 90, 0.25); }

        .match-card.played { opacity: 1; }
        .match-card.played:hover { opacity: 1; }

        /* ============================================
           RED STRIPE DIVIDER
           ============================================ */
        .stripe-divider {
            height: 4px;
            background: linear-gradient(90deg, transparent, var(--red-primary), var(--red-dark), transparent);
            box-shadow: 0 0 20px rgba(196, 30, 58, 0.4);
        }

        /* ============================================
           MATCHER (MATCHES) SECTION
           ============================================ */
        .matches-grid {
            display: grid;
            gap: 14px;
            max-width: 820px;
            margin: 0 auto;
        }

        .match-card {
            background: var(--bg-card);
            border: 1px solid rgba(255,255,255,0.06);
            padding: 56px 32px 28px;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 24px;
            transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        /* Resultat-kort: mindre topp-padding, ingen status-badge/day-block där */
        .match-card.played { padding: 28px 32px; }

        /* Vänsterkant (lagfärgad vinjett) – alltid synlig, mer markerad på hover */
        .match-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: var(--red-primary);
            opacity: 0.4;
            transition: all 0.35s;
        }

        .match-card[data-team="copco"]::before { background: linear-gradient(180deg, #c41e3a, #8f1628); }
        .match-card[data-team="atlas"]::before { background: linear-gradient(180deg, #c5a55a, #8a7340); }
        .match-card[data-team="berget"]::before { background: linear-gradient(180deg, #7a9fd4, #4d6a94); }

        /* Liten chevron som indikerar klickbarhet */
        .match-card::after {
            content: '→';
            position: absolute;
            top: 50%;
            right: 16px;
            transform: translate(10px, -50%);
            opacity: 0;
            font-size: 1.3rem;
            color: var(--red-primary);
            transition: all 0.3s;
            pointer-events: none;
        }

        .match-card:hover {
            border-color: rgba(196, 30, 58, 0.35);
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(196, 30, 58, 0.15);
        }
        .match-card:hover::before { opacity: 1; width: 5px; }
        .match-card:hover::after { opacity: 1; transform: translate(0, -50%); }

        /* ============ NÄSTA MATCH – EXTRA FRAMHÄVD ============ */
        .match-card.next-match {
            background:
                radial-gradient(ellipse at top left, rgba(196,30,58,0.08), transparent 60%),
                var(--bg-card);
            border: 1px solid rgba(196, 30, 58, 0.35);
            box-shadow: 0 0 0 1px rgba(196,30,58,0.15), 0 10px 40px rgba(196,30,58,0.12);
        }
        .match-card.next-match::before { opacity: 1; width: 5px; }

        .match-card.next-match:hover {
            border-color: rgba(196, 30, 58, 0.6);
            box-shadow: 0 0 0 1px rgba(196,30,58,0.3), 0 16px 50px rgba(196,30,58,0.25);
        }

        /* "NÄSTA MATCH"-label: en remsa högst upp på kortet */
        .match-next-label {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            background: linear-gradient(90deg, var(--red-primary), var(--red-dark), var(--red-primary));
            color: #fff;
            font-family: var(--font-condensed);
            font-size: 0.62rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            font-weight: 700;
            padding: 6px 14px;
            text-align: center;
            z-index: 3;
            white-space: nowrap;
        }

        .match-card.next-match { padding-top: 60px; }

        /* ============ STATUS-BADGE (SPIKAD/TRUPP KLAR/KOMMANDE) ============ */
        .match-status-badge {
            position: absolute;
            top: 16px;
            left: 20px;
            font-family: var(--font-condensed);
            font-size: 0.58rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 2px;
            z-index: 2;
            white-space: nowrap;
        }
        .match-status-badge.spikad {
            background: rgba(74, 222, 128, 0.15);
            color: #4ade80;
            border: 1px solid rgba(74, 222, 128, 0.35);
            box-shadow: 0 0 12px rgba(74, 222, 128, 0.15);
        }
        .match-status-badge.spikad::before {
            content: '⚡';
            margin-right: 4px;
        }
        .match-status-badge.trupp {
            background: rgba(197, 165, 90, 0.12);
            color: var(--gold);
            border: 1px solid rgba(197, 165, 90, 0.35);
        }
        .match-status-badge.trupp::before {
            content: '👕';
            margin-right: 4px;
            font-size: 0.6rem;
        }
        .match-status-badge.kommande {
            background: rgba(255,255,255,0.04);
            color: rgba(255,255,255,0.45);
            border: 1px solid rgba(255,255,255,0.1);
        }

        .match-card.next-match .match-status-badge { top: 42px; }

        /* Ej klickbara kort – dämpa hover-effekt */
        .match-card.no-details { cursor: default; }
        .match-card.no-details:hover { transform: none; }
        .match-card.no-details::after { display: none; }

        .match-card.live { border-color: var(--red-primary); }
        .match-card.live::before { opacity: 1; width: 5px; background: var(--red-glow); }

        /* ============ VECKODAG STORT (DAG-BLOCK) ============ */
        .match-day-block {
            position: absolute;
            top: 14px;
            right: 20px;
            text-align: right;
            z-index: 2;
            line-height: 1;
        }

        .match-card.next-match .match-day-block { top: 40px; }

        .match-day-main {
            font-family: var(--font-display);
            font-size: 1.6rem;
            font-weight: 800;
            color: rgba(255,255,255,0.9);
            letter-spacing: 1.5px;
            line-height: 1;
        }

        .match-day-sub {
            font-family: var(--font-condensed);
            font-size: 0.6rem;
            letter-spacing: 2.5px;
            color: rgba(255,255,255,0.4);
            text-transform: uppercase;
            margin-top: 3px;
        }

        .match-day-time {
            font-family: var(--font-condensed);
            font-size: 0.78rem;
            letter-spacing: 1.5px;
            color: rgba(255,255,255,0.55);
            margin-top: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
            justify-content: flex-end;
        }

        .match-day-time::before {
            content: '🕐';
            font-size: 0.7rem;
            opacity: 0.7;
        }

        /* Hem/borta-ikon */
        .match-ha-icon {
            font-family: var(--font-condensed);
            font-size: 0.8rem;
            margin-right: 4px;
            opacity: 0.6;
        }

        /* Peek-indikator (16 spelare uttagna / Startnian spikad) */
        .match-peek {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 10px;
            padding: 5px 12px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.08);
            font-family: var(--font-condensed);
            font-size: 0.68rem;
            letter-spacing: 1.5px;
            color: rgba(255,255,255,0.55);
            text-transform: uppercase;
            transition: all 0.2s;
        }
        .match-peek:hover {
            background: rgba(196,30,58,0.08);
            border-color: rgba(196,30,58,0.3);
            color: var(--white);
        }
        .match-peek.spikad {
            background: rgba(74, 222, 128, 0.08);
            border-color: rgba(74, 222, 128, 0.25);
            color: #4ade80;
        }
        .match-peek.spikad:hover {
            background: rgba(74, 222, 128, 0.15);
            border-color: rgba(74, 222, 128, 0.5);
        }

        /* Ta bort gamla corner-date eftersom vi använder day-block */
        .match-corner-date { display: none !important; }
        .match-card.played .match-corner-date { display: none; }

        /* Lagnamn – dominerande */
        .match-team {
            font-family: var(--font-heading);
            font-weight: 700;
            font-size: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            line-height: 1.2;
            color: var(--white);
        }

        .match-team.home { text-align: right; }
        .match-team.away { text-align: left; }

        /* H/B-etikett ovanför lagnamnet */
        .match-side-label {
            display: block;
            font-family: var(--font-condensed);
            font-size: 0.58rem;
            letter-spacing: 3px;
            color: rgba(255,255,255,0.3);
            text-transform: uppercase;
            margin-bottom: 4px;
            font-weight: 600;
        }

        /* Lagbadge (rund med bokstav) under lagnamn */
        .match-team-shield {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            font-family: var(--font-display);
            font-size: 0.95rem;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0,0,0,0.4);
            margin-top: 6px;
            vertical-align: middle;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.2);
        }
        .match-team-shield.copco { background: linear-gradient(135deg, #c41e3a, #8f1628); }
        .match-team-shield.atlas { background: linear-gradient(135deg, #c5a55a, #8a7340); }
        .match-team-shield.berget { background: linear-gradient(135deg, #7a9fd4, #4d6a94); }
        .match-team-shield.neutral { background: linear-gradient(135deg, #3a3a42, #1f1f25); color: rgba(255,255,255,0.6); }

        /* Gamla badge-klassen behåller vi för bakåtkompatibilitet men fadar */
        .match-team-badge {
            display: inline-block;
            padding: 3px 10px;
            font-family: var(--font-condensed);
            font-size: 0.65rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-weight: 600;
            margin-top: 6px;
        }
        .match-team-badge.badge-copco { background: rgba(196, 30, 58, 0.15); color: var(--red-glow); border: 1px solid rgba(196, 30, 58, 0.3); }
        .match-team-badge.badge-atlas { background: rgba(197, 165, 90, 0.12); color: var(--gold-light); border: 1px solid rgba(197, 165, 90, 0.3); }
        .match-team-badge.badge-berget { background: rgba(122, 159, 212, 0.15); color: #7a9fd4; border: 1px solid rgba(122, 159, 212, 0.3); }

        .match-center {
            text-align: center;
            min-width: 140px;
            position: relative;
        }

        /* Split: top = VS/score/date, bottom = venue/peek/buttons */
        .match-center-top, .match-center-bottom {
            text-align: center;
        }
        .match-center-bottom {
            margin-top: 8px;
        }

        /* Datum ovan score (endast resultat-kort) */
        .match-center-date {
            font-family: var(--font-condensed);
            font-size: 0.7rem;
            letter-spacing: 2.5px;
            color: rgba(255,255,255,0.4);
            text-transform: uppercase;
            margin-bottom: 2px;
        }

        /* Venue med platsikon */
        .match-venue {
            font-family: var(--font-condensed);
            font-size: 0.72rem;
            letter-spacing: 1.5px;
            color: rgba(255,255,255,0.45);
            text-transform: uppercase;
            margin-top: 4px;
        }
        .match-venue::before {
            content: '📍';
            margin-right: 4px;
            font-size: 0.7rem;
            opacity: 0.6;
        }

        /* Datum för kommande matcher (vid VS) */
        .match-date {
            font-family: var(--font-condensed);
            font-size: 0.78rem;
            letter-spacing: 2.5px;
            color: var(--white-dim);
            text-transform: uppercase;
            margin-bottom: 8px;
        }

        /* VS-texten snyggare */
        .match-vs {
            font-family: var(--font-display);
            font-size: 2rem;
            letter-spacing: 6px;
            color: rgba(255,255,255,0.35);
            line-height: 1;
            margin: 4px 0 6px;
            position: relative;
        }

        /* Subtila dashar runt VS */
        .match-vs::before,
        .match-vs::after {
            content: '';
            display: inline-block;
            width: 24px;
            height: 1px;
            background: rgba(255,255,255,0.2);
            vertical-align: middle;
            margin: 0 12px 6px;
        }

        .match-meta {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 10px;
            flex-wrap: wrap;
        }

        .match-badge {
            font-family: var(--font-condensed);
            font-size: 0.7rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 6px 12px;
            border-radius: 2px;
            font-weight: 600;
            transition: all 0.2s;
        }

        .badge-live {
            background: var(--red-primary);
            color: var(--white);
            animation: pulse 2s infinite;
        }

        /* Primär knapp: YouTube Live (röd solid) */
        .badge-youtube {
            background: var(--red-primary);
            color: var(--white);
            cursor: pointer;
            border: 1px solid var(--red-primary);
        }
        .badge-youtube:hover {
            background: var(--red-dark);
            transform: translateY(-1px);
        }

        /* Sekundär: Kalender (diskret outlined) */
        .badge-calendar {
            background: transparent;
            color: rgba(255,255,255,0.65);
            border: 1px solid rgba(255,255,255,0.15);
            cursor: pointer;
        }
        .badge-calendar:hover {
            background: rgba(255,255,255,0.05);
            color: var(--white);
            border-color: rgba(255,255,255,0.3);
        }

        /* Målskytte-lista (resultat-kort) */
        .match-card-scorers {
            margin: 14px 0 4px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            max-width: 240px;
            margin-left: auto;
            margin-right: auto;
        }

        .match-card-scorer {
            font-family: var(--font-body);
            font-size: 0.78rem;
            color: var(--white-dim);
            display: grid;
            grid-template-columns: 24px auto 1fr;
            gap: 6px;
            align-items: center;
            text-align: left;
            padding: 2px 0;
        }

        .match-card-scorer .icon {
            font-size: 0.7rem;
            opacity: 0.7;
            text-align: center;
        }

        .match-card-scorer .min {
            color: var(--gold);
            font-family: var(--font-condensed);
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 1px;
            min-width: 28px;
        }

        .match-card-scorer .name {
            color: var(--white-dim);
        }

        .match-card-scorer .note {
            color: rgba(255,255,255,0.35);
            font-size: 0.7rem;
            font-style: italic;
            margin-left: 4px;
        }

        .match-card-more {
            text-align: center;
            font-family: var(--font-condensed);
            font-size: 0.72rem;
            letter-spacing: 2px;
            color: var(--red-primary);
            text-transform: uppercase;
            margin-top: 6px;
            cursor: pointer;
        }
        .match-card-more:hover { color: var(--red-glow); }

        /* Detaljknapp – textbaserad tertiär */
        .match-details-btn {
            background: transparent;
            border: none;
            color: rgba(255,255,255,0.5);
            font-family: var(--font-condensed);
            font-size: 0.7rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 10px 0 0;
            cursor: pointer;
            transition: color 0.2s;
            font-weight: 600;
        }
        .match-details-btn:hover { color: var(--white); }

        /* ============================================
           OM OSS (ABOUT) SECTION
           ============================================ */
        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .about-text h3 {
            font-family: var(--font-display);
            font-size: 2rem;
            letter-spacing: 3px;
            margin-bottom: 20px;
        }

        .about-text p {
            color: var(--white-dim);
            margin-bottom: 16px;
            line-height: 1.8;
        }

        .about-text .highlight {
            color: var(--red-primary);
            font-weight: 600;
        }

        .about-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            margin-top: 32px;
        }

        .stat-item {
            text-align: center;
            padding: 20px;
            background: rgba(196, 30, 58, 0.08);
            border: 1px solid rgba(196, 30, 58, 0.15);
        }

        .stat-number {
            font-family: var(--font-display);
            font-size: 2.5rem;
            color: var(--red-primary);
        }

        .stat-label {
            font-family: var(--font-condensed);
            font-size: 0.8rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--white-dim);
            margin-top: 4px;
        }

        .about-visual {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .about-visual img {
            width: 450px; max-width: 100%;
            filter: drop-shadow(0 0 28px rgba(196, 30, 58, 0.25)) drop-shadow(0 0 70px rgba(196, 30, 58, 0.2));
        }

        /* ============================================
           SPONSORER SECTION (nivå-grupperad)
           ============================================ */
        .sponsors-content {
            display: flex;
            flex-direction: column;
            gap: 48px;
        }

        .sponsors-level {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .sponsors-level-label {
            font-family: var(--font-condensed);
            font-size: 0.72rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.35);
            font-weight: 700;
            margin-bottom: 24px;
            display: inline-flex;
            align-items: center;
            gap: 12px;
        }

        .sponsors-level-label::before,
        .sponsors-level-label::after {
            content: '';
            width: 30px;
            height: 1px;
            background: rgba(255,255,255,0.15);
        }

        /* Nivå: huvudsponsor – stora loggor */
        .sponsors-level.level-huvud .sponsors-logos {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 60px;
            flex-wrap: wrap;
        }
        .sponsors-level.level-huvud .sponsor-logo-link {
            display: block;
            opacity: 0.6;
            transition: opacity 0.3s;
            filter: brightness(0) invert(1);
        }
        .sponsors-level.level-huvud .sponsor-logo-link:hover {
            opacity: 1;
        }
        .sponsors-level.level-huvud .sponsor-logo-link img {
            height: 45px;
            width: auto;
            display: block;
        }
        .sponsors-level.level-huvud .sponsor-logo-text {
            font-family: var(--font-display);
            font-size: 1.8rem;
            color: rgba(255,255,255,0.7);
            letter-spacing: 2px;
            text-decoration: none;
            transition: color 0.2s;
        }
        .sponsors-level.level-huvud .sponsor-logo-text:hover {
            color: var(--white);
        }

        /* Nivå: eldsjäl – mindre loggor eller namn */
        .sponsors-level.level-eldsjal .sponsors-logos {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 36px;
            flex-wrap: wrap;
        }
        .sponsors-level.level-eldsjal .sponsor-logo-link {
            opacity: 0.55;
            transition: opacity 0.3s;
            filter: brightness(0) invert(1);
        }
        .sponsors-level.level-eldsjal .sponsor-logo-link:hover {
            opacity: 0.9;
        }
        .sponsors-level.level-eldsjal .sponsor-logo-link img {
            height: 32px;
            width: auto;
            display: block;
        }
        .sponsors-level.level-eldsjal .sponsor-logo-text {
            font-family: var(--font-heading);
            font-size: 1.05rem;
            letter-spacing: 1.5px;
            color: rgba(255,255,255,0.65);
            text-transform: uppercase;
            text-decoration: none;
            transition: color 0.2s;
        }
        .sponsors-level.level-eldsjal .sponsor-logo-text:hover {
            color: var(--white);
        }

        /* Nivå: medsupporter – namnlista med bullets */
        /* Nivå: medsupporter – namnlista med bullets */
        .sponsors-level.level-medsupporter .sponsors-names,
        .sponsors-level.level-flockvan .sponsors-names {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 10px 18px;
            max-width: 800px;
        }
        .sponsors-level.level-medsupporter .sponsor-name,
        .sponsors-level.level-flockvan .sponsor-name {
            font-family: var(--font-heading);
            font-size: 0.95rem;
            letter-spacing: 1px;
            color: rgba(255,255,255,0.55);
            text-transform: uppercase;
        }
        .sponsors-level.level-medsupporter .sponsor-name:not(:last-child)::after {
            content: '·';
            color: rgba(255,255,255,0.2);
            margin-left: 14px;
        }
        .sponsors-level .sponsor-sep {
            color: rgba(255,255,255,0.2);
            font-size: 0.95rem;
        }

        /* Nivå: flockvän – samma layout som medsupportrar, något diskretare */
        .sponsors-level.level-flockvan {
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
        }
        .sponsors-level.level-flockvan .sponsor-name {
            color: rgba(255,255,255,0.45);
        }

        /* "Bli sponsor"-CTA under alla nivåer */
        .sponsor-cta {
            margin-top: 56px;
            text-align: center;
        }

        .sponsor-cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            padding: 16px 36px;
            background: transparent;
            border: 2px solid var(--red-primary);
            color: var(--white);
            font-family: var(--font-condensed);
            font-size: 0.9rem;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            font-weight: 700;
            text-decoration: none;
            transition: all 0.3s;
        }

        .sponsor-cta-btn:hover {
            background: var(--red-primary);
            box-shadow: 0 0 30px rgba(196, 30, 58, 0.3);
        }

        .sponsor-cta-heart {
            color: var(--red-glow);
            font-size: 1.1rem;
            line-height: 1;
            transition: transform 0.3s;
        }

        .sponsor-cta-btn:hover .sponsor-cta-heart {
            color: #fff;
            transform: scale(1.2);
        }

        .sponsor-cta-arrow {
            font-size: 1.2rem;
            line-height: 1;
            transition: transform 0.3s;
        }

        .sponsor-cta-btn:hover .sponsor-cta-arrow {
            transform: translateX(4px);
        }

        .sponsor-cta-sub {
            margin-top: 14px;
            font-family: var(--font-condensed);
            font-size: 0.78rem;
            letter-spacing: 1.5px;
            color: rgba(255,255,255,0.4);
            text-transform: uppercase;
        }

        /* Tomt läge */
        .sponsors-empty {
            text-align: center;
            color: var(--white-dim);
            font-family: var(--font-condensed);
            letter-spacing: 2px;
            text-transform: uppercase;
            font-size: 0.85rem;
            padding: 40px 20px;
        }

        @media (max-width: 600px) {
            .sponsors-content { gap: 36px; }
            .sponsors-level.level-huvud .sponsors-logos { gap: 40px; }
            .sponsors-level.level-huvud .sponsor-logo-link img { height: 36px; }
            .sponsors-level.level-huvud .sponsor-logo-text { font-size: 1.4rem; }
            .sponsors-level.level-eldsjal .sponsors-logos { gap: 24px; }
            .sponsor-cta { margin-top: 40px; }
            .sponsor-cta-btn { padding: 14px 24px; font-size: 0.78rem; letter-spacing: 2px; gap: 10px; }
        }

        /* ============================================
           LEDARE (STAFF) SECTION
           ============================================ */
        .leaders-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .leader-card {
            background: var(--bg-card);
            border: 1px solid rgba(255,255,255,0.06);
            padding: 24px 16px;
            text-align: center;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .leader-card:hover {
            border-color: rgba(196, 30, 58, 0.3);
            transform: translateY(-3px);
        }

        .leader-photo {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: rgba(255,255,255,0.06);
            margin: 0 auto 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 2px solid rgba(196, 30, 58, 0.2);
        }

        .leader-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .leader-photo-placeholder {
            font-size: 1.5rem;
            opacity: 0.3;
        }

        .leader-name {
            font-family: var(--font-heading);
            font-weight: 600;
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--white);
            margin-bottom: 4px;
        }

        .leader-role {
            font-family: var(--font-condensed);
            font-size: 0.8rem;
            letter-spacing: 1px;
            color: var(--red-primary);
            text-transform: uppercase;
        }

        @media (max-width: 600px) {
            .leaders-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }
            .leader-card { padding: 16px 10px; }
            .leader-photo { width: 60px; height: 60px; }
            .leader-name { font-size: 0.8rem; }
            .leader-role { font-size: 0.7rem; }
        }

        /* ============================================
           GALLERI (GALLERY) SECTION
           ============================================ */
        /* Mosaik på förstasidan: 5 bilder, klassisk redaktionell layout */
        .gallery-mosaic {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: 200px 200px;
            gap: 6px;
            margin-bottom: 32px;
        }

        .gallery-mosaic .gallery-item:nth-child(1) {
            grid-column: 1 / 3;
            grid-row: 1 / 3;
        }

        /* Gemensam stil för alla gallery items (mosaik + fullscreen) */
        .gallery-item {
            background: var(--bg-card);
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        /* Fullscreen items är kvadratiska, mosaik-items fyller sin grid-cell */
        .gallery-fs-grid .gallery-item {
            aspect-ratio: 1;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.6s;
        }

        .gallery-item:hover img {
            transform: scale(1.08);
            filter: brightness(0.7);
        }

        .gallery-item::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(196, 30, 58, 0.5) 0%, transparent 50%);
            opacity: 0;
            transition: opacity 0.4s;
            z-index: 1;
        }

        .gallery-item:hover::after { opacity: 1; }

        .gallery-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--navy-deep), var(--bg-card));
            font-family: var(--font-display);
            font-size: 2rem;
            color: rgba(255,255,255,0.1);
        }

        /* "Se alla bilder"-knapp under mosaiken */
        .gallery-see-all-wrap {
            text-align: center;
            margin-bottom: 32px;
        }

        .gallery-see-all {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            padding: 14px 32px;
            background: transparent;
            border: 2px solid var(--red-primary);
            color: var(--white);
            font-family: var(--font-condensed);
            font-size: 0.85rem;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s;
        }

        .gallery-see-all:hover {
            background: var(--red-primary);
            box-shadow: 0 0 30px rgba(196, 30, 58, 0.3);
        }

        .gallery-see-all-count {
            padding: 3px 10px;
            background: rgba(196, 30, 58, 0.2);
            border: 1px solid rgba(196, 30, 58, 0.4);
            color: var(--red-glow);
            font-family: var(--font-display);
            font-size: 0.9rem;
            letter-spacing: 1px;
            transition: all 0.3s;
        }

        .gallery-see-all:hover .gallery-see-all-count {
            background: rgba(0,0,0,0.3);
            border-color: rgba(255,255,255,0.3);
            color: var(--white);
        }

        .gallery-see-all-arrow {
            font-size: 1.2rem;
            line-height: 1;
            transition: transform 0.3s;
        }

        .gallery-see-all:hover .gallery-see-all-arrow {
            transform: translateX(4px);
        }

        /* Tomt läge om inga bilder finns */
        .gallery-mosaic:empty + .gallery-see-all-wrap {
            display: none;
        }

        .gallery-cta {
            text-align: center;
            margin-top: 40px;
        }

        .gallery-cta a {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-family: var(--font-condensed);
            font-weight: 600;
            font-size: 1rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--white);
            padding: 14px 32px;
            border: 2px solid var(--red-primary);
            transition: all 0.3s;
        }

        .gallery-cta a:hover {
            background: var(--red-primary);
            box-shadow: 0 0 30px rgba(196, 30, 58, 0.3);
        }

        /* ============================================
           FULLSCREEN GALLERY
           ============================================ */
        .gallery-fullscreen {
            position: fixed;
            inset: 0;
            background: rgba(10, 10, 10, 0.98);
            z-index: 2500;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
            overflow-y: auto;
            overscroll-behavior: contain;
        }

        .gallery-fullscreen.active {
            opacity: 1;
            pointer-events: all;
        }

        .gallery-fs-inner {
            max-width: 1400px;
            margin: 0 auto;
            padding: 28px 32px 60px;
            min-height: 100%;
        }

        .gallery-fs-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 20px;
            padding-bottom: 24px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            margin-bottom: 24px;
            position: sticky;
            top: 0;
            background: rgba(10, 10, 10, 0.98);
            padding-top: 8px;
            z-index: 2;
            backdrop-filter: blur(8px);
        }

        .gallery-fs-label {
            font-family: var(--font-condensed);
            font-size: 0.75rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--red-glow);
            font-weight: 700;
            margin: 0 0 6px;
        }

        .gallery-fs-heading {
            font-family: var(--font-display);
            font-size: 2.4rem;
            font-weight: 800;
            letter-spacing: 3px;
            color: var(--white);
            margin: 0;
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .gallery-fs-count {
            font-size: 0.95rem;
            letter-spacing: 1px;
            color: var(--white-dim);
            font-weight: 400;
            font-family: var(--font-condensed);
            padding: 4px 12px;
            border: 1px solid rgba(255,255,255,0.15);
        }

        .gallery-fs-close {
            background: none;
            border: 1px solid rgba(255,255,255,0.15);
            color: var(--white);
            width: 44px;
            height: 44px;
            font-size: 1.8rem;
            cursor: pointer;
            line-height: 1;
            transition: all 0.2s;
            flex-shrink: 0;
        }

        .gallery-fs-close:hover {
            border-color: var(--red-primary);
            background: rgba(196, 30, 58, 0.15);
            color: var(--red-glow);
        }

        .gallery-fs-filters {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 24px;
        }

        .gallery-fs-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 4px;
        }

        .gallery-fs-empty {
            grid-column: 1 / -1;
            text-align: center;
            padding: 60px 20px;
            color: var(--white-dim);
            font-family: var(--font-condensed);
            letter-spacing: 2px;
            text-transform: uppercase;
            font-size: 0.85rem;
        }

        @media (max-width: 600px) {
            .gallery-mosaic {
                grid-template-rows: 160px 160px;
                gap: 3px;
            }
            .gallery-fs-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 3px;
            }
            .gallery-fs-inner { padding: 16px 14px 40px; }
            .gallery-fs-heading { font-size: 1.5rem; letter-spacing: 1.5px; gap: 10px; }
            .gallery-fs-header { padding-top: 4px; padding-bottom: 16px; margin-bottom: 18px; }
            .gallery-fs-close { width: 38px; height: 38px; font-size: 1.5rem; }
            .gallery-fs-filters { gap: 6px; margin-bottom: 18px; }
            .gallery-see-all { padding: 12px 22px; font-size: 0.75rem; letter-spacing: 2px; gap: 10px; }
        }

        /* ============================================
           HIGHLIGHTS (VIDEO) SECTION
           ============================================ */
        .highlights-filter {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 32px;
            flex-wrap: wrap;
        }

        .highlights-filter-btn {
            background: transparent;
            border: 1px solid rgba(255,255,255,0.12);
            color: rgba(255,255,255,0.55);
            padding: 9px 20px;
            font-family: var(--font-condensed);
            font-size: 0.78rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .highlights-filter-btn:hover {
            color: var(--white);
            border-color: rgba(255,255,255,0.3);
        }

        .highlights-filter-btn.active {
            background: var(--red-primary);
            border-color: var(--red-primary);
            color: var(--white);
        }

        .highlights-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
        }

        .highlight-card {
            position: relative;
            cursor: pointer;
            overflow: hidden;
            background: var(--bg-card);
            border: 1px solid rgba(255,255,255,0.06);
            transition: transform 0.3s, border-color 0.3s;
            aspect-ratio: 16 / 9;
        }

        .highlight-card:hover {
            border-color: rgba(196,30,58,0.4);
        }

        .highlight-card:hover .highlight-thumb {
            transform: scale(1.05);
        }

        .highlight-card:hover .highlight-play {
            background: var(--red-primary);
            transform: translate(-50%, -50%) scale(1.1);
            box-shadow: 0 0 40px rgba(196,30,58,0.5);
        }

        .highlight-thumb-wrap {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #000;
        }

        .highlight-thumb {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s;
            display: block;
        }

        .highlight-thumb-wrap::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%);
            pointer-events: none;
        }

        .highlight-play {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: rgba(10,10,10,0.85);
            border: 2px solid var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            transition: all 0.3s;
            backdrop-filter: blur(4px);
        }

        .highlight-play::before {
            content: '';
            width: 0;
            height: 0;
            border-left: 16px solid var(--white);
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            margin-left: 4px;
        }

        .highlight-info {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 16px 18px;
            z-index: 2;
            pointer-events: none;
        }

        .highlight-category {
            display: inline-block;
            font-family: var(--font-condensed);
            font-size: 0.62rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-weight: 700;
            padding: 3px 8px;
            margin-bottom: 6px;
            background: var(--red-primary);
            color: var(--white);
        }

        .highlight-category.cat-mål { background: var(--red-primary); }
        .highlight-category.cat-höjdpunkt { background: var(--gold); color: #1a1a1a; }
        .highlight-category.cat-träning { background: rgba(122,159,212,0.9); }
        .highlight-category.cat-intervju { background: rgba(197,165,90,0.9); color: #1a1a1a; }

        .highlight-title {
            font-family: var(--font-heading);
            font-size: 0.95rem;
            letter-spacing: 0.5px;
            color: var(--white);
            line-height: 1.25;
            text-shadow: 0 1px 3px rgba(0,0,0,0.8);
        }

        .highlight-date {
            font-family: var(--font-condensed);
            font-size: 0.7rem;
            letter-spacing: 1.5px;
            color: rgba(255,255,255,0.55);
            margin-top: 4px;
            text-transform: uppercase;
        }

        .highlights-empty {
            text-align: center;
            color: var(--white-dim);
            font-family: var(--font-condensed);
            letter-spacing: 2px;
            text-transform: uppercase;
            font-size: 0.85rem;
            padding: 60px 20px;
        }

        /* Video-lightbox för YouTube-embed */
        .video-lightbox {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.96);
            z-index: 3500;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
            backdrop-filter: blur(8px);
        }

        .video-lightbox.active {
            display: flex;
        }

        .video-lightbox-close {
            position: absolute;
            top: 20px;
            right: 24px;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.15);
            color: var(--white);
            width: 44px;
            height: 44px;
            font-size: 1.5rem;
            line-height: 1;
            cursor: pointer;
            transition: all 0.2s;
        }

        .video-lightbox-close:hover {
            background: var(--red-primary);
            border-color: var(--red-primary);
        }

        .video-lightbox-inner {
            width: 100%;
            max-width: 1100px;
        }

        .video-lightbox-iframe-wrap {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 */
            background: #000;
        }

        .video-lightbox-iframe-wrap iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        .video-lightbox-caption {
            margin-top: 18px;
            text-align: center;
            color: var(--white-dim);
            font-family: var(--font-condensed);
            font-size: 0.95rem;
            letter-spacing: 1px;
        }

        /* Story-embed video (:::video ID:::) */
        .story-video-embed {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%;
            margin: 32px 0;
            background: #000;
            overflow: hidden;
        }

        .story-video-embed iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        /* Highlights-knapp på matchkort */
        .match-highlights-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            background: rgba(196,30,58,0.15);
            border: 1px solid var(--red-primary);
            color: var(--white);
            font-family: var(--font-condensed);
            font-size: 0.72rem;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
        }

        .match-highlights-btn:hover {
            background: var(--red-primary);
        }

        .match-highlights-btn::before {
            content: '▶';
            font-size: 0.7rem;
        }

        @media (max-width: 900px) {
            .highlights-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
        }

        @media (max-width: 600px) {
            .highlights-grid { grid-template-columns: 1fr; gap: 10px; }
            .highlights-filter-btn { padding: 7px 14px; font-size: 0.7rem; letter-spacing: 1.5px; }
            .highlight-play { width: 52px; height: 52px; }
            .highlight-play::before { border-left-width: 13px; border-top-width: 8px; border-bottom-width: 8px; }
            .video-lightbox { padding: 20px 10px; }
        }

        /* ============================================
           LIGHTBOX
           ============================================ */

        .lightbox-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.95);
            z-index: 3000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }

        .lightbox-overlay.active {
            opacity: 1;
            pointer-events: all;
        }

        .lightbox-img {
            max-width: 90vw;
            max-height: 85vh;
            object-fit: contain;
            border-radius: 2px;
            transform: scale(0.9);
            transition: transform 0.3s;
        }

        .lightbox-overlay.active .lightbox-img {
            transform: scale(1);
        }

        .lightbox-close {
            position: absolute;
            top: 20px;
            right: 24px;
            background: none;
            border: none;
            color: var(--white-dim);
            font-size: 2rem;
            cursor: pointer;
            z-index: 3001;
            transition: color 0.3s;
        }

        .lightbox-close:hover { color: var(--white); }

        .lightbox-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(196, 30, 58, 0.6);
            border: none;
            color: var(--white);
            font-size: 1.5rem;
            cursor: pointer;
            padding: 12px 16px;
            transition: background 0.3s;
            z-index: 3001;
        }

        .lightbox-nav:hover { background: var(--red-primary); }
        .lightbox-prev { left: 16px; }
        .lightbox-next { right: 16px; }

        .lightbox-counter {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-family: var(--font-condensed);
            font-size: 0.8rem;
            letter-spacing: 2px;
            color: var(--white-dim);
        }

        @media (max-width: 600px) {
            .lightbox-nav { padding: 8px 12px; font-size: 1.2rem; }
            .lightbox-prev { left: 8px; }
            .lightbox-next { right: 8px; }
        }

        /* ============================================
           CALENDAR BUTTON
           ============================================ */
        .badge-calendar {
            background: rgba(255, 255, 255, 0.08);
            color: var(--white-dim);
            border: 1px solid rgba(255, 255, 255, 0.15);
            cursor: pointer;
            transition: all 0.3s;
            font-family: var(--font-condensed);
            font-size: 0.7rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 3px 10px;
            border-radius: 2px;
        }

        .badge-calendar:hover {
            background: rgba(255, 255, 255, 0.15);
            color: var(--white);
        }

        .instagram-icon {
            width: 20px;
            height: 20px;
        }

        /* ============================================
           SPONSORS BAR
           ============================================ */
        .sponsors {
            padding: 40px 0;
            background: var(--black);
            border-top: 1px solid rgba(255,255,255,0.04);
            border-bottom: 1px solid rgba(255,255,255,0.04);
        }

        .sponsors-inner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 60px;
            flex-wrap: wrap;
        }

        .sponsors-label {
            font-family: var(--font-condensed);
            font-size: 0.75rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--white-dim);
        }

        .sponsor-logo {
            height: 50px;
            width: auto;
            opacity: 0.6;
            transition: opacity 0.3s;
            filter: grayscale(30%);
        }

        .sponsor-logo:hover { opacity: 1; filter: none; }

        /* ============================================
           KONTAKT (CONTACT) SECTION
           ============================================ */
        .contact-content {
            max-width: 600px;
            margin: 0 auto;
            text-align: center;
        }

        .contact-content p {
            color: var(--white-dim);
            line-height: 1.8;
            margin-bottom: 32px;
        }

        .contact-links {
            display: flex;
            justify-content: center;
            gap: 24px;
            flex-wrap: wrap;
        }

        .contact-link {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 28px;
            border: 1px solid rgba(255,255,255,0.12);
            font-family: var(--font-condensed);
            font-weight: 600;
            font-size: 0.9rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            transition: all 0.3s;
        }

        .contact-link:hover {
            border-color: var(--red-primary);
            background: rgba(196, 30, 58, 0.1);
        }

        .contact-link svg {
            width: 18px;
            height: 18px;
        }

        /* ============================================
           FOOTER
           ============================================ */
        .footer {
            padding: 40px 0;
            background: var(--black);
            border-top: 3px solid var(--red-primary);
            box-shadow: 0 -4px 20px rgba(196, 30, 58, 0.2);
            position: relative;
        }

        .footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--red-glow), transparent);
            box-shadow: 0 0 15px rgba(255, 45, 85, 0.5);
        }

        .footer-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 16px;
        }

        .footer-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .footer-left img { height: 35px; }

        .footer-text {
            font-family: var(--font-condensed);
            font-size: 0.8rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--white-dim);
        }

        .footer-right {
            font-family: var(--font-body);
            font-size: 0.8rem;
            color: rgba(255,255,255,0.3);
        }

        /* ============================================
           ANIMATIONS
           ============================================ */
        @keyframes fadeInScale {
            from { opacity: 0; transform: scale(0.8); }
            to { opacity: 1; transform: scale(1); }
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
            40% { transform: translateX(-50%) translateY(-12px); }
            60% { transform: translateX(-50%) translateY(-6px); }
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }

        /* ENHANCED scroll reveal */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Staggered children for stats */
        .reveal-stagger > * {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .reveal-stagger.visible > * {
            opacity: 1;
            transform: translateY(0);
        }

        /* ============================================
           MOBILE NAV
           ============================================ */
        .mobile-nav {
            position: fixed;
            inset: 0;
            background: rgba(10, 10, 10, 0.98);
            z-index: 997;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }

        .mobile-nav.active {
            opacity: 1;
            pointer-events: all;
        }

        .mobile-nav-links {
            list-style: none;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .mobile-nav-links a {
            font-family: var(--font-display);
            font-size: 2.5rem;
            letter-spacing: 4px;
            color: var(--white);
            transition: color 0.3s;
        }

        .mobile-nav-links a:hover { color: var(--red-primary); }

        .mobile-nav-close {
            position: absolute;
            top: 24px;
            right: 24px;
            background: none;
            border: none;
            color: var(--white);
            font-size: 2rem;
            cursor: pointer;
            font-family: var(--font-body);
        }

        /* ============================================
           RESPONSIVE
           ============================================ */
        @media (max-width: 900px) {
            .nav-links { display: none; }
            .nav-hamburger {
                display: flex;
                position: relative;
                z-index: 1003;
            }

            .next-match-ticker {
                top: 70px;
                padding: 0;
                min-height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                box-shadow: 0 2px 10px rgba(196, 30, 58, 0.28);
                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            }

            .next-match-ticker-inner {
                width: 100%;
                justify-content: flex-start;
                gap: 10px;
                padding: 0 14px;
                font-size: 0.68rem;
                letter-spacing: 1.4px;
                white-space: nowrap;
                overflow: hidden;
            }

            .next-match-ticker .ticker-arrow {
                display: none;
            }

            #tickerText {
                display: inline-block;
                min-width: max-content;
                padding-left: 100%;
                animation: sportTickerScroll 16s linear infinite;
                will-change: transform;
            }

            .mobile-nav {
                top: 110px;
                bottom: 0;
                left: 0;
                right: 0;
                inset: auto 0 0 0;
                height: calc(100dvh - 110px);
                align-items: flex-start;
                justify-content: center;
                padding: 28px 24px 36px;
                overflow-y: auto;
                background: rgba(6, 6, 6, 0.94);
                backdrop-filter: blur(12px);
                border-top: 1px solid rgba(196, 30, 58, 0.22);
            }

            .mobile-nav-links {
                width: 100%;
                gap: 18px;
                padding-top: 8px;
            }

            .mobile-nav-links a {
                font-size: clamp(2.2rem, 8vw, 3rem);
                letter-spacing: 3px;
            }

            .mobile-nav-close {
                display: none;
            }

            .about-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .about-visual { order: -1; }
            .about-visual img { width: 200px; }

            .gallery-mosaic {
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: 180px 180px 180px;
                gap: 4px;
            }
            .gallery-mosaic .gallery-item:nth-child(1) {
                grid-column: 1 / 3;
                grid-row: 1;
            }
            .gallery-fs-grid { grid-template-columns: repeat(3, 1fr); }
            .gallery-fs-inner { padding: 20px 20px 48px; }
            .gallery-fs-heading { font-size: 1.8rem; letter-spacing: 2px; }

            .match-card {
                grid-template-columns: 1fr;
                text-align: center;
                gap: 12px;
                padding: 52px 16px 20px;
            }

            /* Resultat-kort: samma mobila padding som kommande (inte desktop 28/32) */
            .match-card.played {
                padding: 24px 16px 20px;
                text-align: center;
            }

            .match-team.home,
            .match-team.away { text-align: center; }

            /* På mobil: HEMMA → VS/score → BORTA → resten (venue/peek/knappar) */
            .match-center {
                display: contents;
            }
            .match-team.home { order: 1; }
            .match-center-top { order: 2; text-align: center; }
            .match-team.away { order: 3; }
            .match-center-bottom { order: 4; text-align: center; }

            /* Scoren stor även på mobil – överstyr ev. arvning */
            .match-result {
                font-size: 3.2rem !important;
                letter-spacing: 5px;
                text-align: center;
                display: block;
            }
            .match-vs { font-size: 1.5rem; }
            .match-vs::before, .match-vs::after { width: 16px; margin: 0 8px 4px; }
            .match-card::after { display: none; }
            /* Scorers centreras i mobilläge (texten raderna själva vänsterjusterade) */
            .match-card-scorers {
                max-width: 260px;
                text-align: left;
                width: fit-content;
                margin-left: auto;
                margin-right: auto;
            }

            /* Mobil: day-block flyttas till toppen av kortet, centrerad */
            .match-day-block {
                position: static;
                text-align: center;
                margin-bottom: 0;
                order: 0;
            }
            .match-day-time { justify-content: center; }

            .match-status-badge {
                top: 14px;
                left: 14px;
            }

            .match-card.next-match { padding-top: 70px; }
            .match-card.next-match .match-status-badge { top: 42px; }
            .match-next-label { font-size: 0.55rem; padding: 5px 10px; letter-spacing: 2px; }

            .about-stats {
                grid-template-columns: repeat(3, 1fr);
                gap: 12px;
            }

            .sponsor-logo { height: 40px; }
        }

        @media (max-width: 600px) {
            .hero-badge { width: 140px; }
            .section { padding: 70px 0; }
            .sponsors-inner { gap: 30px; }
            .footer-inner { justify-content: center; text-align: center; }

            .next-match-ticker {
                min-height: 38px;
            }

            .next-match-ticker-inner {
                font-size: 0.62rem;
                letter-spacing: 1px;
                gap: 8px;
                padding: 0 12px;
            }

            .mobile-nav {
                top: 108px;
                height: calc(100dvh - 108px);
                padding: 24px 18px 30px;
            }
        }
    
@media (max-width: 900px) {
    .about-visual img { width: 380px; }
}
@media (max-width: 600px) {
    .about-visual img { width: 300px; }
}

/* ============================================
   STORY HERO FEATURE (direkt efter main hero)
   ============================================ */
.section-story-hero {
    position: relative;
    background: var(--bg-section);
    padding: 0;
    overflow: hidden;
}

.story-feature {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    min-height: 520px;
    overflow: hidden;
    cursor: pointer;
    background: #0d0d0d;
}

.story-feature-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.story-feature-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
    transition: transform 8s ease, opacity 0.4s ease;
    transform: scale(1.02);
}

.story-feature:hover .story-feature-bg img {
    transform: scale(1.06);
    opacity: 0.7;
}

.story-feature-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.65) 55%, rgba(13,13,13,0.98) 100%),
        linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 55%, transparent 100%);
    pointer-events: none;
}

.story-feature-fallback {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(196,30,58,0.25), transparent 55%),
        radial-gradient(ellipse at 80% 70%, rgba(197,165,90,0.12), transparent 55%),
        linear-gradient(135deg, #1a1a1f 0%, #2a1518 55%, #1a1a1f 100%);
}

.story-feature-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 90px 48px 70px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 520px;
    justify-content: center;
}

.story-feature-label {
    font-family: var(--font-condensed);
    font-size: 0.72rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--red-glow);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.story-feature-label::before {
    content: '';
    width: 30px;
    height: 1px;
    background: var(--red-glow);
}

.story-feature-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 700;
    width: fit-content;
}

.story-feature-pill.interview { background: rgba(197,165,90,0.15); color: var(--gold); border: 1px solid rgba(197,165,90,0.4); }
.story-feature-pill.quickfire { background: rgba(196,30,58,0.2); color: var(--red-glow); border: 1px solid rgba(196,30,58,0.45); }
.story-feature-pill.portrait  { background: rgba(122,159,212,0.18); color: #7a9fd4; border: 1px solid rgba(122,159,212,0.4); }
.story-feature-pill.motm      { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.4); }
.story-feature-pill.video     { background: rgba(147,51,234,0.18); color: #c084fc; border: 1px solid rgba(147,51,234,0.4); }
.story-feature-pill.news      { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.15); }

.story-feature-title {
    font-family: var(--font-display);
    font-size: 4.2rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--white);
    line-height: 1.0;
    margin: 0;
    max-width: 820px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}

.story-feature-subtitle {
    font-family: var(--font-body);
    font-size: 1.15rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
    max-width: 620px;
    font-weight: 300;
    margin: 0;
}

.story-feature-meta {
    display: flex;
    gap: 14px;
    align-items: center;
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    margin-top: 6px;
    flex-wrap: wrap;
}

.story-feature-meta .dot {
    width: 3px;
    height: 3px;
    background: rgba(255,255,255,0.35);
    border-radius: 50%;
}

.story-feature-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    background: var(--red-primary);
    color: var(--white);
    font-family: var(--font-condensed);
    font-size: 0.82rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 700;
    border: 2px solid var(--red-primary);
    width: fit-content;
    margin-top: 16px;
    transition: all 0.3s;
    text-decoration: none;
}

.story-feature:hover .story-feature-cta {
    background: transparent;
    border-color: var(--red-glow);
    color: var(--red-glow);
    transform: translateX(4px);
}

/* Mindre kort under hero (grid-template-columns sätts inline baserat på antal extras) */
.story-feature-extras {
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 48px 12px;
    display: grid;
    gap: 20px;
    align-items: stretch;
}

.story-extra-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s;
    cursor: pointer;
    min-height: 120px;
}

.story-extra-card:hover {
    border-color: rgba(196,30,58,0.35);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.story-extra-card-label {
    font-family: var(--font-condensed);
    font-size: 0.62rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}

.story-extra-card-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    letter-spacing: 0.8px;
    color: var(--white);
    line-height: 1.25;
    text-transform: uppercase;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.story-extra-card-meta {
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    margin-top: auto;
}

/* Diskret "Se alla stories"-länk under featured-sektionen */
.story-see-all-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 48px 60px;
    text-align: center;
}

.story-see-all-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 6px;
    color: rgba(255,255,255,0.6);
    font-family: var(--font-condensed);
    font-size: 0.78rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    transition: all 0.2s;
}

.story-see-all-link:hover {
    color: var(--red-glow);
    border-bottom-color: var(--red-glow);
}

.story-see-all-arrow {
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.2s;
}

.story-see-all-link:hover .story-see-all-arrow {
    transform: translateX(4px);
}

/* Om inga extras finns: mindre padding ovanför "se alla"-länken */
.story-feature + .story-see-all-wrap {
    padding-top: 32px;
}

/* Tomt läge – hela sektionen döljs om inga stories finns */
.section-story-hero.is-empty { display: none; }

@media (max-width: 900px) {
    .story-feature { min-height: 440px; }
    .story-feature-content { padding: 70px 28px 50px; min-height: 440px; }
    .story-feature-title { font-size: 3rem; letter-spacing: 1.5px; }
    .story-feature-subtitle { font-size: 1rem; }
    .story-feature-extras {
        grid-template-columns: 1fr !important;
        padding: 24px 28px 12px;
        gap: 14px;
    }
    .story-see-all-wrap {
        padding: 18px 28px 48px;
    }
}

@media (max-width: 600px) {
    .story-feature { min-height: 380px; }
    .story-feature-content { padding: 50px 20px 40px; min-height: 380px; gap: 14px; }
    .story-feature-title { font-size: 2.2rem; letter-spacing: 1px; }
    .story-feature-subtitle { font-size: 0.95rem; }
    .story-feature-meta { font-size: 0.68rem; gap: 10px; }
    .story-feature-cta { padding: 12px 22px; font-size: 0.75rem; }
    .story-feature-extras { padding: 20px 20px 8px; }
    .story-see-all-wrap { padding: 14px 20px 40px; }
    .story-see-all-link { font-size: 0.72rem; letter-spacing: 2px; }
}