/* Standalone Birthday, Angpau and Lucky Draw pages share the lobby palette.
   Coral Blue uses the same fallbacks as frontend-premium.css. */
html.reward-theme {
    --reward-bg: var(--palette-page-dark, #101a3b);
    --reward-page-gradient: var(--palette-page-gradient-dark, var(--reward-bg));
    --reward-header: var(--palette-header-dark, #111f45);
    --reward-surface: var(--palette-surface-dark, #17264d);
    --reward-raised: var(--palette-raised-dark, #203561);
    --reward-text: var(--palette-text-dark, #f3f7ff);
    --reward-muted: var(--palette-muted-dark, #b2c4e3);
    --reward-accent: var(--palette-accent-dark, #ffb38a);
    --reward-focus: var(--palette-focus-dark, #52e0d2);
    --reward-line: rgba(var(--palette-line-dark-rgb, 91, 155, 255), .28);
    --reward-tint: rgba(var(--palette-line-dark-rgb, 91, 155, 255), .1);
    --reward-glow: rgba(var(--palette-glow-dark-rgb, 44, 85, 184), .46);
    --reward-secondary-glow: rgba(var(--palette-secondary-glow-dark-rgb, 22, 185, 189), .14);
    --reward-action-start: var(--palette-action-start, #ffb36b);
    --reward-action-end: var(--palette-action-end, #ff825f);
    --reward-action-ink: var(--palette-action-ink, #142141);
    --reward-action-border: var(--palette-action-border, #ffba91);
    background: var(--reward-bg);
    color-scheme: dark;
}
html.reward-theme.game-catalog-light {
    --reward-bg: var(--palette-page-light, #eff6ff);
    --reward-page-gradient: var(--palette-page-gradient-light, var(--reward-bg));
    --reward-header: #ffffff;
    --reward-surface: #ffffff;
    --reward-raised: var(--palette-raised-light, #e3efff);
    --reward-text: var(--palette-text-light, #182b50);
    --reward-muted: var(--palette-muted-light, #506585);
    --reward-accent: var(--palette-accent-light, #a33c21);
    --reward-focus: var(--palette-focus-light, #00756e);
    --reward-line: rgba(var(--palette-line-light-rgb, 53, 101, 186), .25);
    --reward-tint: rgba(var(--palette-line-light-rgb, 53, 101, 186), .07);
    --reward-glow: var(--palette-glow-light, #dbeaff);
    --reward-secondary-glow: var(--palette-secondary-glow-light, #d4f5ef);
    color-scheme: light;
}
body.angpau-page, body.lucky-page {
    color: var(--reward-text);
    background: radial-gradient(ellipse at 12% 0, var(--reward-glow), transparent 48%),
        radial-gradient(ellipse at 95% 24%, var(--reward-secondary-glow), transparent 42%), var(--reward-page-gradient) fixed;
}
.angpau-header, .lucky-header { background: var(--reward-header); border-color: var(--reward-line); }
/* Match the home page logo dimensions on desktop and mobile. */
.angpau-page .angpau-brand, .lucky-page .lucky-brand { flex: 0 0 200px; width: 200px; height: auto; }
.angpau-brand img, .lucky-brand img { width: 100%; height: auto; max-height: none; }
@media (max-width: 767px) {
    .angpau-page .angpau-brand, .lucky-page .lucky-brand { flex-basis: 148px; width: 148px; }
}
.angpau-back, .lucky-back { background: var(--reward-tint); border-color: var(--reward-line); color: var(--reward-accent); }
.angpau-back svg, .lucky-back svg { display: block; }
.angpau-header-title, .lucky-header-title { color: var(--reward-text); }
.angpau-surface, .lucky-stage, .lucky-unavailable, .lucky-result-card {
    border-color: var(--reward-line);
    background: linear-gradient(155deg, var(--reward-raised), var(--reward-surface) 74%);
    box-shadow: 0 24px 70px rgba(var(--palette-shadow-rgb, 8, 18, 38), .3), inset 0 1px #ffffff0b;
}
.angpau-surface::before, .lucky-unavailable::before { background: linear-gradient(90deg, transparent, var(--reward-accent), transparent); }
.angpau-spark, .angpau-eyebrow, .angpau-amount, .angpau-divider,
.lucky-stage::before, .lucky-stage::after, .lucky-kicker, .lucky-unavailable-kicker { color: var(--reward-accent); }
.angpau-divider span { background: var(--reward-line); }
.angpau-surface h1, .lucky-stage h1, .lucky-unavailable h1, .lucky-result-card h2,
body .level-up-surface h2 { color: var(--reward-text); }
.angpau-surface > p, .angpau-message, .lucky-stage-heading p, .lucky-unavailable-message,
.lucky-result-card p, body .birthday-description, body .weekly-progress p, body .weekly-note { color: var(--reward-muted); }
.angpau-action, .lucky-result-action {
    border-color: var(--reward-action-border);
    background: linear-gradient(135deg, var(--reward-action-start), var(--reward-action-end));
    color: var(--reward-action-ink);
}
body .birthday-back, body .weekly-back { background: transparent; color: var(--reward-accent); border-color: var(--reward-line); }
.angpau-action:focus-visible, .angpau-back:focus-visible, .angpau-brand:focus-visible,
.wheel-spin:focus-visible, .lucky-back:focus-visible, .lucky-brand:focus-visible,
.lucky-result-action:focus-visible, body .level-up-list:focus-visible { outline-color: var(--reward-focus); }
.angpau-message-icon, .lucky-result-icon, .lucky-unavailable-icon,
.lucky-count-icon, .lucky-count strong { color: var(--reward-accent); background: var(--reward-tint); border-color: var(--reward-line); }
body .weekly-progress, body .level-up-bonus { border-color: var(--reward-line); background: var(--reward-tint); }
body .weekly-progress .weekly-range, body .weekly-maximum, body .level-up-bonus h3,
body .level-up-surface .bonus-amount, body .level-up-message { color: var(--reward-accent); }
body .level-up-list { scrollbar-color: var(--reward-accent) var(--reward-tint); }
.lucky-count { color: var(--reward-muted); border-color: var(--reward-line); background: var(--reward-bg); }
.lucky-result { background: rgba(var(--palette-overlay-rgb, 8, 15, 38), .86); }

/* Theme the wheel's frame and controls; prize segment colors remain server supplied. */
.wheel-rim {
    border-color: var(--reward-action-border);
    background: linear-gradient(140deg, var(--reward-action-start), var(--reward-action-end) 36%, var(--reward-action-start) 65%, var(--reward-action-end));
    box-shadow: 0 0 0 3px var(--reward-surface), 0 0 0 7px var(--reward-action-end), 0 0 0 9px var(--reward-line), 0 16px 35px #0008, inset 0 0 0 2px var(--reward-action-border);
}
.wheel-face { border-color: var(--reward-action-border); background-color: var(--reward-action-end); box-shadow: 0 0 0 2px var(--reward-action-end), inset 0 0 15px #0004; }
.wheel-pointer { background: linear-gradient(100deg, var(--reward-action-end), var(--reward-action-border) 42%, var(--reward-action-start) 78%, var(--reward-action-end)); }
.wheel-spin {
    border-color: var(--reward-action-border);
    background: radial-gradient(circle at 38% 27%, var(--reward-action-start), var(--reward-action-end));
    color: var(--reward-action-ink);
    text-shadow: none;
    box-shadow: 0 0 0 4px var(--reward-surface), 0 0 0 6px var(--reward-action-border), 0 9px 20px #0009, inset 0 2px 4px #ffffff40;
}
.wheel-spin::before { border-color: var(--reward-action-border); }
.wheel-bulbs > span::before { background: var(--reward-action-border); box-shadow: 0 0 2px 1px var(--reward-action-border), 0 0 9px 3px var(--reward-action-start); }