/* Solo Ascension - css/loot-items.css
   Loot tab additions (2026-10-15): the stat row at the top, the item editor's two-tap
   delete line, Big items boxes (the category switch, the teal strapped chest wherever such
   a box shows), the Big items list, the BIG chips and the prize card's BIG ITEM mark.
   The roulette has its own file (loot-roll.css). */

/* ---- Stat row: Boxes opened · Pending · Items in inventory ---- */
.loot-stats{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:16px;
}
.loot-stat{
  background:var(--card-grad); border:1px solid var(--line); border-radius:12px;
  padding:10px 8px 9px; text-align:center; box-shadow:var(--card-shadow); min-width:0;
}
.loot-stat b{
  display:block; font-size:22px; line-height:1.15; font-weight:800; color:var(--text);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.loot-stat span{
  display:block; margin-top:2px; font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); line-height:1.3; overflow-wrap:anywhere;
}
.loot-stat:first-child b{color:var(--rank);}   /* the lifetime count is the headline */

/* ---- Editor: the two-tap delete ----
   The × keeps its glyph, size and 23px cell while armed (.del.armed shrinks the
   type for the categories' "sure?" label; an item row must not move a pixel).
   The question gets its own full-width line instead, the .loot-item-nothing-tag
   pattern, below every other line the row can wrap into. */
.loot-item-del.armed{font-size:15px; opacity:1; color:#dc2626;}
.loot-item-del-confirm{
  flex:0 0 100%; order:11; display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:11.5px; line-height:1.35; color:var(--text);
  background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.35); border-radius:7px; padding:5px 6px 5px 9px;
}
.loot-item-del-confirm span{min-width:0; overflow-wrap:anywhere;}
.loot-item-del-cancel{
  flex:0 0 auto; background:var(--panel); border:1px solid var(--line2); border-radius:6px;
  color:var(--text); font-family:'DM Sans',sans-serif; font-size:11.5px; font-weight:600;
  padding:4px 10px; cursor:pointer;
}
@media (pointer:coarse){ .loot-item-del-cancel{min-height:36px;} }

/* ---- Big items box: an ordinary category whose chest is a teal strongbox ----
   Teal, distinct from the rare blue and from the --gain green. The tier still shows
   in its badge and ceremony; only the chest and the card wear the Big look. Where a
   chest sits on a coloured square (the roulette's .ws-box), ws-big keeps the light
   lid and swaps the body to teal so it reads at speed. */
.lb-chest-btn.loot-big-cat, .lb-showcase.loot-big-cat, #lootRollOverlay .lr-box.loot-big-cat,
#lootDropOverlay .ld-box.loot-big-cat{--rc:#0f766e; --rc2:#5eead4; --rcT:rgba(20,184,166,.45);}
.ws-sq.ws-box.ws-big .lb-chest{--rc:#0f766e; --rc2:#99f6e4;}
#lootDropOverlay .ld-box.loot-big-cat .ld-box-tier{color:#5eead4;}
/* the strongbox: a gold strap across the body */
.loot-big-cat .lb-chest-body::before, .ws-big .lb-chest-body::before{
  content:''; position:absolute; left:0; right:0; top:42%; height:3px;
  background:linear-gradient(90deg, #a16207, #fde68a, #a16207); opacity:.9;
}
.loot-big-cat .lb-chest-lock, .ws-big .lb-chest-lock{background:#fde68a; box-shadow:0 0 6px rgba(253,230,138,.6);}
.loot-cat-card.loot-big-cat{border-color:rgba(45,212,191,.55); box-shadow:inset 0 0 0 1px rgba(45,212,191,.12);}
.loot-pending-head .loot-log-big{flex:0 0 auto;}
.lr-box .loot-log-big{margin-top:-2px;}

/* ---- The "Big items box" switch on a category card ---- */
.loot-cat-big-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 10px;}
.loot-cat-big-text{display:flex; flex-direction:column; min-width:0; line-height:1.3;}
.loot-cat-big-text b{font-size:12.5px; font-weight:700; color:var(--text);}
.loot-cat-big-text span{font-size:11px; color:var(--muted); overflow-wrap:anywhere;}
.loot-big-cat .loot-cat-big-text b{color:#5eead4;}
.loot-cat-big-row .switch.on{background:#14b8a6; border-color:#14b8a6;}

/* ---- Big items section ---- */
.loot-big-sub{
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 8px;
}
#lootBigToBuy + .loot-big-sub{margin-top:14px;}
.loot-big-row{gap:10px;}
/* a purchase is a bigger deal than a stack: a larger picture than the inventory's 22px */
.loot-big-row .loot-inv-img{width:34px; height:34px; border-radius:7px;}
.loot-big-row .loot-inv-emoji{width:34px; font-size:24px;}
.loot-big-main{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px;}
.loot-big-main .loot-inv-name{overflow-wrap:anywhere;}
.loot-big-qty{color:var(--muted); font-size:12px;}
.loot-big-meta{font-size:11px; color:var(--muted);}
.loot-big-date{white-space:nowrap;}
.loot-big-buy{
  flex:0 0 auto; background:#14b8a6; color:#04201d; border:1px solid #14b8a6; border-radius:8px;
  font-family:'DM Sans',sans-serif; font-size:12px; font-weight:700; padding:0 12px; min-height:40px; cursor:pointer;
}
@media (hover:hover) and (pointer:fine){.loot-big-buy:hover{filter:brightness(1.1);}}
.loot-big-done{flex:0 0 40px; text-align:center; color:var(--gain); font-weight:800;}
#lootBigBought .loot-big-row{opacity:.8;}

/* ---- Loot log: a big win and its purchase carry a chip ----
   Inline at the START of the row's text, not a flex cell of its own: the text is
   the one cell allowed to shrink, so the chip can never push the category out of a
   320px row the way a separate cell did — and first, so the text's two-line clamp
   can never cut it off. */
.loot-log-big{
  display:inline-block; vertical-align:1px; font-size:9px; font-weight:800; letter-spacing:.1em; line-height:1.5;
  color:#04201d; background:#2dd4bf; border-radius:4px; padding:0 5px;
}

/* ---- Prize card: a big win says so ---- */
#lootOverlay .lb-pbig{
  display:inline-block; margin:0 auto 14px; padding:4px 11px; border-radius:999px;
  font-size:10px; font-weight:800; letter-spacing:.18em; color:#04201d; background:#2dd4bf;
  box-shadow:0 0 18px rgba(45,212,191,.45);
}

/* ---- Batch 2 D (2026-10-16): moving stacks to Big items; pictures for deleted rows ----
   An inventory row gains a second, right-aligned line for "+ Picture" and "→ Big items",
   so the first line keeps exactly its old cells at every width. */
#lootInventory .loot-inv-row{flex-wrap:wrap; row-gap:6px;}
.loot-inv-acts{flex:1 0 100%; display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px;}
.loot-inv-tobig, .loot-addpic, .loot-big-move-btn{
  background:transparent; color:#5eead4; border:1px solid rgba(45,212,191,.55); border-radius:8px;
  font-family:'DM Sans',sans-serif; font-size:11.5px; font-weight:700; padding:0 10px; min-height:34px;
  cursor:pointer; white-space:nowrap; max-width:100%;
}
@media (pointer:coarse){ .loot-inv-tobig, .loot-addpic, .loot-big-move-btn{min-height:40px;} }
@media (hover:hover) and (pointer:fine){
  .loot-inv-tobig:hover, .loot-addpic:hover, .loot-big-move-btn:hover{background:rgba(45,212,191,.12);}
}
.loot-inv-tobig.armed, .loot-big-move-btn.armed{background:#14b8a6; color:#04201d; border-color:#14b8a6; white-space:normal;}
.loot-big-main .loot-addpic{align-self:flex-start; margin-top:4px;}
/* no picture and no emoji: a quiet empty tile, the size of the picture it stands in for */
.loot-inv-ph{
  flex:0 0 auto; width:22px; height:22px; border-radius:5px; box-sizing:border-box;
  border:1px dashed var(--line); background:var(--panel);
}
.loot-big-row .loot-inv-ph{width:34px; height:34px; border-radius:7px;}
/* the offer on a Big items box that still has stacks in the inventory */
.loot-big-move-note{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
  margin:-4px 0 10px; padding:8px 10px; border-radius:8px; font-size:12px; line-height:1.35;
  background:rgba(20,184,166,.10); border:1px solid rgba(45,212,191,.35); color:var(--text);
}
.loot-big-move-note > span:first-child{min-width:0; overflow-wrap:anywhere;}
.loot-big-move-acts{display:flex; gap:8px; flex-wrap:wrap;}