@font-face {
    font-family: RosifySeasonDisplay;
    src: url('/fonts/Shrikhand-Regular-latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: RosifySeasonScript;
    src: url('/fonts/DancingScript-Variable-latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}
#yellow-season-sheet {
    box-sizing: border-box;
    position: fixed;
    inset: auto 0 max(10px, env(safe-area-inset-bottom));
    width: calc(100% - 20px);
    max-width: 430px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin: 0 auto;
    padding: 0 22px 22px;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid #fff8e4;
    border-radius: 34px 34px 26px 26px;
    background: #fff5cc;
    color: #343719;
    box-shadow: 0 12px 70px #25271324;
    text-align: center;
    font-family: Poppins, sans-serif;
    line-height: 1.4;
}
#yellow-season-sheet:not([open]) { display: none; }
#yellow-season-sheet[open] { animation: yellow-season-rise .5s cubic-bezier(.18, .85, .25, 1) both; }
#yellow-season-sheet::backdrop { background: #20231865; animation: yellow-season-scrim .4s ease both; }
#yellow-season-sheet.is-closing { animation: yellow-season-leave .18s ease-in both; }
#yellow-season-sheet.is-closing::backdrop { animation: yellow-season-scrim .18s ease reverse both; }
#yellow-season-sheet * { box-sizing: border-box; }
#yellow-season-sheet button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#yellow-season-sheet button:focus-visible { outline: 3px solid #727a32; outline-offset: 3px; }
#yellow-season-sheet .yellow-season-top { padding-top: 42px; touch-action: pan-x; }
#yellow-season-sheet .yellow-season-handle { position: absolute; top: 10px; left: calc(50% - 18px); height: 4px; width: 36px; border-radius: 9px; background: #3437193b; }
#yellow-season-sheet .yellow-season-close { position: absolute; z-index: 1; top: 14px; right: 12px; width: 40px; height: 40px; padding: 10px; border: 0; border-radius: 50%; background: #34371909; color: inherit; display: grid; place-items: center; }
#yellow-season-sheet .yellow-season-close svg { width: 20px; height: 20px; }
#yellow-season-title { margin: 0; color: inherit; font-weight: 400; outline: none; }
#yellow-season-sheet .yellow-season-special { display: block; font-family: RosifySeasonScript, cursive; font-size: clamp(62px, 18vw, 78px); font-weight: 700; line-height: .88; transform: rotate(-5deg); }
#yellow-season-sheet .yellow-season-word { display: block; font-family: RosifySeasonDisplay, Georgia, serif; font-size: clamp(48px, 14.8vw, 65px); font-weight: 400; text-transform: uppercase; letter-spacing: -2.5px; line-height: 1.1; }
#yellow-season-sheet .yellow-season-art { position: relative; height: 192px; margin: -6px 0 0; touch-action: pan-x; }
#yellow-season-sheet .yellow-season-art img { display: block; width: 208px; height: 208px; max-width: none; margin: -8px auto 0; object-fit: contain; filter: drop-shadow(0 12px 13px #e9b73526); user-select: none; -webkit-user-drag: none; }
#yellow-season-sheet .yellow-season-spark { position: absolute; color: #eebc26; font-size: 34px; line-height: 1; }
#yellow-season-sheet .yellow-season-spark-left { left: 16%; top: 61px; }
#yellow-season-sheet .yellow-season-spark-right { right: 13%; top: 125px; font-size: 25px; }
#yellow-season-sheet .yellow-season-message { margin: 5px -8px 8px; color: inherit; font-size: clamp(16px, 4.6vw, 20px); font-weight: 600; line-height: 1.3; }
#yellow-season-description { max-width: 300px; margin: 0 auto 18px; color: #6d7047; font-size: 14px; line-height: 1.5; }
#yellow-season-sheet .yellow-season-choose { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 20px; border: 0; border-radius: 40px; background: #343719; color: #fff9e2; font-size: 16px; font-weight: 500; line-height: 1.4; }
#yellow-season-sheet .yellow-season-choose:hover { background: #454a23; }
#yellow-season-sheet .yellow-season-choose svg { width: 23px; height: 23px; }
@keyframes yellow-season-rise { from { transform: translateY(calc(100% + 30px)); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes yellow-season-leave { to { transform: translateY(40px); opacity: 0; } }
@keyframes yellow-season-scrim { from { opacity: 0; } to { opacity: 1; } }
@media (max-height: 700px) {
    #yellow-season-sheet .yellow-season-special { font-size: 58px; }
    #yellow-season-sheet .yellow-season-word { font-size: 49px; }
    #yellow-season-sheet .yellow-season-art { height: 148px; }
    #yellow-season-sheet .yellow-season-art img { width: 166px; height: 166px; }
    #yellow-season-sheet .yellow-season-spark-right { top: 98px; }
}
@media (prefers-reduced-motion: reduce) {
    #yellow-season-sheet[open], #yellow-season-sheet::backdrop { animation: none; }
}