/* Score Predictor — arena glass polish. Overrides legacy .sp-* rules only here. */
#app:has(#scorepredictor-page.active) { min-height: 100dvh; }

#scorepredictor-page {
    --sp-ice: #31d9ff;
    --sp-frost: #a5e5ff;
    --sp-copy: #f7faff;
    --sp-muted: #c3d7ed;
    --sp-stroke: rgba(149, 205, 249, .42);
    --sp-glass: linear-gradient(145deg, rgba(27, 50, 77, .91), rgba(5, 20, 39, .92));
    padding: 0;
    background: #030d19;
    color: var(--sp-copy);
}

#scorepredictor-page *,
#scorepredictor-page *::before,
#scorepredictor-page *::after { box-sizing: border-box; }

#scorepredictor-page .sp-arena {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 520px;
    min-height: calc(100dvh - 60px);
    margin-inline: auto;
    background: rgba(3, 13, 25, .26);
}

/* The fixed, cropped artwork remains in view while the longer forms scroll. */
#scorepredictor-page .sp-arena-background,
#scorepredictor-page .sp-arena::before {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: min(100%, 520px);
    height: calc(100dvh - 60px);
    pointer-events: none;
}
#scorepredictor-page .sp-arena-background {
    z-index: -2;
    display: block;
    object-fit: cover;
    object-position: center;
    user-select: none;
}
#scorepredictor-page .sp-arena::before {
    content: '';
    z-index: -1;
    background: linear-gradient(180deg, rgba(3, 12, 25, .38), rgba(3, 12, 25, .64) 35%, rgba(2, 9, 20, .82));
}

#scorepredictor-page .gtp-screen,
#scorepredictor-page .gtp-screen.active {
    position: relative;
    min-height: calc(100dvh - 60px);
    height: auto;
    padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
#scorepredictor-page .gtp-screen { display: none; }
#scorepredictor-page .gtp-screen.active { display: flex; flex-direction: column; }

#scorepredictor-page .sp-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 0 16px;
}
#scorepredictor-page .gtp-back-btn,
#scorepredictor-page .sp-history-link {
    min-height: 44px;
    max-width: 100%;
    border: 1px solid transparent;
    border-radius: 12px;
    background: rgba(10, 30, 52, .74);
    color: var(--sp-frost);
    font-size: 13px;
    font-weight: 750;
    padding: 10px 12px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
#scorepredictor-page .sp-history-link {
    border-color: rgba(112, 206, 246, .62);
    background: linear-gradient(145deg, rgba(20, 97, 142, .72), rgba(8, 49, 85, .84));
    box-shadow: 0 0 16px rgba(22, 185, 241, .12);
    white-space: nowrap;
}
#scorepredictor-page .gtp-back-btn:hover,
#scorepredictor-page .sp-history-link:hover { border-color: var(--sp-frost); background: rgba(18, 70, 109, .93); }

#scorepredictor-page .sp-main-header {
    padding: 0 0 20px;
    align-items: stretch;
    gap: 12px;
}
#scorepredictor-page .sp-main-header-copy { flex: 1; min-width: 0; align-self: center; }
#scorepredictor-page .sp-eyebrow {
    color: var(--sp-frost);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 7px;
}
#scorepredictor-page .sp-main-title {
    margin: 0;
    font-size: clamp(22px, 6vw, 29px);
    line-height: 1.12;
    color: var(--sp-copy);
    font-weight: 850;
    text-shadow: 0 2px 8px #000;
}
#scorepredictor-page .sp-main-subtitle {
    color: var(--sp-muted);
    font-size: 12px;
    line-height: 1.45;
    margin-top: 7px;
}
#scorepredictor-page .sp-total-wrap {
    flex: 0 0 122px;
    justify-content: center;
    padding: 12px;
    border: 1px solid rgba(94, 216, 253, .68);
    border-radius: 16px;
    background: var(--sp-glass);
    box-shadow: inset 0 1px 2px rgba(226, 246, 255, .18), 0 0 18px rgba(27, 187, 233, .17);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
#scorepredictor-page .sp-total-label { font-size: 10px; color: var(--sp-muted); text-align: center; }
#scorepredictor-page .sp-total-val { font-size: clamp(27px, 8vw, 37px); color: var(--sp-ice); text-shadow: 0 0 18px rgba(49, 217, 255, .35); }
#scorepredictor-page .sp-section-label {
    padding: 0 4px 12px;
    color: var(--sp-copy);
    font-size: 12px;
    letter-spacing: .12em;
}
#scorepredictor-page .sp-games-list,
#scorepredictor-page .sp-history-list { gap: 14px; padding: 0 0 18px; }

#scorepredictor-page .sp-game-card,
#scorepredictor-page .sp-history-card,
#scorepredictor-page .sp-form-header,
#scorepredictor-page .sp-section,
#scorepredictor-page .sp-live-score-bar,
#scorepredictor-page .sp-live-pts-bar {
    min-width: 0;
    border: 1px solid var(--sp-stroke);
    border-radius: 18px;
    background: var(--sp-glass);
    box-shadow: inset 0 1px 2px rgba(225, 242, 255, .14), 0 8px 26px rgba(0, 0, 0, .24);
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
}
#scorepredictor-page .sp-game-card,
#scorepredictor-page .sp-history-card {
    position: relative;
    padding: 16px;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
#scorepredictor-page .sp-card-tapable:hover,
#scorepredictor-page .sp-game-card:not(.started-locked, .predicted):hover,
#scorepredictor-page .sp-history-card:hover {
    border-color: rgba(95, 229, 255, .85);
    box-shadow: 0 0 20px rgba(13, 175, 225, .15), 0 9px 27px rgba(0, 0, 0, .25);
}
#scorepredictor-page .sp-game-card:active,
#scorepredictor-page .sp-history-card:active { transform: scale(.99); }
#scorepredictor-page .sp-game-card.predicted,
#scorepredictor-page .sp-history-card.resolved { border-color: rgba(73, 207, 192, .65); }
#scorepredictor-page .sp-game-card.started-locked {
    opacity: 1;
    cursor: default;
    border-color: rgba(242, 174, 139, .52);
}
#scorepredictor-page .sp-game-card.started-locked.sp-card-tapable { cursor: pointer; }
#scorepredictor-page .sp-game-card.started-locked:active { transform: none; }
#scorepredictor-page .sp-game-date,
#scorepredictor-page .sp-form-date,
#scorepredictor-page .sp-history-date {
    color: var(--sp-frost);
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .07em;
}
#scorepredictor-page .sp-game-date { margin-bottom: 14px; }
#scorepredictor-page .sp-game-matchup {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 14px;
}
#scorepredictor-page .sp-team {
    min-width: 0;
    gap: 7px;
    align-items: center;
}
#scorepredictor-page .sp-team:first-child { justify-content: flex-start; }
#scorepredictor-page .sp-team:last-child { justify-content: flex-end; }
#scorepredictor-page .sp-team-logo {
    width: clamp(29px, 9vw, 44px);
    height: clamp(29px, 9vw, 44px);
    flex-shrink: 0;
    padding: 3px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .94);
    object-fit: contain;
}
#scorepredictor-page .sp-team-name {
    min-width: 0;
    color: var(--sp-copy);
    font-size: clamp(11px, 3vw, 14px);
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
#scorepredictor-page .sp-at {
    flex-shrink: 0;
    color: var(--sp-ice);
    font-size: 14px;
    font-weight: 900;
    opacity: .85;
}
#scorepredictor-page .sp-predict-hint {
    padding-top: 12px;
    border-top: 1px solid rgba(142, 205, 251, .23);
    color: var(--sp-ice);
    font-size: 12px;
    font-weight: 800;
}
#scorepredictor-page .sp-predict-hint::after { content: '  ›'; font-size: 16px; }
#scorepredictor-page .sp-predicted-badge,
#scorepredictor-page .sp-started-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 8px;
    padding: 7px 11px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .05em;
    color: #9ff4dd;
    background: rgba(20, 136, 112, .17);
    border: 1px solid rgba(90, 219, 183, .35);
}
#scorepredictor-page .sp-started-badge {
    width: 100%;
    color: #ffcfbb;
    background: rgba(177, 72, 53, .16);
    border-color: rgba(249, 134, 115, .52);
}
#scorepredictor-page .sp-locked-details {
    margin-top: 12px;
    padding-top: 10px;
    border-color: rgba(144, 207, 250, .26);
    gap: 7px;
}
#scorepredictor-page .sp-locked-row {
    min-width: 0;
    gap: 12px;
    align-items: flex-start;
    line-height: 1.4;
    font-size: 12px;
}
#scorepredictor-page .sp-locked-label { min-width: 0; flex: 0 1 auto; color: var(--sp-muted); }
#scorepredictor-page .sp-locked-val {
    min-width: 0;
    flex: 0 1 64%;
    max-width: 64%;
    color: var(--sp-copy);
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    text-align: right;
}
#scorepredictor-page .sp-locked-result,
#scorepredictor-page .sp-history-result {
    min-width: 0;
    gap: 12px;
    border-color: rgba(144, 207, 250, .27);
    flex-wrap: wrap;
}
#scorepredictor-page .sp-locked-actual,
#scorepredictor-page .sp-history-actual { color: var(--sp-copy); }
#scorepredictor-page .sp-locked-pts,
#scorepredictor-page .sp-history-pts { color: var(--sp-muted); }
#scorepredictor-page .sp-locked-pts.positive,
#scorepredictor-page .sp-history-pts.positive { color: var(--sp-ice); }

#scorepredictor-page .sp-form-content { padding: 0 0 16px; gap: 0; min-width: 0; }
#scorepredictor-page #sp-form > .gtp-back-btn,
#scorepredictor-page #sp-history > .gtp-back-btn { align-self: flex-start; margin-bottom: 14px; }
#scorepredictor-page .sp-form-header {
    padding: 18px 15px 5px;
    margin-bottom: 16px;
    border-color: rgba(96, 217, 254, .63);
}
#scorepredictor-page .sp-form-date { margin-bottom: 15px; }
#scorepredictor-page .sp-section { padding: 16px; margin-bottom: 12px; }
#scorepredictor-page .sp-section-title {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--sp-copy);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 14px;
}
#scorepredictor-page .sp-pts-hint {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    border: 1px solid rgba(58, 202, 254, .35);
    border-radius: 20px;
    padding: 4px 8px;
    background: rgba(12, 127, 177, .24);
    color: #9fecff;
    font-size: 10px;
    font-weight: 800;
    opacity: 1;
    white-space: nowrap;
}
#scorepredictor-page .sp-toggle-row { gap: 8px; min-width: 0; }
#scorepredictor-page .sp-toggle-btn,
#scorepredictor-page .sp-scorer-chip {
    min-width: 0;
    min-height: 48px;
    border: 1px solid rgba(134, 188, 226, .45);
    border-radius: 12px;
    background: linear-gradient(155deg, rgba(17, 44, 74, .95), rgba(8, 26, 47, .96));
    color: var(--sp-copy);
    box-shadow: inset 0 1px 2px rgba(202, 232, 255, .1);
    overflow-wrap: anywhere;
    line-height: 1.25;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}
#scorepredictor-page .sp-toggle-btn { flex: 1 1 0; padding: 10px 8px; font-size: 13px; font-weight: 750; }
#scorepredictor-page .sp-toggle-btn.selected,
#scorepredictor-page .sp-scorer-chip.selected {
    border-color: #64e7ff;
    background: linear-gradient(135deg, rgba(7, 112, 171, .94), rgba(14, 81, 127, .93));
    color: #fff;
    box-shadow: inset 0 1px 2px rgba(230, 250, 255, .4), 0 0 14px rgba(48, 201, 245, .28);
}
#scorepredictor-page .sp-score-row { width: 100%; gap: 5px; min-width: 0; }
#scorepredictor-page .sp-score-team { min-width: 0; flex: 1 1 0; gap: 8px; }
#scorepredictor-page .sp-score-label {
    min-height: 30px;
    max-width: 100%;
    color: var(--sp-muted);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    overflow-wrap: anywhere;
}
#scorepredictor-page .sp-stepper {
    max-width: 100%;
    min-width: 0;
    border: 1px solid rgba(110, 200, 246, .56);
    border-radius: 12px;
    background: rgba(6, 23, 43, .85);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3);
}
#scorepredictor-page .sp-step-btn {
    flex: 0 0 44px;
    width: 44px;
    min-height: 46px;
    height: 46px;
    border-radius: 0;
    color: var(--sp-ice);
    font-size: 26px;
}
#scorepredictor-page .sp-step-btn:hover { background: rgba(21, 130, 191, .35); }
#scorepredictor-page .sp-step-val {
    flex: 1 1 auto;
    min-width: 25px;
    width: auto;
    padding: 0 3px;
    color: var(--sp-copy);
    font-size: 25px;
    font-variant-numeric: tabular-nums;
}
#scorepredictor-page .sp-score-divider { flex-shrink: 0; color: var(--sp-ice); }
#scorepredictor-page .sp-scorers-grid { gap: 8px; }
#scorepredictor-page .sp-scorer-chip { padding: 10px 12px; border-radius: 18px; font-size: 12px; font-weight: 700; }
#scorepredictor-page .sp-submit-btn {
    min-height: 54px;
    margin-top: 12px;
    padding: 13px 16px;
    border: 1px solid #84eaff;
    border-radius: 14px;
    background: linear-gradient(135deg, #128fc9, #0a659d);
    color: white;
    font-size: 16px;
    font-weight: 850;
    box-shadow: inset 0 1px 2px rgba(228, 251, 255, .4), 0 5px 23px rgba(30, 175, 230, .34);
}
#scorepredictor-page .sp-submit-btn:hover { filter: brightness(1.1); }

#scorepredictor-page .sp-form-content.sp-readonly .sp-toggle-btn,
#scorepredictor-page .sp-form-content.sp-readonly .sp-scorer-chip {
    cursor: default;
    pointer-events: none;
}
#scorepredictor-page .sp-form-content.sp-readonly .sp-toggle-btn:not(.selected),
#scorepredictor-page .sp-form-content.sp-readonly .sp-scorer-chip:not(.selected) { opacity: .56; }
#scorepredictor-page .sp-form-content.sp-readonly .sp-step-btn { pointer-events: none; color: #8195b4; opacity: .55; }
#scorepredictor-page .sp-form-content.sp-readonly .sp-submit-btn { display: none; }
#scorepredictor-page .sp-view-banner {
    min-width: 0;
    gap: 9px;
    padding: 13px 15px;
    border: 1px solid rgba(142, 207, 251, .52);
    border-radius: 14px;
    background: rgba(12, 36, 60, .91);
    color: var(--sp-copy);
    box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
}
#scorepredictor-page .sp-view-banner.live { border-color: rgba(255, 158, 139, .68); background: rgba(84, 26, 29, .83); color: #ffddd5; }
#scorepredictor-page .sp-view-banner.final { border-color: rgba(111, 229, 191, .61); background: rgba(10, 71, 65, .85); color: #c4ffeb; }
#scorepredictor-page .sp-view-banner.no-pred { border-color: rgba(251, 177, 104, .65); background: rgba(92, 49, 23, .82); color: #ffe2b8; }
#scorepredictor-page .sp-live-score-bar { padding: 14px 10px; gap: 10px; }
#scorepredictor-page .sp-live-team { min-width: 0; color: var(--sp-muted); overflow-wrap: anywhere; font-size: 12px; }
#scorepredictor-page .sp-live-scores { white-space: nowrap; color: var(--sp-ice); font-size: clamp(22px, 6vw, 30px); }
#scorepredictor-page .sp-live-pts-bar { padding: 14px 15px; }
#scorepredictor-page .sp-live-pts-header { gap: 8px; color: var(--sp-copy); }
#scorepredictor-page .sp-live-pts-total { color: var(--sp-ice); white-space: nowrap; }
#scorepredictor-page .sp-live-pts-row { min-width: 0; gap: 7px; border-bottom-color: rgba(137, 199, 236, .2); }
#scorepredictor-page .sp-live-pts-icon { flex-shrink: 0; }
#scorepredictor-page .sp-live-pts-label { min-width: 0; color: var(--sp-muted); overflow-wrap: anywhere; }
#scorepredictor-page .sp-live-pts-row.earned .sp-live-pts-label { color: #b4ffe3; }
#scorepredictor-page .sp-live-pts-row.missed .sp-live-pts-val { color: #ffb8ae; }
#scorepredictor-page .sp-live-pts-row.pending .sp-live-pts-val { color: var(--sp-muted); }
#scorepredictor-page .sp-live-pts-val { color: var(--sp-ice); }

#scorepredictor-page .sp-history-title { padding: 0 0 16px; color: var(--sp-copy); font-size: 26px; }
#scorepredictor-page .sp-history-teams { color: var(--sp-copy); font-size: 16px; overflow-wrap: anywhere; line-height: 1.35; }
#scorepredictor-page .sp-history-tap-hint { color: var(--sp-frost); opacity: 1; font-size: 12px; font-weight: 700; }
#scorepredictor-page .sp-history-pending { color: #ffdda5; font-size: 12px; font-weight: 700; font-style: normal; }
#scorepredictor-page .sp-history-pending::before { content: '◷ '; }
#scorepredictor-page .loading-message,
#scorepredictor-page .error-message {
    padding: 26px 15px;
    border: 1px solid var(--sp-stroke);
    border-radius: 15px;
    background: var(--sp-glass);
    color: var(--sp-copy);
    text-align: center;
    line-height: 1.5;
}
#scorepredictor-page button:focus-visible,
#scorepredictor-page .sp-game-card:focus-visible,
#scorepredictor-page .sp-history-card:focus-visible { outline: 3px solid #8ce9ff; outline-offset: 3px; }

@media (max-width: 360px) {
    #scorepredictor-page .sp-main-header { gap: 8px; }
    #scorepredictor-page .sp-total-wrap { flex-basis: 100px; padding: 9px 6px; }
    #scorepredictor-page .sp-team { gap: 4px; }
    #scorepredictor-page .sp-team-logo { width: 29px; height: 29px; }
    #scorepredictor-page .sp-game-card,
    #scorepredictor-page .sp-history-card,
    #scorepredictor-page .sp-section { padding: 12px; }
    #scorepredictor-page .sp-step-btn { flex-basis: 44px; }
    #scorepredictor-page .sp-step-val { min-width: 20px; padding-inline: 1px; }
    #scorepredictor-page .sp-score-row { gap: 3px; }
    #scorepredictor-page .sp-score-divider { font-size: 15px; }
    #scorepredictor-page .sp-toggle-btn { padding: 9px 5px; font-size: 12px; }
}
@media (min-width: 521px) {
    #scorepredictor-page .sp-arena { border-inline: 1px solid rgba(135, 194, 232, .23); }
}
@media (prefers-reduced-motion: reduce) {
    #scorepredictor-page .sp-game-card,
    #scorepredictor-page .sp-history-card,
    #scorepredictor-page button { transition: none; }
}