.swpb-wrap {
  --swpb-text: #f5f7fb;
  --swpb-muted: rgba(245,247,251,.80);
  --swpb-card-text: #0f1728;
  --swpb-card-muted: #5d6573;
  position: relative;
  overflow: hidden;
  max-width: 1180px;
  margin: 28px auto;
  padding: 34px 26px 24px;
  border-radius: 34px;
  color: var(--swpb-text);
  background: #09111f var(--swpb-bg-desktop) center bottom / cover no-repeat;
  box-shadow: 0 24px 70px rgba(2, 8, 23, .34);
  isolation: isolate;
  min-height: min(100svh - 24px, 940px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.swpb-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,10,20,.48) 0%, rgba(5,10,20,.26) 28%, rgba(5,10,20,.34) 58%, rgba(5,10,20,.60) 100%),
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.08), transparent 34%),
    linear-gradient(90deg, rgba(84,120,173,.16) 0%, transparent 28%, transparent 72%, rgba(192,138,90,.16) 100%);
  z-index: -1;
}

.swpb-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 18px;
}

.swpb-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,16,30,.24);
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,.92);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

.swpb-header h2 {
  margin: 16px 0 8px;
  font-size: clamp(40px, 7vw, 60px);
  line-height: .95;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: rgba(255,255,255,.97);
  text-shadow: 0 2px 16px rgba(0,0,0,.16);
}

.swpb-header p {
  margin: 0 auto;
  max-width: 680px;
  color: var(--swpb-muted);
  font-size: clamp(17px, 1.9vw, 22px);
  line-height: 1.28;
  text-wrap: balance;
}

.swpb-stage {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 0;
}

.swpb-stack {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0,1fr) 92px minmax(0,1fr);
  align-items: stretch;
  gap: 20px;
}

.swpb-stack > * { min-width: 0; }

.swpb-card {
  position: relative;
  min-width: 0;
  display: flex;
  border-radius: 34px;
  height: 100%;
  cursor: pointer;
  touch-action: pan-y;
  transition: transform .3s ease, opacity .3s ease, box-shadow .3s ease, filter .3s ease;
}

.swpb-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.28) 34%, rgba(255,255,255,.08) 70%, rgba(255,255,255,.42));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .72;
}

.swpb-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px rgba(5, 14, 28, .22);
}

.swpb-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 22%);
  pointer-events: none;
  opacity: .55;
}

.swpb-card-inner {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(210px, 36%, 290px);
  gap: 24px;
  align-items: stretch;
  min-height: 344px;
  padding: 24px;
  border-radius: inherit;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(248,244,240,.80) 100%),
    radial-gradient(circle at top left, rgba(255,255,255,.46), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,0) 45%);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  color: var(--swpb-card-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 24px 55px rgba(7, 14, 27, .22);
}

.swpb-card[data-card-index="0"] .swpb-card-inner {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 0 0 1px rgba(197,222,255,.68), 0 18px 38px rgba(9, 22, 43, .20), 0 0 0 6px rgba(175,211,255,.08);
}

.swpb-card[data-card-index="1"] .swpb-card-inner {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 0 0 1px rgba(255,229,198,.72), 0 18px 38px rgba(42, 24, 9, .20), 0 0 0 6px rgba(255,214,166,.08);
}

.swpb-card-content {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr) auto;
  align-items: start;
  padding: 8px 4px 4px;
}

.swpb-card-content > * { width: 100%; min-width: 0; }

.swpb-card-topline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.swpb-badge,
.swpb-store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
}

.swpb-badge {
  color: #a35b14;
  background: linear-gradient(180deg, #fff2e4 0%, #f4dfca 100%);
  border: 1px solid rgba(188,120,36,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.swpb-store {
  color: #48679d;
  background: linear-gradient(180deg, #edf3ff 0%, #dbe7ff 100%);
  border: 1px solid rgba(89,124,192,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}


.swpb-card[data-card-index="0"] .swpb-badge {
  background: linear-gradient(180deg, #fff0de 0%, #f3dcc2 100%);
  color: #b0691e;
}

.swpb-card[data-card-index="0"] .swpb-store {
  background: linear-gradient(180deg, #edf4ff 0%, #dce9ff 100%);
  color: #46679e;
}

.swpb-card[data-card-index="1"] .swpb-badge {
  background: linear-gradient(180deg, #fff3e6 0%, #f4dfc8 100%);
  color: #b06b1e;
}

.swpb-card[data-card-index="1"] .swpb-store {
  background: linear-gradient(180deg, #eef3ff 0%, #dde8ff 100%);
  color: #4c6898;
}


.swpb-card[data-card-index="0"] .swpb-badge,
.swpb-card[data-card-index="0"] .swpb-store,
.swpb-card[data-card-index="1"] .swpb-badge,
.swpb-card[data-card-index="1"] .swpb-store {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 1px 2px rgba(15, 23, 40, .04);
}

.swpb-card[data-card-index="0"] .swpb-badge {
  background: linear-gradient(180deg, #fff1df 0%, #f1ddc6 100%);
  color: #b26a1d;
}

.swpb-card[data-card-index="0"] .swpb-store {
  background: linear-gradient(180deg, #edf4ff 0%, #d6e4ff 100%);
  color: #476ba7;
}

.swpb-card[data-card-index="1"] .swpb-badge {
  background: linear-gradient(180deg, #fef0f1 0%, #f6dadd 100%);
  color: #b34f5d;
}

.swpb-card[data-card-index="1"] .swpb-store {
  background: linear-gradient(180deg, #eef7f1 0%, #d9eddf 100%);
  color: #3f7f57;
}

.swpb-title {
  margin: 0;
  font-size: clamp(28px, 2.25vw, 38px);
  line-height: 1.04;
  font-weight: 750;
  letter-spacing: -.04em;
  text-wrap: balance;
  max-width: 16ch;
}

.swpb-description {
  margin: 12px 0 0;
  max-width: 28ch;
  color: var(--swpb-card-muted);
  font-size: 18px;
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.swpb-card-media {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  border-radius: 30px;
  overflow: hidden;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(245,239,233,.54) 100%),
    radial-gradient(circle at top left, rgba(255,255,255,.34), transparent 48%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), inset 0 0 0 1px rgba(255,255,255,.28), 0 8px 20px rgba(15, 23, 40, .06);
}

.swpb-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  flex: 0 1 auto;
  border-radius: 24px;
  overflow: hidden;
}

.swpb-price-block {
  align-self: end;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(90,102,122,.16);
}

.swpb-price-before,
.swpb-price-after { width: 100%; }

.swpb-label {
  color: var(--swpb-card-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.swpb-old-price {
  margin-top: 8px;
  font-size: clamp(34px, 4vw, 52px);
  line-height: .96;
  font-weight: 700;
  letter-spacing: -.04em;
}

.swpb-old-price-strike {
  font-size: clamp(24px, 2.4vw, 34px);
  opacity: .54;
  text-decoration-thickness: 2px;
}

.swpb-discount {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  margin: 16px 0 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #183f27 0%, #1f5f32 100%);
  color: #e8fff1;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

.swpb-new-price {
  margin: 8px 0 18px;
  font-size: clamp(44px, 4.6vw, 64px);
  line-height: .92;
  font-weight: 800;
  letter-spacing: -.05em;
}

.swpb-cta,
.swpb-open-modal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 24px;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8f8fb 0%, #e9edf4 100%);
  color: #09111f;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 24px rgba(7,14,27,.14);
  min-width: 210px;
}

.swpb-divider {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 330px;
}

.swpb-divider::before {
  content: "";
  position: absolute;
  top: 6%;
  bottom: 6%;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.48), rgba(255,255,255,0));
}

.swpb-divider span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.68), rgba(255,255,255,.18));
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.95);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 30px rgba(4,12,24,.18);
}

.swpb-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  margin: 16px auto 0;
  padding: 0 20px;
  border-radius: 20px;
  background: rgba(12,17,30,.26);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,.92);
  width: fit-content;
}

.swpb-hint-icon { font-size: 20px; line-height: 1; }

.swpb-card.is-gone {
  opacity: 0;
  pointer-events: none;
  filter: blur(2px);
}

.swpb-card.is-revealed { z-index: 2; }

.swpb-card.is-revealed .swpb-card-inner {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 0 0 1px rgba(255,255,255,.45), 0 28px 70px rgba(5,14,28,.28), 0 0 0 12px rgba(255,255,255,.06);
}

.swpb-card.swipe-left { transform: translateX(-125%) rotate(-10deg); }
.swpb-card.swipe-right { transform: translateX(125%) rotate(10deg); }

.swpb-wrap.swpb-battle-revealed .swpb-divider,
.swpb-wrap.swpb-battle-revealed .swpb-hint { display: none; }

.swpb-wrap.swpb-battle-revealed .swpb-stack { grid-template-columns: minmax(0, 1fr); }

.swpb-wrap.swpb-battle-revealed .swpb-card.is-revealed {
  width: min(100%, 920px);
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.swpb-wrap.swpb-battle-revealed.swpb-chosen-top .swpb-card[data-card-index="1"],
.swpb-wrap.swpb-battle-revealed.swpb-chosen-bottom .swpb-card[data-card-index="0"] { display: none; }

.swpb-wrap.swpb-battle-revealed .swpb-card-inner {
  align-items: center;
  grid-template-columns: minmax(0, 1.08fr) clamp(270px, 34%, 350px);
  min-height: 430px;
  padding: 30px;
  gap: 28px;
}

.swpb-wrap.swpb-battle-revealed .swpb-card-content {
  align-self: center;
  max-width: 500px;
  margin: 0 auto 0 0;
}

.swpb-wrap.swpb-battle-revealed .swpb-title {
  max-width: 15ch;
}

.swpb-wrap.swpb-battle-revealed .swpb-description {
  max-width: 30ch;
  -webkit-line-clamp: 3;
}

.swpb-wrap.swpb-battle-revealed .swpb-price-after {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.swpb-wrap.swpb-battle-revealed .swpb-card-media {
  min-height: 340px;
  max-height: 340px;
  align-self: center;
}

.swpb-wrap.swpb-battle-revealed .swpb-card-media img {
  border-radius: 24px;
}

.swpb-modal-close {
  display: none;
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(12,17,30,.42);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(10px);
  z-index: 3;
}

.swpb-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.swpb-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4,10,20,.62);
  backdrop-filter: blur(8px);
}

.swpb-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(1280px, calc(100vw - 24px));
  margin: 12px auto;
}

.swpb-modal .swpb-wrap { margin: 0 auto; }
.swpb-modal .swpb-modal-close { display: inline-flex; align-items: center; justify-content: center; }
.swpb-popup-trigger-wrap { text-align: center; }
body.swpb-modal-open { overflow: hidden; }

@media (max-width: 980px) {
  .swpb-wrap.swpb-battle-revealed .swpb-card.is-revealed {
    width: min(100%, 860px);
  }

  .swpb-wrap {
    padding: 26px 18px 20px;
    border-radius: 28px;
  }

  .swpb-stack {
    grid-template-columns: minmax(0,1fr);
    gap: 12px;
  }

  .swpb-divider {
    min-height: 58px;
  }

  .swpb-divider::before {
    top: 50%;
    bottom: auto;
    left: 12%;
    right: 12%;
    width: auto;
    height: 1px;
    transform: none;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.48), rgba(255,255,255,0));
  }

  .swpb-card-inner,
  .swpb-wrap.swpb-battle-revealed .swpb-card-inner {
    grid-template-columns: minmax(0,1fr) 210px;
    min-height: 280px;
  }
}

@media (max-width: 680px) {
  .swpb-wrap {
    background-image: var(--swpb-bg-mobile);
    min-height: min(100dvh - 8px, 100dvh);
    justify-content: flex-start;
    border-radius: 22px;
    padding: 14px 12px 12px;
  }

  .swpb-header {
    margin-bottom: 0;
    max-width: 360px;
  }

  .swpb-kicker {
    min-height: 32px;
    padding: 0 12px;
    font-size: 10px;
  }

  .swpb-header h2 {
    margin: 8px 0 6px;
    font-size: clamp(26px, 10vw, 42px);
    line-height: .92;
  }

  .swpb-header p {
    font-size: 14px;
    line-height: 1.18;
    max-width: 22ch;
    margin-bottom: 20px;
  }

  .swpb-stage {
    flex: 1;
    align-items: flex-start;
    min-height: 0;
  }

  .swpb-stack {
    gap: 8px;
  }

  .swpb-card { border-radius: 22px; }

  .swpb-card-inner,
  .swpb-wrap.swpb-battle-revealed .swpb-card-inner {
    grid-template-columns: minmax(0,1fr) 108px;
    min-height: 216px;
    padding: 12px;
    gap: 10px;
  }

  .swpb-card-topline {
    gap: 6px;
    margin-bottom: 8px;
  }

  .swpb-card-inner {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 34px rgba(7, 14, 27, .18);
  }

  .swpb-badge,
  .swpb-store {
    min-height: 24px;
    padding: 0 8px;
    font-size: 9px;
  }

  .swpb-title {
    max-width: none;
  }

  .swpb-title {
    font-size: 18px;
    line-height: 1.04;
  }

  .swpb-description {
    margin-top: 6px;
    max-width: none;
    font-size: 12px;
    line-height: 1.25;
    -webkit-line-clamp: 3;
  }

  .swpb-card-media {
    padding: 8px;
    border-radius: 18px;
  }

  .swpb-card-media img {
    border-radius: 18px;
  }

  .swpb-price-block { padding-top: 10px; }
  .swpb-label { font-size: 9px; }

  .swpb-old-price,
  .swpb-new-price {
    margin-top: 4px;
    font-size: 24px;
    line-height: .94;
  }

  .swpb-old-price-strike { font-size: 16px; }

  .swpb-discount {
    min-height: 26px;
    padding: 0 10px;
    margin: 8px 0 6px;
    font-size: 11px;
  }

  .swpb-cta {
    min-height: 42px;
    min-width: 0;
    width: 100%;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 13px;
  }

  .swpb-divider {
    min-height: 36px;
  }

  .swpb-divider span {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .swpb-hint {
    min-height: 40px;
    margin-top: 8px;
    padding: 0 12px;
    gap: 8px;
    border-radius: 14px;
    font-size: 12px;
  }

  .swpb-hint-icon { font-size: 14px; }

  .swpb-modal-dialog {
    width: calc(100vw - 6px);
    margin: 3px auto;
  }
}

@media (max-width: 420px) {
  .swpb-wrap {
    padding: 12px 10px 10px;
  }

  .swpb-header h2 { font-size: 24px; }
  .swpb-header p { font-size: 13px; }

  .swpb-card-inner,
  .swpb-wrap.swpb-battle-revealed .swpb-card-inner {
    grid-template-columns: minmax(0,1fr) 96px;
    min-height: 194px;
    padding: 10px;
    gap: 8px;
  }

  .swpb-title { font-size: 16px; }
  .swpb-description { font-size: 11px; }
  .swpb-old-price,
  .swpb-new-price { font-size: 22px; }
}


/* v10 premium finish */
.swpb-card { filter: saturate(1.02); }
.swpb-card:hover .swpb-card-inner { transform: translateY(-1px); }
.swpb-card-inner { transition: transform .25s ease, box-shadow .25s ease; }
.swpb-title { font-size: clamp(30px, 2.35vw, 40px); max-width: 15ch; }
.swpb-description { color: #657084; }
.swpb-card[data-card-index="0"] .swpb-badge { background: linear-gradient(180deg, #fff0df 0%, #f1dcc2 100%); color: #b06a1f; border-color: rgba(201,130,49,.18); }
.swpb-card[data-card-index="0"] .swpb-store { background: linear-gradient(180deg, #edf4ff 0%, #d8e5ff 100%); color: #486ca8; border-color: rgba(74,118,199,.16); }
.swpb-card[data-card-index="1"] .swpb-badge { background: linear-gradient(180deg, #fff0f2 0%, #f5d8de 100%); color: #b34f62; border-color: rgba(193,86,109,.16); }
.swpb-card[data-card-index="1"] .swpb-store { background: linear-gradient(180deg, #edf8f0 0%, #d8ecde 100%); color: #3f8058; border-color: rgba(68,133,90,.16); }
.swpb-price-block { border-top-color: rgba(90,102,122,.14); }
.swpb-new-price { color: #091a37; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.swpb-cta, .swpb-open-modal { background: linear-gradient(180deg, #0d1525 0%, #111f36 100%); color: #fff; border-color: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 30px rgba(6,12,23,.22); }
.swpb-cta:hover, .swpb-open-modal:hover { transform: translateY(-1px); }
.swpb-wrap.swpb-battle-revealed .swpb-stage { align-items: center; }
.swpb-wrap.swpb-battle-revealed .swpb-card.is-revealed { width: min(100%, 980px); margin: 8px auto 0; }
.swpb-wrap.swpb-battle-revealed .swpb-card-inner { grid-template-columns: minmax(0, 1.1fr) 340px; min-height: 470px; max-width: 980px; gap: 34px; padding: 34px; align-items: center; }
.swpb-wrap.swpb-battle-revealed .swpb-card-content { max-width: 520px; margin: 0; align-self: center; }
.swpb-wrap.swpb-battle-revealed .swpb-card-media { width: 100%; min-height: 360px; max-height: 360px; }
.swpb-wrap.swpb-battle-revealed .swpb-card-media img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; border-radius: 26px; }
@media (max-width: 980px) { .swpb-wrap.swpb-battle-revealed .swpb-card-inner { grid-template-columns: minmax(0,1fr) 250px; min-height: 320px; gap: 20px; padding: 20px; } }
@media (max-width: 680px) {
  .swpb-card-inner { background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(248,244,240,.90) 100%), radial-gradient(circle at top left, rgba(255,255,255,.34), transparent 42%); }
  .swpb-wrap.swpb-battle-revealed .swpb-card.is-revealed { width: 100%; margin-top: 0; }
  .swpb-wrap.swpb-battle-revealed .swpb-card-inner { grid-template-columns: minmax(0,1fr) 108px; min-height: 216px; padding: 12px; gap: 10px; }
  .swpb-card-media { border-radius: 20px; }
  .swpb-card-media img { border-radius: 16px; }
}

.swpb-header-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.swpb-next-battle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.10) 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 28px rgba(7,14,27,.18);
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease, background .2s ease;
}

.swpb-next-battle:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 14px 34px rgba(7,14,27,.22);
}

.swpb-next-battle:disabled {
  opacity: .78;
  cursor: wait;
}

.swpb-battle-error {
  width: 100%;
  color: #ffd8db;
  font-size: 13px;
  line-height: 1.35;
}

.swpb-loading .swpb-card,
.swpb-loading .swpb-next-battle {
  pointer-events: none;
}

.swpb-loading .swpb-stage {
  opacity: .74;
}

@media (max-width: 680px) {
  .swpb-header-actions {
    margin-top: 12px;
    margin-bottom: 6px;
  }

  .swpb-next-battle {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 14px;
    font-size: 13px;
  }
}

/* v12 tournament flow */
.swpb-header-actions {
  min-height: 48px;
}

.swpb-next-battle[hidden] {
  display: none !important;
}

.swpb-progress {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto 14px;
}

.swpb-progress-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
  margin-bottom: 10px;
}

.swpb-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.swpb-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(194,225,255,.98) 0%, rgba(255,216,174,.98) 100%);
  box-shadow: 0 0 20px rgba(214,233,255,.45);
  transition: width .35s ease;
}

.swpb-stack {
  transition: opacity .25s ease, transform .25s ease;
}

.swpb-loading .swpb-stage {
  opacity: .82;
}

.swpb-card {
  cursor: pointer;
}

.swpb-card.swpb-card-picked .swpb-card-inner {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 0 0 1px rgba(182,214,255,.75), 0 22px 42px rgba(7, 14, 27, .18), 0 0 0 10px rgba(201,226,255,.10);
}

.swpb-stack-final {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: min(66vh, 720px);
  position: relative;
}

.swpb-stack-final .swpb-card {
  width: min(720px, 100%);
  max-width: min(720px, 100%);
}

.swpb-stack-final .swpb-card-inner {
  min-height: 0;
}

.swpb-card-winner .swpb-card-inner {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(225,236,255,.85), 0 34px 68px rgba(8, 14, 28, .24), 0 0 0 12px rgba(214,230,255,.10);
}

.swpb-card-winner .swpb-card-content {
  padding-top: 2px;
}

.swpb-card-winner .swpb-badge {
  background: linear-gradient(180deg, #eef5ff 0%, #dae7ff 100%);
  color: #45689f;
}

.swpb-is-final .swpb-hint,
.swpb-is-final .swpb-divider,
.swpb-is-final .swpb-progress {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.swpb-is-final .swpb-stage {
  margin-top: 8px;
}

.swpb-final-burst {
  position: absolute;
  inset: 12% 18%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.28) 0%, rgba(183,219,255,.18) 22%, rgba(255,220,183,.14) 40%, rgba(255,255,255,0) 68%);
  filter: blur(10px);
}

.swpb-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
}

.swpb-confetti-piece {
  position: absolute;
  top: -10%;
  width: 12px;
  height: 18px;
  border-radius: 4px;
  opacity: 0;
}

.swpb-confetti.is-active .swpb-confetti-piece {
  animation-name: swpb-confetti-fall;
  animation-timing-function: cubic-bezier(.23,.98,.39,.99);
  animation-fill-mode: forwards;
}

@keyframes swpb-confetti-fall {
  0% { opacity: 0; transform: translate3d(0,-10%,0) rotate(0deg); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(-24px,118vh,0) rotate(640deg); }
}

@media (max-width: 767px) {
  .swpb-progress {
    width: calc(100% - 28px);
    margin: 0 auto 10px;
  }

  .swpb-stack-final {
    min-height: auto;
  }

  .swpb-stack-final .swpb-card {
    width: 100%;
  }
}


/* v13 final: fixed equal-height cards with non-stretched media */
.swpb-stack { align-items: stretch; }
.swpb-card { align-self: stretch; }
.swpb-card-inner {
  height: 100%;
  min-height: 420px;
  grid-template-columns: minmax(0,1fr) clamp(220px, 35%, 300px);
  grid-template-rows: 1fr;
}
.swpb-card-content {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto auto minmax(0,1fr) auto;
}
.swpb-card-media {
  height: 100%;
  min-height: 296px;
  max-height: 296px;
  align-self: center;
}
.swpb-card-media img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
.swpb-wrap.swpb-battle-revealed .swpb-card.is-revealed { align-self: stretch; }
.swpb-wrap.swpb-battle-revealed .swpb-card-inner {
  height: 100%;
  min-height: 470px;
  grid-template-columns: minmax(0,1.1fr) 340px;
}
.swpb-wrap.swpb-battle-revealed .swpb-card-media {
  min-height: 360px;
  max-height: 360px;
}
@media (max-width: 980px) {
  .swpb-card-inner {
    min-height: 300px;
    grid-template-columns: minmax(0,1fr) 210px;
  }
  .swpb-card-media {
    min-height: 210px;
    max-height: 210px;
  }
  .swpb-wrap.swpb-battle-revealed .swpb-card-inner {
    min-height: 320px;
    grid-template-columns: minmax(0,1fr) 250px;
  }
  .swpb-wrap.swpb-battle-revealed .swpb-card-media {
    min-height: 240px;
    max-height: 240px;
  }
}
@media (max-width: 680px) {
  .swpb-card-inner,
  .swpb-wrap.swpb-battle-revealed .swpb-card-inner {
    min-height: 216px;
    grid-template-columns: minmax(0,1fr) 108px;
  }
  .swpb-card-media,
  .swpb-wrap.swpb-battle-revealed .swpb-card-media {
    min-height: 108px;
    max-height: 108px;
    height: 108px;
  }
}
@media (max-width: 420px) {
  .swpb-card-inner,
  .swpb-wrap.swpb-battle-revealed .swpb-card-inner {
    min-height: 194px;
    grid-template-columns: minmax(0,1fr) 96px;
  }
  .swpb-card-media,
  .swpb-wrap.swpb-battle-revealed .swpb-card-media {
    min-height: 96px;
    max-height: 96px;
    height: 96px;
  }
}

.swpb-popup-trigger-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.swpb-popup-link,
.swpb-popup-link-shortcode {
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .01em;
}

.swpb-popup-link:hover,
.swpb-popup-link-shortcode:hover {
  color: #fff;
  text-decoration: underline;
}