@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Dark theme variables ── */
:root {
    --wsc-bg:        #101413;
    --wsc-card:      #1a1f1e;
    --wsc-card2:     #222827;
    --wsc-border:    rgba(255,255,255,0.08);
    --wsc-border2:   rgba(255,255,255,0.05);
    --wsc-text:      #f0f0f0;
    --wsc-muted:     #c0d0cc;
    --wsc-faint:     #8fa09c;
    --wsc-cyan:      #00ceff;
    --wsc-cyan-bg:   rgba(0,206,255,0.1);
    --wsc-cyan-dim:  rgba(0,206,255,0.2);
    --wsc-red:       #e24b4a;
    --wsc-red-bg:    rgba(226,75,74,0.12);
    --wsc-amber-bg:  rgba(239,159,39,0.12);
    --wsc-amber:     #ef9f27;
    --wsc-green:     #00ceff;
}

#wsc-predictor, #wsc-predictor *, #wsc-predictor *::before, #wsc-predictor *::after {
    box-sizing: border-box !important;
}

#wsc-predictor {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    max-width: 860px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    color: var(--wsc-text) !important;
    background: transparent;
}

/* ── Notices ── */
#wsc-predictor .wsc-notice { padding: 12px 16px; border-radius: 8px; font-size: 14px !important; margin-bottom: 1.25rem; }
#wsc-predictor .wsc-notice--success { background: var(--wsc-cyan-bg) !important; color: var(--wsc-cyan) !important; border: 1px solid var(--wsc-cyan-dim) !important; }
#wsc-predictor .wsc-notice--error   { background: var(--wsc-red-bg) !important;  color: #f08080 !important; border: 1px solid rgba(226,75,74,0.3) !important; }

/* ── Total score box ── */
#wsc-predictor .wsc-total-score-box {
    display: flex; align-items: baseline; gap: 12px;
    background: var(--wsc-card) !important;
    border: 1px solid var(--wsc-border) !important;
    border-radius: 12px; padding: 14px 20px; margin-bottom: 1.25rem; flex-wrap: wrap;
}
#wsc-predictor .wsc-total-score-label { font-size: 11px !important; font-weight: 500 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--wsc-muted) !important; flex-shrink: 0; }
#wsc-predictor .wsc-total-score-value { font-size: 32px !important; font-weight: 500 !important; color: var(--wsc-cyan) !important; line-height: 1; letter-spacing: -1px; flex-shrink: 0; }
#wsc-predictor .wsc-total-score-sub   { font-size: 11px !important; color: var(--wsc-faint) !important; align-self: center; }

/* ── Auth panel ── */
#wsc-predictor .wsc-auth-panel {
    background: var(--wsc-card) !important;
    border: 1px solid var(--wsc-border) !important;
    border-radius: 12px; padding: 1.25rem; margin-bottom: 1.5rem;
}
#wsc-predictor .wsc-auth-tabs { display: flex; border: 1px solid var(--wsc-border) !important; border-radius: 8px; overflow: hidden; margin-bottom: 1.25rem; }
#wsc-predictor .wsc-tab {
    flex: 1; padding: 9px !important;
    font-family: 'DM Sans', sans-serif !important; font-size: 13px !important; font-weight: 500 !important;
    border: none !important; border-radius: 0 !important; cursor: pointer; transition: all .15s;
    background: var(--wsc-card2) !important; color: var(--wsc-muted) !important;
    text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important;
}
#wsc-predictor .wsc-tab.active  { background: var(--wsc-card) !important; color: var(--wsc-text) !important; }
#wsc-predictor .wsc-tab:first-child { border-right: 1px solid var(--wsc-border) !important; }

#wsc-predictor .wsc-auth-fields     { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
#wsc-predictor .wsc-auth-fields--3  { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 580px) {
    #wsc-predictor .wsc-auth-fields,
    #wsc-predictor .wsc-auth-fields--3 { grid-template-columns: 1fr; }
}
#wsc-predictor .wsc-field { display: flex; flex-direction: column; gap: 5px; }
#wsc-predictor .wsc-lbl { font-size: 11px !important; font-weight: 500 !important; letter-spacing: .07em; text-transform: uppercase; color: var(--wsc-muted) !important; }

#wsc-predictor .wsc-auth-panel input[type="text"],
#wsc-predictor .wsc-auth-panel input[type="email"],
#wsc-predictor .wsc-auth-panel input[type="password"] {
    width: 100%; padding: 10px 13px !important;
    font-family: 'DM Sans', sans-serif !important; font-size: 14px !important;
    color: var(--wsc-text) !important; background: var(--wsc-card2) !important;
    border: 1px solid var(--wsc-border) !important; border-radius: 7px !important;
    outline: none; box-shadow: none !important;
}
#wsc-predictor .wsc-auth-panel input:focus {
    border-color: var(--wsc-cyan) !important;
    box-shadow: 0 0 0 3px var(--wsc-cyan-bg) !important;
}

#wsc-predictor .wsc-auth-btn {
    width: 100%; padding: 11px !important;
    background: var(--wsc-cyan) !important; color: #0a1210 !important;
    border: none !important; border-radius: 8px !important;
    font-family: 'DM Sans', sans-serif !important; font-size: 14px !important; font-weight: 500 !important;
    cursor: pointer; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important;
}
#wsc-predictor .wsc-auth-btn:hover    { background: #00b8e6 !important; }
#wsc-predictor .wsc-auth-btn:disabled { background: var(--wsc-faint) !important; color: var(--wsc-muted) !important; cursor: not-allowed; }

#wsc-predictor .wsc-forgot-link {
    font-family: 'DM Sans', sans-serif !important; font-size: 12px !important;
    color: var(--wsc-muted) !important; background: none !important; border: none !important;
    padding: 0 !important; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
    box-shadow: none !important; border-radius: 0 !important;
}
#wsc-predictor .wsc-forgot-link:hover { color: var(--wsc-text) !important; }

/* ── User bar ── */
#wsc-predictor .wsc-userbar {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--wsc-card) !important; border: 1px solid var(--wsc-border) !important;
    border-radius: 10px; padding: 10px 16px; margin-bottom: 1.5rem; gap: 12px; flex-wrap: wrap;
}
#wsc-predictor .wsc-userbar-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; }
#wsc-predictor .wsc-userbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
#wsc-predictor .wsc-userbar-name  { font-size: 14px !important; font-weight: 500 !important; color: var(--wsc-text) !important; }
#wsc-predictor .wsc-userbar-email { font-size: 12px !important; color: var(--wsc-muted) !important; }
#wsc-predictor .wsc-logout-btn {
    font-family: 'DM Sans', sans-serif !important; font-size: 12px !important;
    color: var(--wsc-muted) !important; background: none !important;
    border: 1px solid var(--wsc-border) !important; border-radius: 6px !important;
    padding: 5px 12px !important; cursor: pointer; flex-shrink: 0;
    text-transform: none !important; box-shadow: none !important;
}
#wsc-predictor .wsc-logout-btn:hover { border-color: var(--wsc-border2) !important; color: var(--wsc-text) !important; }

#wsc-predictor .wsc-notify-all-btn {
    display: inline-flex !important; align-items: center; gap: 5px;
    font-family: 'DM Sans', sans-serif !important; font-size: 12px !important;
    font-weight: 500 !important; color: var(--wsc-cyan) !important;
    background: var(--wsc-cyan-bg) !important; border: 1px solid var(--wsc-cyan-dim) !important;
    border-radius: 20px !important; padding: 5px 14px !important; cursor: pointer;
    white-space: nowrap; text-transform: none !important; box-shadow: none !important;
    transition: all .15s;
}
#wsc-predictor .wsc-notify-all-btn:hover:not(:disabled) {
    background: rgba(0,206,255,0.18) !important; border-color: var(--wsc-cyan) !important;
}
#wsc-predictor .wsc-notify-all-btn--done {
    background: var(--wsc-cyan-bg) !important; border-color: var(--wsc-cyan-dim) !important;
    color: var(--wsc-cyan) !important; cursor: default; opacity: .7;
}

/* ── Groups ── */
#wsc-predictor .wsc-groups { display: flex; flex-direction: column; gap: 12px; }

#wsc-predictor .wsc-group {
    background: var(--wsc-card) !important;
    border: 1px solid var(--wsc-border) !important;
    border-radius: 12px; overflow: hidden;
}
/* Active/open group gets slightly brighter border */
#wsc-predictor .wsc-group[data-open="1"] {
    border-color: rgba(0,206,255,0.2) !important;
}

/* ── Collapsed group (no predictions, locked) ── */
#wsc-predictor .wsc-group--collapsed .wsc-group-body { display: none; }
#wsc-predictor .wsc-group--collapsed .wsc-ghead { cursor: pointer; }
#wsc-predictor .wsc-group--collapsed .wsc-ghead:hover { background: var(--wsc-card2) !important; }
#wsc-predictor .wsc-collapse-toggle {
    font-size: 11px !important; color: var(--wsc-muted) !important;
    background: none !important; border: none !important;
    padding: 0 !important; cursor: pointer; flex-shrink: 0;
    font-family: 'DM Sans', sans-serif !important;
}

/* ── Group header ── */
#wsc-predictor .wsc-ghead {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 18px; border-bottom: 1px solid var(--wsc-border2) !important;
    gap: 10px; background: transparent !important; flex-wrap: wrap;
    transition: background .15s;
}
#wsc-predictor .wsc-group--collapsed .wsc-ghead { border-bottom: none !important; }
#wsc-predictor .wsc-ghead-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
#wsc-predictor .wsc-glabel {
    font-size: 11px !important; font-weight: 500 !important;
    letter-spacing: .08em; text-transform: uppercase; color: #8fa09c !important;
}

/* ── Status badges ── */
#wsc-predictor .wsc-badge {
    font-size: 11px !important; font-weight: 500 !important;
    padding: 4px 12px !important; border-radius: 20px !important;
    display: inline-flex !important; align-items: center; gap: 6px;
    white-space: nowrap; text-transform: none !important; letter-spacing: normal !important;
    border: none !important; box-shadow: none !important;
}
#wsc-predictor .wsc-badge--open   { background: var(--wsc-cyan-bg) !important; color: var(--wsc-cyan) !important; }
#wsc-predictor .wsc-badge--live   { background: var(--wsc-amber-bg) !important; color: var(--wsc-amber) !important; }
#wsc-predictor .wsc-badge--future { background: rgba(255,255,255,0.05) !important; color: var(--wsc-muted) !important; }

#wsc-predictor .wsc-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--wsc-amber) !important; display: inline-block;
    animation: wsc-pulse 1.4s ease-in-out infinite; flex-shrink: 0;
}
@keyframes wsc-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ── Powered by ── */
#wsc-predictor .wsc-powered-by {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 1; min-width: 0;
    border-left: 1px solid var(--wsc-border) !important; padding-left: 10px; margin-left: 4px;
}
#wsc-predictor .wsc-powered-by-text {
    font-size: 10px !important; font-weight: 500 !important;
    letter-spacing: .08em; text-transform: uppercase; color: var(--wsc-muted) !important;
    white-space: nowrap; flex-shrink: 0;
}
#wsc-predictor .wsc-halo-logo { height: 14px; width: auto; max-width: 80px; display: block; flex-shrink: 1; }
@media (max-width: 540px) {
    #wsc-predictor .wsc-powered-by-text { font-size: 8px !important; letter-spacing: .04em; }
    #wsc-predictor .wsc-halo-logo { height: 11px; max-width: 55px; }
    #wsc-predictor .wsc-powered-by { gap: 4px; padding-left: 7px; margin-left: 2px; }
}
@media (max-width: 380px) {
    #wsc-predictor .wsc-powered-by-text { display: none; }
    #wsc-predictor .wsc-halo-logo { height: 10px; max-width: 48px; }
    #wsc-predictor .wsc-powered-by { border-left: none !important; padding-left: 0; margin-left: 0; }
}

/* ── Notify button ── */
#wsc-predictor .wsc-notify-btn {
    display: inline-flex !important; align-items: center; gap: 5px;
    font-family: 'DM Sans', sans-serif !important; font-size: 11px !important;
    font-weight: 500 !important; color: var(--wsc-cyan) !important;
    background: var(--wsc-cyan-bg) !important; border: 1px solid var(--wsc-cyan-dim) !important;
    border-radius: 20px !important; padding: 4px 12px !important; cursor: pointer;
    white-space: nowrap; text-transform: none !important; box-shadow: none !important;
    transition: all .15s;
}
#wsc-predictor .wsc-notify-btn:hover:not(:disabled):not(.wsc-notify-btn--done):not(.wsc-notify-btn--guest) {
    border-color: var(--wsc-cyan) !important; color: var(--wsc-cyan) !important;
    background: rgba(0,206,255,0.18) !important;
}
#wsc-predictor .wsc-notify-btn--guest { opacity: .4; cursor: not-allowed; }
#wsc-predictor .wsc-notify-btn--done  { background: var(--wsc-cyan-bg) !important; border-color: var(--wsc-cyan-dim) !important; color: var(--wsc-cyan) !important; cursor: default; }
#wsc-predictor .wsc-notify-btn--done svg { display: none; }

/* ── Match rows ── */
#wsc-predictor .wsc-match {
    padding: 12px 18px; border-bottom: 1px solid var(--wsc-border2) !important; background: transparent !important;
}
#wsc-predictor .wsc-match:last-child  { border-bottom: none !important; }
#wsc-predictor .wsc-match--saved      { background: rgba(0,206,255,0.03) !important; }

#wsc-predictor .wsc-mrow { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
#wsc-predictor .wsc-mnum { font-size: 12px !important; color: var(--wsc-muted) !important; width: 20px; text-align: center; flex-shrink: 0; }
#wsc-predictor .wsc-players { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; }

/* ── Player buttons ── */
#wsc-predictor .wsc-pbtn {
    flex: 1; padding: 8px 11px !important; border-radius: 7px !important;
    border: 1px solid rgba(0,206,255,0.2) !important; background: var(--wsc-card2) !important;
    font-family: 'DM Sans', sans-serif !important; font-size: 13px !important;
    font-weight: 400 !important; color: #c0d0cc !important; cursor: pointer;
    text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-transform: none !important; box-shadow: none !important; transition: all .15s;
}
#wsc-predictor .wsc-pbtn:hover:not(:disabled):not(.wsc-pbtn--saved) {
    border-color: var(--wsc-cyan) !important; color: var(--wsc-cyan) !important; background: rgba(0,206,255,0.05) !important;
}
#wsc-predictor .wsc-pbtn--sel   { background: rgba(0,130,140,0.4) !important; border-color: var(--wsc-cyan) !important; color: var(--wsc-cyan) !important; font-weight: 500 !important; }
#wsc-predictor .wsc-pbtn--saved { background: rgba(0,130,140,0.35) !important; border-color: var(--wsc-cyan) !important; color: var(--wsc-cyan) !important; font-weight: 500 !important; cursor: default; }
#wsc-predictor .wsc-pbtn:disabled:not(.wsc-pbtn--sel):not(.wsc-pbtn--saved) { opacity: .3; cursor: not-allowed; pointer-events: none; }

/* Locked (no prediction) player button — keep legible */
#wsc-predictor .wsc-group[data-open="0"] .wsc-pbtn:not(.wsc-pbtn--sel):not(.wsc-pbtn--saved) {
    opacity: 1 !important; color: #8fa09c !important; border-color: rgba(255,255,255,0.07) !important;
}

#wsc-predictor .wsc-vs { font-size: 11px !important; color: var(--wsc-muted) !important; font-weight: 500; flex-shrink: 0; }
#wsc-predictor .wsc-mtime       { font-size: 12px !important; color: var(--wsc-muted) !important; white-space: nowrap; flex-shrink: 0; }
#wsc-predictor .wsc-mtime--locked { font-size: 11px !important; color: var(--wsc-muted) !important; }
#wsc-predictor .wsc-saved-badge {
    font-size: 11px !important; font-weight: 500 !important;
    color: var(--wsc-cyan) !important; background: var(--wsc-cyan-bg) !important;
    border-radius: 5px; padding: 3px 9px !important; flex-shrink: 0;
}

/* ── Score row ── */
#wsc-predictor .wsc-score-row  { display: flex; align-items: center; gap: 10px; padding-left: 32px; flex-wrap: wrap; }
#wsc-predictor .wsc-score-lbl  { font-size: 12px !important; color: var(--wsc-muted) !important; flex-shrink: 0; }
#wsc-predictor .wsc-score-inputs { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }

#wsc-predictor .wsc-score-inputs input[type="number"] {
    width: 52px; padding: 6px 8px !important;
    font-family: 'DM Sans', sans-serif !important; font-size: 14px !important; font-weight: 500 !important;
    text-align: center; border: 1px solid var(--wsc-border) !important; border-radius: 7px !important;
    background: var(--wsc-card2) !important; color: var(--wsc-text) !important;
    outline: none; box-shadow: none !important; -moz-appearance: textfield;
}
#wsc-predictor .wsc-score-inputs input[type="number"]::-webkit-inner-spin-button,
#wsc-predictor .wsc-score-inputs input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
#wsc-predictor .wsc-score-inputs input[type="number"]:focus {
    border-color: var(--wsc-cyan) !important; box-shadow: 0 0 0 3px var(--wsc-cyan-bg) !important;
}
#wsc-predictor .wsc-score-inputs input[type="number"]:disabled { opacity: .4; cursor: not-allowed; }
/* Winner box: always full opacity with cyan highlight — override disabled dimming */
#wsc-predictor .wsc-score--winner {
    background: var(--wsc-cyan-bg) !important;
    border-color: var(--wsc-cyan) !important;
    color: var(--wsc-cyan) !important;
    opacity: 1 !important;
}
#wsc-predictor .wsc-score--fixed  { cursor: not-allowed; opacity: 1 !important; }
#wsc-predictor .wsc-score-dash    { font-size: 14px !important; color: var(--wsc-muted) !important; }
#wsc-predictor .wsc-score-hint    { font-size: 11px !important; color: var(--wsc-muted) !important; font-style: italic; }
#wsc-predictor .wsc-score-hint--saved { color: var(--wsc-cyan) !important; font-style: normal; font-weight: 500 !important; }

/* ── Result display ── */
#wsc-predictor .wsc-correct   { color: var(--wsc-cyan) !important; font-weight: 500 !important; }
#wsc-predictor .wsc-incorrect { color: var(--wsc-red) !important; font-weight: 500 !important; }
#wsc-predictor .wsc-result-actual { font-size: 11px !important; color: var(--wsc-muted) !important; white-space: nowrap; flex-shrink: 0; }

/* ── Group footer ── */
#wsc-predictor .wsc-group-footer {
    padding: 10px 18px; border-top: 1px solid var(--wsc-border2) !important;
    display: flex; align-items: center; justify-content: space-between;
    background: var(--wsc-card2) !important; gap: 12px; flex-wrap: wrap;
}
#wsc-predictor .wsc-group-score { display: flex; align-items: baseline; gap: 8px; }
#wsc-predictor .wsc-group-score-label {
    font-size: 11px !important; font-weight: 500 !important;
    letter-spacing: .08em; text-transform: uppercase; color: var(--wsc-muted) !important;
}
#wsc-predictor .wsc-group-score-awaiting {
    color: var(--wsc-faint) !important; font-style: italic;
    text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important;
}
#wsc-predictor .wsc-group-score-value {
    font-size: 22px !important; font-weight: 500 !important;
    color: var(--wsc-cyan) !important; line-height: 1; letter-spacing: -.5px;
}
#wsc-predictor .wsc-group-footer .wsc-save-btn { padding: 9px 24px !important; font-size: 13px !important; }

/* ── Save button ── */
#wsc-predictor .wsc-save-btn {
    background: var(--wsc-cyan) !important; color: #0a1210 !important;
    border: none !important; padding: 11px 32px !important; border-radius: 8px !important;
    font-family: 'DM Sans', sans-serif !important; font-size: 14px !important; font-weight: 500 !important;
    cursor: pointer; text-transform: none !important; box-shadow: none !important; transition: background .15s;
}
#wsc-predictor .wsc-save-btn:hover    { background: #00b8e6 !important; }
#wsc-predictor .wsc-save-btn:disabled { background: var(--wsc-faint) !important; color: var(--wsc-muted) !important; cursor: not-allowed; }

/* ── Sign in prompt (logged out) ── */
#wsc-predictor .wsc-signin-prompt {
    text-align: center; padding: 2.5rem 1rem;
    color: var(--wsc-muted) !important; font-size: 14px !important; line-height: 1.6;
}
#wsc-predictor .wsc-signin-prompt p { margin: 0; color: var(--wsc-muted) !important; }

/* ── Responsive ── */
@media (max-width: 600px) {
    #wsc-predictor .wsc-match  { padding: 10px 12px; }
    #wsc-predictor .wsc-ghead  { padding: 10px 12px; }
    #wsc-predictor .wsc-pbtn   { font-size: 12px !important; padding: 7px 8px !important; }
    #wsc-predictor .wsc-mtime  { display: none; }
    #wsc-predictor .wsc-score-row { padding-left: 0; }
    #wsc-predictor .wsc-save-btn { text-align: center; width: 100%; }
}

/* ── Collapsible group body ── */
#wsc-predictor .wsc-group-body { display: block; }
#wsc-predictor .wsc-group--collapsed .wsc-group-body { display: none; }
#wsc-predictor .wsc-group--collapsed .wsc-ghead { border-bottom: none !important; opacity: 0.6; }
#wsc-predictor .wsc-group--collapsed .wsc-ghead:hover { opacity: 0.85; }
#wsc-predictor .wsc-collapse-toggle {
    font-size: 11px !important; color: rgba(0,206,255,0.65) !important;
    font-style: italic; flex-shrink: 0; white-space: nowrap;
}