/* ============================================================
   ルーン選択ギミック 共通スタイル（rune-pick.js とセット）
   伏せた石を混ぜて配る → 選ぶ → めくれてスロットへ、の演出。
   rune-theme.css の変数（--gold 等）を利用。クラスは rp- 接頭辞。
   ============================================================ */
.rp-prompt{ color:var(--gold-bright); font-size:.98rem; min-height:1.5em; margin-bottom:22px; letter-spacing:.03em; opacity:0; transition:opacity .8s ease; text-align:center; }
.rp-dots::after{ content:''; animation:rp-dots 1.4s steps(1,end) infinite; }
@keyframes rp-dots{ 0%{content:''} 25%{content:'・'} 50%{content:'・・'} 75%{content:'・・・'} }

.rp-slots{ display:flex; gap:12px; justify-content:center; margin-bottom:26px; }
.rp-slot{ flex:1; max-width:160px; min-height:130px; border-radius:14px; border:1px dashed rgba(var(--gold-rgb),.3);
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px 6px; background:rgba(255,255,255,.02); }
.rp-slot.filled{ border:1px solid rgba(200,168,98,.5); background:linear-gradient(160deg,var(--stone-light),var(--stone)); animation:rp-slotIn .5s ease; }
@keyframes rp-slotIn{ from{opacity:.2; transform:translateY(12px) scale(.92)} to{opacity:1; transform:none} }
.rp-pos{ font-size:.66rem; letter-spacing:.16em; color:var(--gold); margin-bottom:8px; min-height:.7em; }
.rp-slot .rp-g{ font-size:2.1rem; line-height:1; color:var(--gold-bright); font-family:"Segoe UI Symbol","Noto Sans Symbols",sans-serif; min-height:2.1rem; }
.rp-slot.reversed .rp-g{ transform:rotate(180deg); display:inline-block; }
.rp-nm{ font-size:.74rem; font-weight:700; color:var(--text); margin-top:6px; }
.rp-rv{ font-size:.56rem; color:var(--rose); display:block; }
.rp-wait{ font-size:1.5rem; color:rgba(var(--gold-rgb),.28); }

.rp-pouch{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-bottom:20px; transition:opacity .5s; }
.rp-stone{ width:52px; height:64px; perspective:600px; cursor:pointer; animation:rp-dealIn .55s cubic-bezier(.2,.7,.3,1) both; }
@keyframes rp-dealIn{ from{ opacity:0; transform:translate(var(--dx,0),var(--dy,-30px)) rotate(var(--r,0deg)) scale(.5); } to{ opacity:1; transform:none; } }
.rp-inner{ position:relative; width:100%; height:100%; transition:transform .55s cubic-bezier(.4,.2,.2,1), opacity .5s; transform-style:preserve-3d; }
.rp-stone.flipped .rp-inner{ transform:rotateY(180deg); }
.rp-stone.away .rp-inner{ transform:translateY(-72px) rotateY(180deg) scale(.85); opacity:0; }
.rp-stone:not(.used):not(.away):hover .rp-inner{ transform:translateY(-4px); }
.rp-face{ position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; border-radius:11px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.4); }
.rp-back{ background:linear-gradient(160deg,var(--stone-light),var(--bg1)); border:1px solid rgba(var(--gold-rgb),.35); color:rgba(var(--gold-rgb),.7); font-size:1.1rem; }
.rp-front{ background:linear-gradient(160deg,var(--stone-light),var(--stone)); border:1px solid rgba(var(--gold-rgb),.55); transform:rotateY(180deg); color:var(--gold-bright); font-size:1.7rem; font-family:"Segoe UI Symbol","Noto Sans Symbols",sans-serif; }
.rp-stone.rev .rp-front span{ transform:rotate(180deg); display:inline-block; }
.rp-stone.used{ pointer-events:none; }
.rp-stone.spent{ opacity:.28; pointer-events:none; }

.rp-mix{ background:none; border:1px solid rgba(var(--gold-rgb),.3); color:var(--text-dim); font-size:.76rem; padding:7px 18px; border-radius:30px; cursor:pointer; font-family:inherit; margin-bottom:22px; letter-spacing:.04em; transition:color .2s, border-color .2s; }
.rp-mix:hover{ color:var(--gold-bright); border-color:rgba(var(--gold-rgb),.6); }

@media(max-width:560px){ .rp-stone{ width:46px; height:58px; } .rp-slot .rp-g{ font-size:1.8rem; } }