/* /test2 approved 2.5D rig. Loaded last so older prototype layers cannot collide. */
:root {
  --gm25-hue: 0deg;
  --gm25-sat: 1.16;
  --gm25-bright: 1;
  --gm25-accent: #8b70ff;
  --gm25-accent-rgb: 139,112,255;
}

body.gm-test2-motion .gm25-detail .machine-visual--25d.machine-visual--detail {
  position: relative !important;
  width: min(460px,78vw) !important;
  height: auto !important;
  aspect-ratio: 972 / 1617 !important;
  isolation: isolate !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  contain: none !important;
  transform: none !important;
  animation: none !important;
}

body.gm-test2-motion .gm25-detail .machine-visual--25d > .gm-prototype-frame,
body.gm-test2-motion .gm25-detail .machine-visual--25d > .gm2-effects,
body.gm-test2-motion .gm25-detail .machine-visual--25d > .gm-prototype-effects,
body.gm-test2-motion .gm25-detail .machine-visual--25d > .machine-visual__glass,
body.gm-test2-motion .gm25-detail .machine-visual--25d > .gm-proto-coin,
body.gm-test2-motion .gm25-detail .machine-visual--25d > .gm-proto-lever,
body.gm-test2-motion .gm25-detail .machine-visual--25d > .gm-proto-capsule-drop,
body.gm-test2-motion .gm25-detail .machine-visual--25d > .gm-proto-chute-glow {
  visibility: hidden !important;
  opacity: 0 !important;
  animation: none !important;
  pointer-events: none !important;
}

body.gm-test2-motion .gm25-detail .machine-visual--25d > .capsule-flight-ball,
body.gm-test2-motion .gm25-detail .machine-visual--25d > .capsule-ready-ball {
  z-index: 90 !important;
  display: block !important;
  opacity: 0 !important;
  animation: none !important;
  pointer-events: none !important;
}

.gm25-rig,
.gm25-rig * { box-sizing: border-box; }

.gm25-rig {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: block;
  overflow: visible;
  pointer-events: none;
  transform: translateZ(0);
}

.gm25-assembly {
  position: absolute;
  inset: 0;
  transform: translateZ(0);
  transform-origin: 50% 94%;
  will-change: transform;
}

.gm25-base,
.gm25-glass-mask,
.gm25-slot-mask,
.gm25-chute-mask {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.gm25-base {
  z-index: 1;
  filter: brightness(1.04) saturate(.95) contrast(1.02) drop-shadow(0 30px 42px rgba(33,25,68,.25));
}

html.gm-dark .gm25-base {
  filter: brightness(1.06) saturate(1.02) contrast(1.05) drop-shadow(0 34px 48px rgba(0,0,0,.58));
}

.gm25-poster {
  position: absolute;
  z-index: 3;
  top: 10.9%;
  left: 17.72%;
  width: 64.6%;
  height: 38.1%;
  overflow: hidden;
  border-radius: 2.5%;
  clip-path: polygon(0 0,31.5% 0,36% 5.5%,64% 5.5%,68.5% 0,100% 0,100% 100%,0 100%);
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), inset 0 -18px 30px rgba(34,14,50,.12);
}

.gm25-poster-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.98) contrast(1.025) brightness(1.025);
}

.gm25-poster::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg,rgba(255,255,255,.34),transparent 18% 72%,rgba(255,255,255,.12)),
    radial-gradient(circle at 78% 4%,rgba(255,255,255,.52),transparent 20%);
  mix-blend-mode: screen;
  content: "";
}

.gm25-reservoir {
  position: absolute;
  z-index: 5;
  top: 48.75%;
  left: 11.65%;
  width: 76.7%;
  height: 14.32%;
  overflow: hidden;
  border-radius: 10% 10% 17% 17% / 18% 18% 24% 24%;
  isolation: isolate;
  transform: translateZ(0);
}

.gm25-reservoir::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 50% 110%,rgba(139,112,255,.26),transparent 55%),
    linear-gradient(180deg,rgba(5,7,18,.34),rgba(5,4,14,.78));
  box-shadow: inset 0 10px 24px rgba(0,0,0,.44),inset 0 -12px 28px rgba(113,82,255,.12);
  content: "";
}

.gm25-reservoir-glow {
  position: absolute;
  z-index: 1;
  inset: 8% 4% 4%;
  border-radius: 50%;
  opacity: .32;
  background: radial-gradient(ellipse,rgba(var(--gm25-accent-rgb),.38),transparent 68%);
  filter: blur(6px);
  will-change: transform,opacity;
}

.gm25-pit-capsule {
  position: absolute;
  z-index: calc(2 + var(--depth));
  left: var(--x);
  bottom: var(--y);
  display: block;
  width: var(--size);
  aspect-ratio: 1;
  object-fit: contain;
  filter: hue-rotate(var(--hue)) saturate(1.12) brightness(1);
  transform: rotate(var(--rot)) translateZ(0);
  transform-origin: 50% 50%;
  will-change: transform,opacity;
}

.gm25-depth-1 { opacity: .76; filter: hue-rotate(var(--hue)) saturate(.82) brightness(.78) blur(.25px); }
.gm25-depth-2 { opacity: .9; filter: hue-rotate(var(--hue)) saturate(1) brightness(.9); }
.gm25-depth-3 { opacity: 1; filter: hue-rotate(var(--hue)) saturate(1.2) brightness(1.05); }

.gm25-glass-sheen {
  position: absolute;
  z-index: 7;
  top: 47.45%;
  left: 9.9%;
  width: 80.2%;
  height: 16.4%;
  overflow: hidden;
  border-radius: 6% 6% 12% 12%;
}

.gm25-glass-sheen::before {
  position: absolute;
  inset: -28% 49% -28% -8%;
  transform: skewX(-17deg);
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  content: "";
}

.gm25-glass-mask { z-index: 8; }
.gm25-glass-mask.left { clip-path: inset(47.1% 86.4% 35.9% 9.25%); }
.gm25-glass-mask.right { clip-path: inset(47.1% 9.2% 35.9% 86.45%); }
.gm25-glass-mask.front { clip-path: inset(58.45% 9.1% 35.8% 9.1%); }
.gm25-glass-mask.latch { clip-path: inset(47.45% 42.65% 46.85% 43.1%); }

.gm25-slot-target {
  position: absolute;
  z-index: 18;
  top: 68.05%;
  left: 25.15%;
  width: 2.2%;
  height: 7.2%;
  border-radius: 999px;
}

.gm25-slot-flare {
  position: absolute;
  z-index: 17;
  top: 66.5%;
  left: 21.25%;
  width: 9.9%;
  height: 10.6%;
  border-radius: 14%;
  opacity: 0;
  box-shadow: 0 0 22px 7px rgba(202,255,49,.48),inset 0 0 14px rgba(202,255,49,.36);
  will-change: transform,opacity;
}

.gm25-coin {
  position: absolute;
  z-index: 19;
  top: 71.6%;
  left: 26.25%;
  display: grid;
  width: 8.2%;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid #4b3203;
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle at 35% 28%,rgba(255,255,255,.9) 0 5%,transparent 6%),
    radial-gradient(circle,#fff7a6 0 30%,#ffd648 31% 67%,#a66b05 68% 100%);
  box-shadow: inset -7px -8px 11px rgba(91,48,0,.32),inset 4px 4px 8px rgba(255,255,255,.45),0 12px 18px rgba(0,0,0,.42);
  color: #3d2b00;
  font-size: clamp(8px,1.1vw,12px);
  font-style: normal;
  font-weight: 1000;
  will-change: transform,opacity;
}

.gm25-coin::after {
  position: absolute;
  inset: 16%;
  border: 1px solid rgba(82,48,0,.62);
  border-radius: 50%;
  content: "";
}

.gm25-slot-mask { z-index: 20; clip-path: inset(66.3% 68.45% 22.2% 20.55% round 2%); }

.gm25-handle-shadow {
  position: absolute;
  z-index: 21;
  top: 65.2%;
  left: 39.2%;
  width: 23.8%;
  height: 14.8%;
  border-radius: 50%;
  opacity: .66;
  background: radial-gradient(ellipse,rgba(0,0,0,.72),transparent 72%);
  filter: blur(7px);
  transform: translate(2%,4%) scale(.92);
  will-change: transform,opacity;
}

.gm25-handle {
  position: absolute;
  z-index: 22;
  top: 64.1%;
  left: 37.62%;
  display: block;
  width: 26.98%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 8px 9px rgba(0,0,0,.48));
  transform: rotate(0deg) translateZ(0);
  transform-origin: 50% 50%;
  will-change: transform,filter;
}

.gm25-indicator {
  position: absolute;
  z-index: 23;
  top: 67.18%;
  left: 70.87%;
  width: 5.35%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .12;
  background: var(--gm25-accent);
  box-shadow: 0 0 18px 7px rgba(var(--gm25-accent-rgb),.72);
  will-change: transform,opacity;
}

.gm25-route-light {
  position: absolute;
  z-index: 24;
  top: 59.2%;
  left: 50%;
  width: 2.8%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 18px 8px rgba(var(--gm25-accent-rgb),.68);
  will-change: transform,opacity;
}

.gm25-chute-door {
  position: absolute;
  z-index: 25;
  top: 83.1%;
  left: 35.4%;
  width: 29.2%;
  height: 7.2%;
  border: 1px solid rgba(184,169,255,.62);
  border-radius: 10% 10% 28% 28%;
  background: linear-gradient(180deg,#171525,#06050e 72%);
  box-shadow: inset 0 0 18px rgba(var(--gm25-accent-rgb),.3),0 6px 14px rgba(0,0,0,.45);
  transform: perspective(180px) rotateX(0deg);
  transform-origin: 50% 0;
  will-change: transform,opacity;
}

.gm25-ball {
  position: absolute;
  display: block;
  width: 16.2%;
  aspect-ratio: 1;
  object-fit: contain;
  opacity: 0;
  filter: hue-rotate(var(--gm25-hue)) saturate(var(--gm25-sat)) brightness(var(--gm25-bright)) drop-shadow(0 9px 10px rgba(0,0,0,.5));
  transform-origin: 50% 50%;
  will-change: transform,opacity;
}

.gm25-ball-behind { z-index: 26; top: 81.9%; left: 42%; }
.gm25-ball-front { z-index: 29; top: 85.5%; left: 42%; }

.gm25-chute-mask { z-index: 27; }
.gm25-chute-mask.top { clip-path: inset(80.35% 31.3% 15.6% 31.3%); }
.gm25-chute-mask.left { clip-path: inset(81.8% 62.2% 7.2% 31.1%); }
.gm25-chute-mask.right { clip-path: inset(81.8% 31.1% 7.2% 62.1%); }
.gm25-chute-mask.front { clip-path: inset(89.55% 31% 2.8% 31%); }

.gm25-contact-shadow {
  position: absolute;
  z-index: 28;
  top: 94.1%;
  left: 54%;
  width: 23%;
  height: 2.6%;
  border-radius: 50%;
  opacity: 0;
  background: rgba(0,0,0,.68);
  filter: blur(5px);
  will-change: transform,opacity;
}

.gm25-color-chip {
  position: absolute;
  z-index: 40;
  top: 96%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border: 1px solid rgba(var(--gm25-accent-rgb),.38);
  border-radius: 999px;
  background: rgba(9,8,21,.78);
  box-shadow: 0 0 16px rgba(var(--gm25-accent-rgb),.2);
  color: var(--gm25-accent);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .1em;
  white-space: nowrap;
}

/* Photo capsule opening overlay, still wired to the real React ready-ball click. */
body.gm-prototype-mode #gm-open.gm25-open .gm-open-dim {
  background:
    radial-gradient(circle at 50% 42%,rgba(var(--gm25-accent-rgb),.32),transparent 30%),
    radial-gradient(circle at 50% 58%,rgba(202,255,49,.13),transparent 34%),
    rgba(3,2,10,.9) !important;
  backdrop-filter: blur(10px) saturate(1.1) !important;
}

body.gm-prototype-mode #gm-open.gm25-open .gm-cap-wrap {
  position: relative !important;
  gap: 30px !important;
}

body.gm-prototype-mode #gm-open.gm25-open .gm-cap-wrap::before {
  position: absolute;
  top: calc(50% + 172px);
  left: 50%;
  z-index: 15;
  transform: translateX(-50%);
  color: var(--gm25-accent);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .14em;
  white-space: nowrap;
  content: attr(data-gm25-color);
}

body.gm-prototype-mode #gm-open.gm25-open .gm-cap {
  position: relative !important;
  width: min(42vw,310px) !important;
  height: min(42vw,310px) !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform-origin: 50% 50% !important;
  cursor: pointer !important;
  animation: gm25OpenFloat 1.4s ease-in-out infinite alternate !important;
}

body.gm-prototype-mode #gm-open.gm25-open .gm-cap::before,
body.gm-prototype-mode #gm-open.gm25-open .gm-cap::after,
body.gm-prototype-mode #gm-open.gm25-open .gm-cap-seam { display: none !important; }

body.gm-prototype-mode #gm-open.gm25-open .gm-cap-top,
body.gm-prototype-mode #gm-open.gm25-open .gm-cap-bot {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("gm-machine-25d-capsule.webp") center / contain no-repeat !important;
  box-shadow: none !important;
  filter: hue-rotate(var(--gm25-hue)) saturate(var(--gm25-sat)) brightness(var(--gm25-bright)) drop-shadow(0 18px 24px rgba(0,0,0,.42)) !important;
  transform: translate3d(0,0,0) rotate(0deg) !important;
  opacity: 1 !important;
  transition: transform .46s cubic-bezier(.16,1.18,.2,1),opacity .3s ease !important;
}

/* The legacy prototype skin hides both halves until its own pseudo-capsule opens.
   This rig owns the photo capsule, so keep the two clipped halves visible. */
body.gm-prototype-mode #gm-open.gm25-open.gm-open--prototype:not(.gm-split) .gm-cap-top,
body.gm-prototype-mode #gm-open.gm25-open.gm-open--prototype:not(.gm-split) .gm-cap-bot {
  opacity: 1 !important;
}

body.gm-prototype-mode #gm-open.gm25-open .gm-cap-top { clip-path: inset(0 0 49.4% 0) !important; }
body.gm-prototype-mode #gm-open.gm25-open .gm-cap-bot { clip-path: inset(49.4% 0 0 0) !important; }

body.gm-prototype-mode #gm-open.gm25-open.gm-shake .gm-cap {
  animation: gm25OpenShake .38s cubic-bezier(.36,.07,.19,.97) both !important;
}

body.gm-prototype-mode #gm-open.gm25-open.gm-split .gm-cap-top {
  transform: translate3d(-88px,-55px,0) rotate(-24deg) !important;
}

body.gm-prototype-mode #gm-open.gm25-open.gm-split .gm-cap-bot {
  transform: translate3d(88px,58px,0) rotate(22deg) !important;
}

body.gm-prototype-mode #gm-open.gm25-open.gm-out {
  opacity: 0 !important;
  transition: opacity .18s ease !important;
}

body.gm-cap-wait #gm-tabbar,
body:has(.reward-modal) #gm-tabbar {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.gm-test2-motion .reward-modal {
  box-shadow: 0 34px 100px rgba(0,0,0,.46),0 0 42px rgba(var(--gm25-accent-rgb),.14) !important;
}

@keyframes gm25OpenFloat {
  from { transform: translate3d(0,0,0) rotate(-1.5deg) scale(1); }
  to { transform: translate3d(0,-9px,0) rotate(1.5deg) scale(1.025); }
}

@keyframes gm25OpenShake {
  0%,100% { transform: translate3d(0,0,0) rotate(0) scale(1.02); }
  22% { transform: translate3d(-6px,2px,0) rotate(-2.4deg) scale(1.025); }
  46% { transform: translate3d(6px,-2px,0) rotate(2.6deg) scale(1.03); }
  68% { transform: translate3d(-3px,-1px,0) rotate(-1.2deg) scale(1.02); }
  84% { transform: translate3d(2px,1px,0) rotate(.7deg) scale(1.015); }
}

@media (max-width: 720px) {
  body.gm-test2-motion .gm25-detail .machine-visual--25d.machine-visual--detail {
    width: min(330px,84vw) !important;
  }
  .gm25-color-chip { top: 95%; font-size: 6px; }
  body.gm-prototype-mode #gm-open.gm25-open .gm-cap {
    width: min(72vw,280px) !important;
    height: min(72vw,280px) !important;
  }
  body.gm-prototype-mode #gm-open.gm25-open .gm-cap-wrap::before { top: calc(50% + 154px); }
}

@media (prefers-reduced-motion: reduce) {
  body.gm-prototype-mode #gm-open.gm25-open .gm-cap { animation: none !important; }
  body.gm-prototype-mode #gm-open.gm25-open .gm-cap-top,
  body.gm-prototype-mode #gm-open.gm25-open .gm-cap-bot { transition-duration: 1ms !important; }
}