/* ============================================================
   BlockGame 公開側スタイル（自己完結・外部CDN/画像不使用・全て自作CSS図形）
   - おみくじ: CSSで描いたおみくじ箱＋くじ棒を振る演出 → 結果カードがふわっと表示
   - ルーレット: conic-gradientの静止ディスク＋中央ピボットの針(needle)をCSSアニメで回転させ、
                weight加重で決まった角度で止まる（回転しているのは「針」で、円盤自体は動かない）
   - prefers-reduced-motion 時はアニメを無効化し、瞬時に結果表示だけ行う
   ============================================================ */
.bk-game{ max-width:100%; box-sizing:border-box; text-align:center; }
.bk-game *{ box-sizing:border-box; }
.bk-game .bkgame-title{ margin:0 0 16px; font-size:18px; font-weight:900; color:#26221e; text-align:center; line-height:1.5; }
.bk-game .bkgame-hint{ border:2px dashed #c7ced4; border-radius:12px; background:#f7f8fa; padding:18px 16px; text-align:center; color:#5f6b76; font-size:13px; font-weight:700; line-height:1.8; }
.bk-game .bkgame-editnote{ margin-top:10px; text-align:center; color:#8a5000; font-size:12px; font-weight:700; }

/* ボタン共通 */
.bk-game .bkgame-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; min-width:44px; padding:0 30px; border:0; border-radius:999px; background:var(--tm-brand, #e21d7a); color:#fff; font-size:15px; font-weight:800; letter-spacing:.02em; cursor:pointer; box-shadow:0 5px 16px rgba(0,0,0,.18); transition:transform .12s ease, filter .15s ease, box-shadow .15s ease; }
.bk-game .bkgame-btn:hover{ filter:brightness(1.08); }
.bk-game .bkgame-btn:active{ transform:scale(.97); }
.bk-game .bkgame-btn:disabled{ opacity:.55; cursor:default; filter:none; transform:none; }
.bk-game .bkgame-btn:focus-visible{ outline:3px solid rgba(226,29,122,.45); outline-offset:2px; }

/* --- おみくじ --- */
.bk-game .bkgame-omikuji{ display:flex; flex-direction:column; align-items:center; gap:20px; padding:6px 0; }
.bk-game .bkgame-box{ position:relative; width:126px; height:104px; }
.bk-game .bkgame-box-body{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:118px; height:78px; background:linear-gradient(180deg,#9a5a2c,#6b3719); border-radius:10px 10px 6px 6px; box-shadow:0 8px 18px rgba(0,0,0,.22), inset 0 -8px 0 rgba(0,0,0,.15), inset 0 2px 0 rgba(255,255,255,.15); }
.bk-game .bkgame-box-slit{ position:absolute; top:12px; left:50%; transform:translateX(-50%); width:52px; height:8px; background:#2c1608; border-radius:4px; box-shadow:inset 0 2px 3px rgba(0,0,0,.5); }
.bk-game .bkgame-box-sticks{ position:absolute; top:-4px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:1; }
.bk-game .bkgame-box-sticks span{ width:6px; height:50px; background:linear-gradient(180deg,#fdf6e3,#e8dcb8); border-radius:3px 3px 0 0; box-shadow:0 1px 2px rgba(0,0,0,.22); }
.bk-game .bkgame-box-sticks span:nth-child(1){ transform:rotate(-9deg) translateY(3px); }
.bk-game .bkgame-box-sticks span:nth-child(3){ transform:rotate(9deg) translateY(3px); }
.bk-game .bkgame-box.bkgame-shaking{ animation:bkgame-shake .62s ease; }
.bk-game .bkgame-box.bkgame-shaking .bkgame-box-sticks{ animation:bkgame-sticks-rattle .62s ease; }
@keyframes bkgame-shake{
  0%,100%{ transform:translateX(0) rotate(0deg); }
  15%{ transform:translateX(-7px) rotate(-4deg); }
  30%{ transform:translateX(6px) rotate(4deg); }
  45%{ transform:translateX(-6px) rotate(-3deg); }
  60%{ transform:translateX(5px) rotate(3deg); }
  75%{ transform:translateX(-3px) rotate(-2deg); }
  90%{ transform:translateX(2px) rotate(1deg); }
}
@keyframes bkgame-sticks-rattle{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(-5px); }
}

/* --- ルーレット --- */
.bk-game .bkgame-roulette{ display:flex; flex-direction:column; align-items:center; gap:18px; padding:6px 0; }
.bk-game .bkgame-wheel-wrap{ position:relative; width:220px; height:220px; max-width:72vw; max-height:72vw; }
.bk-game .bkgame-wheel{ width:100%; height:100%; border-radius:50%; box-shadow:0 8px 24px rgba(0,0,0,.25), inset 0 0 0 5px rgba(255,255,255,.55); }
.bk-game .bkgame-hub{ position:absolute; top:50%; left:50%; width:34px; height:34px; margin:-17px 0 0 -17px; background:#fff; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.28); z-index:2; }
.bk-game .bkgame-hub::after{ content:''; position:absolute; inset:9px; border-radius:50%; background:var(--tm-brand, #e21d7a); }
.bk-game .bkgame-needle{ position:absolute; top:50%; left:50%; width:7px; height:88px; margin-left:-3.5px; margin-top:-88px; transform-origin:50% 100%; transform:rotate(0deg); background:linear-gradient(180deg, var(--tm-brand, #e21d7a), #7a0f42); border-radius:5px 5px 2px 2px; box-shadow:0 2px 8px rgba(0,0,0,.3); z-index:3; transition:transform 3.2s cubic-bezier(.14,.65,.21,1); }
.bk-game .bkgame-needle::before{ content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:12px solid #7a0f42; }

.bk-game .bkgame-legend{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px 16px; justify-content:center; max-width:380px; }
.bk-game .bkgame-legend li{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:#43404a; }
.bk-game .bkgame-dot{ width:12px; height:12px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 0 2px rgba(255,255,255,.65) inset, 0 0 0 1px rgba(0,0,0,.1); }
.bk-game .bkgame-legend-weight{ color:#c9a227; font-size:10px; letter-spacing:1px; }

/* --- 結果カード（共通） --- */
.bk-game .bkgame-result{ position:relative; margin-top:4px; }
.bk-game .bkgame-result[hidden]{ display:none; }
.bk-game .bkgame-result-card{ --bkgame-accent:#e21d7a; display:inline-flex; flex-direction:column; gap:5px; padding:16px 28px; border-radius:16px; background:#fff; border:2px solid var(--bkgame-accent); box-shadow:0 10px 26px rgba(0,0,0,.18); min-width:170px; }
.bk-game .bkgame-result-card.bkgame-pop-again{ animation:bkgame-pop .45s cubic-bezier(.26,1.4,.44,1) both; }
.bk-game .bkgame-result-prefix{ margin:0; font-size:12.5px; font-weight:700; color:#8a7484; }
.bk-game .bkgame-result-label{ margin:0; font-size:23px; font-weight:900; color:var(--bkgame-accent); overflow-wrap:break-word; }
@keyframes bkgame-pop{
  0%{ opacity:0; transform:scale(.7) translateY(8px); }
  100%{ opacity:1; transform:scale(1) translateY(0); }
}

/* --- 紙吹雪（レア枠のみ・CSSのみで完結） --- */
.bk-game .bkgame-confetti-wrap{ position:absolute; inset:0; pointer-events:none; overflow:visible; }
.bk-game .bkgame-confetti{ position:absolute; top:-8px; width:8px; height:13px; border-radius:2px; opacity:0; animation:bkgame-fall 1.05s ease-in forwards; }
@keyframes bkgame-fall{
  0%{ opacity:1; transform:translateY(0) rotate(0deg); }
  100%{ opacity:0; transform:translateY(130px) rotate(340deg); }
}

@media (max-width:480px){
  .bk-game .bkgame-wheel-wrap{ width:180px; height:180px; }
  .bk-game .bkgame-needle{ height:70px; margin-top:-70px; }
  .bk-game .bkgame-needle::before{ top:-7px; border-left-width:7px; border-right-width:7px; border-bottom-width:10px; }
  .bk-game .bkgame-result-label{ font-size:19px; }
  .bk-game .bkgame-box{ width:108px; height:92px; }
  .bk-game .bkgame-box-body{ width:100px; height:68px; }
}

@media (prefers-reduced-motion: reduce){
  .bk-game .bkgame-needle{ transition:none !important; }
  .bk-game .bkgame-box.bkgame-shaking,
  .bk-game .bkgame-box.bkgame-shaking .bkgame-box-sticks{ animation:none !important; }
  .bk-game .bkgame-result-card.bkgame-pop-again{ animation:none !important; }
  .bk-game .bkgame-confetti{ animation:none !important; display:none; }
  .bk-game .bkgame-btn{ transition:none !important; }
}