/* 金運みくじ 専用スタイル（実写グラフィック版・.omikuji-* / #omikuji-* / #shrine-* / #mikuji-* にスコープ）
   のべっと感の排除：CSSのベタ塗り図形をやめ、実写素材を主役にする。
   ・背景＝神社の夜(bg)を全面に敷き、上に薄いveilで文字可読性を確保＝厳かさを回復。
   ・筒＝実写(tube)を perspective+rotateX/Y で3Dに振る（squash&stretch）。周囲にglow/vignetteで継ぎ目を消す。
   ・粒子＝実写の金箔/光（Canvas・加算合成）は omikuji.js 側。
   ・開帳＝木札(fuda)がせり上がり運勢を乗せる＋画面フラッシュ＋放射光。
   イージングはバネ/オーバーシュート。prefers-reduced-motion は簡略・即表示。 */

/* ==== イージング語彙（linear/単純easeは使わない） ==== */
:root{
  --e-back:cubic-bezier(.34,1.56,.64,1);        /* オーバーシュート */
  --e-elastic:cubic-bezier(.16,1.24,.3,1);       /* 弾んで収まる */
  --e-spring:cubic-bezier(.22,1.2,.36,1);        /* バネ */
  --e-antic:cubic-bezier(.62,-0.36,.28,1);       /* タメてから放つ */
  --e-snap:cubic-bezier(.2,.9,.15,1);            /* 速→ピタッ */
  /* 演出上に浮く文字は常に暗い神社背景の上 → テーマに依らず明色で固定 */
  --om-ink:#F1E7D2; --om-ink-soft:#CBBB9A; --om-gold:#E7C169; --om-gold-bright:#F4D98A;
}

/* ===== 神社の夜を全面に敷く（厳か・fixed・最背面） ===== */
.shrine-bg{position:fixed;inset:0;z-index:-2;background-size:cover;background-position:center;
  background-repeat:no-repeat;
  /* 神社は暗めに沈めて主役(筒/光)を立てる。彩度は残して神社らしさは保つ */
  filter:brightness(.52) saturate(.74) contrast(1.05)}
/* veilは薄く＝神社の紅葉・鳥居・灯りをしっかり見せる。中央はほぼ素通し、
   四隅と上下端だけ淡く締めて額装（可読性はテキスト側のshadow/局所グラデで担保）。 */
.shrine-bg::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(135% 108% at 50% 24%,rgba(6,5,4,.34) 28%,rgba(6,5,4,.46) 66%,rgba(4,3,3,.64) 100%),
    linear-gradient(180deg,rgba(6,5,4,.44),rgba(6,5,4,.30) 30%,rgba(6,5,4,.30) 62%,rgba(4,3,3,.58))}
/* 神社の上で読ませる本文の下地（微かな暗色） */
.omikuji-stage{position:relative;max-width:680px;margin:0 auto;padding:44px 20px 12px;text-align:center}

/* ===== 画面全体を覆う演出レイヤ（fixed・操作を邪魔しない） ===== */
.omikuji-fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;
  opacity:0;transition:opacity .5s ease}
.omikuji-fx.on{opacity:1}
.omikuji-fx.front{z-index:60}            /* 開帳の金箔爆発だけ最前面へ */

/* 開帳の瞬間：画面全体フラッシュ */
.omikuji-flash{position:fixed;inset:0;pointer-events:none;z-index:70;opacity:0;
  background:radial-gradient(circle at 50% 46%,#fff 0%,#FFF3D0 26%,#F6D98A 52%,rgba(217,180,95,0) 78%)}
.omikuji-flash.fire{animation:fx-flash .62s var(--e-snap) both}
@keyframes fx-flash{
  0%{opacity:0}
  9%{opacity:.96}
  30%{opacity:.7}
  100%{opacity:0}}

/* 中央から広がる光のバースト（放射リング＋波紋） */
.omikuji-burst{position:fixed;left:50%;top:46%;width:10px;height:10px;transform:translate(-50%,-50%);
  pointer-events:none;z-index:55;opacity:0}
.omikuji-burst i{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%) scale(.1)}
.omikuji-burst .core{width:220px;height:220px;
  background:radial-gradient(circle,rgba(255,248,224,.95) 0%,rgba(255,224,150,.6) 34%,rgba(217,180,95,0) 70%)}
.omikuji-burst .ray{width:520px;height:520px;
  background:conic-gradient(from 0deg,rgba(255,236,178,0) 0deg,rgba(255,236,178,.55) 6deg,rgba(255,236,178,0) 12deg,
    rgba(255,236,178,0) 40deg,rgba(255,236,178,.5) 46deg,rgba(255,236,178,0) 52deg,
    rgba(255,236,178,0) 80deg,rgba(255,236,178,.55) 86deg,rgba(255,236,178,0) 92deg,
    rgba(255,236,178,0) 120deg,rgba(255,236,178,.5) 126deg,rgba(255,236,178,0) 132deg,
    rgba(255,236,178,0) 160deg,rgba(255,236,178,.55) 166deg,rgba(255,236,178,0) 172deg,
    rgba(255,236,178,0) 200deg,rgba(255,236,178,.5) 206deg,rgba(255,236,178,0) 212deg,
    rgba(255,236,178,0) 240deg,rgba(255,236,178,.55) 246deg,rgba(255,236,178,0) 252deg,
    rgba(255,236,178,0) 280deg,rgba(255,236,178,.5) 286deg,rgba(255,236,178,0) 292deg,
    rgba(255,236,178,0) 320deg,rgba(255,236,178,.55) 326deg,rgba(255,236,178,0) 332deg,
    rgba(255,236,178,0) 360deg);
  filter:blur(.4px)}
.omikuji-burst .halo{width:120px;height:120px;border:3px solid rgba(255,236,178,.9)}
.omikuji-burst.fire{opacity:1;animation:fx-burst-fade 1s ease-out both}
.omikuji-burst.fire .core{animation:fx-core 1s var(--e-snap) both}
.omikuji-burst.fire .ray{animation:fx-ray 1.05s var(--e-snap) both}
.omikuji-burst.fire .halo{animation:fx-halo .95s var(--e-snap) both}
@keyframes fx-burst-fade{0%,70%{opacity:1}100%{opacity:0}}
@keyframes fx-core{0%{transform:translate(-50%,-50%) scale(.1);opacity:1}
  60%{opacity:.9}100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
@keyframes fx-ray{0%{transform:translate(-50%,-50%) scale(.1) rotate(0);opacity:0}
  18%{opacity:.9}100%{transform:translate(-50%,-50%) scale(1.35) rotate(38deg);opacity:0}}
@keyframes fx-halo{0%{transform:translate(-50%,-50%) scale(.1);opacity:.95;border-width:6px}
  100%{transform:translate(-50%,-50%) scale(3.6);opacity:0;border-width:1px}}

/* 前景は演出より読みやすく */
.mikuji-intro,.mikuji-divine,.mikuji-result{position:relative;z-index:3}

/* ===== 引く前：実写おみくじ筒（3Dで振る） ===== */
.mikuji-intro{position:relative}
/* 導入テキストの背後だけ、ごく淡い局所グラデでそっと沈める（全体は暗くしない・筒/背景は素通し） */
.mikuji-intro::before{content:"";position:absolute;left:50%;top:-14px;width:min(34em,94%);height:150px;
  transform:translateX(-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(62% 100% at 50% 34%,rgba(6,5,4,.4),rgba(6,5,4,.14) 56%,rgba(6,5,4,0) 80%);
  filter:blur(8px)}
.mikuji-intro .lead{position:relative;font-family:var(--serif);font-size:16px;color:var(--om-ink);
  line-height:2;margin:0 auto 22px;max-width:30em;
  text-shadow:0 1px 2px rgba(0,0,0,.88),0 2px 16px rgba(0,0,0,.72)}

.mikuji-scene{position:relative;display:flex;align-items:center;justify-content:center;
  width:230px;height:352px;margin:6px auto 26px;perspective:960px;perspective-origin:50% 44%}
@media(max-width:560px){.mikuji-scene{width:200px;height:300px}}
/* 筒の背後スポットライト（暖色の光だまり）＝暗い神社の中で筒を御神体のように浮かび上がらせ、
   背景との同化を断つ。透過筒の暗部もこの光が透けて沈まない。 */
.mikuji-scene::before{content:"";position:absolute;left:50%;top:47%;z-index:0;pointer-events:none;
  width:320px;height:360px;transform:translate(-50%,-50%);
  background:radial-gradient(52% 56% at 50% 50%,
    rgba(255,226,160,.52) 0%,rgba(235,182,112,.30) 32%,rgba(150,80,40,.14) 58%,rgba(0,0,0,0) 78%);
  filter:blur(2px)}
@media(max-width:560px){.mikuji-scene::before{width:270px;height:310px}}

.scene-shadow{position:absolute;left:50%;bottom:4px;width:118px;height:24px;z-index:0;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.55),rgba(0,0,0,0) 70%);
  filter:blur(3px);animation:sc-shadow 4.6s ease-in-out infinite}
@keyframes sc-shadow{0%,100%{transform:translateX(-50%) scale(1);opacity:.7}
  50%{transform:translateX(-50%) scale(.86);opacity:.5}}

.mikuji-box{position:relative;z-index:1;height:100%;
  transform-style:preserve-3d;transform-origin:50% 88%;will-change:transform;
  animation:mikuji-idle 4.6s ease-in-out infinite}
@keyframes mikuji-idle{
  0%{transform:rotateX(5deg) rotateY(-12deg) translateY(0)}
  50%{transform:rotateX(-2deg) rotateY(12deg) translateY(-6px)}
  100%{transform:rotateX(5deg) rotateY(-12deg) translateY(0)}}

/* 実写の筒（背景アルファ抜き済みの透過WebP）。マスクは使わない（透過画像を欠けさせないため）。
   影とごく淡い金の縁光だけを自然に添える。 */
.mikuji-box .tube-img{display:block;height:100%;width:auto;
  /* 暗い神社背景から筒を浮かせる：足元の影＋シルエットに沿う金のハロ（透過なので黒四角化しない）＋筒自体を少し明るく */
  filter:
    drop-shadow(0 22px 28px rgba(0,0,0,.6))
    drop-shadow(0 0 26px rgba(255,226,150,.55))
    drop-shadow(0 0 62px rgba(255,208,120,.34))
    brightness(.9) saturate(.62) contrast(1.02) hue-rotate(-5deg)}

/* 筒口からにじむ金色の光（実写に重ねるglow） */
.mikuji-box .tube-glow{position:absolute;left:50%;top:2%;transform:translate(-50%,-50%) scale(.5);
  width:130px;height:130px;border-radius:50%;pointer-events:none;opacity:0;z-index:2;
  background:radial-gradient(circle,rgba(255,240,190,.9) 0%,rgba(231,193,105,.42) 38%,rgba(231,193,105,0) 70%)}

/* みくじ棒（口からすべり出る細い金の棒） */
.mikuji-box .stick{position:absolute;left:50%;top:2%;width:7px;height:0;z-index:2;
  transform:translateX(-50%) translateZ(8px);
  background:linear-gradient(180deg,#F3E0A6,#E8CE86 45%,#B8924A);
  border-radius:4px;box-shadow:0 0 10px rgba(231,193,105,.8)}
.mikuji-box .stick::after{content:attr(data-no);position:absolute;left:50%;bottom:7px;
  transform:translateX(-50%);writing-mode:vertical-rl;font-family:var(--serif);font-size:8px;
  color:#5b3d13;letter-spacing:1px;opacity:0;transition:opacity .4s .3s}

/* --- 引く：タメ→激しい3Dシェイク（squash&stretch）＋光漏れ --- */
.mikuji-box.shaking{animation:mikuji-shake 1.15s var(--e-antic) both}
.mikuji-box.shaking .tube-glow{animation:leak-out 1.15s ease-in-out both}
@keyframes mikuji-shake{
  0%{transform:rotateX(5deg) rotateY(-12deg) translateY(0) scaleY(1)}
  8%{transform:rotateX(10deg) rotateY(16deg) translateY(6px) scale(1.06,.9)}   /* タメ：沈んで潰れる */
  16%{transform:rotateX(-4deg) rotateY(-20deg) translateY(-8px) scale(.93,1.12)} /* 放つ：伸びる */
  24%{transform:rotateY(22deg) rotateZ(6deg) translateY(-2px) scale(1.05,.95)}
  33%{transform:rotateY(-24deg) rotateZ(-7deg) translateY(-6px) scale(.95,1.08)}
  43%{transform:rotateY(26deg) rotateZ(8deg) translateY(-1px) scale(1.04,.96)}
  54%{transform:rotateY(-26deg) rotateZ(-8deg) translateY(-7px) scale(.96,1.07)}
  65%{transform:rotateY(20deg) rotateZ(6deg) translateY(-2px) scale(1.03,.97)}
  76%{transform:rotateY(-14deg) rotateZ(-4deg) translateY(-4px) scale(.98,1.03)}
  87%{transform:rotateY(8deg) rotateZ(2deg) translateY(-1px) scale(1.01,.99)}
  100%{transform:rotateX(4deg) rotateY(-6deg) translateY(0) scale(1)}}
@keyframes leak-out{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  55%{opacity:.7;transform:translate(-50%,-58%) scale(1.05)}
  100%{opacity:1;transform:translate(-50%,-64%) scale(1.35)}}

/* 棒がすべり出る（筒が傾き番号が見える・バネで） */
.mikuji-box.popped{animation:mikuji-tilt 1.1s var(--e-back) both}
.mikuji-box.popped .stick{height:70px;transition:height .55s var(--e-back)}
.mikuji-box.popped .stick::after{opacity:1}
@keyframes mikuji-tilt{
  0%{transform:rotateY(-6deg) rotateZ(0)}
  40%{transform:rotateY(14deg) rotateZ(13deg)}
  70%{transform:rotateY(6deg) rotateZ(6deg)}
  100%{transform:rotateY(8deg) rotateZ(8deg)}}

/* ボタン */
.omikuji-draw{position:relative;display:inline-block;font-family:var(--serif);font-size:18px;letter-spacing:.14em;
  color:#20160b;background:linear-gradient(180deg,#F0D488,#E7CB7E 40%,#B8924A);
  padding:16px 48px;border:1px solid #EBD290;border-radius:4px;cursor:pointer;overflow:hidden;
  box-shadow:0 12px 30px rgba(10,7,4,.5);transition:transform .18s var(--e-back),box-shadow .2s;
  animation:draw-breathe 2.8s ease-in-out infinite}
@keyframes draw-breathe{0%,100%{box-shadow:0 12px 30px rgba(10,7,4,.5);transform:translateY(0)}
  50%{box-shadow:0 16px 44px rgba(231,193,105,.5);transform:translateY(-1px)}}
.omikuji-draw::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,248,224,.75),transparent);
  transform:skewX(-18deg);animation:draw-sheen 3.4s ease-in-out infinite}
@keyframes draw-sheen{0%,55%{left:-60%}80%,100%{left:130%}}
.omikuji-draw:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 18px 44px rgba(231,193,105,.55)}
.omikuji-draw:active{transform:translateY(1px) scale(.98)}
.omikuji-draw:disabled{opacity:.5;cursor:default;transform:none;animation:none}
.omikuji-draw:disabled::after{display:none}

/* 生年月日（任意） */
.birth-toggle{display:block;margin:20px auto 0;background:none;border:0;cursor:pointer;
  color:var(--om-gold);font-size:13px;letter-spacing:.04em;text-decoration:underline;text-underline-offset:3px}
.birth-field{max-height:0;overflow:hidden;transition:max-height .35s var(--e-spring)}
.birth-field.open{max-height:130px}
.birth-field .inner{padding:16px 0 4px}
.birth-field label{font-size:12.5px;color:var(--om-ink-soft);display:block;margin-bottom:8px}
.birth-field input{font-family:var(--sans);font-size:15px;padding:10px 12px;
  border:1px solid rgba(231,193,105,.4);border-radius:3px;background:rgba(20,16,12,.7);color:var(--om-ink);min-width:180px}

/* ===== 占い中（タメ）：光の柱＋八卦リング3D回転＋核が脈打つ ===== */
.mikuji-divine{display:none;min-height:270px;padding:30px 0 10px;perspective:700px}
.mikuji-divine.active{display:block;animation:divine-in .45s var(--e-spring) both}
@keyframes divine-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.divine-core{position:relative;width:170px;height:170px;margin:0 auto 20px;transform-style:preserve-3d}
/* 光の柱 */
.divine-core .beam{position:absolute;left:50%;bottom:50%;width:46px;height:220px;transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(255,240,190,0),rgba(255,236,178,.5) 60%,rgba(255,236,178,.85));
  filter:blur(4px);transform-origin:50% 100%;
  animation:beam-rise 1.3s var(--e-spring) both,beam-flick 1.6s ease-in-out infinite .4s}
@keyframes beam-rise{0%{opacity:0;transform:translateX(-50%) scaleY(.1)}
  60%{opacity:1}100%{opacity:.9;transform:translateX(-50%) scaleY(1)}}
@keyframes beam-flick{0%,100%{opacity:.75}50%{opacity:1}}
/* 核 */
.divine-core .orb{position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;
  background:radial-gradient(circle at 44% 40%,#FFF6D8,var(--om-gold-bright) 52%,rgba(184,146,74,.15) 82%);
  box-shadow:0 0 40px 10px rgba(217,180,95,.6);animation:orb-pulse 1.15s ease-in-out infinite}
@keyframes orb-pulse{0%,100%{transform:scale(.8);opacity:.85}50%{transform:scale(1.12);opacity:1}}
/* 八卦リング（水平な円盤に見せる3D回転） */
.divine-core .ring{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;
  border-radius:50%;border:2px solid rgba(217,180,95,.55);
  transform:rotateX(64deg) rotateZ(0);animation:ring-spin 3.2s linear infinite}
.divine-core .ring.r2{width:110px;height:110px;margin:-55px 0 0 -55px;border-style:dashed;
  border-color:rgba(193,53,42,.5);animation:ring-spin 2.2s linear infinite reverse}
.divine-core .ring.r3{width:186px;height:186px;margin:-93px 0 0 -93px;border-color:rgba(217,180,95,.28);
  animation:ring-spin 5s linear infinite}
@keyframes ring-spin{to{transform:rotateX(64deg) rotateZ(360deg)}}
.divine-text{font-family:var(--serif);font-size:15px;letter-spacing:.42em;color:var(--om-gold);margin:8px 0 0;
  text-shadow:0 2px 12px rgba(0,0,0,.6);animation:divine-text 1.4s ease-in-out infinite}
@keyframes divine-text{0%,100%{opacity:.45}50%{opacity:1}}

/* ===== 結果 ===== */
.mikuji-result{display:none}
.mikuji-result.show{display:block}

/* 汎用スタガー：弾んで出る（bounce） */
.mikuji-result.show .stagger{opacity:0;animation:mk-bounce .72s var(--e-back) both;
  animation-delay:calc(var(--i,0) * 95ms + 480ms)}
@keyframes mk-bounce{from{opacity:0;transform:translateY(26px) scale(.96)}
  60%{opacity:1}to{opacity:1;transform:none}}

/* ===== 開帳：実写の木札(絵馬)がせり上がり、運勢ランクを乗せる ===== */
.reveal-plate{position:relative;width:min(300px,74vw);margin:0 auto 12px;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.6))}
.reveal-plate .fuda-img{display:block;width:100%;height:auto}
/* 木札の背後にひろがる金の後光（矩形の縁を神社の暗がりに溶かす） */
.reveal-plate .plate-glow{position:absolute;left:50%;top:52%;width:168%;height:168%;
  transform:translate(-50%,-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(231,193,105,.55),rgba(231,193,105,.18) 40%,rgba(231,193,105,0) 70%)}
.mikuji-result.show .reveal-plate .plate-glow{animation:plate-glow 1.6s ease-out .3s both}
@keyframes plate-glow{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  35%{opacity:1}100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}}
/* 木札に墨書きされた運勢（実写の上に乗る） */
.reveal-plate .plate-ink{position:absolute;left:0;right:0;top:52%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.reveal-plate .plate-ink .rk{font-family:var(--serif);font-size:52px;line-height:1;letter-spacing:.1em;
  color:#7a1f16;text-shadow:0 1px 0 rgba(255,255,255,.35),0 2px 6px rgba(120,30,20,.28)}
.reveal-plate .plate-ink .stars{color:#B8924A;font-size:13px;letter-spacing:.18em;
  text-shadow:0 1px 0 rgba(255,255,255,.4)}
/* せり上がり＋弾む（開帳のバン！） */
.mikuji-result.show .reveal-plate.stamp{animation:plate-rise .9s var(--e-elastic) both}
@keyframes plate-rise{
  0%{opacity:0;transform:perspective(700px) rotateX(-34deg) translateY(60px) scale(.7)}
  46%{opacity:1;transform:perspective(700px) rotateX(6deg) translateY(-8px) scale(1.06)}
  66%{transform:perspective(700px) rotateX(-2deg) translateY(3px) scale(.98)}
  100%{opacity:1;transform:perspective(700px) rotateX(0) translateY(0) scale(1)}}
/* 押印の波紋 */
.reveal-plate .seal-ripple{position:absolute;left:50%;top:52%;width:120px;height:120px;border-radius:50%;
  border:2px solid var(--om-gold-bright);transform:translate(-50%,-50%) scale(.3);opacity:0;pointer-events:none}
.mikuji-result.show .reveal-plate .seal-ripple{animation:seal-ripple 1.1s ease-out .5s both}
@keyframes seal-ripple{0%{opacity:.8;transform:translate(-50%,-50%) scale(.35)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}

.rank-tagline{font-family:var(--serif);font-size:17px;letter-spacing:.05em;margin:14px 0 4px;color:var(--om-ink);
  text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 14px rgba(0,0,0,.6)}
.result-date{font-size:12.5px;color:var(--om-ink-soft);letter-spacing:.06em;margin-bottom:26px;
  text-shadow:0 1px 2px rgba(0,0,0,.8),0 1px 10px rgba(0,0,0,.55)}

.mikuji-msg{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--kin);
  border-radius:4px;padding:22px 24px;margin:0 0 26px;text-align:left;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.mikuji-msg .cap{font-family:var(--serif);color:var(--shu);font-size:13px;letter-spacing:.08em;
  display:block;margin-bottom:8px}
.mikuji-msg p{margin:0;font-size:15.5px;line-height:2;color:var(--fg)}

/* 導き手 */
.mikuji-result .deity-note{position:relative;text-align:left;margin:0 0 26px;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:6px;padding:20px 22px;
  display:flex;gap:16px;align-items:center;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.mikuji-result.show .deity-note{opacity:0;animation:deity-arrive .9s var(--e-back) both;
  animation-delay:calc(var(--i,3) * 95ms + 620ms)}
@keyframes deity-arrive{0%{opacity:0;transform:translateY(44px) scale(.96)}
  60%{opacity:1}100%{opacity:1;transform:none}}
.mikuji-result .deity-note .face{position:relative;flex:0 0 auto;width:66px;height:66px;border-radius:50%;
  background-size:cover;background-position:center;border:2px solid var(--kin);
  box-shadow:0 4px 14px rgba(40,25,10,.3)}
.mikuji-result .deity-note .face::after{content:"";position:absolute;inset:-8px;border-radius:50%;
  background:radial-gradient(circle,rgba(217,180,95,.6),rgba(217,180,95,0) 70%);opacity:0;pointer-events:none}
.mikuji-result.show .deity-note .face::after{animation:deity-halo 1.6s ease-out .7s both}
@keyframes deity-halo{0%{opacity:0;transform:scale(.5)}30%{opacity:1}100%{opacity:0;transform:scale(1.7)}}
.mikuji-result .deity-note .txt{min-width:0}
.mikuji-result .deity-note .who{font-family:var(--serif);font-size:15px;color:var(--shu);margin:0 0 6px}
.mikuji-result .deity-note .who small{color:var(--muted);font-size:11.5px;margin-left:8px;letter-spacing:.04em}
.mikuji-result .deity-note p{margin:0;font-size:14px;line-height:1.9;color:var(--fg)}

.lucky-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 26px}
@media(max-width:560px){.lucky-grid{grid-template-columns:repeat(2,1fr)}}
.mikuji-result.show .lucky{opacity:0;animation:mk-bounce .6s var(--e-back) both;
  animation-delay:calc((var(--gi,0) * 100ms) + 940ms)}
.lucky{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:16px 10px;
  box-shadow:0 8px 20px rgba(0,0,0,.3)}
.lucky .k{font-size:11.5px;color:var(--muted);letter-spacing:.08em;margin-bottom:8px}
.lucky .v{font-family:var(--serif);font-size:17px;letter-spacing:.03em;line-height:1.4;color:var(--fg)}
.lucky .swatch{width:30px;height:30px;border-radius:50%;margin:0 auto 8px;
  border:2px solid var(--kin);box-shadow:0 3px 8px rgba(40,25,10,.25)}
.lucky .num{font-size:26px;color:var(--shu)}

.mikuji-action{background:var(--washi-2);border:1px dashed var(--kin);border-radius:6px;
  padding:16px 20px;margin:0 0 30px;text-align:left;box-shadow:0 8px 20px rgba(0,0,0,.28)}
.mikuji-action b{color:var(--shu);display:block;font-size:12.5px;letter-spacing:.06em;margin-bottom:6px}
.mikuji-action p{margin:0;font-size:14.5px;line-height:1.9;color:var(--fg)}

.drawn-again{font-size:12.5px;color:var(--om-ink-soft);margin:2px 0 30px;letter-spacing:.03em;
  text-shadow:0 1px 2px rgba(0,0,0,.8),0 1px 10px rgba(0,0,0,.55)}

.omikuji-gate{background:linear-gradient(135deg,var(--ai),#2c3f4a);color:#F4ECD8;border-radius:8px;
  padding:30px 26px;margin:8px 0 24px;text-align:center;box-shadow:0 16px 40px rgba(0,0,0,.45)}
.omikuji-gate h3{color:#FBF4E2;font-size:20px;margin:0 0 10px}
.omikuji-gate p{margin:0 0 18px;font-size:14px;color:#DCE5E9;line-height:1.85}
.omikuji-gate .line-btn{display:inline-block;background:#06C755;color:#fff;font-family:var(--serif);
  font-size:16px;letter-spacing:.06em;padding:14px 34px;border-radius:6px;text-decoration:none;
  box-shadow:0 8px 22px rgba(6,199,85,.34);transition:transform .18s var(--e-back)}
.omikuji-gate .line-btn:hover{transform:translateY(-2px) scale(1.02)}

.omikuji-note{font-size:12px;color:var(--om-ink-soft);line-height:1.85;border-top:1px solid rgba(210,196,168,.3);
  margin-top:8px;padding-top:16px;text-align:left;text-shadow:0 1px 2px rgba(0,0,0,.75),0 1px 8px rgba(0,0,0,.5)}

/* ===== 動きを抑える設定：簡略・即表示（神社背景は残す＝厳かさは維持） ===== */
@media (prefers-reduced-motion: reduce){
  .mikuji-box,.omikuji-draw,.mikuji-divine *,
  .mikuji-result.show .stagger,.mikuji-result.show .reveal-plate.stamp,
  .mikuji-result.show .reveal-plate .plate-glow,.mikuji-result.show .reveal-plate .seal-ripple,
  .mikuji-result.show .deity-note,.mikuji-result.show .deity-note .face::after,
  .mikuji-result.show .lucky,.scene-shadow,.omikuji-draw::after{
    animation:none!important;transition:none!important}
  .mikuji-box{transform:rotateY(-6deg)!important}
  .mikuji-result.show .stagger,.mikuji-result.show .lucky,
  .mikuji-result.show .deity-note,.mikuji-result.show .reveal-plate.stamp{opacity:1!important;transform:none!important}
  .omikuji-fx,.omikuji-flash,.omikuji-burst{display:none!important}
  .reveal-plate .seal-ripple,.reveal-plate .plate-glow{display:none}
}