/* ---------- match results and careers (src/ui/career.js) ----------
   The results section under the result screen's panel (#rsResults, in the screen's own tone: --rsA, --rsRim, --rsTint),
   a match on its own (#matchOv) and the career profile's tabs (#pfCareer in the profile box, widened: .pfBox.career).
   One row a seat (.cfRow): the place, who, the fighters in a row (.cfU: the portrait at its star with its stars, items
   and damage), the augments, the damage and KOs; open, its breakdown (.cfDetail). Sizes in rem like the HUD; on a phone
   the fighters scroll sideways inside the row and the numbers fold under the name. */
.rsResults{position:relative;z-index:4;flex:none;width:min(calc(100vw - 1.5rem),max(var(--frameW),60rem));padding:.625rem .75rem .75rem;
  background:linear-gradient(180deg,rgba(16,21,44,.95),rgba(6,8,18,.97));border:1px solid var(--rsRim,#58658b);border-radius:.75rem;box-shadow:0 .5rem 2rem rgba(0,0,0,.6),inset 0 0 1.5rem var(--rsTint,transparent)}
.rs-play .rsResults{animation:rsRise .45s ease-out var(--t-btns) both}
.cfHead{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin:0 0 .5rem}
.cfHead h3{margin:0;font-family:var(--disp);font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rsA,#e9d9a8)}
.cfNote{font-size:.75rem;color:#aab4d6}.cfNote.live{color:#ffe9b0}.cfNote.live::before{content:"";display:inline-block;width:.5rem;height:.5rem;margin-right:.375rem;border-radius:50%;background:var(--good);box-shadow:0 0 .5rem var(--good);animation:cfPulse 1.4s ease-in-out infinite}
.cfId{margin-left:auto;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:#7fd3a8}
@keyframes cfPulse{50%{opacity:.35}}
.cfRows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3125rem}
.cfRow{--pc:#7f8aa8;border:1px solid #233056;border-radius:.625rem;background:#0d1530;overflow:hidden}
.cfRow.p1{--pc:#ffd54a;border-color:rgba(255,213,74,.45);background:linear-gradient(90deg,rgba(255,201,74,.12),#0d1530 45%)}
.cfRow.p2{--pc:#e8eef8;border-color:rgba(232,238,248,.3)}.cfRow.p3{--pc:#e0a26a;border-color:rgba(224,162,106,.35)}.cfRow.p4{--pc:#b9c3d6}
.cfRow.me{box-shadow:inset .25rem 0 0 var(--ki)}
.cfRow.alive{border-style:dashed}
.cfRowBtn{all:unset;box-sizing:border-box;display:grid;grid-template-columns:3rem minmax(9rem,12rem) minmax(0,1fr) auto 4.25rem 3.25rem 1.25rem;align-items:center;gap:.5rem;width:100%;padding:.375rem .5rem;cursor:pointer;color:var(--fg)}
.cfRowBtn:hover{background:rgba(122,208,255,.06)}.cfRow:not(.open):hover{border-color:#4a6aa0}.cfRowBtn:focus-visible{outline:.125rem solid #ffe994;outline-offset:-.125rem}
.cfRow.hist .cfRowBtn{grid-template-columns:3rem minmax(8rem,11rem) minmax(0,1fr) auto 4.25rem 3.25rem auto 1.25rem}
.cfHistDetail{padding:.5rem .5rem .625rem}.cfHistDetail .cfHead{margin-bottom:.375rem}.cfHistDetail .cfRows{gap:.25rem}
/* a row opened (the owner, 2026-10-13: "make it more obvious what is highlighted when clicked"): a cyan outline and
   glow, the row's bar tinted, the caret cyan and turned down, its details framed in the same cyan, so the open row and
   what it opened read as one piece; a closed row's hover a lighter edge */
.cfRow.open{border:.125rem solid var(--ki);box-shadow:inset .375rem 0 0 var(--ki),0 0 0 .1875rem rgba(122,208,255,.22),0 0 1.5rem rgba(122,208,255,.35)}
.cfRow.open>.cfRowBtn{background:linear-gradient(90deg,rgba(122,208,255,.34),rgba(122,208,255,.12) 55%,rgba(122,208,255,.2))}
.cfRow.open>.cfRowBtn .nm b{color:#fff;text-shadow:0 0 .5rem rgba(122,208,255,.6)}
.cfRow.open>.cfDetail{border-top:.125rem solid rgba(122,208,255,.55);background:linear-gradient(180deg,#0c1834,#0a1122 3rem)}
.cfRow .cfRow.open{border-color:#ffd54a;box-shadow:inset .375rem 0 0 #ffd54a,0 0 0 .1875rem rgba(255,213,74,.18),0 0 1.25rem rgba(255,213,74,.28)}   /* a player opened inside an opened match: gold, so the two levels tell apart */
.cfRow .cfRow.open>.cfRowBtn{background:linear-gradient(90deg,rgba(255,213,74,.26),rgba(255,213,74,.08) 55%,rgba(255,213,74,.16))}
.cfRow .cfRow.open>.cfDetail{border-top-color:rgba(255,213,74,.5)}
.cfRow .cfRow.open>.cfRowBtn .cfCar{color:#1a1200;border-color:#ffd54a;background:#ffd54a}
.cfP{display:inline-flex;align-items:baseline;justify-content:center;position:relative;font-family:var(--disp);color:var(--pc);line-height:1}
.cfP b{font-size:1.5rem;font-weight:800}.cfP sup{font-size:.6rem;margin-left:.0625rem}.cfP .cr{position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);font-size:.75rem;font-style:normal}
.cfP.alive{opacity:.7}
.cfRowBtn .who{display:flex;align-items:center;gap:.5rem;min-width:0}
.cfRowBtn .av{flex:none;width:2.25rem;height:2.25rem;border-radius:50%;overflow:hidden;border:1px solid var(--pc);background:#10142a}.cfRowBtn .av img{width:100%;height:100%;object-fit:cover}
.cfRowBtn .nm{min-width:0;display:flex;flex-direction:column}
.cfRowBtn .nm b{font-size:.875rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfRowBtn .nm small{font-size:.6875rem;color:#8f9cc0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;gap:.25rem;align-items:center}
.cfRowBtn .nm i{font-style:normal;font-family:var(--disp);font-size:.5625rem;letter-spacing:.06em;padding:0 .3rem;border-radius:.25rem}
.cfRowBtn .nm .you{color:#0b1020;background:var(--ki)}.cfRowBtn .nm .cpu{color:#c9d4e6;border:1px solid #58658b}.cfRowBtn .nm .gst{color:#9fb0d6;border:1px solid #2c3a66}.cfRowBtn .nm .live{color:#0b1020;background:var(--good)}
.cfLink{cursor:pointer;color:#fff;text-decoration:underline dotted transparent;transition:text-decoration-color .15s}.cfLink:hover,.cfLink:focus-visible{color:var(--ki);text-decoration-color:var(--ki);outline:none}
/* table mode (#finalOv.rs-table, result.js rsTable): the art folds away after the reveal and the results take the screen;
   a strip keeps the headline and brings the podium back */
.rsStrip{display:none;position:relative;z-index:4;flex:none;align-items:center;gap:.75rem;width:min(calc(100vw - 1.5rem),max(var(--frameW),60rem));padding:.375rem .75rem;border:1px solid var(--rsRim);border-radius:.75rem;
  background:linear-gradient(90deg,rgba(16,21,44,.95),rgba(6,8,18,.97));box-shadow:0 .375rem 1.5rem rgba(0,0,0,.5)}
.rs-table .rsStrip{display:flex}.rs-table .rsFrame{display:none}
.rsStrip .w{font-family:Bangers,var(--disp);font-size:1.75rem;letter-spacing:.04em;line-height:1;background:linear-gradient(180deg,#fffbe0,var(--rsA) 40%,var(--rsB));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 .125rem .25rem rgba(0,0,0,.8))}
.rsStrip .p{font-family:var(--disp);font-size:.75rem;letter-spacing:.1em;color:#e9d9a8}
.finalOv .rsStrip button{all:unset;cursor:pointer;margin-left:auto;padding:.3125rem .75rem;border:1px solid var(--rsRim);border-radius:1rem;font-family:var(--disp);font-size:.6875rem;letter-spacing:.1em;color:#fff}
.finalOv .rsStrip button:hover{border-color:var(--rsA);color:var(--rsA)}.finalOv .rsStrip button:focus-visible{outline:.125rem solid #ffe994}
.finalOv .rsPodiumBtn{all:unset;cursor:pointer;margin-left:auto;font-family:var(--disp);font-size:.6875rem;letter-spacing:.1em;color:#9fb0d6}.finalOv .rsPodiumBtn:hover{color:#fff}
.cfRowU{display:flex;gap:.25rem;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding:.5rem .125rem .125rem}
.cfRowU.none{font-size:.6875rem;color:#6f7a9a;align-self:center}
.cfMore{align-self:center;flex:none;font-family:var(--disp);font-size:.75rem;color:#9fb0d6;padding:0 .25rem}
.cfU{position:relative;flex:none;width:2.75rem;aspect-ratio:3/4;border-radius:.375rem;overflow:visible;background:#0b101e;border:1px solid #34406a;display:block}
.cfU img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:.3125rem;display:block}
.cfU.t2{border-color:#35b863}.cfU.t3{border-color:#3a8cff}.cfU.t4{border-color:#b45cff}.cfU.t5{border-color:#ffb02a;box-shadow:0 0 .375rem #ffb02a66}
.cfU .st{position:absolute;top:-.4rem;left:0;right:0;text-align:center;font-size:.5625rem;line-height:1;letter-spacing:-.05em;color:#ffd54a;text-shadow:0 0 .125rem #000,0 0 .25rem #000;font-style:normal}
.cfU.s3 .st{color:#ffe28a}
.cfU .its{position:absolute;left:-.125rem;bottom:.125rem;display:flex;flex-direction:column;gap:.0625rem}.cfU .its img,.cfU .its .itImg{width:.875rem;height:.875rem;border-radius:.1875rem;background:#000c;display:block}
.cfU .dm{position:absolute;left:0;right:0;bottom:-.0625rem;text-align:center;font-family:var(--disp);font-size:.5625rem;line-height:1.1;color:#fff;background:linear-gradient(transparent,#000c 40%);border-radius:0 0 .3125rem .3125rem;padding:.25rem 0 .0625rem}
.cfU .mv,.cfTable .mv,.cfFc .mv{font-style:normal;font-family:var(--disp);font-size:.5rem;letter-spacing:.08em;padding:0 .25rem;border-radius:.1875rem;color:#2a1a00;background:var(--gold)}
.cfU .mv{position:absolute;top:-.5rem;right:-.25rem}
.cfU.mvp{box-shadow:0 0 .5rem #ffc94a99;border-color:var(--gold)}
.cfU:focus-visible{outline:.125rem solid #ffe994}
.cfAugs{display:flex;gap:.1875rem;flex-wrap:wrap;justify-content:flex-end;max-width:7rem}
.cfA{display:inline-flex;align-items:center;gap:.25rem;flex:none;width:1.75rem;height:1.75rem;border-radius:50%;border:.0938rem solid var(--tc);background:#0b101e;overflow:hidden;font-size:.9rem;justify-content:center}
.cfA .augImg{width:100%;height:100%;object-fit:cover}
.cfA:focus-visible{outline:.125rem solid #ffe994}
.cfNum{display:flex;flex-direction:column;align-items:flex-end;line-height:1.05}.cfNum b{font-family:var(--disp);font-size:.9375rem;color:#fff}.cfNum small{font-size:.5625rem;letter-spacing:.08em;color:#8f9cc0}
.cfNum.dmg b{color:#ffe28a}
.cfCar{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:50%;border:1px solid #34406a;font-size:.6875rem;color:#9fb0d6;transition:transform .2s,background .2s;justify-self:end}
.cfRow.open>.cfRowBtn .cfCar{transform:rotate(90deg);color:#0b1020;background:var(--ki);border-color:var(--ki)}
.cfRowBtn .dl{font-family:var(--disp);font-size:.875rem;color:#c9d4e6}.cfRowBtn .dl.up{color:var(--good)}.cfRowBtn .dl.down{color:var(--foe)}
/* a seat's breakdown */
.cfDetail{padding:.25rem .75rem .75rem;border-top:1px solid #233056;background:#0a1122;outline:none}
.cfDetail h4{margin:.75rem 0 .375rem;font-family:var(--disp);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:#9fb0d6}.cfDetail h4 small{font-family:var(--body);font-weight:400;letter-spacing:0;text-transform:none;color:#6f7a9a}
.cfOver,.cfCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(5.5rem,1fr));gap:.375rem;margin-top:.5rem}
.cfCell{display:flex;flex-direction:column;align-items:center;gap:.125rem;padding:.5rem .25rem;border-radius:.5rem;background:#0d1530;border:1px solid #233056;text-align:center}
.cfCell b{font-family:var(--disp);font-size:1rem;color:#fff;line-height:1.1}.cfCell span{font-size:.625rem;color:#8f9cc0}.cfCell em{font-style:normal}.cfCell em.up{color:var(--good)}.cfCell em.down{color:var(--foe)}.cfCell small{display:block;font-size:.625rem;color:#9fb0d6}
.cfBoard{display:flex;flex-wrap:wrap;gap:.375rem .3125rem;padding-top:.5rem}.cfBoard .cfU{width:3.25rem}.cfBoard.bench .cfU{width:2.5rem;opacity:.85}
.cfTableWrap{overflow-x:auto;scrollbar-width:thin;border:1px solid #233056;border-radius:.5rem}
.cfTable{width:100%;border-collapse:collapse;font-size:.75rem}
.cfTable th{text-align:left;padding:.375rem .5rem;font-family:var(--disp);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:#9fb0d6;background:#0d1530;white-space:nowrap}
.cfTable td{padding:.3125rem .5rem;border-top:1px solid #1b2545;vertical-align:middle;white-space:nowrap}
.cfTable tr.off td{opacity:.6}
.cfTable td.f{display:flex;align-items:center;gap:.5rem;min-width:9rem;white-space:normal}.cfTable td.f b{color:#fff}.cfTable td.f small{font-size:.625rem;color:#7f8aa8;margin-left:.25rem}
.cfTable .pic{flex:none;width:1.75rem;height:1.75rem;border-radius:.25rem;overflow:hidden;background:#0b101e}.cfTable .pic img{width:100%;height:100%;object-fit:cover;object-position:top}
.cfTable td.s{color:#ffd54a;letter-spacing:-.05em}.cfTable td.s small{color:#9fb0d6;letter-spacing:0}
.cfTable td.d{position:relative;min-width:6.5rem}.cfTable td.d .bar{position:absolute;left:0;top:.25rem;bottom:.25rem;background:linear-gradient(90deg,rgba(255,201,74,.3),rgba(255,201,74,.08));border-radius:.25rem;pointer-events:none}.cfTable td.d b{position:relative;font-family:var(--disp);color:#ffe28a}
.cfTable td.it{display:flex;gap:.125rem}.cfTable td.it img,.cfTable td.it .itImg{width:1.125rem;height:1.125rem;border-radius:.1875rem}
.cfSortBtn{all:unset;cursor:pointer;color:inherit}.cfSortBtn.on{color:#fff}.cfSortBtn:hover{color:var(--ki)}.cfSortBtn:focus-visible{outline:.125rem solid #ffe994}
.cfTraits{display:flex;flex-wrap:wrap;gap:.3125rem}
.cfT{display:inline-flex;align-items:center;gap:.3125rem;padding:.1875rem .5rem .1875rem .3125rem;border-radius:1rem;border:1px solid #2c3a66;background:#0d1530;font-size:.75rem;color:#9fb0d6}
.cfT .trIc{width:1.125rem;height:1.125rem;display:inline-flex}.cfT .trIc img{width:100%;height:100%}.cfT b{font-family:var(--disp);color:#fff}
.cfT.on{color:#e8ecff}.cfT.tier1{border-color:#b9823a}.cfT.tier2{border-color:#c9d4e6}.cfT.tier3{border-color:var(--gold);box-shadow:0 0 .375rem #ffc94a55}
.cfAugList{display:flex;flex-wrap:wrap;gap:.375rem}
.cfAugList .cfA{width:auto;height:auto;border-radius:1rem;padding:.1875rem .625rem .1875rem .1875rem}.cfAugList .cfA .augImg{width:1.5rem;height:1.5rem;border-radius:50%}.cfAugList .cfA .an{font-size:.75rem;color:var(--tc)}
.cfNone{margin:.5rem 0;font-size:.8125rem;color:#8f9cc0}
/* a match on its own */
.acctOv .mvBox{width:min(64rem,100%)}
.mvSub{margin:0 0 .75rem;font-size:.75rem;color:#9fb0d6}
/* the career profile (the owner's direction of 2026-10-13: the Overwatch career pages' layout in the game's colours):
   the box is a wide page: a navy band for the head (the avatar framed, the name big and slanted, the rank), a strip of
   tabs with the open one filled cyan, the mode as a drop-down; OVERVIEW in three columns (the ring and the modes, the
   fighters played most with the universe table, the comparison bars), STATISTICS as a fighter card, six tiles and the
   sheet, HISTORY the rows, CUSTOMIZE the avatar picker */
.acctOv .pfBox.career{width:min(80rem,100%);padding:0;overflow:hidden auto;border-top-color:#58658b;background:linear-gradient(180deg,#0e1427,#0a0e1c)}
.pfBox.career .pfHead{margin:0;padding:1rem 3rem 1rem 1.25rem;gap:1.125rem;background:linear-gradient(90deg,#172040,#111831 55%,#0d1327);border-bottom:1px solid #2c3a66;box-shadow:inset 0 -1px 0 #ffc94a33}
.pfBox.career .pfAv{width:5rem;height:5rem;border-radius:.5rem;border:.1875rem solid #fff;box-shadow:0 .25rem 1rem #0008}
.pfBox.career .pfWho h2{font-family:var(--disp);font-size:2rem;font-style:italic;letter-spacing:.02em;text-transform:uppercase;line-height:1;color:#fff;text-shadow:0 .125rem 0 #0b1020}
.pfBox.career .pfWho p{font-size:.8125rem;color:var(--ki);letter-spacing:.06em;text-transform:uppercase;font-family:var(--disp)}
.pfBox.career .xBtn{top:.75rem;right:.75rem}
.pfBox.career .pfVerify{margin:.75rem 1.25rem 0}
.owTabs{display:flex;gap:.25rem;margin:0;padding:.375rem 1.25rem 0;background:#0a0e1c;border-bottom:1px solid #2c3a66}
.overlay .box .owTab{all:unset;cursor:pointer;padding:.625rem 1.125rem;font-family:var(--disp);font-size:.8125rem;font-weight:800;font-style:italic;letter-spacing:.1em;color:#c9d4e6;border-radius:.25rem .25rem 0 0}
.overlay .box .owTab:hover{color:#fff;background:#141a2e}.overlay .box .owTab.on{color:#0b1020;background:var(--ki)}.overlay .box .owTab:focus-visible{outline:.125rem solid #ffe994}
.pfBox.career .pfCareer{padding:.875rem 1.25rem 1.25rem}
.owBar{display:flex;justify-content:flex-end;margin:0 0 .75rem}
.owSel{display:inline-flex;align-items:center}
.owSel select{appearance:none;-webkit-appearance:none;font:inherit;font-family:var(--disp);font-size:.75rem;font-weight:700;letter-spacing:.08em;color:#fff;background:#141a2e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237ad0ff' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .625rem center/.625rem;border:1px solid #2c3a66;border-radius:.375rem;padding:.4375rem 1.875rem .4375rem .75rem;cursor:pointer}
.owSel select:focus-visible{outline:.125rem solid #ffe994}
.owH{margin:0 0 .5rem;font-family:var(--disp);font-size:.8125rem;font-style:italic;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9fb0d6}
.cfBlock .owH{margin-bottom:.5rem}
/* OVERVIEW */
.owGrid{display:grid;grid-template-columns:15.5rem minmax(0,1fr) 19rem;gap:1rem;align-items:start}
.owLeft{display:flex;flex-direction:column;gap:.75rem;padding:.875rem;border-radius:.625rem;background:#0d1530;border:1px solid #233056}
.owRing{position:relative;width:11rem;height:11rem;margin:0 auto}
.owRing svg{width:100%;height:100%;display:block}.owRing .bg{fill:none;stroke:#1b2545;stroke-width:9}.owRing .fg{fill:none;stroke:var(--gold);stroke-width:9;stroke-linecap:round;filter:drop-shadow(0 0 .25rem #ffc94a88)}
.owRing .tx{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem}
.owRing .tx span{font-family:var(--disp);font-size:.625rem;letter-spacing:.12em;color:#9fb0d6}.owRing .tx b{font-family:var(--disp);font-size:1.5rem;color:var(--ki);line-height:1}
.owModes{display:flex;flex-direction:column;gap:.375rem}
.owMode{position:relative;display:grid;grid-template-columns:1.25rem 1fr auto;grid-template-areas:"ic t v" "ic s s";align-items:center;column-gap:.5rem;padding:.4375rem .625rem;border-radius:.375rem;background:#141a2e;border:1px solid #233056;overflow:hidden}
.owMode .ic{grid-area:ic;width:1.125rem;height:1.125rem;color:#fff}.owMode .ic svg{width:100%;height:100%}
.owMode .t{grid-area:t;font-family:var(--disp);font-size:.75rem;font-weight:800;letter-spacing:.1em;color:#fff}.owMode b{grid-area:v;font-family:var(--disp);font-size:.8125rem;color:#fff}
.owMode small{grid-area:s;font-size:.625rem;color:#9fb0d6}
.owMode .bar{position:absolute;left:0;top:0;bottom:0;z-index:0;background:linear-gradient(90deg,var(--mc,#2c3a66),transparent);opacity:.55;pointer-events:none}.owMode>*:not(.bar){position:relative;z-index:1}
.owMode.ranked{--mc:#a9782a}.owMode.casual{--mc:#2a6f8a}
.owRankSlot{display:flex;flex-direction:column;gap:.5rem}.owRankSlot .pfRk{padding:.625rem}.owRankSlot .pfGrid{grid-template-columns:1fr 1fr}.owRankSlot .acctOv h3,.owRankSlot h3{margin:.25rem 0 .375rem}
.owMid{min-width:0}
.owTop3{display:grid;grid-template-columns:repeat(3,1fr);gap:.625rem}
.overlay .box .owCard{all:unset;cursor:pointer;display:flex;flex-direction:column;border-radius:.5rem;overflow:hidden;background:#141a2e;border:1px solid #233056;--tc:#8a94ad;text-align:center}
.owCard.t2{--tc:#35b863}.owCard.t3{--tc:#3a8cff}.owCard.t4{--tc:#b45cff}.owCard.t5{--tc:#ffb02a}
.owCard .pic{position:relative;display:block;aspect-ratio:1;background:#0b101e;border-bottom:.1875rem solid var(--tc);overflow:hidden}.owCard .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}   /* (the face art carries its caption at the foot: the square crop keeps the face) */
.owCard b{padding:.5rem .5rem 0;font-family:var(--disp);font-size:.8125rem;letter-spacing:.06em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.owCard em{font-style:normal;font-family:var(--disp);font-size:1.125rem;font-weight:800;color:#ff9a2a;line-height:1.2}
.owCard small{padding:.125rem .5rem .5rem;font-size:.625rem;color:#9fb0d6}
.overlay .box .owCard:hover{border-color:var(--ki)}.overlay .box .owCard:focus-visible{outline:.125rem solid #ffe994}
.owRole{width:100%;margin:.625rem 0 0;border-collapse:separate;border-spacing:0 .25rem;font-size:.75rem}
.owRole th{text-align:left;padding:.25rem .625rem;font-family:var(--disp);font-size:.625rem;letter-spacing:.1em;color:#9fb0d6}.owRole th:not(:first-child),.owRole td:not(:first-child){text-align:right}
.owRole td{padding:.5rem .625rem;background:#141a2e;border-top:1px solid #233056;border-bottom:1px solid #233056;font-family:var(--disp);color:#fff}.owRole td:first-child{border-left:1px solid #233056;border-radius:.375rem 0 0 .375rem}.owRole td:last-child{border-right:1px solid #233056;border-radius:0 .375rem .375rem 0}
.owRole td b{font-style:italic;letter-spacing:.06em}
.owRight{min-width:0;padding:.875rem;border-radius:.625rem;background:#0d1530;border:1px solid #233056}
.owCmpHead{display:flex;flex-direction:column;gap:.375rem;margin-bottom:.625rem}.owCmpHead .owH{margin:0}
.owBars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}
.overlay .box .owBars button{all:unset;cursor:pointer;display:grid;grid-template-columns:1.875rem minmax(0,1fr) auto;align-items:center;gap:.5rem;width:100%;box-sizing:border-box;padding:.125rem .375rem .125rem .125rem;border-radius:.375rem;background:#141a2e;border:1px solid #233056}
.overlay .box .owBars button:hover{border-color:var(--ki)}.overlay .box .owBars button:focus-visible{outline:.125rem solid #ffe994}
.owBars .pic{width:1.875rem;height:1.875rem;border-radius:.25rem;overflow:hidden;background:#0b101e}.owBars .pic img{width:100%;height:100%;object-fit:cover;object-position:top}
.owBars .bar{position:relative;display:block;height:1.5rem;min-width:0;overflow:hidden;border-radius:.25rem}
.owBars .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--c);opacity:.5}
.owBars .nm{position:relative;display:block;padding:0 .5rem;line-height:1.5rem;font-family:var(--disp);font-size:.6875rem;font-weight:800;letter-spacing:.06em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 #000}
.owBars b{font-family:var(--disp);font-size:.75rem;color:#fff;white-space:nowrap}
/* STATISTICS */
.owStats{display:grid;grid-template-columns:14rem minmax(0,1fr);gap:1rem;align-items:start}
.owPick{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;border-radius:.625rem;background:#0d1530;border:1px solid #233056;text-align:center}
.owHero{position:relative;aspect-ratio:1;border-radius:.5rem;overflow:hidden;background:#0b101e;border:.125rem solid #34406a;--tc:#34406a}.owHero.t2{border-color:#35b863}.owHero.t3{border-color:#3a8cff}.owHero.t4{border-color:#b45cff}.owHero.t5{border-color:#ffb02a}
.owHero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.owHeroName{font-family:var(--disp);font-size:1rem;font-weight:800;letter-spacing:.08em;color:#fff}.owPick small{font-size:.6875rem;color:#9fb0d6}
.overlay .box .owChange{all:unset;cursor:pointer;padding:.5rem;border-radius:.375rem;background:#ff7a2a;color:#1a0a00;font-family:var(--disp);font-size:.75rem;font-weight:800;letter-spacing:.1em;text-align:center}
.overlay .box .owChange:hover{background:#ff9a4a}.overlay .box .owChange:focus-visible{outline:.125rem solid #ffe994}
.owPicker{display:grid;grid-template-columns:repeat(4,1fr);gap:.25rem;max-height:18rem;overflow-y:auto;scrollbar-width:thin;padding:.25rem;border-radius:.375rem;background:#0a0e1c}
.overlay .box .owPickBtn{all:unset;cursor:pointer;aspect-ratio:1;border-radius:.25rem;overflow:hidden;background:#141a2e;border:.125rem solid transparent;font-family:var(--disp);font-size:.625rem;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center}
.overlay .box .owPickBtn img{width:100%;height:100%;object-fit:cover;object-position:top}
.overlay .box .owPickBtn:hover{border-color:#9fb4d8}.overlay .box .owPickBtn.on{border-color:var(--ki)}.overlay .box .owPickBtn:focus-visible{outline:.125rem solid #ffe994}
.owTiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.625rem;margin-bottom:.875rem}
.owTile{display:flex;flex-direction:column;align-items:center;gap:.375rem;padding:1rem .5rem .75rem;border-radius:.5rem;background:#141a2e;border:1px solid #233056}
.owTile .ic{width:2.25rem;height:2.25rem;border-radius:50%;background:#0b101e;border:1px solid #2c3a66;color:#c9d4e6;display:flex;align-items:center;justify-content:center}.owTile .ic svg{width:1.25rem;height:1.25rem}
.owTile b{font-family:var(--disp);font-size:1.5rem;font-weight:800;color:#fff;line-height:1.1}.owTile span{font-family:var(--disp);font-size:.625rem;letter-spacing:.12em;color:#9fb0d6}
.owSheet th{background:#0a0e1c;color:#fff}.owSheet td{font-family:var(--disp);color:#e8ecff}.owSheet td:first-child{font-size:.6875rem;letter-spacing:.08em;color:#c9d4e6}.owSheet tbody tr:nth-child(odd) td{background:#0f1733}
.owCustom .pfPick h3{margin:0 0 .5rem}
.cfSm{font-style:normal;font-size:.625rem;color:#7f8aa8}
.cfTwo{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.875rem}
.cfBlock{margin-top:.875rem}
.cfDist{display:grid;grid-template-columns:repeat(8,1fr);gap:.25rem;height:6rem;align-items:end;padding:.5rem .5rem .25rem;border:1px solid #233056;border-radius:.5rem;background:#0a1122}
.cfDist .bar{--pc:#7f8aa8;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.cfDist .bar.p1{--pc:#ffd54a}.cfDist .bar.p2{--pc:#e8eef8}.cfDist .bar.p3{--pc:#e0a26a}.cfDist .bar.p4{--pc:#b9c3d6}
.cfDist .bar i{display:block;width:70%;min-height:.125rem;background:linear-gradient(180deg,var(--pc),color-mix(in srgb,var(--pc) 35%,transparent));border-radius:.1875rem .1875rem 0 0}
.cfDist .bar b{position:absolute;top:-.25rem;font-family:var(--disp);font-size:.6875rem;color:#fff;transform:translateY(-100%)}.cfDist .bar small{font-size:.625rem;color:#8f9cc0;margin-top:.125rem}
.cfForm{display:flex;flex-wrap:wrap;gap:.3125rem;padding:.5rem;border:1px solid #233056;border-radius:.5rem;background:#0a1122;min-height:3rem;align-items:center}
.cfF{--pc:#7f8aa8;display:inline-flex;align-items:baseline;justify-content:center;gap:.0625rem;min-width:2.25rem;height:2rem;padding:0 .375rem;border-radius:1rem;border:.125rem solid var(--pc);color:var(--pc);font-family:var(--disp);font-size:.9375rem;font-weight:800;line-height:1.75rem;background:#0d1530}
.cfF small{font-size:.5625rem;letter-spacing:.04em}
.owH small{font-family:var(--body);font-style:normal;font-weight:400;letter-spacing:0;text-transform:none;color:#7f8aa8;margin-left:.375rem}
.cfFormSum{margin:.375rem 0 0;font-size:.75rem;color:#9fb0d6}.cfFormSum b{color:#fff;font-family:var(--disp)}
.cfF.p1{--pc:#ffd54a;color:#2a1a00;background:var(--pc)}.cfF.p2{--pc:#e8eef8}.cfF.p3{--pc:#e0a26a}.cfF.p4{--pc:#b9c3d6}
.cfAugTop{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3125rem}
.cfAugTop li{display:grid;grid-template-columns:2rem 1fr auto auto auto;gap:.75rem;align-items:center;padding:.375rem .5rem;border-radius:.5rem;border:1px solid #233056;background:#141a2e}
.cfAugTop .cfA{width:2rem;height:2rem}.cfAugTop .an{min-width:0;display:flex;flex-direction:column}.cfAugTop .an b{font-size:.8125rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cfAugTop .an small,.cfAugTop .st small{font-size:.625rem;color:#8f9cc0}
.cfAugTop .st{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}.cfAugTop .st b{font-family:var(--disp);font-size:.875rem;color:#fff}
.cfQueue{display:flex;gap:.25rem;margin:0 0 .625rem}
.overlay .box .cfQ{all:unset;cursor:pointer;padding:.25rem .625rem;border-radius:1rem;border:1px solid #2c3a66;font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:#9fb0d6}
.overlay .box .cfQ.on{color:#0b1020;background:var(--ki);border-color:var(--ki)}.overlay .box .cfQ:hover:not(.on){border-color:#58658b;color:#fff}.overlay .box .cfQ:focus-visible{outline:.125rem solid #ffe994}
/* reduced motion */
@media (prefers-reduced-motion:reduce){.rs-play .rsResults{animation:none}.cfNote.live::before{animation:none}.cfCar{transition:none}}
/* phones */
@media (max-width:760px){
  .rsResults{width:calc(100vw - 1rem);padding:.5rem .5rem .625rem}
  .cfRowBtn,.cfRow.hist .cfRowBtn{grid-template-columns:2.25rem minmax(0,1fr) auto auto 1rem;grid-template-areas:"pl who dmg kos car" "pl units units units units" "pl augs augs augs augs";gap:.25rem .375rem;padding:.375rem .375rem}
  .cfRowBtn .cfP{grid-area:pl}.cfRowBtn .who{grid-area:who}.cfRowBtn .cfRowU{grid-area:units;padding-top:.5rem}.cfRowBtn .cfAugs{grid-area:augs;justify-content:flex-start;max-width:none}.cfRowBtn .cfNum.dmg{grid-area:dmg}.cfRowBtn .cfNum.kos{grid-area:kos}.cfRowBtn .cfCar{grid-area:car}.cfRowBtn .dl{grid-area:kos;justify-self:end;align-self:end}
  .cfRow.hist .cfRowBtn .cfNum.kos{grid-area:kos}
  .cfP b{font-size:1.25rem}
  .cfTwo{grid-template-columns:1fr}
  .acctOv .pfBox.career,.acctOv .mvBox{width:100%}
  .pfBox.career .pfHead{padding:.75rem 2.75rem .75rem .875rem}.pfBox.career .pfAv{width:3.5rem;height:3.5rem}.pfBox.career .pfWho h2{font-size:1.375rem}
  .owTabs{overflow-x:auto;scrollbar-width:none;padding:.375rem .5rem 0}.overlay .box .owTab{padding:.5rem .625rem;font-size:.75rem}
  .pfBox.career .pfCareer{padding:.75rem .625rem 1rem}
  .owGrid,.owStats{grid-template-columns:1fr}.owTop3{grid-template-columns:repeat(3,1fr);gap:.375rem}.owCard small{display:none}.owTiles{grid-template-columns:repeat(2,1fr)}.owPicker{grid-template-columns:repeat(5,1fr)}
  .cfAugTop li{grid-template-columns:2rem 1fr auto;grid-template-areas:"ic an st1" "ic an st2" "ic an st3"}.cfAugTop .cfA{grid-area:ic}.cfAugTop .an{grid-area:an}.cfAugTop .st{flex-direction:row;gap:.25rem;align-items:baseline}
}
/* the hover card over the results and the profile (career.js cfTipShow): the game's item and augment card, on the page over every overlay */
.itTip.cfTip{position:fixed;z-index:60;pointer-events:none}
.cfIt,[data-aug]{cursor:help}
.cfTable .it .cfIt{display:inline-block;border-radius:.25rem}.cfTable .it .cfIt:hover,.cfTable .it .cfIt:focus-visible{outline:.125rem solid var(--ki);outline-offset:1px}