/* ---------- Multiverse Shards, Capsules and the Collection (src/ui/collection.js; the owner, 2026-10-22) ----------
   The hub's look (hub.css): dark navy glass, chamfered cards, the orange accent for what you press. The Shards are a
   cyan crystal (.shGl, drawn), a Capsule the owner's Capsule Corp pill in its tier's colour (.capChip, a picture): standard white-steel, rare
   cyan, epic violet, legendary gold-orange. Loaded after hub.css. */
:root{--shard:#7fe3ff;--tStd:#dfe6f2;--tRare:#38e4ff;--tEpic:#b47aff;--tLeg:#ffb43a}
.t-standard,.r-standard{--tc:var(--tStd)}.t-rare,.r-rare{--tc:var(--tRare)}.t-epic,.r-epic{--tc:var(--tEpic)}.t-legendary,.r-legendary{--tc:var(--tLeg)}
/* the Shards glyph and an amount */
.shGl{display:inline-block;flex:none;width:1em;height:1em;vertical-align:-.14em;color:var(--shard);filter:drop-shadow(0 0 .18em rgba(127,227,255,.55))}
.shAmt{display:inline-flex;align-items:center;gap:.25em;white-space:nowrap;font-variant-numeric:tabular-nums}
.shAmt b{font-weight:700}
.shWord{font-size:.75em;letter-spacing:.06em;text-transform:uppercase;color:#c8cff2}
/* a Capsule: the owner's Capsule Corp pill in its tier's colour (assets/cosmetics/capsule/icon-<tier>.webp, tools/capsule_icons.py; 2026-10-22),
   as tall as the CSS pill it replaced (1.15em) and square round its diagonal, a soft glow in the tier's colour */
.capChip{--tc:var(--tStd);display:inline-block;flex:none;width:1.15em;height:1.15em;vertical-align:-.22em;background:url("../../assets/cosmetics/capsule/icon-standard.webp") center/contain no-repeat;filter:drop-shadow(0 0 .12em color-mix(in srgb,var(--tc) 75%,transparent))}
.capChip.t-standard{--tc:var(--tStd)}.capChip.t-rare{--tc:var(--tRare);background-image:url("../../assets/cosmetics/capsule/icon-rare.webp")}.capChip.t-epic{--tc:var(--tEpic);background-image:url("../../assets/cosmetics/capsule/icon-epic.webp")}.capChip.t-legendary{--tc:var(--tLeg);background-image:url("../../assets/cosmetics/capsule/icon-legendary.webp")}
.capChip.big{font-size:2.75rem}
.colBar{position:relative;display:block;height:.375rem;background:rgba(255,255,255,.1);overflow:hidden}
.colBar>i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--shard),#c9a8ff)}

/* ---------- the start screen: COLLECTION and SHARD SHOP in the menu (signed in), the wallet chip ---------- */
/* COLLECTION and SHARD SHOP are tabs of the top bar (index.html .startNav, .snav.eco: in LEARN TO PLAY's place, the owner, 2026-10-22)
   and the wallet chip stands beside the profile (.startAcct #walletChip); all three only signed in */
#startOv:not(.acct-in) #navCollection,#startOv:not(.acct-in) .walletChip,#startOv:not(.acct-on) #navShop{display:none}   /* the SHOP signed out too, to see what is on offer (the owner, 2026-10-23); a server without accounts has none */
#startOv .snav.eco .snIc{display:inline-flex;width:1.1em;height:1.1em;align-items:center;justify-content:center}
#startOv .snav.eco .shGl{width:1em;height:1em}
/* the unopened-Capsule alert badge on the COLLECTION tab (collection.js colChipRender): a count, and a soft pulse while any wait */
#startOv #navCollection{position:relative;overflow:visible}
#startOv #navCollection .navBadge{position:absolute;top:-.25rem;right:-.3rem;min-width:1.1rem;height:1.1rem;padding:0 .28rem;display:inline-flex;align-items:center;justify-content:center;
  background:var(--acc,#ff9f1c);color:#160c00;font-family:var(--disp);font-style:normal;font-size:.625rem;font-weight:800;line-height:1;border-radius:1rem;box-shadow:0 0 0 .125rem #0a0f1e,0 .15rem .4rem rgba(0,0,0,.5)}
/* (the tab stays neutral when Capsules wait: orange is for the page I'm on; the badge says it. The owner's header review, 2026-10-22) */
#startOv #navCollection.hasCaps .navBadge{animation:navCapsPulse 2s ease-in-out infinite}
@keyframes navCapsPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){#startOv #navCollection.hasCaps .navBadge{animation:none}}
#startOv .snav .snIc .shGl{width:1.05em;height:1.05em}
#startOv .walletChip{display:inline-flex;align-items:center;gap:.375rem;flex:none;width:auto;min-height:2.25rem;margin:0 .5rem 0 0;padding:0 .875rem;border:1px solid #2a3766;border-radius:0;background:#121a33;color:#fff;
  font-family:var(--disp);font-style:italic;font-size:1rem;letter-spacing:0;cursor:pointer;clip-path:polygon(.5rem 0,100% 0,100% calc(100% - .5rem),calc(100% - .5rem) 100%,0 100%,0 .5rem)}
#startOv .walletChip:hover{background:#1b2650;border-color:var(--hubAcc,#ff9f1c)}
#startOv .walletChip:focus-visible{outline:.125rem solid #3fd6ff;outline-offset:-.25rem}
#startOv .walletChip .shGl{width:1.15rem;height:1.15rem}
.walletChip .wcCaps{display:inline-flex;align-items:center;gap:.125rem;margin-left:.375rem;padding-left:.5rem;border-left:1px solid #2a3766}
.walletChip .wcCaps .capChip{font-size:1.05rem}
.walletChip .wcCaps i:not(.capChip){font-style:normal;font-size:.8125rem;color:var(--hubAcc2,#ffb547)}

/* ---------- CUSTOMIZE (src/ui/account.js renderBanners): my Shards, the buy button beside a card ---------- */
.pfWallet{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;margin:0 0 1rem;padding:.625rem 1rem;background:linear-gradient(90deg,rgba(127,227,255,.1),#10172e 60%);border:1px solid #22305c;
  clip-path:polygon(.5rem 0,100% 0,100% calc(100% - .5rem),calc(100% - .5rem) 100%,0 100%,0 .5rem)}
.pfWalletAmt{display:inline-flex;align-items:center;gap:.375rem;font-family:var(--disp);font-style:italic;font-size:1.125rem;text-transform:uppercase;color:#fff}
.pfWalletAmt .shGl{width:1.2rem;height:1.2rem}
.pfWalletGo{display:flex;flex-wrap:wrap;gap:.25rem 1rem}
#profileOv .pfWallet .acctLink{width:auto;font-family:var(--disp);font-style:italic;font-size:.875rem;letter-spacing:.04em;color:var(--hubAcc2,#ffb547)}
.pfItem{display:flex;flex-direction:column;gap:.375rem;min-width:0}
#profileOv .pfBuy{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.25rem;width:100%;min-height:2.25rem;margin:0;padding:.3125rem .625rem;border:0;border-radius:0;background:var(--hubAcc,#ff9f1c);color:var(--hubInk,#160c00);
  font-family:var(--disp);font-style:italic;font-size:.8125rem;line-height:1.05;letter-spacing:.02em;text-align:center;text-transform:uppercase;cursor:pointer;clip-path:polygon(.5rem 0,100% 0,calc(100% - .5rem) 100%,0 100%)}
#profileOv .pfBuy .shGl{color:#0b2a44;filter:none}
#profileOv .pfBuy.short{background:#1a2346;color:#dfe4ff}
#profileOv .pfBuy.short .shGl{color:var(--shard)}
#profileOv .pfBuy:hover{filter:brightness(1.1)}
#profileOv .pfBuy:focus-visible{outline:.125rem solid #3fd6ff;outline-offset:.125rem}
#profileOv .pfItem.canBuy .pfBan.locked img,#profileOv .pfItem.canBuy .pfIco.locked img{filter:grayscale(.45) brightness(.6)}
#profileOv .pfBanTx small.pfExcl,#profileOv .pfIcoTx small.pfExcl{color:#ffd58a;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
#profileOv .pfBanTx small.pfOr,#profileOv .pfIcoTx small.pfOr{color:#9fe9ff;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
#profileOv .pfBanTx small.pfRar,#profileOv .pfIcoTx small.pfRar{color:var(--tc,#c8cff2);font-weight:600}

/* ---------- the Collection page (#colOv): the leaderboards page's frame (hub.css .lbPage) ---------- */
#colOv.colOv{padding:0;align-items:stretch;justify-content:stretch;background:#070b18;-webkit-backdrop-filter:none;backdrop-filter:none}
.colBox{position:relative;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;background:#070b18;color:#e8ecff}
.colTop{position:sticky;top:0;z-index:4;display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem 1.75rem;padding:1rem clamp(1rem,3vw,3rem) 0;background:rgba(8,12,28,.96);border-bottom:1px solid #1f2a52}
#colOv .colBack{align-self:center;width:auto;min-height:2.75rem;margin:0;padding:0 1.25rem;border:0;border-radius:0;background:#141d3d;color:#dfe4ff;font-family:var(--disp);font-style:italic;font-size:.9375rem;text-transform:uppercase;cursor:pointer;clip-path:polygon(.625rem 0,100% 0,calc(100% - .625rem) 100%,0 100%)}
#colOv .colBack:hover{background:#243063;color:#fff}
.colTitleBox{display:flex;flex-direction:column;gap:.25rem;min-width:0;padding-bottom:.75rem}
.colSub{margin:0;font-family:var(--disp);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hubAcc2,#ffb547)}
#colTitle{margin:0;font-family:var(--disp);font-style:italic;font-size:clamp(2rem,4.5vw,3.5rem);line-height:.9;letter-spacing:.01em;text-transform:uppercase;color:#fff}
.colWalletBox{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding-bottom:.875rem}
.colWalletChip,.colCapCount{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .875rem;background:#10172e;border:1px solid #2a3766;font-family:var(--disp);font-style:italic;font-size:1.125rem;color:#fff;clip-path:polygon(.5rem 0,100% 0,100% calc(100% - .5rem),calc(100% - .5rem) 100%,0 100%,0 .5rem)}
.colWalletChip .shGl{width:1.25rem;height:1.25rem}
.colTabs{margin-left:auto;display:flex;gap:.25rem}
#colOv .colTab{width:auto;height:3rem;margin:0;padding:0 1.5rem;border:0;border-bottom:.25rem solid transparent;border-radius:0;background:transparent;color:#a9b3dc;font-family:var(--disp);font-style:italic;font-size:1.25rem;text-transform:uppercase;cursor:pointer}
#colOv .colTab:hover{color:#fff}
#colOv .colTab.on{color:#fff;border-bottom-color:var(--hubAcc,#ff9f1c)}
#colOv .colTab:focus-visible{outline:.125rem solid #3fd6ff;outline-offset:-.25rem}
.colMain{box-sizing:border-box;width:100%;max-width:96rem;margin:0 auto;padding:1.5rem clamp(1rem,3vw,3rem) 2.5rem;display:flex;flex-direction:column;gap:1.25rem;flex:1}
.colLive{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.colDev,.cdDev{margin:0;padding:.375rem .75rem;background:repeating-linear-gradient(135deg,#3a2a08 0 .5rem,#2a1f08 .5rem 1rem);border:1px solid #ffb43a;color:#ffd58a;font-family:var(--disp);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.colEmpty{margin:0;color:#9aa6d6;font-size:.9375rem}
.colEmpty.err{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.colEmpty.err p{margin:0;color:#ffb3a8}
/* the buttons: slanted, the one to press orange */
:is(#colOv,.colDlgOv) .colBtn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;width:auto;min-height:2.5rem;margin:0;padding:0 1.125rem;border:0;border-radius:0;background:#1a2346;color:#dfe4ff;
  font-family:var(--disp);font-style:italic;font-size:.9375rem;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;box-shadow:none;clip-path:polygon(.5rem 0,100% 0,calc(100% - .5rem) 100%,0 100%)}
:is(#colOv,.colDlgOv) .colBtn:hover:not(:disabled){background:#243063;color:#fff}
:is(#colOv,.colDlgOv) .colBtn.primary{background:var(--hubAcc,#ff9f1c);color:var(--hubInk,#160c00)}
:is(#colOv,.colDlgOv) .colBtn.primary:hover:not(:disabled){background:var(--hubAcc,#ff9f1c);filter:brightness(1.08)}
:is(#colOv,.colDlgOv) .colBtn.short{background:#1a2346;color:#dfe4ff;box-shadow:inset 0 0 0 1px #3b4b86}
:is(#colOv,.colDlgOv) .colBtn.on{background:#173a2c;color:#8ff0bd}
:is(#colOv,.colDlgOv) .colBtn:focus-visible{outline:.125rem solid #3fd6ff;outline-offset:.125rem}
:is(#colOv,.colDlgOv) .colBtn:disabled{opacity:.6}
.colSoon{display:inline-block;padding:.1875rem .625rem;background:#2a1d40;border:1px solid #b47aff;color:#e2ccff;font-family:var(--disp);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
/* a section: the hub's card */
.colSec{position:relative;padding:1rem 1.25rem 1.125rem;background:#0d1430;border:1px solid #22305c;clip-path:polygon(.75rem 0,100% 0,100% calc(100% - .75rem),calc(100% - .75rem) 100%,0 100%,0 .75rem)}
.colSecHead{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .875rem;margin:0 0 .875rem}
.colSecHead h3,.colH{margin:0;font-family:var(--disp);font-style:italic;font-size:1.125rem;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.colH{margin:.5rem 0 0}
.colCount{min-width:1.75rem;padding:.0625rem .5rem;background:#1a2346;color:var(--hubAcc2,#ffb547);font-family:var(--disp);font-size:.875rem;text-align:center}
.colSecHead .colBtn{margin-left:auto!important}
.colSort{margin-left:auto;display:flex;align-items:center;gap:.5rem;font-family:var(--disp);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#9aa6d6}
.colSort select{min-height:2.25rem;padding:0 .5rem;border:1px solid #344976;border-radius:0;background:#080e1d;color:#fff;font:600 .875rem var(--body)}
.colSort select:focus-visible{outline:.125rem solid #3fd6ff;outline-offset:0}
/* the goal */
.colGoal{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;border-color:color-mix(in srgb,var(--tc,#ff9f1c) 45%,#22305c);background:linear-gradient(100deg,color-mix(in srgb,var(--tc,#ff9f1c) 12%,#0d1430),#0d1430 60%)}
.colGoal.empty{border-color:#22305c;background:#0d1430}
.colGoal .cgArt{flex:none;width:9rem;aspect-ratio:3/2}
.cgTx{flex:1 1 16rem;min-width:0;display:flex;flex-direction:column;gap:.375rem}
.cgTx small{font-family:var(--disp);font-size:.75rem;letter-spacing:.14em;color:var(--hubAcc2,#ffb547)}
.cgTx b{font-family:var(--disp);font-style:italic;font-size:1.5rem;line-height:1;text-transform:uppercase}
.cgTx p{margin:0;font-size:.875rem;color:#c8cff2}
.cgNum{font-family:var(--disp);font-style:italic;font-size:1.0625rem}
.cgBtns{display:flex;flex-wrap:wrap;gap:.5rem}
.cgTx p b{color:#fff;font-family:var(--disp);font-style:italic}
.cgOnly{align-self:flex-start;padding:.125rem .5rem;background:#1a2346;color:#ffd58a;font-size:.8125rem;font-weight:700}
.colGoal.ready{border-color:#3fd27a;background:linear-gradient(100deg,rgba(63,210,122,.16),#0d1430 60%)}
.colGoal.ready .cgTx small{color:#7cf0a8}
/* ROAD TO YOUR FIRST LEGENDARY PLATFORM (the starter program, policy 4) */
.colStarter{display:flex;flex-direction:column;gap:.5rem;border-color:color-mix(in srgb,#ffb43a 40%,#22305c);background:linear-gradient(100deg,rgba(255,180,58,.1),#0d1430 65%)}
.colStarter .csHead{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem}
.colStarter small{font-family:var(--disp);font-size:.75rem;letter-spacing:.14em;color:var(--hubAcc2,#ffb547)}
.colStarter .csHead b{font-family:var(--disp);font-style:italic;font-size:1.25rem;text-transform:uppercase}
.csPips{display:flex;gap:.25rem}
.csPips i{flex:1 1 0;height:.5rem;background:#1a2346;border:1px solid #2a3a6e}
.csPips i.on{background:linear-gradient(90deg,#ffb43a,#ffd58a);border-color:#ffb43a}
.csRow{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem 1rem}
.csRow .colBar{flex:1 1 12rem}
.csNum{font-family:var(--disp);font-style:italic;font-size:1rem}
.csNext{margin:0;font-family:var(--disp);font-size:.875rem;letter-spacing:.06em;color:#c8cff2}.csNext b{color:#ffd58a}
.csNote{margin:0;font-size:.875rem;color:#c8cff2}
.colStarter.done{border-color:#3fd27a;background:linear-gradient(100deg,rgba(63,210,122,.12),#0d1430 65%)}
.colStarter.done .csHead b{color:#7cf0a8}
/* unopened Capsules by tier */
.capRow{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.75rem}
.capTile{display:flex;align-items:center;gap:.875rem;padding:.75rem 1rem;background:linear-gradient(120deg,color-mix(in srgb,var(--tc) 18%,#10172e),#10172e 70%);border:1px solid color-mix(in srgb,var(--tc) 55%,transparent);
  clip-path:polygon(.625rem 0,100% 0,100% calc(100% - .625rem),calc(100% - .625rem) 100%,0 100%,0 .625rem)}
.ctTx{flex:1;display:flex;flex-direction:column;line-height:1.05;font-family:var(--disp);font-style:italic;text-transform:uppercase}
.ctTx b{font-size:1.5rem}.ctTx span{font-size:.875rem;color:var(--tc)}
/* the odds sheet */
.colOdds{margin-top:1rem;border-top:1px solid #22305c;padding-top:.75rem}
.colOdds summary{display:inline-flex;align-items:center;min-height:2.5rem;padding:0 1rem;background:#141d3d;color:#dfe4ff;font-family:var(--disp);font-style:italic;font-size:.9375rem;letter-spacing:.04em;cursor:pointer;list-style:none;clip-path:polygon(.5rem 0,100% 0,calc(100% - .5rem) 100%,0 100%)}
.colOdds summary::-webkit-details-marker{display:none}
.colOdds summary::after{content:"▾";margin-left:.5rem}
.colOdds[open] summary::after{content:"▴"}
.colOdds summary:focus-visible{outline:.125rem solid #3fd6ff;outline-offset:.125rem}
.odWrap{max-width:100%;overflow-x:auto;margin:.875rem 0 .5rem}
.odTable{width:100%;min-width:20rem;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:.875rem}
.odTable caption{caption-side:top;text-align:left;padding:0 0 .5rem;color:#9aa6d6;font-size:.8125rem}
.odTable th,.odTable td{padding:.375rem .5rem;border-bottom:1px solid #1c2650;text-align:right;white-space:nowrap}
.odTable thead th{font-family:var(--disp);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tc,#c8cff2)}
.odTable thead th .capChip{margin-right:.25rem;font-size:.9rem}
.odTable th:first-child,.odTable td:first-child{text-align:left}
.odTable tbody th{font-family:var(--disp);font-style:italic;color:#fff}
.odTable tbody td:nth-child(2){color:var(--shard)}
.odRules{margin:.75rem 0;padding-left:1.125rem;display:flex;flex-direction:column;gap:.375rem;font-size:.875rem;color:#c8cff2;line-height:1.4}
.odRules b{color:#fff}
.odPools{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.625rem}
.odPool{padding:.5rem .75rem;background:#10172e;border-left:.1875rem solid var(--tc)}
.odPool h4{display:flex;align-items:center;gap:.375rem;margin:0 0 .25rem;font-family:var(--disp);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tc)}
.odPool p{margin:0;font-size:.8125rem;color:#c8cff2;line-height:1.4}
/* the cards: owned, the shop's */
.colGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.75rem}
.colGrid.wide{grid-template-columns:repeat(2,minmax(0,1fr))}   /* banners are wide: two per row reads better than a crowded five (the owner, 2026-10-22) */
/* the Won & Bought groups by kind (collection.js colOwnedHtml): a small subheading over each kind's grid */
.colGroupH{display:flex;align-items:center;gap:.5rem;margin:1.25rem 0 .625rem;font-family:var(--disp);font-style:italic;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--hubAcc2,#ffb547)}
.colGroupH:first-of-type{margin-top:.25rem}
.colGroupH i{font-style:normal;font-size:.6875rem;color:#9aa6d6;padding:.05rem .45rem;background:rgba(255,255,255,.06)}
.colGroupH.r-standard{color:#c8d2f0}.colGroupH.r-rare{color:#8cf5ff}.colGroupH.r-epic{color:#dcb8ff}.colGroupH.r-legendary{color:#ffe07a}
.colCard{position:relative;display:flex;flex-direction:column;min-width:0;background:#10172e;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc,#2a3766) 40%,#2a3766);clip-path:polygon(.5rem 0,100% 0,100% calc(100% - .5rem),calc(100% - .5rem) 100%,0 100%,0 .5rem)}
.colCard.owned{opacity:.8}
.colCard.isNew{box-shadow:inset 0 0 0 2px var(--hubAcc,#ff9f1c)}
.ccArt{position:relative;display:block;width:100%;aspect-ratio:1;overflow:hidden;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--tc,#38e4ff) 35%,#141d3d),#0b1129 75%)}
.ccArt.k-banner{aspect-ratio:3/1}
.ccArt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ccArt.noArt::after,.cfArt.noArt::after,.cdArt.noArt::after{content:"";position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tc,#38e4ff) 60%,transparent),transparent 70%)}
/* a Captain platform with no picture yet: a basalt podium with molten seams and a gold ring, drawn */
.ccArt.k-platform,.cfArt.k-platform,.cgArt.k-platform{aspect-ratio:5/4;background:none}   /* a platform's picture is a cutout (alpha): the page shows through, the owner wants the platform alone */
.ccArt.k-platform img,.cfArt.k-platform img,.cgArt.k-platform img{object-fit:contain;padding:4%;box-sizing:border-box;filter:drop-shadow(0 .6rem 1.2rem rgba(0,0,0,.55))}   /* a platform's picture whole, never cropped (the owner, 2026-10-22: the Featured one was too zoomed in); its ground is the picture's navy */
.ccArt.k-platform.noArt::after,.cfArt.k-platform.noArt::after{inset:auto 18% 16%;height:24%;border-radius:50%;background:none;border:.1875rem solid rgba(255,214,120,.8);box-shadow:0 0 1rem rgba(255,180,58,.7),inset 0 0 .75rem rgba(255,90,40,.6)}
.ccNew{position:absolute;z-index:1;top:.5rem;left:.5rem;padding:.125rem .5rem;background:var(--hubAcc,#ff9f1c);color:var(--hubInk,#160c00);font-family:var(--disp);font-style:italic;font-size:.6875rem;letter-spacing:.06em}
.ccTx{display:flex;flex-direction:column;gap:.1875rem;padding:.5rem .625rem .375rem;min-width:0}
.ccTx b{font-family:var(--disp);font-style:italic;font-size:.9375rem;line-height:1.05;text-transform:uppercase;overflow-wrap:anywhere}
.ccTx small{font-size:.75rem;color:#9aa6d6}
.ccTx small.ccRar{color:var(--tc,#c8cff2);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.6875rem}
.ccPrice{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;font-family:var(--disp);font-style:italic;font-size:1rem}
.ccShort{font-family:var(--body);font-style:normal;font-size:.75rem;color:#ffcf9a}
.ccAct{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;margin-top:auto;padding:.25rem .625rem .625rem}
.ccAct .colBtn{min-height:2.25rem!important;padding:0 .875rem!important;font-size:.8125rem!important}
.ccOwned{font-family:var(--disp);font-style:italic;font-size:.8125rem;letter-spacing:.06em;color:#8ff0bd}
.ccNote{font-size:.75rem;color:#ffd58a}
.ccNote.acq-exclusive,.ccNote.acq-capsule{font-weight:800;letter-spacing:.05em}   /* the one acquisition label on a card that can't be bought: ACHIEVEMENT EXCLUSIVE, EARN THROUGH CAPSULES */
.ccNote.acq-capsule{color:#9fe8ff}
/* the featured card */
.colFeat{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0;background:linear-gradient(110deg,color-mix(in srgb,var(--tc,#ffb43a) 16%,#0d1430),#0d1430 55%);border:1px solid color-mix(in srgb,var(--tc,#ffb43a) 55%,#22305c);
  clip-path:polygon(1rem 0,100% 0,100% calc(100% - 1rem),calc(100% - 1rem) 100%,0 100%,0 1rem)}
.cfArt{position:relative;min-height:14rem;max-height:30rem;overflow:hidden;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--tc,#ffb43a) 30%,#141d3d),#0b1129 75%)}
.cfArt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cfTx{display:flex;flex-direction:column;gap:.625rem;padding:1.5rem 1.75rem}
.cfTag{font-family:var(--disp);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tc,#ffb43a)}
.cfTx h3{margin:0;font-family:var(--disp);font-style:italic;font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:.95;text-transform:uppercase;color:#fff}
.cfTx p{margin:0;font-size:.9375rem;line-height:1.45;color:#c8cff2}
.cfTx .cfNote{font-size:.8125rem;color:#9aa6d6}
.cfRow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;font-family:var(--disp);font-style:italic;font-size:1.375rem}
.cfBtns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.25rem}
/* the shop's filters */
.colFilters{display:flex;flex-wrap:wrap;gap:.375rem}
#colOv .colFilter{width:auto;min-height:2.5rem;margin:0;padding:0 1.25rem;border:0;border-radius:0;background:#141d3d;color:#c8cff2;font-family:var(--disp);font-style:italic;font-size:.9375rem;text-transform:uppercase;cursor:pointer;clip-path:polygon(.625rem 0,100% 0,calc(100% - .625rem) 100%,0 100%)}
#colOv .colFilter:hover{background:#243063;color:#fff}
#colOv .colFilter.on{background:var(--hubAcc,#ff9f1c);color:var(--hubInk,#160c00)}
#colOv .colFilter:focus-visible{outline:.125rem solid #3fd6ff;outline-offset:.125rem}
/* signed out */
.colSignin{display:flex;flex-direction:column;align-items:flex-start;gap:.625rem;padding:1.5rem;background:linear-gradient(110deg,rgba(255,180,58,.12),#0d1430 60%);border:1px solid #3b2f6a;clip-path:polygon(.75rem 0,100% 0,100% calc(100% - .75rem),calc(100% - .75rem) 100%,0 100%,0 .75rem)}
.colSignin b{font-family:var(--disp);font-style:italic;font-size:1.375rem;text-transform:uppercase;color:#fff}
.colSignin p{margin:0;color:#c8cff2}
.colSignin.slim{flex-direction:row;flex-wrap:wrap;align-items:center;padding:.75rem 1rem}
.colSignin.slim b{font-size:1rem;flex:1 1 14rem}
/* the open history */
.colHistList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem}
.colHistList li{display:grid;grid-template-columns:auto 6rem minmax(0,1fr) minmax(0,1.4fr) auto;align-items:center;gap:.75rem;padding:.4375rem .75rem;background:#10172e;border-left:.1875rem solid var(--tc);font-size:.875rem}
.chTier{font-family:var(--disp);font-style:italic;text-transform:uppercase;color:var(--tc)}
.chFrom{color:#9aa6d6}.chGot{color:#fff;overflow-wrap:anywhere}.chWhen{color:#9aa6d6;font-size:.8125rem}

/* ---------- the purchase dialog and the plain Capsule card ---------- */
.colDlgOv{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(4,7,16,.82);-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem)}
.colDlg{box-sizing:border-box;width:min(26rem,100%);max-height:calc(100% - 1rem);overflow-y:auto;padding:1.5rem 1.5rem 1.25rem;background:linear-gradient(180deg,#0e1533,#090e22);border:1px solid #2a3766;border-top:.1875rem solid var(--hubAcc,#ff9f1c);color:#e8ecff;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 1rem),calc(100% - 1rem) 100%,0 100%)}
.cdBody{display:flex;flex-direction:column;align-items:stretch;gap:.625rem}
.cdArt{position:relative;width:8rem;aspect-ratio:1;margin:0 auto .25rem;overflow:hidden;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--tc,#38e4ff) 35%,#141d3d),#0b1129 75%);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--tc,#38e4ff) 60%,transparent);
  clip-path:polygon(.625rem 0,100% 0,100% calc(100% - .625rem),calc(100% - .625rem) 100%,0 100%,0 .625rem)}
.cdArt.k-banner{width:100%;aspect-ratio:3/1}
.cdArt.k-platform{width:100%;aspect-ratio:16/10}
.ccArt.k-arena,.cfArt.k-arena,.cgArt.k-arena{aspect-ratio:1.65}.cdArt.k-arena{width:100%;aspect-ratio:1.65}   /* an arena's picture is its Arena Select card (about 1.65 wide to 1), shown whole */
.ccArt.k-arena img,.cfArt.k-arena img,.cgArt.k-arena img,.cdArt.k-arena img{object-fit:cover}
.cdArt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cdCap{display:flex;justify-content:center;padding:.5rem 0}
.cdRar{font-family:var(--disp);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hubAcc2,#ffb547);text-align:center}
#cdTitle{margin:0;font-family:var(--disp);font-style:italic;font-size:1.625rem;line-height:1;text-align:center;text-transform:uppercase;color:#fff;overflow-wrap:anywhere}
.cdNums{display:grid;grid-template-columns:repeat(auto-fit,minmax(6rem,1fr));gap:.375rem;margin:.25rem 0 0}
.cdNums div{padding:.5rem .625rem;background:#10172e;border:1px solid #22305c}
.cdNums dt{margin:0 0 .125rem;font-family:var(--disp);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:#9aa6d6}
.cdNums dd{margin:0;font-family:var(--disp);font-style:italic;font-size:1.125rem;color:#fff}
.cdShort{margin:0;text-align:center;color:#c8cff2}
.cdShort b{color:#ffcf9a}
/* a Captain platform's line in the purchase dialog itself, before the player confirms (the owner, 2026-10-23): "Only appears when playing Garp" */
.cdOnly{margin:.15rem auto .35rem;padding:.4rem .75rem;max-width:22rem;text-align:center;border:1px solid rgba(255,200,90,.7);border-radius:.35rem;background:rgba(255,190,70,.1);color:#ffd36a;font:800 .8rem/1.3 var(--disp);letter-spacing:.06em;text-transform:uppercase}
.cdMsg{margin:0;padding:.5rem .75rem;background:#1a1530;border-left:.1875rem solid #ffb43a;font-size:.875rem;color:#ffe3b0}
.cdMsg.ok{background:#102a22;border-left-color:#5ee08a;color:#c9f7da}
.cdBtns{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.375rem}
.cdBtns .colBtn{flex:1 1 8rem}
.cdLive{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the result screen's MATCH REWARDS (#rsRewards, beside #rsRank) ---------- */
.rsRewards{position:relative;z-index:4;flex:none;box-sizing:border-box;display:flex;flex-direction:column;gap:.5rem;width:min(calc(100vw - 1.5rem),max(var(--frameW,60rem),60rem));padding:.625rem 1rem;
  background:linear-gradient(100deg,rgba(18,40,60,.96),rgba(10,14,32,.97) 55%);border:1px solid #2f6b85;clip-path:polygon(1rem 0,100% 0,100% calc(100% - 1rem),calc(100% - 1rem) 100%,0 100%,0 1rem)}
.rs-play .rsRewards{animation:rsRise .45s ease-out var(--t-btns) both}
.rsRewards.rw-hint,.rsRewards.rw-none,.rsRewards.rw-pending{flex-direction:row;flex-wrap:wrap;align-items:center;padding:.5rem 1rem}
.rwHead{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .875rem;width:100%}
.rwLbl{font-family:var(--disp);font-size:.75rem;letter-spacing:.14em;color:var(--shard)}
.rwDev{padding:0 .375rem;border:1px solid #ffb43a;color:#ffd58a;font-family:var(--disp);font-size:.625rem;letter-spacing:.12em}
.rwPl{font-family:var(--disp);font-style:italic;text-transform:uppercase;color:#fff}
.rwSolo{padding:.0625rem .5rem;background:#1a2346;color:#ffd58a;font-size:.8125rem}
.rwWait,.rwWhy{flex:1 1 14rem;font-size:.9375rem;color:#c8cff2}
.rwSub{margin:0;width:100%;font-size:.8125rem;color:#9aa6d6}
.rwHint{display:inline-flex;align-items:center;gap:.5rem;flex:1 1 14rem;font-size:.875rem;color:#c8cff2}
#finalOv .rwX{flex:none;width:2rem;height:2rem;min-height:0;margin:0 0 0 auto;padding:0;border:1px solid #2a3766;border-radius:0;background:#141d3d;color:#c8cff2;font-size:1.125rem;line-height:1;cursor:pointer}
#finalOv .rwX:hover{background:#243063;color:#fff}
.rwGot{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.75rem}
.rwStarter{padding:.0625rem .5rem;background:#1a2346;color:#ffd58a;font-size:.8125rem;font-weight:700}   /* (the starter program's share of the Shards above, policy 4) */
.rwShards,.rwCap{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--disp);font-style:italic;font-size:1.25rem;text-transform:uppercase;color:#fff}
.rwShards .shGl{width:1.5rem;height:1.5rem}
.rwShards b{color:var(--shard)}
.rwCap .capChip.big{font-size:1.875rem}
.rwCap b{color:var(--tc)}
.rwInfo{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem 1.5rem;font-size:.875rem;color:#c8cff2}
.rwWallet{display:inline-flex;align-items:center;gap:.375rem}
.rwGoal{display:flex;flex-direction:column;gap:.25rem;flex:1 1 14rem;max-width:26rem}
.rwBtns{display:flex;flex-wrap:wrap;gap:.5rem}
#finalOv .rwBtn{width:auto;min-height:2.5rem;margin:0;padding:0 1.25rem;border:0;border-radius:0;background:#1a2346;color:#dfe4ff;font-family:var(--disp);font-style:italic;font-size:.9375rem;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;clip-path:polygon(.5rem 0,100% 0,calc(100% - .5rem) 100%,0 100%)}
#finalOv .rwBtn:hover{background:#243063;color:#fff}
#finalOv .rwBtn.primary{background:var(--hubAcc,#ff9f1c);color:var(--hubInk,#160c00);border:0}
#finalOv .rwBtn.primary:hover{filter:brightness(1.08)}
#finalOv .rwBtn:focus-visible,#finalOv .rwX:focus-visible{outline:.125rem solid #3fd6ff;outline-offset:.125rem}

/* ---------- phones ---------- */
@media (max-width:760px){
  #startOv .walletChip{min-height:2.25rem;margin-right:.25rem;padding:0 .5rem;font-size:.8125rem}
  #startOv .walletChip .shGl{width:.95rem;height:.95rem}
  .colTop{padding:.625rem .75rem 0;gap:.5rem .75rem}
  #colTitle{font-size:2rem}
  .colWalletBox{padding-bottom:.5rem}
  .colWalletChip,.colCapCount{font-size:.9375rem;padding:.25rem .625rem}
  .colTabs{margin-left:0;flex:1 1 100%}
  #colOv .colTab{flex:1;padding:0 .5rem;font-size:1rem}
  .colMain{padding:1rem .75rem 1.75rem;gap:1rem}
  .colSec{padding:.875rem .875rem 1rem}
  .colGrid{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.5rem}
  .colGrid.wide{grid-template-columns:1fr}
  .colFeat{grid-template-columns:1fr}
  .cfArt{min-height:11rem}
  .cfTx{padding:1rem}
  .colGoal .cgArt{width:6rem}
  .colHistList li{grid-template-columns:auto minmax(0,1fr) auto;gap:.25rem .5rem}
  .colHistList li .chFrom{grid-column:2;grid-row:2;font-size:.75rem}
  .colHistList li .chGot{grid-column:2/4}
  .colHistList li .chTier{grid-row:1}
  .colHistList li .chWhen{grid-column:3;grid-row:1}
  .rsRewards{width:calc(100vw - 1rem);padding:.5rem .625rem}
  .rwShards,.rwCap{font-size:1rem}
  #finalOv .rwBtn{flex:1 1 9rem}
  .cdNums{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){
  #startOv .walletChip .wcCaps{display:none}
  .colGrid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){.rs-play .rsRewards{animation:none}}

/* a platform made for one Captain: its tag on the card's art and beside the featured name (GARP ONLY) */
.ccOnly{position:absolute;left:.5rem;top:.5rem;padding:.15rem .5rem;border-radius:.3rem;background:rgba(10,12,24,.82);border:1px solid rgba(255,200,90,.6);color:#ffd36a;font:800 .62rem/1.2 var(--disp);letter-spacing:.08em;text-transform:uppercase}
.colFeat h3 .ccOnly{position:static;display:inline-block;margin-left:.6rem;vertical-align:middle;font-size:.6rem}
.ccArt{position:relative}

/* ---------- the start screen's CAPTAIN PLATFORM row (#capPlat, collection.js colPlatRowRender): under the hero, before
   the eight Captains; signed in and owning a platform. Chips as the hero's tags: chamfered, the one on in the orange,
   a platform made for another Captain greyed with "GARP ONLY" ---------- */
#startOv .capPlat{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .875rem;padding:.5rem .875rem;background:linear-gradient(90deg,#0d1430,#121a3a);border:1px solid var(--hubLine,#22305c);
  clip-path:polygon(.625rem 0,100% 0,100% calc(100% - .625rem),calc(100% - .625rem) 100%,0 100%,0 .625rem)}
.cpLbl{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--disp);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc2,#ffb547)}
.cpDev{font-style:normal;padding:0 .375rem;border:1px solid #ffb43a;color:#ffd58a;font-size:.625rem;letter-spacing:.12em}
.cpChips{display:flex;flex-wrap:wrap;gap:.375rem}
#startOv .cpChip{display:inline-flex;align-items:center;gap:.5rem;width:auto;min-height:2.125rem;margin:0;padding:.25rem 1.125rem;border:1px solid transparent;border-radius:0;background:rgba(255,255,255,.08);color:#dfe4ff;
  font-family:var(--disp);font-style:italic;font-size:.875rem;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;clip-path:polygon(.75rem 0,100% 0,calc(100% - .75rem) 100%,0 100%)}
#startOv .cpChip:hover{background:rgba(255,255,255,.14);color:#fff}
#startOv .cpChip.on{background:var(--acc,#ff9f1c);color:#160c00}
#startOv .cpChip.r-legendary:not(.on){box-shadow:inset 0 0 0 1px rgba(255,180,58,.55)}
#startOv .cpChip.gated{color:#8f9cc0;background:rgba(255,255,255,.04);cursor:not-allowed}
#startOv .cpChip.gated.on{background:#5a4a2a;color:#ffe3b0;cursor:default}
#startOv .cpChip small{font-family:var(--body);font-style:normal;font-size:.6875rem;letter-spacing:.06em;color:#ffd36a;text-transform:uppercase}
#startOv .cpChip.on small{color:#160c00}
#startOv .cpChip:focus-visible{outline:.125rem solid #3fd6ff;outline-offset:.125rem}
#startOv .cpChip:disabled{opacity:.6}
.cpPerch{flex:none;width:1.375rem;height:.9375rem;fill:currentColor;filter:drop-shadow(0 .0625rem 0 rgba(0,0,0,.35))}   /* the pedestal mark, in the chip's own colour (pale, or the ink on the orange) */
.cpShow{display:inline-flex;align-items:center;gap:.5rem;margin-left:auto;font-size:.75rem;color:#c8cff2}
.cpShow img{width:4.5rem;height:2.75rem;object-fit:contain;filter:drop-shadow(0 .3rem .6rem rgba(0,0,0,.55))}
.cpShow.gated small{color:#ffd36a}
/* the "new Captain Platform available" teaser (collection.js colPlatRowRender), shown in the Captain Platform row on
   Choose your Captain when none is owned — compact, the row keeps its height so it doesn't shift the layout */
#startOv .cpNew{display:inline-flex;align-items:center;gap:.625rem;width:auto;max-width:100%;min-height:2.75rem;margin:0;padding:.25rem .75rem .25rem .25rem;cursor:pointer;color:#dfe4ff;text-align:left;
  border:1px solid #2a3766;border-radius:0;background:linear-gradient(90deg,rgba(14,20,40,.9),rgba(22,30,62,.6));clip-path:polygon(.55rem 0,100% 0,calc(100% - .55rem) 100%,0 100%);transition:border-color .15s ease,background .15s ease}
#startOv .cpNew:hover{border-color:var(--acc,#ff9f1c);background:linear-gradient(90deg,rgba(22,30,62,.95),rgba(34,44,84,.7))}
#startOv .cpNew:focus-visible{outline:.125rem solid #3fd6ff;outline-offset:.125rem}
.cpNewArt{flex:none;width:3.4rem;height:2.25rem;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 45%,#1a2344,#070b18)}
.cpNewArt img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 .15rem .35rem rgba(0,0,0,.6))}
.cpNewTx{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.cpNewTx b{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--disp);font-style:italic;font-size:.9rem;text-transform:uppercase;color:#fff;white-space:nowrap}
.cpNewTag{flex:none;font-style:normal;padding:.08rem .35rem;background:var(--acc,#ff9f1c);color:#160c00;font-family:var(--disp);font-size:.5625rem;font-weight:800;letter-spacing:.1em}
.cpNewTx small{font-family:var(--body);font-size:.6875rem;color:#9fb0d8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpNewCta{flex:none;margin-left:.75rem;font-family:var(--disp);font-style:italic;font-size:.75rem;letter-spacing:.03em;color:var(--acc2,#ffb547);white-space:nowrap}
.cpNewCta i{font-style:normal}
@media (max-width:620px){.cpNewCta{display:none}}
/* the CUSTOMIZE banner hover preview (src/ui/account.js pfBanPreview): the whole wide banner, large, floating on mouse hover;
   3:1 until its picture is in, then the picture's own shape (set inline), so a wider strip is never cropped or blown up */
.pfBanPrev{position:fixed;left:0;top:0;z-index:200;width:min(48rem,92vw);aspect-ratio:3/1;pointer-events:none;overflow:hidden;background:#0a0f24;
  border:1px solid color-mix(in srgb,var(--hubAcc,#ff9f1c) 55%,#2a3766);box-shadow:0 1.5rem 3.5rem rgba(0,0,0,.7);
  clip-path:polygon(.6rem 0,100% 0,100% calc(100% - .6rem),calc(100% - .6rem) 100%,0 100%,0 .6rem);opacity:0;transform:scale(.96);transition:opacity .14s ease,transform .14s ease}
.pfBanPrev.on{opacity:1;transform:scale(1)}
.pfBanPrev img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
@media (prefers-reduced-motion:reduce){.pfBanPrev{transition:opacity .1s ease}.pfBanPrev,.pfBanPrev.on{transform:none}}
/* the shop's milestone line under a card's name, the dialog's "Equip it now?" and the Collection's platform notes */
.ccProg{display:block;font-size:.6875rem;line-height:1.25;color:#ffcf9a}
.colBar.thin{height:.1875rem;margin:.125rem 0 .25rem}
.cdAsk{margin:.25rem 0 0;text-align:center;font-family:var(--disp);font-style:italic;font-size:1.0625rem;text-transform:uppercase;color:#fff}
.cdAsk small{display:block;margin-top:.125rem;font-family:var(--body);font-style:normal;font-size:.8125rem;text-transform:none;color:#ffd58a}
/* the unlock celebration (the owner, 2026-10-22: "a unique funner flashy thing" on a purchase/unlock): in the item's
   rarity colours, rays + a flash + an expanding ring + sparks burst from behind the art, which pops in with a shine
   sweep; it calms to the plain EQUIPPED card once equipped. Uses individual transform props so the centre-translate and
   the animated scale/rotate never fight. */
.cdWin{--cC:#e6ecf6;--cG:#d8e6ff;position:relative;display:flex;flex-direction:column;align-items:center;isolation:isolate}
.cdWin[data-r=rare]{--cC:#38e4ff;--cG:#8cf5ff}
.cdWin[data-r=epic]{--cC:#b47aff;--cG:#dcb8ff}
.cdWin[data-r=legendary]{--cC:#ffb43a;--cG:#ffe07a}
.cdWin .cdRays,.cdWin .cdFlash,.cdWin .cdRing,.cdWin .cdSpark{position:absolute;left:50%;top:3.25rem;translate:-50% -50%;pointer-events:none}
.cdWin .cdRays{z-index:0;width:15rem;height:15rem;background:repeating-conic-gradient(from 0deg,transparent 0 7deg,color-mix(in srgb,var(--cG) 60%,transparent) 7deg 9.5deg,transparent 9.5deg 16deg);-webkit-mask:radial-gradient(circle,transparent 24%,#000 34%,#000 56%,transparent 70%);mask:radial-gradient(circle,transparent 24%,#000 34%,#000 56%,transparent 70%);animation:cdRaysIn 1s ease-out both,cdRaysSpin 12s linear infinite}
.cdWin .cdFlash{z-index:0;width:11rem;height:11rem;border-radius:50%;background:radial-gradient(circle,#fff 0,var(--cG) 24%,transparent 66%);animation:cdFlash .55s ease-out both}
.cdWin .cdRing{z-index:0;width:3.5rem;height:3.5rem;border-radius:50%;border:.2rem solid var(--cG);box-shadow:0 0 1rem color-mix(in srgb,var(--cG) 55%,transparent);animation:cdRing .75s ease-out both}
.cdWin .cdSpark{z-index:2;width:.5rem;height:.5rem;border-radius:50%;background:var(--cG);box-shadow:0 0 .45rem var(--cG);transform:rotate(var(--a)) translateX(0);opacity:0;animation:cdSpark .85s ease-out .06s both}
.cdWin .cdArt{position:relative;z-index:1}
.cdWin .cdArt.won{animation:cdPop .55s cubic-bezier(.2,1.55,.35,1) both;box-shadow:0 0 1.5rem color-mix(in srgb,var(--cG) 45%,transparent)}
.cdWin .cdArt.won .cdShine{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.8) 50%,transparent 62%);transform:translateX(-130%);animation:cdShine .7s ease-out .3s both}
.cdWin .cdRarWon{position:relative;z-index:1;color:var(--cG);text-shadow:0 0 .5rem color-mix(in srgb,var(--cG) 65%,transparent)}
.cdWin .cdWinTitle{position:relative;z-index:1;animation:cdTitleIn .4s ease-out .18s both}
@keyframes cdRaysIn{0%{opacity:0;scale:.4}30%{opacity:.9}100%{opacity:.55;scale:1}}
@keyframes cdRaysSpin{to{rotate:1turn}}
@keyframes cdFlash{0%{opacity:0;scale:.3}22%{opacity:.95}100%{opacity:0;scale:1.25}}
@keyframes cdRing{0%{opacity:.95;scale:.3}100%{opacity:0;scale:3.2}}
@keyframes cdSpark{0%{opacity:0;transform:rotate(var(--a)) translateX(.5rem) scale(.4)}25%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(6.5rem) scale(1)}}
@keyframes cdPop{0%{opacity:0;transform:scale(.3) rotate(-8deg)}60%{opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes cdShine{to{transform:translateX(130%)}}
@keyframes cdTitleIn{from{opacity:0;transform:translateY(.4rem)}to{opacity:1;transform:none}}
.reduced .cdWin .cdRays,.reduced .cdWin .cdFlash,.reduced .cdWin .cdRing,.reduced .cdWin .cdSpark,.reduced .cdWin .cdShine{display:none}
.reduced .cdWin .cdArt.won,.reduced .cdWin .cdWinTitle{animation:none}
@media (prefers-reduced-motion:reduce){
  .cdWin .cdRays,.cdWin .cdFlash,.cdWin .cdRing,.cdWin .cdSpark,.cdWin .cdShine{display:none}
  .cdWin .cdArt.won,.cdWin .cdWinTitle{animation:none}
}
.colLead{margin:-.375rem 0 .875rem;font-size:.875rem;color:#9aa6d6}
.colCard.isOn{box-shadow:inset 0 0 0 2px var(--hubAcc,#ff9f1c)}
.ccGate{font-style:normal;color:#ffd36a}
@media (max-width:760px){
  #startOv .capPlat{padding:.5rem .625rem;gap:.375rem .625rem}
  #startOv .cpChip{padding:.25rem .875rem;font-size:.8125rem}
  .cpShow{margin-left:0;width:100%}
}

/* a Shard bundle as a Featured slide (the owner, 2026-10-22: the Multiverse Villain Set; collection.js colBundleCardHtml, colBundleCollage) */
.colBundle{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);background:linear-gradient(110deg,rgba(176,64,255,.22),#0d1430 62%);border:1px solid rgba(196,120,255,.6);box-shadow:0 0 1.25rem rgba(160,70,255,.16);clip-path:polygon(0 0,calc(100% - 1rem) 0,100% 1rem,100% 100%,1rem 100%,0 calc(100% - 1rem))}
.cbArtWrap{display:flex;flex-direction:column;gap:.4rem;padding:.875rem}
.cbIcons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem}
/* the banners stacked like cards (collection.js colBundleCollage): each whole at 3:1, a step down and across from the one behind, the last in front */
.cbStack{position:relative;aspect-ratio:1.6;margin-bottom:.15rem}
.cbSlice{position:absolute;display:block;width:78%;aspect-ratio:3/1;left:calc(var(--f,0) * 22%);top:calc(var(--f,0) * 58%);z-index:var(--i,0);overflow:hidden;background:#141b3d;border:1px solid color-mix(in srgb,var(--tc,#8c7bd9) 70%,#22305c);box-shadow:0 .35rem .9rem rgba(4,6,20,.7);transition:transform .18s ease}
.cbSlice:hover{z-index:9;transform:translateY(-6%)}
@media (prefers-reduced-motion:reduce){.cbSlice{transition:none}}
.cbSlice img,.cbArt img{width:100%;height:100%;object-fit:cover;display:block}
.cbArt{display:block;aspect-ratio:1;overflow:hidden;background:#141b3d;border:1px solid color-mix(in srgb,var(--tc,#8c7bd9) 60%,#22305c)}
.cbBody{display:flex;flex-direction:column;justify-content:center;gap:.45rem;padding:1.25rem 1.5rem 1.25rem .75rem}
.cbSub{margin:-.2rem 0 0;font-family:var(--disp);font-style:italic;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;color:#c9a8ff}
.cbBody h3{margin:0;font-family:var(--disp);font-style:italic;font-size:1.75rem;line-height:1.05;letter-spacing:.01em;text-transform:uppercase;color:#f2e9ff}
.cbTag{align-self:flex-start;padding:.15rem .55rem;font-family:var(--disp);font-size:.6875rem;letter-spacing:.1em;color:#1a0b2e;background:linear-gradient(90deg,#ffd36b,#ff9f43)}
.cbWhat{margin:0;font-size:.9375rem;color:#d9d2f5}
.cbPrice{margin:0;font-size:1.125rem}
.cbPrice s{color:#8a86a8;margin-right:.35rem;font-size:.9375rem}
.cbPrice b{color:#ffe07a}
.cbAct{display:flex;align-items:center;gap:.5rem;margin-top:.25rem}
.cbNote{font-size:.8125rem;line-height:1.35;color:#c9c3e8}
.cbHint{margin:0;font-size:.75rem;color:#9a95c0}
.cbArtWrap.dlg{max-width:24rem;margin:0 auto .5rem;padding:0}
/* Featured, cycling left to right (collection.js colCarouselHtml, colFeatGo, colFeatTimer) */
.colCarousel{position:relative;margin:0 0 .75rem}
.colCarousel .ccView{overflow:hidden}
.colCarousel .ccTrack{display:flex;transition:transform .6s cubic-bezier(.22,.7,.2,1)}
.colCarousel .ccSlide{flex:0 0 100%;min-width:0;display:flex}
.colCarousel .ccSlide>*{flex:1 1 auto;min-width:0;margin:0}
.ccNav{position:absolute;top:calc(50% - 1.4rem);width:2.25rem;height:2.25rem;display:grid;place-items:center;padding:0;border:1px solid #3a4a80;background:rgba(10,16,40,.78);color:#fff;font:700 1.5rem/1 var(--disp);cursor:pointer;z-index:2}
.ccNav.prev{left:.5rem}.ccNav.next{right:.5rem}
.ccNav:hover,.ccNav:focus-visible{background:#ff9f1c;color:#1a1000;border-color:#ff9f1c}
.ccDots{display:flex;justify-content:center;gap:.45rem;margin-top:.55rem}
.ccDot{width:1.75rem;height:.3rem;padding:0;border:0;background:#2a3766;cursor:pointer}
.ccDot.on{background:#ff9f1c}
.ccDot:focus-visible{outline:2px solid #ff9f1c;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.colCarousel .ccTrack{transition:none}}
@media (max-width:760px){.colBundle{grid-template-columns:1fr}.cbBody{padding:.25rem 1rem 1rem}.cbBody h3{font-size:1.375rem}.ccNav{top:5.5rem}}

/* Shard packs (the owner, 2026-10-22: real money buys Shards only; collection.js colPacksHtml, colShortHint) */
/* GET SHARDS sits right under the balance, as wide as it and a size up (the owner, 2026-10-22: where the eye already is when it reads the balance) */
.colBal{display:inline-flex;flex-direction:column;align-items:stretch;gap:.375rem}
.colGetShards{display:flex;align-items:center;justify-content:center;gap:.4rem;margin:0;padding:.55rem 1rem;border:0;background:linear-gradient(90deg,#ffb547,#ff9f1c);color:#1a1000;font:italic 800 1rem/1 var(--disp);letter-spacing:.06em;cursor:pointer;clip-path:polygon(.5rem 0,100% 0,calc(100% - .5rem) 100%,0 100%);box-shadow:0 .25rem .75rem rgba(255,159,28,.25)}
.colGetShards b{font-size:1.25rem;line-height:.8}
.colGetShards:hover,.colGetShards:focus-visible{filter:brightness(1.1)}
.colGetShards:focus-visible{outline:.125rem solid #3fd6ff;outline-offset:.125rem}
.pkRow{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.6rem .75rem;background:#121a3a;border:1px solid #2a3766}
.pkRow.best{border-color:#3fbf86}
.pkRow.pick{border-color:#ff9f1c;box-shadow:0 0 .75rem rgba(255,159,28,.25)}
.pkWhat{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.pkShards{display:flex;align-items:center;gap:.5rem;font-size:1.1875rem;font-weight:800}
.pkTag{padding:.1rem .4rem;font:italic 800 .625rem/1.2 var(--disp);letter-spacing:.08em;color:#06140d;background:#7cf0b0}
.pkTag.fit{background:#ffb547;color:#1a1000}
.pkBonus{font-size:.75rem;color:#7cf0b0;letter-spacing:.04em;text-transform:uppercase}
.pkReach{font-size:.75rem;color:#c9cfee}
.colBtn.pkBuy{flex:none;min-width:5.5rem;font-size:1rem}
@media (max-width:760px){.colGetShards{font-size:.875rem;padding:.45rem .75rem}.pkShards{font-size:1.0625rem}.colBtn.pkBuy{min-width:4.75rem}}
.pkHead{display:flex;align-items:baseline;gap:.5rem;justify-content:center;font-size:1.125rem}
.pkHead small{font-size:.75rem;color:#9aa6d6}
.pkList{list-style:none;margin:.75rem 0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.pkNote{margin:.25rem 0 .5rem;font-size:.75rem;line-height:1.4;color:#9aa6d6}
.cdEarn{margin:.4rem 0;font-size:.8125rem;line-height:1.4;color:#c9cfee}
.colBtn.slim{padding:.2rem .5rem;font-size:.6875rem;margin-left:.35rem}

/* Shards landing (collection.js colShardBurst): big crystals burst from the middle and fly into the balance, which pulses */
.shBurst{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;cursor:pointer;animation:sbIn .3s ease-out}
.shBurst.out{opacity:0;transition:opacity .3s ease}
.sbGlow{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(63,214,255,.32),rgba(120,70,255,.18) 30%,rgba(4,7,20,.82) 70%)}
.sbCard{position:relative;display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:1.5rem 2.5rem 1.25rem;text-align:center;color:#fff;filter:drop-shadow(0 0 1.5rem rgba(63,214,255,.45))}
.sbBig{font-size:7.5rem;line-height:1;color:#3fd6ff;animation:sbPop .7s cubic-bezier(.2,1.6,.4,1) both,sbSpin 3.2s ease-in-out .7s infinite}
.sbBig .shGl{width:1em;height:1em;filter:drop-shadow(0 0 1.25rem rgba(63,214,255,.9))}
.sbAmt{font-family:var(--disp);font-style:italic;font-size:4rem;line-height:1;color:#ffe07a;text-shadow:0 .2rem 0 #7a3c00,0 0 1.5rem rgba(255,190,60,.7);font-variant-numeric:tabular-nums}
.sbWord{font-family:var(--disp);font-style:italic;font-size:1.25rem;letter-spacing:.12em;text-transform:uppercase;color:#cfe9ff}
.sbTap{margin-top:.75rem;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#8f9cc0}
.sbCrystal{position:fixed;left:50%;top:50%;z-index:1;color:#3fd6ff;pointer-events:none;filter:drop-shadow(0 0 .6rem rgba(63,214,255,.85))}
.sbCrystal .shGl{width:1em;height:1em;display:block}
.sbCrystal:nth-child(3n){color:#b47aff;filter:drop-shadow(0 0 .6rem rgba(180,122,255,.85))}
.sbCrystal:nth-child(4n){color:#7cf0ff}
.shGot{animation:shGot .45s ease-out}
@keyframes sbIn{from{opacity:0}to{opacity:1}}
@keyframes sbPop{from{transform:scale(.2) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}
@keyframes sbSpin{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.06)}}
@keyframes shGot{0%{transform:scale(1);box-shadow:0 0 0 rgba(63,214,255,0)}40%{transform:scale(1.12);box-shadow:0 0 1.25rem rgba(63,214,255,.9)}100%{transform:scale(1);box-shadow:0 0 0 rgba(63,214,255,0)}}
@media (max-width:760px){.sbBig{font-size:5rem}.sbAmt{font-size:2.75rem}.sbWord{font-size:1rem}}
@media (prefers-reduced-motion:reduce){.shBurst,.sbBig,.shGot{animation:none}}

/* my profile at the Collection's top right (collection.js colMePaint), in the Back button's row and centred as it is, where the start
   screen's profile sits; the COLLECTION / SHARD SHOP tabs take the row under it, on the right. A tap opens my profile at CUSTOMIZE */
#colOv .colTop{row-gap:.25rem}
#colOv .colTabs{order:5;flex:1 1 100%;justify-content:flex-start;margin-left:0}   /* on the left, under Back (the owner, 2026-10-23) */
.colMe{order:4;align-self:center;display:flex;align-items:center;gap:.5rem;margin:0 0 0 auto;padding:.25rem .75rem .25rem .25rem;border:1px solid #2a3766;background:#121a33;color:#fff;cursor:pointer;clip-path:polygon(.5rem 0,100% 0,100% calc(100% - .5rem),calc(100% - .5rem) 100%,0 100%,0 .5rem)}
.colMe:hover{background:#1b2650;border-color:var(--hubAcc,#ff9f1c)}
.colMe:focus-visible{outline:.125rem solid #3fd6ff;outline-offset:-.25rem}
.colMe .cmAv{display:grid;place-items:center;width:2.5rem;height:2.5rem;overflow:hidden;background:#1d2752;font:italic 800 1.125rem var(--disp)}
.colMe .cmAv img{width:100%;height:100%;object-fit:cover;display:block}
.colMe .cmTx{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left}
.colMe .cmTx b{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9375rem}
.colMe .cmTx small{font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--hubAcc2,#ffb547)}
@media (max-width:760px){.colMe{position:absolute;top:.625rem;right:.75rem;margin:0;padding:.1875rem}.colMe .cmTx{display:none}.colMe .cmAv{width:2.25rem;height:2.25rem}}
/* a set bought: every piece it brought under the reveal (collection.js colBundleHtml "done"), popping in one after another */
.cdGotH{margin:.75rem 0 .375rem;font-family:var(--disp);font-style:italic;font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;color:#d9d2f5;text-align:center}
.cbArtWrap.got .cbSlice,.cbArtWrap.got .cbArt{animation:cbGot .45s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(1.1s + var(--i,0) * 90ms)}
.cbArtWrap.got .cbIcons .cbArt{animation-delay:calc(1.6s + var(--i,0) * 90ms)}
@keyframes cbGot{from{opacity:0;transform:translateY(.75rem) scale(.85)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cbArtWrap.got .cbSlice,.cbArtWrap.got .cbArt{animation:none}}

/* ---------- Captain platforms, the owner's pass of 2026-10-22 (collection.js colPlatRowRender, colPlatHtml) ---------- */
/* the start screen's row: the picked Captain's NEW platforms side by side, View in Shard Shop at the row's right end */
#startOv .cpNews{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0}
#startOv .cpNewCta{width:auto;flex:none;margin:0 0 0 auto;padding:.25rem .25rem;background:none;border:0;cursor:pointer;font-family:var(--disp);font-style:italic;font-size:.75rem;letter-spacing:.03em;color:var(--acc2,#ffb547);white-space:nowrap}
#startOv .cpNewCta:hover{color:#fff}
#startOv .cpNewCta:focus-visible{outline:.125rem solid #3fd6ff;outline-offset:.125rem}
@media (max-width:620px){#startOv .cpNewCta{display:inline-block;margin-left:0}}
/* the Collection: a platform I own shown as big as its ad, the picture beside its name, its words and its buttons */
.colPlat .cpShows{display:grid;gap:.875rem}
.colPlatShow.isOn{border-color:color-mix(in srgb,#52e08a 65%,#22305c);box-shadow:inset 0 0 0 1px rgba(82,224,138,.25)}
.colPlatShow .cpsVia{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem .875rem;margin:0}
.colPlatShow .cpsState{font-size:.8125rem;color:#9fb0d8}
.colPlatShow .cpsState.on{color:#7ff0a8}
.colPlatShow .cpsState.gated{color:var(--acc2,#ffb547)}
/* the ones I don't own: full-width unlock cards, stacked vertically */
.colPlat .cpAds{margin-top:1rem}
.colPlat .cpShows+.cpAds{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--hubLine,#22305c)}
.cpAdsHead{margin:0 0 .625rem;font-family:var(--disp);font-style:italic;font-size:1rem;text-transform:uppercase;letter-spacing:.04em;color:#fff}
.cpAdsHead small{margin-left:.5rem;font-family:var(--body);font-style:normal;font-size:.75rem;letter-spacing:0;text-transform:none;color:#9fb0d8}
.cpAdRow{display:grid;grid-template-columns:minmax(0,1fr);gap:.875rem;min-width:0}
.cpAdRow:focus-visible{outline:.125rem solid #3fd6ff;outline-offset:.25rem}
.cpAd{display:flex;min-width:0}
.cpAd:only-child{flex-basis:100%}
.cpAd>.colFeat{flex:1 1 auto;min-width:0}
/* Featured and every big platform card: the picture and the words centred in their halves, no empty band under the words */
.colFeat{align-items:center}
.colFeat .cfTx{justify-content:center}
.colFeat .cfArt.k-platform{max-height:24rem;width:100%;justify-self:center}
/* the carousel as tall as its slide on show (collection.js colFeatFit), the words clear of the arrows */
.colCarousel .ccTrack{align-items:flex-start}
.colCarousel .ccView{transition:height .45s cubic-bezier(.22,.7,.2,1)}
.colCarousel .colFeat .cfTx{padding-right:4rem}
.colCarousel .colFeat .cfArt{margin-left:2.5rem}
@media (max-width:760px){.colCarousel .colFeat .cfTx{padding-right:1rem}.colCarousel .colFeat .cfArt{margin-left:0}}
@media (prefers-reduced-motion:reduce){.colCarousel .ccView{transition:none}}

/* the set's slide (collection.js colBundleCardHtml): its words big and centred in the space beside the stack, in the other Featured
   slides' type (the owner, 2026-10-22: "make that text a lot bigger to match the others so it fills that space, centred") */
.colBundle .cbBody{align-items:center;justify-content:center;text-align:center;gap:.6rem;padding:1.5rem 2rem}
.colBundle .cbTag{align-self:center;font-size:.8125rem;padding:.25rem .75rem}
.colBundle .cbBody h3{font-size:clamp(2.5rem,5vw,4.25rem);line-height:.92}
.colBundle .cbSub{margin:0;font-size:clamp(1.125rem,1.9vw,1.6rem);letter-spacing:.06em}
.colBundle .cbWhat{font-size:1.0625rem}
.colBundle .cbPrice{font-size:1.5rem}.colBundle .cbPrice s{font-size:1.125rem}
.colBundle .cbAct{justify-content:center;flex-wrap:wrap}
.colBundle .cbNote{max-width:22rem}
.colBundle .cbHint{font-size:.8125rem}
@media (max-width:760px){.colBundle .cbBody{padding:1rem}.colBundle .cbBody h3{font-size:2.25rem}.colBundle .cbSub{font-size:1.125rem}}