:root {
  --night: #14224f;
  --dusk: #2a4c9e;
  --ice-1: #f4fbff;
  --ice-2: #c4e0ff;
  --ice-3: #dcd6ff;
  --ink: #22407f;
  --gold: #ffe08a;
  --text: #eef6ff;
  --soft: #b8cdf0;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html.has-open { overflow: hidden; }

body {
  margin: 0;
  min-height: 100dvh;
  background: linear-gradient(180deg, var(--night), var(--dusk) 72%, #6f9fe4);
  background-attachment: fixed;
  color: var(--text);
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
}

#snow { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#snow i { position: absolute; top: -12px; border-radius: 50%; background: #fff; animation: fall linear infinite; }
@keyframes fall { to { transform: translate3d(var(--drift), 106vh, 0); } }

main { position: relative; max-width: 980px; margin: 0 auto; padding: 16px 16px 56px; }

.top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.top-cluck { width: clamp(104px, 20vw, 168px); flex: none; }
.top-cluck svg { display: block; width: 100%; filter: drop-shadow(0 10px 16px rgba(8, 16, 50, .45)); }
h1 { margin: 0; font-size: clamp(42px, 8vw, 72px); line-height: 1; }
.subtitle { margin: 4px 0 0; font-size: clamp(18px, 2.8vw, 25px); font-weight: 700; color: #cfe6ff; }
.tag { margin: 6px 0 0; font-size: clamp(17px, 2.4vw, 21px); color: var(--soft); }
.status { margin: 6px 0 0; font-size: clamp(17px, 2.4vw, 21px); color: var(--gold); }

.doors { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(7px, 1.4vw, 14px); }

.door {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  border-radius: 14px;
  perspective: 520px;
  cursor: pointer;
}
.door:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.door-inside {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(180deg, #16265a, #2f5ab0);
  box-shadow: inset 0 3px 10px rgba(5, 10, 40, .6);
}
.door-inside svg { width: 84%; display: block; }

.door-leaf {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(160deg, var(--ice-1), var(--ice-2));
  box-shadow: 0 5px 12px rgba(6, 12, 44, .4), inset 0 0 0 2px rgba(255, 255, 255, .75);
  transform-origin: left center;
  transition: transform .5s ease;
}
.door:nth-child(3n + 1) .door-leaf { background: linear-gradient(160deg, var(--ice-1), var(--ice-3)); }
.door:nth-child(5n + 2) .door-leaf { background: linear-gradient(200deg, #ffffff, #a9d2fb); }
.door-leaf::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 16%;
  background: #fff;
  border-radius: 0 0 46% 54% / 0 0 100% 100%;
}
.door-num { position: relative; font-size: clamp(22px, 4.6vw, 44px); font-weight: 800; }

.door.locked { cursor: default; }
.door.locked .door-num { opacity: .62; }
.door.ready .door-leaf { box-shadow: 0 5px 12px rgba(6, 12, 44, .4), inset 0 0 0 2px var(--gold); }
.door.today .door-leaf {
  box-shadow: 0 0 0 3px var(--gold), 0 0 26px 6px rgba(255, 224, 138, .7);
  animation: glow 1.8s ease-in-out infinite alternate;
}
@keyframes glow { to { box-shadow: 0 0 0 3px var(--gold), 0 0 12px 2px rgba(255, 224, 138, .35); } }
.door.opened .door-leaf { transform: rotateY(-64deg); animation: none; }
.door:hover:not(.locked):not(.opened) .door-leaf { transform: rotateY(-14deg); }
.door.wiggle { animation: wiggle .42s ease; }
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-4deg); }
  60% { transform: rotate(4deg); }
}

.door.christmas { grid-column: 1 / -1; aspect-ratio: auto; height: clamp(84px, 14vw, 120px); }
.door.christmas .door-inside svg { width: auto; height: 90%; }
.door.christmas .door-num::after { content: " Christmas Day"; }

.share { margin-top: 28px; text-align: center; }
.share-btn {
  padding: 13px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font: inherit;
  font-size: clamp(17px, 2.4vw, 20px);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(6, 12, 44, .4);
}
.share-btn:hover { background: #ffeaa8; }
.ai-friends { margin: 14px 0 0; font-size: 16px; color: var(--text); }
.linkish {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.share-btn:focus-visible, .linkish:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 16px);
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 11px 18px;
  border-radius: 22px;
  text-align: center;
  overflow-wrap: anywhere;
  background: #fff;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  box-shadow: 0 8px 22px rgba(6, 12, 44, .45);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.peek-badge {
  position: fixed;
  top: 10px;
  right: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

dialog {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  color: var(--text);
}
dialog::backdrop { background: rgba(8, 14, 40, .92); }

.viewer-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
}

.frame {
  position: relative;
  flex: none;
  width: min(100%, 66dvh, 620px);
  aspect-ratio: 1;
  border-radius: 20px;
  perspective: 1500px;
}

.scene { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: var(--night); }
.scene svg { display: block; }

.big-leaf {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: linear-gradient(160deg, var(--ice-1), var(--ice-2));
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .8);
  color: var(--ink);
  font-size: min(36vw, 24dvh, 220px);
  font-weight: 800;
  line-height: 1;
  transform-origin: left center;
  pointer-events: none;
}

.caption { max-width: min(100%, 620px); text-align: center; transition: opacity .35s; }
.caption.hidden { opacity: 0; }
.caption h2 { margin: 0; font-size: 22px; color: var(--gold); }
.caption p { margin: 3px 0 0; font-size: clamp(17px, 2.4vw, 20px); line-height: 1.35; }
.caption p.signoff { margin-top: 8px; font-size: 15px; color: var(--soft); }

.close {
  padding: 9px 22px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.close:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

@media (max-width: 640px) {
  .doors { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  #snow { display: none; }
  .door-leaf { transition: none; }
  .door.today .door-leaf { animation: none; }
}