: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; top:0; right:0; bottom:0; left: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: .7rem 1rem .4rem; position: relative; z-index: 2; }
.holly { font-size: 1.4rem; 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(1.5rem, 3.6vw, 2.8rem);
  margin: .15rem 0 .1rem;
  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 ---------- */
/* Gitteret cappes i bredden, så de 6 kolonner (og dermed de kvadratiske låger)
   bliver små nok til at alle 4 rækker passer i højden uden scroll.
   Kun bredde-begrænset (ingen vh/min i tracks) => virker på gammel WebView. */
main { position: relative; z-index: 2; padding: .3rem clamp(.4rem, 2vw, 1.5rem) .4rem; }
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(.45rem, 1.3vw, .9rem);
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}
@media (max-width: 900px) { .grid { grid-template-columns: repeat(4, 1fr); max-width: 560px; } }
@media (max-width: 560px) { .grid { grid-template-columns: repeat(3, 1fr); max-width: 440px; } }

.door {
  position: relative;
  display: block;
  border-radius: 18px;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 900;
  color: var(--cream);
  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%);
}
/* firkantet låge uden aspect-ratio: in-flow spacer giver højden (virker overalt) */
.door::before { content: ""; display: block; padding-bottom: 100%; }
.door .face {
  position: absolute; top:0; right:0; bottom:0; left:0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 18px;
}
.door .face::before { /* gold frame */
  content: ""; position: absolute; top:7px; right:7px; bottom:7px; left:7px; border-radius: 12px;
  border: 2px dashed rgba(233,196,106,.55);
  pointer-events: none;
}
.door .num {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  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) .face::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: .4rem 1rem .6rem; 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; top:0; right:0; bottom:0; left:0; z-index: 50;
  background: rgba(10, 20, 14, .94);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(.4rem, 1.5vw, 1.1rem);
  animation: fade .2s ease;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.lb-stage {
  position: relative;
  flex: 1; width: 100%; max-width: 1700px;
  display: flex; align-items: center; justify-content: center; min-height: 0;
}
.lb-stage img, .lb-stage video {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
  max-width: 100%; max-height: 100%; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  background: #000;
  opacity: 1; transition: opacity .55s ease;
}
/* krydstoning ved skift: nyt billede starter gennemsigtigt og toner ind */
.lb-stage .slide-enter { opacity: 0; }
.lb-stage .slide-leave { opacity: 0; }
.lb-stage img.zoomable {
  touch-action: none;            /* billedet styrer selv knib/træk */
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
  transform-origin: center center; will-change: transform;
}
.lb-caption {
  color: var(--cream); font-size: clamp(1rem, 2.2vw, 1.5rem); font-weight: 700;
  text-align: center; margin-top: .5rem; max-width: 1100px; flex: none;
}
.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);
  z-index: 3;   /* skal ligge OVER billedet (som fylder hele visningsområdet) */
}
.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: .6rem; flex: none; }
.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;
}

/* ---------- Notifikation om nye opslag ---------- */
.notify {
  position: fixed; left: 50%; top: 1.2rem; transform: translateX(-50%);
  z-index: 55; cursor: pointer;
  display: flex; align-items: center; gap: .7rem;
  max-width: 94vw;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--green);
  padding: .9rem 1.2rem .9rem 1.1rem; border-radius: 999px;
  font-weight: 800; font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  box-shadow: 0 12px 34px rgba(0,0,0,.4), 0 0 0 4px rgba(255,255,255,.25) inset;
}
.notify .notify-icon { font-size: 1.5em; animation: ring 1.2s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes ring { 0%,70%,100%{transform:rotate(0)} 75%{transform:rotate(16deg)} 80%{transform:rotate(-14deg)} 85%{transform:rotate(10deg)} 90%{transform:rotate(-6deg)} }
.notify .notify-text { line-height: 1.15; }
.notify .notify-close {
  flex: none; background: rgba(27,67,50,.15); color: var(--green);
  border: none; width: 2em; height: 2em; border-radius: 50%; cursor: pointer;
  font-size: .9em; font-weight: 800; line-height: 1;
}
.notify .notify-close:active { background: rgba(27,67,50,.3); }
.notify.pop { animation: notifyPop .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes notifyPop { from { transform: translateX(-50%) translateY(-24px) scale(.85); opacity: 0; } to { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; } }