/* ガチャ演出まわり。演出は「確定済みの結果を見せるだけ」。 */

@keyframes floatIn{
  from{ opacity:0; transform:translate(var(--fx,0px), 60px) rotate(var(--fr,0deg)) scale(.8) }
  to  { opacity:1; transform:translate(var(--fx,0px), 0) rotate(var(--fr,0deg)) scale(1) }
}
@keyframes popIn{
  0%{ opacity:0; transform:scale(.86) }
  60%{ opacity:1; transform:scale(1.03) }
  100%{ opacity:1; transform:scale(1) }
}
@keyframes riseUp{ from{ transform:translateY(14px); opacity:0 } to{ transform:translateY(0); opacity:1 } }
@keyframes shine{
  from{ transform:translateX(-140%) rotate(18deg) }
  to  { transform:translateX(240%) rotate(18deg) }
}
@keyframes glowPulse{
  0%,100%{ opacity:.25; transform:scale(1) }
  50%{ opacity:.7; transform:scale(1.12) }
}


/* ===== ガチャ演出 =====
   円舞 → 三分 → 合一 → 抜刀。位置と動きは js/gacha-anim.js が毎フレーム書く。
   ここでは重なり順と見た目だけを定義する。 */
.gachastage{
  /* 演出のあいだは画面全体を使う。ヘッダーやタブの上にかぶせる */
  position:fixed;inset:0;z-index:60;
  width:100%;height:100%;
  overflow:hidden;
  background:radial-gradient(118% 72% at 50% 42%,#fff 0%,#fdfaf3 52%,#f2ece0 100%);
  perspective:1100px;
  /* 抜き出すカードの大きさ。幅と高さの両方で頭打ちにする。
     NEW とカード名の位置もこの値から決めるので、変えるのはここ1か所だけ。 */
  --gs-card:min(86vw,52vh,400px);
}
/* 演出中は背後がスクロールしないようにする */
body.is-drawing{ overflow:hidden }
/* 準備中の案内も演出面の中に置く */
.gachastage__loading{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;margin:0;z-index:5;
}
.gs{position:absolute;inset:0}
.gs__cam{position:absolute;inset:0;will-change:transform}

.gs__veil{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  background:
    radial-gradient(62% 52% at 50% 50%, color-mix(in srgb, var(--gs-accent,#E8873A) 20%, transparent) 0%, transparent 74%),
    radial-gradient(132% 100% at 50% 50%, transparent 30%, rgba(206,192,164,.58) 100%);
}
.gs__fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* 背景の紋。ゆっくり回り続ける */
.gs__sigil{
  position:absolute;left:50%;top:50%;width:98%;aspect-ratio:1;translate:-50% -50%;
  opacity:.30;pointer-events:none;transform:rotateX(64deg);
  animation:gsSigil 52s linear infinite;
}
.gs__sigil svg{width:100%;height:100%;display:block}
.gs__sigil--b{width:52%;opacity:.26;animation-duration:38s;animation-direction:reverse}
@keyframes gsSigil{ to{ rotate:360deg } }

/* 円舞する裏面 */
.gs__deck{position:absolute;inset:0;transform-style:preserve-3d}
.gs__orb{
  position:absolute;left:50%;top:50%;
  width:clamp(58px,18vw,108px);aspect-ratio:4/5;
  border-radius:6px;overflow:hidden;opacity:0;
  will-change:transform,opacity;backface-visibility:visible;
}
.gs__orb .card{position:absolute;inset:0;width:100%;height:100%;border-radius:6px;box-shadow:none}
.gs__orb > i{
  position:absolute;inset:0;border-radius:6px;opacity:0;
  mix-blend-mode:soft-light;display:block;pointer-events:none;
}

/* 抜刀するカード */
.gs__reveal{
  position:absolute;left:50%;top:50%;
  width:var(--gs-card);aspect-ratio:4/5;
  -webkit-transform-style:preserve-3d;transform-style:preserve-3d;opacity:0;will-change:transform;
}
.gs__face{
  position:absolute;inset:0;border-radius:11px;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.gs__face--front{transform:rotateY(180deg)}
.gs__face .card{position:absolute;inset:0;width:100%;height:100%;border-radius:11px;box-shadow:none}
.gs__sheen{
  position:absolute;inset:-30%;pointer-events:none;opacity:0;z-index:3;
  background:linear-gradient(104deg,transparent 42%,rgba(255,255,255,.6) 50%,transparent 58%);
}

/* 着弾の光 */
.gs__flash{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, #fff 0%, #fff 12%,
    color-mix(in srgb, var(--gs-accent,#E8873A) 88%, #fff) 30%,
    color-mix(in srgb, var(--gs-accent,#E8873A) 34%, transparent) 54%, transparent 74%);
}
.gs__wave{
  position:absolute;left:50%;top:50%;width:min(40vw,22vh);height:min(40vw,22vh);
  transform:translate(-50%,-50%);
  border-radius:50%;border:2px solid currentColor;opacity:0;pointer-events:none;
}
.gs__rays{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;opacity:0}
.gs__ray{
  position:absolute;left:-1.5px;top:0;width:3px;height:min(72vw,40vh);transform-origin:50% 0;
  background:linear-gradient(180deg,var(--gs-accent,#E8873A),transparent);
}

/* ===== ガチャ画面のUI（演出とは別。ここは従来どおり） ===== */
.gacha__counter{
  position:absolute;left:0;right:0;z-index:5;text-align:center;
  top:calc(12px + env(safe-area-inset-top));
  font-size:12px;color:var(--ink-3);letter-spacing:.08em;
}
/* NEW とカード名は画面下寄りにまとめる。カードの大きさが変わっても重ならない */
.gacha__caption{
  position:absolute;left:0;right:0;z-index:5;
  /* カードの下端（中心44% ＋ 高さの半分）のすぐ下に置く。
     カードの大きさが変わっても離れすぎず、重なりもしない。 */
  top:calc(50% + var(--gs-card) * .625 + 22px);
  display:grid;justify-items:center;gap:10px;padding:0 24px;
  pointer-events:none;
}
.gacha__newtag{
  background:var(--danger);color:#fff;font-weight:800;font-size:12px;letter-spacing:.2em;
  padding:4px 14px;border-radius:999px;animation:popIn .3s ease both;
}
.gacha__name{
  margin:0;font-size:20px;font-weight:800;text-align:center;line-height:1.3;
  animation:riseUp .35s ease both;
}
.gacha__acts{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.gacha__skip{
  position:absolute;z-index:6;background:rgba(255,255,255,.7);border:0;
  right:calc(10px + env(safe-area-inset-right));top:calc(8px + env(safe-area-inset-top));
  color:var(--ink-3);font-size:12px;cursor:pointer;padding:8px 14px;border-radius:999px;
}

/* 結果一覧 */
.result__head{margin-bottom:12px}
.result__head--solo{text-align:center;margin-bottom:20px}
/* 10連は11枚。5枚ずつ並べ、あまりの1枚は真ん中に置く */
.result__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.result__grid > .cell{flex:0 0 calc((100% - 24px) / 5);min-width:0}
/* 1枚だけのときは、左上に寄せず中央に大きく置く */
.result__solo{display:grid;justify-items:center}
.result__solo .cell{width:min(66vw,260px);content-visibility:visible}
.result__cell{position:relative;animation:popIn .26s ease both}
.result__cell:nth-child(n){animation-delay:calc(var(--i,0) * 40ms)}
.bonusbox{
  background:var(--coin-soft);border:1px solid #efe1c2;border-radius:var(--radius);
  padding:12px 14px;margin-top:14px;
}
.bonusbox h3{margin:0 0 6px;font-size:13px;color:var(--coin);letter-spacing:.06em}
.bonusbox__row{display:flex;justify-content:space-between;font-size:13px;padding:2px 0}
.bonusbox__total{
  display:flex;justify-content:space-between;font-size:14px;font-weight:800;
  border-top:1px dashed #e2ceaa;margin-top:6px;padding-top:6px;color:var(--coin);
}

.reveal-msg{
  text-align:center;font-size:13px;color:var(--ink-2);margin-top:16px;
  animation:riseUp .4s ease both;
}
/* 大きい1枚のときは、カードから離して下に置く */
.reveal-msg--low{ margin-top:34px }

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}