.goaspribe-prediction { margin-top: 2rem; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--goaspribe-color-border); border-radius: 22px; color: var(--goaspribe-color-text); background: radial-gradient(circle at 85% 10%, rgba(245,158,11,.16), transparent 32%), var(--goaspribe-color-bg-soft); box-shadow: var(--goaspribe-shadow); }
.goaspribe-prediction-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.2rem; }
.goaspribe-prediction-head h2 { margin-bottom: .2rem; font-size: clamp(1.45rem, 3vw, 2.2rem); }
.goaspribe-prediction-clock { min-width: 0; color: var(--goaspribe-color-secondary); font-weight: 900; font-variant-numeric: tabular-nums; }
.goaspribe-prediction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.goaspribe-prediction-card { min-width: 0; max-width: 100%; padding: 1.15rem; border: 1px solid rgba(184,199,204,.18); border-radius: var(--goaspribe-radius); background: rgba(255,255,255,.055); }
.goaspribe-prediction-card--reference { grid-row: span 2; }
.goaspribe-prediction-label { display: block; margin-bottom: .35rem; color: var(--goaspribe-color-muted); font-size: .78rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.goaspribe-prediction-value { display: block; max-width: 100%; color: #fff; font-size: clamp(1.08rem, 2.5vw, 1.5rem); font-weight: 900; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.goaspribe-prediction-countdown { color: var(--goaspribe-color-secondary); font-size: clamp(2.2rem, 7vw, 4.6rem); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.goaspribe-prediction-balls { display: flex; flex-wrap: wrap; gap: .55rem; margin: .8rem 0; }
.goaspribe-prediction-ball { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--goaspribe-color-primary); border-radius: 50%; color: #fff; background: #0a242c; font-weight: 900; font-variant-numeric: tabular-nums; }
.goaspribe-prediction-status { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .7rem; border-radius: 999px; background: rgba(20,184,166,.13); font-weight: 850; }
.goaspribe-prediction-colour::before { content: ""; width: .75rem; height: .75rem; border: 2px solid rgba(255,255,255,.65); border-radius: 50%; background: var(--goaspribe-reference-colour, var(--goaspribe-color-primary)); }
.goaspribe-prediction-progress { height: 8px; margin-top: .9rem; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.12); }
.goaspribe-prediction-progress > span { display: block; width: var(--goaspribe-progress, 0%); height: 100%; background: linear-gradient(90deg, var(--goaspribe-color-primary), var(--goaspribe-color-secondary)); transition: width .3s linear; }
.goaspribe-prediction-history { grid-column: 1 / -1; }
.goaspribe-prediction-history .goaspribe-table-wrap { border-color: rgba(184,199,204,.18); }
.goaspribe-prediction-history table { min-width: 620px; color: var(--goaspribe-color-text); }
.goaspribe-prediction-history th { color: var(--goaspribe-color-secondary); background: rgba(255,255,255,.07); }
.goaspribe-prediction-history td, .goaspribe-prediction-history th { border-color: rgba(184,199,204,.12); }
.goaspribe-prediction-note { margin: 1rem 0 0; padding: 1rem; border-inline-start: 4px solid var(--goaspribe-color-secondary); background: rgba(255,255,255,.055); color: var(--goaspribe-color-muted); }
.goaspribe-prediction-round-update { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.goaspribe-prediction.is-round-change { animation: goaspribe-round 600ms ease; }
@keyframes goaspribe-round { 50% { border-color: var(--goaspribe-color-secondary); box-shadow: 0 0 0 4px rgba(245,158,11,.16), var(--goaspribe-shadow); } }
@media (max-width: 768px) { .goaspribe-prediction-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .goaspribe-prediction-grid { grid-template-columns: minmax(0,1fr); } .goaspribe-prediction-card--reference, .goaspribe-prediction-history { grid-column: auto; grid-row: auto; } .goaspribe-prediction-countdown { font-size: clamp(2rem, 18vw, 3.8rem); } }
@media (prefers-reduced-motion: reduce) { .goaspribe-prediction.is-round-change { animation: none; } .goaspribe-prediction-progress > span { transition: none; } }