/* ============================================================
   jcc.css — 金铲铲之战陪玩页（前缀 jc-）
   设计签名：明亮棋盘网格风 —— 弈子卡 + 羁绊网络 + 阵容双列 + 段位双栏
   ============================================================ */

/* ---------- 首屏 ---------- */
.jc-hero {
    background:
        radial-gradient(circle at 12% 18%, rgba(251, 146, 60, .22), transparent 42%),
        radial-gradient(circle at 88% 82%, rgba(234, 88, 12, .14), transparent 46%),
        var(--white);
    border-bottom: 1px solid var(--ink-200);
    padding: 56px 0 60px;
}
.jc-hero-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 44px;
    align-items: center;
}
.jc-hero-left h1 {
    font-size: 38px;
    line-height: 1.25;
    margin: 18px 0 16px;
    letter-spacing: .5px;
}
.jc-hero-left h1 em {
    font-style: normal;
    color: var(--orange-600);
}
.jc-hero-sub {
    color: var(--ink-500);
    font-size: 15.5px;
    max-width: 560px;
}
.jc-hero-cta {
    display: flex;
    gap: 14px;
    margin-top: 26px;
    flex-wrap: wrap;
}
.jc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 28px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 15px;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.jc-btn-primary {
    background: linear-gradient(135deg, var(--orange-500), var(--orange-700));
    color: #fff;
    box-shadow: 0 10px 22px rgba(234, 88, 12, .35);
}
.jc-btn-primary:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(234, 88, 12, .45);
}
.jc-btn-ghost {
    border: 1.5px solid var(--orange-300);
    color: var(--orange-700);
    background: var(--orange-50);
}
.jc-btn-ghost:hover { background: var(--orange-100); color: var(--orange-700); }
.jc-hero-tags {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    flex-wrap: wrap;
}
.jc-hero-tags li {
    font-size: 12.5px;
    color: var(--ink-500);
    background: var(--ink-100);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
}

/* 首屏数据板 */
.jc-hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.jc-stat {
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    padding: 20px 18px;
    box-shadow: var(--shadow-xs);
}
.jc-stat b {
    display: block;
    font-size: 22px;
    color: var(--orange-700);
    margin-bottom: 4px;
}
.jc-stat span {
    font-size: 12.5px;
    color: var(--ink-500);
}

/* ---------- 通用区块 ---------- */
.jc-section { padding: 64px 0; }
.jc-section-soft { background: var(--orange-50); }
.jc-section-dark {
    background: linear-gradient(135deg, var(--ink-900), #292524);
}
.jc-section-head-light h2 { color: #fff; }
.jc-section-head-light p { color: var(--ink-300); }
.jc-eyebrow-light {
    background: rgba(255, 255, 255, .12);
    color: var(--orange-300);
}

/* ---------- 弈子卡网格 ---------- */
.jc-champs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.jc-champ {
    position: relative;
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    padding: 22px 20px 18px;
    box-shadow: var(--shadow-xs);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.jc-champ:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--orange-300);
}
.jc-cost {
    position: absolute;
    top: 18px;
    right: 18px;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}
.jc-cost-1 { background: #a8a29e; }
.jc-cost-2 { background: #16a34a; }
.jc-cost-3 { background: #2563eb; }
.jc-cost-4 { background: #9333ea; }
.jc-cost-5 {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    box-shadow: 0 4px 10px rgba(234, 88, 12, .4);
}
.jc-champ-name {
    display: block;
    font-size: 20px;
    margin-bottom: 8px;
}
.jc-champ-desc {
    font-size: 13.5px;
    color: var(--ink-500);
    min-height: 44px;
}
.jc-champ-traits {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.jc-champ-traits li {
    font-size: 12px;
    color: var(--orange-800);
    background: var(--orange-100);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
}

/* ---------- 羁绊网络示意 ---------- */
.jc-web {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    max-width: 860px;
    margin: 10px auto 0;
    padding: 20px 0;
}
.jc-web-center {
    grid-column: 2;
    grid-row: 2;
    background: linear-gradient(135deg, var(--orange-500), var(--orange-700));
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 16px 34px rgba(234, 88, 12, .4);
    z-index: 2;
}
.jc-web-center b { display: block; font-size: 20px; }
.jc-web-center span { font-size: 12.5px; opacity: .85; }
.jc-web-node {
    background: var(--white);
    border: 1.5px solid var(--orange-200);
    border-radius: var(--radius);
    padding: 18px 16px;
    text-align: center;
    box-shadow: var(--shadow-xs);
}
.jc-web-node b { display: block; font-size: 15.5px; color: var(--ink-900); }
.jc-web-node span { font-size: 12px; color: var(--ink-500); }
.jc-web-n1 { grid-column: 1; grid-row: 1; }
.jc-web-n2 { grid-column: 3; grid-row: 1; }
.jc-web-n3 { grid-column: 1; grid-row: 3; }
.jc-web-n4 { grid-column: 2; grid-row: 3; align-self: end; }
.jc-web-n5 { grid-column: 3; grid-row: 3; }
.jc-web-legend {
    display: flex;
    gap: 26px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 26px;
    font-size: 13px;
    color: var(--ink-500);
}
.jc-web-legend li { display: inline-flex; align-items: center; gap: 8px; }
.jc-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    display: inline-block;
}
.jc-dot-main { background: var(--orange-600); }
.jc-dot-sub { background: var(--orange-300); }
.jc-dot-off { background: var(--ink-300); }

/* ---------- 阵容双列 ---------- */
.jc-comps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.jc-comp {
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-top: 4px solid var(--orange-600);
    border-radius: var(--radius);
    padding: 26px 24px;
    box-shadow: var(--shadow-xs);
}
.jc-comp-badge-alt { border-top-color: #9333ea; }
.jc-comp-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.jc-comp-badge {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--orange-600);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
}
.jc-comp-head h3 { font-size: 22px; }
.jc-comp-rate {
    margin-left: auto;
    font-size: 13px;
    color: var(--orange-600);
    font-weight: 700;
}
.jc-comp-meta {
    display: flex;
    gap: 18px;
    margin: 16px 0;
    font-size: 13px;
    color: var(--ink-500);
    flex-wrap: wrap;
}
.jc-comp-traits {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.jc-comp-traits li {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--orange-800);
    background: var(--orange-100);
    border: 1px dashed var(--orange-300);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
}
.jc-comp-steps {
    list-style: none;
    border-left: 2px solid var(--orange-200);
    padding-left: 18px;
    margin-bottom: 20px;
}
.jc-comp-steps li {
    position: relative;
    font-size: 13.5px;
    color: var(--ink-700);
    padding: 6px 0;
}
.jc-comp-steps li::before {
    content: "";
    position: absolute;
    left: -23px;
    top: 13px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--orange-600);
}
.jc-comp-cta {
    font-weight: 700;
    font-size: 14px;
}

/* ---------- 段位双栏 ---------- */
.jc-ranks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}
.jc-rank-col {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-lg);
    padding: 22px;
}
.jc-rank-col-title {
    color: var(--orange-300);
    font-size: 15px;
    letter-spacing: 1px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(255, 255, 255, .18);
}
.jc-rank {
    display: grid;
    grid-template-columns: auto 64px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.jc-rank:last-child { border-bottom: none; }
.jc-rank b { color: #fff; font-size: 15px; width: 56px; }
.jc-rank-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
}
.jc-rank-iron { background: #78716c; }
.jc-rank-bronze { background: #b45309; }
.jc-rank-silver { background: #9ca3af; }
.jc-rank-gold { background: #facc15; }
.jc-rank-plat { background: #2dd4bf; }
.jc-rank-emerald { background: #34d399; }
.jc-rank-diamond { background: #60a5fa; }
.jc-rank-master { background: #c084fc; }
.jc-rank-grand { background: #f87171; }
.jc-rank-chall {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    box-shadow: 0 0 10px rgba(249, 115, 22, .8);
}
.jc-rank-desc {
    font-size: 12.5px;
    color: var(--ink-300);
}
.jc-rank-price {
    font-weight: 800;
    color: var(--orange-300);
    font-size: 14px;
}

/* ---------- 陪练流程 ---------- */
.jc-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 46px;
}
.jc-flow-step {
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    padding: 26px 22px;
    box-shadow: var(--shadow-xs);
}
.jc-flow-no {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    color: var(--orange-600);
    background: var(--orange-100);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    margin-bottom: 14px;
}
.jc-flow-step h3 { font-size: 17px; margin-bottom: 8px; }
.jc-flow-step p { font-size: 13.5px; color: var(--ink-500); }

.jc-final-cta {
    text-align: center;
    background: linear-gradient(120deg, var(--orange-50), var(--white));
    border: 1.5px dashed var(--orange-300);
    border-radius: var(--radius-lg);
    padding: 40px 24px;
}
.jc-final-cta h3 { font-size: 24px; margin-bottom: 8px; }
.jc-final-cta p { color: var(--ink-500); margin-bottom: 22px; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 960px) {
    .jc-hero { padding: 40px 0 44px; }
    .jc-hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .jc-hero-left h1 { font-size: 29px; }
    .jc-champs { grid-template-columns: repeat(2, 1fr); }
    .jc-web {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
    .jc-web-center {
        grid-column: 1 / -1;
        grid-row: auto;
        order: -1;
    }
    .jc-web-n1, .jc-web-n2, .jc-web-n3, .jc-web-n4, .jc-web-n5 {
        grid-column: auto;
        grid-row: auto;
        align-self: auto;
    }
    .jc-comps { grid-template-columns: 1fr; }
    .jc-ranks { grid-template-columns: 1fr; }
    .jc-flow { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .jc-section { padding: 44px 0; }
    .jc-hero-left h1 { font-size: 24px; }
    .jc-hero-sub { font-size: 14.5px; }
    .jc-btn { width: 100%; }
    .jc-hero-cta { flex-direction: column; }
    .jc-champs { grid-template-columns: 1fr; }
    .jc-hero-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .jc-stat { padding: 14px 12px; }
    .jc-stat b { font-size: 18px; }
    .jc-web { grid-template-columns: 1fr; }
    .jc-rank {
        grid-template-columns: auto 1fr auto;
        row-gap: 4px;
    }
    .jc-rank-desc { grid-column: 2 / -1; }
    .jc-comp-head h3 { font-size: 19px; }
    .jc-comp-rate { margin-left: 0; width: 100%; }
    .jc-final-cta h3 { font-size: 20px; }
}