/* ===================================================================
   角色宇宙 · 角色图鉴库 (characters)
   深紫星空 · 角色卡网格 · 排行榜
   =================================================================== */

/* ===== 标题区 ===== */
.ch-head{position:relative;border-radius:28px;overflow:hidden;min-height:150px;
  border:1px solid var(--brd);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center}
.ch-head__bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(420px 200px at 18% 120%,rgba(255,190,120,.32),transparent 70%),
    radial-gradient(360px 220px at 82% -20%,rgba(150,110,255,.4),transparent 70%),
    linear-gradient(120deg,#2a1a5e 0%,#3a2278 45%,#28195e 100%)}
.ch-head__bg::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.5px 1.5px at 65% 60%,rgba(255,230,160,.8),transparent),
    radial-gradient(2px 2px at 85% 35%,rgba(255,255,255,.5),transparent),
    radial-gradient(1.5px 1.5px at 40% 75%,rgba(255,255,255,.6),transparent)}
.ch-head__copy{position:relative;z-index:1;text-align:center;padding:26px 16px}
.ch-head__copy h1{font-family:var(--font-disp);font-size:clamp(28px,3.4vw,42px);font-weight:700;letter-spacing:1px;
  background:linear-gradient(100deg,#ffe07a,#ffb13a);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 4px 26px rgba(255,176,58,.35)}
.ch-head__copy p{margin-top:6px;color:var(--ink-soft);font-size:clamp(13px,1.3vw,15.5px);letter-spacing:.5px}
.ch-head__create{position:absolute;top:16px;right:18px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  border:none;cursor:pointer;font-family:var(--font);font-size:14px;font-weight:600;color:#5a3410;
  padding:10px 20px;border-radius:30px;background:linear-gradient(135deg,var(--gold-1),var(--gold-2));
  box-shadow:0 12px 26px -8px rgba(255,176,58,.7);transition:.22s}
.ch-head__create svg{width:17px;height:17px}
.ch-head__create:hover{transform:translateY(-2px);box-shadow:0 18px 32px -8px rgba(255,176,58,.85)}

/* ===== 分类 Tab ===== */
.ch-tabs{display:flex;gap:10px;flex-wrap:wrap}
.ch-tab{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:var(--font);
  font-size:13.5px;font-weight:600;color:var(--ink-soft);padding:9px 18px;border-radius:16px;
  background:var(--glass);border:1px solid var(--brd);backdrop-filter:blur(10px);transition:.2s}
.ch-tab__ico{font-size:14px;line-height:1}
.ch-tab:hover{background:var(--glass-2);color:#fff;transform:translateY(-1px)}
.ch-tab.is-active{color:#5a3410;background:linear-gradient(135deg,var(--gold-1),var(--gold-2));
  border-color:rgba(255,255,255,.4);box-shadow:0 8px 20px -6px rgba(255,176,58,.55)}

/* ===== 角色卡网格 ===== */
.ch-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.cc{position:relative;border-radius:22px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,243,250,.92));
  border:1px solid rgba(255,255,255,.6);box-shadow:0 16px 38px -16px rgba(20,8,52,.7);
  transition:transform .25s,box-shadow .25s}
.cc:hover{transform:translateY(-6px);box-shadow:0 26px 50px -18px rgba(20,8,52,.85)}

.cc__art{position:relative;aspect-ratio:1/1.02;overflow:hidden;background:var(--art,#caa6f0)}
.cc__art img{width:100%;height:100%;object-fit:cover;object-position:center 28%;transition:transform .4s}
.cc:hover .cc__art img{transform:scale(1.05)}
.cc__fav{position:absolute;top:9px;right:9px;width:28px;height:28px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.82);color:#ff7eb6;font-size:15px;line-height:1;display:grid;place-items:center;
  box-shadow:0 4px 12px -3px rgba(255,95,168,.5);transition:.2s}
.cc__fav:hover{transform:scale(1.15);background:#fff;color:#ff5fa8}

.cc__body{padding:11px 13px 13px;display:flex;flex-direction:column;gap:7px;color:#4a2f6e}
.cc__name{font-family:var(--font-disp);font-size:16px;font-weight:700;color:#6a3a9e;display:flex;align-items:center;gap:5px}
.cc__crown{font-size:14px}
.cc__tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;line-height:1.5}
.tag--pink{color:#c43a86;background:rgba(255,126,182,.18)}
.tag--blue{color:#3a64c4;background:rgba(92,150,255,.18)}
.tag--green{color:#2e9460;background:rgba(60,190,120,.18)}
.tag--violet{color:#7048c4;background:rgba(140,108,255,.18)}
.tag--orange{color:#d2691e;background:rgba(255,150,80,.2)}
.cc__desc{font-size:11.5px;line-height:1.5;color:#7a6398;min-height:34px}

.cc__lv{display:flex;align-items:center;gap:8px;margin-top:1px}
.cc__lvbadge{flex:none;font-family:var(--font-disp);font-size:11px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#ff9ad0,#ff6fb0);padding:3px 9px;border-radius:11px;
  box-shadow:0 4px 10px -3px rgba(255,95,168,.6)}
.cc__lvmeta{flex:1;display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;color:#8a6caa}
.cc__lvmeta b{color:#6a3a9e;font-weight:700}
.cc__lvnum{font-family:var(--font-disp);font-size:11px;color:#a08bbf}
.cc__bar{height:8px;border-radius:8px;background:rgba(150,110,200,.16);overflow:hidden}
.cc__bar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#ff9ad0,#ff5fa8)}
.cc__bar--blue i{background:linear-gradient(90deg,#7fb0ff,#4d7cff)}
.cc__bar--green i{background:linear-gradient(90deg,#7fe0a8,#3cbe78)}
.cc__bar--violet i{background:linear-gradient(90deg,#b79aff,#8a6cff)}
.cc__bar--orange i{background:linear-gradient(90deg,#ffc08a,#ff8f3a)}

.cc__acts{display:flex;gap:7px;margin-top:3px}
.cc__btn{cursor:pointer;border:none;font-family:var(--font);font-weight:600;border-radius:13px;transition:.2s}
.cc__btn--main{flex:1;font-size:12.5px;padding:8px 0;color:#fff;
  background:linear-gradient(135deg,#9a7bff,#7b5cff);box-shadow:0 8px 18px -6px rgba(123,92,255,.55)}
.cc__btn--main:hover{transform:translateY(-2px);box-shadow:0 12px 22px -6px rgba(123,92,255,.7)}
.cc__btn--ghost{flex:none;width:36px;font-size:14px;background:rgba(140,108,255,.12);color:#7b5cff}
.cc__btn--ghost:hover{background:rgba(140,108,255,.22)}

/* ===== 底部三栏 ===== */
.ch-bottom{display:grid;grid-template-columns:1.6fr 1.1fr 1fr;gap:14px;align-items:stretch}

/* 创建横幅 */
.create-banner{position:relative;border-radius:24px;overflow:hidden;display:flex;align-items:center;
  border:1px solid var(--brd);box-shadow:var(--shadow);min-height:170px;
  background:linear-gradient(120deg,rgba(120,90,210,.55),rgba(90,70,180,.45))}
.create-banner__copy{position:relative;z-index:2;padding:22px 24px;max-width:58%}
.create-banner__copy h2{font-family:var(--font-disp);font-size:22px;font-weight:700;color:#fff;
  text-shadow:0 2px 12px rgba(40,20,90,.5)}
.create-banner__copy p{margin:8px 0 16px;font-size:13px;line-height:1.6;color:var(--ink-soft)}
.create-banner__btn{font-size:14px;padding:11px 24px}
.create-banner__art{position:absolute;right:0;top:0;height:100%;width:54%;object-fit:cover;object-position:center 38%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 32%);mask-image:linear-gradient(90deg,transparent,#000 32%)}

/* 排行榜 */
.rank-card{border-radius:24px;padding:18px 18px 16px;
  background:linear-gradient(170deg,rgba(86,60,165,.5),rgba(60,42,130,.42));
  border:1px solid var(--brd);box-shadow:var(--shadow);backdrop-filter:blur(10px);display:flex;flex-direction:column}
.rank-card__title{font-family:var(--font-disp);font-size:17px;font-weight:700;color:#fff;margin-bottom:12px;
  display:flex;align-items:center;gap:6px}
.rank-card__title span{font-size:14px}
.rank-list{list-style:none;display:flex;flex-direction:column;gap:8px;flex:1}
.rank-list li{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:13px;
  background:var(--glass);border:1px solid rgba(255,255,255,.08)}
.rank-no{flex:none;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
  font-family:var(--font-disp);font-size:12px;font-weight:700;color:var(--ink-soft);background:rgba(255,255,255,.1)}
.rank-no--1{color:#5a3410;background:linear-gradient(135deg,#ffe07a,#ffb13a)}
.rank-no--2{color:#3a2a55;background:linear-gradient(135deg,#e6e9f5,#b9c2dc)}
.rank-no--3{color:#fff;background:linear-gradient(135deg,#f0a98c,#d9764e)}
.rank-name{flex:1;font-size:13px;color:#fff;font-weight:500}
.rank-val{font-family:var(--font-disp);font-size:13px;font-weight:700;color:var(--gold-1)}
.rank-more{margin-top:12px;text-align:center;font-size:12.5px;color:var(--ink-soft);text-decoration:none;
  padding:8px;border-radius:12px;background:var(--glass);border:1px solid var(--brd);transition:.2s}
.rank-more:hover{color:#fff;background:var(--glass-2)}

/* 我的角色 */
.me-card{border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:13px;
  background:linear-gradient(170deg,rgba(110,150,230,.42),rgba(150,120,230,.4));
  border:1px solid var(--brd);box-shadow:var(--shadow);backdrop-filter:blur(10px)}
.me-card__title{font-family:var(--font-disp);font-size:17px;font-weight:700;color:#fff}
.me-card__char{display:flex;align-items:center;gap:12px}
.me-card__char img{width:62px;height:62px;border-radius:18px;object-fit:cover;object-position:center 22%;
  border:2px solid rgba(255,224,120,.8);box-shadow:0 0 16px rgba(255,224,120,.4)}
.me-card__meta{display:flex;flex-direction:column;gap:5px}
.me-card__meta strong{font-family:var(--font-disp);font-size:17px;color:#fff}
.me-card__lv{align-self:flex-start;font-family:var(--font-disp);font-size:11px;font-weight:700;color:#5a3410;
  background:var(--gold-1);padding:2px 9px;border-radius:9px}
.me-card__bar{height:9px;border-radius:9px;background:rgba(255,255,255,.16);overflow:hidden}
.me-card__bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#ffe07a,#ffb13a)}
.me-card__btn{margin-top:auto;font-size:14px;padding:11px 18px;justify-content:center}

/* ===== 响应式 ===== */
@media(max-width:1320px){.ch-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1080px){.ch-bottom{grid-template-columns:1fr 1fr}.create-banner{grid-column:1/-1}}
@media(max-width:760px){
  .ch-grid{grid-template-columns:repeat(2,1fr)}
  .ch-bottom{grid-template-columns:1fr}
  .ch-head__create{position:static;margin:0 auto 4px}
  .create-banner__copy{max-width:100%}
  .create-banner__art{display:none}
}