:root {
  --maroon-d: #3d1320;
  --maroon: #5e1f2d;
  --gold: #ffcf6b;
  --cream: #fff3da;
  --panel-bg: rgba(255, 255, 255, 0.10);
  --panel-border: rgba(255, 255, 255, 0.28);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; } /* no scroll anywhere; scene fills the viewport */
body { font-family: "Mukta", system-ui, sans-serif; background: var(--maroon-d); color: var(--cream); }

.scene {
  position: relative; overflow: hidden; height: 100dvh; width: 100%;
  background: url("../assets/background_16_9.png") center center / cover no-repeat, var(--maroon-d);
  display: flex; flex-direction: column; align-items: center;
  padding: 2vh 4vw 6vh; gap: 3vh;
}

.layer.garlands { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; }
.hanging { position: absolute; top: -8.6vw; width: 12vw; display: block;
  transform-origin: top center; animation: sway 3.2s ease-in-out infinite; }
.hanging-left { left: -8.1vw; }
.hanging-right { right: -0.5vw; animation-delay: .6s; }

.glass-card {
  position: relative; z-index: 3; margin-top: 19vh; width: 33vw; min-width: 0;
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 20px; padding: clamp(10px, 1.6vw, 16px) clamp(14px, 2.4vw, 22px); text-align: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
  animation: cardglow 4s ease-in-out infinite;
}
.route { font-family: "Baloo 2", cursive; font-size: clamp(17px, 2.7vw, 40px); color: var(--cream); margin-bottom: 12px; line-height: 1.15; }
.flag { font-size: 0.8em; }

.countdown { display: flex; align-items: center; justify-content: center; gap: clamp(3px, 0.8vw, 8px); }
.unit { background: rgba(0,0,0,.22); border-radius: 12px; padding: clamp(4px,0.8vw,8px) clamp(5px,1.1vw,12px); min-width: clamp(34px, 4.2vw, 64px); }
.unit .label { display: block; font-size: 12px; letter-spacing: 1px; opacity: .8; text-transform: uppercase; }
.unit .value { font-family: "Baloo 2", cursive; font-size: clamp(17px, 3.2vw, 32px); font-weight: 800; color: var(--gold); }
.sep { font-size: clamp(13px, 2.4vw, 26px); color: var(--gold); opacity: .7; }
.subline { font-family: "Baloo 2", cursive; margin-top: 12px; font-size: clamp(13px, 2.6vw, 18px); }

.characters { position: absolute; left: 50%; bottom: 7.5vh; transform: translateX(-50%); z-index: 2;
  display: flex; align-items: flex-end; justify-content: center; gap: 2vw;
  /* size characters by HEIGHT so every pose shares the day bears' stature */
  --char-h: clamp(139px, calc(113px + 7.7vw), 261px); }
.char { filter: drop-shadow(0 8px 10px rgba(0,0,0,.4)); }
.char.bubu { height: var(--char-h); width: auto; animation: bob 1.3s ease-in-out infinite; transform-origin: bottom center; }
.char.bubu.is-shy { animation: none; transform: none; }
/* bubu-sleep is a lying-down pose: keep it short + wide, on the ground */
.char.bubu.pose-lying { height: auto; width: calc(var(--char-h) * 0.92); animation: none; transform: none; }

.dudu-container {
  height: var(--char-h);
  width: max-content;
  perspective: 1000px;
  cursor: pointer;
  z-index: 5;
  transform-origin: bottom center;
  animation: bob 1.3s ease-in-out .28s infinite;
}
.dudu-container.no-bob {
  animation: none !important;
}
.char-flip {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}
.char-face {
  backface-visibility: hidden;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.char-face.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
}
.char-face img {
  height: 100%;
  width: auto;
  display: block;
}

@keyframes paperFlip {
  0% { transform: rotateY(var(--from-rot)) scaleX(1) translateY(0); }
  15% { transform: rotateY(var(--from-rot)) scaleX(1.08) scaleY(0.92) translateY(4px); }
  30% { transform: rotateY(calc(var(--from-rot) + var(--dir) * 45deg)) scaleX(0.6) scaleY(1.1) translateY(-16px); }
  50% { transform: rotateY(calc(var(--from-rot) + var(--dir) * 90deg)) scaleX(0.05) scaleY(1.15) translateY(-22px); }
  70% { transform: rotateY(calc(var(--from-rot) + var(--dir) * 135deg)) scaleX(0.6) scaleY(1.1) translateY(-16px); }
  85% { transform: rotateY(calc(var(--from-rot) + var(--dir) * 170deg)) scaleX(1.05) scaleY(0.94) translateY(4px); }
  92% { transform: rotateY(calc(var(--from-rot) + var(--dir) * 180deg)) scaleX(0.96) scaleY(1.04) translateY(-4px); }
  100% { transform: rotateY(var(--to-rot)) scaleX(1) scaleY(1) translateY(0); }
}

.char-flip.flipping {
  animation: paperFlip 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.bag { width: clamp(86px, calc(70px + 4.7vw), 160px); align-self: flex-end; }

.diyas { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.dia { position: absolute; bottom: 2vh; width: clamp(90px, 11vw, 150px);
  filter: drop-shadow(0 0 12px rgba(255,180,80,.55)); animation: diaglow 2.4s ease-in-out infinite; }
.dia-left { left: 2vw; }
.dia-right { right: 2vw; animation-delay: 1.1s; }

.daily-panels { display: none; z-index: 3; gap: 16px; flex-wrap: wrap; justify-content: center; width: min(680px, 92vw); }
.panel { flex: 1; min-width: 220px; background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 16px; padding: 14px 18px; backdrop-filter: blur(6px); }
.panel-label { display: block; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; opacity: .8; margin-bottom: 6px; }
.word-panel strong { font-family: "Baloo 2", cursive; font-size: 22px; color: var(--gold); }
.word-panel em { display: block; opacity: .85; margin: 2px 0; }

.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9; }

.flower-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.flower { position: absolute; bottom: -12vh; opacity: 0; will-change: transform, opacity;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.25));
  animation: floatUp var(--dur, 12s) linear var(--delay, 0s) infinite; }
@keyframes floatUp {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: .85; }
  90%  { opacity: .85; }
  100% { transform: translate(var(--drift, 0), -120vh) rotate(var(--spin, 360deg)); opacity: 0; }
}

.settings-panel { position: fixed; top: 0; left: 50%; transform: translateX(-50%) translateY(-100%);
  background: var(--maroon); border: 1px solid var(--panel-border); border-top: none;
  border-radius: 0 0 16px 16px; padding: 18px 22px; z-index: 20; transition: transform .35s ease;
  display: flex; flex-direction: column; gap: 12px; width: min(420px, 94vw); }
.settings-panel.open { transform: translateX(-50%) translateY(0); }
.settings-panel[hidden] { display: none; }
.settings-panel input { width: 100%; padding: 8px; border-radius: 8px; border: none; }
.settings-actions { display: flex; gap: 8px; }
.settings-panel button { flex: 1; padding: 8px; border: none; border-radius: 8px; background: var(--gold); color: var(--maroon-d); font-weight: 700; cursor: pointer; }
.debug-label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; opacity: .7; margin-top: 4px; }

.corner-btn { position: fixed; top: 12px; z-index: 25;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--panel-border); background: var(--panel-bg); color: var(--cream);
  font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.mute-toggle { right: 12px; }
.notify-toggle { right: 64px; }
.corner-btn:disabled { opacity: .45; cursor: default; }

.scene.celebrate .subline { font-size: clamp(20px, 5vw, 32px); color: var(--gold); }

@keyframes bob { 0%,100% { transform: translateY(0) rotate(-2.5deg); } 50% { transform: translateY(-5px) rotate(2.5deg); } }
@keyframes sway { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes diaglow { 0%,100% { filter: drop-shadow(0 0 10px rgba(255,170,70,.45)); } 50% { filter: drop-shadow(0 0 18px rgba(255,200,110,.8)); } }
@keyframes cardglow { 0%,100% { box-shadow: 0 8px 40px rgba(0,0,0,.35); } 50% { box-shadow: 0 8px 50px rgba(255,207,107,.35); } }

@media (max-width: 700px) {
  /* overlay too narrow at 1/3 here: go wide and sit at the very top */
  .glass-card { margin-top: 2.5vh; width: 90vw; }
  .characters { gap: 1vw; bottom: 5vh; }
  .daily-panels { flex-direction: column; }
  /* drawer is a centered dialog (neither top nor bottom) */
  .settings-panel { top: 50%; bottom: auto; left: 50%; width: min(420px, 90vw);
    transform: translate(-50%, -46%); opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
    border-radius: 16px; border: 1px solid var(--panel-border); }
  .settings-panel.open { transform: translate(-50%, -50%); opacity: 1; }
}

/* Portrait-aspect viewports: keep the detailed (landscape) mandala artwork — the
   portrait asset is too sparse (mostly empty red) — and drop the hanging garlands,
   which clutter the narrow view. */
@media (orientation: portrait) {
  .hanging { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .char.bubu, .char.dudu, .hanging, .glass-card { animation: none !important; }
}