.predict-page{
    background:#17181b
}

.predict-page .site-header{
    position:relative
}

.predict-page .event-nav nav .current{
    color:#ffce48
}

.predict-hero{
    padding:80px max(28px,calc((100vw - 1240px)/2));
    background:radial-gradient(circle at 80% 20%,rgba(255,206,72,.12),transparent 30%)
}

.predict-hero h1{
    font:400 clamp(55px,8vw,108px)/.9 "Bowlby One SC";
    letter-spacing:-3px
}

.predict-hero>p:last-child{
    max-width:670px;
    color:#b9bbc2;
    font-size:17px;
    line-height:1.7
}

.predict-workspace{
    max-width:1240px;
    margin:auto;
    padding:20px 28px 110px;
    display:grid;
    grid-template-columns:250px 1fr;
    gap:34px
}

.team-tray{
    position:sticky;
    top:18px;
    align-self:start;
    background:#1d1e21;
    border:1px solid #38393e;
    border-radius:5px;
    padding:20px
}

.team-tray h2,.board-heading h2{
    font:400 25px "Bowlby One SC";
    letter-spacing:0;
    margin:0
}

.team-tray p{
    color:#92949b;
    font-size:11px
}

.prediction-teams{
    display:grid;
    gap:8px;
    margin-top:18px
}

.prediction-team{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:47px;
    width:100%;
    padding:8px 11px;
    border:1px solid #3a3b40;
    border-left:5px solid var(--team);
    border-radius:4px;
    background:#17181b;
    color:#fff;
    font:700 12px "Stack Sans Text";
    text-align:left;
    cursor:grab
}

.prediction-team:active{
    cursor:grabbing
}

.prediction-team.selected{
    outline:2px solid #ffce48;
    background:#29271e
}

.prediction-team.used{
    opacity:.35
}

.prediction-team img,
.placed-team img{
    width:32px;
    height:36px;
    flex:0 0 auto;
    object-fit:contain;
    image-rendering:pixelated
}

.prediction-tabs{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:12px
}

.prediction-tabs button{
    flex:0 0 auto;
    min-height:44px;
    padding:10px 16px;
    border:1px solid #3a3b40;
    border-radius:4px;
    background:#1d1e21;
    color:#b9bbc2;
    font-weight:800;
    cursor:pointer
}

.prediction-tabs button.active{
    border-color:#ffce48;
    color:#ffce48
}

.prediction-board{
    min-width:0
}

.board-heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    margin:25px 0 20px
}

.board-heading .section-label{
    margin-bottom:8px
}

.board-heading h2{
    font-size:36px
}

.board-heading button{
    min-height:44px;
    padding:0 14px;
    border:1px solid #414247;
    border-radius:4px;
    background:#25262a;
    color:#fff;
    cursor:pointer
}

.placement-list{
    list-style:none;
    margin:0;
    padding:0;
    border:1px solid #38393e;
    border-radius:5px;
    overflow:hidden;
    counter-reset:place
}

.placement-slot{
    counter-increment:place;
    display:grid;
    grid-template-columns:65px 1fr auto;
    align-items:center;
    min-height:66px;
    padding:8px 14px;
    border-top:1px solid #303136;
    background:#1d1e21
}

.placement-slot:first-child{
    border-top:0
}

.placement-slot::before{
    content:"#" counter(place);
    font:400 18px "Bowlby One SC";
    color:#ffce48
}

.placement-slot.empty{
    color:#777980
}

.placement-slot.drag-over{
    background:#29271e;
    box-shadow:inset 0 0 0 2px #ffce48
}

.placed-team{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:800
}

.placed-team i{
    width:12px;
    height:12px;
    border-radius:2px;
    background:var(--team)
}

.placement-slot .remove-team{
    width:44px;
    height:44px;
    border:0;
    background:transparent;
    color:#b9bbc2;
    font-size:22px;
    cursor:pointer
}

.save-state{
    color:#8f9198;
    font-size:11px
}

.save-state.saved{
    color:#ffce48
}

.prediction-account{
    display:inline-flex;
    align-items:center;
    min-height:42px;
    margin-top:20px;
    padding:10px 14px;
    border:1px solid #3b3d43;
    border-radius:4px;
    color:#d8d9dd;
    background:#1b1c20;
    font-size:13px
}

.prediction-account strong{
    color:#ffce48
}

.prediction-submit-status{
    margin:10px 0 0;
    color:#b8bac2;
    font-size:13px;
    line-height:1.5
}

.prediction-submit-status.error{
    color:#ff8a8a
}

.prediction-submit-status.success{
    color:#ffce48
}

.predict-page.prediction-locked .prediction-team,
.predict-page.prediction-locked .placement-slot,
.predict-page.prediction-locked .clear-prediction{
    pointer-events:none
}

.predict-page.prediction-locked .clear-prediction{
    opacity:.45
}

.predict-page.prediction-locked .predict-workspace{
    grid-template-columns:minmax(0,1fr);
    max-width:1120px
}

.predict-page.prediction-locked .team-tray,
.predict-page.prediction-locked .prediction-intro,
.predict-page.prediction-locked .prediction-account,
.predict-page.prediction-locked .board-heading,
.predict-page.prediction-locked .placement-list,
.predict-page.prediction-locked .prediction-submit-row,
.predict-page.prediction-locked .prediction-submit-status{
    display:none
}

.predict-page.prediction-locked .prediction-results{
    margin-top:0
}

@media(max-width:760px){
    .predict-hero{
        padding:55px 18px
    }

    .predict-hero h1{
        font-size:50px
    }

    .predict-workspace{
        padding:10px 16px 150px;
        display:flex;
        flex-direction:column-reverse;
        gap:18px
    }

    .team-tray{
        position:fixed;
        z-index:35;
        left:0;
        right:0;
        bottom:0;
        top:auto;
        padding:10px 14px 14px;
        border-radius:0;
        border-width:1px 0 0
    }

    .team-tray>div:first-child{
        display:flex;
        align-items:center;
        justify-content:space-between
    }

    .team-tray h2{
        font-size:18px
    }

    .team-tray p{
        margin:0
    }

    .prediction-teams{
        display:flex;
        overflow-x:auto;
        gap:7px;
        margin-top:8px;
        padding-bottom:2px
    }

    .prediction-team{
        flex:0 0 auto;
        width:auto;
        min-height:44px
    }

    .board-heading{
        align-items:center
    }

    .board-heading h2{
        font-size:27px
    }

    .placement-slot{
        grid-template-columns:52px 1fr auto;
        min-height:62px
    }

}