:root{
  --bg: #0c1b3a;
  --fg: #e5f4ff;
  --gold: #ffd66b;
  --ice: #8ad6ff;
  --accent: #b0e0ff;
  --danger: #ff6b6b;

  --radius: 12px;
  --gap: 8px;
}

/* Reset & base */
*{ box-sizing:border-box }
html, body{
  margin:0; padding:0;
  height:100%;
}
body{
  font-family: Raleway, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--fg);
  background: radial-gradient(ellipse at top, #142c5c, #061024 60%) fixed;
  -webkit-tap-highlight-color: transparent;
  overflow-x:hidden;
  /* default mobile-first font sizing */
  font-size: 16px;
  line-height: 1.35;
}

main {
    min-height: 100%;
    transition: background-color 4s ease;
}

.main-dark{
  background-color: #120a35;
}

/* Typography scale (mobile-first) */
.title{
  font-family: Marcellus, serif;
  font-size: clamp(1rem, 2.8vw, 1.4rem);
  letter-spacing:0.5px;
  color: var(--gold);
}

/* Safe-area padding for notches */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 8px calc(10px + env(safe-area-inset-left));
  position: sticky; top: 0;
  background: linear-gradient(to bottom, rgba(12,27,58,0.92), rgba(12,27,58,0.5));
  background: rgba(0, 0, 0, 0.205);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  z-index: 10;
}
.hearts{ font-size: clamp(0.95rem, 3.5vw, 1.1rem) }
.hearts .low{ color: var(--danger) }

/* Advent grid – mobile-first */
.advent-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(96px, 1fr));
  gap: var(--gap);
  padding: 10px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Doors: use aspect-ratio for consistent sizing on phones */
.door{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  cursor:pointer;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 8px 16px rgba(0,0,0,0.25);
  transform: translateZ(0);
  touch-action: manipulation;
  aspect-ratio: 3 / 4; /* hochkant-Kacheln passen besser auf Phones */
  min-width: 0;
}
.door.locked{ cursor:inherit }
.door.locked:after {
    content: "";
    background: url(/assets/img/chainlock.webp);
    z-index: 999;
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    background-size: 108%;
    background-repeat: no-repeat;
    background-position: 7% 68%;
    opacity: 0.8;
}
.door .number{
    position: absolute;
    top: 6px;
    right: 8px;
    font-family: Marcellus, serif;
    font-size: clamp(1.15rem, 3.2vw, 1.2rem);
    opacity: .8;
    color: var(--gold);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    z-index: 1;
}
.door .label{
  position:absolute; bottom:6px; left:8px; right:8px;
  font-size: clamp(0.75rem, 3.2vw, 0.95rem);
  color: var(--accent);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  line-height: 1.2;
}

/* Double door leaves */
.leaf{
  position:absolute; top:0; bottom:0;
  width:50%;
  background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(0,0,0,0.1));
  backdrop-filter: blur(4px); /* leichter auf Mobilgeräten */
  border-right: 1px solid rgba(255,255,255,0.15);
  border-left: 1px solid rgba(255,255,255,0.15);
  transition: transform 600ms ease, opacity 600ms ease;
  will-change: transform, opacity;
}
.leaf.left{ left:0 }
.leaf.right{ right:0 }
.door.opening .leaf.left{ transform: translateX(-100%); opacity:0.3 }
.door.opening .leaf.right{ transform: translateX(100%); opacity:0.3 }


.door-bg {
  position: absolute;
  inset: 0;               /* top:0; right:0; bottom:0; left:0; */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.08;          /* hier gewünschte Transparenz einstellen */
  pointer-events: none;   /* klickt nicht, damit Tür weiter bedienbar bleibt */
  transition: opacity 600ms ease;
  will-change: opacity;
}

.door-bg:after {
    background: linear-gradient(0deg, black 10%, transparent);
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
}

.door-bg:before {
    background: radial-gradient(circle farthest-side at right top, hsla(0, 0%, 0%, 0.918) 0%, hsla(0, 0%, 0%, 0.897) 15%, hsla(0, 0%, 0%, 0) 80%, hsla(0, 0%, 100%, 0) 100%);
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
}

.opening .door-bg {
    opacity: 0.5;
    transition-duration: 1.2s;
}

.door.opening:hover .door-bg {
    opacity: .8;
}

@media (hover: hover) and (pointer: fine) {
    .door.opening:hover::before {
        /* backdrop-filter: saturate(10.8); */
    }
}

.door.opening::before {
    /* transition: backdrop-filter 2s ease; */
}

/* Zoom focus – reduced on mobile */
.door.zoom-focus{
  z-index:5;
  animation: zoomIn 700ms ease forwards;
}
@keyframes zoomIn{
  0%{ transform: scale(1); }
  100%{ transform: scale(1.06); box-shadow: 0 16px 48px rgba(0,0,0,0.45); }
}

/* Scene modal: full-screen on phones */
.scene-modal{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(10,20,40,0.7);
  backdrop-filter: blur(4px);
  z-index: 20;
}
.scene-modal.hidden{ display:none }
.scene-frame{
  position:relative;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  border-radius: 0;
  border: none;
  box-shadow: none;

  /* display: grid;
  grid-template-rows: auto var(--backdrop-h, 42vh) 1fr; */
}

.scene-frame, .chat, .scene-intro-wrap {
    scrollbar-width: none;  /* Firefox */
}

.scene-frame::-webkit-scrollbar, .chat::-webkit-scrollbar, .scene-intro-wrap::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
    width: 0px;
}

.close-btn-container {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    border-radius: 12px;
    min-height: 0;
    min-width: 0;
    height: 100%;
    width: auto;
}

.close-btn {
    position: sticky;
    top: 0;
    display: flex;
    right: 0;
    border: none;
    border-radius: 12px;
    min-height: 0;
    min-width: 0;
    height: auto;
    width: auto;
    padding: 10px;
    color: var(--fg);
    background: rgba(0, 0, 0, 0.35);
    cursor: pointer;
    z-index: 10;
    backdrop-filter: blur(3px) brightness(0.7);
}

.scene-backdrop{
  position: relative;
  width: 100%;
  /* Höhe bestimmt sich durch das Kind-Image */
}
.backdrop-img{
  display: block;
  width: 100%;
  height: auto;            /* proportional skalieren */
  object-fit: contain;     /* volle Grafik sichtbar */
}
.scene-content{
  position:relative;
  background: linear-gradient(to bottom, rgba(20,35,70,0.96), rgba(12,27,58,0.98));
  padding: 12px 12px 16px;
  /* Wichtig für Grid: Kinder sollen innerhalb scrollen können */
  min-height: 0;
  /* overflow: auto; */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Content blocks */
.scene-title{
  font-family: Marcellus, serif;
  font-size: clamp(1.1rem, 4.5vw, 1.5rem);
  color: var(--gold);
  margin: 0.6em;
}

#sceneContent .scene-title {
    margin: inherit;
    margin-bottom: 6px;
}

.scene-intro-block{
  padding: 12px 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--fg);
  font-size: clamp(1rem, 3.8vw, 1.1rem);
  line-height: 1.5;
  white-space: pre-line; /* \n in intro anzeigen */
  /* Viel Platz, aber nicht unendlich – bei sehr langen Geschichten scrollbar */
  max-height: 32vh;
  overflow: auto;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.scene-instruction{
  color: var(--accent);
  margin-bottom: 10px;
  font-size: clamp(0.95rem, 3.8vw, 1.05rem);
}

.input-row{
  display:flex; gap:8px; margin: 10px 0;
}
input[type="text"], textarea{
  flex:1;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: var(--fg);
  font-size: 16px; /* verhindert Zoom auf iOS bei <16px */
}
textarea{ min-height: 120px; resize: vertical }
button{
  padding: 12px 14px;
  min-height: 44px; /* Fingerfreundlich */
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background: linear-gradient(180deg, #3b78c3, #2c5e99);
  color: #fff;
  cursor:pointer;
}
button:disabled{ opacity:0.55; cursor:not-allowed }

hr{ border: none; border-top:1px solid rgba(255,255,255,0.15); margin: 12px 0 }

.feedback{
  padding:12px;
  border-radius:10px;
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  margin-top:10px;
  font-size: clamp(0.95rem, 3.6vw, 1.05rem);
}
.good{ border-color: rgba(120,255,120,0.45) }
.bad{ border-color: rgba(255,120,120,0.45) }

/* Chat */
.chat{
  border:1px solid rgba(255,255,255,0.15);
  border-radius:10px; padding:10px;
  max-height: min(40vh, 320px);
  overflow:auto;
  background: rgba(255,255,255,0.06);
}
.msg{ margin:6px 0; font-size: clamp(0.95rem, 3.5vw, 1.05rem) }
.msg.user{ color: var(--ice) }
.msg.assistant{ color: var(--fg) }

/* Accessibility: focus outlines */
:focus-visible{
  outline: 2px solid var(--ice);
  outline-offset: 2px;
}

.sky-canvas{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* Canvas unter allem */
}

@media (hover: hover) and (pointer: fine){
  /* Basis: langsames Ausfaden standardmäßig */
  .door{
    transition:
      transform 700ms cubic-bezier(.22,.61,.36,1),
      box-shadow 700ms cubic-bezier(.22,.61,.36,1),
      border-color 700ms ease;
    will-change: transform, box-shadow;
  }

  /* Overlay-Lichtfilm, der durch die Türflügel leicht schimmert */
  .door::before{
    content:'';
    position:absolute; inset:0;
    pointer-events:none;
    border-radius: inherit;
    background:
      radial-gradient(90% 120% at 50% 20%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%),
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
    opacity: 0;
    transition: opacity 900ms ease; /* langsames Ausfaden */
  }

  /* Schnelles Einfaden und leichtes Anheben – nur wenn nicht locked/öffnend */
  .door:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0,0,0,.34);
    border-color: rgba(255,255,255,.25);
    transition-duration: 120ms; /* schnelles Einfaden für transform/box-shadow/border */
  }
  .door:hover::before{
    opacity: 1;
    transition-duration: 120ms; /* schnelles Einfaden für Overlay */
  }
}

/* Completed doors: visuelle Kennzeichnung */
.door.complete {
  border-color: rgba(120,255,160,0.5);
  box-shadow: 0 8px 18px rgba(0,0,0,0.28), inset 0 0 0 2px rgba(80,200,140,0.35);
}
.door.complete .label,
.door.complete .number {
  color: #9ff3c7;
}
.door.complete .door-bg {
  opacity: 0.35;
}
.door.complete::after {
  content: '✓';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 50%;
  text-align: center;
  background: linear-gradient(180deg, #2e7d5a, #1f5b41);
  color: #fff;
  font-weight: 700;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35), 0 0 0 2px rgba(255,255,255,0.15) inset;
  z-index: 2;
  opacity: 0;
}

.scene-intro{
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  /* Auf mobilen Geräten über dem Bild, schön lesbar */
  max-width: min(92%, 560px);
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--fg);
  font-size: clamp(0.95rem, 3.6vw, 1.05rem);
  line-height: 1.35;
  white-space: pre-line; /* \n in Texten anzeigen */
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  z-index: 1; /* über dem Bild */
}

@media (min-width: 768px){
  .scene-intro{
    left: auto;
    right: 12px;
    max-width: 42%; /* "neben" dem Bild auf größeren Screens */
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  .door.zoom-focus{ animation: none }
  .leaf{ transition: none }
  .scene-modal{ backdrop-filter: none }
}

/* Tablet breakpoint */
@media (min-width: 480px){
  .advent-grid{
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 10px;
    padding: 12px;
  }
  .scene-frame{ --backdrop-h: 44vh; }
}

/* Small desktop */
@media (min-width: 768px){
  .advent-grid{
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    max-width: 900px;
  }
  .door{ aspect-ratio: 1 / 1 } /* auf größerem Viewport quadratischer Look */
  .scene-frame{
    width: min(600px, 95vw);
    height: auto; max-height: 92vh;
    border-radius: 16px;
    border:1px solid rgba(255,255,255,0.15);
    box-shadow: 0 25px 80px rgba(0,0,0,0.5);
  }
  .scene-frame{ --backdrop-h: 46vh; }
}

/* Large desktop */
@media (min-width: 1024px){
  .advent-grid{
    grid-template-columns: repeat(6, minmax(140px, 1fr));
    max-width: 1200px;
  }
}



.fx-layer{
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 4s ease;
  will-change: opacity;
}
.fx-layer.fx-show{ opacity: 1 }
.fx-aurora{
  position:absolute; inset:0;
  mix-blend-mode: screen;
  opacity: 0.85;
}
.fx-aurora::before, .fx-aurora::after{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(120% 60% at 10% 20%, rgba(144,255,255,0.18), rgba(0,0,0,0) 60%),
    radial-gradient(120% 60% at 80% 10%, rgba(255,160,255,0.14), rgba(0,0,0,0) 60%),
    conic-gradient(from 0deg at 50% 50%, rgba(50,255,200,0.08), rgba(0,0,0,0), rgba(120,200,255,0.1), rgba(0,0,0,0));
  filter: blur(18px) saturate(10.15);
  animation: auroraShift 100s linear infinite;
}
.fx-aurora::after{
  animation-duration: 14s;
  filter: blur(24px) saturate(10.2);
  opacity: 0.7;
}

@keyframes auroraShift{
  0%{ transform: translate3d(-6%,0,0) rotate(0.2deg) }
  50%{ transform: translate3d(6%,0,0) rotate(-0.2deg) }
  100%{ transform: translate3d(-6%,0,0) rotate(0.2deg) }
}

.fx-snow{
  position:absolute; inset:0;
}
.fx-badge{
  position:absolute; bottom: 10px; right: 10px;
  padding: 6px 10px; border-radius: 10px;
  font-size: 0.9rem;
  color: #0c1b3a; background: rgba(255,255,255,0.9);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  font-weight: 600;
  opacity: 0; transform: translateY(6px);
  animation: badgeIn 400ms ease forwards 600ms;
}
@keyframes badgeIn{
  to{ opacity: 1; transform: translateY(0) }
}

/* reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce){
  .fx-aurora::before, .fx-aurora::after{ animation: none }
}



/* ===== Parallax für #sceneBackdrop/.backdrop-img (CSS-only) ===== */

/* Backdrop klebt oben, Inhalt scrollt darüber */
.scene-backdrop{
  position: sticky;
  top: 0;
  height: var(--backdrop-h, 52vh); /* kannst 44–60vh testen */
  overflow: hidden;                /* Bildränder sauber clippen */
  z-index: 0;
}

/* Bild für Parallax vorbereiten: vollflächig, vergrößert, Transform erlaubt */
.backdrop-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;               /* statt contain -> keine Lücken */
  transform-origin: center top;
  will-change: transform;
  transform: scale(1.15);          /* leichte Vergrößerung gegen Randlücken */
}

/* Inhalt über dem Bild */
.scene-content{
  position: relative;
  z-index: 1;
  transform: translateZ(0);
}

/* Moderne Scroll-Driven Animation (Chrome/Safari/Edge) */
.scene-frame{
  /* Die .scene-frame ist schon der Scroll-Container (overflow-y:auto) */
  scroll-timeline: sceneScroll block; /* Name + Achse als Shorthand */
}

.backdrop-img{
  animation: backdropParallax 1 linear both;
  animation-timeline: sceneScroll;
  animation-range: 0% 100%;
}

@keyframes backdropParallax{
  from { transform: translateY(0)    scale(1.15); }
  to   { transform: translateY(-14%) scale(1.15); } /* Effektstärke hier anpassen */
}