/* HERO DATABASE ADDITIONS */
.hero-database .guide-card,
.hero-profile-page .guide-card {
    scroll-margin-top: 90px;
}

.hero-category-grid {
    max-width: 1180px;
    margin: 24px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.hero-category-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 120px;
    padding: 22px;
    text-decoration: none;
    color: #fff;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(22, 26, 33, 0.96), rgba(8, 10, 14, 0.96));
    border: 1px solid rgba(255, 176, 0, 0.22);
    box-shadow: inset 0 0 18px rgba(255, 90, 0, 0.04);
    transition: 0.2s ease;
}

.hero-category-card:hover {
    transform: translateY(-4px);
    border-color: #ff5a00;
    box-shadow: 0 0 24px rgba(255, 90, 0, 0.28);
}

.hero-category-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.8rem;
    background: rgba(255, 90, 0, 0.12);
    border: 1px solid rgba(255, 176, 0, 0.35);
}

.hero-category-card strong {
    display: block;
    color: #ffcc00;
    font-size: 1.25rem;
    margin-bottom: 6px;
    text-shadow: 0 0 8px rgba(255, 90, 0, 0.5);
}

.hero-category-card small {
    color: #bfc4cc;
    line-height: 1.45;
}

.hero-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.hero-profile-card {
    display: flex;
    gap: 14px;
    align-items: stretch;
    padding: 16px;
    text-decoration: none;
    color: #fff;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 176, 0, 0.18);
    transition: 0.2s ease;
}

.hero-profile-card:hover {
    border-color: rgba(255, 90, 0, 0.65);
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(255, 90, 0, 0.22);
}

.hero-profile-card.top {
    border-color: rgba(255, 90, 0, 0.65);
    background: linear-gradient(145deg, rgba(55, 22, 14, 0.62), rgba(10, 13, 18, 0.96));
}

.hero-profile-card.placeholder {
    opacity: 0.78;
}

.hero-rank {
    min-width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    font-weight: 900;
    background: rgba(255, 90, 0, 0.18);
    border: 1px solid rgba(255, 176, 0, 0.35);
    text-shadow: 0 0 8px rgba(255, 90, 0, 0.8);
}

.hero-card-body strong {
    display: block;
    color: #ffcc00;
    font-size: 1.15rem;
    margin-bottom: 4px;
}

.hero-card-body span {
    display: block;
    color: #d8dde5;
    margin-bottom: 6px;
}

.hero-card-body small {
    color: #aeb6c2;
    line-height: 1.45;
}

.hero-profile-hero {
    max-width: 1180px;
    margin: 48px auto 28px;
    padding: 34px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(55, 22, 14, 0.78), rgba(8, 10, 14, 0.96));
    border: 1px solid rgba(255, 90, 0, 0.55);
    box-shadow: 0 0 36px rgba(255, 90, 0, 0.12);
}

.hero-profile-title {
    text-align: center;
    margin-bottom: 28px;
}

.hero-profile-title h1 {
    color: #ffb000;
    font-size: clamp(2.6rem, 6vw, 5rem);
    line-height: 1;
    text-shadow: 0 0 22px rgba(255, 90, 0, 0.85);
}

.hero-profile-title p {
    color: #d8dde5;
    font-size: 1.05rem;
    margin-top: 10px;
}

.tier-badge {
    display: inline-block;
    margin-bottom: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #fff;
    background: rgba(255, 90, 0, 0.20);
    border: 1px solid rgba(255, 176, 0, 0.45);
    text-shadow: 0 0 10px rgba(255, 90, 0, 0.85);
}

.hero-profile-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.hero-profile-summary div {
    padding: 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 176, 0, 0.18);
}

.hero-profile-summary strong {
    display: block;
    color: #ffcc00;
    margin-bottom: 6px;
}

.hero-profile-summary span {
    color: #d8dde5;
}

.skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.skill-card {
    padding: 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 176, 0, 0.18);
}

.skill-card.active-skill {
    border-color: rgba(255, 90, 0, 0.55);
    background: rgba(255, 90, 0, 0.08);
}

.skill-header span {
    display: inline-block;
    color: #ffb000;
    font-weight: 900;
    margin-bottom: 6px;
}

.skill-header strong {
    display: block;
    color: #ffcc00;
    font-size: 1.2rem;
    margin-bottom: 12px;
}

.skill-rating {
    margin-top: 12px;
    color: #ffcc00 !important;
    font-weight: 900;
}

.awakening-card {
    box-shadow: 0 0 30px rgba(255, 90, 0, 0.18);
}

.hero-pairing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin: 16px 0;
}

.pairing-card {
    padding: 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 176, 0, 0.18);
}

.pairing-card.best {
    border-color: rgba(80, 220, 120, 0.35);
}

.pairing-card strong {
    display: block;
    color: #ffcc00;
    font-size: 1.15rem;
    margin-bottom: 6px;
}

.pairing-card span {
    display: block;
    color: #d8dde5;
    margin-bottom: 8px;
}

.pairing-card small {
    color: #ffcc00;
    font-weight: 900;
}

.pairing-card {
    display: flex;
    align-items: center;
    gap: 20px;
}

.pairing-avatar {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    border-radius: 12px;
    object-fit: cover;
}

.pairing-content {
    flex: 1;
}

.pairing-content strong {
    display: block;
    margin-bottom: 8px;
}

.related-card{
    cursor:pointer;
}

.related-card:hover{
    transform:translateY(-3px);
}

.hero-link-card{
    display:flex;
    flex-direction:column;
    gap:10px;

    padding:20px;
    border:1px solid rgba(255,120,0,.25);
    border-radius:12px;

    background:rgba(255,120,0,.03);

    text-decoration:none;
    color:inherit;

    transition:all .2s ease;
    cursor:pointer;
}

.hero-link-card:hover{
    transform:translateY(-3px);
    border-color:#ff6a00;
    box-shadow:0 0 15px rgba(255,106,0,.3);
}

.hero-link-card strong{
    color:#ffb300;
    font-size:1.1rem;
}

.hero-link-card span{
    color:#bfbfbf;
    line-height:1.5;
}

@media (max-width: 700px) {
    .hero-profile-hero {
        padding: 24px 18px;
        margin-top: 28px;
    }

    .hero-category-card,
    .hero-profile-card {
        align-items: flex-start;
    }
}



/* R3ED HERO DATABASE V2 */
.hero-guide-title .guide-logo{width:min(360px,86vw)}
.hero-principle{max-width:1180px;margin:0 auto 24px}
.hero-rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:18px}
.hero-rules-grid div{padding:16px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,176,0,.18)}
.hero-rules-grid strong{display:block;color:#ffcc00;margin-bottom:6px}.hero-rules-grid span{color:#cfd5dd;line-height:1.45}
.hero-category-grid-wide{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.hero-section-card{max-width:1180px;margin:22px auto}.section-heading-row{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.section-badge{white-space:nowrap;padding:8px 12px;border-radius:999px;font-weight:900}.section-badge.green{background:rgba(62,220,120,.16);border:1px solid rgba(62,220,120,.4);color:#91ffb5}.section-badge.red{background:rgba(255,80,0,.16);border:1px solid rgba(255,80,0,.5);color:#ff9b66}
.hero-card-grid-portraits{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.hero-mini{align-items:center;position:relative;min-height:128px}.hero-mini em{position:absolute;right:12px;top:12px;font-style:normal;font-size:.72rem;font-weight:900;padding:4px 8px;border-radius:999px;background:rgba(255,90,0,.16);border:1px solid rgba(255,176,0,.28);color:#ffcc00}.core-card{border-color:rgba(255,80,0,.48);box-shadow:inset 0 0 18px rgba(255,80,0,.08)}.hero-avatar{width:76px;height:76px;border-radius:14px;object-fit:cover;flex:0 0 auto;border:1px solid rgba(255,176,0,.4);box-shadow:0 0 18px rgba(255,90,0,.24)}.placeholder-avatar{display:grid;place-items:center;background:linear-gradient(145deg,rgba(70,22,12,.9),rgba(8,10,14,.96));color:#ffcc00;font-weight:900;text-shadow:0 0 10px rgba(255,90,0,.8)}.hero-database-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.hero-database-links a{color:#fff;text-decoration:none;font-weight:800;padding:10px 14px;border-radius:10px;background:rgba(255,90,0,.12);border:1px solid rgba(255,176,0,.28)}
.hero-profile-hero{max-width:1180px;margin:45px auto 28px;padding:26px;display:grid;grid-template-columns:230px 1fr;gap:28px;align-items:center;border-radius:18px;background:linear-gradient(145deg,rgba(55,22,14,.72),rgba(8,10,14,.96));border:1px solid rgba(255,90,0,.45);box-shadow:0 0 28px rgba(255,90,0,.12)}.hero-portrait-panel img,.hero-avatar-xl{width:210px;height:210px;object-fit:cover;border-radius:18px;border:1px solid rgba(255,176,0,.35);box-shadow:0 0 28px rgba(255,90,0,.3)}.hero-profile-info h1{font-size:clamp(2.4rem,5vw,4.8rem);line-height:.95;color:#ffcc00;text-shadow:0 0 18px rgba(255,90,0,.72);margin:8px 0}.hero-subtitle{color:#d7d7d7;font-size:1.05rem}.class-pill{display:inline-block;padding:8px 12px;border-radius:999px;font-weight:900}.core-pill{background:rgba(255,70,30,.16);border:1px solid rgba(255,70,30,.55);color:#ff9b77}.standard-pill{background:rgba(70,220,120,.14);border:1px solid rgba(70,220,120,.45);color:#9cffbd}.hero-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:18px}.hero-meta-grid div{padding:14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,176,0,.18)}.hero-meta-grid strong{display:block;color:#ffb000;margin-bottom:5px}.hero-meta-grid span{color:#d8dde5}.skill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}.skill-card{padding:18px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,176,0,.18)}.skill-top span{display:block;color:#ff7b00;font-size:.85rem;font-weight:900}.skill-top strong{display:block;color:#ffcc00;font-size:1.2rem;margin:2px 0 10px}.skill-card ul{margin-top:10px}.awakening-card{border-color:rgba(255,80,0,.58);background:linear-gradient(145deg,rgba(58,19,10,.78),rgba(8,10,14,.96))}.pairing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}.pairing-card{display:flex;gap:12px;align-items:center;padding:14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,176,0,.18)}.pairing-avatar{width:54px;height:54px;border-radius:12px;flex:0 0 auto}.pairing-card strong{display:block;color:#ffcc00}.pairing-card span{color:#cfd5dd}.usecase-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.usecase-grid div{padding:14px;border-radius:12px;background:rgba(255,90,0,.08);border:1px solid rgba(255,176,0,.18)}.usecase-grid strong{display:block;color:#ffcc00}.usecase-grid span{color:#fff;font-weight:800}.hero-story summary{cursor:pointer;color:#ffcc00;font-weight:900;margin-bottom:12px}.hero-story p{line-height:1.75}
@media(max-width:800px){.hero-profile-hero{grid-template-columns:1fr;text-align:center}.hero-portrait-panel img,.hero-avatar-xl{margin:0 auto}.section-heading-row{flex-direction:column}.hero-mini{align-items:flex-start}.hero-avatar{width:64px;height:64px}}