/* ---------------- the Duel Pass screen (app + website). One column: season header with the XP bar, then thirty levels with the free reward left and the Pass reward right. */
.pz{--pz-card:var(--surface-2,var(--bg-card-solid,var(--bg-card,#1B2740)));--pz-line:rgba(127,127,127,.28);--pz-t1:var(--text-1,var(--text-primary,#F1F5F9));--pz-t2:var(--text-2,var(--text-secondary,#94A3B8));--pz-gold:#FDE047;--pz-blue:var(--brand-500,var(--primary,#3B82F6));max-width:560px;margin:0 auto;color:var(--pz-t1);font-family:var(--font-body,'Nunito',system-ui,sans-serif)}
.pz *{box-sizing:border-box}
.pz-head{position:relative;border-radius:22px;overflow:hidden;padding:18px 16px 16px;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.pz-head::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,8,16,.15),rgba(4,8,16,.82) 70%)}
.pz-head .bn{z-index:-2}
.pz-eyebrow{font:800 11px/1 var(--font-body,'Nunito',sans-serif);letter-spacing:.14em;text-transform:uppercase;color:var(--pz-gold)}
.pz-head h2{margin:6px 0 2px;font:400 26px/1.1 var(--font-display,'Fredoka One','Nunito',sans-serif);color:#fff;text-wrap:balance}
.pz-sub{font:700 13px/1.35 var(--font-body,'Nunito',sans-serif);color:rgba(255,255,255,.82)}
.pz-xp{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-top:12px;font:800 13px/1 var(--font-body,'Nunito',sans-serif);color:#fff;font-variant-numeric:tabular-nums}
.pz-bar{height:10px;border-radius:99px;background:rgba(255,255,255,.2);overflow:hidden}
.pz-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#FDE047,#F59E0B);transition:width .8s cubic-bezier(.2,.9,.3,1)}
.pz-buy{margin-top:12px;border-radius:18px;padding:14px;background:var(--pz-card);border:1px solid var(--pz-line);display:grid;gap:10px}
.pz-buy b{font:400 18px/1.2 var(--font-display,'Fredoka One',sans-serif)}
.pz-buy p{margin:0;font:600 13.5px/1.45 var(--font-body,'Nunito',sans-serif);color:var(--pz-t2)}
.pz-buy p strong{color:var(--pz-t1)}
.pz-btn{font:800 15px/1 var(--font-body,'Nunito',sans-serif);min-height:48px;border-radius:14px;border:0;padding:0 16px;cursor:pointer;color:#111827;background:linear-gradient(180deg,#FDE68A,#F59E0B)}
.pz-btn.blue{color:#fff;background:var(--pz-blue)}
.pz-btn[disabled]{opacity:.6;cursor:default}
.pz-cols{display:grid;grid-template-columns:1fr 44px 1fr;gap:8px;margin:16px 0 6px;font:800 11px/1 var(--font-body,'Nunito',sans-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--pz-t2);text-align:center}
.pz-cols span:last-child{color:var(--pz-gold)}
.pz-row{display:grid;grid-template-columns:1fr 44px 1fr;gap:8px;align-items:stretch;margin-bottom:8px}
.pz-lvl{display:grid;place-items:center;font:400 16px/1 var(--font-display,'Fredoka One',sans-serif);color:var(--pz-t2);position:relative}
.pz-lvl::before{content:'';position:absolute;left:50%;top:-8px;bottom:0;width:2px;margin-left:-1px;background:var(--pz-line);z-index:-1}
.pz-lvl b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--pz-card);border:2px solid var(--pz-line);font-weight:400}
.pz-row.reached .pz-lvl b{background:#F59E0B;border-color:#FDE68A;color:#111827}
.pz-row.next .pz-lvl b{border-color:#F59E0B;color:var(--pz-t1)}
.pz-cell{min-height:64px;min-width:0;border-radius:16px;background:var(--pz-card);border:1px solid var(--pz-line);padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;position:relative;overflow:hidden}
.pz-cell.empty{background:transparent;border:1px dashed var(--pz-line);opacity:.5}
.pz-cell.pass{border-color:rgba(245,158,11,.45)}
.pz-cell.locked>*:not(.pz-lock){opacity:.55}
.pz-cell.claimed{opacity:.6}
.pz-cell.claimable{border-color:#F59E0B;box-shadow:0 0 0 1px #F59E0B,0 0 16px rgba(245,158,11,.3)}
.pz-lock{position:absolute;top:5px;right:6px;font-size:11px;line-height:1}
.pz-tick{position:absolute;top:5px;right:7px;font:800 12px/1 var(--font-body,sans-serif);color:#22C55E}
.pz-rw{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;max-width:100%;min-width:0;font:800 14px/1.2 var(--font-body,'Nunito',sans-serif)}
.pz-rw small{display:block;width:100%;font:700 11px/1.2 var(--font-body,'Nunito',sans-serif);color:var(--pz-t2)}
.pz-rw .tt{font-size:9px}.pz-rw .nm{font-size:16px;max-width:100%}.pz-rw .emo{width:42px;height:auto}.pz-rw .bb{font-size:12px}
.pz-thumb{position:relative;width:78px;height:44px;border-radius:9px;overflow:hidden;flex:none}
.pz-pic{width:54px;height:54px;flex:none;object-fit:contain}
.pz-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:20px;background:rgba(127,127,127,.16);flex:none}
.pz-claim{font:800 12px/1 var(--font-body,'Nunito',sans-serif);min-height:30px;border-radius:9px;border:0;padding:0 12px;cursor:pointer;color:#111827;background:#FDE047}
.pz-note{margin:14px 2px 0;font:600 12.5px/1.5 var(--font-body,'Nunito',sans-serif);color:var(--pz-t2);text-align:center}
.pz-empty{padding:28px 12px;text-align:center;color:var(--pz-t2);font:600 14px/1.5 var(--font-body,'Nunito',sans-serif)}
/* the XP line on a result screen */
.xp-row{margin:10px auto 0;max-width:320px;display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font:800 12.5px/1 var(--font-body,'Nunito',system-ui,sans-serif);color:var(--text-1,var(--text-primary,#F1F5F9));font-variant-numeric:tabular-nums;cursor:pointer}
.xp-row .pz-bar{height:8px;background:rgba(127,127,127,.25)}
.xp-row em{font-style:normal;color:#F59E0B}
@media (prefers-reduced-motion:reduce){.pz-bar i{transition:none}}
/* ---------------- the League Road: one step per division and league, with what each gives */
.lr{--lr-card:var(--surface-2,var(--bg-card-solid,var(--bg-card,#1B2740)));--lr-line:rgba(127,127,127,.28);--lr-t1:var(--text-1,var(--text-primary,#F1F5F9));--lr-t2:var(--text-2,var(--text-secondary,#94A3B8));max-width:560px;margin:0 auto;color:var(--lr-t1);font-family:var(--font-body,'Nunito',system-ui,sans-serif)}
.lr *{box-sizing:border-box}
.lr-head{border-radius:20px;padding:16px;background:var(--lr-card);border:1px solid var(--lr-line);display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center}
.lr-head .lgb{width:46px;height:46px;grid-row:span 2}
.lr-head b{font:400 20px/1.15 var(--font-display,'Fredoka One',sans-serif)}
.lr-head em{font-style:normal;font:800 15px/1 var(--font-body,'Nunito',sans-serif);font-variant-numeric:tabular-nums}
.lr-head span{grid-column:2/-1;font:600 13px/1.3 var(--font-body,'Nunito',sans-serif);color:var(--lr-t2)}
.lr-head .pz-bar{grid-column:1/-1;margin-top:8px;background:rgba(127,127,127,.25)}
.lr-list{margin-top:14px;display:grid;gap:8px}
.lr-step{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:16px;background:var(--lr-card);border:1px solid var(--lr-line)}
.lr-step.league{border-color:rgba(245,158,11,.45)}
.lr-step.locked{opacity:.62}
.lr-step.claimable{border-color:#F59E0B;box-shadow:0 0 0 1px #F59E0B,0 0 16px rgba(245,158,11,.28)}
.lr-step.here{outline:2px solid var(--brand-500,var(--primary,#3B82F6));outline-offset:1px}
.lr-mark{display:grid;place-items:center;width:38px;height:38px}
.lr-mark .lgb{width:34px;height:34px}
.lr-mark i{width:12px;height:12px;border-radius:50%;background:var(--lr-line)}
.lr-step.reached .lr-mark i{background:#F59E0B}
.lr-t b{display:block;font:800 15px/1.2 var(--font-body,'Nunito',sans-serif)}
.lr-t small{display:block;font:700 12px/1.3 var(--font-body,'Nunito',sans-serif);color:var(--lr-t2);font-variant-numeric:tabular-nums}
.lr-rw{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.lr-rw .tt{font-size:8.5px}.lr-rw .nm{font-size:14px}.lr-rw .bb{font-size:11px}
.lr-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:99px;background:rgba(127,127,127,.16);font:800 11.5px/1 var(--font-body,'Nunito',sans-serif);white-space:nowrap}
.lr-thumb{position:relative;width:52px;height:28px;border-radius:6px;overflow:hidden;display:inline-block}
.lr-end{display:grid;justify-items:end;gap:6px;font:800 14px/1 var(--font-body,'Nunito',sans-serif);white-space:nowrap}
.lr-end .ok{color:#22C55E}
.lr-ring{position:relative;display:inline-block;width:16px;height:16px;margin:5px 9px 5px 5px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#22304D,#0A1020);vertical-align:middle}