/* ===== GLOBAL ===== */

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    color: white;
    text-align: center;
    margin: 0;
    padding: 0;

    background:
        linear-gradient(
            rgba(2, 6, 23, 0.38),
            rgba(2, 6, 23, 0.70)
        ),
        url("images/stadium-bg.png");

    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;

    background:
        radial-gradient(circle at 50% 12%, rgba(56,189,248,0.10), transparent 32%),
        linear-gradient(
            180deg,
            rgba(2,6,23,0.02),
            rgba(2,6,23,0.34) 48%,
            rgba(2,6,23,0.76)
        );
}

/* ===== ELEVEN DNA BANNER ===== */

#appBanner,
.appBanner {
    position: relative;
    overflow: hidden;
    padding: 16px 20px 14px;
    margin-bottom: 24px;

    background:
        linear-gradient(
            180deg,
            rgba(2, 6, 23, 0.54),
            rgba(2, 6, 23, 0.18)
        );

    backdrop-filter: blur(3px);

    border-bottom: 1px solid rgba(96,165,250,0.12);
    box-shadow: none;
}

#appBanner::before,
#appBanner::after {
    display: none;
}

.bannerContent {
    position: relative;
    z-index: 2;
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.bannerLogoContainer {
    width: 100%;
    display: flex;
    justify-content: center;
}

.siteLogoWide {
    width: 600px;
    max-width: 90vw;
    height: auto;
    display: block;
    margin: 0;
    filter: drop-shadow(0 14px 34px rgba(0,0,0,0.6));
}

.bannerButtonContainer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bannerButton,
.supportButton,
.feedbackButton,
.devButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 320px;
    height: 44px;
    padding: 0 16px;

    border-radius: 8px;

    border: 1px solid rgba(96,165,250,0.55);

    background:
        linear-gradient(
            180deg,
            rgba(8,18,45,0.95),
            rgba(4,8,24,0.98)
        );

    color: #eaf3ff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;

    box-shadow:
        0 8px 20px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.12);

    cursor: pointer;

    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        background 0.18s ease;
}

.bannerButton:hover,
.supportButton:hover,
.feedbackButton:hover,
.devButton:hover {
    transform: translateY(-2px);

    filter: brightness(1.05);

    background:
        linear-gradient(
            180deg,
            rgba(20,35,85,0.98),
            rgba(8,18,45,1)
        );

    box-shadow:
        0 0 16px rgba(96,165,250,0.25),
        0 8px 20px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.12);
}

.versionBadge,
.brandText,
.bannerTagline,
.logoLockup,
.bannerText {
    display: none;
}

.bannerShapes {
    display: none;
}

.shape {
    position: absolute;
    opacity: 0.14;
}

.shape1 {
    width: 130px;
    height: 130px;
    background: radial-gradient(circle, rgba(255,255,255,0.65) 0%, transparent 70%);
    border-radius: 50%;
    top: -50px;
    left: 15%;
}

.shape2 {
    width: 110px;
    height: 110px;
    background: linear-gradient(45deg, rgba(255,255,255,0.25), transparent 75%);
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    bottom: -36px;
    left: 8%;
}

.shape3 {
    width: 95px;
    height: 95px;
    background: rgba(255,255,255,0.12);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transform: rotate(45deg);
    bottom: 18px;
    right: 17%;
}

.shape4 {
    width: 180px;
    height: 3px;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.7), rgba(236, 72, 153, 0.7));
    top: 48%;
    left: 10%;
    transform: rotate(18deg);
    opacity: 0.28;
}

.bannerVersion {
    position: absolute;
    right: 18px;
    bottom: 12px;

    padding: 4px 10px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;

    color: rgba(191, 219, 254, 0.85);

    background: rgba(96, 165, 250, 0.08);

    border: 1px solid rgba(96, 165, 250, 0.18);

    border-radius: 999px;

    backdrop-filter: blur(6px);

    z-index: 5;
}

/* ===== TEAM NAME AREA ===== */

#teamNameArea {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

#teamNameArea label {
    font-weight: bold;
}

#teamNameArea input {
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #555;
    width: 220px;
    background-color: #111;
    color: white;
}

#teamNameArea input::placeholder {
    color: #888;
}

#teamNameArea button {
    padding: 8px 14px;
}

/* ===== MAIN GAME LAYOUT ===== */

#gameArea {
    display: grid;
    grid-template-columns: 240px minmax(720px, 1fr) 240px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        ". draft ."
        "team draft squad";
    gap: 20px;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    align-items: start;
}

#teamStrengthPanel {
    grid-area: team;
}

#draftArea {
    grid-area: draft;
}

/* ===== SQUAD PANEL ===== */

#squadPanel {
    grid-area: squad;
}

#gameArea.simulationActive {
    display: block;
    padding: 0 20px;
    width: 100%;
    max-width: none;
}

#gameArea.simulationActive #draftArea {
    width: 100%;
    max-width: none;
}

#gameArea.simulationActive #teamStrengthPanel {
    display: none;
}

/* ===== DRAFT AREA ===== */

#playerChoices {
    width: 100%;
}

#playerChoices h2 {
    width: 100%;
    margin-bottom: 16px;
}

#playerChoices .playerOptionsWrapper {
    position: relative;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 18px;

    padding: 20px;

    background:
        linear-gradient(
            180deg,
            rgba(2,6,23,0.38),
            rgba(2,6,23,0.58)
        );

    backdrop-filter: blur(8px);

    border: 1px solid rgba(125,211,252,0.12);
    border-radius: 22px;

    box-shadow:
        0 12px 32px rgba(0,0,0,0.28);

    overflow: visible;
}

#playerChoices .playerOptionsWrapper::before {
    display: none;
}

#playerChoices .playerOptionsWrapper::after {
    display: none;
}

#playerChoices .playerOptionsWrapper .tacticalLine {
    position: absolute;
}

#playerChoices .playerOptionsWrapper > * {
    position: relative;
    z-index: 2;
}

.draftingLabel {
    width: 100%;
    margin: 0 0 14px 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #7dd3fc;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    text-shadow: 0 0 14px rgba(125,211,252,0.20);
}

.draftButtonsContainer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.draftButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 190px;
    height: 44px;
    padding: 0 20px;

    border-radius: 999px;
    border: 1px solid rgba(125,211,252,0.28);

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.70),
            rgba(2,6,23,0.88)
        );

    color: #e0f2fe;

    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    cursor: pointer;

    box-shadow:
        0 10px 24px rgba(0,0,0,0.30),
        inset 0 1px 0 rgba(255,255,255,0.06);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.draftButton:hover {
    transform: translateY(-2px);
    border-color: rgba(125,211,252,0.62);

    background:
        linear-gradient(
            180deg,
            rgba(30,64,175,0.38),
            rgba(2,6,23,0.92)
        );

    box-shadow:
        0 0 16px rgba(125,211,252,0.18),
        0 12px 28px rgba(0,0,0,0.36),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

.draftButton:active {
    transform: translateY(0);
}

.draftButtonRandom {
    border-color: rgba(125,211,252,0.34);
}

.draftButtonRandom:hover {
    border-color: rgba(125,211,252,0.72);
}

.draftButtonAuto {
    border-color: rgba(168,85,247,0.38);
}

.draftButtonAuto:hover {
    border-color: rgba(192,132,252,0.72);
    box-shadow:
        0 0 16px rgba(168,85,247,0.20),
        0 12px 28px rgba(0,0,0,0.36),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

.playerCard {
    position: relative;
    overflow: hidden;
    width: 260px;
    min-height: 420px;
    padding: 18px;
    border-radius: 22px;

    background:
        radial-gradient(circle at 78% 18%, var(--positionWash), transparent 34%),
        radial-gradient(circle at 20% 0%, rgba(255,255,255,0.08), transparent 26%),
        linear-gradient(160deg, #16243f 0%, #0b1222 54%, #05070f 100%),
        linear-gradient(90deg, rgba(255,255,255,0.05), transparent 15%, transparent 85%, rgba(255,255,255,0.05));

    border: 1px solid rgba(255,255,255,0.10);

    box-shadow:
        0 0 0 1px rgba(255,255,255,0.05) inset,
        0 0 0 2px rgba(255,255,255,0.04),
        0 0 0 4px rgba(59,130,246,0.08),
        0 16px 38px rgba(0,0,0,0.58),
        0 0 20px rgba(255,255,255,0.06),
        0 0 30px rgba(59,130,246,0.14);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.playerCard::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 16px;
    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent 47%,
            rgba(255,255,255,0.05) 52%,
            transparent 57%
        ),
        url("images/eleven-dna-logo.png");

    background-repeat: no-repeat;
    background-position: center 42%;
    background-size: 260px auto;

    opacity: 0.06;

    border: 1px solid rgba(255,255,255,0.08);
}
.playerCard::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 7px;
    background: var(--positionAccent);
    box-shadow: 0 0 18px var(--positionGlow);
    pointer-events: none;
}

.playerCard:hover {
    transform: translateY(-6px) scale(1.025);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.16) inset,
        0 0 0 3px rgba(255,255,255,0.04),
        0 0 0 4px var(--positionAccent),
        0 22px 52px rgba(0,0,0,0.62),
        0 0 24px var(--positionGlow);
}

.playerCard .cardHeader,
.playerCard .cardBody {
    position: relative;
    z-index: 2;
}

.playerCard .cardHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.16);
}

.playerCard .cardHeader h3 {
    margin: 0;
    font-size: 21px;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}

.playerCard .playerPosition {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 7px 18px;
    border-radius: 999px;
    background: var(--positionAccent);
    color: #07111f;
    font-weight: 900;
    letter-spacing: 0.08em;
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.28) inset,
        0 8px 18px var(--positionGlow);
}

.position-GK {
    --positionAccent: #4ade80;
    --positionBorder: rgba(74,222,128,0.65);
    --positionGlow: rgba(74,222,128,0.24);
    --positionWash: rgba(74,222,128,0.16);
}

.position-LB,
.position-CB,
.position-RB {
    --positionAccent: #38bdf8;
    --positionBorder: rgba(56,189,248,0.65);
    --positionGlow: rgba(56,189,248,0.24);
    --positionWash: rgba(56,189,248,0.16);
}

.position-CM {
    --positionAccent: #facc15;
    --positionBorder: rgba(250,204,21,0.65);
    --positionGlow: rgba(250,204,21,0.24);
    --positionWash: rgba(250,204,21,0.16);
}

.position-LW,
.position-RW,
.position-ST {
    --positionAccent: #ef4444;
    --positionBorder: rgba(239,68,68,0.65);
    --positionGlow: rgba(239,68,68,0.24);
    --positionWash: rgba(239,68,68,0.16);
}

.traitList {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    text-align: left;
}

.traitTooltip,
.traitList li {
    position: relative;
    cursor: default;
    padding: 7px 10px;
    border-radius: 999px;
    font-weight: 700;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
}

.traitTooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);

    width: 230px;
    padding: 10px 12px;

    background: #111827;
    color: #f3f4f6;

    border: 1px solid rgba(96,165,250,0.65);
    border-radius: 10px;

    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
    text-align: left;

    box-shadow: 0 12px 30px rgba(0,0,0,0.45);

    opacity: 0;
    pointer-events: none;
    z-index: 9999;

    transition: opacity 0.18s ease, transform 0.18s ease;
}

.traitTooltip:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-3px);
}
.traitGood,
.traitList li.traitGood {
    color: #7ed67e !important;
    background: rgba(126,214,126,0.14) !important;
    border-color: rgba(126,214,126,0.35) !important;
}

.traitBad,
.traitList li.traitBad {
    color: #ff7a7a !important;
    background: rgba(255,122,122,0.14) !important;
    border-color: rgba(255,122,122,0.35) !important;
}

.traitMixed,
.traitList li.traitMixed {
    color: #ffb347 !important;
    background: rgba(255,179,71,0.14) !important;
    border-color: rgba(255,179,71,0.35) !important;
}

.traitNeutral,
.traitList li.traitNeutral {
    color: #c4c4c4;
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.10);
}

.traitEmpty,
.traitList li.traitEmpty {
    visibility: hidden !important;
}

.selectButton {
    width: 100%;
    padding: 12px 0;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(125,211,252,0.18),
            rgba(59,130,246,0.12)
        );

    color: #e0f2fe;
    font-weight: 800;
    letter-spacing: 0.04em;

    border: 1px solid rgba(125,211,252,0.32);

    cursor: pointer;

    transition: all 0.2s ease;

    box-shadow:
        0 6px 18px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

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

    border-color: rgba(125,211,252,0.6);

    background:
        linear-gradient(
            180deg,
            rgba(125,211,252,0.28),
            rgba(168,85,247,0.14)
        );

    box-shadow:
        0 0 16px rgba(125,211,252,0.16),
        0 10px 24px rgba(0,0,0,0.3);
}

.selectButton:active {
    transform: translateY(0);
}

#playerChoices .playerCard button {
    cursor: pointer;
}

#squadPanel {
    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.62),
            rgba(2,6,23,0.78)
        );
    backdrop-filter: blur(10px);
    border: 1px solid rgba(125,211,252,0.24);
    border-radius: 18px;
    padding: 14px;
    width: 240px;
    min-height: 360px;
    box-shadow:
        0 16px 36px rgba(0,0,0,0.38),
        inset 0 1px 0 rgba(255,255,255,0.06);
}

#squadPanel h2 {
    display: none;
    margin: 0;
    font-size: 0;
    line-height: 0;
}

.squadPanelHeader {
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    color: #7dd3fc;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.3px;
    border-bottom: 1px solid rgba(125,211,252,0.18);
}

#draftedList {
    display: grid;
    gap: 4px;
}

#draftedList p {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    background: rgba(15,23,42,0.44);
    border: 1px solid rgba(125,211,252,0.10);
    padding: 8px 10px;
    border-radius: 12px;
    margin: 0;
    box-shadow: none;
    font-size: 12px;
    line-height: 1.2;
    min-height: 34px;
}

#draftedList .playerNameHover {
    flex: 1 1 auto;
    min-width: 0;
}

#draftedList .squadPlayerPositionChip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--positionAccent, rgba(59,130,246,0.16));
    color: #07111f;
    font-weight: 800;
    letter-spacing: 0.06em;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08) inset,
        0 3px 8px rgba(0,0,0,0.10);
}

#draftedList .squadPlayerPositionChip.position-GK {
    --positionAccent: #4ade80;
}

#draftedList .squadPlayerPositionChip.position-LB,
#draftedList .squadPlayerPositionChip.position-CB,
#draftedList .squadPlayerPositionChip.position-RB {
    --positionAccent: #38bdf8;
}

#draftedList .squadPlayerPositionChip.position-CM {
    --positionAccent: #facc15;
}

#draftedList .squadPlayerPositionChip.position-LW,
#draftedList .squadPlayerPositionChip.position-RW,
#draftedList .squadPlayerPositionChip.position-ST {
    --positionAccent: #ef4444;
}

#draftedList .playerNameHover {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    min-width: 90px;
    background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(168,85,247,0.18));
    border: 1px solid rgba(96,165,250,0.18);
    color: #dbeafe;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    border-bottom: none;
    transition:
        transform 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

#draftedList .playerNameHover:hover,
#draftedList .playerNameHover:focus {
    transform: translateY(-1px);
    background: linear-gradient(135deg, rgba(59,130,246,0.26), rgba(168,85,247,0.24));
    box-shadow: 0 12px 24px rgba(59,130,246,0.18);
    outline: none;
}

#draftedList .playerNameHover:focus-visible {
    outline: 2px solid rgba(59,130,246,0.75);
    outline-offset: 2px;
}

.teamNameLabel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #22d3ee 0%, #2563eb 100%);
    color: white;
    font-weight: 700;
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    text-align: center;
    margin-bottom: 14px;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
}

button {
    padding: 8px 14px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
}


/* ===== TACTICS SCREEN ===== */

.tacticsBox {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 10px;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.58),
            rgba(2,6,23,0.76)
        );

    backdrop-filter: blur(10px);

    border: 1px solid rgba(125,211,252,0.22);
    border-radius: 20px;

    box-shadow:
        0 16px 36px rgba(0,0,0,0.36),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

.tacticsRow {
    display: grid;
    grid-template-columns: 160px 1fr;

    gap: 10px;

    padding: 4px 8px;
    margin-bottom: 2px;

    background: rgba(15,23,42,0.36);

    border: 1px solid rgba(125,211,252,0.10);
    border-radius: 10px;
}

.tacticsRow label {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: rgba(226,232,240,0.78);
    font-size: 11px;
    margin: 0;
    text-align: left;
}

.tacticsOptionGroup {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 8px;
}

.tacticsOptionButton,
#simulateButton {
    font-family: inherit;
    text-align: center;
    line-height: 1.1;
}

.tacticsOptionButton {
    min-height: 32px;
    padding: 6px 8px;

    border-radius: 12px;
    border: 1px solid rgba(125,211,252,0.20);

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.70),
            rgba(2,6,23,0.86)
        );

    color: #e2e8f0;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease;
}

.tacticsOptionButton:hover {
    transform: translateY(-1px);
    border-color: rgba(125,211,252,0.50);
    background:
        linear-gradient(
            180deg,
            rgba(30,64,175,0.34),
            rgba(2,6,23,0.90)
        );
}

.tacticsOptionButton.active {
    background:
        linear-gradient(
            180deg,
            rgba(59,130,246,0.92),
            rgba(37,99,235,0.92)
        );

    border-color: rgba(147,197,253,0.80);
    color: #ffffff;

    box-shadow:
        0 0 14px rgba(59,130,246,0.22),
        inset 0 1px 0 rgba(255,255,255,0.12);
}

.tacticsOptionButton.active:hover {
    transform: translateY(-1px);
}

#simulateButton {
    width: 100%;
    height: 42px;
    margin-top: 8px;
    justify-self: stretch;
}

@media (max-width: 900px) {
    .tacticsRow {
        grid-template-columns: 1fr;
    }

    .tacticsRow label {
        text-align: center;
    }

    .tacticsOptionGroup {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .tacticsOptionGroup {
        grid-template-columns: 1fr;
    }
}


/* ===== GAME MODE SCREEN ===== */

.gameModeScreen {
    width: 100%;
    display: flex;
    justify-content: center;
}

.gameModeCard {
    width: min(820px, 94vw);
    margin: 10px auto 40px;
    padding: 26px;

    border-radius: 22px;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.62),
            rgba(2,6,23,0.82)
        );

    backdrop-filter: blur(10px);

    border: 1px solid rgba(125,211,252,0.24);

    box-shadow:
        0 18px 44px rgba(0,0,0,0.40),
        inset 0 1px 0 rgba(255,255,255,0.06);

    text-align: center;
}

.gameModeCard h2 {
    width: fit-content;
    margin: 0 auto 12px;
    padding: 0 18px 10px;

    color: #7dd3fc;

    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    border-bottom: 1px solid rgba(125,211,252,0.22);

    text-shadow:
        0 0 20px rgba(125,211,252,0.22);
}

.gameModeCard p {
    max-width: 560px;
    margin: 0 auto 24px;

    color: rgba(226,232,240,0.82);

    line-height: 1.6;
    font-size: 15px;
    font-weight: 600;
}

.gameModeOptions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.gameModeOption {
    min-height: 180px;
    padding: 22px;

    border-radius: 18px;

    border: 1px solid rgba(125,211,252,0.28);

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.72),
            rgba(2,6,23,0.92)
        );

    color: #e0f2fe;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 12px 28px rgba(0,0,0,0.30);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.gameModeOption strong {
    display: block;

    margin-bottom: 12px;

    color: #ffffff;

    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gameModeOption span {
    display: block;

    color: rgba(226,232,240,0.74);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.gameModeOption em {
    display: inline-flex;

    margin-top: 18px;
    padding: 6px 12px;

    border-radius: 999px;

    background: rgba(168,85,247,0.16);
    border: 1px solid rgba(192,132,252,0.28);

    color: #d8b4fe;

    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

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

    border-color: rgba(125,211,252,0.68);

    background:
        linear-gradient(
            180deg,
            rgba(30,64,175,0.38),
            rgba(2,6,23,0.94)
        );

    box-shadow:
        0 0 18px rgba(125,211,252,0.18),
        0 16px 34px rgba(0,0,0,0.38),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

.lockedMode {
    border-color: rgba(168,85,247,0.30);
}

.lockedMode:hover {
    border-color: rgba(192,132,252,0.68);

    box-shadow:
        0 0 18px rgba(168,85,247,0.18),
        0 16px 34px rgba(0,0,0,0.38),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

@media (max-width: 900px) {
    .gameModeCard {
        padding: 20px 14px;
    }

    .gameModeCard h2 {
        font-size: 22px;
    }

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

    .gameModeOption {
        min-height: 145px;
    }
}

/* ===== SEASON LAYOUT ===== */

#seasonLayout {
    display: grid;
    grid-template-columns: minmax(260px, 330px) minmax(520px, 1fr) minmax(260px, 320px);
    gap: 12px;
    align-items: start;
    width: 100%;
    max-width: none;
}

#seasonLayout > div {
    min-width: 0;
}

#seasonContainer {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 20px;
    width: 100%;
    align-items: start;
}

/* ===== MODERN LEAGUE TABLE ===== */

#leagueSection {
    background:
    linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.78),
        rgba(2, 6, 23, 0.86)
    );
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: 16px;
    box-shadow:
        0 18px 42px rgba(0,0,0,0.38),
        inset 0 1px 0 rgba(255,255,255,0.04);
    overflow: hidden;
}

#leagueSection h3 {
    margin: 0 0 14px 0;
    padding: 0 2px 10px;

    color: #7dd3fc;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    border-bottom: 1px solid rgba(125,211,252,0.18);

    text-shadow:
        0 0 16px rgba(125,211,252,0.18);
}

#leagueTable {
    overflow-x: auto;
    border-radius: 14px;
}

#leagueTable table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(0,0,0,0.18);
    font-size: 12px;
    overflow: hidden;
}

#leagueTable th {
    background: rgba(255,255,255,0.07);
    color: #dbeafe;
    padding: 6px 4px;
    text-align: center;
    font-weight: 900;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.6px;
}

#leagueTable td {
    padding: 4px 4px;
    text-align: center;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: #f8fafc;
}

#leagueTable tr:nth-child(even) td {
    background: rgba(255,255,255,0.025);
}

#leagueTable tr:hover td {
    background: rgba(74,144,226,0.10);
}

#leagueTable th:first-child,
#leagueTable td:first-child {
    text-align: left;
}

#leagueTable td:nth-child(2) {
    font-weight: 800;
    color: #ffffff;
}

#leagueTable td:last-child {
    font-weight: 900;
    color: #facc15;
}

#leagueTable .yourTeamRow td {
    background:
        linear-gradient(
            90deg,
            rgba(56,189,248,0.20),
            rgba(96,165,250,0.14),
            rgba(168,85,247,0.12)
        ) !important;

    color: #ffffff;
    font-weight: 900;

    border-top: 1px solid rgba(125,211,252,0.34);
    border-bottom: 1px solid rgba(125,211,252,0.34);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(255,255,255,0.03);
}

#leagueTable .yourTeamRow:hover td {
    background:
        linear-gradient(
            90deg,
            rgba(56,189,248,0.28),
            rgba(96,165,250,0.20),
            rgba(168,85,247,0.16)
        ) !important;
}

#matchCentreSection {
    display: flex;
    flex-direction: column;
    gap: 14px;
}



.bigPlayButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 170px;
    height: 48px;
    padding: 0 22px;

    border-radius: 12px;
    border: 1px solid rgba(96,165,250,0.45);

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.92),
            rgba(2,6,23,0.96)
        );

    color: #eaf3ff;
    font-size: 15px;
    font-weight: 900;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 10px 24px rgba(0,0,0,0.32);

    cursor: pointer;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.bigPlayButton:hover {
    transform: translateY(-2px);
    border-color: rgba(125,211,252,0.75);

    background:
        linear-gradient(
            180deg,
            rgba(30,64,175,0.52),
            rgba(2,6,23,0.98)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 0 18px rgba(96,165,250,0.22),
        0 12px 28px rgba(0,0,0,0.36);
}

.bigPlayButton:active {
    transform: translateY(0);
}

#latestMatch {
    min-height: 280px;
}

/* ===== MODERN PLAYER STATS TABLE ===== */

#squadSection {
    background:
        linear-gradient(
            180deg,
            rgba(15, 23, 42, 0.78),
            rgba(2, 6, 23, 0.86)
        );
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: 16px;
    box-shadow:
        0 18px 42px rgba(0,0,0,0.38),
        inset 0 1px 0 rgba(255,255,255,0.04);
    overflow: hidden;
}

#squadSection h3 {
    margin: 0 0 14px 0;
    padding: 0 2px 10px;

    color: #7dd3fc;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    border-bottom: 1px solid rgba(125,211,252,0.18);

    text-shadow:
        0 0 16px rgba(125,211,252,0.18);
}

#playerStats {
    overflow-x: auto;
    border-radius: 14px;
}

.squadStatsTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(0,0,0,0.18);
    font-size: 12px;
    overflow: hidden;
}

.squadStatsTable th {
    background: rgba(255,255,255,0.07);
    color: #d1fae5;
    padding: 5px 3px;
    text-align: center;
    font-weight: 900;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.6px;
}

.squadStatsTable td {
    padding: 4px 3px;
    text-align: center;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: #f8fafc;
}

.squadStatsTable tr:nth-child(even) td {
    background: rgba(255,255,255,0.025);
}

.squadStatsTable tr:hover td {
    background: rgba(74,222,128,0.09);
}

.squadStatsTable td:first-child {
    text-align: left;
    font-weight: 800;
    color: #9fd3ff;
}

.squadStatsTable td:nth-child(3) {
    color: #4ade80;
    font-weight: 900;
}

.squadStatsTable td:nth-child(4) {
    color: #60a5fa;
    font-weight: 900;
}

.squadStatsTable td:nth-last-child(2) {
    color: #facc15;
    font-weight: 900;
}

.squadStatsTable td:last-child {
    color: #ef4444;
    font-weight: 900;
}

.squadStatsTable {
    table-layout: fixed;
}

.squadStatsTable th:first-child,
.squadStatsTable td:first-child {
    width: 86px;
    max-width: 86px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.squadStatsTable th:nth-child(2),
.squadStatsTable td:nth-child(2) {
    width: 30px;
}

.squadStatsTable th:nth-child(3),
.squadStatsTable td:nth-child(3),
.squadStatsTable th:nth-child(4),
.squadStatsTable td:nth-child(4),
.squadStatsTable th:nth-last-child(2),
.squadStatsTable td:nth-last-child(2),
.squadStatsTable th:last-child,
.squadStatsTable td:last-child {
    width: 24px;
}

.squadStatsTable th,
.squadStatsTable td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

table {
    border-collapse: collapse;
    width: 100%;
    background-color: #111;
    font-size: 12px;
}

th, td {
    border: 1px solid #444;
    padding: 3px 5px;
    text-align: center;
}

th {
    background-color: #333;
}

.topControls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.topControls label {
    font-weight: bold;
}

.topControls input {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #444;
    background: #111;
    color: white;
    min-width: 220px;
}

.playerNameHover {
    color: #9fd3ff;
    font-weight: 600;
    cursor: pointer;
    border-bottom: none;
}

.tooltipCard {
    position: relative;
    overflow: hidden;
    width: 260px;
    min-height: 0;
    padding: 18px;
    border-radius: 22px;

    background:
        radial-gradient(circle at 78% 18%, var(--positionWash), transparent 34%),
        radial-gradient(circle at 20% 0%, rgba(255,255,255,0.08), transparent 28%),
        linear-gradient(160deg, #24344f 0%, #121827 58%, #080c16 100%);

    border: 2px solid var(--positionBorder);

    box-shadow:
        0 0 0 1px rgba(255,255,255,0.10) inset,
        0 16px 36px rgba(0,0,0,0.60),
        0 0 18px var(--positionGlow);

    text-align: left;
}

.tooltipCard::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 16px;
    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent 49%,
            rgba(255,255,255,0.04) 50%,
            transparent 51%
        ),
        url("images/eleven-dna-logo.png");

    background-repeat: no-repeat;
    background-position: center 42%;
    background-size: 220px auto;

    opacity: 0.08;

    border: 1px solid rgba(255,255,255,0.12);
}

.tooltipCard::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 7px;
    background: var(--positionAccent);
    box-shadow: 0 0 18px var(--positionGlow);
    pointer-events: none;
}

.tooltipCard .cardHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.16);
}

.tooltipCard .cardHeader h3 {
    margin: 0;
    font-size: 21px;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}

.tooltipCard .playerPosition {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 7px 18px;
    border-radius: 999px;
    background: var(--positionAccent);
    color: #07111f;
    font-weight: 900;
    letter-spacing: 0.08em;
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.28) inset,
        0 8px 18px var(--positionGlow);
}

.tooltipCard .cardHeader,
.tooltipCard .traitList {
    position: relative;
    z-index: 2;
}

.tooltipCard .traitList {
    margin-bottom: 0;
}

/* ===== FEEDBACK MODAL ===== */

.feedbackModal.hidden {
    display: none;
}

.feedbackModal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.feedbackModalContent {
    width: 420px;
    max-width: 90vw;
    background: #151515;
    border: 1px solid #4a90e2;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 18px 60px rgba(0,0,0,0.6);
    position: relative;
    text-align: left;
}

.feedbackModalContent h2 {
    text-align: center;
    margin-top: 0;
}

.feedbackModalContent label {
    display: block;
    margin-top: 12px;
    margin-bottom: 6px;
    font-weight: bold;
}

.feedbackModalContent input,
.feedbackModalContent select,
.feedbackModalContent textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #444;
    background: #222;
    color: white;
}

.submitFeedbackButton {
    width: 100%;
    margin-top: 16px;
    padding: 12px;
    border-radius: 999px;
    border: none;
    background: #ffdd00;
    color: #111;
    font-weight: bold;
    cursor: pointer;
}

.closeFeedbackButton {
    position: absolute;
    top: 10px;
    right: 14px;
    background: transparent;
    color: white;
    border: none;
    font-size: 26px;
    cursor: pointer;
}

.hidden {
    display: none !important;
}

/* ===== HOME SCREEN ===== */

.homeScreen {
    width: min(1080px, 94vw);
    margin: 0 auto 40px;
    padding: 0;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.homeLeftColumn {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.homeCard {
    position: relative;
    overflow: hidden;

    padding: 26px;
    border-radius: 22px;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.70),
            rgba(2,6,23,0.86)
        );

    backdrop-filter: blur(10px);

    border: 1px solid rgba(96,165,250,0.30);

    box-shadow:
        0 18px 50px rgba(0,0,0,0.46),
        inset 0 1px 0 rgba(255,255,255,0.07);

    text-align: left;
}

.homeCard::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(circle at 15% 0%, rgba(125,211,252,0.12), transparent 34%),
        radial-gradient(circle at 90% 85%, rgba(168,85,247,0.14), transparent 32%);
}

.homeCard > * {
    position: relative;
    z-index: 2;
}

.homeCard h2 {
    margin: 0 0 14px;

    color: #eaf3ff;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.3px;
}

.homeCard p {
    margin: 0 0 14px;

    color: rgba(226,232,240,0.82);
    line-height: 1.55;
    font-size: 15px;
}

.homeCard ul,
.homeCard ol {
    color: rgba(226,232,240,0.82);
    line-height: 1.5;
}

.startGameButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 180px;
    height: 48px;
    margin-top: 16px;
    padding: 0 24px;

    border-radius: 12px;
    border: 1px solid rgba(96,165,250,0.45);

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.92),
            rgba(2,6,23,0.96)
        );

    color: #eaf3ff;
    font-size: 15px;
    font-weight: 900;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 10px 24px rgba(0,0,0,0.32);

    cursor: pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.startGameButton:hover {
    transform: translateY(-2px);
    border-color: rgba(125,211,252,0.75);

    background:
        linear-gradient(
            180deg,
            rgba(30,64,175,0.52),
            rgba(2,6,23,0.98)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 0 18px rgba(96,165,250,0.22),
        0 12px 28px rgba(0,0,0,0.36);
}

.changelogEntry {
    margin-top: 12px;
    padding: 14px;

    border-radius: 16px;

    background: rgba(2,6,23,0.48);
    border: 1px solid rgba(96,165,250,0.18);

    text-align: left;
}

.changelogEntry h3 {
    margin: 0 0 6px;

    color: #7dd3fc;
    font-size: 15px;
    font-weight: 900;
}

.changelogEntry p {
    margin: 0;
    color: rgba(226,232,240,0.78);
}

.changelogEntry strong {
    color: #ffffff;
}

@media (max-width: 800px) {
    .homeScreen {
        grid-template-columns: 1fr;
    }
}

/* ===== SEASON REVIEW ===== */

.seasonReview {
    width: min(1100px, 94vw);
    margin: 28px auto 60px;
}

.seasonReviewCard {
    position: relative;
    overflow: hidden;

    padding: 28px;
    border-radius: 24px;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.74),
            rgba(2,6,23,0.88)
        );

    backdrop-filter: blur(10px);

    border: 1px solid rgba(96,165,250,0.42);

    box-shadow:
        0 24px 70px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

.seasonReviewCard::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(circle at 50% 0%, rgba(125,211,252,0.14), transparent 36%),
        radial-gradient(circle at 90% 80%, rgba(168,85,247,0.16), transparent 32%);
}

.seasonReviewCard > * {
    position: relative;
    z-index: 2;
}

.seasonReviewCard h2 {
    margin: 0 0 18px;
    color: #eaf3ff;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.seasonFinish {
    margin-bottom: 20px;
    padding: 22px;

    border-radius: 18px;
    background:
        linear-gradient(
            180deg,
            rgba(2,6,23,0.64),
            rgba(15,23,42,0.72)
        );

    border: 1px solid rgba(96,165,250,0.26);
}

.seasonFinish h3 {
    margin: 0 0 10px;
    color: #facc15;
    font-size: 30px;
    font-weight: 900;
}

.seasonFinish p {
    margin: 0;
    color: rgba(226,232,240,0.88);
    font-size: 17px;
    font-weight: 700;
}

.championFinish {
    border-color: rgba(250,204,21,0.55);
    box-shadow: 0 0 24px rgba(250,204,21,0.14);
}

.identitySection {
    margin: 22px 0;
}

.identitySection h3 {
    margin: 0 0 14px;
    color: #7dd3fc;
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

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

.identityBadge {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 12px;

    padding: 14px;
    border-radius: 16px;

    background: rgba(15,23,42,0.60);
    border: 1px solid rgba(96,165,250,0.22);

    text-align: left;
}

.identityBadge span {
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;

    width: 46px;
    height: 46px;

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

    border-radius: 14px;
    background: rgba(96,165,250,0.12);

    font-size: 26px;
}

.identityBadge strong {
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
}

.identityBadge small {
    color: rgba(226,232,240,0.68);
    font-size: 12px;
    line-height: 1.3;
}

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

.reviewBox {
    padding: 16px;
    border-radius: 16px;

    background: rgba(2,6,23,0.54);
    border: 1px solid rgba(96,165,250,0.20);

    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.reviewBox h4 {
    margin: 0 0 8px;
    color: rgba(191,219,254,0.74);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.reviewBox p {
    margin: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
}

.reviewButtons {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 24px;
}

@media (max-width: 850px) {
    .identityBadges,
    .reviewGrid {
        grid-template-columns: 1fr;
    }
}

/* ===== SOCIAL SHARE CARD ===== */

.socialShareCard {
    position: fixed;
    left: -9999px;
    top: 0;
    width: 900px;
    min-height: 1200px;
    background: linear-gradient(135deg, #111827 0%, #1e3c72 50%, #7e22ce 100%);
    color: white;
    padding: 48px;
    font-family: Arial, sans-serif;
    box-shadow: 0 20px 80px rgba(0,0,0,0.6);
}

.shareHeader {
    text-align: center;
    margin-bottom: 28px;
}

.shareHeader h1 {
    font-size: 48px;
    margin: 0;
}

.shareHeader p {
    font-size: 22px;
    color: #ddd;
    margin: 8px 0 0;
}

.shareFinish {
    background: rgba(0,0,0,0.35);
    border: 2px solid rgba(255,255,255,0.18);
    border-radius: 26px;
    padding: 30px;
    text-align: center;
    margin-bottom: 28px;
}

.shareFinish h2 {
    font-size: 42px;
    margin: 0 0 8px;
}

.shareFinish h3 {
    font-size: 34px;
    color: #ffd700;
    margin: 0 0 10px;
}

.shareFinish p {
    font-size: 22px;
    margin: 0;
}

.shareStatsGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 26px;
}

.shareStatsGrid div {
    background: rgba(0,0,0,0.32);
    border-radius: 18px;
    padding: 18px;
    text-align: center;
}

.shareStatsGrid small {
    display: block;
    color: #ddd;
    font-size: 15px;
    margin-bottom: 8px;
}

.shareStatsGrid strong {
    font-size: 20px;
}

.shareBadgeSection {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}

.shareBadge {
    background: rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.shareBadge span {
    font-size: 30px;
}

.shareBadge strong {
    font-size: 20px;
}

.shareSquad {
    background: rgba(0,0,0,0.3);
    border-radius: 24px;
    padding: 24px;
}

.shareSquad h3 {
    margin: 0 0 18px;
    text-align: center;
    font-size: 28px;
    color: #ffd700;
}

.shareSquadGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 18px;
}

.sharePlayer {
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: center;
}

.sharePlayer span {
    color: #7ed67e;
    font-weight: bold;
}

.sharePlayer strong {
    font-size: 18px;
}

.shareFooter {
    margin-top: 26px;
    text-align: center;
    font-size: 20px;
    color: #f0f0f0;
}

.socialShareCardV2 {
    position: fixed;
    left: -9999px;
    top: 0;
    width: 900px;
    min-height: 1200px;
    padding: 44px;
    overflow: hidden;

    font-family: Arial, sans-serif;
    color: #ffffff;

    background:
        radial-gradient(circle at 20% 10%, rgba(56,189,248,0.24), transparent 28%),
        radial-gradient(circle at 85% 72%, rgba(168,85,247,0.38), transparent 32%),
        linear-gradient(135deg, #020617 0%, #10244a 48%, #6d28d9 100%);

    box-shadow: 0 20px 80px rgba(0,0,0,0.6);
}

.shareCardGlow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0%, rgba(56,189,248,0.14) 42%, rgba(168,85,247,0.24) 64%, transparent 100%);
    opacity: 0.9;
}

.shareBrand {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.shareBrand img {
    width: 430px;
    height: auto;
    display: block;
    filter: drop-shadow(0 12px 30px rgba(0,0,0,0.5));
}

.shareBrand span {
    color: rgba(219,234,254,0.85);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.shareHero {
    position: relative;
    z-index: 2;
    padding: 30px;
    margin-bottom: 22px;
    border-radius: 24px;

    background: rgba(2,6,23,0.58);
    border: 1px solid rgba(148,163,184,0.28);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 18px 44px rgba(0,0,0,0.28);
}

.shareHero h1 {
    margin: 0 0 14px;
    font-size: 54px;
    line-height: 1;
    font-weight: 900;
}

.shareFinishPosition {
    color: #facc15;
    font-size: 64px;
    line-height: 1;
    font-weight: 900;
}

.shareHero p {
    margin: 8px 0 0;
    color: rgba(226,232,240,0.78);
    font-size: 22px;
    font-weight: 700;
}

.shareRecordStrip {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}

.shareRecordStrip div,
.shareStars div {
    background: rgba(2,6,23,0.55);
    border: 1px solid rgba(148,163,184,0.22);
    border-radius: 18px;
    padding: 18px 14px;
    text-align: center;
}

.shareRecordStrip strong {
    display: block;
    color: #ffffff;
    font-size: 30px;
    font-weight: 900;
}

.shareRecordStrip span {
    display: block;
    margin-top: 5px;
    color: rgba(191,219,254,0.72);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1px;
}

.shareStars {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.shareStars small {
    display: block;
    margin-bottom: 8px;
    color: rgba(191,219,254,0.75);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.shareStars strong {
    display: block;
    color: #ffffff;
    font-size: 19px;
    font-weight: 900;
}

.shareBadgeTitle {
    position: relative;
    z-index: 2;
    margin: 4px 0 14px;
    color: #7ed67e;
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.shareBadgeGridV2 {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 26px;
}

.shareBadgeV2 {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 12px;
    align-items: center;

    min-height: 82px;
    padding: 14px;

    background: rgba(15,23,42,0.62);
    border: 1px solid rgba(96,165,250,0.22);
    border-radius: 18px;
}

.shareBadgeIcon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;
    border-radius: 16px;

    background: rgba(96,165,250,0.14);
    border: 1px solid rgba(255,255,255,0.12);

    font-size: 30px;
}

.shareBadgeV2 strong {
    display: block;
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
}

.shareBadgeV2 small {
    display: block;
    margin-top: 4px;
    color: rgba(226,232,240,0.68);
    font-size: 12px;
    line-height: 1.25;
}

.shareFooterV2 {
    position: absolute;
    left: 44px;
    right: 44px;
    bottom: 34px;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    gap: 18px;

    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.16);

    color: rgba(226,232,240,0.88);
    font-size: 20px;
}

.shareFooterV2 span {
    color: #7dd3fc;
    font-weight: 800;
}

.matchButtonRow {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.simSeasonButton {
    border-color: rgba(192,132,252,0.42);

    background:
        linear-gradient(
            180deg,
            rgba(88,28,135,0.46),
            rgba(2,6,23,0.96)
        );
}

.simSeasonButton:hover {
    border-color: rgba(216,180,254,0.76);

    background:
        linear-gradient(
            180deg,
            rgba(126,34,206,0.54),
            rgba(2,6,23,0.98)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 0 18px rgba(168,85,247,0.24),
        0 12px 28px rgba(0,0,0,0.36);
}

.strengthValue {
    display: flex;
    gap: 6px;
    align-items: center;
}

.profileGain {
    color: #4ade80;
    font-size: 12px;
    font-weight: bold;
}

.profileLoss {
    color: #ef4444;
    font-size: 12px;
    font-weight: bold;
}


/* ===== FORMATION CARDS ===== */

.formationCard {
    width: 260px;
    min-height: 360px;
    padding: 16px;

    background:
        linear-gradient(
            180deg,
            rgba(25,35,65,0.95),
            rgba(5,10,25,0.98)
        );

    border: 2px solid rgba(59,130,246,0.85);
    border-radius: 20px;

    box-shadow:
        0 0 18px rgba(59,130,246,0.18),
        0 12px 30px rgba(0,0,0,0.45);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.formationCard:hover {
    transform: translateY(-4px);
    box-shadow:
        0 0 26px rgba(59,130,246,0.30),
        0 18px 40px rgba(0,0,0,0.55);
}

.formationCard .cardHeader {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.formationCard .cardHeader h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}

.formationCard .cardBody {
    margin-top: 18px;
}

.formationPitch {
    position: relative;
    height: 190px;
    padding: 12px 10px;

    border-radius: 14px;

    background:
        repeating-linear-gradient(
            180deg,
            #166534 0px,
            #166534 20px,
            #15803d 20px,
            #15803d 40px
        );

    border: 2px solid rgba(74,222,128,0.70);

    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.formationPitch::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;

    width: 64px;
    height: 64px;

    transform: translate(-50%, -50%);

    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.18);
}

.formationPitch::after {
    content: "";
    position: absolute;
    left: 28%;
    right: 28%;
    bottom: 8px;

    height: 34px;

    border: 2px solid rgba(255,255,255,0.18);
    border-bottom: none;

    border-radius: 12px 12px 0 0;
}

.formationRow {
    display: flex;
    align-items: center;
    min-height: 30px;
    position: relative;
    z-index: 2;
}

.formationRow-wide {
    justify-content: space-between;
    padding: 0 8px;
}

.formationRow-medium {
    justify-content: space-around;
    padding: 0 24px;
}

.formationRow-narrow {
    justify-content: center;
}

.formationDot {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;

    border-radius: 50%;

    background: #f59e0b;
    border: 2px solid rgba(255,255,255,0.78);

    color: #111827;

    font-size: 10px;
    font-weight: 900;

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

    box-shadow:
        0 4px 10px rgba(0,0,0,0.35);
}

.teamNameFinalCard {
    width: min(720px, 92vw);
    margin: 10px auto 40px;
    padding: 26px;

    border-radius: 22px;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.62),
            rgba(2,6,23,0.82)
        );

    backdrop-filter: blur(10px);

    border: 1px solid rgba(125,211,252,0.24);

    box-shadow:
        0 18px 44px rgba(0,0,0,0.40),
        inset 0 1px 0 rgba(255,255,255,0.06);

    text-align: center;
}

.teamNameFinalCard h2 {
    width: fit-content;
    margin: 0 auto 12px;
    padding: 0 18px 10px;

    color: #7dd3fc;

    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    border-bottom: 1px solid rgba(125,211,252,0.22);

    text-shadow:
        0 0 20px rgba(125,211,252,0.22);
}

.teamNameFinalCard p {
    max-width: 560px;
    margin: 0 auto 22px;

    color: rgba(226,232,240,0.82);

    line-height: 1.6;
    font-size: 15px;
    font-weight: 600;
}

.finalNameRow {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.finalTeamNameInput {
    min-width: 320px;
    max-width: 420px;
    height: 46px;
    padding: 0 16px;

    border-radius: 999px;

    border: 1px solid rgba(125,211,252,0.28);

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.78),
            rgba(2,6,23,0.92)
        );

    color: #e0f2fe;

    font-size: 15px;
    font-weight: 800;

    outline: none;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 8px 20px rgba(0,0,0,0.24);
}

.finalTeamNameInput::placeholder {
    color: rgba(226,232,240,0.45);
}

.finalTeamNameInput:focus {
    border-color: rgba(125,211,252,0.70);

    box-shadow:
        0 0 0 3px rgba(125,211,252,0.12),
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 8px 20px rgba(0,0,0,0.24);
}

#randomTeamNameButton {
    height: 46px;
    min-width: 170px;
    padding: 0 20px;
    border-radius: 999px;
}

#startSeasonButton {
    min-width: 220px;
}

.rerollInfo {
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid rgba(96,165,250,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.rerollButton {
    min-width: 190px;
    padding: 12px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    background: linear-gradient(145deg, rgba(20, 35, 75, 0.98), rgba(10, 16, 35, 0.99));
    color: #eff6ff;
    font-weight: 700;
    box-shadow:
        0 10px 24px rgba(15, 23, 42, 0.32),
        inset 0 1px 0 rgba(255,255,255,0.05);
    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.rerollButton:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow:
        0 14px 28px rgba(56,189,248,0.20),
        inset 0 1px 0 rgba(255,255,255,0.08);
    background: linear-gradient(145deg, rgba(33, 57, 108, 0.98), rgba(14, 22, 45, 1));
}

.rerollButton:active {
    transform: translateY(0);
}

.draftCardsRow {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
}

.rerollRow {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
}

@keyframes draftCardEnter {
    from {
        opacity: 0;
        filter: blur(3px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

.draftCardsRow .playerCard {
    opacity: 0;
    animation: draftCardEnter 0.42s ease forwards;
    animation-fill-mode: forwards;
}

.draftCardsRow .playerCard:nth-child(1) {
    animation-delay: 0.02s;
}

.draftCardsRow .playerCard:nth-child(2) {
    animation-delay: 0.10s;
}

.draftCardsRow .playerCard:nth-child(3) {
    animation-delay: 0.18s;
}

.tooltipCard.position-GK {
    --positionAccent: #4ade80;
    --positionBorder: rgba(74,222,128,0.65);
    --positionGlow: rgba(74,222,128,0.24);
    --positionWash: rgba(74,222,128,0.16);
}

.tooltipCard.position-LB,
.tooltipCard.position-CB,
.tooltipCard.position-RB {
    --positionAccent: #38bdf8;
    --positionBorder: rgba(56,189,248,0.65);
    --positionGlow: rgba(56,189,248,0.24);
    --positionWash: rgba(56,189,248,0.16);
}

.tooltipCard.position-CM {
    --positionAccent: #facc15;
    --positionBorder: rgba(250,204,21,0.65);
    --positionGlow: rgba(250,204,21,0.24);
    --positionWash: rgba(250,204,21,0.16);
}

.tooltipCard.position-LW,
.tooltipCard.position-RW,
.tooltipCard.position-ST {
    --positionAccent: #ef4444;
    --positionBorder: rgba(239,68,68,0.65);
    --positionGlow: rgba(239,68,68,0.24);
    --positionWash: rgba(239,68,68,0.16);
}

/* ===== MODERN MATCH CENTRE ===== */

.matchCard {
    background:
        radial-gradient(circle at 50% 0%, rgba(74,144,226,0.16), transparent 38%),
        linear-gradient(180deg, #141c29 0%, #0b111a 100%);
    border: 1px solid rgba(74,144,226,0.45);
    border-radius: 20px;
    padding: 22px;
    box-shadow:
        0 18px 42px rgba(0,0,0,0.42),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

.matchCard h2,
.matchCard h3 {
    color: #e5f0ff;
    font-weight: 900;
    letter-spacing: 0.3px;
}

.chanceLog {
    background: rgba(0,0,0,0.26);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    padding: 14px;
    max-height: 210px;
}

.chanceLog::before {
    display: none;
}

.chanceLog p {
    padding: 6px 8px;
    margin: 4px 0;
    border-radius: 8px;
}

.matchEventLine,
.cardEvent {
    display: grid;
    grid-template-columns: 56px 150px 1fr;
    gap: 10px;
    align-items: start;

    margin: 0 0 8px;
    padding: 10px 12px;

    border-radius: 12px;

    font-size: 13px;
    line-height: 1.35;
    text-align: left;
}

.matchEventLine.userEvent,
.cardEvent.userEvent {
    background: rgba(14,116,144,0.16);
    border: 1px solid rgba(125,211,252,0.24);
}

.matchEventLine.opponentEvent,
.cardEvent.opponentEvent {
    background: rgba(88,28,135,0.18);
    border: 1px solid rgba(192,132,252,0.24);
}

.matchEventLine.userEvent strong,
.cardEvent.userEvent strong,
.matchEventLine.userEvent .playerNameHover,
.cardEvent.userEvent .playerNameHover {
    color: #7dd3fc;
}

.matchEventLine.opponentEvent strong,
.cardEvent.opponentEvent strong,
.matchEventLine.opponentEvent .playerNameHover,
.cardEvent.opponentEvent .playerNameHover {
    color: #d8b4fe;
}

.matchEventLine.goalEvent {
    position: relative;
    border-width: 2px;
    box-shadow:
        0 0 18px rgba(250,204,21,0.12),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

.matchEventLine.goalEvent .eventMinute {
    color: #facc15;
}

.eventMinute {
    color: rgba(226,232,240,0.68);
    font-weight: 900;
}

.eventMinute {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.eventGoalBadge {
    display: inline-flex;
    padding: 3px 7px;

    border-radius: 999px;

    background: rgba(250,204,21,0.18);
    border: 1px solid rgba(250,204,21,0.55);

    color: #facc15;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.preMatchCard {
    justify-content: center;
    align-items: center;
}

.preMatchLogoWrap {
    flex: 1;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.preMatchLogo {
    width: min(520px, 72%);
    height: auto;

    opacity: 0.78;

    filter:
        drop-shadow(0 18px 34px rgba(0,0,0,0.55))
        drop-shadow(0 0 18px rgba(125,211,252,0.14));
}

.scoreLine {
    background:
        linear-gradient(
            90deg,
            rgba(56,189,248,0.14),
            rgba(15,23,42,0.92) 45%,
            rgba(168,85,247,0.18)
        );

    border: 1px solid rgba(125,211,252,0.34);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 0 34px rgba(56,189,248,0.08);
}

.scoreTeamUser {
    color: #38bdf8 !important;
    text-shadow: 0 0 14px rgba(56,189,248,0.55);
}

.scoreTeamOpponent {
    color: #c084fc !important;
    text-shadow: 0 0 14px rgba(192,132,252,0.55);
}

.scoreNumbers {
    font-size: clamp(42px, 5vw, 72px);
    font-weight: 1000;
    color: #eaf6ff;
}

.scoreNumbers .userScore {
    color: #38bdf8;
    text-shadow: 0 0 18px rgba(56,189,248,0.65);
}

.scoreNumbers .opponentScore {
    color: #c084fc;
    text-shadow: 0 0 18px rgba(192,132,252,0.65);
}

.statUserValue {
    color: #38bdf8 !important;
    text-shadow: 0 0 10px rgba(56,189,248,0.55);
}

.statOpponentValue {
    color: #c084fc !important;
    text-shadow: 0 0 10px rgba(192,132,252,0.55);
}

.summaryTeamName.summaryTeamUser {
    color: #38bdf8 !important;
    text-shadow: 0 0 12px rgba(56,189,248,0.55);
}

.summaryTeamName.summaryTeamOpponent {
    color: #c084fc !important;
    text-shadow: 0 0 12px rgba(192,132,252,0.55);
}

/* ===== MATCH CENTRE LAYOUT TWEAKS ===== */

/* Put buttons underneath the match card so all three panels align at the top */
#matchCentreSection {
    display: flex;
    flex-direction: column;
}

#matchCentreSection .matchCard {
    order: 1;
}

#matchCentreSection .matchButtonRow {
    order: 2;
    margin-top: 14px;
}

/* Make match centre header match the other panels */
.matchCard h2,
.matchCard h3 {
    position: absolute;
    top: 10px;
    left: 18px;

    margin: 0;
    padding: 0;

    font-size: 11px;
    color: rgba(219,234,254,0.45);
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;

    border-bottom: none;
}

/* Stop long team names dropping onto two lines */
.scoreLine {
    position: relative;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;

    margin: 4px 0 10px;
    padding: 18px 22px;

    background:
        linear-gradient(
            180deg,
            rgba(2,6,23,0.62),
            rgba(2,6,23,0.84)
        );

    border: 1px solid rgba(96,165,250,0.24);
    border-radius: 16px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 10px 26px rgba(0,0,0,0.24);

    color: #eaf3ff;
    font-size: clamp(20px, 1.55vw, 28px);
    font-weight: 900;
    line-height: 1.1;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scoreLine::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    pointer-events: none;

    background:
        radial-gradient(circle at 50% 0%, rgba(125,211,252,0.12), transparent 45%);
}

.scoreLine {
    text-shadow: 0 2px 12px rgba(0,0,0,0.65);
}

.scoreLine .scoreTeam {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;

    color: rgba(226,232,240,0.92);
    font-size: clamp(15px, 1.15vw, 20px);
    font-weight: 900;
    letter-spacing: 0.2px;
}

.scoreLine .scoreTeamHome {
    text-align: right;
}

.scoreLine .scoreTeamAway {
    text-align: left;
}

.scoreLine .scoreNumbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 120px;

    color: #ffffff;
    font-size: clamp(32px, 3vw, 48px);
    font-weight: 900;
    letter-spacing: 4px;

    text-shadow:
        0 0 18px rgba(125,211,252,0.18),
        0 3px 12px rgba(0,0,0,0.75);
}


/* Tighten the spacing inside the match centre */
.matchCard {
    gap: 7px;
    padding: 16px 18px;
}

.matchSummary {
    display: grid;
    gap: 10px;
    margin: 4px 0 8px;
    padding: 10px 12px;

    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;

    font-size: 12px;
    text-align: left;
}

.matchStatsStrip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin: 6px 0 8px;
}

.matchStatTile {
    padding: 8px 6px;
    border-radius: 12px;
    background: rgba(2,6,23,0.46);
    border: 1px solid rgba(96,165,250,0.18);
    text-align: center;
}

.matchStatTile span {
    display: block;
    margin-bottom: 4px;
    color: rgba(219,234,254,0.62);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.matchStatTile strong {
    color: #7dd3fc;
    font-size: 15px;
    font-weight: 900;
}

.matchStatTile em {
    color: #c084fc;
    font-style: normal;
    font-size: 15px;
    font-weight: 900;
}

.matchEventsButton {
    margin-top: auto;
    padding: 10px 16px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(8,18,45,0.95), rgba(4,8,24,0.98));
    border: 1px solid rgba(96,165,250,0.45);
    color: #dbeafe;
    font-weight: 900;
    cursor: pointer;
}

.matchEventsModal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.72);
    display: flex;
    justify-content: center;
    align-items: center;
}

.matchEventsModalContent {
    position: relative;

    width: min(1200px, 96vw);
    height: 92vh;

    padding: 26px;

    border-radius: 24px;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.96),
            rgba(2,6,23,0.98)
        );

    border: 1px solid rgba(125,211,252,0.34);

    box-shadow:
        0 30px 90px rgba(0,0,0,0.75),
        inset 0 1px 0 rgba(255,255,255,0.06);

    display: flex;
    flex-direction: column;
}

.matchEventsModalContent h2 {
    margin: 0 0 18px;
    padding-bottom: 12px;

    color: #7dd3fc;

    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.05em;

    border-bottom: 1px solid rgba(125,211,252,0.18);
}

.closeMatchEventsButton {
    position: absolute;
    top: 12px;
    right: 16px;

    background: transparent;
    border: none;

    color: rgba(226,232,240,0.82);
    font-size: 32px;
    font-weight: 900;

    cursor: pointer;

    transition: color 0.15s ease;
}

.closeMatchEventsButton:hover {
    color: #ffffff;
}

.modalChanceLog {
    justify-content: flex-start;
    align-content: start;
    flex: 1;
    min-height: 0;

    overflow-y: auto;

    padding: 12px;

    background: rgba(2,6,23,0.40);

    border: 1px solid rgba(125,211,252,0.12);
    border-radius: 16px;

    text-align: left;

    display: block;
}

.modalChanceLog p:first-child {
    margin-top: 0;
}

.summaryTeamBlock {
    display: grid;
    gap: 5px;
}

.summaryTeamBlock + .summaryTeamBlock {
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.summaryTeamName {
    color: rgba(219,234,254,0.78);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.summaryEventsRow {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    line-height: 1.3;
}

.summaryEvent {
    white-space: nowrap;
}

.summaryDivider {
    color: rgba(255,255,255,0.25);
}

.summaryMuted {
    color: rgba(255,255,255,0.45);
    font-style: italic;
}

.summaryCardsRow {
    color: #f8fafc;
}

.chanceLog {
    margin-top: auto;
    max-height: 260px;
}

.modalChanceLog {
    margin-top: 0 !important;
    max-height: none !important;
}

/* Keep Match Centre height consistent so buttons stay aligned */
#matchCentreSection {
    height: 100%;
}

.matchCard {
    position: relative;
    height: 560px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: 34px;

    background:
        linear-gradient(
            180deg,
            rgba(15, 23, 42, 0.78),
            rgba(2, 6, 23, 0.88)
        );

    backdrop-filter: blur(8px);

    border: 1px solid rgba(96,165,250,0.42);
    border-radius: 20px;

    box-shadow:
        0 18px 42px rgba(0,0,0,0.42),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

.chanceLog {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

#matchCentreSection .matchButtonRow {
    flex-shrink: 0;
}

/* ===== MODERN TEAM PROFILE PANEL ===== */

#teamStrengthPanel {
    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.62),
            rgba(2,6,23,0.78)
        );
    backdrop-filter: blur(10px);
    border: 1px solid rgba(125,211,252,0.24);
    border-radius: 18px;
    padding: 16px;
    width: 240px;
    min-height: 220px;
    box-shadow:
        0 16px 36px rgba(0,0,0,0.38),
        inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
}

#teamStrengthPanel h3 {
    margin: 0 0 14px 0;
    padding: 0 2px 10px;
    text-align: center;
    color: #7dd3fc;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.4px;
    border-bottom: 1px solid rgba(125,211,252,0.18);
}

.strengthRow {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
    padding: 8px 10px;
    color: #e5e7eb;
    font-weight: 800;
    font-size: 14px;
    background: rgba(15,23,42,0.44);
    border: 1px solid rgba(125,211,252,0.10);
    border-radius: 12px;
}

.strengthRow:last-child {
    border-bottom: none;
}

.strengthRow span:first-child {
    text-align: left;
}

.strengthValue {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 54px;
    font-weight: 900;
    color: #ffffff;
}

.profileGain {
    color: #4ade80;
    font-size: 11px;
    font-weight: 900;
}

.profileLoss {
    color: #ef4444;
    font-size: 11px;
    font-weight: 900;
}

/* Restore draft card hover lift/scale */
.draftCardsRow .playerCard:hover {
    transform: translateY(-6px) scale(1.025);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.16) inset,
        0 0 0 3px rgba(255,255,255,0.04),
        0 0 0 4px var(--positionAccent),
        0 22px 52px rgba(0,0,0,0.62),
        0 0 24px var(--positionGlow);
}

.tacticsHeader {
    text-align: center;

    margin-bottom: 12px;
    padding-bottom: 10px;

    color: #7dd3fc;

    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    border-bottom: 1px solid rgba(125,211,252,0.18);

    text-shadow:
        0 0 20px rgba(125,211,252,0.22);
}

.liveCommentaryRow {
    margin-top: 12px;

    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: stretch;
}

.liveMinuteChip {
    min-width: 54px;
    padding: 0 12px;

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

    border-radius: 16px;

    background: rgba(125,211,252,0.12);
    border: 1px solid rgba(125,211,252,0.30);

    color: #7dd3fc;

    font-size: 15px;
    font-weight: 900;
}

.singleCommentaryBox {
    padding: 16px 18px;

    min-height: 72px;

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

    border-radius: 16px;

    background: rgba(2,6,23,0.50);
    border: 1px solid rgba(125,211,252,0.16);

    color: rgba(226,232,240,0.90);

    font-size: 15px;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05);
}

.singleCommentaryBox.commentaryBuild {
    border-color: rgba(125,211,252,0.34);
}

.singleCommentaryBox.commentaryAssist {
    border-color: rgba(168,85,247,0.42);
}

.singleCommentaryBox.commentaryShot,
.singleCommentaryBox.commentaryChance {
    border-color: rgba(250,204,21,0.42);
}

.singleCommentaryBox.commentaryGoal {
    color: #bbf7d0;
    background: rgba(34,197,94,0.16);
    border-color: rgba(74,222,128,0.62);
}

.singleCommentaryBox.commentaryCard {
    color: #fde68a;
    background: rgba(250,204,21,0.12);
    border-color: rgba(250,204,21,0.45);
}

.singleCommentaryBox.commentaryFinal {
    color: #ffffff;
    background: rgba(125,211,252,0.14);
    border-color: rgba(125,211,252,0.60);
}

.singleCommentaryBox.commentaryUser {
    border-color: rgba(125,211,252,0.62);
    background:
        linear-gradient(
            180deg,
            rgba(14, 116, 144, 0.24),
            rgba(2, 6, 23, 0.58)
        );
    color: #e0f2fe;
}

.singleCommentaryBox.commentaryOpponent {
    border-color: rgba(192,132,252,0.58);
    background:
        linear-gradient(
            180deg,
            rgba(88,28,135,0.24),
            rgba(2,6,23,0.58)
        );
    color: #f3e8ff;
}

.singleCommentaryBox.commentaryGoal.commentaryUser {
    border-color: rgba(125,211,252,0.85);
    box-shadow: 0 0 18px rgba(125,211,252,0.18);
}

.singleCommentaryBox.commentaryGoal.commentaryOpponent {
    border-color: rgba(192,132,252,0.85);
    box-shadow: 0 0 18px rgba(168,85,247,0.18);
}

.singleCommentaryBox.commentaryCard {
    border-color: rgba(250,204,21,0.55);
}

.singleCommentaryBox.commentaryGoal.commentaryUser {
    animation: champManGoalFlashUser 0.35s ease-in-out 0s 6 alternate;
}

.singleCommentaryBox.commentaryGoal.commentaryOpponent {
    animation: champManGoalFlashOpponent 0.35s ease-in-out 0s 6 alternate;
}

@keyframes champManGoalFlashUser {
    0% {
        color: #ffffff;
        background: rgba(14,116,144,0.24);
        border-color: rgba(125,211,252,0.85);
        box-shadow: 0 0 18px rgba(125,211,252,0.22);
    }

    50% {
        color: #e0f2fe;
        background: rgba(37,99,235,0.32);
        border-color: rgba(96,165,250,0.95);
        box-shadow: 0 0 24px rgba(96,165,250,0.30);
    }

    100% {
        color: #7dd3fc;
        background: rgba(2,132,199,0.26);
        border-color: rgba(56,189,248,0.95);
        box-shadow: 0 0 26px rgba(56,189,248,0.34);
    }
}

@keyframes champManGoalFlashOpponent {
    0% {
        color: #ffffff;
        background: rgba(88,28,135,0.26);
        border-color: rgba(192,132,252,0.85);
        box-shadow: 0 0 18px rgba(168,85,247,0.22);
    }

    50% {
        color: #f3e8ff;
        background: rgba(126,34,206,0.34);
        border-color: rgba(216,180,254,0.95);
        box-shadow: 0 0 24px rgba(168,85,247,0.32);
    }

    100% {
        color: #d8b4fe;
        background: rgba(107,33,168,0.30);
        border-color: rgba(192,132,252,0.95);
        box-shadow: 0 0 26px rgba(192,132,252,0.36);
    }
}

.scoreTeamUser {
    color: #7dd3fc;
    text-shadow: 0 0 14px rgba(125,211,252,0.28);
}

.scoreTeamOpponent {
    color: #d8b4fe;
    text-shadow: 0 0 14px rgba(168,85,247,0.24);
}

.matchStatTile strong.statUserValue,
.matchStatTile em.statUserValue {
    color: #7dd3fc;
}

.matchStatTile strong.statOpponentValue,
.matchStatTile em.statOpponentValue {
    color: #d8b4fe;
}

#playerTooltip,
.playerTooltip {
    position: fixed !important;
    z-index: 999999 !important;
    pointer-events: none;
}

.playerTooltip .tooltipCard {
    position: relative !important;
    z-index: 1 !important;
}

.simSeasonModalContent {
    width: min(520px, 92vw);

    padding: 28px;

    border-radius: 22px;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.96),
            rgba(2,6,23,0.98)
        );

    border: 1px solid rgba(125,211,252,0.34);

    text-align: center;

    box-shadow:
        0 30px 90px rgba(0,0,0,0.75),
        inset 0 1px 0 rgba(255,255,255,0.06);
}

.simSeasonModalContent h2 {
    margin-bottom: 16px;

    color: #7dd3fc;
    font-size: 28px;
}

.simSeasonModalContent p {
    color: #dbeafe;
    line-height: 1.5;
}

.simSeasonWarning {
    margin-top: 18px;
    font-weight: 700;
}

.simSeasonButtons {
    display: flex;
    justify-content: center;
    gap: 16px;

    margin-top: 24px;
}

.simSeasonConfirmModal {
    position: fixed;
    inset: 0;
    z-index: 10000;

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

    background: rgba(0,0,0,0.72);
}

.simSeasonConfirmBox {
    width: min(520px, 92vw);
    padding: 28px;

    border-radius: 24px;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.96),
            rgba(2,6,23,0.98)
        );

    border: 1px solid rgba(125,211,252,0.34);

    box-shadow:
        0 30px 90px rgba(0,0,0,0.75),
        inset 0 1px 0 rgba(255,255,255,0.06);

    text-align: center;
}

.simSeasonConfirmBox h2 {
    margin: 0 0 14px;

    color: #7dd3fc;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.simSeasonConfirmBox p {
    margin: 0 auto 18px;

    color: rgba(226,232,240,0.82);
    line-height: 1.55;
    font-weight: 700;
}

.simSeasonConfirmBox strong {
    display: block;
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 22px;
}

.simSeasonConfirmButtons {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.simSeasonLoadingBar {
    width: 100%;
    height: 12px;

    margin-top: 22px;

    border-radius: 999px;

    background: rgba(2,6,23,0.72);
    border: 1px solid rgba(125,211,252,0.22);

    overflow: hidden;
}

.simSeasonLoadingFill {
    height: 100%;
    width: 45%;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(125,211,252,0.25),
            rgba(125,211,252,0.95),
            rgba(192,132,252,0.95),
            rgba(125,211,252,0.25)
        );

    animation: simSeasonLoading 0.95s ease-in-out infinite;
}

@keyframes simSeasonLoading {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(240%);
    }
}

/* =====================================================
   MOBILE LAYOUT - ALPHA 1.1
   Desktop remains unchanged
===================================================== */

.mobileSeasonTabs {
    display: none;
}

@media (max-width: 900px) {

    body {
        background-position: center top;
        overflow-x: hidden;
    }

    .siteLogoWide {
        width: 360px;
        max-width: 92vw;
    }

    #appBanner,
    .appBanner {
        padding: 10px 12px;
        margin-bottom: 14px;
    }

    .bannerButtonContainer {
        gap: 8px;
    }

    .bannerButton,
    .supportButton,
    .feedbackButton,
    .devButton {
        width: 100%;
        max-width: 320px;
        height: 38px;
        font-size: 12px;
    }

    .devButton {
        display: none;
    }

    .bannerVersion {
        right: 10px;
        bottom: 8px;
        font-size: 10px;
    }

    #gameArea {
        display: block;
        width: 100%;
        padding: 0 12px;
        max-width: none;
    }

    #draftArea,
    #playerChoices {
        width: 100%;
    }

    #teamStrengthPanel,
    #squadPanel {
        width: 100%;
        margin: 0 auto 14px;
        min-height: auto;
    }

    #teamStrengthPanel {
        display: none;
    }

    #squadPanel {
        margin-top: 14px;
    }

    #playerChoices .playerOptionsWrapper {
        padding: 14px;
        gap: 14px;
        border-radius: 18px;
    }

    .formationCard {
        width: 100%;
        max-width: 320px;
        min-height: 330px;
    }

    .formationPitch {
        height: 178px;
    }

    .draftButtonsContainer {
        gap: 8px;
        margin-bottom: 12px;
    }

    .draftButton {
        width: 100%;
        max-width: 320px;
        min-width: 0;
        height: 40px;
        font-size: 12px;
    }

    .draftingLabel {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .draftCardsRow {
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }

    .playerCard {
        width: 100%;
        max-width: 330px;
        min-height: 390px;
    }

    .playerCard:hover {
        transform: none;
    }

    .rerollRow {
        margin-top: 14px;
    }

    .rerollInfo,
    .rerollButton {
        width: 100%;
        max-width: 320px;
    }

    .tacticsBox {
        width: 100%;
        max-width: none;
        padding: 12px;
    }

    .tacticsHeader {
        font-size: 22px;
        margin-bottom: 10px;
        padding-bottom: 8px;
    }

    .tacticsRow {
        grid-template-columns: 1fr;
        gap: 7px;
        padding: 8px;
        margin-bottom: 7px;
    }

    .tacticsRow label {
        text-align: center;
        font-size: 11px;
    }

    .tacticsOptionGroup {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .tacticsOptionButton {
        min-height: 36px;
        font-size: 12px;
    }

    #simulateButton {
        height: 42px;
        margin-top: 8px;
    }

    .teamNameFinalCard {
        width: 100%;
        margin: 8px auto 30px;
        padding: 20px 14px;
    }

    .teamNameFinalCard h2 {
        font-size: 22px;
    }

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

    .finalNameRow {
        flex-direction: column;
    }

    .finalTeamNameInput,
    #randomTeamNameButton,
    #startSeasonButton {
        width: 100%;
        max-width: 320px;
        min-width: 0;
    }

    /* ===== MOBILE SEASON TABS ===== */

    .mobileSeasonTabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        width: 100%;
        margin: 0 auto 12px;
        padding: 0 2px;
    }

    .mobileSeasonTab {
        height: 40px;
        border-radius: 999px;
        border: 1px solid rgba(125,211,252,0.26);

        background:
            linear-gradient(
                180deg,
                rgba(15,23,42,0.74),
                rgba(2,6,23,0.90)
            );

        color: rgba(226,232,240,0.78);
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .mobileSeasonTab.active {
        color: #ffffff;
        border-color: rgba(125,211,252,0.70);

        background:
            linear-gradient(
                180deg,
                rgba(59,130,246,0.88),
                rgba(37,99,235,0.88)
            );

        box-shadow:
            0 0 14px rgba(125,211,252,0.20),
            inset 0 1px 0 rgba(255,255,255,0.12);
    }

    #seasonContainer {
        display: block;
        width: 100%;
    }

    .mobileSeasonPanel {
        display: none;
    }

    .mobileSeasonPanel.active {
        display: block;
    }

    #leagueSection,
    #matchCentreSection,
    #squadSection {
        width: 100%;
        margin: 0 auto 90px;
    }

    #leagueSection,
    #squadSection {
        padding: 12px;
    }

    #leagueTable,
    #playerStats {
        overflow-x: auto;
    }

    #leagueTable table,
    .squadStatsTable {
        min-width: 560px;
    }

    .matchCard {
        height: auto;
        min-height: 430px;
        padding: 34px 12px 14px;
    }

    .preMatchLogo {
        width: min(320px, 78%);
    }

    .scoreLine {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px;
        white-space: normal;
    }

    .scoreLine .scoreTeamHome,
    .scoreLine .scoreTeamAway {
        text-align: center;
    }

    .scoreLine .scoreNumbers {
        min-width: 0;
        font-size: 42px;
    }

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

    .matchSummary {
        font-size: 11px;
    }

    .summaryEventsRow {
        justify-content: center;
    }

    .matchButtonRow {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 9998;

        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;

        padding: 10px;

        border-radius: 18px;

        background:
            linear-gradient(
                180deg,
                rgba(15,23,42,0.72),
                rgba(2,6,23,0.92)
            );

        backdrop-filter: blur(10px);

        border: 1px solid rgba(125,211,252,0.22);

        box-shadow:
            0 16px 36px rgba(0,0,0,0.48),
            inset 0 1px 0 rgba(255,255,255,0.06);
    }

    .matchButtonRow .bigPlayButton {
        width: 100%;
        height: 44px;
        margin: 0;
    }

    .matchEventsModalContent {
        width: 94vw;
        max-height: 92vh;
        padding: 18px;
    }

    .modalChanceLog {
        max-height: 78vh;
    }

    .seasonReview {
        width: 100%;
        margin: 12px auto 90px;
    }

    .seasonReviewCard {
        padding: 20px 14px;
    }

    .seasonReviewCard h2 {
        font-size: 26px;
    }

    .seasonFinish h3 {
        font-size: 22px;
    }

    .identityBadges,
    .reviewGrid {
        grid-template-columns: 1fr;
    }

    .reviewButtons {
        flex-direction: column;
    }

    .reviewButtons .startGameButton {
        width: 100%;
    }
}