/* lane P: battle pass (the Chronicler's Pass). Screen, sheets, post-match pill, level-up celebration, hub chip,
   and the Season 1 pass cosmetics (card treatments, frame, board effect, banners, companion looks). js/screens-pass.js */
:root { --pp-prem: #c98bff; --pp-prem-2: #7b3fd0; --pp-free: #f2c14e; }

/* ================================================================ screen */
#season .body.passBody { display: flex; flex-direction: column; gap: 14px; overflow: hidden; padding: 4px 4px 6px; }
.pHead { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(420px, 1.3fr) auto; gap: 22px; align-items: center; flex: none;
  padding: 16px 22px; border-radius: 18px; border: 1px solid rgba(232,186,90,.28);
  background: radial-gradient(ellipse at 0% 0%, rgba(242,193,78,.16), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(168,107,255,.2), transparent 60%), linear-gradient(180deg, rgba(30,17,58,.92), rgba(14,8,28,.94));
  box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.pTitle h2 { margin: 2px 0 6px; font: 900 38px/1.05 var(--font-title); letter-spacing: .04em;
  background: linear-gradient(180deg, #fff4d6, #f2c14e 55%, #b8811a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
.pTitle .eyebrow { font: 800 13px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pEnds { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: #d9cdf3; }
.pEnds .mi { width: 16px; height: 16px; }
.pLevel { display: flex; align-items: center; gap: 18px; }
.pMedal { position: relative; flex: none; width: 104px; height: 104px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 35% 30%, #fff1c2, #f2c14e 38%, #9c6a12 80%); box-shadow: 0 0 0 4px rgba(0,0,0,.35), 0 0 0 7px rgba(242,193,78,.5), 0 10px 26px rgba(0,0,0,.6); color: #2a1604; }
.pMedal.prem { background: radial-gradient(circle at 35% 30%, #fbe9ff, #c98bff 40%, #5a1f9e 82%); box-shadow: 0 0 0 4px rgba(0,0,0,.35), 0 0 0 7px rgba(242,193,78,.75), 0 0 30px rgba(201,139,255,.55); color: #1e0a33; }
.pMedal small { font: 800 11px var(--font-ui); letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.pMedal b { font: 900 46px/1 var(--font-title); }
.pXp { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pXpTop { display: flex; align-items: baseline; gap: 10px; }
.pXpTop b { font: 800 22px var(--font-ui); color: #fff4d6; } .pXpTop span { font-size: 15px; color: var(--muted); }
.pBar { position: relative; height: 16px; border-radius: 99px; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; }
.pBar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #b8811a, #f2c14e 60%, #fff1c2); box-shadow: 0 0 14px rgba(242,193,78,.65); transition: width .9s cubic-bezier(.2,.8,.2,1); }
.pBar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); background-size: 220% 100%; animation: pSheen 2.8s ease-in-out infinite; }
@keyframes pSheen { 0% { background-position: 140% 0; } 70%, 100% { background-position: -60% 0; } }
.pXpSub { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--muted); }
.pCatch { display: inline-flex; align-items: center; gap: 6px; color: #7dffb0; font-weight: 700; }
.pCatch .mi { width: 16px; height: 16px; }
.pInfoBtn { display: inline-flex; align-items: center; gap: 6px; flex: none; border: 1px solid rgba(190,160,255,.25); background: rgba(255,255,255,.04); color: #e8dcff; border-radius: 99px; padding: 5px 12px; font-size: 13px; cursor: pointer; }
.pInfoBtn .mi { width: 15px; height: 15px; }
.pCta { display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-width: 290px; }
.pCtaRow { display: flex; gap: 10px; } .pCtaRow .btn { flex: 1; }
.pCtaRow .btn .mi, .pBuy .mi { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }
.pBuy { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 62px; font-size: 20px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #e7b6ff, #a45ff0 45%, #6a2cc0) !important; color: #fff !important; border-color: #f2c14e !important; box-shadow: 0 0 0 2px rgba(242,193,78,.4), 0 0 26px rgba(201,139,255,.55) !important; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.pBuy::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%); background-size: 240% 100%; animation: pSheen 3.2s ease-in-out infinite; pointer-events: none; }
.pBuy em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; background: rgba(0,0,0,.3); font-weight: 800; }
.pOwned { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 14px; border: 1px solid rgba(242,193,78,.55);
  background: linear-gradient(135deg, rgba(201,139,255,.3), rgba(90,31,158,.35)); box-shadow: 0 0 22px rgba(201,139,255,.35); }
.pOwned > .mi { width: 34px; height: 34px; color: #f2c14e; filter: drop-shadow(0 0 8px rgba(242,193,78,.7)); }
.pOwned b { display: block; font: 800 19px var(--font-title); color: #fff4d6; } .pOwned small { color: #e2d4ff; font-size: 13px; }

/* track: an in-game horizontal scroller of levels, free row on top, premium row below */
.pTrackWrap { position: relative; flex: 1; min-height: 0; border-radius: 18px; border: 1px solid rgba(190,160,255,.14);
  background: linear-gradient(180deg, rgba(20,11,40,.7), rgba(10,6,22,.8)); overflow: hidden; }
.pTrack { position: absolute; inset: 0; display: flex; align-items: stretch; gap: 10px; padding: 12px 18px 14px 0; overflow-x: auto; overflow-y: hidden;
  touch-action: pan-x; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(232,186,90,.45) transparent; }
.pTrack::-webkit-scrollbar { height: 8px; } .pTrack::-webkit-scrollbar-thumb { background: rgba(232,186,90,.4); border-radius: 99px; }
.pRowLab { position: sticky; left: 0; z-index: 4; flex: none; width: 92px; display: grid; grid-template-rows: 44px 1fr 1fr; gap: 10px; padding-left: 12px;
  background: #120a24; }
.pRowLab::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 22px; pointer-events: none; background: linear-gradient(90deg, #120a24, rgba(18,10,36,0)); }
.pRowLab span { display: grid; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg); font: 900 15px var(--font-title); letter-spacing: .24em; text-transform: uppercase; border-radius: 12px; }
.pRowLab .pl-free { color: #f2c14e; background: #1d1424; border: 1px solid rgba(242,193,78,.25); }
.pRowLab .pl-prem { color: #e3bfff; background: #2a1646; border: 1px solid rgba(201,139,255,.35); gap: 8px; }
.pRowLab .pl-prem .mi { width: 18px; height: 18px; transform: rotate(90deg); }
.pCol { position: relative; flex: none; width: 146px; display: grid; grid-template-rows: 44px 1fr 1fr; gap: 10px; }
.pNode { position: relative; display: grid; place-items: center; }
.pNode::before { content: ""; position: absolute; left: -10px; right: -10px; top: 50%; height: 4px; margin-top: -2px; background: rgba(255,255,255,.1); }
.pCol.reached .pNode::before { background: linear-gradient(90deg, #b8811a, #f2c14e); box-shadow: 0 0 8px rgba(242,193,78,.5); }
.pNode b { position: relative; z-index: 1; display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 6px; border-radius: 99px; font: 900 17px var(--font-title);
  background: #1b1034; border: 2px solid rgba(190,160,255,.3); color: var(--muted); }
.pCol.reached .pNode b { background: linear-gradient(180deg, #fff1c2, #f2c14e 55%, #9c6a12); border-color: #fff1c2; color: #2a1604; }
.pCol.cur .pNode b { border-color: #f2c14e; color: #fff4d6; box-shadow: 0 0 0 4px rgba(242,193,78,.25); animation: pCur 1.8s ease-in-out infinite; }
@keyframes pCur { 50% { box-shadow: 0 0 0 8px rgba(242,193,78,.08), 0 0 18px rgba(242,193,78,.5); } }
.pCol.ten .pNode b { min-width: 50px; font-size: 19px; }
.pTile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 10px 8px 30px; min-height: 0;
  border-radius: 14px; cursor: pointer; text-align: center; overflow: hidden; transition: transform .18s, box-shadow .18s, filter .18s;
  background: linear-gradient(180deg, rgba(44,26,80,.9), rgba(18,10,36,.95)); border: 1px solid rgba(190,160,255,.18); }
.pTile.prem { background: linear-gradient(180deg, rgba(74,32,120,.9), rgba(26,10,48,.96)); border-color: rgba(201,139,255,.3); }
.pTile.big { border-width: 2px; }
.pTile.rar-Legendary { border-color: rgba(242,193,78,.7); box-shadow: inset 0 0 22px rgba(242,193,78,.15); }
.pTile.rar-Epic { border-color: rgba(199,125,255,.6); }
.pTile:hover { transform: translateY(-3px); }
.pTile .pt-art { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; }
.pTile .pt-name { font: 700 13.5px/1.2 var(--font-ui); color: #f3ecff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pTile .pt-kind { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pTile .pt-state { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; display: grid; place-items: center; font: 800 13px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.pTile .pt-state .mi { width: 16px; height: 16px; }
.pTile.locked { filter: saturate(.55) brightness(.72); }
.pTile.locked:hover { filter: saturate(.8) brightness(.9); }
.pTile.held { filter: saturate(.8) brightness(.9); }
.pTile.held .pt-state { background: rgba(0,0,0,.45); color: #e3bfff; }
.pTile.done .pt-state { background: rgba(125,255,176,.12); color: #7dffb0; }
.pTile.done .pt-art { opacity: .55; }
.pTile.ready { border-color: #f2c14e; box-shadow: 0 0 0 2px rgba(242,193,78,.45), 0 0 22px rgba(242,193,78,.4); animation: pReady 1.6s ease-in-out infinite; }
.pTile.prem.ready { border-color: #e3bfff; box-shadow: 0 0 0 2px rgba(227,191,255,.5), 0 0 24px rgba(201,139,255,.55); }
.pTile.ready .pt-state { background: linear-gradient(180deg, #fff1c2, #f2c14e 60%, #b8811a); color: #2a1604; }
.pTile.prem.ready .pt-state { background: linear-gradient(180deg, #fbe9ff, #c98bff 60%, #7b3fd0); color: #1e0a33; }
@keyframes pReady { 50% { transform: translateY(-3px); } }
.pTile.revealing { animation: pFlip .55s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes pFlip { 0% { transform: perspective(600px) rotateY(0) scale(1); } 45% { transform: perspective(600px) rotateY(90deg) scale(1.08); filter: brightness(2); } 100% { transform: perspective(600px) rotateY(0) scale(1); } }
.pNext { flex: none; width: 300px; align-self: stretch; margin-left: 10px; padding: 18px; border-radius: 16px; border: 1px dashed rgba(190,160,255,.35); background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: 8px; }
.pNext .eyebrow { font: 800 12px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pNext b { font: 800 20px var(--font-title); color: #fff4d6; } .pNext span { font-size: 14px; line-height: 1.45; color: #d9cdf3; }
.pNext ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: #cfc2ec; line-height: 1.5; } .pNext small { color: var(--muted); font-style: italic; }
.pFoot { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 8px; font-size: 14px; color: #cfc2ec; }
.pFoot > .mi { width: 20px; height: 20px; color: #f2c14e; flex: none; } .pFoot b { color: #fff4d6; } .pFoot em { color: #e3bfff; font-style: normal; margin-left: 6px; }

/* reward art inside tiles and sheets */
.pr-ico { position: relative; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.14), rgba(0,0,0,.25)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.pr-ico .coin { width: 40px; height: 40px; }
.pr-ico .mi { width: 36px; height: 36px; color: #f2c14e; }
.pr-shard .mi { color: #6fd3ff; } .pr-pick .mi { color: #ffe08a; }
.pr-ico .packicon { transform: scale(1.35); }
.pr-ico em { position: absolute; right: -4px; bottom: -2px; font: 900 16px var(--font-title); font-style: normal; color: #fff4d6; text-shadow: 0 2px 4px #000; }
.pr-ico .gemicon, .ps-chip .gemicon { width: 34px; height: 34px; }
.pp { position: relative; width: 100%; height: 100%; max-height: 150px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; }
.pp-card { width: 72px; height: 100px; max-height: none; container-type: inline-size; overflow: visible; }
.pp-card .card { position: relative; width: 100%; height: 100%; }
.pp-board { width: 120px; height: 68px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.pp-board .lcb-preview { border-radius: inherit; }
.pp-frame { width: 70px; height: 100px; overflow: visible; }
.pp-frame .lc { position: relative; width: 100%; height: 100%; }
.pp-banner { width: 124px; height: 48px; border-radius: 10px; }
.pp-comp { width: 96px; height: 96px; overflow: visible; }
.pp-emote span { display: inline-block; max-width: 124px; padding: 8px 10px; border-radius: 14px 14px 14px 4px; background: #f3ecff; color: #1d1433; font: 700 13px/1.25 var(--font-ui); box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.pp-title span { display: inline-block; max-width: 128px; padding: 7px 10px; border-radius: 6px; font: 800 12.5px/1.25 var(--font-title); letter-spacing: .04em; color: #2a1604;
  background: linear-gradient(180deg, #fff1c2, #f2c14e 60%, #b8811a); box-shadow: 0 0 0 2px #5a3a0a, 0 4px 10px rgba(0,0,0,.5); }
.pp-frame.fr-brass-gears .lc { outline: 5px dotted #d6a64a; outline-offset: 3px; }
.pp-frame.fr-tesla-coil .lc { outline: 3px solid #8fe7ff; outline-offset: 3px; animation: frCoil 2.2s ease-in-out infinite; }
.pp-frame.fr-invention-laurel .lc { outline: 4px solid #f2c14e; outline-offset: 3px; filter: drop-shadow(0 0 10px rgba(125,255,176,.55)); }

/* ================================================================ sheets */
#sheet .box.passSheet { max-width: 880px; }
#sheet .box.buySheet { max-width: 1180px; }
.passSheet h2 .mi { width: 26px; height: 26px; vertical-align: -4px; color: #f2c14e; }
.pDetail { display: flex; gap: 26px; align-items: center; }
.pd-art { flex: none; width: 240px; height: 220px; display: grid; place-items: center; }
.pd-art .pp { max-height: none; }
.pd-art .pp-card { width: 150px; height: 210px; } .pd-art .pp-board { width: 240px; height: 135px; } .pd-art .pp-frame { width: 140px; height: 200px; }
.pd-art .pp-banner { width: 240px; height: 90px; } .pd-art .pp-comp { width: 180px; height: 180px; } .pd-art .pr-ico { width: 130px; height: 130px; }
.pd-art .pr-ico .coin { width: 70px; height: 70px; } .pd-art .pr-ico .mi { width: 64px; height: 64px; }
.pd-art .pp-emote span, .pd-art .pp-title span { font-size: 20px; max-width: 220px; }
.pd-txt .eyebrow { display: flex; align-items: center; gap: 6px; font: 800 13px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pd-txt .eyebrow .mi { width: 16px; height: 16px; color: #e3bfff; }
.pd-st { font-weight: 700; color: #ffe08a; }
.pReveal { position: relative; text-align: center; overflow: hidden; padding: 6px 0; }
.pReveal .eyebrow { position: relative; font: 800 13px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: #e3bfff; }
.pReveal h2 { position: relative; }
.pr-rays { position: absolute; left: 50%; top: 45%; width: 900px; height: 900px; margin: -450px 0 0 -450px; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg, rgba(242,193,78,.18) 0 8deg, transparent 8deg 22deg); animation: pSpin 22s linear infinite;
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 60%); mask-image: radial-gradient(circle, #000 0, transparent 60%); }
@keyframes pSpin { to { transform: rotate(360deg); } }
.pr-items { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 14px 0; }
.pr-item { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 170px; animation: pPop .6s cubic-bezier(.3,1.6,.5,1) both; }
.pr-item:nth-child(2) { animation-delay: .08s; } .pr-item:nth-child(3) { animation-delay: .16s; } .pr-item:nth-child(4) { animation-delay: .24s; }
@keyframes pPop { 0% { transform: scale(.4) rotate(-6deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.pr-item > .pp { height: 150px; } .revealSheet .pr-item .pp-card { width: 108px; height: 150px; } .revealSheet .pr-item .pp-board { width: 170px; height: 96px; }
.revealSheet .pr-item .pp-frame { width: 100px; height: 146px; } .revealSheet .pr-item .pp-banner { width: 170px; height: 64px; } .revealSheet .pr-item .pp-comp { width: 140px; height: 140px; }
.pr-item b { font: 800 17px var(--font-title); color: #fff4d6; } .pr-item span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ps-row { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 12px 0; }
.ps-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 110px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(242,193,78,.3); animation: pPop .5s cubic-bezier(.3,1.6,.5,1) both; }
.ps-chip b { font: 900 26px var(--font-title); color: #fff4d6; } .ps-chip small { color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.ps-chip .coin { width: 34px; height: 34px; } .ps-chip .mi { width: 32px; height: 32px; color: #6fd3ff; }
.pBuySheet .pbs-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.pBuySheet .eyebrow { font: 800 13px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pbs-bal { flex: none; display: flex; flex-direction: column; align-items: center; padding: 10px 18px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(111,211,255,.3); }
.pbs-bal b { font: 900 26px var(--font-title); } .pbs-bal small { color: var(--muted); font-size: 12px; } .pbs-bal .gemicon { width: 26px; height: 26px; }
.pbs-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; margin: 12px 0; }
.pbs-item { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 6px; border-radius: 12px; background: linear-gradient(180deg, rgba(74,32,120,.6), rgba(26,10,48,.8)); border: 1px solid rgba(201,139,255,.3); text-align: center; }
.pbs-item.rar-Legendary { border-color: rgba(242,193,78,.7); box-shadow: inset 0 0 18px rgba(242,193,78,.15); }
.pbs-item > .pp { height: 104px; } .pbs-item b { font: 700 13px/1.2 var(--font-ui); color: #fff4d6; } .pbs-item span { font-size: 11px; color: var(--muted); }
.pbs-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0; }
.pTier { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; border-radius: 16px; border: 1px solid rgba(242,193,78,.4); background: linear-gradient(180deg, rgba(60,36,10,.35), rgba(20,10,4,.35)); }
.pTier.deluxe { border-color: rgba(201,139,255,.55); background: linear-gradient(180deg, rgba(74,32,120,.45), rgba(26,10,48,.5)); }
.pTier.owned { opacity: .7; }
.pTier b { font: 800 21px var(--font-title); color: #fff4d6; }
.pTier ul { margin: 0; padding-left: 18px; color: #d9cdf3; font-size: 14.5px; line-height: 1.5; flex: 1; }
.pTier .pl-gets { color: var(--muted); font-size: 13px; }
.pTier .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 18px; }
.pTier .btn.armed { background: linear-gradient(180deg, #7dffb0, #1f9d58) !important; color: #042612 !important; }
.pTier .gemicon { width: 22px; height: 22px; }
.pOwnTag { display: inline-flex; align-items: center; gap: 6px; color: #7dffb0; font-weight: 800; } .pOwnTag .mi { width: 18px; height: 18px; }
.pbs-note { font-size: 14px; color: #cfc2ec; line-height: 1.5; } .pbs-note .mi { width: 17px; height: 17px; vertical-align: -3px; color: #f2c14e; } .pbs-note a { color: #6fd3ff; }
.pbs-note .gemicon { width: 18px; height: 18px; vertical-align: -3px; }
.pInfoT td { padding: 7px 10px; font-size: 15px; } .pInfoT td:last-child { text-align: right; color: #fff4d6; }

/* ================================================================ unlock + level-up overlays */
.pUnlock, .pLvUp { position: absolute; inset: 0; z-index: 1100; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(40,14,70,.78), rgba(5,2,12,.9)); animation: pFade .3s ease both; }
.pUnlock.out, .pLvUp.out { animation: pFadeOut .35s ease both; }
@keyframes pFade { from { opacity: 0; } } @keyframes pFadeOut { to { opacity: 0; } }
.pUnlock { flex-direction: column; text-align: center; align-content: center; gap: 10px; }
.pUnlock b { font: 900 46px var(--font-title); color: #fff4d6; text-shadow: 0 0 24px rgba(201,139,255,.8); } .pUnlock span { font-size: 20px; color: #e3d4ff; }
.pu-rays, .plu-rays { position: absolute; left: 50%; top: 50%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(242,193,78,.16) 0 7deg, transparent 7deg 20deg); animation: pSpin 26s linear infinite;
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 55%); mask-image: radial-gradient(circle, #000 0, transparent 55%); }
.pu-crest { position: relative; width: 160px; height: 160px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; animation: pPop .7s cubic-bezier(.3,1.6,.5,1) both;
  background: radial-gradient(circle at 35% 30%, #fbe9ff, #c98bff 40%, #5a1f9e 82%); box-shadow: 0 0 0 6px rgba(242,193,78,.7), 0 0 60px rgba(201,139,255,.8); }
.pu-crest .mi { width: 84px; height: 84px; color: #fff4d6; }
.plu-card { position: relative; width: min(900px, 92%); padding: 26px 30px 24px; border-radius: 24px; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, rgba(40,22,76,.97), rgba(14,8,28,.98)); border: 2px solid rgba(242,193,78,.6); box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 50px rgba(242,193,78,.25);
  animation: pPop .6s cubic-bezier(.3,1.5,.5,1) both; }
.plu-card > *:not(.plu-rays) { position: relative; }
.plu-card .eyebrow { font: 800 14px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: #e3bfff; }
.plu-medal { width: 150px; height: 150px; margin: 10px auto 4px; border-radius: 50%; display: grid; place-content: center; color: #2a1604;
  background: radial-gradient(circle at 35% 30%, #fff1c2, #f2c14e 38%, #9c6a12 80%); box-shadow: 0 0 0 6px rgba(0,0,0,.3), 0 0 0 10px rgba(242,193,78,.55), 0 0 50px rgba(242,193,78,.6);
  animation: pMedal 1s cubic-bezier(.3,1.7,.5,1) .15s both; }
@keyframes pMedal { 0% { transform: scale(.2) rotate(-40deg); } 100% { transform: none; } }
.plu-medal small { font: 800 13px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; } .plu-medal b { font: 900 66px/1 var(--font-title); }
.plu-title { font: 900 38px var(--font-title); color: #fff4d6; text-shadow: 0 0 18px rgba(242,193,78,.6); margin-bottom: 10px; }
.plu-rw { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.plu-l { display: flex; flex-direction: column; gap: 6px; align-items: center; animation: pPop .5s cubic-bezier(.3,1.6,.5,1) .5s both; }
.plu-l > span { font: 800 13px var(--font-title); letter-spacing: .12em; color: var(--muted); }
.plu-t { width: 180px; height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; border-radius: 12px; border: 1px solid rgba(242,193,78,.35); background: rgba(255,255,255,.04); }
.plu-t.prem { border-color: rgba(201,139,255,.5); background: rgba(123,63,208,.18); }
.plu-t.held { filter: saturate(.6) brightness(.8); }
.plu-t > .pp, .plu-t > .pr-ico { max-height: 84px; height: 84px; } .plu-t .pr-ico { width: 64px; height: 64px; }
.plu-t .pp-card { width: 60px; height: 84px; } .plu-t .pp-board { width: 130px; height: 73px; } .plu-t .pp-frame { width: 58px; height: 84px; } .plu-t .pp-comp { width: 84px; height: 84px; }
.plu-t small { font-size: 12.5px; color: #e8dcff; line-height: 1.2; } .plu-t small .mi { width: 13px; height: 13px; vertical-align: -2px; }
.plu-act { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }

/* ================================================================ post-match pill + hub chip */
.passPill { display: inline-flex; align-items: center; gap: 12px; padding-right: 16px; }
.passPill .ppLv { display: grid; place-content: center; text-align: center; width: 48px; height: 48px; border-radius: 50%; color: #2a1604; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff1c2, #f2c14e 40%, #9c6a12 85%); box-shadow: 0 0 0 2px rgba(0,0,0,.3), 0 0 12px rgba(242,193,78,.5); }
.passPill .ppLv small { font: 800 8.5px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; } .passPill .ppLv b { font: 900 20px/1 var(--font-title); }
.passPill.lvUp .ppLv { animation: pMedal .8s cubic-bezier(.3,1.7,.5,1) both; box-shadow: 0 0 0 2px rgba(0,0,0,.3), 0 0 26px rgba(242,193,78,.95); }
.passPill .ppMid { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.passPill .ppBar { position: relative; display: block; height: 9px; border-radius: 99px; background: rgba(0,0,0,.45); overflow: hidden; }
.passPill .ppBar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #b8811a, #f2c14e, #fff1c2); box-shadow: 0 0 10px rgba(242,193,78,.6); transition: width .65s cubic-bezier(.2,.8,.2,1); }
.passPill .ppTxt { font-size: 15px; color: #ffd36e; } .passPill .ppTxt em { color: #7dffb0; font-style: normal; font-size: 13px; }
.passHub { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding: 8px 12px; border-radius: 14px; cursor: pointer; color: inherit; text-align: left;
  border: 1px solid rgba(242,193,78,.4); background: linear-gradient(135deg, rgba(60,36,10,.55), rgba(26,12,48,.75)); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.passHub.prem { border-color: rgba(201,139,255,.6); background: linear-gradient(135deg, rgba(123,63,208,.5), rgba(26,12,48,.8)); }
.passHub .ph-crest { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff1c2, #f2c14e 45%, #9c6a12); color: #2a1604; }
.passHub.prem .ph-crest { background: radial-gradient(circle at 35% 30%, #fbe9ff, #c98bff 45%, #5a1f9e); }
.passHub .ph-crest .mi { width: 22px; height: 22px; }
.passHub .ph-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.passHub .ph-txt b { font: 800 15px var(--font-title); color: #fff4d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.passHub .ph-bar { height: 6px; border-radius: 99px; background: rgba(0,0,0,.45); overflow: hidden; } .passHub .ph-bar i { display: block; height: 100%; background: linear-gradient(90deg, #b8811a, #f2c14e); }
.passHub .ph-txt small { font-size: 12px; color: #d9cdf3; }
.passHub .shBadge { position: absolute; top: -8px; right: -8px; }

/* ================================================================ portrait (900-wide stage) */
body.portrait .pHead { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
body.portrait .pTitle h2 { font-size: 50px; } body.portrait .pTitle .eyebrow { font-size: 19px; } body.portrait .pEnds { font-size: 21px; }
body.portrait .pMedal { width: 130px; height: 130px; } body.portrait .pMedal b { font-size: 58px; } body.portrait .pMedal small { font-size: 14px; }
body.portrait .pXpTop b { font-size: 28px; } body.portrait .pXpTop span { font-size: 21px; } body.portrait .pBar { height: 22px; }
body.portrait .pXpSub { font-size: 19px; flex-wrap: wrap; } body.portrait .pInfoBtn { font-size: 19px; padding: 8px 16px; }
body.portrait .pCta { min-width: 0; } body.portrait .pBuy { min-height: 88px; font-size: 28px; } body.portrait .pCtaRow .btn { min-height: 76px; font-size: 24px; }
body.portrait .pOwned b { font-size: 26px; } body.portrait .pOwned small { font-size: 19px; }
body.portrait .pRowLab { width: 110px; grid-template-rows: 60px 1fr 1fr; } body.portrait .pRowLab span { font-size: 20px; }
body.portrait .pCol { width: 220px; grid-template-rows: 60px 1fr 1fr; }
body.portrait .pNode b { min-width: 52px; height: 52px; font-size: 24px; }
body.portrait .pTile { padding-bottom: 42px; } body.portrait .pTile .pt-name { font-size: 21px; } body.portrait .pTile .pt-kind { font-size: 16px; }
body.portrait .pTile .pt-state { height: 38px; font-size: 19px; }
body.portrait .pr-ico { width: 100px; height: 100px; } body.portrait .pr-ico .coin { width: 56px; height: 56px; } body.portrait .pr-ico .mi { width: 50px; height: 50px; }
body.portrait .pTile .pp { max-height: 200px; }
body.portrait .pTile .pp-emote span, body.portrait .pTile .pp-title span { font-size: 19px; max-width: 190px; }
body.portrait .pNext { width: 420px; } body.portrait .pNext b { font-size: 28px; } body.portrait .pNext span, body.portrait .pNext ul { font-size: 20px; }
body.portrait .pFoot { font-size: 20px; }
body.portrait .pbs-tiers { grid-template-columns: 1fr; } body.portrait .pDetail { flex-direction: column; text-align: center; }
body.portrait .plu-card { width: 94%; } body.portrait .plu-t { width: 250px; height: 180px; } body.portrait .plu-t small { font-size: 18px; }
body.portrait .plu-title { font-size: 48px; }
body.portrait .passPill .ppTxt { font-size: 22px; } body.portrait .passPill .ppMid { min-width: 220px; }
body.portrait .passHub .ph-txt b { font-size: 24px; } body.portrait .passHub .ph-txt small { font-size: 19px; } body.portrait .passHub .ph-crest { width: 56px; height: 56px; }
body.portrait .passHub .ph-crest .mi { width: 32px; height: 32px; } body.portrait .passHub .ph-bar { height: 9px; }
/* phones in landscape (stage shown at ~0.43): larger text */
body.mobile:not(.portrait) .pHead { grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.3fr) auto; padding: 12px 18px; }
body.mobile:not(.portrait) .pTitle h2 { font-size: 40px; } body.mobile:not(.portrait) .pTitle .eyebrow { font-size: 18px; } body.mobile:not(.portrait) .pEnds { font-size: 20px; }
body.mobile:not(.portrait) .pXpTop b { font-size: 28px; } body.mobile:not(.portrait) .pXpTop span, body.mobile:not(.portrait) .pXpSub { font-size: 20px; }
body.mobile:not(.portrait) .pInfoBtn { font-size: 18px; } body.mobile:not(.portrait) .pBuy { font-size: 24px; min-height: 70px; }
body.mobile:not(.portrait) .pCtaRow .btn { font-size: 21px; min-height: 58px; } body.mobile:not(.portrait) .pOwned b { font-size: 23px; } body.mobile:not(.portrait) .pOwned small { font-size: 17px; }
body.mobile:not(.portrait) .pCol { width: 176px; } body.mobile:not(.portrait) .pNode b { font-size: 22px; height: 42px; }
body.mobile:not(.portrait) .pTile .pt-name { font-size: 19px; } body.mobile:not(.portrait) .pTile .pt-kind { font-size: 14px; } body.mobile:not(.portrait) .pTile .pt-state { font-size: 17px; height: 30px; }
body.mobile:not(.portrait) .pRowLab span { font-size: 19px; } body.mobile:not(.portrait) .pFoot { font-size: 19px; }
body.mobile:not(.portrait) .pNext b { font-size: 24px; } body.mobile:not(.portrait) .pNext span, body.mobile:not(.portrait) .pNext ul { font-size: 18px; }
body.mobile .passPill .ppTxt { font-size: 21px; } body.mobile .passHub .ph-txt b { font-size: 21px; } body.mobile .passHub .ph-txt small { font-size: 17px; }
body.mobile .plu-t small { font-size: 18px; } body.mobile .plu-card .eyebrow { font-size: 18px; }

/* ================================================================ Season 1 pass cosmetics */
/* card treatments (body.cs-<id>, or any ancestor for previews) */
.cs-arc-light .card .face .art { filter: saturate(1.15) hue-rotate(-18deg) brightness(1.06) contrast(1.05); }
.cs-arc-light .card .face { animation: csArcGlow 3s ease-in-out infinite; }
.cs-arc-light .card .face::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; mix-blend-mode: screen;
  background: linear-gradient(118deg, transparent 38%, rgba(200,170,255,.0) 42%, rgba(235,220,255,.75) 47%, rgba(170,120,255,.35) 50%, transparent 56%) 0 0 / 300% 100%,
    radial-gradient(ellipse at 50% 0%, rgba(190,150,255,.28), transparent 45%), radial-gradient(ellipse at 50% 100%, rgba(190,150,255,.22), transparent 40%);
  animation: csArcSweep 3s ease-in-out infinite; }
@keyframes csArcSweep { 0%, 35% { background-position: 110% 0, 0 0, 0 0; } 70%, 100% { background-position: -20% 0, 0 0, 0 0; } }
@keyframes csArcGlow { 0%, 100% { box-shadow: 0 0 0 1.1cqw #b58cff, 0 0 5cqw rgba(170,120,255,.55), 0 6px 16px rgba(0,0,0,.55); }
  52% { box-shadow: 0 0 0 1.1cqw #f1e6ff, 0 0 10cqw rgba(200,160,255,.95), 0 6px 16px rgba(0,0,0,.55); } 56% { box-shadow: 0 0 0 1.1cqw #b58cff, 0 0 6cqw rgba(170,120,255,.6), 0 6px 16px rgba(0,0,0,.55); } }
.cs-brass-etch .card .face .art { filter: sepia(1) saturate(1.6) hue-rotate(-12deg) contrast(1.25) brightness(.92); }
.cs-brass-etch .card .face::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; mix-blend-mode: overlay;
  background: repeating-linear-gradient(35deg, rgba(255,230,170,.18) 0 .6cqw, transparent .6cqw 1.6cqw), linear-gradient(135deg, rgba(255,220,140,.25), transparent 50%, rgba(120,70,10,.35)); }
.cs-brass-etch .card .face { box-shadow: 0 0 0 1.2cqw #b8863a, 0 0 0 1.8cqw #5a3a10, 0 6px 16px rgba(0,0,0,.55); }
.cs-kinetoscope .card .face .art { filter: sepia(.9) contrast(1.15) brightness(.95); animation: csFlicker 3.2s steps(1) infinite; }
.cs-kinetoscope .card .face::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(90deg, #f3e3c0 0 2.4cqw, transparent 2.4cqw 5cqw) top 1.2cqw left 1cqw / calc(100% - 2cqw) 2cqw no-repeat,
    repeating-linear-gradient(90deg, #f3e3c0 0 2.4cqw, transparent 2.4cqw 5cqw) bottom 1.2cqw left 1cqw / calc(100% - 2cqw) 2cqw no-repeat,
    linear-gradient(#120a04, #120a04) top / 100% 4.4cqw no-repeat, linear-gradient(#120a04, #120a04) bottom / 100% 4.4cqw no-repeat,
    radial-gradient(ellipse at center, transparent 55%, rgba(30,16,4,.55)); z-index: 4; }
@keyframes csFlicker { 0%, 100% { opacity: 1; } 12% { opacity: .9; } 13% { opacity: 1; } 47% { opacity: .93; } 48% { opacity: 1; } 81% { opacity: .88; } 82% { opacity: 1; } }
/* the Season 1 Full-Art style: the art fills the top of the card, the frame fades in below it, holo foil over everything */
.cs-exposition-fa .card .face:not(.fa-face) .art { left: 0 !important; top: 0 !important; width: 100% !important; height: 60% !important; object-fit: cover; border-radius: 0; }
.cs-exposition-fa .card .face:not(.fa-face) .cf-frame { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 48%, #000 58%); mask-image: linear-gradient(180deg, transparent 0, transparent 48%, #000 58%); }
.cs-exposition-fa .card .face:not(.fa-face) .cf-name { z-index: 2; text-shadow: 0 0 .8cqw #000, 0 .3cqw .6cqw #000; }
.cs-exposition-fa .card .face:not(.fa-face)::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(0,0,0,.55), transparent 22%), linear-gradient(115deg, transparent 20%, rgba(255,120,220,.22) 35%, rgba(120,220,255,.22) 45%, rgba(255,240,150,.22) 55%, transparent 70%);
  background-size: 100% 100%, 250% 100%; mix-blend-mode: screen; animation: csHolo 5s ease-in-out infinite; }
.cs-exposition-fa .card .face { box-shadow: 0 0 0 1.2cqw #f2c14e, 0 0 6cqw rgba(242,193,78,.45), 0 6px 16px rgba(0,0,0,.55); }
@keyframes csHolo { 0%, 100% { background-position: 0 0, 120% 0; } 50% { background-position: 0 0, -20% 0; } }
/* animated leader frame (level 50): hub portrait, profile avatar, my leader in a match, previews */
.fr-wardenclyffe-crown .hubleader .lc, .fr-wardenclyffe-crown #game .lcard.mine .lc, .pp-frame.fr-wardenclyffe-crown .lc {
  outline: 3px solid #bff0ff; outline-offset: 5px; animation: frCrown 2.6s ease-in-out infinite; }
.fr-wardenclyffe-crown .profile .av { border-color: #bff0ff; box-shadow: 0 0 0 3px #f2c14e, 0 0 18px #6fd3ff; animation: frCrown 2.6s ease-in-out infinite; }
@keyframes frCrown {
  0%, 100% { box-shadow: 0 0 0 7px rgba(242,193,78,.85), 0 0 18px 6px rgba(111,211,255,.45); outline-color: #bff0ff; }
  46% { box-shadow: 0 0 0 7px rgba(242,193,78,.85), 0 0 18px 6px rgba(111,211,255,.45); }
  50% { box-shadow: 0 0 0 9px #fff4d6, 0 0 44px 14px rgba(191,240,255,.95); outline-color: #ffffff; }
  54% { box-shadow: 0 0 0 7px rgba(242,193,78,.85), 0 0 26px 8px rgba(111,211,255,.6); } }
body.fx-low .fr-wardenclyffe-crown .lc, body.fx-low .cs-arc-light .card .face, body.fx-low .cs-arc-light .card .face::before, body.fx-low .cs-kinetoscope .card .face .art, body.fx-low .cs-exposition-fa .card .face::before { animation: none !important; }
/* Wardenclyffe board + Arc Storm board effect */
.lcb-wc-arc { opacity: 0; animation: wcArc 5.5s steps(1) infinite; } .lcb-wc-arc .a2 { animation: wcArc2 5.5s steps(1) infinite; }
@keyframes wcArc { 0%, 100% { opacity: 0; } 62% { opacity: 1; } 64% { opacity: .2; } 66% { opacity: .9; } 70% { opacity: 0; } }
@keyframes wcArc2 { 0%, 64%, 100% { opacity: 0; } 66% { opacity: 1; } 69% { opacity: 0; } }
.lcb-wc-halo { animation: wcHalo 5.5s ease-in-out infinite; } @keyframes wcHalo { 0%, 55%, 75%, 100% { opacity: .35; } 63% { opacity: 1; } }
.lcbv-arc-storm .lcb-var { pointer-events: none; }
.lcbv-arc-storm .lcb-var::before, .lcbv-arc-storm .lcb-var::after { content: ""; position: absolute; top: 0; bottom: 0; width: 180px; opacity: 0;
  background: radial-gradient(ellipse at 0% 50%, rgba(160,230,255,.55), transparent 70%); animation: arcStorm 4.6s steps(1) infinite; }
.lcbv-arc-storm .lcb-var::before { left: 0; } .lcbv-arc-storm .lcb-var::after { right: 0; transform: scaleX(-1); animation-delay: 2.1s; }
@keyframes arcStorm { 0%, 100% { opacity: 0; } 40% { opacity: .9; } 42% { opacity: .15; } 44% { opacity: .75; } 48% { opacity: 0; } }
/* banners (js/pass.js bannerArt) */
.bn-dynamo { background: radial-gradient(ellipse at 78% 50%, #1b2c52, #0a1024 70%); }
.bn-dyn-glow { position: absolute; right: 70px; top: 50%; width: 140px; height: 140px; margin-top: -70px; border-radius: 50%; background: radial-gradient(circle, rgba(111,211,255,.5), transparent 70%); animation: bnLamp 2.4s ease-in-out infinite; }
.bn-dyn-coil { position: absolute; right: 100px; top: 50%; width: 80px; height: 80px; margin-top: -40px; border-radius: 50%; border: 6px solid #b87333; box-shadow: inset 0 0 0 5px #6b3a14, 0 0 12px rgba(184,115,51,.6); animation: czSpin 3s linear infinite; }
.bn-dyn-coil i { position: absolute; left: 50%; top: 50%; width: 4px; height: 34px; margin: -34px 0 0 -2px; background: #e8a060; transform-origin: 50% 100%; }
.bn-dyn-coil i:nth-child(2) { transform: rotate(60deg); } .bn-dyn-coil i:nth-child(3) { transform: rotate(120deg); } .bn-dyn-coil i:nth-child(4) { transform: rotate(180deg); }
.bn-dyn-coil i:nth-child(5) { transform: rotate(240deg); } .bn-dyn-coil i:nth-child(6) { transform: rotate(300deg); }
.bn-dyn-sparks i { position: absolute; right: 140px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #dff6ff; box-shadow: 0 0 8px #6fd3ff; animation: bnSpark 1.6s ease-out infinite; }
.bn-dyn-sparks i:nth-child(2) { animation-delay: .4s; right: 120px; } .bn-dyn-sparks i:nth-child(3) { animation-delay: .8s; right: 160px; } .bn-dyn-sparks i:nth-child(4) { animation-delay: 1.2s; right: 110px; }
@keyframes bnSpark { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(-60px, -26px); opacity: 0; } }
.bn-whitecity { background: linear-gradient(180deg, #060818, #121a3a 70%, #1c2446); }
.bn-wc-sky { position: absolute; inset: 0; background: radial-gradient(circle at 20% 25%, #fff 0 1px, transparent 2px), radial-gradient(circle at 60% 15%, #fff 0 1px, transparent 2px), radial-gradient(circle at 85% 30%, #fff 0 1.2px, transparent 2px); opacity: .7; }
.bn-wc-city { position: absolute; left: 0; bottom: 0; width: 100%; height: 70%; }
.bn-wc-beam { position: absolute; bottom: 20%; width: 26px; height: 170%; background: linear-gradient(0deg, rgba(255,240,190,.55), transparent); transform-origin: 50% 100%; filter: blur(2px); }
.bn-wc-beam.b1 { left: 40%; animation: bnBeam 7s ease-in-out infinite; } .bn-wc-beam.b2 { left: 72%; animation: bnBeam 9s ease-in-out infinite reverse; }
@keyframes bnBeam { 0%, 100% { transform: rotate(-28deg); } 50% { transform: rotate(24deg); } }
/* companions */
.hue-brass .cz-svg { filter: sepia(1) saturate(2.2) hue-rotate(-18deg) brightness(1.05) contrast(1.1) drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.hue-voltaic .cz-svg { filter: hue-rotate(170deg) saturate(1.8) brightness(1.2) drop-shadow(0 0 10px rgba(111,211,255,.9)); animation: czVolt 3s ease-in-out infinite; }
@keyframes czVolt { 50% { filter: hue-rotate(170deg) saturate(1.8) brightness(1.45) drop-shadow(0 0 16px rgba(191,240,255,1)); } }
.pose-eureka .cz-svg { animation: czEureka 2.8s cubic-bezier(.3,1.6,.5,1) infinite; transform-origin: 50% 100%; }
@keyframes czEureka { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-10px) scale(1.05); } 80% { transform: none; } }
.pose-eureka .cz-head { transform: rotate(-10deg) translateY(-2px); }
.pose-tinkering .cz-head { animation: czTinker 1.4s ease-in-out infinite; transform-origin: 50% 70%; }
@keyframes czTinker { 0%, 100% { transform: rotate(18deg) translateY(4px); } 50% { transform: rotate(12deg) translateY(6px); } }
body.fx-low .hue-voltaic .cz-svg, body.fx-low .pose-eureka .cz-svg, body.fx-low .pose-tinkering .cz-head { animation: none !important; }

/* ---- responsive reward art inside tiles: always fits the tile's art box ---- */
.pTile .pt-art { position: relative; overflow: hidden; }
.pTile .pt-art > .pr-ico { width: auto; height: min(70px, 100%); aspect-ratio: 1; }
.pTile .pt-art > .pp-card, .pTile .pt-art > .pp-frame { width: auto; height: min(100px, 100%); aspect-ratio: 5 / 7; }
.pTile .pt-art > .pp-comp { width: auto; height: min(96px, 100%); aspect-ratio: 1; }
.pTile .pt-art > .pp-banner { height: auto; max-height: 100%; aspect-ratio: 124 / 48; width: min(124px, 100%); }
.pTile .pt-art > .pp-board { height: auto; max-height: 100%; aspect-ratio: 16 / 9; width: min(120px, 100%); }
body.portrait .pTile .pt-art > .pr-ico { height: min(100px, 100%); } body.portrait .pTile .pt-art > .pp-card, body.portrait .pTile .pt-art > .pp-frame { height: min(150px, 100%); }
body.portrait .pTile .pt-art > .pp-comp { height: min(140px, 100%); } body.portrait .pTile .pt-art > .pp-banner { width: min(190px, 100%); } body.portrait .pTile .pt-art > .pp-board { width: min(190px, 100%); }
/* portrait: slimmer row labels, shorter tab label */
body.portrait .pRowLab { width: 76px; padding-left: 8px; } body.portrait .pRowLab span { font-size: 18px; }
body.portrait .tl-long { display: none; }
/* phones in landscape: a compact header so the track keeps its height; clear the floating nav bar */
body.mobile:not(.portrait) #season .body.passBody { bottom: 150px; gap: 10px; }
body.mobile:not(.portrait) .pHead { padding: 10px 16px; gap: 16px; }
body.mobile:not(.portrait) .pTitle h2 { font-size: 34px; margin: 0 0 4px; }
body.mobile:not(.portrait) .pMedal { width: 86px; height: 86px; } body.mobile:not(.portrait) .pMedal b { font-size: 40px; }
body.mobile:not(.portrait) .pXpSub > span:not(.pCatch) { display: none; }
body.mobile:not(.portrait) .pXpSub { justify-content: flex-start; }
body.mobile:not(.portrait) .pTile .pt-kind { display: none; }
body.mobile:not(.portrait) .pTile { padding: 8px 6px 32px; gap: 3px; }
body.mobile:not(.portrait) .pTile .pt-name { font-size: 18px; -webkit-line-clamp: 1; }
body.mobile:not(.portrait) .pNext ul, body.mobile:not(.portrait) .pNext small { display: none; }
body.mobile:not(.portrait) .pFoot { font-size: 17px; }
/* level-up card: each level shows its free + premium reward side by side */
.plu-l { display: grid; grid-template-columns: auto auto; gap: 8px; } .plu-l > span { grid-column: 1 / -1; }
body.mobile .plu-card { width: min(1200px, 94%); } body.mobile .plu-t { width: 250px; height: 170px; } body.mobile .plu-t small { font-size: 24px; }
body.mobile .plu-card .eyebrow { font-size: 22px; } body.mobile .plu-title { font-size: 50px; } body.mobile .plu-l > span { font-size: 20px; }
body.mobile .plu-act .btn { font-size: 24px; min-height: 64px; padding: 0 26px; }
body.mobile:not(.portrait) .plu-medal { width: 120px; height: 120px; margin-top: 4px; } body.mobile:not(.portrait) .plu-medal b { font-size: 54px; }
body.portrait .plu-l { grid-template-columns: 1fr 1fr; }