/* Illustrated world and responsive controls. */
.app-main:before{background:var(--design-ink,var(--green));opacity:var(--design-opacity,.09)}
.ww-design-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:20px 0}.ww-design-controls label{display:grid;gap:12px;color:var(--ink);font-size:13px}.ww-design-controls output{font:600 12px var(--mono);color:var(--muted)}.ww-design-controls input{width:100%;accent-color:var(--green)}.ww-design-controls button{justify-self:start}.ww-design-controls p{margin:0;font-size:12px}.ww-hue-slider{appearance:none;background:linear-gradient(90deg,#d66565,#d9c565,#6bb679,#659ad2,#b376cd,#d66565);height:10px;border-radius:8px}.ww-hue-slider::-webkit-slider-thumb{appearance:none;width:20px;height:20px;background:var(--card);border:3px solid var(--ink);border-radius:50%}
.wonder-banner{position:relative;width:100%;aspect-ratio:1200/260;border-radius:12px;overflow:hidden;min-height:65px}.wonder-banner svg{display:block;width:100%;height:100%}.ww-item-stage:has(.wonder-banner){padding:0;min-height:140px}.ww-item-stage>.wonder-banner{aspect-ratio:2.7;min-height:140px;height:100%;border-radius:8px}.wonder-sticker{background:transparent!important;padding:0!important;border-radius:0!important}.wonder-sticker svg{stroke-width:2}
.wonder-home-scene{position:relative;margin:10px 0 24px;border-radius:18px;overflow:hidden;min-height:180px}.wonder-home-scene>.wonder-banner{position:absolute;inset:0;height:100%;border-radius:0;opacity:.88}.wonder-home-scene>div:last-child{position:relative;z-index:1;display:grid;gap:9px;max-width:530px;padding:30px;color:#f7f0d6;background:linear-gradient(90deg,#203d3bed,transparent)}.wonder-home-scene small{font:11px var(--mono);letter-spacing:.12em}.wonder-home-scene strong{font:600 clamp(23px,3vw,35px) var(--serif)}.wonder-home-scene span{font-size:13px;line-height:1.6}
#page-profile .profile-grid{grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:20px;align-items:start}#page-profile .profile-card{overflow:hidden;padding:0}#page-profile .profile-card>:not(.wonder-own-banner){margin:0;padding:24px}#page-profile .profile-card>.profile-identity{padding-top:12px}.wonder-own-banner:empty{display:none}.wonder-own-banner>.wonder-banner{border-radius:0}.wonder-profile-default{position:relative}.wonder-profile-default .wonder-banner{border-radius:0;opacity:.7}.wonder-profile-default>span{position:absolute;bottom:12px;left:24px;color:#fff2ce;background:#302b36c9;padding:7px 12px;border-radius:5px;font:italic 16px var(--serif)}.ww-profile>.wonder-banner{margin-bottom:16px;height:130px}.leaderboard-row{position:relative;isolation:isolate;background-image:linear-gradient(color-mix(in srgb,var(--card) 88%,transparent),color-mix(in srgb,var(--card) 88%,transparent)),var(--learner-banner,none);background-size:cover;background-position:center}
.wonder-season-hero{position:relative;isolation:isolate;overflow:hidden;padding:26px;border-radius:16px;background:color-mix(in srgb,var(--green) 13%,var(--card));border:1px solid var(--line);grid-column:1/-1;width:100%}.wonder-season-hero small{font:10px var(--mono);letter-spacing:.12em}.wonder-season-hero h2{margin:8px 0;font:600 35px var(--serif)}.wonder-season-hero p{margin:0;line-height:1.6;max-width:460px}.wonder-season-watermark{position:absolute;z-index:-1;right:-10px;bottom:-12px;font:900 clamp(70px,10vw,140px) var(--sans);color:color-mix(in srgb,var(--green) 14%,transparent);white-space:nowrap}.ww-season-tools{display:flex!important;flex-wrap:wrap;align-items:center;gap:12px}.ww-season-tools>.wonder-season-hero,.ww-season-tools>.ww-disclosure,.ww-season-tools>.ww-season-cosmetics,.ww-season-tools>.ww-season-dates{flex-basis:100%;min-width:0}.ww-season-tools>.ww-disclosure{margin:0}.ww-season-dates{margin:0}.wonder-seasonal{clear:both}
.wonder-rarity-guide{padding:16px 20px;border:1px solid var(--line);border-radius:12px;background:var(--card);margin-bottom:20px}.wonder-rarity-guide summary{font-weight:650;cursor:pointer}.wonder-rarity-guide p{font-size:12px;line-height:1.7;color:var(--muted)}.wonder-odds{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.wonder-odds>span{padding:12px 8px;background:var(--paper);border-radius:8px;display:grid;gap:6px;text-transform:capitalize;font-size:11px}.wonder-odds b{font-size:18px;color:var(--green)}
.ww-stall:before,.ww-stall:after{display:none!important}.wonder-curtains{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}.wonder-curtain{position:absolute;inset:0 50% 0 0;display:flex;transform:translateX(-105%)}.wonder-curtain-right{inset:0 0 0 50%;transform:translateX(105%)}.wonder-curtain i{display:block;flex:1;min-width:0;height:calc(100% + 10px);background:linear-gradient(90deg,#203c35,#476c57 38%,#577965 52%,#253e33);border-right:1px solid #1d382a;box-shadow:inset -4px 0 8px #102a2533;transform-origin:top;border-bottom:6px solid #b6975b;border-radius:0 0 45% 45%;transform:translateY(calc(var(--ripple)*3px))}.ww-stall.is-refreshing .wonder-curtain-left{animation:curtain-close-left .85s cubic-bezier(.4,0,.2,1) both}.ww-stall.is-refreshing .wonder-curtain-right{animation:curtain-close-right .85s cubic-bezier(.4,0,.2,1) both}.ww-stall.is-opening .wonder-curtain-left{animation:curtain-open-left 1.1s cubic-bezier(.4,0,.2,1) both}.ww-stall.is-opening .wonder-curtain-right{animation:curtain-open-right 1.1s cubic-bezier(.4,0,.2,1) both}.ww-stall:is(.is-refreshing,.is-opening) .wonder-curtain i{animation:curtain-fold .85s ease-in-out both;animation-delay:calc(var(--fold)*15ms)}
@keyframes curtain-close-left{0%{transform:translateX(-105%)}72%{transform:translateX(2%)}86%{transform:translateX(-1%)}100%{transform:translateX(0)}}@keyframes curtain-close-right{0%{transform:translateX(105%)}72%{transform:translateX(-2%)}86%{transform:translateX(1%)}100%{transform:translateX(0)}}@keyframes curtain-open-left{0%{transform:translateX(0)}22%{transform:translateX(1%)}85%{transform:translateX(-107%)}100%{transform:translateX(-105%)}}@keyframes curtain-open-right{0%{transform:translateX(0)}22%{transform:translateX(-1%)}85%{transform:translateX(107%)}100%{transform:translateX(105%)}}@keyframes curtain-fold{0%,100%{transform:translateY(calc(var(--ripple)*3px)) skewX(0)}48%{transform:translateY(calc(var(--ripple)*8px)) skewX(calc(var(--ripple)*2deg))}}
.wonder-pack{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding:24px!important;background:color-mix(in srgb,var(--card) 94%,var(--gold));align-items:center}.wonder-pack h3{font:600 25px var(--serif);margin:8px 0}.wonder-pack p{font-size:13px;line-height:1.7}.wonder-pack-cover{border-radius:12px;background:#31564f;box-shadow:8px 8px 0 #b99b6930;display:grid;text-align:center;padding:15px;color:#f1deb5;transform:rotate(-3deg)}.wonder-pack-cover span{font:600 16px var(--serif)}.wonder-pack-cover svg{width:100%;height:130px}.wonder-pack-rewards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:12px}.wonder-pack-rewards p{font-size:12px;line-height:1.5}.wonder-pack-rewards .ww-item-stage{min-height:90px}.wonder-pack-rewards .ww-art-avatar{width:78px;height:78px}.wonder-pack-rewards .ww-sticker{width:80px;height:80px}
.wonder-film{--film-rarity:var(--rarity-common);position:relative;overflow:hidden;padding:22px 0;border-block:7px solid var(--film-rarity);background:#26333c;border-radius:8px;margin:18px 0}.wonder-film:before,.wonder-film:after{content:"";position:absolute;left:0;right:0;top:5px;height:9px;background:repeating-linear-gradient(90deg,#ebdfbe 0 9px,transparent 9px 20px)}.wonder-film:after{top:auto;bottom:5px}.wonder-film[data-rarity="uncommon"]{--film-rarity:var(--rarity-uncommon)}.wonder-film[data-rarity="rare"]{--film-rarity:var(--rarity-rare)}.wonder-film[data-rarity="epic"]{--film-rarity:var(--rarity-epic)}.wonder-film[data-rarity="legendary"]{--film-rarity:var(--rarity-legendary)}.wonder-film[data-rarity="mythic"]{--film-rarity:var(--rarity-mythic)}.wonder-film-track{display:flex;width:400%;transform:translateX(-75%);animation:film-reveal 2.2s cubic-bezier(.15,.65,.15,1) both}.wonder-film-track>article{width:25%;padding:12px;background:var(--card);flex:none;text-align:center;border-inline:5px solid var(--film-rarity)}.wonder-film-track h3{margin:10px 0}.wonder-film-track p{font-size:12px;line-height:1.7;padding:0 12px}.wonder-film-leader{width:75%;display:flex;flex:none;align-items:center;justify-content:space-around;color:#d6c491;font-size:50px}.wonder-film-leader span{width:25%;padding:60px 0;text-align:center;border:2px solid #887b62}@keyframes film-reveal{0%{transform:translateX(0) scaleY(.85)}75%{transform:translateX(-76%)}100%{transform:translateX(-75%) scaleY(1)}}
.wonder-trades{padding:18px;margin-top:14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);grid-column:1/-1}.wonder-trades[hidden]{display:none}.wonder-trades>p,.wonder-trades form>p{font-size:12px;line-height:1.7}.wonder-trades form{display:grid;gap:12px}.wonder-trades label{display:grid;gap:8px;font-size:13px}.wonder-trades select,.wonder-trades input{width:100%;max-width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}.wonder-trade-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.wonder-trade-preview .ww-item-stage{min-height:120px}.wonder-trade-preview .ww-art-avatar{width:76px;height:76px}.wonder-trade-preview strong{display:block;font-size:12px;margin-top:8px}.wonder-trade-row{padding:14px;border:1px solid var(--line);border-radius:10px;margin-top:12px;overflow-wrap:anywhere}.wonder-trade-row p{font-size:13px}.wonder-trade-row small{font-size:11px;color:var(--muted)}
@media(max-width:850px){#page-profile .profile-grid{grid-template-columns:1fr}.wonder-odds{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.ww-design-controls{grid-template-columns:1fr}.wonder-home-scene>div:last-child{padding:22px}.wonder-pack{grid-template-columns:90px minmax(0,1fr);gap:16px;padding:16px!important}.wonder-pack-cover{padding:8px}.wonder-pack-cover svg{height:88px}.wonder-pack h3{font-size:22px}.wonder-pack .functional-actions{grid-column:1/-1}.wonder-season-hero{padding:20px}#page-profile .profile-card>:not(.wonder-own-banner){padding:18px}.wonder-profile-default>span{font-size:13px;left:14px}.wonder-trade-preview{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.wonder-curtain,.wonder-curtain i,.wonder-film-track{animation:none!important}.wonder-pack-cover{transform:none}}
@media(forced-colors:active){.app-main:before{display:none}.leaderboard-row{background-image:none}.wonder-film{border-color:CanvasText}.wonder-season-watermark{display:none}}
/* Keep entire panoramic scenes visible in previews instead of cropping away their landmarks. */
.ww-item-stage:has(.wonder-banner){min-height:0;display:block;aspect-ratio:1200/260;padding:0}.ww-item-stage>.wonder-banner{height:auto;min-height:0;aspect-ratio:1200/260}.wonder-pack-rewards:has(.wonder-banner){grid-template-columns:1fr}.ww-grid .ww-rarity-card:has(.wonder-banner){grid-column:1/-1}.wonder-film .ww-item-stage:has(.wonder-banner){margin:4px 0}

/* Collections share one grid, so the last earned title never stretches into a separate row. */
#inventory-content .ww-inventory-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));align-items:start;gap:20px;margin-top:18px}
#inventory-content .ww-hero{margin-bottom:20px}#inventory-content .ww-segmented{gap:8px;margin-bottom:16px}#inventory-status:empty{display:none}
#inventory-content .ww-rarity-card{height:100%;box-sizing:border-box}#inventory-content .ww-rarity-card .functional-actions{margin-top:auto;padding-top:8px;flex-wrap:wrap}#inventory-content .ww-item-meta{min-height:28px}
.ww-stepper>button{display:grid;place-items:center;flex:0 0 40px;min-width:40px;min-height:44px;padding:0!important;margin:0;line-height:1;text-align:center;align-self:stretch;box-sizing:border-box}.ww-stepper input{height:44px!important;box-sizing:border-box}.ww-quantity{align-items:center}
/* A large varied composition replaces the old 240px repeat of one motif. */
.app-main:before{-webkit-mask-size:960px 823px;mask-size:960px 823px}
.design-swatch{height:108px}.design-swatch:after{-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;opacity:.42}.design-choice small{font-size:11px;line-height:1.6;color:var(--muted)}
.ww-accent-collection{padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);display:grid;gap:10px}.ww-accent-collection>span{display:block;height:100px;background:var(--green);mask-image:var(--sample-pattern);-webkit-mask-image:var(--sample-pattern);mask-size:100% 100%;-webkit-mask-size:100% 100%;opacity:.6}.ww-accent-collection p{font-size:11px;line-height:1.6}.ww-accent-collection strong{display:block;margin-bottom:5px;color:var(--ink)}

.ww-supply-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.ww-supply-grid>.ww-shop-category{min-width:0}.ww-supply-grid .rc-shop-grid{grid-template-columns:1fr}.ww-supply-grid .ww-rarity-card{height:100%;box-sizing:border-box}
@media(max-width:600px){.ww-supply-grid{grid-template-columns:1fr}}

.ww-design-controls>p:empty{display:none}.ww-supply-grid>.ww-shop-category{display:flex;flex-direction:column}.ww-supply-grid .ww-shop-tiers{flex:1}.ww-supply-grid .ww-shop-tier{display:flex;flex-direction:column}.ww-supply-grid .rc-shop-grid{flex:1}.ww-supply-grid .ww-rarity-card>.functional-actions{margin-top:auto;padding-top:8px}

@media(max-width:600px){#page-settings .setting-row{flex-wrap:nowrap;flex-direction:column;align-items:stretch;min-height:0}#page-settings .setting-row>div:first-child{flex:0 1 auto}#page-settings .setting-control{flex:0 1 auto;width:100%;max-width:100%}#page-settings .custom-select{min-width:0;max-width:100%}}
.ww-supply-grid>.ww-shop-category{display:grid;grid-template-rows:auto auto 1fr}.ww-supply-grid .ww-shop-tiers,.ww-supply-grid .ww-shop-tier{display:contents}.ww-supply-grid .rc-shop-grid{align-items:stretch}