.omikuji-hero{
  padding:30px 0 18px;
}

.omikuji-shell{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:20px;
  align-items:center;
  padding:22px;
  border-radius:24px;
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,244,250,.96));
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.76);
}

.omikuji-kicker{
  margin:0 0 8px;
  color:#9a516d;
  font-size:.82rem;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.omikuji-copy h1{
  margin:0;
  color:#5a3d4a;
  font-size:clamp(2rem, 5vw, 3.3rem);
  line-height:1.12;
  font-weight:1000;
}

.omikuji-lead{
  margin:12px 0 0;
  color:#5d5360;
  font-weight:900;
  line-height:1.75;
}

.fortune-card{
  position:relative;
  display:grid;
  grid-template-columns:148px minmax(0,1fr);
  gap:14px;
  align-items:center;
}

.fortune-box{
  position:relative;
  z-index:2;
  display:block;
  align-self:center;
  filter:drop-shadow(0 18px 24px rgba(143, 71, 42, .24));
  transform-origin:50% 18%;
}

.fortune-box img{
  width:100%;
  max-height:285px;
  object-fit:contain;
}

.fortune-card.is-drawing .fortune-box{
  animation:omikujiBoxShake 1.12s cubic-bezier(.22,.9,.24,1);
}

.fortune-card.is-revealed .fortune-box{
  animation:omikujiBoxSettle .48s ease-out;
}

.fortune-paper{
  position:relative;
  display:grid;
  gap:12px;
  padding:22px;
  border-radius:20px;
  background:#fff;
  border:1px solid #ffd8ea;
  box-shadow:0 16px 36px rgba(255, 128, 178, .22);
  overflow:hidden;
}

.fortune-paper::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px dashed rgba(255,121,166,.35);
  border-radius:16px;
  pointer-events:none;
}

.fortune-paper > *{
  position:relative;
  z-index:1;
}

.fortune-aura,
.fortune-sparkles{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.fortune-aura{
  opacity:0;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.72), transparent 18%),
    radial-gradient(circle at 18% 72%, rgba(255,121,166,.22), transparent 26%),
    radial-gradient(circle at 86% 72%, rgba(127,201,255,.24), transparent 24%),
    linear-gradient(115deg, transparent 0 36%, rgba(255,255,255,.72) 46%, transparent 56% 100%);
  transform:translateX(-40%);
}

.fortune-sparkles span{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ffd15c;
  box-shadow:0 0 12px rgba(255,209,92,.78);
  opacity:0;
}

.fortune-sparkles span:nth-child(1){left:18%;top:22%}
.fortune-sparkles span:nth-child(2){left:78%;top:24%;background:#ff85bf}
.fortune-sparkles span:nth-child(3){left:24%;top:74%;background:#8ed2ff}
.fortune-sparkles span:nth-child(4){left:70%;top:70%}
.fortune-sparkles span:nth-child(5){left:50%;top:14%;background:#fff}

.fortune-mark{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,#ff72b4,#8ed2ff);
  box-shadow:0 10px 24px rgba(255,114,180,.24);
  font-size:1.8rem;
  font-weight:1000;
}

.fortune-label{
  margin:0;
  color:#9a516d;
  font-size:.78rem;
  font-weight:1000;
  letter-spacing:.08em;
}

.fortune-rank{
  color:#2d2430;
  font-size:2rem;
  font-weight:1000;
  line-height:1.15;
}

.fortune-message{
  margin:0;
  color:#4e4650;
  font-size:.98rem;
  font-weight:900;
  line-height:1.75;
}

.fortune-details{
  display:grid;
  gap:8px;
  margin:2px 0 0;
}

.fortune-details div{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:#fff7fb;
  border:1px solid #ffe0f0;
}

.fortune-details dt,
.fortune-details dd{
  margin:0;
}

.fortune-details dt{
  color:#9a516d;
  font-size:.78rem;
  font-weight:1000;
}

.fortune-details dd{
  color:#333;
  font-weight:900;
  overflow-wrap:anywhere;
}

.fortune-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:4px;
}

.fortune-paper.is-drawing{
  animation:fortuneDrawShake 1.12s cubic-bezier(.22,.9,.24,1);
  box-shadow:0 24px 54px rgba(255, 128, 178, .32);
}

.fortune-paper.is-drawing .fortune-aura{
  animation:fortuneSweep 1.12s ease-in-out;
}

.fortune-paper.is-drawing .fortune-sparkles span{
  animation:fortuneSpark .9s ease-out;
}

.fortune-paper.is-drawing .fortune-sparkles span:nth-child(2){
  animation-delay:.08s;
}

.fortune-paper.is-drawing .fortune-sparkles span:nth-child(3){
  animation-delay:.15s;
}

.fortune-paper.is-drawing .fortune-sparkles span:nth-child(4){
  animation-delay:.22s;
}

.fortune-paper.is-drawing .fortune-sparkles span:nth-child(5){
  animation-delay:.3s;
}

.fortune-paper.is-drawing .fortune-mark{
  animation:fortuneMarkSpin 1.12s cubic-bezier(.22,.9,.24,1);
}

.fortune-paper.is-drawing .fortune-rank,
.fortune-paper.is-drawing .fortune-message,
.fortune-paper.is-drawing .fortune-details{
  opacity:.42;
  filter:blur(.5px);
}

.fortune-paper.is-revealed .fortune-mark{
  animation:fortunePop .56s cubic-bezier(.2,1.35,.32,1);
}

.fortune-paper.is-revealed .fortune-rank,
.fortune-paper.is-revealed .fortune-message,
.fortune-paper.is-revealed .fortune-details{
  animation:fortuneReveal .56s cubic-bezier(.2,.9,.24,1) both;
}

.fortune-paper.is-revealed .fortune-aura{
  animation:fortuneRevealGlow .62s ease-out;
}

.fortune-paper.is-revealed .fortune-sparkles span{
  animation:fortuneSpark .68s ease-out;
}

.fortune-paper.is-revealed .fortune-message{
  animation-delay:.06s;
}

.fortune-paper.is-revealed .fortune-details{
  animation-delay:.12s;
}

.fortune-actions .btn[disabled]{
  cursor:wait;
  opacity:.78;
}

@keyframes fortuneDrawShake{
  0%,100%{transform:translateY(0) scale(1)}
  12%{transform:translateY(-4px) scale(1.01)}
  30%{transform:translateY(3px) scale(1.012)}
  48%{transform:translateY(-3px) scale(1.008)}
  68%{transform:translateY(2px) scale(1.004)}
}

@keyframes fortuneMarkSpin{
  0%{transform:scale(1) rotate(0deg)}
  18%{transform:scale(1.18) rotate(-16deg)}
  42%{transform:scale(1.08) rotate(18deg)}
  68%{transform:scale(1.16) rotate(-12deg)}
  84%{transform:scale(.92) rotate(8deg)}
  100%{transform:scale(1) rotate(0deg)}
}

@keyframes fortunePop{
  0%{transform:scale(.72);filter:brightness(1.15)}
  64%{transform:scale(1.12);filter:brightness(1.05)}
  100%{transform:scale(1);filter:brightness(1)}
}

@keyframes fortuneReveal{
  0%{
    opacity:0;
    transform:translateY(10px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes fortuneSweep{
  0%{
    opacity:0;
    transform:translateX(-58%);
  }
  18%{
    opacity:.9;
  }
  74%{
    opacity:.78;
    transform:translateX(38%);
  }
  100%{
    opacity:0;
    transform:translateX(58%);
  }
}

@keyframes fortuneRevealGlow{
  0%{
    opacity:0;
    transform:scale(.92);
  }
  45%{
    opacity:.9;
    transform:scale(1.02);
  }
  100%{
    opacity:0;
    transform:scale(1.08);
  }
}

@keyframes fortuneSpark{
  0%{
    opacity:0;
    transform:translateY(10px) scale(.5);
  }
  38%{
    opacity:1;
    transform:translateY(-8px) scale(1.1);
  }
  100%{
    opacity:0;
    transform:translateY(-24px) scale(.35);
  }
}

@keyframes omikujiBoxShake{
  0%,100%{transform:translateX(0) translateY(0) rotate(0deg) scale(1)}
  8%{transform:translateX(-11px) translateY(-3px) rotate(-5deg) scale(1.02)}
  16%{transform:translateX(12px) translateY(2px) rotate(5deg) scale(1.025)}
  24%{transform:translateX(-13px) translateY(-3px) rotate(-5.4deg) scale(1.02)}
  34%{transform:translateX(12px) translateY(2px) rotate(4.8deg) scale(1.022)}
  46%{transform:translateX(-9px) translateY(-2px) rotate(-3.8deg) scale(1.014)}
  58%{transform:translateX(8px) translateY(1px) rotate(3deg) scale(1.012)}
  72%{transform:translateX(-5px) rotate(-1.8deg)}
  86%{transform:translateX(3px) rotate(.9deg)}
}

@keyframes omikujiBoxSettle{
  0%{transform:translateY(-3px) rotate(-1deg)}
  55%{transform:translateY(2px) rotate(.6deg)}
  100%{transform:translateY(0) rotate(0deg)}
}

@media (max-width:720px){
  .omikuji-shell{
    grid-template-columns:1fr;
    padding:16px;
  }

  .fortune-paper{
    padding:18px;
  }

  .fortune-card{
    grid-template-columns:112px minmax(0,1fr);
    gap:10px;
  }

  .fortune-box img{
    max-height:230px;
  }

  .fortune-actions{
    grid-template-columns:1fr;
  }
}

@media (max-width:520px){
  .omikuji-hero{
    padding-top:18px;
  }

  .omikuji-copy h1{
    font-size:2rem;
  }

  .fortune-rank{
    font-size:1.7rem;
  }

  .fortune-card{
    grid-template-columns:1fr;
  }

  .fortune-box{
    justify-self:center;
    width:min(142px, 48vw);
    margin-bottom:-8px;
  }

  .fortune-box img{
    max-height:185px;
  }

  .fortune-details div{
    grid-template-columns:1fr;
    gap:4px;
  }
}

@media (prefers-color-scheme: dark){
  .omikuji-shell{
    background:linear-gradient(135deg, rgba(29,31,34,.94), rgba(35,37,40,.96));
    border-color:rgba(255,255,255,.12);
  }

  .omikuji-copy h1,
  .fortune-rank{
    color:#f5f5f5;
  }

  .omikuji-lead,
  .fortune-message{
    color:#d8d8d8;
  }

  .fortune-paper{
    background:rgba(29,31,34,.96);
    border-color:rgba(255,255,255,.14);
  }

  .fortune-details div{
    background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.12);
  }

  .fortune-details dd{
    color:#f0f0f0;
  }
}