/* ============ shell ============ */
#app{min-height:100%}
.shell{display:grid;grid-template-columns:244px 1fr;min-height:100vh}
.shell>*{min-width:0}
/* the sidebar is always ink, in either theme: it is the one fixed landmark, and
   a dark rail makes the working surface beside it read as lighter and calmer */
.side{
  background:
    radial-gradient(320px 220px at 0% 0%, color-mix(in srgb, var(--brand) var(--side-wash,26%), transparent), transparent 70%),
    linear-gradient(180deg,var(--ink-2),var(--ink));
  color:var(--ink-text);padding:16px 12px 14px;display:flex;flex-direction:column;gap:1px;
  position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;
}
.side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);background-clip:content-box}
.brand{display:flex;align-items:center;gap:11px;padding:4px 8px 16px}
.brand .mark{width:34px;height:34px;border-radius:11px;background:var(--brand-grad);flex:none;display:grid;place-items:center;
  box-shadow:0 6px 18px -4px color-mix(in srgb, var(--brand) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.35)}
.brand .mark svg{width:19px;height:19px;color:#fff}
.brand b{font-size:15px;letter-spacing:-.02em;line-height:1.1;color:var(--ink-text-hi);display:block}
.brand small{display:block;color:var(--ink-text);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-top:2px;opacity:.8}
.navgroup{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(170,176,204,.5);padding:14px 11px 5px}
.navbtn{position:relative;display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:10px;border:0;background:transparent;
  color:var(--ink-text);cursor:pointer;text-align:left;width:100%;font-size:13.5px;font-weight:540;
  transition:background .15s,color .15s}
.navbtn:hover{background:rgba(255,255,255,.07);color:var(--ink-text-hi)}
.navbtn:focus-visible{outline-color:#fff;outline-offset:-2px}
.navbtn.on{background:rgba(255,255,255,.1);color:var(--ink-text-hi);font-weight:640;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.navbtn.on::before{content:'';position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--brand-grad)}
.navbtn .ic{width:18px;height:18px;flex:none;display:grid;place-items:center;opacity:.8}
.navbtn .ic svg{width:18px;height:18px}
.navbtn.on .ic{opacity:1;color:var(--nav-on)}
.side .spacer{flex:1;min-height:12px}
.side .foot{padding:12px 11px 2px;border-top:1px solid rgba(255,255,255,.08);margin-top:10px;font-size:11px;color:rgba(170,176,204,.7);line-height:1.6}

.main{min-width:0;display:flex;flex-direction:column;
  background:radial-gradient(900px 380px at 78% -60px, color-mix(in srgb, var(--brand) var(--page-wash,9%), transparent), transparent 70%)}
.topbar{position:sticky;top:0;z-index:30;
  background:color-mix(in srgb, var(--plane) 82%, transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);
  border-bottom:1px solid var(--border);padding:12px 28px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.topbar .lg{font-weight:700;font-size:17px;letter-spacing:-.02em;line-height:1.2}
.topbar .sub{color:var(--text-muted);font-size:12.5px}
.topbar .grow{flex:1}
.topbar .btn .bl{display:inline}
.live{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:99px;font-size:11.5px;font-weight:700;letter-spacing:.01em;
  color:var(--brand);background:color-mix(in srgb, var(--brand) 11%, var(--surface-1));border:1px solid color-mix(in srgb, var(--brand) 32%, transparent)}
.live i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:pulse 1.8s ease-out infinite}
.live.idle{color:var(--text-secondary);background:var(--surface-1);border-color:var(--border-strong)}
.live.idle i{animation:none;opacity:.55}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, currentColor 55%, transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
/* The content column takes whatever width the window gives it. Nothing here is
   a wall of prose, and every grid is auto-fit, so a wide monitor buys more
   cards per row rather than longer lines. The cap is past any ordinary display
   — it only stops a table spreading itself across an ultrawide. */
.content{padding:24px 28px 56px;width:100%;max-width:1760px;margin-inline:auto}
@media (min-width:1700px){ .content{padding:28px 36px 64px} }
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* only on a change of page — a re-render from a click inside one must not replay it */
.content.enter>*{animation:rise .42s var(--ease) both}
.content.enter>*:nth-child(2){animation-delay:.04s}
.content.enter>*:nth-child(3){animation-delay:.08s}
.content.enter>*:nth-child(4){animation-delay:.12s}
.content.enter>*:nth-child(n+5){animation-delay:.16s}
@media (prefers-reduced-motion:reduce){ .content.enter>*{animation:none} .live i{animation:none} *{transition-duration:.01ms!important} }

/* ============ player tiers ============ */
:root{
  --m-diamond-a:#3fd9ff; --m-diamond-b:#8b6bff; --m-diamond-c:#ff62c8;
  --m-gold-a:#ffd84a; --m-gold-b:#e08a00; --m-gold-c:#fff2b0;
  --m-silver-a:#f6f8fc; --m-silver-b:#6f7e9c; --m-silver-c:#ffffff;
  --m-bronze-a:#eaa062; --m-bronze-b:#9c4f17; --m-bronze-c:#f7c999;
}
.medal.diamond{--m-grad:linear-gradient(115deg,var(--m-diamond-a),var(--m-diamond-b),var(--m-diamond-c),var(--m-diamond-a));--m-tint:rgba(110,160,255,.14);--m-edge:#7f9bff;--m-bar:linear-gradient(180deg,#3fd9ff,#8b6bff 55%,#ff62c8)}
.medal.gold{--m-grad:linear-gradient(115deg,var(--m-gold-b),var(--m-gold-a),var(--m-gold-c),var(--m-gold-b));--m-tint:rgba(242,169,0,.15);--m-edge:#e8a000;--m-bar:linear-gradient(180deg,#ffd84a,#e08a00)}
.medal.silver{--m-grad:linear-gradient(115deg,var(--m-silver-b),var(--m-silver-a),var(--m-silver-c),var(--m-silver-b));--m-tint:rgba(120,135,165,.14);--m-edge:#8493b0;--m-bar:linear-gradient(180deg,#f6f8fc,#6f7e9c 60%,#c9d2e3)}
.medal.bronze{--m-grad:linear-gradient(115deg,var(--m-bronze-b),var(--m-bronze-a),var(--m-bronze-c),var(--m-bronze-b));--m-tint:rgba(168,90,30,.14);--m-edge:#b8662a;--m-bar:linear-gradient(180deg,#eaa062,#9c4f17)}
.mring{display:inline-flex;flex:none;padding:3.5px;border-radius:50%;background:var(--m-grad);background-size:300% 100%;line-height:0;vertical-align:middle}
.mring.lg{padding:4px;border-radius:17px}
.mring.mhero{padding:5px;border-radius:17px}
.mring.mhero>*{border-radius:13px!important;display:block}
.mring.sm{padding:3px}
.mring.xs{padding:2.5px}
.lupface .mring.lg{border-radius:50%;padding:4px}
.lupface .mring>.face.lg{border-width:0}
.mring>.face{box-shadow:0 0 0 1px var(--surface-1)}
.mring:not(.anim){background-size:100% 100%}
.mring{box-shadow:0 0 0 1px rgba(20,30,60,.22)}
.mring.diamond{box-shadow:0 0 0 1px rgba(90,110,255,.45),0 0 12px 0 rgba(90,170,255,.6)}
.mring.gold{box-shadow:0 0 0 1px rgba(170,100,0,.45),0 0 11px -1px rgba(242,169,0,.65)}
.mring.silver{box-shadow:0 0 0 1px rgba(60,75,110,.42),0 0 6px -1px rgba(130,150,190,.55)}
.mring.bronze{box-shadow:0 0 0 1px rgba(110,50,10,.45),0 0 6px -2px rgba(184,102,42,.5)}
.pcard.medal,.card.medal.mhero{position:relative;overflow:hidden;border-color:var(--m-edge);
  background:linear-gradient(100deg,var(--m-tint),transparent 62%),var(--surface-1)}
.pcard.medal::after,.card.medal.mhero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);background-size:250% 100%;background-position:150% 0}
.pcard.medal.diamond::after,.pcard.medal.gold::after,.card.medal.mhero.diamond::after,.card.medal.mhero.gold::after{opacity:.5}
.card.medal.mhero{box-shadow:var(--shadow),0 0 0 1px var(--m-edge) inset}
  color:#1a1405;background:var(--m-grad);background-size:300% 100%;vertical-align:middle}
@keyframes medal-flow{to{background-position:-300% 0}}
@keyframes medal-sweep{0%,55%{background-position:150% 0}100%{background-position:-50% 0}}
.mring.anim.diamond{animation:medal-flow 5s linear infinite}
.mring.anim.gold{animation:medal-flow 8s linear infinite}
.mring.anim.silver{animation:medal-flow 14s linear infinite}
.pcard.medal.anim.diamond::after,.card.medal.mhero.anim.diamond::after{animation:medal-sweep 4.5s ease-in-out infinite}
.pcard.medal.anim.gold::after,.card.medal.mhero.anim.gold::after{animation:medal-sweep 7s ease-in-out infinite}
@media (max-width:760px){ .mring.anim.silver,.pcard.medal.anim.gold::after{animation:none} }
@media (prefers-reduced-motion:reduce){ .mring,.pcard.medal::after,.card.medal.mhero::after{animation:none!important} }
:root[data-theme="dark"] .medal{--m-tint:rgba(255,255,255,.05)}
:root[data-theme="dark"] .medal.diamond{--m-tint:rgba(125,232,255,.1)}
:root[data-theme="dark"] .medal.gold{--m-tint:rgba(242,169,0,.14)}
:root[data-theme="dark"] .medal.silver{--m-tint:rgba(170,185,215,.1)}
:root[data-theme="dark"] .medal.bronze{--m-tint:rgba(210,120,50,.14)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .medal{--m-tint:rgba(255,255,255,.05)}
  :root:not([data-theme="light"]) .medal.diamond{--m-tint:rgba(125,232,255,.1)}
  :root:not([data-theme="light"]) .medal.gold{--m-tint:rgba(242,169,0,.14)}
  :root:not([data-theme="light"]) .medal.silver{--m-tint:rgba(170,185,215,.1)}
  :root:not([data-theme="light"]) .medal.bronze{--m-tint:rgba(210,120,50,.14)}
}
:root[data-theme="dark"] .pcard.medal::after{background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);background-size:250% 100%}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pcard.medal::after{background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);background-size:250% 100%} }

/* ---- trading card ---- */
.pcxstage{display:grid;justify-items:center;gap:12px;padding:10px 0 4px}
.pcxcard{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;--hx:0%;--hy:0%;position:relative;width:min(300px,86vw);aspect-ratio:5/7;border-radius:20px;padding:6px;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--ease),box-shadow .3s;touch-action:pan-y;
  background:var(--pcx-frame);box-shadow:0 18px 40px -14px rgba(18,22,48,.5),0 2px 6px rgba(18,22,48,.2);background-size:260% 260%;background-position:calc(50% + var(--hx)*.85) calc(50% + var(--hy)*.85)}
.pcxcard.pcxon{transition:transform .08s linear,box-shadow .3s;box-shadow:0 30px 50px -16px rgba(18,22,48,.55),0 2px 6px rgba(18,22,48,.2)}
.pcxcard.none,.pxm.none{--pcx-frame:#a9b0c4;--pcx-bg:#eff1f7;--pcx-art:#dde1ec}
.pcxcard.bronze,.pxm.bronze{--pcx-frame:linear-gradient(140deg,#e0a070,#a8622f 50%,#e8b186);--pcx-bg:linear-gradient(170deg,#fff4ea,#f0d3b8);--pcx-art:linear-gradient(160deg,#e9c3a0,#f8e4d1)}
.pcxcard.silver,.pxm.silver{--pcx-frame:linear-gradient(135deg,#d5dcec 0%,#5d6c8c 14%,#ffffff 28%,#8696b8 44%,#f4f7ff 58%,#4f5f82 76%,#c4cee4 90%,#ffffff 100%);--pcx-bg:repeating-linear-gradient(118deg,rgba(255,255,255,.75) 0 1.5px,rgba(120,138,178,.14) 1.5px 4px),linear-gradient(170deg,#fcfdff,#c9d2e6);--pcx-art:linear-gradient(135deg,#b3c0dc,#f6f8fd 45%,#a2b0d0)}
.pcxcard.silver{box-shadow:0 18px 40px -12px rgba(110,130,185,.6),0 2px 6px rgba(18,22,48,.2)}
.pcxcard.gold,.pxm.gold{--pcx-frame:linear-gradient(140deg,#fff0b0,#f2a900 40%,#ffe27a 65%,#d99200);--pcx-bg:linear-gradient(170deg,#fffaf0,#fbe9bd);--pcx-art:linear-gradient(160deg,#ffe9a8,#fff6dc)}
.pcxcard.diamond,.pxm.diamond{--pcx-frame:linear-gradient(140deg,#7de8ff,#a98bff 40%,#ff9ad5 65%,#7de8ff);--pcx-bg:linear-gradient(170deg,#f6fcff,#e4e2ff);--pcx-art:linear-gradient(160deg,#c4efff,#e2d6ff 55%,#ffd9ee)}
.pcxcard.diamond{box-shadow:0 18px 44px -12px rgba(125,150,255,.55),0 2px 6px rgba(18,22,48,.2)}
.pcxcard.gold{box-shadow:0 18px 44px -12px rgba(242,169,0,.5),0 2px 6px rgba(18,22,48,.2)}
.pcxface{position:relative;height:100%;border-radius:15px;overflow:hidden;background:var(--pcx-bg);color:#14182c;display:flex;flex-direction:column;padding:11px 11px 10px;gap:8px}
.pcxtop{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pcxname{font-weight:780;font-size:19px;letter-spacing:-.02em;line-height:1.1;min-width:0}
.pcxrank{font-size:11px;font-weight:700;color:#5a6180;white-space:nowrap}
.pcxart{position:relative;flex:1;min-height:0;border-radius:11px;overflow:hidden;background:var(--pcx-art);box-shadow:inset 0 0 0 1px rgba(18,22,48,.14)}
.pcxart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.pcxpos{position:absolute;left:-4px;bottom:-14px;font-size:92px;font-weight:900;letter-spacing:-.05em;color:rgba(18,22,48,.1);line-height:1;pointer-events:none}
.pcxteam{position:absolute;right:5px;top:5px;width:52px;height:52px;display:grid;place-items:center}
.pcxteam .tlogo{width:50px;height:50px;margin:0;display:block;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(18,22,48,.45))}
.pcxdef .pcxdeflogo{position:absolute;left:50%;top:50%;width:68%;height:68%;transform:translate(-50%,-50%);object-fit:contain;filter:drop-shadow(0 6px 10px rgba(18,22,48,.28))}
.pxmdef{position:absolute;left:50%;top:50%;width:70%;height:70%;transform:translate(-50%,-50%);object-fit:contain;filter:drop-shadow(0 2px 3px rgba(18,22,48,.3))}
.pcxmeta{font-size:11px;font-weight:650;color:#4a5170;letter-spacing:.02em;text-align:center}
.pcxstats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pcxs{background:rgba(255,255,255,.7);border:1px solid rgba(18,22,48,.12);border-radius:9px;padding:5px 4px 4px;text-align:center;min-width:0}
.pcxk{font-size:9px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:#5a6180}
.pcxv{font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.2;white-space:nowrap}
.pcxsub{font-size:9.5px;color:#6a7089;line-height:1.1;min-height:10px}
/* the shine: a glare that follows the pointer, and a foil that slides under it */
.pcxglare,.pcxholo{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.pcxglare{background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.55),transparent 48%);opacity:0;transition:opacity .3s;mix-blend-mode:soft-light}
.pcxcard.pcxon .pcxglare{opacity:1}
.pcxholo{opacity:0;transition:opacity .3s;mix-blend-mode:color-dodge;border-radius:inherit;background-size:220% 220%;background-position:calc(50% + var(--hx)) calc(50% + var(--hy))}
.pcxcard.diamond .pcxholo{background-image:repeating-linear-gradient(115deg,#ff7ad9 0%,#ffd86b 12%,#7dffa8 24%,#6bd6ff 36%,#a98bff 48%,#ff7ad9 60%);opacity:.38}
.pcxcard.diamond.pcxon .pcxholo{opacity:.62}
.pcxcard.gold .pcxholo{background-image:linear-gradient(115deg,transparent 20%,rgba(255,236,150,.95) 40%,rgba(255,255,255,.9) 50%,rgba(255,200,60,.9) 60%,transparent 80%);opacity:.2}
.pcxcard.gold.pcxon .pcxholo{opacity:.5}
.pcxcard.silver .pcxholo{background-image:linear-gradient(115deg,transparent 18%,rgba(255,255,255,.95) 38%,rgba(190,205,240,.9) 50%,rgba(255,255,255,.95) 62%,transparent 82%);opacity:.32}
.pcxcard.silver.pcxon .pcxholo{opacity:.7}
.pcxcard.anim.silver .pcxholo{animation:pcx-drift 7s ease-in-out infinite alternate}
.pcxcard.anim.silver:not(.pcxon){animation:pcx-frame 8s ease-in-out infinite alternate}
.pcxcard.anim.diamond:not(.pcxon){animation:pcx-frame 7s ease-in-out infinite alternate}
.pcxcard.anim.gold:not(.pcxon){animation:pcx-frame 9s ease-in-out infinite alternate}
@keyframes pcx-frame{from{background-position:30% 30%}to{background-position:70% 70%}}
.pcxcard.anim.diamond .pcxholo{animation:pcx-drift 6s ease-in-out infinite alternate}
.pcxcard.anim.gold .pcxholo{animation:pcx-drift 8s ease-in-out infinite alternate}
.pcxcard.pcxon .pcxholo{animation:none}
@keyframes pcx-drift{from{background-position:20% 20%}to{background-position:80% 80%}}
.pcxcap{text-align:center}
@media (prefers-reduced-motion:reduce){ .pcxcard{transform:none!important;transition:none} .pcxholo{animation:none!important} }

/* ---- small cards: the home line-up and the roster deck ---- */
.pcxfit{position:relative;flex:none}
.pcxscale{position:absolute;left:0;top:0;width:300px;height:420px;transform:scale(var(--k,1));transform-origin:0 0}
.pcxscale .pcxcard{width:300px}
.pcxlink{cursor:pointer;border-radius:20px}
.pcxlink:focus-visible{outline:2px solid var(--s1);outline-offset:4px}
.pcxhand{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 8px}
.pcxhandi{display:grid;justify-items:center;gap:6px}
.pcxdeck{display:flex;align-items:flex-end;padding:44px 26px 12px;overflow-x:auto;overflow-y:hidden;min-height:0}
.pcxdeck .pcxfit{margin-left:-88px;transition:transform .38s var(--ease),margin .38s var(--ease),filter .3s}
.pcxdeck .pcxfit:first-child{margin-left:0}
.pcxdeck .pcxfit:hover,.pcxdeck .pcxfit:focus-visible{transform:translateY(-34px) scale(1.07);z-index:5}
.pcxdeck:hover .pcxfit:not(:hover){filter:brightness(.97)}
.pcxdeck .pcxfit:hover~.pcxfit{transform:translateX(46px)}
.pcxdeck .pcxfit:nth-child(n){z-index:auto}
@media (prefers-reduced-motion:reduce){ .pcxdeck .pcxfit{transition:none} }
@media (hover:none){ .pcxdeck .pcxfit{margin-left:-60px} }
/* room on the right for the cards that slide aside when one is pulled up, so a full deck never grows a scrollbar on hover */
@media (hover:hover){ .pcxdeck{padding-right:56px} }
/* the deck's scrollbar: a slim rounded pill instead of the system bar. Chrome, Edge and Safari take the
   -webkit rules (and ignore them once scrollbar-color is set, so it is given to Firefox alone); a phone
   keeps its own overlay bar. */
@media (hover:hover){
  .pcxdeck::-webkit-scrollbar{height:10px}
  .pcxdeck::-webkit-scrollbar-track{margin:0 26px;border-radius:99px;background:color-mix(in srgb,var(--text-muted) 14%,transparent)}
  .pcxdeck::-webkit-scrollbar-thumb{border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand-2));border:2px solid transparent;background-clip:padding-box;min-width:48px}
  .pcxdeck::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,var(--brand-2),var(--brand));background-clip:padding-box}
  @supports (-moz-appearance:none){ .pcxdeck{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--brand) 70%,transparent) color-mix(in srgb,var(--text-muted) 14%,transparent)} }
}

/* ---- hover preview + deal cards ---- */
.pcxpop{position:fixed;z-index:1200;pointer-events:none;opacity:0;transform:translateY(6px) scale(.96);transition:opacity .18s var(--ease),transform .22s var(--ease);filter:drop-shadow(0 18px 28px rgba(18,22,48,.35))}
.pcxpop.in{opacity:1;transform:none}
.pcxpop .pcxcard{transform:none!important}
.tmini-items.cards.gave .pxm{opacity:.78;filter:saturate(.8)}
.tmini-items.cards.gave .pxm:hover{opacity:1;filter:none}
.tray-items.cards,.tmini-items.cards{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.tray-items.cards .tray-foot{flex-basis:100%}
.pxmwrap{display:grid;gap:5px;justify-items:center;align-content:start}
.pxm{position:relative;width:96px;height:134px;padding:3px;border-radius:12px;background:var(--pcx-frame);background-size:260% 260%;box-shadow:0 6px 14px -8px rgba(18,22,48,.5),0 1px 2px rgba(18,22,48,.2);transition:transform .22s var(--ease),box-shadow .22s;flex:none}
.pxm:hover{transform:translateY(-4px);box-shadow:0 14px 22px -10px rgba(18,22,48,.5),0 1px 2px rgba(18,22,48,.2)}
.pxm.pcxlink:focus-visible{outline:2px solid var(--s1);outline-offset:3px}
.pxmface{height:100%;border-radius:9px;overflow:hidden;background:var(--pcx-bg);color:#14182c;display:flex;flex-direction:column;padding:4px 4px 5px;gap:3px;min-width:0}
.pxmart{position:relative;flex:1;min-height:0;border-radius:6px;overflow:hidden;background:var(--pcx-art);box-shadow:inset 0 0 0 1px rgba(18,22,48,.14)}
.pxmart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.pxmpick{position:absolute;inset:0;display:grid;place-items:center;color:rgba(18,22,48,.4)}
.pxmpick svg{width:30px;height:30px}
.pxmpos{position:absolute;left:3px;top:3px;font-size:8.5px;font-weight:800;letter-spacing:.04em;padding:1px 5px;border-radius:99px;background:rgba(20,24,44,.82);color:#fff}
.pxmval{position:absolute;right:3px;bottom:3px;font-size:10px;font-weight:800;padding:0 5px;border-radius:99px;background:rgba(255,255,255,.92);font-variant-numeric:tabular-nums}
.pxmname{font-size:10.5px;font-weight:760;letter-spacing:-.01em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pxmsub{font-size:8.5px;color:#5a6180;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pxmx{position:absolute;right:-7px;top:-7px;width:20px;height:20px;border-radius:50%;border:1px solid var(--border-strong);background:var(--surface-1);color:var(--text-secondary);display:grid;place-items:center;cursor:pointer;padding:0;opacity:0;transition:opacity .15s;z-index:2}
.pxm:hover .pxmx,.pxmx:focus-visible{opacity:1}
.pxmx svg{width:11px;height:11px}
@media (hover:none){ .pxmx{opacity:1} }
.pxm.anim.diamond:not(:hover){animation:pcx-frame 7s ease-in-out infinite alternate}
.pxm.anim.gold:not(:hover){animation:pcx-frame 9s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){ .pxm{animation:none!important;transition:none} .pcxpop{transition:none} }

/* ---- phones: the deck is a swipeable strip ---- */
.pcxfit .pcxcard{touch-action:manipulation}
.pcxdeck{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.pcxhint{display:none;text-align:center;margin-top:-6px}
@media (hover:none){
  .pcxdeck{padding-top:18px;padding-right:40px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .pcxdeck .pcxfit:hover,.pcxdeck .pcxfit:hover~.pcxfit{transform:none}
  .pcxdeck .pcxfit:active{transform:translateY(-10px);transition-duration:.12s}
  .pcxhint{display:block}
}

/* ---- row accent: a tier bar down the left edge and a faint wash across the row ---- */
.trm{--m-wash:color-mix(in srgb,var(--m-tint) 50%,transparent)}
.lnrow{display:grid;grid-template-columns:46px 1fr auto;gap:9px;align-items:center;padding:3px 0;border-bottom:1px solid var(--grid)}
.lnrow.trm{padding-left:10px;border-radius:6px 0 0 6px}
table.tbl tbody tr.trm td{background-image:linear-gradient(var(--m-wash),var(--m-wash))}
table.tbl tbody tr.trm td:first-child{background-image:var(--m-bar),linear-gradient(var(--m-wash),var(--m-wash));background-size:4px 100%,auto;background-repeat:no-repeat,repeat;background-position:left top,0 0}
.bitem.trm,.sigrow.trm,.dealitem.trm,.lnrow.trm,.pcard.trm:not(.hypin){background-image:var(--m-bar),linear-gradient(90deg,var(--m-tint),transparent 80%);background-size:4px 100%,auto;background-repeat:no-repeat;background-position:left top,0 0}

/* ---- player page: card beside the headline numbers ---- */
.pcxhero{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:8px 30px;align-items:center}
.pcxhero>.grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media (max-width:1180px){ .pcxhero>.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} }
@media (max-width:900px){ .pcxhero{grid-template-columns:minmax(0,1fr)} .pcxhero>.grid{grid-template-columns:repeat(auto-fit,minmax(min(146px,100%),1fr))!important} }

.vq .ax{font-size:10px}
@media (max-width:760px){ .vq .ax{font-size:10.5px} }
/* ---- compact card: when a card is shown small, keep only what stays readable ---- */
.pcxcard.sm .pcxface{padding:12px 12px 12px;gap:10px}
.pcxcard.sm .pcxname{font-size:28px;line-height:1.05}
.pcxcard.sm .pcxrank{font-size:17px}
.pcxcard.sm .pcxmeta,.pcxcard.sm .pcxsub,.pcxcard.sm .pcxdraft{display:none}
.pcxcard.sm .pcxstats{grid-template-columns:repeat(2,1fr);gap:10px}
.pcxcard.sm .pcxs{padding:8px 4px 7px;border-radius:12px}
.pcxcard.sm .pcxk{font-size:15px}
.pcxcard.sm .pcxv{font-size:33px}
.pcxcard.sm .pcxteam{width:64px;height:64px;right:8px;top:8px}
.pcxcard.sm .pcxteam .tlogo{width:62px;height:62px}
.pcxcard.sm .pcxpos{font-size:110px}

/* ---- the three likeliest champions on the simulator ---- */
.tpodium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end}
.tpod{--tc:#c99a1e;--tc2:#e8c35a;position:relative;display:grid;justify-items:center;align-content:start;gap:4px;padding:20px 14px 16px;
  border:1px solid var(--border);border-radius:var(--r);background:var(--surface-1);box-shadow:var(--shadow);overflow:hidden}
.tpod::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--tc),var(--tc2),var(--tc))}
.tpod.t1{--tc:#c99a1e;--tc2:#f1d36b;order:2;padding-top:28px;padding-bottom:20px;
  background:linear-gradient(180deg,color-mix(in srgb,#f1d36b 22%,var(--surface-1)),var(--surface-1) 62%);border-color:color-mix(in srgb,#c99a1e 55%,var(--border));box-shadow:0 16px 36px -18px rgba(201,154,30,.7),var(--shadow)}
.tpod.t2{--tc:#8996a8;--tc2:#d7dde6;order:1}
.tpod.t3{--tc:#b0743f;--tc2:#e0aa7c;order:3}
.tpod.mine{outline:2px solid var(--brand);outline-offset:2px}
.tpod-rank{font-size:11px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}
.tpod.t1 .tpod-rank{color:#a47a0c}
:root[data-theme="dark"] .tpod.t1 .tpod-rank{color:#f1d36b}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .tpod.t1 .tpod-rank{color:#f1d36b} }
.tpod-av{margin:6px 0 4px;border-radius:50%;padding:3px;background:linear-gradient(145deg,var(--tc2),var(--tc));box-shadow:0 8px 18px -8px color-mix(in srgb,var(--tc) 70%,transparent);line-height:0}
.tpod-av>*{border-radius:50%!important;border:2px solid var(--surface-1);display:block;object-fit:cover}
.tpod-nm{font-weight:700;font-size:15px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpod-pct{font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums;margin-top:4px}
.tpod.t1 .tpod-pct{font-size:42px;color:var(--brand,var(--s1))}
.tpod-lbl{font-size:12px;color:var(--text-muted);margin-top:-2px}
.tpod-bar{width:100%;height:6px;border-radius:99px;background:var(--surface-3);margin:10px 0 6px;overflow:hidden}
.tpod-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--tc),var(--tc2))}
.tpod-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.tpod-stats>div{display:grid;justify-items:center;gap:1px;padding:7px 4px;border-radius:var(--r-sm);background:var(--surface-2)}
.tpod-stats b{font-size:15px;font-variant-numeric:tabular-nums}
.tpod-stats span{font-size:10.5px;color:var(--text-muted);text-align:center;line-height:1.2}
@media (max-width:620px){
  .tpodium{grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
  .tpod.t1{grid-column:1/-1;order:0}
  .tpod.t2{order:1}.tpod.t3{order:2}
  .tpod{padding:16px 10px 12px}
  .tpod.t1{padding-top:22px}
  .tpod-pct{font-size:28px}.tpod.t1 .tpod-pct{font-size:38px}
  .tpod-nm{font-size:14px}
}

/* ---- the games that matter most: one line each, detail on demand ---- */
.levitem{border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2);overflow:hidden;transition:border-color .15s}
.levitem.open{border-color:var(--border-strong);background:var(--surface-1);box-shadow:var(--shadow-xs)}
.levrow{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:28px minmax(150px,.8fr) minmax(0,1.2fr) 150px 22px;gap:14px;align-items:center;padding:10px 14px;cursor:pointer}
.levrow:hover{background:color-mix(in srgb,var(--brand) 5%,transparent)}
.levrow:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.levteams{display:flex;align-items:center;gap:7px;min-width:0}
.levteams b{font-size:13.5px}
.levmeta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-start}
.levmeter{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.levmeter .bar-track{width:74px;flex:none}
.levrow .chev{display:grid;place-items:center;color:var(--text-muted);transition:transform .2s var(--ease)}
.levrow.open .chev{transform:rotate(180deg)}
.levdetail{display:grid;gap:10px;padding:2px 14px 14px;border-top:1px solid var(--border);padding-top:12px;animation:rise .25s var(--ease) both}
@media (max-width:760px){
  .levrow{grid-template-columns:24px minmax(0,1fr) 20px;grid-template-areas:"n teams chev" ". meta meta" ". meter meter";gap:6px 10px;padding:11px 12px}
  .levn{grid-area:n}.levteams{grid-area:teams}.levmeta{grid-area:meta;justify-content:flex-start}.levmeter{grid-area:meter;justify-content:flex-start}.levrow .chev{grid-area:chev}
  .levmeter .bar-track{width:auto;flex:1;max-width:160px}
  .levdetail{padding:12px 12px 12px}
}
@media (prefers-reduced-motion:reduce){ .levdetail{animation:none} .levrow .chev{transition:none} }

/* ---- start / sit: slot cards and the candidate panel ---- */
.ssgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.ssc{all:unset;box-sizing:border-box;display:grid;gap:8px;padding:11px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-1);cursor:pointer;min-width:0;transition:border-color .15s,transform .15s,box-shadow .15s;position:relative}
.ssc:hover{border-color:var(--border-strong);transform:translateY(-2px);box-shadow:var(--shadow-xs)}
.ssc:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ssc.open{box-shadow:0 0 0 1px var(--pc,var(--brand)) inset}
/* the card's edge is the player's position colour (the same hues as the position pills); the tier lives on the headshot ring */
.ssc.ssc-QB{--pc:#e34948}.ssc.ssc-RB{--pc:#16a56f}.ssc.ssc-WR{--pc:#2f6df0}.ssc.ssc-TE{--pc:#eb6834}.ssc.ssc-K{--pc:#7d8099}.ssc.ssc-DEF{--pc:#5b46c8}
.ssc[class*="ssc-"]{border:2px solid var(--pc);padding:10px 11px}
.ssc[class*="ssc-"]:hover{border-color:var(--pc)}
.ssc-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ssc-slot{font-size:11px;font-weight:800;letter-spacing:.06em;padding:2px 8px;border-radius:99px;background:var(--surface-3);color:var(--text-secondary)}
.ssc-conf{font-size:12px;font-weight:800;padding:2px 9px;border-radius:99px;font-variant-numeric:tabular-nums;border:1px solid var(--border-strong);color:var(--text-secondary)}
.ssc-conf.hi{color:var(--good-text);border-color:var(--good);background:color-mix(in srgb,var(--good) 10%,transparent)}
.ssc-conf.mid{color:var(--text-primary);border-color:var(--s4);background:color-mix(in srgb,var(--s4) 12%,transparent)}
.ssc-conf.lo{color:var(--bad-text);border-color:var(--critical);background:color-mix(in srgb,var(--critical) 8%,transparent)}
.ssc-conf.solo{font-weight:650;font-size:10.5px;color:var(--text-muted)}
.ssc-who{display:flex;gap:10px;align-items:center;min-width:0}
.ssc-id{min-width:0}
.ssc-nm{font-weight:680;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ssc-bot{display:flex;align-items:center;gap:8px}
.ssc-pts{font-variant-numeric:tabular-nums}
.ssc-pts b{font-size:20px;letter-spacing:-.02em}
.ssc-pts span{font-size:11.5px;color:var(--text-muted)}
.ssc-bot .chev{margin-left:auto;display:grid;place-items:center;color:var(--text-muted);transition:transform .2s var(--ease)}
.ssc.open .ssc-bot .chev{transform:rotate(180deg)}
.ssp{grid-column:1/-1;display:grid;gap:10px;padding:14px;border:1px solid var(--brand);border-radius:var(--r);background:var(--surface-2);animation:rise .25s var(--ease) both}
.ssp-hd{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.sspc{display:grid;gap:8px;padding:11px 12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-1)}
.sspc.rec{border-color:color-mix(in srgb,var(--good) 55%,var(--border))}
.sspc-head{display:flex;gap:10px;align-items:center;min-width:0}
.sspc-id{flex:1;min-width:0}
.sspc-rec{border-color:var(--good);color:var(--good-text)}
.sspc-out{justify-self:start;margin:2px 0 0}
.sspc-outs{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding-top:8px}
.sspc-o{display:inline-flex;gap:6px;align-items:center}
.sspc-pct{display:grid;justify-items:end;line-height:1.1}
.sspc-pct b{font-size:26px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sspc-pct.lead b{color:var(--brand)}
.sspc-pct span{font-size:11px;color:var(--text-muted)}
.sspc-bar{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.sspc-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.sspc-src{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.ssrc{display:grid;justify-items:center;gap:1px;padding:6px 4px;border-radius:9px;background:var(--surface-2);border:1px solid transparent;min-width:0}
.ssrc span{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--text-muted);text-transform:uppercase;white-space:nowrap}
.ssrc-why{font-style:normal;font-size:9.5px;color:var(--text-muted);line-height:1.1;text-align:center}
.ssrc b{font-size:15px;font-variant-numeric:tabular-nums}
.ssrc.win{border-color:var(--good);background:color-mix(in srgb,var(--good) 10%,var(--surface-2))}
.ssrc.win b{color:var(--good-text)}
.ssrc.na b{color:var(--text-muted);font-weight:500}
.ssrc.avg{background:var(--surface-3)}
.sstrip{display:grid;gap:8px;padding-top:10px;border-top:1px solid var(--border)}
.sstat{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;padding:2px 9px;border-radius:99px;border:1px solid var(--border);color:var(--text-secondary);cursor:help}
.sstat i{font-style:normal;font-size:10px}
.sstat.ok{color:var(--good-text);border-color:var(--good)}
.sstat.fail{color:var(--bad-text);border-color:var(--critical)}
.sstat.loading{color:var(--text-muted)}
.sstat.off,.sstat.idle{color:var(--text-muted);border-style:dashed}
@media (max-width:620px){
  .ssgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ssc{padding:10px}
  .ssc-nm{font-size:13px}
  .sspc-src{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sspc-pct b{font-size:22px}
}
@media (max-width:339px){ .ssgrid{grid-template-columns:minmax(0,1fr)} }
@media (prefers-reduced-motion:reduce){ .ssp{animation:none} .ssc{transition:none} }


/* ---- start / sit options: float over the page instead of pushing the lineup down ---- */
.ssdrawer-back{position:fixed;inset:0;z-index:90;background:rgba(5,7,12,.5);animation:fade .18s ease both}
.ssdrawer{position:fixed;z-index:91;top:0;right:0;bottom:0;width:min(480px,100vw);overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface-1);border-left:1px solid var(--border-strong);box-shadow:var(--shadow-lg);padding:18px 18px 28px;
  animation:slidein .24s var(--ease) both}
.ssdrawer .grab{display:none}
.ssdrawer-x{position:absolute;top:12px;right:12px;z-index:1}
.ssdrawer .ssp{padding:0;border:0;background:none;animation:none;padding-right:44px}
.ssdrawer .ssp-hd{flex-direction:column;gap:4px}
@keyframes slidein{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (max-width:760px){
  .ssdrawer{top:auto;left:0;right:0;width:auto;max-height:86vh;max-height:86dvh;border-left:0;border-top:1px solid var(--border-strong);
    border-radius:var(--r) var(--r) 0 0;padding-bottom:calc(28px + env(safe-area-inset-bottom));animation:sheetup .26s var(--ease) both}
  .ssdrawer .grab{display:block;width:40px;height:4px;border-radius:99px;background:var(--axis);margin:0 auto 12px}
  .ssdrawer .ssp{padding-right:0}
  .ssdrawer .ssp-hd{padding-right:44px}
}
@keyframes sheetup{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){ .ssdrawer,.ssdrawer-back{animation:none} }
.sspc-pct{flex:none;max-width:44%;text-align:right}
.sspc-pct span{display:block;line-height:1.25}