/**
 * Building detail: capacity meter, timer, stars, upgrade, gear. Load order is significant: keep this file's <link> position in index.html.
 */

.building-layout {
    display: flex;
    gap: 34px;
    align-items: flex-start;
    width: 100%;
}

.building-left {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    flex: none;
    width: 240px;
}

.building-art {
    width: 100%;
    min-height: 150px;
    display: grid;
    place-items: center;
}

.building-art img {
    max-width: 100%;
    max-height: 170px;
    object-fit: contain;
}

.building-art__swatch {
    width: 120px;
    height: 74px;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.building-stars {
    display: flex;
    align-items: center;
    gap: 8px;
}

/*
 * Rating stars.
 *
 * A theme that has cut its own art supplies `--star-*-art`, and sets
 * `--chrome-glyph-size: 0` so the text glyph beneath it stops rendering. A
 * theme that has not keeps the glyph and draws no background — which is what
 * the futuristic set does today. Neither branch needs JavaScript to know which
 * theme is active.
 */
.building-star {
    width: 40px;
    height: 42px;
    font-size: var(--chrome-glyph-size, 30px);
    line-height: 42px;
    text-align: center;
    color: var(--edge);
    background: var(--star-off-art, none) center / contain no-repeat;
}

.building-star.is-filled {
    color: var(--accent);
    background-image: var(--star-on-art, none);
}

/*
 * The upgrade control. With art the border and gradient would frame a picture
 * that already has its own edge, so the themes that supply `--upgrade-art`
 * clear both.
 */
.building-upgrade {
    margin-left: 8px;
    width: 46px;
    height: 43px;
    border-radius: 8px;
    border: 3px solid var(--edge);
    background: linear-gradient(var(--surface-top), var(--surface-bottom));
    color: var(--text);
    font-size: var(--chrome-glyph-size, inherit);
    font-family: inherit;
    cursor: pointer;
}

.building-upgrade:disabled {
    opacity: 0.45;
    cursor: default;
}

.building-right {
    display: flex;
    flex-direction: column;
    gap: 22px;
    flex: 1;
    min-width: 260px;
}

/* One meter row per output resource; single-output rows carry no label. */
.building-capacity {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.building-capacity__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    align-items: baseline;
}

.building-capacity__heading {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--heading);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

.building-capacity__value {
    font-size: 22px;
    font-weight: 700;
    /* Last column, whether or not a label took the first one. */
    grid-column: -2;
}

/* Only rendered when a building has more than one meter to tell apart. */
.building-capacity__label {
    font-size: 18px;
    font-weight: 700;
    color: var(--heading);
}

/* Capacity meter: raised bezel, icon overhanging the left edge. Fill is exactly stored/capacity — never fudged to match the mockup. */
.building-bar {
    grid-column: 1 / -1;
    position: relative;
    height: 33px;
    margin-left: 22px;
    padding: 6px 10px;
    border-radius: 16px;
    background: linear-gradient(var(--surface-top), var(--surface-bottom));
    box-shadow:
        inset 0 2px 0 var(--inner-light),
        inset 0 -3px 4px rgba(0, 0, 0, 0.25),
        0 3px 4px rgba(0, 0, 0, 0.25);
}

.building-bar__icon {
    position: absolute;
    left: -25px;
    top: 50%;
    width: 52px;
    height: 52px;
    transform: translateY(-50%);
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.building-bar__track {
    height: 100%;
    border-radius: 10px;
    background: var(--well-deep);
    box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.building-bar__fill {
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(var(--meter-top), var(--meter-bottom));
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35);
}



.building-timer {
    display: flex;
    align-items: center;
    gap: 12px;
}

.building-timer__value {
    padding: 8px 26px;
    border-radius: 8px;
    background: var(--well);
    border: 3px solid var(--edge);
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/*
 * The same box carries three clocks; colour is the only visual difference,
 * so the aria-label repeats the distinction for assistive tech.
 */
.building-timer__value[data-phase='building'] {
    color: var(--meter-top);
}

.building-timer__value[data-phase='stalled'] {
    opacity: 0.55;
}

/*
 * Finish-now, beside the clock. It only exists for a building whose level
 * authored a `skipCost`, so it is hidden rather than disabled when the game
 * never priced one.
 */
.building-skip {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 3px solid var(--edge);
    background: linear-gradient(var(--surface-top), var(--surface-bottom));
    color: var(--text);
    font-family: inherit;
    font-size: var(--chrome-glyph-size, inherit);
    cursor: pointer;
}

.building-skip:disabled {
    opacity: 0.45;
    cursor: default;
}

.building-skip[hidden] {
    display: none;
}

.building-reward {
    display: flex;
    align-items: center;
    gap: 8px;
}

/*
 * The reward doubles as the collect button — the blue control the reference
 * draws under the clock. It stays readable while empty so the player can see
 * what the building makes before it has made any.
 */
.building-reward__collect {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 8px;
    border: 3px solid var(--cta-edge);
    background: linear-gradient(var(--cta-top), var(--cta-bottom));
    color: #fff;
    font-family: inherit;
    cursor: pointer;
}

.building-reward__collect:disabled {
    opacity: 0.55;
    cursor: default;
}

.building-reward__collect:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/*
 * The gear and the menu it opens. Moving and demolishing are rare, and one of
 * them cannot be undone, so they sit behind a deliberate second click instead
 * of beside the controls used every visit.
 */
.building-options-anchor {
    position: relative;
    align-self: flex-end;
    margin-top: auto;
}

.building-gear {
    width: 39px;
    height: 39px;
    border-radius: 8px;
    border: 3px solid var(--edge);
    background: linear-gradient(var(--surface-top), var(--surface-bottom));
    color: var(--text);
    font-family: inherit;
    font-size: var(--chrome-glyph-size, 20px);
    cursor: pointer;
}

.building-gear[hidden] {
    display: none;
}

.building-gear:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.building-options {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 8px;
    border: 3px solid var(--edge);
    background: var(--well-deep);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.building-options.is-open {
    display: flex;
}

.building-move,
.building-demolish {
    padding: 8px 16px;
    border-radius: 6px;
    border: 2px solid var(--edge);
    background: linear-gradient(var(--surface-top), var(--surface-bottom));
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    white-space: nowrap;
    cursor: pointer;
}

/* The one irreversible control, coloured as the warning it is. */
.building-demolish {
    border-color: var(--danger);
    color: var(--danger-text);
}

.building-move[hidden],
.building-demolish[hidden] {
    display: none;
}

.building-inputs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.building-inputs__heading {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--heading);
}

.building-inputs__chip {
    padding: 6px 14px;
    border-radius: 8px;
    background: var(--well);
    border: 2px solid var(--edge);
    font-size: 15px;
}

/* The input the player has run out of — why the line has stopped. */
.building-inputs__chip.is-short {
    border-color: var(--danger);
    color: var(--danger-text);
}

.build-card__build:disabled {
    filter: grayscale(0.7);
    opacity: 0.55;
    cursor: default;
}

/*
 * The reward names itself with its picture first: the icon stands outside the
 * collect button, the way the reference frames draw it, and only the amount
 * rides the button itself.
 */
.building-reward__chip {
    display: inline-flex;
    align-items: center;
    flex: none;
    animation: reward-pop 0.38s cubic-bezier(0.18, 0.82, 0.2, 1.18) both;
}

.building-reward__chip img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.building-reward__amount {
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
}

/*
 * Multi-output buildings (a forge makes tools and coin at once) have no
 * reference to copy: each output rides the button as an inline icon-plus-
 * count pair, the pairs summed under one trailing "rewards".
 */
.building-reward__pair {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.building-reward__pair img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.building-reward__plus {
    font-size: 15px;
    font-weight: 700;
    opacity: 0.85;
}

@keyframes reward-pop {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.9);
    }
    65% {
        opacity: 1;
        transform: translateY(-2px) scale(1.04);
    }
}