:root{
    --bg-dark:#04090f;
    --bg-mid:#0a1a27;
    --line:#38f6df;
    --line-soft:#67ffe9;
    --gold:#ffcb33;
    --text:#f2fcff;
    --muted:#89c9c7;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;
}

body{
    font-family:"Rajdhani","Agency FB","Trebuchet MS",sans-serif;
    color:var(--text);
    background:
        radial-gradient(1100px 700px at 50% -120px, #15364a 0%, #091622 58%, #03070c 100%),
        linear-gradient(135deg, #1f2932 0 10%, transparent 10% 90%, #1f2932 90% 100%);
    padding:18px;
}

.board-shell{
    width:min(1800px, 100%);
    margin:0 auto;
    border:2px solid rgba(56,246,223,.34);
    background:
        linear-gradient(165deg, rgba(8,23,34,.9), rgba(3,9,14,.96)),
        repeating-linear-gradient(122deg, rgba(56,246,223,.03), rgba(56,246,223,.03) 8px, transparent 8px, transparent 16px);
    box-shadow:0 0 0 1px rgba(255,203,51,.3) inset, 0 28px 90px rgba(0,0,0,.55);
    padding:18px 22px 16px;
    position:relative;
}

.board-shell::before,
.board-shell::after{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    border:3px solid var(--gold);
    opacity:.65;
}

.board-shell::before{
    left:-2px;
    top:-2px;
    border-right:none;
    border-bottom:none;
    clip-path:polygon(0 0, 100% 0, 0 100%);
}

.board-shell::after{
    right:-2px;
    bottom:-2px;
    border-top:none;
    border-left:none;
    clip-path:polygon(100% 0, 100% 100%, 0 100%);
}

.board-header{
    text-align:center;
    border-bottom:2px solid rgba(56,246,223,.2);
    margin-bottom:14px;
}

.board-header h1{
    margin:0;
    font-size:clamp(42px, 4.2vw, 86px);
    line-height:.92;
    letter-spacing:4px;
    text-transform:uppercase;
}

.board-header p{
    margin:2px 0 14px;
    font-size:clamp(26px, 2.2vw, 44px);
    letter-spacing:2px;
    color:var(--gold);
    text-transform:uppercase;
    font-weight:700;
}

.board-columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.column-card{
    background:linear-gradient(180deg, rgba(9,25,38,.8), rgba(5,12,18,.7));
    border:1px solid rgba(56,246,223,.2);
    padding:8px;
}

.table-head,
.team-row{
    display:grid;
    grid-template-columns:70px 1.8fr 84px 96px 80px 92px;
    align-items:center;
    gap:8px;
}

.table-head{
    margin-bottom:8px;
    padding:7px 8px;
    border:1px solid rgba(255,203,51,.5);
    color:var(--gold);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.8px;
    font-size:clamp(12px, .9vw, 17px);
    background:linear-gradient(90deg, rgba(255,203,51,.11), rgba(56,246,223,.07));
}

.table-head span{
    text-align:center;
}

.table-head span:nth-child(2){
    text-align:left;
    padding-left:10px;
}

.table-body{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.team-row{
    margin:0;
    padding:5px 8px;
    border:1px solid rgba(56,246,223,.24);
    border-left:4px solid rgba(56,246,223,.8);
    background:linear-gradient(92deg, rgba(13,31,43,.95) 0 68px, rgba(234,251,251,.96) 68px 58%, rgba(77,255,218,.68) 100%);
}

.top-one{
    border-left-color:#ffd84f;
}

.top-two{
    border-left-color:#e5f4ff;
}

.top-three{
    border-left-color:#e89d62;
}

.rank-cell{
    text-align:center;
    color:#06111b;
    font-size:clamp(18px, 1.55vw, 30px);
    font-weight:700;
}

.team-cell{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.team-logo{
    width:32px;
    height:32px;
    object-fit:cover;
    border:1px solid rgba(0,0,0,.3);
    background:#fff;
    flex:0 0 auto;
}

.team-logo.placeholder{
    width:32px;
    height:32px;
    border-radius:2px;
    border:1px solid rgba(0,0,0,.35);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#0b2432;
    color:#96fff0;
    font-weight:700;
}

.team-name{
    font-size:clamp(16px, 1.45vw, 28px);
    text-transform:uppercase;
    color:#101a1f;
    font-weight:700;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.num-cell{
    text-align:center;
    color:#032230;
    font-size:clamp(16px, 1.35vw, 26px);
    font-weight:700;
}

.num-cell.total{
    color:#001624;
}

.board-footer{
    margin-top:12px;
    border-top:1px solid rgba(56,246,223,.2);
    padding-top:10px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    font-size:14px;
    color:var(--muted);
    text-transform:uppercase;
}

@media (max-width:1300px){
    .table-head,
    .team-row{
        grid-template-columns:58px 1.6fr 72px 82px 72px 80px;
        gap:6px;
    }
}

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

@media (max-width:760px){
    body{
        padding:8px;
    }

    .board-shell{
        padding:10px 8px 10px;
    }

    .table-head,
    .team-row{
        grid-template-columns:42px 1.2fr 58px 62px 52px 62px;
        gap:4px;
    }

    .team-logo,
    .team-logo.placeholder{
        width:22px;
        height:22px;
    }

    .board-footer{
        flex-direction:column;
    }
}