/* Approved pass presentation, contained within each owned dialog.
   Area art, live ink and controls preserve the reviewed source cascade.
   Native source: docs/passes-v1; runtime never imports the preview controller. */
@scope (.crown-pass-ui) {
:scope { font:14px/1.5 var(--font-ui); }

/* preview */
:scope{color-scheme:dark;--ivory:#f0e6ca;--ink:#173336;--gold:#c2ac7c;--muted:#a9b9ae}*{box-sizing:border-box}button,input,select{font:inherit}button{cursor:pointer;min-height:44px;border:0;color:inherit;background:none;touch-action:manipulation}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible{outline:none;box-shadow:none;filter:none}button:active:not(:disabled){transform:scale(.97)}[hidden]{display:none!important}.pass-shell{width:min(100%,540px);height:850px;max-height:calc(100dvh - 124px);min-height:510px;margin:0 auto 20px;display:flex;flex-direction:column;overflow:hidden;background:#193437;box-shadow:0 16px 80px #0007;border:1px solid #94845e66;border-radius:16px}.pass-switch{display:flex;flex:none;border-bottom:1px solid #bcaa7955;background:#10282d}.pass-switch button{flex:1;font-size:15px;font-weight:700;letter-spacing:.06em}.pass-switch button[aria-pressed=true]{color:#f2dda8;background:linear-gradient(0deg,#a88b4733,transparent);box-shadow:inset 0 -2px #cfb474}.pass-hero{height:176px;flex:none;position:relative;overflow:hidden;background:#465861}.pass-hero>img{height:100%;width:100%;object-fit:cover;object-position:65% 33%}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#102b30ec 0%,#122a30a1 37%,transparent 80%),linear-gradient(0deg,#173336 0%,transparent 45%)}.hero-copy{position:absolute;top:29px;left:25px;max-width:65%;text-shadow:0 2px 12px #001b20}.hero-copy>span{font-size:12px;color:#d6cda9;letter-spacing:.1em}.hero-copy h1{font-size:29px;line-height:1.25;margin:7px 0 9px;letter-spacing:.01em}.hero-copy p{font-size:12px;color:#c9d0c0;max-width:210px;margin:0}.pass-time{position:absolute;bottom:10px;right:18px;color:#d4d9ca;font-size:10px}.progress-panel{display:flex;align-items:center;gap:13px;padding:3px 23px 14px;flex:none;min-height:79px}.progress-panel #rank-crest{width:60px;flex:none}.progress-panel #rank-crest>.rank-emblem{width:60px;height:60px}.level-crest{display:grid;place-items:center;width:55px;height:55px;border:1px solid #bdab78;border-radius:50%;font-size:24px;font-weight:700;color:#f2db9d;background:radial-gradient(circle,#80744766,#18383d)}.progress-copy{flex:1;min-width:0}.progress-top,.progress-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px}.progress-top strong{font-size:16px}.progress-top>span{font-size:11px;color:#d8d2bc}.progress-bottom{font-size:10px;color:var(--muted)}.progress-bottom button{font-size:10px;min-height:30px;color:#e2cc99;white-space:nowrap}progress{display:block;width:100%;height:7px;appearance:none;border:0;border-radius:6px;overflow:hidden;margin:8px 0 0;background:#081f27}progress::-webkit-progress-bar{background:#09232a}progress::-webkit-progress-value{background:linear-gradient(90deg,#897d53,#dfcc91);border-radius:6px}progress::-moz-progress-bar{background:#c9b477}.section-switch{display:flex;align-items:center;gap:0;padding:0 20px;flex:none;border-bottom:1px solid #ac9d713e}.section-switch button[data-section]{padding:0 16px;font-weight:700;font-size:13px;border-bottom:2px solid transparent}.section-switch button[aria-pressed=true]{border-bottom-color:#dcc387;color:#eed49a}.section-switch #benefits{margin-left:auto;font-size:11px;color:#deca97}.section-switch #benefits span{margin-left:6px}.track-heading{display:grid;grid-template-columns:1fr 64px 1fr;text-align:center;font-size:11px;padding:10px 16px;background:#132e32;flex:none;color:#b5c2b7}.track-heading>span:last-child{color:#e1c992}.track-heading>span:nth-child(2){font-size:10px;color:#96aaa4}.pass-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#677665 transparent;padding:6px 14px 20px;background:linear-gradient(100deg,#1a3336,#203c3c)}.reward-row{display:grid;grid-template-columns:1fr 64px 1fr;align-items:stretch;position:relative;border-bottom:1px solid #c7ba931b;min-height:113px}.reward-cell{display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;min-width:0;padding:9px 7px;gap:1px}.reward-cell.premium{background:linear-gradient(90deg,#a78a4920,#baa16009)}.reward-cell[data-state=available]{background:radial-gradient(ellipse at center,#c0ac6759,transparent 80%)}.reward-cell[data-state=claimed]{opacity:.65}.reward-cell>button{display:flex;align-items:center;flex-direction:column;justify-content:center;width:100%;padding:0;min-height:60px}.reward-cell .art{height:50px;width:80px;display:grid;place-items:center;filter:drop-shadow(0 5px 5px #001c2377)}.art svg{width:46px;height:46px}.art img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}.reward-cell .reward-name{font-size:10px;line-height:1.4;text-align:center;color:#d9ddcb}.reward-cell .amount{font-size:15px;font-weight:750;color:#eee1be}.reward-state{font-size:10px;line-height:1.7;color:#acb9a9}.reward-cell[data-state=available] .reward-state{color:#f2d796}.reward-cell[data-state=claimed] .reward-state{color:#b8c3b1}.milestone{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;gap:3px;isolation:isolate}.milestone:before{content:'';position:absolute;width:1px;top:0;bottom:0;background:#a79b6944;z-index:-1}.milestone b{width:43px;height:36px;display:grid;place-items:center;background:#183638;border:1px solid #9c926455;border-radius:5px;font-size:12px;color:#bdc7b3}.milestone>small{font-size:9px;background:#1d383a;color:#c3caba}.reward-row[data-reached=true] .milestone b{background:#817450;color:#fff0c8;border-color:#c4b27d}.reward-row.major{margin:12px 0;min-height:171px;border:1px solid #b6a16c77;border-radius:10px;overflow:hidden;box-shadow:0 5px 12px #041d2833;background:linear-gradient(125deg,#47616466,transparent)}.reward-row.major .milestone b{border:0;background:none;width:61px;height:65px}.reward-row.major .rank-emblem{width:61px;height:65px}.reward-row.major .art{height:74px;width:115px}.reward-row.major .art img{border-radius:5px}.reward-row.major .reward-name{font-size:11px;color:#f3deaa}.reward-row.major .milestone>small{padding:2px 3px;color:#e1d2a7}.reward-row.major .art svg{height:57px;width:57px}.pass-footer{flex:none;background:#102b2f;border-top:1px solid #b09b6559;padding:10px 16px 14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.pass-footer>p{grid-column:1/-1;margin:0;font-size:10px;color:#afc0b4;text-align:center;min-height:15px}.pass-footer>button{border-radius:7px;font-size:13px;font-weight:700}.claim-all{color:#203735;background:linear-gradient(#eee7cf,#c7c5af);border:1px solid #e3d4a9}.premium-cta{color:#f2dcaa;border:1px solid #b6a070;background:linear-gradient(#84724d4d,#4e533936)}.quest-heading{font-size:12px;color:#d9d2b8;margin:14px 4px 7px}.quest-note{font-size:10px;color:#abc0b6;margin:6px 4px 12px}.quest{display:grid;grid-template-columns:1fr auto;gap:6px 15px;padding:16px 14px;margin:7px 0;background:#d4d0b912;border-radius:9px;border-left:3px solid #839681}.quest.premium{border-left-color:#c0a571;background:linear-gradient(90deg,#a48d4e2b,#83916d09)}.quest strong{font-size:12px;font-weight:600}.quest p{font-size:10px;color:#adbdaf;margin:0}.quest .points{grid-column:2;grid-row:1/3;align-self:center;color:#e7d196;font-size:15px;font-weight:700}.quest progress{height:4px;margin:3px 0;grid-column:1/-1}.quest .quest-get{grid-column:1/-1;min-height:35px;border:1px solid #9c976255;border-radius:4px;font-size:11px;color:#e6d396}:scope{padding:0;width:min(calc(100% - 28px),390px);max-height:85dvh;background:#173237;color:#e8e2cb;border:1px solid #a99364;border-radius:13px;box-shadow:0 16px 80px #000a;overflow:auto}:scope::backdrop{background:#020f18b8;backdrop-filter:blur(3px)}:scope header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:9px 12px 9px 22px;background:#19363b;border-bottom:1px solid #91815c44;z-index:1}:scope h2{font-size:18px;margin:0}:scope header button{width:44px;font-size:27px}#information-body{padding:22px;font-size:13px;color:#c6d0bf}#information-body p{margin:0 0 15px}#information-body ul{padding-left:20px;line-height:2}.info-art{width:100%;max-height:170px;object-fit:contain;border-radius:6px;margin-bottom:15px}.info-confirm{width:calc(100% - 44px);margin:0 22px 22px;border:1px solid #a9966e;border-radius:6px;color:#f0dca9}.notice{padding:12px;background:#bbab7214;border-radius:6px;font-size:11px;color:#bac7bc}@media(max-width:560px){.pass-shell{height:calc(100dvh - 143px);max-height:none;min-height:480px;border-radius:0;border-left:0;border-right:0;margin-bottom:0}.pass-hero{height:139px}.hero-copy{left:20px;top:18px}.hero-copy h1{font-size:25px}.hero-copy p{font-size:10px}.progress-panel{padding:0 17px 5px;min-height:70px;gap:9px}.progress-top strong{font-size:14px}.track-heading{padding-top:8px;padding-bottom:8px}.section-switch{padding:0 8px}.section-switch button[data-section]{padding:0 13px}.pass-scroll{padding-left:10px;padding-right:10px}.reward-row{min-height:111px}.reward-row.major{min-height:155px}.reward-row.major .art{width:95px;height:64px}.pass-footer{padding:7px 12px 10px}.progress-top>span{font-size:10px}}@media(prefers-reduced-motion:no-preference){}

@media(max-width:560px){.pass-shell{height:calc(100dvh - 80px)}.pass-hero{height:118px}.hero-copy{top:12px}.hero-copy h1{font-size:23px}.progress-panel{min-height:65px}.reward-cell .art{flex:none;overflow:hidden}.section-switch{min-height:40px}.section-switch button{min-height:40px}}
@media(max-width:560px) and (max-height:650px){.pass-hero{height:90px}.hero-copy h1{font-size:21px;margin:2px 0 3px}.hero-copy p{font-size:9px}.hero-copy>span{font-size:10px}.pass-time{font-size:9px;bottom:6px;right:10px}.progress-panel{min-height:58px;padding-bottom:0}.progress-panel #rank-crest,.progress-panel #rank-crest>.rank-emblem{width:48px;height:48px}.level-crest{width:44px;height:44px;font-size:21px}.progress-top strong{font-size:12px}.progress-bottom{font-size:9px}.progress-top>span{font-size:9px}.pass-switch button{font-size:13px}.pass-footer{padding-bottom:8px}.pass-footer>p{font-size:9px}}


/* painted */
/* Native painted sources stay intact. Nine-slice is presentation only. */
:scope{--pass-frame:url('assets/pass-ui-v1/reward-frame.png');--pass-button:url('assets/pass-ui-v1/claim-button.png');--pass-medal:url('assets/pass-ui-v1/level-medallion.png');--pass-pedestal:url('assets/pass-ui-v1/reward-pedestal.png')}

.pass-shell{background:linear-gradient(#0b202638,#091c2666),url('assets/pass-ui-v1/treasury-background.png') center/100% 100%;border-radius:0;border:0;isolation:isolate}
.pass-switch{background:#091e24c9;border:0;padding:5px 12px;gap:8px}
.pass-switch button{color:#b7c6be;min-height:42px}
.pass-switch button[aria-pressed=true]{background:none;border:12px solid transparent;border-image:var(--pass-frame) 250 fill / 18px;box-shadow:none;color:#f6e3b7;padding:0 6px}
.pass-hero{background:transparent;height:173px}
.pass-hero>img{opacity:.82;mask-image:linear-gradient(90deg,transparent,#000 38%),linear-gradient(0deg,transparent,#000 32%);mask-composite:intersect;object-position:65% 33%}
.hero-shade{background:linear-gradient(90deg,#0d242977,transparent 75%)}
.hero-copy{top:18px;left:10px;max-width:78%}
.hero-copy>span{margin-left:37px;font-size:11px;letter-spacing:.18em}
.hero-copy h1{width:294px;height:86px;display:grid;place-items:center;background:url('assets/pass-ui-v1/title-ribbon.png') center/100% auto no-repeat;color:#253b3c;text-shadow:0 1px #fff5;font-size:25px;margin:0 0 -4px;padding-bottom:1px}
.hero-copy p{margin-left:37px;max-width:225px;font-size:10px;color:#e0ddc9}
.pass-time{text-shadow:0 2px 8px #00131c;bottom:12px}
.progress-panel{background:linear-gradient(90deg,#0b2528c9,#19332d77,#0b25289c);padding-top:4px;min-height:81px}
.level-crest{background:var(--pass-medal) center/contain no-repeat;border:0;border-radius:0;width:66px;height:66px;padding-top:7px;font-size:20px}
progress{height:12px;overflow:visible;border:2px solid #8a8059;box-shadow:0 0 0 2px #041b2280,inset 0 1px 4px #0008;border-radius:8px;background:#091d25}
progress::-webkit-progress-bar{border-radius:5px;background:#091e28}
progress::-webkit-progress-value{background:linear-gradient(#f4e6ad,#b29b64);border-radius:5px;box-shadow:0 0 9px #e5d39840}
.section-switch{background:#0c2429b3;border:0;min-height:42px}
.track-heading{background:linear-gradient(90deg,#0c242999 48%,#101c25ed 53%);padding-top:8px;padding-bottom:8px;font-weight:650;color:#e7ddc3}
.track-heading>span:last-child{display:flex;align-items:center;justify-content:center;gap:5px}
.track-heading small{font-size:9px;color:#e1d3b2;font-weight:400}
.heading-lock{width:19px;height:19px;object-fit:contain}
.pass-shell[data-premium=true] .heading-lock{display:none}
.pass-shell[data-premium=true] .track-heading small{color:#b5d9bd}
.pass-scroll{background:linear-gradient(90deg,#132b2b38,#071a1f26);padding:4px 14px 25px}
.reward-row{border:0;min-height:142px;grid-template-columns:minmax(0,1fr) 66px minmax(0,1fr)}
.reward-cell{padding:9px 4px 12px;gap:0;isolation:isolate}
.reward-cell.premium{background:linear-gradient(90deg,#09182499,#18272670,#0b192460)}
.reward-cell>button{position:relative;min-height:78px;isolation:isolate}
.reward-cell>button:before{content:'';position:absolute;left:3%;right:3%;bottom:8px;height:47px;background:var(--pass-pedestal) center bottom/contain no-repeat;z-index:-1;opacity:.88}
.reward-cell .art{height:55px;width:82px;transform:translateY(-6px);filter:drop-shadow(0 5px 7px #0007)}
.reward-cell .amount{font-size:16px;text-shadow:0 2px 4px #041c24;line-height:1.1;z-index:2}
.reward-cell .reward-name{margin-top:1px;color:#f1e6c9;font-size:10px}
.reward-state{font-size:9px;line-height:1.6;margin-top:3px;text-align:center;color:#d4c8ad}
.reward-cell[data-state=available]{background:radial-gradient(ellipse at 50% 43%,#ead99443,transparent 70%)}
.reward-cell[data-state=available] .reward-state{background:#d7c58d;color:#243c38;border-radius:12px;padding:1px 9px;font-weight:700}
.reward-cell[data-state=claimed]{opacity:.62}
.reward-cell[data-state=locked] .art,.reward-cell[data-state=premium-locked] .art{filter:brightness(.53) saturate(.55);opacity:.8}
.reward-cell[data-state=locked]>button:before,.reward-cell[data-state=premium-locked]>button:before{filter:brightness(.55) saturate(.55)}
.lock-seal{pointer-events:none;object-fit:contain;width:31px;height:34px;filter:drop-shadow(0 3px 3px #0009);position:absolute;left:calc(50% - 15.5px);top:23px;z-index:3}
.reward-cell[data-state=premium-locked]{box-shadow:inset 0 0 28px #030c174a}
.milestone{gap:0}
.milestone:before{width:3px;background:linear-gradient(90deg,#4c574d,#d7c19077,#384d46)}
.milestone b,.reward-row[data-reached=true] .milestone b{width:66px;height:66px;background:var(--pass-medal) center/contain no-repeat;border:0;border-radius:0;color:#e9dfc2;font-size:12px;padding-top:7px;text-shadow:0 2px 3px #0009}
.reward-row[data-reached=false] .milestone b{filter:saturate(.5) brightness(.75)}
.milestone>small{background:#183132d9;padding:0 5px;border-radius:6px;font-size:9px;color:#dcd5b9;margin-top:-2px}
.reward-row.major{border:22px solid transparent;border-image:var(--pass-frame) 250 fill / 30px;margin:14px 0;min-height:189px;overflow:visible;border-radius:0;box-shadow:0 7px 15px #04162177;background:none;grid-template-columns:minmax(0,1fr) 66px minmax(0,1fr)}
.reward-row.major .reward-cell{padding:2px 0 4px}
.reward-row.major .reward-cell>button{min-height:95px}
.reward-row.major .milestone b{width:66px;height:70px;padding:0;background:none}
.reward-row.major .milestone b:not(:has(.rank-emblem)){background:var(--pass-medal) center/contain no-repeat;padding-top:7px}
.reward-row.major .art{width:100%;max-width:112px;height:73px}
.reward-row.major .lock-seal{top:35px;width:35px;height:39px;left:calc(50% - 17.5px)}
.reward-row.major .reward-name{font-size:10px}
.pass-footer{background:linear-gradient(#0c2527e8,#091c24fa);border-top:1px solid #a3906050;padding:8px 15px 14px;gap:8px}
.pass-footer>button,.info-confirm{background:none;border:14px solid transparent;border-image:var(--pass-frame) 250 fill / 22px;border-radius:0;min-height:49px;padding:0 6px;color:#f3e0b3;font-size:12px;text-shadow:0 1px 3px #0008}
.pass-footer>.claim-all{border-image-source:var(--pass-button);color:#243d3a;text-shadow:0 1px #fff7}
.pass-footer>button:disabled{filter:saturate(.5);opacity:.55}
.quest{position:relative;background:linear-gradient(110deg,#d6d1b91a,#09222c9c);border:0;border-radius:0;border-bottom:1px solid #ae9b6c44;padding:18px 12px}
.quest.premium{background:linear-gradient(100deg,#80754833,#071b27bb)}
.quest[data-locked=true]{padding-left:52px;background:#081822d9}
.quest[data-locked=true]>.lock-seal{left:10px;top:18px}
.quest[data-locked=true]>.quest-get{opacity:1;color:#c7b58c;border-color:#82745a}
:scope{border:28px solid transparent;border-image:var(--pass-frame) 250 fill / 38px;border-radius:0;background:transparent}
:scope header{background:none;padding:0 0 8px;min-height:50px}
:scope h2{font-size:17px;padding-left:5px}
:scope header button{padding:10px;flex:none}
:scope header svg{width:24px;height:24px}
#information-body{padding:14px 5px}
.info-confirm{margin:4px 0 0;width:100%}
@media(max-width:560px){.pass-hero{height:133px}.hero-copy{top:9px;left:5px}.hero-copy h1{width:254px;height:75px;font-size:22px}.hero-copy>span,.hero-copy p{margin-left:34px}.hero-copy p{font-size:9px}.progress-panel{padding:0 15px 5px;min-height:72px}.pass-shell{min-height:0}.pass-scroll{padding-inline:8px}.reward-row.major{border-width:14px;border-image-width:27px}.reward-row.major .reward-name{font-size:9px}.reward-row.major .art{max-width:95px}.pass-footer>button{font-size:11px;padding-inline:0}.reward-state{font-size:8px}.track-heading{grid-template-columns:1fr 66px 1fr;padding-inline:8px}.track-heading>span:last-child{gap:3px}}
@media(max-width:560px) and (max-height:650px){.pass-hero{height:89px}.hero-copy{top:3px;left:2px}.hero-copy>span{font-size:9px}.hero-copy h1{width:226px;height:65px;font-size:20px;margin-top:-5px}.hero-copy p{display:none}.pass-time{bottom:5px;font-size:8px}.progress-panel{min-height:58px}.pass-switch{padding-block:2px}.pass-switch button{min-height:40px}.track-heading{padding-block:5px}.pass-footer{padding:4px 10px 8px;gap:4px}.pass-footer>button{min-height:45px;font-size:10px}.pass-footer>p{font-size:8px}.section-switch #benefits{font-size:10px}}


/* refined */
/* R162 review: continuous veils behind medals, two independent pass dialogs. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}.launch-buttons{display:flex;gap:12px;margin:28px 0}.launch-buttons button{flex:1;border:16px solid transparent;border-image:var(--pass-frame) 250 fill/24px;min-height:65px;font-weight:700}
:scope.pass-dialog{width:min(100%,540px);max-width:none;height:min(94dvh,900px);max-height:none;min-height:0;padding:0;border:0;background:#0a2027;overflow:hidden;box-shadow:0 20px 80px #0009}
:scope.pass-dialog .pass-shell{width:100%;height:100%;max-height:none;min-height:0;margin:0;border:0;border-radius:0;box-shadow:none;background:linear-gradient(#071a2133,#071a2133),url('assets/pass-ui-v1/treasury-background.png') center/100% 100%}
.pass-titlebar{display:grid;grid-template-columns:54px 1fr 54px;align-items:center;flex:none;height:54px;background:#0c252be6;padding:0 5px}.pass-titlebar h2{grid-column:2;font-size:18px;text-align:center;margin:0}.pass-titlebar button{grid-column:3;width:44px;height:44px;padding:10px}.pass-titlebar svg{width:24px;height:24px}
:scope.pass-dialog .pass-hero{height:160px;flex:none}.pass-hero>img{opacity:1;mask-image:linear-gradient(0deg,transparent,#000 40%);mask-composite:add;object-position:65% 31%}.hero-shade{background:linear-gradient(0deg,#0a242944,transparent 55%)}
.hero-copy{inset:0;max-width:none;display:flex;align-items:center;justify-content:center}.hero-copy>span{position:absolute;left:20px;top:10px;margin:0;color:#efe5c6;text-shadow:0 1px 5px #000}.title-ribbon{position:relative;width:96%;aspect-ratio:3/1;background:url('assets/pass-ui-v1/title-ribbon-straight.png') center/contain no-repeat;flex:none}
.hero-copy .title-ribbon h1{position:absolute;left:18%;right:18%;top:35%;bottom:36%;width:auto;height:auto;display:flex;align-items:center;justify-content:center;padding:0;margin:0;background:none;color:#243c3b;text-shadow:0 1px #fff8;line-height:1.05;font-weight:750;white-space:nowrap;overflow:hidden;max-width:none;letter-spacing:0;text-align:center}
.pass-time{bottom:9px;right:18px;font-size:11px;color:#f1e5ca;text-shadow:0 1px 6px #000;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.progress-panel{padding:8px 20px 12px;gap:12px;min-height:88px;background:#0b252bdc;flex:none}.progress-panel [data-ui=rank-crest],.progress-panel [data-ui=rank-crest]>.rank-emblem{width:65px;height:65px;flex:none}.progress-panel .level-crest{width:65px;height:65px}.progress-top{min-height:34px}.progress-top strong{font-size:16px}.progress-top .score-badge{display:grid;place-items:center;color:#f4e2b7;font-size:17px;font-weight:750;min-width:68px;min-height:36px;padding:2px 13px;border:8px solid transparent;border-image:var(--pass-frame) 250 fill/13px;line-height:1;text-shadow:0 2px 3px #0005}
.progress-bottom{font-size:10px;color:#ddcfb0;margin-top:6px;font-variant-numeric:tabular-nums}.progress-copy progress{margin-top:5px}
.track-heading{flex:none;position:relative;z-index:1;min-height:35px;padding:7px 12px;background:#0a2028eb;grid-template-columns:1fr 66px 1fr;font-size:11px}.track-heading>span:last-child{position:relative}.heading-lock{width:20px;height:20px}.track-heading>span:nth-child(2){color:#cebfa1}
.reward-stage{position:relative;flex:1;min-height:0;isolation:isolate;background:#04111dcc;display:flex}.pass-scroll{position:relative;flex:1;min-width:0;min-height:0;padding:0 12px 18px;background:transparent;isolation:auto;scrollbar-width:none}.pass-scroll::-webkit-scrollbar{display:none}
.premium-veil{position:absolute;top:0;bottom:0;left:50%;right:0;background:#02081399;z-index:20;pointer-events:none}.pass-shell[data-premium=true] .premium-veil,.pass-shell[data-section=quests] .premium-veil{display:none}
.reward-row,.reward-row.major{position:relative;z-index:auto;isolation:auto;box-shadow:none}.reward-row{min-height:142px}.reward-row.major{margin:12px 0;min-height:180px}
.reward-cell,.reward-cell.premium{position:relative;isolation:auto;z-index:auto;background:none!important;box-shadow:none!important;opacity:1!important}.reward-cell>button{position:relative;isolation:auto;transform:none!important;z-index:auto}.reward-cell>button:before{z-index:auto;opacity:.85;pointer-events:none}.reward-cell .art{position:relative;z-index:1;opacity:1!important;filter:drop-shadow(0 5px 7px #0008)!important}.reward-cell .amount{position:relative;z-index:1;color:#f3e4be}.reward-cell .reward-name{position:relative;z-index:1;color:#e8dcc1}
.reward-cell[data-state=locked]>button:before,.reward-cell[data-state=premium-locked]>button:before{filter:none}.reward-cell[data-state=locked]:after{content:'';position:absolute;inset:0;background:#02081399;pointer-events:none;z-index:20}.reward-cell[data-state=premium-locked]:after{display:none}
.reward-cell .lock-seal{z-index:40;top:26px;left:calc(50% - 16px);width:32px;height:36px}.reward-row.major .lock-seal{top:35px;left:calc(50% - 17.5px);width:35px;height:39px}
.milestone{position:relative;z-index:30;isolation:isolate}.milestone b{font-variant-numeric:tabular-nums}.milestone:before{background:linear-gradient(90deg,#455345,#cbb78299,#3d5346)}.reward-row[data-reached=false] .milestone b{filter:saturate(.75) brightness(.9)}
.claimed-check{position:absolute;z-index:40;width:32px;height:30px;object-fit:contain;right:6%;top:25px;pointer-events:none;filter:drop-shadow(0 2px 3px #0009)}.reward-row.major .claimed-check{top:39px}.reward-cell[data-state=claimed] .art{opacity:.75!important}.reward-cell[data-state=claimed] .claimed-check{animation:claimed-pop .34s cubic-bezier(.16,.8,.28,1.28) both}
@keyframes claimed-pop{from{transform:scale(.35);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes reward-bump{0%,68%,100%{transform:translateY(-6px) scale(1)}78%{transform:translateY(-6px) scale(1.14)}88%{transform:translateY(-6px) scale(.98)}}
.reward-cell[data-state=available] .art{animation:reward-bump 2.1s ease-in-out infinite;transform-origin:center}
:scope[data-pass-paused=true] .reward-cell .art{animation-play-state:paused}:scope.pass-dialog:not([open]) .art{animation:none}
.pass-footer{display:block;flex:none;background:#0b252bf5;padding:10px 14px 12px;border-top:1px solid #a18c5555}.footer-actions{display:flex;gap:10px}.footer-actions>button{flex:1;min-height:51px;border:14px solid transparent;border-image:var(--pass-frame) 250 fill/22px;padding:0 3px;border-radius:0;background:none;font-size:12px;font-weight:700;color:#f0d9a6;white-space:nowrap}.footer-actions>.claim-all{border-image-source:var(--pass-button);color:#263b38}
.pass-footer .section-switch{display:flex;justify-content:center;gap:10px;min-height:0;padding:10px 12px 0;background:none;border:0}.section-switch button[data-section]{width:45%;flex:none;min-height:56px;font-size:19px;border:0;border-bottom:3px solid transparent;border-radius:8px;background:#537c792d;color:#a6bcb3;padding:0 15px}.section-switch button[aria-pressed=true]{background:linear-gradient(#b4a16e66,#b3a16e22);border-bottom-color:#dcc28a;color:#f5e2b5;box-shadow:inset 0 1px #e7cf9a44}
:scope#rank-pass .section-switch{display:none}
.quest{isolation:isolate}.quest[data-locked=true]{padding-left:12px;background:#0c2534}.quest[data-locked=true]:after{content:'';position:absolute;inset:0;background:#020813aa;z-index:20;pointer-events:none}.quest[data-locked=true]>.lock-seal{z-index:30;left:auto;right:12px;top:calc(50% - 18px);width:32px;height:36px}.quest[data-locked=true] .quest-get{display:none}.quest .claimed-check{position:static;display:block;margin:auto;width:28px;height:26px}.quest-get{position:relative}.quest .quest-get:has(.claimed-check){border:0;opacity:1}
@media(max-width:560px){:scope.pass-dialog{width:100%;height:100dvh;max-height:100dvh;margin:0}:scope.pass-dialog .pass-shell{height:100%}.pass-titlebar{height:54px}:scope.pass-dialog .pass-hero{height:141px}.hero-copy{inset:0}.title-ribbon{width:100%}.hero-copy>span{top:8px;left:16px;font-size:11px}.pass-time{font-size:10px;bottom:8px}.progress-panel{padding:5px 15px 9px;min-height:87px}.progress-top strong{font-size:14px}.progress-top .score-badge{font-size:16px}.pass-scroll{padding-inline:8px}.track-heading{padding-inline:8px}.reward-row.major{border-width:14px}.pass-footer{padding:9px 12px 12px}.footer-actions>button{font-size:11px}.pass-footer .section-switch{padding:8px 4px 0}.section-switch button[data-section]{min-height:53px;font-size:18px}}
@media(max-width:560px) and (max-height:650px){.pass-titlebar{height:48px}.pass-titlebar h2{font-size:16px}:scope.pass-dialog .pass-hero{height:107px}.hero-copy>span{font-size:9px;top:3px}.pass-time{bottom:4px;font-size:9px}.progress-panel{min-height:76px;padding:3px 12px 7px;gap:10px}.progress-panel [data-ui=rank-crest],.progress-panel [data-ui=rank-crest]>.rank-emblem,.progress-panel .level-crest{width:55px;height:55px}.progress-top strong{font-size:13px}.progress-top .score-badge{font-size:15px;min-height:31px}.progress-bottom{font-size:9px;margin-top:4px}.track-heading{min-height:30px;padding-block:5px;font-size:10px}.footer-actions>button{min-height:47px;font-size:10px}.pass-footer{padding:7px 9px 9px}.pass-footer .section-switch{padding-top:6px}.section-switch button[data-section]{min-height:48px;font-size:17px}}
@media(prefers-reduced-motion:reduce){.reward-cell[data-state=available] .art,.reward-cell[data-state=claimed] .claimed-check{animation:none}.reward-cell[data-state=available] .art{filter:drop-shadow(0 0 6px #e1d19a99)!important}}
:scope[data-hidden=true] .reward-cell .art{animation-play-state:paused}


/* rank-v4 */
/* R163: compact banner, exact gauge tip, clear 33-step track. */
:scope.pass-dialog .pass-hero{height:115px}.title-ribbon{width:min(100%,430px)}
.pass-time{display:flex;align-items:center;gap:5px;white-space:nowrap}.pass-time svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.progress-panel{gap:4px;padding:5px 10px 9px;min-height:101px}.rank-summary{width:86px;flex:none;display:flex;flex-direction:column;align-items:center}.rank-summary strong{font-size:11px;white-space:nowrap;line-height:1.2;margin-top:2px}.progress-panel .progress-copy{min-width:0;flex:1;padding-inline:32px}.score-rail{position:relative;padding-top:34px}.score-rail progress{display:block;width:100%;margin:0}.score-badge{position:absolute;top:0;transform:translateX(-50%);width:65px;height:29px;display:grid;place-items:center;padding-bottom:5px;font-size:13px;font-weight:750;color:#f8e6b5;line-height:1;isolation:isolate;white-space:nowrap;font-variant-numeric:tabular-nums}.score-badge:before{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/pass-ui-v2/score-pointer-black.png') 50% 48.5%/119.3% 259% no-repeat}.progress-bottom{margin-top:5px;position:relative}.progress-bottom>span:first-child{transform:translateX(-50%)}.progress-bottom>span:last-child{transform:translateX(50%)}
.reward-stage{background:#071b27a6}.milestone b{padding:0!important;position:relative;line-height:1;display:flex;align-items:center;justify-content:center;transform:translateY(-2px)}
@keyframes reward-bump{0%,100%{transform:translateY(-6px) scale(1)}50%{transform:translateY(-6px) scale(1.12)}}
.reward-cell[data-state=available] .art{animation-duration:.75s}
@media(max-width:560px){:scope.pass-dialog .pass-hero{height:104px}.progress-panel{padding-inline:8px;gap:0}.rank-summary{width:76px}.rank-summary strong{font-size:10px}.progress-panel .progress-copy{padding-inline:30px}.score-badge{width:60px;height:27px;font-size:12px}.score-rail{padding-top:31px}}
@media(max-width:560px) and (max-height:650px){:scope.pass-dialog .pass-hero{height:87px}.progress-panel{min-height:83px;padding-top:2px;padding-bottom:5px}.title-ribbon{width:98%}.rank-summary{width:70px}.rank-summary strong{font-size:9px}.score-badge{height:26px}.score-rail{padding-top:30px}.pass-time{bottom:3px}}

.score-badge{top:6px}.score-badge:before{background-size:120% 270%;background-position:50% 49.4%}


/* final */

:scope#information[data-benefits]{display:flex;flex-direction:column;width:min(calc(100% - 24px),400px);max-height:90dvh;background:linear-gradient(#0b282ce8,#0d292de8),url('assets/pass-ui-v1/treasury-background.png') center/cover;border-radius:0;border:1px solid #a99566}
:scope#information[data-benefits]:not([open]){display:none}:scope#information[data-benefits]>header{flex:none;display:grid;grid-template-columns:44px 1fr 44px;padding:7px 10px;background:#102d30e8}:scope#information[data-benefits]>header h2{grid-column:2;text-align:center;font-size:17px}:scope#information[data-benefits]>header button{grid-column:3;padding:10px}:scope#information[data-benefits] #information-body{min-height:0;overflow:auto;padding:0 18px 10px;scrollbar-width:thin}:scope#information[data-benefits] .info-confirm{flex:none;min-height:48px;margin:0 18px 16px;width:calc(100% - 36px);border:14px solid transparent;border-image:var(--pass-button) 250 fill/22px;border-radius:0;color:#243c38;font-weight:750;background:none;padding:0}
.benefit-banner{height:112px;margin:0 -18px 10px;position:relative;display:flex;align-items:end;justify-content:center;padding:15px;isolation:isolate}.benefit-banner:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent,#102d30);z-index:-1}.benefit-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%;z-index:-2}.benefit-banner>strong{font-size:21px;color:#fff0cc;text-shadow:0 2px 8px #000a}.benefit-row{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid #b5a37525}.benefit-row>img{width:56px;height:54px;object-fit:contain}.benefit-row strong{font-size:14px;color:#edddb7}.benefit-row p{font-size:11px;line-height:1.6;margin:5px 0 0!important;color:#b9c7bb}.benefit-scope{text-align:center;font-size:10px;color:#a5b8b0;margin:16px 0 4px!important}
:scope.pass-dialog .level-crest{padding:0;display:grid;place-items:center;line-height:1;transform:translateY(-2px)}
@media(max-height:650px){.benefit-banner{height:76px}.benefit-row{padding:9px 0}.benefit-row>img{height:45px}.benefit-banner>strong{font-size:19px}}

/* R166 correction: quiet header proportions and a legible score pointer. */
:scope.pass-dialog .title-ribbon{width:min(70%,280px)}
.hero-copy .title-ribbon h1{font-size:18px}
:scope.pass-dialog .progress-panel{min-height:82px;padding:4px 10px 7px;gap:2px}
.progress-panel [data-ui=rank-crest],.progress-panel [data-ui=rank-crest]>.rank-emblem,.progress-panel .level-crest{width:56px;height:56px}
:scope.pass-dialog .rank-summary{width:88px}
:scope.pass-dialog .rank-summary strong{font-size:10px;margin-top:0}
:scope.pass-dialog .progress-panel .progress-copy{padding-inline:28px;max-width:270px;margin-inline:auto}
:scope.pass-dialog .score-rail{padding-top:29px}
:scope.pass-dialog .score-rail progress{height:7px;border-width:1px;box-shadow:inset 0 1px 2px #0005;border-radius:5px}
:scope.pass-dialog .score-rail progress::-webkit-progress-value{background:linear-gradient(#dec993,#b29b64);box-shadow:none}
:scope.pass-dialog .score-badge{top:0;width:58px;height:27px;padding:0 0 5px;font-size:12px;font-weight:700;color:#f3e3bd;animation:score-pointer-bob 1.8s ease-in-out infinite;transform:translateX(-50%)}
:scope.pass-dialog .score-badge:before{background-image:url('assets/pass-ui-v2/score-pointer-black.png');background-size:107% 123%;background-position:50% 50%;}
:scope.pass-dialog .progress-bottom{margin-top:4px;font-size:9px}
@keyframes score-pointer-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-3px)}}
:scope[data-hidden=true] .score-badge,:scope[data-pass-paused=true] .score-badge{animation-play-state:paused}
:scope.pass-dialog:not([open]) .score-badge{animation:none}
:scope#rank-pass .milestone b,:scope#rank-pass .reward-row[data-reached=true] .milestone b{background:none;width:66px;height:58px;transform:none}
:scope#rank-pass .milestone b>.rank-emblem{width:62px;height:62px}
:scope#rank-pass .milestone>.milestone-label{font-size:9px;line-height:1.4;text-align:center;white-space:nowrap;padding:2px 4px;margin-top:0;background:#122a2df2;color:#eee2c3;border-radius:3px}
:scope#rank-pass .milestone>.milestone-threshold{font-size:10px;line-height:1.6;font-variant-numeric:tabular-nums;font-weight:600;margin-top:2px;padding:0 4px;color:#bacbc2;background:#122a2df2;border-radius:3px}
@media(max-width:560px) and (max-height:650px){
 :scope.pass-dialog .progress-panel{min-height:74px;padding:2px 8px 5px}
 :scope.pass-dialog .rank-summary{width:78px}
 .progress-panel [data-ui=rank-crest],.progress-panel [data-ui=rank-crest]>.rank-emblem,.progress-panel .level-crest{width:50px;height:50px}
 :scope.pass-dialog .rank-summary strong{font-size:9px}
 :scope.pass-dialog .score-badge{width:54px;height:25px;font-size:11px}
 :scope.pass-dialog .score-rail{padding-top:27px}
 :scope.pass-dialog .progress-panel .progress-copy{padding-inline:27px}
}
@media(prefers-reduced-motion:reduce){:scope.pass-dialog .score-badge{animation:none}}


/* components-v2 */
/* Native wide sprites: no nine-slice seams at compact button sizes. */
:scope#season-pass .title-ribbon{background-image:url('assets/pass-ui-v2/season-ribbon-gold.png')}
:scope#rank-pass .title-ribbon{background-image:url('assets/pass-ui-v2/rank-ribbon-crown.png')}
:scope#rank-pass .hero-copy .title-ribbon h1{left:20%;right:20%;top:35%;bottom:34%;color:#f3e5c2;text-shadow:0 1px 3px #06171d}
:scope#season-pass .hero-copy .title-ribbon h1{left:21%;right:21%;top:35%;bottom:36%;color:#394334}
:scope.pass-dialog .pass-footer{padding:8px 12px 10px}
:scope.pass-dialog .footer-actions,:scope.pass-dialog .pass-footer .section-switch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:center}
:scope.pass-dialog .pass-footer .section-switch{padding:8px 0 0;margin:0}
:scope.pass-dialog .footer-actions>button,:scope.pass-dialog .section-switch button[data-section]{position:relative;isolation:isolate;box-sizing:border-box;width:100%;height:44px;min-height:44px;border:0;border-image:none;background:none;box-shadow:none;border-radius:0;padding:0 18px;color:#dfdfca;font-size:12px;font-weight:700;white-space:nowrap}
:scope.pass-dialog .section-switch button[data-section]{font-size:16px}
:scope.pass-dialog .footer-actions>button:before,:scope.pass-dialog .section-switch button[data-section]:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('assets/pass-ui-v2/season-tab.png') 50% 43%/104% 184% no-repeat;filter:brightness(.86)}
:scope.pass-dialog .footer-actions>.claim-all{color:#2c423e}
:scope.pass-dialog .footer-actions>.claim-all:before{background-image:url('assets/pass-ui-v2/claim-button.png');background-size:102% 190%;background-position:50% 49.3%;filter:none}
:scope.pass-dialog .section-switch button[aria-pressed=true]{color:#fff3c6;text-shadow:0 1px 4px #0008}
:scope.pass-dialog .section-switch button[aria-pressed=true]:before{filter:brightness(1.3);}
:scope.pass-dialog .section-switch button[aria-pressed=true]:after{content:'';position:absolute;bottom:4px;left:26%;right:26%;height:2px;background:linear-gradient(90deg,transparent,#ecdfac,transparent);box-shadow:0 0 7px #d2e9d499;pointer-events:none}
:scope.pass-dialog .notification-dot{right:0;top:0;transform:translate(25%,-25%);width:11px;height:11px}
:scope.pass-dialog .notification-dot[data-type=ad]{width:19px;height:16px}
:scope#season-pass .progress-panel [data-season-points=header]{width:52px;height:52px;min-height:44px;padding:3px;background:none;border:0;box-shadow:none;overflow:visible}
:scope#season-pass .progress-panel [data-season-points=header] .reward-artwork{width:100%;height:100%}
:scope#season-pass .progress-panel .rank-summary strong{font-size:9px}
/* Quest groups share the same rhythm; premium membership does not split the list. */
.quest-toolbar{display:flex;justify-content:flex-end;padding:3px 2px 0}
.quest-reroll-toggle{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;min-height:44px;color:#e5d4a3;padding:0 10px}
.quest-reroll-toggle:before{content:'⟳';font-size:23px;line-height:1}
.quest-reroll-toggle[aria-pressed=true]{color:#a8e4e4}
:scope.pass-dialog .quest-group-header{position:static;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 2px;margin:0;background:none;border:0;border-bottom:1px solid #b8c6b02e}
.quest-group-header .quest-heading{font-size:15px;color:#f0e1bd;margin:0}
.quest-reset-time{font-size:10px;line-height:1.4;color:#abc5c5;white-space:nowrap;font-variant-numeric:tabular-nums}
.quest-reset-time:before{content:'◷';font-size:14px;margin-right:5px}
.quest-group{margin:0 0 18px}
:scope.pass-dialog .quest{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 70px;grid-template-rows:auto 18px 7px 32px;gap:5px 12px;align-items:center;padding:13px 12px;margin:8px 0;background:linear-gradient(110deg,#294748e8,#173438d9);border:1px solid #b9c9b52e;border-radius:7px;overflow:hidden;isolation:isolate}
:scope.pass-dialog .quest.premium{background:linear-gradient(115deg,#535744aa,#223f41df);border-color:#bca87552}
.quest-name{grid-column:1;grid-row:1;font-size:12px;line-height:1.5;font-weight:650;color:#e9e7d5}
.quest-progress-label{grid-column:1;grid-row:2;color:#acbfbc;font-size:10px;font-variant-numeric:tabular-nums}
:scope.pass-dialog .quest>progress{grid-column:1;grid-row:3;width:100%;height:4px;border:0;box-shadow:none;margin:0}
:scope.pass-dialog .quest>.quest-reward{grid-column:2;grid-row:1/5;width:64px;gap:3px;z-index:1}
:scope.pass-dialog .quest-reward .reward-icon{width:60px;height:60px;min-height:44px;padding:5px;background:radial-gradient(ellipse,#518c8533,transparent 75%);border:0;box-shadow:none}
.quest-reward .reward-amount{font-size:12px;color:#e1eedf}
:scope.pass-dialog .quest>.quest-get{grid-column:1;grid-row:4;justify-self:start;align-self:center;min-height:44px;width:auto;min-width:76px;padding:0 10px;margin:0;border:0;border-radius:0;background:none;color:#eee1b1;font-size:11px;font-weight:700;text-align:left}
:scope.pass-dialog .quest>.quest-get:disabled{opacity:.5;color:#b6c7c2}
:scope.pass-dialog .quest[data-complete=true][data-claimed=false][data-locked=false] .quest-reward .reward-artwork{animation:quest-reward-bump .75s ease-in-out infinite}
@keyframes quest-reward-bump{50%{transform:scale(1.1)}}
.quest[data-complete=true][data-claimed=false] .quest-get:before{content:'';display:inline-block;width:5px;height:5px;vertical-align:middle;background:#f5d989;border-radius:50%;margin-right:7px;box-shadow:0 0 9px #f5d989}
.quest-complete-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#020607bc;z-index:45;pointer-events:none}
.quest-complete-overlay>.claimed-check{position:static!important;width:42px;height:38px;right:auto;top:auto;animation:claimed-pop .3s ease-out both}
:scope.pass-dialog .quest[data-claimed=true]>.quest-get{visibility:hidden}
:scope.pass-dialog .quest[data-locked=true]:after{inset:0;border-radius:inherit}
:scope.pass-dialog .quest[data-locked=true]>.lock-seal{left:calc(50% - 16px);right:auto;top:calc(50% - 18px);width:32px;height:36px;z-index:40}
[data-reroll-mode=true] .quest[data-reroll-eligible=false]{filter:brightness(.48)}
[data-reroll-mode=true] .quest[data-reroll-eligible=true]{cursor:pointer;border-color:#cce1bc;box-shadow:inset 0 0 0 1px #dceccb66,0 0 13px #9edbb338;animation:reroll-focus 1.2s ease-in-out infinite}
@keyframes reroll-focus{50%{box-shadow:inset 0 0 0 1px #e2fbd0aa,0 0 16px #9edbb366}}
/* The shared information sheet stays framed; acquisition is full-screen in reward-ui.css. */
:scope.reward-info-dialog{background:#102d32;border:1px solid #b8aa7a;border-radius:8px;color:#eee4c8}
:scope.reward-info-dialog .dialog-close{position:absolute;right:10px;top:10px;width:44px;height:44px;padding:11px;z-index:3}
:scope.reward-info-dialog .dialog-close svg{width:22px;height:22px}
:scope.reward-info-dialog .reward-footer button{background:#e7ddc3;color:#243b39;border-radius:5px}
@media(max-width:350px){:scope.pass-dialog .pass-footer{padding-inline:9px}:scope.pass-dialog .footer-actions,:scope.pass-dialog .pass-footer .section-switch{gap:8px}:scope.pass-dialog .footer-actions>button{font-size:11px}:scope.pass-dialog .section-switch button[data-section]{font-size:15px}.quest-reset-time{font-size:9px}}
@media(prefers-reduced-motion:reduce){[data-reroll-mode=true] .quest,.quest-reward .reward-artwork{animation:none!important}.quest-complete-overlay>.claimed-check{animation:none}}
:scope[data-hidden=true] [data-reroll-mode=true] .quest{animation-play-state:paused}

/* Mat artwork owns its rounded visible silhouette, not its letterboxed container. */
:scope.pass-dialog .art>img[src*="playmats"]{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:9px;border:1px solid #d3ba8177;box-shadow:0 4px 9px #020b10aa}
:scope.reward-info-dialog .dialog-close{color:#efe3c4}


/* ivory */
/* Preview material revision: charcoal is dominant; ivory/gold are accents.
   Historical filename retained for existing review links. Full-width surfaces
   use native borderless material, never the popup border-image atlas. */
:scope {
 color-scheme:dark;
 --pass-material:url('assets/pass-ui-charcoal/charcoal-material.png');
 --pass-band:url('assets/pass-ui-charcoal/charcoal-band.png');
 --pass-pedestal:url('assets/pass-ui-charcoal/reward-pedestal.png');
 --pass-score-plaque:url('assets/pass-ui-charcoal/score-plaque.png');
 --pass-frame:url('assets/pass-ui-charcoal/popup-panel.png');
 --pass-button:url('assets/pass-ui-v2/claim-button.png');
 --kit-panel:#302e2e; --kit-ink:#eee7da; --kit-quiet-ink:#c5bfb4; --kit-rule:#b6a27745;
 --kit-panel-main:url('assets/pass-ui-charcoal/popup-panel.png');
 --kit-panel-inset:url('assets/pass-ui-charcoal/popup-panel.png');
 --kit-button-primary:url('assets/pass-ui-v2/claim-button.png');
 --kit-button-secondary:url('assets/pass-ui-v2/claim-button.png');
 --kit-slot:url('assets/pass-ui-charcoal/charcoal-material.png');
}
:scope.pass-dialog { background:#302e2e;color:var(--kit-ink);border-image:none; }
:scope.pass-dialog .pass-shell { background:#302e2e; }
:scope#rank-pass .pass-shell { --pass-scene:url('assets/pass-ui-v2/rank-background.png');background:var(--pass-scene) center/cover; }
:scope#season-pass .pass-shell { --pass-scene:url('assets/pass-ui-v2/season-background.png');background:var(--pass-scene) center/cover; }
:scope.pass-dialog .pass-titlebar,:scope.pass-dialog .progress-panel,:scope.pass-dialog .track-heading,:scope.pass-dialog .pass-footer {
 border-image:none;background:#302e2e var(--pass-band) center/100% 100%;color:var(--kit-ink);border-color:#b6a27735;
}
:scope.pass-dialog .pass-titlebar { border:0; }
.pass-titlebar h2 { color:#f0e9df;font-weight:650; }
.pass-titlebar button { color:#e8e0d0;background:none;border-image:none; }
.pass-titlebar button:focus-visible { outline:none; }
:scope.pass-dialog .hero-shade { background:linear-gradient(0deg,#292729d9,transparent 64%); }
:scope.pass-dialog .hero-copy>span,:scope.pass-dialog .pass-time { padding:3px 9px;background:#171616c9;box-shadow:0 0 10px 4px #17161642;border-radius:4px;color:#f5eddd;text-shadow:0 1px 2px #000; }
:scope.pass-dialog .hero-copy>span { letter-spacing:.06em; }
:scope.pass-dialog .pass-time { right:10px;bottom:5px;gap:6px; }
:scope.pass-dialog .pass-time svg { flex:none;width:15px;height:15px;stroke:#fff4da;stroke-width:2; }
:scope#rank-pass .title-ribbon { background-image:url('assets/pass-ui-v2/rank-ribbon-black.png'); }
:scope#rank-pass .hero-copy .title-ribbon h1 { left:20%;right:20%;top:39%;bottom:37%;color:#f4ead6; }
:scope#season-pass .hero-copy .title-ribbon h1 { left:21%;right:21%;top:34%;bottom:44%;color:#332d23; }
:scope.pass-dialog .hero-copy .title-ribbon h1 { transform:translateY(-1px);font-weight:700;text-shadow:none; }
:scope.pass-dialog .score-badge::before { background-image:url('assets/pass-ui-v2/score-pointer-black.png');background-size:112% 212%;background-position:50% 50%; }
.rank-summary strong,.progress-bottom { color:#d3cabc;text-shadow:none; }
:scope.pass-dialog .reward-stage { background:#302e2e var(--pass-material) center/500px; }
:scope.pass-dialog .reward-stage::before { content:'';position:absolute;inset:0;background:var(--pass-scene) center/cover;opacity:.10;z-index:-1;pointer-events:none; }
:scope.pass-dialog .track-heading>span { color:#dfd5c4; }
:scope.pass-dialog .track-heading>span:nth-child(2) { color:#ad9e83; }
/* No row owns a stacking context: the one premium veil must cover its entire
   column, below milestones and locks, including reward labels and amounts. */
:scope.pass-dialog .reward-row.major { border:0;border-image:none;padding:0;margin:0;background:var(--pass-band) center/100% 100%;box-shadow:none; }
:scope.pass-dialog .reward-cell .amount,:scope.pass-dialog .reward-cell .reward-name { color:#f0e9dc;text-shadow:0 1px 3px #151311; }
:scope.pass-dialog .reward-cell .amount { font-size:16px; }
:scope.pass-dialog .reward-cell>button::before { background:var(--pass-pedestal) center bottom/contain no-repeat;height:47px;opacity:1;border:0;border-image:none;filter:none; }
:scope.pass-dialog .reward-cell:not(.premium)[data-state=locked]::after { display:none; }
:scope.pass-dialog .reward-cell:not(.premium)[data-state=locked] .art { opacity:1!important; }
:scope.pass-dialog .reward-cell.premium[data-state=locked]::after { background:#14131566; }
.premium-veil { background:#13121499; }
.milestone::before { width:1px;background:linear-gradient(90deg,#bfa57666,#ddc49499,#bfa57666); }
:scope#rank-pass .milestone>.milestone-label { width:84px;max-width:none;min-height:19px;display:grid;place-items:center;padding:1px 2px;margin:1px -9px 0;background:var(--pass-band) center/100% 100%;color:#f1e9da;font-size:9px;font-weight:600;border:0;border-image:none;border-radius:0;text-shadow:0 1px 2px #000;white-space:nowrap; }
:scope#rank-pass .milestone>.milestone-threshold { display:grid;place-items:center;width:49px;height:21px;margin:3px 0 0;padding:0 2px 1px;border:0;border-image:none;border-radius:0;background:var(--pass-score-plaque) center/105% 154% no-repeat;color:#32271a;font-size:10px;font-weight:750;text-shadow:none; }
/* Dedicated action and tab sprites are connected below after native QA. */
:scope.pass-dialog .footer-actions>.claim-all,:scope.pass-dialog .footer-actions>.premium-cta { color:#332d23;text-shadow:none; }
:scope.pass-dialog .footer-actions>.claim-all::before,:scope.pass-dialog .footer-actions>.premium-cta::before { border:0;border-image:none;background:var(--pass-button) 50% 49.3%/102% 190% no-repeat;filter:none; }
:scope.pass-dialog .section-switch button[data-section] { color:#d2c8b7;text-shadow:0 1px 2px #000; }
:scope.pass-dialog .section-switch button[data-section]::before { border:0;border-image:none;background:url('assets/pass-ui-charcoal/tab-idle.png') center/100% 190% no-repeat;filter:none; }
:scope.pass-dialog .section-switch button[aria-pressed=true] { color:#f3e7c7; }
:scope.pass-dialog .section-switch button[aria-pressed=true]::before { background-image:url('assets/pass-ui-charcoal/tab-selected.png');filter:none; }
:scope.pass-dialog .section-switch button[aria-pressed=true]::after { display:none; }
:scope.pass-dialog .quest,:scope.pass-dialog .quest.premium { border:0;border-image:none;background:var(--pass-band) center/100% 100%; }
.quest-group-header .quest-heading,.quest-name { color:#eee6d8; }
.quest-reset-time,.quest-progress-label { color:#c2baac; }
:scope.pass-dialog .quest-group-header { border-color:#b7a06b55; }
.quest-reroll-toggle,:scope.pass-dialog .quest>.quest-get { position:relative;border:0;border-image:none;background:var(--pass-button) center/100% 180% no-repeat;color:#30291d;text-align:center;text-shadow:none; }
.quest-reroll-toggle[aria-pressed=true] { color:#30291d; }
:scope.pass-dialog .quest>.quest-get:disabled { color:#625b50; }
:scope.pass-dialog .quest-reward .reward-icon { border:0;border-image:none;background:none; }
.quest-reward .reward-amount { color:#e8ddc8; }
.reward-artwork>.item-painterly-icon { display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain; }
:scope.pass-dialog .art>img[src*="cosmetics/coins/"],.reward-artwork[data-family=coins]>.reward-art-image { border-radius:50%; }
.quest[data-complete=true][data-claimed=false] .quest-get::before { display:none; }
[data-reroll-mode=true] .quest[data-reroll-eligible=true] { box-shadow:0 0 9px #b38c4966; }
@keyframes reroll-focus { 50% {box-shadow:0 0 15px #d4b768aa;} }
/* Slim gauge artwork. Never use a button/window sheet in a progress track. */
:scope.pass-dialog progress,:scope.pass-dialog .quest>progress { appearance:none;-webkit-appearance:none;border:0;border-image:none;border-radius:0;background:none;box-shadow:none; }
:scope.pass-dialog progress::-webkit-progress-bar { border:0;border-image:none;background:url('assets/pass-ui-charcoal/slider-track.png') center/112% 1130% no-repeat;box-shadow:none;border-radius:0; }
:scope.pass-dialog progress::-webkit-progress-value,:scope.pass-dialog .score-rail progress::-webkit-progress-value { border:0;border-image:none;background:url('assets/pass-ui-charcoal/slider-fill.png') center/112% 1130% no-repeat;box-shadow:none;border-radius:0; }
:scope.pass-dialog progress::-moz-progress-bar { border:0;border-image:none;background:url('assets/pass-ui-charcoal/slider-fill.png') center/112% 1130% no-repeat;box-shadow:none;border-radius:0; }
:scope#information,:scope.reward-info-dialog { background:#302e2e var(--pass-material) center/500px;color:var(--kit-ink);border-image:var(--pass-frame) var(--kit-slice) fill/36px/0 stretch; }
:scope#information header { background:var(--pass-band) center/100% 100%;color:var(--kit-ink); }
#information-body,.notice { color:var(--kit-quiet-ink); }
:scope.reward-info-dialog .dialog-close { color:var(--kit-ink); }
:scope#information .info-confirm,:scope.reward-info-dialog .reward-footer button { color:#302b21;border:0;border-image:none;background:var(--pass-button) center/100% 190% no-repeat; }
:scope#information[data-benefits] { padding:8px 0 6px;border:1px solid transparent;border-image:var(--pass-frame) var(--kit-slice) fill/36px/0 stretch;background:#302e2e var(--pass-material) center/500px;color:var(--kit-ink); }
:scope#information[data-benefits]>header { background:var(--pass-band) center/100% 100%;border-color:var(--kit-rule);color:var(--kit-ink); }
:scope#information[data-benefits]>header :is(h2,button) { color:var(--kit-ink);text-shadow:none; }
:scope#information[data-benefits] .benefit-banner { margin-inline:0; }
:scope#information[data-benefits] .benefit-banner::after { background:linear-gradient(transparent,#0009); }
:scope#information[data-benefits] .benefit-banner>strong { padding:4px 12px;border:0;border-image:none;background:var(--pass-band) center/100% 100%;color:var(--kit-ink);text-shadow:none; }
:scope#information[data-benefits] .benefit-row { padding-inline:8px;border:0;border-image:none;background:var(--pass-band) center/100% 100%; }
:scope#information[data-benefits] .benefit-row strong { color:var(--kit-ink); }
:scope#information[data-benefits] :is(.benefit-row p,.benefit-scope) { color:var(--kit-quiet-ink);word-break:keep-all;overflow-wrap:break-word; }
:scope#information[data-benefits] .info-confirm { border:0;border-image:none;color:#30291d;background:var(--pass-button) center/100% 190% no-repeat;box-shadow:none;text-shadow:none; }
/* The fullscreen receipt keeps its original ivory title/confirm ink. */
.reward-receipt-dialog .reward-receipt-title,.reward-receipt-dialog .reward-footer button { color:#292724; }
:scope#season-pass .milestone b,:scope#season-pass .reward-row.major .milestone b { width:48px;height:48px;padding:0;border:0;border-image:none;background:url('assets/pass-ui-v2/level-medallion-black.png') center/116% no-repeat;color:#fff4d4;font-size:15px;line-height:1;text-shadow:0 1px 2px #000;filter:none;display:grid;place-items:center; }
:scope#season-pass .reward-row[data-reached=true] .milestone b { color:#fff4d4; }
:scope#season-pass .milestone>small { padding:2px 4px;border:0;border-image:none;background:var(--pass-band) center/100% 100%;color:var(--kit-ink);text-shadow:none; }
/* One SVG surface samples nine original regions with continuous joins. */
:scope.pass-dialog [data-painted-skin],.premium-offer [data-painted-skin] { position:relative;isolation:isolate;background:none; }
:scope.pass-dialog [data-painted-skin]::before,.premium-offer [data-painted-skin]::before { display:none; }
.painted-button-skin { position:absolute;inset:1px;display:block;z-index:-1;pointer-events:none; }
:scope.pass-dialog .footer-actions { grid-template-columns:minmax(0,1fr); }
/* Scene paintings remain legible. All dimming is pure black + alpha. */
:scope.pass-dialog .reward-stage { background:linear-gradient(rgba(0,0,0,.56),rgba(0,0,0,.56)),var(--pass-scene) center/cover; }
:scope.pass-dialog .reward-stage::before { display:none; }
:scope.pass-dialog .reward-row.major { background:none; }
:scope.pass-dialog .reward-row.major::before { content:'';position:absolute;inset:0;background:var(--pass-band) center/100% 100%;opacity:.26;pointer-events:none; }
.premium-veil { background:rgba(0,0,0,.76); }
:scope.pass-dialog .reward-cell .lock-seal { z-index:5; }
:scope.pass-dialog .reward-cell.premium[data-state=locked]::after { background:rgba(0,0,0,.4);z-index:6; }
:scope.pass-dialog .hero-shade { background:linear-gradient(0deg,rgba(0,0,0,.65),transparent 64%); }
:scope.pass-dialog .hero-copy>span,:scope.pass-dialog .pass-time { background:rgba(0,0,0,.76);box-shadow:0 0 10px 4px #0004; }
.quest[data-locked=true]::after { background:rgba(0,0,0,.70); }
:scope.pass-dialog progress::-webkit-progress-bar { background-size:111.84% 1096.97%; }
:scope.pass-dialog progress::-webkit-progress-value,:scope.pass-dialog .score-rail progress::-webkit-progress-value { background-size:113.24% 1248.28%; }
:scope.pass-dialog progress::-moz-progress-bar { background-size:113.24% 1248.28%; }
:scope.reward-acquisition { --kit-ink:#292724; }

:scope.pass-dialog .quest[data-locked=true]>.lock-seal { z-index:5; }
:scope.pass-dialog .quest[data-claimed=true]::after { background:rgba(0,0,0,.74); }
:scope::backdrop { background:rgba(0,0,0,.72); }

:scope.reward-info-dialog::backdrop,:scope#information::backdrop { background:rgba(0,0,0,.75); }
:scope.reward-info-dialog .dialog-close>.button-icon { fill:currentColor; }
:scope#rank-pass .milestone>.milestone-label { height:19px;padding:0 3px 1px;background:url('assets/pass-ui-charcoal/tier-name-chip.png') 50% 47.85%/109.2% 181% no-repeat; }
:scope#season-pass .hero-copy .title-ribbon h1 { top:36%;bottom:42%; }
:scope.pass-dialog .section-switch button[aria-pressed=true] { color:#332e25;text-shadow:none; }
:scope.pass-dialog .section-switch button[aria-pressed=true] .painted-button-skin { filter:none; }

/* Behind fixed headers the actual pass painting stays faintly visible. */
:scope.pass-dialog .pass-titlebar,:scope.pass-dialog .progress-panel,:scope.pass-dialog .track-heading,:scope.pass-dialog .pass-footer { background:rgba(0,0,0,.79);backdrop-filter:blur(4px);border-image:none;box-shadow:none; }
:scope.pass-dialog .pass-titlebar,:scope.pass-dialog .progress-panel,:scope.pass-dialog .track-heading { border:0; }
:scope.pass-dialog .quest,:scope.pass-dialog .quest.premium { background:var(--pass-material) center/500px; }
/* Elia's seasonal bands are ivory/gold material; rank keeps black dimming. */
:scope#season-pass .pass-titlebar,:scope#season-pass .progress-panel,:scope#season-pass .track-heading,:scope#season-pass .pass-footer { background:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),url('assets/pass-ui-charcoal/season-ivory-material.png') center/cover;color:#3a3124;backdrop-filter:none;border-image:none; }
:scope#season-pass .pass-titlebar h2,:scope#season-pass .pass-titlebar button,:scope#season-pass .rank-summary strong,:scope#season-pass .progress-bottom,:scope#season-pass .track-heading>span { color:#3a3124;text-shadow:none; }
:scope#season-pass .track-heading>span:nth-child(2) { color:#6b5b40; }

:scope.pass-dialog .pass-hero,:scope.pass-dialog .pass-footer { border:0; }

:scope#season-pass .milestone-number { display:block;line-height:1;transform:translateY(-1px); }

/* Full-screen panels keep an accessible, thumb-reachable native back button. */
:scope#rank-pass .footer-actions { grid-template-columns:44px minmax(0,1fr);gap:8px; }
:scope#season-pass .section-switch { display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1fr);gap:8px;padding-inline:0; }
:scope.pass-dialog .pass-back,:scope.pass-dialog .footer-actions>.pass-back { display:block;position:relative;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;border-image:none;box-shadow:none;background:url('assets/pass-ui-charcoal/back-button.png') 50% 48.4%/124% 124% no-repeat; }
:scope.pass-dialog .pass-back::before,:scope.pass-dialog .pass-back::after { display:none; }
:scope.pass-dialog .pass-back:active { transform:translateY(1px) scale(.97); }
:scope.pass-dialog .pass-back:focus-visible { outline:none; }
:scope#season-pass .section-switch button[data-section] { width:100%;min-width:0;padding:0 8px; }

/* Repaint only the return symbol; the approved original gold frame stays intact. */
:scope.pass-dialog .pass-back::after {
 content:'';display:block;position:absolute;inset:0;pointer-events:none;
 background:url('assets/pass-ui-charcoal/return-button-face.png') 50% 48.4%/124% 124% no-repeat;
 mask-image:linear-gradient(to right,transparent 6.47px,#000 7.47px,#000 calc(100% - 6.77px),transparent calc(100% - 5.77px)),linear-gradient(to bottom,transparent 7.94px,#000 8.94px,#000 calc(100% - 9.21px),transparent calc(100% - 8.21px));
 mask-composite:intersect;
}

:scope.reward-info-dialog .reward-type-label {
 display:inline-flex;align-items:center;justify-content:center;min-width:90px;min-height:24px;padding:2px 15px;
 border:0;border-image:none;border-radius:0;box-shadow:none;
 background:url('assets/pass-ui-charcoal/tier-name-chip.png') 50% 47.85%/109.2% 181% no-repeat;color:#eee7d8;
}

/* Every stage uses the same pitch, including cosmetic milestones. A shared
   art slot also keeps pedestals, amounts and labels on identical baselines. */
:scope.pass-dialog [data-ui=rewards] { display:grid;grid-auto-rows:142px;gap:0; }
:scope.pass-dialog .reward-row,
:scope.pass-dialog .reward-row.major { height:100%;min-height:0;margin:0;padding:0;grid-template-rows:minmax(0,1fr); }
:scope.pass-dialog .reward-row .reward-cell { min-height:0;padding:6px 0; }
:scope.pass-dialog .reward-row .reward-cell>button {
 display:grid;grid-template-rows:73px 18px;align-content:center;justify-items:center;
 height:95px;min-height:95px;flex:none;
}
:scope.pass-dialog .reward-row .reward-cell .art { grid-row:1;align-self:center; }
:scope.pass-dialog .reward-row .reward-cell .amount { grid-row:2;align-self:center; }
:scope.pass-dialog .reward-row .reward-name { height:28px;flex:none;font-size:10px;line-height:14px; }
:scope.pass-dialog .reward-row .lock-seal { top:26px;left:calc(50% - 16px);width:32px;height:36px; }
:scope.pass-dialog .reward-row .claimed-check { top:25px; }


/* premium-offer */
:scope.pass-dialog .pass-footer .footer-actions { grid-template-columns:1fr; }
:scope.pass-dialog .premium-offer {
 position:absolute;z-index:32;left:calc(50% + 36px);right:9px;top:50%;transform:translateY(-50%);
 display:flex;flex-direction:column;align-items:center;gap:3px;
 max-height:calc(100% - 18px);padding:3px 4px;color:#f3eddf;text-align:center;
 filter:drop-shadow(0 2px 5px #0008);isolation:isolate;
}
.premium-offer-title { flex:none;display:block;max-width:calc(100% - 28px);align-self:flex-start;padding-left:5px;font-size:12px;line-height:28px;white-space:nowrap; }
.premium-offer-info { position:absolute;z-index:34;right:4px;top:4px;width:44px;height:44px;min-height:44px;padding:10px;color:#decda8;background:none;border:0; }
.premium-offer-info svg { display:block;width:24px;height:24px; }
.premium-offer-rewards { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 4px;width:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:3px 1px; }
.premium-offer-rewards::-webkit-scrollbar { display:none; }
.premium-offer-reward { display:flex;flex-direction:column;align-items:center;min-width:0;gap:0; }
:scope.pass-dialog .premium-offer .premium-offer-item { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:100%;height:auto;min-width:44px;min-height:44px;max-width:none;aspect-ratio:auto;padding:0;border:0;border-image:none;border-radius:0;background:none;box-shadow:none; }
:scope.pass-dialog .premium-offer .premium-offer-item::before,:scope.pass-dialog .premium-offer .premium-offer-item::after { display:none; }
.premium-offer-summary { flex:none;display:flex;flex-direction:column;align-items:center;gap:3px; }
.premium-item-info-total { display:block;margin:8px 0 0;color:var(--kit-ink);font-size:14px;line-height:1.4; }
.premium-offer-reward .art { width:35px;height:34px;max-width:100%;display:grid;place-items:center; }
.premium-offer-reward .art img { width:100%;height:100%;object-fit:contain; }
.premium-offer-reward strong { font-size:12px;line-height:18px;font-weight:800;color:#fff6e3; }
.premium-offer-feature { grid-column:1/-1; }
.premium-offer-feature .art { width:100%;height:48px; }
.premium-offer-feature[data-reward-id^="coin-"] img { width:46px;height:46px;border-radius:50%; }
.premium-offer-feature[data-reward-id^="mat-"] .art { width:76%;height:auto;aspect-ratio:3/2; }
.premium-offer-feature[data-reward-id^="mat-"] img { border-radius:8px; }
.premium-offer-feature strong { font-size:10px;line-height:17px;font-weight:600; }
.premium-offer-more { flex:none;min-height:22px;height:22px;padding:0 18px;font-size:25px;line-height:15px;color:#dfc997; }
.premium-offer-value { flex:none;font-size:15px;line-height:23px;color:#f1d596;white-space:nowrap; }
.premium-offer-buy { flex:none;position:relative;isolation:isolate;width:100%;height:44px;min-height:44px;padding:0 14px;border:0;background:none;color:#332d23;font-size:12px;font-weight:800; }
.premium-offer-buy::before { content:'';position:absolute;inset:0;z-index:-1;background:url('assets/pass-ui-charcoal/action-ivory.png') 50% 49.333%/101.744% 189.713% no-repeat;pointer-events:none; }
.pass-shell[data-premium=true] .premium-offer,.pass-shell[data-section=quests] .premium-offer { display:none; }
@media(max-width:350px){:scope.pass-dialog .premium-offer{left:calc(50% + 37px);right:6px;padding-inline:1px;}.premium-offer-title{font-size:11px;padding-left:1px;}.premium-offer-reward .art{width:33px;height:32px;}.premium-offer-reward strong{font-size:12px;}.premium-offer-feature .art{width:100%;height:44px;}.premium-offer-feature strong{font-size:9px;}.premium-offer-feature[data-reward-id^="mat-"] .art{width:80%;height:auto;}.premium-offer-feature[data-reward-id^="coin-"] img{width:43px;height:43px;}.premium-offer-buy{padding-inline:8px;}}

/* A short phone still shows all four reward silhouettes without hiding the mat. */
@media(max-height:650px) {
 :scope.pass-dialog .premium-offer { max-height:calc(100% - 4px);gap:0;padding-block:0; }
 .premium-offer-rewards { flex:none;overflow:visible;gap:0 4px;padding:0; }
 .premium-offer-reward:not(.premium-offer-feature) { transform:translateX(-36px); }
 :scope.pass-dialog .premium-offer .premium-offer-reward:not(.premium-offer-feature) .premium-offer-item { width:44px; }
 .premium-offer-summary { flex-direction:row-reverse;gap:3px;min-height:20px; }
 .premium-offer-more { min-height:20px;height:20px;width:24px;padding:0; }
 .premium-offer-reward .art { width:24px;height:24px; }
 .premium-offer-reward strong { font-size:10px;line-height:12px; }
 .premium-offer-feature .art { width:26px;height:26px; }
 .premium-offer-feature[data-reward-id^="coin-"] img { width:26px;height:26px; }
 .premium-offer-feature[data-reward-id^="mat-"] .art { width:48px;height:32px; }
 .premium-offer-feature strong { display:none; }
 .premium-offer-value { font-size:13px;line-height:18px; }
}


/* soft-boundaries */
/* One continuous rank underlay avoids fractional-pixel seams between separately
   composited translucent/backdrop-filter bands. Hero and rewards paint their
   own existing scenes above it; labels and controls are never masked. */
:scope#rank-pass,:scope#rank-pass .pass-shell {
 overflow:clip;
 overflow-clip-margin:2px;
}
:scope#rank-pass .pass-shell { position:relative;background:none; }
:scope#rank-pass .pass-shell::before {
 content:'';
 position:absolute;
 inset:-2px;
 z-index:-1;
 pointer-events:none;
 background:linear-gradient(rgba(0,0,0,.79),rgba(0,0,0,.79)),var(--pass-scene) center/cover;
}
:scope#season-pass .pass-shell {
 background:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),url('assets/pass-ui-charcoal/season-ivory-material.png') center/100% 100%;
}
:scope.pass-dialog :is(.progress-panel,.track-heading,.pass-footer) {
 position:relative;
 isolation:isolate;
 z-index:2;
 border:0;
 border-image:none;
 box-shadow:none;
 background:none;
 backdrop-filter:none;
}
/* The illustration includes the former title band's space. Show its native
   upper crop, keeping ribbon scale and the progress/scroll boundary unchanged. */
:scope.pass-dialog .pass-hero { padding:0;height:169px; }
:scope.pass-dialog .pass-hero>img { object-position:65% 0; }
:scope#rank-pass .pass-hero>img { object-position:65% 45%; }
:scope#season-pass .pass-hero>img { object-position:65% 22%; }
:scope.pass-dialog .hero-copy { padding-top:54px; }
:scope.pass-dialog .title-ribbon { transform:translateY(-8px); }
:scope.pass-dialog .pass-hero>img,:scope.pass-dialog .hero-shade {
 mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 6px),transparent 100%);
}
:scope.pass-dialog :is(.progress-panel,.track-heading,.pass-footer)::before {
 content:'';
 position:absolute;
 left:-1px;
 right:-1px;
 z-index:-1;
 pointer-events:none;
 border:0;
 box-shadow:none;
 backdrop-filter:none;
}
:scope#rank-pass :is(.progress-panel,.pass-footer) { background:none; }
:scope#rank-pass .pass-footer::before {
 height:6px;
 mask-image:none;
}
:scope#rank-pass .progress-panel::before { content:none; }
:scope#rank-pass .pass-footer::before {
 top:-6px;
 background:linear-gradient(to bottom,transparent,rgba(0,0,0,.523));
}

/* Native material reaches beyond horizontal raster coverage, then the shell
   clips it to the viewport. The 6px mask is solely the intended section fade. */
:scope#season-pass :is(.progress-panel,.pass-footer) { background:none; }
:scope#season-pass :is(.progress-panel,.pass-footer)::before {
 top:0;
 bottom:0;
 background:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),url('assets/pass-ui-charcoal/season-ivory-material.png') center/100% 100%;
}
:scope#season-pass :is(.progress-panel,.pass-footer)::before {
 top:-3px;
 mask-image:linear-gradient(to bottom,transparent 0,#000 6px,#000 100%);
}
:scope#season-pass .pass-footer::before { bottom:-1px; }

/* Column headings use unframed material, distinct from the panels above. */
:scope#rank-pass .track-heading,:scope#season-pass .track-heading { background:none;align-items:center; }
:scope.pass-dialog .track-heading::before {
 top:-3px;
 bottom:-3px;
 background:linear-gradient(rgba(0,0,0,.16),rgba(0,0,0,.16)),url('assets/pass-ui-charcoal/charcoal-material.png') center/100% 100%;
 mask-image:linear-gradient(to bottom,transparent 0,#000 6px,#000 calc(100% - 6px),transparent 100%);
}
:scope#season-pass .track-heading::before {
 background:linear-gradient(rgba(0,0,0,.06),rgba(0,0,0,.06)),url('assets/pass-ui-charcoal/season-header-material.png') center/100% 100%;
}
:scope.pass-dialog .track-heading>span {
 display:flex;
 align-items:center;
 justify-content:center;
 min-height:21px;
 padding:0;
 font-size:11px;
 line-height:1;
}

/* Only the black backing is softened; the clock and lettering stay sharp. */
:scope.pass-dialog .hero-copy>span,:scope.pass-dialog .pass-time {
 isolation:isolate;background:none;box-shadow:none;border:0;border-radius:0;
 height:21px;display:flex;align-items:center;line-height:15px;
}
:scope.pass-dialog .hero-copy>span { top:auto;bottom:8px;left:16px; }
:scope.pass-dialog .hero-copy>span::before,:scope.pass-dialog .pass-time::before {
 content:'';position:absolute;inset:-2px -5px;z-index:-1;pointer-events:none;
 background:rgba(0,0,0,.8);border-radius:6px;filter:blur(4px);
}
:scope.pass-dialog .pass-time { bottom:8px;right:14px; }
@media(max-width:560px) { :scope.pass-dialog .pass-hero { height:158px; } }
@media(max-width:560px) and (max-height:650px) {
 :scope.pass-dialog .pass-hero { height:135px; }
 :scope.pass-dialog .hero-copy { padding-top:48px; }
}


/* quest-polish */
/* One continuous crop carries the inner grain. Nine-slicing is restricted to
   the painted outer rim: its internal sampling joins never cross the surface.
   The original raster, corner geometry and registration remain unchanged. */
:scope#season-pass .quest {
 background:url('assets/quest-ui-v1/quest-row-charcoal.png') center/115% 190% no-repeat;
}
:scope#season-pass .quest::before {
 content:'';position:absolute;inset:0;z-index:-1;box-sizing:border-box;
 padding:3px;border-radius:inherit;
 border-image:url('assets/quest-ui-v1/quest-row-charcoal.png') 192 fill / 18px / 6.5px 2px stretch;
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor;
 mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 mask-composite:exclude;
 pointer-events:none;
}
/* The dedicated native name chip is independent of the quest's dark surface. */
:scope#season-pass .quest.premium { padding-top:34px; }
:scope#season-pass .quest-premium-label {
 position:absolute;top:7px;right:8px;z-index:21;
 display:grid;place-items:center;width:82px;height:21px;padding:0 5px 1px;
 background:url('assets/pass-ui-charcoal/tier-name-chip.png') 50% 47.85%/109.2% 181% no-repeat;
 color:#f3e6c9;font-size:10px;font-weight:650;line-height:1;white-space:nowrap;
 pointer-events:none;
}
:scope#season-pass .quest[data-locked=true]>.lock-seal {
 z-index:21;left:calc(50% - 16px);right:auto;top:calc(50% - 18px);
 width:32px;height:36px;opacity:1;filter:none;pointer-events:none;
}
/* Locked rows already own a black overlay; a parent filter would also dim
   the central lock and premium label during reroll selection. */
:scope#season-pass [data-reroll-mode=true] .quest[data-locked=true] { filter:none; }

/* Compact mission → reward → claim. The progress ink shares the gauge box. */
:scope#season-pass .quest {
 grid-template-columns:minmax(0,1fr) 48px 52px;
 grid-template-rows:minmax(18px,auto) 20px;
 gap:6px 8px;padding:12px 10px;min-height:78px;
}
:scope#season-pass .quest.premium { padding-top:32px; }
:scope#season-pass .quest-name { grid-column:1;grid-row:1;align-self:center;min-width:0;font-size:12px;line-height:17px; }
:scope#season-pass .quest.has-reroll .quest-name { padding-right:34px; }
:scope#season-pass .quest-meter { grid-column:1;grid-row:2;position:relative;height:20px;min-width:0; }
:scope#season-pass .quest-meter>progress { display:block;width:100%;height:20px;margin:0; }
:scope#season-pass .quest-progress-label {
 position:absolute;inset:0;display:grid;place-items:center;
 color:#fff8e5;font-size:10px;font-weight:700;line-height:1;
 text-shadow:0 1px 2px #000,0 0 2px #000,0 0 3px #000;
 padding:0 0 1px;pointer-events:none;
}
:scope#season-pass .quest>.quest-reward { grid-column:2;grid-row:1/3;justify-self:center;align-self:center;width:48px;gap:0; }
:scope#season-pass .quest-reward .reward-icon { width:44px;height:44px;min-width:44px;min-height:44px;padding:2px; }
:scope#season-pass .quest-reward .reward-amount { font-size:11px;line-height:14px; }
:scope#season-pass .quest>.quest-get {
 grid-column:3;grid-row:1/3;justify-self:center;align-self:center;
 width:52px;min-width:52px;height:44px;min-height:44px;padding:0 0 1px;
 font-size:11px;line-height:1;text-align:center;isolation:isolate;
 border:0;border-image:none;border-radius:0;box-shadow:none;background:none;
 color:#30291d;
}
:scope#season-pass .quest>.quest-get::after {
 content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:var(--quest-claim-art,var(--pass-button)) center/100% 100% no-repeat;
}
:scope#season-pass .quest-reroll {
 grid-column:1;grid-row:1;justify-self:end;align-self:center;
 width:44px;min-width:44px;height:44px;min-height:44px;
 margin:-13px -5px -13px 0;padding:11px;border:0;border-image:none;
 background:none;box-shadow:none;z-index:2;
}
:scope#season-pass .quest-reroll img { display:block;width:22px;height:22px;object-fit:contain;pointer-events:none; }
:scope#season-pass .quest-reroll:disabled { opacity:.3; }
:scope#season-pass .quest>.quest-get::after {
 background-image:url('assets/quest-ui-v2/quest-claim-button.png');
 background-size:107.73% auto;background-position:50% 50%;
}


/* safe-area */
/* This surface consumes raw device insets exactly once. Its paintings and
   footer backing still reach every viewport edge. */
:scope.pass-dialog {
 --pass-top-space:calc(var(--safe-top) + 8px);
 --pass-bottom-space:calc(var(--safe-bottom) + 8px);
 --pass-hero-height:169px;
 --pass-progress-side:10px;
 --pass-footer-side:12px;
 --pass-safe-mid:calc(50% + (var(--safe-left) - var(--safe-right))/2);
}
:scope.pass-dialog .pass-shell { container-type:inline-size; }
:scope#rank-pass { --pass-hero-art:url('assets/optimized/cosmetics-playmats-b1-095-hero-768.1b8d9f9e60ac.webp');--pass-hero-y:.45; }
:scope#season-pass { --pass-hero-art:url('assets/optimized/cosmetics-playmats-b1-001-hero-768.90ab27aa5493.webp');--pass-hero-y:.22; }
:scope.pass-dialog .pass-hero {
 --pass-hero-render-height:calc(100cqw * 2 / 3);
 --pass-hero-crop:calc((var(--pass-hero-render-height) - var(--pass-hero-height)) * var(--pass-hero-y));
 height:calc(var(--pass-hero-height) + var(--pass-top-space));
}
/* Reuse only the native painting's preceding top crop as an extended backing.
   The original-size image below is not rescaled: its face moves the full inset.
   Source rows meet at the inset. Extend the backing underneath the image by
   2px so fractional raster edges cannot expose the shell between the crops. */
:scope.pass-dialog .pass-hero::before {
 content:'';position:absolute;inset:0 0 auto;height:calc(var(--pass-top-space) + 2px);pointer-events:none;
 background-image:var(--pass-hero-art);background-repeat:no-repeat;background-position:0 0;
 background-size:100% calc(var(--pass-hero-render-height) * (var(--pass-top-space) / var(--pass-hero-crop)));
}
:scope.pass-dialog .pass-hero>img {
 position:absolute;top:var(--pass-top-space);left:0;width:100%;height:var(--pass-hero-height);
}
:scope.pass-dialog .hero-copy,:scope.pass-dialog .hero-shade {
 top:var(--pass-top-space);bottom:auto;height:var(--pass-hero-height);
}
:scope.pass-dialog .hero-copy>span { left:calc(16px + var(--safe-left)); }
:scope.pass-dialog .pass-time { right:calc(14px + var(--safe-right)); }
:scope.pass-dialog .progress-panel {
 padding-left:calc(var(--pass-progress-side) + var(--safe-left));
 padding-right:calc(var(--pass-progress-side) + var(--safe-right));
}
:scope.pass-dialog .track-heading {
 padding-left:calc(8px + var(--safe-left));padding-right:calc(8px + var(--safe-right));
}
:scope.pass-dialog .pass-scroll {
 padding-left:calc(8px + var(--safe-left));padding-right:calc(8px + var(--safe-right));
}
:scope.pass-dialog .pass-footer {
 padding-left:calc(var(--pass-footer-side) + var(--safe-left));
 padding-right:calc(var(--pass-footer-side) + var(--safe-right));
 padding-bottom:calc(10px + var(--pass-bottom-space));
}
:scope.pass-dialog .premium-veil { left:var(--pass-safe-mid); }
:scope.pass-dialog .premium-offer {
 left:calc(var(--pass-safe-mid) + 36px);right:calc(9px + var(--safe-right));
 top:calc(50% + 24px);max-height:calc(100% - 52px);
}
:scope.pass-dialog .premium-offer-info { right:calc(4px + var(--safe-right)); }
@media(max-width:560px) { :scope.pass-dialog { --pass-hero-height:158px; } }
@media(max-width:350px) {
 :scope.pass-dialog { --pass-footer-side:9px; }
 :scope.pass-dialog .premium-offer { left:calc(var(--pass-safe-mid) + 37px);right:calc(6px + var(--safe-right)); }
}
@media(max-width:560px) and (max-height:650px) {
 :scope.pass-dialog { --pass-hero-height:135px;--pass-progress-side:8px; }
 /* Scroll only the showcase when the safe viewport is shorter. The purchase
    button and every information target retain their 44px minimum. */
 .premium-offer-rewards { flex:1 1 auto;min-height:44px;overflow-y:auto;overscroll-behavior:contain; }
 .premium-offer-reward:not(.premium-offer-feature) { transform:none; }
}


/* boundary-polish */
/* Keep the scene's exact cover registration. Only its paint fades into the
   panel above; quest text, column headings and hit targets remain unmasked. */
:scope#season-pass .reward-stage { background:none; }
:scope#season-pass .reward-stage::before {
 content:'';display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(rgba(0,0,0,.56),rgba(0,0,0,.56)),var(--pass-scene) center/cover;
 opacity:1;
 mask-image:linear-gradient(to bottom,transparent 0,#000 6px,#000 100%);
}
/* Fade only the decorative boundary. The reward dim must cover every row
   continuously, including rewards scrolling directly beneath the header. */
:scope#season-pass .premium-veil {
 mask-image:none;
}


/* benefits-polish */
/* Headers and reward entries share their existing surface instead of adding
   a separate charcoal-band texture. Native popup frames and pedestals remain. */
:scope#information > header,
:scope#information[data-benefits] > header,
:scope.reward-info-dialog > .reward-header,
:scope#information[data-benefits] .benefit-banner > strong,
:scope#information[data-benefits] .benefit-row,
:scope.pass-dialog .reward-row.major::before { background:none; }

:scope#information > header,
:scope#information[data-benefits] > header,
:scope.reward-info-dialog > .reward-header { border:0;border-image:none; }

:scope#information[data-benefits] .benefit-row > .reward-icon {
 width:56px;height:56px;min-width:44px;min-height:44px;
 padding:0;border:0;border-image:none;background:none;box-shadow:none;outline:none;
}

/* A transparent fixed header needs its own body scroller, including ordinary
   reward information whose longer descriptions can exceed a small viewport. */
:scope#information[open] { display:flex;flex-direction:column;overflow:hidden; }
:scope#information > header,
:scope#information > .info-confirm { flex:none; }
:scope#information > #information-body { min-height:0;overflow:auto; }


/* fill-polish */
/* Native satin gold replaces only the fill's paint. The accepted fill alpha
   remains the silhouette; the trough, dimensions and live ink are untouched. */
:scope.pass-dialog progress::-webkit-progress-value,
:scope.pass-dialog .score-rail progress::-webkit-progress-value {
 background:url('assets/pass-ui-charcoal/slider-fill-satin-inlay.png') center/100% 100% no-repeat;
 -webkit-mask:url('assets/pass-ui-charcoal/slider-fill.png') 50% 50%/113.24% 1248.28% no-repeat;
 mask:url('assets/pass-ui-charcoal/slider-fill.png') 50% 50%/113.24% 1248.28% no-repeat;
 mask-mode:alpha;
}
:scope.pass-dialog progress::-moz-progress-bar {
 background:url('assets/pass-ui-charcoal/slider-fill-satin-inlay.png') center/100% 100% no-repeat;
 mask:url('assets/pass-ui-charcoal/slider-fill.png') 50% 50%/113.24% 1248.28% no-repeat;
 mask-mode:alpha;
}


:scope.pass-dialog{border-radius:0;}
/* An unusually short safe viewport scrolls the offer instead of painting its
   fixed 44px controls underneath the footer. The information target stays fixed. */
:scope.pass-dialog .premium-offer{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ad945f transparent;}
:scope.pass-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border-radius:0;background:#000;}
:scope.pass-dialog .pass-shell{width:min(100%,560px);height:100%;margin:0 auto;}
}