/* All decoration is click-through. Scope overrides to the earned 300 milestone. */
#menu-page.streak-300-active .page-container {
    border: 3px solid #e6be55 !important;
    box-shadow: 0 10px 35px #124b2920, 0 0 18px #e8c65230, inset 0 0 12px #e8c65210 !important;
    transition: box-shadow 4s ease, border-color 4s ease;
}
#menu-page.streak-300-active.legendary-border-bright .page-container,
#menu-page.streak-300-active.legendary-revealing .page-container {
    border-color: #ffe9a1 !important;
    box-shadow: 0 0 32px #e8c65280, 0 0 65px #20c98930, inset 0 0 22px #e8c65230 !important;
}
#menu-page #welcome-message .streak-crown-100 { width: 42px; height: 42px; }
#menu-page #welcome-message .streak-crown-200 { width: 64px; height: 64px; }
#menu-page.streak-300-active #welcome-message { flex-wrap: wrap; row-gap: 20px; }
#menu-page.streak-300-active .dashboard-bee-field { display: none; }
.legendary-crown-slot { position: relative; display: inline-flex; margin-block: -18px; }
#menu-page #welcome-message .legendary-crown {
    height: 92px; width: 92px;
    filter: drop-shadow(0 3px 3px #173a3370) drop-shadow(0 0 9px #1dc68d45);
    transition: filter 1.5s ease;
}
#menu-page.legendary-glint #welcome-message .legendary-crown,
.legendary-glint .legendary-flight-occluder {
    filter: brightness(1.2) drop-shadow(0 0 8px #fff3bc) drop-shadow(0 0 17px #29c48380);
}
.legendary-crown-slot::after {
    content: ''; position: absolute; left: 25%; top: 23%; width: 8px; height: 8px;
    background: #fffce2; opacity: 0; pointer-events: none;
    clip-path: polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
}
.legendary-glint .legendary-crown-slot::after { animation: legendary-gem-glint 1.6s ease both; }
@keyframes legendary-gem-glint {
    0% { opacity: 0; transform: translate(0,0) scale(.3); }
    40% { opacity: 1; transform: translate(25px,15px) scale(2.5); }
    100% { opacity: 0; transform: translate(40px,40px) scale(.2); }
}
.legendary-revealing .legendary-crown-slot { visibility: hidden; }
.legendary-layer, .legendary-layer * { pointer-events: none !important; }
.legendary-layer { position: fixed; inset: 0; z-index: 10001; overflow: hidden; contain: layout style; }
.legendary-dim { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, #063b2966, #021911bf); opacity: 0; }
.legendary-stage { position: absolute; width: min(380px, 86vw); height: min(380px, 86vw); transform: translate(-50%, -50%); }
.legendary-reveal-crown { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: contain; opacity: 0; filter: drop-shadow(0 0 18px #ffd96f) drop-shadow(0 0 40px #19eaa780); }
.legendary-rays { position: absolute; inset: -25%; opacity: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #f8d87600 0deg 14deg, #ffe6a778 17deg, #5af9bd00 22deg 30deg); mask-image: radial-gradient(circle, #000 5%, transparent 68%); }
.legendary-number { position: absolute; inset: 0; display: grid; place-items: center; font: 900 clamp(100px, 20vw, 180px)/1 Georgia, serif; color: #fff3b0; text-shadow: 0 0 20px #ffe29e, 0 0 65px #4cffba; opacity: 0; }
.legendary-caption { position: absolute; width: min(520px, 94vw); left: 50%; top: 96%; transform: translateX(-50%); text-align: center; color: #fff5c9; text-shadow: 0 2px 15px #031c12; opacity: 0; }
.legendary-caption strong { display: block; font-size: clamp(22px, 4.2vw, 34px); letter-spacing: .02em; }
.legendary-caption span { display: block; color: #b5ffdf; margin-top: 8px; font-size: clamp(17px, 3vw, 22px); }
.legendary-particle { position: absolute; top: 0; left: 0; border-radius: 50%; opacity: 0; background: var(--spark-color); box-shadow: 0 0 7px var(--spark-color), 0 0 15px var(--spark-color); }
.legendary-flight { position: absolute; inset: 0; pointer-events: none; }
.legendary-comet { z-index: 2; background: radial-gradient(circle, #fffbe0 8%, var(--spark-color) 50%); box-shadow: 0 0 4px #fff5ba, 0 0 12px var(--spark-color), 0 0 25px var(--spark-color); }
.legendary-trail { z-index: 1; }
.legendary-star { border-radius: 0; clip-path: polygon(50% 0,61% 37%,100% 50%,61% 63%,50% 100%,39% 63%,0 50%,39% 37%); }
.legendary-flight-occluder { position: absolute; z-index: 3; object-fit: contain; filter: drop-shadow(0 3px 3px #173a3370) drop-shadow(0 0 9px #1dc68d45); }
.legendary-bee { position: absolute; top: 0; left: 0; font-size: 22px; opacity: 0; filter: drop-shadow(0 0 5px #ffdf73); }
.legendary-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
@media (max-height: 600px) {
    .legendary-stage { width: 240px; height: 240px; }
    .legendary-caption { top: 88%; }
}
@media (prefers-reduced-motion: reduce) {
    #menu-page.streak-300-active { animation: none !important; }
    #menu-page.streak-300-active .dashboard-mini-avatar-container,
    #menu-page.streak-300-active .welcome-message-text,
    .legendary-glint .legendary-crown-slot::after { animation: none !important; }
    .legendary-stage { transform: translate(-50%, -50%); }
}

.legendary-fireworks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }