/* =============================================
   重置 & 基础
   ============================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg:        #1a0810;
  --bg2:       #24101a;
  --bg3:       #301422;
  --pink:      #ff5f9e;
  --pink2:     #ff8dbf;
  --pink-dark: #d63075;
  --purple:    #ff80b3;
  --purple2:   #ff5599;
  --lavender:  #ffd6e8;
  --tech:      #ff99cc;
  --gold:      #ffcce0;
  --gold2:     #ff85b0;
  --white:     #fff5f9;
  --silver:    #ffd6e8;
  --muted:     #b06080;
  --border:    rgba(255, 100, 160, 0.22);
  --border2:   rgba(255, 100, 160, 0.10);
  --shadow-pink: 0 4px 24px rgba(255, 60, 130, 0.22);
  --radius:    16px;
  --radius-sm: 10px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: -apple-system, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* =============================================
   背景装饰泡泡
   ============================================= */
.deco-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bubble {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
}

.b1 { width: 200px; height: 200px; background: #ff1a66; top: -60px; right: -40px; animation: bfloat 10s ease-in-out infinite; }
.b2 { width: 140px; height: 140px; background: #ff4d88; top: 40%; left: -50px; animation: bfloat 14s ease-in-out infinite 2s; }
.b3 { width: 180px; height: 180px; background: #ff0055; bottom: 15%; right: -30px; animation: bfloat 12s ease-in-out infinite 1s; }
.b4 { width: 100px; height: 100px; background: #ff66aa; bottom: 5%;  left: 30%; animation: bfloat 9s ease-in-out infinite 3s; }
.b5 { width: 120px; height: 120px; background: #ff3377; top: 20%;  right: 5%;  animation: bfloat 11s ease-in-out infinite 0.5s; }

@keyframes bfloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-18px) scale(1.04); }
}

.star {
  position: absolute;
  color: var(--pink2);
  font-size: 12px;
  opacity: 0.4;
  animation: twinkle 3s ease-in-out infinite;
}

.s1 { top: 10%; left: 8%; font-size: 14px; animation-delay: 0s; }
.s2 { top: 18%; right: 12%; font-size: 10px; animation-delay: 1s; }
.s3 { top: 55%; left: 5%; font-size: 11px; animation-delay: 2s; }
.s4 { top: 70%; right: 8%; font-size: 13px; animation-delay: 0.5s; }
.s5 { top: 35%; right: 3%; font-size: 10px; animation-delay: 1.5s; }

.heart {
  position: absolute;
  color: var(--pink);
  opacity: 0.25;
  animation: twinkle 4s ease-in-out infinite;
  font-size: 16px;
}

.h1 { top: 25%; left: 4%; animation-delay: 0.3s; }
.h2 { top: 62%; right: 5%; animation-delay: 1.8s; }
.h3 { bottom: 30%; left: 50%; animation-delay: 0.9s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50%       { opacity: 0.55; transform: scale(1.2); }
}

/* =============================================
   Hero
   ============================================= */
.hero {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 50px 20px 40px;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 55% at 50% 5%, rgba(255,60,120,0.30) 0%, transparent 70%),
    radial-gradient(ellipse 50% 35% at 20% 100%, rgba(255,80,140,0.20) 0%, transparent 60%),
    linear-gradient(180deg, #260a16 0%, #1a0810 100%);
  z-index: -1;
}

/* 点点网格 */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,160,210,0.35) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.2;
  z-index: -1;
}

.hero-deco-top,
.hero-deco-bot {
  font-size: 11px;
  color: var(--pink);
  opacity: 0.5;
  letter-spacing: 4px;
  margin-bottom: 10px;
}

.hero-deco-bot { margin-top: 14px; margin-bottom: 0; }

.hero-avatar {
  font-size: 42px;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 14px rgba(255,140,200,0.7));
  animation: avatarBounce 3s ease-in-out infinite;
}

@keyframes avatarBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.club-name {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 4px;
  background: linear-gradient(135deg, #ffe0ee 0%, #ff6baa 35%, #ff1a66 70%, #ff6baa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  margin-bottom: 4px;
  filter: drop-shadow(0 0 22px rgba(255,40,110,0.55));
}

.club-sub {
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 6px;
  color: var(--lavender);
  margin-bottom: 10px;
  opacity: 0.9;
}

.club-en {
  font-size: 11px;
  color: var(--pink);
  letter-spacing: 2px;
  opacity: 0.7;
  margin-bottom: 16px;
  font-style: italic;
}

.hero-tags {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.htag {
  background: rgba(255, 120, 180, 0.15);
  border: 1px solid rgba(255, 140, 200, 0.35);
  color: var(--pink2);
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 11px;
  letter-spacing: .5px;
}

/* =============================================
   分类导航
   ============================================= */
.category-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: rgba(26, 8, 16, 0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border2);
}

.category-nav::-webkit-scrollbar { display: none; }

.cat-btn {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  transition: all .25s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.cat-btn:active { transform: scale(.94); }

.cat-btn.active {
  background: linear-gradient(135deg, #cc1155, #ff3377, #ff6699);
  border-color: var(--pink);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(255, 40, 110, 0.5), 0 2px 8px rgba(0,0,0,0.3);
}

/* =============================================
   主体
   ============================================= */
.price-main {
  position: relative;
  z-index: 1;
  padding: 20px 14px 50px;
}

.price-section {
  margin-bottom: 34px;
}

.price-section.hidden { display: none; }

/* Section 标题 */
.section-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 8px 0;
}

.sec-deco {
  color: var(--pink);
  font-size: 13px;
  opacity: 0.7;
  animation: twinkle 3s ease-in-out infinite;
}

.section-header h2 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 4px;
  color: var(--lavender);
}

/* =============================================
   英雄联盟 表格
   ============================================= */
.lol-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
  padding: 0 4px;
}

.tip-dot {
  font-size: 10px;
}

.tip-dot.fun  { color: var(--pink); }
.tip-dot.tech { color: var(--tech); }

.lol-table {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-pink);
}

.lol-header {
  display: grid;
  grid-template-columns: 1fr 80px 80px;
  background: linear-gradient(90deg, rgba(220,40,100,0.35), rgba(255,80,140,0.35));
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
}

.lol-header .col-rank,
.lol-header .col-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--pink2);
  letter-spacing: 1px;
}

.lol-header .col-val { text-align: center; }

.lol-row {
  display: grid;
  grid-template-columns: 1fr 80px 80px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border2);
  transition: background .2s;
}

.lol-row:active { background: rgba(255,130,190,0.05); }
.lol-row.last   { border-bottom: none; }

.col-rank {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--silver);
}

.col-val { text-align: center; }

.ri { font-size: 13px; }

/* 段位徽章 */
.rb {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
}

.rb.iron        { background: rgba(160,120,100,.2); border: 1px solid rgba(200,150,120,.35); color: #d4b0a0; }
.rb.diamond     { background: rgba(255,120,180,.18); border: 1px solid rgba(255,150,200,.4); color: #ffb3d4; }
.rb.master      { background: rgba(255,60,130,.18);  border: 1px solid rgba(255,90,160,.4);  color: #ff99cc; }
.rb.grandmaster { background: rgba(220,20,80,.18);   border: 1px solid rgba(255,60,120,.4);  color: #ff6699; }
.rb.challenger  { background: rgba(255,180,210,.15); border: 1px solid rgba(255,200,225,.35); color: #ffe0ee; }

/* 价格标签 */
.pt {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
}

.pt.fun {
  background: rgba(255, 60, 130, 0.18);
  border: 1px solid rgba(255, 100, 160, 0.38);
  color: var(--pink);
}

.pt.tech {
  background: rgba(255, 120, 170, 0.18);
  border: 1px solid rgba(255, 150, 190, 0.38);
  color: var(--tech);
}

.slash {
  color: var(--muted);
  font-size: 14px;
  opacity: 0.5;
}

/* =============================================
   其他游戏
   ============================================= */
.other-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cute-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 12px;
  text-align: center;
  transition: transform .2s;
  position: relative;
  overflow: hidden;
}

.cute-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pink), var(--purple), transparent);
  opacity: 0.6;
}

.cute-card:active { transform: scale(.97); }

.cute-card.wide   { grid-column: span 2; }

.cute-card-icon {
  font-size: 22px;
  margin-bottom: 5px;
}

.cute-card-name {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border2);
}

.cute-prices {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cute-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.cp-type {
  font-size: 11px;
  color: var(--muted);
}

.cp-val {
  font-size: 16px;
  font-weight: 700;
}

.cp-val.fun  { color: var(--pink); }
.cp-val.tech { color: var(--tech); }

.cp-val em {
  font-style: normal;
  font-size: 10px;
  color: var(--muted);
  margin-left: 1px;
}

.cute-big-price {
  font-size: 22px;
  font-weight: 900;
  margin-top: 4px;
}

.cute-big-price.pink { color: var(--pink); }

.cute-big-price em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  margin-left: 2px;
}

/* 角色药丸 */
.role-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.role-pill {
  display: flex;
  align-items: baseline;
  gap: 4px;
  background: rgba(255, 120, 180, 0.12);
  border: 1px solid rgba(255, 140, 200, 0.3);
  border-radius: 20px;
  padding: 5px 14px;
}

.role-n {
  font-size: 13px;
  color: var(--silver);
  font-weight: 600;
}

.role-p {
  font-size: 15px;
  font-weight: 700;
  color: var(--pink);
}

.role-p em {
  font-style: normal;
  font-size: 10px;
  color: var(--muted);
}

/* 头盔单 */
.helmet.cute-card { text-align: left; }

.helmet-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.helmet-item {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 10px;
  text-align: center;
}

.helmet-type {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

.helmet-type.pink { color: var(--pink); }

.helmet-val {
  font-size: 20px;
  font-weight: 800;
}

.helmet-val.gold { color: #ffaacc; }
.helmet-val.pink { color: var(--pink); }

.helmet-val em {
  font-style: normal;
  font-size: 10px;
  color: var(--muted);
}

.helmet-divider {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
  opacity: 0.5;
}

/* =============================================
   冠仪
   ============================================= */
.crown-tip {
  font-size: 12px;
  color: var(--pink);
  text-align: center;
  margin-bottom: 14px;
  opacity: 0.8;
}

.crown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.crown-card {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 12px 14px;
  text-align: center;
  overflow: hidden;
  transition: transform .2s;
  animation: fadeInUp .4s ease both;
}

.crown-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pink), transparent);
  opacity: 0.5;
}

.crown-card:active { transform: scale(.97); }

/* 周冠 */
.crown-card.week {
  border-color: rgba(255, 150, 200, 0.3);
}

/* 月冠 */
.crown-card.month {
  border-color: rgba(255, 80, 150, 0.4);
}

.crown-card.month::before {
  background: linear-gradient(90deg, transparent, var(--purple), transparent);
}

/* 年冠 */
.crown-card.year {
  border-color: rgba(255, 100, 160, 0.5);
}

.crown-card.year::before {
  background: linear-gradient(90deg, transparent, #ff5599, transparent);
}

/* 唯一款 */
.crown-card.unique {
  background: linear-gradient(145deg, #2a0818, #3a0e22);
  box-shadow: 0 0 20px rgba(255, 60, 130, 0.18);
}

.crown-card.unique.week {
  box-shadow: 0 0 20px rgba(255, 60, 130, 0.20);
}

.crown-card.unique.year {
  background: linear-gradient(145deg, #2a0f14, #3a1520);
  box-shadow: 0 0 20px rgba(255, 80, 150, 0.20);
}

.crown-badge {
  position: absolute;
  top: 8px;
  right: -2px;
  background: linear-gradient(135deg, #cc1155, #ff3377);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 10px 2px 8px;
  border-radius: 0 0 0 10px;
  letter-spacing: .5px;
}

.crown-badge.gold-badge {
  background: linear-gradient(135deg, #dd2266, #ff4488);
}

.crown-emoji {
  font-size: 22px;
  margin-bottom: 4px;
}

.crown-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--lavender);
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.crown-val {
  font-size: 28px;
  font-weight: 900;
  color: var(--pink);
  line-height: 1;
}

.crown-val span {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 1px;
}

.crown-val.gold { color: #ffb3cc; }

/* =============================================
   好友位
   ============================================= */
.friend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.friend-card {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 12px 14px;
  text-align: center;
  transition: transform .2s;
  overflow: hidden;
  animation: fadeInUp .4s ease both;
}

.friend-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pink), var(--purple), transparent);
  opacity: 0.5;
}

.friend-card:active { transform: scale(.97); }

.friend-card.special {
  background: linear-gradient(145deg, #2a0818, #3a0e22);
  border-color: rgba(255, 80, 150, 0.4);
  box-shadow: 0 0 16px rgba(255, 60, 130, 0.16);
}

.friend-sparkle {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 12px;
  animation: twinkle 2s ease-in-out infinite;
}

.friend-emoji {
  font-size: 24px;
  margin-bottom: 6px;
}

.friend-name {
  font-size: 12px;
  color: var(--silver);
  margin-bottom: 8px;
  line-height: 1.4;
}

.friend-price {
  font-size: 26px;
  font-weight: 900;
  color: var(--pink);
  line-height: 1;
}

.friend-price span {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

/* =============================================
   底部
   ============================================= */
.footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 24px 20px 44px;
}

.footer-deco {
  font-size: 12px;
  color: var(--pink);
  opacity: 0.45;
  letter-spacing: 4px;
  margin-bottom: 12px;
  animation: twinkle 4s ease-in-out infinite;
}

.footer-text {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.footer-bow {
  font-size: 18px;
  opacity: 0.45;
  letter-spacing: 6px;
}

/* =============================================
   回到顶部
   ============================================= */
.back-top {
  position: fixed;
  bottom: 22px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #cc1155, #ff3377);
  color: #fff;
  font-size: 17px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(255, 100, 180, 0.5);
  opacity: 0;
  transform: translateY(20px);
  transition: all .3s;
  z-index: 200;
  pointer-events: none;
}

.back-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* =============================================
   动画
   ============================================= */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.crown-grid .crown-card:nth-child(1) { animation-delay: .05s; }
.crown-grid .crown-card:nth-child(2) { animation-delay: .10s; }
.crown-grid .crown-card:nth-child(3) { animation-delay: .15s; }
.crown-grid .crown-card:nth-child(4) { animation-delay: .20s; }
.crown-grid .crown-card:nth-child(5) { animation-delay: .25s; }
.crown-grid .crown-card:nth-child(6) { animation-delay: .30s; }

.friend-grid .friend-card:nth-child(1) { animation-delay: .05s; }
.friend-grid .friend-card:nth-child(2) { animation-delay: .10s; }
.friend-grid .friend-card:nth-child(3) { animation-delay: .15s; }
.friend-grid .friend-card:nth-child(4) { animation-delay: .20s; }

/* =============================================
   响应式
   ============================================= */
@media (min-width: 480px) {
  .club-name { font-size: 38px; }
}

@media (min-width: 768px) {
  .crown-grid  { grid-template-columns: repeat(3, 1fr); }
  .friend-grid { grid-template-columns: repeat(4, 1fr); }
  .price-main  { padding: 24px 20px 56px; }
}