.hero-banner {

    padding: 28px;

    border: 1px solid var(--border);

    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(0,0,0,.15)
        ),
        var(--panel);

    margin-bottom: 22px;

    box-shadow:
        0 8px 24px rgba(0,0,0,.30);
}

.hero-title {

    font-size: 34px;

    font-weight: bold;

    margin-bottom: 8px;

}

.hero-subtitle {

    color: var(--text-muted);

    font-size: 18px;

}

.hero-location {

    margin-top: 16px;

    font-size: 15px;

    opacity: .85;

}

.panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.panel-icon {
    font-size: 20px;
}

.panel-title {
    font-size: 20px;
    font-weight: bold;
}

.character-card {
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 16px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.03),
            rgba(0,0,0,.12)
        ),
        var(--panel);

    box-shadow:
        0 4px 12px rgba(0,0,0,.25);
}

.character-portrait {
    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 34px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: rgba(255,255,255,.03);
}

.character-name {
    font-size: 22px;
    font-weight: bold;
}

.character-class {
    color: var(--text-muted);
    margin-top: 4px;
}

.character-level {
    margin-top: 8px;
    font-size: 14px;
}