/* ============================================================================
   Kabb's Auto Battler: the loot screens (mods/loot.js).
   The loot row (gear tray, relic bar), chips and their rarity frames, the gear
   pips and badges on a unit's tile, the choice modal (relic draft, Shard pick,
   Trophy), the sheet (lists, one card, the Forge's confirm) and the GEAR block
   of a unit's detail view.

   File order
     Tokens ........ the rarity ladder
     Chips ......... one frame for relics and gear; states; glyph sizes
     The loot row .. where it sits on a desktop, a phone and a phone held sideways
     Tiles ......... gear pips and badges; the dragged chip
     Cards ......... one card, used by every list, sheet and choice
     The choice .... the modal a fight leaves
     The sheet ..... lists, one card, the Forge
     Detail ........ the GEAR block; the UNDO button
   ============================================================================ */

/* ---------------- tokens: the rarity ladder (common, rare, epic, legendary; prismatic for
   Starforged and Trophies). A rarity is carried by the frame, never by a glow. ---------------- */
:root{
  --rar-1:#9AA3B8;--rar-2:#4D9BFF;--rar-3:#B56BFF;--rar-4:#FFC23C;
  --rar-5:conic-gradient(from 40deg,#FFC23C,#5BE0FF,#C98BFF,#FFC23C);
  --loot-ink:#EFE6CF;--loot-face:#11131e;
}

/* ---------------- chips ---------------- */
.lchip{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;
  width:44px;height:44px;border-radius:11px;color:var(--loot-ink);background:var(--loot-face);border:1px solid var(--rar-1);
  font-family:'Cinzel',serif;font-weight:700;line-height:1;user-select:none;-webkit-user-select:none}
.lchip .lg{width:76%;height:76%;display:block;pointer-events:none}
.lg{width:100%;height:100%;display:block}
/* the frames: a line, a solid with a hairline, two gradients, the prismatic rim */
.rar-2.lchip{border:2px solid var(--rar-2);box-shadow:inset 0 0 0 1px #0a0b13}
.rar-3.lchip{border:2px solid transparent;background:linear-gradient(var(--loot-face),var(--loot-face)) padding-box,linear-gradient(135deg,#B56BFF,#4D9BFF) border-box}
.rar-4.lchip{border:2px solid transparent;background:linear-gradient(var(--loot-face),var(--loot-face)) padding-box,linear-gradient(135deg,#FFE9A8,#FFC23C 45%,#B8860B) border-box}
.rar-5.lchip{border:2px solid transparent;background:linear-gradient(var(--loot-face),var(--loot-face)) padding-box,var(--rar-5) border-box}
.lchip.mini{width:22px;height:22px;border-radius:6px;border-width:1px}
.lchip.big{width:64px;height:64px;border-radius:15px}
.lchip.huge{width:96px;height:96px;border-radius:20px}
.lchip.blind{font-size:30px;color:var(--rar-1)}
.lmore{cursor:pointer;font-size:13px;color:var(--gold);border-style:dashed;padding:0}
.lcount{position:absolute;right:-4px;bottom:-4px;min-width:16px;padding:1px 3px;border-radius:7px;font-size:10px;text-align:center;color:#0a0b13;background:var(--gold);pointer-events:none}
.lbadge{position:absolute;right:-5px;top:-6px;padding:1px 3px;border-radius:6px;font-size:9px;white-space:nowrap;color:var(--gold);background:#0a0b13;border:1px solid var(--line);pointer-events:none}
.lpips{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);display:flex;gap:2px;pointer-events:none}
.lpips i{width:5px;height:5px;border-radius:50%;background:#0a0b13;border:1px solid var(--gold)}
.lpips i.on{background:var(--gold)}
.lempty{font-size:12px;opacity:.5;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lpill{display:inline-block;font-family:'Cinzel',serif;font-weight:700;font-size:11px;letter-spacing:.6px;padding:2px 6px;border-radius:6px;background:#ffffff12;border:1px solid var(--line);white-space:nowrap}
.lpill.new{color:#0a0b13;background:var(--gold);border-color:var(--gold)}
.lpill.live{color:var(--gold)}
.lpill.off{opacity:.7}

/* a relic's states: spent is struck through, dormant wears a dashed ring */
.rchip{cursor:pointer}
.rchip.spent{filter:grayscale(1) brightness(.75)}
.rchip.spent::after{content:'';position:absolute;inset:2px;border-radius:8px;background:linear-gradient(135deg,transparent 46%,#ff5e7e 46%,#ff5e7e 54%,transparent 54%);pointer-events:none}
.rchip.dormant{outline:1.5px dashed var(--rar-1);outline-offset:1px;filter:saturate(.35) brightness(.8)}
/* a tray chip: pressable, and lifted with a ring while its piece is in hand */
.gchip[data-item]{cursor:grab;touch-action:none}
.gchip.armed{transform:translateY(-4px);box-shadow:0 0 0 2px var(--gold),0 6px 14px #000a}

/* ---------------- the loot row ---------------- */
.loot{display:flex;gap:8px;min-width:0}
.lootBox{position:relative;display:flex;align-items:center;gap:8px;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:5px 8px;backdrop-filter:blur(8px)}
.lootLbl{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:2px;color:var(--gold);flex:0 0 auto}
.gearTray,.relicBar{display:flex;align-items:center;gap:4px;min-width:0;flex:1 1 auto}
.gearTray{flex-wrap:nowrap;min-height:44px}
.relicBar{flex-wrap:wrap;align-content:center;cursor:pointer;min-height:44px}
.gearTray.none,.relicBar.none{border:1px dashed #ffffff22;border-radius:9px;justify-content:center;cursor:default}
.relicBar .rchip{width:36px;height:36px;border-radius:9px}
body.gear-armed .gearBox{border-color:var(--gold);box-shadow:0 0 14px -4px var(--gold)}

/* A desktop: the row is the head of the right rail, relics over gear, each a block of its own. */
@media (min-width:861px){
  .cols{grid-template-rows:auto 1fr}
  .cols>.panel:first-child{grid-column:1;grid-row:1 / span 2}
  .cols>.loot{grid-column:2;grid-row:1;flex-direction:column;gap:10px}
  .cols>.panel.side{grid-column:2;grid-row:2}
  .loot .lootBox{flex-direction:column;align-items:stretch;gap:7px;border-radius:16px;padding:11px 13px}
  .loot .relicBox{order:-1}
  .gearTray{flex-wrap:wrap}
  .relicBar{gap:6px}
}
/* Between a phone and a desktop the row keeps its own line under the board. */
@media (min-width:601px) and (max-width:860px){ .loot .lootBox{flex:1 1 0} }
/* A phone: one line between the bench and the belt; the tray left, the relics right. */
@media (max-width:600px){
  .loot{flex:0 0 auto;gap:6px;margin-top:4px}
  .lootBox{height:50px;padding:2px 5px;border-radius:11px}
  .lootLbl{display:none}
  .gearBox{flex:1.2 1 0}.relicBox{flex:1 1 0}
  .relicBar{gap:3px;height:100%}
  .relicBar .rchip{width:30px;height:30px;border-radius:8px}
  /* past five the chips shrink and take a second line: the bar wraps, it never scrolls */
  .relicBar[data-size="small"] .rchip{width:21px;height:21px;border-radius:6px;border-width:1px}
  .relicBar[data-size="small"] .lbadge,.relicBar[data-size="small"] .lpips{display:none}
}
@media (max-width:600px) and (max-height:700px){ .lootBox{height:48px} }
/* A phone held sideways: the row is a slim line under the board and the bench. */
@media (orientation:landscape) and (max-height:600px){
  .cols{display:flex;flex-direction:column;gap:4px}
  .cols>.panel:first-child{flex:1 1 auto;height:auto;min-height:0}
  .loot{flex:0 0 auto;gap:6px}
  .lootBox{flex:1 1 0;height:48px;padding:2px 5px}
  .lootLbl{display:none}
  .relicBar .rchip{width:30px;height:30px}
}

/* ---------------- tiles: gear pips, the badge of a drop, the dragged chip ---------------- */
.gpips{position:absolute;left:3px;bottom:7px;z-index:4;display:flex;align-items:center;gap:2px;pointer-events:none}
.unit .gpips{left:50%;bottom:17px;transform:translateX(-50%)}
.gpip{box-sizing:border-box;width:9px;height:9px;border-radius:50%;border:1px solid #ffffff88;background:#0a0b13aa}
.gpip.sh{border-color:#fff;background:var(--pc)}
.gpip.tr{border:none;border-radius:1px;transform:rotate(45deg) scale(.85);background:var(--rar-5)}
.gpip.fg{width:20px;border:none;border-radius:4px;background:var(--rar-5)}
@media (max-width:600px){ .gpip{width:7px;height:7px}.gpip.fg{width:16px;border-radius:3px} }
.gbadge{position:absolute;right:2px;top:50%;z-index:6;width:22px;height:22px;margin-top:-11px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  color:#0a0b13;background:var(--gold);box-shadow:0 0 0 1px #0a0b13,0 2px 6px #000a;pointer-events:none}
.gbadge .lg{width:78%;height:78%}
.gbadge.b-forge{background:var(--rar-5)}
.gbadge.b-swap{background:var(--cyan)}
body.gear-armed .btile,body.gear-armed #bench .unit{cursor:copy}
.lootGhost{position:fixed;z-index:140;pointer-events:none;transform:translate(-50%,-125%);display:flex;flex-direction:column;align-items:center;gap:4px}
.lootGhost .lchip{width:56px;height:56px;box-shadow:0 8px 20px #000b}
.lootBubble{order:-1;font-family:'Cinzel',serif;font-weight:700;font-size:11px;letter-spacing:.5px;color:#0a0b13;background:var(--gold);border-radius:7px;padding:3px 7px;white-space:nowrap}
.lootBubble:empty{display:none}

/* ---------------- cards ---------------- */
.lcCard{display:flex;gap:12px;align-items:flex-start;width:100%;box-sizing:border-box;text-align:left;font:inherit;color:var(--bone);
  background:#ffffff08;border:1px solid var(--rar-1);border-radius:14px;padding:11px 12px}
button.lcCard{cursor:pointer;min-height:64px}
.lcCard.rar-2{border:2px solid var(--rar-2)}
.lcCard.rar-3{border:2px solid transparent;background:linear-gradient(#151827,#151827) padding-box,linear-gradient(135deg,#B56BFF,#4D9BFF) border-box}
.lcCard.rar-4{border:2px solid transparent;background:linear-gradient(#151827,#151827) padding-box,linear-gradient(135deg,#FFE9A8,#FFC23C 45%,#B8860B) border-box}
.lcCard.rar-5{border:2px solid transparent;background:linear-gradient(#151827,#151827) padding-box,var(--rar-5) border-box}
.lcCard.sel{box-shadow:0 0 0 3px var(--gold),0 0 22px -4px var(--gold)}
.lcCard.spent .lcGlyph,.lcCard.dormant .lcGlyph{filter:grayscale(1) brightness(.75)}
.lcGlyph{flex:0 0 auto;width:56px;height:56px;border-radius:13px;background:#0a0b13;display:flex;align-items:center;justify-content:center;color:var(--loot-ink)}
.lcGlyph .lg{width:74%;height:74%}
.lcBody{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px}
.lcTop{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.lcName{font-family:var(--disp);font-size:16px;font-weight:700;color:var(--bone)}
.lcText{font-size:14px;line-height:1.4}
.lcStat{font-family:'Cinzel',serif;font-weight:700;font-size:13px;color:var(--violet2)}
.lcNote{font-size:12.5px;color:var(--cyan)}
.lcNote.cap{color:var(--gold)}
.lcFlavor{font-size:12.5px;color:#b9b2a0}
.lcRecipes{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12px}
.lcRecipes b{font-family:'Cinzel',serif;font-size:11px;letter-spacing:1px;color:#b9b2a0}
.lcRecipe{display:inline-flex;align-items:center;gap:4px;color:#8d8a80}
.lcRecipe.lit{color:var(--bone)}

/* ---------------- the choice: a relic draft, a Shard pick, a Trophy ---------------- */
.lootModal{transition:opacity .16s}
.lootModal.peek{opacity:.15}
.lootChoice{width:min(980px,94vw);max-height:94dvh;display:flex;flex-direction:column;gap:12px;box-sizing:border-box;
  background:linear-gradient(180deg,#141728,#0b0d16);border:1px solid #3E6FE077;border-radius:18px;padding:18px;box-shadow:0 0 60px #3E6FE044;overflow:hidden}
.lcHead{text-align:center}
.lcHead h2,.lcTrophy h2,.lootSheet h2{font-family:var(--disp);font-size:20px;letter-spacing:2px;color:var(--gold);margin:0}
.lcHead p{margin:5px 0 0;font-size:14px;color:#b9b2a0}
/* the cards scroll inside the modal; its head and its buttons never leave the screen */
/* rows are as tall as their cards need and never squeezed: when the list outgrows the screen it scrolls */
.lcCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-auto-rows:max-content;gap:10px;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px}
/* the swap step lists what is held: compact rows, whatever the screen */
.lcCards.rows{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.lcCards.rows .lcCard{flex-direction:row;align-items:flex-start;text-align:left;min-height:0;padding:10px 12px;gap:11px}
.lcCards.rows .lcGlyph{width:48px;height:48px;border-radius:12px}
.lcCards.rows .lcTop{justify-content:flex-start}
.lcCards .lcCard{flex-direction:column;align-items:center;text-align:center;gap:10px;padding:16px 14px;min-height:250px}
.lcCards .lcGlyph{width:72px;height:72px;border-radius:16px}
.lcCards .lcTop,.lcCards .lcRecipes{justify-content:center}
.lcFoot{display:flex;flex-direction:column;gap:8px}
.lcSide{display:flex;gap:8px;justify-content:space-between}
.lcBtn,.lcTake,.lsClose,.lsGo{min-height:46px;border-radius:11px;cursor:pointer;font-family:'Cinzel',serif;font-weight:700;letter-spacing:1px;font-size:13px}
.lcBtn,.lsClose{flex:1 1 0;padding:0 10px;background:#ffffff10;border:1px solid var(--line);color:var(--bone)}
.lcBtn.peek{flex:0 0 auto;min-width:72px;color:var(--cyan);touch-action:none;user-select:none;-webkit-user-select:none}
.lcBtn.off{opacity:.45}
.lcTake,.lsGo{width:100%;border:none;color:#231603;font-size:15px;background:linear-gradient(180deg,#FFE680,#FFB020);box-shadow:0 6px 16px #ffb02044}
.lcTake:disabled{filter:grayscale(1);opacity:.45;cursor:default;box-shadow:none}
.lcBtn:active,.lcTake:active,.lsClose:active,.lsGo:active,button.lcCard:active{transform:scale(.98)}
.lcBtn:focus-visible,.lcTake:focus-visible,.lsClose:focus-visible,.lsGo:focus-visible,button.lcCard:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.lcTrophy{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:6px 0}
.lcTrophy p{margin:0;max-width:440px}
/* a phone: cards are full-width rows, the modal a column that scrolls inside itself */
@media (max-width:700px){
  .lootChoice{width:100vw;max-height:100dvh;border-radius:16px;padding:14px 12px;gap:10px}
  .lcHead h2,.lcTrophy h2,.lootSheet h2{font-size:17px;letter-spacing:1px}
  .lcCards{grid-template-columns:1fr;gap:8px}
  .lcCards .lcCard{flex-direction:row;align-items:flex-start;text-align:left;min-height:120px;padding:11px 12px;gap:12px}
  .lcCards .lcGlyph{width:64px;height:64px}
  .lcCards .lcTop,.lcCards .lcRecipes{justify-content:flex-start}
}

/* ---------------- the sheet: a list, one card, the Forge's confirm ---------------- */
.lootSheet{width:min(460px,94vw);max-height:88dvh;display:flex;flex-direction:column;gap:10px;box-sizing:border-box;
  background:linear-gradient(180deg,#141728,#0b0d16);border:1px solid #3E6FE077;border-radius:18px;padding:16px;box-shadow:0 0 60px #3E6FE044}
.lootSheet h2{text-align:center}
.lsList{display:flex;flex-direction:column;gap:8px;overflow-y:auto;overscroll-behavior:contain;min-height:0}
.lsClose{flex:0 0 auto}
.lfRow{display:flex;align-items:center;justify-content:center;gap:10px;font-family:'Cinzel',serif;font-size:20px;color:var(--gold)}
.lfLine{text-align:center;font-family:'Cinzel',serif;font-weight:700;font-size:14px;letter-spacing:.5px}
.lfStat{text-align:center;font-family:'Cinzel',serif;font-weight:700;font-size:14px;color:var(--violet2)}
.lfText{text-align:center;font-size:14px;line-height:1.4}
.lfLoses{text-align:center;font-size:12px;color:#8d8a80}
.lfWarn{text-align:center;font-size:12.5px;color:#ff9aa8}
.lfBtns{display:flex;gap:8px}
.lfBtns .lsGo{flex:1.4 1 0;width:auto}
/* a phone: a bottom sheet */
@media (max-width:700px){
  #lootSheet{align-items:flex-end}
  .lootSheet{width:100vw;border-radius:16px 16px 0 0;padding:14px 12px calc(14px + env(safe-area-inset-bottom))}
}

/* ---------------- a unit's detail view: the GEAR block; the bench header's UNDO ---------------- */
.lgBlock .dinfo{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px}
.lgBlock .lcCard{padding:8px 9px;gap:9px}
.lgBlock .lcGlyph{width:44px;height:44px;border-radius:11px}
.lgBlock .lcName{font-size:14px}
.lgBtns{display:flex;gap:6px;margin-top:2px}
.lgBtns button{flex:1 1 0;min-height:44px;border-radius:9px;cursor:pointer;font-family:'Cinzel',serif;font-weight:700;font-size:12px;letter-spacing:1px;background:#ffffff10;border:1px solid var(--line);color:var(--bone)}
.lgFree{font-size:12.5px;color:#b9b2a0;border:1px dashed #ffffff22;border-radius:11px;padding:8px 9px}
.lgStrip{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lgStrip .gchip{cursor:pointer}
/* a small pill inside a 44 px target; the target's margins give the height back, so the header never moves */
.undoSale{display:inline-flex;align-items:center;min-width:0;max-width:60%;min-height:44px;margin:-12px 0;padding:0 2px;vertical-align:middle;background:none;border:none;cursor:pointer;opacity:1!important}
.undoSale>b{font-family:'Cinzel',serif;font-weight:700;font-size:11px;letter-spacing:.6px;color:#0a0b13;background:var(--gold);border-radius:8px;padding:5px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.undoSale:active>b{transform:scale(.97)}
.undoSale.hide{display:none}

/* a glyph of this file in a Help tip sits where an emoji would */
.htip .hi .lg{width:22px;height:22px;color:var(--bone)}

body.reduced-motion .lootModal,body.reduced-motion .gchip.armed{transition:none}