.prediction-module[hidden], .prediction-module [hidden] { display: none !important; }
.prediction-module {
    font-size: 16px;
    border: 2px solid #7ca4d4;
    border-radius: 5px;
    margin: 8px 2px;
    background: #fff;
    overflow: hidden;
}
.prediction-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 24px 18px;
    color: #fff;
    background: radial-gradient(ellipse at 35% 110%, #73edff 0%, transparent 60%),
        repeating-linear-gradient(135deg, transparent 0 22px, #ffffff14 22px 40px),
        linear-gradient(115deg, #006df6, #00bfff 65%, #0064dd);
    border-bottom: 3px solid #31dcff;
}
.prediction-banner h2 { margin: 0; font-size: clamp(20px, 5vw, 32px); text-shadow: 0 2px 2px #004c9f; }
.prediction-banner h2 b { color: #ffed75; font-size: 1.35em; }
.prediction-reference { padding: 5px 10px; white-space: nowrap; border-radius: 20px; background: #0059ba; font-size: 12px; }
.prediction-body { padding: 16px 12px; }
.prediction-meta { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.prediction-date { font-size: clamp(17px, 3.4vw, 24px); font-weight: 700; color: #141414; }
.prediction-updated { font-size: 12px; color: #696969; }
.prediction-caption { padding: 14px 8px; margin-bottom: 14px; text-align: center; border-radius: 10px; background: linear-gradient(#fff0db, #ffe4c8); font-size: clamp(16px, 3.4vw, 25px); color: #171717; }
.prediction-caption b { font-size: 1.25em; color: #ed1936; }
.prediction-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px 8px; padding: 14px 8px; background: #e5eeff; border-radius: 10px; }
.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: clamp(16px, 4vw, 31px); font-weight: 700; }
.prediction-status { min-height: 260px; display: flex; align-items: center; justify-content: center; padding: 30px 14px; border-radius: 10px; background: #e5eeff; font-size: clamp(15px, 3.4vw, 24px); text-align: center; color: #333; }
.prediction-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.prediction-actions button, .prediction-actions a { font: inherit; font-size: 14px; color: #fff; background: linear-gradient(#176cfc, #063aaf); border: 1px solid #8bb2ff; border-radius: 8px; padding: 9px 16px; cursor: pointer; text-decoration: none; }
.prediction-actions button:focus-visible, .prediction-actions a:focus-visible { outline: 3px solid #ff9d00; outline-offset: 2px; }
@media (max-width: 420px) {
    .prediction-banner { padding: 18px 10px; gap: 6px; }
    .prediction-reference { padding: 4px 7px; font-size: 11px; }
    .prediction-body { padding: 14px 9px; }
    .prediction-grid { gap: 12px 5px; padding: 12px 6px; }
    .prediction-ball span { border-width: 2px; }
}