/* =================================
   魔法等级体系专属样式
   ================================= */

/* 当前等级状态卡 */
.magic-rank-status {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
    padding: 1.8rem 2rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, rgba(212,175,55,0.08) 0%, rgba(22,22,26,0.9) 60%);
    border: 1px solid rgba(212,175,55,0.25);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.magic-rank-status::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
}

.rank-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rank-icon { font-size: 2.8rem; }

.rank-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #f8f9fa;
    margin: 0 0 0.25rem;
}

.rank-college {
    font-size: 0.78rem;
    color: #d4af37;
    margin: 0;
}

.rank-level {
    text-align: center;
}

.level-number {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: #64748b;
    display: block;
}

.level-value {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 700;
    color: #d4af37;
    line-height: 1;
    text-shadow: 0 0 20px rgba(212,175,55,0.4);
}

.rank-experience {
    flex: 1;
    min-width: 0;
}

.exp-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.exp-bar {
    height: 6px;
    background: rgba(255,255,255,0.07);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.exp-fill {
    height: 100%;
    background: linear-gradient(90deg, #d4af37, #f8d97a);
    border-radius: 3px;
    position: relative;
}

.exp-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 2s infinite;
}

.rank-stats {
    display: flex;
    gap: 1.5rem;
}

.rank-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.stat-emoji { font-size: 1.2rem; }

.rank-stats .stat-value {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: #e2e8f0;
}

.rank-stats .stat-label {
    font-size: 0.68rem;
    color: #64748b;
}

/* =================================
   八大职阶 - 时间线式布局
   ================================= */
.magic-ranks-container {
    margin-bottom: 1.5rem;
}

.ranks-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 2.5rem;
}

.ranks-grid::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: linear-gradient(to bottom,
        #eab308 0%,
        #f97316 15%,
        #ef4444 28%,
        #a855f7 42%,
        #3b82f6 55%,
        #22c55e 68%,
        rgba(255,255,255,0.2) 82%,
        rgba(255,255,255,0.05) 100%
    );
}

.rank-card {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    transition: all 0.2s ease;
    position: relative;
    margin-bottom: 4px;
    border: 1px solid transparent;
}

.rank-card::before {
    content: '';
    position: absolute;
    left: -2.05rem;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--dot-color, rgba(255,255,255,0.2));
    background: var(--color-bg-primary);
    z-index: 1;
}

.rank-card.apprentice  { --dot-color: #eab308; }
.rank-card.junior      { --dot-color: #f97316; }
.rank-card.middle      { --dot-color: #ef4444; }
.rank-card.senior      { --dot-color: #a855f7; }
.rank-card.grandmaster { --dot-color: #3b82f6; }
.rank-card.legendary   { --dot-color: #22c55e; }
.rank-card.great-wizard{ --dot-color: rgba(255,255,255,0.4); }
.rank-card.god         { --dot-color: rgba(255,255,255,0.15); }

.rank-card.current-rank {
    background: rgba(34,197,94,0.06);
    border-color: rgba(34,197,94,0.25);
}

.rank-card.current-rank::before {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34,197,94,0.6);
    width: 12px;
    height: 12px;
    left: -2.1rem;
}

.rank-card:not(.current-rank):hover {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}

.rank-level-small {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    color: #475569;
    white-space: nowrap;
}

.rank-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e2e8f0;
}

.rank-card.great-wizard .rank-name,
.rank-card.god .rank-name {
    color: #475569;
}

.rank-college-small {
    font-size: 0.72rem;
    color: #64748b;
}

.rank-status {
    font-size: 0.72rem;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    white-space: nowrap;
}

.rank-status.current {
    color: #64748b;
}

.rank-status.active {
    background: rgba(34,197,94,0.12);
    color: #22c55e;
    border: 1px solid rgba(34,197,94,0.25);
}

.rank-status.locked {
    color: #334155;
}

/* =================================
   底部双栏：EXP规则 + 里程碑
   ================================= */
.rank-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* EXP 规则 */
.magic-rules {
    padding: 1.4rem;
}

.magic-rules .section-title,
.magic-milestones .section-title {
    font-size: 0.72rem;
    letter-spacing: 2px;
    font-weight: 600;
    color: #d4af37;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 1rem;
    text-align: left;
    background: none;
    -webkit-text-fill-color: #d4af37;
}

.rules-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rule-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    transition: all 0.2s;
}

.rule-item:hover {
    background: rgba(212,175,55,0.05);
    border-color: rgba(212,175,55,0.12);
}

.rule-emoji { font-size: 1.1rem; flex-shrink: 0; }

.rule-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    gap: 0.5rem;
}

.rule-action {
    font-size: 0.8rem;
    color: #94a3b8;
}

.rule-exp {
    font-size: 0.75rem;
    font-weight: 600;
    color: #d4af37;
    font-family: var(--font-heading);
    white-space: nowrap;
}

/* 里程碑 */
.magic-milestones {
    padding: 1.4rem;
}

.milestones-grid {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.milestone-item {
    display: grid;
    grid-template-columns: 56px 1fr 24px;
    align-items: center;
    gap: 0.7rem;
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.milestone-item.completed {
    opacity: 0.5;
}

.milestone-item.current {
    background: rgba(212,175,55,0.07);
    border-color: rgba(212,175,55,0.2);
}

.milestone-item.locked {
    opacity: 0.3;
}

.milestone-item:hover {
    background: rgba(255,255,255,0.03);
}

.milestone-level {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    color: #475569;
}

.milestone-item.current .milestone-level {
    color: #d4af37;
}

.milestone-reward {
    font-size: 0.8rem;
    color: #94a3b8;
}

.milestone-item.current .milestone-reward {
    color: #e2e8f0;
    font-weight: 600;
}

.milestone-status {
    font-size: 0.75rem;
    text-align: center;
}

/* =================================
   响应式
   ================================= */
@media (max-width: 900px) {
    .magic-rank-status {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .rank-level {
        text-align: right;
    }

    .rank-experience {
        grid-column: 1 / -1;
    }

    .rank-stats {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .rank-bottom-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .rank-card {
        grid-template-columns: 70px 1fr;
    }

    .rank-college-small { display: none; }
}