/* ═══════════════════════════════════════════════════════════════
   vault.css — the vault and the desk
   ═══════════════════════════════════════════════════════════════
   Same room as the upgrader: obsidian floor, gunmetal panels, and gold as the
   only thing that glows. It carries its own tokens for the same reason the
   upgrader does — these surfaces should not drift when the shared sheet moves.

   THE ONE RULE ABOUT GOLD HERE
   ---------------------------
   Gold means money that is yours or about to be. It marks accrued yield, a
   matured payout, a sale price. It never marks a countdown, a lock, or a
   forfeit, because a player scanning this page should be able to trust that the
   glowing number is the good one. Crimson means loss and nothing else.

   Zero purple, by rule, and nothing in the 250-335 hue wedge.               */

.vault, .deliverycode {
  --v-obsidian: #0a0a0c;
  --v-charcoal: #14120c;
  --v-panel:    #17140d;
  --v-panel-2:  #1f1a10;

  --v-gold:        #ffaa00;
  --v-gold-bright: var(--gold-bright);
  --v-gold-deep:   #a35f00;
  --v-cyan:        #ffd700;
  /* Success is cyan, not green: gold is the brand and would erase the
     win/loss signal if it also meant "this went up". */
  --v-win:         #ffd700;

  --v-crimson:     #ff2222;

  /* the gradient that names the brand: lava gold, low to specular */
  --v-ramp: linear-gradient(135deg, var(--v-gold-deep) 0%, var(--v-gold) 45%, var(--v-gold-bright) 100%);

  --v-ease: cubic-bezier(.22, 1, .36, 1);
}

.vault { display: flex; flex-direction: column; gap: 16px; }

/* ── the glass header ──
   One number, at the size the number deserves. Everything else on this page is
   supporting detail for the figure in here. */
.glass, .vaulthead {
  position: relative; overflow: hidden;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(38, 33, 20, .55), rgba(12, 11, 8, .72));
  border: 1px solid rgba(255, 170, 0, .16);
  box-shadow:
    inset 0 1px 0 rgba(255, 214, 150, .14),
    inset 0 -1px 0 rgba(0, 0, 0, .7),
    0 18px 50px -28px rgba(0, 0, 0, .95);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
/* the brand light behind the glass, thrown onto the surface it sits on */
.vaulthead::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(52% 130% at 14% 0%, rgba(255, 170, 0, .16), transparent 68%);
}
/* a machined seam across the top edge */
.vaulthead::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--v-gold) 30%, var(--v-gold-bright) 50%, var(--v-gold) 70%, transparent);
  opacity: .75;
}
.vaulthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 22px 24px;
}
.vaulthead__main { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vaulthead__label {
  font-family: var(--mono); font-size: .625rem; font-weight: 800;
  letter-spacing: .24em; text-transform: uppercase; color: var(--faint);
}
.vaulthead__figure {
  font-family: var(--disp); font-weight: 900;
  font-size: clamp(1.9rem, 4.6vw, 3rem); letter-spacing: -.035em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  background: var(--v-ramp); -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 18px rgba(255, 150, 0, .4));
}
.vaulthead__sub { font-size: .75rem; color: var(--muted); max-width: 46ch; }
.vaulthead .btn { position: relative; z-index: 1; flex: none; }

/* ── held lots ── */
.vaultgrid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}
.vaultcard {
  display: flex; flex-direction: column; gap: 8px;
  padding: 13px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(31, 26, 16, .72), rgba(13, 12, 9, .86));
  border: 1px solid rgba(255, 255, 255, .05);
  transition: border-color .3s var(--v-ease), transform .3s var(--v-ease);
}
.vaultcard:hover { border-color: rgba(255, 170, 0, .3); transform: translateY(-2px); }
.vaultcard__name { font-size: .875rem; font-weight: 800; color: var(--text); }
.vaultcard__meta { display: flex; flex-direction: column; gap: 4px; }
.vaultcard__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: .75rem;
}
.vaultcard__row i {
  font-style: normal; font-family: var(--mono); font-size: .625rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--faint);
}
.vaultcard__row b { font-variant-numeric: tabular-nums; color: var(--text); }
.vaultcard__gold { color: var(--v-gold-bright); text-shadow: 0 0 7px rgba(255, 170, 0, .22); }

/* progress toward this lot's lifetime cap */
.vaultcard__bar {
  display: block; height: 4px; border-radius: 4px; margin-top: 3px;
  background: rgba(255, 255, 255, .06); overflow: hidden;
}
.vaultcard__bar i {
  display: block; height: 100%; border-radius: 4px;
  background: var(--v-ramp);
  box-shadow: 0 0 6px rgba(255, 170, 0, .22);
  transition: width .5s var(--v-ease);
}
.vaultcard__cap {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}
.vaultcard__actions { display: flex; gap: 4px; }
.vaultcard__actions .btn { flex: 1; }

/* the one-time withdrawal delivery code: gold because it is the thing to copy */
.deliverycode {
  color: var(--v-gold-bright);
  font-weight: 800;
  text-shadow: 0 0 7px rgba(255, 170, 0, .22);
}

.modal__note { font-size: .75rem; color: var(--faint); line-height: 1.6; }

/* ── narrow ── */
@media (max-width: 720px) {
  .vaulthead { padding: 18px; }
  .vaulthead .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .vaultcard, .vaultcard__bar i { transition: none; }
  .vaultcard:hover { transform: none; }
}