/* Player screens (js/player*.js): one shell (left rail, header, key-hint footer) hosting Character / Loadout / Armory / Cosmetics / Skills / Record.
   1u = 1px at 1600x900, scaled by --ui (set from the viewport). Tab content is capped in width for 21:9 so tiles never stretch. */
#charhub.screen { padding: 0; }
#charhub.screen::after { background: linear-gradient(90deg, rgba(5, 8, 16, .5), transparent 30%, transparent 70%, rgba(5, 8, 16, .5)), linear-gradient(0deg, rgba(5, 8, 16, .6), transparent 34%) !important; }
.pl { --u: calc(1px * var(--ui, 1)); --acc: #9fe8ff; --gold: #ffd28a; --line: rgba(255, 255, 255, .13); --panel: rgba(8, 12, 22, .8);
  position: absolute; inset: calc(18 * var(--u)) calc(28 * var(--u)); display: grid; grid-template-columns: calc(84 * var(--u)) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: calc(12 * var(--u)) calc(16 * var(--u));
  color: var(--c-ink, #f4f1e8); font-family: var(--f-hud); }
:where(.pl button) { font: inherit; color: inherit; cursor: pointer; }
.pl [data-f]:focus { outline: none; }
.pl-hd { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(18 * var(--u)); padding: calc(8 * var(--u)) calc(18 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.pl-id { display: grid; gap: 2px; min-width: 0; } .pl-id b { font: 700 calc(22 * var(--u))/1.1 var(--f-disp); letter-spacing: .14em; white-space: nowrap; } .pl-id span { font: 500 calc(11 * var(--u))/16px var(--f-mono); letter-spacing: .1em; color: var(--c-dim); }
.pl-sw { background: none; border: 0; font: 500 calc(10 * var(--u)) var(--f-mono); letter-spacing: .16em; color: rgba(255, 255, 255, .6); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .25); padding: calc(6 * var(--u)) calc(8 * var(--u)); border-radius: 6px; } .pl-sw:hover, .pl-sw.kf { color: #fff; background: rgba(255, 255, 255, .08); } .pl-sw[hidden] { display: none; }
.pl-gap { flex: 1; }
.pl-lv { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.pl-lvl { display: grid; text-align: center; } .pl-lvl em { font: normal 500 calc(9 * var(--u)) var(--f-mono); letter-spacing: .24em; color: var(--c-dim); } .pl-lvl b { font: 700 calc(26 * var(--u))/1 var(--f-disp); color: var(--gold); }
.pl-xp { display: grid; gap: 3px; width: calc(220 * var(--u)); } .pl-xp span { font: 600 calc(10 * var(--u)) var(--f-mono); letter-spacing: .22em; } .pl-xp small { font: 500 calc(10 * var(--u)) var(--f-mono); color: var(--c-dim); font-variant-numeric: tabular-nums; }
.pl-bar { position: relative; height: calc(6 * var(--u)); background: rgba(255, 255, 255, .13); border-radius: 3px; } .pl-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--acc), #fff); border-radius: 3px; transition: width .35s ease; }
.pl-bar u { position: absolute; top: -2px; bottom: -2px; width: 2px; background: rgba(255, 255, 255, .85); border-radius: 1px; }
.pl-cr { display: grid; text-align: right; padding-left: calc(18 * var(--u)); border-left: 1px solid var(--line); } .pl-cr em { font: normal 500 calc(9 * var(--u)) var(--f-mono); letter-spacing: .24em; color: var(--c-dim); } .pl-cr b { font: 700 calc(22 * var(--u))/1.1 var(--f-mono); color: var(--gold); font-variant-numeric: tabular-nums; }
/* rail */
.pl-rail { display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(8 * var(--u)) calc(6 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.pl-ri { position: relative; display: grid; justify-items: center; gap: calc(4 * var(--u)); padding: calc(10 * var(--u)) 0 calc(8 * var(--u)); background: none; border: 1px solid transparent; border-radius: calc(8 * var(--u)); color: var(--c-dim); transition: color .15s, background .15s; }
.pl-ri:hover, .pl-ri.kf { color: #fff; background: rgba(255, 255, 255, .08); } .pl-ri.kf { border-color: var(--acc); }
.pl-ri.on { color: #fff; background: rgba(159, 232, 255, .14); } .pl-ri.on::before { content: ''; position: absolute; left: calc(-6 * var(--u)); top: 18%; bottom: 18%; width: 3px; border-radius: 2px; background: var(--acc); box-shadow: 0 0 10px var(--acc); }
.pl-rg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); display: grid; place-items: center; } .pl-rg svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pl-rl { font: 600 calc(8.5 * var(--u))/1 var(--f-mono); letter-spacing: .12em; }
.pl-rsp { flex: 1; } .pl-shop { color: var(--gold); border-top: 1px solid var(--line); margin-top: calc(4 * var(--u)); }
.pl-bd { position: absolute; top: calc(4 * var(--u)); right: calc(6 * var(--u)); min-width: calc(15 * var(--u)); height: calc(15 * var(--u)); padding: 0 calc(4 * var(--u)); border-radius: 8px; background: var(--gold); color: #0b0905; font: normal 700 calc(9 * var(--u))/calc(15 * var(--u)) var(--f-mono); text-align: center; } .pl-bd[hidden] { display: none; }
/* main + tabs */
.pl-main { position: relative; min-width: 0; min-height: 0; }
.pl-tab { position: absolute; inset: 0; display: none; width: 100%; max-width: calc(1720 * var(--u)); margin: 0 auto; } .pl-tab.on { display: grid; animation: plIn .28s ease both; }
@keyframes plIn { from { opacity: 0; transform: translateY(calc(6 * var(--u))); } to { opacity: 1; transform: none; } }
.pl-panel { min-width: 0; min-height: 0; padding: calc(14 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.pl-h { font: 600 calc(10 * var(--u))/16px var(--f-mono); letter-spacing: .3em; color: var(--c-dim); }
.pl-cnt { font: 500 calc(10 * var(--u)) var(--f-mono); letter-spacing: .14em; color: var(--c-dim); } .pl-sp { flex: 1; }
.pl-chip { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); background: rgba(255, 255, 255, .06); border: 1px solid transparent; border-radius: 16px; padding: calc(5 * var(--u)) calc(14 * var(--u)); font: 600 calc(10.5 * var(--u))/16px var(--f-mono); letter-spacing: .12em; white-space: nowrap; }
.pl-chip i { font-style: normal; opacity: .6; } .pl-chip:hover { border-color: var(--line); } .pl-chip.on { border-color: var(--acc); color: var(--acc); background: rgba(159, 232, 255, .1); } .pl-chip.kf { box-shadow: 0 0 0 2px var(--acc); } .pl-chip.q { background: none; color: var(--c-dim); }
.pl-btn { width: 100%; padding: calc(13 * var(--u)) calc(20 * var(--u)); border: 0; border-radius: calc(8 * var(--u)); font: 700 calc(14 * var(--u))/1 var(--f-disp); letter-spacing: .24em; color: #0b0905; background: linear-gradient(100deg, #ffe9bd, #ffc46b 55%, #e8a64a); box-shadow: 0 0 calc(30 * var(--u)) rgba(255, 196, 107, .22); transition: transform .12s, box-shadow .12s; }
.pl-btn:hover:not(:disabled), .pl-btn.kf { transform: translateY(-1px); box-shadow: 0 0 calc(44 * var(--u)) rgba(255, 210, 138, .42); outline: 2px solid #fff; outline-offset: 2px; }
.pl-btn:disabled { cursor: default; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .5); box-shadow: none; } .pl-btn.shop { background: linear-gradient(100deg, #bff1ff, #7fd2f0); }
.pl-link { background: none; border: 0; padding: calc(6 * var(--u)) calc(8 * var(--u)); font: 500 calc(11 * var(--u)) var(--f-mono); letter-spacing: .08em; color: rgba(255, 255, 255, .62); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .25); border-radius: 6px; } .pl-link:hover, .pl-link.kf { color: #fff; background: rgba(255, 255, 255, .08); }
.pl-act { display: grid; gap: calc(4 * var(--u)); justify-items: center; }
.pl-why { padding: calc(7 * var(--u)) calc(10 * var(--u)); border-left: 2px solid var(--c-warn); background: rgba(255, 190, 90, .07); font: 500 calc(11 * var(--u))/15px var(--f-hud); } .pl-why.ok { border-color: #7be08a; background: rgba(123, 224, 138, .08); color: #b8f5c0; }
.pl-empty { grid-column: 1 / -1; padding: calc(20 * var(--u)); font: 500 calc(12 * var(--u)) var(--f-mono); color: var(--c-dim); }
.pl-st { display: grid; grid-template-columns: calc(54 * var(--u)) 1fr calc(48 * var(--u)) auto; align-items: center; gap: calc(8 * var(--u)); height: calc(24 * var(--u)); } .pl-st > span:first-child { font: 600 calc(9.5 * var(--u)) var(--f-mono); letter-spacing: .14em; color: var(--c-dim); }
.pl-st b { font: 700 calc(12 * var(--u)) var(--f-mono); text-align: right; font-variant-numeric: tabular-nums; } .pl-st s { text-decoration: none; font: 700 calc(10 * var(--u)) var(--f-mono); min-width: calc(30 * var(--u)); } .pl-st s.up { color: #7be08a; } .pl-st s.dn { color: #ff7a86; }
.pl-sts { display: grid; gap: 2px; }
/* tiles: square, rarity-coloured, white frame when selected */
.pl-tile { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0; min-width: 0; border-radius: calc(6 * var(--u)); border: calc(2 * var(--u)) solid rgba(255, 255, 255, .22); overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--rc, #b8b8b2) 52%, #0b1020), color-mix(in srgb, var(--rc, #b8b8b2) 14%, #0b1020)); transition: border-color .12s; }
.pl-tile:hover { border-color: rgba(255, 255, 255, .6); } .pl-tile.sel { border-color: #fff; } .pl-tile.kf { border-color: var(--acc); box-shadow: 0 0 0 calc(2 * var(--u)) var(--acc), 0 0 calc(18 * var(--u)) rgba(159, 232, 255, .5); z-index: 1; }
.pt-v { width: 78%; height: 62%; display: grid; place-items: center; margin-bottom: calc(14 * var(--u)); } .pt-v img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.pt-v .opic { width: 100%; height: auto; aspect-ratio: 1; } .pt-v .ii, .pt-v .emb { width: 100%; height: 100%; } .pt-v svg { max-width: 100%; max-height: 100%; }
.pt-n { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(3 * var(--u)) calc(4 * var(--u)); background: rgba(5, 8, 16, .72); font: 700 calc(9.5 * var(--u))/12px var(--f-disp); letter-spacing: .06em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-eq { display: none; position: absolute; top: calc(4 * var(--u)); right: calc(4 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; background: #fff; } .pl-tile.eq .pt-eq { display: block; } .pt-eq::after { content: ''; position: absolute; left: 36%; top: 18%; width: 24%; height: 48%; border: solid #0b1020; border-width: 0 2px 2px 0; rotate: 40deg; }
.pt-new { display: none; position: absolute; top: calc(4 * var(--u)); left: calc(4 * var(--u)); padding: 1px calc(5 * var(--u)); border-radius: 3px; background: var(--gold); color: #0b0905; font: normal 700 calc(8 * var(--u))/12px var(--f-mono); letter-spacing: .1em; } .pl-tile.nw .pt-new { display: block; }
.pt-lk { display: none; position: absolute; top: calc(5 * var(--u)); right: calc(5 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: rgba(255, 255, 255, .8); } .pl-tile.lock .pt-lk { display: block; } .pt-lk svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pt-tag { position: absolute; left: calc(5 * var(--u)); bottom: calc(18 * var(--u)); font: normal 700 calc(8.5 * var(--u))/1 var(--f-mono); letter-spacing: .1em; color: #fff; text-shadow: 0 1px 3px #000; } .pl-tile.nw .pt-tag { bottom: calc(18 * var(--u)); }
.pl-tile.dim .pt-v { opacity: .5; filter: grayscale(.6); } .pl-tile.dim { border-color: rgba(255, 255, 255, .1); }
.pop { animation: plPop .5s cubic-bezier(.2, .9, .3, 1.2); } @keyframes plPop { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .9); scale: 1; } 40% { scale: 1.05; } 100% { box-shadow: 0 0 0 calc(18 * var(--u)) rgba(255, 255, 255, 0); scale: 1; } }
/* footer */
.pl-ft { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(20 * var(--u)); padding: 0 calc(4 * var(--u)); min-height: calc(36 * var(--u)); }
.pl-back { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); background: rgba(255, 255, 255, .07); border: 1px solid var(--line); border-radius: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(20 * var(--u)); font: 700 calc(11 * var(--u)) var(--f-disp); letter-spacing: .24em; } .pl-back svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); fill: none; stroke: currentColor; stroke-width: 2; } .pl-back:hover, .pl-back.kf { border-color: var(--acc); }
.pl-keys { display: flex; gap: calc(18 * var(--u)); flex-wrap: wrap; } .pl-k { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); font: 500 calc(10 * var(--u)) var(--f-mono); letter-spacing: .14em; color: var(--c-dim); }
.pl-k kbd { padding: 2px calc(7 * var(--u)); border-radius: 4px; border: 1px solid rgba(255, 255, 255, .3); border-bottom-width: 2px; color: #fff; font: 600 calc(10 * var(--u)) var(--f-mono); letter-spacing: .06em; } .pl-k kbd.pad { border-radius: 10px; }
.pl-msg { margin-left: auto; font: 500 calc(12 * var(--u)) var(--f-mono); color: var(--acc); opacity: 0; transition: opacity .25s; } .pl-msg.on { opacity: 1; } .pl-msg.bad { color: var(--c-warn); }

.pl-rg svg.nuart, .pt-lk svg.nuart, .ld-glyph svg.nuart { fill: currentColor; stroke: none; }
.pl::before { content: ''; position: fixed; inset: 0; z-index: -1; background: rgba(5, 8, 16, .97); opacity: 0; transition: opacity .25s; pointer-events: none; }
.pl[data-tab="loadout"]::before, .pl[data-tab="armory"]::before, .pl[data-tab="skills"]::before, .pl[data-tab="record"]::before { opacity: 1; }
.pl[data-tab="cosmetics"]::before { opacity: 1; background: linear-gradient(90deg, rgba(5, 8, 16, .93) 52%, rgba(5, 8, 16, .2) 62%, transparent); }
.pl .pt-v img, .pl .pc-wi img, .pl .ld-img img, .pl .pa-img img, .pl .ld-hi img { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; }
.pl .pt-v img, .pl .pc-wi img { width: 100%; height: 100%; }
.pl .ld-hi, .pl .pa-img { display: flex !important; align-items: center; justify-content: center; overflow: hidden; min-height: 0; } .pl .ld-img { overflow: hidden; }
.pl .pt-v img.opic, .pl .pcs-i img.opic, .pl .pcs-di img.opic { width: 100%; height: 100%; object-fit: cover; }

/* Rarity (owner ruling 2026-10-10): the tile background never encodes rarity. Rarity is a thin bar on the tile and a named tag in the detail panel. */
.pl-tile { background: linear-gradient(160deg, #161c2e, #0a0e1a); }
.pl-tile::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(3 * var(--u)); background: var(--rc, #b8b8b2); z-index: 1; }
.pl .pcs-i, .pl .pcs-di { background: linear-gradient(160deg, #161c2e, #0a0e1a); border-color: rgba(255, 255, 255, .22); border-bottom: calc(3 * var(--u)) solid var(--rc, #b8b8b2); }
.pl .ld-card { background: rgba(8, 12, 22, .86); }
.pl .ld-hi, .pl .pa-img { background: radial-gradient(closest-side, rgba(255, 255, 255, .06), transparent); }

/* Leave a consistent breathing area around tile art and its label. */
.pl .pt-v { width: 76%; height: 58%; margin-bottom: calc(18 * var(--u)); min-width: 0; min-height: 0; }
.pl .pt-v .ii, .pl .pt-v .emb { max-width: 100%; max-height: 100%; }
.pl .pt-n { padding: calc(4 * var(--u)) calc(8 * var(--u)); }
.pl .ld-img, .pl .ld-hi, .pl .pa-img { padding: calc(10 * var(--u)) calc(14 * var(--u)); }
.pl .pc-wi { padding: calc(3 * var(--u)); }