/*
  game-banner.css — the app's game profile banner, shared by every Diablo III demo
  screen (analytics, heroes, leaderboard). Lifted out of the Destiny port's
  analytics.css so the other pages can load it on its own.
*/

/* == Game profile banner ================================================== */
/* Styles come from the app. The app wraps this in #game-header-placeholder;
   here the same geometry sits on .dynamic-header, matching .mode-tabs-row so
   the banner lines up with the widget grid below. */
.dynamic-header {
    position: relative;
    left: 90px;
    top: 24px;
    width: calc(100% - 112px);
    box-sizing: border-box;
    height: 140px;
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #454857;
    z-index: 10;
}

.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.game-logo {
    position: absolute;
    right: 26px;
    top: 18px;
    height: 76px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    z-index: 1;
}

.user-profile-row {
    position: absolute;
    top: 38px;
    left: 26px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 1;
}

.user-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #222;
    border: 1px solid #454857;
}

.user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
}

.username {
    font-size: 28px;
    font-weight: 600;
    font-family: var(--font-work-sans);
    margin-bottom: 4px;
}

.user-details {
    font-size: 15px;
    color: var(--color-darkgray-100);
    display: flex;
    gap: 6px;
    align-items: center;
    font-family: var(--font-work-sans);
}

.divider {
    opacity: 0.6;
}

/* sits on the right, under the logo */
.last-updated-wrap {
    position: absolute;
    right: 24px;
    bottom: 20px;
    text-align: right;
    display: flex;
    gap: 6px;
    align-items: center;
    white-space: nowrap;
    z-index: 1;
}

.last-updated-label,
.last-updated-time {
    font-size: 14px;
    color: white;
    font-weight: 400;
    font-family: var(--font-work-sans);
}

@media screen and (max-width: 768px) {
    .dynamic-header {
        width: calc(100% - 36px);
        left: 18px;
    }
}

@media screen and (max-width: 540px) {
    .game-logo {
        display: none;
    }

    .last-updated-wrap {
        right: auto;
        left: 106px;
        bottom: 20px;
        text-align: left;
        align-items: baseline;
    }
}

/*
  The banner and whatever follows it are both relatively positioned, so the real
  gap is (margin-bottom + next element's top - banner's top). Everything that
  normally follows sits at top: 24px like the banner, which leaves margin-bottom
  as the gap — but .tab-nav is 12px (report-shell.css), which was pulling the
  insights tabs up to a 4px gap. Matching the banner restores the 16px.
*/
.has-app-header .tab-nav {
    top: 24px;
}