advent-calendar { display: block; --advent-red: #b3162d; --advent-green: #1f4d2b; --advent-gold: #f2c94c; }
.advent__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .75rem; max-width: 56rem; margin: 0 auto; padding: 1rem; }
.advent__door { all: unset; box-sizing: border-box; aspect-ratio: 1; perspective: 800px; cursor: pointer; border-radius: .5rem; }
.advent__door:focus-visible { outline: 3px solid var(--advent-gold); outline-offset: 2px; }
.advent__door-inner { display: block; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.advent__door.is-open .advent__door-inner { transform: rotateY(180deg); }
.advent__front, .advent__back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: .5rem; backface-visibility: hidden; overflow: hidden; }
.advent__front { background: linear-gradient(135deg, var(--advent-red), #8a1023); color: #fff; font: 700 2rem/1 system-ui, sans-serif; box-shadow: 0 3px 8px rgba(0,0,0,.3); border: 2px solid var(--advent-gold); }
.advent__back { background: var(--advent-green); color: var(--advent-gold); font-size: 2rem; transform: rotateY(180deg); }
.advent__back img { width: 100%; height: 100%; object-fit: cover; }
.advent__door.is-locked { opacity: .55; cursor: not-allowed; }
.advent__door.is-shake { animation: advent-shake .4s; }
@keyframes advent-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.advent__dialog { border: 0; border-radius: .75rem; padding: 0; max-width: min(90vw, 40rem); background: #fff; }
.advent__dialog::backdrop { background: rgba(0,0,0,.7); }
.advent__content img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; }
.advent__content p { margin: 0; padding: 3rem; font-size: 1.5rem; text-align: center; }
.advent__close { all: unset; position: absolute; top: .25rem; right: .5rem; width: 2rem; height: 2rem; text-align: center; font: 2rem/2rem sans-serif; color: #fff; text-shadow: 0 0 4px #000; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .advent__door-inner { transition: none; } .advent__door.is-shake { animation: none; } }