/* ============================================================
   v0.4.18: Pit "Last Drops" card - recent artifact drops + timestamps.
   Trophy log: reinforces variable-reward retention (memorable drops only).

   v0.9.6: the log RESERVES its full height from the first paint. It used to be
   as tall as however many drops existed, so a spin that landed an artifact grew
   the card by one row, the page grew with it, and everything under the machine
   jumped down while the reels were still settling - at exactly the moment the
   user is watching the result. The reservation is stated as row count x row
   height so it stays honest if either changes: Pit.razor.cs asks for 8 rows
   (RecentDropsAsync(uid, 8)) and a .drop-row measures 38px.

   Owner rule: a window that jumps is a sin. Reserve the space, scroll inside it.
   ============================================================ */
.last-drops {
  --drop-rows: 8;
  --drop-row-h: 38px;
  --drop-gap: 8px;
  margin: 24px auto 0;
  max-width: 560px;
  background: linear-gradient(180deg, #181228 0%, #0d0a18 100%);
  border: 1px solid rgba(255,215,0,0.22);
  border-radius: 14px;
  padding: 16px 18px 18px;
  color: #e8e4f5;
}
.last-drops-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #FFD700;
  margin-bottom: 12px;
}

/* Both states occupy the same box, so the very first drop does not resize the card either. */
.last-drops-empty,
.last-drops-list {
  height: calc(var(--drop-rows) * var(--drop-row-h)
               + (var(--drop-rows) - 1) * var(--drop-gap));
}
.last-drops-empty { font-size: 12px; color: #8c84a8; }
.last-drops-list {
  display: flex;
  flex-direction: column;
  gap: var(--drop-gap);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.drop-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  border-left: 3px solid;
  /* The list is a fixed-height flex column: without this the rows would squash to fit
     instead of scrolling, which is the same jitter wearing a different hat. */
  flex: 0 0 auto;
}
.drop-glyph { font-size: 22px; line-height: 1; }
.drop-name { flex: 1; font-size: 13px; color: #e8e4f5; }
.drop-tier {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.85;
}
.drop-time { font-size: 11px; color: #8c84a8; font-variant-numeric: tabular-nums; }

/* ============================================================
   v0.9.7.3: single mode is a console ROW (owner ask) - the machine and the
   trophy log side by side: reels | drop rail | last drops. The log column
   is fixed-width so a drop landing never reflows the machine; below ~1100px
   the row stacks and the log returns under the cabinet (phones unchanged).
   ============================================================ */
.pit-single {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 320px);
  gap: 18px;
  align-items: start;
  width: 100%;
}

/* The side log wears the cabinet's velvet and gold rim so the row reads as
   one console, not a machine with a web card parked next to it. Literal
   colours: the --pit-* tokens are scoped to .pit-frame and do not reach a
   sibling column. */
.pit-side-drops {
  margin: 0;
  max-width: none;
  width: 100%;
  background:
    radial-gradient(ellipse 80% 30% at 50% 0%, rgba(124, 58, 237, 0.22), transparent 60%),
    linear-gradient(180deg, #1A0E2E 0%, #0B0617 100%);
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 18px;
  box-shadow:
    inset 0 10px 28px rgba(11, 6, 23, 0.75),
    inset 0 2px 0 rgba(255, 215, 0, 0.12),
    0 10px 30px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(124, 58, 237, 0.18);
}
.pit-side-drops .last-drops-title {
  text-align: center;
  letter-spacing: 0.3em;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
}

/* The stock light scrollbar glares on the velvet - dress it like the cabinet. */
.pit-side-drops .last-drops-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.55) rgba(11, 6, 23, 0.6);
}
.pit-side-drops .last-drops-list::-webkit-scrollbar { width: 8px; }
.pit-side-drops .last-drops-list::-webkit-scrollbar-track { background: rgba(11, 6, 23, 0.6); border-radius: 4px; }
.pit-side-drops .last-drops-list::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.55); border-radius: 4px; }

@media (max-width: 1100px) {
  /* minmax(0,...) is load-bearing: a bare 1fr floors at the machine's
     min-content (its 600px clamp floor) and drags a horizontal scrollbar
     onto phones - the exact leak the page belt exists to prevent. */
  .pit-single { grid-template-columns: minmax(0, 1fr); }
  .pit-side-drops { max-width: 560px; margin: 0 auto; }
}

/* Phase 5: pet injury / heal / dungeon */
.pet-injured-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(255,80,80,0.6));
}
.pet-card-stage-injured { color: #f87171; }
.pet-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.pet-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.pet-action-btn:hover:not(:disabled) { opacity: 0.85; transform: translateY(-1px); }
.pet-action-btn:disabled { cursor: not-allowed; opacity: 0.45; }
.pet-heal-btn { background: linear-gradient(135deg, #059669, #064e3b); color: #d1fae5; }
.pet-dungeon-btn { background: linear-gradient(135deg, #7c3aed, #4c1d95); color: #ede9fe; }
.pet-collect-btn { background: linear-gradient(135deg, #e7c64a, #b45309); color: #fef9c3; }

/* Dungeon expedition: away state + countdown + collect result */
.pet-emoji-away { opacity: 0.45; filter: grayscale(0.6); }
.pet-card-stage-away { color: #c4b5fd; }
/* v0.7.3: the countdown is its own column at the card's right edge - a big hourglass
   that FLIPS with a wind-up overshoot and a jerk back (the sand restarts), and the
   remaining time in large serial-plate digits right under it. */
.pet-expedition-countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(196, 181, 253, 0.4);
  color: #c4b5fd;
  flex-shrink: 0;
}
.pet-hourglass {
  display: inline-block;
  font-size: 34px;
  line-height: 1;
  transform-origin: 50% 52%;
  animation: pet-hourglass-flip 4s ease-in-out infinite;
}
/* Two half-turns per cycle so the loop is seamless: wind past the mark, jerk back,
   settle, let the sand run, repeat. */
@keyframes pet-hourglass-flip {
  0%, 34%   { transform: rotate(0deg); }
  42%       { transform: rotate(198deg); }
  46%       { transform: rotate(172deg); }
  50%, 84%  { transform: rotate(180deg); }
  92%       { transform: rotate(378deg); }
  96%       { transform: rotate(352deg); }
  100%      { transform: rotate(360deg); }
}
.pet-countdown-time {
  font-family: "Bahnschrift", "DIN Alternate", "Franklin Gothic Medium", "Arial Narrow", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: #ddd3ff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  .pet-hourglass { animation: none; }
}

/* v0.7.3: bottom row of the pet card - Customize (when home) beside the pet level. */
.pet-card-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.pet-card-bottom .pet-customize { margin-top: 0; }
.pet-expedition-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #fde68a;
  animation: profile-fade 0.3s ease-out;
}
.pet-expedition-result-injured { color: #f87171; }

/* ============================================================
   Inventory modal - artifact inventory, fusion, showcase pinning.
   Mirrors .profile-overlay / .profile-card layout and tier colour
   variables so the visual language is consistent.
   ============================================================ */

.inventory-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 6, 18, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: profile-fade 0.2s ease-out;
}

.inventory-card {
  position: relative;
  width: 1040px;
  max-width: 100%;
  /* v0.9.6: FIXED height, was max-height (content-tall). Selecting a tile populates the
     detail card, which used to grow the modal ~60px and shove its top edge 30px up as the
     overlay re-centred - measured, and exactly the twitch the owner banned: a window that
     jumps is a sin. The box is now a constant; selection changes only what is inside it.
     dvh where supported (see .profile-card note) + no scroll chaining on touch. */
  height: min(92vh, 880px);
  height: min(92dvh, 880px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: linear-gradient(180deg, #181228 0%, #0d0a18 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  color: #e8e4f5;
  font-family: var(--chronos-font-sans);
  padding: 20px 24px 28px;
}

.inventory-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c8bfe0;
  margin-bottom: 18px;
  padding-right: 36px;
}

.inv-empty {
  padding: 40px 0;
  text-align: center;
  color: #8c84a8;
  font-size: 13px;
}

.inventory-body {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 600px) {
  .inventory-body { grid-template-columns: 1fr; }
  /* v0.4.68: once the body stacks, the grid's own capped scroll nests a second
     scrollbar inside the already-scrolling card (and its -120px offset assumed
     the desktop header). One scroll region on phones: the card. */
  .inv-grid-wrap { max-height: none; overflow-y: visible; }
}

/* v0.4.68: phone fit - reclaim the overlay padding, trim the card chrome.
   v0.9.6: height, not max-height - same fixed-box rule as the desktop card. */
@media (max-width: 480px) {
  .inventory-overlay { padding: 12px; }
  .inventory-card { padding: 14px 14px 20px; height: calc(100dvh - 24px); }
}

/* ---- Grid (left panel) ---- */
.inv-grid-wrap {
  max-height: calc(92vh - 120px);
  overflow-y: auto;
  /* Breathing room so a selected tile's 2px outline plus the hover lift
     (translateY -2px) are not clipped by this scroll container's edges. */
  padding: 6px;
}

.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px;
}

.inv-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
  padding: 6px;
  font-size: 10px;
  gap: 2px;
}
.inv-tile:hover { transform: translateY(-2px); background: rgba(255,255,255,0.08); }
.inv-tile-selected { background: rgba(124,58,237,0.22) !important; outline: 2px solid rgba(124,58,237,0.7); }
.inv-tile-pinned::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a855f7;
}

/* Rarity-coloured tile frames. .inv-tile's `border: 2px solid` shorthand resets
   border-color to currentColor and this file loads after 11-profile-modal.css,
   so the bare .tier-* colour rules there lose the cascade - restate them at
   (0,2,0) with a matching soft glow so rarity reads at a glance. */
.inv-tile.tier-common    { border-color: #b8c0cc; }
.inv-tile.tier-uncommon  { border-color: #4a90d9; box-shadow: 0 0 12px rgba(74,144,217,0.28), inset 0 0 10px rgba(74,144,217,0.12); }
.inv-tile.tier-rare      { border-color: #f0c419; box-shadow: 0 0 14px rgba(240,196,25,0.30), inset 0 0 10px rgba(240,196,25,0.12); }
.inv-tile.tier-epic      { border-color: #e8833a; box-shadow: 0 0 16px rgba(232,131,58,0.34), inset 0 0 12px rgba(232,131,58,0.14); }
.inv-tile.tier-legendary { border-color: #e0405a; box-shadow: 0 0 20px rgba(224,64,90,0.42), inset 0 0 14px rgba(224,64,90,0.16); }

.inv-tile-glyph { font-size: 28px; line-height: 1; }
.inv-tile-count {
  position: absolute;
  bottom: 3px;
  right: 5px;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: rgba(0,0,0,0.55);
  border-radius: 5px;
  padding: 1px 4px;
}
.inv-tile-pin-dot {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 10px;
  color: #a855f7;
  line-height: 1;
}

/* ---- Detail card (right panel) ---- */
.inv-detail {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  min-height: 200px;
}

.inv-detail-glyph { font-size: 52px; line-height: 1; }
.inv-detail-name  { font-size: 14px; font-weight: 700; color: #e8e4f5; }
.inv-detail-rarity { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.inv-detail-desc  { font-size: 11px; color: #8c84a8; line-height: 1.5; }
.inv-detail-owned { font-size: 11px; color: #8c84a8; }
.inv-detail-hint  { font-size: 12px; color: #6c6488; padding: 20px 0; }
.inv-action-msg   { font-size: 11px; color: #a855f7; margin-top: 4px; }

/* ---- Per-tier text colour (detail rarity label) ---- */
.tier-text-common    { color: #b8c0cc; }
.tier-text-uncommon  { color: #4a90d9; }
.tier-text-rare      { color: #f0c419; }
.tier-text-epic      { color: #e8833a; }
.tier-text-legendary { color: #e0405a; }

/* ---- Inventory action buttons ---- */
.inv-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
}

.inv-btn {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.inv-btn:hover:not(:disabled) { opacity: 0.85; transform: translateY(-1px); }
.inv-btn:disabled { cursor: not-allowed; opacity: 0.4; }
.inv-btn-fuse    { background: linear-gradient(135deg, #7c3aed, #4c1d95); color: #ede9fe; }
.inv-btn-pin     { background: linear-gradient(135deg, #0f766e, #134e4a); color: #d1fae5; }
.inv-btn-unpin   { background: rgba(255,255,255,0.08); color: #c8bfe0; }
.inv-btn-salvage { background: linear-gradient(135deg, #92400e, #78350f); color: #fef3c7; }
.inv-salvage-note { font-size: 0.7rem; color: #a8a0c0; margin-top: 6px; text-align: center; }

/* Open inventory button on the profile card. Stretched CTA with the drawn
   backpack icon. Vertical rhythm: the section above ends with 6px padding and
   the showcase head below starts with 18px - so 12px top margin + 0 bottom
   makes both visual gaps an even 18px WITHOUT changing the card's total height
   (the old 0/12 split summed to the same 12px). */
.profile-inventory-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Buttons size to content even as flex containers - stretch explicitly. */
  width: calc(100% - 48px);
  margin: 12px 24px 0;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid rgba(168,85,247,0.38);
  background: linear-gradient(135deg, rgba(124,58,237,0.30), rgba(76,29,149,0.16));
  color: #ddd3f5;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s, border-color 0.15s;
}
.profile-inventory-btn:hover {
  background: linear-gradient(135deg, rgba(124,58,237,0.44), rgba(76,29,149,0.28));
  border-color: rgba(168,85,247,0.65);
  box-shadow: 0 4px 14px rgba(124,58,237,0.25);
  transform: translateY(-1px);
}
.profile-inventory-btn-icon {
  width: 22px;
  height: 22px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

@media (prefers-reduced-motion: reduce) {
  .inventory-overlay { animation: none; }
  .inv-tile, .inv-btn { transition: none; }
}

/* ============================================================
   Inventory layout: right column stacks detail + fusion
   ============================================================ */
.inv-right-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Highlight tiles that match the station's locked artifact+rarity */
.inv-tile-station-match { outline: 2px dashed rgba(168,85,247,0.55); }