/* Christmas: the advent calendar, its overlay moments, and the winter frame. */

/* --- advent calendar: five styles (styles.js); this part is the shared board and the street's windows --- */
.adv-board {
  position: relative; display: block; border-radius: 30px; overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 10px #fbf6ec, 0 0 0 13px #d8c7a3, 0 40px 100px rgba(0,0,0,.55);
  font-family: Fredoka, system-ui, sans-serif; color: #fff; background: #0d1638;
}
.adv-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.adv-scene .st { animation: advTwinkle 3.6s ease-in-out infinite; }
.adv-scene .bulb { animation: advTwinkle 2.4s ease-in-out infinite; }
.adv-scene .lamp { animation: advFlicker 3.2s ease-in-out infinite; }
.adv-scene .smoke { opacity: 0; animation: advSmoke 6s ease-in infinite; transform-box: fill-box; transform-origin: center; }
@keyframes advTwinkle { 50% { opacity: .25; } }
@keyframes advFlicker { 50% { opacity: .65; } }
@keyframes advSmoke { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: .8; } 100% { opacity: 0; transform: translate(20px, -80px) scale(2.2); } }
.adv-head { position: absolute; right: 64px; top: 46px; text-align: right; }
.adv-title { font: 700 58px/1 Fredoka, sans-serif; letter-spacing: -.01em; color: #fff; text-shadow: 0 0 24px rgba(255,236,170,.45), 0 4px 0 rgba(0,0,0,.25); }
.adv-sub { margin-top: 10px; font: 500 20px Fredoka, sans-serif; color: #ffe7b0; }

/* --- windows --- */
.door { position: absolute; perspective: 700px; --r: 8px; }
.door.arch { --r: 48px 48px 8px 8px; }
.door.round { --r: 50%; }
.door.front { --r: 48px 48px 4px 4px; }
.door .room {
  position: absolute; inset: 0; border-radius: var(--r); overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 42%, #fff6d4, #ffd27a 48%, #f0a347 85%, #d9822f);
  box-shadow: inset 0 0 0 5px #fbf6ec, inset 0 8px 14px rgba(120,60,10,.35);
}
.door .room .art { width: 74%; height: 74%; }
.door .won { position: absolute; right: 8%; bottom: 8%; height: 46%; aspect-ratio: 7 / 10; object-fit: cover; border-radius: 6px; rotate: 8deg; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--rc), 0 6px 10px rgba(80,30,0,.35); }
.door .shut {
  position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; backface-visibility: visible;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 2px, transparent 2px 9px), linear-gradient(90deg, rgba(255,255,255,.12), rgba(0,0,0,.12)), var(--sh);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.18), inset 0 0 0 6px rgba(255,255,255,.12);
  transition: transform 1.15s cubic-bezier(.2, .9, .25, 1.08);
}
.door .shut.l { left: 0; transform-origin: 0 50%; border-radius: var(--r); border-top-right-radius: 0; border-bottom-right-radius: 0; }
.door .shut.r { right: 0; transform-origin: 100% 50%; border-radius: var(--r); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.door.round .shut.l { border-radius: 999px 0 0 999px; }
.door.round .shut.r { border-radius: 0 999px 999px 0; }
.door.front .shut { background: linear-gradient(180deg, transparent 18%, rgba(0,0,0,.18) 18% 19%, transparent 19% 52%, rgba(0,0,0,.18) 52% 53%, transparent 53%), linear-gradient(90deg, rgba(255,255,255,.1), rgba(0,0,0,.18)), var(--sh); }
.door.open { z-index: 2; }
.door.open .shut.l { transform: rotateY(-116deg); }
.door.open .shut.r { transform: rotateY(116deg); }
.door .plaque {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; min-width: 46px; height: 46px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
  background: #fffaf0; color: #7a2b20; font: 700 24px/1 Fredoka, sans-serif; box-shadow: 0 3px 0 rgba(0,0,0,.25), inset 0 0 0 2px #e9d3a8; transition: opacity .3s, transform .3s; z-index: 1;
}
.door.front .plaque { top: 40%; min-width: 58px; height: 58px; font-size: 30px; background: linear-gradient(180deg, #ffe9a8, #e6b04a); color: #5a2b10; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.door.round .plaque { min-width: 38px; height: 38px; font-size: 20px; }
.door.open .plaque { opacity: 0; transform: scale(.6); }
.door .sill { position: absolute; left: -8px; right: -8px; bottom: -9px; height: 12px; border-radius: 6px; background: #fff; box-shadow: 0 3px 0 #c9dcef; }
.door.round .sill, .door.front .sill { display: none; }
.door .wreath { position: absolute; left: 50%; top: -6px; width: 56px; translate: -50% -60%; z-index: 3; filter: drop-shadow(0 4px 4px rgba(0,0,0,.3)); }
.door .wreath svg { display: block; width: 100%; }
.door .tag { position: absolute; left: 50%; top: -14px; translate: -50% -100%; padding: 4px 10px; border-radius: 999px; font: 700 12px Fredoka, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #5a2b10; background: #ffd77a; box-shadow: 0 3px 0 rgba(0,0,0,.25); white-space: nowrap; opacity: 0; z-index: 4; }
.door .bar { position: absolute; left: 6px; right: 6px; bottom: -26px; height: 8px; border-radius: 5px; background: rgba(0,0,0,.35); overflow: hidden; display: none; z-index: 3; }
.door .bar b { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #fff1b0, #ffc23d); transition: width .6s cubic-bezier(.3, 1.4, .5, 1); }
.door.today::before { content: ''; position: absolute; inset: -10px; border-radius: 22px; background: radial-gradient(closest-side, rgba(255,214,110,.75), transparent); animation: advGlow 2s ease-in-out infinite; z-index: -1; }
.door.today .shut { box-shadow: inset 0 0 0 3px rgba(255,214,110,.9), 0 0 14px rgba(255,214,110,.6); }
.door.today .tag, .door.next .tag { opacity: 1; }
.door.today .bar { display: block; }
.door.front.today .bar { bottom: auto; top: calc(100% + 34px); }
.door.next .tag { background: #fff; color: #2c3b77; font-size: 0; }
.door.next .tag::after { content: 'Next stream'; font-size: 11px; }
@keyframes advGlow { 50% { opacity: .45; } }

/* Mystery picture: an opened window shows its own piece of the picture. */
.adv-board.pic .door.open .room { background: var(--pic) calc(var(--ox, 0px) - var(--x)) calc(var(--oy, 0px) - var(--y)) / var(--bw, 1240px) var(--bh, 980px) no-repeat; }

/* Clickable windows in the dashboard. */
.door[role=button] { cursor: pointer; }
.door[role=button]:not(.open):hover .shut.l { transform: rotateY(-22deg); }
.door[role=button]:not(.open):hover .shut.r { transform: rotateY(22deg); }
.door[role=button]:focus-visible { outline: 3px solid #ffd77a; outline-offset: 6px; }

/* --- the other calendar styles. Every door has the same parts: the room
   behind it (the day's picture), the style's cover, a number, a "Today" tag
   and a knock meter. Only the cover and how it opens change. --- */
.adv-scene .tw { animation: advTwinkle 2.2s ease-in-out infinite; }
.adv-scene .fire { animation: advFire 1.3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes advFire { 0% { transform: scale(1, .92) skewX(-2deg); } 100% { transform: scale(1.04, 1.08) skewX(3deg); } }

/* Where the title sits, out of each picture's way. */
.b-gingerbread .adv-head { right: auto; left: 64px; text-align: left; }
.b-drawers .adv-head, .b-stockings .adv-head { left: 0; right: 0; top: 34px; text-align: center; }
.b-gingerbread .adv-sub { color: #ffe3f0; }
.b-stockings .adv-title { color: #b3122b; text-shadow: 0 3px 0 rgba(255,255,255,.8), 0 8px 20px rgba(120,40,20,.25); }
.b-stockings .adv-sub { color: #7a3f22; }

/* Covers that don't hide the whole door keep the room tucked away until it opens. */
.door.star .room, .door.gift .room, .door.sock .room { opacity: 0; transform: translateY(40%) scale(.25); transition: transform .9s cubic-bezier(.2, 1.3, .4, 1) .25s, opacity .35s .25s; }
.door.open.star .room, .door.open.gift .room, .door.open.sock .room { opacity: 1; transform: none; }

/* Tree: glass baubles that crack open. */
.door.bauble, .door.star { --r: 50%; }
.door.bauble .room { box-shadow: inset 0 0 0 4px #ffe3a0, inset 0 8px 14px rgba(120,60,10,.35); }
.door.bauble .cap {
  position: absolute; left: 50%; top: -8%; width: 26%; height: 13%; margin-left: -13%; z-index: 2; border-radius: 4px 4px 3px 3px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 5px), linear-gradient(90deg, #8a5c00, #ffe9a0 35%, #d8a52a 62%, #7a5200);
  box-shadow: 0 2px 2px rgba(0,0,0,.3);
}
.door.bauble .cap::before { content: ''; position: absolute; left: 50%; bottom: 88%; width: 12px; height: 11px; margin-left: -6px; box-sizing: border-box; border: 2.5px solid #e6c15a; border-bottom: 0; border-radius: 8px 8px 0 0; }
.door.bauble .shell { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 8px 14px rgba(0,0,0,.35); transition: box-shadow .4s, transform .35s, filter .3s; }
.door.bauble .shell::before, .door.bauble .shell::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 5%, rgba(255,255,255,.35) 11%, transparent 26%),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,.25), transparent 28%),
    radial-gradient(circle at 50% 50%, transparent 50%, rgba(0,0,0,.4) 100%),
    var(--sh);
  transition: transform 1.05s cubic-bezier(.3, .7, .4, 1), opacity .7s .2s;
}
/* The two halves meet on a jagged crack. */
.door.bauble .shell::before { clip-path: polygon(0 0, 52% 0, 45% 28%, 55% 52%, 46% 78%, 52% 100%, 0 100%); transform-origin: 20% 100%; }
.door.bauble .shell::after { clip-path: polygon(52% 0, 100% 0, 100% 100%, 52% 100%, 46% 78%, 55% 52%, 45% 28%); transform-origin: 80% 100%; }
.door.bauble .shine { position: absolute; inset: 22% 3% 27%; border-radius: 50%; border-bottom: 3px dotted rgba(255,236,170,.95); pointer-events: none; transition: opacity .3s; }
.door.bauble .shine::after { content: ''; position: absolute; inset: 34% 7% -18%; border-radius: 50%; border-bottom: 2px solid rgba(255,236,170,.55); }
.door.bauble .plaque, .door.star .plaque { background: none; box-shadow: none; min-width: 0; color: var(--c2); font-size: 34px; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.door.open.bauble .shell { box-shadow: none; }
.door.open.bauble .shell::before { transform: translate(-36%, 34%) rotate(-50deg); opacity: 0; }
.door.open.bauble .shell::after { transform: translate(36%, 34%) rotate(50deg); opacity: 0; }
.door.open.bauble .shine { opacity: 0; }
.door.today.bauble .shell { filter: drop-shadow(0 0 10px rgba(255,214,110,.95)); }

/* Tree: the star on top is the last door. */
.door.star .room { box-shadow: inset 0 0 0 5px #fff1b8, inset 0 8px 14px rgba(120,60,10,.35), 0 0 40px rgba(255,214,110,.8); }
/* The star's glow pulses through opacity: animating the filter itself would repaint it every frame. */
.door.star .shell { position: absolute; inset: 0; z-index: 1; filter: drop-shadow(0 0 14px rgba(255,214,90,.8)) drop-shadow(0 4px 4px rgba(120,60,0,.35)); transition: transform 1.1s cubic-bezier(.3, .7, .3, 1), opacity .8s .2s; }
.door.star::after { content: ''; position: absolute; inset: -18%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255,214,90,.7), rgba(255,214,90,0)); animation: starPulse 3s ease-in-out infinite; transition: opacity .6s; }
.door.open.star::after { opacity: 0; animation: none; }
.door.star .shell svg { display: block; width: 100%; height: 100%; }
.door.star .plaque { top: 55%; color: #8a4b00; font-size: 42px; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.door.star .tag { top: auto; bottom: -12px; translate: -50% 100%; }
.door.open.star .shell { transform: rotate(180deg) scale(1.7); opacity: 0; }
@keyframes starPulse { 50% { opacity: .35; } }

/* Tree: presents underneath. The lid and bow fly off and the day's picture rises out. */
.door.gift .room { inset: auto; left: 50%; bottom: 60%; width: 82%; height: auto; aspect-ratio: 1; margin-left: -41%; border-radius: 50%; }
.door.open.gift { z-index: auto; }
.door.gift .box {
  position: absolute; left: 0; right: 0; top: 26%; bottom: 0; border-radius: 4px 4px 6px 6px;
  background:
    linear-gradient(90deg, transparent 43%, var(--c2) 43% 57%, transparent 57%),
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 40%, rgba(0,0,0,.22)),
    radial-gradient(circle, rgba(255,255,255,.22) 0 2.5px, transparent 3px) 0 0 / 18px 18px,
    var(--sh);
  box-shadow: inset 0 12px 8px -8px rgba(0,0,0,.35), 0 10px 16px rgba(0,0,0,.4);
  transition: box-shadow .3s, opacity .6s;
}
.door.gift .lid {
  position: absolute; left: -6%; right: -6%; top: 14%; height: 16%; z-index: 2; border-radius: 5px;
  background: linear-gradient(90deg, transparent 43.5%, var(--c2) 43.5% 56.5%, transparent 56.5%), linear-gradient(180deg, rgba(255,255,255,.24), rgba(0,0,0,.22)), var(--sh);
  box-shadow: 0 5px 6px rgba(0,0,0,.3);
  transition: transform 1s cubic-bezier(.25, .8, .35, 1), opacity .5s .5s;
}
.door.gift .bow {
  position: absolute; left: 50%; top: 14%; width: 46%; height: 22%; margin-left: -23%; translate: 0 -80%; z-index: 3;
  background: radial-gradient(circle at 50% 90%, var(--c2) 0 12%, transparent 13%);
  transition: transform 1s cubic-bezier(.25, .8, .35, 1), opacity .5s .5s;
}
.door.gift .bow::before, .door.gift .bow::after {
  content: ''; position: absolute; bottom: 4%; width: 54%; height: 100%; box-sizing: border-box; z-index: -1;
  border: 7px solid var(--c2); border-radius: 60% 60% 40% 40% / 70% 70% 30% 30%;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 2px 2px rgba(0,0,0,.25);
}
.door.gift .bow::before { left: -4%; rotate: -30deg; transform-origin: 100% 100%; }
.door.gift .bow::after { right: -4%; rotate: 30deg; transform-origin: 0 100%; }
.door.gift .plaque { top: 64%; min-width: 46px; height: 32px; border-radius: 6px; font-size: 20px; rotate: -6deg; background: #fffaf0; color: #7a2b20; box-shadow: 0 3px 4px rgba(0,0,0,.3), inset 0 0 0 2px #e9d3a8; }
.door.gift .tag { top: -34px; }
.door.open.gift .lid, .door.open.gift .bow { transform: translate(-40%, -160%) rotate(-34deg); opacity: 0; }
.door.today.gift .box, .door.today.gift .lid { box-shadow: 0 0 0 3px rgba(255,214,110,.95), 0 0 20px rgba(255,214,110,.7); }

/* Gingerbread: candy shutters in white icing, a peppermint round window and a candy-cane front door. */
.door.s-gingerbread { --r: 14px; }
.door.s-gingerbread.round { --r: 50%; }
.door.s-gingerbread.front { --r: 80px 80px 6px 6px; }
.door.s-gingerbread .room { box-shadow: inset 0 0 0 5px #fff, inset 0 8px 14px rgba(120,60,10,.35); }
.door.s-gingerbread .shut {
  background: linear-gradient(135deg, rgba(255,255,255,.4), transparent 45%), linear-gradient(90deg, rgba(255,255,255,.18), rgba(0,0,0,.06)), var(--sh);
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px rgba(0,0,0,.07);
}
.door.s-gingerbread .shut::after { content: ''; position: absolute; inset: 11px 9px; border: 3px dotted rgba(255,255,255,.95); border-radius: 8px; }
.door.s-gingerbread.win::after {
  content: ''; position: absolute; left: -9px; right: -9px; top: -12px; height: 22px; z-index: 2; pointer-events: none; border-radius: 10px 10px 0 0;
  background: radial-gradient(circle at 50% 0, #fff 0 7px, transparent 7.5px) 3px 8px / 15px 15px repeat-x, linear-gradient(#fff, #fff) 0 0 / 100% 11px no-repeat;
  filter: drop-shadow(0 2px 0 rgba(120,60,20,.18));
}
.door.s-gingerbread .sill { height: 13px; bottom: -10px; background: repeating-linear-gradient(45deg, #e8304a 0 7px, #fff 7px 14px); box-shadow: 0 3px 0 rgba(0,0,0,.18); }
.door.s-gingerbread .plaque { background: #fff; color: #c2416c; box-shadow: 0 3px 0 rgba(0,0,0,.18), inset 0 0 0 3px #ffd1e0; }
.door.s-gingerbread.round .shut.l { background: radial-gradient(circle at 100% 50%, transparent 0 18%, rgba(0,0,0,.08) 100%), repeating-conic-gradient(from 0deg at 100% 50%, #e8304a 0 18deg, #fff 18deg 36deg); }
.door.s-gingerbread.round .shut.r { background: radial-gradient(circle at 0 50%, transparent 0 18%, rgba(0,0,0,.08) 100%), repeating-conic-gradient(from 0deg at 0 50%, #e8304a 0 18deg, #fff 18deg 36deg); }
.door.s-gingerbread.round .shut, .door.s-gingerbread.front .shut { box-shadow: inset 0 0 0 4px #fff; }
.door.s-gingerbread.round .shut::after, .door.s-gingerbread.front .shut::after { display: none; }
.door.s-gingerbread.front .shut.l { background: linear-gradient(90deg, rgba(255,255,255,.2), rgba(0,0,0,.14)), repeating-linear-gradient(45deg, #e8304a 0 16px, #fff 16px 32px); }
.door.s-gingerbread.front .shut.r { background: linear-gradient(90deg, rgba(0,0,0,.14), rgba(255,255,255,.2)), repeating-linear-gradient(-45deg, #e8304a 0 16px, #fff 16px 32px); }
.door.s-gingerbread.front::after { content: ''; position: absolute; inset: -13px -13px 0; z-index: 2; pointer-events: none; border: 9px solid #fff; border-bottom: 0; border-radius: 92px 92px 0 0; filter: drop-shadow(0 2px 0 rgba(120,60,20,.2)); }

/* Drawers: a wooden chest; each drawer front drops open. */
.door.drawer { --r: 6px; }
.door.drawer .room { background: radial-gradient(circle at 50% 42%, #fff6d4, #ffd27a 45%, #d98a3a 80%, #8a4a1c); box-shadow: inset 0 0 0 4px #2a1508, inset 0 12px 18px rgba(0,0,0,.5); }
.door.drawer .panel {
  position: absolute; inset: 0; border-radius: 6px; transform-origin: 50% 100%; backface-visibility: visible;
  background:
    repeating-linear-gradient(92deg, rgba(255,255,255,.04) 0 2px, rgba(0,0,0,.07) 2px 4px, transparent 4px 13px),
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 30%, rgba(0,0,0,.24)),
    var(--sh);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(0,0,0,.35), 0 3px 0 #22100a, 0 6px 10px rgba(0,0,0,.4);
  transition: transform 1.1s cubic-bezier(.3, .9, .3, 1.04), box-shadow .3s;
}
.door.drawer .panel::before { content: ''; position: absolute; inset: 9px; border-radius: 4px; box-shadow: inset 1px 1px 0 rgba(0,0,0,.3), 1px 1px 0 rgba(255,235,190,.22); }
.door.drawer .knob { position: absolute; left: 50%; bottom: 12%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c0, #d9a640 45%, #6b4410); box-shadow: 0 3px 3px rgba(0,0,0,.45); }
.door.drawer .plaque { top: 42%; min-width: 54px; height: 36px; border-radius: 5px; font-size: 24px; background: linear-gradient(180deg, #fbf3e0, #e9d7b0); color: #6b2a14; box-shadow: 0 0 0 3px #c9963a, 0 0 0 4.5px #6b4410, 0 4px 5px rgba(0,0,0,.4); }
.door.drawer .bar { bottom: 6px; left: 12px; right: 12px; }
.door.drawer.big .panel { background:
    linear-gradient(90deg, transparent 45%, rgba(0,0,0,.18) 45% 45.6%, var(--c2) 45.6% 54.4%, rgba(0,0,0,.18) 54.4% 55%, transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 30%, rgba(0,0,0,.24)), var(--sh); }
.door.drawer.big .panel::before { box-shadow: inset 0 0 0 2px rgba(230,193,90,.85); }
.door.open.drawer .panel { transform: rotateX(-104deg); box-shadow: 0 3px 0 #22100a; }
.door.today.drawer .panel { box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 0 0 3px rgba(255,214,110,.95), 0 0 22px rgba(255,214,110,.75); }

/* Stockings: hung on garlands; the day's picture pops out of the top. */
.door.sock { --r: 50%; }
.door.sock .room { inset: auto; left: 50%; bottom: 60%; width: 116%; height: auto; aspect-ratio: 1; margin-left: -58%; border-radius: 50%; }
.door.sock .body { position: absolute; inset: 0; color: var(--sh); filter: drop-shadow(0 6px 5px rgba(0,0,0,.28)); transform-origin: 50% 0; transition: filter .3s, rotate .4s; }
.door.sock .body svg { display: block; width: 100%; height: 100%; overflow: visible; }
.door.sock .cuff {
  position: absolute; left: 15%; right: 15%; top: 7%; height: 17%; z-index: 2; border-radius: 10px;
  background: radial-gradient(circle, rgba(205,216,230,.9) 0 1.4px, transparent 2px) 0 0 / 7px 7px, linear-gradient(180deg, #ffffff, #e6edf5);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.07), 0 3px 3px rgba(0,0,0,.18);
}
.door.sock .loop { position: absolute; left: 21%; top: -9%; width: 13%; height: 18%; box-sizing: border-box; border: 3px solid #c9a46a; border-bottom: 0; border-radius: 50% 50% 0 0 / 80% 80% 0 0; }
.door.sock .plaque { top: 15.5%; z-index: 3; background: none; box-shadow: none; min-width: 0; height: auto; color: #b3122b; font-size: 22px; }
.door.sock.big .plaque { font-size: 32px; }
.door.sock .tag { top: -22px; }
.door.open.sock .body { animation: sockSwing 1.2s ease-out; }
.door.today.sock .body { filter: drop-shadow(0 0 9px rgba(255,214,110,.95)) drop-shadow(0 6px 5px rgba(0,0,0,.28)); }
@keyframes sockSwing { 20% { rotate: 7deg; } 45% { rotate: -5deg; } 70% { rotate: 2deg; } }

/* An opened present or stocking keeps its number, so chat sees which day it was. */
.door.open.gift .plaque, .door.open.sock .plaque { opacity: 1; transform: none; }

/* Mystery picture: these doors show their piece in place instead. */
.adv-board.pic .door.gift .room, .adv-board.pic .door.sock .room { inset: 0; width: auto; height: auto; margin: 0; aspect-ratio: auto; border-radius: 12px; transform: none; }
.adv-board.pic .door.open.gift > :is(.box, .lid, .bow), .adv-board.pic .door.open.sock > :is(.body, .cuff, .loop) { opacity: 0; transition: opacity .8s .3s; }
.adv-board.pic .door.open .plaque { opacity: 0; }

/* Testing in the dashboard: a hint of opening on hover. */
.door.bauble[role=button]:not(.open):hover .shell, .door.star[role=button]:not(.open):hover .shell { transform: scale(1.06); }
.door.gift[role=button]:not(.open):hover .lid, .door.gift[role=button]:not(.open):hover .bow { transform: translateY(-8px) rotate(-3deg); }
.door.drawer[role=button]:not(.open):hover .panel { transform: rotateX(-16deg); }
.door.sock[role=button]:not(.open):hover .body { rotate: 5deg; }

/* --- overlay stage --- */
.xm-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.xm-snow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.xm-dim { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(10,16,48,.45), rgba(4,6,22,.86)); opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.xm-dim.on { opacity: 1; }
.xm-scene { position: absolute; inset: 0; }
.xm-scene.locked { pointer-events: none; }
.xm-zoom { position: absolute; left: 0; top: 0; transition: transform 1s cubic-bezier(.65, 0, .35, 1), opacity .7s ease; transform-origin: 0 0; }
.xm-pop { animation: xmPopIn .8s cubic-bezier(.2, .9, .3, 1.12) both; }
.xm-out { animation: xmPopOut .6s cubic-bezier(.6, 0, .8, .4) both; }
@keyframes xmPopIn { from { opacity: 0; transform: scale(.85) translateY(50px); } to { opacity: 1; transform: none; } }
@keyframes xmPopOut { to { opacity: 0; transform: scale(.9) translateY(40px); } }
.door.shake { animation: doorShake .5s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes doorShake { 10%, 90% { transform: translateX(-2px) rotate(-1deg); } 20%, 80% { transform: translateX(4px) rotate(1.5deg); } 30%, 50%, 70% { transform: translateX(-6px) rotate(-2deg); } 40%, 60% { transform: translateX(6px) rotate(2deg); } }

/* Soft light from an opening door. */
.xm-rays { position: absolute; width: 760px; height: 760px; translate: -50% -50%; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(circle, rgba(255,240,200,.55) 0, rgba(255,220,150,.18) 30%, transparent 62%), repeating-conic-gradient(from 0deg, rgba(255,240,200,.22) 0deg 5deg, transparent 5deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0,0,0,.5) 32%, transparent 66%); mask: radial-gradient(circle, #000 0, rgba(0,0,0,.5) 32%, transparent 66%);
  animation: xmSpin 20s linear infinite; }
.xm-rays.on { opacity: 1; }
@keyframes xmSpin { to { rotate: 360deg; } }

/* --- reveal --- */
.xm-reveal { position: absolute; inset: 0; display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; gap: 72px; pointer-events: none; font-family: Fredoka, sans-serif; color: #fff; }
.xm-card { position: relative; width: 420px; aspect-ratio: 7 / 10; perspective: 1400px; }
.xm-card .halo { position: absolute; inset: -40%; border-radius: 50%; background: radial-gradient(circle, var(--rc) 0%, transparent 60%); opacity: .55; filter: blur(10px); animation: xmPulse 2.4s ease-in-out infinite; }
.xm-card .flip { position: absolute; inset: 0; transform-style: preserve-3d; animation: xmFlip 1.3s cubic-bezier(.3, .9, .3, 1.08) both; }
.xm-card .front, .xm-card .backside { position: absolute; inset: 0; border-radius: 24px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.xm-card .front { box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 7px var(--rc), 0 30px 70px rgba(0,0,0,.55); background: radial-gradient(circle at 50% 38%, #fff8e6, #ffe2b0 45%, #f3a777); display: grid; place-items: center; }
.xm-card .front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xm-card .front .art { width: 76%; }
.xm-card .backside { transform: rotateY(180deg); background: repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 2px, transparent 2px 12px), #2f6b55; box-shadow: 0 0 0 8px #fbf6ec, 0 30px 70px rgba(0,0,0,.55); display: grid; place-items: center; }
.xm-card .backside svg { width: 56%; }
.xm-card .shine { position: absolute; inset: 0; border-radius: 24px; background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.5) 46%, transparent 60%); background-size: 260% 100%; animation: xmShine 2.8s ease-in-out 1.3s infinite; mix-blend-mode: overlay; pointer-events: none; }
@keyframes xmFlip { from { transform: rotateY(-180deg) scale(.4); } 62% { transform: rotateY(10deg) scale(1.03); } to { transform: none; } }
@keyframes xmPulse { 50% { scale: 1.08; opacity: .4; } }
@keyframes xmShine { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.xm-info { width: 620px; display: grid; gap: 18px; justify-items: start; animation: xmSlide .9s cubic-bezier(.2, .9, .3, 1.08) .45s both; }
@keyframes xmSlide { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: none; } }
.xm-day { display: inline-block; padding: 7px 18px; border-radius: 999px; font: 700 18px Fredoka, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #5a2b10; background: #ffd77a; box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.xm-name { font: 700 70px/1 Fredoka, sans-serif; letter-spacing: -.01em; text-shadow: 0 6px 30px rgba(0,0,0,.35); }
.xm-pill { display: inline-flex; align-items: center; padding: 7px 18px; border-radius: 999px; font: 700 20px Fredoka, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #10142c; background: var(--rc); box-shadow: 0 0 28px var(--rc); }
.xm-got { font: 500 26px Fredoka, sans-serif; color: rgba(230,236,255,.85); }
.xm-names { display: flex; flex-wrap: wrap; gap: 8px; max-height: 176px; overflow: hidden; }
.xm-names span { padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); font: 500 19px Fredoka, sans-serif; animation: xmPopIn .5s both; }
.xm-prize { display: flex; align-items: center; gap: 14px; padding: 12px 22px 12px 14px; border-radius: 20px; background: linear-gradient(135deg, rgba(255,231,160,.95), rgba(255,200,90,.95)); color: #3b2200; font: 600 26px Fredoka, sans-serif; box-shadow: 0 16px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.8); animation: xmPopIn .7s cubic-bezier(.2, .9, .3, 1.3) 1.4s both; }
.xm-prize b { font-weight: 700; }
.xm-prize .gift { width: 48px; display: grid; }
.xm-test { position: absolute; top: 36px; left: 50%; translate: -50% 0; padding: 6px 16px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); color: #fff; font: 600 16px Fredoka, sans-serif; letter-spacing: .2em; }

/* The mystery picture in a reveal: the picture veiled, opened windows clear, the new one glowing. */
.xm-puzzle { position: relative; width: 760px; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 8px #fbf6ec, 0 0 0 11px #d8c7a3, 0 30px 70px rgba(0,0,0,.55); animation: xmPopIn .8s cubic-bezier(.2, .9, .3, 1.1) both; }
.xm-puzzle .veil { position: absolute; inset: 0; background: var(--pic) var(--ox, 0px) var(--oy, 0px) / var(--bw, 100%) var(--bh, 100%) no-repeat; filter: brightness(.28) blur(10px) saturate(.6); transform: scale(1.05); }
.xm-puzzle i { position: absolute; border-radius: 10px; background: var(--pic) calc(var(--ox, 0px) - var(--x)) calc(var(--oy, 0px) - var(--y)) / var(--bw, 100%) var(--bh, 100%) no-repeat; box-shadow: 0 0 0 3px #fbf6ec; }
.xm-puzzle i.bauble, .xm-puzzle i.star, .xm-puzzle i.round { border-radius: 50%; }
.xm-puzzle i.new { animation: xmPiece 1.4s cubic-bezier(.2, .9, .3, 1.2) 1s both; z-index: 1; }
@keyframes xmPiece { 0% { opacity: 0; transform: scale(.3); box-shadow: 0 0 0 3px #fbf6ec, 0 0 0 0 rgba(255,214,110,0); } 60% { opacity: 1; transform: scale(1.25); box-shadow: 0 0 0 3px #fbf6ec, 0 0 40px 14px rgba(255,214,110,.9); } 100% { transform: none; box-shadow: 0 0 0 3px #fbf6ec, 0 0 20px 6px rgba(255,214,110,.6); } }
.xm-reveal.pic .xm-info { width: 520px; }

/* --- idle widget: today's window in a corner --- */
.xm-widget {
  position: absolute; display: flex; align-items: center; gap: 20px; padding: 18px 24px 18px 18px; border-radius: 26px; font-family: Fredoka, sans-serif; color: #fff;
  background: radial-gradient(120% 120% at 0% 0%, #2b3b7c, #121b44 70%); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 6px #fbf6ec, 0 0 0 8px #d8c7a3, 0 24px 50px rgba(0,0,0,.45);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .9, .3, 1.1);
}
.xm-widget.hide { opacity: 0; transform: translateY(30px) scale(.95); }
.xm-widget .door { position: relative; left: 0 !important; top: 0 !important; width: 90px !important; height: 100px !important; flex: none; margin-bottom: 8px; }
.xm-widget .door.s-street.round, .xm-widget .door.front { --r: 46px 46px 6px 6px; }
.xm-widget .door.bauble, .xm-widget .door.star, .xm-widget .door.s-gingerbread.round { width: 96px !important; height: 96px !important; }
.xm-widget .door.gift { width: 104px !important; height: 92px !important; margin-top: 26px; }
.xm-widget .door.drawer { width: 124px !important; height: 92px !important; }
.xm-widget .door.sock { width: 72px !important; height: 108px !important; margin-top: 12px; }
.xm-widget .door.star .plaque { font-size: 30px; }
.xm-widget .door.sock .plaque { font-size: 17px; }
.xm-widget .door .tag, .xm-widget .door .bar, .xm-widget .door .wreath { display: none; }
.xm-widget .door.today::before { inset: -8px; }
.xm-widget .wbody { display: grid; gap: 6px; min-width: 210px; max-width: 290px; }
.xm-widget .wlabel { font: 600 13px Fredoka, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #ffd77a; }
.xm-widget .wtitle { font: 700 30px/1 Fredoka, sans-serif; }
.xm-widget .wbar { height: 10px; border-radius: 6px; background: rgba(255,255,255,.14); overflow: hidden; margin-top: 4px; }
.xm-widget .wbar b { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #fff1b8, #ffd77a); box-shadow: 0 0 12px rgba(255,210,110,.7); transition: width .7s cubic-bezier(.3, 1.4, .5, 1); }
.xm-widget .wtxt { font: 500 16px Fredoka, sans-serif; color: rgba(230,236,255,.8); }
.xm-bubble { position: absolute; left: 63px; top: -14px; translate: -50% -100%; padding: 9px 16px; border-radius: 16px; background: #fff; color: #2c3b77; font: 700 20px Fredoka, sans-serif; white-space: nowrap; box-shadow: 0 10px 24px rgba(0,0,0,.35); animation: xmBubble 1.7s cubic-bezier(.2, .9, .3, 1.2) both; z-index: 5; }
.xm-bubble small { display: block; font: 500 14px Fredoka, sans-serif; color: #6b7394; }
.xm-bubble::after { content: ''; position: absolute; left: 50%; bottom: -8px; translate: -50% 0; border: 9px solid transparent; border-bottom: 0; border-top-color: #fff; }
@keyframes xmBubble { 0% { opacity: 0; transform: translateY(16px) scale(.6); } 15% { opacity: 1; transform: translateY(-4px) scale(1.05); } 25% { transform: none; } 80% { opacity: 1; transform: translateY(-4px); } 100% { opacity: 0; transform: translateY(-24px); } }

/* --- winter frame: small pieces at the edges, the stream stays clear --- */
.wf { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.wf-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.wf-frost { position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(circle at 0 0, rgba(225,242,255,.38), transparent 16%), radial-gradient(circle at 100% 0, rgba(225,242,255,.38), transparent 16%),
    radial-gradient(circle at 0 100%, rgba(225,242,255,.3), transparent 14%), radial-gradient(circle at 100% 100%, rgba(225,242,255,.3), transparent 14%); }
.wf.frost .wf-frost { opacity: 1; }
.wf-top, .wf-lights, .wf-drifts, .wf-tree, .wf-canes { position: absolute; }
.wf.ready :is(.wf-top, .wf-lights, .wf-drifts, .wf-tree, .wf-canes) { transition: opacity .8s, transform .8s cubic-bezier(.2, .9, .3, 1.1); }
.wf-top { left: 0; top: 0; width: 100%; height: 44px; }
.wf-lights { left: 0; top: 0; width: 100%; }
.wf-drifts { left: 0; bottom: 0; width: 100%; height: 70px; }
/* Tree and canes scale with their size setting (--ts, --cs), smaller on vertical canvases. */
.wf { --pk: 1; }
.wf.portrait { --pk: .8; }
.wf-tree { bottom: 0; width: calc(210px * var(--ts, 1) * var(--pk)); height: calc(308px * var(--ts, 1) * var(--pk)); }
.wf-tree.left { left: 6px; }
.wf-tree.right { right: 6px; }
.wf-canes { right: 18px; bottom: 2px; width: calc(132px * var(--cs, 1) * var(--pk)); height: calc(198px * var(--cs, 1) * var(--pk)); }
.wf.tree-right .wf-canes { right: auto; left: 18px; }
.wf.tree-both .wf-canes { right: calc(210px * var(--ts, 1) * var(--pk) + 12px); }
.wf-tree canvas, .wf-canes canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wf-fl { position: absolute; inset: 0; }
.wf-fl i { position: absolute; width: 5.2%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #fff 0 14%, var(--c) 28%, transparent 68%); mix-blend-mode: screen; animation: wfTwinkle var(--d, 2s) ease-in-out var(--del, 0s) infinite; }
.wf-fl b { position: absolute; width: 42%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(255,244,200,.75), rgba(255,210,100,.22) 35%, transparent 66%); mix-blend-mode: screen; animation: wfPulse 3.2s ease-in-out infinite; }
.wf:not(.icicles) .wf-top, .wf:not(.lights) .wf-lights { opacity: 0; transform: translateY(-20px); }
.wf:not(.drifts) .wf-drifts, .wf:not(.canes) .wf-canes { opacity: 0; transform: translateY(20px); }
.wf-tree.off { opacity: 0; transform: translateY(40px); }
.wf svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Scenes: corner groups drawn at medium size and scaled by the scene size (--ss). */
.wf-classic, .wf-scene { position: absolute; inset: 0; }
.wf:not(.scene-classic) .wf-classic { display: none; }
.wf-cl { position: absolute; bottom: 0; transform: scale(calc(var(--ss, 1) * var(--pk, 1))); }
.wf-cl.l { left: 0; transform-origin: 0 100%; }
.wf-cl.r { right: 0; transform-origin: 100% 100%; }
.wf-cl > svg { position: absolute; inset: 0; }
.wf-cl .wf-over { z-index: 1; }
.wf-pine { position: absolute; }
.wf-art { position: absolute; z-index: 2; }
.wf-art svg { width: 100%; height: auto; }
.wf-stars { position: absolute; left: 0; top: 0; width: 100%; height: 260px; display: none; }
.wf.scene-night .wf-stars { display: block; }
.wf-moon { position: absolute; top: 70px; right: 40px; width: calc(220px * var(--ss, 1) * var(--pk, 1)); aspect-ratio: 1; }
.wf-sleigh { position: absolute; left: 0; top: 0; width: calc(300px * var(--ss, 1) * var(--pk, 1)); translate: -460px 150px; animation: wfFly 36s linear 3s infinite; }
@keyframes wfFly { 0% { translate: -460px 170px; } 26% { translate: calc(var(--sw, 1920px) + 80px) 60px; } 100% { translate: calc(var(--sw, 1920px) + 80px) 60px; } }
.wf-sleigh .bob { animation: wfBob 1.4s ease-in-out infinite; }
@keyframes wfBob { 50% { translate: 0 -8px; } }
.wf .smoke { opacity: 0; animation: wfSmoke 6s ease-in var(--del, 0s) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes wfSmoke { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: .8; } 100% { opacity: 0; transform: translate(18px, -70px) scale(2.1); } }
.wf .win { animation: wfWin 5s ease-in-out var(--del, 0s) infinite; }
.wf .lamp { animation: wfWin 3s ease-in-out infinite; }
@keyframes wfWin { 50% { opacity: .7; } }
.wf .tw { animation: wfTwinkle var(--d, 2.4s) ease-in-out var(--del, 0s) infinite; }
@keyframes wfTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.wf .glint { animation: wfGlint var(--d, 3s) ease-in-out var(--del, 0s) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes wfGlint { 0%, 70%, 100% { opacity: 0; scale: .3; } 82% { opacity: 1; scale: 1; } }
.wf .pulse { animation: wfPulse 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes wfPulse { 50% { opacity: .55; scale: .9; } }
@media (prefers-reduced-motion: reduce) { .wf-sleigh, .wf .smoke, .wf .win, .wf .lamp, .wf .tw, .wf .glint, .wf .pulse, .wf-fl i, .wf-fl b, .door.today::before, .adv-scene .st, .adv-scene .bulb, .adv-scene .lamp, .adv-scene .smoke, .adv-scene .tw, .adv-scene .fire, .door.star::after { animation: none; } }

/* --- snowball fight: forts in the bottom corners, snowballs across the bottom --- */
.sf-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; pointer-events: none; font-family: Fredoka, system-ui, sans-serif; color: #fff; }
.sf-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sf-fort { position: absolute; bottom: 4px; width: 380px; height: 250px; transition: transform .9s cubic-bezier(.2, .9, .3, 1.1); }
.sf-fort.l { left: 22px; transform: translateX(-140%); }
.sf-fort.r { right: 22px; transform: translateX(140%); }
.sf-stage.on .sf-fort { transform: none; }
/* No filter here: the heads and flags animate, and a filter over them would be redrawn every frame. */
.sf-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sf-fort.r .sf-art { transform: scaleX(-1); }
/* Shakes use translate, so they don't undo the right fort's mirroring. */
.sf-fort.hit .sf-art { animation: sfShake .32s; }
.sf-fort.bighit .sf-art { animation: sfShakeBig .55s; }
.sf-blk { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .9s cubic-bezier(.5, 0, .75, .4), opacity .9s ease-in; }
.sf-blk.gone { transform: translate(var(--dx), 130px) rotate(var(--dr)); opacity: 0; }
.sf-head { animation: sfBob 2.4s ease-in-out var(--d) infinite; }
.sf-head.pop { animation: sfPop .5s cubic-bezier(.2, .9, .3, 1.3); }
.sf-flag { transform-box: fill-box; transform-origin: 0 50%; animation: sfFlag 1.9s ease-in-out infinite; }
.sf-fort.win .sf-flag { animation-duration: .55s; }
.sf-fort.win .sf-head { animation: sfJump .6s ease-in-out var(--d) infinite; }
.sf-fort.lose .sf-head { animation: none; translate: 0 40px; transition: translate .8s ease-in; }
/* Hidden between fights: nothing keeps animating. */
.sf-stage:not(.on) .sf-head, .sf-stage:not(.on) .sf-flag { animation: none; }
@keyframes sfBob { 50% { translate: 0 -5px; } }
@keyframes sfPop { 40% { translate: 0 -32px; } }
@keyframes sfJump { 50% { translate: 0 -22px; } }
@keyframes sfFlag { 50% { transform: skewY(-5deg) scaleX(.93); } }
@keyframes sfShake { 20% { translate: -7px 2px; } 40% { translate: 6px -2px; } 60% { translate: -4px 1px; } 80% { translate: 3px 0; } }
@keyframes sfShakeBig { 15% { translate: -16px 4px; } 30% { translate: 14px -5px; } 45% { translate: -10px 3px; } 60% { translate: 8px -2px; } 80% { translate: -4px 1px; } }

.sf-hp { position: absolute; left: 34px; right: 18px; bottom: 262px; padding: 10px 14px 9px; border-radius: 18px; background: rgba(10, 18, 42, .62); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14), 0 10px 24px rgba(0, 10, 30, .3); }
.sf-fort.r .sf-hp { left: 18px; right: 34px; }
.sf-hp-top { display: flex; justify-content: space-between; align-items: baseline; font: 700 23px/1 Fredoka, sans-serif; }
.sf-hp-top b { color: var(--tl); text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.sf-pct { font-size: 18px; font-variant-numeric: tabular-nums; color: #fff; }
.sf-bar { height: 15px; margin-top: 7px; border-radius: 10px; background: rgba(0, 0, 0, .4); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2); overflow: hidden; }
.sf-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(180deg, var(--tl), var(--tc)); transition: width .5s cubic-bezier(.3, 1.3, .5, 1); }
.sf-fort.low .sf-bar i { animation: sfLow .7s ease-in-out infinite; }
.sf-meta { margin-top: 6px; font: 500 15px Fredoka, sans-serif; color: rgba(225, 233, 255, .85); }
.sf-meta span { font-weight: 700; color: #fff; }
@keyframes sfLow { 50% { opacity: .45; } }
.sf-toasts { position: absolute; left: 34px; bottom: 372px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sf-fort.r .sf-toasts { left: auto; right: 34px; align-items: flex-end; }
.sf-toast { padding: 6px 14px; border-radius: 999px; background: var(--tc); color: #fff; font: 500 17px Fredoka, sans-serif; box-shadow: 0 6px 14px rgba(0, 10, 30, .3); white-space: nowrap; animation: sfToast 3.6s forwards; }
@keyframes sfToast { 0% { opacity: 0; transform: translateY(14px) scale(.8); } 10% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

.sf-board { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; min-width: 390px; padding: 14px 28px 15px; border-radius: 26px; text-align: center;
  background: linear-gradient(180deg, rgba(20, 34, 72, .9), rgba(10, 18, 44, .9)); border: 2px solid rgba(255, 255, 255, .16);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .07), 0 18px 40px rgba(0, 10, 30, .45); opacity: 0; transform: translateY(50px); transition: opacity .5s, transform .6s cubic-bezier(.2, .9, .3, 1.1); }
.sf-stage.on .sf-board:not(:empty) { opacity: 1; transform: none; }
.sf-kicker { font: 700 26px/1.1 Fredoka, sans-serif; }
.sf-kicker b, .sf-how b { color: #ffd77a; }
.sf-how { margin-top: 6px; font: 500 19px Fredoka, sans-serif; color: #dfe8ff; }
.sf-how.small { margin-top: 4px; font-size: 15px; color: rgba(223, 232, 255, .72); }
.sf-clock { margin-top: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sf-clock small { font: 600 12px Fredoka, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #9fb6e8; }
.sf-clock span { font: 700 40px/1 Fredoka, sans-serif; font-variant-numeric: tabular-nums; }
.sf-clock.big span { font-size: 58px; }
.sf-board.hurry .sf-time { color: #ff8f7f; animation: sfLow .5s ease-in-out infinite; }
.sf-season { margin-top: 8px; display: flex; gap: 8px; align-items: center; justify-content: center; font: 600 15px Fredoka, sans-serif; color: #c7d4f5; }
.sf-season i { width: 10px; height: 10px; border-radius: 50%; }
.sf-test { position: absolute; top: -12px; right: 18px; padding: 3px 10px; border-radius: 999px; background: #ffd34d; color: #5a3b00; font: 700 12px Fredoka, sans-serif; letter-spacing: .14em; }

.sf-banner { position: absolute; left: 50%; bottom: 220px; translate: -50% 0; text-align: center; white-space: nowrap; opacity: 0; transform: scale(.6); transition: opacity .4s, transform .5s cubic-bezier(.2, .9, .3, 1.3); }
.sf-banner.show { opacity: 1; transform: none; }
.sf-banner.result { bottom: 120px; }
.sf-go { font: 700 150px/1 Fredoka, sans-serif; letter-spacing: .04em; color: #fff; -webkit-text-stroke: 6px #1d3d7a; paint-order: stroke fill; text-shadow: 0 10px 0 #1d3d7a, 0 0 50px rgba(160, 210, 255, .85); }
.sf-banner.go.show .sf-go { animation: sfGo 1.6s forwards; }
@keyframes sfGo { 0% { transform: scale(.4) rotate(-6deg); } 25% { transform: scale(1.12) rotate(2deg); } 40% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
.sf-win { font: 700 86px/1 Fredoka, sans-serif; color: #fff; -webkit-text-stroke: 4px var(--tc); paint-order: stroke fill; text-shadow: 0 7px 0 var(--tc), 0 0 46px var(--tl); }
.sf-win.draw, .sf-win.off { --tc: #3d5fa8; --tl: #cfe0ff; }
.sf-trophy { display: inline-block; margin-right: 16px; -webkit-text-stroke: 0; animation: sfTrophy 1.2s ease-in-out infinite; }
@keyframes sfTrophy { 50% { transform: rotate(-10deg) scale(1.12); } }
.sf-top { margin-top: 18px; display: flex; gap: 10px; justify-content: center; }
.sf-chip { padding: 8px 18px; border-radius: 999px; background: rgba(10, 18, 42, .8); border: 2px solid var(--tc); font: 600 21px Fredoka, sans-serif; box-shadow: 0 8px 18px rgba(0, 10, 30, .3); }
.sf-chip b { margin-left: 4px; color: #ffd77a; }
.sf-line { margin-top: 12px; font: 600 23px Fredoka, sans-serif; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.sf-banner .sf-test { position: static; display: inline-block; margin-bottom: 10px; }

.sf-splats { position: absolute; inset: 0; }
.sf-splat { position: absolute; width: 300px; translate: -50% -50%; rotate: var(--rot); animation: sfSplat 3.4s forwards; filter: drop-shadow(0 6px 10px rgba(0, 20, 50, .28)); }
.sf-splat svg { display: block; width: 100%; }
@keyframes sfSplat { 0% { transform: scale(.3); opacity: 0; } 6% { transform: scale(1.08); opacity: .97; } 12% { transform: scale(1); } 55% { transform: translateY(0); opacity: .95; } 100% { transform: translateY(80px) scaleY(1.15); opacity: 0; } }