:root {
  --shrine-red: #c9423a;
  --shrine-deep: #7f1f25;
  --shrine-gold: #e6b85c;
  --paper: #fffaf0;
  --ink: #272019;
}
.omikuji-page {
  width: min(1120px, calc(100% - clamp(28px, 6vw, 100px)));
  margin: 0 auto;
  padding: 54px 0 100px;
}
.omikuji-heading {
  text-align: center;
}
.omikuji-heading h1 {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(2.7rem, 7vw, 5.6rem);
  line-height: 1.12;
}
.omikuji-heading > p:last-child {
  color: var(--muted);
}
.fortune-stage {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(260px, 0.75fr);
  align-items: center;
  gap: clamp(30px, 7vw, 90px);
  min-height: 500px;
  margin-top: 42px;
  padding: clamp(28px, 5vw, 64px);
  overflow: hidden;
  border: 1px solid rgba(230, 184, 92, 0.24);
  border-radius: 30px;
  background:
    radial-gradient(
      circle at 25% 20%,
      rgba(201, 66, 58, 0.18),
      transparent 34%
    ),
    linear-gradient(145deg, #171315, #27191c);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.25);
}
.omikuji-box {
  position: relative;
  width: min(100%, 330px);
  height: 410px;
  margin: auto;
  transform-origin: 50% 80%;
}
.cylinder {
  position: absolute;
  z-index: 2;
  bottom: 10px;
  left: 50%;
  width: 250px;
  height: 315px;
  transform: translateX(-50%);
  border: 4px solid #5c151a;
  border-radius: 30px 30px 55px 55px;
  background: linear-gradient(
    90deg,
    #7f1f25,
    #c9423a 30%,
    #da554a 52%,
    #9a2930 82%,
    #68171d
  );
  box-shadow:
    inset 14px 0 24px rgba(255, 255, 255, 0.12),
    inset -18px 0 26px rgba(50, 0, 0, 0.32),
    0 30px 35px rgba(0, 0, 0, 0.35);
}
.cylinder > span {
  position: absolute;
  top: 90px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  transform: translateX(-50%);
  border: 3px solid var(--shrine-gold);
  border-radius: 50%;
  color: var(--shrine-gold);
  font-family: "Yu Mincho", serif;
  font-size: 3.8rem;
  font-weight: 900;
}
.cylinder > i {
  position: absolute;
  right: 20px;
  bottom: 18px;
  left: 20px;
  height: 8px;
  border-radius: 50%;
  background: rgba(75, 5, 10, 0.45);
}
.cylinder-rim,
.cylinder-front-rim {
  position: absolute;
  top: 65px;
  left: 50%;
  width: 264px;
  height: 54px;
  transform: translateX(-50%);
  border: 4px solid #59151b;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    #291113 0 42%,
    #a42e34 44% 62%,
    #dc5b4e 65% 74%,
    #721a20 76%
  );
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.35);
}
.cylinder-rim {
  z-index: 3;
}
.cylinder-front-rim {
  z-index: 5;
  clip-path: inset(50% 0 0 0);
  pointer-events: none;
}
.stick {
  position: absolute;
  z-index: 4;
  top: 22px;
  left: 50%;
  width: 34px;
  height: 230px;
  opacity: 0;
  transform: translate(-50%, 110px);
  clip-path: inset(0 0 84px 0);
  border: 2px solid #b68b52;
  border-radius: 5px;
  background: linear-gradient(90deg, #d6b378, #fff1c6 48%, #c79659);
  box-shadow: 0 10px 16px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.65s cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 0.18s;
}
.stick span {
  display: block;
  padding-top: 10px;
  color: #713028;
  font-family: "Yu Mincho", serif;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  writing-mode: vertical-rl;
}
.omikuji-box.has-stick .stick {
  opacity: 1;
  transform: translate(-50%, -70px);
}
.omikuji-box.is-drawing {
  animation: shake 1.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.omikuji-box.is-drawing .stick {
  opacity: 0;
}
.omikuji-box.is-drawing .cylinder {
  box-shadow:
    inset 14px 0 24px rgba(255, 255, 255, 0.12),
    inset -18px 0 26px rgba(50, 0, 0, 0.32),
    0 38px 48px rgba(0, 0, 0, 0.48);
}
.fortune-actions {
  text-align: center;
}
.fortune-actions p {
  min-height: 30px;
  color: #dec8d3;
}
.fortune-actions button {
  min-width: 210px;
  min-height: 58px;
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--shrine-red), var(--shrine-deep));
  box-shadow: 0 15px 30px rgba(160, 35, 40, 0.3);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition:
    transform 0.2s,
    filter 0.2s;
}
.fortune-actions button:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
button:disabled {
  cursor: wait;
  opacity: 0.6;
}
.result-card {
  position: relative;
  width: min(620px, 100%);
  margin: 42px auto 0;
  padding: clamp(38px, 6vw, 70px);
  overflow: hidden;
  border: 1px solid #e8d7b8;
  border-radius: 8px;
  color: var(--ink);
  background:
    linear-gradient(rgba(255, 250, 240, 0.94), rgba(255, 250, 240, 0.94)),
    repeating-linear-gradient(
      90deg,
      transparent 0 24px,
      rgba(127, 31, 37, 0.08) 25px
    );
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.24);
  text-align: center;
  animation: reveal 0.5s ease-out;
}
.result-card::before,
.result-card::after {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  width: 5px;
  background: var(--shrine-red);
}
.result-card::before {
  left: 14px;
}
.result-card::after {
  right: 14px;
}
.result-card .eyebrow {
  color: var(--shrine-deep);
}
.result-card h2 {
  margin: 12px 0 18px;
  color: var(--shrine-red);
  font-family: "Yu Mincho", serif;
  font-size: clamp(4rem, 13vw, 7.2rem);
  line-height: 1;
}
.result-card > p:not(.eyebrow) {
  max-width: 420px;
  margin: 0 auto 26px;
  font-size: 1.05rem;
}
.result-seal {
  display: inline-block;
  padding: 4px 9px;
  border: 2px solid var(--shrine-red);
  color: var(--shrine-red);
  font-family: "Yu Mincho", serif;
  font-weight: 900;
  transform: rotate(-5deg);
}
.lucky-item {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 24px;
  padding: 12px;
  border-top: 1px solid #d9c7a7;
  border-bottom: 1px solid #d9c7a7;
}
.lucky-item span {
  color: #806c50;
}
@keyframes shake {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0);
  }
  10% {
    transform: translate3d(-18px, -7px, 0) rotate(-7deg);
  }
  20% {
    transform: translate3d(20px, 4px, 0) rotate(8deg);
  }
  30% {
    transform: translate3d(-22px, -5px, 0) rotate(-9deg);
  }
  40% {
    transform: translate3d(22px, 5px, 0) rotate(9deg);
  }
  50% {
    transform: translate3d(-18px, -8px, 0) rotate(-7deg);
  }
  60% {
    transform: translate3d(18px, 4px, 0) rotate(7deg);
  }
  70% {
    transform: translate3d(-13px, -4px, 0) rotate(-5deg);
  }
  80% {
    transform: translate3d(12px, 3px, 0) rotate(5deg);
  }
  90% {
    transform: translate3d(-5px, -2px, 0) rotate(-2deg);
  }
}
@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 760px) {
  .fortune-stage {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .omikuji-box {
    height: 390px;
  }
  .fortune-actions {
    margin-top: -20px;
  }
  .omikuji-heading h1 br {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .omikuji-box.is-drawing {
    animation: gentle-shake 0.7s ease-in-out 2;
  }
  .stick,
  .result-card {
    transition-duration: 0.15s;
    animation: none;
  }
}
@keyframes gentle-shake {
  0%,
  100% {
    transform: rotate(0);
  }
  35% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
}