body.page-matches-predict{
    background:
        radial-gradient(circle at top, rgba(36,90,172,.24), transparent 38%),
        linear-gradient(180deg, #041122 0%, #061427 45%, #08182d 100%);
    color:#f4f6fb;
}

.page-matches-predict .alert{
    margin:0 0 12px;
    border-radius:16px;
}

.predict-screen{
    display:grid;
    gap:10px;
    padding-bottom:18px;
}

.predict-helper-card,
.predict-panel{
    position:relative;
    border:1px solid #5a8bd0;
    border-radius:18px;
    background:
        linear-gradient(180deg, rgba(8,18,36,.95), rgba(6,16,31,.98)),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
    box-shadow:0 14px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}

.predict-helper-card{
    padding:10px 12px;
    text-align:center;
}

.predict-helper-card p{
    margin:0;
    font-family:'Orbitron',sans-serif;
    font-size:11px;
    line-height:1.35;
    color:#fff;
}

.predict-helper-card strong{
    color:#ffe08a;
}

.predict-form{
    display:grid;
    gap:10px;
}

.predict-panel{
    overflow:hidden;
    padding:12px 10px 14px;
}

.predict-panel__head{
    text-align:center;
    margin-bottom:10px;
}

.predict-panel__head--tight{
    margin-bottom:8px;
}

.predict-panel__title{
    margin:0;
    font-family:'Orbitron',sans-serif;
    font-size:16px;
    line-height:1.15;
    font-weight:500;
    color:#ffffff;
    text-transform:none;
}

.predict-panel__title--small{
    font-size:14px;
    letter-spacing:.03em;
}

.predict-panel__meta{
    margin:4px 0 0;
    font-family:'Orbitron',sans-serif;
    font-size:10px;
    color:#8fb7ff;
    letter-spacing:.04em;
}

.predict-block{
    display:grid;
    gap:8px;
}

.predict-block__title{
    margin:0;
    text-align:center;
    font-family:'Orbitron',sans-serif;
    font-size:11px;
    font-weight:500;
    color:#ffffff;
}

.predict-divider{
    height:1px;
    margin:10px -10px;
    background:linear-gradient(90deg, transparent, rgba(116,166,255,.85), transparent);
}

.predict-choice-row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    align-items:end;
}

.predict-choice-row--main{
    margin-top:2px;
}

.predict-pill{
    min-height:50px;
    padding:0 6px 8px;
    border:0;
    border-radius:999px;
    background:transparent;
    color:#fff;
    cursor:pointer;
    display:grid;
    align-content:end;
    justify-items:center;
    gap:4px;
}

.predict-pill__label{
    font-family:'Orbitron',sans-serif;
    font-size:10px;
    line-height:1.15;
    color:#ffffff;
    text-align:center;
    min-height:24px;
    display:grid;
    place-items:end center;
}

.predict-pill__value{
    width:100%;
    min-height:20px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.45);
    background:#f1f2f4;
    color:#172033;
    font-family:'Orbitron',sans-serif;
    font-size:13px;
    font-weight:700;
    display:grid;
    place-items:center;
    box-shadow:inset 0 1px 1px rgba(255,255,255,.85), 0 3px 7px rgba(0,0,0,.18);
}

.predict-pill.is-active .predict-pill__value{
    background:linear-gradient(180deg, #f2cf2b, #f0bb15);
    border-color:#f3d75f;
    color:#1b1c1f;
}

.predict-score-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);
    gap:10px;
    align-items:end;
}

.predict-score-box{
    display:grid;
    gap:4px;
}

.predict-score-box__label{
    text-align:center;
    font-family:'Orbitron',sans-serif;
    font-size:10px;
    color:#fff;
    line-height:1.15;
    min-height:24px;
    display:grid;
    place-items:end center;
}

.predict-score-box__input{
    width:100%;
    height:22px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.45);
    background:#f1f2f4;
    color:#1a1d24;
    text-align:center;
    font-family:'Orbitron',sans-serif;
    font-size:16px;
    font-weight:700;
    outline:none;
    box-shadow:inset 0 1px 1px rgba(255,255,255,.85), 0 3px 7px rgba(0,0,0,.18);
}

.predict-score-box__input::-webkit-outer-spin-button,
.predict-score-box__input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}

.predict-score-box__input[type=number]{
    -moz-appearance:textfield;
}

.predict-score-separator{
    width:30px;
    height:30px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.45);
    background:linear-gradient(180deg, #161e2f, #0d1321);
    color:#ffffff;
    font-family:'Orbitron',sans-serif;
    font-weight:700;
    display:grid;
    place-items:center;
    align-self:end;
    margin:0 auto 0;
    box-shadow:0 4px 8px rgba(0,0,0,.25);
}

.combo-toggle{
    display:grid;
    justify-items:center;
    margin:4px 0 10px;
}

.combo-toggle__button{
    width:min(188px,100%);
    min-height:28px;
    padding:0 12px;
    border-radius:10px;
    border:1px solid #4d7f2b;
    background:linear-gradient(180deg, #295b1f, #183d15);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 10px rgba(0,0,0,.25);
    color:#f1f5e8;
    font-family:'Orbitron',sans-serif;
    font-size:10px;
    letter-spacing:.04em;
    cursor:pointer;
}

.combo-toggle.is-off .combo-toggle__button{
    border-color:#6f3838;
    background:linear-gradient(180deg, #633131, #411f1f);
}

.combo-toggle__text strong{
    color:#c7ff5a;
}

.combo-toggle.is-off .combo-toggle__text strong{
    color:#ffd0d0;
}


.combo-status{
    width:min(360px, 100%);
    margin:6px auto 16px;
    padding:10px 14px;
    border-radius:14px;
    border:1px solid #4d7f2b;
    background:linear-gradient(180deg, #244f1c, #173914);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 10px rgba(0,0,0,.25);
    color:#f1f5e8;
    font-family:'Orbitron',sans-serif;
    text-align:center;
    display:grid;
    gap:4px;
    cursor:default;
    user-select:none;
}

.combo-status__label{
    font-size:12px;
    letter-spacing:.05em;
}

.combo-status__state{
    color:#c7ff5a;
    font-size:12px;
    letter-spacing:.08em;
}

.combo-status__hint{
    color:#d9edca;
    font-size:9px;
    line-height:1.35;
}

.extra-row{
    display:grid;
    gap:6px;
    padding-top:4px;
}

.extra-row + .extra-row{
    margin-top:4px;
}

.extra-row__title{
    text-align:center;
    font-family:'Orbitron',sans-serif;
    font-size:11px;
    color:#86b6ff;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.predict-actions{
    display:grid;
    gap:8px;
}

.predict-submit,
.predict-back{
    width:100%;
    min-height:42px;
    border-radius:14px;
    border:1px solid rgba(103,165,255,.48);
    background:linear-gradient(180deg, #16365e, #0c2240);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 16px rgba(0,0,0,.28);
    color:#f6fbff;
    font-family:'Orbitron',sans-serif;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    display:grid;
    place-items:center;
    text-align:center;
}

.predict-submit{
    border-color:#6fbe45;
    background:linear-gradient(180deg, #1f6022, #153c17);
}

.predict-back{
    background:linear-gradient(180deg, #12284a, #0b1b32);
}

@media (min-width: 768px){
    .wrap--predict{
        max-width:520px;
        padding:10px 12px 34px;
    }

    .predict-topbar{
        padding-top:18px;
    }

    .predict-brand{
        font-size:40px;
    }

    .predict-menu-button{
        width:180px;
        height:38px;
        font-size:13px;
    }

    .predict-helper-card{
        padding:14px 18px;
    }

    .predict-helper-card p{
        font-size:12px;
    }

    .predict-panel{
        padding:18px 16px 20px;
    }

    .predict-panel__title{
        font-size:24px;
    }

    .predict-panel__title--small{
        font-size:20px;
    }

    .predict-panel__meta,
    .predict-block__title,
    .extra-row__title{
        font-size:13px;
    }

    .predict-pill{
        min-height:72px;
        gap:6px;
    }

    .predict-pill__label,
    .predict-score-box__label{
        font-size:14px;
        min-height:34px;
    }

    .predict-pill__value{
        min-height:34px;
        font-size:18px;
    }

    .predict-score-row{
        grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);
        gap:12px;
    }

    .predict-score-box__input{
        height:34px;
        font-size:24px;
    }

    .predict-score-separator{
        width:40px;
        height:40px;
        font-size:18px;
    }

    .combo-toggle__button{
        width:220px;
        min-height:34px;
        font-size:12px;
    }

    .predict-submit,
    .predict-back{
        min-height:48px;
        font-size:14px;
    }
}

body.page-matches-index .section-head h1{
    font-family:'Orbitron',sans-serif;
    font-size:clamp(22px,3vw,32px);
}

body.page-matches-index .stack-item,
body.page-matches-results .stack-item,
body.page-matches-round .stack-item{
    border-color:rgba(116,166,255,.22);
    background:linear-gradient(180deg, rgba(10,18,32,.9), rgba(6,14,28,.95));
}


/* =========================================================
   MATCHES INDEX PAGE
========================================================= */
body.page-matches-index{
    background:
        radial-gradient(circle at top, rgba(30,82,180,.18), transparent 32%),
        linear-gradient(180deg, #04101f 0%, #07162b 52%, #081727 100%);
}

body.page-matches-index .wrap{
    max-width: 1380px;
    padding-top: 28px;
    padding-bottom: 44px;
}

.matches-page{
    display:grid;
    gap:24px;
}

.matches-hero,
.matches-stage,
.matches-empty{
    border:1px solid rgba(99,143,235,.22);
    background:linear-gradient(180deg, rgba(6,18,38,.94), rgba(5,14,28,.98));
    box-shadow:0 18px 44px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
}

.matches-hero{
    text-align:center;
    padding:30px 28px;
}

.matches-hero__eyebrow{
    display:inline-block;
    margin-bottom:10px;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid rgba(115,167,255,.30);
    background:rgba(255,255,255,.03);
    color:#9fc3ff;
    font-family:'Orbitron', sans-serif;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.matches-hero__title{
    margin:0;
    font-family:'Orbitron', sans-serif;
    font-size:clamp(28px, 4vw, 46px);
    line-height:1.1;
    color:#fff;
}

.matches-hero__text{
    max-width:780px;
    margin:14px auto 0;
    font-size:16px;
    line-height:1.7;
    color:#b7c7df;
}

.matches-stats{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
    max-width:900px;
    margin:26px auto 0;
}

.matches-stat-card{
    padding:18px 16px;
    border-radius:18px;
    border:1px solid rgba(120,163,245,.20);
    background:rgba(255,255,255,.03);
    display:grid;
    gap:8px;
    justify-items:center;
}

.matches-stat-card__label{
    color:#9db6db;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-family:'Orbitron', sans-serif;
}

.matches-stat-card__value{
    color:#ffffff;
    font-size:34px;
    line-height:1;
    font-family:'Orbitron', sans-serif;
}

.matches-toolbar{
    display:grid;
    gap:18px;
    justify-items:center;
    margin-top:26px;
}

.matches-toolbar__actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}

.matches-toolbar__link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 18px;
    border-radius:999px;
    border:1px solid rgba(115,167,255,.25);
    background:linear-gradient(180deg, rgba(23,53,98,.95), rgba(12,31,58,.95));
    color:#ecf4ff;
    font-weight:700;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.matches-toolbar__link:hover{
    transform:translateY(-1px);
    border-color:rgba(144,187,255,.55);
    box-shadow:0 12px 24px rgba(0,0,0,.18);
}

.matches-filter-form{
    width:min(100%, 430px);
    display:grid;
    gap:10px;
}

.matches-filter-form__label{
    color:#dbe8ff;
    font-weight:700;
    font-size:14px;
    text-align:center;
}

.matches-filter-form__control select{
    width:100%;
    min-height:50px;
    padding:0 16px;
    border-radius:14px;
    border:1px solid rgba(115,167,255,.24);
    background:#0b1a32;
    color:#fff;
    font-size:15px;
    font-weight:700;
    outline:none;
}

.matches-empty{
    text-align:center;
    padding:34px 24px;
}

.matches-empty h2{
    margin:0 0 8px;
    font-family:'Orbitron', sans-serif;
    color:#fff;
}

.matches-empty p{
    margin:0;
    color:#b9c8de;
}

.matches-stage{
    padding:28px 22px 24px;
}

.matches-stage__head{
    display:grid;
    justify-items:center;
    gap:8px;
    margin-bottom:24px;
    text-align:center;
}

.matches-stage__kicker{
    color:#86b3ff;
    font-family:'Orbitron', sans-serif;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.matches-stage__title{
    margin:0;
    color:#fff;
    font-family:'Orbitron', sans-serif;
    font-size:clamp(24px, 3vw, 36px);
    line-height:1.1;
}

.matches-stage__count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 14px;
    border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(120,163,245,.22);
    color:#d9e9ff;
    font-weight:700;
}

.matches-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
}

.match-card{
    height:100%;
    padding:22px 18px;
    border-radius:20px;
    border:1px solid rgba(123,170,255,.18);
    background:
        linear-gradient(180deg, rgba(10,25,48,.98), rgba(7,18,34,.98)),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
    display:grid;
    gap:18px;
    text-align:center;
    box-shadow:0 14px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03);
}

.match-card__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

.match-card__number{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:32px;
    padding:0 12px;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(115,167,255,.20);
    color:#ddecff;
    font-weight:700;
    font-size:13px;
}

.match-card__status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:32px;
    padding:0 12px;
    border-radius:999px;
    font-family:'Orbitron', sans-serif;
    font-size:12px;
    letter-spacing:.04em;
    text-transform:uppercase;
    border:1px solid transparent;
}

.match-card__status.is-scheduled{
    background:rgba(59,130,246,.14);
    border-color:rgba(96,165,250,.38);
    color:#bfdbfe;
}

.match-card__status.is-live{
    background:rgba(34,197,94,.16);
    border-color:rgba(74,222,128,.38);
    color:#d1fae5;
}

.match-card__status.is-postponed,
.match-card__status.is-cancelled{
    background:rgba(245,158,11,.14);
    border-color:rgba(251,191,36,.35);
    color:#fde68a;
}

.match-card__status.is-finished{
    background:rgba(168,85,247,.15);
    border-color:rgba(196,181,253,.35);
    color:#e9d5ff;
}

.match-card__round-name{
    color:#8ab2f7;
    font-size:13px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.match-card__teams{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 70px minmax(0, 1fr);
    gap:14px;
    align-items:center;
}

.match-team{
    display:grid;
    gap:8px;
    justify-items:center;
}

.match-team__badge-wrap{
    width:72px;
    height:72px;
    border-radius:50%;
    border:1px solid rgba(116,166,255,.22);
    background:rgba(255,255,255,.04);
    display:grid;
    place-items:center;
    overflow:hidden;
}

.match-team__badge{
    width:52px;
    height:52px;
    object-fit:contain;
}

.match-team__fallback{
    color:#ffffff;
    font-family:'Orbitron', sans-serif;
    font-size:18px;
    font-weight:700;
}

.match-team__short{
    color:#86b6ff;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.match-team__name{
    color:#fff;
    font-size:22px;
    line-height:1.18;
    font-weight:800;
    word-break:break-word;
}

.match-card__versus{
    width:60px;
    height:60px;
    margin:0 auto;
    border-radius:50%;
    border:1px solid rgba(116,166,255,.25);
    background:linear-gradient(180deg, rgba(15,30,56,.96), rgba(8,18,33,.96));
    color:#fff;
    display:grid;
    place-items:center;
    font-family:'Orbitron', sans-serif;
    font-size:24px;
    font-weight:800;
    box-shadow:0 10px 18px rgba(0,0,0,.18);
}

.match-card__meta{
    display:grid;
    gap:10px;
    justify-items:center;
}

.match-card__meta-item{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    color:#dce8f8;
    line-height:1.5;
}

.match-card__meta-icon{
    opacity:.9;
}

.match-card__footer{
    display:grid;
    gap:14px;
    justify-items:center;
}

.match-card__prediction{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:0 14px;
    border-radius:999px;
    font-weight:700;
    text-align:center;
}

.match-card__prediction.is-success{
    background:rgba(34,197,94,.14);
    border:1px solid rgba(74,222,128,.32);
    color:#d1fae5;
}

.match-card__prediction.is-warning{
    background:rgba(245,158,11,.14);
    border:1px solid rgba(251,191,36,.35);
    color:#fde68a;
}

.match-card__prediction.is-neutral{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(116,166,255,.18);
    color:#e9f2ff;
}

.match-card__action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:148px;
    min-height:44px;
    padding:0 18px;
    border-radius:14px;
    border:1px solid rgba(109,179,255,.28);
    background:linear-gradient(180deg, #17365d, #102746);
    color:#fff;
    font-weight:800;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.match-card__action:hover{
    transform:translateY(-1px);
    border-color:rgba(144,187,255,.55);
    box-shadow:0 12px 24px rgba(0,0,0,.18);
}

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

@media (max-width: 720px){
    body.page-matches-index .wrap{
        padding-left:12px;
        padding-right:12px;
    }

    .matches-hero{
        padding:22px 16px;
    }

    .matches-hero__text{
        font-size:14px;
        line-height:1.6;
    }

    .matches-stats{
        grid-template-columns:1fr;
    }

    .matches-stage{
        padding:22px 14px 18px;
    }

    .match-card{
        padding:18px 14px;
        gap:16px;
    }

    .match-card__top{
        justify-content:center;
    }

    .match-card__teams{
        grid-template-columns:minmax(0, 1fr) 44px minmax(0, 1fr);
        gap:8px;
    }

    .match-card__versus{
        width:40px;
        height:40px;
        font-size:18px;
        order:initial;
    }

    .match-team--home,
    .match-team--away{
        order:initial;
    }

    .match-team__badge-wrap{
        width:64px;
        height:64px;
    }

    .match-team__name{
        font-size:18px;
    }

    .match-card__meta-item{
        font-size:14px;
    }

    .matches-toolbar__actions{
        flex-direction:column;
        width:100%;
    }

    .matches-toolbar__link{
        width:100%;
    }
}


@media (max-width: 420px){
    .match-card__teams{
        grid-template-columns:minmax(0, 1fr) 36px minmax(0, 1fr);
        gap:6px;
    }

    .match-team__badge-wrap{
        width:52px;
        height:52px;
    }

    .match-team__badge{
        width:38px;
        height:38px;
    }

    .match-team__fallback{
        font-size:13px;
    }

    .match-team__short{
        font-size:10px;
        letter-spacing:.06em;
    }

    .match-team__name{
        font-size:15px;
        line-height:1.15;
    }

    .match-card__versus{
        width:34px;
        height:34px;
        font-size:15px;
    }
}

/* Combo automático: estados pós-jogo */
.combo-status{
    position:relative;
    overflow:hidden;
    width:min(380px, 100%);
    margin:8px auto 18px;
    padding:12px 16px;
    border-radius:16px;
    font-family:'Orbitron',sans-serif;
    text-align:center;
    display:grid;
    gap:5px;
    cursor:default;
    user-select:none;
    transition:background .35s ease, box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}

.combo-status::before{
    content:"";
    position:absolute;
    inset:-60%;
    background:radial-gradient(circle, rgba(255,255,255,.16), transparent 36%);
    opacity:0;
    transform:translateX(-30%);
    pointer-events:none;
}

.combo-status__label{
    position:relative;
    z-index:1;
    font-size:12px;
    letter-spacing:.05em;
    color:#f7fbff;
}

.combo-status__state{
    position:relative;
    z-index:1;
    font-size:15px;
    letter-spacing:.08em;
}

.combo-status__hint{
    position:relative;
    z-index:1;
    color:#e5edf9;
    font-size:9px;
    line-height:1.45;
    max-width:32em;
    margin:0 auto;
}

.combo-status__meter{
    position:relative;
    z-index:1;
    height:8px;
    width:100%;
    margin-top:5px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(0,0,0,.28);
    border:1px solid rgba(255,255,255,.18);
}

.combo-status__meter span{
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg, #7dd3fc, #bef264, #fde047);
    box-shadow:0 0 16px rgba(190,242,100,.75);
    transition:width .55s ease;
}

.combo-status.is-waiting{
    border:1px solid rgba(84,130,204,.55);
    background:linear-gradient(180deg, #173354, #10243b);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 16px rgba(0,0,0,.25);
}

.combo-status.is-waiting .combo-status__state{
    color:#b8d7ff;
}

.combo-status.is-processing{
    border:1px solid rgba(250,204,21,.55);
    background:linear-gradient(180deg, #5b4214, #352810);
    box-shadow:0 0 18px rgba(250,204,21,.18), inset 0 1px 0 rgba(255,255,255,.14);
}

.combo-status.is-processing .combo-status__state{
    color:#fde68a;
}

.combo-status.is-locked{
    border:1px solid rgba(248,113,113,.45);
    background:linear-gradient(180deg, #562222, #331616);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 8px 16px rgba(0,0,0,.25);
}

.combo-status.is-locked .combo-status__state{
    color:#fecaca;
}

.combo-status.is-active,
.combo-status.is-perfect{
    transform:translateY(-1px);
}

.combo-status.is-active{
    border:1px solid rgba(132,204,22,.62);
    background:linear-gradient(180deg, #1f5b1f, #123a18);
    box-shadow:0 0 18px rgba(132,204,22,.25), inset 0 1px 0 rgba(255,255,255,.16);
}

.combo-status.is-active .combo-status__state{
    color:#d9ff76;
}

.combo-status.is-active.level-2{
    background:linear-gradient(180deg, #246d24, #16471b);
    box-shadow:0 0 22px rgba(132,204,22,.33), inset 0 1px 0 rgba(255,255,255,.18);
}

.combo-status.is-active.level-3{
    background:linear-gradient(180deg, #28842c, #17531e);
    box-shadow:0 0 28px rgba(132,204,22,.42), inset 0 1px 0 rgba(255,255,255,.2);
}

.combo-status.is-active.level-4{
    background:linear-gradient(180deg, #31a13a, #196526);
    box-shadow:0 0 36px rgba(132,204,22,.55), inset 0 1px 0 rgba(255,255,255,.22);
}

.combo-status.is-active.level-5,
.combo-status.is-perfect{
    border-color:rgba(250,204,21,.85);
    background:linear-gradient(135deg, #23a33a, #0f8f61 42%, #b8860b 100%);
    box-shadow:0 0 42px rgba(250,204,21,.55), 0 0 80px rgba(34,197,94,.25), inset 0 1px 0 rgba(255,255,255,.28);
    animation:comboPulse 1.4s ease-in-out infinite;
}

.combo-status.is-perfect::before{
    opacity:1;
    animation:comboShine 2.2s linear infinite;
}

.combo-status.is-perfect .combo-status__state{
    color:#fff7ad;
    text-shadow:0 0 12px rgba(250,204,21,.8);
}

.extra-row.is-correct{
    border-radius:14px;
    padding:8px 6px 10px;
    background:rgba(34,197,94,.08);
    box-shadow:0 0 18px rgba(34,197,94,.12);
}

.extra-row.is-correct .extra-row__title{
    color:#bfff6f;
    text-shadow:0 0 10px rgba(132,204,22,.35);
}

.extra-row.is-wrong{
    border-radius:14px;
    padding:8px 6px 10px;
    background:rgba(248,113,113,.08);
}

.extra-row.is-wrong .extra-row__title{
    color:#ff9f9f;
}

.combo-fireworks-layer{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:9999;
    overflow:hidden;
}

.combo-spark{
    position:absolute;
    left:50%;
    top:50%;
    width:9px;
    height:9px;
    border-radius:999px;
    background:#fde047;
    box-shadow:0 0 16px currentColor;
    animation:comboSpark .95s ease-out forwards;
}

.combo-victory-banner{
    position:fixed;
    left:50%;
    top:18%;
    z-index:10000;
    transform:translate(-50%, -20px) scale(.9);
    opacity:0;
    padding:16px 22px;
    border-radius:18px;
    border:1px solid rgba(250,204,21,.85);
    background:linear-gradient(135deg, rgba(20,83,45,.96), rgba(15,118,110,.96), rgba(133,77,14,.96));
    color:#fff7ad;
    font-family:'Orbitron',sans-serif;
    font-size:clamp(18px, 4vw, 34px);
    font-weight:800;
    letter-spacing:.08em;
    text-align:center;
    box-shadow:0 0 60px rgba(250,204,21,.45), 0 18px 50px rgba(0,0,0,.45);
    pointer-events:none;
    animation:comboBanner 2.8s ease forwards;
}

@keyframes comboPulse{
    0%,100%{filter:brightness(1); transform:translateY(-1px) scale(1)}
    50%{filter:brightness(1.15); transform:translateY(-2px) scale(1.01)}
}

@keyframes comboShine{
    from{transform:translateX(-35%) rotate(0deg)}
    to{transform:translateX(35%) rotate(360deg)}
}

@keyframes comboSpark{
    from{
        transform:translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1);
        opacity:1;
    }
    to{
        transform:translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) scale(.2);
        opacity:0;
    }
}

@keyframes comboBanner{
    0%{opacity:0; transform:translate(-50%, -25px) scale(.85)}
    18%{opacity:1; transform:translate(-50%, 0) scale(1)}
    78%{opacity:1; transform:translate(-50%, 0) scale(1)}
    100%{opacity:0; transform:translate(-50%, -18px) scale(.95)}
}

@media (min-width:768px){
    .combo-status__label,
    .combo-status__state{
        font-size:14px;
    }

    .combo-status__hint{
        font-size:10px;
    }
}