/* ---------- the home hub's look on the screens over the start screen (the owner, 2026-10-18) ----------
   Sign in and Create account (#authOv), the leaderboard (#boardOv), a profile's frame (#profileOv), Watch Live Matches
   (#liveOv) and LEARN TO PLAY's picker (.learnOv, src/ui/learn.js): the start screen's panels (src/ui/start.css):
   a chamfered navy panel with an orange edge on top, its title in the display face, italic and upper case, square
   fields, the primary button Play's slanted orange, the other buttons slanted navy, tabs that light orange. Loaded
   last, over each screen's own stylesheet; only looks change here, never what a screen shows or does. */
:root{--hubAcc:#ff9f1c;--hubAcc2:#ffb547;--hubInk:#160c00}
:is(#authOv,#boardOv,#profileOv,#liveOv).overlay,.tutOv.learnOv{background:rgba(5,8,18,.84);-webkit-backdrop-filter:blur(.375rem);backdrop-filter:blur(.375rem)}
:is(#authOv,#boardOv,#profileOv,#liveOv)>.box,.learnOv .learnBox{border:1px solid #2a3766;border-top:.1875rem solid var(--hubAcc);border-radius:0;background:linear-gradient(180deg,#0e1533,#090e22);box-shadow:none;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 1rem),calc(100% - 1rem) 100%,0 100%)}
:is(#authOv,#boardOv,#profileOv,#liveOv)>.box::before,.learnOv .learnBox::before{display:none}
#authTitle,#lbTitle,#liveTitle,#learnTitle{font-family:var(--disp);font-style:italic;font-size:clamp(1.625rem,3vw,2.25rem);line-height:1;letter-spacing:.01em;text-transform:uppercase;color:#fff;text-align:left;text-shadow:none}
.learnOv .tutEyebrow,.liveSub,.lbSeason{font-family:var(--disp);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hubAcc2)}
/* the close button: a square in the corner */
:is(#authOv,#boardOv,#profileOv,#liveOv) .xBtn,.learnOv .learnX{border-radius:0;border:1px solid #2a3766;background:#141d3d;color:#c8cff2}
:is(#authOv,#boardOv,#profileOv,#liveOv) .xBtn:hover,.learnOv .learnX:hover{background:#243063;color:#fff}
/* the primary button: Play's slanted orange */
:is(#authOv,#boardOv,#profileOv,#liveOv) .box button.primary,#authOv .authForm #authGo,.learnOv #learnPlay{min-height:3.25rem;border:0;border-radius:0;background:var(--hubAcc);color:var(--hubInk);box-shadow:0 .375rem 1.5rem rgba(255,159,28,.3);
  font-family:var(--disp);font-style:italic;font-size:1.25rem;letter-spacing:.02em;text-transform:uppercase;clip-path:polygon(.875rem 0,100% 0,calc(100% - .875rem) 100%,0 100%)}
:is(#authOv,#boardOv,#profileOv,#liveOv) .box button.primary:hover:not(:disabled),#authOv .authForm #authGo:hover:not(:disabled),.learnOv #learnPlay:hover{filter:brightness(1.08);transform:none}
/* the other buttons: slanted navy */
#liveOv .liveRow button,#boardOv .lbSort button{border:0;border-radius:0;background:#1a2346;color:#dfe4ff;font-family:var(--disp);font-style:italic;text-transform:uppercase;clip-path:polygon(.625rem 0,100% 0,calc(100% - .625rem) 100%,0 100%)}
#liveOv .liveRow button:hover,#boardOv .lbSort button:hover{background:#243063;color:#fff}
#boardOv .lbSort button.on{background:var(--hubAcc);color:var(--hubInk)}
/* fields: square, dark */
#authOv .authForm input{border-radius:0;border:1px solid #344976;background:#080e1d;color:#fff;min-height:3rem}
#authOv .authForm input:focus-visible{outline:.125rem solid #3fd6ff;outline-offset:0}
#authOv .af>span,#authOv .af{font-size:.8125rem;color:#c8cff2}
#authOv .acctLink,#boardOv .acctLink{color:var(--hubAcc2)}
/* tabs (the leaderboard's Casual / Ranked, a profile's): slanted, the one open orange */
:is(#boardOv,#profileOv) .owTabs{background:transparent;border-bottom:1px solid #2a3766}
:is(#boardOv,#profileOv) .owTab{border:0;border-radius:0;background:#141d3d;color:#c8cff2;font-family:var(--disp);font-style:italic;text-transform:uppercase;clip-path:polygon(.625rem 0,100% 0,calc(100% - .625rem) 100%,0 100%)}
:is(#boardOv,#profileOv) .owTab:hover{background:#1f2a55;color:#fff}
:is(#boardOv,#profileOv) .owTab.on{background:var(--hubAcc);color:var(--hubInk);box-shadow:none}
/* the leaderboard's rows: the hub's cards, the top three edged in their medal's colour */
#boardOv .lbRow{border-radius:0;border:1px solid #22305c;background:#10172e;clip-path:polygon(.5rem 0,100% 0,100% calc(100% - .5rem),calc(100% - .5rem) 100%,0 100%,0 .5rem)}
#boardOv .lbRow:hover{border-color:#5a6aa8;background:#141d3d}
#boardOv .lbRow.top1{border-left:.1875rem solid #ffd54a}#boardOv .lbRow.top2{border-left:.1875rem solid #e8eef8}#boardOv .lbRow.top3{border-left:.1875rem solid #e0a26a}
#boardOv .lbRow .n{font-family:var(--disp);font-style:italic}
#boardOv .lbRow .fav{border-radius:0}
/* Watch Live Matches: its rows as cards */
#liveOv .liveList li{border-radius:0;border:1px solid #22305c;background:#10172e}
#liveOv .liveList li:hover{border-color:#5a6aa8}
#liveOv .liveList li button{border:0;border-radius:0;background:var(--hubAcc);color:var(--hubInk);font-family:var(--disp);font-style:italic;text-transform:uppercase;clip-path:polygon(.5rem 0,100% 0,calc(100% - .5rem) 100%,0 100%)}
#liveOv .liveCols{font-family:var(--disp);letter-spacing:.12em;text-transform:uppercase;color:#9aa6d6}
/* LEARN TO PLAY's picker: the lessons as the hub's cards */
.learnOv .learnCard{border:1px solid #22305c;border-radius:0;background:#10172e;clip-path:polygon(.75rem 0,100% 0,100% calc(100% - .75rem),calc(100% - .75rem) 100%,0 100%,0 .75rem)}
.learnOv .learnCard:hover,.learnOv .learnCard:focus-visible{border-color:var(--hubAcc);background:linear-gradient(120deg,rgba(255,159,28,.16),#10172e);transform:none;box-shadow:none}
.learnOv .learnCard .lcTxt b{font-family:var(--disp);font-style:italic;text-transform:uppercase;letter-spacing:.02em}
.learnOv .learnCard .lcIc{border-radius:0}
.learnOv .learnCard.done{border-color:#2f6b4c}
.learnOv .learnLead{color:#c8cff2}
/* the career profile (#profileOv, the prototype's Career page): a hero across the top, the player's character's art
   fading in from the right over speed lines (account.js renderPfHero), the picture framed in orange, the name big, the
   persona over it and a card for Ranked and for Casual beside it; the tabs underlined in orange; the sections as the
   hub's cards */
#profileOv .pfBox.career .pfHead{position:relative;overflow:hidden;flex-wrap:wrap;align-items:center;gap:1.5rem;padding:1.75rem 3.5rem 1.75rem 2rem;background:linear-gradient(100deg,#1b1336 0%,#0f1838 50%,#0a1126 100%);border-bottom:1px solid #263263;box-shadow:none}
#profileOv .pfBox.career .pfHead::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 20% 50%,rgba(255,255,255,.05) 0deg 1deg,transparent 1deg 5deg);pointer-events:none}
#profileOv .pfArt{position:absolute;right:0;top:0;width:46%;height:100%;object-fit:cover;object-position:50% 25%;opacity:.6;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
/* a chosen profile banner (2026-10-18; server/banners.mjs, account.js renderPfHero, lbArt): the whole hero's width, the
   character on the right, the name over the open sky on the left */
#profileOv .pfHead.hasBanner .pfArt,#boardOv .lbHero.hasBanner .lbArt{width:100%;opacity:.95;object-position:center 30%;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0%,#000 32%);mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0%,#000 32%)}
/* with a banner the hero takes more of the picture's own 3:1 height (it was nearly 6:1 and cut the faces), centred */
#profileOv .pfBox.career .pfHead.hasBanner{min-height:clamp(15rem,24vw,26rem);align-content:center}
#boardOv .lbHero.hasBanner{min-height:clamp(16rem,24vw,26rem)}
#profileOv .pfHead.hasBanner::after,#boardOv .lbHero.hasBanner::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(7,11,24,.82) 0%,rgba(7,11,24,.35) 38%,transparent 60%)}   /* the name stays readable over a bright picture */
#profileOv .pfHead.hasBanner>*:not(.pfArt):not(.pfEditBan),#boardOv .lbHero.hasBanner>*:not(.lbArt){position:relative;z-index:1}
#profileOv .pfHead.hasBanner::before,#boardOv .lbHero.hasBanner::before{opacity:.35}
/* CUSTOMIZE's banner picker: mine to pick, then the locked ones with their milestone and progress */
.pfBanners{margin:0 0 1.5rem}
.pfBanners h3{margin:0 0 .25rem}
.pfBanLead{margin:0 0 .75rem;font-size:.875rem;color:#9aa6d6}
.pfBanHead{margin:1rem 0 .5rem;font-family:var(--disp);font-style:italic;font-size:.875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--hubAcc2)}
.pfBanGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.75rem}
#profileOv .pfBan{position:relative;display:block;width:100%;height:auto;aspect-ratio:3/1;margin:0;padding:0;overflow:hidden;text-align:left;font:inherit;text-transform:none;letter-spacing:0;color:#fff;cursor:pointer;border:0;border-radius:0;background:#0e1530;box-shadow:inset 0 0 0 1px #2a3766;
  clip-path:polygon(.625rem 0,100% 0,100% calc(100% - .625rem),calc(100% - .625rem) 100%,0 100%,0 .625rem)}
#profileOv .pfBan img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;transition:transform .3s}
#profileOv .pfBan::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,11,24,.92) 0%,rgba(7,11,24,.2) 55%,transparent 75%);box-shadow:inset 0 0 0 1px #2a3766;pointer-events:none}
#profileOv .pfBan:hover:not(.locked) img{transform:scale(1.04)}
#profileOv .pfBan:hover:not(.locked)::after{box-shadow:inset 0 0 0 2px #5a6aa8}
#profileOv .pfBan.on::after{box-shadow:inset 0 0 0 3px var(--hubAcc)}
#profileOv .pfBan.locked{cursor:default}
#profileOv .pfBan.locked img{filter:grayscale(.85) brightness(.45)}
#profileOv .pfBan.def img{object-position:50% 25%}
#profileOv .pfBan:disabled{opacity:.7}
.pfBanTx{position:absolute;z-index:1;left:.75rem;right:.75rem;bottom:.5rem;display:flex;flex-direction:column;gap:.125rem}
.pfBanTx b{font-family:var(--disp);font-style:italic;font-size:1rem;text-transform:uppercase;line-height:1;text-shadow:0 .0625rem .375rem #000}
.pfBanTx small{font-size:.75rem;color:#c8cff2}
.pfBan.locked .pfBanTx small{color:#ffcf9a}
.pfBanLock{margin-right:.25rem}
.pfBanBar{position:relative;display:block;height:.25rem;margin-top:.25rem;background:rgba(255,255,255,.12)}
.pfBanBar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);background:var(--hubAcc)}
/* CUSTOMIZE's icon picker: square cards, the name under the picture, the locked ones dimmed with their milestone */
.pfIcoPart{margin-top:0}
#pfBanners[data-part="banner"] .pfIcoPart,#pfBanners[data-part="icon"] .pfBanPart{display:none}   /* CUSTOMIZE's sub-tab: one part at a time */
/* CUSTOMIZE's sub-tabs (career.js CF_CUSTOM): slanted chips, the open one orange */
.owSub{display:flex;gap:.375rem;margin:0 0 1rem}
#profileOv .owSubTab{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%)}
#profileOv .owSubTab:hover{background:#243063;color:#fff}
#profileOv .owSubTab.on{background:var(--hubAcc);color:var(--hubInk)}
/* the Edit buttons on my own hero: bottom right of the banner, and a small pencil on the picture's corner */
#profileOv .pfEditBan{position:absolute;z-index:2;right:1rem;bottom:.875rem;width:auto;min-height:2.25rem;margin:0;padding:0 1.125rem;border:0;border-radius:0;background:rgba(10,16,34,.82);color:#fff;font-family:var(--disp);font-style:italic;font-size:.875rem;text-transform:uppercase;cursor:pointer;box-shadow:inset 0 0 0 1px #3b4b86;clip-path:polygon(.5rem 0,100% 0,calc(100% - .5rem) 100%,0 100%)}
#profileOv .pfEditBan:hover{background:var(--hubAcc);color:var(--hubInk)}
#profileOv .pfAv{position:relative}
#profileOv .pfEditIco{position:absolute;z-index:2;width:2rem;height:2rem;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:var(--hubAcc);color:var(--hubInk);font-size:1rem;cursor:pointer;transform:translate(-2.4rem,2.6rem);clip-path:polygon(.375rem 0,100% 0,100% calc(100% - .375rem),calc(100% - .375rem) 100%,0 100%,0 .375rem)}
#profileOv .pfEditIco:hover{filter:brightness(1.1)}
.pfIcoGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:.625rem}
#profileOv .pfIco{position:relative;display:flex;flex-direction:column;width:100%;height:auto;margin:0;padding:0;overflow:hidden;text-align:left;font:inherit;text-transform:none;letter-spacing:0;color:#fff;cursor:pointer;border:0;border-radius:0;background:#0e1530;box-shadow:inset 0 0 0 1px #2a3766;
  clip-path:polygon(.5rem 0,100% 0,100% calc(100% - .5rem),calc(100% - .5rem) 100%,0 100%,0 .5rem)}
#profileOv .pfIco img{display:block;width:100%;aspect-ratio:1;object-fit:cover;transition:transform .3s}
#profileOv .pfIco:hover:not(.locked) img{transform:scale(1.05)}
#profileOv .pfIco.on{box-shadow:inset 0 0 0 3px var(--hubAcc)}
#profileOv .pfIco.locked{cursor:default}
#profileOv .pfIco.locked img{filter:grayscale(.85) brightness(.45)}
.pfIcoTx{display:flex;flex-direction:column;gap:.125rem;padding:.375rem .5rem .5rem}
.pfIcoTx b{font-family:var(--disp);font-style:italic;font-size:.8125rem;line-height:1.05;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfIcoTx small{font-size:.6875rem;line-height:1.25;color:#ffcf9a}
.pfBanOn{position:absolute;z-index:1;top:.5rem;right:.625rem;padding:.1875rem .875rem;background:var(--hubAcc);color:var(--hubInk);font-family:var(--disp);font-style:italic;font-size:.75rem;text-transform:uppercase;clip-path:polygon(.5rem 0,100% 0,calc(100% - .5rem) 100%,0 100%)}
#profileOv .pfBox.career .pfAv{position:relative;width:7.5rem;height:7.5rem;border:.1875rem solid var(--hubAcc);border-radius:0;box-shadow:none;clip-path:polygon(.875rem 0,100% 0,100% calc(100% - .875rem),calc(100% - .875rem) 100%,0 100%,0 .875rem)}
#profileOv .pfBox.career .pfWho{position:relative;flex:1 1 18rem;display:flex;flex-direction:column;gap:.375rem}
.pfPersona{font-family:var(--disp);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hubAcc2)}
#profileOv .pfBox.career .pfWho h2{font-size:calc(clamp(2.25rem,4.2vw,4rem) * var(--pfN,1));line-height:.9;text-shadow:none;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word}   /* a long name smaller (--pfN, account.js renderPfHero), never cut */
#profileOv .pfBox.career .pfWho p{font-family:var(--body);font-size:.9375rem;letter-spacing:0;text-transform:none;color:#c8cff2}
.pfCards{position:relative;display:flex;flex-wrap:wrap;gap:.875rem}
.pfCard{--pfc:#ffcf6a;display:flex;align-items:center;gap:.75rem;padding:.75rem 1.125rem .75rem .75rem;background:rgba(7,11,24,.72);border:1px solid color-mix(in srgb,var(--pfc) 35%,transparent);clip-path:polygon(.875rem 0,100% 0,100% calc(100% - .875rem),calc(100% - .875rem) 100%,0 100%,0 .875rem)}
.pfcIc{flex:none;width:4rem;height:4rem;display:grid;place-items:center}
.pfcN{width:100%;height:100%;display:grid;place-items:center;font-family:var(--disp);font-style:italic;font-size:1.875rem;color:#071318;background:var(--pfc)}
.pfcTx{display:flex;flex-direction:column;min-width:0}
.pfcTx small{font-family:var(--disp);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#9aa6d6}
.pfcTx b{font-family:var(--disp);font-style:italic;font-size:1.875rem;line-height:1;text-transform:uppercase;color:var(--pfc)}
.pfcTx i{font-style:normal;font-size:.8125rem;color:#c8cff2}
#profileOv #pfTabs .owTabs{padding:0 2rem;gap:.25rem;background:linear-gradient(100deg,#1b1336 0%,#0f1838 50%,#0a1126 100%);border-bottom:1px solid #263263}
#profileOv #pfTabs .owTab{height:3.125rem;padding:0 1.375rem;background:transparent;clip-path:none;color:#a9b3dc;font-size:1.125rem;border-bottom:.25rem solid transparent}
#profileOv #pfTabs .owTab:hover{background:transparent;color:#fff}
#profileOv #pfTabs .owTab.on{background:transparent;color:#fff;border-bottom-color:var(--hubAcc)}
#profileOv :is(.owLeft,.owRight,.owCard,.ascSec,.adCard,.cfBlock){border-radius:0;border-color:#22305c;background:#10172e;clip-path:polygon(.75rem 0,100% 0,100% calc(100% - .75rem),calc(100% - .75rem) 100%,0 100%,0 .75rem)}
#profileOv :is(.owH,.ascSec h4,.cfBlock h3){font-family:var(--disp);font-style:italic;text-transform:uppercase;letter-spacing:.02em;color:#fff}
@media (max-width:760px){
  #profileOv .pfBox.career .pfHead{padding:1rem 3rem 1rem 1rem;gap:.875rem}
  #profileOv .pfBox.career .pfAv{width:4.5rem;height:4.5rem}
  #profileOv .pfArt{width:70%;opacity:.35}
  .pfCards{flex:1 1 100%}.pfCard{flex:1 1 12rem}
  .pfcIc{width:3rem;height:3rem}.pfcTx b{font-size:1.375rem}
  #profileOv #pfTabs .owTabs{padding:0 .5rem;overflow-x:auto}
  #profileOv #pfTabs .owTab{flex:none;padding:0 .875rem;font-size:.9375rem}
}
/* the leaderboard (#boardOv, the prototype's Leaderboards page): the Final Form as a hero over speed lines, "#1 · Final
   Form" in orange over the name set big; the Ascended's rows edged in the Final Form's colour; my own place is the page's
   bar along the foot (.lbYou, below) */
#boardOv .ascNexus{position:relative;overflow:hidden;gap:1rem;margin:0 0 .875rem;padding:1.125rem 1.25rem;border-radius:0;border:1px solid #ff8f6b;background:linear-gradient(100deg,#3a1d14 0%,#1b1336 45%,#0f1838 100%);clip-path:polygon(.875rem 0,100% 0,100% calc(100% - .875rem),calc(100% - .875rem) 100%,0 100%,0 .875rem)}
#boardOv .ascNexus::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 12% 50%,rgba(255,255,255,.05) 0deg 1deg,transparent 1deg 5deg);pointer-events:none}
#boardOv .ascNexus>*{position:relative}
#boardOv .ascNexus .anCrown svg{width:4rem;height:4rem}
#boardOv .ascNexus .anWho small{font-family:var(--disp);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hubAcc2)}
#boardOv .ascNexus .anWho b{font-family:var(--disp);font-style:italic;font-size:clamp(1.75rem,3vw,2.5rem);line-height:.95;text-transform:uppercase;color:#fff}
#boardOv .ascNexus .anN{font-family:var(--disp);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:#ffd3c2}
#boardOv .lbRow.prime{border-color:#ff8f6b;background:linear-gradient(90deg,rgba(255,143,107,.18),#10172e 60%)}
/* the leaderboards as a page of their own (the owner, 2026-10-18: "an actual leader board like the canvas", not a popup;
   account.js lbPageHead, lbYouBar): the whole window, a sticky header (Back, the season, the title, the tabs), the
   hero, the Ascended's ten places as cards, next in line, the ladder in a column as wide as reads well, and my place
   in a bar along the foot */
#boardOv.lbPage{padding:0;align-items:stretch;justify-content:stretch;background:#070b18;-webkit-backdrop-filter:none;backdrop-filter:none}
#boardOv.lbPage>.box.lbBox{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;clip-path:none;overflow-y:auto;display:flex;flex-direction:column;background:#070b18}
.lbTop{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}
#boardOv .lbBack{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;text-transform:uppercase;cursor:pointer;clip-path:polygon(.625rem 0,100% 0,calc(100% - .625rem) 100%,0 100%)}
#boardOv .lbBack:hover{background:#243063;color:#fff}
.lbTitleBox{display:flex;flex-direction:column;gap:.25rem;padding-bottom:.75rem}
#boardOv .lbSeason{margin:0;font-size:.75rem}
#boardOv #lbTitle{margin:0;font-size:clamp(2.25rem,4.5vw,3.75rem);line-height:.9}
#boardOv .lbTop .owTabs{margin-left:auto;padding:0;gap:.25rem;background:transparent;border:0}
#boardOv .lbTop .owTab{height:3rem;padding:0 1.5rem;background:transparent;clip-path:none;color:#a9b3dc;font-size:1.25rem;border-bottom:.25rem solid transparent}
#boardOv .lbTop .owTab:hover{background:transparent;color:#fff}
#boardOv .lbTop .owTab.on{background:transparent;color:#fff;border-bottom-color:var(--hubAcc)}
.lbMain{width:100%;max-width:96rem;margin:0 auto;padding:1.5rem clamp(1rem,3vw,3rem) 2rem;display:flex;flex-direction:column;gap:1.5rem;flex:1}
.lbHeadArea{display:flex;flex-direction:column;gap:1.25rem}
.lbHeadArea:empty{display:none}
#boardOv .lbHero{position:relative;overflow:hidden;display:flex;align-items:center;gap:1.5rem;width:100%;min-height:13rem;margin:0;padding:1.5rem 2rem;text-align:left;font:inherit;text-transform:none;letter-spacing:0;color:#fff;cursor:pointer;border:1px solid #ff8f6b;border-radius:0;box-shadow:none;background:linear-gradient(100deg,#3a1d14 0%,#1b1336 45%,#0f1838 100%);clip-path:polygon(1rem 0,100% 0,100% calc(100% - 1rem),calc(100% - 1rem) 100%,0 100%,0 1rem)}
#boardOv .lbHero.casual{border-color:#5fe3c9;background:linear-gradient(100deg,#0f2b2a 0%,#13213f 45%,#0f1838 100%)}
#boardOv .lbHero::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 14% 50%,rgba(255,255,255,.05) 0deg 1deg,transparent 1deg 5deg);pointer-events:none}
.lbArt{position:absolute;right:0;top:0;width:50%;height:100%;object-fit:cover;object-position:50% 25%;opacity:.6;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
.lbHeroIc,.lbHeroTx,.lbHeroGo{position:relative}
.lbHeroIc{flex:none;display:grid;place-items:center}
.lbCrown{width:6rem;height:6rem;display:grid;place-items:center;font-family:var(--disp);font-style:italic;font-size:3.5rem;color:#071318;background:#5fe3c9;clip-path:polygon(.75rem 0,100% 0,100% calc(100% - .75rem),calc(100% - .75rem) 100%,0 100%,0 .75rem)}
.lbHeroTx{flex:1;min-width:0;display:flex;flex-direction:column;gap:.375rem}
.lbHeroTx small{font-family:var(--disp);font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hubAcc2)}
.lbHeroTx b{font-family:var(--disp);font-style:italic;font-size:clamp(2.5rem,5vw,4.5rem);line-height:.86;text-transform:uppercase;overflow-wrap:anywhere}
.lbHeroTx span{font-size:.9375rem;color:#ffd3c2}
.lbHero.casual .lbHeroTx span{color:#c8f4ec}
.lbHeroGo{align-self:flex-end;font-family:var(--disp);font-style:italic;text-transform:uppercase;font-size:.875rem;color:var(--hubAcc2)}
/* the casual #1 spotlit (2026-10-18; account.js lbSpot): the text, then Hype as a big number beside its radar */
#boardOv .lbSpot{cursor:default;min-height:17rem;padding:1.5rem 1.75rem 2.25rem;border-color:var(--rep);background:linear-gradient(100deg,color-mix(in srgb,var(--rep) 16%,#0f1838) 0%,#13213f 48%,#0b1230 100%)}
.lbSpot .lbArt{width:44%;opacity:.3}
.lbSpotRow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .875rem;margin-top:.5rem}
.lbPersona{padding:.3125rem 1rem;font-family:var(--disp);font-style:italic;font-size:.8125rem;text-transform:uppercase;color:#dfe4ff;background:rgba(255,255,255,.08);clip-path:polygon(.5rem 0,100% 0,calc(100% - .5rem) 100%,0 100%)}
.lbSpot .repChaos{min-width:4.5rem}.lbSpot .repChaos b{font-size:.875rem}
.lbSpotLine{display:flex;align-items:center;gap:.75rem;margin-top:.375rem}
.lbSpotLine>small{min-width:4.75rem;font-family:var(--disp);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:#9aa6d6}
.lbSpotBadges{display:flex;flex-wrap:wrap;gap:.375rem}
.lbSpotBadges img{width:2.5rem;height:2.5rem;object-fit:contain;filter:drop-shadow(0 .125rem .375rem #000a)}
.lbSpotRadar{position:relative;flex:none;display:flex;align-items:center;gap:.25rem}
.lbHype{display:flex;flex-direction:column;align-items:center;line-height:.85}
.lbHype b{font-family:var(--disp);font-style:italic;font-size:4.75rem;color:var(--rep);text-shadow:0 0 1.5rem color-mix(in srgb,var(--rep) 45%,transparent)}
.lbHype small{font-family:var(--disp);font-size:.75rem;letter-spacing:.24em;color:#c8cff2}
#boardOv .lbSpot .lbHeroGo{position:absolute;right:1.5rem;bottom:.75rem;width:auto;margin:0;padding:.25rem 0;border:0;background:none;cursor:pointer}
#boardOv .lbSpot .lbHeroGo:hover{color:#fff}
.lbSecHead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:.75rem}
.lbSecHead h3{margin:0;font-family:var(--disp);font-style:italic;font-size:1.75rem;text-transform:uppercase;color:#fff}
.lbSecHead span{font-family:var(--disp);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#9aa6d6}
.lbAscGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem}
#boardOv .lbAsc{position:relative;display:flex;flex-direction:column;align-items:center;gap:.375rem;width:auto;margin:0;padding:1rem .5rem .875rem;font:inherit;text-transform:none;letter-spacing:0;color:#fff;cursor:pointer;border:1px solid #3b2f6a;border-radius:0;box-shadow:none;background:linear-gradient(180deg,#1d1435,#10172e);clip-path:polygon(.75rem 0,100% 0,100% calc(100% - .75rem),calc(100% - .75rem) 100%,0 100%,0 .75rem)}
#boardOv .lbAsc:hover{border-color:#ff8f6b}
#boardOv .lbAsc.prime{border-color:#ff8f6b;background:linear-gradient(180deg,#3a1d14,#10172e)}
.lbAsc .no{position:absolute;left:.625rem;top:.5rem;font-family:var(--disp);font-style:italic;color:#ffcf6a}
.lbAsc .fav{width:3.5rem;height:3.5rem;overflow:hidden;border:2px solid #ffcf6a}
.lbAsc .fav img{width:100%;height:100%;object-fit:cover}
.lbAsc b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--disp);font-style:italic;text-transform:uppercase}
.lbAsc small{font-size:.8125rem;color:#ffd3c2}
.lbNextIn{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.lbNextLab{font-family:var(--disp);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#3fd6ff;margin-right:.5rem}
#boardOv .lbNextP{display:flex;flex-direction:column;align-items:flex-start;width:auto;margin:0;padding:.5rem 1rem;font:inherit;text-transform:none;letter-spacing:0;color:#fff;cursor:pointer;border:1px solid #1f4a5a;border-radius:0;box-shadow:none;background:#0f2030}
#boardOv .lbNextP small{font-size:.75rem;color:#9fd8ff}
.lbLadder{display:flex;flex-direction:column;gap:.5rem}
#boardOv .lbLadder .lbList{max-height:none;overflow:visible}
#boardOv .lbLadder .lbRow{min-height:3.5rem;padding:.5rem .875rem}
#boardOv .lbLadder .lbRow .fav{width:2.5rem;height:2.5rem}
#boardOv .lbLadder .lbRow .who b{font-size:1rem}
.lbYou{position:sticky;bottom:0;z-index:4;display:flex;align-items:center;gap:1rem;padding:.75rem clamp(1rem,3vw,3rem);background:linear-gradient(90deg,#3b2a14,#0d1430 45%);border-top:1px solid var(--hubAcc);box-shadow:0 -.75rem 1.5rem #070b18}
.lbYou .fav{flex:none;width:3rem;height:3rem;overflow:hidden;border:2px solid var(--hubAcc)}
.lbYou .fav img{width:100%;height:100%;object-fit:cover}
.lbYouTx{flex:1;min-width:0;display:flex;flex-direction:column}
.lbYouTx small{font-family:var(--disp);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hubAcc2)}
.lbYouTx b{font-family:var(--disp);font-style:italic;font-size:1.375rem;text-transform:uppercase;line-height:1}
.lbYouTx i{font-style:normal;font-size:.875rem;color:#c8cff2}
#boardOv .lbYouGo{flex:none;width:auto;min-height:3.25rem;margin:0;padding:0 2rem;border:0;border-radius:0;background:var(--hubAcc);color:var(--hubInk);font-family:var(--disp);font-style:italic;font-size:1.25rem;text-transform:uppercase;cursor:pointer;clip-path:polygon(1rem 0,100% 0,calc(100% - 1rem) 100%,0 100%)}
#boardOv .lbYouGo:hover{filter:brightness(1.08)}
@media (max-width:1099px){.lbAscGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .lbTop{padding:.625rem .75rem 0;gap:.5rem .75rem}
  #boardOv .lbTop .owTabs{margin-left:0;flex:1 1 100%}
  #boardOv .lbTop .owTab{flex:1;padding:0 .5rem;font-size:1rem}
  .lbMain{padding:1rem .75rem 1.5rem;gap:1rem}
  #boardOv .lbHero{min-height:9rem;padding:1rem;gap:.875rem}
  .lbHeroTx b{font-size:clamp(1.625rem,7vw,2.5rem)}   /* a 13-letter name broke mid-word at 2.5rem beside the icon on a phone (MAINCHARAC / TER, 2026-10-19) */
  .lbHeroIc svg,.lbCrown{width:3.5rem!important;height:3.5rem!important}.lbCrown{font-size:2rem}
  .lbArt{width:70%;opacity:.35}
  .lbHeroGo{display:none}
  #boardOv .lbSpot{flex-wrap:wrap;padding:1rem 1rem 1.25rem}
  .lbSpotRadar{width:100%;justify-content:center}.lbHype{flex:none}.lbHype b{font-size:3.25rem}
  .lbSpot .repRadar{flex:1;min-width:0;width:100%}
  .lbSpotLine>small{min-width:0}
  .lbAscGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lbYou{padding:.5rem .75rem;gap:.625rem}
  #boardOv .lbYouGo{padding:0 1rem;font-size:1rem}
}
/* the career's OVERVIEW in the hub's look (the prototype's Career page): the sections' heads in the display face; the
   time played ring in orange; the modes and the season's numbers as tiles; the placements as square bars and the last
   finishes as squares, a win gold, a top four cyan, the rest navy */
#profileOv .owH{font-size:1.0625rem;letter-spacing:.02em;color:#fff}
#profileOv .owRing .fg{stroke:var(--hubAcc);filter:drop-shadow(0 0 .25rem rgba(255,159,28,.5))}
#profileOv .owRing .tx span{color:#9aa6d6}#profileOv .owRing .tx b{font-style:italic;font-size:1.875rem;color:#fff}
#profileOv .owMode{border-radius:0;border-color:#22305c;background:#0b1228;clip-path:polygon(.5rem 0,100% 0,100% calc(100% - .5rem),calc(100% - .5rem) 100%,0 100%,0 .5rem)}
#profileOv .owMode.ranked{--mc:#ff9f1c}#profileOv .owMode.casual{--mc:#3fd6ff}
#profileOv .pfCell{border-radius:0;border:1px solid #22305c;background:#0b1228;clip-path:polygon(.5rem 0,100% 0,100% calc(100% - .5rem),calc(100% - .5rem) 100%,0 100%,0 .5rem)}
#profileOv .pfCell b{font-family:var(--disp);font-style:italic;font-size:1.75rem;color:#fff}
#profileOv .pfCell span{font-family:var(--disp);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:#9aa6d6}
#profileOv :is(.cfDist,.cfForm){border-radius:0;border-color:#22305c;background:#0b1228}
#profileOv .cfDist .bar{--pc:#2c3a66}
#profileOv .cfDist .bar.p1{--pc:#ffcf6a}#profileOv .cfDist .bar:is(.p2,.p3,.p4){--pc:#3fd6ff}
#profileOv .cfDist .bar i{border-radius:0;background:var(--pc)}
#profileOv .cfDist .bar b{font-style:italic}
#profileOv .cfForm{gap:.5rem;padding:.625rem}
#profileOv .cfF{min-width:3rem;height:3rem;padding:0 .25rem;align-items:center;border:0;border-radius:0;background:#1b2547;color:#c8cff2;font-style:italic;font-size:1.25rem;clip-path:polygon(.375rem 0,100% 0,100% calc(100% - .375rem),calc(100% - .375rem) 100%,0 100%,0 .375rem)}
#profileOv .cfF.p1{background:#ffcf6a;color:#1b1200}
#profileOv .cfF:is(.p2,.p3,.p4){background:#1d4f63;color:#9fe8ff}
#profileOv .cfFormSum{font-size:.8125rem;color:#c8cff2}
/* one way back, everywhere (the owner, 2026-10-18: "keep things consistent, at least where the back icons always are"):
   every screen over the start screen (the leaderboards, a profile, a match, sign in, Watch Live Matches, the Arena
   Select, LEARN TO PLAY's picker) closes from the same "← Back" chip at its top left */
.hubBack,.overlay .box .hubBack,.overlay .hubBack{position:absolute;top:1rem;left:1rem;right:auto;z-index:6;display:inline-flex;align-items:center;width:auto;min-width:0;height:2.5rem;margin:0;padding:0 1.125rem;border:0;border-radius:0;background:#141d3d;color:#dfe4ff;font-family:var(--disp);font-style:italic;font-size:.875rem;line-height:1;letter-spacing:.02em;text-transform:uppercase;box-shadow:none;cursor:pointer;clip-path:polygon(.5rem 0,100% 0,calc(100% - .5rem) 100%,0 100%)}
.hubBack:hover,.overlay .box .hubBack:hover{background:#243063;color:#fff}
.hubBack:focus-visible{outline:.125rem solid #3fd6ff;outline-offset:.125rem}
#boardOv .lbTop .hubBack,#arenaOv .apTitle .hubBack{position:static;align-self:flex-start}   /* (in their page's own header: first, at the left) */
#profileOv .pfBox.career .pfHead{padding-top:4.25rem}
#authOv .authBox,#matchOv .mvBox,#liveOv .liveBox{padding-top:4.25rem}
.learnOv .learnBox{padding-top:4.25rem}
/* the profile's other tabs in the same look: ASCENSION and REPUTATION's sections and their numbers, STATISTICS' picker,
   tiles and sheet, HISTORY's filters and match rows (a win edged gold, a top four cyan) */
#profileOv .owBar .owSel select{border-radius:0;border:1px solid #2a3766;background:#141d3d;color:#dfe4ff;font-family:var(--disp);font-style:italic;text-transform:uppercase}
#profileOv .cfQueue .cfQ{border:0;border-radius:0;background:#141d3d;color:#c8cff2;font-family:var(--disp);font-style:italic;text-transform:uppercase;clip-path:polygon(.5rem 0,100% 0,calc(100% - .5rem) 100%,0 100%)}
#profileOv .cfQueue .cfQ:hover{background:#243063;color:#fff}
#profileOv .cfQueue .cfQ.on{background:var(--hubAcc);color:var(--hubInk)}
#profileOv .ascSec.top{background:linear-gradient(100deg,#1b1336,#10172e 60%)}
#profileOv .ascTopR .pfCell b{font-size:2rem}
#profileOv :is(.owPick,.owTile,.cfRow){border-radius:0;border:1px solid #22305c;background:#10172e;clip-path:polygon(.625rem 0,100% 0,100% calc(100% - .625rem),calc(100% - .625rem) 100%,0 100%,0 .625rem)}
#profileOv .owTile b,#profileOv .owTile strong{font-family:var(--disp);font-style:italic;font-size:2rem;color:#fff}
#profileOv .owTile .ic{color:var(--hubAcc2)}
#profileOv .owHeroName{font-family:var(--disp);font-style:italic;text-transform:uppercase}
#profileOv .owChange{border:0;border-radius:0;background:var(--hubAcc);color:var(--hubInk);font-family:var(--disp);font-style:italic;text-transform:uppercase;clip-path:polygon(.5rem 0,100% 0,calc(100% - .5rem) 100%,0 100%)}
#profileOv .cfTableWrap{border:1px solid #22305c;border-radius:0;background:#0b1228}
#profileOv .cfTable th{font-family:var(--disp);letter-spacing:.1em;text-transform:uppercase;color:#9aa6d6;background:#10172e}
#profileOv .cfTable td{border-color:#1a2348}
#profileOv .cfRow.hist{border-left:.1875rem solid #2c3a66}
#profileOv .cfRow.hist.p1{border-left-color:#ffcf6a;background:linear-gradient(90deg,rgba(255,207,106,.12),#10172e 40%)}
#profileOv .cfRow.hist:is(.p2,.p3,.p4){border-left-color:#3fd6ff}
#profileOv .cfRow:hover{border-color:#5a6aa8}
#profileOv .cfP{border-radius:0;font-style:italic}
#profileOv .cfP.p1{background:#ffcf6a;color:#1b1200}
#profileOv .cfP:is(.p2,.p3,.p4){background:#1d4f63;color:#9fe8ff}
#profileOv .bdgBtn{border-radius:0}

/* other players' banners (the owner, 2026-10-19: players see each other's banners, not only their icons; art.js banStyle,
   banOn set --ban): a lobby seat, a leaderboard row, an Ascended card, the one next in line, my bar along the foot, a
   match's result rows and the final rankings' name plates show the player's banner under a shade that keeps the text
   readable; the player list in a match shows it on each seat's health strip */
.hasBan{background-image:linear-gradient(90deg,rgba(9,14,32,.94) 0%,rgba(9,14,32,.74) 45%,rgba(9,14,32,.56) 100%),var(--ban)!important;background-size:cover!important;background-position:var(--banPos,center 30%)!important;background-repeat:no-repeat!important}
#startOv .lobbySeats li.hasBan.me{border-color:var(--acc)}
#boardOv .lbAsc.hasBan,#boardOv .lbNextP.hasBan{background-image:linear-gradient(180deg,rgba(9,14,32,.55) 0%,rgba(9,14,32,.9) 70%),var(--ban)!important}
.pl .ptop.hasBan{background-image:linear-gradient(180deg,rgba(13,17,36,.25),rgba(13,17,36,.7)),var(--ban)!important;background-position:var(--banPos,center 35%)!important;text-shadow:0 1px 2px #000,0 0 4px #000}
.finalCard .nm.hasBan{background-image:linear-gradient(180deg,rgba(9,14,32,.35),rgba(9,14,32,.8)),var(--ban)!important;text-shadow:0 1px 2px #000}
#startOv .lobbySeats li.hasBan{background-image:linear-gradient(90deg,rgba(9,14,32,.9) 0%,rgba(9,14,32,.55) 50%,rgba(9,14,32,.18) 100%),var(--ban)!important}
/* the casual #1 over a chosen banner (the owner, 2026-10-19: the radar sat on the banner's face, then still mid-banner):
   Hype and its radar go under the text on the shaded left, a compact card (the number beside the radar), so the
   picture's subject stays clear at every width; View profile a solid chip in the bottom-right corner (it was lost over
   bright art) */
#boardOv .lbSpot.hasBanner{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1.5rem;align-items:center;align-content:center}
#boardOv .lbSpot.hasBanner .lbHeroTx{max-width:36rem}
#boardOv .lbSpot.hasBanner .lbSpotRadar{grid-column:2;justify-self:start;flex-direction:row;align-items:center;gap:.75rem;margin:.875rem 0 .75rem;padding:.375rem 1.25rem .375rem 1rem;background:rgba(7,11,24,.74);border:1px solid color-mix(in srgb,var(--rep) 45%,transparent);-webkit-backdrop-filter:blur(.375rem);backdrop-filter:blur(.375rem);clip-path:polygon(.75rem 0,100% 0,100% calc(100% - .75rem),calc(100% - .75rem) 100%,0 100%,0 .75rem)}
#boardOv .lbSpot.hasBanner .lbHype b{font-size:3.25rem}
#boardOv .lbSpot.hasBanner .repRadar{width:15rem}
#boardOv .lbHero .lbHeroGo,#boardOv .lbSpot .lbHeroGo{position:absolute!important;z-index:2;right:0;bottom:0;margin:0;padding:.5rem 1.25rem;background:rgba(7,11,24,.85);color:var(--hubAcc2);clip-path:polygon(.75rem 0,100% 0,100% 100%,0 100%)}
#boardOv button.lbHero:hover .lbHeroGo,#boardOv .lbSpot .lbHeroGo:hover{background:var(--hubAcc);color:var(--hubInk)}
/* a profile over a chosen banner (the owner, 2026-10-19): the Ranked and Casual cards under the name, on the shaded left
   (they sat on the banner's subject), and Edit banner the same chip as the leaderboards' View profile, in the corner */
#profileOv .pfBox.career .pfHead.hasBanner .pfCards{flex:1 1 100%;margin-left:9rem}
#profileOv .pfBox.career .pfHead.hasBanner .pfCard{flex:0 0 auto;gap:.625rem;padding:.5rem .875rem .5rem .5rem}
#profileOv .pfBox.career .pfHead.hasBanner .pfcIc{width:3rem;height:3rem}#profileOv .pfBox.career .pfHead.hasBanner .pfcTx b{font-size:1.375rem}#profileOv .pfBox.career .pfHead.hasBanner .pfcN{font-size:1.5rem}
#profileOv .pfEditBan{right:0;bottom:0;min-height:0;padding:.5rem 1.25rem;background:rgba(7,11,24,.85);color:var(--hubAcc2);box-shadow:none;clip-path:polygon(.75rem 0,100% 0,100% 100%,0 100%)}
#profileOv .pfEditBan:hover{background:var(--hubAcc);color:var(--hubInk)}
@media (max-width:760px){#profileOv .pfBox.career .pfHead.hasBanner .pfCards{margin-left:0}#profileOv .pfBox.career .pfHead.hasBanner .pfCard{flex:1 1 12rem}}

/* the result screen condensed (the owner, 2026-10-19: "too much information... compress it and match the rest"): the
   summary in one band (the best augment moment its last cell), the casual panel in one row (title, Hype, persona, Chaos;
   their lines as tooltips: ascension.js repResultHtml, ascTips), MATCH HIGHLIGHTS as chips, and each seat's fighters
   shrinking to fit its row (no scroll for a full board); the hub's chamfered navy panels */
#finalOv .rsDock,#finalOv .rsRank,#finalOv .rsResults{border-radius:0;clip-path:polygon(1rem 0,100% 0,100% calc(100% - 1rem),calc(100% - 1rem) 100%,0 100%,0 1rem)}
#finalOv .rsDock{grid-template-columns:auto .85fr .75fr 1.45fr 1.3fr 1.55fr}
#finalOv .rsCell{padding:.375rem .625rem;gap:.125rem}
#finalOv .rsCell.rsAugBest{grid-column:auto;flex-direction:column;border-top:0;padding:.375rem .625rem}
#finalOv .rsCell.rsAugBest::before{display:block}
#finalOv .rsAb{gap:.375rem;flex-wrap:wrap;justify-content:center}
#finalOv .rsLbl{font-style:italic;letter-spacing:.14em}
#finalOv .rsRank{padding:.5rem .875rem;gap:.375rem}
#finalOv .ascRes.rep{display:grid;grid-template-columns:auto minmax(11rem,1fr) auto auto;align-items:center;gap:.25rem 1.5rem;width:100%;text-align:left}
#finalOv .ascRes.rep .arHead{grid-column:1/-1;justify-self:start;font-style:italic}
#finalOv .ascRes.rep .arRanks{justify-content:flex-start}
#finalOv .ascRes.rep .arHype{display:flex;flex-direction:column;gap:.125rem;min-width:0}
#finalOv .ascRes.rep .repMeter{width:100%}
#finalOv .ascRes.rep .rrMmr{font-size:.8125rem}
#finalOv .ascRes.rep .arPersona{align-items:flex-start;cursor:help}
#finalOv .ascRes.rep .arPersona small{font-family:var(--disp);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:#9aa6d6}
#finalOv .ascRes.rep .arXp{display:flex;flex-direction:column;align-items:flex-start;gap:.125rem}
#finalOv .ascRes.rep .arXp .ascBar{width:9rem}
#finalOv .ascHl{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.375rem .75rem;width:100%;padding-top:.375rem}
#finalOv .ascHl .arHead{font-style:italic}
#finalOv .ascHl ul{justify-content:flex-start;gap:.375rem}
#finalOv .ascHl li,#finalOv .ascHl li.badge{position:relative;display:flex;flex-direction:row;align-items:center;gap:.375rem;padding:.25rem .75rem .25rem .5rem;border-radius:0;border-left-width:.1875rem;cursor:help;outline:none}
#finalOv .ascHl li small{display:none;position:absolute;z-index:6;left:50%;bottom:calc(100% + .5rem);transform:translateX(-50%);width:max-content;max-width:18rem;padding:.4375rem .75rem;background:#0b1129;border:1px solid #3b4b86;box-shadow:0 .5rem 1.25rem rgba(0,0,0,.55);color:#dfe4ff;font-size:.75rem;line-height:1.35;text-align:left;white-space:normal;pointer-events:none}#finalOv .ascHl li small::after{content:"";position:absolute;left:50%;top:100%;margin-left:-.375rem;border:.375rem solid transparent;border-top-color:#3b4b86}#finalOv .ascHl li:hover small,#finalOv .ascHl li:focus-visible small,#finalOv .ascHl li:focus small{display:block}#finalOv .ascHl li:hover,#finalOv .ascHl li:focus-visible{background:#16204a}
#finalOv .ascHl li b{font-size:.75rem}
#finalOv .cfRowBtn{grid-template-columns:2.5rem minmax(7.5rem,10rem) minmax(0,1fr) auto 4rem 3rem 1.25rem}
#finalOv .cfRowU{overflow:hidden;gap:.1875rem}
#finalOv .cfRowU .cfU{flex:1 1 0;width:auto;min-width:1.75rem;max-width:2.75rem}
#finalOv .cfOver{grid-template-columns:repeat(auto-fit,minmax(4.75rem,1fr));gap:.25rem}
#finalOv .cfCell{padding:.3125rem .25rem;border-radius:0;clip-path:polygon(.375rem 0,100% 0,100% calc(100% - .375rem),calc(100% - .375rem) 100%,0 100%,0 .375rem)}
#finalOv .cfCell b{font-size:.875rem}
@media (max-width:760px){#finalOv .rsDock{grid-template-columns:1fr 1fr}#finalOv .rsCell.rsAugBest{grid-column:1/-1}#finalOv .ascRes.rep{grid-template-columns:1fr 1fr}#finalOv .cfRowBtn{grid-template-columns:2.25rem minmax(0,1fr) auto auto 1rem}}

/* the unlock card (account.js unlockNext; the owner, 2026-10-19): a new banner or icon revealed after a match or at the
   start screen, over everything, in the hub's look: rays behind, the picture rising in, its name, what earned it */
.unlockOv{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1rem;background:rgba(4,7,18,.78);-webkit-backdrop-filter:blur(.375rem);backdrop-filter:blur(.375rem)}
.unlockOv[hidden]{display:none}
.unlockBox{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:.5rem;width:min(34rem,100%);padding:1.5rem 1.5rem 1.25rem;text-align:center;background:linear-gradient(180deg,#1a2348,#0d1430);border:1px solid var(--hubAcc);clip-path:polygon(1.25rem 0,100% 0,100% calc(100% - 1.25rem),calc(100% - 1.25rem) 100%,0 100%,0 1.25rem)}
.unlockRays{position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg,rgba(255,170,60,.16) 0deg 6deg,transparent 6deg 18deg);animation:unlockSpin 18s linear infinite;pointer-events:none}
.unlockBox>*:not(.unlockRays){position:relative}
.unlockTag{font-family:var(--disp);font-style:italic;font-size:.875rem;letter-spacing:.18em;color:var(--hubAcc2)}
.unlockArt{display:block;overflow:hidden;border:2px solid var(--hubAcc);box-shadow:0 0 2.5rem rgba(255,159,28,.45)}
.unlockBox.ban .unlockArt{width:100%;aspect-ratio:3/1}
.unlockBox.ico .unlockArt{width:9rem;height:9rem;clip-path:polygon(1rem 0,100% 0,100% calc(100% - 1rem),calc(100% - 1rem) 100%,0 100%,0 1rem)}
.unlockArt img{width:100%;height:100%;object-fit:cover;display:block}
.unlockBox b{font-family:var(--disp);font-style:italic;font-size:clamp(1.5rem,4vw,2.25rem);line-height:1;text-transform:uppercase;color:#fff}
.unlockBox small{font-size:.875rem;color:#9fe8b8}
.unlockMore{font-size:.8125rem;color:#c8cff2}
.unlockBtns{display:flex;flex-wrap:wrap;justify-content:center;gap:.625rem;margin-top:.5rem}
.unlockBtns button{min-height:2.75rem;padding:0 1.5rem;border:0;border-radius:0;cursor:pointer;font-family:var(--disp);font-style:italic;font-size:1rem;text-transform:uppercase;clip-path:polygon(.625rem 0,100% 0,calc(100% - .625rem) 100%,0 100%)}
.unlockEquip{background:var(--hubAcc);color:var(--hubInk)}.unlockEquip:hover{filter:brightness(1.08)}.unlockEquip:disabled{opacity:.6;cursor:default}
.unlockLater{background:#141d3d;color:#dfe4ff;box-shadow:inset 0 0 0 1px #3b4b86}.unlockLater:hover{background:#243063;color:#fff}
.unlockOv.go .unlockBox{animation:unlockIn .45s cubic-bezier(.2,1.2,.3,1) both}
.unlockOv.go .unlockArt{animation:unlockArt .7s cubic-bezier(.2,1,.3,1) .15s both}
.unlockOv.go .unlockTag,.unlockOv.go .unlockBox b,.unlockOv.go .unlockBox small,.unlockOv.go .unlockBtns{animation:unlockFade .4s ease-out .45s both}
@keyframes unlockIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes unlockArt{from{opacity:0;transform:translateY(1rem) scale(.9);filter:brightness(2.2)}to{opacity:1;transform:none;filter:none}}
@keyframes unlockFade{from{opacity:0;transform:translateY(.375rem)}to{opacity:1;transform:none}}
@keyframes unlockSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.unlockRays,.unlockOv.go .unlockBox,.unlockOv.go .unlockArt,.unlockOv.go .unlockTag,.unlockOv.go .unlockBox b,.unlockOv.go .unlockBox small,.unlockOv.go .unlockBtns{animation:none}}
/* a chosen banner never loses its subject (the owner, 2026-10-19: a 6:1 banner's face fell off a wide hero): the picture
   keeps its whole height and its own shape, anchored to the hero's right edge; a hero wider than the picture shows its
   own navy to the left (where the name is), a narrower one crops the picture's left side (where every banner leaves
   room for the name). Banners are 3:1 (a few 6:1, their subject at the right) */
#profileOv .pfHead.hasBanner .pfArt,#boardOv .lbHero.hasBanner .lbArt{left:auto;right:0;top:0;height:100%;width:auto;max-width:none;object-fit:fill;opacity:.95;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}