/* Styling for the whole Game page and its Corridor/Shaft/Car/PassengerWaiting/PassengerReady/
   FloorLabels components. Deliberately a plain global stylesheet, not Game.razor.css: Blazor's
   scoped-CSS attribute only lands on markup a component writes directly, not on markup rendered
   by the child components it uses — so a Game.razor.css file wouldn't reach into any of those
   child components' output at all. One global file avoids that trap and keeps every rule in one
   place, matching how tightly these pieces are visually coupled anyway (shared grid columns, row
   heights, z-index stack). */

.landscape-warning {
    display: none;
}

/* True orientation-locking isn't available to a plain web page in most mobile browsers
   (notably iOS Safari) without being installed as a fullscreen PWA, so this blocks play with
   a rotate prompt instead — the practical equivalent from the player's perspective. Height is
   the signal, not orientation alone, so a wide desktop window is never mistaken for a phone. */
@media (orientation: landscape) and (max-height: 500px) {
    .landscape-warning {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        inset: 0;
        z-index: 2000;
        background: var(--bs-body-bg);
    }
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    max-width: 100%;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

/* Vertically, fills whatever room is left below the header instead of shrink-wrapping to the
   floor count and leaving dead space — capped well above the tallest common phone viewport so
   it doesn't balloon on desktop. Horizontally, it fills its container's full width: the grid
   below divides that width into the same reference columns regardless of difficulty, so filling
   width is what makes those columns come out a consistent size instead of arbitrary stretching. */
.building-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 70rem;
    width: 100%;
}

.building-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Both grids below share the same 10-reference-column template — 3 for the corridor (see
   .corridor), 1 for floor-labels, up to 6 for shafts (hard mode's elevator count, the most the
   game ever has) — so a column always comes out the same width regardless of difficulty:
   fewer shafts just leave trailing columns empty rather than the rest stretching to fill them.
   minmax() keeps columns from vanishing on very narrow screens; overflow-x on the wrapper is the
   fallback if that floor is ever hit. flex-grow itself is set inline per-difficulty for
   .building (see Game.razor) so its vertical ratio against .building-filler can vary. */
.building,
.building-filler {
    min-height: 0;
}

.building {
    display: grid;
    grid-template-columns: repeat(10, minmax(2rem, 1fr));
}

.shaft-headers {
    display: grid;
    grid-template-columns: repeat(10, minmax(2rem, 1fr));
    flex: 0 0 auto;
    padding-bottom: 0.25rem;
}

/* Spans the corridor + floor-labels columns (3 + 1) in the row below. */
.shaft-headers-spacer {
    grid-column: span 4;
}

.shaft-headers-spacer.hud {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
    padding-left: 0.25rem;
}

.shaft-header {
    grid-column: span 1;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}

.start-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10;
    border-radius: 0.25rem;
}

.start-hint {
    margin-top: 1rem;
    padding: 0 1.5rem;
    max-width: 18rem;
    text-align: center;
    color: #fff;
    font-size: 0.9rem;
}

.floor-labels {
    display: flex;
    flex-direction: column;
    grid-column: span 1;
    border-right: 2px dashed var(--bs-border-color);
}

.floor-row {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    box-sizing: border-box;
}

/* Reserves 3 of the building's 10 reference columns (see .building) for exactly 3 uniform
   passenger-chip slots — sized the same as a shaft column, at any difficulty. */
.corridor {
    grid-column: span 3;
}

/* Its own 3-column grid for those chip slots. Each chip/badge is placed via an explicit
   grid-column (see Game.razor's CorridorLayoutAt) so occupied slots stay packed to the right
   regardless of how many are shown; grid's default stretch fills each cell's full width and
   height, with the same gap on every side as between chips. */
.corridor-row {
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.2rem;
    padding: 0.2rem;
    overflow: hidden;
    box-sizing: border-box;
    border-bottom: 1px dotted var(--bs-border-color);
}

.passenger {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    line-height: 1;
    user-select: none;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.35rem;
    box-sizing: border-box;
    white-space: nowrap;
}

/* Summarizes overflow beyond the 2 visible chips. Borderless on purpose — it isn't tappable,
   so it shouldn't read as a button like the real chips do. */
.passenger.overflow-badge {
    cursor: default;
    border: none;
    color: var(--bs-secondary-color);
    font-weight: 600;
}

/* Hard mode has too many floors for a full-size tap target to fit every row without
   overflowing it, so it trades target size for actually fitting on a phone screen. */
.building-wrapper.compact .passenger {
    font-size: 1rem;
}

.building-wrapper.compact .floor-row,
.building-wrapper.compact .shaft-header {
    font-size: 0.7rem;
}

.building-wrapper.compact .pickup-marker {
    font-size: 0.6rem;
}

.building-wrapper.compact .car-passenger {
    font-size: 0.6rem;
    padding: 0 0.2rem;
}

.passenger.selected {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
    animation: pulse 0.3s ease;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.75);
    }
    100% {
        transform: scale(1);
    }
}

.shaft {
    grid-column: span 1;
    border-left: 1px solid var(--bs-border-color);
    border-right: 1px solid var(--bs-border-color);
    cursor: pointer;
    box-sizing: border-box;
}

.shaft-floor-line {
    border-bottom: 1px dotted var(--bs-border-color);
    box-sizing: border-box;
}

/* Previews how far the car will sweep in its current direction before it might reverse — behind
   the pickup markers and car (z-index) so it never competes with them for attention. */
.direction-chevron {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    opacity: 0.3;
    font-size: 1rem;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 0;
}

.pickup-marker {
    position: absolute;
    left: 2px;
    right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 0.2rem;
    animation: pulse 0.3s ease;
    box-sizing: border-box;
    z-index: 1;
}

.pickup-marker.up {
    background: rgba(var(--bs-success-rgb), 0.35);
    color: var(--bs-success);
}

.pickup-marker.down {
    background: rgba(var(--bs-danger-rgb), 0.35);
    color: var(--bs-danger);
}

.car {
    position: absolute;
    z-index: 2;
    left: 2px;
    right: 2px;
    color: #fff;
    border-radius: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    box-sizing: border-box;
    overflow: hidden;
    transition: bottom 0.1s linear, background-color 0.2s ease;
}

.car.idle {
    background: var(--bs-secondary);
}

.car.moving-up {
    background: var(--bs-success);
}

.car.moving-down {
    background: var(--bs-danger);
}

.car-passengers {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 0.15rem;
}

.car-passenger {
    background: #fff;
    color: var(--bs-dark);
    border-radius: 0.6rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}