/* Arena road and a client-only collection; shared cream/mint toy materials. */
.collection-overlay{--collection-ink:#254e4d}
.hub-overlay .collection-sheet{display:flex;flex-direction:column;position:relative;overflow:hidden;max-width:640px;height:min(94dvh,960px);font-family:Nunito,sans-serif}
.collection-sheet *{box-sizing:border-box}.collection-sheet button{font:inherit;cursor:pointer;color:inherit}.collection-sheet button:disabled{cursor:default}.collection-sheet h2,.collection-sheet h3,.collection-sheet h4,.collection-sheet p{margin:0}.collection-sheet img{object-fit:contain;pointer-events:none;user-select:none}.collection-sheet small{line-height:1.35}
.collection-header{flex:none;padding:18px 20px 13px;background:#fff9ed;border-bottom:1px solid #e5dfd0;z-index:2}.collection-title-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.collection-title-row small{font-size:9px;letter-spacing:1.1px;color:#788983;font-weight:800}.collection-title-row h2{font-size:27px;line-height:1.25;font-weight:900}.collection-wallets{display:flex;align-items:center;gap:8px;margin-top:10px}.collection-wallet{display:flex;align-items:center;justify-content:center;gap:5px;min-height:35px;padding:4px 10px;background:#fffdf8;border:1px solid #e5dcc7;border-radius:12px;font-weight:900!important;font-size:15px!important}.collection-currency{width:25px;height:25px;display:inline-block;vertical-align:middle;flex:none}.collection-wallet.is-gems{background:#e7f6f5;border-color:#c3e3e0}.collection-wallet.is-gems>span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#bce7e1;font-weight:900}.collection-demo{margin-left:auto;color:#85918b;font-size:10px;text-align:right;max-width:75px}
.collection-body{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;padding:18px;scrollbar-width:none;touch-action:pan-y}.collection-body::-webkit-scrollbar{display:none}.collection-body.is-dragging{cursor:grabbing}.collection-footer{flex:none;padding:12px 18px max(14px,env(safe-area-inset-bottom));border-top:1px solid #e5dfd0;background:#fff9ed;display:grid;gap:9px;z-index:2}.collection-footer .hub-primary{font-weight:900;font-size:18px;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:52px}.collection-footer .hub-secondary{width:100%;min-height:43px}.collection-selected,.arena-v2-next{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}.collection-selected>b{display:flex;align-items:center;gap:4px}.arena-v2-next>span{font-size:12px;color:#758880}.collection-toast{position:absolute;bottom:105px;left:20px;right:20px;padding:14px 18px;border-radius:16px;background:#28594e;color:#fffdf0;font-size:14px;font-weight:800;text-align:center;box-shadow:0 6px 20px #23483b30;z-index:10}.collection-toast[hidden]{display:none}
/* Trophy road: a clear rail, inhabited islands and reachable gifts. */
.collection-sheet[data-collection=arena] .collection-body{background:linear-gradient(145deg,#eef6ed,#eaf3f3 65%,#f6efea);padding-bottom:28px}.arena-v2-summary{padding:12px 16px 14px;background:#fffdf6;border:1px solid #e5e4d4;border-radius:22px;box-shadow:0 4px 0 #dce5d6}.arena-v2-summary>div:first-child{display:flex;align-items:center;gap:10px}.arena-v2-summary .collection-art{width:108px;height:94px;flex:none}.arena-v2-summary small{font-size:10px;font-weight:900;letter-spacing:1px;color:#849181}.arena-v2-summary h3{font-size:20px;line-height:1.1;font-weight:900;margin:4px 0}.arena-v2-summary strong{display:flex;align-items:center;gap:6px;font-size:25px;font-weight:900}.arena-v2-summary strong img{width:28px;height:30px}.arena-v2-progress{height:10px;border-radius:8px;background:#e8e9d9;overflow:hidden;margin-top:6px}.arena-v2-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#56bca3,#a0d488);box-shadow:inset 0 2px 0 #ffffff50}.arena-v2-summary p{font-size:12px;text-align:center;margin-top:7px;color:#71877d}.arena-v2-intro{padding:27px 2px 4px}.arena-v2-intro h3{font-size:22px;font-weight:900}.arena-v2-intro p{font-size:12px;color:#778b83;margin-top:5px}.arena-v2-road{position:relative;padding:6px 0 0 40px}.arena-v2-road:before{content:'';position:absolute;left:15px;top:44px;bottom:20px;width:8px;background:#d1e0d3;border:2px solid #f8f8ed;border-radius:8px;box-shadow:0 0 0 1px #bfd3c7}.arena-v2-island{position:relative;padding-bottom:28px;border-bottom:1px dashed #becfc350;margin-bottom:14px}.arena-v2-milestone{position:absolute;left:-42px;top:80px;width:42px;display:grid;justify-items:center;gap:7px;z-index:1}.arena-v2-milestone span{font-size:10px;font-weight:900;padding:3px;background:#eaf3ed;border-radius:8px;white-space:nowrap}.arena-v2-milestone i{display:grid;place-items:center;width:26px;height:26px;background:#fffaf0;color:#5b8479;border:3px solid #b8d2c1;border-radius:50%;font-style:normal;font-weight:900;font-size:12px}.is-current .arena-v2-milestone i{background:#ffda66;border-color:#fff1b7;color:#735621;box-shadow:0 0 0 3px #eabe56}.arena-v2-landscape{position:relative;display:flex;align-items:center;justify-content:center;min-height:205px;margin-bottom:0;background:radial-gradient(ellipse at center,var(--island-color),transparent 68%)}.arena-v2-landscape>.collection-art{width:100%;max-width:400px;height:235px;filter:drop-shadow(0 12px 8px #4c77651c)}.arena-v2-number{position:absolute;bottom:5px;padding:5px 16px;background:#fffdf1;border:1px solid #e4dac4;box-shadow:0 3px 0 #e1d8c2;border-radius:12px;font-size:12px;font-weight:900;letter-spacing:.8px}.arena-v2-you{position:absolute;right:5px;top:14px;font-size:9px;letter-spacing:.5px;background:#3cae91;color:#fff;padding:6px 10px;border-radius:9px;transform:rotate(3deg);box-shadow:0 3px 0 #318d78}.arena-v2-name{text-align:center;padding:9px 0 15px}.arena-v2-name h4{font-size:21px;line-height:1.2;font-weight:900}.arena-v2-name p{font-size:11px;color:#71867c;margin-top:4px}.arena-v2-gifts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.road-gift{border:1px solid #e0e0ce;border-bottom-width:3px;background:#fffdf4;border-radius:16px;padding:7px 4px 8px;display:flex;align-items:center;flex-direction:column;min-width:0;position:relative;transition:transform .15s}.road-gift:active{transform:translateY(2px)}.road-gift-art{display:flex;align-items:center;justify-content:center;width:100%;height:70px}.road-gift-art>img{width:100%;height:100%}.road-gift strong{font-size:11px;line-height:1.2;text-align:center;min-height:27px;display:flex;align-items:center}.road-gift small{font-size:9px;color:#799084;text-align:center;margin-top:4px}.road-gift.is-ready{background:#fff1b8;border-color:#eabf52;box-shadow:0 3px 0 #eabf5230}.road-gift.is-ready small{font-weight:900;color:#72581e;background:#ffdc6c;padding:3px 9px;border-radius:7px}.road-gift.is-claimed{background:#e0f0e4}.road-gift.is-claimed small{color:#438773}.road-gift-art .collection-face{width:64px;height:64px}.road-gift-art .collection-swatches{gap:2px;flex-wrap:wrap;padding:10px}.road-gift-art .collection-swatches i{width:17px;height:20px;flex:none}
/* Collection fitting room and source filters. */
.collection-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;background:#ebe6d9;border-radius:15px;margin-bottom:16px}.collection-tab{border:0;background:none;border-radius:11px;padding:10px 3px;min-height:42px;font-size:13px!important;font-weight:900!important}.collection-tab.is-active{background:#fffef8;box-shadow:0 2px 3px #ab9c7c26}.collection-stage{display:flex;align-items:center;gap:20px;min-height:158px;padding:17px;background:var(--preview-bg);border:1px solid #e1e3d1;border-radius:22px}.collection-stage>.collection-face{width:125px;height:125px;flex:none}.collection-stage>div{min-width:0}.collection-stage h3{font-size:23px;line-height:1.13;font-weight:900;margin:9px 0 6px}.collection-stage p{font-size:12px;line-height:1.4;color:#71857c}.collection-source{display:inline-block;font-size:10px;font-weight:900;padding:5px 8px;border-radius:8px;background:#f5f5e9;color:#627c69}.source-arena{background:#d9e9f5;color:#436a8c}.source-diamonds{background:#d4eeed;color:#347e85}.source-gold{background:#fff0b4;color:#89702c}.source-achievement{background:#efdeee;color:#996491}.source-level{background:#dce7bf;color:#66833d}.collection-face{display:block;width:90px;height:90px;position:relative;flex:none}.collection-face>span{display:block;position:absolute;inset:15%;border-radius:50%;overflow:hidden;background:#d1e9cf}.collection-face>span img{width:100%;height:100%;position:static;transform:none}.collection-face>img{position:absolute;inset:0;width:100%;height:100%;transform:none}.collection-filters{display:flex;flex-wrap:wrap;gap:5px;margin:17px 0 13px}.collection-filter{background:transparent;border:1px solid #e3dece;border-radius:11px;padding:8px 11px;min-height:36px;font-size:11px!important;font-weight:800!important;color:#73867d!important}.collection-filter.is-active{background:#d2eadc;border-color:#a9d5bf;color:#386f5b!important}.collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.collection-item{border:1px solid #e4dece;border-bottom:3px solid #e4dece;border-radius:18px;background:#fffdf7;display:flex;flex-direction:column;align-items:center;padding:8px 5px 12px;position:relative;min-width:0}.collection-item.is-selected{border-color:#e6b549;background:#fff3c8;box-shadow:0 0 0 1px #e6b549}.collection-item-art{display:flex;align-items:center;justify-content:center;width:100%;height:97px}.collection-item-art>img{width:100%;height:100%}.collection-item strong{font-size:13px;line-height:1.2;text-align:center;min-height:28px;display:flex;align-items:center}.collection-item-cost{font-size:10px;min-height:22px;line-height:1.2;display:flex;align-items:center;justify-content:center;gap:3px;text-align:center;color:#72867c}.collection-item-cost .collection-currency{width:20px;height:20px}.collection-exclusive{position:absolute;top:6px;right:5px;font-size:7px;font-weight:900;font-style:normal;background:#e2eef7;color:#5c7b97;padding:3px 4px;border-radius:5px}.collection-note{font-size:12px;line-height:1.6;color:#77897e;text-align:center;padding:16px 10px}.collection-swatches{display:flex;gap:4px;width:100%;align-items:center;justify-content:center}.collection-swatches i,.sample-hex{background:var(--tile);clip-path:polygon(50% 0,94% 24%,94% 76%,50% 100%,6% 76%,6% 24%);box-shadow:inset 0 -5px 0 #543f3318;display:block;flex:1;min-width:0;height:35px}.collection-grid.is-palettes{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-grid.is-palettes .collection-item-art{height:72px;padding:7px}.is-palette.collection-stage{flex-direction:column;gap:10px;text-align:center;padding:16px}.collection-board{width:100%;display:flex;flex-wrap:wrap;gap:4px;justify-content:center;padding:7px 14px;border-radius:15px;max-width:360px}.sample-hex{flex:none;width:36px;height:41px;display:grid;place-items:center;font-size:13px;font-style:normal;color:#315652}.sample-hex.is-empty{background:#56796315;box-shadow:inset 0 2px 0 #56796310}.collection-stage.is-palette h3{margin-top:7px}.collection-stage.is-palette p{font-size:11px}
/* Gems and single reward focus. */
.diamond-hero{display:flex;align-items:center;gap:12px;padding:8px 0 20px}.diamond-hero>.collection-art{width:90px;height:95px;flex:none}.diamond-hero h3{font-size:23px;line-height:1.1;font-weight:900}.diamond-hero p{font-size:12px;line-height:1.4;color:#789086;margin-top:8px}.diamond-packs{display:grid;gap:12px}.diamond-pack{display:flex;align-items:center;width:100%;gap:10px;background:#fffdfa;border:1px solid #dce3d7;border-bottom:4px solid #dce3d7;border-radius:20px;padding:12px}.diamond-pack>.collection-art{width:105px;height:108px;flex:none}.diamond-pack>span{flex:1;text-align:left;min-width:0}.diamond-pack small{font-size:11px;color:#6a837c}.diamond-pack strong{font-size:29px;font-weight:900;display:flex;align-items:center;gap:3px}.diamond-pack>span>i{font-size:10px;font-style:normal;color:#3c967f;background:#def2e4;padding:3px 7px;border-radius:6px;display:inline-block}.diamond-pack>b{padding:10px;border-radius:11px;background:#ffdc6c;color:#6e5829;font-size:13px;box-shadow:0 3px 0 #eebf4b;white-space:nowrap}.collection-reward,.collection-confirm{text-align:center;padding:25px 12px;display:flex;align-items:center;flex-direction:column;gap:17px}.collection-reward>small{font-weight:900;letter-spacing:2px;color:#758b80}.collection-reward-art,.collection-confirm-art{width:200px;height:200px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(#fff3b2,transparent 70%)}.collection-reward-art>img,.collection-confirm>.collection-art{width:190px;height:190px}.collection-reward-art .collection-face,.collection-confirm-art .collection-face{width:170px;height:170px}.collection-confirm-art>img{width:170px;height:170px}.collection-reward h3,.collection-confirm h3{font-size:29px;line-height:1.1;font-weight:900}.collection-reward p,.collection-confirm p{font-size:14px;line-height:1.5;color:#768a7f;max-width:330px}.collection-reward>b{padding:8px 15px;background:#e5edde;border-radius:12px;font-size:13px}.collection-confirm-cost{display:flex;align-items:center;gap:7px;font-size:24px;font-weight:900}.collection-reward-art>.collection-swatches{width:180px}.collection-reward-art>.collection-swatches i{height:45px}
@media(max-width:599px){.hub-overlay.collection-overlay{padding:0}.hub-overlay .collection-sheet{height:100dvh;max-height:100dvh;border-radius:0;border:0}.collection-header{padding:calc(14px + env(safe-area-inset-top)) 17px 11px}.collection-body{padding:15px}.collection-title-row h2{font-size:25px}.collection-stage{gap:12px;padding:14px}.collection-stage>.collection-face{width:104px;height:104px}.collection-stage h3{font-size:22px}.arena-v2-landscape>.collection-art{height:210px}.arena-v2-gifts{gap:6px}.road-gift-art{height:61px}.road-gift strong{font-size:10px}.road-gift small{font-size:9px}.diamond-pack{gap:5px;padding:9px}.diamond-pack>.collection-art{width:90px;height:100px}.diamond-pack strong{font-size:26px}.diamond-pack>b{font-size:12px;padding:9px}.collection-item-art{height:88px}.collection-item-art .collection-face{width:82px;height:82px}}
@media(min-width:600px) and (max-width:1199px) and (pointer:coarse){.hub-overlay.collection-overlay{padding:0}.hub-overlay .collection-sheet{height:100dvh;max-height:100dvh;max-width:none;border-radius:0}.collection-body{padding:24px 7%}.arena-v2-landscape>.collection-art{height:300px}.road-gift-art{height:105px}.collection-item-art{height:160px}.collection-item-art .collection-face{width:140px;height:140px}.collection-grid{gap:16px}}
@media(max-height:520px) and (min-width:600px){.collection-header{padding:8px 18px}.collection-title-row h2{font-size:20px}.collection-wallets{position:absolute;right:80px;top:9px;margin:0}.collection-demo{display:none}.collection-title-row small{font-size:8px}.collection-footer{padding:8px 18px;grid-template-columns:1fr 1fr;align-items:center}.collection-body{padding-top:12px}.collection-stage{min-height:125px}.collection-footer .hub-primary{min-height:45px}}
@media(prefers-reduced-motion:reduce){.collection-sheet *{transition:none!important;animation:none!important}}
.collection-loot-fx{position:absolute;z-index:15;pointer-events:none;width:26px;height:26px}.collection-loot-fx img{width:100%;height:100%}
.collection-swatches i{height:auto;aspect-ratio:.866;max-width:28px}
.collection-stage .collection-board{display:block;max-width:260px;height:176px;padding:0;border:0;font-family:Nunito,sans-serif}
.collection-grid.is-palettes .collection-item-art{height:64px}
.arena-v2-jump{display:block;margin:9px auto 0;border:0;background:#e5f1e8;border-radius:9px;padding:7px 14px;font-size:11px!important;font-weight:900!important;min-height:34px;color:#448474!important}
/* Desktop sheet stays centred; touch/mobile overrides expand to the viewport. */
@media(min-width:600px) and (pointer:fine){.hub-overlay.collection-overlay{align-items:center;padding:12px}}
/* Secondary labels remain readable at a real phone's 1× scale. */
.collection-item-cost{font-size:11px}.road-gift strong{font-size:12px}.road-gift small{font-size:11px}
@media(max-width:599px){.road-gift strong{font-size:12px}.road-gift small{font-size:10px}.road-gift-art{height:68px}}
.arena-v2-gifts.is-four{grid-template-columns:repeat(2,minmax(0,1fr))}.arena-v2-gifts.is-four .road-gift-art{height:76px}.arena-v2-gifts.is-four .road-gift strong{font-size:13px}.arena-v2-gifts.is-four .road-gift-art>img{max-width:98px}.arena-v2-gifts.is-four .collection-swatches{max-width:136px}
/* A long reward trail: each small prize is a stop BETWEEN the islands. */
.arena-v2-gifts,.arena-v2-gifts.is-four{display:flex;flex-direction:column;gap:18px;padding:12px 0 14px}
.arena-v2-gifts .road-gift{display:grid;grid-template-columns:70px minmax(0,1fr) auto;grid-template-rows:auto auto;text-align:left;column-gap:10px;padding:10px 12px;min-height:88px;border-radius:20px;align-items:center;margin:0 0 0 4px}
.arena-v2-gifts .road-gift-art,.arena-v2-gifts.is-four .road-gift-art{grid-column:1;grid-row:1/3;height:64px;width:64px}.arena-v2-gifts .road-gift strong{grid-column:2/4;grid-row:1;font-size:16px;min-height:0;text-align:left;display:block;padding-top:6px}.arena-v2-gifts .road-gift small{grid-column:2/4;grid-row:2;text-align:left;font-size:12px;justify-self:start;margin:0;padding-bottom:5px}.arena-v2-gifts .road-gift .road-step-score{position:absolute;left:-45px;top:calc(50% - 13px);min-width:37px;max-width:44px;font-size:10px;font-weight:900;padding:5px 3px;background:#f7f4e6;border:2px solid #c7d9c8;border-radius:10px;color:#607a69;text-align:center;z-index:2}.road-gift.is-claimed .road-step-score{background:#bde1c8;border-color:#8fc8ab;color:#377964}.road-gift.is-ready .road-step-score{background:#ffe17f;border-color:#f1c550;color:#796330}.arena-v2-island{margin-bottom:22px}.arena-v2-gifts .road-gift.is-ready{box-shadow:0 4px 0 #d9b65830}.arena-v2-gifts .road-gift-art .collection-board{height:64px;width:75px;padding:0}.arena-v2-gifts .road-gift-art img{max-height:64px}
/* Paint shop: each card previews a real miniature board, with numbers and quiet empty wells. */
.collection-grid.is-palettes{gap:12px}.collection-grid.is-palettes .collection-item{padding:8px 8px 12px;overflow:hidden;align-items:stretch}.collection-grid.is-palettes .collection-item-art{height:auto;aspect-ratio:1.25;padding:0;margin-bottom:8px;border-radius:12px;overflow:hidden}.collection-grid.is-palettes .collection-board{height:100%;width:100%;max-width:none;border-radius:12px;padding:0}.collection-grid.is-palettes .collection-item strong{justify-content:flex-start;text-align:left;font-size:15px;min-height:36px;align-items:center}.collection-grid.is-palettes .collection-item-cost{justify-content:flex-start;text-align:left;font-size:12px;margin-top:2px}.collection-stage.is-palette{display:grid;grid-template-columns:1.15fr 1fr;min-height:160px;gap:12px;text-align:left;padding:12px}.collection-stage.is-palette .collection-board{height:auto;width:100%;max-width:none}.collection-stage.is-palette h3{font-size:22px}.collection-stage.is-palette p{font-size:12px}.collection-stage.is-palette .collection-source{font-size:10px}
.collection-grid.is-palettes .collection-exclusive{top:8px;right:8px;font-size:9px}.collection-board text{font-family:Nunito,sans-serif}
@media(max-width:360px){.collection-stage.is-palette h3{font-size:19px}.collection-grid.is-palettes .collection-item strong{font-size:14px}.arena-v2-gifts .road-gift{grid-template-columns:56px minmax(0,1fr);gap:6px;padding:9px}.arena-v2-gifts .road-gift-art{width:56px;height:56px}}
.collection-face>img{mask-image:radial-gradient(circle at 50% 50%,transparent 0 26%,#000 27%);-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 26%,#000 27%)}
.collection-face>span img{object-fit:contain;transform:translateY(7%) scale(.94);transform-origin:center}
.collection-face[data-frame=royal]>img{mask-image:none;-webkit-mask-image:none}

/* Legendary items: badge on the card. */
.collection-item-art{position:relative}
.collection-legend{position:absolute;top:4px;left:50%;transform:translateX(-50%);font-style:normal;font:800 9px/1 'Manrope',sans-serif;letter-spacing:.08em;color:#5b3a00;background:linear-gradient(90deg,#ffe08a,#ffc1e3,#b9e6ff,#ffe08a);background-size:300% 100%;padding:3px 7px;border-radius:9px;box-shadow:0 1px 4px #0002;animation:legend-badge 4s linear infinite;white-space:nowrap}
@keyframes legend-badge{to{background-position:300% 0}}
@media (prefers-reduced-motion:reduce){.collection-legend{animation:none}}
.collection-grid.is-palettes .collection-legend{left:10px;top:8px;transform:none}
.collection-legend.is-theme{background:#e3efe9;color:#2f5d50;animation:none}
.collection-grid.is-palettes .collection-legend.is-theme{left:10px}
.diamond-ad{margin:0 0 12px;width:100%;background:linear-gradient(135deg,#e9f8f3,#fff6dc)}
.diamond-ad b{font-size:20px}