.com-adventcalendar { container-type: inline-size; width: 100%; }
.com-adventcalendar__intro { margin-bottom: 1.25rem; }
.com-adventcalendar__calendar { position: relative; }
.com-adventcalendar__stage {
  position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(5px, 1.2cqi, 14px); box-sizing: border-box; width: 100%;
  aspect-ratio: var(--advent-ratio, 4 / 3); padding: clamp(8px, 2cqi, 24px);
  overflow: hidden; border-radius: 10px;
  background: center / cover no-repeat var(--advent-background, linear-gradient(145deg, #173b32, #751d25));
  box-shadow: 0 12px 35px rgb(0 0 0 / 22%); isolation: isolate;
}
.com-adventcalendar__standalone-toggle {
  position: absolute; z-index: 30; top: .65rem; right: .65rem;
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0;
  border: 1px solid rgb(255 255 255 / 72%); border-radius: 50%; cursor: pointer;
  color: #fff; background: rgb(20 15 10 / 58%); box-shadow: 0 2px 8px rgb(0 0 0 / 38%);
  font-size: 1.25rem; line-height: 1;
}
.com-adventcalendar__standalone-toggle:hover,
.com-adventcalendar__standalone-toggle:focus-visible { background: rgb(75 48 18 / 82%); outline: 2px solid #ffe3a0; outline-offset: 2px; }
.com-adventcalendar-standalone-open { overflow: hidden; }
.com-adventcalendar__calendar.is-standalone {
  position: fixed; inset: 0; z-index: 99990; display: grid; place-items: center;
  box-sizing: border-box; width: 100vw; height: 100vh; padding: 1rem;
  background: rgb(5 7 8 / 96%);
}
.com-adventcalendar__calendar.is-standalone .com-adventcalendar__stage {
  width: var(--standalone-stage-width, calc(100vw - 2rem)); max-width: none;
  padding: clamp(8px, 1.5cqi, 22px); box-shadow: 0 18px 65px rgb(0 0 0 / 72%);
}
.com-adventcalendar__calendar.is-standalone .com-adventcalendar__stage::before {
  position: absolute; inset: 0; z-index: 0; content: ""; border-radius: inherit;
  background: rgb(0 0 0 / 20%); pointer-events: none;
}
.com-adventcalendar__calendar.is-standalone .com-adventcalendar__door { z-index: 1; }
.com-adventcalendar__calendar.is-standalone .com-adventcalendar__door.is-open { z-index: 6; }
.com-adventcalendar__calendar.is-standalone .com-adventcalendar__front::before { filter: brightness(.86); }
.com-adventcalendar__calendar.is-standalone .com-adventcalendar__standalone-toggle {
  top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right));
  background: rgb(75 48 18 / 88%);
}
.com-adventcalendar__calendar--no-background .com-adventcalendar__stage { background: linear-gradient(145deg, #153f35, #8c2631); }
.com-adventcalendar__door {
  position: relative; min-width: 0; min-height: 0; overflow: hidden; padding: 0;
  cursor: pointer; perspective: clamp(240px, 42cqi, 720px); perspective-origin: center center;
  transform-style: preserve-3d; border: 2px solid rgb(0 0 0 / 52%);
  border-radius: 2px; color: #111; background: transparent;
  box-shadow: inset 1px 1px 0 rgb(255 255 255 / 35%), inset -2px -2px 0 rgb(0 0 0 / 18%), 1px 2px 3px rgb(0 0 0 / 24%);
  isolation: isolate;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.com-adventcalendar__calendar:not(.is-background-ready) .com-adventcalendar__door {
  pointer-events: none;
}
.com-adventcalendar__calendar:not(.is-background-ready) .com-adventcalendar__front,
.com-adventcalendar__calendar:not(.is-background-ready) .com-adventcalendar__inside {
  visibility: hidden;
}
.com-adventcalendar__calendar.is-background-ready .com-adventcalendar__front,
.com-adventcalendar__calendar.is-background-ready .com-adventcalendar__inside {
  visibility: visible;
}
.com-adventcalendar__door--positioned { position: absolute; left: var(--door-x); top: var(--door-y); width: var(--door-w); height: var(--door-h); }
.com-adventcalendar__door.is-open::after {
  position: absolute; z-index: 4; content: "";
  top: 0; right: 0; bottom: 0; width: 1px;
  background: rgb(255 255 255 / 82%);
  box-shadow: -1px 0 2px rgb(255 255 255 / 35%);
  pointer-events: none;
}
.com-adventcalendar__door.is-open {
  overflow: visible;
  z-index: 6;
}
.com-adventcalendar__door--hinge-right.is-open::after { right: auto; left: 0; }
.com-adventcalendar__door--hinge-split.is-open::after {
  display: none;
}
.com-adventcalendar__front, .com-adventcalendar__inside {
  position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden;
}
.com-adventcalendar__front {
  z-index: 2; transform-origin: left center;
  transition: transform .65s cubic-bezier(.25, .75, .25, 1), opacity .4s;
  overflow: hidden; background: transparent;
  transform-style: preserve-3d; will-change: transform;
}
.com-adventcalendar__door--hinge-right .com-adventcalendar__front { transform-origin: right center; }
.com-adventcalendar__front--split-left {
  inset: 0 50% 0 0; transform-origin: left center;
}
.com-adventcalendar__front--split-right {
  inset: 0 0 0 50%; transform-origin: right center;
}
.com-adventcalendar__front--split-left .com-adventcalendar__number,
.com-adventcalendar__front--split-right .com-adventcalendar__number {
  position: absolute; display: grid; place-items: center; width: 200%; height: 100%;
}
.com-adventcalendar__front--split-left .com-adventcalendar__number { left: 0; }
.com-adventcalendar__front--split-right .com-adventcalendar__number { right: 0; }
.com-adventcalendar__front::before {
  position: absolute; z-index: 0; content: "";
  width: var(--door-stage-width, 100%); height: var(--door-stage-height, 100%);
  left: var(--door-bg-left, 0); top: var(--door-bg-top, 0);
  background: center / cover no-repeat var(--advent-background, linear-gradient(145deg, #173b32, #751d25));
  pointer-events: none;
}
.com-adventcalendar__front--split-right::before {
  left: calc(var(--door-bg-left, 0px) - 100%);
}
.com-adventcalendar__front::after {
  position: absolute; inset: 0; z-index: 1; content: "";
  background: transparent; transition: background-color .35s;
  pointer-events: none;
}
.com-adventcalendar__number, .com-adventcalendar__lock { position: relative; z-index: 2; }
.com-adventcalendar__inside {
  opacity: 0; overflow: hidden; background: rgb(255 248 225 / 94%);
  transition: opacity .2s; isolation: isolate;
}
.com-adventcalendar__inside img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.com-adventcalendar__inside::after {
  position: absolute; z-index: 2; content: ""; opacity: 0;
  width: var(--door-stage-width, 100%); height: var(--door-stage-height, 100%);
  left: var(--door-bg-left, 0); top: var(--door-bg-top, 0);
  background: radial-gradient(
    ellipse at 50% 50%,
    rgb(255 211 128 / 42%) 0,
    rgb(255 193 99 / 39%) 28%,
    rgb(244 158 67 / 35%) 62%,
    rgb(218 119 39 / 31%) 100%
  );
  mix-blend-mode: soft-light; pointer-events: none;
}
.com-adventcalendar__number {
  color: #111;
  font: 800 clamp(1.6rem, 6.4cqi, 3.84rem)/1 Georgia, serif;
  -webkit-text-stroke: 2px rgb(255 255 255 / 95%);
  paint-order: stroke fill;
  text-shadow:
    0 0 2px rgb(255 255 255 / 90%),
    0 0 5px rgb(255 255 255 / 62%),
    0 0 9px rgb(255 255 255 / 30%),
    0 1px 2px rgb(0 0 0 / 42%);
}
.com-adventcalendar__lock { position: absolute; right: 5px; bottom: 4px; font-size: clamp(.62rem, 1.5cqi, .9rem); }
.com-adventcalendar__door:not(:disabled):hover, .com-adventcalendar__door:not(:disabled):focus-visible { outline: 3px solid #ffd86b; outline-offset: 2px; z-index: 4; }
.com-adventcalendar__door.is-open .com-adventcalendar__front {
  transform: translateZ(2px) rotateY(var(--door-open-angle-negative, -82deg)); opacity: 1; pointer-events: auto;
  border: 3px solid rgb(0 0 0 / 38%); border-left-width: 1px;
  background: transparent;
  box-shadow:
    inset -6px 0 8px rgb(0 0 0 / 26%),
    8px 3px 10px rgb(0 0 0 / 34%);
}
.com-adventcalendar__door--hinge-right.is-open .com-adventcalendar__front {
  transform: translateZ(2px) rotateY(var(--door-open-angle, 82deg));
  border-right-width: 1px; border-left-width: 3px;
  box-shadow: inset 6px 0 8px rgb(0 0 0 / 26%), -8px 3px 10px rgb(0 0 0 / 34%);
}
.com-adventcalendar__door--hinge-split.is-open .com-adventcalendar__front--split-left {
  transform: translateZ(2px) rotateY(var(--door-open-angle-negative, -82deg));
  border-left-width: 1px; border-right-width: 3px;
  box-shadow: inset -5px 0 7px rgb(0 0 0 / 25%), 6px 2px 8px rgb(0 0 0 / 30%);
}
.com-adventcalendar__door--hinge-split.is-open .com-adventcalendar__front--split-right {
  transform: translateZ(2px) rotateY(var(--door-open-angle, 82deg));
  border-right-width: 1px; border-left-width: 3px;
  box-shadow: inset 5px 0 7px rgb(0 0 0 / 25%), -6px 2px 8px rgb(0 0 0 / 30%);
}
.com-adventcalendar__door.is-open .com-adventcalendar__front::before { filter: brightness(.76) saturate(.82); }
.com-adventcalendar__door.is-open .com-adventcalendar__front::after { background: rgb(82 72 62 / 14%); }
.com-adventcalendar__door.is-open .com-adventcalendar__number,
.com-adventcalendar__door.is-open .com-adventcalendar__lock { opacity: 0; }
.com-adventcalendar__door.is-open .com-adventcalendar__inside { opacity: 1; }
.com-adventcalendar__door.is-open .com-adventcalendar__inside::after {
  opacity: var(--candle-opacity, .92);
  transform: translate3d(var(--candle-x, 0), var(--candle-y, 0), 0) scale(var(--candle-scale, 1));
  filter: brightness(var(--candle-brightness, 1.13));
  transition: opacity 45ms linear, transform 55ms linear, filter 45ms linear;
}
.com-adventcalendar__door.is-open {
  border-color: rgb(0 0 0 / 52%);
  box-shadow:
    inset 0 0 14px rgb(255 232 166 / 68%),
    inset 0 0 4px rgb(255 255 224 / 72%),
    0 0 10px rgb(255 198 92 / 48%);
}
.com-adventcalendar__door.is-locked { cursor: not-allowed; filter: saturate(.55); }
.com-adventcalendar__message { min-height: 1.5em; margin: .45rem 0 0; text-align: center; }
.com-adventcalendar-lightbox-open { overflow: hidden; }
.com-adventcalendar__lightbox {
  position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem); cursor: zoom-out;
  background: rgb(0 0 0 / 76%); opacity: 0;
  transition: opacity .2s ease;
}
.com-adventcalendar__lightbox[hidden] { display: none; }
.com-adventcalendar__lightbox.is-visible { opacity: 1; }
.com-adventcalendar__lightbox-image {
  display: block; width: auto; height: auto;
  max-width: calc(100vw - clamp(2rem, 8vw, 6rem));
  max-height: calc(100vh - clamp(2rem, 8vw, 6rem));
  object-fit: contain; box-shadow: 0 12px 48px rgb(0 0 0 / 65%);
}
.com-adventcalendar__lightbox-close {
  position: fixed; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right));
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid rgb(255 255 255 / 75%); border-radius: 50%; cursor: pointer;
  color: #fff; background: rgb(0 0 0 / 55%); font: 300 2rem/1 sans-serif;
}
.com-adventcalendar__lightbox-close:hover,
.com-adventcalendar__lightbox-close:focus-visible { background: rgb(255 255 255 / 20%); outline: 2px solid #fff; outline-offset: 2px; }
@container (max-width: 600px) { .com-adventcalendar__stage { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .com-adventcalendar__front { transition: none; }
  .com-adventcalendar__door.is-open .com-adventcalendar__inside::after { transition: none; }
  .com-adventcalendar__lightbox { transition: none; }
}