/* ======================================================
   FIFA WORLD CUP STANDINGS
====================================================== */

#manikandanStandings{
    width:100%;
    font-family:Inter,Arial,sans-serif;
    color:#0f172a;
}

/* ======================================================
   GROUP CARD
====================================================== */

#manikandanStandings > div{
    background:#ffffff;
    border-radius:16px;
    overflow:hidden;
    margin-bottom:40px;

    border:1px solid #dbe7f5;

    box-shadow:
        0 4px 12px rgba(4,30,66,.08),
        0 12px 30px rgba(4,30,66,.12);

    transition:.3s ease;
}

#manikandanStandings > div:hover{
    transform:translateY(-2px);

    box-shadow:
        0 8px 20px rgba(4,30,66,.12),
        0 18px 40px rgba(4,30,66,.16);
}

/* ======================================================
   GROUP TITLE
====================================================== */

#manikandanStandings > div > div:first-child{

    position:relative;
    overflow:hidden;

    padding:22px 28px;

    color:#ffffff;
    font-size:24px;
    font-weight:700;
    letter-spacing:.5px;

    background:
        linear-gradient(
            135deg,
            #041E42 0%,
            #0A2A5E 40%,
            #0F4C81 75%,
            #00AEEF 100%
        );

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

/* LEFT FLOODLIGHT */

#manikandanStandings > div > div:first-child::before{
    content:"";

    position:absolute;

    top:-100px;
    left:-70px;

    width:260px;
    height:260px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.35) 0%,
            rgba(255,255,255,.12) 40%,
            rgba(255,255,255,0) 75%
        );

    pointer-events:none;
}

/* RIGHT FLOODLIGHT */

#manikandanStandings > div > div:first-child::after{
    content:"";

    position:absolute;

    top:-120px;
    right:-80px;

    width:300px;
    height:300px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,174,239,.45) 0%,
            rgba(0,174,239,.15) 45%,
            rgba(0,174,239,0) 80%
        );

    pointer-events:none;
}

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

#manikandanStandings table{
    width:100%;
    border-collapse:collapse;
    background:#ffffff;

    /* Ensures identical column widths for all groups */
    table-layout:fixed;
}



/* ======================================================
   FIXED COLUMN WIDTHS
====================================================== */

#manikandanStandings thead th:first-child,
#manikandanStandings tbody td:first-child{
    width:42%;
}

#manikandanStandings thead th:nth-child(2),
#manikandanStandings tbody td:nth-child(2),

#manikandanStandings thead th:nth-child(3),
#manikandanStandings tbody td:nth-child(3),

#manikandanStandings thead th:nth-child(4),
#manikandanStandings tbody td:nth-child(4),

#manikandanStandings thead th:nth-child(5),
#manikandanStandings tbody td:nth-child(5),

#manikandanStandings thead th:nth-child(6),
#manikandanStandings tbody td:nth-child(6),

#manikandanStandings thead th:nth-child(7),
#manikandanStandings tbody td:nth-child(7),

#manikandanStandings thead th:nth-child(8),
#manikandanStandings tbody td:nth-child(8),

#manikandanStandings thead th:nth-child(9),
#manikandanStandings tbody td:nth-child(9){
    width:7.25%;
}


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

#manikandanStandings thead{
    background:#f8fafc;
}

#manikandanStandings thead th{

    padding:18px 12px;

    text-align:center;

    color:#64748b;

    font-size:13px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.08em;

    border-bottom:2px solid #e2e8f0;
}

#manikandanStandings thead th:first-child{
    text-align:left;
    padding-left:24px;
}

/* ======================================================
   BODY ROWS
====================================================== */

#manikandanStandings tbody tr{
    transition:.25s ease;
    border-bottom:1px solid #edf2f7;
}

#manikandanStandings tbody tr:nth-child(even){
    background:#fafafa;
}

#manikandanStandings tbody tr:hover{
    background:#eef7ff;
}

/* TOP TEAM ROW */

#manikandanStandings tbody tr:first-child{
    background:
        linear-gradient(
            90deg,
            rgba(0,174,239,.08),
            rgba(255,255,255,0)
        );
}

/* ======================================================
   CELLS
====================================================== */

#manikandanStandings tbody td{
    padding:18px 10px;
    text-align:center;
    font-size:15px;
    color:#334155;
    vertical-align:middle;
}

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

#manikandanStandings tbody td:first-child{
    text-align:left;
    padding-left:24px;
    overflow:hidden;
}

/* TEAM WRAPPER */

#manikandanStandings tbody td:first-child > div{
    display:flex;
    align-items:center;
    gap:16px;
}

/* POSITION */

#manikandanStandings tbody td:first-child > div > div:first-child{

    min-width:28px;

    font-size:18px;
    font-weight:700;

    color:#64748b;
}

/* TEAM NAME */

#manikandanStandings tbody td:first-child > div > div:last-child{

    font-size:17px;
    font-weight:600;
    color:#0f172a;

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

/* ======================================================
   QUALIFIED TEAM (1st PLACE)
====================================================== */

#manikandanStandings tbody tr:first-child td:first-child > div > div:first-child{
    color:#16a34a;
    font-weight:800;
}

/* ======================================================
   POINTS COLUMN
====================================================== */

#manikandanStandings tbody td:last-child{

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

    color:#00AEEF;
}

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

#manikandanStandings table{
    display:table;
}

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

@media(max-width:900px){

    #manikandanStandings{
        overflow:hidden;
    }

    #manikandanStandings table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

    #manikandanStandings > div > div:first-child{
        font-size:20px;
        padding:18px;
    }

    #manikandanStandings tbody td{
        padding:14px 8px;
        font-size:14px;
    }

    #manikandanStandings tbody td:first-child > div > div:last-child{
        font-size:14px;
    }
}