/* =========================================================
   nociw ◆ card Omikuji (page only)
   © Astro Ninja Projects & Megu.y ＆ Sora  (digital tattoo)
   ========================================================= */

/* ★横スクロール封じ（SPのデッキはみ出し対策） */
html, body{
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.nociw-main{
  background: rgba(0,0,0,.10);
  color: #fff;
  margin: 50px auto 60px !important;
}

.nociw-main p,
.nociw-main li,
.nociw-main span,
.nociw-main small,
.nociw-main div{
  color: inherit;
}

.nociw-main h1 {
  color: #b2a167;
  margin-bottom: 0.2em;
}
.nociw-main h2,
.nociw-main h3{
  color: #fff;
}

/* =========================================================
   Page base
   ========================================================= */
.omikuji-main{
  padding: 0 0 2px;
}

.omikuji-title{
  text-align: center;
  margin: 6px 0 10px;
  letter-spacing: .06em;
  color: #fff;
}

.omikuji-lead{
  text-align: center;
  padding: 0 16px;
  margin: 0 0 18px;
  line-height: 1.8;
  color: #c4ba9b /* rgba(255,255,255,.92) */;
}

.nociw-link {
  color: #b2a167;
  text-decoration: none;
  transition: color 0.3s ease;
}

.nociw-link:hover {
  color: #e7d9ab;
}

/* =========================================================
   Stage (deck + hero)
   ========================================================= */
.omikuji-stage{
  position: relative;
  width: min(860px, 92vw);
  margin: 14px auto 0;
  padding: 18px 10px 0;
  display: grid;
  place-items: center;
  z-index: 1;

  /* ★ステージ内での横はみ出しをページの横スクロールにしない */
  overflow-x: clip;
}
@supports not (overflow: clip){
  .omikuji-stage{ overflow-x: hidden; }
}

/* =========================================================
   Deck (36 backs) : bigger (140px), non-clickable
   ========================================================= */
.omikuji-deck,
#deck{
  position: relative;
  width: 560px;
  height: 420px;
  margin: 0 auto;

  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

#deck.is-hidden{
  opacity: 0;
  transform: scale(.98) translateY(10px);
  transition: opacity .75s ease, transform .75s ease;
}

.deck-card,
#deck > img{
  position: absolute;
  left: 50%;
  top: 50%;

  width: 140px;
  height: 211px;

  border-radius: 14px;
  object-fit: cover;

  transform:
    translate(-50%, -50%)
    translate(var(--x), var(--y))
    rotate(var(--r))
    scale(var(--s));

  opacity: 1 !important;
  filter: drop-shadow(0 14px 20px rgba(0,0,0,.45));

  transition:
    transform .7s cubic-bezier(.2,.8,.2,1);

  transition-delay: var(--d);

  pointer-events: none;
}

#deck.is-shuffling > img{
  animation: deckBreath 2.8s ease-in-out infinite;
}
@keyframes deckBreath{
  0%,100%{ filter: drop-shadow(0 14px 20px rgba(0,0,0,.45)); }
  50%{ filter: drop-shadow(0 20px 28px rgba(0,0,0,.55)); }
}

/* =========================================================
   Hero card (center)
   ========================================================= */
.omikuji-hero,
#hero{
  position: absolute;
  left: 50%;
  top: 40%;
  width: 280px;
  height: 423px;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 3;
}

#hero img,
#heroImg{
  width: 100% !important;
  height: 100% !important;
  margin-top: 60px;
  display: block !important;
  border-radius: 18px !important;
  object-fit: cover !important;
  box-shadow: 0 18px 28px rgba(0,0,0,.45) !important;
}

/* Pop from deck position to center */
#hero.is-pop{
  animation: popToCenter .65s cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes popToCenter{
  0%{
    transform:
      translate(-50%, -50%)
      translate(var(--from-x), var(--from-y))
      rotate(var(--from-r))
      scale(var(--from-s));
    opacity: 0;
  }
  100%{
    transform:
      translate(-50%, -50%)
      rotate(0deg)
      scale(1);
    opacity: 1;
  }
}

/* Reveal glow */
#hero.is-reveal img,
#heroImg.is-reveal{
  animation: revealGlow .55s ease forwards;
}
@keyframes revealGlow{
  0%{ box-shadow: 0 18px 28px rgba(0,0,0,.45); }
  45%{ box-shadow: 0 28px 40px rgba(0,0,0,.55); }
  100%{ box-shadow: 0 18px 28px rgba(0,0,0,.45); }
}

/* 表面差し替えを“ゆっくり”に見せる */
#hero img{
  opacity: 1;
  transform: scale(1);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
#hero.is-opening img{
  opacity: 0.35;
  transform: scale(0.985);
}

/* Spark overlay */
#spark{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  z-index: 4;
}
#spark.is-on{
  animation: sparkIn 1.1s ease forwards;
}
@keyframes sparkIn{
  0%{ opacity:0; }
  30%{ opacity:.35; }
  100%{ opacity:0; }
}
#spark::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 22%, rgba(255,255,255,.75) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 54%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 36% 72%, rgba(255,255,255,.75) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 82%, rgba(255,255,255,.85) 0 1px, transparent 2px);
}

/* =========================================================
   Actions
   ========================================================= */
.omikuji-actions{
  width: min(860px, 92vw);
  margin: 60px auto 0;
  display: grid;
  place-items: center;
  gap: 10px;
  position: relative;
  z-index: 10;
}

.btn{
  display:inline-block;
  padding: 10px 20px 11px;
  border-radius: 20px;
  height: 42px;
  width: 160px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.92);
  color: #111;
  cursor:pointer;
}
.btn:hover{ background: rgba(255,255,255,.98); }
.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* ★言語切替で幅が変わらないように固定（最小幅 + 中央） */
.btn-draw{
  margin: -10px 0 20px;
  min-width: 220px;
  text-align: center;
}

.omikuji-note{
  margin: 0;
  font-size: .92em;
  opacity: .9;
  min-height: 1.2em;
  text-align: center;
  color: rgba(255,255,255,.88);
}

/* =========================================================
   Result under actions (source only)
   ★オーバーレイ運用なので画面には出さない
   ========================================================= */
.omikuji-result{
  display: none;
}

/* 下記はオーバーレイ内でクローン表示されるので残す */
.omikuji-starname{
  text-align: center;
  margin: 10px 0 6px;
}

#starKana{
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #b2a167;
}

#starRoman{
  margin-top: 4px;
  opacity: .85;
  font-size: 1.08rem !important;
  /* color: rgba(255,255,255,.82); */
  color: #c9c0a1;
}

.omikuji-lang{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 40px 0 14px;
  flex-wrap: wrap;
}

.omikuji-lang--top{
  margin: 10px 0 0;
}

.omikuji-actions .omikuji-footnote{
  margin: 10px auto 0;
  max-width: 760px;
  font-size: .9em;
  opacity: .9;
  color: rgba(255,255,255,.78);
  text-align: center;
}

.lang-btn{
  width: 72px;
  text-align: center;
  padding: 8px 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  font-size:.92em;
}
.lang-btn:hover{ background: rgba(255,255,255,.16); }
.lang-btn.is-active{
  font-weight: 700;
  background: rgba(255,255,255,.22);
}

/* message block */
.omikuji-message{
  max-width: 760px;
  margin: 18px auto 0;
  line-height: 1.9;
  color: rgba(255,255,255,.92);

  padding: 18px 12px;
  border-top: 1px solid rgba(255,255,255,.22);
  border-bottom: 1px solid rgba(255,255,255,.22);
}
#msgJa p, #msgEn p, #msgZh p{
  margin: 0 0 12px;
}

.omikuji-footnote{
  margin: 18px auto 0;
  max-width: 760px;
  font-size: .9em;
  opacity: .9;
  color: rgba(255,255,255,.78);
  text-align: center;
}

.omikuji-error{
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  text-align: center;
}

/* =========================================================
   Overlay (card click)
   ========================================================= */
.omikuji-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.omikuji-overlay.is-open{
  display: block;
}

.omikuji-overlay-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(0,0,0,.55);
  cursor: pointer;
}

.omikuji-overlay-panel{
  position: relative;
  width: min(860px, 92vw);
  margin: 22vh auto 0;
  padding: 18px 14px 60px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
  animation: overlayIn .22s ease both;
}

.omikuji-overlay-closelink{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background:transparent;
  border:0;
  color:#fff;
  font-size:14px;
  padding:10px 12px;
  cursor:pointer;
}
.omikuji-overlay-closelink:hover{
  text-decoration:underline;
}

#hero, #deck, #textOverlay,
#hero *, #deck *, #textOverlay *{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

#heroImg, #deck img{
  -webkit-user-drag: none;
  user-drag: none;
}

@keyframes overlayIn{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}



/* =========================================================
   PC view: text center align (ONLY PC)
   ========================================================= */
@media (min-width: 641px){
  .omikuji-lead{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .omikuji-message{
    text-align: center;
  }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 640px){
  #deck{
    width: 100%;
    max-width: 360px;
    height: 320px;
  }
  #deck > img{
    width: 112px;
    height: 169px;
    border-radius: 12px;
  }

  .nociw-main h1 {
    font-size: 1.2em;
    font-weight: bold;
  }

  .omikuji-actions{
    margin-top: 92px;
  }

  #hero{
    width: 250px;
    height: 378px;
    top: 32%;
  }

  #hero img,
  #heroImg{
  border-radius: 16px !important;
  margin-top: 80px;
  }

  .lang-btn{
    width: 68px;
  }

  .btn-draw{
    min-width: 200px;
  }

  .omikuji-overlay-panel{
    margin-top: 25vh;
  }
}