/* ============================================================================
   Kabb's Auto Battler: the belt's screen (mods/beltui.js).
   The belt row (the Claw's bay, the mouth plate, the lane, JOLT, BATTLE), a card's
   face and its rarity frame, cargo, rings and stamps, the shutter, the looks a
   boss's sabotage gives the lane, the undo chip and the belt's sheets.

   Motion is transform and opacity only. Text never goes under 11px.

   File order
     Tokens ........ what the belt's colours mean
     The row ....... where its parts sit on a desktop, a phone and a phone held sideways
     The lane ...... the track, the lip, the drain line, the note, the shutter
     Cards ......... the frame, the art, the tabs, the band, the cost gem, the copy bar
     Rings, stamps . one ring and one tag a card; what a refused card wears
     Cargo ......... one silhouette per kind
     The plate ..... the clock and the pips
     JOLT, the Claw, undo
     Sabotage ...... one look per rule
     Sheets ........ a card read in full; the belt sheet; the Hunt grid inside it
   ============================================================================ */

/* ---------------- tokens ---------------- */
:root{
  --belt-h:124px;                                  /* the lane's height: the row's on a desktop, its first line on a phone */
  --belt-face:#11131e;--belt-ink:#EFE6CF;--belt-low:#B9B2A0;
  --belt-bad:#FF5E7E;--belt-info:#5BC8FF;--belt-good:#7CFFB0;--belt-teal:#2BB6C4;
  --belt-r1:var(--rar-1,#9AA3B8);--belt-r2:var(--rar-2,#4D9BFF);--belt-r3:var(--rar-3,#B56BFF);--belt-r4:var(--rar-4,#FFC23C);
}
.bglyph{width:100%;height:100%;display:block;pointer-events:none}

/* ---------------- the row ---------------- */
/* Desktop: the Claw, the plate, the lane, JOLT and BATTLE in one line. The lane is capped so a
   card never grows past a comfortable size; the row is centred. */
.beltRow{display:grid;grid-template-columns:96px 56px minmax(0,510px) 96px 150px;grid-template-areas:"claw mouth lane jolt battle";
  gap:8px;justify-content:center;height:var(--belt-h);position:relative;z-index:47;user-select:none;-webkit-user-select:none}
#clawBay{grid-area:claw}#beltMouth{grid-area:mouth}#beltLane{grid-area:lane}#joltBtn{grid-area:jolt}
.beltRow #battleBtn{grid-area:battle;width:auto;min-width:0;font-size:15px;letter-spacing:2px;border-radius:12px;animation:none}
.beltRow #battleBtn.go{animation:bpulse 1.4s ease-in-out infinite}
.beltRow button{font-family:'Cinzel',serif;color:var(--belt-ink);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.beltRow button:active{transform:scale(.97)}
.beltRow button:focus-visible{outline:2px solid var(--belt-info);outline-offset:2px}

/* A phone, and any narrow window: the plate and the lane on one line, the Claw, JOLT and BATTLE under them. */
@media (max-width:900px){
  :root{--belt-h:104px}
  .beltRow{grid-template-columns:40px 24px 68px minmax(0,1fr);grid-template-rows:var(--belt-h) 56px;grid-template-areas:"mouth lane lane lane" "claw claw jolt battle";
    gap:4px;height:auto;width:100%;max-width:560px;margin:0 auto;justify-content:stretch}
  .beltRow #battleBtn{font-size:14px;letter-spacing:1.5px}
}
@media (max-width:900px) and (max-height:700px){
  :root{--belt-h:84px}
  .beltRow{grid-template-rows:var(--belt-h) 52px}
}
/* A phone held sideways: one compact line along the bottom. */
@media (orientation:landscape) and (max-height:600px){
  :root{--belt-h:78px}
  .beltRow{grid-area:belt;grid-template-columns:60px 40px minmax(0,1fr) 60px 120px;grid-template-rows:var(--belt-h);grid-template-areas:"claw mouth lane jolt battle";
    gap:6px;height:var(--belt-h);max-width:none;margin:0}
}

/* ---------------- the lane ---------------- */
.beltLane{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--line);touch-action:none;--pitch:80px;
  background:linear-gradient(180deg,#191c2d,#0d0f1a);box-shadow:inset 0 0 22px #000a}
.beltLane img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
/* the lip: the last slot before the edge, hazard-striped */
.blLip{position:absolute;top:0;bottom:0;right:0;width:var(--pitch);pointer-events:none;border-left:1px dashed #ffc23c55;
  background:repeating-linear-gradient(135deg,#ffc23c1a 0 7px,transparent 7px 14px)}
.blCards{position:absolute;left:0;right:0;top:6px;bottom:3px}
/* the drain line: the clock as a bar along the top edge, red for the last seconds */
.blDrain{position:absolute;left:0;right:0;top:0;height:3px;background:#00000066;pointer-events:none}
.blDrain i{display:block;height:100%;transform-origin:0 50%;background:var(--belt-good);will-change:transform}
.blDrain i.low{background:var(--belt-bad)}
/* the note: one line under the drain (the last call, an empty lane, the rule a boss has bent) */
.blNote{position:absolute;left:6px;top:5px;max-width:calc(100% - 12px);padding:1px 6px;border-radius:6px;pointer-events:none;opacity:0;
  font-family:'Cinzel',serif;font-weight:700;font-size:11px;letter-spacing:.6px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--belt-ink);background:#0a0b13cc;z-index:3}
.blNote.on{opacity:1}.blNote.warn{color:#0a0b13;background:var(--belt-bad)}
/* the shutter: down while the clock is held and once the belt has shut */
.blShutter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px 8px;text-align:center;z-index:4;
  background:repeating-linear-gradient(180deg,#232739 0 9px,#1a1d2c 9px 18px);border-radius:11px;transform:translate3d(0,-102%,0);transition:transform .16s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.blShutter.down{transform:none;pointer-events:auto}
.blShutter b{font-family:'Cinzel',serif;font-weight:700;font-size:12px;letter-spacing:1px;color:var(--belt-ink);line-height:1.25}
.blShutter span{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;min-height:0}
.blShutter em{font-style:normal;font-family:'Cinzel',serif;font-weight:700;font-size:11px;letter-spacing:.6px;color:var(--belt-bad)}
.bpip{display:inline-block;width:14px;height:14px;color:var(--belt-low);flex:0 0 auto}
.bpip.k-coin,.bpip.k-golden{color:var(--gold)}.bpip.k-shard{color:var(--belt-info)}.bpip.k-mystery{color:var(--belt-r3)}.bpip.k-stowaway{color:var(--belt-good)}
.bpip.k-trail{color:var(--belt-info)}.bpip.warn{color:var(--belt-bad)}
/* a JOLT kicks the lane; the tide floods it */
.beltLane.zap .blCards{animation:beltZap .26s cubic-bezier(.3,1.4,.5,1)}
@keyframes beltZap{0%{transform:translate3d(-6px,0,0)}45%{transform:translate3d(5px,0,0)}100%{transform:none}}
.beltLane.flood::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#2bb6c455);pointer-events:none;z-index:2}
body.reduced-motion .blShutter{transition:none}
body.reduced-motion .beltLane.zap .blCards{animation:none}

/* ---------------- cards ---------------- */
.bcard{position:absolute;left:0;top:0;bottom:0;width:calc(var(--pitch) - 4px);will-change:transform;cursor:pointer;transform-origin:50% 100%}
.bcard.gone{opacity:.5}
.bcard.dragging{opacity:.3}
.bcIn{position:absolute;inset:0;border-radius:10px;overflow:hidden;box-sizing:border-box;background:var(--belt-face);border:1px solid var(--belt-r1);color:var(--belt-ink)}
/* the frames: a line, a solid with a hairline, two gradients (a rarity is carried by the frame) */
.bcIn.rar-2{border:2px solid var(--belt-r2);box-shadow:inset 0 0 0 1px #0a0b13}
.bcIn.rar-3{border:2px solid transparent;background:linear-gradient(var(--belt-face),var(--belt-face)) padding-box,linear-gradient(135deg,#B56BFF,#4D9BFF) border-box}
.bcIn.rar-4{border:2px solid transparent;background:linear-gradient(var(--belt-face),var(--belt-face)) padding-box,linear-gradient(135deg,#FFE9A8,#FFC23C 45%,#B8860B) border-box}
.bcIn.dim .bcArt,.bcIn.dim .bcSil{filter:grayscale(.8) brightness(.6)}
.bcArt{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 20%,color-mix(in srgb,var(--fc,#3E6FE0) 34%,#0a0b13),#0a0b13)}
.bcArt .port img{object-fit:cover;object-position:50% 12%;filter:none}
.bcArt .pemoji{font-size:30px}
/* top-left: the faction's crest on its colour · top-right: the class */
.bcFac{position:absolute;left:0;top:0;width:20px;height:20px;padding:2px;border-radius:0 0 8px 0;background:var(--fc,#3E6FE0);z-index:2;display:flex;align-items:center;justify-content:center}
.bcFac .crest{display:block;width:100%;height:100%}.bcFac .crest img{width:100%;height:100%;object-fit:contain;display:block}
.bcCls{position:absolute;right:0;top:0;width:20px;height:20px;padding:3px;border-radius:0 0 0 8px;background:#0a0b13d9;z-index:2}
/* the band: role, name; the cost gem overlaps it */
.bcBand{position:absolute;left:0;right:0;bottom:0;height:20px;display:flex;align-items:center;gap:3px;padding:0 4px;background:#0a0b13e6;z-index:2}
.bcRole{width:12px;height:12px;flex:0 0 auto;color:var(--belt-low)}
.bcName{flex:1 1 auto;min-width:0;font-family:'Spectral',serif;font-weight:600;font-size:11.5px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcCost{position:absolute;right:2px;bottom:15px;min-width:22px;height:22px;padding:0 4px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;z-index:3;
  font-family:'Cinzel',serif;font-weight:700;font-size:12px;font-variant-numeric:tabular-nums lining-nums;color:#0a0b13;background:var(--gold);border-radius:7px;border:1px solid #0a0b13}
.bcCost.short{background:var(--belt-bad);color:#fff}
/* the copy bar of an owned unit: how far to its next star, and the part this card adds */
.bcBar{position:absolute;left:0;right:0;bottom:20px;height:3px;background:#00000099;z-index:3;overflow:hidden}
.bcBar i{position:absolute;inset:0;transform-origin:0 50%}
.bcBar .have{background:var(--belt-low)}.bcBar .add{background:var(--gold);opacity:.75}
.bcBar.full .have,.bcBar.full .add{background:var(--gold);opacity:1}
/* a Golden card: a foil sweep and its stars */
.bcFoil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#ffe9a855 46%,#fff6 50%,#ffe9a855 54%,transparent 70%)}
.bcIn.golden{border:2px solid var(--gold)}
.bcStars{position:absolute;left:50%;top:1px;transform:translateX(-50%);z-index:3;font-size:12px;line-height:1;color:var(--gold);text-shadow:0 1px 2px #000}
.bcVine{position:absolute;left:2px;bottom:24px;width:18px;height:18px;padding:1px;border-radius:6px;color:var(--belt-good);background:#0a0b13cc;z-index:3}
/* the face a dragged card leaves the lane as */
.beltGhost{position:fixed;left:0;top:0;z-index:120;pointer-events:none;opacity:.95;will-change:transform}
.beltGhost .bcIn{box-shadow:0 10px 24px #000b,0 0 0 2px var(--gold)}
.dragging-card,.dragging-card *{cursor:grabbing!important}
.dragging-card .planGrid .cell:not(.filled){border-color:#ffffff33;background:#ffffff0d}
.clawBay.drop{box-shadow:0 0 0 2px var(--gold),0 0 16px -2px var(--gold)}

/* ---------------- rings, tags and stamps ---------------- */
/* One ring a card, by what it would do; at most two pulse on the lane, the rest stand still. */
.bcIn.ring::after{content:'';position:absolute;inset:0;border-radius:8px;pointer-events:none;z-index:4;box-shadow:inset 0 0 0 2px var(--ringc,var(--gold))}
.bcIn.r-evolve{--ringc:#FFF3C4}.bcIn.r-evolve::after{box-shadow:inset 0 0 0 2px #FFF3C4,inset 0 0 0 4px #0a0b13,inset 0 0 0 5px var(--gold)}
.bcIn.r-star{--ringc:var(--gold)}.bcIn.r-synergy{--ringc:var(--belt-teal)}
.bcIn.r-hunt::after{box-shadow:none;border:2px dashed var(--belt-info);inset:1px}
.bcIn.ring.pulse::after{animation:beltRing 1s ease-in-out infinite alternate}
@keyframes beltRing{from{opacity:.55}to{opacity:1}}
.bcTag,.bcStamp{position:absolute;left:50%;top:22px;transform:translateX(-50%);z-index:4;padding:1px 5px;border-radius:5px;white-space:nowrap;pointer-events:none;
  font-family:'Cinzel',serif;font-weight:700;font-size:11px;letter-spacing:.4px;line-height:1.3;color:#0a0b13;background:var(--gold)}
.bcTag.t-evolve{background:#FFF3C4}.bcTag.t-synergy{background:var(--belt-teal);color:#fff}.bcTag.t-hunt{background:var(--belt-info)}
.bcStamp{top:38%;color:var(--belt-ink);background:#0a0b13e6;border:1px solid var(--belt-low);transform:translateX(-50%) rotate(-8deg)}
.bcIn.shake{animation:beltShake .32s}
@keyframes beltShake{0%,100%{transform:none}20%{transform:translate3d(-5px,0,0)}60%{transform:translate3d(5px,0,0)}80%{transform:translate3d(-3px,0,0)}}
body.reduced-motion .bcIn.ring.pulse::after{animation:none}

/* ---------------- cargo: the same footprint, a silhouette of its own ---------------- */
.bcIn.cargo{border-style:dashed;background:linear-gradient(180deg,#1b1e30,#11131e)}
.bcSil{position:absolute;left:50%;top:6px;width:44%;max-width:46px;aspect-ratio:1;transform:translateX(-50%);color:var(--belt-low)}
.k-coin .bcSil{color:var(--gold)}.k-shard .bcSil{color:var(--belt-info)}.k-mystery .bcSil{color:var(--belt-r3)}.k-stowaway .bcSil{color:var(--belt-good)}
.k-rift .bcSil{color:var(--belt-r3)}.k-junk .bcSil{color:#6b7286}.k-back .bcSil{color:var(--belt-low)}
.k-junk.bcIn{border-color:#4a5063;background:#0c0d15}
.bcVal{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;font-family:'Cinzel',serif;font-weight:700;font-size:13px;color:var(--gold);text-shadow:0 1px 2px #000}
.bcShard{position:absolute;right:3px;top:3px;width:22px;height:22px;z-index:2}
.bcShard .lg{width:100%;height:100%;display:block}

/* ---------------- the mouth plate ---------------- */
.beltMouth{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:2px;min-width:0;overflow:hidden;
  background:linear-gradient(180deg,#232739,#141726);border:1px solid var(--line);border-radius:12px}
.bmClock{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums lining-nums;color:var(--belt-good)}
.beltMouth.last .bmClock{color:var(--belt-bad)}
.bmPips{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:14px}
.bmBoss{display:block;width:34px;height:34px;border-radius:9px;overflow:hidden;border:1px solid var(--belt-bad)}
.bmBoss .port img{object-fit:cover}
.beltMouth.lean{border-color:var(--belt-bad)}

/* ---------------- JOLT ---------------- */
.joltBtn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px;overflow:hidden;min-width:0;
  background:linear-gradient(180deg,#2a2440,#171427);border:1px solid #B56BFF88;border-radius:12px}
.jbIcon{width:22px;height:22px;flex:0 0 auto;color:var(--gold)}
.jbText{display:flex;flex-direction:column;align-items:center;gap:1px}
.jbName{font-size:11px;letter-spacing:1px;line-height:1.1}
.jbPrice{font-size:14px;line-height:1.1;font-variant-numeric:tabular-nums lining-nums;color:var(--gold)}
/* a phone's JOLT is short and wide: the bolt beside its name and price, the depth pips under them */
@media (max-width:900px){
  .joltBtn{flex-direction:row;flex-wrap:wrap;align-content:center;gap:1px 4px;padding:3px}
  .jbIcon{width:20px;height:20px}
  .jbPips{flex:0 0 100%;justify-content:center;margin-top:0}
}
.joltBtn.free .jbPrice{color:var(--belt-good)}
.joltBtn.poor .jbPrice{color:var(--belt-bad)}
.joltBtn.off{filter:saturate(.4);opacity:.75}
.jbPips{display:flex;gap:3px;margin-top:1px}
.jbPips i{width:5px;height:5px;border-radius:50%;border:1px solid var(--gold);background:#0a0b13}
.jbPips i.on{background:var(--gold)}
.jbBadge{position:absolute;right:3px;top:3px;width:14px;height:14px;color:var(--belt-bad)}
.jbLock{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--belt-ink);transform-origin:0 50%;transform:scaleX(0)}
.joltBtn.shake{animation:beltShake .32s}

/* ---------------- the Claw's bay ---------------- */
.clawBay{position:relative;display:flex;gap:3px;padding:3px;min-width:0;overflow:hidden;touch-action:none;
  background:linear-gradient(180deg,#1d2334,#111523);border:1px solid var(--line);border-radius:12px}
.cbSlot{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:9px;overflow:hidden}
.cbSlot.empty{border:1px dashed #ffffff33}
.cbSlot.empty.armed{border:2px solid var(--gold);background:#ffc23c1c}
.cbIcon{width:24px;height:24px;color:var(--belt-low)}
.cbSlot.armed .cbIcon{color:var(--gold)}
.cbName{font-size:11px;letter-spacing:1px}
.cbSlot.held{background:var(--belt-face);border:1px solid var(--gold)}
.cbArt{position:absolute;inset:0;color:var(--belt-low);padding:0}
.cbSlot.held:not([data-kind="unit"]):not([data-kind="golden"]) .cbArt{padding:22% 22% 30%}
.cbArt .port img{object-fit:cover;object-position:50% 12%}
.cbSlot.dim .cbArt{filter:grayscale(.8) brightness(.6)}
.cbHook{position:absolute;left:2px;top:2px;width:16px;height:16px;padding:1px;border-radius:5px;color:var(--gold);background:#0a0b13cc;z-index:2}
.cbSlot .bcStamp{top:30%;font-size:11px}
.cbSlot.ask{border:2px solid var(--belt-bad);padding:2px}
.cbSay{font-size:11px;line-height:1.15;text-align:center;color:var(--belt-bad);overflow-wrap:anywhere}

/* ---------------- the undo chip (beside the gold it gives back) ---------------- */
.undoBuy{display:inline-flex;align-items:center;min-width:0;min-height:44px;padding:0 2px;background:none;border:none;cursor:pointer}
.undoBuy.hide{display:none}
/* The chip gives way, not the bar: without this the bar cannot shrink below its content, and a long
   name beside three digits of gold pushes the storm pips off a 390px screen. */
#mainbar .roundbar{min-width:0}
.undoBuy>b{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:6px 10px;border-radius:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:'Cinzel',serif;font-weight:700;font-size:12px;letter-spacing:.6px;color:#0a0b13;background:var(--gold)}
.undoBuy:active>b{transform:scale(.97)}
.undoBuy .bglyph{width:14px;height:14px;flex:0 0 auto}

/* ---------------- sabotage: the look a boss's rule gives the lane ---------------- */
.beltLane.sab-junk{border-color:#6b7286}
.beltLane.sab-furnace{border-color:#FF5A2C;background:linear-gradient(180deg,#2b1712,#170c0a)}
.beltLane.sab-riptide{border-color:var(--belt-teal);background:linear-gradient(180deg,#10262b,#0a1418)}
.beltLane.sab-overgrowth{border-color:#5FCF4F;background:linear-gradient(180deg,#14251a,#0b140e)}
.beltLane.sab-overclock{border-color:#B56BFF;background:linear-gradient(180deg,#21183a,#110c1f)}
.beltLane.sab-crown{border-color:var(--gold);background:linear-gradient(180deg,#2a2412,#15110a)}

/* ---------------- sheets ---------------- */
.beltModal{align-items:flex-end}
.beltSheet{width:min(440px,100vw);max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,#171a2b,#0b0d16);border:1px solid #3E6FE077;border-radius:16px 16px 0 0;color:var(--belt-ink)}
@media (min-width:601px){.beltModal{align-items:center}.beltSheet{border-radius:16px}}
.beltSheet h2{font-size:16px;letter-spacing:2px;color:var(--gold);margin-bottom:8px}
.beltSheet h3{font-family:'Cinzel',serif;font-size:11px;letter-spacing:1.5px;color:var(--belt-low);margin:10px 0 5px}
.bsHead{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.bsArt{position:relative;width:84px;height:84px;flex:0 0 auto;border-radius:14px;overflow:hidden;border:1px solid var(--fc,var(--line));
  background:radial-gradient(120% 90% at 50% 20%,color-mix(in srgb,var(--fc,#3E6FE0) 34%,#0a0b13),#0a0b13)}
.bsArt .port img{object-fit:cover;object-position:50% 12%}
.bsArt.sil{padding:16px;box-sizing:border-box;color:var(--belt-low)}
.bsArt.sil.k-coin,.bsArt.sil.k-golden{color:var(--gold)}.bsArt.sil.k-shard{color:var(--belt-info)}.bsArt.sil.k-mystery,.bsArt.sil.k-rift{color:var(--belt-r3)}.bsArt.sil.k-stowaway{color:var(--belt-good)}
.bsTitle{display:flex;flex-direction:column;gap:3px;min-width:0}
.bsTitle b{font-family:var(--disp);font-size:20px;line-height:1.15}
.bsTitle span{font-size:13px;color:var(--belt-low)}
.bsLine{font-size:14px;line-height:1.45;margin:6px 0}
.bsLine.gold{color:var(--gold)}.bsLine.hint{color:var(--belt-r3);font-weight:700}.bsLine.prompt{font-family:'Cinzel',serif;font-weight:700;letter-spacing:1px;color:var(--belt-good)}
.bsLine.warn b{color:var(--belt-bad)}
.bsLine .bcStamp{position:static;display:inline-block;transform:none}
.bsActs{display:flex;gap:8px;margin-top:12px}
.bsBtn{flex:1 1 0;min-width:0;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 10px;cursor:pointer;
  font-family:'Cinzel',serif;font-weight:700;font-size:13px;letter-spacing:1px;color:var(--belt-ink);background:#ffffff12;border:1px solid var(--line);border-radius:11px}
.bsBtn:active{transform:scale(.97)}
.bsBtn .bglyph{width:18px;height:18px;flex:0 0 auto}
.bsBtn.go{color:#0a0b13;background:linear-gradient(180deg,#FFD874,#FFC23C);border-color:#ffffff66}
.bsBtn.go.off{filter:grayscale(.9) brightness(.7)}
.bsBtn.on{border-color:var(--belt-info);color:var(--belt-info)}
.bsBtn.warn{border-color:var(--belt-bad);color:var(--belt-bad)}
.bsBtn.close{width:100%;margin-top:10px;flex:none}
.bsFeed{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.bsBtn.row{justify-content:flex-start;text-align:left;flex:none;width:100%;font-family:'Spectral',serif;letter-spacing:0;font-size:14px}
.bsMini{position:relative;width:36px;height:36px;flex:0 0 auto;border-radius:8px;overflow:hidden}
.bsMini .port img{object-fit:cover;object-position:50% 12%}
.bsChips{display:flex;flex-wrap:wrap;gap:6px}
.bsChip{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:8px;font-size:13px;background:#ffffff0d;border:1px solid var(--line)}
.bsChip .bglyph{width:16px;height:16px;flex:0 0 auto;color:var(--belt-low)}
.bsChip.k-coin .bglyph,.bsChip.k-golden .bglyph{color:var(--gold)}.bsChip.k-shard .bglyph,.bsChip.k-trail .bglyph{color:var(--belt-info)}
.bsChip.k-mystery .bglyph{color:var(--belt-r3)}.bsChip.k-stowaway .bglyph{color:var(--belt-good)}
.bsNone{font-size:13px;color:var(--belt-low)}
.bsOdds{display:grid;grid-template-columns:76px repeat(6,1fr);align-items:end;gap:2px 4px;margin:4px 0 8px;font-size:13px}
.bsOdds b{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.6px;align-self:center}
.bsOdds span{display:flex;flex-direction:column;align-items:center;font-variant-numeric:tabular-nums lining-nums}
.bsOdds span i{font-style:normal;font-size:11px;color:var(--gold)}
.bsOdds span.zero{color:var(--belt-low)}
.bsOdds em{grid-column:2/-1;font-style:normal;font-size:12px;color:var(--belt-info)}
.bsHunts .huntGrp{margin-bottom:8px}