@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800&display=swap");

:root {
  --font: "Nunito", "Segoe UI", sans-serif;
  --radius: 28px;
  --radius-sm: 16px;
  --cream: #fff1db;
  --ink: #2c1608;
  --star: #ffd56a;
  --amber: #ffb528;
  --wood-1: #7a4a1a;
  --wood-2: #c48a3a;
  --wood-3: #8b5a22;
  --wood-deep: #4a2a0e;
  --plaque: linear-gradient(180deg, rgba(255, 220, 150, 0.22), transparent 42%),
    linear-gradient(90deg, #6f4014 0%, #c99242 38%, #8a541c 100%);
  --grain: repeating-linear-gradient(
    90deg,
    transparent 0 11px,
    rgba(80, 40, 8, 0.07) 11px 12px
  );
  --shadow: 0 10px 28px rgba(40, 16, 0, 0.35);
  --glow: rgba(255, 213, 106, 0.55);
  --bamboo: #7aa13f;
  --bamboo-mid: #628a32;
  --bamboo-deep: #4f6f24;
  --bamboo-lit: #d4e87a;
  --bamboo-node: #3d5818;
  --leaf: #6b9a3a;
  --leaf-dark: #3f641c;
  --leaf-lit: #8fbf4e;
}

html[data-theme="night"] {
  --ink: #fff1db;
  --cream: #f6e6c8;
  --wood-1: #3a1c08;
  --wood-2: #7a4a18;
  --wood-3: #5a3010;
  --wood-deep: #1c0c04;
  --plaque: linear-gradient(180deg, rgba(255, 200, 120, 0.12), transparent 42%),
    linear-gradient(90deg, #3d1c08 0%, #7a4a18 42%, #4a280c 100%);
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  --bamboo: #5a7d2c;
  --bamboo-mid: #4a6824;
  --bamboo-deep: #354a18;
  --bamboo-lit: #9aaa4a;
  --bamboo-node: #2a3a10;
  --leaf: #4e7328;
  --leaf-dark: #2c4a14;
  --leaf-lit: #6a8f34;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: var(--font);
  color: var(--ink);
}

body.overlay {
  background: transparent;
  overflow: hidden;
}

.plaque {
  position: relative;
  background: var(--plaque);
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 230, 180, 0.35),
    inset 0 -8px 16px rgba(40, 16, 0, 0.22);
  overflow: hidden;
}

.plaque::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grain);
  pointer-events: none;
  opacity: 0.9;
}

.plaque > * {
  position: relative;
}

.star {
  width: 18px;
  height: 18px;
  color: var(--star);
  filter: drop-shadow(0 0 6px var(--glow));
}

.lantern-glow {
  animation: glow 2.8s ease-in-out infinite;
}

@keyframes glow {
  0%,
  100% {
    filter: drop-shadow(0 0 4px var(--glow));
    opacity: 0.85;
  }
  50% {
    filter: drop-shadow(0 0 12px var(--glow));
    opacity: 1;
  }
}

@keyframes floaty {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes leaf-sway {
  0%,
  100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(5deg);
  }
}

.plaque-frame {
  position: relative;
  display: block;
}

.plaque-frame .bamboo {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
  filter: drop-shadow(0 4px 6px rgba(20, 8, 0, 0.3));
}

.plaque-frame .bamboo-stems {
  left: -18px;
  top: -2%;
  height: 112%;
  width: 64px;
}

.plaque-frame .bamboo-leaves {
  right: -28px;
  top: -14%;
  height: 88%;
  width: 108px;
  transform-origin: 12% 8%;
  animation: leaf-sway 5s ease-in-out infinite;
}