/* ==========================================================================
   解压消消乐 · 500关完整版 (Conveyor Pig Block Shooter) 样式表
   还原实机录屏 UI + 完整四大主页分页（商店皮肤、500关高塔主页、10章选关与图鉴、排行成就）
   ========================================================================== */

:root {
  --home-blue-top: #257de0;
  --home-blue-bot: #47a2ff;
  --game-bg: #424c6e;
  --btn-green-top: #39e639;
  --btn-green-bot: #16b81c;
  --btn-green-lip: #0d8012;
  --btn-purple-top: #a545ff;
  --btn-purple-bot: #7a1fe6;
  --btn-purple-lip: #4e0ca3;
  --font: "Nunito", "SF Pro Rounded", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  background: #1a2033;
  color: #ffffff;
}

.app-frame {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--game-bg);
  overflow: hidden;
}

@media (min-width: 520px) and (min-height: 720px) {
  html:not(.is-embedded) body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 30%, #2e3b5e 0%, #121726 100%);
  }
  html:not(.is-embedded) .app-frame {
    height: min(95dvh, 890px);
    border-radius: 34px;
    border: 4px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
  }
}

html.is-embedded .back-hub-pill {
  display: none !important;
}

/* ==================== 1. 局内战斗界面 ==================== */
.game-view {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #475277 0%, #3d4769 65%, #343d5c 100%);
}

.game-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 4px;
  flex-shrink: 0;
  z-index: 5;
}

.pause-circle-btn {
  appearance: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid #a8c5ff;
  background: linear-gradient(180deg, #6289d6 0%, #4466b0 100%);
  color: #ffffff;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 0 #283d70;
}

.pause-circle-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #283d70;
}

.level-header-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.level-header-pill {
  padding: 4px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, #6382c4 0%, #4965a3 100%);
  border: 2px solid #91b2f2;
  font-size: 15px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 0 3px 0 #2b3e6b;
}

.level-sub-badge {
  font-size: 11px;
  font-weight: 800;
  color: #dbeaff;
  opacity: 0.92;
  white-space: nowrap;
}

.top-mini-tools {
  display: flex;
  gap: 5px;
}

.mini-tool-btn {
  appearance: none;
  height: 32px;
  padding: 0 9px;
  border-radius: 999px;
  border: 2px solid rgba(168, 197, 255, 0.65);
  background: rgba(34, 45, 78, 0.68);
  color: #ffffff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.canvas-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
}

#gameCanvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: manipulation;
  cursor: pointer;
}

.game-toast {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(18, 24, 44, 0.94);
  border: 1.5px solid rgba(145, 178, 242, 0.65);
  color: #ffffff;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  z-index: 20;
}

.game-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 底部四个圆形技能槽 */
.bottom-locks-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 2px 10px 10px;
  flex-shrink: 0;
  z-index: 5;
}

.lock-skill-btn {
  position: relative;
  appearance: none;
  width: 78px;
  height: 70px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  font-family: inherit;
}

.lock-disc {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #6a82b8 0%, #44588a 70%, #2f3e66 100%);
  border: 3px solid #9ab4e8;
  box-shadow:
    0 4px 0 #1f2a47,
    inset 0 2px 4px rgba(255, 255, 255, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease;
}

.lock-skill-btn:active .lock-disc {
  transform: translateY(2px);
}

.lock-icon {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 2px;
}

.skill-badge-count {
  background: linear-gradient(180deg, #43e843, #19b31f);
  border: 1.5px solid #ffffff;
  border-radius: 999px;
  padding: 0 6px;
  font-size: 9.5px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 4px;
}

.lock-ribbon {
  position: absolute;
  bottom: 1px;
  background: linear-gradient(180deg, #5e78b0 0%, #3e5384 100%);
  border: 1.5px solid #8ba7e0;
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 900;
  color: #ffffff;
  white-space: nowrap;
}

/* ==================== 2. 蓝底主页与四大分页系统 ==================== */
.home-view {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at 50% 45%, rgba(110, 195, 255, 0.45) 0%, transparent 65%),
    linear-gradient(180deg, var(--home-blue-top) 0%, var(--home-blue-bot) 100%);
}

.home-view::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image:
    repeating-linear-gradient(30deg, #ffffff 0, #ffffff 2px, transparent 2px, transparent 34px),
    repeating-linear-gradient(150deg, #ffffff 0, #ffffff 2px, transparent 2px, transparent 34px);
}

.home-view[hidden] {
  display: none !important;
}

.home-top-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 6px;
  flex-shrink: 0;
}

.home-user-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.back-hub-pill {
  text-decoration: none;
  background: rgba(16, 56, 118, 0.55);
  border: 2px solid rgba(140, 205, 255, 0.65);
  border-radius: 999px;
  padding: 5px 11px;
  color: #ffffff;
  font-weight: 900;
  font-size: 12.5px;
  white-space: nowrap;
}

.avatar-box {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 2.5px solid #ffffff;
  background: linear-gradient(135deg, #ffd280, #ff8575);
  display: grid;
  place-items: center;
  font-size: 22px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.res-pills {
  display: flex;
  align-items: center;
  gap: 8px;
}

.res-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 56, 118, 0.55);
  border: 2px solid rgba(140, 205, 255, 0.65);
  border-radius: 999px;
  padding: 3px 6px 3px 8px;
  font-weight: 900;
  font-size: 13.5px;
  cursor: pointer;
}

.coin-badge {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe259, #ffa751);
  border: 1.5px solid #7d4800;
  color: #7d4800;
  font-size: 11px;
  font-weight: 900;
  display: grid;
  place-items: center;
}

.heart-badge {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #ff4757;
  color: #ffffff;
  font-size: 11px;
  display: grid;
  place-items: center;
}

.plus-circle {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: linear-gradient(180deg, #52f24b, #1cb816);
  color: #ffffff;
  font-size: 13px;
  line-height: 1;
  display: grid;
  place-items: center;
  font-weight: 900;
}

/* 主页中间动态切换容器 */
.home-tab-body {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tab-panel {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 14px 14px;
  overflow-y: auto;
}

#tabHomePanel {
  justify-content: center;
  overflow: hidden;
}

.tab-panel[hidden],
.tab-panel:not(.active) {
  display: none !important;
}

/* 左上角「小程序福利」悬浮礼盒 (复刻 00:01) */
.welfare-float-btn {
  position: absolute;
  top: 6px;
  left: 14px;
  z-index: 5;
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: inherit;
}

.welfare-icon,
.gift-icon {
  font-size: 34px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  animation: giftBounce 2.2s ease-in-out infinite;
}

@keyframes giftBounce {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-5px) rotate(4deg); }
}

.welfare-label,
.welfare-float-btn > span:last-child {
  background: rgba(16, 52, 112, 0.78);
  border: 1.5px solid #8cc7ff;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10.5px;
  font-weight: 900;
  color: #ffffff;
}

.home-tower-area {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 高塔上下翻页按钮 */
.tower-pager {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tower-pager-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.pager-btn,
.pager-mini-btn {
  appearance: none;
  border-radius: 999px;
  border: 1.8px solid #99ccff;
  background: rgba(20, 66, 140, 0.68);
  color: #ffffff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 12px;
  cursor: pointer;
}

.chapter-banner-pill {
  position: relative;
  z-index: 2;
  background: rgba(16, 56, 118, 0.62);
  border: 2px solid rgba(150, 210, 255, 0.75);
  border-radius: 999px;
  padding: 5px 18px;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 10px;
}

.tower-pipe {
  position: absolute;
  top: 12%;
  bottom: 24%;
  width: 16px;
  background: linear-gradient(90deg, #279b24 0%, #80ff57 50%, #1f851c 100%);
  border-left: 2px solid #145912;
  border-right: 2px solid #145912;
  z-index: 0;
}

.hex-nodes-col {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.hex-node {
  appearance: none;
  width: 64px;
  height: 72px;
  border: none;
  background: linear-gradient(180deg, #74b9ff 0%, #2e7de0 100%);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease;
}

.hex-node.current {
  width: 82px;
  height: 92px;
  font-size: 28px;
  background: linear-gradient(180deg, #9be7ff 0%, #2986f5 60%, #1b5ec2 100%);
  filter: drop-shadow(0 0 14px rgba(120, 235, 255, 0.9));
  animation: pulseHex 2s ease-in-out infinite;
}

.hex-node.passed,
.hex-node.cleared {
  background: linear-gradient(180deg, #62f26b 0%, #20a829 100%);
}

.hex-node.locked {
  opacity: 0.72;
  background: linear-gradient(180deg, #5d82b8 0%, #385585 100%);
}

@keyframes pulseHex {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.green-start-btn {
  position: relative;
  z-index: 2;
  appearance: none;
  padding: 12px 44px;
  border-radius: 999px;
  border: 3px solid #88ff70;
  background: linear-gradient(180deg, var(--btn-green-top) 0%, var(--btn-green-bot) 100%);
  box-shadow:
    0 6px 0 var(--btn-green-lip),
    0 12px 24px rgba(0, 40, 90, 0.38);
  font-family: inherit;
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.green-start-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--btn-green-lip);
}

/* 商店面板 / 选关面板 / 排行面板内部卡片容器 */
.panel-card-shell,
.panel-card {
  width: 100%;
  background: rgba(236, 245, 255, 0.95);
  color: #1c3b73;
  border: 2.5px solid #b5d6ff;
  border-radius: 20px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(10, 36, 84, 0.22);
}

.panel-header-row,
.panel-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.panel-title,
.panel-title-bar h3 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 900;
  color: #154284;
}

.scroll-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.skin-grid,
.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.skin-item-card,
.shop-item-card {
  background: #ffffff;
  color: #1c3b73;
  border-radius: 14px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  border: 2.5px solid #cce0ff;
}

.skin-item-card.equipped,
.shop-item-card.equipped {
  border-color: #29cc2f;
  background: #f2fff4;
}

.shop-item-card h4 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 900;
}

.shop-item-card p {
  margin: 0;
  font-size: 11px;
  color: #4a6799;
  font-weight: 700;
  line-height: 1.3;
}

.skin-action-btn,
.buy-btn {
  appearance: none;
  width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(180deg, #39e639, #16b81c);
  box-shadow: 0 3px 0 #0d8012;
  color: #ffffff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.buy-btn.equipped {
  background: linear-gradient(180deg, #63b3ff, #2b7de9);
  box-shadow: 0 3px 0 #1854a8;
}

/* 10大章节切换胶囊 */
.chapter-chips-row,
.chapter-tabs-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.chapter-chip {
  appearance: none;
  border: 1.5px solid #99c2ff;
  background: #e1eeff;
  color: #1c498f;
  border-radius: 999px;
  padding: 5px 11px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.chapter-chip.active {
  background: linear-gradient(180deg, #3b8eff, #1e64d6);
  color: #ffffff;
  border-color: #1e64d6;
}

.levels-grid-50,
.levels-grid-box {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  max-height: 50dvh;
  overflow-y: auto;
  padding-right: 2px;
}

.lvl-cell-btn,
.lvl-btn-item {
  appearance: none;
  border: 2px solid #b8d4ff;
  background: #ffffff;
  color: #1c3b73;
  border-radius: 12px;
  padding: 7px 2px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.lvl-cell-btn.current,
.lvl-btn-item.current {
  background: linear-gradient(180deg, #48eb48, #19b81e);
  color: #ffffff;
  border-color: #20a829;
}

.lvl-btn-item.cleared {
  background: #eef8ff;
  border-color: #63b3ff;
}

.lvl-cell-btn.locked,
.lvl-btn-item.locked {
  opacity: 0.65;
  background: #dbe7f7;
  color: #5a749e;
}

.lvl-star-dot {
  font-size: 9.5px;
  font-weight: 800;
  opacity: 0.92;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-height: 52dvh;
  overflow-y: auto;
  padding-right: 2px;
}

.collection-card {
  background: #ffffff;
  border: 2px solid #c5dcff;
  border-radius: 12px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  color: #1c3b73;
  cursor: pointer;
  font-size: 12px;
}

.collection-card span {
  font-size: 10.5px;
  color: #526b9c;
  font-weight: 700;
}

/* 统计与排行榜条目 */
.stats-summary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.stat-pill-box {
  background: #ffffff;
  border: 2px solid #c5dcff;
  border-radius: 12px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #1c3b73;
}

.stat-pill-box b {
  font-size: 18px;
  font-weight: 900;
  color: #1967d2;
}

.stat-pill-box span {
  font-size: 11px;
  font-weight: 800;
  color: #526b9c;
}

.rank-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rank-row {
  background: #ffffff;
  color: #1c3b73;
  border: 1.5px solid #cce0ff;
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  font-size: 12.5px;
}

.rank-row.me {
  background: linear-gradient(90deg, #fff6b3, #ffe066);
  border: 2px solid #f59f00;
}

.rank-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #257de0;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
}

.rank-name {
  flex: 1;
  margin: 0 8px;
  text-align: left;
}

.rank-score {
  font-size: 12px;
  color: #1d58b8;
  font-weight: 900;
}

.guide-list-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guide-item-card {
  background: #ffffff;
  border: 1.5px solid #c5dcff;
  border-radius: 12px;
  padding: 10px 12px;
  color: #1c3b73;
}

.guide-item-card h4 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 900;
  color: #154587;
}

.guide-item-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #3b5582;
  font-weight: 700;
}

/* 底部 4 栏导航条 */
.home-bottom-nav {
  position: relative;
  z-index: 2;
  height: 72px;
  background: linear-gradient(180deg, #2776d6 0%, #1b58ab 100%);
  border-top: 2.5px solid #6cb4ff;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  padding: 0 8px;
  flex-shrink: 0;
}

.nav-tab-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: #d4e8ff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 900;
  height: 100%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.nav-tab-btn.active {
  background: linear-gradient(180deg, rgba(120, 195, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 100%);
  color: #ffffff;
}

.red-pig-badge {
  width: 44px;
  height: 44px;
  margin-top: -16px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ff634f 0%, #d92516 100%);
  border: 2.5px solid #ffb3a8;
  box-shadow: 0 4px 0 #871107;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.red-pig-eyes {
  display: flex;
  gap: 11px;
}

.red-pig-eyes span {
  width: 5.5px;
  height: 5.5px;
  border-radius: 50%;
  background: #141824;
}

.red-pig-snout {
  width: 10px;
  height: 12px;
  border-radius: 50%;
  background: #420804;
  border: 2px solid #ff9487;
  margin-top: 2px;
}

/* ==================== 3. 模态弹窗 ==================== */
.modal-mask {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(12, 20, 38, 0.68);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.modal-mask[hidden] {
  display: none !important;
}

.wx-dialog {
  position: relative;
  width: 100%;
  max-width: 370px;
  background: linear-gradient(180deg, #a6cbfc 0%, #86b4f7 100%);
  border: 3.5px solid #d4e7ff;
  border-radius: 28px;
  padding: 28px 18px 22px;
  box-shadow:
    0 10px 0 #4d78ba,
    0 22px 48px rgba(0, 0, 0, 0.48);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.wx-ribbon {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #4fa0ff 0%, #2772e0 100%);
  border: 3px solid #99ccff;
  border-radius: 14px;
  padding: 6px 34px;
  font-size: 19px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
  box-shadow: 0 4px 0 #194da3;
  white-space: nowrap;
}

.wx-close-btn {
  position: absolute;
  top: -12px;
  right: -8px;
  appearance: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid #b8d8ff;
  background: linear-gradient(180deg, #6ca8ff 0%, #3a75d4 100%);
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 3px 0 #1f4b94;
}

.wx-inner-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 20px;
  padding: 16px 14px;
  color: #2c436e;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.booster-select-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

.booster-card {
  appearance: none;
  border: 2.5px solid #9abdf0;
  background: linear-gradient(180deg, #8fb8f5 0%, #6897e0 100%);
  border-radius: 16px;
  padding: 12px 8px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #ffffff;
  font-family: inherit;
}

.booster-card.selected {
  border-color: #39e639;
  box-shadow: 0 0 0 3px rgba(57, 230, 57, 0.45);
}

.booster-tag {
  background: rgba(20, 42, 82, 0.65);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 900;
}

.purple-5x-btn {
  appearance: none;
  padding: 11px 28px;
  border-radius: 999px;
  border: 2.5px solid #d19eff;
  background: linear-gradient(180deg, var(--btn-purple-top) 0%, var(--btn-purple-bot) 100%);
  box-shadow: 0 5px 0 var(--btn-purple-lip);
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}