:root{--betgame-warning-text: var(--color-cont-text-01);}

/* Basis */
.betgame-box,
.betgame-rules-box,
.betgame-prizes-box{
        margin:20px 0;
        background:var(--color-cont-background-01);
        border:1px solid var(--color-border-01);
        border-radius:4px;
}

.betgame-box{
        padding:15px;
}

.betgame-rules-box,
.betgame-prizes-box{
        overflow:hidden;
}

.betgame-prizes-box{
        margin:18px 0;
}

.betgame-question{
        margin:15px 0;
        padding:15px;
        border:1px solid var(--color-border-02);
        border-radius:4px;
        background:#f8f9fa;
}

/* Toggle-Boxen */
.betgame-rules-toggle,
.betgame-prizes-toggle,
.betgame-question-head{
        width:100%;
        border:0;
        cursor:pointer;
        text-align:left;
}

.betgame-rules-toggle,
.betgame-prizes-toggle{
        background:var(--color-cont-background-04);
        font-weight:700;
}

.betgame-rules-toggle{
        padding:14px 15px;
        color: var(--color-cont-text-01);
}

.betgame-prizes-toggle{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:12px;
        padding:12px 15px;
        font-weight:800;
        color: var(--color-cont-text-01);
}

.betgame-prizes-toggle span{
        color:var(--color-cont-text-06);
        font-size:13px;
        font-weight:700;
        white-space:nowrap;
}

.betgame-rules-content,
.betgame-prizes-content{
        border-top:1px solid var(--color-border-01);
}

.betgame-rules-content{
        padding:15px;
}

.betgame-prizes-content{
        padding:14px;
        background:var(--color-cont-background-01);
}

/* Gewinne */
.betgame-prizes-grid{
        display:grid;
        grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
        gap:12px;
        align-items:stretch;
        padding:12px;
}

.betgame-prize-card-front{
        display:flex;
        flex-direction:column;
        min-height:180px;
        border:1px solid var(--color-border-01);
        border-radius:6px;
        background:var(--color-cont-background-01);
        overflow:hidden;
        box-shadow:0 3px 10px rgba(20,40,80,.035);
}

.betgame-prize-card-head{
        padding:10px 14px;
        background:var(--color-cont-background-22);
        border-bottom:1px solid var(--color-border-01);
        color:var(--color-cont-text-10);
        font-weight:900;
        font-size:16px;
        line-height:1.2;
}

.betgame-prize-card-rank{
        display:inline-flex;
        align-items:center;
        gap:6px;
}

.betgame-prize-card-rank::before{
        content:"🏆";
        font-size:14px;
}

.betgame-prize-card-body{
        background:var(--color-cont-background-06);
        flex:1;
        padding:16px 18px;
        font-size:15px;
        line-height:1.45;
}

.betgame-prize-card-body p{
        margin:0 0 12px;
}

.betgame-prize-card-body ul{
        margin:0 0 14px;
        padding-left:22px;
}

.betgame-prize-card-body li{
        margin:3px 0;
}

.betgame-prize-card-body p:last-child,
.betgame-prize-card-body ul:last-child{
        margin-bottom:0;
}

/* Tabs */
.betgame-tabs{
        margin:20px 0;
}

.betgame-tab-nav{
        display:flex;
        align-items:flex-end;
        gap:4px;
        margin-bottom:-1px;
        padding-left:10px;
        border-bottom:1px solid var(--color-border-01);
}

.betgame-tab-btn{
        position:relative;
        margin-top:2px;
        padding:11px 18px 10px;
        border:1px solid var(--color-border-01);
        border-bottom:0;
        border-radius:12px 12px 0 0;
        background:var(--color-cont-background-04);
        color:var(--color-cont-text-06);
        font-weight:800;
        cursor:pointer;
        transition:.15s ease;
}

.betgame-tab-btn:hover{
        background:var(--color-cont-background-01);
        color:var(--color-cont-text-01);
}

.betgame-tab-btn.active{
        background:var(--color-cont-background-01);
        color:var(--color-cont-text-10);
        box-shadow:0 -3px 12px rgba(20,40,80,.05);
}

.betgame-tab-btn.active::after{
        content:"";
        position:absolute;
        right:0;
        bottom:-1px;
        left:0;
        height:2px;
        background:var(--color-cont-background-01);
}

.betgame-tab-panel{
        display:none;
}

.betgame-tab-panel.active{
        display:block;
}

.betgame-tab-panel > .betgame-box{
        margin-top:0;
        border-top-left-radius:0;
        box-shadow:0 8px 24px rgba(20,40,80,.04);
}

/* Fragen */
.betgame-question-compact{
        margin-bottom:10px;
        border:1px solid var(--color-border-02);
        border-radius:4px;
        background:var(--color-cont-background-01);
        overflow:hidden;
}

.betgame-question-head{
        color: var(--color-cont-text-01);
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:12px;
        padding:11px 14px;
        background:var(--color-cont-background-04);
}

.betgame-question-body{
        display:none;
        padding:12px 15px;
        border-top:1px solid var(--color-border-01);
}

.betgame-question-body.open{
        display:block;
}

.betgame-question-body p:first-of-type{
        margin-top:0;
}

.betgame-question-meta-inside{
        margin:0 0 10px;
        padding:7px 10px;
        border:1px solid var(--color-border-01);
        border-radius:4px;
        background:var(--color-cont-background-04);
}

.betgame-question-deadline,
.betgame-question-meta{
        color:var(--color-cont-text-06);
        font-size:13px;
}

.betgame-question-deadline{
    margin:0 0 10px;
    font-size:13px;
}

.betgame-question-deadline strong{
        /* color:var(--color-cont-text-01); */
        font-weight: 600;
}

.betgame-question-meta{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        margin-top:6px;
}

.betgame-question-badge{
        display:inline-flex;
        padding:4px 9px;
        border-radius:999px;
        font-size:12px;
        font-weight:800;
        white-space:nowrap;
}

.betgame-question-badge.open,
.betgame-question-closed .betgame-question-badge{
        background:var(--color-hdr-background-03);
        color:var(--betgame-warning-text);
}

.betgame-question-badge.done{
        background: var(--color-cont-background-16);
        color:var(--color-cont-text-08);
}

.betgame-question-closed .betgame-question-head{
        background:#fff8e8;
}

/* Tipp-Formulare */
.betgame-tip-row{
        display:flex;
        align-items:flex-end;
        flex-wrap:wrap;
        gap:14px;
}

.betgame-tip-team{
        min-width:120px;
}

.betgame-tip-team label,
.betgame-select-wrap label{
        display:block;
        margin-bottom:5px;
        font-weight:700;
}

.betgame-tip-team label{
        font-size:13px;
}

.betgame-tip-team input,
.betgame-option-select{
        border:1px solid var(--color-border-01);
        background:var(--color-cont-background-01);
        color: var(--color-cont-text-01);
}

.betgame-tip-team input{
        width:80px;
        padding:10px;
        border-radius:10px;
        font-size:14px;
        font-weight:400;
        text-align:center;
        background-color: var(--color-cont-background-04);
}

.betgame-tip-divider{
        padding-bottom:8px;
        color: var(--color-cont-text-06);
        font-size:28px;
        font-weight:800;
}

.betgame-select-wrap{
        max-width:420px;
        margin-top:0;
}

.betgame-option-select{
        width:100%;
        padding:8px 14px;
        border-radius:4px;
        font-size:15px;
        line-height:1.3;
        background-color: var(--color-cont-background-04);
}


.betgame-option-select:focus{
        outline:none;
        border-color:var(--color-cont-text-10);
        box-shadow:0 0 0 3px rgba(48,86,211,.12);
}

.betgame-question-save{
        margin-top:0;
}

.betgame-question-save .btn{
        min-width:160px;
        margin:8px 0 0;
}

.betgame-save-state{
        margin-top:8px;
        font-size:13px;
        font-weight:700;
}

.betgame-save-state.ok{
        color:var(--color-cont-text-08);
}

.betgame-save-state.error{
        color:var(--color-cont-text-07);
}

.betgame-saving{
        opacity:.65;
        pointer-events:none;
}

/* Teilnahme */
.betgame-join-box{
        padding:0;
        overflow:hidden;
}

.betgame-join-simple{
        padding:24px;
        border:1px solid var(--color-border-01);
        border-radius:4px;
        background:var(--color-cont-background-01);
        text-align:center;
}

.betgame-join-icon{
        display:flex;
        justify-content:center;
        align-items:center;
        width:56px;
        height:56px;
        margin:0 auto 12px;
        border-radius:50%;
        background:var(--color-cont-background-22);
        font-size:28px;
}

.betgame-join-content h2{
        margin:0 0 8px;
}

.betgame-join-content p{
        max-width:520px;
        margin:0 auto 14px;
        color:var(--color-cont-text-06);
}

.betgame-join-benefits{
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        gap:8px;
        margin:0 0 18px;
        padding:0;
        list-style:none;
}

.betgame-join-benefits li{
        padding:5px 10px;
        border-radius:999px;
        background: var(--boxinfoback);
        color:var(--boxinfocolor);
        font-size:13px;
        font-weight:600;
}

.betgame-prize-choice{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;
        max-width:560px;
        margin:0 auto 16px;
}

.betgame-prize-card{
        position:relative;
        display:block;
        padding:13px 14px;
        border:1px solid var(--color-border-01);
        border-radius:4px;
        background:var(--color-cont-background-04);
        cursor:pointer;
        text-align:left;
}

.betgame-prize-card.disabled{
        opacity: 0.7;
        cursor: no-drop;
}

.betgame-prize-card.disabled strong{
        opacity: 0.7;
}

.betgame-prize-card input{
        position:absolute;
        opacity:0;
        pointer-events:none;
}

.betgame-prize-card strong,
.betgame-prize-card span{
        display:block;
}

.betgame-prize-card strong{
        margin-bottom:3px;
        color:var(--color-cont-text-01);
}

.betgame-prize-card span{
        color:var(--color-cont-text-06);
        font-size:13px;
}

.betgame-prize-card:has(input:checked){
        border-color:var(--color-cont-text-10);
        background:var(--color-cont-background-22);
        box-shadow:0 0 0 2px rgba(48,86,211,.10);
}

.betgame-join-simple-form .btn{
        margin:0;
}

.betgame-join-small{
        margin-top:10px;
        color:var(--color-cont-text-06);
        font-size:13px;
}

/* Teilnehmerliste */
.betgame-participants-grid{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        margin-top:15px;
}

.betgame-participant-card{
        display:flex;
        align-items:center;
        gap:8px;

        padding: 4px 10px;
        border:1px solid var(--color-border-01);
        border-radius:999px;

        background:var(--color-cont-background-04);
        font-weight:700;
}

.betgame-participant-card .avatar{
        flex-shrink:0;
}

.betgame-participant-hidden{
        display:none;
}

.betgame-participants-toggle{
        display:block;
        margin:15px auto 0;
}


/* Highscore */
.betgame-leaderboard{
        margin:25px 0;
        padding:15px;
        border:1px solid var(--color-border-02);
        border-radius:8px;
        background:var(--color-cont-background-01);
        box-shadow:0 8px 28px rgba(20,40,80,.06);
}

.betgame-leaderboard .avatar.avatar-s{
        width:32px;
        height:32px;
        font-size:17px;
}

.betgame-leaderboard-headline{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:15px;
        margin-bottom:5px;
}

.betgame-leaderboard h2{
        margin:0;
        color:var(--color-cont-text-01);
        font-size:18px;
        line-height:20px;
}

.betgame-board-row{
        display:grid;
        grid-template-columns:70px 1fr 100px 80px 80px 80px;
        gap:12px;
        align-items:center;
        padding:5px 12px;
        border-bottom:1px solid var(--color-border-01);
}

.betgame-board-head{
        background:var(--color-cont-background-04);
        border-bottom:0;
        color:var(--color-cont-text-01);
        font-weight:600;
}

.betgame-board-row:not(.betgame-board-head):hover{
        background:#f9fbff;
}

.betgame-board-user{
        background:var(--color-cont-background-16);
}

.betgame-board-rank{
        color:var(--color-cont-text-01);
        font-size:20px;
        font-weight:800;
}

.betgame-board-rank-medal{
        font-size:26px;
}

.betgame-board-player{
        display:flex;
        align-items:center;
        gap:10px;
        font-weight:700;
}

.betgame-board-points{
        color:var(--color-cont-text-10);
        font-size:18px;
        font-weight:700;
}

.betgame-board-dots{
        padding:0 0 10px;
        color: var(--color-cont-text-06);
        font-size:22px;
        letter-spacing:4px;
        text-align:center;
}

.betgame-board-hidden{
        display:none;
}

.betgame-board-toggle{
        display:block;
        margin:18px auto 0;
        cursor:pointer;
}

/* Sonstiges */
.betgame-section-title{
        margin:18px 0 10px;
        color:var(--color-cont-text-01);
        font-size:16px;
        font-weight:800;
}

.betgame-settings-section{
        margin:0 0 16px;
        padding:14px;
        border:1px solid var(--color-cont-text-06);
        border-radius:6px;
        background:var(--color-cont-background-04);
}

.betgame-settings-section strong,
.betgame-settings-section label,
.betgame-settings-section small{
        display:block;
}

.betgame-settings-section strong{
        margin-bottom:10px;
        color:var(--color-cont-text-01);
}

.betgame-settings-section label{
        margin:8px 0;
        font-weight:700;
}

.betgame-settings-section small{
        margin-top:6px;
        color:var(--color-cont-text-06);
}
.betgame-team-flag{
    width:18px;
    height:12px;
    object-fit:cover;
    margin-right:2px;
    vertical-align:-1px;
    border-radius:2px !important;
}

.betgame-result-line{
    display:inline-flex;
    align-items:center;
    gap:5px;
    flex-wrap:wrap;
}

/* Responsive */
@media(max-width:900px){
        .betgame-prizes-grid{
                grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
        }
}

@media(max-width:760px){

        .betgame-participants-grid{
                gap:8px;
        }

        .betgame-participant-card{
                padding:4px 9px;
                font-size:13px;
        }

        .betgame-prizes-toggle{
                padding:12px 14px;
        }

        .betgame-prizes-content{
                padding:10px;
        }

        .betgame-prizes-grid,
        .betgame-prize-choice{
                grid-template-columns:1fr;
        }

        .betgame-prizes-grid{
                gap:10px;
        }

        .betgame-prize-card-front{
                min-height:0;
        }

        .betgame-prize-card-body{
                padding:12px;
        }

        .betgame-tab-nav{
                flex-wrap:nowrap;
                overflow-x:auto;
                padding-left:0;
        }

        .betgame-tab-btn{
                flex:0 0 auto;
                padding:10px 14px;
                white-space:nowrap;
        }

        .betgame-tab-panel > .betgame-box{
                border-top-left-radius: 0;/*4px; */
        }

        .betgame-join-simple{
                padding:18px;
        }

        .betgame-leaderboard{
                padding:16px;
                border-radius:14px;
        }

        .betgame-leaderboard-headline{
                display:block;
        }

        .betgame-leaderboard h2{
                margin-bottom:10px;
                font-size:22px;
        }

        .betgame-board-head{
                display:none !important;
        }

        .betgame-board-row{
                display:grid;
                grid-template-columns:56px 1fr;
                gap:3px 12px;
                align-items:center;
                margin-bottom:10px;
                padding:14px;
                border:1px solid var(--color-cont-text-06);
                border-radius:12px;
                background:var(--color-cont-background-01);
        }

        .betgame-board-rank,
        .betgame-board-row > div:nth-child(1){
                grid-row:1 / span 5;
                align-self:center;
                text-align:center;
        }

        .betgame-board-player,
        .betgame-board-row > div:nth-child(2),
        .betgame-board-row > div:nth-child(n+3){
                grid-column:2;
        }

        .betgame-board-player,
        .betgame-board-row > div:nth-child(2){
                margin-bottom:4px;
                font-size:16px;
        }

        .betgame-board-row > div:nth-child(n+3){
                color:var(--color-cont-text-06);
                font-size:13px;
        }

        .betgame-board-row > div:nth-child(3)::before{
                content:"Punkte: ";
                font-weight:700;
        }

        .betgame-board-row > div:nth-child(4)::before{
                content:"Tipps: ";
                font-weight:700;
        }

        .betgame-board-row > div:nth-child(5)::before{
                content:"Richtig: ";
                font-weight:700;
        }

        .betgame-board-row > div:nth-child(6)::before{
                content:"Exakt: ";
                font-weight:700;
        }

        .betgame-board-rank{
                font-size:18px;
        }

        .betgame-board-rank-medal{
                font-size:24px;
        }

        .betgame-board-points{
                font-size:15px;
        }

        .betgame-board-toggle{
                width:100%;
        }
}