/* tiers.css - upgrade sheet, likers list, Premium tab, tier cards.
   Rollback: remove the <link> to this file. */

/* lock tag shown next to locked filters */
.lkn{display:inline-flex;align-items:center;gap:4px;margin-left:8px;color:var(--t3);font-size:12px;letter-spacing:.6px}
.lkn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chip.lk .lkn{margin-left:6px}

/* the sheet used for upgrade prompts and the likers list */
.ts-back{position:fixed;inset:0;z-index:1200;display:flex;align-items:flex-end;justify-content:center;background:rgba(4,6,16,.72)}
.ts{width:100%;max-width:460px;max-height:86vh;overflow-y:auto;background:var(--s2);border-top:3px solid var(--acc);padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px));animation:tsUp .25s ease-out}
@keyframes tsUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media(min-width:600px){.ts-back{align-items:center}}
@media(prefers-reduced-motion:reduce){.ts{animation:none}}
.ts-ic{width:44px;height:44px;display:grid;place-items:center;background:var(--s3);color:var(--acc);margin-bottom:12px}
.ts-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ts-t{font-size:26px;line-height:1.1;margin:0}
.ts-p{margin:8px 0 12px}
.ts-pr{font-family:"Barlow Condensed","Noto Sans Thai",sans-serif;font-size:22px;font-weight:700;margin:0 0 14px}
.ts-btns{display:grid;gap:10px;margin-top:14px}

/* players who like you */
.lk-list{margin-top:8px}
.lk-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.lk-row .grow{flex:1;min-width:0}
.lkb{cursor:pointer}
.lkb a{white-space:nowrap}
.lkb-av{display:flex;align-items:center}
.lkb-av>*{margin-left:-8px;border:2px solid var(--bg)}
.lkb-av>*:first-child{margin-left:0}
.lkb-av .av{width:32px;height:32px;font-size:14px;flex:none}
.lk-ph{width:32px;height:32px;flex:none;border-radius:50%;background:var(--s3);color:var(--t3);display:grid;place-items:center}
.lk-ph svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Premium tab and tier cards */
.pm-now{margin-top:14px}
.pm-seg{display:inline-flex;background:var(--s2);margin:16px 0}
.pm-seg button{border:0;background:transparent;color:var(--t2);padding:8px 16px;font-family:"Barlow Condensed","Noto Sans Thai",sans-serif;font-weight:700;font-size:15px;letter-spacing:1px;text-transform:uppercase;cursor:pointer}
.pm-seg button.on{background:var(--t1);color:var(--bg)}
.pm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:6px 0 4px}
.pm-card{position:relative;display:flex;flex-direction:column;background:var(--s1);border-top:3px solid var(--line);padding:18px 16px 16px;clip-path:var(--cut)}
.pm-card h3{font-size:20px}
.pm-card.cur{box-shadow:inset 0 0 0 2px var(--acc)}
.pm-signature{border-top-color:#B8C0D6}
.pm-reserve{border-top-color:#E5B94E}
.pm-black{border-top-color:#F7F7FA;background:#05070F}
.pm-rib{position:absolute;top:10px;right:12px;background:var(--acc);color:var(--bg);font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:3px 8px}
.pm-price{font-family:"Barlow Condensed","Noto Sans Thai",sans-serif;font-size:40px;font-weight:800;line-height:1.1;margin:8px 0 2px}
.pm-price small{font-size:14px;color:var(--t2);font-weight:500}
.pm-sub{font-size:13px;color:var(--t2)}
.pm-list{list-style:none;padding:0;margin:12px 0 16px;font-size:14px;flex:1}
.pm-list li{padding:4px 0}
.pm-list li.y{color:var(--t1)}
.pm-list li.n{color:var(--t3)}
.pm-card .btn{margin-top:auto}
.pm-list li::before{display:inline-block;width:1.3em}
.pm-list li.y::before{content:"\2713";color:var(--ok)}
.pm-list li.n::before{content:"\2014"}