/* Inventory item card — flippable tile used to represent a resource/item stack.
   Blank template instances live in #dom_assets and are cloned + populated by JS. */

.item-card {
    --card-w: 108pt;
    --card-h: 134pt;
    --outer-radius: 8.4pt;
    --inner-radius: 6pt;
    --tier-color: var(--tier-grey);

    width: var(--card-w);
    height: var(--card-h);
    position: relative;
    perspective: 800pt;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: transform 0.25s ease;
}

/* selected: pops the card out over the rest of the page, still in its own perspective/flip context */
/* dragging: being dragged to reorder a custom-sorted vault - dimmed in place while
   .vault_drag_ghost (below) shows the moving copy that actually follows the pointer */
.item-card.dragging {
    opacity: 0.4;
}

/* vault_drag_ghost: floating clone that tracks the pointer during a vault card drag
   (positioned via left/top in JS - see createVaultDragGhost in outpost-vault.js).
   Pointer Events don't come with a native drag image the way HTML5 drag-and-drop
   does, so this stands in for one. */
.item-card.vault_drag_ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    pointer-events: none;
    cursor: grabbing;
    opacity: 0.9;
    transform: scale(1.05) rotate(-3deg);
    filter: drop-shadow(0 6pt 10pt rgba(0, 0, 0, 0.4));
}

.item-card.selected {
    --card-w: 108pt;
    --card-h: 134pt;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.5);
    z-index: 1000;
    animation: item-card-explode 0.175s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Keep the card opaque while opening so its white panels never show the page beneath. */
@keyframes item-card-explode {
    from {
        transform: translate(-50%, -50%) scale(0.85);
    }
    to {
        transform: translate(-50%, -50%) scale(1.5);
    }
}

@keyframes item-card-implode {
    from {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 1;
    }
    to {
        transform: translate(-50%, -50%) scale(0.85);
        opacity: 0;
    }
}

/* closing: plays item-card-explode backwards (as its own named animation so it's guaranteed to (re)trigger), then JS removes the card once it finishes */
.item-card.selected.closing {
    animation: item-card-implode 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* full-viewport backdrop behind a popped-out card; a plain body-level element so an ancestor's transform can't shrink its containing block */
.item-card-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
    animation: item-card-backdrop-fade-in 0.175s ease forwards;
}

.item-card-backdrop.closing {
    animation: item-card-backdrop-fade-out 0.175s ease forwards;
}

@keyframes item-card-backdrop-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes item-card-backdrop-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

.item-card-close {
    display: none;
    position: absolute;
    top: -7.2pt;
    right: -7.2pt;
    width: 15.6pt;
    height: 15.6pt;
    align-items: center;
    justify-content: center;
    font-size: 9.6pt;
    line-height: 1;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
}

.item-card.selected .item-card-close {
    display: flex;
}

/* Move shortcut for a popped-out card (e.g. vault/assay "Move To Vault"/"Sell"), positioned
   under it. 100.5pt = half of .item-card.selected's scaled height (134pt * 1.5); the 16pt after
   it is the gap between card and button. Width (162pt) matches that same scaled card width
   (108pt * 1.5) so the button reads as part of the same popout, not a separate control. */
.item-card-action {
    position: fixed;
    left: 50%;
    top: calc(50% + 100.5pt + 16pt);
    transform: translateX(-50%);
    z-index: 1000;
    width: 162pt;
    padding: 9pt 0;
    color: #ffffff;
    font-size: 14pt;
    font-weight: bold;
    letter-spacing: 0.03em;
    text-align: center;
    white-space: nowrap;
    background-color: #c62828;
    border-radius: 999pt;
    cursor: pointer;
    box-shadow: 0 2pt 6pt rgba(0, 0, 0, 0.35);
    animation: item-card-action-fade-in 0.175s ease forwards;
}

.item-card-action:hover {
    background-color: #ef5350;
}

@keyframes item-card-action-fade-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-4pt); }
    to { opacity: 1; transform: translateX(-50%); }
}

/* Vault gem stake toggle: renown per day, or the countdown to a staked gem's first full tick.
   Faded cyan with a dashed border while unstaked, slightly dimmed cyan with a solid border while
   counting down after staking, then fuchsia with a solid border. Hovering lights an unstaked
   badge cyan (click stakes) and turns a staked one red (click unstakes). Mirrors the gem quality badge's inset,
   in the image frame's top-right corner so it clears the popout's close button. Read-only on a
   popped-out card. */
.item-card .vault_stake_badge {
    position: absolute;
    top: calc(var(--card-w) / 36);
    right: calc(var(--card-w) / 36);
    padding: 1pt 4pt;
    color: var(--fuchsia);
    font: bold calc(var(--card-w) / 12) monospace;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 999pt;
    cursor: pointer;
}

.item-card .vault_stake_badge.unstaked {
    color: rgba(128, 255, 255, 0.4);
    border: 1px dashed rgba(128, 255, 255, 0.4);
}

.item-card:not(.selected) .vault_stake_badge.unstaked:hover {
    color: #80ffff;
    border: 1px solid #80ffff;
}

.item-card .vault_stake_badge.staked {
    border: 1px solid var(--fuchsia);
}

/* Staked, still counting down to its first full tick. */
.item-card .vault_stake_badge.staked[data-starts-at] {
    color: rgba(128, 255, 255, 0.9);
    border-color: rgba(128, 255, 255, 0.9);
}

.item-card:not(.selected) .vault_stake_badge.staked:hover {
    color: #ef5350;
    border-color: #ef5350;
}

.item-card.selected .vault_stake_badge {
    pointer-events: none;
}

.item-card .flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}

.item-card.flipped .flip-inner {
    transform: rotateY(180deg);
}

.item-card .face {
    position: absolute;
    inset: 0;
    border-radius: var(--outer-radius);
    box-shadow: 0 1pt 3pt rgba(0, 0, 0, 0.15);
    backface-visibility: hidden;
    overflow: hidden;
}

.item-card .face.back {
    transform: rotateY(180deg);
}

.item-card .frame {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2pt solid #ffffff;
    border-radius: var(--outer-radius);
    background: var(--tier-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 5pt;
}

.item-card .image-frame {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(180deg, #DDD 0%, #EEE 100%);
    border-radius: var(--inner-radius);
}

.item-card .image-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
}

.item-card .back-panel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: #ffffff;
}

.item-card .back-panel .nameplate {
    background: none;
    color: #000000;
}

.item-card .resource-details {
    white-space: pre-line;
    width: 90%;
    text-align: left;
    font-size: 5.7pt;
    line-height: 1.4;
    color: #000000;
}

/* Sized by big-text.js at render time (see item-card.js); 6pt is only the no-JS fallback.
   letter-spacing is em-based (not a fixed pt) so it scales with the font-size big-text.js
   computes - a fixed unit would throw off its width ratio math. */
.item-card .nameplate-slot {
    width: 100%;
    min-height: 17pt;
}

/* Front face only (direct child of .frame, not nested in .back-panel): grows to fill
   .frame's actual leftover space below the image, so big-text.js centers the text in that
   whole gap instead of a thin strip pinned to the card's bottom edge. In .back-panel this
   would instead balloon to push resource-details out, so it's scoped to this layout only.
   Widening the slot's height doesn't change the computed font-size - width stays the binding
   constraint for every name at this card size. */
.item-card .frame > .nameplate-slot {
    flex: 1 1 0;
}

.item-card .nameplate {
    color: #ffffff;
    font-size: 6pt;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: center;
}

/* Tier colors */
.item-card.tier-abundant   { --tier-color: var(--tier-grey); }
.item-card.tier-common     { --tier-color: var(--tier-green); }
.item-card.tier-uncommon   { --tier-color: var(--tier-blue); }
.item-card.tier-rare       { --tier-color: var(--tier-red); }
.item-card.tier-ultra-rare { --tier-color: var(--amber); }
.item-card.tier-ultra-rare .face:not(.back) .nameplate { color: #000000; }

/* Scale the gem quality badge and its inset with the card width. */
.item-card .image-frame {
    position: relative;
}

.item-card gem-quality {
    position: absolute;
    right: calc(var(--card-w) / 36);
    bottom: calc(var(--card-w) / 36);
    width: calc(var(--card-w) / 3);
    height: calc(var(--card-w) / 3);
    display: block;
    color: #000000;
    font: bold calc(var(--card-w) * 8 / 45) monospace;
    text-align: center;
    pointer-events: none;
}

.item-card gem-quality[hidden] {
    display: none;
}

/* Compact cards use the full layout when popped out. */
.item-card.item-card-image-only:not(.selected) {
    --card-h: var(--card-w);
}

.item-card-image-only:not(.selected) .frame {
    border-width: 1pt;
    padding: 4pt;
}

.item-card-image-only:not(.selected) .face:not(.back) .image-frame {
    height: 100%;
}

.item-card-image-only:not(.selected) gem-quality {
    font-size: 0;
}

.item-card-image-only:not(.selected) gem-quality::part(quality-number) {
    display: none;
}

.item-card-image-only:not(.selected) .nameplate {
    display: none;
}