@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@800&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #030610;
}

#sky {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

.title-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Shippori Mincho', 'Yu Mincho', serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 4rem);
  color: #fdf5d0;
  letter-spacing: 0.18em;
  text-shadow:
    0 0 36px rgba(255, 228, 110, 0.95),
    0 0 12px rgba(255, 240, 180, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  animation: titleShow 4.5s ease forwards;
}

.title-wrap span { display: block; line-height: 1.2; }

@keyframes titleShow {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}

.tree {
  position: fixed;
  z-index: 2;
  left: 19%;
  bottom: 8vh;
  width: clamp(100px, 15vw, 180px);
  height: clamp(150px, 28vh, 260px);
  pointer-events: none;
  filter: drop-shadow(10px 12px 10px rgba(0, 0, 0, 0.28));
}

.tree-front-two {
  left: 4%;
  transform: scale(0.72);
  transform-origin: bottom left;
  opacity: 0.88;
}

.tree-front-three {
  left: 35%;
  transform: scale(0.56);
  transform-origin: bottom left;
  opacity: 0.78;
}

.tree-front-four {
  left: 60%;
  transform: scale(0.7);
  transform-origin: bottom left;
  opacity: 0.7;
}

.tree-front-five {
  left: 84%;
  transform: scale(0.48);
  transform-origin: bottom left;
  opacity: 0.62;
}

.tree-front-two .tree-crown {
  background:
    radial-gradient(circle at 25% 57%, #9b8b32 0 25%, transparent 26%),
    radial-gradient(circle at 65% 28%, #e0b84e 0 29%, transparent 30%),
    radial-gradient(circle at 76% 68%, #b89b38 0 27%, transparent 28%),
    radial-gradient(circle at 42% 35%, #f0cf68 0 26%, #92752c 64%, #3a321e 100%);
}

.tree-front-two .tree-crown::before,
.tree-front-two .tree-crown::after {
  background: linear-gradient(145deg, #e0b84e, #92752c 72%);
}

.tree-front-three .tree-crown {
  background:
    radial-gradient(circle at 27% 56%, #a15b27 0 25%, transparent 26%),
    radial-gradient(circle at 65% 30%, #e09a38 0 29%, transparent 30%),
    radial-gradient(circle at 75% 67%, #bd6e2d 0 27%, transparent 28%),
    radial-gradient(circle at 42% 34%, #eab04d 0 26%, #9a5127 64%, #33251d 100%);
}

.tree-front-three .tree-crown::before,
.tree-front-three .tree-crown::after {
  background: linear-gradient(145deg, #e09a38, #9a5127 72%);
}

.tree-trunk {
  position: absolute;
  z-index: 1;
  left: 47%;
  bottom: 0;
  width: 16%;
  height: 58%;
  border-radius: 45% 45% 12% 12%;
  background: linear-gradient(90deg, #24171a, #4b2d23 52%, #1c1519);
  transform-origin: bottom center;
  transform: rotate(4deg);
  animation: trunkSway 5s ease-in-out infinite;
}

@keyframes trunkSway {
  0%, 100% { transform: rotate(3deg); }
  50% { transform: rotate(5deg); }
}

.tree-back {
  left: 78%;
  bottom: 8vh;
  width: clamp(78px, 11vw, 132px);
  height: clamp(112px, 21vh, 192px);
  opacity: 0.72;
  transform: scale(0.82);
  transform-origin: bottom center;
  z-index: 2;
}

.tree-crown {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 5%;
  width: 92%;
  height: 64%;
  border-radius: 48% 52% 42% 50%;
  background:
    radial-gradient(circle at 29% 55%, #74692d 0 25%, transparent 26%),
    radial-gradient(circle at 65% 31%, #b18436 0 29%, transparent 30%),
    radial-gradient(circle at 74% 68%, #875d2a 0 27%, transparent 28%),
    radial-gradient(circle at 42% 35%, #cca146 0 26%, #6b4e2c 64%, #29291e 100%);
}

.tree-crown::before,
.tree-crown::after {
  content: '';
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #cca146, #6b4e2c 72%);
  box-shadow: inset -5px -6px 9px rgba(38, 27, 29, 0.22);
}

.tree-crown::before {
  left: -8%;
  top: 24%;
  width: 42%;
  height: 58%;
}

.tree-crown::after {
  right: -7%;
  top: 35%;
  width: 45%;
  height: 56%;
}

.tree-branch {
  position: absolute;
  z-index: 1;
  height: 5%;
  border-radius: 50%;
  background: linear-gradient(180deg, #59452b, #29251d);
  opacity: 0.78;
  transform-origin: left center;
}

.tree-branch-one { left: 45%; top: 32%; width: 34%; transform: rotate(-25deg); }
.tree-branch-two { left: 49%; top: 40%; width: 32%; transform: rotate(-8deg); }
.tree-branch-three { left: 51%; top: 48%; width: 35%; transform: rotate(12deg); }
.tree-branch-four { left: 48%; top: 55%; width: 29%; transform: rotate(25deg); }
.tree-branch-five { left: 43%; top: 38%; width: 27%; transform: rotate(164deg); }

.rocks {
  position: fixed;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 8vh;
  height: 9vh;
  pointer-events: none;
}

.rock {
  position: absolute;
  display: block;
  border-radius: 55% 45% 35% 30%;
  background: linear-gradient(145deg, #657078 0%, #3d464e 58%, #202830 100%);
  box-shadow: inset 5px 4px 5px rgba(210, 220, 212, 0.12), 0 4px 8px rgba(0, 0, 0, 0.42);
}

.rock-one { left: 31%; bottom: 1px; width: 44px; height: 25px; transform: rotate(-8deg); }
.rock-two { left: 36%; bottom: 0; width: 25px; height: 16px; transform: rotate(12deg); }
.rock-three { right: 17%; bottom: 2px; width: 34px; height: 20px; transform: rotate(-14deg); }
.rock-four { left: 55%; bottom: 1px; width: 30px; height: 18px; }
.rock-five { left: 72%; bottom: 3px; width: 40px; height: 23px; }

.mountain-trees {
  position: fixed;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.hill-tree {
  position: absolute;
  width: 4px;
  height: 25px;
  background: #111722;
  transform-origin: bottom center;
}

.hill-tree::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 22px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #080d18;
}

.hill-tree::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 28px;
  height: 35px;
  transform: translateX(-50%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: #111722;
}

.hill-tree-one { left: 52%; bottom: 15vh; transform: scale(0.8); }
.hill-tree-two { left: 70%; bottom: 31vh; transform: scale(0.55); }
.hill-tree-three { left: 88%; bottom: 24vh; transform: scale(0.7); }

.hill-tree-two { background: #151a1d; }
.hill-tree-three { background: #1b1a1b; }

.engawa {
  position: fixed;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  height: 9vh;
  min-height: 52px;
  pointer-events: none;
  perspective: 420px;
}

.engawa-floor {
  position: absolute;
  inset: 7% -2vw -1px;
  transform: rotateX(11deg);
  transform-origin: bottom;
  background:
    repeating-linear-gradient(90deg, rgba(45, 24, 17, 0.3) 0 2px, transparent 2px 48px),
    repeating-linear-gradient(0deg, rgba(224, 157, 82, 0.08) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #805537 0%, #4b2d21 58%, #1a1417 100%);
  border-top: 4px solid #a06b3a;
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.32), inset 0 8px 16px rgba(255, 204, 127, 0.08);
}

.engawa-rail {
  position: absolute;
  left: -2vw;
  right: -2vw;
  top: 9%;
  height: 13px;
  background: linear-gradient(180deg, #bd8245, #704429 55%, #3b241d);
  border-top: 2px solid rgba(255, 214, 145, 0.42);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.55);
}

.sanbo-wrap {
  position: fixed;
  bottom: 8vh;
  left: 74%;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  justify-content: center;
}

.sanbo-set {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dango-tower {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 1px;
}

.dango-tower::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 8px;
  bottom: 5px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #6b411e, #d29a54 45%, #70431e);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.45);
}

.dango-row { position: relative; z-index: 1; display: flex; gap: 1px; }

.dango {
  display: block;
  width: clamp(19px, 3vw, 26px);
  height: clamp(19px, 3vw, 26px);
  border-radius: 50%;
  background: radial-gradient(
    circle at 33% 30%,
    #fffefa 0%,
    #f4efe2 40%,
    #ddd5bc 78%,
    #c8be9e 100%
  );
  box-shadow: 0 1px 4px rgba(0,0,0,0.52), inset 0 -1px 3px rgba(0,0,0,0.1);
}

.sanbo-tray {
  width: clamp(68px, 10vw, 90px);
  height: 8px;
  background: linear-gradient(180deg, #c09448 0%, #8a6228 100%);
  border-radius: 2px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.6);
  margin-top: 0;
}

.sanbo-skirt {
  width: clamp(48px, 7.5vw, 62px);
  height: clamp(18px, 3vw, 26px);
  background: linear-gradient(180deg, #a07640 0%, #7a5828 100%);
  clip-path: polygon(12% 0%, 88% 0%, 100% 100%, 0% 100%);
  box-shadow: 0 4px 10px rgba(0,0,0,0.45);
}

@media (max-width: 480px) {
  .title-wrap { font-size: 2rem; }
  .tree { left: 4%; bottom: 9vh; transform: scale(0.8); transform-origin: bottom left; }
  .tree { bottom: 6vh; }
  .tree-front-two { left: -8%; }
  .tree-front-three { left: 20%; }
  .tree-front-four { left: 47%; }
  .tree-front-five { left: 76%; }
  .hill-tree-one { bottom: 18vh; }
  .hill-tree-two { bottom: 30vh; }
  .hill-tree-three { bottom: 25vh; }
  .engawa { height: 8vh; min-height: 48px; }
  .sanbo-wrap { bottom: 7vh; left: 73%; }
}