/* =====================================================================
   CUBE GACHA — Grand Edition
   Palette: void black + electric indigo ambience + rarity accent tiers
   Type: M PLUS Rounded 1c (display) / Zen Kaku Gothic New (body) /
         JetBrains Mono (data, labels, mono UI)
   ===================================================================== */

:root{
  --bg-void:#05060d;
  --bg-deep:#0b0f1f;
  --panel:#10152a;
  --line: rgba(255,255,255,.09);
  --ink-100:#f3f5ff;
  --ink-60:#9aa3c0;

  --c-n:#9aa3c0;
  --c-r:#4fc3ff;
  --c-sr:#b96bff;
  --c-ssr:#ffc93a;
  --c-ur1:#ff4d9d;
  --c-ur2:#4dd9ff;
  --gold:#ffd76a;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{
  margin:0; padding:0; width:100%; min-height:100%;
  background:
    radial-gradient(ellipse 130% 70% at 50% -8%, #171d3e 0%, var(--bg-deep) 42%, var(--bg-void) 100%);
  color:var(--ink-100);
  font-family:"Zen Kaku Gothic New","M PLUS Rounded 1c",sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.mono{ font-family:"JetBrains Mono",monospace; letter-spacing:.03em; }
button{ font-family:inherit; }

/* ---------- ambient backdrop ---------- */
#bgStars{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.65; }
.nebula{
  position:fixed; z-index:0; pointer-events:none; border-radius:50%;
  filter:blur(90px); opacity:.22; mix-blend-mode:screen;
}
.nebula.n1{ width:60vw; height:60vw; background:#3a4bd9; top:-18vw; left:-14vw; animation:driftA 26s ease-in-out infinite; }
.nebula.n2{ width:46vw; height:46vw; background:#b23aff; bottom:-14vw; right:-10vw; animation:driftB 32s ease-in-out infinite; }
.nebula.n3{ width:34vw; height:34vw; background:#ff3aa0; top:40vh; right:18vw; animation:driftC 22s ease-in-out infinite; }
@keyframes driftA{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(4vw,3vw); } }
@keyframes driftB{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-3vw,-4vw); } }
@keyframes driftC{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-2vw,3vw) scale(1.08); } }

/* ---------- header ---------- */
header{ position:relative; z-index:2; padding:44px 20px 16px; text-align:center; }
.topbar{
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap; margin-bottom:10px;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:10.5px; letter-spacing:.24em; color:var(--ink-60);
  padding:6px 14px; border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.02);
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--c-ssr); box-shadow:0 0 8px var(--c-ssr); }

.gem-wrap{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 8px 6px 12px; border-radius:999px;
  background:rgba(255,255,255,.03); border:1px solid var(--line);
}
.gem-wrap.insufficient{ animation:shakeX .4s; }
.gem-wrap.insufficient .gem-count{ color:#ff6161; }
@keyframes shakeX{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} }
.gem-icon{ display:inline-block; width:14px; height:14px; background:linear-gradient(135deg,#8ecbff,#3a6cff); clip-path:polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%); }
.gem-count{ font-size:12.5px; font-weight:700; }
.gem-refill{
  border:none; border-radius:999px; padding:5px 10px; font-size:10px; cursor:pointer;
  background:rgba(255,255,255,.08); color:var(--ink-100); letter-spacing:.03em;
}
.gem-refill:hover{ background:rgba(255,255,255,.16); }

h1{
  font-family:"M PLUS Rounded 1c",sans-serif; font-weight:900;
  font-size:clamp(34px,7vw,60px); margin:10px 0 6px; letter-spacing:.02em;
  background:linear-gradient(180deg,#fff 0%,#cdd6ff 55%,#8f9cff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 60px rgba(140,150,255,.25);
}
header p{ color:var(--ink-60); font-size:14px; margin:0 auto; max-width:520px; line-height:1.8; }
.link-row{ margin-top:14px; }
.text-link{
  background:none; border:none; cursor:pointer; color:var(--ink-60);
  font-size:11px; text-decoration:underline; text-underline-offset:4px;
}
.text-link:hover{ color:var(--ink-100); }

/* ---------- pickup banner ---------- */
.pickup{ position:relative; z-index:2; max-width:760px; margin:26px auto 0; padding:0 20px; }
.pickup-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; padding-left:2px; }
.pickup-badge{
  background:linear-gradient(180deg,#ffe8a8,#ffc93a); color:#241a00; font-size:10px;
  font-weight:700; padding:3px 9px; border-radius:6px; letter-spacing:.08em;
}
.pickup-title{ font-size:12.5px; color:var(--ink-60); }
.pickup-row{ display:flex; gap:10px; overflow-x:auto; padding:4px 2px 12px; scrollbar-width:thin; }
.pickup-card{
  position:relative; flex:0 0 auto; width:118px; padding:16px 10px 12px; text-align:center;
  border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid var(--line);
}
.pickup-ribbon{
  position:absolute; top:8px; left:8px; background:var(--c-ur1); color:#fff;
  font-size:8px; padding:2px 6px; border-radius:5px; letter-spacing:.04em;
}
.pickup-name{ font-size:10.5px; color:var(--ink-60); margin-top:8px; line-height:1.3; }

/* ---------- machine panel ---------- */
main{ position:relative; z-index:2; max-width:720px; margin:0 auto; padding:22px 20px 90px; }
.machine{
  border-radius:28px; padding:1.5px;
  background:conic-gradient(from 0deg,#2a3266,#5a6ad8,#2a3266 30%,#171b36 60%,#2a3266);
  background-size:220% 220%;
  animation:borderDrift 14s linear infinite;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
}
@keyframes borderDrift{ 0%{background-position:0% 0%;} 100%{background-position:200% 200%;} }
.machine-inner{
  border-radius:27px; padding:0 0 28px;
  background:linear-gradient(180deg, rgba(13,16,30,.97), rgba(6,8,15,.98));
  position:relative; overflow:hidden;
}
#idleScene{ width:100%; height:250px; display:block; }
.machine-body{ padding:0 22px; position:relative; z-index:2; }

.cta-row{ display:flex; gap:12px; margin-top:20px; }
.pull-btn{
  flex:1; position:relative; border:none; border-radius:16px; cursor:pointer;
  padding:17px 10px 15px; font-family:"M PLUS Rounded 1c",sans-serif; color:#0b0d18;
  background:linear-gradient(180deg,#fff,#cfd6ff);
  box-shadow:0 10px 26px -8px rgba(140,150,255,.55), inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .15s ease;
}
.pull-btn:active{ transform:translateY(2px) scale(.99); }
.pull-btn .big{ display:block; font-weight:900; font-size:18px; }
.pull-btn .cost{ display:block; font-size:11px; margin-top:5px; opacity:.75; }
.pull-btn.ten{ background:linear-gradient(180deg,#ffe8a8,#ffc93a); box-shadow:0 10px 30px -8px rgba(255,201,58,.55), inset 0 1px 0 rgba(255,255,255,.8); }
.pull-btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.ribbon{
  position:absolute; top:-9px; right:10px; background:#ff4d9d; color:#fff; font-size:9.5px;
  padding:3px 8px; border-radius:999px; letter-spacing:.05em; box-shadow:0 4px 10px -2px rgba(255,77,157,.6);
}
.pity-note{ margin-top:13px; text-align:center; color:var(--ink-60); font-size:10.5px; }

/* ---------- history strip ---------- */
.history{ margin-top:24px; }
.history h3{ font-size:11px; color:var(--ink-60); letter-spacing:.16em; margin:0 0 10px; text-transform:uppercase; }
.history-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
.hchip{
  flex:0 0 auto; width:50px; height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--rc,var(--line)); box-shadow:0 0 10px -4px var(--rc,transparent);
}
.hchip .cube-mini{ width:20px; height:20px; border-radius:5px; }

footer{ position:relative; z-index:2; text-align:center; padding:20px; color:var(--ink-60); font-size:10.5px; letter-spacing:.04em; }

/* =====================================================================
   CEREMONY OVERLAY
   ===================================================================== */
#overlay{ position:fixed; inset:0; z-index:50; background:#9ec2ee; display:none; opacity:0; transition:opacity .35s ease; }
#overlay.show{ display:block; opacity:1; }
#ceremonyCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 80% 70% at 50% 45%, transparent 55%, rgba(0,0,0,.5) 100%);
}
#flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }

.overlay-topbar{
  position:absolute; top:max(16px,env(safe-area-inset-top)); left:0; right:0;
  display:flex; align-items:center; justify-content:space-between; padding:0 16px; z-index:6;
}
.icon-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08); color:#fff; font-size:16px; cursor:pointer; backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
}
.pill-btn{
  background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.25);
  font-size:11px; letter-spacing:.06em; padding:9px 14px; border-radius:999px; cursor:pointer; backdrop-filter:blur(6px);
}
.pill-btn:hover, .icon-btn:hover{ background:rgba(255,255,255,.16); }
#skipBtn{ opacity:0; pointer-events:none; transition:opacity .3s ease; }
#skipBtn.show{ opacity:1; pointer-events:auto; }

/* ---------- god rays behind the prize (sits over the 3D scene) ---------- */
.rays{
  position:absolute; left:50%; top:40%; width:900px; height:900px; max-width:230vw; max-height:230vw;
  transform:translate(-50%,-50%); z-index:1;
  background:repeating-conic-gradient(from 0deg, var(--rc,#fff) 0deg 3deg, transparent 3deg 17deg);
  opacity:0; mix-blend-mode:screen; filter:blur(2px);
  -webkit-mask-image:radial-gradient(circle, #000 12%, transparent 62%);
  mask-image:radial-gradient(circle, #000 12%, transparent 62%);
  animation:raysSpin 20s linear infinite; pointer-events:none; transition:opacity .7s ease;
}
@keyframes raysSpin{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* ---------- single result card (Direct render on 3D background) ---------- */
#singleResult{
  position:absolute; left:50%; bottom:max(24px, 5vh); z-index:4;
  width:min(400px, 92vw); opacity:0; pointer-events:none;
  transform:translateX(-50%) translateY(20px) scale(.98);
  transition:opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#singleResult.show{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); pointer-events:auto; }

/* 各結果要素およびアクションボタンの初期状態（段階的表示用） */
#rarityTag, #flavorTag, #itemName, #itemDesc, #singleResult .action-row {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 表示状態（.showが付いたとき） */
#rarityTag.show, #flavorTag.show, #itemName.show, #itemDesc.show, #singleResult .action-row.show {
  opacity: 1;
  transform: translateY(0);
}

/* 黒いフレーム・背景を完全に削除し、3D背景の上に直接浮かび上がるようにする */
.rcard{
  position:relative; width:100%; border:none; background:transparent; box-shadow:none; padding:0;
  overflow:visible;
}
.foil{ display:none; }

/* レア度タグ（より大きく、視認性の高い文字と強力な影） */
.rarity-tag{
  display:inline-block; font-weight:900; font-size:1.6rem; letter-spacing:.2em; padding:6px 22px;
  border-radius:999px; color:#fff; background:var(--rc); position:relative; z-index:2;
  text-transform: uppercase;
  filter: drop-shadow(0 0 16px rgba(0,0,0,0.9)) drop-shadow(0 2px 6px rgba(0,0,0,0.8));
}
.flavor{ font-size:11.5px; color:var(--rc); margin-top:8px; position:relative; z-index:2; text-shadow:0 1px 4px rgba(0,0,0,0.9); }

/* キューブの名前（さらに大きく、立体的なシャドウで背景に埋もれないようにする） */
.iname{ 
  font-family:"M PLUS Rounded 1c",sans-serif; font-weight:900; font-size:clamp(28px, 6vw, 36px); 
  margin:8px 0 6px; position:relative; z-index:2; color:#fff;
  text-shadow:0 0 20px rgba(0,0,0,0.95), 0 3px 10px rgba(0,0,0,1), 0 0 2px #000;
  letter-spacing: 0.04em;
}

/* 説明文 */
.idesc{ 
  font-size:13px; color:#f0f3ff; line-height:1.6; margin:0 0 22px; position:relative; z-index:2; 
  text-shadow:0 1px 8px rgba(0,0,0,0.95), 0 0 3px #000;
  max-width: 340px;
}

.newbadge{
  position:absolute; top:-10px; left:10px; z-index:3; display:none;
  background:#ff4d9d; color:#fff; font-weight:700; font-size:11.5px; padding:6px 12px; border-radius:10px;
  transform:rotate(-8deg); box-shadow:0 4px 15px -2px rgba(255,77,157,0.7);
}

/* ボタンエリア（縦並び・幅広でタッチしやすく改善） */
.action-row{ 
  width: 100%;
  display:flex; 
  flex-direction: column; 
  gap: 12px; 
  position:relative; 
  z-index:2; 
  align-items: center;
}
.ghost-btn, .solid-btn{
  width: 100%;
  max-width: 320px;
  border-radius: 50px; 
  padding: 15px 24px; 
  font-weight: 700; 
  font-size: 1.1rem; 
  letter-spacing: .05em; 
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.ghost-btn{ 
  background: rgba(20, 25, 40, 0.75); 
  color: #fff; 
  border: 1px solid rgba(255, 255, 255, 0.3); 
  backdrop-filter: blur(8px);
}
.ghost-btn:hover, .ghost-btn:active{ background: rgba(35, 42, 70, 0.9); transform: scale(0.98); }

.solid-btn{ 
  background: linear-gradient(135deg, #ffffff, #d6e0ff); 
  color: #0b0d18; 
  border: none; 
}
.solid-btn:hover, .solid-btn:active{ background: #ffffff; transform: scale(0.98); }

/* ---------- 段階的表示 & レア度別アニメーション用クラス ---------- */
.result-step {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.result-step.show {
  opacity: 1;
  transform: translateY(0);
}

.rarity-pop-sr {
  animation: popSR 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.rarity-pop-ssr {
  animation: popSSR 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes popSR {
  0% { opacity: 0; transform: scale(0.4) translateY(30px); }
  70% { transform: scale(1.1) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes popSSR {
  0% { opacity: 0; transform: scale(0.2) rotate(-8deg); filter: brightness(2.5); }
  50% { transform: scale(1.25) rotate(2deg); filter: brightness(1.5) drop-shadow(0 0 25px var(--rc)); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); filter: brightness(1) drop-shadow(0 0 12px var(--rc)); }
}

/* ---------- 10-pull grid (横2列 × 上下2段レイアウト) ---------- */
#gridResult{
  position:absolute; inset:0; z-index:4; display:none; flex-direction:column; align-items:center;
  justify-content:center; padding:16px; opacity:0; transition:opacity .4s ease;
  overflow-y: auto;
}
#gridResult.show{ display:flex; opacity:1; }
.grid-wrap{ width:min(440px, 94vw); max-height: 90vh; overflow-y: auto; padding: 4px; }
.grid-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; padding:0 4px; }
.grid-title{ font-size:12px; color:var(--ink-60); letter-spacing:.12em; }

.rgrid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }

/* 上下2段の要素が入るようカードの高さを調整 */
.gcell{ position:relative; aspect-ratio:2.1/1; perspective:700px; cursor:pointer; }
.flip-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.2,.9,.25,1.05); }
.gcell.flipped .flip-inner{ transform:rotateY(180deg); }

.flip-face{
  position:absolute; inset:0; backface-visibility:hidden; border-radius:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:10px;
}
.flip-front{ background:linear-gradient(160deg,#161b34,#0a0d1c); border:1px solid var(--line); }
.flip-front::before{ content:"?"; font-size:24px; color:rgba(255,255,255,.25); font-weight:700; font-family:"JetBrains Mono",monospace; }

.flip-back{
  transform:rotateY(180deg);
  background:linear-gradient(180deg, rgba(20,24,44,.95), rgba(8,10,20,.98));
  border:1px solid var(--rc,#444); box-shadow:0 0 18px -6px var(--rc,transparent);
}

/* 1行目：ミニキューブとレア度を横並びにするコンテナ */
.g-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ミニキューブのサイズ */
.mini-cube{ width:38px; height:38px; border-radius:9px; border:1px solid rgba(255,255,255,.4); flex-shrink:0; }

/* レア度：ミニキューブと同等レベルの大きな文字サイズに設定 */
.glabel{ font-size:22px; color:var(--rc,#fff); font-weight:900; letter-spacing:.05em; line-height:1; }

/* 2行目：アイテム名（中央揃えで読みやすく） */
.gname{ 
  font-size:12px; 
  color:var(--ink-100); 
  font-weight:700; 
  text-align:center; 
  line-height:1.25; 
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 1;      /* 1行でスッキリ収める場合 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 90%;
}

.spotlight-ring{ position:absolute; inset:-6px; border-radius:17px; pointer-events:none; border:2px solid transparent; opacity:0; }
.gcell.spotlight .spotlight-ring{ border-color:var(--rc,#fff); animation:spotlightPulse .9s ease-out; }
@keyframes spotlightPulse{ 0%{ opacity:1; transform:scale(1); } 100%{ opacity:0; transform:scale(1.35); } }

#gridResult .action-row{ margin-top:16px; width:min(340px,80vw); margin-left:auto; margin-right:auto; }

/* ---------- spinning CSS cube (pickup cards only) ---------- */
.cube3d{ width:44px; height:44px; margin:0 auto; perspective:400px; }
.cube3d .inner{ width:100%; height:100%; position:relative; transform-style:preserve-3d; animation:spinCube 5.5s linear infinite; }
@keyframes spinCube{ from{ transform:rotateX(0) rotateY(0); } to{ transform:rotateX(360deg) rotateY(360deg); } }
.cube3d .face{ position:absolute; width:100%; height:100%; background:var(--item-color,#888); border:1px solid rgba(255,255,255,.4); opacity:.92; }
.cube3d .f1{ transform:translateZ(22px); }
.cube3d .f2{ transform:rotateY(180deg) translateZ(22px); }
.cube3d .f3{ transform:rotateY(90deg) translateZ(22px); }
.cube3d .f4{ transform:rotateY(-90deg) translateZ(22px); }
.cube3d .f5{ transform:rotateX(90deg) translateZ(22px); }
.cube3d .f6{ transform:rotateX(-90deg) translateZ(22px); }

/* ---------- rate / pity modal ---------- */
#rateModal{
  position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.7); display:none;
  align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(4px);
}
#rateModal.show{ display:flex; }
.modal-card{ width:min(380px,100%); background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:24px 22px; box-shadow:0 30px 80px -20px rgba(0,0,0,.8); }
.modal-card h4{ margin:0 0 4px; font-size:15px; font-family:"M PLUS Rounded 1c",sans-serif; }
.modal-card .sub{ font-size:11px; color:var(--ink-60); margin:0 0 16px; }
.rate-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--line); font-size:13px; }
.rate-row:last-child{ border-bottom:none; }
.rate-row .lbl{ display:flex; align-items:center; gap:8px; }
.rate-row .dot{ width:10px; height:10px; border-radius:3px; }
.rate-row .pct{ color:var(--ink-60); }
.pity-box{ margin-top:12px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.04); font-size:11px; color:var(--ink-60); text-align:center; }
.modal-card .solid-btn{ margin-top:16px; width:100%; }

@media (prefers-reduced-motion: reduce){
  .cube3d .inner, .foil, .rays, .machine, .nebula{ animation:none !important; }
}