.doors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.6rem, 1.5vw, 1.1rem); max-width: 900px; }
.door {
  position: relative; aspect-ratio: 1; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(160deg, #1b4a39, #0d2a21);
  color: var(--ink); font: 600 clamp(1.6rem, 4.5vw, 2.6rem) var(--display);
  cursor: pointer; box-shadow: var(--shadow);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .25s;
}
.door::before { /* door panel */
  content: ""; position: absolute; inset: 9%; border-radius: 12px;
  border: 1px solid rgba(233, 196, 106, .35);
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), transparent);
}
.door::after { /* knob */
  content: ""; position: absolute; right: 16%; top: 52%; width: 9%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold));
}
.door span { position: relative; z-index: 1; }
@media (hover: hover) { .door:hover { transform: translateY(-3px); border-color: var(--line-hi); } }
.door:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; }
.door.future { opacity: .45; cursor: default; }
@media (hover: hover) { .door.future:hover { transform: none; border-color: var(--line); } }
.door.shake { animation: shake .4s; }
.door.opened { background: linear-gradient(160deg, #2a2418, #151108); border-color: rgba(233, 196, 106, .45); }
.door.opened::before { background: rgba(233, 196, 106, .1); }
.door.opened::after { display: none; }
.door.today { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(233, 196, 106, .45), var(--shadow); }
.door .tag {
  position: absolute; z-index: 2; left: 50%; bottom: 8%; transform: translateX(-50%);
  padding: .1rem .6rem; border-radius: 999px; background: var(--gold); color: var(--gold-ink);
  font: 800 .7rem var(--body); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
@keyframes shake { 20% { transform: translateX(-6px) rotate(-1.5deg); } 50% { transform: translateX(6px) rotate(1.5deg); } 80% { transform: translateX(-3px); } }

dialog#door-dialog {
  width: min(560px, calc(100vw - 1.5rem)); padding: 1.8rem;
  border: 1px solid var(--line-hi); border-radius: 28px;
  background: rgba(10, 26, 21, .97); color: var(--ink); text-align: center;
}
dialog#door-dialog::backdrop { background: rgba(3, 9, 7, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.door-day { margin: 0 0 .4rem; color: var(--gold); font: 700 .9rem var(--body); letter-spacing: .2em; text-transform: uppercase; }
#door-title { font-size: clamp(1.7rem, 4vw, 2.3rem); margin-bottom: 1rem; }
.door-body { margin: 0 0 1.5rem; font-size: 1.25rem; }
.door-body p { margin: 0 0 .8rem; }
.door-body img { max-width: 100%; max-height: 40vh; border-radius: 18px; }
.door-body .punch { font: 600 1.5rem/1.3 var(--display); color: var(--gold-hi); }
.door-links { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1rem; }
dialog#door-dialog > .btn { margin-top: .25rem; }
@media (max-width: 520px) { .doors { gap: .5rem; } .door .tag { font-size: .6rem; } }
@media (prefers-reduced-motion: reduce) { .door.shake { animation: none; } }