/* Actual round/square renderer: university-rounded-preview.css.
   Components only supply the existing game palettes and state here. Their
   border widths, padding, hit areas, artwork and layout remain untouched.
   Light frames: interface-v2/pastel-ui native paper/lavender/gold/blue sprites;
   dark panels: interface-remaster.css; action/disabled: style-button.css. */
#mockup{
 --frame-paper:#faf3ff;--frame-line:#a599b7;--frame-ink:#352844;
 --frame-disabled:#ded9df;--frame-disabled-line:#aaa3ad;--frame-disabled-ink:#655d68;
 --frame-mint:#c6f5df;--frame-mint-line:#76ab99;--frame-mint-ink:#285f54;
 --frame-lavender:#e3d3ff;
}
html[data-ui-theme=dark] #mockup{
 --frame-paper:#222528;--frame-line:#42474d;--frame-ink:#e8e9e7;
 --frame-disabled:#34373b;--frame-disabled-line:#51565b;--frame-disabled-ink:#a8afb7;
 --frame-mint:#59de98;--frame-mint-line:#42474d;--frame-mint-ink:#1b1d1f;
 --frame-lavender:#292c30;
}
#mockup [data-rounded-frame]{--rounded-face:var(--frame-paper);--rounded-edge:var(--frame-line)}
/* The University progress palette and shared renderer also cover every Album
   and quest bar, including the overview, detail hero and individual tiers. */
#mockup [data-rounded-progress]{
 --rounded-face:#e1d4ed;--rounded-edge:#aa8fb8;--progress-fill:#82c9a3;
 --progress-text:#352844;--progress-filled-text:#352844;color:var(--progress-text);
}
html[data-ui-theme=dark] #mockup [data-rounded-progress]{
 --rounded-face:#222528;--rounded-edge:#42474d;--progress-fill:#59de98;
 --progress-text:#e8e9e7;--progress-filled-text:#1b1d1f;
}
#mockup [data-rounded-progress]>span{background:var(--progress-fill)}
#mockup [data-rounded-progress] .album-track-label{color:var(--progress-text)}
/* A single counter with contrasting ink on each side of the moving fill.
   The duplicate paint is aria-hidden; dimensions and progress stay unchanged. */
#mockup [data-rounded-progress] .album-track-label::after{
 content:attr(data-caption);position:absolute;inset:0;display:grid;place-items:center;
 color:var(--progress-filled-text);clip-path:inset(0 calc(100% - var(--progress-value)) 0 0);
}
#mockup :is(.album-tile,.album-milestones,.album-bonus,.quest-rules,.gift-row){color:var(--frame-ink)}
#mockup .album-open{border-radius:var(--trial-radius)}
#mockup .album-category-indicator{--rounded-face:var(--frame-lavender)}
#mockup .album-reward-box{
 --rounded-face:var(--frame-disabled);--rounded-edge:var(--frame-disabled-line);
 color:var(--frame-disabled-ink);
}
#mockup .album-reward-box[data-reward-state=ready]{
 --rounded-face:var(--frame-mint);--rounded-edge:var(--frame-mint-line);
 color:var(--frame-mint-ink);
}
#mockup .album-reward-box[data-reward-state=ready]:active{filter:brightness(.96)}
/* Focus is visible without replacing the designed outline. */
#mockup :is([data-rounded-frame],.album-open):focus-visible{filter:brightness(1.12)}
html body #album-rewards .style-button{border-radius:var(--trial-radius,14px)}

/* The offers use the game themes; only the Pass path remains a night sky. */
#mockup .pass-subscriptions{
 --pass-paper:var(--frame-paper);--pass-edge:var(--frame-line);--pass-ink:var(--frame-ink);
 --pass-muted:#74677f;--pass-lit:#805d21;--pass-gold:#bba369;
 background:var(--bg);color:var(--frame-ink);
}
html[data-ui-theme=dark] #mockup .pass-subscriptions{
 --pass-muted:#a8afb7;--pass-lit:#ffe199;--pass-gold:#e1c572;
}
#mockup .pass-offers-header h2{color:var(--frame-ink)}
#mockup .pass-offer-periods button{color:var(--frame-ink)}
#mockup .pass-offer-periods button[aria-pressed=true]{--rounded-face:var(--frame-lavender);--rounded-edge:var(--pass-gold);color:var(--pass-lit)}
#mockup .subscription-tier[aria-checked=true]{--rounded-edge:var(--pass-gold)}
#mockup .subscription-tier[data-offer-tier=silver][aria-checked=true]{--rounded-edge:#87afc6}
html[data-ui-theme=dark] #mockup .subscription-tier[data-offer-tier=silver][aria-checked=true]{--rounded-edge:#8dc9f2}