#cup-results {
    max-width:760px;
    margin-left:auto;
    margin-right:auto
}

#cup-results>.cup-section-heading {
    margin-bottom:30px
}

.cup-final-card {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px;
    padding:26px;
    border:1px solid transparent;
    border-radius:22px;
    background:linear-gradient(115deg,#0d1c25,#0b1015) padding-box,linear-gradient(115deg,#00f0ff,#926aff 70%,#caff00) border-box
}

.cup-final-ranks {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-content:start
}

.cup-final-ranks>div {
    padding:16px;
    min-width:112px;
    border:1px solid #94b2d21a;
    border-radius:14px;
    background:#070e14
}

.cup-final-ranks span,
.cup-final-prize>span {
    display:block;
    font-size:10px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--cup-muted)
}

.cup-final-ranks strong {
    display:block;
    margin:8px 0;
    font:700 25px/1.3 'Geist Mono',monospace;
    overflow-wrap:anywhere
}

.cup-final-ranks small,
.cup-final-prize small {
    display:block;
    font-size:11px;
    line-height:1.6;
    color:var(--cup-muted)
}

.cup-final-ranks .is-positive {
    color:#00eba4
}

.cup-final-ranks .is-negative {
    color:#ff5878
}

.cup-final-prize {
    text-align:right;
    align-self:center;
    min-width:0
}

.cup-final-prize>strong {
    display:block;
    margin:8px 0;
    font-size:26px;
    line-height:1.3;
    color:#68edf0;
    overflow-wrap:anywhere
}

.cup-result-share {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 16px;
    margin-top:16px;
    border:1px solid #00dbe9;
    border-radius:999px;
    background:transparent;
    color:#00f0ff;
    font:600 12px 'Inter',sans-serif;
    cursor:pointer
}

.cup-result-share:hover {
    background:#00e5ed15
}

.cup-final-lines {
    grid-column:1/-1;
    display:flex;
    justify-content:space-between;
    gap:12px;
    border-top:1px solid #94b2d21f;
    padding-top:16px;
    font-size:12px;
    line-height:1.6;
    color:var(--cup-muted)
}

.cup-final-lines>span:last-child {
    color:#eaf4ff;
    text-align:right
}

.cup-result-perks {
    margin-top:24px
}

.cup-result-perks h3 {
    font-size:18px;
    margin:0 0 8px
}

.cup-result-perks>p {
    font-size:12px;
    color:var(--cup-muted);
    line-height:1.6;
    margin:0 0 16px
}

.cup-result-perk,
.cup-result-fulfilment {
    display:flex;
    align-items:center;
    gap:14px;
    margin:10px 0;
    padding:17px;
    border:1px solid #94b2d222;
    border-radius:16px;
    background:#10151f
}

.cup-result-icon {
    flex:0 0 36px;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#00dce90c;
    color:#00dce9;
    font-size:17px;
    font-weight:600
}

.cup-result-perk>div,
.cup-result-fulfilment>div {
    flex:1;
    min-width:0
}

.cup-result-perk strong,
.cup-result-fulfilment strong {
    display:block;
    font-size:14px;
    line-height:1.5;
    overflow-wrap:anywhere
}

.cup-result-perk small,
.cup-result-fulfilment p {
    display:block;
    font-size:12px;
    line-height:1.6;
    color:var(--cup-muted);
    margin:4px 0 0
}

.cup-result-perk a {
    color:#4deaff
}

.cup-result-perk.is-locked strong {
    color:#929ca9
}

.cup-result-perk.is-locked {
    background:#0e131b
}

.cup-result-perk.is-earned,
.cup-result-fulfilment.is-earned {
    border-color:#00dda54d
}

.is-earned>.cup-result-icon {
    color:#38e4b4;
    background:#38e4b417
}

.cup-result-fulfilment {
    margin-top:20px
}

.cup-result-fulfilment .cup-button {
    flex-shrink:0;
    padding:11px 17px;
    font-size:12px
}

.cup-result-empty {
    text-align:center;
    padding:30px 20px;
    border:1px solid #94b2d233;
    border-radius:18px;
    background:#10151f
}

.cup-result-empty p {
    color:var(--cup-muted);
    line-height:1.7
}

.cup-result-link {
    color:#00e8f0
}

.cup-share-dialog {
    box-sizing:border-box;
    width:min(440px,calc(100vw - 28px));
    max-height:calc(100dvh - 28px);
    margin:auto;
    padding:16px;
    border:1px solid #ffffff20;
    border-radius:20px;
    background:#111117;
    color:#fff;
    box-shadow:0 24px 100px #000a;
    overflow-y:auto;
    font-family:'Inter',sans-serif
}

.cup-share-dialog::backdrop {
    background:#000b;
    backdrop-filter:blur(5px)
}

.cup-share-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:0 0 12px
}

.cup-share-heading h3 {
    font-size:16px;
    margin:0
}

.cup-share-heading button {
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#25252e;
    color:#fff;
    font-size:23px;
    cursor:pointer
}

.cup-share-preview {
    border-radius:12px;
    overflow:hidden;
    background:#080b10;
    max-width:100%;
    margin:auto;
    width:min(100%,calc((100dvh - 180px)*.8))
}

.cup-share-preview canvas {
    display:block;
    width:100%;
    height:auto
}

.cup-share-actions {
    display:flex;
    gap:10px;
    margin-top:12px
}

.cup-share-actions button {
    flex:1;
    min-width:0;
    border:1px solid #ffffff26;
    border-radius:999px;
    padding:12px 8px;
    color:#fff;
    background:#1c1c25;
    font:600 13px 'Inter',sans-serif;
    cursor:pointer
}

.cup-share-actions .cup-share-save {
    background:linear-gradient(110deg,#872ae5,#ad4cf0);
    border:0
}

.cup-share-actions button:disabled {
    opacity:.5;
    cursor:wait
}

#cup-share-status {
    font-size:12px;
    line-height:1.5;
    color:#b7c4d5;
    margin:10px 0 0
}

#cup-share-status:empty {
    display:none
}

#cup-share-link {
    display:block;
    color:#54e7ef;
    font-size:12px;
    margin-top:12px;
    overflow-wrap:anywhere
}

#cup-share-link[hidden] {
    display:none
}

.cup-result-share:focus-visible,
.cup-share-dialog button:focus-visible {
    outline:2px solid #5ff3f7;
    outline-offset:4px
}

@media(max-width:600px) {
    .cup-final-card {
        padding:20px;
        gap:22px;
        grid-template-columns:1fr
    }

    .cup-final-ranks {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px
    }

    .cup-final-ranks>div {
        min-width:0;
        padding:14px 12px
    }

    .cup-final-ranks strong {
        font-size:22px
    }

    .cup-final-prize {
        text-align:left
    }

    .cup-final-prize>strong {
        font-size:24px
    }

    .cup-final-lines {
        font-size:11px
    }

    .cup-result-fulfilment {
        flex-wrap:wrap
    }

    .cup-result-fulfilment .cup-button {
        margin-left:50px
    }

    .cup-result-perk,
.cup-result-fulfilment {
        padding:14px;
        gap:12px
    }

}