:root {
  --soil: #21160F;
  --cedar: #314227;
  --moss: #6F8B3E;
  --amber: #F2A84B;
  --wax: #FFE1A8;
  --peach: #F68F6A;
  --violet: #7C5AA6;
  --red: #B9412B;
  --pixel: 6px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--wax);
  background: linear-gradient(135deg, #21160F 0%, #314227 32%, #7C5AA6 68%, #F68F6A 100%);
  font-family: "Noto Sans JP", Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 225, 168, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 225, 168, .05) 1px, transparent 1px);
  background-size: 24px 24px;
  mix-blend-mode: screen;
  opacity: .65;
  z-index: 3;
}

.sky-glow {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 13% 45%, rgba(242, 168, 75, .44), transparent 24%),
    radial-gradient(circle at 74% 18%, rgba(246, 143, 106, .32), transparent 32%),
    linear-gradient(180deg, rgba(124, 90, 166, .5), rgba(33, 22, 15, .35));
  filter: saturate(1.2);
  z-index: 0;
}

.cedars {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38vh;
  background:
    linear-gradient(135deg, transparent 48%, rgba(49, 66, 39, .92) 49% 58%, transparent 59%) 0 0/86px 100%,
    linear-gradient(225deg, transparent 48%, rgba(33, 22, 15, .94) 49% 60%, transparent 61%) 34px 18px/110px 100%;
  opacity: .68;
  z-index: 1;
}

.weather {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
}

.drop, .petal-sprite {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--wax);
  opacity: .45;
  image-rendering: pixelated;
  animation: fall linear infinite;
}

.petal-sprite { background: var(--peach); box-shadow: 6px 0 0 var(--peach), 0 6px 0 var(--peach); opacity: .55; }

@keyframes fall { to { transform: translate3d(-24px, 112vh, 0) rotate(90deg); } }

.shrine { position: relative; z-index: 2; }

.room {
  position: relative;
  min-height: 100vh;
  padding: 8vh 8vw;
  overflow: hidden;
}

.gate-tile {
  display: grid;
  grid-template-columns: minmax(150px, 20vw) 1fr;
  align-items: end;
  background:
    radial-gradient(circle at 20% 72%, rgba(242, 168, 75, .2), transparent 22%),
    linear-gradient(180deg, rgba(33,22,15,.52), rgba(33,22,15,.92));
}

.tile-field {
  position: absolute;
  inset: auto 0 0 0;
  height: 46vh;
  background-image:
    linear-gradient(45deg, rgba(111,139,62,.42) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(49,66,39,.52) 25%, transparent 25%),
    linear-gradient(rgba(255,225,168,.08) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,225,168,.08) 2px, transparent 2px);
  background-size: 72px 72px, 72px 72px, 36px 36px, 36px 36px;
  clip-path: polygon(0 16%, 18% 7%, 34% 20%, 53% 9%, 71% 17%, 100% 4%, 100% 100%, 0 100%);
  z-index: 0;
}

.candle-column {
  position: sticky;
  top: 8vh;
  z-index: 5;
  align-self: start;
  min-height: 80vh;
}

.candle-title, .micro-label, .stamp, .sigil, .light-button {
  font-family: "Press Start 2P", ui-monospace, monospace;
  letter-spacing: .04em;
}

.candle-title { color: var(--moss); font-size: clamp(9px, 1vw, 12px); line-height: 1.8; margin: 2vh 0 3vh 8px; }

.candle {
  position: relative;
  width: 104px;
  height: 54vh;
  min-height: 340px;
  margin-left: 14px;
  background: linear-gradient(90deg, #FFE1A8 0 18%, #F2A84B 18% 30%, #FFE1A8 30% 78%, #F68F6A 78% 100%);
  box-shadow: 0 0 0 6px var(--soil), 18px 18px 0 rgba(33,22,15,.6), 0 0 70px rgba(242,168,75,.45);
  border-radius: 4px 4px 18px 10px;
}

.flame {
  position: absolute;
  left: 20px;
  top: -74px;
  width: 66px;
  height: 78px;
  background: var(--amber);
  clip-path: polygon(48% 0, 76% 28%, 88% 63%, 66% 100%, 30% 100%, 10% 64%, 24% 30%);
  box-shadow: 0 0 0 6px var(--red), 0 0 48px 20px rgba(242,168,75,.72);
  animation: flameStep .46s steps(2, end) infinite;
}

.flame i { position: absolute; inset: 20px 20px 10px; background: var(--wax); clip-path: polygon(48% 0, 74% 38%, 62% 100%, 28% 100%, 18% 45%); }

@keyframes flameStep { 50% { transform: translateX(4px) scaleY(.94); filter: brightness(1.2); } }

.wick { position: absolute; top: 4px; left: 48px; width: 12px; height: 22px; background: var(--soil); }
.wax-pixel { position: absolute; width: 18px; height: 18px; background: var(--wax); }
.wax-a { right: 8px; top: 60px; } .wax-b { left: 16px; top: 128px; }
.drip { position: absolute; width: 16px; height: 42px; background: var(--amber); animation: drip 2.8s steps(5, end) infinite; }
.drip-one { right: 22px; top: 102px; } .drip-two { left: 12px; top: 212px; animation-delay: 1.1s; }
@keyframes drip { 0%, 70% { height: 12px; } 100% { height: 54px; opacity: .3; } }

.clay-fox {
  position: relative;
  width: 74px;
  height: 56px;
  margin: 34px 0 0 42px;
  background: var(--red);
  box-shadow: 0 0 0 6px var(--soil), 8px 8px 0 rgba(33,22,15,.55);
  animation: foxBob 3.4s cubic-bezier(.3,1.6,.5,1) infinite;
}
.fox-ear { position: absolute; top: -20px; width: 24px; height: 24px; background: var(--red); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.fox-ear.left { left: 6px; } .fox-ear.right { right: 6px; }
.fox-eye { position: absolute; right: 18px; top: 22px; width: 8px; height: 8px; background: var(--soil); animation: blink 5s steps(1,end) infinite; }
.fox-tail { position: absolute; right: -24px; bottom: 4px; width: 32px; height: 20px; background: var(--wax); }
@keyframes foxBob { 50% { transform: translateY(-8px); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 94%, 96% { transform: scaleY(.1); } }

.charm-rail { position: absolute; top: 12vh; left: 25vw; right: 5vw; height: 120px; transform: rotate(-2.5deg); z-index: 6; }
.cord { position: absolute; left: 0; right: 0; top: 18px; height: 5px; background: var(--soil); box-shadow: 0 4px 0 rgba(255,225,168,.2); }
.paper-charm { position: absolute; top: 22px; width: 58px; min-height: 82px; padding-top: 18px; text-align: center; background: var(--wax); color: var(--soil); font-family: "Press Start 2P", monospace; font-size: 12px; box-shadow: 0 0 0 5px var(--soil), 8px 8px 0 rgba(33,22,15,.45); transform-origin: 50% -16px; animation: charmSwing 2.9s steps(4,end) infinite; }
.paper-charm::before { content: ""; position: absolute; top: -20px; left: 26px; width: 5px; height: 24px; background: var(--soil); }
.charm-red { left: 4%; background: var(--red); color: var(--wax); }
.charm-cream { left: 27%; animation-delay: .4s; }
.charm-violet { left: 55%; background: var(--violet); color: var(--wax); animation-delay: .8s; }
.charm-moss { left: 81%; background: var(--moss); animation-delay: .2s; }
@keyframes charmSwing { 50% { transform: rotate(5deg) translateY(4px); } }

.title-stone { position: relative; z-index: 4; grid-column: 2; max-width: 760px; margin: 26vh 0 10vh 5vw; padding: 34px 36px 42px; background: rgba(33,22,15,.78); clip-path: polygon(0 10%, 8% 0, 100% 0, 96% 84%, 86% 100%, 0 92%); box-shadow: 12px 12px 0 rgba(49,66,39,.82), -8px -8px 0 rgba(242,168,75,.3); }
.micro-label { color: var(--amber); font-size: 10px; line-height: 1.8; }
h1, h2, h3 { font-family: "Bungee", Impact, fantasy; margin: 0; font-weight: 400; line-height: .95; }
h1 { font-size: clamp(64px, 14vw, 176px); color: var(--wax); text-shadow: 8px 0 0 var(--red), 14px 12px 0 var(--soil), -4px -4px 0 var(--amber); letter-spacing: .02em; }
.gate-note { max-width: 540px; font-size: clamp(16px, 2vw, 22px); line-height: 1.7; color: rgba(255,225,168,.9); }
.light-button { position: absolute; z-index: 7; right: 12vw; bottom: 16vh; border: 0; color: var(--soil); background: var(--amber); padding: 18px 22px; cursor: pointer; box-shadow: 0 0 0 6px var(--soil), 8px 8px 0 var(--red); }
.light-button:hover { transform: translate(-2px, -2px); box-shadow: 0 0 0 6px var(--soil), 12px 12px 0 var(--red), 0 0 38px var(--amber); }
.bloom { position: absolute; left: 66px; top: 22vh; width: 30px; height: 30px; background: var(--amber); opacity: 0; pointer-events: none; z-index: 3; box-shadow: 0 0 0 0 rgba(242,168,75,.0); }
.bloom.lit { animation: bloomLight 1.4s steps(10,end) forwards; }
@keyframes bloomLight { 0% { opacity: .9; box-shadow: 0 0 0 0 rgba(242,168,75,.65); } 100% { opacity: 0; box-shadow: 0 0 0 80vmax rgba(242,168,75,.16); } }

.reveal-room { opacity: .32; transform: translateY(48px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,1.35,.35,1); }
.reveal-room.settled { opacity: 1; transform: translateY(0); }
.plaque, .archive-inset, .final-plaque { position: relative; background: rgba(255,225,168,.9); color: var(--soil); padding: 32px; box-shadow: 0 0 0 6px var(--soil), 16px 16px 0 rgba(33,22,15,.5); clip-path: polygon(0 8%, 10% 0, 100% 0, 96% 92%, 86% 100%, 0 100%); }
.plaque h2, .archive-inset h2, .final-plaque h2 { font-size: clamp(34px, 6vw, 78px); color: var(--red); text-shadow: 4px 4px 0 rgba(242,168,75,.6); }
.plaque p, .archive-inset p, .final-plaque p { font-size: 18px; line-height: 1.8; max-width: 620px; }

.candle-shelf { background: linear-gradient(180deg, rgba(49,66,39,.72), rgba(33,22,15,.86)); }
.wax-label { width: min(760px, 66vw); margin: 12vh 0 0 29vw; }
.ledge { position: absolute; height: 86px; background: var(--cedar); box-shadow: 0 0 0 6px var(--soil), inset 0 18px 0 rgba(111,139,62,.45); }
.ledge-left { left: -3vw; top: 18vh; width: 48vw; clip-path: polygon(0 0, 92% 0, 100% 50%, 88% 100%, 0 100%); }
.moth-orbit { position: absolute; left: 22vw; top: 26vh; width: 260px; height: 260px; animation: orbit 7s linear infinite; }
.moth { position: absolute; width: 10px; height: 10px; background: var(--wax); box-shadow: 10px 0 0 var(--amber), 0 10px 0 var(--wax); }
.m1 { left: 30px; top: 20px; } .m2 { right: 12px; top: 90px; } .m3 { left: 120px; bottom: 18px; }
@keyframes orbit { to { transform: rotate(360deg); } }
.stone-stack { position: absolute; right: 8vw; bottom: 12vh; display: grid; gap: 10px; transform: rotate(3deg); }
.stone-stack span { width: 180px; height: 42px; background: var(--moss); box-shadow: 0 0 0 5px var(--soil); }
.stone-stack span:nth-child(2) { width: 220px; margin-left: -38px; background: var(--cedar); }
.stone-stack span:nth-child(3) { width: 145px; margin-left: 24px; }

.spring-board { background: linear-gradient(160deg, rgba(124,90,166,.62), rgba(49,66,39,.86)); }
.crooked-board { position: relative; width: min(900px, 82vw); margin: 12vh 0 0 8vw; min-height: 560px; border-top: 18px solid var(--soil); transform: rotate(-1.5deg); }
.ema { width: min(640px, 65vw); background: #F2A84B; }
.seed-packet { position: absolute; right: 0; bottom: 28px; width: min(360px, 42vw); background: #FFE1A8; transform: rotate(5deg); }
.stamp { display: inline-block; margin-bottom: 18px; color: var(--cedar); font-size: 10px; }
.sprout-bed { position: absolute; left: 5vw; right: 4vw; bottom: 11vh; height: 130px; background: rgba(33,22,15,.45); box-shadow: inset 0 0 0 6px var(--soil); }
.sprout-bed span { position: absolute; bottom: 24px; width: 14px; height: 42px; background: var(--moss); animation: sprout 2.4s steps(4,end) infinite; }
.sprout-bed span::before, .sprout-bed span::after { content:""; position: absolute; top: 8px; width: 20px; height: 12px; background: var(--moss); }
.sprout-bed span::before { right: 12px; } .sprout-bed span::after { left: 12px; }
.sprout-bed span:nth-child(1) { left: 12%; } .sprout-bed span:nth-child(2) { left: 28%; animation-delay: .3s; } .sprout-bed span:nth-child(3) { left: 49%; animation-delay: .8s; } .sprout-bed span:nth-child(4) { left: 66%; animation-delay: .5s; } .sprout-bed span:nth-child(5) { left: 83%; animation-delay: 1.1s; }
@keyframes sprout { 0% { transform: scaleY(.25); } 60%,100% { transform: scaleY(1); } }

.moss-archive { background: linear-gradient(180deg, rgba(33,22,15,.75), rgba(49,66,39,.88)); }
.archive-inset { width: min(720px, 74vw); margin: 16vh 0 0 38vw; background: var(--cedar); color: var(--wax); }
.archive-inset h2 { color: var(--amber); }
.archive-tiles { position: absolute; left: 9vw; top: 18vh; display: grid; grid-template-columns: repeat(2, 130px); gap: 24px; transform: rotate(-4deg); }
.tile-object { height: 130px; padding: 20px; background: var(--soil); color: var(--wax); font-family: "Bungee", Impact, fantasy; font-size: 46px; box-shadow: 0 0 0 6px var(--moss), 12px 12px 0 rgba(33,22,15,.5); }
.tile-object small { display: block; font-family: "Press Start 2P", monospace; font-size: 9px; color: var(--amber); }
.rain { color: var(--violet); } .ember { color: var(--amber); transform: translateY(62px); } .petal { color: var(--peach); grid-column: 2; }

.evening-gradient { display: flex; align-items: center; justify-content: flex-end; background: linear-gradient(135deg, #21160F 0%, #314227 32%, #7C5AA6 68%, #F68F6A 100%); }
.final-plaque { width: min(720px, 76vw); margin-right: 6vw; background: rgba(33,22,15,.78); color: var(--wax); }
.final-plaque h2 { color: var(--wax); }
.pixel-moon { position: absolute; left: 16vw; top: 24vh; width: 92px; height: 92px; background: var(--wax); box-shadow: 0 0 0 8px var(--soil), 0 0 60px rgba(255,225,168,.55); clip-path: polygon(0 16%, 16% 16%, 16% 0, 84% 0, 84% 16%, 100% 16%, 100% 84%, 84% 84%, 84% 100%, 16% 100%, 16% 84%, 0 84%); }

body.is-lit .title-stone, body.is-lit .paper-charm, body.is-lit .plaque { filter: brightness(1.08) saturate(1.08); }

@media (max-width: 760px) {
  .gate-tile { display: block; padding: 5vh 5vw; }
  .candle-column { position: relative; min-height: 300px; transform: scale(.72); transform-origin: left top; }
  .title-stone { margin: -4vh 0 16vh 20vw; padding: 24px; }
  .charm-rail { left: 8vw; right: 2vw; top: 8vh; transform: scale(.76) rotate(-3deg); transform-origin: left top; }
  .wax-label, .archive-inset { margin-left: 8vw; width: 84vw; }
  .seed-packet { position: relative; margin-top: 28px; width: 76vw; }
  .archive-tiles { opacity: .35; left: 3vw; }
}