/* profile-client.css - the profile on /account (profile-client.js).
   Tokens only, so the page's palette carries in. 44px targets, 12px floor,
   [hidden] rules beside every display value (a display on a class beats the UA
   [hidden]{display:none}, the trap this repo keeps recording). */

/* ---------- hero: banner, avatar over its edge, name under it ---------- */
.pf-hero{position:relative;margin-top:6px;border:1px solid var(--line);border-radius:var(--r-lg,16px);background:var(--panel);overflow:hidden}
.pf-ban{height:clamp(120px,24vw,190px);background:
  radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--blue,#c8ff62) 26%,transparent),transparent 60%),
  radial-gradient(90% 120% at 100% 100%,color-mix(in srgb,var(--blue,#c8ff62) 12%,transparent),transparent 60%),
  #141414;background-size:cover;background-repeat:no-repeat}
.pf-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 clamp(16px,3vw,26px);margin-top:-52px}
.pf-av{width:104px;height:104px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  border:4px solid var(--panel);background:var(--panel-hi);font:800 36px/1 var(--disp);color:#0a0a0a;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--blue,#c8ff62) 70%,transparent)}
.pf-av.has-pic{background-color:#161616}
.pf-editbtn{margin-bottom:6px}
.pf-editbtn[hidden]{display:none}
.pf-body{padding:10px clamp(16px,3vw,26px) clamp(18px,3vw,24px)}
.pf-name{font:800 clamp(26px,4.4vw,36px)/1.1 var(--disp);letter-spacing:-.02em;margin:0;color:var(--ink);overflow-wrap:anywhere}
.pf-tag{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.pf-tag[hidden]{display:none}
.pf-meta{margin:6px 0 0;font-size:13.5px;color:var(--ink2)}
.pf-stats{display:flex;gap:22px;flex-wrap:wrap;list-style:none;margin:14px 0 0;padding:0}
.pf-stats li[hidden]{display:none}
.pf-stats b{display:block;font:700 19px/1.2 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.pf-stats span{font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.pf-games{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:16px 0 0;padding:0}
.pf-games[hidden]{display:none}
.pf-gb{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px 0 4px;border:1px solid var(--line2);border-radius:999px;background:var(--panel2);font-size:13px;color:var(--ink)}
.pf-gb-art{width:24px;height:24px;border-radius:50%;background-size:cover;background-position:50% 30%}

/* ---------- customize ---------- */
.pf-wrap[hidden],.pf-edit[hidden]{display:none}
.pf-edit h3{font:700 16px/1.3 var(--disp);margin:0 0 4px;color:var(--ink)}
.pf-er{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line)}
.pf-er:first-of-type{border-top:0}
.pf-er p{margin:0;font-size:14px;color:var(--ink2)}
.pf-er.col{display:block}
.pf-er.col label{display:block;font:700 16px/1.3 var(--disp);color:var(--ink);margin:0 0 8px}
.pf-er.col .f-row{flex-wrap:nowrap}
.pf-er.col input{flex:1 1 auto;min-width:0;height:46px;padding:0 13px;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;color:var(--ink);font:400 16px/1 var(--body)}
.pf-er.col input:focus{border-color:var(--blue2)}
.pf-er .hint{display:block;margin:6px 0 0;font-size:12.5px;color:var(--ink2);line-height:1.5}
.pf-gts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:10px;margin-top:10px}
.pf-gt{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:44px;padding:0;border:1px solid var(--line2);border-radius:12px;background:var(--panel2);cursor:pointer;overflow:hidden;color:var(--ink);text-align:left}
.pf-gt-art{display:block;height:64px;background-size:cover;background-position:50% 30%;filter:saturate(.55) brightness(.6);transition:filter .15s}
.pf-gt-name{padding:9px 12px;font:600 13.5px/1.3 var(--body)}
.pf-gt-tick{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:rgba(10,10,10,.55)}
.pf-gt[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}
.pf-gt[aria-pressed="true"] .pf-gt-art{filter:none}
.pf-gt[aria-pressed="true"] .pf-gt-tick{border-color:var(--blue);background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230a0a0a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.pf-gt:hover .pf-gt-art{filter:saturate(.9) brightness(.85)}

/* ---------- your mains: one row per game ---------- */
.pf-mains-s[hidden]{display:none}
.pf-mains{display:grid;gap:10px}
.pf-mr{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:12px 16px;padding:10px 14px 10px 10px;border:1px solid var(--line);border-radius:var(--r-lg,16px);background:var(--panel)}
.pf-mr.has{border-color:var(--line2)}
.pf-mr-art{width:96px;height:54px;border-radius:10px;background-size:cover;background-position:50% 30%;filter:saturate(.6) brightness(.7)}
.pf-mr.has .pf-mr-art{filter:none}
.pf-mr-main{min-width:0}
.pf-mr-g{margin:0 0 6px;font:700 15px/1.3 var(--disp);color:var(--ink)}
.pf-mr-g a{color:inherit;text-decoration:none}
.pf-mr-g a:hover{text-decoration:underline}
.pf-mr .pf-slot-v:empty{display:none}
.pf-mr .pf-add.pri{border-color:var(--blue);color:var(--blue2)}
.pf-mr .pf-add.pri:hover{background:color-mix(in srgb,var(--blue) 12%,transparent)}
@media(max-width:560px){
  .pf-mr{grid-template-columns:64px 1fr;padding:10px}
  .pf-mr-art{width:64px;height:64px}
  .pf-mr .pf-add{grid-column:1 / -1;width:100%}
}

/* ---------- showcase ---------- */
.pf-empty{padding:18px;border:1px dashed var(--line2);border-radius:var(--r-lg,16px);background:var(--panel)}
.pf-empty[hidden]{display:none}
.pf-empty p{margin:0 0 14px;color:var(--ink2);font-size:15px;line-height:1.55}
.pf-show{display:grid;gap:14px}
.pf-sc{border:1px solid var(--line);border-radius:var(--r-lg,16px);background:var(--panel);overflow:hidden}
.pf-sc-h{padding:16px clamp(16px,3vw,22px);background-size:cover;background-position:50% 30%}
.pf-sc-h h3{margin:0;font:800 20px/1.2 var(--disp)}
.pf-sc-h a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.pf-sc-h a:hover{text-decoration:underline}
.pf-sc-b{padding:4px clamp(16px,3vw,22px) 10px}
.pf-slot{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:10px 14px;padding:12px 0;border-top:1px solid var(--line)}
.pf-slot:first-child{border-top:0}
.pf-slot-l{font:600 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.pf-slot-v{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;min-width:0}
.pf-it{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:4px 12px 4px 4px;border:1px solid var(--line2);border-radius:12px;background:var(--panel2);font-size:14px;color:var(--ink);min-width:0}
.pf-it-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.pf-ic{width:36px;height:36px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;overflow:hidden;background:var(--panel-hi);
  font:700 13px/1 var(--mono);color:var(--ink)}
.pf-ic.has-pic{background-color:#161616}
.pf-add{min-height:44px;min-width:64px;padding:0 14px;border:1px solid var(--line3);border-radius:10px;background:none;color:var(--ink);cursor:pointer;font:600 14px/1 var(--body)}
.pf-add:hover{border-color:var(--blue2);color:var(--blue2)}
@media(max-width:560px){
  .pf-slot{grid-template-columns:1fr auto}
  .pf-slot-l{grid-column:1 / -1}
  .pf-slot-v{grid-column:1 / 2}
  .pf-row{margin-top:-44px}
  .pf-av{width:88px;height:88px;font-size:30px}
}

/* ---------- picker dialog ---------- */
html.pf-lock{overflow:hidden}
.pf-dlg{margin:auto;inset:0;width:min(760px,calc(100vw - 24px));max-height:88vh;max-height:88dvh;padding:0;border:1px solid var(--line2);border-radius:18px;background:var(--panel);color:var(--ink)}
.pf-dlg::backdrop{background:rgba(0,0,0,.72)}
.pf-dlg[open]{display:flex}
.pf-dlg-in{display:flex;flex-direction:column;width:100%;max-height:88vh;max-height:88dvh;min-height:0}
/* Everything but the grid keeps its height; the grid scrolls. */
.pf-dlg-in>*{flex-shrink:0}
.pf-dlg-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 0}
.pf-dlg-top h2{margin:0;font:800 20px/1.25 var(--disp)}
.pf-x{width:44px;height:44px;flex:0 0 auto;border:0;border-radius:10px;background:none;color:var(--ink2);cursor:pointer;display:grid;place-items:center}
.pf-x:hover{color:var(--ink);background:var(--panel-hi)}
.pf-dlg-sub{margin:4px 18px 0;font-size:14px;line-height:1.5;color:var(--ink2)}
.pf-tabs{display:flex;gap:6px;overflow-x:auto;padding:12px 18px 0;scrollbar-width:none}
.pf-tabs[hidden]{display:none}
.pf-tab{flex:0 0 auto;min-height:40px;padding:0 14px;border:1px solid var(--line2);border-radius:999px;background:none;color:var(--ink2);cursor:pointer;font:600 13.5px/1 var(--body)}
.pf-tab[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--accent-ink,#0a0a0a)}
.pf-q{margin:12px 18px 0;height:46px;padding:0 13px;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;color:var(--ink);font:400 16px/1 var(--body)}
.pf-q:focus{border-color:var(--blue2)}
.pf-dlg-in>.pf-grid{flex:1 1 auto;flex-shrink:1;min-height:120px}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));grid-auto-rows:max-content;align-content:start;gap:10px;padding:14px 18px;overflow-y:auto}
.pf-tile{display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 8px;min-height:44px;border:1px solid var(--line2);border-radius:12px;background:var(--panel2);color:var(--ink);cursor:pointer;text-align:center}
.pf-tile .pf-ic{width:64px;height:64px;border-radius:12px;font-size:18px}
.pf-tile.wide .pf-ic{width:100%;height:auto;aspect-ratio:16/9}
.pf-tile.wide{grid-column:span 2}
.pf-tn{font:600 13px/1.25 var(--body);overflow-wrap:anywhere}
.pf-tg{font-size:12px;color:var(--ink2)}
.pf-tile:hover{border-color:var(--line3)}
.pf-tile[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue) inset;background:color-mix(in srgb,var(--blue) 8%,var(--panel2))}
.pf-none{grid-column:1 / -1;margin:8px 0;color:var(--ink2)}
.pf-dlg .msg{margin:0 18px 10px}
.pf-dlg-foot{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding:12px 18px 16px;border-top:1px solid var(--line)}
.pf-dlg-foot span{margin-right:auto;font-size:13.5px;color:var(--ink2)}
.pf-dlg-foot .btn[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.pf-gt-art{transition:none}}

/* Premium (2026-09-30): lime star pill beside the name, a lime ring on the
   picture, and the "premium since" stat in the accent. #0a0a0a on #c8ff62 is 17:1. */
.pf-name{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.pf-prem{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:var(--blue,#c8ff62);color:#0a0a0a;font:700 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.pf-prem[hidden]{display:none}
.pf-hero.is-prem .pf-av{box-shadow:0 0 0 3px var(--blue,#c8ff62),0 0 18px color-mix(in srgb,var(--blue,#c8ff62) 45%,transparent)}
.pf-stats .pf-stat-prem b{color:var(--blue,#c8ff62)}
/* Badges and points (2026-10-01, worker pn-score.js). */
.pf-badges{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:14px 0 0;padding:0}
.pf-badges[hidden]{display:none}
.pf-badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font:700 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;border:1px solid var(--line3);color:var(--ink)}
.pf-badge.rk1{background:var(--blue,#c8ff62);border-color:var(--blue,#c8ff62);color:#0a0a0a}
.pf-badge.ms{border-color:var(--blue,#c8ff62);color:var(--blue,#c8ff62)}
.pts-next{margin:4px 0 16px}
.pts-next[hidden]{display:none}
.pts-bar{height:8px;border-radius:999px;background:var(--panel-hi,#1f1f1f);overflow:hidden}
.pts-bar i{display:block;height:100%;background:var(--blue,#c8ff62);border-radius:999px}
.pts-next p{margin:8px 0 0;font-size:14px;color:var(--ink2)}
.pts-list{list-style:none;margin:0;padding:0}
.pts-list li{display:grid;grid-template-columns:1fr auto 4.5em;gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line)}
.pts-list li:first-child{border-top:0}
.pts-k{color:var(--ink)}
.pts-n{font:400 13px/1 var(--mono);color:var(--ink2);font-variant-numeric:tabular-nums}
.pts-v{text-align:right;font:700 15px/1 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.pts-h3{font:700 16px/1.3 var(--disp);margin:22px 0 10px}
.pts-h3[hidden]{display:none}
.pts-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.pts-col h4{margin:0 0 6px;font:700 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.pts-col ol{list-style:none;margin:0;padding:0}
.pts-col li{display:grid;grid-template-columns:2.2em 1fr auto;gap:6px;padding:4px 0;font-size:14px}
.pts-col li.me .pts-nm{color:var(--blue,#c8ff62);font-weight:700}
.pts-r{font:700 13px/1.4 var(--mono);color:var(--ink2)}
.pts-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.pts-c{font:400 13px/1.4 var(--mono);color:var(--ink2);font-variant-numeric:tabular-nums}