/* Bohemian Banners on the store page (2026-11-08, the owner: "you just add stuff on web & game"): the banner, the collection's strip, a pack and the
   three bundles - their art drawn by bbart.js (bbart.css) with real cards (cards.js, cards.css), sized by --u. */
.bbs-hero, .bbs-tier, .bbs-cell { --u: 1px; --t: 1px; --serif: "EB Garamond", Georgia, serif; --display: Cinzel, Georgia, serif; --sans: "Alegreya Sans", system-ui, sans-serif;
  --hand: Georgia, serif; --blackletter: "UnifrakturMaguntia", Cinzel, serif; --gilt-hi: #efd391; --gilt-dim: #8a6f3c; }
.bbs-hero { display: grid; grid-template-columns: minmax(0, 1fr) 560px; align-items: center; padding: 0; overflow: hidden;
  border-color: rgba(210,67,77,.45); background: radial-gradient(70% 120% at 80% 50%, rgba(226,183,101,.16), transparent 60%), linear-gradient(160deg, rgba(142,31,36,.32), var(--glass) 55%); }
.bbs-hero-t { display: grid; gap: 12px; padding: 28px 10px 28px 28px; align-content: center; }
.bbs-hero h3.bbs-bl { display: block; margin: 0; font: 400 3.1rem/1 "UnifrakturMaguntia", Cinzel, serif; color: var(--gold-2); text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.bbs-hero-t p { margin: 0; color: var(--soft); max-width: 34rem; }
.bbs-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.bbs-facts svg { width: 14px; height: 14px; }
.bbs-hero-a { height: 300px; position: relative; overflow: hidden; }
.store-room .lg-new { align-self: center; }
.bbs-wait { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(226,183,101,.4); background: rgba(226,183,101,.08); color: var(--text); }
.bbs-wait svg { width: 22px; height: 22px; color: var(--gold-2); flex: none; }
.bbs-strip { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; margin: 16px 0; }
.bbs-cell { display: grid; gap: 10px; align-content: start; padding: 16px 18px; }
.bbs-ch { display: flex; align-items: center; gap: 12px; }
.bbs-ch .ico { width: 38px; height: 38px; }
.bbs-ch > span:nth-child(2) { flex: 1; display: grid; line-height: 1.15; }
.bbs-ch small { color: var(--mute); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bbs-ch b { font: 800 1.35rem Cinzel, serif; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.bbs-meter { height: 10px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid var(--line); overflow: hidden; }
.bbs-meter i { display: block; height: 100%; border-radius: 999px; background: var(--grad); box-shadow: 0 0 14px rgba(226,183,101,.45); }
.bbs-rar { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .88rem; color: var(--soft); font-variant-numeric: tabular-nums; }
.bbs-rar em { font-style: normal; margin-right: 4px; }
.bbs-rar .g-C em { color: #a9a49c; } .bbs-rar .g-U em { color: #6fbf9a; } .bbs-rar .g-R em { color: #6f9fe0; } .bbs-rar .g-E em { color: #c99cf0; } .bbs-rar .g-L em { color: #ff7a5a; text-shadow: 0 0 4px #ffd978; }
.bbs-pips { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 3px; }
.bbs-pips i { height: 12px; border-radius: 3px; background: rgb(255 236 190 / .08); border: 1px solid rgb(201 163 91 / .2); transform: skewX(-12deg); }
.bbs-pips i.on { background: linear-gradient(180deg, #ffdf86, #b8261a); border-color: #ffdf86; box-shadow: 0 0 6px rgb(255 170 70 / .5); }
.bbs-pips i.end { border-color: #ffdf86; background: radial-gradient(circle, rgb(255 223 134 / .5), transparent); }
.bbs-odds { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; font-size: .86rem; color: var(--mute); }
.bbs-odds b { color: var(--soft); font-weight: 700; }
.bbs-link { font-weight: 700; font-size: .92rem; }
.bbs-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); gap: 16px; align-items: stretch; }
.bbs-tier { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 12px; padding: 18px; overflow: visible; }
.bbs-tier::after { display: none; }
.bbs-tier.tn-coffer { border-color: rgba(210,67,77,.5); background: linear-gradient(180deg, rgba(210,67,77,.12), var(--glass) 45%); }
.bbs-tier.tn-treasury { border-color: rgba(226,183,101,.5); background: linear-gradient(180deg, rgba(226,183,101,.14), var(--glass) 45%); }
.bbs-tier.tn-hoard { border-color: rgba(244,220,160,.6); background: linear-gradient(180deg, rgba(165,139,196,.2), rgba(226,183,101,.08) 50%, var(--glass)); box-shadow: 0 0 0 1px rgba(244,220,160,.15), 0 18px 50px rgba(150,110,230,.2); }
.bbs-art { display: grid; place-items: end center; min-height: 0; }
.bbs-art .bb-artin:not(.a-hoard) { zoom: .78; }
.bbs-art .a-hoard { zoom: .9; }
.bbs-tier h3 { margin: 0; font: 800 1.35rem/1.1 Cinzel, serif; }
.bbs-tier.tn-hoard h3 { font: 400 1.9rem/1.05 "UnifrakturMaguntia", Cinzel, serif; color: var(--gold-2); }
.bbs-gets { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bbs-gets li { display: flex; gap: 10px; align-items: center; color: var(--soft); font-size: .95rem; line-height: 1.3; }
.bbs-gets li.hi { color: var(--text); font-weight: 700; }
.bbs-gets .pk-ico { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--glass-2); color: var(--gold-2); }
.bbs-gets .pk-ico svg { width: 16px; height: 16px; }
.bbs-gets li.hi .pk-ico { background: rgba(226,183,101,.28); }
.bbs-per { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--mute); font-size: .9rem; }
.bbs-per .pill svg { width: 14px; height: 14px; }
.bbs-tier .cost { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.bbs-tier .cost b { display: inline-flex; align-items: center; gap: 8px; font: 800 1.5rem/1 Cinzel, serif; color: var(--gold-2); }
.bbs-was { font: 700 .95rem Cinzel, serif; color: var(--mute); text-decoration-color: #d0564a; text-decoration-thickness: 2px; }
.bbs-ribbon { position: absolute; z-index: 30; top: -6px; right: 14px; padding: 6px 12px 14px; font: 700 12px "Alegreya Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: #fff3d6; text-shadow: 0 1px 1px rgb(0 0 0 / .6); background: linear-gradient(180deg, #b8322a, #7d1f16); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
  box-shadow: inset 0 0 0 1px #e7c77e; filter: drop-shadow(0 3px 4px rgb(0 0 0 / .5)); }
.bbs-tier.tn-hoard .bbs-ribbon { background: var(--grad); color: #241806; text-shadow: none; }
.bbs-fine { margin: 10px 0 0; font-size: .86rem; }
@media (max-width: 1240px) { .bbs-tiers { grid-template-columns: 1fr 1fr; } .bbs-hero { grid-template-columns: minmax(0, 1fr); } .bbs-hero-a { margin: 0 auto -10px; width: 560px; max-width: 100%; } }
@media (max-width: 900px) { .bbs-strip { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .bbs-tiers { grid-template-columns: 1fr; }
  .bbs-hero-a { width: 100%; height: 190px; } .bbs-hero-a .a-hero { transform: scale(.6); transform-origin: 0 0; }
  .bbs-hero h3.bbs-bl { font-size: 2.4rem; } .bbs-hero-t { padding: 20px 18px 6px; }
  .bbs-art .bb-artin:not(.a-hoard) { zoom: 1; }
}
@media (max-width: 440px) { .bbs-art .a-hoard { zoom: .8; } }