:root{
  --bg0:#0b1020;
  --bg1:#0d1a3a;
  --text:#e9f0ff;
  --muted:#a9b7d9;

  --cabW:min(86vw, 460px);
  --cabH:calc(var(--cabW) * 1.28);

  --shadow: 0 18px 50px rgba(0,0,0,.45);

  --btn:#1b2f66;
  --btn2:#27458f;

  --n:#7ab7ff;
  --r:#ffcf5a;
  --ur:#ff67f7;

  --capSize: clamp(64px, 16vw, 84px);

  --spinHalfMs:360ms;
  --flapOpenMs:220ms;
  --flapCloseMs:520ms;
  --openMs:650ms;
  --popMs:520ms;

  --shake: 0px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  background:
    radial-gradient(1200px 800px at 20% 20%, rgba(102,227,255,.18), transparent 55%),
    radial-gradient(900px 700px at 80% 30%, rgba(255,103,247,.14), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

.wrap{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:18px 14px 22px;
}

.app{
  width:min(980px, 100%);
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  align-items:center;
  justify-items:center;
}
@media (min-width: 860px){
  .app{
    grid-template-columns: 1fr 0.9fr;
    gap:18px;
    align-items:stretch;
  }
}

.cabinet{
  width:var(--cabW);
  height:var(--cabH);
  position:relative;
  filter: drop-shadow(0 22px 55px rgba(0,0,0,.55));
}

.cab-shell{
  position:absolute; inset:0;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 28%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, #1b2b5e 0%, #111e42 40%, #0b1634 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -18px 35px rgba(0,0,0,.35),
    0 18px 55px rgba(0,0,0,.5);
  overflow:hidden;
}
.cab-shell::before{
  content:"";
  position:absolute; inset:-40% -15% auto -25%;
  height:60%;
  transform: rotate(-14deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 25%, rgba(255,255,255,.06) 55%, transparent 80%);
  opacity:.9;
  pointer-events:none;
}
.cab-shell::after{
  content:"";
  position:absolute; inset:auto -25% -35% -35%;
  height:55%;
  transform: rotate(10deg);
  background: radial-gradient(closest-side, rgba(102,227,255,.18), transparent 65%);
  opacity:.9;
  pointer-events:none;
}

.cab-frame{
  position:absolute; inset:14px;
  border-radius: 22px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 0 0 2px rgba(0,0,0,.18);
  pointer-events:none;
}

.cab-content{
  position:absolute;
  inset:18px 22px 18px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.cab-header{
  height: 14%;
  min-height: 78px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)),
    linear-gradient(180deg, #243d86, #1a2e64);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -10px 22px rgba(0,0,0,.25);
  position:relative;
}
.cab-title{
  position:absolute;
  inset:0;
  display:grid;
  font-weight:800;
  letter-spacing:.12em;
  text-shadow: 0 3px 10px rgba(0,0,0,.45);
  font-size: clamp(14px, 2.2vw, 18px);
  align-items: center;
  text-align: left;
  padding-left: 40px;
}

.status{
  position:absolute;
  top:18px;
  right:22px;
  display:flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  user-select:none;
  z-index:5;
}
.dot{
  width:9px; height:9px; border-radius:50%;
  background: #79ffb0;
  box-shadow: 0 0 0 3px rgba(121,255,176,.16);
  animation: pulse 1.6s ease-in-out infinite;
}
.status[data-state="Spinning"] .dot{ background:#66e3ff; box-shadow:0 0 0 3px rgba(102,227,255,.16); }
.status[data-state="Dispensing"] .dot{ background:#ffcf5a; box-shadow:0 0 0 3px rgba(255,207,90,.16); }
.status[data-state="Opening"] .dot{ background:#ff9cf5; box-shadow:0 0 0 3px rgba(255,156,245,.16); }
.status[data-state="Result"] .dot{ background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.18); }
.status-text{ font-size:12px; color:var(--muted); letter-spacing:.04em; white-space:nowrap; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:.95; } 50%{ transform:scale(1.12); opacity:.7; } }

.window{
  flex: 1 1 auto;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)),
    radial-gradient(120% 80% at 20% 10%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(120% 80% at 70% 30%, rgba(102,227,255,.10), transparent 60%),
    rgba(8,18,46,.55);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 -18px 35px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow:hidden;
  position:relative;
}
.window-gloss{
  position:absolute;
  inset:-30% -20% auto -20%;
  height:52%;
  transform: rotate(-12deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.22) 30%, rgba(255,255,255,.07) 60%, transparent 88%);
  opacity:.9;
  pointer-events:none;
}

/* ===== gumballs (inside machine) ===== */
.gumballs{
  position:absolute;
  inset:0;
  opacity:.96;
  filter:saturate(1.07);
  transform: translate3d(0,0,0);
  pointer-events:none;
}

/* 密集感：下側に“詰まってる”雰囲気を出す薄い影 */
.gumballs::before{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:-8%;
  height:58%;
  background:
    radial-gradient(closest-side at 50% 86%, rgba(0,0,0,.45), transparent 70%),
    radial-gradient(closest-side at 20% 80%, rgba(0,0,0,.22), transparent 75%),
    radial-gradient(closest-side at 80% 78%, rgba(0,0,0,.18), transparent 75%);
  opacity:.55;
  filter: blur(2px);
}

/* inside capsules */
.gum-cap{
  position:absolute;
  left: var(--x);
  top:  var(--y);
  width: var(--sz);
  height: var(--sz);
  border-radius: 50%;
  overflow:hidden;

  /* 個別揺れ：JSが --dx/--dy/--dr を入れる（回転中だけ変化） */
  transform:
    translate(-50%,-50%)
    rotate(var(--r))
    translate(calc(var(--dx) * 1px), calc(var(--dy) * 1px))
    rotate(calc(var(--dr) * 1deg))
    scale(var(--s));

  /* yが下ほど手前っぽい */
  z-index: var(--z);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 -14px 22px rgba(0,0,0,.30),
    0 10px 16px rgba(0,0,0,.26);

  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.92), rgba(255,255,255,.12) 30%, rgba(0,0,0,.22) 76%),
    radial-gradient(circle at 70% 75%, rgba(102,227,255,.18), transparent 55%),
    linear-gradient(180deg,
      hsla(var(--h), 95%, 62%, .95),
      hsla(var(--h), 85%, 42%, .92)
    );
  will-change: transform;
}
.gum-cap::before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:49.5%;
  height:2%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
  opacity:.82;
}
.gum-cap::after{
  content:"";
  position:absolute;
  inset:-18% -26% auto -26%;
  height:56%;
  transform: rotate(-14deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.34) 28%, rgba(255,255,255,.08) 56%, transparent 85%);
  opacity:.78;
  pointer-events:none;
}

/* レバー回転中だけ“個別揺れ”が有効になるよう、少しだけ全体の慣性も足す */
.gumballs.wiggle{
  filter: saturate(1.08) contrast(1.02);
}

@media (max-width: 420px){
  .gum-cap{ box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 -12px 18px rgba(0,0,0,.30),
    0 8px 14px rgba(0,0,0,.24);
  }
}

.control{
  height: 22%;
  min-height: 120px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
    linear-gradient(180deg, #1a2e64, #13234a);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -16px 30px rgba(0,0,0,.26);
  position:relative;
}

.coin{
  position:absolute;
  left:14%;
  top:50%;
  transform: translateY(-50%);
  width:28%;
  height:52%;
  border-radius: 14px;
  background:
    radial-gradient(70% 90% at 30% 18%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, #0d1734, #0a1330);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 -14px 26px rgba(0,0,0,.32);
}
.coin::before{
  content:"";
  position:absolute; left:14%; right:14%; top:40%;
  height:18%;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  opacity:.85;
}
.coin::after{
  content:"¥";
  position:absolute; left:0; right:0; bottom:10%;
  text-align:center;
  font-weight:900;
  letter-spacing:.06em;
  color:rgba(255,255,255,.40);
  font-size: clamp(12px, 2.3vw, 16px);
}

.lever-area{
  position:absolute;
  right:10%;
  top:50%;
  transform: translateY(-50%);
  width:44%;
  height:74%;
  display:grid;
  place-items:center;
}
.lever-base{
  width:72%;
  height:76%;
  border-radius: 18px;
  background:
    radial-gradient(70% 90% at 30% 20%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(180deg, #0f1a3a, #0a1330);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 -16px 28px rgba(0,0,0,.36);
  position:relative;
}

.lever{
  position:absolute;
  left:50%;
  top:48%;
  width: 56%;
  height: 56%;
  transform: translate(-50%,-50%) rotate(0deg);
  transform-origin: 50% 58%;
  will-change: transform;
  pointer-events:none;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.35));
}
.lever-axis{
  position:absolute;
  left:50%;
  top:56%;
  width: 14%;
  height: 72%;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 -14px 18px rgba(0,0,0,.24);
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.38) 18%,
      rgba(255,255,255,.08) 36%,
      rgba(0,0,0,.18) 62%,
      rgba(255,255,255,.22) 78%,
      rgba(255,255,255,.06) 100%
    ),
    linear-gradient(180deg, #aab6cc, #6c7a96);
}
.lever-axis::before{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,.00) 0px,
    rgba(255,255,255,.00) 2px,
    rgba(255,255,255,.06) 3px,
    rgba(255,255,255,.00) 5px
  );
  opacity:.72;
  mix-blend-mode: overlay;
}
.lever-grip{
  position:absolute;
  left:50%;
  top:16%;
  width: 64%;
  aspect-ratio:1/1;
  transform: translateX(-50%);
  border-radius: 50%;
  overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 -18px 30px rgba(0,0,0,.30);
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.92), rgba(255,255,255,.10) 32%, rgba(0,0,0,.25) 76%),
    radial-gradient(circle at 70% 75%, rgba(102,227,255,.18), transparent 55%),
    linear-gradient(180deg, #3c74ff, #2a4bb0);
}
.lever-grip::before{
  content:"";
  position:absolute;
  inset:-20% -30% auto -30%;
  height:55%;
  transform: rotate(-16deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.42) 28%, rgba(255,255,255,.12) 56%, transparent 85%);
  opacity:.85;
  pointer-events:none;
}
.lever-grip .grip-noise{
  position:absolute;
  inset:-10%;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.00) 0px,
      rgba(255,255,255,.00) 3px,
      rgba(255,255,255,.03) 4px,
      rgba(255,255,255,.00) 6px
    );
  opacity:.5;
  mix-blend-mode: overlay;
  transform: rotate(12deg);
  pointer-events:none;
}

.lever.spin-half-1{ animation: halfTurn1 var(--spinHalfMs) cubic-bezier(.2,.85,.15,1) forwards; }
.lever.spin-half-2{ animation: halfTurn2 var(--spinHalfMs) cubic-bezier(.2,.85,.15,1) forwards; }
.lever.damped{ animation: damp 320ms cubic-bezier(.2,.9,.2,1) forwards; }
@keyframes halfTurn1{ 0%{ transform: translate(-50%,-50%) rotate(0deg); } 100%{ transform: translate(-50%,-50%) rotate(180deg); } }
@keyframes halfTurn2{ 0%{ transform: translate(-50%,-50%) rotate(180deg); } 100%{ transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes damp{
  0%{ transform: translate(-50%,-50%) rotate(360deg); }
  35%{ transform: translate(-50%,-50%) rotate(354deg); }
  62%{ transform: translate(-50%,-50%) rotate(362deg); }
  82%{ transform: translate(-50%,-50%) rotate(358deg); }
  100%{ transform: translate(-50%,-50%) rotate(360deg); }
}

.dispenser{
  height: 16%;
  min-height: 88px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    linear-gradient(180deg, #0f1a3a, #0b1532);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -16px 28px rgba(0,0,0,.40);
  overflow:hidden;
  position:relative;
}

.chute{
  position:absolute;
  left:12%;
  top: 50%;
  transform: translateY(-50%);
  width:34%;
  height: var(--capSize);
  border-radius: 14px;
  background:
    radial-gradient(70% 90% at 30% 20%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, #060c1e, #020614);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 -10px 22px rgba(0,0,0,.55);
  overflow:hidden;
}

.flap{
  position:absolute;
  left:50%;
  top:10%;
  width:76%;
  height:62%;
  transform: translateX(-50%) rotateX(0deg);
  transform-origin: 50% 0%;
  perspective: 800px;
  will-change: transform;
}
.flap-panel{
  position:absolute; inset:0;
  border-radius: 12px;
  background:
    radial-gradient(70% 90% at 30% 20%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, #0b1534, #020614);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 -12px 20px rgba(0,0,0,.55);
}
.flap-shine{
  position:absolute;
  inset: 8% 10% auto 10%;
  height:22%;
  border-radius:999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  opacity:.85;
  pointer-events:none;
}
.flap.open{ animation: flapOpen var(--flapOpenMs) cubic-bezier(.18,.9,.22,1) forwards; }
.flap.close{ animation: flapClose var(--flapCloseMs) cubic-bezier(.18,.9,.22,1) forwards; }
@keyframes flapOpen{ 0%{ transform: translateX(-50%) rotateX(0deg); } 100%{ transform: translateX(-50%) rotateX(62deg); } }
@keyframes flapClose{ 0%{ transform: translateX(-50%) rotateX(62deg); } 100%{ transform: translateX(-50%) rotateX(0deg); } }

.stage{
  position:absolute;
  inset:0;
  pointer-events:none;
  transform: translateX(var(--shake));
}

/* UR overlay */
.ur-overlay{ position:absolute; inset:0; opacity:0; transition: opacity .25s ease; pointer-events:none; }
.ur-overlay.on{ opacity:1; }
.ur-rays{
  position:absolute; inset:-25%;
  background: conic-gradient(from 210deg,
    rgba(255,215,120,.00),
    rgba(255,215,120,.14),
    rgba(120,255,220,.10),
    rgba(255,120,240,.10),
    rgba(255,215,120,.00)
  );
  filter: blur(.6px);
  opacity:.75;
  transform: rotate(8deg);
}
.ur-rainbow{
  position:absolute; inset:-18%;
  background: conic-gradient(from 0deg,
    rgba(255,0,120,.0),
    rgba(255,0,120,.10),
    rgba(255,180,0,.10),
    rgba(80,255,120,.10),
    rgba(90,210,255,.10),
    rgba(170,90,255,.10),
    rgba(255,0,120,.10),
    rgba(255,0,120,.0)
  );
  opacity:.6;
  mix-blend-mode: screen;
  filter: blur(1.2px);
  animation: rainbowSlow 2.8s ease-in-out infinite;
}
@keyframes rainbowSlow{ 0%,100%{ transform: rotate(4deg) scale(1.02); } 50%{ transform: rotate(-6deg) scale(1.05); } }
.ur-sparkles{ position:absolute; inset:0; pointer-events:none; overflow:hidden; mix-blend-mode: screen; }
.ur-sparkles .p{
  position:absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,.08) 40%, rgba(255,255,255,0) 70%),
    conic-gradient(from 0deg,
      rgba(255,0,120,.0),
      rgba(255,0,120,.20),
      rgba(255,180,0,.18),
      rgba(80,255,120,.18),
      rgba(90,210,255,.18),
      rgba(170,90,255,.18),
      rgba(255,0,120,.18),
      rgba(255,0,120,.0)
    );
  opacity: var(--o);
  filter: blur(.2px);
  animation: floatParticle var(--d) ease-in-out infinite;
}
@keyframes floatParticle{
  0%{ transform: translate3d(0,0,0) scale(.9); }
  50%{ transform: translate3d(var(--dx), calc(var(--dy) * -1), 0) scale(1.05); }
  100%{ transform: translate3d(calc(var(--dx) * 1.7), calc(var(--dy) * -2.3), 0) scale(.95); }
}

/* Capsule */
.capsule{
  position:absolute;
  left:0; top:0;
  width: var(--capSize);
  height: var(--capSize);
  opacity:0;
  will-change: transform, opacity;
}
.capsule.visible{ opacity:1; }

.capsule-shadow{
  position:absolute;
  left:50%;
  top:100%;
  width: 92%;
  height: 28%;
  transform: translate(-50%,-40%);
  background: radial-gradient(closest-side, rgba(0,0,0,.52), transparent 68%);
  filter: blur(2px);
  opacity:.35;
  will-change: transform, opacity;
}
.capsule-body{
  position:absolute; inset:0;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.35));
  transform-origin: 50% 60%;
  will-change: transform;
}
.capsule-body .half{
  position:absolute; inset:0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 -18px 32px rgba(0,0,0,.28);
  overflow:hidden;
}
.capsule-body .half.top{
  clip-path: inset(0 0 50% 0 round 50%);
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.92), rgba(255,255,255,.10) 30%, rgba(0,0,0,.22) 74%),
    radial-gradient(circle at 70% 75%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}
.capsule-body .half.bottom{
  clip-path: inset(50% 0 0 0 round 50%);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), rgba(255,255,255,.08) 35%, rgba(0,0,0,.30) 78%),
    radial-gradient(circle at 68% 78%, rgba(102,227,255,.20), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.14));
}
.seam{
  position:absolute; left:10%; right:10%; top:49.5%;
  height:1.6%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  opacity:.85;
}
.capsule-body.opening .half.top{
  transform-origin: 50% 70%;
  animation: openTop var(--openMs) cubic-bezier(.18,.9,.2,1) forwards;
}
.capsule-body.opening .half.bottom{
  transform-origin: 50% 30%;
  animation: openBottom var(--openMs) cubic-bezier(.18,.9,.2,1) forwards;
}
@keyframes openTop{ 0%{ transform: translateY(0) rotate(0deg); } 100%{ transform: translateY(-18%) rotate(-14deg); } }
@keyframes openBottom{ 0%{ transform: translateY(0) rotate(0deg); } 100%{ transform: translateY(18%) rotate(14deg); } }

.rimlight{
  position:absolute; inset:-10%;
  border-radius:50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,215,120,.0) 35%, rgba(255,215,120,.30) 60%, rgba(255,215,120,.0) 78%);
  opacity:0;
  filter: blur(.5px);
  mix-blend-mode: screen;
}
.sparkle-ring{
  position:absolute; inset:-18%;
  border-radius:50%;
  opacity:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.30), transparent 34%),
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.24), transparent 38%),
    conic-gradient(from 200deg,
      rgba(255,0,120,.00),
      rgba(255,0,120,.14),
      rgba(255,180,0,.14),
      rgba(80,255,120,.14),
      rgba(90,210,255,.14),
      rgba(170,90,255,.14),
      rgba(255,0,120,.14),
      rgba(255,0,120,.00));
  mix-blend-mode: screen;
  filter: blur(.25px);
}
.stage.ur .rimlight{ opacity:.85; }
.stage.ur .sparkle-ring{ opacity:.75; animation: shimmer 1.25s ease-in-out infinite; }
@keyframes shimmer{ 0%,100%{ transform: rotate(10deg) translateY(0); } 50%{ transform: rotate(8deg) translateY(-2%); } }

/* Result card */
.result-card{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%) scale(.92);
  width: min(72%, 260px);
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  opacity:0;
  background: radial-gradient(120% 80% at 30% 10%, rgba(255,255,255,.16), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
              rgba(10, 18, 48, .58);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 22px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow:hidden;
  will-change: transform, opacity;
  display: grid;
  place-items: center;
}
.result-card .img-wrap{
  max-width: calc(100% - 28px);
  max-height: calc(100% - 58px); /* 上のバッジ分 + padding 相当 */
}
.result-card.show{ animation: popIn var(--popMs) cubic-bezier(.16,.92,.22,1) forwards; }
@keyframes popIn{ 0%{ opacity:0; transform: translate(-50%,-42%) scale(.86); } 100%{ opacity:1; transform: translate(-50%,-54%) scale(1.02); } }
.result-card.ur-pop{ animation: urPop 620ms cubic-bezier(.16,.92,.22,1) forwards; }
@keyframes urPop{
  0%{ opacity:0; transform: translate(-50%,-40%) scale(.82); filter: drop-shadow(0 0 0 rgba(255,215,120,.0)); }
  60%{ opacity:1; transform: translate(-50%,-56%) scale(1.06); filter: drop-shadow(0 0 18px rgba(255,215,120,.22)); }
  100%{ opacity:1; transform: translate(-50%,-54%) scale(1.02); filter: drop-shadow(0 0 10px rgba(255,215,120,.18)); }
}
@media (max-width: 480px){
  .result-card{
    top: 59%;
  }
}

.rarity-badge{
  position:absolute;
  left:12px; top:12px;
  padding:6px 10px;
  border-radius: 999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.08em;
  background: rgba(0,0,0,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  text-transform:uppercase;
}
.img-wrap{
  /* ここが肝：固定サイズ(縦長)をやめて、画像サイズに合わせる */
  position: relative;
  inset: auto;

  /* 画像の“実サイズ”を優先（親の縦長に引っ張られない） */
  width: fit-content;
  height: fit-content;

  border-radius: 14px;
  overflow: hidden;

  /* 背景・枠は維持（カード感は残す） */
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
              radial-gradient(80% 60% at 30% 20%, rgba(255,255,255,.15), transparent 55%),
              rgba(0,0,0,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.img-wrap img{
  /* 画像サイズは“元のサイズ”を基本にする */
  width: auto;
  height: auto;

  /* ただしカードからはみ出しすぎる場合は収める（全体表示） */
  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
  display: block;

  transform: none;
  filter: none;
}

.placeholder{
  padding:12px;
  text-align:center;
  color:rgba(255,255,255,.72);
  font-size:12px;
  line-height:1.5;
}
.sparkles{
  position:absolute;
  inset:-10%;
  opacity:.22;
  pointer-events:none;
  mix-blend-mode: screen;
  background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.35), transparent 34%),
              radial-gradient(circle at 70% 20%, rgba(255,255,255,.28), transparent 38%),
              conic-gradient(from 200deg, rgba(255,215,120,.0), rgba(255,215,120,.22), rgba(120,255,220,.18), rgba(255,120,240,.14), rgba(255,215,120,.0));
  filter: blur(.2px);
  transform: rotate(12deg);
}
.result-card[data-rarity="UR"] .sparkles{ opacity:.95; animation: shimmer 1.2s ease-in-out infinite; }
.result-card[data-rarity="SR"] .sparkles{ opacity:.78; animation: shimmer 1.55s ease-in-out infinite; } /* ★追加 */
.result-card[data-rarity="R"]  .sparkles{ opacity:.62; animation: shimmer 1.8s ease-in-out infinite; }
.result-card[data-rarity="N"]  .sparkles{ opacity:.22; animation: shimmer 2.4s ease-in-out infinite; }

.lineup{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* Panel */
.panel{
  width: min(520px, 92vw);
  border-radius: 20px;
  background:
    radial-gradient(80% 60% at 20% 10%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    rgba(10,18,48,.52);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding:14px 14px 16px;
}
@media (min-width: 860px){
  .panel{
    height: var(--cabH);
    align-self:center;
    padding:16px 16px 18px;
  }
}
.panel h1{ margin: 6px 0 8px; font-size: clamp(16px, 2.2vw, 18px); letter-spacing:.04em; }
.panel p{ margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height:1.55; }

.row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top: 12px;
}

button{
  border:0;
  color: var(--text);
  font-weight: 900;
  letter-spacing:.06em;
  border-radius: 14px;
  padding: 14px 14px;
  background: linear-gradient(180deg, var(--btn2), var(--btn));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 16px 26px rgba(0,0,0,.28);
  cursor:pointer;
  user-select:none;
  touch-action: manipulation;
  transition: transform .08s ease, filter .2s ease, opacity .2s ease;
  min-width: 190px;
}
button:hover{ filter: brightness(1.05); }
button:active{ transform: translateY(1px) scale(.99); }
button[disabled]{ opacity:.55; cursor:not-allowed; filter: grayscale(.2); }

/* Save */
.btn-sub{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 16px;

  /* DLっぽいグラデ（グリーン〜シアン） */
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(120,255,180,.26), rgba(80,220,160,.14)),
    linear-gradient(180deg, rgba(14, 28, 56, .65), rgba(8, 18, 48, .62));

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 1px 0 rgba(255,255,255,.16),
    0 16px 28px rgba(0,0,0,.32);

  color: rgba(233,240,255,.98);
  font-weight: 900;
  letter-spacing:.04em;
  text-decoration:none;
  user-select:none;
  transition: transform .10s ease, filter .18s ease, opacity .18s ease;
  min-width: 190px;
  position: relative;
  overflow:hidden;
}

/* ちょいリッチ：光のスイープ */
.btn-sub::after{
  content:"";
  position:absolute;
  inset:-40% -60% auto -60%;
  height:55%;
  transform: rotate(-14deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.22) 35%, rgba(255,255,255,.08) 60%, transparent 85%);
  opacity:.55;
  pointer-events:none;
}

.btn-sub::before{
  /* ダウンロードアイコンをそれっぽく */
  content:"⤓";
  font-size: 16px;
  opacity:.95;
  transform: translateY(-1px);
}

.btn-sub:hover{ filter: brightness(1.07); }
.btn-sub:active{ transform: translateY(1px) scale(.99); }

.btn-sub.disabled{
  opacity:.45;
  pointer-events:none;
  filter: grayscale(.25);
}

.row-share{ margin-top: 8px; }

/* X share */
.btn-x{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.14), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
    rgba(0,0,0,.22);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 14px 24px rgba(0,0,0,.28);
  color: rgba(233,240,255,.96);
  font-weight: 900;
  letter-spacing:.04em;
  text-decoration:none;
  user-select:none;
  transition: transform .10s ease, filter .18s ease, opacity .18s ease;
  min-width: 190px;
}
.btn-x::before{
  content:"𝕏";
  font-size: 15px;
  font-weight: 900;
  opacity:.92;
  transform: translateY(-1px);
}
.btn-x:hover{ filter: brightness(1.06); }
.btn-x:active{ transform: translateY(1px) scale(.99); }
.btn-x.disabled{
  opacity:.45;
  pointer-events:none;
  filter: grayscale(.25);
}

.toggle{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  font-size: 13px;
  color: var(--muted);
  user-select:none;
}
.toggle input{ width:18px; height:18px; accent-color: #66e3ff; }

.mini{
  margin-top: 10px;
  display:grid;
  gap:8px;
}
.kv{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  font-size: 12px;
  color: var(--muted);
}
.kv b{
  color: var(--text);
  font-weight:800;
  letter-spacing:.04em;
}

@media (prefers-reduced-motion: reduce){
  .dot{ animation:none; }
  .lever.spin-half-1, .lever.spin-half-2, .lever.damped,
  .flap.open, .flap.close,
  .capsule-body.opening,
  .result-card.show, .result-card.ur-pop,
  .ur-rainbow{
    animation: none !important;
  }
}


/* =========================
   GUMBALLS: 内部カプセルは「排出カプセルと同じ色」だけを使う
   （黄色/ピンク/水色系の hue 表現は完全に削除）
   ========================= */

/* 排出カプセル側が使っている色変数（例）に合わせます
   ※もし既存に --capTop/--capBottom 等があるなら、その名前に寄せてください */
:root{
  /* デフォルト（起動直後はN相当） */
  --capTop:    rgba(255,255,255,.70);
  --capMid:    rgba(255,255,255,.18);
  --capBottom: rgba(0,0,0,.22);
  --capTint1:  rgba(255,255,255,.10);
  --capTint2:  rgba(0,0,0,.18);
}

/* app.js がここを書き換えます（排出カプセルと同一テーマ） */
.gum-cap{
  position:absolute;
  left: var(--x);
  top:  var(--y);
  width: var(--sz);
  height:var(--sz);
  transform:
    translate(-50%,-50%)
    translate3d(calc(var(--dx)*1px), calc(var(--dy)*1px), 0)
    rotate(calc(var(--r) + var(--dr)*1deg))
    scale(var(--s));
  border-radius: 999px;
  z-index: var(--z);

  /* ✅ ここが“色相”ではなく、排出カプセルと同じ変数だけで作る */
  background:
    radial-gradient(120% 120% at 26% 22%,
      rgba(255,255,255,.92) 0%,
      var(--capTop) 18%,
      var(--capMid) 44%,
      rgba(255,255,255,.06) 58%,
      var(--capBottom) 100%),
    radial-gradient(110% 110% at 72% 78%,
      rgba(0,0,0,.0) 0%,
      var(--capTint2) 70%,
      rgba(0,0,0,.0) 100%);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.20),
    inset 0 -16px 26px rgba(0,0,0,.24),
    0 10px 14px rgba(0,0,0,.16);

  filter: saturate(1.05);
}

/* 微小ハイライト */
.gum-cap::before{
  content:"";
  position:absolute; inset:0;
  border-radius:999px;
  background:
    radial-gradient(70% 70% at 28% 22%,
      rgba(255,255,255,.75) 0%,
      rgba(255,255,255,.16) 36%,
      rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;
  pointer-events:none;
}

#adFooter{
  padding: 24px 0;
}
#adFooter .ad-wrap{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: block;
}
#adFooter .adsbygoogle{
  display: block;
  width: 100%;
}