/* client/css/runway.css — 🏛️ Grand Royal Opera Runway (Style-2 Hand-Painted Gouache + Retina 2D + GPU CSS).
   Portrait-first (iPhone 18 Pro), safe-area aware, compositor-only (transform/opacity) 60fps animations. */

.rw-root {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  font-family: "Nunito", "Quicksand", system-ui, -apple-system, sans-serif;
  color: #fff8eb;
  opacity: 0;
  transition: opacity 0.32s ease;
  --rw-ink: #3a2415;
  --rw-wood-dark: #26150c;
  --rw-wood-mid: #422616;
  --rw-cream: #fdf4e3;
  --rw-velvet: #6e1428;
  --rw-gold: #ffc94a;
  --rw-gold-trim: #e5a93b;
  --rw-epic: #b07cff;
  --rw-rare: #5fb4ff;
  --rw-rainbow: linear-gradient(90deg, #ff5d8f, #ffb347, #fff275, #5dffa1, #5dd2ff, #a17bff, #ff5d8f);
}
.rw-root.rw-in {
  opacity: 1;
}

/* ============================================================================
   1. ROYAL OPERA HOUSE BACKDROP & 2.5D CAMERA CHOREOGRAPHY
   ============================================================================ */
.rw-opera-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 50% at 50% 18%, rgba(255, 210, 125, 0.28), transparent 65%),
    radial-gradient(110% 55% at 50% 62%, rgba(158, 27, 50, 0.42), transparent 70%),
    linear-gradient(180deg, #16091c 0%, #351129 38%, #4d1631 68%, #1a0b1e 100%);
  pointer-events: none;
}
.rw-opera-arch {
  position: absolute;
  left: 50%;
  top: 12%;
  width: min(88vw, 460px);
  height: 48%;
  transform: translateX(-50%);
  border-radius: 50% 50% 16px 16px / 36% 36% 16px 16px;
  border: 3px solid rgba(255, 205, 105, 0.42);
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(255, 232, 175, 0.25), rgba(85, 24, 58, 0.55) 68%, rgba(24, 9, 32, 0.9) 100%);
  box-shadow:
    inset 0 0 36px rgba(255, 198, 92, 0.24),
    0 12px 40px rgba(0, 0, 0, 0.65);
}
.rw-opera-balconies {
  position: absolute;
  inset: 18% 4% 28% 4%;
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 215, 130, 0.22) 0 4px, transparent 6px) 0 0 / 36px 44px;
  opacity: 0.55;
}

/* Camera wrapper: smoothly dollies & zooms for wide stage -> catwalk track -> hero showcase */
.rw-stage-world {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: 50% 56%;
  transform: translate3d(0, 0, 0) scale(1);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.rw-root[data-cam="track"] .rw-stage-world {
  transform: translate3d(0, 10px, 0) scale(1.04);
}
.rw-root[data-cam="hero"] .rw-stage-world {
  transform: translate3d(0, -14px, 0) scale(1.16);
}
.rw-root[data-cam="hero-sm"] .rw-stage-world {
  transform: translate3d(0, -18px, 0) scale(1.22);
}

/* ============================================================================
   2. MIRROR-REFLECTIVE ROYAL MARBLE CATWALK & FOOTLIGHTS
   ============================================================================ */
.rw-catwalk-wrap {
  position: absolute;
  left: 50%;
  top: 38%;
  bottom: 11%;
  width: min(86vw, 410px);
  transform: translateX(-50%);
  perspective: 540px;
}
.rw-catwalk-surface {
  position: absolute;
  inset: 0 12%;
  transform-origin: 50% 0%;
  transform: rotateX(48deg);
  border-radius: 14px 14px 28px 28px;
  border: 3px solid #f2c15a;
  background:
    linear-gradient(180deg, rgba(255, 236, 190, 0.18) 0%, rgba(46, 26, 62, 0.88) 38%, rgba(22, 12, 34, 0.96) 100%);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.72),
    0 0 22px rgba(255, 201, 74, 0.32),
    inset 0 0 28px rgba(255, 224, 150, 0.22);
  overflow: hidden;
}
.rw-catwalk-veins {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 35%, rgba(255, 235, 190, 0.08) 48%, transparent 52%),
    linear-gradient(65deg, transparent 55%, rgba(195, 155, 255, 0.08) 65%, transparent 70%);
}
.rw-catwalk-seam {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 215, 120, 0.2), rgba(255, 215, 120, 0.65));
}
.rw-footlights {
  position: absolute;
  top: 4%;
  bottom: 4%;
  width: 10px;
  background: radial-gradient(circle, #fff6d6 0 3px, rgba(255, 201, 74, 0.65) 5px, transparent 8px) 0 0 / 10px 34px repeat-y;
}
.rw-footlights.is-left { left: 6px; }
.rw-footlights.is-right { right: 6px; }

.rw-catwalk-apron {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 3%;
  height: 22px;
  border-radius: 0 0 24px 24px;
  border: 2.5px solid #3a2415;
  background: linear-gradient(90deg, #9c671e, #ffd86b 25%, #fff2bd 50%, #ffd86b 75%, #9c671e);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.65);
}

/* ============================================================================
   3. VOLUMETRIC SPOTLIGHT CONES
   ============================================================================ */
.rw-spotlights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.rw-root.rw-spotlights-on .rw-spotlights {
  opacity: 1;
}
.rw-cone {
  position: absolute;
  top: 6%;
  left: 50%;
  width: 240px;
  height: 68%;
  transform-origin: 50% 0%;
  clip-path: polygon(44% 0%, 56% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(180deg, rgba(255, 246, 205, 0.46) 0%, rgba(255, 224, 140, 0.16) 65%, transparent 100%);
  mix-blend-mode: screen;
}
.rw-cone-c {
  transform: translateX(-50%);
}
.rw-cone-l {
  transform: translateX(-78%) rotate(14deg);
  opacity: 0.65;
}
.rw-cone-r {
  transform: translateX(-22%) rotate(-14deg);
  opacity: 0.65;
}
.rw-root.rw-super-cones .rw-cone-l {
  background: linear-gradient(180deg, rgba(255, 120, 210, 0.5) 0%, rgba(120, 220, 255, 0.18) 70%, transparent 100%);
  opacity: 0.95;
}
.rw-root.rw-super-cones .rw-cone-r {
  background: linear-gradient(180deg, rgba(255, 215, 90, 0.52) 0%, rgba(185, 130, 255, 0.18) 70%, transparent 100%);
  opacity: 0.95;
}

/* ============================================================================
   4. HAND-PAINTED PROSCENIUM ARCH, VELVET CURTAINS & VIP PLUSHIE CROWD
   ============================================================================ */
.rw-proscenium {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.rw-chandelier {
  position: absolute;
  left: 50%;
  top: -6px;
  width: clamp(190px, 46vw, 260px);
  height: auto;
  transform-origin: 50% 0%;
  transform: translateX(-50%);
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 22px rgba(255, 200, 95, 0.45));
  animation: rwChandelierSway 4.8s ease-in-out infinite;
}
@keyframes rwChandelierSway {
  0%, 100% { transform: translateX(-50%) rotate(-1.1deg); }
  50% { transform: translateX(-50%) rotate(1.1deg); }
}

.rw-curtain {
  position: absolute;
  top: 0;
  height: 76%;
  width: auto;
  max-width: 42vw;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.72));
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.rw-curtain-l {
  left: -14px;
  transform-origin: 0% 0%;
  transform: translate3d(0, 0, 0);
}
.rw-curtain-r {
  right: -14px;
  transform-origin: 100% 0%;
  transform: translate3d(0, 0, 0) scaleX(-1);
}
.rw-root.rw-curtains-open .rw-curtain-l {
  transform: translate3d(-28%, -3%, 0) rotate(-6deg);
}
.rw-root.rw-curtains-open .rw-curtain-r {
  transform: translate3d(28%, -3%, 0) scaleX(-1) rotate(-6deg);
}

.rw-vip {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 38px);
  width: clamp(138px, 34vw, 220px);
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.78));
  animation: rwVipIdle 2.4s ease-in-out infinite;
}
.rw-vip-l {
  left: -10px;
}
.rw-vip-r {
  right: -10px;
  animation-name: rwVipIdleR;
}
.rw-root.rw-crowd-hype .rw-vip-l {
  animation: rwVipHype 0.48s ease-in-out infinite;
}
.rw-root.rw-crowd-hype .rw-vip-r {
  animation: rwVipHypeR 0.48s ease-in-out infinite;
}
@keyframes rwVipIdle {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -5px, 0); }
}
@keyframes rwVipIdleR {
  0%, 100% { transform: translate3d(0, 0, 0) scaleX(-1); }
  50% { transform: translate3d(0, -5px, 0) scaleX(-1); }
}
@keyframes rwVipHype {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -11px, 0) rotate(2.5deg); }
}
@keyframes rwVipHypeR {
  0%, 100% { transform: translate3d(0, 0, 0) scaleX(-1) rotate(0deg); }
  50% { transform: translate3d(0, -11px, 0) scaleX(-1) rotate(2.5deg); }
}

/* Overlays */
.rw-fx, .rw-black, .rw-white, .rw-spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.rw-black { background: #08020d; opacity: 0; z-index: 2; }
.rw-spot {
  z-index: 3;
  opacity: 0;
  background: radial-gradient(170px 260px at 50% 52%, rgba(255, 250, 220, 0.52), rgba(255, 215, 130, 0.1) 62%, transparent 78%);
  mix-blend-mode: screen;
}
.rw-fx { z-index: 6; }
.rw-white { background: #fff; opacity: 0; mix-blend-mode: screen; z-index: 12; }

/* ============================================================================
   5. STYLE-2 ROYAL HEADER & FOOTER
   ============================================================================ */
.rw-head {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
.rw-title {
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #3c2113, #241209);
  border: 2px solid #e5a93b;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
  font-weight: 900;
  font-size: 13px;
  color: #ffeab3;
  letter-spacing: 0.3px;
}
.rw-pity {
  font-weight: 900;
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 2px solid transparent;
  background-image: linear-gradient(#241209, #241209), var(--rw-rainbow);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
  color: #fff;
}
.rw-pity small {
  margin-left: 4px;
  color: #ffd86b;
}

.rw-center {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.rw-center > * {
  pointer-events: auto;
}

.rw-hint-pill {
  margin-top: 12px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(36, 18, 9, 0.88);
  border: 1.5px solid #d49b38;
  color: #fff3d1;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

/* ============================================================================
   6. ACT I — THE CELESTIAL ASTROLABE LOOM PEDESTAL
   ============================================================================ */
.rw-loom-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
}
.rw-loom-circle {
  position: absolute;
  width: 260px;
  height: 260px;
  top: 50%;
  left: 50%;
  margin-left: -130px;
  margin-top: -155px;
  opacity: 0.55;
  pointer-events: none;
  animation: rwSpin 9s linear infinite;
}
.rw-loom-orb {
  --orb-c: #fff5e4;
  position: absolute;
  left: 50%;
  top: 22px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  transform: translateX(-50%) scale(0.75);
  background: radial-gradient(circle, #ffffff 0%, var(--orb-c) 55%, transparent 74%);
  filter: drop-shadow(0 0 18px var(--orb-c));
  pointer-events: none;
}
.rw-loom-btn {
  position: relative;
  width: 190px;
  height: 250px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  touch-action: none;
  transition: transform 0.16s ease;
}
.rw-loom-btn.holding {
  transform: scale(0.95);
}
.rw-loom-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 18px rgba(255, 205, 95, 0.45));
}
.rw-loom-ring {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 164px;
  height: 164px;
  margin-left: -82px;
  margin-top: -82px;
  border-radius: 50%;
  border: 3px dashed rgba(255, 222, 130, 0.82);
  animation: rwSpin 3.2s linear infinite;
  pointer-events: none;
}
.rw-loom-btn.holding .rw-loom-ring {
  animation-duration: 0.65s;
  border-color: #ffffff;
}
.rw-loom-chest-wrap {
  position: absolute;
  left: 50%;
  top: 36%;
  width: 112px;
  height: 112px;
  transform: translate(-50%, -50%) scale(0.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
  transition: transform 0.22s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.rw-loom-chest {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.78)) drop-shadow(0 0 18px rgba(255, 220, 120, 0.75));
  animation: rwChestFloat 2s ease-in-out infinite;
}
.rw-loom-chest-tag {
  margin-top: -10px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(24, 11, 18, 0.92);
  border: 1.5px solid #ffd86b;
  color: #ffe89e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.4px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.65);
}
.rw-loom-chest-wrap[data-tier="4"] .rw-loom-chest {
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 26px rgba(255, 120, 235, 0.95));
}
.rw-loom-chest-wrap.is-bursting {
  transform: translate(-50%, -55%) scale(1.42) !important;
}
@keyframes rwChestFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}
@keyframes rwSpin {
  to { transform: rotate(360deg); }
}

/* ============================================================================
   7. ACT II — 3D CURVED STAGE OF PAINTED COUTURE TRUNKS (10x)
   ============================================================================ */
.rw-rack {
  position: relative;
  width: min(95vw, 470px);
  padding: 12px 10px 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(44, 22, 14, 0.88), rgba(24, 11, 18, 0.92));
  border: 2.5px solid #e5a93b;
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 236, 179, 0.45);
}
.rw-rack-banner {
  text-align: center;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.4px;
  color: #ffe6a3;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.65);
}
.rw-bags {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px 6px;
  padding: 4px 2px 8px;
}
.rw-trunk {
  --c: var(--rw-rare);
  position: relative;
  height: 106px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  transform: translate3d(0, var(--arc-y, 0px), 0) rotate(var(--arc-rot, 0deg));
  transition: transform 0.28s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.rw-trunk.rw-t2 { --c: var(--rw-epic); }
.rw-trunk.rw-t3 { --c: var(--rw-gold); }
.rw-trunk.rw-t4 { --c: #ff85e4; }

.rw-trunk-halo {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 68px;
  height: 68px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0%, transparent 70%);
  opacity: 0.48;
  pointer-events: none;
}
.rw-trunk.rw-t4 .rw-trunk-halo {
  background: var(--rw-rainbow);
  opacity: 0.72;
  filter: blur(8px);
}
.rw-trunk-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 82px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.65));
  transition: transform 0.32s cubic-bezier(0.2, 1.6, 0.4, 1), opacity 0.28s ease;
}
.rw-trunk.is-climax .rw-trunk-img {
  filter: drop-shadow(0 0 12px var(--c)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7));
}
.rw-trunk-badge {
  position: absolute;
  left: 50%;
  bottom: 2px;
  z-index: 2;
  transform: translateX(-50%);
  padding: 1px 7px;
  border-radius: 999px;
  background: #28150b;
  border: 1.5px solid var(--c);
  color: #fff8eb;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}
.rw-trunk.open .rw-trunk-img {
  transform: translateY(16px) scale(0.72);
  opacity: 0.28;
}
.rw-trunk.open .rw-trunk-badge {
  opacity: 0;
}

.rw-bag-item {
  position: absolute;
  inset: -4px 0 0 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px) scale(0.55);
  transition: opacity 0.26s ease, transform 0.32s cubic-bezier(0.2, 1.6, 0.4, 1);
  pointer-events: none;
}
.rw-trunk.open .rw-bag-item {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.rw-mini-card {
  width: 100%;
  height: 100%;
  padding: 4px 3px;
  border-radius: 11px;
  background: linear-gradient(180deg, #fff9ec, #f4e2c1);
  border: 2px solid var(--c);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55), 0 0 12px var(--c);
  color: #3a2415;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}
.rw-mini-card img {
  max-width: 92%;
  max-height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(58, 36, 21, 0.28));
}
.rw-mini-card b {
  font-size: 9.5px;
  font-weight: 900;
  line-height: 1.08;
  color: #3a2415;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rw-mini-card small {
  font-size: 8.5px;
  font-weight: 900;
  color: #8c4a15;
}

.rw-btn-gold {
  margin-top: 12px;
  min-height: 46px;
  padding: 0 26px;
  border-radius: 999px;
  border: 2.5px solid #3a2415;
  background: linear-gradient(180deg, #ffe694 0%, #f5b942 52%, #d4881c 100%);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.55),
    inset 0 2px 0 rgba(255, 255, 255, 0.75);
  color: #3a2415;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.3px;
  cursor: pointer;
  touch-action: manipulation;
}
.rw-btn-gold:active {
  transform: scale(0.96);
}
.rw-btn-gold:disabled {
  opacity: 0.55;
}

/* ============================================================================
   8. ACT III — NATIVE RETINA HD 2D CATWALK WALKER + MARBLE REFLECTION
   ============================================================================ */
.rw-catwalk-stage {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.rw-walker-rig {
  --c: var(--rw-rare);
  position: absolute;
  left: 50%;
  top: 46%;
  width: 170px;
  height: 170px;
  margin-top: -115px;
  transform-origin: 50% 88%;
  transform: translate3d(-50%, 0, 0) scale(1);
  will-change: transform;
}
.rw-walker-rig.rw-t2 { --c: var(--rw-epic); }
.rw-walker-rig.rw-t3 { --c: var(--rw-gold); }
.rw-walker-rig.rw-t4 { --c: #ffffff; }

.rw-walker-shadow {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 112px;
  height: 30px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(12, 4, 22, 0.72) 0%, rgba(255, 205, 95, 0.32) 58%, transparent 76%);
}
.rw-walker-magic {
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 164px;
  height: 62px;
  margin-left: -82px;
  object-fit: fill;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.38s ease, transform 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.rw-walker-rig.is-posing .rw-walker-magic {
  opacity: 0.92;
  transform: scale(1.08);
}
.rw-walker-sm-relic {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 176px;
  height: 220px;
  transform: translateX(-50%) scale(0.6);
  object-fit: contain;
  opacity: 0;
  z-index: 0;
  filter: drop-shadow(0 0 22px rgba(255, 225, 130, 0.85));
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.rw-walker-rig.is-posing .rw-walker-sm-relic {
  opacity: 0.92;
  transform: translateX(-50%) scale(1);
}

.rw-walker-body {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.rw-walker-rig.is-posing .rw-walker-body {
  animation: rwHeroPosePop 0.55s cubic-bezier(0.2, 1.7, 0.4, 1);
}
@keyframes rwHeroPosePop {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-16px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}

/* Inverted mirror reflection on the glossy royal marble catwalk */
.rw-walker-reflect {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: 50% 89%;
  transform: scaleY(-0.52);
  opacity: 0.34;
  filter: blur(0.8px);
  -webkit-mask-image: linear-gradient(180deg, transparent 15%, rgba(0, 0, 0, 0.85) 85%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 15%, rgba(0, 0, 0, 0.85) 85%, #000 100%);
}

/* Self-contained sizing for renderPaperDollDomLayers inside the Opera Catwalk */
.rw-walker-chibi {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 152px;
  height: 152px;
  transform: translateX(-50%);
}
.rw-walker-chibi .s2-pd-rig-box {
  position: relative !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  opacity: 1 !important;
}
.rw-walker-chibi .s2-pd-dom-rig {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Companion Pet walking beside the Chibi */
.rw-walker-pet {
  position: absolute;
  right: -28px;
  bottom: 18px;
  width: 68px;
  height: 68px;
  z-index: 6;
  animation: rwPetHop 0.52s ease-in-out infinite;
}
.rw-walker-pet img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
}
@keyframes rwPetHop {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-9px) scale(1.05, 0.96); }
}

/* Floating relic showcase when the pulled item is a Wonder / Blueprint / Decor / Dice */
.rw-walker-relic {
  position: absolute;
  left: -26px;
  top: 12px;
  width: 68px;
  height: 68px;
  padding: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 248, 225, 0.92), rgba(255, 205, 95, 0.35));
  border: 2px solid var(--c);
  box-shadow: 0 0 18px var(--c);
  z-index: 7;
  animation: rwPetHop 1.4s ease-in-out infinite;
}
.rw-walker-relic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rw-walker-nameplate {
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(36, 18, 9, 0.85);
  border: 1.5px solid #e5a93b;
  color: #ffe8a3;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  z-index: 8;
}

/* ============================================================================
   9. STYLE-2 ROYAL GOLD HERO CARD, STAMP & 10-PULL SUMMARY MODAL
   ============================================================================ */
.rw-card-host {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 68px);
  z-index: 9;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.rw-card {
  --c: var(--rw-rare);
  min-width: 236px;
  max-width: min(88vw, 340px);
  padding: 14px 18px 12px;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(180deg, #fff9ec 0%, #f5e2c0 100%);
  border: 3px solid #3a2415;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.72),
    0 0 24px var(--c),
    inset 0 0 0 2px var(--c);
  color: #3a2415;
  animation: rwPop 0.42s cubic-bezier(0.2, 1.6, 0.4, 1) both;
  pointer-events: auto;
}
.rw-card.rw-t2 { --c: var(--rw-epic); }
.rw-card.rw-t3 { --c: var(--rw-gold); }
.rw-card.rw-t4 {
  --c: #ff73d0;
  background: linear-gradient(180deg, #fffdf7 0%, #fce8ff 50%, #fff0c9 100%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8), 0 0 32px #ffffff;
}
.rw-card-ribbon {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: #2b160b;
  border: 1.5px solid var(--c);
  color: var(--c);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.rw-card.rw-t4 .rw-card-ribbon {
  background-image: linear-gradient(#2b160b, #2b160b), var(--rw-rainbow);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-color: transparent;
  color: #ffd86b;
}
.rw-card-frame {
  margin: 8px auto 6px;
  width: 88px;
  height: 88px;
  border-radius: 14px;
  background: radial-gradient(circle, #ffffff 0%, #f2dec0 100%);
  border: 2px solid #d49b38;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rw-card-frame img {
  max-width: 86%;
  max-height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(58, 36, 21, 0.28));
}
.rw-card-name {
  font-weight: 900;
  font-size: 16px;
  color: #3a2415;
  line-height: 1.2;
}
.rw-card-kind {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #3a2415;
  color: #ffe694;
  font-size: 11px;
  font-weight: 900;
}

@keyframes rwPop {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.72);
  }
}

.rw-stamp {
  position: absolute;
  left: 50%;
  top: 22%;
  z-index: 11;
  transform: translate(-50%, -50%) rotate(-6deg);
  font-size: clamp(20px, 6.8vw, 36px);
  font-weight: 1000;
  white-space: nowrap;
  letter-spacing: 1px;
  padding: 8px 18px;
  border: 3.5px solid #ffd86b;
  border-radius: 14px;
  background: rgba(34, 12, 28, 0.92);
  color: #fff5cc;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.75), 0 0 24px rgba(255, 215, 100, 0.85);
  pointer-events: none;
}
.rw-stamp.slam {
  animation: rwSlam 0.48s cubic-bezier(0.3, 1.8, 0.5, 1) both;
}
@keyframes rwSlam {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-6deg) scale(2.8);
  }
}

/* 10-Pull Royal Summary Modal */
.rw-summary-modal {
  width: min(94vw, 470px);
  padding: 12px;
  border-radius: 20px;
  background: linear-gradient(180deg, #3b2112 0%, #241209 100%);
  border: 3px solid #e5a93b;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.82),
    inset 0 1px 0 rgba(255, 236, 179, 0.5);
  pointer-events: auto;
  animation: rwPop 0.35s both;
}
.rw-summary-head {
  text-align: center;
  font-weight: 900;
  font-size: 14px;
  color: #ffe694;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}
.rw-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px 6px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 2px;
  touch-action: pan-y;
}
.rw-sum-item {
  --c: var(--rw-rare);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff9ec, #f3dfc0);
  border: 2px solid var(--c);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
  color: #3a2415;
  font-size: 9.5px;
  text-align: center;
}
.rw-sum-item.rw-t2 { --c: var(--rw-epic); }
.rw-sum-item.rw-t3 { --c: var(--rw-gold); }
.rw-sum-item.rw-t4 {
  --c: #ff73d0;
  box-shadow: 0 0 14px #fff;
}
.rw-sum-tier {
  font-size: 8.5px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 999px;
  background: #2b160b;
  color: var(--c);
}
.rw-sum-thumb {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rw-sum-thumb img {
  max-height: 46px;
  max-width: 100%;
  object-fit: contain;
}
.rw-sum-item b {
  font-weight: 900;
  line-height: 1.08;
  color: #3a2415;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rw-sum-item small {
  color: #8c4a15;
  font-weight: 900;
  font-size: 8.5px;
}

/* Footer Controls */
.rw-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}
.rw-btn {
  pointer-events: auto;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 2px solid #e5a93b;
  background: linear-gradient(180deg, #3c2113, #221108);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.65);
  color: #ffe8a3;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
}
.rw-btn:active {
  transform: scale(0.96);
}
.rw-skip[hidden] {
  display: none;
}

.rw-toastline {
  position: absolute;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 52px);
  z-index: 10;
  transform: translate(-50%, -8px);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(36, 18, 9, 0.9);
  border: 1.5px solid #e5a93b;
  color: #ffe8a3;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.22s, transform 0.22s;
  pointer-events: none;
}
.rw-toastline.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Reduced motion */
.rw-reduced .rw-loom-ring,
.rw-reduced .rw-loom-circle,
.rw-reduced .rw-chandelier,
.rw-reduced .rw-vip,
.rw-reduced .rw-walker-pet {
  animation: none !important;
}
.rw-reduced .rw-card,
.rw-reduced .rw-summary-modal,
.rw-reduced .rw-stamp.slam {
  animation-duration: 0.01s !important;
}
@media (prefers-reduced-motion: reduce) {
  .rw-root,
  .rw-stage-world,
  .rw-curtain,
  .rw-trunk,
  .rw-bag-item {
    transition-duration: 0.01s !important;
  }
}