/* client/css/rpg_ui.css — Style 2 (Tree of Savior × Cookie Run: Kingdom) Design System & RPG UI.
   Cream parchment panels, roasted caramel-oak wood frames, royal gold accents, and 3-Zone Diorama layouts.
   Fits 360–440px portrait phone, respects safe-area insets. */

:root {
  --rpg-rare: #4f8fe0;
  --rpg-epic: #9a5be0;
  --rpg-mythic: #e0a42a;
  --rpg-common: #9c8669;
  --rpg-success: #3e9e3a;
  --rpg-fail: #c0392b;
}

/* ---------------- Overlay Wrap & Panel ---------------- */
.rpg-wrap {
  position: absolute;
  inset: 0;
  z-index: 35;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font, "Trebuchet MS", "Avenir Next Rounded", "Nunito", system-ui, sans-serif);
  color: var(--ink, #3a2415);
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}
.rpg-wrap[hidden] {
  display: none !important;
}

.rpg-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 15, 8, 0.76);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.rpg-panel {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #fcefd2 0%, #f7e2b4 100%);
  border-left: 3px solid #8a5222;
  border-right: 3px solid #8a5222;
  box-shadow: inset 0 0 0 2px #ffe8b3, 0 0 36px rgba(0, 0, 0, 0.65);
  padding: calc(var(--safe-top, 0px) + 6px) 8px calc(var(--safe-bottom, 0px) + 6px);
  overflow: hidden;
}

/* Close button */
.rpg-x-btn {
  position: absolute;
  top: calc(var(--safe-top, 0px) + 6px);
  right: 8px;
  z-index: 20;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2.5px solid #8a5222;
  background: radial-gradient(circle at 35% 30%, #fff8e6, #ebd09a);
  font: 900 15px var(--font, inherit);
  color: #4b2a12;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 0 #5c3416, 0 3px 6px rgba(0, 0, 0, 0.25);
}
.rpg-x-btn:active {
  transform: scale(0.92);
}

/* ---------------- Top View Navigation ---------------- */
.rpg-top-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 36px 5px 0;
  flex-shrink: 0;
}

.rpg-view-tab {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 5px 2px 4px;
  border-radius: 12px;
  border: 2px solid #c9932c;
  background: linear-gradient(180deg, #7a4a26, #4b2a12);
  color: var(--cream, #fff6e3);
  font: 800 calc(10.5px * var(--ui-scale, 1)) var(--font, inherit);
  cursor: pointer;
  box-shadow: 0 2px 0 #2a170a;
}
.rpg-view-tab .ico {
  font-size: calc(16px * var(--ui-scale, 1));
  line-height: 1;
}
.rpg-view-tab.active {
  background: linear-gradient(180deg, #ffe082, #e59e26);
  color: #3a2208;
  border-color: #fff5cc;
  box-shadow: inset 0 -2px 0 #b37112, 0 2px 4px rgba(0, 0, 0, 0.22);
}

/* ---------------- Currency Strip ---------------- */
.rpg-currencies {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #382212, #24150a);
  border: 1.5px solid #d49f3a;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  margin-bottom: 5px;
  flex-shrink: 0;
}

.rpg-curr-item {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: #fff6e3;
  font-weight: 900;
  font-size: clamp(10px, calc(11.5px * var(--ui-scale, 1)), 12.5px);
}
.rpg-curr-item img {
  width: clamp(15px, 4.2vw, 18px);
  height: clamp(15px, 4.2vw, 18px);
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

/* ---------------- View Body (Scrollable) ---------------- */
.rpg-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 2px 2px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.rpg-body > * {
  flex-shrink: 0;
}

.rpg-busy button,
.rpg-busy input,
.rpg-busy select {
  pointer-events: none !important;
  opacity: 0.65 !important;
}

/* ---------------- Sub-tabs ---------------- */
.rpg-sub-tabs {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  min-width: 0;
}
.rpg-sub-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 4px;
  border-radius: 10px;
  border: 2px solid #b58548;
  background: linear-gradient(180deg, #ebd5ae, #d9bc8a);
  color: #522e12;
  font: 800 clamp(9.5px, calc(11px * var(--ui-scale, 1)), 12px) var(--font, inherit);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 0 #7a4a1a;
}
.rpg-sub-tab.active {
  background: linear-gradient(180deg, #ffe388, #e39e26);
  color: #3a2006;
  border-color: #fff4c4;
  box-shadow: 0 2px 0 #9a5a10;
}

/* ---------------- Reusable Style 2 Primitives ---------------- */
.rpg-rarity-1, .s2-rarity-1 { border-color: var(--rpg-rare) !important; }
.rpg-rarity-2, .s2-rarity-2 { border-color: var(--rpg-epic) !important; }
.rpg-rarity-3, .s2-rarity-3 {
  border-color: var(--rpg-mythic) !important;
  box-shadow: 0 0 8px rgba(224, 164, 42, 0.35);
}

.rpg-stars {
  color: #e69d12;
  text-shadow: 0 1px 1px rgba(58, 36, 21, 0.25);
  font-size: 11px;
  letter-spacing: -0.5px;
  flex-shrink: 0;
}

.s2-inline-ico {
  width: 15px;
  height: 15px;
  object-fit: contain;
  vertical-align: -2px;
  flex-shrink: 0;
}

.s2-thumb {
  position: relative;
  flex-shrink: 0;
  width: clamp(38px, var(--thumb-size, 52px), 14vw);
  height: clamp(38px, var(--thumb-size, 52px), 14vw);
  border-radius: 11px;
  border: 2.5px solid #c9a46a;
  background: radial-gradient(circle at 50% 38%, #ffffff, #f5e4c3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.s2-thumb.is-round {
  border-radius: 50%;
}
.s2-thumb.s2-rarity-1 { background: radial-gradient(circle, #f2f8ff, #cbe2ff); }
.s2-thumb.s2-rarity-2 { background: radial-gradient(circle, #faf2ff, #e5ccf8); }
.s2-thumb.s2-rarity-3 { background: radial-gradient(circle, #fffdf0, #ffe49c); }

.s2-thumb-img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.18));
}
.s2-thumb-corner {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.s2-thumb-refine {
  position: absolute;
  top: 2px;
  left: 2px;
  background: linear-gradient(180deg, #43b53f, #247821);
  color: #fff;
  font-size: 9.5px;
  font-weight: 900;
  padding: 0 4px;
  border-radius: 5px;
  line-height: 1.3;
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.s2-thumb-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(58, 36, 21, 0.86);
  color: #ffe28a;
  font-size: 9px;
  font-weight: 900;
  padding: 0 4px;
  border-radius: 5px;
  line-height: 1.3;
}

.s2-btn-blue {
  background: linear-gradient(180deg, #74b9ff, #2f74d0) !important;
  color: #fff !important;
  border-color: #bfe0ff !important;
  box-shadow: 0 4px 0 #1b498a, 0 6px 12px rgba(0,0,0,0.22) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.s2-btn-green {
  background: linear-gradient(180deg, #7ee268, #369b31) !important;
  color: #fff !important;
  border-color: #c9f7be !important;
  box-shadow: 0 4px 0 #1e611b, 0 6px 12px rgba(0,0,0,0.22) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.s2-btn-rainbow {
  background: linear-gradient(180deg, #ffe57f 0%, #f5a623 100%) !important;
  color: #3a1f04 !important;
  border-color: #fff8d6 !important;
  box-shadow: 0 4px 0 #9a5a10, 0 0 14px rgba(255, 215, 106, 0.55) !important;
}

.rpg-card {
  position: relative;
  background: linear-gradient(180deg, #fffdf7, #fbf0d9);
  border: 2.5px solid #b88748;
  border-radius: 14px;
  padding: 8px 10px;
  box-shadow: inset 0 0 0 1.5px #fff6e0, 0 3px 0 #7a4a1f, 0 4px 8px rgba(0, 0, 0, 0.12);
}
.rpg-card-title {
  font-weight: 900;
  font-size: calc(12.5px * var(--ui-scale, 1));
  color: #5c3416;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.s2-empty-notice {
  grid-column: 1 / -1;
  padding: 16px;
  text-align: center;
  color: #7a4a1a;
  font-weight: 800;
  font-size: 12px;
}

/* ============================================================================
   VIEW 1: WARDROBE & PAPER-DOLL STAGE (Screens 07 & 08)
   ============================================================================ */
.s2-wardrobe-stage {
  display: grid;
  grid-template-columns: minmax(86px, 27.5%) minmax(0, 1fr) minmax(86px, 27.5%);
  gap: 5px;
  align-items: stretch;
  background: radial-gradient(circle at 50% 42%, #fff9eb 0%, #f3dfb9 72%, #e0c18c 100%);
  border: 2.5px solid #a46a32;
  border-radius: 16px;
  padding: 6px 5px;
  box-sizing: border-box;
  box-shadow: inset 0 0 18px rgba(164, 106, 50, 0.25), 0 3px 0 #6b3f1f;
}

.s2-pd-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: space-between;
  min-width: 0;
}

.s2-pd-slot {
  background: linear-gradient(180deg, #fffdf9, #f7ead0);
  border: 2px solid #c9a46a;
  border-radius: 11px;
  padding: 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  min-width: 0;
  box-sizing: border-box;
  transition: transform 0.1s, box-shadow 0.15s;
}
.s2-pd-slot.selected {
  border-color: #f0a91c !important;
  box-shadow: 0 0 0 2px #ffd76a, 0 2px 6px rgba(0,0,0,0.18);
  background: #fff9e6;
}
.s2-pd-slot.slot-hidden .s2-pd-thumb {
  opacity: 0.42;
  filter: grayscale(0.6);
}
.s2-pd-slot-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2px;
}
.rpg-slot-label {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  color: #7a461d;
}
.rpg-slot-refine {
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  background: #2e8b2a;
  padding: 0 4px;
  border-radius: 5px;
  flex-shrink: 0;
}
.s2-pd-slot-Body {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.s2-pd-thumb-wrap {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: radial-gradient(circle, #fff, #efe0c2);
  border: 1.5px solid #d8b984;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.s2-pd-thumb {
  width: 90%;
  height: 90%;
  object-fit: contain;
}
.s2-pd-empty {
  font-size: 16px;
  font-weight: 900;
  color: #c4a472;
}
.s2-pd-meta {
  min-width: 0;
  flex: 1;
}
.rpg-slot-name {
  font-size: 9.5px;
  font-weight: 800;
  color: #3a2415;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rpg-slot-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3px;
  margin-top: 1px;
}
.rpg-eye-btn {
  background: #f1dfba;
  border: 1px solid #c49c5e;
  border-radius: 6px;
  padding: 1px 4px;
  font-size: 10px;
  cursor: pointer;
  line-height: 1.2;
  flex-shrink: 0;
}
.rpg-goforge-btn {
  position: relative;
  background: linear-gradient(180deg, #ffe07d, #e09b22);
  border: 1px solid #fff2c2;
  border-radius: 6px;
  padding: 1px 5px;
  font: 800 9px var(--font, inherit);
  color: #3a2208;
  cursor: pointer;
  box-shadow: 0 1px 0 #9a5a10;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Center Paper-Doll Hero Stage */
.s2-pd-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 214px;
  min-width: 0;
  padding: 2px 0;
}
.s2-pd-badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 8;
}
.s2-badge-gold {
  background: linear-gradient(90deg, #6b3f1f, #9c5d27, #6b3f1f);
  border: 1.5px solid #ffd76a;
  color: #ffe89e;
  font-size: 9.5px;
  font-weight: 900;
  padding: 1px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.s2-badge-pink {
  background: linear-gradient(90deg, #ff7eb3, #e0487c);
  border: 1px solid #ffe0ec;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.s2-badge-green {
  background: #e3f7e2;
  border: 1px solid #3e9e3a;
  color: #1c6619;
  font-size: 9.5px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 999px;
}

.s2-pd-figure {
  position: relative;
  width: 158px;
  height: 166px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Interactive Pose & Motion Controls on Stage */
.s2-pd-stage-ctrls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 12;
}
.s2-pd-ctrl-btn {
  pointer-events: auto;
  background: rgba(255, 250, 235, 0.92);
  border: 1.5px solid #b88748;
  border-radius: 999px;
  padding: 1px 6px;
  font: 800 8.5px var(--font, inherit);
  color: #4f2c12;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.16);
}
.s2-pd-ctrl-btn.active {
  background: linear-gradient(180deg, #ffe388, #e39e26);
  border-color: #9a5a10;
  color: #2e1604;
}

@keyframes s2AuraSpin {
  0% { transform: translateX(-50%) rotate(0deg); }
  100% { transform: translateX(-50%) rotate(360deg); }
}
.s2-pd-aura {
  position: absolute;
  width: 138px;
  height: 138px;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.56;
  pointer-events: none;
  z-index: 1;
  animation: s2AuraSpin 22s linear infinite;
}
.s2-pd-pedestal {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 118px;
  height: 54px;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
}

/* 1. Unified Bone-Math DOM Rig (100% coordinate match with ChibiRig; hidden once live WebGL canvas renders) */
@keyframes s2ChibiBreath {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50% { transform: scaleY(1.016) translateY(-1px); }
}
@keyframes s2ChibiWalkHop {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  25% { transform: translateY(-4px) rotate(0deg); }
  50% { transform: translateY(0) rotate(1.2deg); }
  75% { transform: translateY(-4px) rotate(0deg); }
}
@keyframes s2WingFlapL {
  0%, 100% { transform: scaleX(1) rotate(3deg); }
  50% { transform: scaleX(0.84) rotate(7deg); }
}
@keyframes s2WingFlapR {
  0%, 100% { transform: scaleX(1) rotate(-3deg); }
  50% { transform: scaleX(0.84) rotate(-7deg); }
}

.s2-pd-rig-box {
  position: absolute;
  bottom: 22px;
  left: 50%;
  width: 121px;
  height: 121px;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
}
.s2-pd-figure.is-webgl-live .s2-pd-rig-box {
  opacity: 0;
}
.s2-pd-dom-rig {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  animation: s2ChibiBreath 2.8s ease-in-out infinite;
}
.s2-pd-rig-box.is-walking .s2-pd-dom-rig {
  animation: s2ChibiWalkHop 0.55s ease-in-out infinite;
}

.s2-pd-wings-pivot {
  position: absolute;
  transform: translate(-50%, 50%);
  pointer-events: none;
}
.s2-pd-wings-pivot.behind { z-index: 2; }
.s2-pd-wings-pivot.in-front { z-index: 15; }

.s2-pd-wing-half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
}
.s2-pd-wing-half img {
  position: absolute;
  top: 0;
  width: 200%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
}
.s2-pd-wing-half.is-left {
  left: 0;
  transform-origin: 100% 55%;
  animation: s2WingFlapL 0.83s ease-in-out infinite;
}
.s2-pd-wing-half.is-left img { left: 0; }
.s2-pd-wing-half.is-right {
  right: 0;
  transform-origin: 0% 55%;
  animation: s2WingFlapR 0.83s ease-in-out infinite;
}
.s2-pd-wing-half.is-right img { left: -100%; }

.s2-pd-bone-body {
  position: absolute;
  bottom: 0;
  left: 50%;
  max-width: none;
  max-height: none;
  object-fit: fill;
  z-index: 5;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.22));
}
.s2-pd-bone-body.s2-mask-feet-short {
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 84%, transparent 87%);
  mask-image: linear-gradient(to bottom, black 0%, black 84%, transparent 87%);
}

.s2-pd-bone-acc {
  position: absolute;
  max-width: none;
  max-height: none;
  object-fit: fill;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.22));
}
/* Floor-length gown boot masking (matches ChibiRig uClipTopY = 0.56 so only shoe tips peek under long hem) */
.s2-pd-bone-acc.s2-clip-long-boot {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 40%, black 48%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 40%, black 48%, black 100%);
}

/* 2. Live WebGL ChibiRig Stage Host (60fps 9-bone vertex skinning, cloth wave, wing flap) */
.s2-pd-webgl-host {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 160px;
  height: 160px;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
}
.s2-pd-webgl-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.22));
}

/* 3. Companion Pet Stage Preview with Locomotion Idle Animations */
@keyframes s2PetHop {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  40% { transform: translateY(-4px) scale(0.97, 1.03); }
  55% { transform: translateY(0) scale(1.03, 0.97); }
}
@keyframes s2PetFlutter {
  0%, 100% { transform: translateY(-2px) rotate(-2deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}
@keyframes s2PetFloat {
  0%, 100% { transform: translate(0, -1px); }
  50% { transform: translate(1px, -6px); }
}

.s2-pd-pet-wrap {
  position: absolute;
  right: 0px;
  bottom: 10px;
  width: 56px;
  height: 56px;
  z-index: 9;
  pointer-events: none;
  animation: s2PetHop 2.1s ease-in-out infinite;
}
.s2-pd-pet-wrap.s2-loco-FLY_FLUTTER {
  animation: s2PetFlutter 1.4s ease-in-out infinite;
}
.s2-pd-pet-wrap.s2-loco-FLOAT_SPIRIT {
  animation: s2PetFloat 2.4s ease-in-out infinite;
}
.s2-pd-pet {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(var(--pet-ui-scale, 1));
  transform-origin: 50% 85%;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.28));
}
.s2-pd-nameplate {
  z-index: 10;
  background: rgba(58, 36, 21, 0.9);
  border: 1.5px solid #e0a72a;
  color: #fff6e3;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 10.5px;
  display: flex;
  gap: 5px;
  align-items: center;
}
.s2-pd-nameplate span {
  color: #ffe08a;
  font-weight: 900;
}

/* 2x2 Stat Breakdown Card (Screen 07) */
.s2-stat-panel {
  background: linear-gradient(180deg, #56351c, #3b2210);
  border: 2px solid #d49f3a;
  border-radius: 13px;
  padding: 6px 8px;
  color: #fff6e3;
}
.s2-stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 5px;
  color: #ffe59e;
}
.s2-cp-pill {
  background: linear-gradient(180deg, #ffe082, #d99018);
  color: #3a2006;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 900;
}
.s2-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.s2-stat-cell {
  min-width: 0;
  background: rgba(255, 248, 232, 0.12);
  border: 1px solid rgba(255, 224, 138, 0.3);
  border-radius: 9px;
  padding: 4px 7px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.s2-stat-cell img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.s2-stat-name {
  font-size: 10px;
  color: #ebd5b3;
  font-weight: 800;
}
.s2-stat-val {
  font-size: 11.5px;
  font-weight: 900;
  color: #fff;
}
.s2-stat-val small {
  font-size: 9.5px;
  color: #ffd76a;
}

/* Closet Grid & Slot Pills */
.s2-slot-pills-bar {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.s2-slot-pill {
  flex: 1;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1.5px solid #c9a46a;
  background: #f4e3c3;
  color: #5c3416;
  font: 800 10px var(--font, inherit);
  cursor: pointer;
  white-space: nowrap;
}
.s2-slot-pill.active {
  background: #6b3f1f;
  color: #ffe08a;
  border-color: #e0a72a;
}

.rpg-items-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: 210px;
  overflow-y: auto;
  padding: 2px;
}
.s2-closet-card {
  min-width: 0;
  max-width: 100%;
  background: #fffdf9;
  border: 2px solid #d3b27a;
  border-radius: 12px;
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.s2-closet-card.equipped {
  background: #fff6db;
  border-color: #e0a42a;
}
.s2-closet-meta {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rpg-item-name {
  font-weight: 900;
  font-size: 11px;
  color: #3a2415;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s2-closet-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
}
.s2-cp-mini {
  font-weight: 800;
  color: #2b7d2f;
  font-size: 9.5px;
}
.s2-closet-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: 2px;
}
.rpg-equipped-badge {
  font-size: 9px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 6px;
  background: #3e9e3a;
  color: #fff;
  white-space: nowrap;
}
.rpg-equip-btn {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffe285, #e09b22);
  border: 1px solid #b57314;
  color: #3a2006;
  cursor: pointer;
}

/* Pets & Bag Sub-tabs in Wardrobe */
.rpg-pets-list, .rpg-bag-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rpg-pet-card, .rpg-bag-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-width: 0;
  background: #fffdf9;
  border: 2px solid #d3b27a;
  border-radius: 12px;
  padding: 7px 10px;
}
.rpg-pet-card { cursor: pointer; }
.rpg-pet-card.equipped { background: #fff6db; border-color: #e0a72a; }
.s2-pet-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.s2-pet-card-info {
  min-width: 0;
  flex: 1;
}
.s2-pet-card-title {
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s2-pet-card-sub {
  font-size: 11px;
  color: #7a4a1a;
  font-weight: 700;
}
.s2-pet-card-meta {
  font-size: 10px;
  color: #5c3416;
}
.rpg-bag-meta { flex: 1; min-width: 0; }
.rpg-bag-title { font-weight: 900; font-size: 12.5px; }
.rpg-bag-desc { font-size: 10.5px; color: #7a4a1a; }
.rpg-bag-count {
  font-weight: 900;
  font-size: 14px;
  color: #5c3416;
  background: #f5e2be;
  padding: 3px 8px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* Royal Owl Gift Card (Screen 08) */
.s2-owl-gift-card {
  position: relative;
  padding-top: 12px;
  background: linear-gradient(180deg, #fff9ec, #f5e1b9);
}
.s2-owl-mascot {
  position: absolute;
  top: -14px;
  right: 8px;
  width: 68px;
  height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.25));
}
.s2-owl-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  font-size: 12px;
  color: #5c3416;
  padding-right: 64px;
}
.s2-owl-gift-ico {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}
.s2-owl-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
  margin: 5px 0;
}
.s2-owl-slots {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.s2-owl-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #e8cfa1;
  border: 1.5px solid #b58548;
  border-radius: 9px;
  padding: 4px 8px;
  font-size: 10.5px;
}
.s2-owl-slot img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  background: #fff8e8;
  border-radius: 6px;
  padding: 2px;
}

/* ============================================================================
   VIEW 2: GACHA SUMMON & SHARD SHOP (Screens 21, 22, 23)
   ============================================================================ */
.s2-gacha-stage {
  position: relative;
  border-radius: 16px;
  border: 2.5px solid #c9932c;
  padding: 8px 8px 6px;
  overflow: hidden;
  box-shadow: 0 3px 0 #6b3f1f;
}
.s2-stage-box1 {
  background: radial-gradient(circle at 50% 42%, #fff8eb 0%, #cde6ff 55%, #5b4b8a 100%);
}
.s2-stage-box2 {
  background: radial-gradient(circle at 50% 42%, #fff4d2 0%, #d4a359 60%, #482e4d 100%);
}
.s2-stage-header-pill {
  text-align: center;
  background: rgba(43, 28, 16, 0.85);
  border: 1.5px solid #ffd76a;
  color: #ffe89e;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 10px;
  border-radius: 999px;
  margin: 0 auto 6px;
  width: fit-content;
}

.s2-gacha-diorama {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 158px;
  position: relative;
}
.s2-float-bubbles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 3;
}
.s2-bubble {
  width: 62px;
  background: rgba(255, 252, 242, 0.92);
  border: 2px solid #e0a42a;
  border-radius: 12px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.22);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.s2-bubble:hover,
.s2-bubble.is-selected {
  transform: scale(1.06);
  border-color: #ff9800;
  background: #fff9e2;
  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.65), 0 4px 10px rgba(0,0,0,0.28);
}
.s2-bubble img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.s2-bubble span {
  font-size: 9px;
  font-weight: 900;
  color: #4b2a12;
  white-space: nowrap;
}
.s2-stage-reset-inline {
  background: #ffe082;
  color: #3a2208;
  border: 1px solid #c9932c;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 9.5px;
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
}

.s2-stage-centerpiece {
  position: relative;
  flex: 1;
  height: 156px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s2-arch-prop {
  position: absolute;
  width: 170px;
  height: 154px;
  object-fit: contain;
  z-index: 1;
}
.s2-arch-figures {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: 18px;
}
.s2-arch-chibi {
  height: 112px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.3));
}
.s2-arch-chibi.left { margin-right: -12px; }
.s2-arch-chibi.right { margin-left: -12px; }

.s2-draft-prop {
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: 84px;
  height: 96px;
  object-fit: contain;
  z-index: 2;
}
.s2-wonder-hero {
  height: 146px;
  width: auto;
  object-fit: contain;
  margin-left: 24px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
  z-index: 3;
}

.rpg-featured-banner {
  background: linear-gradient(180deg, #ffe7a6, #f0be59);
  border: 2px solid #8a5222;
  border-radius: 11px;
  padding: 4px 8px;
  text-align: center;
  margin-top: 4px;
}
.rpg-featured-title {
  font-size: 10px;
  font-weight: 900;
  color: #7a3f12;
  text-transform: uppercase;
}
.rpg-featured-name {
  font-size: 13px;
  font-weight: 900;
  color: #3a2208;
}

.rpg-pity-wrap { margin-bottom: 6px; }
.rpg-pity-bar {
  position: relative;
  height: 22px;
  background: #3a2414;
  border: 2px solid #c9932c;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rpg-pity-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, #e09b22, #ffe27a);
  transition: width 0.3s;
}
.rpg-pity-text {
  position: relative;
  z-index: 2;
  font-size: 10.5px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}

.rpg-rates-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  background: #f8ebd0;
  border: 1.5px solid #d8b880;
  border-radius: 9px;
  padding: 5px 6px;
  font-size: 10.5px;
  font-weight: 900;
}
#rpg-rates.rpg-rates-box {
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}
.rpg-rates-pcts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  gap: 4px 8px;
  width: 100%;
}
.rpg-rates-box .rare { color: var(--rpg-rare); }
.rpg-rates-box .epic { color: var(--rpg-epic); }
.rpg-rates-box .mythic { color: #b87400; }
.rpg-rates-box .super-mythic { color: #b829d9; }

/* 1-List Ranked Prize Pool Grid (★3 Mythic → ★2 Epic → ★1 Rare) */
.s2-pool-section {
  margin-top: 6px;
}
.s2-pool-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  gap: 6px;
}
.s2-pool-title {
  font-size: 10.5px;
  font-weight: 900;
  color: #5c3416;
}
.s2-pool-hint {
  font-size: 9.5px;
  font-weight: 800;
  color: #8a5a2b;
}
.s2-pool-reset-btn {
  background: #fff3cd;
  border: 1.5px solid #c9932c;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 9.5px;
  font-weight: 900;
  color: #5c3416;
  cursor: pointer;
  font-family: inherit;
}
.s2-gacha-pool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  max-height: 168px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 3px;
  background: rgba(244, 229, 198, 0.65);
  border: 1.5px solid #d8b880;
  border-radius: 10px;
}
@media (max-width: 360px) {
  .s2-gacha-pool-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.s2-pool-tile {
  min-width: 0;
  background: #fffdf8;
  border: 1.5px solid #d3b27a;
  border-radius: 9px;
  padding: 3px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  position: relative;
}
.s2-pool-tile.s2-rarity-super_mythic,
.s2-pool-tile.s2-rarity-4 {
  border: 2px solid #c026d3;
  background: linear-gradient(145deg, #fff5ff 0%, #fce7ff 45%, #fff3c4 100%);
  box-shadow: 0 0 8px rgba(192, 38, 211, 0.28), inset 0 0 0 1px rgba(255, 215, 106, 0.65);
}
.s2-pool-tile.s2-rarity-3 {
  border-color: #e09b22;
  background: linear-gradient(180deg, #fffdf4 0%, #fff2c6 100%);
}
.s2-pool-tile.s2-rarity-2 {
  border-color: #9b6bd6;
  background: linear-gradient(180deg, #fdfbff 0%, #f1e6ff 100%);
}
.s2-pool-tile.s2-rarity-1 {
  border-color: #6ea8dc;
  background: linear-gradient(180deg, #fafdff 0%, #e7f3ff 100%);
}
.s2-pool-tile.is-selected {
  outline: 2.5px solid #ff9800;
  box-shadow: 0 2px 6px rgba(255, 152, 0, 0.35);
}
.s2-pool-tile-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 8.5px;
  font-weight: 900;
  line-height: 1.1;
}
.s2-pool-tile.s2-rarity-super_mythic .s2-pool-stars,
.s2-pool-tile.s2-rarity-4 .s2-pool-stars {
  color: #a21caf;
  font-weight: 900;
  letter-spacing: -0.2px;
}
.s2-pool-tile.s2-rarity-3 .s2-pool-stars { color: #c77c00; }
.s2-pool-tile.s2-rarity-2 .s2-pool-stars { color: #7b3ec8; }
.s2-pool-tile.s2-rarity-1 .s2-pool-stars { color: #2b6cb0; }
.s2-pool-rate {
  color: #5c3a1a;
  font-size: 8px;
}
.s2-pool-rate b {
  color: #b83214;
}
.s2-pool-thumb-wrap {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1px 0;
}
.s2-pool-thumb-wrap img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.s2-pool-owned-badge {
  position: absolute;
  right: -4px;
  bottom: -2px;
  background: #2f855a;
  color: #fff;
  font-size: 7.5px;
  font-weight: 900;
  padding: 0 4px;
  border-radius: 999px;
  line-height: 1.35;
}
.s2-pool-name {
  width: 100%;
  font-size: 8.5px;
  font-weight: 800;
  color: #3a2208;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Box 2 Blueprint Progress Strip */
.s2-bp-strip-title {
  font-size: 10.5px;
  font-weight: 900;
  color: #5c3416;
  margin: 6px 0 4px;
}
.s2-bp-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}
.s2-bp-mini {
  min-width: 0;
  background: #fffdf8;
  border: 1.5px solid #d3b27a;
  border-radius: 8px;
  padding: 3px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.s2-bp-mini.ready {
  border-color: #3e9e3a;
  background: #eaf9e8;
}
.s2-bp-mini img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.s2-bp-mini-meta b {
  display: block;
  font-size: 8.5px;
  color: #3a2415;
}
.s2-bp-mini-meta span {
  font-size: 8px;
  font-weight: 800;
  color: #7a4a1a;
}

.rpg-gacha-buttons {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rpg-gacha-btn-row {
  display: flex;
  gap: 6px;
}
.rpg-gacha-btn-row .btn-gold {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  padding: 7px 4px 6px;
  font-size: clamp(11.5px, 3.2vw, 13px);
}
.rpg-gacha-btn-row .btn-gold small {
  font-size: clamp(9px, 2.5vw, 10px);
}

/* Gacha Results Panel */
.rpg-results-panel {
  background: #fff9eb;
  border: 2.5px solid #c9932c;
  border-radius: 14px;
  padding: 8px;
}
.rpg-results-title {
  font-weight: 900;
  font-size: 13px;
  color: #5c3416;
  text-align: center;
  margin-bottom: 6px;
}
.rpg-results-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  max-height: 210px;
  overflow-y: auto;
}
.rpg-result-item {
  min-width: 0;
  background: #fffdf9;
  border: 2px solid #d3b27a;
  border-radius: 10px;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.s2-res-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.s2-res-thumb {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s2-res-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.rpg-result-badge {
  font-size: 8.5px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 5px;
  color: #fff;
  background: #887a6b;
}
.rpg-badge-new { background: #3e9e3a; }
.rpg-badge-dupe { background: #2f6cc9; }
.rpg-badge-shards { background: #d48a10; }
.rpg-badge-star_up { background: #9a5be0; }
.rpg-badge-star_dupe { background: #2f6cc9; }
.rpg-badge-blueprint { background: #1c7bb5; }
.rpg-badge-decor { background: #b05c9a; }

.rpg-result-name {
  font-weight: 800;
  font-size: 10.5px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.s2-shards-toast {
  margin-top: 6px;
  text-align: center;
  font-weight: 900;
  font-size: 11.5px;
  color: #9a5a10;
  background: #fff2c2;
  border-radius: 8px;
  padding: 3px 8px;
}

/* Screen 23: Shard Exchange Shop */
.s2-shard-hero {
  background: linear-gradient(180deg, #fff8e6, #f2dcb1);
  border: 2.5px solid #c9932c;
  border-radius: 14px;
  padding: 6px 8px;
}
.s2-shard-ribbon {
  background: linear-gradient(90deg, #8c261d, #c43c2f, #8c261d);
  border: 1.5px solid #ffd76a;
  color: #fff8e6;
  font-size: clamp(9.5px, 2.7vw, 10.5px);
  font-weight: 900;
  text-align: center;
  padding: 3px 8px;
  border-radius: 8px;
  margin-bottom: 6px;
}
.s2-shard-hero-body {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.s2-shard-showcase {
  position: relative;
  width: clamp(96px, 28vw, 124px);
  height: clamp(74px, 21vw, 90px);
  flex-shrink: 0;
}
.s2-shard-arch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.s2-shard-chibi {
  position: absolute;
  left: 11%;
  bottom: 6%;
  height: 80%;
  max-width: 60%;
  object-fit: contain;
}
.s2-shard-wonder {
  position: absolute;
  right: 5%;
  bottom: 8%;
  height: 76%;
  max-width: 60%;
  object-fit: contain;
}
.s2-shard-summary {
  flex: 1 1 0;
  min-width: 0;
}
.s2-shard-bal {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  background: #fffdf8;
  border: 1.5px solid #d3b27a;
  border-radius: 10px;
  padding: 6px 8px;
  font-size: clamp(10.5px, 2.8vw, 11.5px);
  font-weight: 800;
}
.s2-shard-bal img {
  width: clamp(22px, 6.5vw, 28px);
  height: clamp(22px, 6.5vw, 28px);
  object-fit: contain;
  flex-shrink: 0;
}
.s2-shard-bal-text {
  flex: 1;
  min-width: 0;
}
.s2-shard-bal small {
  display: block;
  font-size: clamp(8.5px, 2.3vw, 9.5px);
  color: #7a4a1a;
  margin-top: 2px;
  line-height: 1.25;
}

.rpg-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.s2-shop-card {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  background: #fffdf9;
  border: 2px solid #d3b27a;
  border-radius: 12px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
}
.s2-shop-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.rpg-offer-name {
  flex: 1;
  min-width: 0;
  font-weight: 900;
  font-size: clamp(10px, 2.7vw, 11px);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}
.s2-shop-card-body {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.s2-shop-thumb {
  width: clamp(38px, 11vw, 48px);
  height: clamp(38px, 11vw, 48px);
}
.s2-shop-card-info {
  flex: 1 1 0;
  min-width: 0;
}
.s2-shop-sub {
  font-size: clamp(8.8px, 2.3vw, 9.5px);
  color: #7a4a1a;
  font-weight: 700;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}
.rpg-offer-cost {
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: 900;
  font-size: clamp(10px, 2.7vw, 11.5px);
  color: #b97a1c;
  margin-top: 2px;
  white-space: nowrap;
}
.rpg-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 4px 5px;
  border-radius: 7px;
  border: 1.5px solid #c9a46a;
  background: #fff8e8;
  font: 700 clamp(9.5px, 2.5vw, 10.5px) var(--font, inherit);
  color: #3a2415;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.s2-shop-card .btn-gold,
.s2-shop-btn {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: auto;
  padding: 6px 5px;
  border-radius: 10px;
  border-width: 2px;
  font-size: clamp(10px, 2.7vw, 12px);
  letter-spacing: 0;
  box-shadow: 0 3px 0 #9a5a10, 0 4px 8px rgba(0, 0, 0, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
}
.s2-shop-btn span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================================
   VIEW 3: BLACKSMITH STAR-FORCE FORGE (Screen 20)
   ============================================================================ */
.s2-forge-stage {
  background: radial-gradient(circle at 50% 60%, #ffdf9e 0%, #73391d 68%, #2e170c 100%);
  border: 2.5px solid #c9932c;
  border-radius: 16px;
  padding: 8px 10px 6px;
  color: #fff6e3;
  box-shadow: 0 3px 0 #5c3416;
}
.s2-sf-arc {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 2px 0 8px;
}
.s2-sf-star {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  border: 1.5px solid #8a6432;
  color: #6b5335;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s2-sf-star.filled {
  background: radial-gradient(circle, #fff6b3, #e69d12);
  border-color: #fff;
  color: #5c3000;
  box-shadow: 0 0 8px #ffd76a;
}
.s2-sf-star.target {
  border-color: #ffd76a;
  color: #ffd76a;
  animation: pulse 1.1s infinite;
}

.s2-anvil-diorama {
  position: relative;
  height: 134px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s2-anvil-center {
  position: relative;
  width: 170px;
  height: 134px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.s2-anvil-magic {
  position: absolute;
  top: -4px;
  width: 96px;
  height: 96px;
  opacity: 0.7;
}
.s2-anvil-item-box {
  position: relative;
  z-index: 3;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  border: 2.5px solid #ffd76a;
  background: radial-gradient(circle, #fffdf2, #f5d382);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -14px;
  box-shadow: 0 0 16px rgba(255, 215, 106, 0.75);
}
.s2-anvil-item-box img {
  width: 86%;
  height: 86%;
  object-fit: contain;
}
.s2-anvil-plus {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #2b8a28;
  border: 1.5px solid #fff;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 999px;
}
.s2-anvil-prop {
  width: 118px;
  height: 84px;
  object-fit: contain;
  z-index: 2;
}
.s2-anvil-smith {
  position: absolute;
  right: 8px;
  bottom: 4px;
  height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.45));
}

.rpg-forge-target {
  text-align: center;
  font-weight: 900;
  font-size: 13.5px;
  color: #ffe89e;
  margin-top: 2px;
}

.rpg-forge-console {
  background: linear-gradient(180deg, #fffdf7, #f8e8c6);
  border: 2.5px solid #c9932c;
  border-radius: 14px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.s2-aura-banner {
  background: linear-gradient(90deg, #fff2c2, #ffd97d, #fff2c2);
  border: 1.5px solid #d49424;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 10.5px;
  text-align: center;
  color: #4b2a12;
}
.s2-forge-mid-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rpg-chance-gauge {
  width: 78px;
  height: 78px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 4px solid #3e9e3a;
  background: radial-gradient(circle, #ffffff, #e6f9e4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.14);
}
.rpg-chance-num {
  font-weight: 900;
  font-size: 21px;
  color: #237020;
  line-height: 1;
}
.rpg-chance-sub {
  font-size: 9px;
  font-weight: 900;
  color: #5c3416;
}
.s2-forge-controls-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rpg-safe-badge {
  background: #e6f9e6;
  border: 1.5px solid #3e9e3a;
  color: #1c6619;
  font-weight: 900;
  font-size: 9.5px;
  padding: 3px 7px;
  border-radius: 8px;
}
.rpg-berries-check {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #fff0f5;
  border: 1.5px solid #e5527a;
  border-radius: 8px;
  padding: 4px 7px;
  font-weight: 900;
  font-size: 11px;
  color: #7a1432;
  cursor: pointer;
}
.rpg-berries-check input {
  width: 16px;
  height: 16px;
  accent-color: #e5527a;
}
.rpg-scroll-check {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #fdf5e6;
  border: 1.5px solid #d49f3a;
  border-radius: 8px;
  padding: 4px 7px;
  font-weight: 900;
  font-size: 11px;
  color: #5c3416;
  cursor: pointer;
}
.rpg-scroll-check.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  border-color: #baa482;
  color: #7d6b56;
}
.rpg-scroll-check input {
  width: 16px;
  height: 16px;
  accent-color: #d49f3a;
}

.s2-pity-box-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 3px;
  gap: 6px;
}
.s2-pity-bar-slim {
  height: 14px;
}
.s2-forge-picker-card {
  padding: 8px;
}
.s2-forge-picker-title {
  margin-bottom: 4px;
}

.rpg-cost-rows {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  background: #f5e5c6;
  padding: 5px 8px;
  border-radius: 8px;
}
.s2-lack { color: #c0392b; }

.rpg-forge-result {
  padding: 6px 8px;
  border-radius: 8px;
  font-weight: 900;
  font-size: 11.5px;
  text-align: center;
}
.rpg-forge-result.success { background: #e4f7e2; border: 1.5px solid #3e9e3a; color: #10300a; }
.rpg-forge-result.fail { background: #fff0ed; border: 1.5px solid #c9932c; color: #7a2012; }

.rpg-forge-picker {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  touch-action: pan-x;
  padding: 2px;
}
.rpg-forge-item {
  flex: 0 0 auto;
  width: 68px;
  background: #fffdf9;
  border: 2px solid #d3b27a;
  border-radius: 10px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}
.rpg-forge-item.active {
  border-color: #f0a91c !important;
  box-shadow: 0 0 0 2px #ffd76a;
  background: #fff6db;
}
.s2-forge-pick-thumb {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s2-forge-pick-thumb img {
  width: 90%;
  height: 90%;
  object-fit: contain;
}
.s2-forge-pick-name {
  font-size: 9px;
  font-weight: 800;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================================
   VIEW 4: COZY PET NEST & SANCTUARY (Screen 16)
   ============================================================================ */
.s2-pet-sanctuary-stage {
  background: radial-gradient(circle at 50% 45%, #fff9eb 0%, #cdeeff 60%, #8bc9f0 100%);
  border: 2.5px solid #a46a32;
  border-radius: 16px;
  padding: 7px 8px;
  box-shadow: 0 3px 0 #6b3f1f;
}
.s2-nest-diorama {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 124px;
  padding: 0 4px;
  gap: 4px;
}
.s2-nest-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 1 31%;
  min-width: 0;
  z-index: 3;
}
.s2-nest-pet {
  width: clamp(60px, 17vw, 74px);
  height: clamp(60px, 17vw, 74px);
  object-fit: contain;
  transform: scale(var(--pet-ui-scale, 1));
  transform-origin: 50% 88%;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.25));
}
.s2-nest-pet.mirror {
  transform: scaleX(-1) scale(var(--pet-ui-scale, 1));
}
.s2-nest-label {
  background: rgba(58, 36, 21, 0.86);
  color: #fff6e3;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s2-nest-center {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 120px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.s2-nest-prop {
  width: min(142px, 100%);
  height: 104px;
  object-fit: contain;
  z-index: 1;
}
.s2-nest-egg {
  position: absolute;
  bottom: 36px;
  width: 52px;
  height: 64px;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 0 10px rgba(255, 230, 140, 0.9));
}
.s2-nest-heart {
  position: absolute;
  top: 2px;
  width: 24px;
  height: 24px;
  object-fit: contain;
  z-index: 3;
}

.rpg-pet-details {
  background: linear-gradient(180deg, #fffdf7, #f9ebd0);
  border: 2.5px solid #b88748;
  border-radius: 14px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rpg-pet-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.rpg-pet-name-title {
  font-weight: 900;
  font-size: 13.5px;
  color: #3a2415;
}
.rpg-pet-family {
  font-size: 10.5px;
  font-weight: 800;
  color: #7a4a1a;
}
.s2-pet-lv-badge {
  background: #6b3f1f;
  color: #ffe08a;
  font-weight: 900;
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: 8px;
  flex-shrink: 0;
}

.rpg-bar-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rpg-stat-bar-wrap {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 900;
}
.rpg-stat-track {
  height: 11px;
  background: #3a2414;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #a46a32;
}
.rpg-stat-fill { height: 100%; transition: width 0.25s; }
.rpg-fill-exp { background: linear-gradient(90deg, #56c94e, #98f274); }
.rpg-fill-mood { background: linear-gradient(90deg, #ff6b9d, #ffb3ce); }

.rpg-traits-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.s2-traits-heading {
  font-size: 11px;
  font-weight: 900;
  color: #5c3416;
}
.rpg-trait-slot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
  border-radius: 9px;
  border: 2px solid #d3b27a;
  background: #fffdf8;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.rpg-trait-slot.selected {
  box-shadow: 0 0 0 2px #f0a91c;
}
.rpg-tier-mythic { background: linear-gradient(90deg, #fff5cc, #ffe184); border-color: #e0a42a; color: #523000; }
.rpg-tier-epic { background: linear-gradient(90deg, #f6ebff, #e5ccf8); border-color: #9a5be0; color: #3d1666; }
.rpg-tier-rare { background: linear-gradient(90deg, #edf6ff, #cfe4fc); border-color: #4f8fe0; color: #123e73; }
.rpg-tier-common { background: #f7ecd5; border-color: #b89b72; color: #4b2a12; }

.s2-trait-tag { font-weight: 900; font-size: 9.5px; flex-shrink: 0; }
.s2-trait-name {
  flex: 1;
  min-width: 0;
  margin: 0 6px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s2-trait-lock { font-size: 9.5px; opacity: 0.85; flex-shrink: 0; }

.rpg-pet-actions {
  display: flex;
  gap: 6px;
}
.rpg-pet-actions .btn-gold {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  padding: 6px 4px;
  font-size: clamp(11px, 3vw, 12px);
}

.rpg-couple-box {
  background: linear-gradient(180deg, #fff7fa, #f9dfeb);
  border: 2.5px solid #d96b98;
  border-radius: 14px;
  padding: 7px 9px;
}
.s2-pet-carousel-label {
  font-size: 11px;
  font-weight: 900;
  color: #6b2242;
  margin-bottom: 3px;
}
.rpg-pet-selector {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  touch-action: pan-x;
  padding: 2px;
}
.rpg-pet-bubble {
  flex: 0 0 auto;
  width: 68px;
  background: #fff;
  border: 2px solid #d3b27a;
  border-radius: 12px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  cursor: pointer;
}
.rpg-pet-bubble.active {
  border-color: #f0a91c !important;
  box-shadow: 0 0 0 2px #ffd76a;
  background: #fff8e6;
}
.s2-pet-avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #f2e0bd);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.s2-pet-avatar-circle img {
  width: 90%;
  height: 90%;
  object-fit: contain;
}
.s2-pet-b-name {
  font-size: 9px;
  font-weight: 800;
  max-width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s2-pet-b-lv {
  font-size: 9px;
  color: #7a4a1a;
  font-weight: 800;
}

.rpg-pet-result {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fffdf0;
  border: 2px solid #e0a42a;
  border-radius: 10px;
  padding: 6px 8px;
  margin-top: 5px;
  font-size: 11px;
}
.s2-pet-result-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex-shrink: 0;
}
/* Blacksmith Red Dot Badge (Section 21.L.7) */
.rpg-red-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rpg-fail, #c0392b);
  border: 1.5px solid #fff;
  box-shadow: 0 0 5px rgba(192, 57, 43, 0.9);
  pointer-events: none;
  animation: rpg-pulse 1.4s infinite ease-in-out;
  z-index: 5;
}

@keyframes rpg-pulse {
  0% { transform: scale(0.9); opacity: 0.85; }
  50% { transform: scale(1.25); opacity: 1; box-shadow: 0 0 7px rgba(192, 57, 43, 1); }
  100% { transform: scale(0.9); opacity: 0.85; }
}

/* Box 1 Sub-Banner Selector Pills */
.s2-banner-pills-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
  flex-shrink: 0;
}
.s2-banner-pill {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 3px;
  border-radius: 999px;
  border: 1.5px solid #b58548;
  background: linear-gradient(180deg, #ebd5ae, #d9bc8a);
  color: #522e12;
  font: 800 clamp(9px, calc(10px * var(--ui-scale, 1)), 11.5px) var(--font, inherit);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 0 #7a4a1a;
}
.s2-banner-pill.active {
  background: linear-gradient(180deg, #ffe388, #e39e26);
  color: #3a2006;
  border-color: #fff4c4;
  box-shadow: 0 2px 0 #9a5a10;
}

/* Pet Star Progress */
.s2-pet-star-progress {
  font-size: 9.5px;
  font-weight: 800;
  color: #7b3fb8;
  background: #f1e4fb;
  border: 1px solid #d3a9f5;
  border-radius: 999px;
  padding: 1px 6px;
  white-space: nowrap;
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
}

/* Gacha Rates Subtitle & Rate-Up */
.rpg-rates-sub {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 800;
  color: #522e12;
  text-align: center;
}

/* ============================================================================
   RESPONSIVE BREAKPOINTS (Compact Portrait Mobile <= 360px & <= 325px)
   ============================================================================ */
@media (max-width: 360px) {
  .rpg-panel {
    padding-left: 5px;
    padding-right: 5px;
  }
  .rpg-shop-grid,
  .rpg-items-grid {
    gap: 5px;
  }
  .s2-shop-card {
    padding: 5px;
    gap: 4px;
  }
  .s2-shard-showcase {
    width: 86px;
    height: 68px;
  }
  .s2-wardrobe-stage {
    grid-template-columns: minmax(74px, 28%) minmax(0, 1fr) minmax(74px, 28%);
    gap: 4px;
  }
}

@media (max-width: 325px) {
  .rpg-shop-grid,
  .rpg-items-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================================
   PET SYSTEM V2 ("SOUL-BOND COMPANIONS") SANCTUARY STYLES
   ============================================================================ */
.pet-v2-hero-focus {
  position: relative;
}
.pet-v2-shimmer {
  filter: drop-shadow(0 0 10px rgba(255, 224, 130, 0.95)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.28));
  animation: petV2FloatShimmer 2.4s ease-in-out infinite;
}
@keyframes petV2FloatShimmer {
  0%, 100% { transform: translateY(0px) scale(var(--pet-ui-scale, 1)); }
  50% { transform: translateY(-4px) scale(calc(var(--pet-ui-scale, 1) * 1.04)); }
}
.pet-v2-emote-bubble {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  background: #fffdf7;
  border: 2px solid #e0a42a;
  border-radius: 50%;
  padding: 2px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
  z-index: 6;
}
.pet-v2-emote-bubble img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pet-v2-vtier-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  background: rgba(255, 253, 245, 0.88);
  border: 1.5px solid #c99b56;
  border-radius: 999px;
  padding: 3px 7px;
  flex-wrap: wrap;
}
.pet-v2-vtier-label {
  font-size: 10px;
  font-weight: 900;
  color: #5c3416;
  margin-right: 2px;
}
.pet-v2-vtier-pill {
  flex: 1 1 0;
  min-width: 0;
  border: 1.5px solid #b88748;
  background: #fff6e0;
  color: #4b2a12;
  border-radius: 999px;
  padding: 3px 6px;
  font-size: 9.5px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}
.pet-v2-vtier-pill.active {
  background: linear-gradient(180deg, #ffe285, #e39a22);
  color: #3a1d04;
  border-color: #fff3c4;
}
.pet-v2-vtier-pill:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.pet-v2-quick-bar {
  display: flex;
  gap: 5px;
  margin-top: 6px;
  align-items: center;
}
.pet-v2-quick-bar .btn-gold {
  flex: 1 1 0;
  margin-top: 0;
  padding: 5px 6px;
  font-size: 10px;
}
.pet-v2-equipped-pill {
  background: #e6f9e6;
  border: 1.5px solid #3e9e3a;
  color: #1c6619;
  font-size: 9.5px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.pet-v2-rename-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.pet-v2-rename-input {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1.5px solid #c99b56;
  background: #fffdf8;
  font: 800 11px var(--font, inherit);
  color: #3a2415;
}
.pet-v2-rename-btn {
  width: auto !important;
  margin-top: 0 !important;
  padding: 5px 10px !important;
  flex-shrink: 0;
}

.pet-v2-essence-box {
  background: #fdf3ff;
  border: 1.5px solid #b97be0;
  border-radius: 10px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pet-v2-essence-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  color: #461c66;
  gap: 6px;
}
.pet-v2-pool-pill {
  background: #f0dcff;
  border: 1px solid #b97be0;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 9.5px;
  white-space: nowrap;
}
.pet-v2-fill-essence {
  background: linear-gradient(90deg, #a55eea, #ff7eb3, #ffd86f);
}
.pet-v2-evo-actions {
  display: flex;
  gap: 6px;
}
.pet-v2-evo-actions .btn-gold {
  flex: 1;
  margin-top: 0;
  padding: 5px 6px;
  font-size: 10px;
}

.pet-v2-slot-locked {
  opacity: 0.72;
  background: #efe5d4;
  border-style: dashed;
}
.pet-v2-slot-body {
  flex: 1;
  min-width: 0;
  margin: 0 6px;
  display: flex;
  flex-direction: column;
}
.pet-v2-slot-desc {
  font-size: 9px;
  opacity: 0.82;
  font-weight: 700;
}
.pet-v2-lock-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1.5px solid #b88748;
  background: #fff8e6;
  color: #4b2a12;
  font-size: 9.5px;
  font-weight: 900;
  cursor: pointer;
  flex-shrink: 0;
}
.pet-v2-lock-btn.locked {
  background: linear-gradient(180deg, #ffe082, #d48c1c);
  color: #3a1d04;
  border-color: #9a5a10;
}
.pet-v2-lock-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.pet-v2-lock-summary {
  font-size: 10px;
  color: #8c4a15;
}
.s2-traits-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pet-v2-mythic-warn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff2cc;
  border: 1.5px solid #d48c1c;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 800;
  color: #5c3000;
  cursor: pointer;
}

.pet-v2-skill-card {
  background: linear-gradient(180deg, #fff9ee, #f4e1be);
  border: 1.5px solid #c9932c;
  border-radius: 10px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pet-v2-skill-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pet-v2-skill-ico {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 8px;
  background: #fffdf8;
  border: 1.5px solid #d49f3a;
  padding: 2px;
}
.pet-v2-skill-title {
  font-size: 11.5px;
  font-weight: 900;
  color: #3a2415;
}
.pet-v2-skill-sub {
  font-size: 9.5px;
  font-weight: 700;
  color: #6b3f1f;
  line-height: 1.25;
}
.pet-v2-skill-modes {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.pet-v2-mode-pill {
  background: #fffdf8;
  border: 1px solid #c9a46a;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 800;
  color: #522e12;
}

.pet-v2-bond-card {
  background: #fff5f8;
  border: 1.5px solid #e07ca2;
  border-radius: 10px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pet-v2-bond-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  color: #6b1d3b;
}
.pet-v2-fill-bond {
  background: linear-gradient(90deg, #ff6b9d, #ff9ebc);
}
.pet-v2-emotes-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.pet-v2-emote-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 3px;
  border-radius: 8px;
  border: 1.5px solid #d99bb5;
  background: #fff;
  font-size: 8.5px;
  font-weight: 800;
  color: #522035;
  cursor: pointer;
}
.pet-v2-emote-btn img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.pet-v2-emote-btn.active {
  border-color: #e05288;
  background: #ffe8f1;
  box-shadow: 0 0 0 1.5px #ff85b3;
}
.pet-v2-emote-btn.locked {
  opacity: 0.45;
  filter: grayscale(0.8);
  cursor: not-allowed;
}

.s2-pet-carousel-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pet-v2-release-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fffdf5;
  border: 1.5px solid #c9932c;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 900;
  color: #5c3416;
  cursor: pointer;
}
.pet-v2-release-modal {
  background: #fffdf2;
  border: 2px solid #d48c1c;
  border-radius: 10px;
  padding: 6px 8px;
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pet-v2-release-text {
  font-size: 10.5px;
  color: #4b2a12;
}
.pet-v2-release-btns {
  display: flex;
  gap: 6px;
}
.pet-v2-release-btns .btn-gold {
  flex: 1;
  margin-top: 0;
}

/* --- Minimal 3-Block Pet Sanctuary V2.5 Additions --- */
.pet-v2-single-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 124px;
  padding: 6px 0 2px;
}
.pet-v2-stage-pet {
  width: clamp(76px, 20vw, 96px);
  height: clamp(76px, 20vw, 96px);
  object-fit: contain;
  transform: scale(var(--pet-ui-scale, 1));
  transform-origin: 50% 88%;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
}
.pet-v2-stage-label {
  display: block;
  margin-top: 4px;
  background: rgba(58, 36, 21, 0.88);
  color: #fff6e3;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
}

/* Interactive Pose & Trick Bar */
.pet-v2-pose-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 9.5px;
  font-weight: 800;
  color: #5c3416;
  padding: 0 2px;
}
.pet-v2-pose-hint small {
  font-size: 8.5px;
  color: #8c4a15;
  font-weight: 800;
}
.pet-v2-pose-bar {
  display: flex;
  gap: 4px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.pet-v2-pose-btn {
  flex: 1 1 0;
  min-width: 54px;
  padding: 4px 5px;
  border-radius: 8px;
  border: 1.5px solid #c9932c;
  background: #fff8e8;
  color: #4b2a12;
  font-size: 9.5px;
  font-weight: 900;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}
.pet-v2-pose-btn.active {
  background: linear-gradient(180deg, #ffe285, #e39a22);
  color: #3a1d04;
  border-color: #ffd86b;
  box-shadow: 0 0 0 1.5px #f4a22b;
}
.pet-v2-pose-btn.is-previewing {
  outline: 2px solid #ff6b9d;
  outline-offset: 0.5px;
}
.pet-v2-flip-spin {
  animation: petV2FlipSpin 0.85s ease-in-out 1;
}
@keyframes petV2FlipSpin {
  0% { transform: translateY(0) rotate(0deg) scale(var(--pet-ui-scale, 1)); }
  50% { transform: translateY(-10px) rotate(180deg) scale(calc(var(--pet-ui-scale, 1) * 1.06)); }
  100% { transform: translateY(0) rotate(360deg) scale(var(--pet-ui-scale, 1)); }
}
.pet-v2-pose-btn.locked,
.pet-v2-pose-btn:disabled {
  opacity: 0.5;
  filter: grayscale(0.7);
  cursor: not-allowed;
  background: #ede6d8;
  border-color: #baa48a;
  color: #6b5c4f;
}

/* Block 2: Progress Bars */
.pet-v2-progress-card {
  background: #fffdf8;
  border: 1.5px solid #d49f3a;
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.pet-v2-bar-container {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pet-v2-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #422511;
}
.pet-v2-milestone-hint {
  font-size: 9.5px;
  font-weight: 800;
  color: #8c4a15;
}
.pet-v2-hunger-badge {
  font-size: 10px;
  font-weight: 900;
}
.pet-v2-hunger-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.pet-v2-hunger-track {
  width: 100%;
  height: 11px;
}
.pet-v2-feed-btn {
  width: 100%;
  margin-top: 0 !important;
  padding: 5px 8px !important;
  font-size: 10px !important;
  white-space: nowrap;
}

/* Block 3: Costume Card & Trait Slots */
.pet-v2-costume-card {
  background: linear-gradient(180deg, #f7f0ff, #eddcfc);
  border: 1.5px solid #9c6ad6;
  border-radius: 10px;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
}
.pet-v2-costume-locked {
  background: #f0eaf5;
  border: 1.5px dashed #a894bd;
}
.pet-v2-costume-lock-banner {
  font-size: 10px;
  font-weight: 800;
  color: #63467d;
  text-align: center;
  padding: 3px 0;
}
.pet-v2-costume-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #491f6e;
}
.pet-v2-costume-hint {
  font-size: 9px;
  font-weight: 700;
  color: #6d4294;
}
.pet-v2-costume-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.pet-v2-costume-select {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 160px;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 8px;
  border: 1.5px solid #9c6ad6;
  background: #fff;
  color: #3b1759;
}
.pet-v2-costume-row .btn-gold {
  width: auto !important;
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  padding: 7px 14px !important;
  white-space: nowrap;
}
.pet-v2-costume-skill-box {
  margin-top: 7px;
  padding: 7px 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(245, 234, 255, 0.92), rgba(255, 244, 224, 0.92));
  border: 1px solid rgba(156, 106, 214, 0.45);
  color: #3b1759;
  font-size: 11px;
  line-height: 1.35;
}
.pet-v2-costume-skill-box.is-empty {
  color: #6d4294;
  font-style: italic;
  text-align: center;
}
.pet-v2-costume-skill-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 3px;
  color: #491f6e;
}
.pet-v2-costume-skill-tag {
  font-size: 9.5px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.14);
  color: #5b21b6;
  border: 1px solid rgba(124, 58, 237, 0.3);
}
.pet-v2-costume-skill-desc {
  color: #532b7a;
  font-weight: 600;
}
.rpg-costume-skill-banner {
  margin-top: 8px;
  padding: 8px 11px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 248, 228, 0.95), rgba(243, 232, 255, 0.92));
  border: 1.5px solid rgba(196, 146, 56, 0.55);
  box-shadow: 0 2px 6px rgba(83, 43, 122, 0.08);
  text-align: left;
}
.rpg-costume-skill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11.5px;
  font-weight: 900;
  color: #4a2105;
  margin-bottom: 3px;
}
.rpg-costume-skill-turf {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.18);
  color: #92400e;
  border: 1px solid rgba(217, 119, 6, 0.35);
}
.rpg-costume-skill-desc {
  font-size: 10.5px;
  font-weight: 700;
  color: #5c3412;
  line-height: 1.35;
}
.rpg-closet-skill-pill {
  margin-top: 3px;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.25);
  color: #4c1d95;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}
.pet-v2-traits-card {
  margin-top: 8px;
}
.pet-v2-reroll-row {
  display: flex;
  margin-top: 6px;
}
.pet-v2-reroll-row .btn-gold {
  flex: 1;
  margin-top: 0;
}

/* Bottom 4-Companion Bar & Adopt */
.pet-v2-4bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.pet-v2-adopt-bubble {
  border: 1.5px dashed #c9932c;
  background: #fff9ed;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 2px;
  border-radius: 10px;
}
.s2-pet-avatar-circle.not-owned img {
  filter: grayscale(0.55) opacity(0.75);
}
.pet-v2-adopt-btn {
  margin-top: 3px !important;
  padding: 3px 5px !important;
  font-size: 8.5px !important;
  width: 90% !important;
  white-space: nowrap;
}

/* ============================================================================
   STEP 3.5: FLUFFÉ'S STARLIGHT HAIR STUDIO (20 Hairs + 20 Dyes + Royal/Celestial Gacha)
   ============================================================================ */
.s2-fluffe-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff5fa 0%, #ffe8f3 50%, #fff6db 100%);
  border: 2px solid #d48ba8;
  box-shadow: 0 2px 0 #8a4b68;
}
.s2-fluffe-mascot {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
  background: #fffdf9;
  border-radius: 12px;
  border: 2px solid #e0a72a;
  padding: 2px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18));
}
.s2-fluffe-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.s2-fluffe-title {
  font-size: 13px;
  font-weight: 900;
  color: #5c2240;
}
.s2-fluffe-sub {
  font-size: 10px;
  font-weight: 700;
  color: #7a425e;
}
.s2-fluffe-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.s2-body-toggle {
  display: inline-flex;
  background: #f5dce8;
  border: 1.5px solid #c982a0;
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
}
.s2-body-btn {
  border: 0;
  background: transparent;
  padding: 2px 8px;
  border-radius: 7px;
  font: 800 10px var(--font, inherit);
  color: #6b2d4a;
  cursor: pointer;
}
.s2-body-btn.active {
  background: linear-gradient(180deg, #ffe285, #e09b22);
  color: #3a2006;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.s2-coupon-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #3a2030;
  border: 1.5px solid #f0b44c;
  color: #ffe89e;
  border-radius: 999px;
  padding: 2px 8px 2px 4px;
  font-size: 11px;
  font-weight: 900;
}
.s2-coupon-pill img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.s2-hair-mirror-card {
  background: linear-gradient(180deg, #2c1e38 0%, #4a2d56 60%, #3a2416 100%);
  border: 2.5px solid #e0a72a;
  border-radius: 16px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  box-shadow: inset 0 0 18px rgba(255, 215, 130, 0.2), 0 3px 0 #5c3416;
}
.s2-hair-stage-fig {
  width: 100%;
  max-width: 230px;
  height: 168px !important;
  min-height: 168px !important;
}
.s2-hair-current-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
}
.s2-hair-current-pill {
  background: rgba(32, 18, 10, 0.85);
  border: 1.5px solid #e0a72a;
  color: #ffe8a3;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 10.5px;
  font-weight: 900;
}
.is-celestial-nameplate {
  background: linear-gradient(90deg, #3b1d5e 0%, #6b2fa0 50%, #2a4878 100%) !important;
  border: 1.5px solid #ffd86b !important;
  color: #fff6c8 !important;
  box-shadow: 0 0 10px rgba(255, 215, 106, 0.65);
}
.s2-hair-current-dye {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 248, 232, 0.92);
  border: 1.5px solid #c9932c;
  color: #3a2415;
  border-radius: 999px;
  padding: 2px 9px 2px 4px;
  font-size: 10px;
  font-weight: 800;
}
.s2-dye-circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px #5c3416;
  display: inline-block;
  flex-shrink: 0;
}

.s2-hair-quick-dye-bar {
  padding: 6px 8px;
}
.s2-hair-quick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 10.5px;
  color: #4b2a12;
  margin-bottom: 5px;
}
.s2-hair-quick-swatches {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 4px;
}
.s2-dye-mini-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #c99a5b;
  background: #fff8e8;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.s2-dye-mini-swatch .s2-dye-circle {
  width: 100%;
  height: 100%;
}
.s2-dye-mini-swatch.active {
  border-color: #f0a91c;
  box-shadow: 0 0 0 2px #ffd76a;
  transform: scale(1.1);
}

.s2-hair-section-note {
  font-size: 10px;
  color: #6b3f1f;
  margin-bottom: 6px;
  line-height: 1.3;
}

.s2-hair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: 250px;
  overflow-y: auto;
  padding: 2px;
}
.s2-hair-card {
  background: #fffdf9;
  border: 2px solid #d3b27a;
  border-radius: 12px;
  padding: 6px;
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
  cursor: pointer;
}
.s2-hair-card.tier-royal {
  border-color: #d47ba8;
  background: linear-gradient(180deg, #fffdf9, #fff2f8);
}
.s2-hair-card.tier-celestial {
  border-color: #e8a828;
  background: linear-gradient(135deg, #fffdf4 0%, #f5ecff 60%, #e8f8ff 100%);
  box-shadow: 0 0 8px rgba(232, 168, 40, 0.35);
}
.s2-hair-card.equipped {
  border-color: #e0a42a;
  box-shadow: 0 0 0 2px #ffd76a;
}
.s2-hair-thumb-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 40%, #fff8eb, #ead4b0);
  border: 1.5px solid #c9a46a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.s2-hair-thumb-wrap.tier-royal {
  background: radial-gradient(circle at 50% 40%, #fff5fa, #eab8d1);
  border-color: #c96b98;
}
.s2-hair-thumb-wrap.tier-celestial {
  background: radial-gradient(circle at 50% 40%, #fffbe0, #c8a8ff 65%, #7ad8ff 100%);
  border-color: #e0a72a;
}
.s2-hair-thumb {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}
.s2-hair-owned-dot, .s2-hair-lock-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 9px;
  font-weight: 900;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s2-hair-owned-dot {
  background: #3e9e3a;
  color: #fff;
  border: 1.5px solid #fff;
}
.s2-hair-lock-dot {
  background: #5c3416;
  color: #ffe08a;
  font-size: 8px;
}
.s2-hair-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.s2-hair-sub-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.s2-hair-tier-badge {
  font-size: 8.5px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 5px;
  white-space: nowrap;
}
.s2-hair-tier-badge.is-classic {
  background: #e8d5b5;
  color: #5c3416;
}
.s2-hair-tier-badge.is-royal {
  background: #ffd1e6;
  color: #7a1c48;
}
.s2-hair-tier-badge.is-celestial {
  background: linear-gradient(90deg, #ffe27a, #d4a5ff, #8ce8ff);
  color: #32154d;
}
.s2-hair-bundle-tag {
  font-size: 8.5px;
  font-weight: 800;
  color: #5a287a;
  background: #f0e0ff;
  border-radius: 4px;
  padding: 1px 4px;
}
.s2-hair-desc {
  font-size: 9px;
  color: #6b482e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s2-hair-actions {
  margin-top: 2px;
}

/* Royal & Celestial Hair Gacha Banner */
.s2-hair-gacha-banner {
  background: linear-gradient(180deg, #2d183e 0%, #4d265e 55%, #3a1f2d 100%);
  border: 2.5px solid #e8a828;
  border-radius: 16px;
  padding: 8px;
  color: #fff8eb;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-shadow: 0 3px 0 #5c3416;
}
.s2-hair-gacha-head {
  text-align: center;
}
.s2-hair-gacha-title {
  font-size: 12.5px;
  font-weight: 900;
  color: #ffe48a;
  letter-spacing: 0.4px;
}
.s2-hair-gacha-rates {
  font-size: 9.5px;
  color: #f3cfe2;
  font-weight: 700;
}
.s2-celestial-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.s2-celestial-spot {
  position: relative;
  background: radial-gradient(circle at 50% 30%, rgba(255, 244, 196, 0.25), rgba(35, 16, 56, 0.85));
  border: 1.5px solid #ffd86b;
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
}
.s2-celestial-spot img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 220, 120, 0.65));
}
.s2-celestial-tag {
  font-size: 8px;
  font-weight: 900;
  color: #ffd86b;
  letter-spacing: 0.3px;
}
.s2-celestial-name {
  font-size: 10.5px;
  font-weight: 900;
  color: #fff;
}
.s2-celestial-perk {
  font-size: 8.5px;
  color: #e6d4ff;
  line-height: 1.2;
}
.s2-celestial-rate-pill {
  font-size: 8.5px;
  font-weight: 800;
  background: rgba(255, 216, 107, 0.2);
  border: 1px solid #ffd86b;
  color: #ffe89e;
  border-radius: 999px;
  padding: 1px 6px;
  margin-top: 2px;
}
.s2-hair-pity-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.s2-pity-royal .rpg-pity-fill {
  background: linear-gradient(90deg, #e05294, #ff9ec8);
}
.s2-pity-celestial .rpg-pity-fill {
  background: linear-gradient(90deg, #9b5cff, #ffd86b, #6be8ff);
}
.s2-hair-pull-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.s2-hair-pull-actions .s2-pull-btn {
  margin: 0;
  padding: 6px 4px;
  font-size: 11px;
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
}
.s2-hair-pull-actions .s2-pull-btn small {
  font-size: 8.5px;
  margin-top: 2px;
}
.s2-hair-pull-actions .s2-pull-btn.ticket {
  background: linear-gradient(180deg, #ffb8dc, #d94b8c);
  color: #fff;
}
.s2-hair-pull-actions .s2-pull-btn.ten {
  background: linear-gradient(180deg, #ffe885, #e0961c);
}

.s2-hair-pull-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px;
}
.s2-hair-pull-item {
  background: #fffdf8;
  border: 2px solid #d3b27a;
  border-radius: 10px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}
.s2-hair-pull-item.tier-royal {
  border-color: #d95b98;
  background: #fff2f8;
}
.s2-hair-pull-item.tier-celestial {
  border-color: #e8a828;
  background: linear-gradient(135deg, #fffbe6, #f2e6ff);
}
.s2-hair-pull-item img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.s2-hair-pull-name {
  font-size: 9.5px;
  font-weight: 900;
  color: #3a2415;
}
.s2-hair-pull-badge {
  font-size: 8.5px;
  font-weight: 900;
  color: #2b7d2f;
}
.s2-hair-pull-bundle {
  font-size: 8px;
  font-weight: 800;
  color: #6b2fa0;
}

/* 20-Swatch Permanent Dye Closet */
.s2-dye-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.s2-dye-card {
  background: #fffdf9;
  border: 2px solid #d3b27a;
  border-radius: 12px;
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.s2-dye-card.equipped {
  border-color: #e0a42a;
  background: #fff6db;
}
.s2-dye-swatch-lg {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25), 0 0 0 1.5px #8a5a2b;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s2-dye-check, .s2-dye-lock {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 8.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s2-dye-check {
  background: #3e9e3a;
  color: #fff;
  border: 1.5px solid #fff;
}
.s2-dye-lock {
  background: #3a2415;
  color: #ffe08a;
  font-size: 8px;
}
.s2-dye-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.s2-dye-name {
  font-size: 10.5px;
  font-weight: 900;
  color: #3a2415;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s2-dye-sub {
  font-size: 9px;
  color: #7a4a1a;
  font-weight: 700;
}

/* Companion Trait -> Soul-Link Ultimate Green +X% Badges */
.pet-v2-trait-plus {
  display: inline-block;
  color: #117a37;
  background: #dcfce7;
  border: 1px solid #4ade80;
  border-radius: 999px;
  padding: 0 5px;
  margin-left: 2px;
  font-size: 9.5px;
  font-weight: 900;
  line-height: 1.35;
  vertical-align: baseline;
  box-shadow: 0 1px 0 rgba(17, 122, 55, 0.18);
}

.pet-v2-slot-sl-bonus {
  display: inline-block;
  color: #0f6e31;
  background: linear-gradient(180deg, #e6fced, #c6f6d5);
  border: 1px solid #38c172;
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 6px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.3;
  vertical-align: middle;
  white-space: nowrap;
}

/* ============================================================================
   MOCKUP FIDELITY OVERHAUL V2 (SCREENS 07, 08, 16, 20, 21, 22, 23)
   ============================================================================ */

/* 1. Persistent Bottom Dock Clearance & Clean 2-Row RPG Header */
.rpg-wrap {
  bottom: calc(var(--safe-bottom, 0px) + 56px);
}

.rpg-panel {
  padding: calc(var(--safe-top, 0px) + 5px) 7px 6px;
  border-bottom: 3px solid #8a5222;
  border-radius: 0 0 18px 18px;
}

.rpg-header-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
  flex-shrink: 0;
  position: relative;
}

.rpg-header-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  width: 100%;
  min-width: 0;
}

.rpg-player-mini {
  display: flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(180deg, #563218 0%, #361d0b 100%);
  border: 1.5px solid #e0a42a;
  border-radius: 999px;
  padding: 2px 8px 2px 3px;
  color: #fff6e3;
  flex-shrink: 0;
  max-width: 136px;
  box-shadow: inset 0 1px 0 rgba(255, 235, 180, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
}

.rpg-mini-avatar,
.rpg-player-ava {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #fffdf5, #e8c88b);
  border: 1.5px solid #ffd86b;
  flex-shrink: 0;
}

.rpg-mini-ava-body,
.rpg-ava-body {
  position: absolute;
  left: 50%;
  top: 1px;
  width: 155%;
  height: 155%;
  transform: translateX(-50%);
  object-fit: contain;
  pointer-events: none;
}

.rpg-mini-ava-hair,
.rpg-ava-hair {
  position: absolute;
  left: 50%;
  top: -5%;
  width: 92%;
  height: 96%;
  transform: translateX(-50%);
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}

.rpg-mini-meta,
.rpg-player-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.05;
}

.rpg-mini-name,
.rpg-player-txt b {
  font-size: 10px;
  font-weight: 900;
  color: #fff8e8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rpg-mini-sub,
.rpg-player-txt small {
  font-size: 8.5px;
  font-weight: 800;
  color: #ffd86b;
  white-space: nowrap;
}

.rpg-header-strip .rpg-currencies {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 999px;
}

.rpg-header-strip .rpg-curr-item {
  font-size: clamp(9.5px, 2.5vw, 11px);
  gap: 3px;
  white-space: nowrap;
}

.rpg-header-strip .rpg-curr-item img {
  width: 14px;
  height: 14px;
}

.rpg-header-strip .rpg-x-btn {
  position: static;
  transform: none;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  font-size: 13px;
}

.rpg-header-bar .rpg-top-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 0;
  width: 100%;
}

.rpg-header-bar .rpg-view-tab {
  flex-direction: row;
  gap: 4px;
  padding: 4px 4px;
  border-radius: 10px;
  font-size: clamp(10px, 2.6vw, 11.5px);
  white-space: nowrap;
}

.rpg-header-bar .rpg-view-tab .ico {
  font-size: 13px;
}

/* Folder-Style Sub-Tabs */
.rpg-sub-tabs.s2-folder-tabs {
  gap: 4px;
  padding: 0 2px;
  margin-bottom: -2px;
  z-index: 4;
}

.rpg-sub-tabs.s2-folder-tabs .rpg-sub-tab {
  border-radius: 11px 11px 4px 4px;
  padding: 5px 4px;
  border-width: 2px;
  font-size: clamp(10px, 2.7vw, 11.5px);
}

.rpg-sub-tabs.s2-folder-tabs .rpg-sub-tab.active {
  background: linear-gradient(180deg, #ffe896 0%, #f0a828 100%);
  color: #3a1d04;
  border-color: #fff6cf;
  transform: translateY(-1px);
}

/* Bone-Aligned 2-Layer Hair + Body Outfit Rig Thumbnails (No Bald Mannequins!) */
.s2-thumb-has-hair,
.s2-pd-thumb-wrap.is-outfit,
.s2-bubble-sphere.has-hair {
  position: relative;
}

.s2-outfit-rig-thumb {
  position: relative;
  width: 88%;
  height: 88%;
  aspect-ratio: 1 / 1;
  margin: auto;
  display: block;
  flex-shrink: 0;
  pointer-events: none;
  transform: translateY(3%);
}

.s2-outfit-rig-thumb.is-head-crop {
  position: absolute;
  left: 50%;
  top: 8%;
  width: 156%;
  height: 156%;
  margin: 0;
  transform: translateX(-50%);
}

.s2-outfit-rig-thumb > img.s2-outfit-rig-body {
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  top: auto !important;
  right: auto !important;
  height: 100% !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.s2-outfit-rig-thumb > img.s2-outfit-rig-hair-back,
.s2-outfit-rig-thumb > img.s2-outfit-rig-hair-front {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: fill !important;
  pointer-events: none !important;
}

.s2-outfit-rig-thumb > img.s2-outfit-rig-hair-back {
  z-index: 1 !important;
}

.s2-outfit-rig-thumb > img.s2-outfit-rig-hair-front {
  z-index: 3 !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.22));
}

/* Progressive Disclosure Modal Sheets (Closet / Pool / Forge) */
.s2-closet-drawer,
.s2-pool-drawer,
.s2-forge-drawer,
.pet-v2-extra-drawer {
  display: none;
}

.pet-v2-extra-drawer.is-open {
  display: block;
  animation: s2DrawerSlideDown 0.18s ease-out;
}

.s2-closet-drawer.is-open,
.s2-pool-drawer.is-open,
.s2-forge-drawer.is-open {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px 7px 8px;
  animation: s2DrawerFadeIn 0.16s ease-out;
}

.s2-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 11, 5, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.s2-closet-drawer > .rpg-card,
.s2-pool-drawer > .rpg-card,
.s2-forge-drawer > .rpg-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-height: 82%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5), 0 3px 0 #5c3416;
  border: 2.5px solid #e0a42a;
}

@keyframes s2DrawerFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes s2DrawerSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.s2-drawer-head,
.s2-drawer-head-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.s2-drawer-close-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid #8a5222;
  background: radial-gradient(circle at 35% 30%, #fff8e6, #ebd09a);
  color: #4b2a12;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 0 #5c3416;
}

/* 2. Screen 07 & 08: Wardrobe Parchment Card, Gold Ribbon & Square Paper-Doll Slots */
.s2-avatar-parchment-card {
  background: linear-gradient(180deg, #fffdf6 0%, #f7e6c4 100%);
  border: 2.5px solid #b88238;
  border-radius: 16px;
  padding: 7px 7px 8px;
  box-shadow: inset 0 0 0 1.5px #fff8e6, 0 4px 0 #6b3f1f, 0 5px 12px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.s2-avatar-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}

.s2-gold-ribbon-banner {
  position: relative;
  width: 100%;
  max-width: 310px;
  margin: 0 auto;
  padding: 5px 18px;
  text-align: center;
  font-weight: 900;
  font-size: clamp(11.5px, 3.1vw, 13px);
  color: #3a1d04;
  text-shadow: 0 1px 0 rgba(255, 250, 220, 0.9);
  background: linear-gradient(180deg, #fff2a8 0%, #ffd24c 45%, #d98814 100%);
  border-radius: 999px;
  border: 2px solid #7a4208;
  box-shadow: inset 0 1.5px 0 #fffbe0, inset 0 -1.5px 0 #a85e08, 0 2px 5px rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.s2-gold-ribbon-banner::before,
.s2-gold-ribbon-banner::after {
  content: "★";
  font-size: 10px;
  color: #7a4208;
  text-shadow: 0 1px 0 #fff5b8;
}

.s2-avatar-status-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
}

.s2-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.s2-status-pill.gold {
  background: linear-gradient(180deg, #6b3f1f, #482810);
  border: 1.5px solid #ffd86b;
  color: #ffe89e;
}

.s2-status-pill.pink {
  background: linear-gradient(180deg, #ff85b3, #d93870);
  border: 1.5px solid #ffd1e6;
  color: #fff;
}

.s2-status-pill.cp {
  background: linear-gradient(180deg, #fff6d6, #f0cf82);
  border: 1.5px solid #b87b18;
  color: #3a1d04;
}

/* 3-Column Hero Paper-Doll Stage (Screen 07) */
.s2-wardrobe-stage {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 76px;
  gap: 5px;
  align-items: center;
  padding: 7px 6px;
}

.s2-pd-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

/* Self-Contained Golden Square Equipment Slots (Screen 07) */
.s2-pd-slot.s2-pd-slot-v2 {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}

.s2-pd-slot-caption {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.05;
}

.s2-pd-slot-caption .rpg-slot-label {
  font-size: 8px;
  font-weight: 900;
  color: #7a461d;
  letter-spacing: 0.2px;
}

.s2-pd-slot-caption .rpg-slot-name {
  font-size: 9px;
  font-weight: 900;
  color: #3a2006;
  max-width: 74px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s2-pd-slot-v2 .s2-pd-slot-box {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 13px;
  background:
    url('/assets/ui/ui_slot_gold_frame.png') center / 100% 100% no-repeat,
    radial-gradient(circle at 50% 40%, #fffdf5 0%, #ebd2a0 100%);
  border: 2px solid #c9932c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18), 0 2px 5px rgba(0, 0, 0, 0.16);
  overflow: visible;
}

.s2-pd-slot-v2.selected .s2-pd-slot-box {
  border-color: #ff9800 !important;
  box-shadow: 0 0 0 2.5px #ffd76a, 0 3px 8px rgba(0, 0, 0, 0.24);
}

.s2-pd-slot-v2 .s2-pd-thumb-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.s2-pd-slot-v2 .s2-pd-thumb {
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.22));
}

.s2-pd-slot-v2 .rpg-slot-refine {
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: 5;
  font-size: 8.5px;
  padding: 0 4px;
  border-radius: 6px;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.s2-pd-slot-v2 .s2-pd-forge-mini {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 5;
  width: 19px;
  height: 19px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
}

.s2-pd-slot-v2 .s2-pd-slot-foot {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 2px;
  z-index: 4;
  width: auto;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  background: rgba(48, 28, 12, 0.8);
  border-radius: 6px;
  margin-top: 0;
}

.s2-pd-slot-v2 .s2-pd-slot-foot .rpg-stars {
  color: #ffd86b;
  font-size: 8.5px;
  letter-spacing: -0.5px;
  line-height: 1;
}

.s2-pd-slot-v2 .s2-pd-slot-foot .rpg-eye-btn {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 9.5px;
  line-height: 1;
  color: #fff;
}

/* 2x2 Stat Pills Grid (Screen 07) */
.s2-stat-panel {
  background: rgba(244, 224, 186, 0.65);
  border: 1.5px solid #c99b56;
  border-radius: 12px;
  padding: 5px;
}

.s2-stat-panel .s2-stat-cell {
  background: linear-gradient(180deg, #fffdf8 0%, #f6e6c5 100%);
  border: 1.5px solid #c9932c;
  border-radius: 10px;
  padding: 4px 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  box-shadow: 0 1px 0 #8a5a2b;
}

.s2-stat-ico {
  font-size: 13px;
  line-height: 1;
}

.s2-stat-panel .s2-stat-name {
  color: #5c3416;
  font-size: 10px;
  font-weight: 900;
  flex: 1;
}

.s2-stat-panel .s2-stat-val {
  color: #1e7e26;
  font-size: 11px;
  font-weight: 900;
}

.s2-stat-panel .s2-stat-cell {
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.s2-stat-panel .s2-stat-cell.is-active {
  background: linear-gradient(180deg, #fff8dc 0%, #ffe699 100%);
  border-color: #b86b11;
  box-shadow: 0 0 0 1.5px rgba(255, 196, 54, 0.55), 0 1px 0 #8a5a2b;
}

.s2-stat-bridge-box {
  margin-top: 5px;
  background: rgba(255, 251, 240, 0.92);
  border: 1px dashed #c6923a;
  border-radius: 9px;
  padding: 4px 7px;
  font-size: 9.5px;
  color: #4f2d12;
}

.s2-stat-bridge-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 3px;
  color: #6b3b14;
  font-size: 9.5px;
}

.s2-stat-bridge-hint {
  font-size: 8.5px;
  font-weight: 800;
  color: #9c6223;
  background: rgba(255, 224, 150, 0.55);
  padding: 1px 5px;
  border-radius: 6px;
}

.s2-stat-bridge-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.s2-stat-bridge-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  line-height: 1.25;
  font-size: 9px;
  color: #3d220d;
}

.s2-mode-tag {
  flex: 0 0 74px;
  font-weight: 900;
  color: #7a4212;
}

.s2-item-stat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 2px 0 3px;
}

.s2-item-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1.5px 5px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  background: #f8ebd0;
  border: 1px solid #d4a656;
  color: #5a3211;
}

.s2-item-stat-pill.stat-power {
  background: #ffe8df;
  border-color: #e07a5f;
  color: #8f2d14;
}

.s2-item-stat-pill.stat-swiftness {
  background: #e3f4ff;
  border-color: #5fa8d3;
  color: #164e78;
}

.s2-item-stat-pill.stat-fortune {
  background: #fff4d1;
  border-color: #dca726;
  color: #784f08;
}

.s2-item-stat-pill.stat-luck {
  background: #e4f8e5;
  border-color: #5ab866;
  color: #195e24;
}

.s2-item-stat-pill.stat-all {
  background: linear-gradient(90deg, #fff1c9 0%, #ffe0ec 50%, #e1f4ff 100%);
  border-color: #d4942a;
  color: #5e2f0d;
}

.s2-slot-role-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
  padding: 5px 8px;
  background: linear-gradient(180deg, #fff9ea 0%, #f5e5c1 100%);
  border: 1.5px solid #cfa04e;
  border-radius: 10px;
  font-size: 10px;
  color: #4d2c12;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.s2-slot-role-badge {
  background: #7d451b;
  color: #fff8e7;
  font-weight: 900;
  font-size: 9.5px;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
}

.s2-slot-role-text {
  flex: 1;
  min-width: 180px;
  font-weight: 700;
  line-height: 1.25;
}

/* 4 Glossy Candy Buttons Row (Screen 07) */
.s2-wardrobe-candy-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.s2-candy-btn {
  position: relative;
  border-radius: 11px;
  border: 2px solid #fff3c4;
  padding: 6px 3px;
  font: 900 clamp(9px, 2.4vw, 10.5px) var(--font, inherit);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
}

.s2-candy-btn:active {
  transform: translateY(1px);
}

.s2-candy-pink {
  background: linear-gradient(180deg, #ff85b3 0%, #d93870 100%) !important;
  border-color: #ffd1e3 !important;
  box-shadow: 0 3px 0 #8a1c42, 0 4px 8px rgba(0, 0, 0, 0.18) !important;
}

.s2-candy-gold {
  background: linear-gradient(180deg, #ffe27a 0%, #e08e18 100%) !important;
  color: #3a1d04 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  border-color: #fff6cc !important;
  box-shadow: 0 3px 0 #8f5108, 0 4px 8px rgba(0, 0, 0, 0.18) !important;
}

.s2-candy-blue {
  background: linear-gradient(180deg, #6ec3ff 0%, #246fd0 100%) !important;
  border-color: #c7e8ff !important;
  box-shadow: 0 3px 0 #144382, 0 4px 8px rgba(0, 0, 0, 0.18) !important;
  color: #fff !important;
}

.s2-candy-amber {
  background: linear-gradient(180deg, #ffb347 0%, #cc5814 100%) !important;
  border-color: #ffe0b2 !important;
  box-shadow: 0 3px 0 #7a2e06, 0 4px 8px rgba(0, 0, 0, 0.18) !important;
  color: #fff !important;
}

.s2-candy-green {
  background: linear-gradient(180deg, #76e05e 0%, #2d9428 100%) !important;
  border-color: #cbf7c0 !important;
  box-shadow: 0 3px 0 #195915, 0 4px 8px rgba(0, 0, 0, 0.18) !important;
  color: #fff !important;
}

/* Screen 08: VIP Showcase Row & Partner Owl Gift Extensions */
.s2-vip-showcase-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.s2-vip-card {
  border-radius: 11px;
  border: 2px solid #c9932c;
  padding: 5px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  gap: 3px;
  background: linear-gradient(180deg, #fffdf6, #f4dfb6);
  box-shadow: 0 2px 0 #7a4a1a;
  cursor: pointer;
}

.s2-vip-card img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22));
}

.s2-vip-card-title {
  font-size: 8.5px;
  font-weight: 900;
  color: #3a2208;
  line-height: 1.15;
}

.s2-vip-badge {
  font-size: 8.5px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 999px;
  background: #4b2a12;
  color: #ffe28a;
}

.s2-vip-badge.active {
  background: #2e8b2a;
  color: #fff;
}

.s2-owl-note-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.s2-owl-note-box {
  flex: 1;
  min-width: 140px;
  background: #fffdf8;
  border: 1.5px solid #c9a46a;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 10px;
  color: #4b2a12;
}

.s2-owl-ribbon-pills {
  display: flex;
  gap: 4px;
}

.s2-ribbon-pill {
  border: 1.5px solid #c9932c;
  background: #fff6e0;
  color: #4b2a12;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}

.s2-ribbon-pill.active {
  background: linear-gradient(180deg, #ff9ec4, #d9467e);
  color: #fff;
  border-color: #ffd1e6;
}

.s2-owl-dispatch-btn {
  width: 100%;
  margin-top: 6px !important;
  padding: 7px 10px !important;
  font-size: 11.5px !important;
}

/* 3. Screen 21: Box 1 Goddess Vakarine Stage & Iridescent Soap Bubbles */
.s2-stage-box1 {
  background:
    url('/assets/ui/stage_goddess_vakarine_rainbow.png') center 34px / auto 84% no-repeat,
    radial-gradient(circle at 50% 35%, #fff8eb 0%, #bfe2ff 48%, #705aa8 88%, #3c2966 100%);
  padding: 6px 7px 6px;
}

.s2-stage-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 4px;
  z-index: 6;
  position: relative;
}

.s2-stage-top-bar .s2-banner-pills-bar {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
  gap: 3px;
}

.s2-stage-top-bar .s2-banner-pill {
  padding: 4px 5px;
  font-size: clamp(8.5px, 2.3vw, 10px);
}

.s2-stage-pool-btn {
  flex-shrink: 0;
  background: linear-gradient(180deg, #ffe588 0%, #d98e16 100%);
  border: 1.5px solid #fff6cc;
  color: #3a1d04;
  border-radius: 999px;
  padding: 4px 8px;
  font: 900 9.5px var(--font, inherit);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

.s2-box1-magic-circle {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 174px;
  height: 76px;
  object-fit: contain;
  opacity: 0.88;
  pointer-events: none;
  z-index: 1;
}

.s2-dressed-couple-stage {
  position: relative;
  width: 100%;
  height: 158px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: 0;
}

.s2-dressed-chibi-wrap {
  position: relative;
  width: 82px;
  height: 136px;
  flex-shrink: 0;
  z-index: 3;
}

.s2-dressed-chibi-wrap.left { margin-right: -12px; }
.s2-dressed-chibi-wrap.right { margin-left: -12px; }

.s2-dressed-chibi-wrap .s2-pd-rig-box {
  bottom: 8px;
  transform: translateX(-50%) scale(0.78);
  transform-origin: 50% 100%;
}

.s2-couple-pet {
  width: 44px;
  height: 44px;
  object-fit: contain;
  z-index: 4;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.38));
}

.s2-couple-pet.left { margin-right: -10px; }
.s2-couple-pet.right { margin-left: -10px; }

/* Iridescent Soap Bubbles (Screen 21) */
.s2-bubble.s2-iridescent-bubble {
  width: 74px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  gap: 2px;
}

.s2-bubble-sphere {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background:
    url('/assets/ui/ui_bubble_iridescent.png') center / 100% 100% no-repeat,
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85), rgba(180, 225, 255, 0.35) 60%, rgba(235, 175, 255, 0.55) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
}

.s2-bubble.s2-iridescent-bubble .s2-bubble-item-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
}

.s2-bubble-caption {
  background: rgba(34, 20, 12, 0.9);
  border: 1px solid #ffd76a;
  color: #fff8e6 !important;
  font-size: 8px !important;
  font-weight: 900;
  line-height: 1.1;
  padding: 2px 5px;
  border-radius: 6px;
  max-width: 78px;
  white-space: normal !important;
  text-align: center;
}

/* Compact Translucent Stage Footer Pill (Replaces bulky yellow box on stage) */
.rpg-featured-banner.s2-stage-footer-pill {
  background: rgba(34, 20, 10, 0.86);
  border: 1.5px solid #ffd86b;
  border-radius: 999px;
  padding: 4px 10px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.rpg-featured-banner.s2-stage-footer-pill .rpg-featured-title {
  color: #ffd86b;
  font-size: 9.5px;
}

.rpg-featured-banner.s2-stage-footer-pill .rpg-featured-name {
  color: #fff8e8;
  font-size: 10.5px;
}

.s2-stage-ult-chip {
  background: linear-gradient(90deg, #6b21a8, #a21caf);
  border: 1px solid #f5d0fe;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.s2-wish-selector-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 5px 8px;
  background: rgba(255, 244, 214, 0.9);
  border: 1.5px solid #d4a84f;
  border-radius: 10px;
}

.s2-wish-selector-bar span {
  font-size: 10.5px;
  font-weight: 900;
  color: #6e471b;
  white-space: nowrap;
}

.s2-box1-pity-callout-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.s2-box1-pity-card {
  flex: 1.45;
  min-width: 0;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.s2-box1-pity-card .rpg-pity-wrap {
  margin-bottom: 0;
}

.rpg-pity-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 96%;
  font-size: clamp(9px, 2.4vw, 10.5px);
}

.s2-pity-rainbow .rpg-pity-fill {
  background: linear-gradient(90deg, #ff7eb3 0%, #ffd86b 50%, #6be8ff 100%);
}

.s2-dupe-speech-callout {
  flex: 0.85;
  min-width: 0;
  background: linear-gradient(180deg, #4b2c18 0%, #321b0d 100%);
  border: 2px solid #e0a42a;
  border-radius: 12px;
  padding: 5px 7px;
  color: #fff6e3;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 2px 0 #1f1007;
}

.s2-dupe-speech-callout b {
  color: #ffe285;
}

/* Keep Candy Summon Buttons Vibrant Even When Disabled */
.s2-candy-summon-1:disabled,
.s2-candy-summon-10:disabled,
.s2-candy-amber:disabled {
  opacity: 0.82 !important;
  filter: saturate(0.85) !important;
}

.s2-candy-summon-1:disabled {
  background: linear-gradient(180deg, #74b9ff, #2f74d0) !important;
  color: #fff !important;
}

.s2-candy-summon-10:disabled {
  background: linear-gradient(180deg, #ffe57f 0%, #f5a623 100%) !important;
  color: #3a1f04 !important;
}

/* 4. Screen 22: Box 2 Royal Architect Polaroid Cards & Rolled Parchment Scroll */
.s2-bubble.s2-polaroid-card {
  width: 74px;
  background: #fffdf5;
  border: 2px solid #d4a359;
  border-radius: 8px;
  padding: 4px 4px 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.32);
}

.s2-bubble.s2-polaroid-card.tilt-left { transform: rotate(-3.5deg); }
.s2-bubble.s2-polaroid-card.tilt-right { transform: rotate(3.5deg); }

.s2-bubble.s2-polaroid-card span {
  white-space: normal;
  line-height: 1.1;
  font-size: 8px;
  text-align: center;
}

.s2-wonder-yield-tag {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #5c3000, #9a5a10, #5c3000);
  border: 1.5px solid #ffd86b;
  color: #fff6cc;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

.s2-architect-scroll {
  display: flex;
  align-items: stretch;
  padding: 0;
  background: linear-gradient(180deg, #fff8e6 0%, #f2dcb1 100%);
  border: 2px solid #a86e28;
  overflow: hidden;
}

.s2-scroll-roller {
  width: 10px;
  flex-shrink: 0;
  background: linear-gradient(90deg, #5c3214 0%, #9c5d27 50%, #4b260d 100%);
  border-right: 1.5px solid #ffd76a;
}

.s2-scroll-roller.right {
  border-right: none;
  border-left: 1.5px solid #ffd76a;
}

.s2-scroll-body {
  flex: 1;
  min-width: 0;
  padding: 7px 8px;
}

.s2-architect-pity-head {
  font-size: 10.5px;
  font-weight: 800;
  color: #4b2a12;
  text-align: center;
  margin-bottom: 4px;
}

.s2-bp-upgrade-pill {
  display: inline-block;
  margin-top: 2px;
  background: linear-gradient(180deg, #56c94e, #2b8a28);
  color: #fff;
  font-style: normal;
  font-size: 7.5px;
  font-weight: 900;
  padding: 0 5px;
  border-radius: 999px;
}

/* 5. Screen 23: Starlight Shard Exchange Shop */
.s2-shard-ribbon {
  background: linear-gradient(90deg, #7a1c14 0%, #b82c20 50%, #7a1c14 100%);
  border: 1.5px solid #ffd76a;
  box-shadow: inset 0 1px 0 rgba(255, 230, 160, 0.45), 0 2px 4px rgba(0, 0, 0, 0.2);
  padding: 5px 10px;
}

.s2-shard-showcase {
  width: clamp(112px, 31vw, 138px);
  height: clamp(96px, 26vw, 114px);
}

.s2-shard-dressed-chibi {
  position: absolute;
  left: 4%;
  bottom: 4%;
  width: 72px;
  height: 100px;
  z-index: 3;
}

.s2-shard-dressed-chibi .s2-pd-rig-box {
  bottom: 0;
  transform: translateX(-50%) scale(0.62);
  transform-origin: 50% 100%;
}

.s2-shard-featured-callout {
  margin-top: 5px;
  background: linear-gradient(180deg, #fffdf4, #fce8b8);
  border: 1.5px solid #d49424;
  border-radius: 9px;
  padding: 4px 7px;
}

.s2-shard-feat-tag {
  font-size: 8.5px;
  font-weight: 900;
  color: #8c261d;
}

.s2-shard-feat-name {
  font-size: 10.5px;
  font-weight: 900;
  color: #3a2006;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s2-shard-feat-sub {
  font-size: 8.5px;
  font-weight: 800;
  color: #6b3f1f;
}

/* 6. Screen 20: Blacksmith Star-Force Forge Stage & Console */
.s2-forge-stage {
  background:
    linear-gradient(180deg, rgba(28, 16, 8, 0.2) 0%, rgba(38, 18, 8, 0.48) 100%),
    url('/assets/ui/stage_waterwheel_forge.png') left 8px bottom / auto 92% no-repeat,
    radial-gradient(circle at 50% 60%, #ffdf9e 0%, #73391d 68%, #2e170c 100%);
  position: relative;
  overflow: hidden;
}

.s2-anvil-chibi-cheer {
  position: absolute;
  right: 4px;
  bottom: 0;
  width: 96px;
  height: 124px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  z-index: 4;
}

.s2-anvil-dressed-chibi {
  position: relative;
  width: 74px;
  height: 112px;
}

.s2-anvil-dressed-chibi .s2-pd-rig-box {
  bottom: 4px;
  transform: translateX(-50%) scale(0.68);
  transform-origin: 50% 100%;
}

.s2-anvil-cheer-pet {
  width: 38px;
  height: 38px;
  object-fit: contain;
  margin-left: -12px;
  margin-bottom: 4px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}

.s2-forge-level-header {
  background: linear-gradient(90deg, #3a2010, #5c3416, #3a2010);
  border: 1.5px solid #ffd76a;
  color: #ffe89e;
  border-radius: 9px;
  padding: 4px 10px;
  text-align: center;
  font-weight: 900;
  font-size: 12px;
}

.s2-forge-equipped-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 248, 230, 0.9);
  border: 2px solid #b88748;
  border-radius: 12px;
  padding: 5px 6px;
}

.s2-forge-quick-slots {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3px;
  overflow: visible;
}

.s2-forge-quick-slot {
  position: relative;
  width: 100%;
  max-width: 40px;
  aspect-ratio: 1;
  height: auto;
  flex-shrink: 0;
  border-radius: 9px;
  border: 2px solid #c9932c;
  background:
    url('/assets/ui/ui_slot_gold_frame.png') center / 100% 100% no-repeat,
    radial-gradient(circle, #fffdf5, #ebd2a0);
  padding: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s2-forge-quick-slot.active {
  border-color: #ff9800 !important;
  box-shadow: 0 0 0 2px #ffd76a;
}

.s2-forge-quick-slot img {
  width: 86%;
  height: 86%;
  object-fit: contain;
}

.s2-thumb-refine,
.s2-thumb-badge,
.s2-pool-owned-badge,
.s2-anvil-plus {
  z-index: 6;
}

.s2-forge-all-btn {
  flex-shrink: 0;
  background: linear-gradient(180deg, #ffe285, #d98e16);
  border: 1.5px solid #9a5a10;
  color: #3a1d04;
  border-radius: 9px;
  padding: 6px 7px;
  font: 900 9px var(--font, inherit);
  cursor: pointer;
  white-space: nowrap;
}

.s2-forge-bottom-bar {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.s2-forge-title-ribbon {
  flex: 0.55;
  background: linear-gradient(180deg, #8c261d, #5e150e);
  border: 1.5px solid #ffd76a;
  border-radius: 11px;
  padding: 5px 7px;
  color: #fff6e3;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

.s2-forge-title-ribbon b {
  color: #ffe285;
  margin: 0 2px;
}

.s2-forge-cta-btn {
  flex: 1.45;
  margin-top: 0 !important;
  background: linear-gradient(90deg, #38b6ff 0%, #ffe27a 55%, #f59e0b 100%) !important;
  color: #2e1503 !important;
  font-size: clamp(11px, 3vw, 12.5px) !important;
}

/* Closet Drawer Header & Card Alignment + Hair Studio 4-Column Sub-Tab Bar */
.rpg-inventory-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: nowrap;
}

.rpg-inventory-head .rpg-card-title {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s2-closet-card {
  align-items: flex-start;
}

.s2-closet-meta {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.s2-closet-actions {
  margin-top: auto;
  padding-top: 3px;
}

.s2-slot-pills-bar.s2-hair-mode-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  overflow: visible;
  padding-bottom: 2px;
}

.s2-slot-pills-bar.s2-hair-mode-tabs .s2-slot-pill {
  padding: 5px 2px;
  font-size: clamp(8.5px, 2.3vw, 9.8px);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s2-fluffe-header {
  padding: 6px 8px;
  gap: 8px;
}

.s2-fluffe-mascot {
  width: 48px;
  height: 48px;
}

.s2-hair-mirror-card {
  padding: 4px 6px;
  gap: 3px;
}

.s2-hair-stage-fig {
  height: 144px !important;
  min-height: 144px !important;
}

/* 7. Screen 16: Cozy Pet Nest & Sanctuary Stage & Parchment Card */
.s2-pet-sanctuary-stage {
  background:
    url('/assets/ui/stage_sakura_sky_nest.png') center 16px / 96% auto no-repeat,
    radial-gradient(circle at 50% 45%, #fff9eb 0%, #cdeeff 58%, #8bc9f0 100%);
  position: relative;
  padding: 6px 8px 7px;
  border: 2.5px solid #a46a32;
  border-radius: 16px;
  box-shadow: 0 3px 0 #6b3f1f;
  overflow: hidden;
}

.s2-pet-stage-ribbon {
  width: fit-content;
  max-width: 92%;
  margin: 0 auto 2px;
  padding: 3px 16px;
  background: linear-gradient(180deg, #fff2a8 0%, #ffd24c 45%, #d98814 100%);
  border: 1.5px solid #7a4208;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  color: #3a1d04;
  text-align: center;
  box-shadow: inset 0 1px 0 #fffbe0, 0 2px 5px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 4;
}

.s2-nest-diorama {
  display: grid;
  grid-template-columns: 1fr 1.05fr 1fr;
  align-items: end;
  min-height: 136px;
  padding: 4px 2px 2px;
  gap: 4px;
  position: relative;
  z-index: 2;
}

.s2-nest-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  z-index: 3;
}

.s2-nest-diorama .pet-v2-stage-pet {
  width: 68px;
  height: 68px;
  transform: scale(1.18);
}

.s2-pet-owner-bubble {
  position: relative;
  z-index: 6;
  background: rgba(255, 252, 244, 0.96);
  border: 1.5px solid #8a5222;
  color: #3a200c;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
  margin-bottom: 4px;
}

.s2-pet-owner-bubble.is-partner {
  background: linear-gradient(180deg, #fff0f6, #ffd6e7);
  border-color: #c94b7c;
  color: #6b1839;
}

.s2-nest-pet-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(46, 26, 12, 0.9);
  border: 1.5px solid #ffd86b;
  border-radius: 9px;
  padding: 2px 8px;
  line-height: 1.1;
  margin-top: -4px;
  z-index: 4;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.s2-nest-pet-tag b {
  color: #fff8e8;
  font-size: 9.5px;
  font-weight: 900;
  white-space: nowrap;
}

.s2-nest-pet-tag span {
  color: #ffd86b;
  font-size: 8px;
  font-weight: 900;
  white-space: nowrap;
}

.s2-nest-center {
  position: relative;
  height: 132px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.s2-nest-egg-glow {
  position: absolute;
  bottom: 36px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 135, 0.9) 0%, rgba(255, 180, 70, 0) 70%);
  pointer-events: none;
  z-index: 1;
}

.s2-nest-egg {
  position: absolute;
  bottom: 42px;
  width: 54px;
  height: 66px;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 0 10px rgba(255, 230, 140, 0.95));
}

.s2-nest-heart {
  position: absolute;
  bottom: 10px;
  top: auto;
  width: 24px;
  height: 24px;
  object-fit: contain;
  z-index: 3;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
}

.pet-v2-stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: 5px;
  position: relative;
  z-index: 4;
  flex-wrap: nowrap;
}

.pet-v2-stage-bar .pet-v2-vtier-bar {
  margin-top: 0;
  padding: 2px 4px;
  gap: 3px;
  flex-shrink: 0;
}

.pet-v2-mini-pill {
  border: 1.5px solid #a86e28;
  background: linear-gradient(180deg, #fff8e6, #ebd09a);
  color: #4b2a12;
  border-radius: 999px;
  padding: 3px 7px;
  font: 900 9px var(--font, inherit);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1.5px 0 #5c3416;
}

.pet-v2-mini-pill:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.pet-v2-mini-pill.green {
  background: linear-gradient(180deg, #7ee268, #369b31);
  border-color: #c9f7be;
  color: #fff;
}

.pet-v2-mini-pill.gold {
  background: linear-gradient(180deg, #ffe588, #d98e16);
  border-color: #fff6cc;
  color: #3a1d04;
}

.pet-v2-mini-pill.equipped {
  background: #dcfce7;
  border-color: #2e8b2a;
  color: #166534;
}

.pet-v2-mini-pill.drawer-btn.active {
  background: linear-gradient(180deg, #5c3416, #3a200c);
  color: #ffe285;
  border-color: #ffd86b;
}

.pet-v2-main-card {
  gap: 5px;
  padding: 7px 9px;
}

.pet-v2-card-title-row {
  text-align: center;
  font-size: 11.5px;
  color: #3a200c;
  border-bottom: 1.5px solid #e5cfa8;
  padding-bottom: 3px;
}

.pet-v2-lv-bracket {
  color: #8c261d;
  font-weight: 900;
}

.pet-v2-slim-bars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.pet-v2-slim-bar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 9px;
  font-weight: 900;
  color: #5c3416;
}

.s2-trait-medal {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.s2-trait-medal.tier-mythic { background: radial-gradient(circle, #fff3a8, #e09614); }
.s2-trait-medal.tier-epic { background: radial-gradient(circle, #f0d6ff, #8b3dd9); }
.s2-trait-medal.tier-rare { background: radial-gradient(circle, #d6eeff, #2f74d0); }
.s2-trait-medal.locked { background: #d6c7b2; }

.rpg-trait-slot {
  padding: 4px 7px;
  gap: 5px;
}

.rpg-trait-slot .pet-v2-slot-body {
  margin: 0 4px;
}

.rpg-trait-slot .pet-v2-slot-body .s2-trait-name {
  margin: 0;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.15;
  font-size: 9.5px;
}

.pet-v2-care-actions-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 2px;
}

.pet-v2-care-actions-row .pet-v2-candy-btn {
  margin-top: 0 !important;
  padding: 5px 7px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-align: left;
  line-height: 1.15;
}

.s2-candy-ico {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}

.s2-candy-emoji {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.s2-candy-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.s2-candy-label span {
  font-size: 10px;
  font-weight: 900;
}

.s2-candy-label small {
  font-size: 8px;
  opacity: 0.95;
}

.s2-pet-bottom-dock-area {
  background: linear-gradient(180deg, #563218 0%, #381e0c 100%);
  border: 2.5px solid #c9932c;
  border-radius: 16px;
  padding: 6px 7px 7px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 3px 0 #241105;
}

.s2-pet-carousel-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.s2-pet-carousel-row .pet-v2-4bar {
  flex: 1;
  min-width: 0;
  overflow: visible;
}

.s2-pet-carousel-row .rpg-pet-bubble {
  width: 100%;
  min-width: 0;
  background: rgba(255, 250, 238, 0.95);
  padding: 4px 2px;
}

.s2-carousel-arrow {
  width: 18px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 235, 180, 0.18);
  border: 1px solid #c9932c;
  color: #ffd86b;
  font-weight: 900;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
}

.s2-pet-avatar-circle {
  position: relative;
  border: 2px solid #c9932c;
}

.s2-pet-eq-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2e8b2a;
  border: 1.5px solid #fff;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s2-pet-rainbow-cta {
  width: 100%;
  margin-top: 0 !important;
  padding: 6px 10px !important;
  background: linear-gradient(90deg, #ff7eb3 0%, #ffe27a 50%, #7be0ff 100%) !important;
  color: #3a1a08 !important;
  border: 2px solid #fff8dc !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  box-shadow: 0 3px 0 #9a4a24, 0 4px 10px rgba(0, 0, 0, 0.22) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.s2-cta-egg-ico {
  width: 28px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.s2-cta-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.15;
}

.s2-cta-text span {
  font-size: 10.5px;
  font-weight: 900;
}

.s2-cta-text small {
  font-size: 8px;
  font-weight: 800;
  opacity: 0.92;
}

/* Single-Companion Sakura Sky-Island Sanctuary Stage (Pet System V2.5 — No Eggs) */
.s2-single-nest-diorama {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 138px;
  padding: 6px 4px 2px;
  position: relative;
  z-index: 2;
}

.s2-single-nest-focus {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 108px;
}

.s2-single-nest-magic {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%) scaleY(0.5);
  width: 118px;
  height: 118px;
  object-fit: contain;
  opacity: 0.72;
  pointer-events: none;
  z-index: 1;
}

.s2-nest-pet-hero {
  position: relative;
  z-index: 3;
  width: 96px !important;
  height: 96px !important;
  object-fit: contain;
  transform: scale(var(--pet-ui-scale, 1));
  transform-origin: 50% 88%;
}

.s2-pet-carousel-head {
  font-size: 10px;
  font-weight: 800;
  color: #ffe8a3;
  text-align: center;
  padding-bottom: 2px;
}

/* ============================================================================
   IPHONE 18 PRO (402x874) LIVE UX POLISH — NAVIGATION, WARDROBE, FORGE & PETS
   ============================================================================ */

/* Fix 1: Consolidate Top Navigation into 1 Primary Folder-Tab Bar */
.rpg-header-bar .rpg-top-bar,
.rpg-top-tabs {
  display: none !important;
}

.rpg-header-bar {
  justify-content: flex-end;
}

.rpg-header-bar .rpg-currencies {
  flex: 1 1 auto;
  justify-content: flex-start;
}

/* Fix 2: Wardrobe Fashion — Centered Title Ribbon, Clean Slot Labels & Gold Icon */
.s2-avatar-card-header .s2-gold-ribbon-banner,
.s2-title-ribbon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-align: center !important;
}

.s2-avatar-card-header .s2-gold-ribbon-banner .s2-ribbon-crown,
.s2-title-ribbon .s2-ribbon-crown {
  margin: 0 !important;
  flex-shrink: 0;
}

.s2-pd-slot-caption .rpg-slot-name {
  display: none !important;
}

.s2-pd-slot-caption .rpg-slot-label {
  display: block;
  text-align: center;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.s2-inline-ico {
  width: 14px;
  height: 14px;
  object-fit: contain;
  vertical-align: -2px;
  display: inline-block;
  flex-shrink: 0;
}

/* Fix 3: Blacksmith Forge — Single-Line Artisan Scroll Toggle & Unclipped Controls */
.s2-forge-mid-row {
  min-width: 0;
  max-width: 100%;
}

.s2-forge-controls-col {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.s2-forge-controls-col .rpg-safe-badge,
.s2-forge-controls-col .rpg-berries-check,
.s2-forge-controls-col .rpg-scroll-check {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 5px 8px !important;
  gap: 5px !important;
}

.rpg-scroll-check span,
.rpg-berries-check span,
.rpg-safe-badge span {
  font-size: 9.8px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fix 4: Pet Sanctuary — Contained Sky-Island Stage, Wrapped Controls & Pose Drawer */
.s2-pet-sanctuary-stage.pet-v2-hero-stage {
  background:
    url('/assets/ui/stage_sakura_sky_nest.png') center 6px / 230px 124px no-repeat,
    linear-gradient(180deg, #cdeeff 0%, #e9f7ff 52%, #f8ebd2 100%) !important;
  padding: 5px 7px 6px !important;
}

.s2-pet-sanctuary-stage .s2-single-nest-diorama {
  min-height: 98px;
  padding: 2px 4px 2px;
}

.s2-pet-sanctuary-stage .s2-single-nest-focus {
  width: 90px;
  height: 82px;
}

.s2-pet-sanctuary-stage .s2-single-nest-magic {
  width: 96px;
  height: 96px;
}

.s2-pet-sanctuary-stage .s2-nest-pet-hero {
  width: 78px !important;
  height: 78px !important;
}

.pet-v2-stage-bar.s2-pet-stage-controls,
.pet-v2-stage-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 3px 6px !important;
  margin-top: 3px !important;
  background: rgba(255, 251, 240, 0.92);
  border: 1px solid rgba(181, 133, 72, 0.45);
  border-radius: 10px;
  box-sizing: border-box;
  max-width: 100%;
}

.pet-v2-stage-bar .pet-v2-mini-pill {
  padding: 3px 6px !important;
  font-size: 8.8px !important;
  flex-shrink: 0;
}

.s2-pet-pose-drawer {
  margin-top: 4px;
  background: rgba(255, 250, 238, 0.94);
  border: 1.5px solid #c99b56;
  border-radius: 10px;
  padding: 3px 7px;
  position: relative;
  z-index: 4;
}

.s2-pet-pose-summary {
  list-style: none;
  cursor: pointer;
  font-size: 9.5px;
  font-weight: 900;
  color: #522e12;
  text-align: center;
  padding: 2px 4px;
  user-select: none;
}

.s2-pet-pose-summary::-webkit-details-marker {
  display: none;
}

.s2-pet-pose-drawer[open] .s2-pet-pose-summary {
  border-bottom: 1px dashed #d8b884;
  padding-bottom: 4px;
  margin-bottom: 4px;
}

.s2-pet-pose-drawer-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Compact Pet Cards so Stage + Companion Level/Traits + 4-Pet Switcher fit on 402x874 */
.pet-v2-main-card {
  padding: 5px 8px !important;
  gap: 3px !important;
}

.pet-v2-costume-card {
  padding: 5px 8px !important;
}

.pet-v2-costume-lock-banner {
  margin-top: 3px !important;
  padding: 3px 6px !important;
  font-size: 8.5px !important;
}

.pet-v2-traits-card {
  padding: 5px 8px !important;
}

.s2-pet-bottom-dock-area {
  padding: 5px 6px 6px !important;
  gap: 4px !important;
}

.s2-pet-bottom-dock-area .s2-pet-avatar-circle {
  width: 34px;
  height: 34px;
}

/* ============================================================================
   WARDROBE & CLOSET V2 — TAP-TO-INSPECT SPOTLIGHT + 3-COLUMN UNIFORM TILE GRID
   ============================================================================ */

/* Collapsible 1-Line Ultimate Skill Pill on Main Wardrobe Card */
.rpg-costume-skill-banner.s2-ult-skill-box {
  cursor: pointer;
  user-select: none;
  padding: 6px 10px;
  border-radius: 11px;
  background: linear-gradient(180deg, #faf2ff 0%, #f1e0ff 100%);
  border: 1.5px solid #c08cf0;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.rpg-costume-skill-banner.s2-ult-skill-box:active {
  transform: translateY(1px);
}

.rpg-costume-skill-banner.s2-ult-skill-box .rpg-costume-skill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 0;
  font-size: 10.5px;
  color: #4a1c6d;
}

.rpg-costume-skill-banner.s2-ult-skill-box.is-expanded .rpg-costume-skill-head {
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px dashed rgba(156, 98, 212, 0.45);
}

.s2-ult-head-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.s2-ult-head-title b {
  font-weight: 900;
  color: #3b125c;
}

.s2-ult-head-right {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.s2-ult-expand-chip {
  font-size: 9px;
  font-weight: 900;
  color: #5e238c;
  background: rgba(192, 140, 240, 0.28);
  border: 1px solid rgba(154, 92, 214, 0.45);
  padding: 1px 6px;
  border-radius: 999px;
}

/* Closet Drawer Layout & Tap Hint */
.s2-closet-drawer > .rpg-card {
  max-height: 86%;
  padding: 9px 9px 10px;
  gap: 6px;
  overflow: hidden;
}

.s2-closet-tap-hint {
  font-size: 9.5px;
  font-weight: 800;
  color: #7a4b1e;
  background: #f5e3be;
  border: 1px solid #d4a656;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Selected Item Spotlight Inspector Card (.s2-closet-inspector) */
.s2-closet-inspector {
  background: linear-gradient(180deg, #fffdf7 0%, #f6e6c4 100%);
  border: 2px solid #d49a2a;
  border-radius: 13px;
  padding: 7px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(58, 36, 21, 0.14);
  flex-shrink: 0;
}

.s2-closet-inspector.s2-rarity-3 {
  border-color: #e09b1b;
  background: linear-gradient(180deg, #fffdf4 0%, #f9e6b3 100%);
}

.s2-closet-inspector.s2-rarity-super_mythic {
  border-color: #a855f7;
  background: linear-gradient(135deg, #fff9eb 0%, #f5e6ff 55%, #e3f6ff 100%);
}

.s2-insp-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.s2-insp-thumb {
  flex-shrink: 0;
}

.s2-insp-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.s2-insp-title-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.s2-insp-name {
  font-size: 12px;
  font-weight: 900;
  color: #3a2008;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s2-insp-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 10px;
}

.s2-insp-cp {
  font-weight: 900;
  color: #1f7a24;
  background: #e3f7e2;
  border: 1px solid #86d183;
  padding: 0.5px 6px;
  border-radius: 999px;
  font-size: 9.5px;
}

.s2-insp-delta {
  font-size: 9px;
  font-weight: 900;
}

.s2-insp-delta.pos {
  color: #15803d;
}

.s2-insp-delta.neg {
  color: #b45309;
}

.s2-insp-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  flex-shrink: 0;
  min-width: 78px;
}

.s2-insp-btn {
  position: relative;
  border-radius: 8px;
  padding: 5px 8px;
  font: 900 10px var(--font, inherit);
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: transform 0.1s ease;
}

.s2-insp-btn:active {
  transform: translateY(1px);
}

.s2-insp-btn.equip {
  background: linear-gradient(180deg, #6ee755 0%, #268e22 100%);
  border: 1.5px solid #c8f9be;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  box-shadow: 0 2px 0 #165614;
}

.s2-insp-btn.unequip {
  background: linear-gradient(180deg, #f5e4c3 0%, #dfc08a 100%);
  border: 1.5px solid #a87938;
  color: #4b2a12;
  box-shadow: 0 1.5px 0 #7a5220;
}

.s2-insp-btn.forge {
  background: linear-gradient(180deg, #ffe285 0%, #d98e16 100%);
  border: 1.5px solid #fff3c4;
  color: #3a1d04;
  box-shadow: 0 2px 0 #8a5210;
}

.s2-insp-equipped-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 7px;
  border-radius: 8px;
  background: #dcfce7;
  border: 1.5px solid #2e8b2a;
  color: #166534;
  font-size: 9.5px;
  font-weight: 900;
  white-space: nowrap;
}

/* Full-width Skill / Role Strip inside Spotlight Inspector */
.s2-insp-skill-strip {
  background: linear-gradient(180deg, #faf3ff 0%, #f1e2ff 100%);
  border: 1px solid #c695f0;
  border-radius: 9px;
  padding: 4px 7px;
  color: #3e165c;
  font-size: 9.5px;
  line-height: 1.28;
}

.s2-insp-skill-strip.is-gear-role {
  background: rgba(255, 249, 234, 0.85);
  border-color: #d4a656;
  color: #522e12;
}

.s2-insp-skill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
  font-size: 10px;
}

.s2-insp-turf-pill {
  background: #ede9fe;
  border: 1px solid #a78bfa;
  color: #4c1d95;
  font-size: 8.5px;
  font-weight: 900;
  padding: 0.5px 5px;
  border-radius: 999px;
  white-space: nowrap;
}

.s2-insp-skill-desc {
  color: #4a2366;
  font-weight: 700;
}

/* 3-Column Uniform Closet Tile Grid (.s2-closet-grid-v2) */
.rpg-items-grid.s2-closet-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  max-height: 295px;
  overflow-y: auto;
  padding: 2px;
  flex: 1;
}

.s2-closet-tile {
  position: relative;
  min-width: 0;
  background: #fffdf9;
  border: 2px solid #d3b27a;
  border-radius: 12px;
  padding: 5px 4px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: transform 0.1s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.s2-closet-tile:active {
  transform: scale(0.97);
}

.s2-closet-tile.equipped {
  background: #f5fcee;
  border-color: #4ca647;
}

.s2-closet-tile.is-selected {
  background: #fff8df;
  border-color: #ff9800 !important;
  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.55), 0 3px 8px rgba(58, 36, 21, 0.18);
}

.s2-tile-eq-tag {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 7;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #2e8b2a;
  border: 1.5px solid #fff;
  color: #fff;
  font-size: 8.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.s2-tile-thumb-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.s2-tile-name {
  width: 100%;
  font-size: 9.5px;
  font-weight: 900;
  color: #3a2415;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}

.s2-tile-meta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  padding: 0 2px;
  font-size: 8.5px;
  line-height: 1.1;
}

.s2-tile-meta .rpg-stars {
  font-size: 8.5px;
  letter-spacing: -0.5px;
}

.s2-tile-meta .s2-cp-mini {
  font-size: 8.5px;
  font-weight: 900;
  color: #1f7a24;
}

/* ============================================================================
   PHASE 6B: DASH BUILD STRIP, GLAMOUR BADGES & BLACKSMITH STAT ATTUNEMENT
   ============================================================================ */
.s2-dash-build-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 3px 8px;
  margin-top: 5px;
  padding: 5px 8px;
  background: linear-gradient(180deg, #fff9e6 0%, #f5dfad 100%);
  border: 1.5px solid #c9932c;
  border-radius: 9px;
  font-size: 10px;
  color: #4a2a10;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 0 #8a5a2b;
}

.s2-dash-build-strip .s2-dash-build-main {
  font-weight: 800;
  color: #3a1d04;
}

.s2-dash-build-strip .s2-dash-build-main b {
  font-weight: 900;
  color: #7c2d12;
}

.s2-dash-build-strip .s2-dash-build-perk {
  font-size: 9px;
  font-weight: 800;
  color: #6b3f1f;
}

.s2-pd-slot-v2 .rpg-slot-glamour {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 6;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff85b3 0%, #d93870 100%);
  border: 1.5px solid #fff;
  font-size: 9.5px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.s2-tile-glamour-tag {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 7;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff85b3 0%, #d93870 100%);
  border: 1.5px solid #fff;
  font-size: 9px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.s2-wardrobe-mode-toggle,
.s2-forge-mode-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin: 4px 0 6px;
}

.s2-wardrobe-mode-toggle .s2-slot-pill,
.s2-forge-mode-bar .s2-slot-pill {
  padding: 5px 10px;
  border-radius: 999px;
  border: 2px solid #b58442;
  background: linear-gradient(180deg, #fdf1d6 0%, #ebd2a4 100%);
  color: #5c3416;
  font-size: 10.5px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 0 #8a5a2b;
}

.s2-wardrobe-mode-toggle .s2-slot-pill.active,
.s2-forge-mode-bar .s2-slot-pill.active {
  background: linear-gradient(180deg, #ffe896 0%, #f0a828 100%);
  border-color: #7c4312;
  color: #3a1d04 !important;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.85), 0 2.5px 0 #5c3416;
}

.s2-insp-build-preview {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2.5px 7px;
  background: linear-gradient(180deg, #fff8e1 0%, #fce3a1 100%);
  border: 1px solid #d49a2a;
  border-radius: 6px;
  font-size: 9.5px;
  font-weight: 800;
  color: #5a2e0d;
  margin-top: 2px;
}

.rpg-build-toast-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: linear-gradient(180deg, #fff6d6 0%, #f7d47c 100%);
  border: 2px solid #9a5a10;
  border-radius: 11px;
  margin: 2px 4px 4px;
  color: #3a1d04;
  font-size: 11px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 3px 8px rgba(58, 36, 21, 0.25);
}

.rpg-build-toast-banner .s2-banner-dismiss-btn {
  background: rgba(92, 52, 22, 0.14);
  border: 1px solid rgba(92, 52, 22, 0.35);
  border-radius: 6px;
  color: #4b2a12;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  padding: 1px 5px;
}

/* Stat Attune Console inside .s2-forge-parchment */
.s2-attune-console {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.s2-attune-stat-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: linear-gradient(180deg, #fffaf0 0%, #f5e3be 100%);
  border: 1.5px solid #c9932c;
  border-radius: 10px;
  color: #3a2008;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.s2-attune-main-stat span,
.s2-attune-sec-stat span {
  font-size: 10px;
  font-weight: 800;
  color: #7a4618;
  display: block;
}

.s2-attune-main-stat b {
  display: block;
  font-size: 12.5px;
  font-weight: 900;
  color: #3a1d04;
}

.s2-attune-sec-stat b {
  display: block;
  font-size: 12.5px;
  font-weight: 900;
  color: #b45309;
}

.s2-attune-main-stat small,
.s2-attune-sec-stat small {
  font-size: 9px;
  font-weight: 700;
  color: #6b4423;
  display: block;
}

.s2-attune-choose-label {
  font-size: 11px;
  font-weight: 900;
  color: #4b2a12;
  margin-bottom: -2px;
}

.s2-attune-stat-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.s2-attune-stat-card {
  cursor: pointer;
  padding: 7px 5px;
  border-radius: 11px;
  border: 2px solid #cfa566;
  background: linear-gradient(180deg, #fffdf9 0%, #f7ebd2 100%);
  text-align: center;
  color: #3a2008;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #9c6e32;
  transition: transform 0.1s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
}

.s2-attune-stat-card:active {
  transform: translateY(1px);
}

.s2-attune-stat-card.selected {
  border-color: #d97706;
  background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.45), 0 2.5px 0 #92400e;
}

.s2-attune-stat-card .s2-attune-ico {
  font-size: 16px;
  line-height: 1.1;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s2-attune-stat-card .s2-attune-ico img {
  width: 17px;
  height: 17px;
  object-fit: contain;
}

.s2-attune-stat-card .s2-attune-name {
  font-size: 10.5px;
  font-weight: 900;
  color: #3a1d04;
}

.s2-attune-stat-card .s2-attune-val {
  font-size: 11px;
  font-weight: 900;
  color: #15803d;
}

.s2-attune-stat-card .s2-attune-active-tag {
  font-size: 8.5px;
  font-weight: 900;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 999px;
  padding: 0.5px 5px;
}

.s2-attune-stat-card .s2-attune-build-preview {
  width: 100%;
  margin-top: 2px;
  padding: 2.5px 4px;
  border-radius: 6px;
  background: rgba(120, 68, 22, 0.1);
  border: 1px solid rgba(180, 120, 50, 0.35);
  font-size: 8.8px;
  font-weight: 800;
  color: #4b2a12;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s2-attune-cost-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: #f5e5c6;
  border: 1.5px solid #d4a656;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  color: #4b2a12;
}

.s2-attune-cost-row b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #3a1d04;
  font-weight: 900;
}

.s2-attune-locked-notice {
  padding: 12px 10px;
  text-align: center;
  background: linear-gradient(180deg, #fffaf0 0%, #f5e3be 100%);
  border: 1.5px dashed #c9932c;
  border-radius: 10px;
  color: #4b2a12;
}

.s2-attune-locked-notice b {
  font-size: 12.5px;
  color: #3a1d04;
  display: block;
}

.s2-attune-locked-notice p {
  font-size: 10.5px;
  font-weight: 700;
  margin: 5px 0 8px;
  color: #6b3f1f;
}

/* ==========================================================================
   Pet Rig V3 — Species Locomotion & Directional View Stage Kinematics
   ========================================================================== */
@keyframes petV3FlyHover {
  0%, 100% { transform: translateY(-2px) rotate(-1.5deg) scale(1, 1); }
  45% { transform: translateY(-8px) rotate(1.8deg) scale(1.03, 0.98); }
  55% { transform: translateY(-9px) rotate(2.2deg) scale(1.04, 0.97); }
}

@keyframes petV3FlyGlideActive {
  0%, 100% { transform: translate(-2px, -2px) rotate(-4deg) scale(1.02, 0.98); }
  45% { transform: translate(3px, -10px) rotate(2.5deg) scale(1.05, 0.96); }
}

@keyframes petV3HopTrotActive {
  0%, 100% { transform: translateY(0px) rotate(-3deg) scale(1.04, 0.95); }
  25% { transform: translateY(-7px) rotate(0deg) scale(0.96, 1.06); }
  50% { transform: translateY(0px) rotate(3deg) scale(1.04, 0.95); }
  75% { transform: translateY(-7px) rotate(0deg) scale(0.96, 1.06); }
}

@keyframes petV3SpiritFloatActive {
  0%, 100% { transform: translate(-2px, -1px) rotate(-2deg); }
  50% { transform: translate(2px, -8px) rotate(2.5deg); }
}

@keyframes petV3SkySwimActive {
  0%, 100% { transform: translateY(-1px) rotate(-3.5deg) scale(1.02, 0.98); }
  50% { transform: translateY(-8px) rotate(3.5deg) scale(0.98, 1.03); }
}

.pet-v2-hero-focus.s2-loco-FLY_FLUTTER {
  animation: petV3FlyHover 1.15s ease-in-out infinite;
}
.pet-v2-hero-focus.s2-loco-FLY_FLUTTER.is-moving-preview {
  animation: petV3FlyGlideActive 0.68s ease-in-out infinite;
}
.pet-v2-hero-focus.s2-loco-HOP_WADDLE.is-moving-preview {
  animation: petV3HopTrotActive 0.64s ease-in-out infinite;
}
.pet-v2-hero-focus.s2-loco-FLOAT_SPIRIT.is-moving-preview {
  animation: petV3SpiritFloatActive 0.78s ease-in-out infinite;
}
.pet-v2-hero-focus.s2-loco-SKY_SWIM.is-moving-preview {
  animation: petV3SkySwimActive 0.88s ease-in-out infinite;
}

.pet-v2-dir-bar {
  background: rgba(242, 226, 196, 0.85);
  border-radius: 999px;
  padding: 1px 3px;
  border: 1px solid rgba(181, 133, 72, 0.45);
}
.pet-v2-dir-bar .pet-v2-vtier-pill {
  font-size: 8.5px !important;
  padding: 2px 5px !important;
}

/* ==========================================================================
   Blacksmith Star-Force & Stat Attunement V2 — Dopamine Stage & Console
   ========================================================================== */
.s2-forge-mode-bar-v2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 6px;
}

.s2-forge-mode-pill {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px !important;
  border-radius: 13px !important;
  border: 2px solid #b8833e !important;
  background: linear-gradient(180deg, #fffaf0 0%, #ebd2a4 100%) !important;
  color: #4b2a12 !important;
  box-shadow: inset 0 1px 0 #fff, 0 2.5px 0 #7a4a1a !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.s2-forge-mode-pill.active {
  border-color: #ffe89e !important;
  background: linear-gradient(180deg, #ffe794 0%, #f59e0b 65%, #d97706 100%) !important;
  color: #3a1802 !important;
  text-shadow: 0 1px 0 rgba(255, 250, 220, 0.75) !important;
  box-shadow: inset 0 1.5px 0 #fff8d6, 0 3px 0 #78350f, 0 0 12px rgba(245, 158, 11, 0.45) !important;
}


.s2-mode-pill-ico {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
}

.s2-mode-pill-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  text-align: left;
}

.s2-mode-pill-txt b {
  font-size: 11.5px;
  font-weight: 900;
}

.s2-mode-pill-txt small {
  font-size: 9px;
  font-weight: 800;
  opacity: 0.88;
}

/* Scenic Stage Backdrop & Lighting */
.s2-forge-stage-v2 {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 62%, rgba(255, 220, 130, 0.36) 0%, rgba(42, 20, 8, 0.62) 78%, rgba(24, 11, 4, 0.82) 100%),
    url('/assets/ui/stage_forge_bg.jpg') center 52% / cover no-repeat !important;
  border: 2.5px solid #d4982f !important;
  box-shadow: inset 0 1px 0 rgba(255, 240, 190, 0.6), 0 3.5px 0 #5c3416 !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.s2-forge-stage-v2.is-attune-mode {
  background:
    radial-gradient(circle at 50% 56%, rgba(125, 211, 252, 0.34) 0%, rgba(30, 27, 75, 0.68) 74%, rgba(15, 23, 42, 0.86) 100%),
    url('/assets/ui/stage_forge_bg.jpg') center 52% / cover no-repeat !important;
  border-color: #38bdf8 !important;
  box-shadow: inset 0 0 18px rgba(56, 189, 248, 0.32), 0 3.5px 0 #1e3a8a !important;
}

.s2-forge-stage-v2.is-attune-mode.elem-power {
  border-color: #fb7185 !important;
  box-shadow: inset 0 0 18px rgba(244, 63, 94, 0.32), 0 3.5px 0 #881337 !important;
}

.s2-forge-stage-v2.is-attune-mode.elem-fortune {
  border-color: #fbbf24 !important;
  box-shadow: inset 0 0 18px rgba(251, 191, 36, 0.34), 0 3.5px 0 #78350f !important;
}

.s2-forge-stage-v2.is-attune-mode.elem-luck {
  border-color: #34d399 !important;
  box-shadow: inset 0 0 18px rgba(16, 185, 129, 0.32), 0 3.5px 0 #065f46 !important;
}

.s2-attune-stage-header {
  display: flex;
  justify-content: center;
  padding: 2px 0 6px;
}

.s2-ash-pill {
  background: rgba(15, 23, 42, 0.78);
  border: 1.5px solid rgba(125, 211, 252, 0.72);
  color: #e0f2fe;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2.5px 11px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.s2-ash-pill b {
  color: #fde047;
}

/* Rotating Magic Circle & Alchemical Wheel */
@keyframes forgeWheelIdleSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.s2-forge-stage-v2 .s2-anvil-magic {
  animation: forgeWheelIdleSpin 20s linear infinite;
  opacity: 0.85;
  filter: drop-shadow(0 0 10px rgba(255, 215, 106, 0.65));
}

.s2-forge-stage-v2.is-attune-mode .s2-anvil-magic {
  top: -12px;
  width: 112px;
  height: 112px;
  opacity: 0.96;
  animation: forgeWheelIdleSpin 12s linear infinite;
  filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.85));
}

/* Floating Royal Star-Hammer Prop */
@keyframes forgeHammerIdle {
  0%, 100% { transform: translate(0, 0) rotate(-14deg); }
  50% { transform: translate(2px, -5px) rotate(-6deg); }
}

@keyframes forgeHammerStrike {
  0% { transform: translate(0, 0) rotate(-14deg) scale(1); }
  22% { transform: translate(16px, -16px) rotate(32deg) scale(1.12); }
  42% { transform: translate(-24px, 18px) rotate(-52deg) scale(1.22); filter: drop-shadow(0 0 18px #fff) brightness(1.35); }
  62% { transform: translate(-8px, 4px) rotate(-26deg) scale(1.06); }
  100% { transform: translate(0, 0) rotate(-14deg) scale(1); }
}

.s2-forge-hammer-prop {
  position: absolute;
  top: -4px;
  right: 6px;
  width: 56px;
  height: 56px;
  object-fit: contain;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 8px rgba(56, 189, 248, 0.55));
  animation: forgeHammerIdle 2.2s ease-in-out infinite;
}

.s2-forge-stage-v2.is-striking-win .s2-forge-hammer-prop,
.s2-forge-stage-v2.is-striking-pity .s2-forge-hammer-prop {
  animation: forgeHammerStrike 0.68s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Stage Flanking Orbs in Attune Mode */
.s2-stage-stat-orb {
  position: absolute;
  top: 24px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  pointer-events: none;
}

.s2-stage-stat-orb.is-locked {
  left: -26px;
}

.s2-stage-stat-orb.is-target {
  right: -26px;
}

.s2-stage-stat-orb img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
}

.s2-stage-stat-orb span {
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  font-size: 8.5px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 999px;
  white-space: nowrap;
}

.s2-stage-stat-orb.is-target span {
  border-color: #fde047;
  color: #fef08a;
}

/* Dopamine Impact Animations (Item Box, Wheel Spin, Shockwave, Sparks, Banner, Star Pop) */
@keyframes forgeItemImpactWin {
  0% { transform: scale(1); }
  36% { transform: scale(1.0) translateY(0); }
  44% { transform: scale(1.22, 0.82) translateY(5px); filter: brightness(1.65) drop-shadow(0 0 18px #fde047); }
  64% { transform: scale(0.92, 1.14) translateY(-8px); filter: brightness(1.25) drop-shadow(0 0 16px #f59e0b); }
  82% { transform: scale(1.05, 0.97) translateY(0); }
  100% { transform: scale(1); }
}

@keyframes forgeItemImpactPity {
  0% { transform: translateX(0) scale(1); }
  38% { transform: translateX(0) scale(1); }
  46% { transform: translateX(-5px) scale(1.06, 0.92); filter: drop-shadow(0 0 14px #fbbf24); }
  56% { transform: translateX(5px) scale(0.96, 1.04); }
  68% { transform: translateX(-3px); }
  100% { transform: translateX(0) scale(1); }
}

@keyframes attuneWheelBurstSpin {
  0% { transform: rotate(0deg) scale(1); filter: brightness(1) drop-shadow(0 0 12px #38bdf8); }
  45% { transform: rotate(380deg) scale(1.18); filter: brightness(1.55) drop-shadow(0 0 24px #fde047); }
  100% { transform: rotate(720deg) scale(1); filter: brightness(1.08) drop-shadow(0 0 14px #38bdf8); }
}

@keyframes forgeShockwaveAnim {
  0% { transform: translate(-50%, -50%) scale(0.25); opacity: 0.95; border-width: 7px; }
  35% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.45); opacity: 0; border-width: 1px; }
}

@keyframes forgeSparkBurst {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  28% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx, 40px)), calc(-50% + var(--ty, -40px))) scale(0.15); opacity: 0; }
}

@keyframes forgeBannerPop {
  0% { transform: translate(-50%, 10px) scale(0.45); opacity: 0; }
  18% { transform: translate(-50%, -8px) scale(1.08); opacity: 1; }
  30% { transform: translate(-50%, -5px) scale(1); opacity: 1; }
  82% { transform: translate(-50%, -12px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -22px) scale(0.92); opacity: 0; }
}

@keyframes starForceJustForged {
  0% { transform: translateY(var(--arc-y, 0px)) scale(0.4) rotate(-25deg); filter: brightness(2); }
  55% { transform: translateY(var(--arc-y, 0px)) scale(1.42) rotate(10deg); box-shadow: 0 0 18px #fff, 0 0 26px #f59e0b; }
  100% { transform: translateY(var(--arc-y, 0px)) scale(1) rotate(0deg); }
}

@keyframes forgeChibiCheerJump {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-9px) scale(1.04); }
  65% { transform: translateY(-5px) scale(1.02); }
}

.s2-sf-star.just-forged {
  animation: starForceJustForged 0.75s cubic-bezier(0.22, 1.4, 0.36, 1) forwards;
  z-index: 4;
}

.s2-forge-stage-v2.is-striking-win .s2-anvil-item-box,
.s2-forge-stage-v2.is-attuning-win .s2-anvil-item-box {
  animation: forgeItemImpactWin 0.78s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.s2-forge-stage-v2.is-striking-pity .s2-anvil-item-box {
  animation: forgeItemImpactPity 0.68s ease-out forwards;
}

.s2-forge-stage-v2.is-attuning-win .s2-anvil-magic {
  animation: attuneWheelBurstSpin 0.88s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.s2-forge-stage-v2.is-striking-win .s2-anvil-chibi-cheer,
.s2-forge-stage-v2.is-attuning-win .s2-anvil-chibi-cheer {
  animation: forgeChibiCheerJump 0.7s ease-out;
}

.s2-forge-vfx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
}

.s2-forge-shockwave {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 5px solid #fde047;
  box-shadow: 0 0 18px #f59e0b, inset 0 0 12px #fef08a;
  animation: forgeShockwaveAnim 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
   animation-delay: 0.22s;
  opacity: 0;
}

.s2-forge-shockwave.attune_win {
  border-color: #38bdf8;
  box-shadow: 0 0 20px #38bdf8, inset 0 0 12px #bae6fd;
  animation-delay: 0.05s;
}

.s2-forge-shockwave.forge_pity {
  border-color: #fbbf24;
  box-shadow: 0 0 14px #fbbf24;
  animation-delay: 0.22s;
}

.s2-forge-sparks-wrap {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0;
  height: 0;
}

.s2-forge-spark {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--spark-col, #fde047);
  box-shadow: 0 0 8px var(--spark-col, #fde047), 0 0 14px #fff;
  opacity: 0;
  animation: forgeSparkBurst 0.72s cubic-bezier(0.15, 0.85, 0.3, 1) forwards;
}

.s2-forge-dopamine-banner {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translate(-50%, 0);
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 900;
  color: #fffdf5;
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  border: 2px solid #fef08a;
  text-shadow: 0 1.5px 0 #451a03;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 16px rgba(251, 191, 36, 0.8);
  animation: forgeBannerPop 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  z-index: 12;
}

.s2-forge-dopamine-banner.attune_win {
  background: linear-gradient(180deg, #0284c7 0%, #1e3a8a 100%);
  border-color: #bae6fd;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 16px rgba(56, 189, 248, 0.85);
}

.s2-forge-dopamine-banner.forge_pity {
  background: linear-gradient(180deg, #059669 0%, #065f46 100%);
  border-color: #a7f3d0;
}

/* Star-Force Console V2: Visual Stat Delta Pills */
.s2-forge-console-v2 {
  gap: 7px !important;
  padding: 8px 10px !important;
}

.s2-forge-stat-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: linear-gradient(90deg, #fff5d6, #ffe6a3, #fff5d6);
  border: 1.5px solid #d49424;
  border-radius: 10px;
  padding: 5px 7px;
}

.s2-forge-delta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 253, 248, 0.94);
  border: 1.5px solid #cfa358;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 800;
  color: #4b2a12;
  box-shadow: 0 1px 0 rgba(122, 74, 26, 0.2);
}

.s2-forge-delta-pill.is-cp {
  background: linear-gradient(180deg, #fffbeb, #fef08a);
  border-color: #d97706;
}

.s2-fdp-ico {
  width: 15px;
  height: 15px;
  object-fit: contain;
}

.s2-fdp-label {
  font-weight: 900;
  color: #6b3810;
}

.s2-fdp-vals {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.s2-fdp-arr {
  color: #b45309;
  font-size: 10px;
}

.s2-fdp-next {
  color: #15803d;
  font-weight: 900;
}

.s2-fdp-diff {
  font-style: normal;
  font-size: 9px;
  font-weight: 900;
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
  border-radius: 999px;
  padding: 0 4px;
}

.s2-forge-milestone-chip {
  font-size: 9.5px;
  font-weight: 900;
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #7dd3fc;
  border-radius: 999px;
  padding: 2px 7px;
}

.s2-forge-milestone-chip.gold {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}

/* True Conic-Gradient Success Ring + Tactile Booster Chips */
.s2-conic-gauge {
  width: 82px !important;
  height: 82px !important;
  padding: 5px;
  border: 2px solid #8a5a24 !important;
  background: conic-gradient(
    #2eb82e calc(var(--chance-pct, 50) * 1%),
    #e5d1ad 0
  ) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
}

.s2-gauge-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #eefbe8 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

.s2-gauge-safe-tag {
  margin-top: 1px;
  font-size: 8px;
  font-weight: 900;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 999px;
  padding: 0.5px 5px;
}

.s2-booster-col {
  gap: 6px !important;
}

.s2-booster-chip {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 7px !important;
  padding: 5px 8px !important;
  border-radius: 11px !important;
  border: 2px solid #cfa566 !important;
  background: linear-gradient(180deg, #fffdf9 0%, #f5e6c8 100%) !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #9c6e32;
  transition: transform 0.1s ease, border-color 0.12s ease, background 0.12s ease;
}

.s2-booster-chip.is-on {
  border-color: #e11d48 !important;
  background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%) !important;
  box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.22), 0 2px 0 #9f1239;
}

.rpg-scroll-check.s2-booster-chip.is-on {
  border-color: #d97706 !important;
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%) !important;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.25), 0 2px 0 #92400e;
}

.s2-booster-ico {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.s2-booster-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.s2-booster-meta b {
  font-size: 11px;
  font-weight: 900;
  color: #3a1d04;
}

.s2-booster-meta small {
  font-size: 9px;
  font-weight: 800;
  color: #6b4423;
}

.s2-booster-badge {
  background: #ffe4e6;
  border: 1.5px solid #f43f5e;
  color: #9f1239;
  font-size: 9.5px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 999px;
  flex-shrink: 0;
}

.s2-booster-badge.gold {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
}

/* 8-Flame-Pip Artisan Pity & Material Bar */
.s2-forge-pity-cost-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: #f5e5c6;
  border: 1.5px solid #d4a656;
  border-radius: 10px;
  padding: 5px 8px;
}

.s2-pity-flame-cluster {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.s2-pity-head-mini {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  color: #5c3416;
}

.s2-pity-bonus-tag {
  font-style: normal;
  font-size: 9px;
  font-weight: 900;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 999px;
  padding: 0 5px;
}

.s2-pity-pips-row {
  display: flex;
  gap: 2px;
}

.s2-pity-pip {
  font-size: 11px;
  line-height: 1;
  filter: grayscale(1) opacity(0.32);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.s2-pity-pip.filled {
  filter: none;
  transform: scale(1.1);
}

.s2-forge-mat-pills {
  display: flex;
  align-items: center;
  gap: 5px;
}

.s2-mat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fffdf8;
  border: 1.5px solid #c99b56;
  border-radius: 8px;
  padding: 3px 7px;
  font-size: 10.5px;
  font-weight: 800;
  color: #3a1d04;
}

.s2-mat-pill.s2-lack {
  background: #fef2f2;
  border-color: #ef4444;
  color: #b91c1c;
}

/* Stat Attunement V2: Transmutation Strip & Elemental Rune Cards */
.s2-attune-transmute-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: linear-gradient(90deg, #fdf6e7, #f5e1b9);
  border: 1.5px solid #cfa358;
  border-radius: 11px;
  padding: 6px 8px;
}

.s2-transmute-pill {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fffdf9;
  border: 1.5px solid #d4a656;
  border-radius: 9px;
  padding: 4px 7px;
}

.s2-transmute-pill.morph {
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  border-color: #38bdf8;
}

.s2-transmute-pill.morph.elem-power {
  background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%);
  border-color: #fb7185;
}

.s2-transmute-pill.morph.elem-fortune {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #fbbf24;
}

.s2-transmute-pill.morph.elem-luck {
  background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #34d399;
}

.s2-transmute-pill img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.s2-transmute-pill small {
  display: block;
  font-size: 8.5px;
  font-weight: 900;
  color: #7a4618;
  line-height: 1.1;
}

.s2-transmute-pill b {
  display: block;
  font-size: 11px;
  font-weight: 900;
  color: #3a1d04;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s2-transmute-arrow {
  font-size: 14px;
  font-weight: 900;
  color: #b45309;
  flex-shrink: 0;
}

.s2-rune-card {
  position: relative;
  padding: 8px 6px 6px !important;
  border-radius: 13px !important;
  gap: 2px !important;
}

.s2-rune-card.elem-swiftness.selected {
  border-color: #0284c7 !important;
  background: linear-gradient(180deg, #f0f9ff 0%, #bae6fd 100%) !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.35), 0 3px 0 #0369a1 !important;
}

.s2-rune-card.elem-power.selected {
  border-color: #e11d48 !important;
  background: linear-gradient(180deg, #fff1f2 0%, #fecdd3 100%) !important;
  box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.35), 0 3px 0 #9f1239 !important;
}

.s2-rune-card.elem-fortune.selected {
  border-color: #d97706 !important;
  background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%) !important;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.38), 0 3px 0 #92400e !important;
}

.s2-rune-card.elem-luck.selected {
  border-color: #059669 !important;
  background: linear-gradient(180deg, #ecfdf5 0%, #a7f3d0 100%) !important;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.35), 0 3px 0 #065f46 !important;
}

.s2-rune-medallion-wrap {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1px;
}

.s2-rune-medallion-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
  transition: transform 0.15s ease;
}

.s2-rune-card.selected .s2-rune-medallion-img {
  transform: scale(1.1);
}

.s2-rune-sub-role {
  font-size: 8.5px;
  font-weight: 800;
  color: #6b4423;
  line-height: 1.1;
}

.s2-attune-target-tag {
  font-size: 8.5px;
  font-weight: 900;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 999px;
  padding: 0.5px 5px;
}

.s2-locked-wheel-ico {
  width: 46px;
  height: 46px;
  object-fit: contain;
  margin: 0 auto 4px;
  display: block;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.25));
}

.s2-attune-cta {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15 !important;
  padding: 6px 10px !important;
}

.s2-cta-sub-cost {
  font-size: 9.5px;
  font-weight: 800;
  opacity: 0.92;
}

/* Starlight Charm Reliquary 3D Stage */
.s2-charm-mirror-card {
  position: sticky;
  top: 0;
  z-index: 15;
  background: linear-gradient(180deg, #1e1230 0%, #321d4c 65%, #2a1820 100%) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), inset 0 0 22px rgba(255, 215, 130, 0.18) !important;
}

.s2-charm-stage-fig {
  max-width: 280px !important;
  height: 188px !important;
  min-height: 188px !important;
  background:
    radial-gradient(circle at 50% 54%, rgba(116, 68, 188, 0.42) 0%, rgba(28, 14, 48, 0.92) 72%, rgba(14, 8, 26, 0.98) 100%) !important;
  border-color: #d8a43a !important;
}

.s2-charm-stage-fig .s2-pd-webgl-host {
  width: 196px !important;
  height: 184px !important;
  bottom: 2px !important;
}

/* ============================================================================
   UNIFIED INLINE WARDROBE, DUAL STAT/GLAMOUR BAR & PIP GLAMOUR BADGE
   ============================================================================ */
.s2-pd-slot-v2 .rpg-slot-glamour.rpg-slot-glamour-pip {
  width: 22px;
  height: 22px;
  top: -5px;
  right: -5px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff0f6 0%, #ffd6e7 100%);
  border: 1.5px solid #e11d74;
  padding: 1px;
  overflow: visible;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.s2-pd-slot-v2 .rpg-slot-glamour-pip img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}
.s2-pd-slot-v2 .rpg-slot-glamour-pip small {
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 8px;
  line-height: 1;
  background: #e11d74;
  color: #fff;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
}

.s2-compact-stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  margin-top: 2px;
  background: linear-gradient(180deg, #fffdf6 0%, #f3e1bc 100%);
  border: 1.5px solid #c9974c;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(58, 36, 21, 0.12);
}
.s2-compact-stats-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 7px;
  font-size: 9.5px;
  font-weight: 800;
  color: #4a2a10;
  min-width: 0;
}
.s2-compact-stats-pills b {
  color: #166534;
  font-weight: 900;
}
.s2-compact-build-pill {
  background: #fef3c7;
  border: 1px solid #d97706;
  color: #7c2d12;
  font-weight: 900;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 999px;
}
.s2-compact-stats-toggle {
  flex-shrink: 0;
  background: linear-gradient(180deg, #ede9fe 0%, #ddd6fe 100%);
  border: 1px solid #8b5cf6;
  color: #4c1d95;
  font-size: 9px;
  font-weight: 900;
  padding: 2.5px 7px;
  border-radius: 999px;
  cursor: pointer;
}

.s2-expanded-stats-drawer {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 2px;
}

.s2-inline-closet-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1.5px dashed rgba(168, 118, 52, 0.45);
}

.s2-active-loadout-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.s2-loadout-half {
  background: linear-gradient(180deg, #fffdf8 0%, #f5e6c8 100%);
  border: 1.5px solid #c99a49;
  border-radius: 10px;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff;
}
.s2-loadout-half.is-stat-gear {
  border-color: #4ca647;
  background: linear-gradient(180deg, #f8fff6 0%, #e7f6e3 100%);
}
.s2-loadout-half.is-glamour-look.is-overridden {
  border-color: #e11d74;
  background: linear-gradient(180deg, #fff7fb 0%, #fce4f0 100%);
}
.s2-loadout-half-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  font-size: 8.5px;
  font-weight: 900;
  color: #4a2a10;
  letter-spacing: 0.01em;
}
.s2-loadout-half.is-stat-gear .s2-loadout-half-tag {
  color: #166534;
}
.s2-loadout-half.is-glamour-look.is-overridden .s2-loadout-half-tag {
  color: #be185d;
}
.s2-loadout-half-tag small {
  font-weight: 700;
  opacity: 0.8;
}
.s2-loadout-clear-btn {
  background: #be185d;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 999px;
  padding: 1px 5px;
  font-size: 8px;
  font-weight: 900;
  cursor: pointer;
  line-height: 1.1;
}
.s2-loadout-half-body {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.s2-loadout-mini-thumb {
  flex-shrink: 0;
}
.s2-loadout-half-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.18;
}
.s2-loadout-half-txt b {
  font-size: 10px;
  font-weight: 900;
  color: #3a2008;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s2-loadout-half-txt span {
  font-size: 8.5px;
  font-weight: 800;
  color: #6b4423;
}
.s2-loadout-half-txt span.is-glam-active {
  color: #be185d;
}

.s2-insp-btn.glamour {
  background: linear-gradient(180deg, #ff85b3 0%, #d93870 100%);
  border: 1.5px solid #ffd1e3;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  box-shadow: 0 2px 0 #8c1943;
}
.s2-insp-sub-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.s2-insp-sub-actions .s2-insp-btn {
  padding: 5px 5px;
  font-size: 9.5px;
}
.s2-insp-btn.gift {
  background: linear-gradient(180deg, #f3e8ff 0%, #d8b4fe 100%);
  border: 1.5px solid #9333ea;
  color: #4c1d95;
  box-shadow: 0 2px 0 #6b21a8;
}
.s2-insp-btn.glamour-clear {
  background: linear-gradient(180deg, #fce7f3 0%, #fbcfe8 100%);
  border: 1.5px solid #db2777;
  color: #831843;
  box-shadow: 0 1.5px 0 #9d174d;
}
.s2-insp-glamour-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3.5px 6px;
  border-radius: 8px;
  background: #fce7f3;
  border: 1.5px solid #db2777;
  color: #9d174d;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.s2-tile-eq-tag.s2-tile-pill-tag,
.s2-tile-glamour-tag.s2-tile-pill-tag {
  width: auto;
  height: 15px;
  padding: 0 4.5px;
  border-radius: 999px;
  font-size: 7.5px;
  letter-spacing: 0.02em;
}
.s2-closet-tile.is-glamour-tile {
  border-color: #ec4899;
  background: #fff7fb;
}

.s2-wardrobe-unified-card .rpg-items-grid.s2-closet-grid-v2 {
  max-height: none;
  overflow-y: visible;
}

.s2-stat-cell.is-top-stat {
  border-color: #d97706 !important;
  background: linear-gradient(180deg, #fffdf0 0%, #fef3c7 100%) !important;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(217, 119, 6, 0.35);
}
.s2-stat-val small {
  font-size: 8.5px;
  font-weight: 800;
  opacity: 0.78;
}
.s2-dash-build-share {
  font-size: 9px;
  font-weight: 800;
  color: #92400e;
  margin-left: 3px;
}

/* ============================================================================
   3 FASHION SUB-TABS: [ ⚔️ GEAR STATS ] | [ 👗 COSTUME ] | [ 💇 HAIR SALON ]
   ============================================================================ */
.s2-pd-big-subtabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 2px 0 4px;
}

.s2-pd-big-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5.5px 5px;
  border-radius: 10px;
  border: 2px solid #c49a52;
  background: linear-gradient(180deg, #f8ecd2 0%, #e7d1a7 100%);
  color: #5c3818;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 0 #8c5c25;
  transition: transform 0.1s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.s2-pd-big-tab:active {
  transform: translateY(1px);
}

.s2-pd-big-tab-ico {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.s2-pd-big-tab-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.12;
}

.s2-pd-big-tab-txt b {
  font-size: 9.8px;
  font-weight: 900;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s2-pd-big-tab-txt small {
  font-size: 8px;
  font-weight: 800;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s2-pd-big-tab.is-stats.active {
  background: linear-gradient(180deg, #52b848 0%, #2a8324 100%);
  border-color: #ffe380;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 0 1.5px #1b5c16, 0 2px 6px rgba(42, 131, 36, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.s2-pd-big-tab.is-glamour.active {
  background: linear-gradient(180deg, #ff6fa5 0%, #d42669 100%);
  border-color: #ffd6e8;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 0 1.5px #881343, 0 2px 6px rgba(212, 38, 105, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.s2-pd-big-tab.is-hair.active {
  background: linear-gradient(180deg, #a855f7 0%, #6d28d9 100%);
  border-color: #f3e8ff;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 0 1.5px #4c1d95, 0 2px 6px rgba(109, 40, 217, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.s2-inline-hair-studio-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}

/* Stage & Slot visual cue when viewing COSTUME LOOK tab */
.s2-wardrobe-stage.is-glamour-stage {
  background: radial-gradient(circle at 50% 45%, rgba(255, 230, 242, 0.65) 0%, rgba(247, 212, 230, 0.28) 100%);
  border-radius: 12px;
}

.s2-pd-slot-v2.is-glamour-mode-slot .s2-pd-slot-box {
  border-color: #e879a7;
  background: linear-gradient(180deg, #fff7fb 0%, #fce7f3 100%);
}

.s2-pd-slot-v2.is-glamour-mode-slot.has-glamour-look .s2-pd-slot-box {
  border-color: #db2777;
  box-shadow: 0 0 0 1.5px rgba(219, 39, 119, 0.3), inset 0 1px 0 #fff;
}

.s2-pd-slot-v2.is-glamour-mode-slot.selected .s2-pd-slot-box {
  border-color: #db2777 !important;
  box-shadow: 0 0 0 2.5px #f472b6, 0 2px 6px rgba(219, 39, 119, 0.35) !important;
}

.rpg-slot-refine.is-glam-pill {
  background: linear-gradient(180deg, #ec4899 0%, #be185d 100%) !important;
  border: 1px solid #ffd6e8 !important;
  color: #fff !important;
  font-size: 7.5px !important;
  padding: 0 4px !important;
  letter-spacing: 0.01em;
}

.rpg-slot-glam-reset {
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 6;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f43f5e 0%, #be123c 100%);
  border: 1.5px solid #fff;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}