/* Profile cosmetics, profile page only (docs/COSMETICS.md): the header with banner and
   framed avatar (profile/show.php) and the Customize window (profile/_customize.php,
   assets/js/cosmetics.js). Loads after app.css, bridge.css and cosmetics.css, and only
   once the cosmetics tables exist. Everything is scoped: .pfx (header), .cz (window).
   Approved concept: public/__preview/cosmetics/final/. */

/* ------------------------------------------------------------------ tiers
   Tiers are metals, never the card rarity words or colours. --tc text, --tg dot or
   bar, --tglow the soft light behind a tile. */
.cz-t-default{--tc:#9a9ca2;--tg:#3a3c42;--tglow:rgba(255,255,255,.05)}
.cz-t-bronze{--tc:#D89A5F;--tg:linear-gradient(180deg,#F6CFA4,#D9964F);--tglow:rgba(216,154,95,.22)}
.cz-t-silver{--tc:#C3C9D4;--tg:linear-gradient(180deg,#F4F6FA,#AEB6C2);--tglow:rgba(195,201,212,.2)}
.cz-t-gold{--tc:#F0BC3C;--tg:linear-gradient(180deg,#FFE9A8,#F0BC3C);--tglow:rgba(240,188,60,.24)}
.cz-t-prism{--tc:#D9F2EE;--tg:linear-gradient(100deg,#6FE7FF,#A2F6CF 35%,#FFE27A 65%,#B9A8FF);--tglow:rgba(162,246,207,.16)}
.cz-t-exclusive{--tc:#EBD9A6;--tg:linear-gradient(180deg,#2c271d,#0b0a08);--tglow:rgba(240,188,60,.18)}

/* ------------------------------------------------------------------ small parts */
.cz-ic{width:1em;height:1em;display:inline-block;vertical-align:-.12em;flex:0 0 auto}
.cz-pt{display:inline-flex;align-items:center;gap:5px;font-family:var(--g-cond);font-weight:700;letter-spacing:.4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cz-pt .cz-ic{color:#FFC629}
.cz-tchip{display:inline-flex;align-items:center;gap:6px;font-family:var(--g-cond);font-weight:700;font-size:.74rem;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--tc);white-space:nowrap}
.cz-tchip i{width:9px;height:9px;border-radius:50%;background:var(--tg);box-shadow:0 0 0 1.5px rgba(0,0,0,.6),0 0 8px var(--tglow,transparent);flex:0 0 auto}
.cz-tchip.cz-t-exclusive i{border-radius:2px;transform:rotate(45deg);width:8px;height:8px;background:#0b0a08;box-shadow:0 0 0 1.5px #F0BC3C}
.cz-badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--g-cond);font-weight:700;font-size:.7rem;letter-spacing:1.4px;
  text-transform:uppercase;padding:3px 8px;border-radius:99px;white-space:nowrap;line-height:1.1}
.cz-badge .cz-ic{width:11px;height:11px}
.cz-badge.is-new{background:linear-gradient(180deg,#FFE27A,#F6B81F);color:#161206}
.cz-badge.is-ev{background:rgba(240,188,60,.1);color:#EBD9A6;border:1px solid rgba(240,188,60,.45)}
.cz-badge.is-ends{background:rgba(10,10,10,.78);color:#d7dbe2;border:1px solid #4a4d55}
.cz-badge.is-ends .cz-ic{color:#C3C9D4}

/* ------------------------------------------------------------------ profile header */
.pfx{position:relative;margin:0 0 0}
.pfx-banner{position:relative;aspect-ratio:5/1;border-radius:18px 18px 0 0;border:1px solid var(--g-line);border-bottom:0;overflow:hidden;
  /* Shown when no banner exists at all: the Gotya black with a warm light. */
  background:radial-gradient(70% 140% at 78% 0%,rgba(255,198,41,.16),transparent 60%),linear-gradient(180deg,#141310,#0A0A0A)}
.pfx-banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.pfx-banner::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,10,0) 60%,rgba(10,10,10,.55))}
.pfx-owner{position:absolute;top:16px;right:16px;z-index:2;display:flex;align-items:center;gap:8px}
.pfx-pts{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:11px;background:rgba(10,10,10,.72);
  border:1px solid rgba(255,198,41,.4);color:var(--g-mut);font-size:.82rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap}
.pfx-pts .cz-pt{color:#FFC629;font-size:1.05rem}
.pfx-customize{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:11px;border:0;cursor:pointer;
  background:linear-gradient(180deg,#FFE27A,#F6B81F);color:#161206;font-family:var(--g-cond);font-weight:700;font-size:1rem;letter-spacing:1.4px;
  text-transform:uppercase;box-shadow:0 10px 26px -8px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.35)}
.pfx-customize .cz-ic{width:17px;height:17px}
.pfx-customize:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Desktop: name and chips, stats under them, actions on the right. */
.pfx-bar{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id side" "stats stats";column-gap:22px;
  padding:16px 26px 22px 214px;min-height:118px;background:linear-gradient(180deg,#111214,#0e0f11);border:1px solid var(--g-line);border-top:0;border-radius:0 0 18px 18px}
.pfx-ava{position:absolute;left:40px;top:-74px;z-index:3;display:flex;filter:drop-shadow(0 12px 18px rgba(0,0,0,.6))}
.pfx-avatar{width:132px;height:132px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  font-family:var(--g-cond);font-weight:700;font-size:3.4rem;line-height:1}
/* Without a frame the avatar gets a ring in the panel colour, so it lifts off the banner. */
.pfx-ava > .pfx-avatar{box-shadow:0 0 0 4px #111214}
/* A visitor's framed avatar is a button: it opens what the frame is, like its chip. */
button.pfx-ava{padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;border-radius:50%}
button.pfx-ava:focus-visible{outline:2px solid #FFC629;outline-offset:8px}
.pfx-id{grid-area:id;min-width:0;padding-top:2px}
.pfx-id h1{margin:0;font-family:var(--g-cond);font-weight:700;font-size:2.3rem;line-height:1;letter-spacing:.4px;word-break:break-word}
.pfx-equip{position:relative;display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:9px;color:var(--g-mut);font-size:.86rem}
.pfx-equip:empty{display:none}
.pfx-chipwrap{display:inline-flex}
.pfx-chipbtn{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.03);border:1px solid #2a2b30;border-radius:99px;padding:3px 10px 3px 8px;
  color:var(--g-mut);font:inherit;cursor:pointer;max-width:100%}
.pfx-chipbtn b{color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfx-chipbtn:hover,.pfx-chipbtn[aria-expanded="true"]{border-color:#4a4c53;background:rgba(255,255,255,.06)}
.pfx-side{grid-area:side;align-self:start;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.pfx-stats{grid-area:stats;display:flex;margin-top:16px;border:1px solid var(--g-line);border-radius:12px;background:#0b0c0e;width:max-content;max-width:100%}
.pfx-stat{padding:9px 18px;border-left:1px solid var(--g-line);min-width:0}
.pfx-stat:first-child{border-left:0}
.pfx-stat b{display:block;font-family:var(--g-cond);font-weight:700;font-size:1.25rem;letter-spacing:.3px;font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfx-stat span{display:block;font-family:var(--g-cond);font-weight:700;font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--g-mut2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfx-stat.is-gold b{color:#FFC629}
.pfx + .pf-tabs{margin-top:18px}

/* What a visitor's chip opens: what the item is and how to get it. */
.pfx-pop{position:absolute;z-index:20;top:calc(100% + 10px);left:0;width:300px;max-width:calc(100vw - 32px);background:#15161a;border:1px solid #33353a;
  border-radius:14px;padding:14px 16px;box-shadow:0 24px 60px -16px rgba(0,0,0,.9)}
.pfx-pop::before{content:"";position:absolute;top:-7px;left:26px;width:12px;height:12px;background:#15161a;border-left:1px solid #33353a;border-top:1px solid #33353a;transform:rotate(45deg)}
.pfx-pop[hidden]{display:none}
.pfx-pop-h{display:flex;align-items:center;gap:12px}
.pfx-pop-h > div{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.pfx-pop-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-family:var(--g-cond);font-weight:700;font-size:1.05rem;margin:6px}
.pfx-pop-bn{width:84px;height:40px;border-radius:8px;overflow:hidden;flex:0 0 auto;border:1px solid #33353a;background:#0A0A0A}
.pfx-pop-bn img{width:100%;height:100%;object-fit:cover;display:block}
.pfx-pop h4{flex-basis:100%;margin:2px 0 0;font-family:var(--g-cond);font-weight:700;font-size:1.25rem;text-transform:uppercase;letter-spacing:.4px;line-height:1;color:#fff}
.pfx-pop p{margin:10px 0;font-size:.86rem;color:var(--g-mut);line-height:1.4}
.pfx-pop p b{color:#fff;font-weight:600}
.pfx-pop a{font-family:var(--g-cond);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#FFC629;font-size:.86rem}

@media (max-width:860px){
  .pfx-bar{padding-left:190px}
  .pfx-ava{left:28px}
  .pfx-stat{padding:9px 12px}
}

/* Phone: the banner runs edge to edge under the top bar, the avatar (96) sits on its
   edge, actions as a row of two, stats as three columns. */
@media (max-width:640px){
  .pfx{margin:-18px -16px 0}
  .pfx-banner{aspect-ratio:auto;height:132px;border-radius:0;border:0}
  .pfx-banner-img{object-position:72% center}
  .pfx-owner{top:10px;right:12px;gap:6px}
  /* One owner button fits a phone banner; the balance lives in the Customize sheet. */
  .pfx-pts{display:none}
  .pfx-customize{height:32px;padding:0 12px;font-size:.86rem;gap:6px;border-radius:10px}
  .pfx-customize .cz-ic{width:14px;height:14px}
  .pfx-bar{grid-template-columns:minmax(0,1fr);grid-template-areas:"id" "side" "stats";padding:12px 16px 18px;min-height:0;border-radius:0;border-width:0 0 1px}
  /* avatar 96, frame 137: left 38 keeps the frame and its glow inside the 16px gutter */
  .pfx-ava{left:38px;top:-50px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.6))}
  .pfx-avatar{width:96px;height:96px;font-size:2.5rem}
  .pfx-id{margin-left:136px;min-height:60px}
  .pfx-id h1{font-size:1.8rem}
  .pfx-equip{flex-direction:column;align-items:flex-start;gap:4px;margin-top:7px;font-size:.78rem}
  .pfx-chipbtn{padding:2px 8px 2px 6px;gap:5px}
  .pfx-equip .cz-tchip{font-size:.62rem;letter-spacing:.9px;gap:5px}
  .pfx-side{align-items:stretch}
  .pfx-side .pf-actions{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;margin-top:16px}
  .pfx-side .pf-actions .btn{width:100%;justify-content:center}
  .pfx-stats{display:grid;grid-template-columns:.8fr 1.25fr 1.1fr;width:auto;margin-top:12px;overflow:hidden}
  .pfx-stat{padding:9px 12px}
  .pfx-stat span{font-size:.62rem;letter-spacing:1.1px}
  .pfx + .pf-tabs{margin-top:6px}
  /* the "what is it" card becomes a small sheet at the bottom of the screen */
  .pfx-pop{position:fixed;top:auto;bottom:16px;left:16px;right:16px;width:auto;max-width:none;z-index:120}
  .pfx-pop::before{display:none}
}

/* ------------------------------------------------------------------ customize window */
html.cz-lock,html.cz-lock body{overflow:hidden}
.cz-overlay{position:fixed;inset:0;z-index:300;background:rgba(5,5,6,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:24px;animation:czFade .18s ease}
.cz-overlay[hidden]{display:none}
@keyframes czFade{from{opacity:0}}
@keyframes czUp{from{transform:translateY(40px);opacity:.4}}
.cz{width:1080px;max-width:100%;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;background:#111214;
  border:1px solid #33353a;border-radius:18px;color:#fff;overflow:hidden;position:relative;outline:0;
  box-shadow:0 50px 120px -30px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.6)}
.cz-grab{display:none}
.cz-head{display:flex;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid #26272b;flex:0 0 auto;
  background:radial-gradient(500px 120px at 0% 0%,rgba(255,198,41,.10),transparent 70%),#131417}
.cz-head-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,198,41,.08);border:1px solid rgba(255,198,41,.25);color:#FFC629;flex:0 0 auto}
.cz-head-ic .cz-ic{width:21px;height:21px}
.cz-title{margin:0;font-family:var(--g-cond);font-weight:700;text-transform:uppercase;font-size:1.65rem;letter-spacing:.6px;line-height:1}
.cz-sub{color:var(--g-mut);font-size:.86rem;margin-top:5px}
.cz-points{margin-left:auto;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:14px;flex:0 0 auto;
  background:rgba(255,198,41,.07);border:1px solid rgba(255,198,41,.32);border-radius:12px;padding:6px 14px}
.cz-points small{grid-column:1;font-family:var(--g-cond);font-weight:700;font-size:.66rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--g-mut2)}
.cz-points .cz-pt{grid-column:1;font-size:1.32rem;color:#FFC629}
.cz-earnlink{grid-column:2;grid-row:1/3;font-family:var(--g-cond);font-weight:700;font-size:.8rem;letter-spacing:1.1px;text-transform:uppercase;color:#FFC629;
  border-left:1px solid rgba(255,198,41,.25);padding-left:14px;line-height:1.2;max-width:104px}
.cz-points.bump{animation:czBump .7s ease}
@keyframes czBump{30%{box-shadow:0 0 0 4px rgba(255,198,41,.25)}}
.cz-x{width:38px;height:38px;border-radius:11px;border:1px solid #33353a;background:transparent;color:var(--g-mut);font-size:1.3rem;cursor:pointer;line-height:1;flex:0 0 auto}
.cz-x:hover{color:#FFC629;border-color:#FFC629}
/* The side column (preview, the selected item and its buttons) and the grid scroll on
   their own, so Unlock, Confirm and Equip never sit below the fold of a short laptop
   screen while the grid is scrolled. */
.cz-body{display:grid;grid-template-columns:332px minmax(0,1fr);grid-template-rows:minmax(0,1fr);flex:1 1 auto;min-height:0;overflow:hidden}
.cz-side{background:#0d0e10;border-right:1px solid #26272b;padding:18px;display:flex;flex-direction:column;gap:14px;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.cz-side > *{flex:0 0 auto}
.cz-main{padding:16px 20px 20px;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain}
.cz-lbl{font-family:var(--g-cond);font-weight:700;font-size:.72rem;letter-spacing:1.8px;text-transform:uppercase;color:var(--g-mut2)}

/* the player's own avatar, sized by --s (a .gf-ava wraps it when a frame is on) */
.cz-av{--s:40px;width:var(--s);height:var(--s);border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  font-family:var(--g-cond);font-weight:700;font-size:calc(var(--s) * .44);line-height:1;background:#17181d;color:#fff}

/* live preview */
.cz-prev{border:1px solid #26272b;border-radius:14px;overflow:hidden;background:#111214}
.cz-prev-banner{height:104px;position:relative;overflow:hidden;
  background:radial-gradient(70% 140% at 78% 0%,rgba(255,198,41,.16),transparent 60%),linear-gradient(180deg,#141310,#0A0A0A)}
.cz-prev-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center;display:block}
.cz-prev-bar{position:relative;height:50px;padding:12px 14px 0 112px}
.cz-prev-ava{position:absolute;left:18px;top:-44px;z-index:2;display:flex}
.cz-prev-name{font-family:var(--g-cond);font-weight:700;font-size:1.3rem;letter-spacing:.3px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cz-prev-what{font-size:.78rem;color:var(--g-mut);padding:6px 14px 12px;line-height:1.4;border-top:1px solid #1d1e22}
.cz-prev-what b{color:#e8e8e8;font-weight:600}
.cz-reset{background:none;border:0;padding:0;margin-left:4px;color:#FFC629;font:700 .74rem var(--g-cond);letter-spacing:1px;text-transform:uppercase;cursor:pointer}
.cz-prev-tag{position:absolute;top:8px;left:8px;z-index:2;font-family:var(--g-cond);font-weight:700;font-size:.66rem;letter-spacing:1.6px;text-transform:uppercase;
  background:rgba(10,10,10,.72);border:1px solid #33353a;color:#fff;padding:3px 8px;border-radius:99px}
.cz-prev-tag.is-pv{border-color:rgba(255,198,41,.6);color:#FFC629}
.cz-sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cz-size{background:#111214;border:1px solid #26272b;border-radius:11px;padding:10px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.cz-size-row{display:flex;align-items:center;gap:7px;height:44px;min-width:0;max-width:100%}
.cz-size-row b{font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cz-size .cap{font-size:.7rem;color:var(--g-mut2);white-space:nowrap}

/* detail */
.cz-detail{background:#111214;border:1px solid #26272b;border-radius:14px;padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.cz-d-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cz-d-name{font-family:var(--g-cond);font-weight:700;font-size:1.55rem;text-transform:uppercase;letter-spacing:.4px;line-height:1;margin:0}
.cz-d-desc{font-size:.86rem;color:var(--g-mut);margin:0;line-height:1.4}
.cz-rows{display:flex;flex-direction:column;gap:6px;border-top:1px solid #26272b;padding-top:10px}
.cz-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.86rem;color:var(--g-mut)}
.cz-row .cz-pt{font-size:1.05rem;color:#fff}
.cz-row.is-after .cz-pt{color:#FFC629}
.cz-row.is-short .cz-pt{color:#c9ccd2}
.cz-row.is-short .cz-pt .cz-ic{color:#8a8d94}
.cz-row b{color:#fff;font-weight:600}
.cz-meter{height:6px;border-radius:99px;background:#26272b;overflow:hidden}
.cz-meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#7c8089,#c3c9d4)}
.cz-meter.is-earn i{background:linear-gradient(90deg,#8A5A06,#F0BC3C)}
.cz-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px 16px;white-space:nowrap;min-width:0;border-radius:11px;border:0;cursor:pointer;
  font-family:var(--g-cond);font-weight:700;font-size:1.05rem;letter-spacing:1.4px;text-transform:uppercase;text-decoration:none;
  background:linear-gradient(180deg,#FFE27A,#F6B81F);color:#161206;box-shadow:0 10px 26px -12px rgba(255,198,41,.6)}
.cz-btn .cz-ic{width:16px;height:16px}
.cz-btn.is-ghost{background:transparent;color:var(--g-mut);border:1px solid #33353a;box-shadow:none}
.cz-btn.is-ghost:hover{color:#FFC629;border-color:#FFC629}
.cz-btn[disabled]{background:#1d1e23;color:#9a9ca2;box-shadow:none;cursor:not-allowed;border:1px solid #33353a}
.cz-btn.is-busy{opacity:.7;cursor:progress}
.cz-btns{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px}
.cz-btns .cz-btn.is-ghost{padding:13px 14px}
.cz-state{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--g-mut)}
.cz-state b{color:#fff;font-weight:600}
.cz-state.is-ok{color:#4cd07f}
.cz-state .cz-ic{width:16px;height:16px;flex:0 0 auto}
.cz-keep{display:flex;align-items:flex-start;gap:8px;font-size:.84rem;color:#d7dbe2;background:#15161a;border:1px solid #2a2b30;border-radius:10px;padding:8px 10px;line-height:1.35}
.cz-keep .cz-ic{width:15px;height:15px;color:#C3C9D4;flex:0 0 auto;margin-top:1px}
.cz-how{background:linear-gradient(180deg,rgba(240,188,60,.07),rgba(240,188,60,.02));border:1px solid rgba(240,188,60,.28);border-radius:11px;padding:11px 12px;
  display:flex;flex-direction:column;gap:6px}
.cz-how h5{margin:0;display:flex;align-items:center;gap:7px;font-family:var(--g-cond);font-weight:700;font-size:.82rem;letter-spacing:1.6px;text-transform:uppercase;color:#F0BC3C}
.cz-how p{margin:0;font-size:.85rem;color:#e6e6e6;line-height:1.4}
.cz-how .cz-row{font-size:.82rem}
.cz-earn{display:flex;flex-direction:column;gap:5px;font-size:.84rem;color:var(--g-mut)}
.cz-earn div{display:flex;align-items:center;gap:8px}
.cz-earn i{width:6px;height:6px;border-radius:50%;background:#8a8d94;flex:0 0 auto}
.cz-earn div:first-child i{background:#FFC629}
.cz-link{font-family:var(--g-cond);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#FFC629;font-size:.86rem;text-decoration:none;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.cz-blocked{display:flex;align-items:flex-start;gap:8px;font-size:.84rem;color:#e8e2da;line-height:1.4}
.cz-blocked .cz-link,.cz-block .cz-link{white-space:nowrap;margin-left:2px}
.cz-blocked .cz-ic{width:15px;height:15px;color:#F2C79B;flex:0 0 auto;margin-top:2px}
.cz-confirm{border:1px solid rgba(255,198,41,.5);background:radial-gradient(260px 120px at 50% 0%,rgba(255,198,41,.12),transparent 70%),#15140f;border-radius:12px;padding:13px 13px 14px;display:flex;flex-direction:column;gap:10px}
.cz-confirm h5{margin:0;font-family:var(--g-cond);font-weight:700;font-size:1.2rem;text-transform:uppercase;letter-spacing:.4px}
.cz-confirm p{margin:0;font-size:.84rem;color:var(--g-mut);line-height:1.4}
.cz-confirm .cz-rows{border:0;padding:0}
.cz-err{margin:0;font-size:.84rem;color:#ff9d8f;line-height:1.4}
.cz-check{display:flex;align-items:center;gap:8px;font-size:.84rem;color:#e6e6e6;cursor:pointer}
.cz-check input{accent-color:#FFC629;width:16px;height:16px;margin:0}
.cz-done{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:6px 0 2px}
.cz-done-ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(34,167,87,.14);border:1px solid rgba(34,167,87,.45);color:#4cd07f}
.cz-done-ic .cz-ic{width:22px;height:22px}
.cz-done b{font-family:var(--g-cond);font-weight:700;font-size:1.2rem;text-transform:uppercase;letter-spacing:.4px}
.cz-done span{font-size:.84rem;color:var(--g-mut)}

/* tabs, progress, chips */
.cz-toprow{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap}
.cz-tabs{display:flex;gap:6px;background:#0d0e10;border:1px solid #26272b;border-radius:12px;padding:4px;width:max-content;max-width:100%}
.cz-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:9px;border:0;background:transparent;cursor:pointer;color:var(--g-mut);
  font-family:var(--g-cond);font-weight:700;font-size:1rem;letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap}
.cz-tab em{font-style:normal;color:var(--g-mut2);font-size:.9rem}
.cz-tab.on{background:linear-gradient(180deg,#FFE27A,#F6B81F);color:#161206}
.cz-tab.on em{color:#5c4708}
.cz-tab .cz-ic{width:17px;height:17px}
.cz-tab:focus-visible{outline:2px solid #FFC629;outline-offset:2px}
.cz-sort{width:auto;margin-left:auto;background:#0A0A0A;border:1px solid #33353a;border-radius:10px;color:#fff;font:600 .82rem var(--g-sans);padding:6px 10px}
.cz-prog{margin:14px 0 12px;background:#0d0e10;border:1px solid #26272b;border-radius:12px;padding:11px 14px 12px}
.cz-prog-top{display:flex;align-items:baseline;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.cz-prog-top b{font-family:var(--g-cond);font-weight:700;font-size:1.25rem;letter-spacing:.3px;white-space:nowrap}
.cz-prog-top b em{font-style:normal;color:#FFC629}
.cz-prog-top span{font-size:.82rem;color:var(--g-mut2)}
.cz-ladder{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:10px}
.cz-rung{display:flex;flex-direction:column;gap:5px;min-width:0}
.cz-rung-bar{height:6px;border-radius:99px;background:#22232a;overflow:hidden}
.cz-rung-bar i{display:block;height:100%;background:var(--tg);border-radius:99px}
.cz-rung.cz-t-exclusive .cz-rung-bar i{background:linear-gradient(90deg,#8A5A06,#F0BC3C)}
.cz-rung span{display:flex;justify-content:space-between;gap:4px;font-family:var(--g-cond);font-weight:700;font-size:.72rem;letter-spacing:1.3px;text-transform:uppercase;color:var(--tc);white-space:nowrap}
.cz-rung span em{font-style:normal;color:var(--g-mut2)}
.cz-hint,.cz-block{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;padding:10px 12px;border-radius:11px;background:rgba(216,154,95,.07);border:1px solid rgba(216,154,95,.35);
  font-size:.86rem;color:#e8e2da;line-height:1.4}
.cz-hint .cz-ic,.cz-block .cz-ic{color:#FFC629;width:16px;height:16px;margin-top:2px}
.cz-hint b{color:#fff}
.cz-filters{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.cz-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;border:1px solid #33353a;background:transparent;color:var(--g-mut);cursor:pointer;
  font-family:var(--g-cond);font-weight:700;font-size:.84rem;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.cz-chip i{width:8px;height:8px;border-radius:50%;background:var(--tg)}
.cz-chip.cz-t-exclusive i{border-radius:1.5px;transform:rotate(45deg);width:7px;height:7px;background:#0b0a08;box-shadow:0 0 0 1.4px #F0BC3C}
.cz-chip.on{border-color:#FFC629;color:#FFC629;background:rgba(255,198,41,.08)}
.cz-empty{grid-column:1/-1;padding:30px;text-align:center;color:#8a8d94}

/* item grid: each tile is a div with one full-size select button and, when owned, its own Equip button */
.cz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cz-grid.is-banners{grid-template-columns:repeat(3,minmax(0,1fr))}
.cz-item{position:relative;display:flex;flex-direction:column;text-align:left;background:#17181d;border:1px solid #26272b;border-radius:14px;padding:0;
  color:#fff;overflow:hidden;transition:transform .14s,border-color .14s,box-shadow .14s;min-width:0}
.cz-item::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tg,#33353a);z-index:3;opacity:.9}
.cz-item.cz-t-exclusive::before{background:linear-gradient(90deg,#6E4706,#F0BC3C,#6E4706)}
.cz-item:hover{transform:translateY(-2px);border-color:#4a4c53}
.cz-item.is-selected{border-color:#fff;box-shadow:0 0 0 1px #fff,0 16px 30px -18px rgba(0,0,0,.9)}
.cz-item.is-equipped{border-color:rgba(255,198,41,.75)}
.cz-item.is-equipped.is-selected{border-color:#FFC629;box-shadow:0 0 0 1px #FFC629}
.cz-i-hit{position:absolute;inset:0;z-index:4;background:transparent;border:0;padding:0;margin:0;cursor:pointer;border-radius:inherit}
.cz-i-hit:focus-visible{outline:2px solid #FFC629;outline-offset:-3px}
.cz-i-prev{height:134px;padding-top:20px;display:grid;place-items:center;position:relative;
  background:radial-gradient(60% 75% at 50% 48%,var(--tglow,rgba(255,255,255,.06)),transparent 72%),#121316}
.cz-item.cz-t-exclusive .cz-i-prev{background:radial-gradient(60% 75% at 50% 48%,rgba(240,188,60,.16),transparent 72%),linear-gradient(180deg,#15130e,#0e0d0a)}
.cz-i-prev.is-bn{height:104px;padding:0 0 10px 16px;place-items:end start;overflow:hidden;background:#0A0A0A}
.cz-i-prev.is-bn > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center;display:block}
.cz-i-prev.is-bn > .cz-i-sil{position:relative;z-index:1;display:flex}
.cz-i-tl{position:absolute;top:9px;left:9px;z-index:5;display:flex;gap:5px;pointer-events:none}
.cz-i-tr{position:absolute;top:9px;right:9px;z-index:5;display:flex;gap:5px;pointer-events:none}
.cz-pill{display:inline-flex;align-items:center;gap:4px;font-family:var(--g-cond);font-weight:700;font-size:.68rem;letter-spacing:1.3px;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;line-height:1.1;white-space:nowrap}
.cz-pill .cz-ic{width:11px;height:11px}
.cz-pill.is-eq{background:linear-gradient(180deg,#FFE27A,#F6B81F);color:#161206}
.cz-pill.is-own{background:rgba(10,10,10,.75);color:#d6d6d6;border:1px solid #3a3c42}
.cz-pill.is-earn{background:rgba(10,10,10,.8);color:#EBD9A6;border:1px solid rgba(240,188,60,.45)}
.cz-i-body{padding:10px 12px 12px;display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.cz-i-head{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin-bottom:7px;min-width:0}
.cz-i-name{max-width:100%;font-weight:700;font-size:.93rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cz-i-ev{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.cz-i-ev .cz-badge{font-size:.62rem;padding:2px 6px;letter-spacing:1px}
.cz-i-foot{margin-top:auto;padding-top:8px;border-top:1px solid #26272b;display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:31px}
.cz-i-foot .cz-pt{font-size:1.06rem}
.cz-i-foot small{font-size:.74rem;color:var(--g-mut2);white-space:nowrap}
.cz-i-foot .is-gold{color:#FFC629}
.cz-i-foot .is-mut{color:#b4b7bd}
.cz-i-foot .is-mut .cz-ic{color:#8a8d94}
.cz-i-foot .is-ok,.cz-i-foot .is-eqt{font-family:var(--g-cond);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:.86rem;display:inline-flex;gap:5px;align-items:center;white-space:nowrap}
.cz-i-foot .is-ok{color:#4cd07f}
.cz-i-foot .is-eqt{color:#FFC629}
.cz-i-foot .is-excl{color:#EBD9A6;font-family:var(--g-cond);font-weight:700;letter-spacing:.8px;text-transform:uppercase;font-size:.8rem;display:inline-flex;gap:5px;align-items:center;
  min-width:0}
/* The text sits in its own span: an inline-flex box never puts an ellipsis on a bare text run. */
.cz-i-foot .is-excl .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cz-i-foot .is-excl .cz-ic{color:#F0BC3C}
.cz-i-foot .cz-ic{width:14px;height:14px}
.cz-i-eq{position:relative;z-index:6;font-family:var(--g-cond);font-weight:700;font-size:.78rem;letter-spacing:1.2px;text-transform:uppercase;flex:0 0 auto;
  padding:5px 12px;border-radius:99px;border:1px solid rgba(255,198,41,.6);background:rgba(255,198,41,.08);color:#FFC629;cursor:pointer;line-height:1.1}
.cz-i-eq:hover,.cz-i-eq:focus-visible{background:linear-gradient(180deg,#FFE27A,#F6B81F);color:#161206;border-color:transparent}
.cz-i-meter{display:block;height:4px;border-radius:99px;background:#26272b;overflow:hidden;margin-top:7px}
.cz-i-meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#7c8089,#c3c9d4)}
.cz-i-meter.is-earn i{background:linear-gradient(90deg,#8A5A06,#F0BC3C)}

/* tier guide (side column) */
.cz-guide{background:#111214;border:1px solid #26272b;border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:7px}
.cz-guide-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.84rem}
.cz-guide-row .r{display:inline-flex;align-items:baseline;gap:6px}
.cz-guide-row .cz-pt{font-size:.98rem}
.cz-guide-row small{font-size:.76rem;color:var(--g-mut2)}
.cz-guide-row em{font-style:normal;color:#EBD9A6;font-family:var(--g-cond);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:.8rem}
.cz-guide-row.is-on{background:rgba(255,255,255,.05);border-radius:8px;margin:0 -8px;padding:3px 8px}

.cz-foot{display:flex;align-items:center;gap:10px;justify-content:center;padding:12px 18px;border-top:1px solid #26272b;background:#0d0e10;font-size:.82rem;
  color:var(--g-mut2);text-align:center;flex:0 0 auto}
.cz-foot .cz-ic{width:15px;height:15px;color:#4cd07f}
.cz-toast{position:absolute;left:50%;bottom:58px;transform:translate(-50%,16px);opacity:0;z-index:20;display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);
  background:#1d1e23;border:1px solid #33353a;border-left:3px solid #22A757;border-radius:10px;padding:11px 16px;font-size:.9rem;box-shadow:0 16px 40px rgba(0,0,0,.6);
  transition:opacity .25s,transform .25s;pointer-events:none}
.cz-toast.show{opacity:1;transform:translate(-50%,0)}
.cz-toast.is-error{border-left-color:var(--g-red)}
.cz-toast .cz-ic{width:16px;height:16px;color:#4cd07f;flex:0 0 auto}
.cz-toast.is-error .cz-ic{color:var(--g-red)}

/* loading and error */
.cz-sk{background:linear-gradient(90deg,#17181d 0%,#202127 40%,#17181d 80%);background-size:300% 100%;animation:czShimmer 1.3s linear infinite;border-radius:14px}
@keyframes czShimmer{from{background-position:100% 0}to{background-position:-50% 0}}
.cz-sk.is-prev{height:206px}
.cz-sk.is-detail{height:190px}
.cz-sk.is-tabs{height:46px;width:min(380px,100%);border-radius:12px}
.cz-sk.is-prog{height:66px;margin:14px 0 12px;border-radius:12px}
.cz-sk.is-chips{height:32px;width:min(520px,100%);margin-bottom:12px;border-radius:99px}
.cz-sk.is-tile{height:226px}
.cz-fail{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:12px;padding:60px 20px;text-align:center;color:var(--g-mut)}
.cz-fail > .cz-ic{width:26px;height:26px;color:#F2C79B}
.cz-fail .cz-btn{width:auto;padding:11px 22px}

/* narrower desktops and tablets */
@media (max-width:1100px) and (min-width:641px){
  .cz-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cz-grid.is-banners{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px) and (min-width:641px){
  .cz-body{grid-template-columns:280px minmax(0,1fr)}
  .cz-side{padding:14px}
  .cz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cz-sub{display:none}
}
/* Short laptop screens: a slimmer preview, so it and the selected item's buttons fit
   in the side column together. */
@media (min-width:641px) and (max-height:860px){
  .cz-side{gap:10px}
  .cz-side > .cz-lbl{display:none}
  .cz-prev-banner{height:64px}
  .cz-prev-tag{left:auto;right:8px}
  .cz-prev-what{padding-bottom:9px}
  .cz-detail{padding:12px 14px 14px;gap:8px}
}

/* ------------------------------------------------------------------ phone: bottom sheet
   The preview sticks to the top, the action bar to the bottom (opaque, never over the
   tiles), the grid scrolls in between. */
@media (max-width:640px){
  /* No backdrop blur on a phone: it is recomputed for every frame of the page behind. */
  .cz-overlay{padding:0;align-items:flex-end;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(5,5,6,.84)}
  .cz{width:100%;height:calc(100% - 56px);max-height:none;border-radius:20px 20px 0 0;border-bottom:0;box-shadow:0 -30px 60px rgba(0,0,0,.7);animation:czUp .24s ease}
  .cz-grab{display:block;width:44px;height:5px;border-radius:99px;background:#3a3c42;margin:8px auto 0;flex:0 0 auto}
  .cz-head{padding:10px 16px 12px;gap:10px}
  .cz-head-ic,.cz-sub{display:none}
  .cz-title{font-size:1.12rem;white-space:nowrap}
  .cz-points{padding:4px 10px;border-radius:10px;column-gap:10px}
  .cz-points small{font-size:.56rem}
  .cz-points .cz-pt{font-size:1.04rem}
  .cz-earnlink{font-size:.66rem;padding-left:10px;max-width:64px;letter-spacing:.8px}
  .cz-x{width:34px;height:34px}
  .cz-body{display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
  .cz-side{display:contents}
  .cz-side > .cz-lbl,.cz-sizes,.cz-guide{display:none}
  .cz-prev{order:1;margin:0;flex:0 0 auto;position:sticky;top:0;z-index:7;border-radius:0;border-width:0 0 1px;box-shadow:0 14px 26px -12px rgba(0,0,0,.85)}
  .cz-prev-banner{height:70px}
  .cz-prev-bar{height:38px;padding:7px 16px 0 98px}
  .cz-prev-ava{left:26px;top:-36px}
  .cz-prev-ava .cz-av{--s:62px !important}
  .cz-prev-tag{left:auto;right:10px}
  .cz-prev-name{font-size:1.1rem}
  .cz-prev-what{font-size:.72rem;padding:3px 16px 8px 98px;border-top:0;line-height:1.3}
  .cz-reset{font-size:.68rem}
  .cz-main{order:2;padding:12px 16px 14px;overflow:visible;min-height:auto}
  .cz-toprow{display:block}
  .cz-sort{display:none}
  .cz-tabs{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .cz-tab{justify-content:center;padding:9px 6px;font-size:.88rem;gap:6px}
  .cz-tab .cz-ic{display:none}
  .cz-prog{margin:10px 0;padding:9px 11px 10px}
  .cz-prog-top{margin-bottom:7px}
  .cz-prog-top b{font-size:1.05rem}
  .cz-prog-top span{display:none}
  .cz-ladder{gap:6px}
  .cz-rung span{font-size:.58rem;letter-spacing:.5px}
  .cz-hint,.cz-block{font-size:.8rem;padding:9px 10px;margin-bottom:10px}
  .cz-filters{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 10px;padding:0 16px;scrollbar-width:none}
  .cz-filters::-webkit-scrollbar{display:none}
  .cz-chip{padding:6px 11px;font-size:.78rem}
  .cz-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .cz-grid.is-banners{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cz-item{border-radius:12px}
  .cz-i-prev{height:110px;padding-top:16px}
  .cz-i-prev.is-bn{height:80px;padding:0 0 8px 12px}
  .cz-i-prev:not(.is-bn) .cz-av{--s:54px !important}
  .cz-i-prev.is-bn .cz-av{--s:26px !important}
  .cz-i-tl{top:6px;left:6px}
  .cz-i-tr{top:6px;right:6px}
  .cz-pill,.cz-i-tr .cz-badge{font-size:.56rem;padding:2px 6px;letter-spacing:.8px}
  .cz-pill .cz-ic{width:9px;height:9px}
  .cz-i-body{padding:8px 9px 9px}
  .cz-i-head{margin-bottom:5px}
  .cz-i-name{font-size:.8rem}
  .cz-i-body .cz-tchip{font-size:.6rem;letter-spacing:1px}
  .cz-i-ev .cz-badge{font-size:.54rem;padding:2px 5px;letter-spacing:.6px}
  .cz-i-foot{padding-top:6px;min-height:26px;gap:4px}
  .cz-i-foot small{display:none}
  .cz-i-foot .cz-pt{font-size:.92rem}
  .cz-i-foot .is-ok,.cz-i-foot .is-eqt,.cz-i-foot .is-excl{font-size:.7rem;letter-spacing:.4px}
  /* A narrow tile gives an earn rule two lines before it ends in an ellipsis. */
  .cz-i-foot .is-excl{align-items:flex-start}
  .cz-i-foot .is-excl .t{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;line-height:1.15}
  .cz-i-foot .is-ok .cz-ic{display:none}
  .cz-i-eq{font-size:.66rem;padding:4px 8px;letter-spacing:.8px}
  .cz-i-meter{margin-top:5px;height:3px}
  .cz-detail{order:3;position:sticky;bottom:0;z-index:8;margin-top:auto;border-radius:16px 16px 0 0;border:1px solid #33353a;border-bottom:0;background:#15161a;
    box-shadow:0 -18px 40px rgba(0,0,0,.65);padding:12px 16px 14px;padding-bottom:max(14px,env(safe-area-inset-bottom));gap:8px}
  .cz-d-desc,.cz-earn,.cz-detail > .cz-meter{display:none}
  .cz-d-top{gap:6px}
  .cz-d-name{font-size:1.2rem}
  .cz-detail > .cz-rows,.cz-confirm .cz-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;border:0;padding:0}
  .cz-detail > .cz-rows .cz-row,.cz-confirm .cz-row{flex-direction:column;align-items:flex-start;gap:1px;font-size:.72rem}
  .cz-detail > .cz-rows .cz-pt,.cz-confirm .cz-row .cz-pt{font-size:.98rem}
  .cz-confirm{padding:11px 12px 12px;gap:8px}
  .cz-confirm h5{font-size:1.08rem}
  .cz-confirm p{font-size:.8rem}
  .cz-btn{padding:12px 14px;font-size:1rem}
  .cz-how{padding:9px 10px}
  .cz-how p{font-size:.8rem}
  /* the end date already shows as a badge in the bar */
  .cz-detail > .cz-keep{display:none}
  .cz-link{font-size:.78rem}
  .cz-foot{display:none}
  .cz-toast{bottom:150px;width:calc(100% - 32px)}
  .cz-sk.is-prev{height:120px;border-radius:0;order:1;flex:0 0 auto}
  .cz-sk.is-detail{display:none}
  .cz-skel-main{order:2;flex:0 0 auto;padding:12px 16px}
  .cz-sk.is-tile{height:170px}
}

/* Short phones (an iPhone SE or mini with the Safari bars): the preview scrolls away with
   the grid and the action bar takes at most 44% of the screen (it scrolls inside), so
   there is always room to browse the tiles. */
@media (max-width:640px) and (max-height:720px){
  .cz-prev{position:relative;box-shadow:none}
  .cz-prev-banner{height:52px}
  .cz-detail{max-height:44vh;max-height:44dvh;overflow:auto;overscroll-behavior:contain}
  .cz-detail .cz-how p,.cz-detail > .cz-state:not(.is-ok){display:none}
}

@media (prefers-reduced-motion:reduce){
  .cz-toast,.cz-item,.cz-overlay,.cz{transition:none;animation:none}
  .cz-sk{animation:none}
  .cz-points.bump{animation:none}
}