/* app.css */
@import url("./shared/shared.css");

#Home {
    --max-width: 0.98;
    --max-height: 0.98;
    --home-controller-scroll-padding: clamp(0.8rem, 1.3cqw, 1.5rem);
    --home-profile-button-height: 4cqw;
    --home-profile-button-offset-y: 45%;
    width: var(--app-viewport-width);
    height: var(--app-viewport-height);
}

#Home__OuterContainer {
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
}

#Home__Header {
    --home-header-band-height: 3.5cqw;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    column-gap: 1cqw;
    flex: 0 0 var(--home-header-band-height);
    height: var(--home-header-band-height);
    overflow: visible;
    z-index: 2;
}

.Home__HeaderSide {
    min-width: 0;
    height: var(--home-header-band-height);
}

#Home__HeaderLogo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    text-align: center;
    line-height: 1;
    min-width: 0;
    justify-self: center;
    align-self: stretch;
    transform: translateY(66%);
    z-index: 3;
    pointer-events: none;
    height: var(--home-header-band-height);
}

#Home__HeaderLogo .BattleGarden__Logo {
    font-size: 4.95cqw;
}

#Home__HeaderProfile {
    --home-profile-avatar-size: calc(var(--home-profile-button-height) * 0.72);
    --home-profile-badge-size: calc(var(--home-profile-button-height) * 0.425);
    --home-profile-pill-border-width: clamp(0.14rem, calc(var(--home-profile-button-height) * 0.06), 0.32rem);
    --home-profile-badge-border: clamp(0.08rem, calc(var(--home-profile-badge-size) * 0.098), 0.22rem);
    --home-profile-badge-icon-size: calc(var(--home-profile-badge-size) * 0.5);
    --home-profile-name-size: calc(var(--home-profile-button-height) * 0.26);
    --home-profile-pill-gap: calc(var(--home-profile-button-height) * 0.12);
    --home-profile-pill-padding-y: max(0rem, calc((var(--home-profile-button-height) - var(--home-profile-avatar-size) - (var(--home-profile-pill-border-width) * 2)) / 2));
    --home-profile-pill-padding-left: calc(var(--home-profile-button-height) * 0.30);
    --home-profile-pill-padding-right: calc(var(--home-profile-button-height) * 0.24);
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    height: var(--home-header-band-height);
    justify-self: stretch;
    align-self: stretch;
    z-index: 4;
}

#Home__ProfileLink {
    --home-profile-button-hover-scale: 1.03;
    --home-profile-button-active-scale: 1;
    appearance: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--home-profile-pill-gap);
    max-width: 100%;
    min-height: var(--home-profile-button-height);
    padding: var(--home-profile-pill-padding-y) var(--home-profile-pill-padding-right) var(--home-profile-pill-padding-y) var(--home-profile-pill-padding-left);
    border: var(--home-profile-pill-border-width) solid rgb(32, 57, 28);
    border-radius: 999px;
    background: #d1da99;
    box-shadow: inset 0 0.08cqw rgba(255, 255, 255, 0.36), 0 0.28cqw 0.75cqw rgba(0, 0, 0, 0.14);
    cursor: pointer;
    position: relative;
    transform-origin: center;
    transition: transform 140ms ease, filter 180ms ease;
    transform: translateY(var(--home-profile-button-offset-y)) scale(1);
    box-sizing: border-box;
    > * {
        pointer-events: none;
    }
}

#Home__ProfileLink:not([disabled]):hover {
    transform: translateY(var(--home-profile-button-offset-y)) scale(var(--home-profile-button-hover-scale));
}

#Home__ProfileLink:not([disabled]):active {
    transform: translateY(var(--home-profile-button-offset-y)) scale(var(--home-profile-button-active-scale));
}

.Home__ProfileShortcutPrompt {
    --home-profile-shortcut-size: var(--home-controller-prompt-size-fixed, calc(var(--home-profile-button-height) * 0.48));
    --home-profile-shortcut-border-width: var(--home-controller-prompt-border-fixed, clamp(0.08rem, calc(var(--home-profile-shortcut-size) * 0.09), 0.18rem));
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--home-profile-shortcut-size);
    height: var(--home-profile-shortcut-size);
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    pointer-events: none;
    z-index: 2;
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: #333333;
        border: var(--home-profile-shortcut-border-width) solid #888888;
        border-radius: 999px;
    }
    img {
        width: var(--home-controller-prompt-glyph-fixed, calc(var(--home-profile-shortcut-size) * 0.76));
        height: var(--home-controller-prompt-glyph-fixed, calc(var(--home-profile-shortcut-size) * 0.76));
        position: relative;
        z-index: 1;
    }
}

#Home[data-home-gamepad-helpers="true"] #Home__ProfileLink .Home__ProfileShortcutPrompt {
    display: flex;
}

.Home__ProfileAvatar {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    position: relative;
    img {
        display: block;
        width: var(--home-profile-avatar-size);
        height: auto;
    }
}

.Home__ProfileBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--home-profile-badge-size);
    height: var(--home-profile-badge-size);
    border: var(--home-profile-badge-border) solid rgb(32, 57, 28);
    border-radius: 999px;
    background: #497633;
    box-shadow: 0 0.2cqw 0.5cqw rgba(0, 0, 0, 0.22);
    color: #bfcb8b;
    i {
        font-size: var(--home-profile-badge-icon-size);
        line-height: 1;
    }
}

#Home__ProfileName {
    max-width: calc(var(--home-profile-button-height) * 4.4);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgb(32, 57, 28);
    font-size: var(--home-profile-name-size);
    line-height: 1.15;
    padding-bottom: 0.08em;
    text-align: left;
    font-weight: 700;
}

#Home__Main {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
}

#Home__MainContainer {
    width: 100%;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    display: block;
    padding: 1.3cqw 1.6cqw 1.9cqw;
    scroll-padding: var(--home-controller-scroll-padding);
    overflow-y: auto;
    overflow-x: hidden;
}

.Home__Catalog {
    width: 100%;
    min-height: min-content;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.Home__Shelf {
    --stage-accent: #6dab52;
    --stage-accent-soft: rgba(190, 223, 140, 0.62);
    --stage-glow: rgba(109, 173, 82, 0.18);
    display: flex;
    flex-direction: column;
    gap: 0.9cqw;
    padding: 1.05cqw 0 1.55cqw;
    box-sizing: border-box;
}

.Home__Shelf + .Home__Shelf {
    border-top: 0.22cqw solid rgba(32, 57, 28, 0.18);
    margin-top: 0.85cqw;
    padding-top: 1.65cqw;
}

.Home__Shelf[data-stage="testing"] {
    --stage-accent: #dc950d;
    --stage-accent-soft: rgba(241, 204, 104, 0.68);
    --stage-glow: rgba(220, 149, 13, 0.2);
}

.Home__Shelf[data-stage="development"] {
    --stage-accent: #d36b2f;
    --stage-accent-soft: rgba(243, 177, 137, 0.7);
    --stage-glow: rgba(211, 107, 47, 0.22);
}

.Home__ShelfHeader {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1cqw;
}

.Home__ShelfCopy {
    display: flex;
    flex-direction: column;
    gap: 0.18cqw;
    min-width: 0;
}

.Home__ShelfTitle {
    font-family: "Special Elite", monospace;
    padding-top: 0.28em;
    font-size: 2.55cqw;
    color: rgb(32, 57, 28);
    font-weight: 700;
}

.Home__ShelfIntro {
    font-size: 1.25cqw;
    line-height: 1.25;
    color: rgba(32, 57, 28, 0.82);
}

.Home__ShelfGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1cqw;
    align-items: stretch;
    overflow-y: visible;
    padding-top: 0.9cqw;
}

.Home__GameCard {
    /* Three cards sit in a row, so this card is about 26.6% of the page container width. */
    --home-card-width-ratio: 0.266;
    container-type: inline-size;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.2cqw;
    background: #3d692a;
    border: 0.5cqw solid rgb(32, 57, 28);
    border-radius: 2cqw;
    padding: 1.25cqw 1.25cqw 1.5cqw 1.25cqw;
    box-sizing: border-box;
    box-shadow: inset 0 0.125em rgba(255, 255, 255, 0.18), 0 0 3.8cqw var(--stage-glow);
    overflow: visible;
    position: relative;
    scroll-margin: var(--home-controller-scroll-padding);
    transition: border-color 180ms ease, box-shadow 220ms ease, background-color 180ms ease;
}

#Home[data-home-gamepad-helpers="true"] .Home__GameCard[data-controller-active="true"] {
    border-color: var(--controller-accent);
    z-index: 3;
}

#Home[data-home-gamepad-helpers="true"] .Home__GameCard[data-controller-prompt-target="true"] > .ControllerPromptLayer > .ControllerPrompt {
    --controller-prompt-base-size: var(--home-controller-prompt-size-host);
    --controller-prompt-base-glyph-size: var(--home-controller-prompt-glyph-host);
    --controller-prompt-base-border-width: var(--home-controller-prompt-border-host);
}

.Home__GameCardMedia {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: calc(1.25cqw / var(--home-card-width-ratio));
    overflow: hidden;
    border: calc(0.2cqw / var(--home-card-width-ratio)) solid rgba(32, 57, 28, 0.22);
    background: #9cbfdc;
    box-sizing: border-box;
}

.Home__GameCardPreview,
.Home__GameCardCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

.Home__GameCardCanvas {
    pointer-events: none;
}

.Home__GameCardLogo {
    position: absolute;
    left: 5cqw;
    bottom: 5.5cqw;
    width: 35cqw;
    max-width: calc(100% - 10cqw);
    filter: drop-shadow(0 0.9cqw 1.8cqw rgba(0, 0, 0, 0.34));
    pointer-events: none;
}

.Home__GameCardBuild {
    position: absolute;
    top: 4cqw;
    right: 4cqw;
    border-radius: 999px;
    padding: 1.65cqw 3cqw 1.35cqw;
    background: var(--stage-accent-soft);
    color: rgb(32, 57, 28);
    font-size: 4.75cqw;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16cqw;
    box-shadow: 0 0.7cqw 2cqw rgba(0, 0, 0, 0.16);
}

.Home__GameCardBody {
    display: flex;
    flex-direction: column;
    gap: 1.4cqw;
    flex: 1 1 auto;
    min-height: 0;
}

.Home__GameCardHeader {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.Home__GameCardSummary {
    min-height: 12cqw;
    font-size: 6.1cqw;
    line-height: 1.3;
    color: #c7de9f;
}

.Home__GameCardTags {
    margin-top: calc(0.45cqw / var(--home-card-width-ratio));
    display: flex;
    flex-wrap: wrap;
    gap: 2.1cqw;
    min-height: 6cqw;
}

.Home__GameCardTags li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4cqw 2.1cqw;
    border-radius: 999px;
    background: rgba(209, 218, 153, 0.14);
    border: 0.32cqw solid rgba(209, 218, 153, 0.26);
    color: #e4efbc;
    font-size: 3.92cqw;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
}

.Home__GameCardButton {
    margin-top: calc(1cqw / var(--home-card-width-ratio));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    height: 2em;
    padding: 0 0.5em;
    border-radius: 0.5em;
    background: #f1cc68;
    border: calc(0.5cqw / var(--home-card-width-ratio)) solid rgb(32, 57, 28);
    box-shadow: inset 0 -0.125em rgba(0, 0, 0, 0.15), inset 0 0.125em rgba(255, 255, 255, 0.25);
    color: rgb(32, 57, 28);
    font-size: calc(2cqw / var(--home-card-width-ratio));
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 180ms ease;
    box-sizing: border-box;
}

.Home__GameCardButton i {
    font-size: 0.9em;
    line-height: 1;
    position: relative;
    top: -0.04em;
}

.Home__GameCardButton:hover {
    transform: scale(1.03);
}

.Home__GameCardButton:active {
    transform: scale(1);
    box-shadow: inset 0 -0.03em rgba(0, 0, 0, 0.25), inset 0 0.03em rgba(255, 255, 255, 0.15);
}

#Home[data-home-gamepad-helpers="true"] .Home__GameCardButton[data-controller-prompt-target="true"] > .ControllerPromptLayer > .ControllerPrompt {
    --controller-prompt-base-size: var(--home-controller-prompt-size-button);
    --controller-prompt-base-glyph-size: var(--home-controller-prompt-glyph-button);
    --controller-prompt-base-border-width: var(--home-controller-prompt-border-button);
}

#Home__Manufactured {
    position: absolute;
    top: calc(100%);
    left: 50%;
    transform: translateX(-50%) translateY(-75%);
    height: calc(var(--border-width) * 2);
    line-height: calc(var(--border-width) * 2);
    background: rgb(32, 57, 28);
    padding: 0 1cqw;
    border-radius: 10cqw;
    white-space: nowrap;
    z-index: 1;
}

#Home__ManufacturedText {
    font-size: 1.1cqw;
    font-family: "Special Elite", monospace;
    font-weight: 500;
    color: #9bba6e;
    padding-top: 0.133em;
}