/* =============================================================
   ITEM CARD - single base rule for every icon card in the UI.
   All five card types derive their visual from here.
   To change the look of all cards update ONLY this block.
   State modifiers (.icon-box--dimmed/locked/unavailable)
   defined above work on any of these cards.
   ============================================================= */
.sp-hold-slot,
.mp-item-card,
.act-node-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: rgba(197, 160, 89, 0.02);
    border: 1px solid rgba(197, 160, 89, 0.1);
    border-radius: 4px;
    padding: 6px 4px;
    gap: 3px;
    transition:
        border-color 0.15s,
        background 0.15s,
        opacity 0.15s,
        filter 0.15s;
}
.sp-hold-slot:hover,
.mp-item-card:hover,
.act-node-card:not(.act-node-card--locked):hover {
    border-color: rgba(197, 160, 89, 0.4);
    background: rgba(197, 160, 89, 0.04);
}

/* ── Cards that must be forced squares ─────────────────── */
.sp-hold-slot,
.act-node-card {
    aspect-ratio: 1;
    overflow: visible; /* allow badges to bleed outside the card boundary */
    min-height: 0;
}

/* ── sp-hold-slot overrides ─────────────────────────────── */
.sp-hold-slot {
    cursor: default;
    gap: 2px;
    padding: 6px 4px 4px;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
/* Quantity badge - bleeds outside card boundary */
.sp-hold-slot .mp-badge-count {
    pointer-events: none;
    z-index: 2;
}
.sp-hold-slot--compact {
    padding-top: 8px;
}
.sp-hold-slot--compact .sp-hold-slot-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 1;
    min-height: 0;
    margin-bottom: 1.5rem;
}
.sp-hold-slot--compact .sp-hold-slot-icon img,
.sp-hold-slot--compact .sp-hold-slot-icon .item-icon__img {
    width: 60px;
    height: 60px;
}
.sp-hold-slot--compact .sp-hold-slot-name {
    margin-top: 5px;
}
.sp-hold-slot--empty {
    background: rgba(197, 160, 89, 0.02);
    border-style: dashed;
    border-color: rgba(197, 160, 89, 0.1);
    cursor: default;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 8px;
}
.sp-hold-slot--empty:hover {
    border-color: rgba(255, 255, 255, 0.22);
}
.sp-hold-slot-empty-dots {
    font-size: var(--font-size-md);
    color: rgba(150, 160, 175, 0.42);
    letter-spacing: 0.15em;
    line-height: 1;
}
.sp-hold-slot-empty-label {
    font-size: var(--font-size-xs);
    color: rgba(120, 132, 148, 0.48);
    font-family: var(--font-body);
}
.sp-hold-slot-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-4xl);
    line-height: 1;
    overflow: hidden;
    flex-shrink: 0;
}
.sp-hold-slot-icon img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}
/* =============================================================
   ICON BOX - unified icon-container system
   Every icon tile in the game (inventory slot, marketplace
   card, task io card, service row) shares these classes for
   consistent sizing, borders, and state modifiers.
   Base visual (background + border) lives on the card parent
   (.sp-hold-slot / .mp-item-card).
   State modifiers can be applied to those parent cards.
   ============================================================= */
/* State modifiers - apply to .sp-hold-slot,
   .mp-item-card, or any icon card */
.icon-box--dimmed {
    opacity: 0.38;
}
.icon-box--unavailable {
    opacity: 0.32;
    filter: grayscale(0.65);
}
.icon-box--locked {
    opacity: 0.22;
    filter: grayscale(1);
    pointer-events: none;
}
/* Inner icon container - shared by all card contexts */
.icon-img-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}
.icon-img-box--sm {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-xl);
    line-height: 1;
}
.icon-img-box--md {
    width: 55px;
    height: 55px;
    font-size: var(--font-size-3xl);
    line-height: 1;
}
.icon-img-box--lg {
    width: 80px;
    height: 80px;
    font-size: var(--font-size-4xl);
    line-height: 1;
}

/* Item icons from getItemIcon() - fills parent icon-img-box */
.item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}
.item-icon__img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
    pointer-events: none;
}
.sp-hold-slot-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.2;
    overflow: hidden;
    background: rgb(25 27 29);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding: 4px 4px 5px;
    border-radius: 0 0 4px 4px;
}
.sp-hold-slot-qty {
    display: none;
}
/* Inventory panel uses the same tile size as the vessel hold panel */

/* ── Ship Buyer ──────────────────────────────────────────────────── */
.ship-buy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    padding: 8px 0;
}
.ship-buy-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 14px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition:
        border-color 0.15s,
        background 0.15s;
    cursor: pointer;
}
.ship-buy-card:hover {
    border-color: rgba(197, 160, 89, 0.3);
    background: rgba(197, 160, 89, 0.04);
}
.ship-buy-card--featured {
    border-color: rgba(197, 160, 89, 0.4);
    background: rgba(197, 160, 89, 0.06);
}
.ship-buy-img {
    width: 110px;
    height: 70px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
}
.ship-buy-img-placeholder {
    width: 110px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-4xl);
    opacity: 0.5;
}
.ship-buy-tier {
    font-size: var(--font-size-base);
    color: rgba(197, 160, 89, 0.7);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ship-buy-name {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: #d0c8b8;
    text-align: center;
}
.ship-buy-stats {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    line-height: 1.5;
}
.ship-buy-price {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: rgba(197, 160, 89, 0.9);
}
.ship-buy-btn {
    width: 100%;
    padding: 6px;
    font-size: var(--font-size-lg);
    background: rgba(197, 160, 89, 0.15);
    border: 1px solid rgba(197, 160, 89, 0.4);
    color: var(--gold);
    border-radius: 3px;
    cursor: pointer;
    font-family: var(--font-heading);
    letter-spacing: 0.05em;
    transition: background 0.12s;
}
.ship-buy-btn:hover {
    background: rgba(197, 160, 89, 0.3);
}