/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   inventory.css  —  INVENTORY OVERLAY

   Design language: cream/ink palette, Space Mono, ultra-minimal.
   Feels like a secure terminal readout, not a game UI.

   Layout:
     #inventoryOverlay
       .inv-left
         .inv-header
         .inv-tabs
         .inv-wheel-wrap          ← clips the wheel, holds selector
           .inv-wheel-selector    ← STATIC centre marker, JS never moves it
           .inv-wheel             ← rows are position:absolute inside here
       .inv-right
         #invCanvas / .inv-blackhole-canvas

   Wheel alignment contract:
     .inv-wheel-selector is top:50% + translateY(-50%), height = ROW_HEIGHT.
     JS places each row so its midpoint = wrapH/2 + dist*ROW_HEIGHT.
     When dist=0 the active row's midpoint = wrapH/2 = selector centre.
     They are always aligned. JS never sets selector position.

   To change row height: update ROW_HEIGHT in WHEEL_CONFIG (inventory.js)
   AND the height values in .inv-wheel-selector and .inv-row below.
   Both must stay in sync.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


/* ── Overlay ─────────────────────────────────────────────────── */

#inventoryOverlay {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    flex-direction: row;
    background: rgba(245, 242, 236, 0.88);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    font-family: 'Space Mono', monospace;
}

#inventoryOverlay.visible {
    opacity: 1;
    pointer-events: all;
}


/* ── Left panel ──────────────────────────────────────────────── */

.inv-left {
    width: 32%;
    min-width: 260px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border2);
}

.inv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.inv-header-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.48rem;
    letter-spacing: 0.45em;
    color: var(--muted);
    text-transform: uppercase;
}

.inv-close-btn {
    background: transparent;
    border: none;
    color: var(--muted);
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 2px 6px;
    transition: color 0.15s;
    line-height: 1;
}

.inv-close-btn:hover { color: var(--ink); }


/* ── Wheel wrap ──────────────────────────────────────────────── */

/*
  Contains both the selector and the wheel track.
  overflow:hidden clips rows that have scrolled out of the visible band.
  The mask fades rows out softly at top and bottom.
  position:relative lets JS read .getBoundingClientRect().height correctly.
*/

.inv-wheel-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;

    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 16%,
        black 84%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 16%,
        black 84%,
        transparent 100%
    );
}


/* ── Selector — static centre marker ────────────────────────── */

/*
  This element NEVER moves. JS does not touch it.
  It marks the vertical centre of the wheel wrap.
  Two thin ink lines top and bottom — understated, matches the
  cream/ink terminal aesthetic. No fill, no color, no gimmicks.

  Height must equal ROW_HEIGHT in WHEEL_CONFIG (default 52px).
*/

.inv-wheel-selector {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 52px;                               /* sync with ROW_HEIGHT */
    transform: translateY(-50%);

    border-top:    1px solid rgba(0, 0, 0, 0.13);
    border-bottom: 1px solid rgba(0, 0, 0, 0.13);

    pointer-events: none;
    z-index: 2;   /* above rows so lines draw on top of row content */
}


/* ── Wheel track ─────────────────────────────────────────────── */

/*
  Full-size absolute container. JS places rows inside via style.top.
  No layout mode — rows are purely JS-positioned.
*/

.inv-wheel {
    position: absolute;
    inset: 0;
    z-index: 1;
}


/* ── Item rows ───────────────────────────────────────────────── */

/*
  Every row is position:absolute. JS sets:
    style.top       — vertical position (changes every frame)
    style.transform — translateX (pull) + scale (falloff)
    style.opacity   — falloff

  transform-origin: left center keeps scale anchored to the left
  edge so text stays left-aligned as items shrink.

  No CSS transition on transform/opacity/top — the JS spring loop
  handles interpolation. Adding CSS transitions here would cause
  double-interpolation and visible stuttering.
*/

.inv-row {
    position: absolute;
    left: 0;
    right: 0;
    height: 52px;                               /* sync with ROW_HEIGHT */

    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 28px 0 24px;

    cursor: pointer;
    border-left: 3px solid transparent;
    user-select: none;
    transform-origin: left center;
    will-change: transform, opacity, top;
}

.inv-row:hover {
    background: rgba(26, 26, 24, 0.04);
}

/* Active row — red left bar + boosted text weight */
.inv-row-active {
    border-left-color: var(--red) !important;
}

.inv-row-active .inv-row-name  { color: var(--ink)  !important; font-weight: 700; }
.inv-row-active .inv-row-index { color: var(--red)  !important; }
.inv-row-active .inv-row-type  { color: var(--muted) !important; }

/* Row content */
.inv-row-index {
    font-family: 'Space Mono', monospace;
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    color: var(--muted2);
    flex-shrink: 0;
    width: 22px;
}

.inv-row-name {
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    color: var(--ink2);
    flex: 1;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.inv-row-type {
    font-family: 'Space Mono', monospace;
    font-size: 0.42rem;
    letter-spacing: 0.2em;
    color: var(--muted2);
    flex-shrink: 0;
    text-transform: uppercase;
}

/* Locked rows */
.inv-row-locked .inv-row-name,
.inv-row-locked .inv-row-type,
.inv-row-locked .inv-row-index {
    color: var(--muted2);
}

/* Redacted text flicker */
.inv-row-redacted {
    animation: inv-redact-flicker 5s ease-in-out infinite;
}

@keyframes inv-redact-flicker {
    0%, 88%, 100% { opacity: 0.5; }
    90%  { opacity: 0.15; }
    92%  { opacity: 0.45; }
    95%  { opacity: 0.1;  }
    97%  { opacity: 0.4;  }
}


/* ── Stickers tab — flat scrollable list ─────────────────────── */

/*
  Sticker rows reuse .inv-row but override the absolute positioning
  so they flow normally. JS hides .inv-wheel-selector in this tab.
  .inv-wheel becomes a normal scrollable column.
*/

.inv-row-sticker-flat {
    position: static   !important;
    height:   auto     !important;
    top:      auto     !important;
    padding-top:    10px !important;
    padding-bottom: 10px !important;
    transform:  none   !important;
    opacity:    1      !important;
    will-change: auto  !important;
}

.inv-wheel:has(.inv-row-sticker-flat) {
    position:   static;
    overflow-y: auto;
    overflow-x: hidden;
    display:    flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--muted2) transparent;
}

.inv-wheel:has(.inv-row-sticker-flat)::-webkit-scrollbar       { width: 2px; }
.inv-wheel:has(.inv-row-sticker-flat)::-webkit-scrollbar-track { background: transparent; }
.inv-wheel:has(.inv-row-sticker-flat)::-webkit-scrollbar-thumb { background: var(--muted2); border-radius: 1px; }


/* ── Empty / loading states ──────────────────────────────────── */

.inv-loading,
.inv-empty {
    font-family: 'Space Mono', monospace;
    font-size: 0.45rem;
    letter-spacing: 0.3em;
    color: var(--muted);
    text-align: center;
    padding: 40px 0;
}


/* ── Right panel ─────────────────────────────────────────────── */

.inv-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 28px 40px;
    border-left: 1px solid var(--border);
}

.inv-viewer-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.3em;
    color: var(--ink);
    text-transform: uppercase;
    margin-bottom: 6px;
    align-self: flex-start;
}

.inv-viewer-sub {
    font-family: 'Space Mono', monospace;
    font-size: 0.5rem;
    letter-spacing: 0.2em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 20px;
    align-self: flex-start;
}

#invCanvas {
    display: block;
    width: 100%;
    flex: 1;
    min-height: 0;
}

.inv-viewer-hint {
    font-family: 'Space Mono', monospace;
    font-size: 0.36rem;
    letter-spacing: 0.2em;
    color: var(--muted2);
    text-transform: uppercase;
    margin-top: 14px;
}


/* ── Black hole (locked items) ───────────────────────────────── */

.inv-blackhole-canvas {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.inv-blackhole-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.42rem;
    letter-spacing: 0.45em;
    color: var(--muted);
    text-transform: uppercase;
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    animation: inv-redact-flicker 4s ease-in-out infinite;
}


/* ── Inventory button — left side of globe ───────────────────── */

#inventoryBtn {
    position: fixed;
    left: 36px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    font-family: 'Space Mono', monospace;
    font-size: 0.48rem;
    letter-spacing: 0.35em;
    color: var(--muted);
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.4s ease, color 0.15s;
    z-index: 400;
    text-transform: uppercase;
    padding: 8px 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

#inventoryBtn.visible { opacity: 1; pointer-events: all; }
#inventoryBtn:hover   { color: var(--ink); }


/* ── Card editor button — right side of globe ────────────────── */

#cardEditorBtn {
    position: fixed;
    right: 36px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    font-family: 'Space Mono', monospace;
    font-size: 0.48rem;
    letter-spacing: 0.35em;
    color: var(--muted);
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.4s ease, color 0.15s;
    z-index: 400;
    text-transform: uppercase;
    padding: 8px 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

#cardEditorBtn.visible { opacity: 1; pointer-events: all; }
#cardEditorBtn:hover   { color: var(--ink); }


/* ── Dev sticker button ──────────────────────────────────────── */

#devStickerBtn {
    position: fixed;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Space Mono', monospace;
    font-size: 0.42rem;
    letter-spacing: 0.3em;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--border2);
    border-radius: 3px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.4s ease, color 0.15s, border-color 0.15s;
    z-index: 400;
    text-transform: uppercase;
    padding: 6px 14px;
}

#devStickerBtn.visible             { opacity: 1; pointer-events: all; }
#devStickerBtn:hover               { color: var(--ink); border-color: var(--muted); }


/* ── Tabs ────────────────────────────────────────────────────── */

.inv-tabs {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid var(--border2);
    flex-shrink: 0;
}

.inv-tab {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: 'Space Mono', monospace;
    font-size: 0.42rem;
    letter-spacing: 0.3em;
    color: var(--muted2);
    text-transform: uppercase;
    cursor: pointer;
    padding: 10px 0;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}

.inv-tab:hover { color: var(--muted); }

.inv-tab-active {
    color: var(--ink) !important;
    border-bottom-color: var(--red) !important;
}