/* ==========================================================
   LEINONEM.COM SPORTS
   Premium Neon Sports Card
   ========================================================== */

.lsdb-wrap {
    --purple: #8b5cf6;
    --purple-light: #a78bfa;
    --blue: #38bdf8;
    --pink: #ec4899;

    --bg: #06060b;
    --bg2: #0c0a14;
    --panel: #0d0c14;

    --text: #f5f3ff;
    --muted: #858195;
    --border: rgba(255,255,255,.07);

    position: relative;

    width: 100%;
    max-width: 1150px;

    margin: 30px auto;

    overflow: hidden;

    color: var(--text);

    background:
        radial-gradient(
            800px 400px at 0% 0%,
            rgba(139,92,246,.15),
            transparent 65%
        ),
        radial-gradient(
            700px 400px at 100% 100%,
            rgba(56,189,248,.08),
            transparent 65%
        ),
        linear-gradient(
            145deg,
            #05050a,
            #0b0912 50%,
            #07070d
        );

    border: 1px solid rgba(139,92,246,.22);

    border-radius: 20px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.45),
        0 0 40px rgba(139,92,246,.06),
        inset 0 1px 0 rgba(255,255,255,.04);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    box-sizing: border-box;
}


/* ==========================================================
   TOP NEON LINE
   ========================================================== */

.lsdb-wrap::before {

    content: "";

    position: absolute;

    top: 0;
    left: 5%;
    right: 5%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--purple),
            var(--blue),
            var(--pink),
            transparent
        );

    box-shadow:
        0 0 15px rgba(139,92,246,.9);

    z-index: 5;
}


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

.lsdb-header {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 115px;

    padding: 28px 30px;

    background:
        linear-gradient(
            135deg,
            rgba(139,92,246,.14),
            rgba(56,189,248,.035) 55%,
            rgba(236,72,153,.09)
        );

    border-bottom:
        1px solid rgba(255,255,255,.06);

    box-sizing: border-box;
}


.lsdb-header::after {

    content: "";

    position: absolute;

    bottom: 0;
    left: 30px;

    width: 130px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--purple),
            var(--blue),
            transparent
        );

    box-shadow:
        0 0 12px rgba(139,92,246,.7);
}


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

.lsdb-kicker {

    display: block;

    margin-bottom: 8px;

    color: #9186a9;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 4px;

    line-height: 1;

    text-transform: uppercase;
}


.lsdb-header h2 {

    margin: 0;

    font-size: 34px;

    line-height: 1;

    font-weight: 950;

    letter-spacing: 1px;

    text-transform: uppercase;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #c4b5fd 35%,
            #67e8f9 70%,
            #f9a8d4
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    filter:
        drop-shadow(
            0 0 12px rgba(139,92,246,.18)
        );
}


.lsdb-header p {

    margin: 9px 0 0;

    color: #706c7d;

    font-size: 11px;

    letter-spacing: .5px;
}


/* ==========================================================
   SPORTS BADGE
   ========================================================== */

.lsdb-header-mark {

    padding: 13px 17px;

    color: #777086;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 3px;

    background:
        rgba(255,255,255,.025);

    border:
        1px solid rgba(139,92,246,.18);

    border-radius: 8px;

    transform: skew(-8deg);

    box-shadow:
        inset 0 0 20px rgba(139,92,246,.04);
}


/* ==========================================================
   TABS
   ========================================================== */

.lsdb-tabs {

    display: flex;

    gap: 6px;

    padding: 10px;

    background:
        rgba(2,2,6,.7);

    border-bottom:
        1px solid rgba(255,255,255,.06);

    overflow-x: auto;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(139,92,246,.45)
        transparent;
}


.lsdb-tabs::-webkit-scrollbar {
    height: 4px;
}


.lsdb-tabs::-webkit-scrollbar-track {
    background: transparent;
}


.lsdb-tabs::-webkit-scrollbar-thumb {

    background:
        rgba(139,92,246,.4);

    border-radius: 20px;
}


/* ==========================================================
   TAB
   ========================================================== */

.lsdb-tab {

    position: relative;

    flex: 1 1 0;

    min-width: 125px;

    padding: 14px 12px;

    color: #777383;

    background: transparent;

    border: 1px solid transparent;

    border-radius: 10px;

    font-family: inherit;

    font-size: 11px;

    font-weight: 850;

    letter-spacing: .5px;

    cursor: pointer;

    white-space: nowrap;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.lsdb-tab:hover {

    color: #f2efff;

    background:
        rgba(139,92,246,.07);

    border-color:
        rgba(139,92,246,.12);

    transform:
        translateY(-1px);
}


.lsdb-tab.active {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(139,92,246,.2),
            rgba(56,189,248,.07),
            rgba(236,72,153,.1)
        );

    border-color:
        rgba(139,92,246,.28);

    box-shadow:
        0 5px 20px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.04);
}


.lsdb-tab.active::after {

    content: "";

    position: absolute;

    left: 18%;
    right: 18%;

    bottom: -1px;

    height: 2px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--purple),
            var(--blue),
            var(--pink)
        );

    box-shadow:
        0 0 12px rgba(139,92,246,.9);
}


.lsdb-tab-icon {

    margin-right: 6px;

    font-size: 13px;

    filter:
        drop-shadow(
            0 0 5px rgba(139,92,246,.5)
        );
}


/* ==========================================================
   CONTENT
   ========================================================== */

.lsdb-content {

    padding: 22px;

    box-sizing: border-box;
}


/* ==========================================================
   PANELS
   ========================================================== */

.lsdb-panel {

    display: none;

    animation:
        lsdbPanel .25s ease;
}


.lsdb-panel.active {
    display: block;
}


@keyframes lsdbPanel {

    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================
   PANEL TITLE
   ========================================================== */

.lsdb-panel-title {

    margin-bottom: 20px;
}


.lsdb-panel-title > div {

    display: flex;

    align-items: center;

    gap: 10px;
}


.lsdb-panel-title span {

    display: flex;

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

    width: 32px;
    height: 32px;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            rgba(139,92,246,.18),
            rgba(56,189,248,.08)
        );

    border:
        1px solid rgba(139,92,246,.18);

    font-size: 15px;
}


.lsdb-panel-title strong {

    color: #eeeaff;

    font-size: 18px;

    font-weight: 900;

    text-transform: uppercase;
}


/* ==========================================================
   SECTION
   ========================================================== */

.lsdb-section {

    margin-bottom: 28px;
}


/* ==========================================================
   SECTION TITLE
   ========================================================== */

.lsdb-section-title {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 9px;

    padding:
        0 5px 9px;

    color: #706b7c;

    border-bottom:
        1px solid rgba(255,255,255,.05);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.lsdb-section-title::before {

    content: "";

    width: 5px;
    height: 5px;

    flex: 0 0 5px;

    border-radius: 50%;

    background:
        var(--purple);

    box-shadow:
        0 0 9px var(--purple);
}


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

.lsdb-match {

    position: relative;

    display: grid;

    grid-template-columns:
        90px
        minmax(0, 1fr)
        34px;

    align-items: center;

    min-height: 68px;

    margin-bottom: 6px;

    padding: 9px 12px;

    background:
        linear-gradient(
            100deg,
            rgba(255,255,255,.025),
            rgba(139,92,246,.025),
            rgba(56,189,248,.012)
        );

    border:
        1px solid rgba(255,255,255,.055);

    border-radius: 11px;

    box-sizing: border-box;

    overflow: hidden;

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


.lsdb-match::before {

    content: "";

    position: absolute;

    left: 0;

    top: 12px;
    bottom: 12px;

    width: 2px;

    background:
        linear-gradient(
            180deg,
            var(--purple),
            var(--blue),
            transparent
        );

    opacity: .45;
}


.lsdb-match:hover {

    transform:
        translateX(3px);

    border-color:
        rgba(139,92,246,.25);

    background:
        linear-gradient(
            100deg,
            rgba(139,92,246,.07),
            rgba(56,189,248,.03)
        );

    box-shadow:
        0 8px 25px rgba(0,0,0,.25),
        0 0 20px rgba(139,92,246,.05);
}


/* ==========================================================
   DATE
   ========================================================== */

.lsdb-match-date {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 4px;

    padding-left: 5px;

    color: #777283;

    font-size: 10px;

    line-height: 1.2;
}


.lsdb-match-date b {

    color: #c2bdcc;

    font-size: 11px;

    font-weight: 800;
}


/* ==========================================================
   TEAMS CONTAINER
   ========================================================== */

.lsdb-teams {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        82px
        minmax(0, 1fr);

    align-items: center;

    min-width: 0;

    gap: 10px;
}


/* ==========================================================
   TEAM
   ========================================================== */

.lsdb-team {

    min-width: 0;

    color: #ebe8f4;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.25;

    overflow-wrap: anywhere;

    word-break: normal;
}


.lsdb-team:first-child {

    text-align: right;
}


.lsdb-team:last-child {

    text-align: left;
}


/* ==========================================================
   SCORE
   ========================================================== */

.lsdb-score {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    min-width: 0;
}


.lsdb-score strong {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 25px;

    height: 28px;

    padding: 0 4px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            rgba(139,92,246,.13),
            rgba(255,255,255,.035)
        );

    border:
        1px solid rgba(139,92,246,.13);

    border-radius: 6px;

    font-size: 14px;

    font-weight: 900;

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


.lsdb-score span {

    color: #625e6c;

    font-size: 11px;

    font-weight: 700;
}


/* ==========================================================
   EVENT LINK
   ========================================================== */

.lsdb-event-link {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 28px;
    height: 28px;

    color: #806bc2;

    background:
        rgba(139,92,246,.06);

    border:
        1px solid rgba(139,92,246,.1);

    border-radius: 7px;

    text-decoration: none;

    font-size: 14px;

    transition: .2s ease;
}


.lsdb-event-link:hover {

    color: #ffffff;

    background:
        rgba(139,92,246,.2);

    border-color:
        rgba(139,92,246,.3);

    box-shadow:
        0 0 14px rgba(139,92,246,.2);
}


/* ==========================================================
   EMPTY
   ========================================================== */

.lsdb-empty {

    margin: 0;

    padding: 25px;

    color: #625e6e;

    text-align: center;

    font-size: 12px;

    background:
        rgba(255,255,255,.012);

    border:
        1px dashed rgba(255,255,255,.07);

    border-radius: 10px;
}


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

.lsdb-footer {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 7px;

    padding: 13px 22px;

    color: #514d5b;

    background:
        rgba(0,0,0,.15);

    border-top:
        1px solid rgba(255,255,255,.05);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.lsdb-footer a {

    color: #806bc2;

    text-decoration: none;
}


.lsdb-footer a:hover {
    color: #b8a4ff;
}


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

@media (max-width: 800px) {

    .lsdb-match {

        grid-template-columns:
            75px
            minmax(0, 1fr)
            30px;
    }


    .lsdb-teams {

        grid-template-columns:
            minmax(0, 1fr)
            70px
            minmax(0, 1fr);

        gap: 7px;
    }


    .lsdb-team {
        font-size: 12px;
    }

}


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

@media (max-width: 600px) {

    .lsdb-wrap {

        margin: 15px 0;

        border-radius: 15px;
    }


    .lsdb-header {

        min-height: 88px;

        padding: 20px;
    }


    .lsdb-header h2 {

        font-size: 23px;
    }


    .lsdb-kicker {

        font-size: 8px;

        letter-spacing: 3px;
    }


    .lsdb-header p {

        margin-top: 7px;

        font-size: 10px;
    }


    .lsdb-header-mark {
        display: none;
    }


    /* ------------------------------------------------------
       TABS
       ------------------------------------------------------ */

    .lsdb-tabs {

        padding: 7px;

        gap: 4px;
    }


    .lsdb-tab {

        flex:
            0 0 auto;

        min-width: auto;

        padding:
            11px 12px;

        font-size: 10px;
    }


    .lsdb-tab-icon {

        margin-right: 4px;

        font-size: 11px;
    }


    /* ------------------------------------------------------
       CONTENT
       ------------------------------------------------------ */

    .lsdb-content {

        padding: 12px;
    }


    .lsdb-panel-title {

        margin-bottom: 15px;
    }


    .lsdb-panel-title span {

        width: 28px;
        height: 28px;

        font-size: 13px;
    }


    .lsdb-panel-title strong {

        font-size: 15px;
    }


    /* ------------------------------------------------------
       SECTION
       ------------------------------------------------------ */

    .lsdb-section {

        margin-bottom: 20px;
    }


    .lsdb-section-title {

        padding-bottom: 7px;

        font-size: 8px;

        letter-spacing: 1.4px;
    }


    /* ------------------------------------------------------
       MATCH MOBILE
       ------------------------------------------------------ */

    .lsdb-match {

        display: grid;

        grid-template-columns:
            48px
            minmax(0, 1fr)
            31px;

        min-height: 64px;

        padding:
            8px 7px;

        margin-bottom: 5px;

        border-radius: 9px;
    }


    /* DATE */

    .lsdb-match-date {

        grid-column: 1;

        grid-row: 1;

        align-self: center;

        padding-left: 2px;

        font-size: 8px;

        line-height: 1.2;
    }


    .lsdb-match-date b {

        font-size: 9px;
    }


    /* ------------------------------------------------------
       TEAMS MOBILE
       ------------------------------------------------------ */

    .lsdb-teams {

        grid-column: 2;

        grid-row: 1;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            48px
            minmax(0, 1fr);

        align-items: center;

        gap: 4px;

        min-width: 0;
    }


    .lsdb-team {

        min-width: 0;

        font-size: 10px;

        font-weight: 700;

        line-height: 1.25;

        overflow-wrap: anywhere;
    }


    .lsdb-team:first-child {

        text-align: right;
    }


    .lsdb-team:last-child {

        text-align: left;
    }


    /* ------------------------------------------------------
       SCORE MOBILE
       ------------------------------------------------------ */

    .lsdb-score {

        gap: 2px;
    }


    .lsdb-score strong {

        min-width: 17px;

        height: 23px;

        padding: 0 2px;

        font-size: 11px;

        border-radius: 5px;
    }


    .lsdb-score span {

        font-size: 9px;
    }


    /* ------------------------------------------------------
       LINK
       ------------------------------------------------------ */

    .lsdb-event-link {

        display: none;
    }


    /* ------------------------------------------------------
       FOOTER
       ------------------------------------------------------ */

    .lsdb-footer {

        padding:
            10px 13px;

        font-size: 8px;
    }

}


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

@media (max-width: 390px) {

    .lsdb-header {

        padding: 18px;
    }


    .lsdb-header h2 {

        font-size: 21px;
    }


    .lsdb-content {

        padding: 9px;
    }


    .lsdb-tab {

        padding:
            10px 9px;

        font-size: 9px;
    }


    .lsdb-match {

        grid-template-columns:
            43px
            minmax(0, 1fr)
            28px;

        padding:
            7px 5px;
    }


    .lsdb-teams {

        grid-template-columns:
            minmax(0, 1fr)
            44px
            minmax(0, 1fr);

        gap: 3px;
    }


    .lsdb-team {

        font-size: 9px;
    }


    .lsdb-match-date {

        font-size: 7px;
    }


    .lsdb-match-date b {

        font-size: 8px;
    }


    .lsdb-score strong {

        min-width: 15px;

        height: 21px;

        font-size: 10px;
    }

}
/* ==========================================================
   MOBILE FIX – TEAM LOGOS + MATCH LAYOUT
   ========================================================== */

.lsdb-wrap img {
    max-width: 100%;
    height: auto;
}


/* Joukkueiden logot */
.lsdb-team img,
.lsdb-teams img,
.lsdb-match img {

    width: 24px !important;
    height: 24px !important;

    max-width: 24px !important;
    max-height: 24px !important;

    min-width: 24px;

    object-fit: contain;

    display: inline-block;

    vertical-align: middle;

    margin: 0 5px;

    flex: 0 0 24px;
}


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

@media (max-width: 600px) {

    .lsdb-content {
        padding: 10px;
    }


    .lsdb-match {

        grid-template-columns:
            42px
            minmax(0, 1fr);

        min-height: 68px;

        padding: 8px 6px;

        gap: 4px;
    }


    .lsdb-match-date {

        grid-column: 1;

        width: 42px;

        padding: 0 3px;

        font-size: 8px;

        text-align: center;
    }


    .lsdb-match-date b {
        font-size: 9px;
    }


    .lsdb-teams {

        grid-column: 2;

        width: 100%;

        grid-template-columns:
            minmax(0, 1fr)
            46px
            minmax(0, 1fr);

        gap: 3px;
    }


    .lsdb-team {

        display: flex;

        align-items: center;

        gap: 4px;

        min-width: 0;

        font-size: 10px;

        line-height: 1.15;

        overflow: hidden;
    }


    .lsdb-team:first-child {

        justify-content: flex-end;

        text-align: right;
    }


    .lsdb-team:last-child {

        justify-content: flex-start;

        text-align: left;
    }


    /* LOGOT MOBIILISSA */

    .lsdb-team img,
    .lsdb-teams img,
    .lsdb-match img {

        width: 18px !important;
        height: 18px !important;

        min-width: 18px !important;

        max-width: 18px !important;
        max-height: 18px !important;

        margin: 0 2px !important;

        object-fit: contain !important;
    }


    .lsdb-score {

        width: 46px;

        gap: 2px;
    }


    .lsdb-score strong {

        min-width: 17px;

        width: auto;

        height: 22px;

        padding: 0 2px;

        font-size: 10px;
    }


    .lsdb-score span {
        font-size: 8px;
    }


    /* Linkkiä ei tarvita mobiilissa */

    .lsdb-event-link {
        display: none !important;
    }

}


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

@media (max-width: 390px) {

    .lsdb-content {
        padding: 7px;
    }


    .lsdb-match {

        grid-template-columns:
            38px
            minmax(0, 1fr);

        padding: 7px 4px;
    }


    .lsdb-match-date {

        width: 38px;

        font-size: 7px;
    }


    .lsdb-match-date b {
        font-size: 8px;
    }


    .lsdb-teams {

        grid-template-columns:
            minmax(0, 1fr)
            42px
            minmax(0, 1fr);

        gap: 2px;
    }


    .lsdb-team {

        gap: 2px;

        font-size: 8.5px;
    }


    .lsdb-team img,
    .lsdb-teams img,
    .lsdb-match img {

        width: 16px !important;
        height: 16px !important;

        min-width: 16px !important;

        max-width: 16px !important;
        max-height: 16px !important;

        margin: 0 1px !important;
    }


    .lsdb-score {

        width: 42px;
    }


    .lsdb-score strong {

        min-width: 15px;

        height: 20px;

        font-size: 9px;
    }

}