:root {
--bg: #05070b;
--bg-soft: #0b0f16;
--card: #101620;
--card-hover: #151d29;

--border: rgba(255, 255, 255, 0.08);

--accent: #00e676;
--accent-dark: #00b85f;

--text: #ffffff;
--text-soft: #d7dce4;
--muted: #8490a0;

--danger: #ff5969;

--header-height: 72px;

}

/* ==========================================
RESET
========================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }

html {
scroll-behavior: smooth;
}

body {
min-height: 100vh;

background:
    radial-gradient(
        circle at 15% 0%,
        rgba(0, 230, 118, 0.07),
        transparent 28%
    ),

    radial-gradient(
        circle at 90% 40%,
        rgba(0, 120, 255, 0.05),
        transparent 25%
    ),

    var(--bg);

color: var(--text);

font-family:
    "Inter",
    Arial,
    sans-serif;

overflow-x: hidden;

}

a {
color: inherit;
text-decoration: none;
}

button,
input {
font-family: inherit;
}

button {
cursor: pointer;
}

/* ==========================================
HEADER
========================================== */

.site-header {
position: sticky;

top: 0;

z-index: 1000;

height: var(--header-height);

background:
    rgba(5, 7, 11, 0.88);

border-bottom:
    1px solid var(--border);

backdrop-filter:
    blur(18px);

-webkit-backdrop-filter:
    blur(18px);

}

.header-inner {
width: min(
1200px,
calc(100% - 32px)
);

height: 100%;

margin: auto;

display: flex;

align-items: center;

justify-content: space-between;

gap: 25px;

}

/* ==========================================
LOGO
========================================== */

.logo {
display: flex;

align-items: center;

gap: 10px;

font-size: 20px;

font-weight: 900;

letter-spacing: -0.7px;

white-space: nowrap;

}

.logo > span:last-child span {
color: var(--accent);
}

.logo-mark {
width: 37px;
height: 37px;

display: flex;

align-items: center;
justify-content: center;

border-radius: 11px;

background:
    linear-gradient(
        135deg,
        var(--accent),
        var(--accent-dark)
    );

font-size: 18px;

box-shadow:
    0 8px 20px
    rgba(0, 230, 118, 0.15);

}

/* ==========================================
DESKTOP NAV
========================================== */

.desktop-nav {
display: flex;

align-items: center;

gap: 6px;

margin-left: auto;

}

.desktop-nav a {
position: relative;

padding:
    9px 12px;

border-radius: 9px;

color: var(--muted);

font-size: 13px;

font-weight: 600;

transition:
    color 0.2s ease,
    background 0.2s ease;

}

.desktop-nav a:hover {
color: var(--text);

background:
    rgba(255, 255, 255, 0.05);

}

.desktop-nav a.active {
color: var(--accent);
}

.desktop-nav a.active::after {
content: "";

position: absolute;

left: 12px;
right: 12px;

bottom: 2px;

height: 2px;

border-radius: 10px;

background: var(--accent);

}

/* ==========================================
HEADER ACTIONS
========================================== */

.header-actions {
display: flex;

align-items: center;

gap: 9px;

}

.search-button,
.menu-button {
width: 38px;
height: 38px;

display: flex;

align-items: center;
justify-content: center;

border:
    1px solid var(--border);

border-radius: 10px;

background:
    rgba(255, 255, 255, 0.04);

color: var(--text);

font-size: 15px;

transition:
    background 0.2s ease,
    transform 0.2s ease;

}

.search-button:hover,
.menu-button:hover {
background:
rgba(255, 255, 255, 0.08);

transform:
    translateY(-1px);

}

.menu-button {
display: none;
}

.account-button {
padding:
10px 15px;

border-radius:
    10px;

background:
    var(--accent);

color:
    #031009;

font-size:
    12px;

font-weight:
    800;

transition:
    transform 0.2s ease,
    filter 0.2s ease;

}

.account-button:hover {
transform:
translateY(-1px);

filter:
    brightness(1.05);

}

/* ==========================================
SEARCH BAR
========================================== */

.search-bar {
position: absolute;

left: 0;
right: 0;

top: 100%;

padding:
    0 0 14px;

background:
    rgba(5, 7, 11, 0.96);

border-bottom:
    1px solid var(--border);

opacity: 0;

visibility: hidden;

transform:
    translateY(-8px);

transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;

}

.search-bar.open {
opacity: 1;

visibility: visible;

transform:
    translateY(0);

}

.search-inner {
width: min(
700px,
calc(100% - 32px)
);

margin: auto;

display: flex;

gap: 8px;

}

.search-inner input {
flex: 1;

height: 45px;

padding:
    0 14px;

border:
    1px solid var(--border);

border-radius:
    10px;

outline: none;

background:
    var(--card);

color:
    var(--text);

}

.search-inner button {
padding:
0 18px;

border: none;

border-radius:
    10px;

background:
    var(--accent);

color:
    #031009;

font-weight:
    800;

}

/* ==========================================
MOBILE MENU
========================================== */

.mobile-menu {
display: none;

position: absolute;

top: 100%;

left: 0;
right: 0;

padding:
    10px 16px 18px;

background:
    rgba(5, 7, 11, 0.98);

border-bottom:
    1px solid var(--border);

}

.mobile-menu.open {
display: flex;

flex-direction: column;

gap: 4px;

}

.mobile-menu a {
padding:
13px;

border-radius:
    10px;

color:
    var(--text-soft);

font-size:
    14px;

font-weight:
    600;

}

.mobile-menu a:hover {
background:
rgba(255, 255, 255, 0.05);

color:
    var(--accent);

}

/* ==========================================
MAIN
========================================== */

main {
width: 100%;
}

/* ==========================================
HERO
========================================== */

.hero {
position: relative;

width: min(
    1200px,
    calc(100% - 32px)
);

min-height:
    420px;

margin:
    30px auto 0;

padding:
    60px;

display: flex;

align-items: center;

overflow: hidden;

border:
    1px solid var(--border);

border-radius:
    26px;

background:
    linear-gradient(
        120deg,
        #0d1820 0%,
        #091019 48%,
        #08100c 100%
    );

box-shadow:
    0 25px 70px
    rgba(0, 0, 0, 0.25);

}

.hero::before {
content: "";

position: absolute;

width: 500px;
height: 500px;

right: -170px;
top: -190px;

border-radius: 50%;

background:
    rgba(0, 230, 118, 0.10);

filter:
    blur(60px);

}

.hero-content {
position: relative;

z-index: 2;

max-width:
    600px;

}

.hero-label {
display: inline-flex;

align-items: center;

gap: 8px;

margin-bottom:
    17px;

padding:
    7px 11px;

border:
    1px solid
    rgba(0, 230, 118, 0.18);

border-radius:
    999px;

background:
    rgba(0, 230, 118, 0.07);

color:
    var(--accent);

font-size:
    10px;

font-weight:
    800;

letter-spacing:
    0.8px;

}

.live-dot {
width: 7px;
height: 7px;

border-radius: 50%;

background:
    var(--accent);

box-shadow:
    0 0 10px
    var(--accent);

animation:
    pulse 1.6s infinite;

}

@keyframes pulse {

0%,
100% {
    opacity: 1;
}

50% {
    opacity: 0.35;
}

}

.hero h1 {
font-size:
clamp(42px, 6vw, 72px);

line-height:
    0.98;

letter-spacing:
    -3.5px;

font-weight:
    900;

}

.hero h1 span {
color:
var(--accent);
}

.hero p {
max-width:
520px;

margin-top:
    20px;

color:
    var(--muted);

font-size:
    15px;

line-height:
    1.7;

}

.hero-buttons {
display: flex;

align-items: center;

gap: 10px;

margin-top:
    27px;

}

.primary-button,
.secondary-button {
display: inline-flex;

align-items: center;
justify-content: center;

min-height:
    45px;

padding:
    0 17px;

border-radius:
    11px;

font-size:
    12px;

font-weight:
    800;

transition:
    transform 0.2s ease,
    background 0.2s ease;

}

.primary-button {
background:
var(--accent);

color:
    #031009;

}

.primary-button:hover {
transform:
translateY(-2px);

background:
    #35f59a;

}

.secondary-button {
border:
1px solid var(--border);

background:
    rgba(255, 255, 255, 0.04);

color:
    var(--text);

}

.secondary-button:hover {
transform:
translateY(-2px);

background:
    rgba(255, 255, 255, 0.08);

}

.hero-ball {
position: absolute;

right: 80px;

font-size:
    170px;

opacity:
    0.09;

transform:
    rotate(-18deg);

filter:
    grayscale(1);

user-select:
    none;

}

/* ==========================================
SECTIONS
========================================== */

.section {
width: min(
1200px,
calc(100% - 32px)
);

margin:
    70px auto 0;

}

.section-header {
display: flex;

align-items: flex-end;

justify-content: space-between;

gap: 20px;

margin-bottom:
    20px;

}

.section-kicker {
margin-bottom:
6px;

color:
    var(--accent);

font-size:
    10px;

font-weight:
    800;

letter-spacing:
    1.3px;

}

.section h2 {
font-size:
25px;

font-weight:
    800;

letter-spacing:
    -0.8px;

}

.view-all {
color:
var(--accent);

font-size:
    12px;

font-weight:
    700;

}

.view-all:hover {
text-decoration:
underline;
}

.season-badge {
padding:
7px 10px;

border:
    1px solid var(--border);

border-radius:
    8px;

background:
    rgba(255, 255, 255, 0.04);

color:
    var(--muted);

font-size:
    11px;

font-weight:
    700;

}

/* ==========================================
MATCH GRID
========================================== */

.match-grid {
display:
grid;

grid-template-columns:
    repeat(3, 1fr);

gap:
    12px;

}

.match-card {
position: relative;

min-height:
    180px;

padding:
    20px;

border:
    1px solid var(--border);

border-radius:
    16px;

background:
    var(--card);

text-align:
    center;

transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;

}

.match-card:hover {
transform:
translateY(-3px);

border-color:
    rgba(0, 230, 118, 0.18);

background:
    var(--card-hover);

}

.match-status {
display:
inline-block;

margin-bottom:
    10px;

padding:
    5px 8px;

border-radius:
    999px;

background:
    rgba(0, 230, 118, 0.08);

color:
    var(--accent);

font-size:
    9px;

font-weight:
    800;

}

.match-date {
margin-bottom:
20px;

color:
    var(--muted);

font-size:
    11px;

}

.match-team {
font-size:
14px;

font-weight:
    700;

}

.match-vs {
margin:
8px 0;

color:
    #5e6877;

font-size:
    10px;

font-weight:
    800;

}

/* ==========================================
NEWS
========================================== */

.news-grid {
display:
grid;

grid-template-columns:
    1.35fr 1fr;

gap:
    15px;

}

.featured-news {
overflow:
hidden;

border:
    1px solid var(--border);

border-radius:
    17px;

background:
    var(--card);

}

.news-image {
height:
240px;

display:
    flex;

align-items:
    center;

justify-content:
    center;

font-size:
    70px;

}

.placeholder-image {
background:
linear-gradient(
135deg,
#102019,
#0a1118
);

color:
    rgba(255, 255, 255, 0.12);

}

.news-content {
padding:
20px;
}

.news-category,
.small-news span {
color:
var(--accent);

font-size:
    10px;

font-weight:
    800;

text-transform:
    uppercase;

letter-spacing:
    0.6px;

}

.news-content h3 {
margin-top:
8px;

font-size:
    21px;

line-height:
    1.25;

}

.news-content p {
margin-top:
9px;

color:
    var(--muted);

font-size:
    12px;

line-height:
    1.6;

}

.news-time {
display:
block;

margin-top:
    15px;

color:
    #647080;

font-size:
    10px;

}

.small-news-list {
display:
flex;

flex-direction:
    column;

gap:
    10px;

}

.small-news {
min-height:
110px;

padding:
    12px;

display:
    flex;

gap:
    13px;

border:
    1px solid var(--border);

border-radius:
    14px;

background:
    var(--card);

transition:
    transform 0.2s ease,
    background 0.2s ease;

}

.small-news:hover {
transform:
translateX(3px);

background:
    var(--card-hover);

}

.small-news-image {
width:
88px;

min-width:
    88px;

height:
    86px;

display:
    flex;

align-items:
    center;

justify-content:
    center;

border-radius:
    10px;

background:
    #151d27;

font-size:
    25px;

}

.small-news h3 {
margin-top:
5px;

font-size:
    13px;

line-height:
    1.35;

}

.small-news p {
margin-top:
6px;

color:
    var(--muted);

font-size:
    10px;

}

/* ==========================================
TABLE
========================================== */

.table-wrapper {
overflow-x:
auto;

border:
    1px solid var(--border);

border-radius:
    15px;

background:
    var(--card);

}

table {
width:
100%;

border-collapse:
    collapse;

min-width:
    650px;

}

th {
padding:
13px 15px;

background:
    rgba(255, 255, 255, 0.025);

color:
    var(--muted);

font-size:
    10px;

font-weight:
    800;

text-align:
    center;

text-transform:
    uppercase;

}

th:nth-child(2),
td:nth-child(2) {
text-align:
left;
}

td {
padding:
13px 15px;

border-top:
    1px solid var(--border);

color:
    var(--text-soft);

font-size:
    12px;

text-align:
    center;

}

td:first-child {
width:
45px;

color:
    var(--muted);

}

td:last-child {
color:
var(--accent);
}

tr:hover td {
background:
rgba(255, 255, 255, 0.025);
}

/* ==========================================
PLAYER GRID
========================================== */

.player-grid {
display:
grid;

grid-template-columns:
    repeat(3, 1fr);

gap:
    12px;

}

.player-card {
position:
relative;

padding:
    17px;

display:
    flex;

align-items:
    center;

gap:
    12px;

border:
    1px solid var(--border);

border-radius:
    15px;

background:
    var(--card);

transition:
    transform 0.2s ease,
    background 0.2s ease;

}

.player-card:hover {
transform:
translateY(-3px);

background:
    var(--card-hover);

}

.player-rank {
position:
absolute;

top:
    9px;

right:
    10px;

color:
    #4e5969;

font-size:
    9px;

font-weight:
    800;

}

.player-avatar {
width:
48px;

height:
    48px;

min-width:
    48px;

display:
    flex;

align-items:
    center;

justify-content:
    center;

border-radius:
    13px;

background:
    rgba(0, 230, 118, 0.08);

font-size:
    21px;

}

.player-info {
min-width:
0;

flex:
    1;

}

.player-info h3 {
overflow:
hidden;

white-space:
    nowrap;

text-overflow:
    ellipsis;

font-size:
    13px;

}

.player-info span {
display:
block;

margin-top:
    5px;

color:
    var(--muted);

font-size:
    10px;

}

.player-points {
display:
flex;

flex-direction:
    column;

align-items:
    flex-end;

}

.player-points strong {
color:
var(--accent);

font-size:
    17px;

}

.player-points span {
color:
var(--muted);

font-size:
    8px;

font-weight:
    800;

}

/* ==========================================
FIXTURE LIST
========================================== */

.fixture-list {
display:
flex;

flex-direction:
    column;

gap:
    8px;

}

.fixture-card {
display:
grid;

grid-template-columns:
    100px 1fr 70px;

align-items:
    center;

gap:
    20px;

padding:
    16px 18px;

border:
    1px solid var(--border);

border-radius:
    13px;

background:
    var(--card);

transition:
    background 0.2s ease,
    transform 0.2s ease;

}

.fixture-card:hover {
background:
var(--card-hover);

transform:
    translateX(3px);

}

.fixture-date {
display:
flex;

flex-direction:
    column;

gap:
    4px;

}

.fixture-date strong {
font-size:
12px;
}

.fixture-date span {
color:
var(--accent);

font-size:
    10px;

font-weight:
    700;

}

.fixture-teams {
display:
flex;

align-items:
    center;

gap:
    10px;

font-size:
    13px;

font-weight:
    700;

}

.fixture-teams b {
color:
#566170;

font-size:
    9px;

}

.fixture-gameweek {
color:
var(--muted);

font-size:
    10px;

font-weight:
    700;

text-align:
    right;

}

/* ==========================================
LOADING
========================================== */

.loading-card,
.empty-card,
.error-card {
min-height:
130px;

display:
    flex;

align-items:
    center;

justify-content:
    center;

padding:
    20px;

border:
    1px solid var(--border);

border-radius:
    15px;

background:
    var(--card);

color:
    var(--muted);

font-size:
    12px;

}

.loading-spinner {
width:
17px;

height:
    17px;

margin-right:
    9px;

border:
    2px solid
    rgba(255, 255, 255, 0.1);

border-top-color:
    var(--accent);

border-radius:
    50%;

animation:
    spin 0.8s linear infinite;

}

@keyframes spin {

to {
    transform:
        rotate(360deg);
}

}

.error-card {
color:
var(--danger);
}

.table-loading {
padding:
20px;

text-align:
    center;

color:
    var(--muted);

}

/* ==========================================
FOOTER
========================================== */

.site-footer {
margin-top:
90px;

padding:
    35px 0;

border-top:
    1px solid var(--border);

background:
    #070a0f;

}

.footer-inner {
width:
min(
1200px,
calc(100% - 32px)
);

margin:
    auto;

display:
    grid;

grid-template-columns:
    1fr auto;

gap:
    20px;

align-items:
    center;

}

.footer-brand p {
margin-top:
8px;

color:
    var(--muted);

font-size:
    11px;

}

.footer-links {
display:
flex;

gap:
    18px;

}

.footer-links a {
color:
var(--muted);

font-size:
    11px;

font-weight:
    600;

}

.footer-links a:hover {
color:
var(--accent);
}

.copyright {
grid-column:
1 / -1;

padding-top:
    18px;

border-top:
    1px solid var(--border);

color:
    #535e6d;

font-size:
    10px;

}

/* ==========================================
TABLET
========================================== */

@media (max-width: 850px) {

.desktop-nav {
    display:
        none;
}


.menu-button {
    display:
        flex;
}


.hero {
    padding:
        45px 35px;

    min-height:
        390px;
}


.hero-ball {
    right:
        25px;

    font-size:
        130px;
}


.match-grid {
    grid-template-columns:
        repeat(2, 1fr);
}


.player-grid {
    grid-template-columns:
        repeat(2, 1fr);
}


.news-grid {
    grid-template-columns:
        1fr;
}

}

/* ==========================================
MOBILE
========================================== */

@media (max-width: 600px) {

:root {
    --header-height:
        64px;
}


.header-inner {
    width:
        calc(100% - 22px);
}


.account-button {
    display:
        none;
}


.hero {
    width:
        calc(100% - 22px);

    min-height:
        400px;

    margin-top:
        18px;

    padding:
        35px 24px;

    border-radius:
        20px;

    align-items:
        flex-end;
}


.hero h1 {
    font-size:
        44px;

    letter-spacing:
        -2.4px;
}


.hero p {
    font-size:
        13px;
}


.hero-ball {
    right:
        5px;

    top:
        30px;

    font-size:
        110px;
}


.section {
    width:
        calc(100% - 22px);

    margin-top:
        50px;
}


.section-header {
    align-items:
        center;
}


.section h2 {
    font-size:
        21px;
}


.match-grid {
    grid-template-columns:
        1fr;
}


.match-card {
    min-height:
        155px;
}


.player-grid {
    grid-template-columns:
        1fr;
}


.fixture-card {
    grid-template-columns:
        72px 1fr;

    gap:
        12px;
}


.fixture-gameweek {
    display:
        none;
}


.fixture-teams {
    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        4px;
}


.fixture-teams b {
    display:
        none;
}


.news-image {
    height:
        190px;
}


.footer-inner {
    grid-template-columns:
        1fr;
}


.footer-links {
    flex-wrap:
        wrap;
}


.copyright {
    grid-column:
        auto;
}

}

/* ==========================================
SMALL PHONES
========================================== */

@media (max-width: 380px) {

.hero h1 {
    font-size:
        38px;
}


.hero-buttons {
    flex-direction:
        column;

    align-items:
        stretch;
}


.primary-button,
.secondary-button {
    width:
        100%;
}


.small-news-image {
    width:
        65px;

    min-width:
        65px;

    height:
        65px;
}

}

/* ==========================================
ACCESSIBILITY
========================================== */

:focus-visible {
outline:
2px solid var(--accent);

outline-offset:
    3px;

}

@media (prefers-reduced-motion: reduce) {

*,
*::before,
*::after {

    animation-duration:
        0.01ms !important;

    animation-iteration-count:
        1 !important;

    scroll-behavior:
        auto !important;

    transition-duration:
        0.01ms !important;
}

}