/* ═══════════════════════════════════════════════════════════════════════
   Blood & Nectar — The Loot Hub  (/game/loot.html)
   ---------------------------------------------------------------------
   Layout ONLY. Tokens, the top bar, panels, the loader and the buttons
   come from /game/shell.css — never restate one here, never invent a
   local palette.

   Four regions, left to right:
     .lt-rail    icon strip, one per category, collapses/expands sections
     .lt-panel   the loot itself — search, sort, collapsible sections   40%
     .lt-stage   the crafting graphic: ring, showcase, bench            60%
   with the currency strip pinned under the panel and stage.

   RARITY IS DRAWN, NOT SPELLED. The 45° marker (BNCard.gemSVG) is the
   only rarity signal — grid squares get the coloured border plus, on
   uncommon and above, the crystal marker that says "breaking this pays a
   crystal". No rarity emoji anywhere, ever.
   ═══════════════════════════════════════════════════════════════════════ */

html.bn-warm .loading{display:none;}

/* shell.css makes .app-body a flex ROW; this page stacks the screen above the
   currency strip, so it needs a column. Scoped to this page's own modifier —
   the shared rule is untouched. */
.app-body.lt-body{flex-direction:column;}

.lt-screen{display:flex;flex:1;overflow:hidden;min-height:0;}

/* ── Station toggle (in the sub-tab strip) ───────────────────────────── */
.lt-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;}
.lt-toggle > span:last-child{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--text-d);}
.lt-toggle input{display:none;}
.lt-toggle .box{
  position:relative;width:34px;height:17px;border-radius:9px;
  border:1px solid rgba(200,170,110,.3);background:rgba(200,170,110,.06);transition:.18s;
}
.lt-toggle .box::after{
  content:'';position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;
  background:var(--text-d);transition:.18s;
}
.lt-toggle input:checked + .box{border-color:var(--gold);background:rgba(200,170,110,.16);}
.lt-toggle input:checked + .box::after{left:18px;background:var(--gold);}
.lt-mute{
  background:none;border:1px solid rgba(200,170,110,.28);border-radius:3px;cursor:pointer;
  width:28px;height:24px;font-size:12px;line-height:1;color:var(--text-m);
  display:flex;align-items:center;justify-content:center;transition:border-color .15s,opacity .15s;
}
.lt-mute:hover{border-color:var(--gold);}
.lt-mute.off{opacity:.45;}

/* ── Icon rail ───────────────────────────────────────────────────────── */
.lt-rail{
  width:54px;min-width:54px;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:12px 0;background:rgba(3,10,18,.92);border-right:1px solid var(--border);
  overflow-y:auto;scrollbar-width:none;
}
.lt-rail::-webkit-scrollbar{display:none;}
.lt-rb{
  width:40px;height:40px;border-radius:4px;border:1px solid transparent;background:none;
  display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;
  color:var(--text-m);transition:background .14s,border-color .14s,transform .14s;position:relative;
}
.lt-rb:hover{background:rgba(200,170,110,.09);border-color:rgba(200,170,110,.3);transform:translateY(-1px);}
.lt-rb.active{background:rgba(200,170,110,.14);border-color:var(--gold);}
.lt-rb.active::before{
  content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);
  width:2px;height:20px;background:var(--gold);border-radius:1px;
}
.lt-rb .rb-n{
  position:absolute;top:1px;right:1px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;
  background:var(--gold-dk);color:#0b1420;font-size:9px;font-weight:800;line-height:14px;text-align:center;
}
.lt-rail .sep{width:22px;height:1px;background:rgba(200,170,110,.16);margin:7px 0;}

/* ── Panel (40%) ─────────────────────────────────────────────────────── */
/* 40 / 60 of the area LEFT OF the rail, not of the whole screen — otherwise
   the 54px rail eats into the panel's share and the split reads 42/58. */
.lt-panel{
  flex:0 0 calc((100% - 54px) * .4);max-width:calc((100% - 54px) * .4);
  display:flex;flex-direction:column;min-width:0;overflow:hidden;
  border-right:1px solid var(--border);
}
.lt-tools{
  display:flex;gap:9px;padding:12px 14px;border-bottom:1px solid var(--border);
  background:rgba(3,10,18,.5);
}
.lt-search{
  flex:1;min-width:0;position:relative;display:flex;align-items:center;
  background:rgba(1,10,19,.7);border:1px solid rgba(200,170,110,.28);border-radius:3px;
}
.lt-search .mag{padding:0 7px 0 9px;font-size:12px;color:var(--text-d);}
.lt-search input{
  flex:1;min-width:0;background:none;border:none;outline:none;padding:8px 9px 8px 0;
  color:var(--text);font-family:var(--fu);font-size:12.5px;
}
.lt-search input::placeholder{color:var(--text-d);}
.lt-sort{
  background:rgba(1,10,19,.7);border:1px solid rgba(200,170,110,.28);border-radius:3px;
  color:var(--text);font-family:var(--fu);font-size:12px;padding:0 8px;outline:none;cursor:pointer;
}
.lt-scroll{flex:1;overflow-y:auto;padding:14px 14px 10px;}

/* ── Collapsible section ─────────────────────────────────────────────── */
.lt-sec{margin-bottom:16px;}
.lt-sec-hd{
  display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;cursor:pointer;
  padding:0 0 7px;border-bottom:1px solid var(--border);margin-bottom:11px;text-align:left;
}
.lt-sec-hd .arw{
  font-size:9px;color:var(--gold);transition:transform .18s;display:inline-block;width:10px;
}
.lt-sec.shut .lt-sec-hd .arw{transform:rotate(-90deg);}
.lt-sec-hd h2{
  font-family:var(--fd);font-size:11.5px;font-weight:700;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--gold);
}
.lt-sec-hd .n{
  font-size:10px;color:var(--text-d);letter-spacing:1px;
  background:rgba(200,170,110,.09);border-radius:8px;padding:1px 7px;
}
.lt-sec-hd .hint{margin-left:auto;font-size:10px;color:var(--text-d);letter-spacing:.2px;}
.lt-sec.shut .lt-row{display:none;}
.lt-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px;}

/* ── Tile ────────────────────────────────────────────────────────────── */
.lt-tile{
  position:relative;aspect-ratio:1;border-radius:3px;cursor:pointer;overflow:hidden;
  background:linear-gradient(160deg,#0d1c2b,#050d16);
  border:1px solid rgba(200,170,110,.22);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:6px 5px;text-align:center;
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
.lt-tile:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.6);}
.lt-tile.sel{box-shadow:0 0 0 2px var(--gold),0 10px 26px rgba(0,0,0,.65);}
.lt-tile .ic{font-size:22px;line-height:1;position:relative;z-index:2;}
.lt-tile .nm{
  font-size:8.5px;line-height:1.2;color:var(--text-m);letter-spacing:.1px;position:relative;z-index:2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Champion / crystal tiles: the art IS the tile. Name sits on a scrim so it
   stays legible over any splash. */
.lt-tile.art-tile{padding:0;justify-content:flex-end;}
.lt-tile.art-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.lt-tile.art-tile .scrim{
  position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(1,10,19,.92));
}
.lt-tile.art-tile .nm{
  color:var(--gold-lt);font-weight:700;font-size:9px;padding:0 4px 5px;width:100%;
  text-shadow:0 1px 3px #000;
}
.lt-tile .ch-noart{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:0;
  font-family:var(--fd);font-size:26px;color:rgba(200,170,110,.32);
  background:radial-gradient(circle at 50% 35%,rgba(30,45,65,.7),#050d16);
}
.lt-tile img.art-missing{display:none;}

/* Rarity lives in the border. Grid squares never take the full-card diamond
   for their own rarity — see the crystal marker below for the exception. */
.lt-tile[data-rarity="common"]   {border-color:var(--c-common);}
.lt-tile[data-rarity="uncommon"] {border-color:var(--c-uncommon);}
.lt-tile[data-rarity="rare"]     {border-color:var(--c-rare);}
.lt-tile[data-rarity="epic"]     {border-color:var(--c-epic);}
.lt-tile[data-rarity="legendary"]{border-color:var(--c-legendary);}

/* Count badge, bottom-right, League style. */
.lt-tile .ct{
  position:absolute;right:3px;bottom:2px;z-index:3;
  font-weight:800;font-size:10.5px;color:var(--gold-lt);text-shadow:0 1px 3px #000,0 0 6px #000;
}
.lt-tile.art-tile .ct{bottom:1px;}

/* THE CRYSTAL MARKER — top-left 45° square. On a champion tile it means
   "this copy breaks into a crystal of this rarity" (common pays none, so
   commons never wear one). On a crystal tile it IS the crystal. Same shape
   the finished cards use, so the language carries over from drop3. */
.lt-mark{position:absolute;left:2px;top:2px;width:15px;height:15px;z-index:3;pointer-events:none;}
.lt-mark svg{width:100%;height:100%;display:block;}
.lt-tile.art-tile .lt-mark{left:3px;top:3px;width:17px;height:17px;}

.lt-tile.locked{opacity:.4;filter:grayscale(.75);}
.lt-tile.locked:hover{opacity:.72;filter:grayscale(.3);}
.lt-empty{
  grid-column:1/-1;padding:14px 12px;border:1px dashed rgba(200,170,110,.16);border-radius:3px;
  font-size:11px;color:var(--text-d);letter-spacing:.2px;text-align:center;
}

/* ── Stage (60%) ─────────────────────────────────────────────────────── */
.lt-stage{
  flex:1 1 60%;min-width:0;display:flex;flex-direction:column;overflow:hidden;
  background:radial-gradient(ellipse at 50% 38%,rgba(10,40,62,.5),var(--bg) 68%);
  --st:var(--gold);--st-glow:rgba(200,170,110,.3);--st-deep:rgba(200,170,110,.08);
}
.lt-stage[data-station="forge"]  {--st:#e08b4c;--st-glow:rgba(224,139,76,.32);--st-deep:rgba(224,139,76,.09);}
.lt-stage[data-station="alchemy"]{--st:#39c98e;--st-glow:rgba(57,201,142,.3); --st-deep:rgba(57,201,142,.08);}
.lt-stage[data-station="altar"]  {--st:#a878e0;--st-glow:rgba(168,120,224,.32);--st-deep:rgba(168,120,224,.09);}
.lt-stage.unified{--st:var(--gold)!important;--st-glow:rgba(200,170,110,.3)!important;--st-deep:rgba(200,170,110,.08)!important;}

.lt-stage-top{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;min-height:0;position:relative;}

/* The ring: concentric arcs around a lit core, with three ARMS reaching out
   to the sockets. The sockets sit ON the arms, on the rim — the crafting
   inputs orbit the thing they feed, instead of sitting in a disconnected
   tray underneath. */
.lt-ring{
  position:relative;width:min(330px,46vh);aspect-ratio:1;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.lt-ring i{position:absolute;border-radius:50%;display:block;}
.lt-ring .r1{inset:0;border:2px solid var(--st-glow);}
.lt-ring .r2{inset:9%;border:1px solid var(--st-glow);opacity:.75;}
.lt-ring .r3{inset:19%;border:1px dashed var(--st-glow);opacity:.6;animation:ltspin 34s linear infinite;}
.lt-ring .r4{inset:30%;border:1px solid var(--st-glow);opacity:.45;animation:ltspin 22s linear reverse infinite;}
.lt-ring .halo{
  inset:12%;border:none;
  background:radial-gradient(circle at 50% 50%,var(--st-deep),transparent 72%);
}
@keyframes ltspin{to{transform:rotate(360deg);}}

/* Arms, sockets and the bench note lived here. They were the reroll bench —
   three inputs orbiting the core they fed. Reroll is gone from crafting, so
   the rim carries nothing and the core is the whole graphic. */
.lt-core{
  position:relative;z-index:2;width:31%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 34%,var(--st),rgba(2,10,18,.9) 72%);
  box-shadow:0 0 44px var(--st-glow),inset 0 0 22px rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(22px,4.2vh,34px);
  transition:background .3s,box-shadow .3s;
}
.lt-core.big-art{overflow:hidden;border:2px solid var(--st-glow);}
.lt-core.big-art img{width:100%;height:100%;object-fit:cover;}

/* Caption under the ring when nothing is picked. */
.lt-idle{position:absolute;bottom:14px;left:0;right:0;text-align:center;padding:0 24px;}
.lt-idle b{
  display:block;font-family:var(--fd);font-size:11px;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--text-m);
}
.lt-idle small{
  display:block;font-size:11px;color:var(--text-d);margin-top:6px;line-height:1.55;
  max-width:340px;margin-left:auto;margin-right:auto;
}

/* ── The showcase panel (replaces the caption when something is picked) ── */
.lt-show{
  border-top:1px solid var(--border);background:rgba(3,10,18,.72);
  padding:14px 20px 16px;max-height:52%;overflow-y:auto;flex:none;
}
.lt-show .hd{display:flex;align-items:flex-start;gap:11px;padding-bottom:10px;}
.lt-show .hd .mk{width:22px;height:22px;flex:none;margin-top:2px;}
.lt-show .hd .mk svg{width:100%;height:100%;display:block;}
.lt-show h3{font-family:var(--fu);font-size:16px;font-weight:800;letter-spacing:.2px;line-height:1.2;}
.lt-show .kind{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--st);margin-top:3px;}
.lt-show .have{font-size:11px;color:var(--text-d);margin-top:4px;}
.lt-show .blurb{font-size:11.5px;line-height:1.6;color:var(--text-m);padding-bottom:6px;}

/* Action rows — fixed shape so the panel never jumps between items. */
.lt-acts{display:flex;flex-direction:column;margin-top:6px;}
.lt-act{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:10px 11px;background:none;border:none;border-top:1px solid rgba(200,170,110,.1);
  color:var(--text);font-family:var(--fu);font-size:12.5px;cursor:pointer;transition:background .14s;
}
.lt-act:last-child{border-bottom:1px solid rgba(200,170,110,.1);}
.lt-act:hover:not(:disabled){background:rgba(200,170,110,.08);}
.lt-act .ai{font-size:14px;width:18px;text-align:center;}
.lt-act .av{font-weight:700;color:var(--gold-lt);}
.lt-act .aq{color:var(--text-d);font-size:11px;}
.lt-act .ac{margin-left:auto;font-weight:800;font-size:12px;white-space:nowrap;}
.lt-act .ac.pos{color:var(--green);}
.lt-act .ac.neg{color:var(--red);}
.lt-act .ac.mut{color:var(--text-d);font-weight:600;}
.lt-act:disabled{opacity:.4;cursor:not-allowed;}
.lt-act:disabled .av{color:var(--text-m);}

.lt-note{
  margin-top:10px;padding:8px 10px;border-radius:3px;font-size:11px;line-height:1.5;
  background:rgba(200,170,110,.06);border:1px solid rgba(200,170,110,.14);color:var(--text-m);
}
.lt-note.bad{background:rgba(229,84,75,.1);border-color:rgba(229,84,75,.34);color:#f0b4af;}
.lt-note.good{background:rgba(95,212,120,.09);border-color:rgba(95,212,120,.32);color:#b9e9c6;}

/* ── Currency strip ──────────────────────────────────────────────────── */
.lt-cur{
  display:flex;align-items:center;height:44px;min-height:44px;
  border-top:1px solid var(--border);background:rgba(3,10,18,.92);padding:0 14px;
  overflow-x:auto;scrollbar-width:none;
}
.lt-cur::-webkit-scrollbar{display:none;}
.lt-cur .c{display:flex;align-items:center;gap:5px;padding:0 13px;white-space:nowrap;}
.lt-cur .c + .c{border-left:1px solid rgba(200,170,110,.1);}
.lt-cur .c .ci{font-size:12px;}
.lt-cur .c .cn{font-weight:800;font-size:12px;color:var(--gold-lt);}
.lt-cur .c .cl{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-d);}

/* ── Tooltip ─────────────────────────────────────────────────────────
   Anchored to the hovered tile. Title takes the item's colour, the 45°
   marker carries rarity, and the rows use the currency glyphs. */
.lt-tip{
  position:fixed;z-index:900;width:236px;pointer-events:none;opacity:0;
  transform:translateY(4px);transition:opacity .1s,transform .1s;
  background:linear-gradient(180deg,#0a1826,#040d16);
  border:1px solid var(--gold-dk);border-radius:3px;
  box-shadow:0 14px 34px rgba(0,0,0,.72);padding:10px 11px 11px;
}
.lt-tip.on{opacity:1;transform:translateY(0);}
.lt-tip .th{display:flex;align-items:flex-start;gap:7px;}
.lt-tip .th .mk{width:16px;height:16px;flex:none;margin-top:1px;}
.lt-tip .th .mk svg{width:100%;height:100%;display:block;}
.lt-tip .tn{font-weight:800;font-size:12.5px;line-height:1.25;letter-spacing:.2px;}
.lt-tip .tk{font-size:9px;letter-spacing:1.8px;text-transform:uppercase;color:var(--text-d);margin-top:2px;}
.lt-tip .td{
  font-size:11px;line-height:1.55;color:var(--text-m);margin-top:7px;
  padding-top:7px;border-top:1px solid rgba(200,170,110,.13);
}
.lt-tip .tr{display:flex;align-items:center;gap:6px;font-size:11px;margin-top:5px;}
.lt-tip .tr .rl{color:var(--text-d);}
.lt-tip .tr .rv{margin-left:auto;font-weight:700;}
.lt-tip .tr .rv.pos{color:var(--green);}
.lt-tip .tr .rv.neg{color:var(--red);}
.lt-tip .tr .rv.mut{color:var(--text-m);}
.lt-tip .tf{
  font-size:10px;color:var(--text-d);font-style:italic;margin-top:7px;line-height:1.45;
  padding-top:6px;border-top:1px solid rgba(200,170,110,.1);
}
.tc-common{color:var(--c-common);}   .tc-uncommon{color:var(--c-uncommon);}
.tc-rare{color:var(--c-rare);}       .tc-epic{color:var(--c-epic);}
.tc-legendary{color:var(--c-legendary);} .tc-gold{color:var(--gold);}
.tc-teal{color:var(--teal);}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .lt-panel{flex-basis:calc((100% - 54px) * .46);max-width:calc((100% - 54px) * .46);}
  .lt-ring{width:min(232px,34vh);}
}
@media (max-width:860px){
  .lt-screen{flex-wrap:wrap;overflow-y:auto;}
  .lt-panel{flex:1 1 100%;max-width:100%;border-right:none;order:2;}
  .lt-stage{flex:1 1 100%;order:1;min-height:340px;}
  .lt-rail{
    order:0;flex:1 1 100%;width:auto;flex-direction:row;justify-content:flex-start;
    border-right:none;border-bottom:1px solid var(--border);padding:5px 8px;overflow-x:auto;
  }
  .lt-rail .sep{width:1px;height:22px;margin:0 5px;}
  .lt-rb.active::before{left:50%;top:auto;bottom:-5px;transform:translateX(-50%);width:20px;height:2px;}
  .lt-show{max-height:none;}
}
@media (max-width:520px){
  .lt-row{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px;}
  .lt-tip{width:200px;}
}