:root {
  --red: #a4161a;
  --red-deep: #6a040f;
  --green: #1b4332;
  --green-light: #2d6a4f;
  --gold: #e9c46a;
  --gold-bright: #ffd97d;
  --cream: #fff6e9;
  --ink: #2b1d12;
  --shadow: rgba(40, 10, 10, 0.35);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; }

body {
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--cream);
  background:
    radial-gradient(1200px 700px at 50% -10%, #2d6a4f 0%, #1b4332 45%, #12301f 100%);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* ---------- Snow ---------- */
.snow {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden;
}
.flake {
  position: absolute; top: -5vh; color: #fff; opacity: .85;
  animation: fall linear infinite;
  text-shadow: 0 0 6px rgba(255,255,255,.6);
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(360deg); }
}

/* ---------- Header ---------- */
.top { text-align: center; padding: 2.4rem 1rem 1rem; position: relative; z-index: 2; }
.holly { font-size: 2rem; color: var(--gold-bright); animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.top h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  margin: .3rem 0 .2rem;
  color: var(--gold-bright);
  letter-spacing: .5px;
  text-shadow: 0 3px 0 var(--red-deep), 0 6px 18px var(--shadow);
}
.sub {
  margin: 0; font-size: clamp(1rem, 2.2vw, 1.4rem); font-weight: 700;
  color: var(--cream); opacity: .85; text-transform: capitalize;
}

/* ---------- Grid ---------- */
main { position: relative; z-index: 2; padding: 1rem clamp(.6rem, 3vw, 2.5rem) 1rem; }
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(.6rem, 1.6vw, 1.3rem);
  max-width: 1300px; margin: 0 auto;
}
@media (max-width: 900px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.door {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  border: none;
  cursor: pointer;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 900;
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 6px 0 var(--red-deep), 0 10px 22px var(--shadow);
  background: linear-gradient(160deg, #c1121f 0%, var(--red) 55%, var(--red-deep) 100%);
}
.door::before { /* gold frame */
  content: ""; position: absolute; inset: 7px; border-radius: 12px;
  border: 2px dashed rgba(233,196,106,.55);
  pointer-events: none;
}
.door .num {
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0,0,0,.25), 0 0 16px rgba(255,217,125,.3);
}

/* colour variety */
.door:nth-child(3n+1) { background: linear-gradient(160deg,#2d6a4f,#1b4332 60%,#0f2a1d); box-shadow: 0 6px 0 #0f2a1d, 0 10px 22px var(--shadow); }
.door:nth-child(3n+1)::before { border-color: rgba(255,217,125,.5); }
.door:nth-child(3n+2) { background: linear-gradient(160deg,#c1121f,#a4161a 55%,#6a040f); box-shadow:0 6px 0 #6a040f,0 10px 22px var(--shadow); }
.door:nth-child(3n) { background: linear-gradient(160deg,#1d3557,#14213d 60%,#0b1326); box-shadow:0 6px 0 #0b1326,0 10px 22px var(--shadow); }

.door:not(.locked):active { transform: translateY(4px); box-shadow: 0 2px 0 var(--red-deep), 0 4px 10px var(--shadow); }
.door:not(.locked):hover { transform: translateY(-3px); }

/* content indicator (unlocked + has content) */
.door.has::after {
  content: "🎁";
  position: absolute; bottom: 8px; right: 10px;
  font-size: clamp(1rem, 2.4vw, 1.6rem);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.4));
  animation: wiggle 2.5s ease-in-out infinite;
}
@keyframes wiggle { 0%,92%,100%{transform:rotate(0)} 94%{transform:rotate(-12deg)} 96%{transform:rotate(12deg)} 98%{transform:rotate(-8deg)} }

/* opened */
.door.opened { filter: saturate(.75) brightness(.95); }
.door.opened::after { content: "✓"; background: var(--gold-bright); color: var(--green);
  border-radius: 50%; width: 1.6em; height: 1.6em; display:flex; align-items:center; justify-content:center;
  font-size: clamp(.8rem,1.8vw,1.1rem); font-family:"Nunito"; animation:none; }

/* locked */
.door.locked { cursor: default; opacity: .96; }
.door.locked .num { opacity: .55; }
.door.locked::after {
  content: "🔒"; animation: none;
  position: absolute; bottom: 8px; right: 10px; font-size: clamp(.9rem,2.2vw,1.4rem);
  filter: grayscale(.2) drop-shadow(0 2px 2px rgba(0,0,0,.4));
}
.door.shake { animation: shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-7px)} 40%,80%{transform:translateX(7px)} }

/* empty but unlocked */
.door.empty .num { opacity: .78; }

/* ---------- Footer ---------- */
.foot { text-align: center; padding: 1.4rem 1rem 2.4rem; position: relative; z-index: 2; }
.admin-link {
  color: var(--gold-bright); text-decoration: none; font-weight: 800;
  font-size: 1.05rem; padding: .7rem 1.3rem; border-radius: 999px;
  border: 2px solid rgba(233,196,106,.4); display: inline-block;
}
.admin-link:active { background: rgba(233,196,106,.15); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(10, 20, 14, .94);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  animation: fade .2s ease;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.lb-stage {
  flex: 1; width: 100%; max-width: 1100px;
  display: flex; align-items: center; justify-content: center; min-height: 0;
}
.lb-stage img, .lb-stage video {
  max-width: 100%; max-height: 72vh; border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  background: #000;
}
.lb-caption {
  color: var(--cream); font-size: clamp(1.1rem, 2.6vw, 1.6rem); font-weight: 700;
  text-align: center; margin-top: 1rem; max-width: 900px;
}
.lb-caption .by { display:block; font-size:.8em; font-weight:600; opacity:.7; margin-top:.3rem; }
.lb-close, .lb-nav {
  background: rgba(255,255,255,.12); color: #fff; border: none;
  border-radius: 50%; cursor: pointer; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.lb-close { position: absolute; top: 1rem; right: 1rem; width: 56px; height: 56px; font-size: 1.6rem; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 64px; height: 64px; font-size: 2.6rem; line-height: 1; }
.lb-prev { left: .6rem; } .lb-next { right: .6rem; }
.lb-nav:active, .lb-close:active { background: rgba(255,255,255,.3); }
.lb-nav[hidden] { display: none; }
.lb-dots { display: flex; gap: .5rem; margin-top: .9rem; }
.lb-dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.3); }
.lb-dots i.on { background: var(--gold-bright); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 7rem; transform: translateX(-50%);
  background: var(--gold-bright); color: var(--green);
  padding: 1rem 1.6rem; border-radius: 999px; font-weight: 800; font-size: 1.15rem;
  box-shadow: 0 10px 30px var(--shadow); z-index: 60;
  animation: pop .3s ease;
}
@keyframes pop { from { transform: translateX(-50%) scale(.8); opacity: 0 } to { transform: translateX(-50%) scale(1); opacity: 1 } }

.preview-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: var(--gold-bright); color: var(--green);
  text-align: center; font-weight: 800; padding: .4rem; font-size: .95rem;
}