/* premium feature styles: officers, class change, merchant, boosters, relocation and the rush button. Build on the classes and variables in app.css. */

/* ---------- Shared head: tabs (.tabs--premium in app.css) and the Void Amber reserve ---------- */

/* Void Amber is printed in mustard over halftone wherever it appears. */
.premium-balance {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: var(--halftone-mustard), var(--ink-800);
    border-color: rgb(232 180 67 / 45%);
    box-shadow: 4px 4px 0 var(--keyline), inset 4px 0 0 var(--mustard);
}

.premium-balance::before {
    display: none;
}

.premium-balance__icon {
    width: 3.4rem;
    height: 3.4rem;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--keyline), 3px 3px 0 2px rgb(255 107 87 / 50%);
}

.premium-balance__text p {
    margin: 0;
}

.premium-balance__amount {
    font: 400 1.6rem/1.2 var(--font-display);
    color: var(--mustard-light);
}

.premium-balance__amount .num {
    font: 500 1.35rem var(--font-mono);
}

.premium-balance__income {
    font-size: 0.85rem;
    color: var(--paper-dim);
}

.premium-intro {
    max-width: 60rem;
    margin: 0 0 1.2rem;
    color: var(--paper-dim);
    font-size: 0.93rem;
}

/* ---------- Officers and classes ---------- */

.officer-card__portrait,
.class-card__image {
    aspect-ratio: 4 / 3;
}

/* Rank stamp in mustard: officers are a premium feature. */
.officer-card .item-card__level {
    background: var(--mustard);
}

.officer-card__heading {
    margin: 0.25rem 0 0;
    font: 700 0.64rem/1.4 var(--font-body);
    font-stretch: 78%;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--paper-faint);
}

.officer-card__effects {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.84rem;
}

/* Markers on one axis: a dot for what the rank does now, a plus for the next rank. */
.officer-card__effects li {
    position: relative;
    padding-left: 1rem;
}

.officer-card__effects li::before {
    content: "\2022";
    position: absolute;
    left: 0.15rem;
    color: var(--paper-faint);
}

.officer-card__effects--next {
    color: var(--mustard-light);
}

.officer-card__effects--next li::before {
    content: "+";
    left: 0.1rem;
    font-weight: 700;
    color: var(--mustard);
}

/* Five officers fit one row on a wide page. */
.officer-grid {
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
}

.class-grid {
    margin-top: 1rem;
}

.class-card.is-current {
    border-color: var(--mustard);
    box-shadow: 4px 4px 0 var(--mustard-dark);
}

.class-card__current {
    color: var(--mustard);
}

/* ---------- Merchant ---------- */

.merchant-sell {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: var(--gap);
}

.merchant__icon {
    width: 1.4rem;
    height: 1.4rem;
    vertical-align: middle;
    object-fit: cover;
    border-radius: 2px;
}

/* The resource you sell: marked, not dimmed. */
.merchant__row.is-sold td {
    color: var(--paper);
    background: rgb(255 107 87 / 6%);
}

.merchant__row.is-sold td:first-child {
    box-shadow: inset 3px 0 0 var(--coral);
}

.merchant__selling {
    font: italic 0.8rem var(--font-body);
    color: var(--coral-light);
}

.merchant__input {
    width: 9rem;
}

.merchant__max {
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
}

.merchant__summary {
    margin: var(--gap) 0 0.6rem;
}

/* ---------- Boosters ---------- */

.booster-grid {
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.booster-card__name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.booster-card__icon {
    width: 1.8rem;
    height: 1.8rem;
    object-fit: cover;
    border-radius: var(--radius);
}

.booster-card__output,
.booster-card__active,
.booster-card__none {
    margin: 0;
    font-size: 0.88rem;
}

.booster-card__active {
    color: var(--mustard);
}

.booster-table td,
.booster-table th {
    padding: 0.3rem;
}

.booster-buy__button {
    width: 100%;
    justify-content: center;
    padding: 0.3rem 0.5rem;
}

.booster-buy__icon,
.rush__icon {
    width: 1rem;
    height: 1rem;
    object-fit: cover;
    border-radius: 2px;
}

/* ---------- Relocation ---------- */

.relocation__price {
    font-size: 1rem;
}

.relocation__note {
    font-size: 0.85rem;
    color: var(--paper-faint);
}

.relocation-target__pick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--gap);
}

.relocation-target__image {
    width: 1.6rem;
    height: 1.6rem;
    vertical-align: middle;
    object-fit: cover;
    border-radius: 50%;
}

/* ---------- Rush ("finish now") button in queue panels ---------- */

.rush {
    display: inline-flex;
    margin: 0;
}

.rush__button {
    padding: 0.28rem 0.6rem;
    font-size: 0.72rem;
    white-space: nowrap;
}

.rush__cost {
    font-size: 0.85rem;
}

.booster-buy__icon,
.rush__icon {
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--keyline);
}

@media (max-width: 600px) {
    .merchant__input {
        width: 6rem;
    }
}