.prediction-module[hidden], .prediction-module [hidden] { display: none !important; }
/* Match the 750-unit design canvas at both desktop and mobile widths. */
.prediction-module {
    font-size: calc(var(--prediction-unit, 1rem) * .16);
    border: 2px solid #023B95;
    border-radius: calc(var(--prediction-unit, 1rem) * .04);
    margin: calc(var(--prediction-unit, 1rem) * .06) 0;
    background: #fff;
    overflow: hidden;
}
.prediction-banner { position: relative; width: 100%; background: #00baff; }
.prediction-banner-art { display: block; width: 100%; height: calc(var(--prediction-unit, 1rem) * 1.70); }
.prediction-banner h2, .prediction-reference {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}
.prediction-body { padding: calc(var(--prediction-unit, 1rem) * .22) calc(var(--prediction-unit, 1rem) * .10) calc(var(--prediction-unit, 1rem) * .21); }
.prediction-meta { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--prediction-unit, 1rem) * .08); margin: 0 calc(var(--prediction-unit, 1rem) * .04) calc(var(--prediction-unit, 1rem) * .19); }
.prediction-date { font-size: calc(var(--prediction-unit, 1rem) * .33); font-weight: 700; color: #141414; white-space: nowrap; }
.prediction-updated { font-size: calc(var(--prediction-unit, 1rem) * .18); color: #888; white-space: nowrap; }
.prediction-caption { display: flex; align-items: baseline; justify-content: center; padding: calc(var(--prediction-unit, 1rem) * .20) calc(var(--prediction-unit, 1rem) * .08); margin-bottom: calc(var(--prediction-unit, 1rem) * .20); text-align: center; border-radius: calc(var(--prediction-unit, 1rem) * .10); background: linear-gradient(#fff0db, #ffe4c8); font-size: calc(var(--prediction-unit, 1rem) * .39); color: #171717; line-height: 1.3; white-space: nowrap; }
.prediction-caption span { color: #bb6900; }
.prediction-caption b { margin: 0 calc(var(--prediction-unit, 1rem) * .025); font-size: calc(var(--prediction-unit, 1rem) * .56); line-height: 1; color: #ff0018; }
.prediction-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: calc(var(--prediction-unit, 1rem) * .175) calc(var(--prediction-unit, 1rem) * .09); padding: calc(var(--prediction-unit, 1rem) * .16) calc(var(--prediction-unit, 1rem) * .10); background: #e4edff; border-radius: calc(var(--prediction-unit, 1rem) * .10); }
.prediction-ball { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; width: 100%; border-radius: 50%; border: 1px solid #ffffff; box-shadow: inset 0 -5px 7px #0003, inset 0 4px 6px #fff9, 0 1px 2px #25579355; }
.prediction-ball.red { background: radial-gradient(circle at 35% 20%, #ffafc0, #ff234e 55%, #d20030); }
.prediction-ball.blue { background: radial-gradient(circle at 35% 20%, #b8edff, #0ea7fa 55%, #0060d6); }
.prediction-ball.green { background: radial-gradient(circle at 35% 20%, #c5ffb7, #26ca58 55%, #008b36); }
.prediction-ball span { display: flex; align-items: center; justify-content: center; width: 69%; height: 69%; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #fff, #f5f8fc 70%, #c1d2d9); border: 3px double #ffffffc9; color: #171717; font-size: calc(var(--prediction-unit, 1rem) * .36); font-weight: 700; }
 .prediction-status { min-height: calc(var(--prediction-unit, 1rem) * 4.45); display: flex; align-items: center; justify-content: center; padding: calc(var(--prediction-unit, 1rem) * .30) calc(var(--prediction-unit, 1rem) * .14); border-radius: calc(var(--prediction-unit, 1rem) * .10); background: #e4edff; font-size: calc(var(--prediction-unit, 1rem) * .26); text-align: center; color: #333; }
.prediction-actions { display: flex; justify-content: flex-end; margin-top: calc(var(--prediction-unit, 1rem) * .12); }
.prediction-actions a { display: grid; place-items: center; min-width: calc(var(--prediction-unit, 1rem) * 1.75); height: calc(var(--prediction-unit, 1rem) * .60); font: inherit; font-size: calc(var(--prediction-unit, 1rem) * .23); font-weight: 700; color: #fff; background: linear-gradient(#0057ef, #003298); border: calc(var(--prediction-unit, 1rem) * .02) solid #8bb2ff; border-radius: calc(var(--prediction-unit, 1rem) * .12); cursor: pointer; text-decoration: none; }
.prediction-actions a:focus-visible { outline: 3px solid #ff9d00; outline-offset: 2px; }

/* Mobile homepage uses a 375-unit canvas; preserve the same module proportions. */
.prediction-module-mobile { --prediction-unit: .5rem; }

/* Glossy rings and reflections from the supplied homepage design. */
.prediction-module .prediction-ball {
    position: relative;
    overflow: hidden;
    border: 1px solid #fff9;
    box-shadow: inset 0 2px 2px #fff9, inset 0 -4px 3px #0003, 0 1px 1px #ffffff;
}
.prediction-module .prediction-ball.red { background: radial-gradient(ellipse at 45% 12%, #ffb6b7 0%, #ff3041 32%, #ff0020 60%, #d6001b 80%, #ff3851 94%); }
.prediction-module .prediction-ball.blue { background: radial-gradient(ellipse at 45% 12%, #90efff 0%, #00b8ff 32%, #0095fa 60%, #0069cf 80%, #26c6ff 94%); }
.prediction-module .prediction-ball.green { background: radial-gradient(ellipse at 45% 12%, #92ff86 0%, #00e82a 32%, #00bd17 60%, #008c06 80%, #29ec42 94%); }
.prediction-module .prediction-ball::before {
    content: "";
    position: absolute;
    top: 16%; left: 13%;
    width: 14%; height: 20%;
    transform: rotate(35deg);
    border-radius: 50%;
    background: #fff;
    filter: blur(2px);
    opacity: .9;
}
.prediction-module .prediction-ball::after {
    content: "";
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    border: 1px solid #ffffff75;
    border-right: 3px solid #ffffffb0;
    border-bottom: 3px solid #ffffff90;
    pointer-events: none;
}
.prediction-module .prediction-ball span {
    position: relative;
    width: 64%; height: 64%;
    background: linear-gradient(#fff, #eeeeee);
    border: 3px double #fff;
    box-shadow: 0 0 0 1px #fff9, inset 0 0 0 1px #9994;
    z-index: 1;
}

.prediction-module .prediction-ball { border: 0; box-shadow: none; background-size: 100% 100%; }
.prediction-module .prediction-ball.red { background-image: url('images/prediction-ball-red.svg'); }
.prediction-module .prediction-ball.blue { background-image: url('images/prediction-ball-blue.svg'); }
.prediction-module .prediction-ball.green { background-image: url('images/prediction-ball-green.svg'); }
.prediction-module .prediction-ball::before, .prediction-module .prediction-ball::after { display: none; }
.prediction-module .prediction-ball span { border: 0; box-shadow: none; background: none; }