/* Player screens: per-tab layout (see css/player.css for the shell). */
/* CHARACTER */
.pl-character.on { grid-template-columns: minmax(calc(300 * var(--u)), 24%) 1fr minmax(calc(300 * var(--u)), 24%); gap: calc(16 * var(--u)); }
.pc-l, .pc-r { display: flex; flex-direction: column; gap: calc(8 * var(--u)); overflow: hidden auto; scrollbar-width: thin; }
.pc-slots { display: grid; gap: calc(8 * var(--u)); flex: 1; grid-template-rows: repeat(5, minmax(0, 1fr)); }
.pcs { position: relative; display: flex; align-items: center; gap: calc(14 * var(--u)); text-align: left; padding: 0 calc(14 * var(--u)); border-radius: calc(8 * var(--u)); border: 1px solid var(--line); background: rgba(255, 255, 255, .04); min-height: 0; transition: background .15s, border-color .15s; }
.pcs::before { content: ''; position: absolute; left: 0; top: 10%; bottom: 10%; width: 3px; border-radius: 2px; background: var(--rc, transparent); }
.pcs:hover, .pcs.kf { background: rgba(159, 232, 255, .1); border-color: var(--acc); }
.pcs-i { flex: none; width: calc(64 * var(--u)); height: calc(64 * var(--u)); display: grid; place-items: center; border-radius: calc(6 * var(--u)); border: 2px solid rgba(255, 255, 255, .3); background: linear-gradient(160deg, color-mix(in srgb, var(--rc, #b8b8b2) 50%, #0b1020), color-mix(in srgb, var(--rc, #b8b8b2) 14%, #0b1020)); overflow: hidden; }
.pcs-i img { max-width: 92%; max-height: 92%; object-fit: contain; } .pcs-i .opic { width: 100%; height: 100%; border-radius: 0; max-width: 100%; max-height: 100%; } .pcs-i .ii, .pcs-i .emb { width: 100%; height: 100%; } .pcs-i svg { max-width: 100%; max-height: 100%; }
.pcs-t { display: grid; gap: 2px; min-width: 0; } .pcs-t em { font: normal 500 calc(9.5 * var(--u)) var(--f-mono); letter-spacing: .24em; color: var(--c-dim); } .pcs-t b { font: 700 calc(16 * var(--u))/1.2 var(--f-disp); letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pcs-t small { font: 600 calc(9.5 * var(--u)) var(--f-mono); letter-spacing: .16em; color: var(--rc); }
.pcs-go { margin-left: auto; font: 600 calc(9 * var(--u)) var(--f-mono); letter-spacing: .2em; color: var(--acc); opacity: 0; transition: opacity .15s; } .pcs:hover .pcs-go, .pcs.kf .pcs-go { opacity: 1; }
.pc-m { position: relative; cursor: grab; touch-action: none; border-radius: calc(10 * var(--u)); outline: none; } .pc-m:active { cursor: grabbing; }
.pc-plate { position: absolute; left: 0; right: 0; bottom: calc(34 * var(--u)); display: grid; justify-items: center; gap: 2px; pointer-events: none; text-shadow: 0 2px 14px rgba(0, 0, 0, .7); } .pc-nm { font: 700 calc(34 * var(--u))/1 var(--f-disp); letter-spacing: .2em; } .pc-role { font: 500 calc(11 * var(--u)) var(--f-mono); letter-spacing: .24em; color: var(--c-dim); }
.pc-hint { position: absolute; left: calc(10 * var(--u)); bottom: calc(8 * var(--u)); font: 500 calc(9 * var(--u)) var(--f-mono); letter-spacing: .3em; color: var(--c-dim); pointer-events: none; }
.pc-emo { position: absolute; right: calc(10 * var(--u)); bottom: calc(8 * var(--u)); }
.pc-cls { display: grid; gap: 2px; padding-bottom: calc(6 * var(--u)); border-bottom: 1px solid var(--line); } .pc-cls b { font: 700 calc(20 * var(--u)) var(--f-disp); letter-spacing: .16em; } .pc-cls span { font: 500 calc(10.5 * var(--u)) var(--f-mono); letter-spacing: .12em; color: var(--c-dim); }
.pc-stats { display: grid; gap: calc(2 * var(--u)); } .pc-stats .pl-st { grid-template-columns: calc(84 * var(--u)) 1fr calc(30 * var(--u)); }
.pc-lw { display: grid; gap: calc(6 * var(--u)); }
.pc-w { position: relative; display: flex; align-items: center; gap: calc(10 * var(--u)); text-align: left; padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(8 * var(--u)); border: 1px solid var(--line); background: rgba(255, 255, 255, .04); } .pc-w::before { content: ''; position: absolute; left: 0; top: 12%; bottom: 12%; width: 3px; background: var(--rc); border-radius: 2px; } .pc-w:hover, .pc-w.kf { border-color: var(--acc); background: rgba(159, 232, 255, .1); }
.pc-wi { flex: none; width: calc(76 * var(--u)); height: calc(40 * var(--u)); display: grid; place-items: center; } .pc-wi img { max-width: 100%; max-height: 100%; object-fit: contain; } .pc-wt { display: grid; min-width: 0; } .pc-wt em { font: normal 500 calc(9 * var(--u)) var(--f-mono); letter-spacing: .2em; color: var(--c-dim); } .pc-wt b { font: 700 calc(13 * var(--u)) var(--f-disp); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc-wt small { font: 500 calc(9 * var(--u)) var(--f-mono); color: var(--c-dim); letter-spacing: .1em; }
.pc-next { margin-top: auto; display: grid; gap: 2px; padding: calc(10 * var(--u)); border-radius: calc(8 * var(--u)); background: rgba(255, 210, 138, .07); border: 1px solid rgba(255, 210, 138, .2); } .pc-next em { font: normal 600 calc(9 * var(--u)) var(--f-mono); letter-spacing: .26em; color: var(--gold); } .pc-next b { font: 700 calc(14 * var(--u)) var(--f-disp); letter-spacing: .1em; } .pc-next span { font: 500 calc(10 * var(--u)) var(--f-mono); color: var(--c-dim); }
/* LOADOUT */
.pl-loadout.on { display: block; }
.ld-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(14 * var(--u)); height: min(100%, calc(660 * var(--u))); margin-top: calc(20 * var(--u)); }
.ld-plus { font: 300 calc(80 * var(--u))/1 var(--f-disp); color: rgba(255, 255, 255, .22); } .ld-cards[hidden], .ld-pick[hidden] { display: none; }
.ld-card { position: relative; display: flex; flex-direction: column; gap: calc(6 * var(--u)); min-height: 0; padding: calc(16 * var(--u)) calc(14 * var(--u)); text-align: left; border-radius: calc(10 * var(--u)); border: 1px solid var(--line); border-top: 3px solid var(--rc, rgba(255, 255, 255, .25)); backdrop-filter: blur(10px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc, #fff) 14%, rgba(8, 12, 22, .86)), rgba(8, 12, 22, .86) 55%); transition: transform .15s, border-color .15s, box-shadow .15s; }
button.ld-card:hover, button.ld-card.kf { transform: translateY(calc(-4 * var(--u))); border-color: var(--acc); box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .45); }
.ld-card > span { display: block; } .ld-top { display: flex !important; justify-content: space-between; align-items: baseline; } .ld-top b { font: 700 calc(13 * var(--u)) var(--f-disp); letter-spacing: .22em; } .ld-top em { font: normal 500 calc(9 * var(--u)) var(--f-mono); letter-spacing: .2em; color: var(--c-dim); }
.ld-img { flex: 1; min-height: 0; display: grid !important; place-items: center; } .ld-img img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55)); } .ld-card.def .ld-img img { opacity: .7; }
.ld-nm { font: 700 calc(21 * var(--u))/1.1 var(--f-disp); letter-spacing: .08em; } .ld-sub { font: 500 calc(10 * var(--u)) var(--f-mono); letter-spacing: .14em; color: var(--c-dim); }
.ld-sts { display: grid !important; gap: 1px; margin-top: calc(4 * var(--u)); } .ld-sts .pl-st { grid-template-columns: calc(46 * var(--u)) 1fr calc(44 * var(--u)); } .ld-empty { font: 500 calc(11 * var(--u)) var(--f-mono); color: var(--c-dim); }
.ld-go { visibility: hidden; margin-top: calc(6 * var(--u)); font: 700 calc(10 * var(--u)) var(--f-mono); letter-spacing: .26em; color: var(--acc); } button.ld-card:hover .ld-go, button.ld-card.kf .ld-go { visibility: visible; }
.ld-kit { opacity: .86; } .ld-glyph { flex: 1; display: grid !important; place-items: center; color: rgba(255, 255, 255, .5); } .ld-glyph svg { width: 46%; max-height: 80%; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; } .ld-note { font: 500 calc(10.5 * var(--u))/15px var(--f-hud); color: var(--c-dim); margin-top: auto; }
.ld-pick { display: grid; grid-template-columns: minmax(0, 1fr) calc(430 * var(--u)); gap: calc(16 * var(--u)); height: 100%; } .ld-pl { display: flex; flex-direction: column; gap: calc(10 * var(--u)); min-height: 0; }
.ld-ph { display: flex; align-items: center; justify-content: space-between; } .ld-ph .pl-link { font: 700 calc(15 * var(--u)) var(--f-disp); letter-spacing: .18em; color: #fff; text-decoration: none; }
.ld-grid, .pa-grid, .pcs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(118 * var(--u)), 1fr)); gap: calc(10 * var(--u)); align-content: start; overflow: hidden auto; padding: calc(4 * var(--u)); scrollbar-width: thin; flex: 1; min-height: 0; }
.ld-hero { display: flex; flex-direction: column; gap: calc(8 * var(--u)); overflow: hidden auto; scrollbar-width: thin; border-top: 3px solid var(--rc, transparent); }
.ld-hi { height: calc(170 * var(--u)); flex: none; display: grid; place-items: center; background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 22%, transparent), transparent); } .ld-hi img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55)); }
.ld-hk { font: 600 calc(10 * var(--u)) var(--f-mono); letter-spacing: .22em; } .ld-hn { font: 700 calc(28 * var(--u))/1.1 var(--f-disp); letter-spacing: .08em; } .ld-hp { margin: 0; font: 500 calc(11 * var(--u))/16px var(--f-hud); color: var(--c-dim); }
.ld-vs { font: 600 calc(9.5 * var(--u)) var(--f-mono); letter-spacing: .22em; color: var(--c-dim); padding-top: calc(4 * var(--u)); border-top: 1px solid var(--line); } .ld-vs b { color: #fff; } .ld-hero .pl-act { margin-top: auto; }
/* ARMORY */
.pl-armory.on { grid-template-columns: minmax(0, 1fr) calc(500 * var(--u)); gap: calc(16 * var(--u)); }
.pa-l { display: flex; flex-direction: column; gap: calc(10 * var(--u)); min-height: 0; } .pa-chips, .pcs-chips { display: flex; align-items: center; gap: calc(6 * var(--u)); flex-wrap: wrap; }
.pa-r { display: flex; flex-direction: column; gap: calc(8 * var(--u)); overflow: hidden auto; scrollbar-width: thin; border-top: 3px solid var(--rc, transparent); }
.pa-img { height: calc(180 * var(--u)); flex: none; display: grid; place-items: center; background: radial-gradient(closest-side, color-mix(in srgb, var(--rc, #fff) 22%, transparent), transparent); } .pa-img img { max-width: 100%; max-height: 100%; object-fit: contain; filter: var(--tint, none) drop-shadow(0 10px 16px rgba(0, 0, 0, .55)); }
.pa-k { font: 600 calc(10 * var(--u)) var(--f-mono); letter-spacing: .2em; } .pa-n { font: 700 calc(30 * var(--u))/1.1 var(--f-disp); letter-spacing: .08em; } .pa-p { margin: 0; font: 500 calc(11 * var(--u))/16px var(--f-hud); color: var(--c-dim); }
.pa-meta { display: flex; gap: calc(18 * var(--u)); font: 500 calc(10.5 * var(--u)) var(--f-mono); letter-spacing: .12em; color: var(--c-dim); } .pa-meta b { color: #fff; } .pa-miss { color: var(--c-warn); }
.pa-skh { display: flex; justify-content: space-between; align-items: baseline; margin-top: calc(4 * var(--u)); padding-top: calc(8 * var(--u)); border-top: 1px solid var(--line); }
.pa-skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(66 * var(--u)), 1fr)); gap: calc(8 * var(--u)); }
.pa-bar { margin-top: auto; display: grid; gap: calc(6 * var(--u)); } .pa-cap { font: 500 calc(11 * var(--u))/15px var(--f-mono); color: var(--c-dim); } .pa-cap b { color: #fff; }
/* COSMETICS */
.pl-cosmetics.on { grid-template-columns: minmax(calc(560 * var(--u)), 50%) 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: calc(16 * var(--u)); }
.pcs-l { grid-row: 1 / span 2; display: flex; flex-direction: column; gap: calc(10 * var(--u)); min-height: 0; } .pcs-stage { min-height: 0; }
.pcs-d { display: grid; grid-template-columns: calc(96 * var(--u)) 1fr calc(250 * var(--u)); gap: calc(16 * var(--u)); align-items: center; }
.pcs-di { width: calc(96 * var(--u)); height: calc(96 * var(--u)); display: grid; place-items: center; border-radius: calc(8 * var(--u)); border: 2px solid rgba(255, 255, 255, .35); overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 52%, #0b1020), color-mix(in srgb, var(--rc) 14%, #0b1020)); } .pcs-di img { max-width: 92%; max-height: 92%; object-fit: contain; } .pcs-di .opic { width: 100%; height: 100%; max-width: 100%; max-height: 100%; } .pcs-di .ii, .pcs-di .emb { width: 100%; height: 100%; } .pcs-di svg { max-width: 100%; max-height: 100%; }
.pcs-dt { display: grid; gap: 3px; min-width: 0; } .pcs-dk { font: 600 calc(10 * var(--u)) var(--f-mono); letter-spacing: .2em; } .pcs-dn { font: 700 calc(24 * var(--u))/1.1 var(--f-disp); letter-spacing: .1em; } .pcs-dt p { margin: 0; font: 500 calc(11 * var(--u))/16px var(--f-hud); color: var(--c-dim); } .pcs-ds { font: 600 calc(10.5 * var(--u))/15px var(--f-mono); letter-spacing: .06em; color: var(--acc); } .pcs-ds.lk { color: var(--c-warn); }
.pl-cosmetics .pcs-grid { grid-template-columns: repeat(auto-fill, minmax(calc(110 * var(--u)), 1fr)); }
/* SKILLS */
/* SKILLS: tree + side rail on top, operator ability inspector across the bottom. */
.pl-skills.on { grid-template-columns: minmax(0, 1fr) calc(320 * var(--u)); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: 'tree side' 'abil abil'; gap: calc(14 * var(--u)); }
.psk-t { grid-area: tree; min-height: 0; }
.psk-side { grid-area: side; display: flex; flex-direction: column; gap: calc(12 * var(--u)); min-height: 0; overflow: hidden auto; scrollbar-width: thin; }
.psk-a { grid-area: abil; }
.psk-t { display: flex; flex-direction: column; gap: calc(10 * var(--u)); overflow: auto; } .psk-hd { display: flex; justify-content: space-between; } .psk-tree { --u: calc(1px * var(--ui, 1) * .9); display: flex; justify-content: space-between; gap: calc(10 * var(--u)); align-items: flex-start; padding-top: calc(8 * var(--u)); }
.psk-d { display: flex; flex-direction: column; gap: calc(8 * var(--u)); } .pl-pts { display: flex; justify-content: space-between; font: 500 calc(11 * var(--u)) var(--f-mono); padding-top: calc(8 * var(--u)); border-top: 1px solid var(--line); margin-top: auto; } .pl-pts b { color: var(--gold); }
.pl .sk-col { flex: none; width: calc(360 * var(--u)); --bc: #9fe8ff; }
.pl .sk-h { display: flex; align-items: baseline; gap: calc(10 * var(--u)); height: calc(22 * var(--u)); border-bottom: 1px solid color-mix(in srgb, var(--bc) 40%, transparent); margin-bottom: calc(6 * var(--u)); }
.pl .sk-h b { font: 700 calc(13 * var(--u)) var(--f-disp); letter-spacing: .26em; color: var(--bc); } .pl .sk-h em { font: normal 500 calc(9 * var(--u)) var(--f-mono); letter-spacing: .22em; color: var(--c-dim); } .pl .sk-h span { margin-left: auto; font: 500 calc(9 * var(--u)) var(--f-mono); letter-spacing: .16em; color: var(--c-dim); }
.pl .sk-f { position: relative; width: calc(360 * var(--u)); height: calc(340 * var(--u)); }
.pl .sk-ln { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .pl .sk-ln line { stroke: rgba(255, 255, 255, .16); stroke-width: 2; stroke-dasharray: 3 4; } .pl .sk-ln line.half { stroke: color-mix(in srgb, var(--bc) 60%, transparent); stroke-dasharray: none; } .pl .sk-ln line.on { stroke: var(--bc); stroke-dasharray: none; stroke-width: 3; filter: drop-shadow(0 0 4px var(--bc)); }
.pl .sk-n { position: absolute; display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); width: calc(112 * var(--u)); background: none; border: 0; padding: 0; text-align: center; }
.pl .sk-d { position: relative; width: calc(38 * var(--u)); height: calc(38 * var(--u)); flex: none; display: grid; place-items: center; }
.pl .sk-d .dm { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(8, 10, 18, .85); stroke: rgba(255, 255, 255, .28); stroke-width: 2; transition: fill .2s, stroke .2s, filter .2s; }
.pl .sk-g { position: relative; width: 55%; height: 55%; } .pl .sk-g svg { width: 100%; height: 100%; fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1.6; }
.pl .sk-c { position: absolute; right: calc(-4 * var(--u)); bottom: calc(-4 * var(--u)); min-width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 8px; background: #0b0e16; border: 1px solid rgba(255, 255, 255, .3); font: normal 700 calc(9 * var(--u))/calc(13 * var(--u)) var(--f-mono); text-align: center; color: var(--c-dim); }
.pl .sk-l { display: grid; gap: 1px; justify-items: center; min-width: 0; } .pl .sk-l b { font: 700 calc(10 * var(--u))/12px var(--f-disp); letter-spacing: .1em; color: var(--c-dim); text-align: center; max-width: calc(112 * var(--u)); } .pl .sk-l em { font: normal 500 calc(8 * var(--u))/10px var(--f-mono); letter-spacing: .2em; color: rgba(255, 255, 255, .3); }
/* tier lanes down the left edge of each branch, so the ladder reads top-to-bottom at a glance */
.pl .sk-tl { position: absolute; left: calc(-14 * var(--u)); font: normal 600 calc(7.5 * var(--u)) var(--f-mono); letter-spacing: .1em; color: rgba(255, 255, 255, .22); pointer-events: none; }
.pl .sk-sub { font: 500 calc(9 * var(--u))/12px var(--f-mono); letter-spacing: .06em; color: var(--c-dim); margin-bottom: calc(4 * var(--u)); max-width: calc(340 * var(--u)); }
.pl .sk-n.can .dm { stroke: var(--bc); fill: color-mix(in srgb, var(--bc) 14%, #080a12); } .pl .sk-n.can .sk-g svg { stroke: var(--bc); } .pl .sk-n.can .sk-l b { color: #fff; } .pl .sk-n.can .sk-l em { color: var(--bc); } .pl .sk-n.can .sk-c { border-color: var(--bc); color: var(--bc); }
.pl .sk-n.own .dm { stroke: var(--bc); fill: var(--bc); filter: drop-shadow(0 0 7px var(--bc)); } .pl .sk-n.own .sk-g svg { stroke: #05070d; stroke-width: 2; } .pl .sk-n.own .sk-l b { color: #fff; } .pl .sk-n.own .sk-l em { color: var(--bc); }
.pl .sk-n.kf .dm, .pl .sk-n.sel .dm { stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 8px #fff); } .pl .sk-n:hover .dm { stroke: #fff; }
/* RECORD */
.pl-record.on { grid-template-columns: 1fr 1fr; gap: calc(16 * var(--u)); overflow: hidden auto; align-content: start; scrollbar-width: thin; } .prc-col { display: grid; gap: calc(14 * var(--u)); align-content: start; min-width: 0; }
.prc-h { display: flex; justify-content: space-between; width: 100%; background: none; border: 0; padding: 0 0 calc(8 * var(--u)); font: 600 calc(10 * var(--u)) var(--f-mono); letter-spacing: .3em; color: var(--c-dim); text-align: left; } .prc-h.kf { color: var(--acc); } .prc-h em { font-style: normal; letter-spacing: .12em; }
.prc-id { display: grid; grid-template-columns: auto 1fr; gap: calc(14 * var(--u)); align-items: center; } .rc-tag { font: 700 calc(24 * var(--u)) var(--f-disp); letter-spacing: .14em; } .rc-title, .rc-rank { font: 500 calc(11 * var(--u)) var(--f-mono); letter-spacing: .14em; color: var(--c-dim); } .prc-id small { font: 500 calc(10 * var(--u)) var(--f-mono); color: var(--c-dim); }
.prc-call { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(10 * var(--u)); } .prc-call label { font: 600 calc(10 * var(--u)) var(--f-mono); letter-spacing: .24em; color: var(--c-dim); } .prc-call input { flex: 1; max-width: calc(260 * var(--u)); } .prc-call input.kf { outline: 2px solid var(--acc); }
.prc-ch { display: grid; gap: calc(8 * var(--u)); } .pl .ch { display: grid; gap: 4px; } .pl .ch-t { display: flex; gap: calc(10 * var(--u)); align-items: baseline; font: 500 calc(12 * var(--u)) var(--f-hud); } .pl .ch-t em { font: normal 600 calc(9 * var(--u)) var(--f-mono); letter-spacing: .2em; color: var(--c-dim); } .pl .ch-t b { margin-left: auto; color: var(--gold); font: 700 calc(11 * var(--u)) var(--f-mono); } .pl .ch.done .ch-t span { opacity: .55; } .pl .ch-p { font: 500 calc(9.5 * var(--u)) var(--f-mono); color: var(--c-dim); }
.pl .rc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(10 * var(--u)); } .pl .rs { display: grid; gap: 2px; } .pl .rs b { font: 700 calc(18 * var(--u)) var(--f-mono); font-variant-numeric: tabular-nums; } .pl .rs span { font: 500 calc(9 * var(--u)) var(--f-mono); letter-spacing: .2em; color: var(--c-dim); }
.pl .wkr { display: grid; grid-template-columns: calc(120 * var(--u)) 1fr calc(50 * var(--u)); gap: calc(10 * var(--u)); align-items: center; font: 600 calc(10 * var(--u)) var(--f-mono); letter-spacing: .08em; height: calc(26 * var(--u)); } .pl .wkr b { text-align: right; }
.pl .hr { display: grid; grid-template-columns: calc(54 * var(--u)) 1fr auto auto auto; gap: calc(10 * var(--u)); align-items: center; font: 500 calc(11 * var(--u)) var(--f-mono); height: calc(26 * var(--u)); border-left: 3px solid var(--c-dim); padding-left: calc(8 * var(--u)); } .pl .hr.win { border-color: #7be08a; } .pl .hr.loss { border-color: #ff7a86; } .pl .hr i, .pl .hr em, .pl .hr u { font-style: normal; text-decoration: none; color: var(--c-dim); } .pl .hr u { color: var(--gold); }
.pl .rc-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(120 * var(--u)), 1fr)); gap: calc(8 * var(--u)); } .pl .bd { display: grid; justify-items: center; gap: 2px; text-align: center; opacity: .5; } .pl .bd.got { opacity: 1; } .pl .bd b { font: 700 calc(10 * var(--u)) var(--f-disp); letter-spacing: .08em; } .pl .bd em { font: normal 500 calc(9 * var(--u)) var(--f-mono); color: var(--c-dim); } .pl .bd .emb { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
.pl .res-medals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: calc(10 * var(--u)); } .pl .rm { font: 500 calc(10 * var(--u)) var(--f-mono); padding: 3px 8px; border-radius: 12px; background: rgba(255, 255, 255, .06); display: inline-flex; gap: 4px; align-items: center; } .pl .rm svg { width: 12px; height: 12px; } .dimt { opacity: .5; }
.prc-cdx { display: grid; gap: 4px; font: 500 calc(11 * var(--u))/15px var(--f-hud); color: var(--c-dim); } .prc-cdx b { font: 600 calc(9 * var(--u)) var(--f-mono); letter-spacing: .3em; color: var(--acc); margin-top: calc(8 * var(--u)); } .prc-cdx i { font-style: normal; font-weight: 700; color: #fff; letter-spacing: .06em; }
/* ---- operator ability inspector ------------------------------------------------------------------------------- */
.ab-hd { display: flex; align-items: baseline; gap: calc(10 * var(--u)); }
.ab-hd .pl-h { flex: none; }
.ab-opname { font: 700 calc(15 * var(--u)) var(--f-disp); letter-spacing: .16em; }
.ab-role { margin-left: auto; font: 500 calc(9 * var(--u)) var(--f-mono); letter-spacing: .2em; color: var(--c-dim); }
.ab-strip { display: flex; gap: calc(6 * var(--u)); overflow: auto hidden; scrollbar-width: thin; padding: calc(6 * var(--u)) 0; }
.ab-op { flex: none; display: grid; justify-items: center; gap: calc(3 * var(--u)); width: calc(58 * var(--u)); padding: calc(5 * var(--u)) calc(2 * var(--u)); border: 1px solid var(--line); border-radius: calc(6 * var(--u)); background: rgba(255, 255, 255, .03); transition: border-color .15s, background .15s; }
.ab-op span { font: 600 calc(7.5 * var(--u)) var(--f-mono); letter-spacing: .08em; color: var(--c-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ab-op:hover, .ab-op.on { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 16%, transparent); }
.ab-op.on span { color: #fff; }
.ab-fc { width: calc(34 * var(--u)); height: calc(34 * var(--u)); object-fit: contain; }
.ab-fi { display: grid; place-items: center; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; font: 700 calc(14 * var(--u)) var(--f-disp); font-style: normal; color: #06080f; background: var(--ac); }
.ab-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(10 * var(--u)); }
.ab-card { display: grid; gap: calc(4 * var(--u)); padding: calc(9 * var(--u)) calc(11 * var(--u)); border: 1px solid var(--line); border-left: 3px solid var(--ac); border-radius: calc(6 * var(--u)); background: linear-gradient(100deg, color-mix(in srgb, var(--ac) 12%, rgba(8, 12, 22, .8)), rgba(8, 12, 22, .8)); }
.ab-k { font: 600 calc(8 * var(--u)) var(--f-mono); letter-spacing: .26em; color: var(--ac); }
.ab-row { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.ab-ic { width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex: none; fill: none; stroke: var(--ac); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ab-row b { font: 700 calc(12 * var(--u)) var(--f-disp); letter-spacing: .1em; }
.ab-row em { margin-left: auto; font: normal 500 calc(8 * var(--u)) var(--f-mono); letter-spacing: .12em; color: var(--c-dim); }
.ab-card p { margin: 0; font: 500 calc(10 * var(--u))/14px var(--f-hud); color: var(--c-dim); }
.ab-none { padding: calc(10 * var(--u)); font: 500 calc(10 * var(--u)) var(--f-mono); color: var(--c-dim); }
.ab-build { display: grid; gap: calc(3 * var(--u)); margin: calc(4 * var(--u)) 0 0; padding-left: calc(12 * var(--u)); list-style: none; }
.ab-build li { position: relative; font: 500 calc(10 * var(--u))/14px var(--f-hud); color: var(--c-text, #d7dbe8); }
.ab-build li::before { content: '\25C6'; position: absolute; left: calc(-12 * var(--u)); color: var(--gold, #ffd84a); font-size: calc(7 * var(--u)); top: calc(2 * var(--u)); }
.ab-build li.ab-empty { color: var(--c-dim); font-style: italic; } .ab-build li.ab-empty::before { content: none; }
@media (prefers-reduced-motion: reduce) { .pl-tab.on, .pop { animation: none; } .pl-bar i, .pl .sk-d .dm { transition: none; } }