/* The collection as folding sections of small tiles, and the larger card a tile opens (2026-11-01). */
.rewards-grid{display:flex;flex-direction:column;gap:12px}
.reward-group{border:1px solid #2f4a57;border-radius:16px;background:linear-gradient(160deg,#152f40cc,#0c1f2ccc);overflow:hidden}
.reward-group-head{appearance:none;display:grid;grid-template-columns:1fr auto 18px;grid-template-areas:"title count chev" "meter meter meter";align-items:center;gap:8px 12px;width:100%;padding:14px 16px 12px;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.reward-group-head:focus-visible{outline:2px solid var(--gold);outline-offset:-3px;border-radius:16px}
.reward-group-title{grid-area:title;font-family:var(--display-font);font-weight:600;font-size:18px;letter-spacing:-.02em;font-variation-settings:"opsz" 72}
.reward-group-count{grid-area:count;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.reward-group-meter{grid-area:meter;display:block;height:3px;border-radius:3px;background:#36505d88;overflow:hidden}
.reward-group-meter i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#78c9b4,var(--gold))}
.reward-group-chevron{grid-area:chev;width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s;justify-self:center}
.reward-group.folded .reward-group-chevron{transform:rotate(-45deg)}
.reward-group[data-kind=ornament] .reward-group-meter i{background:linear-gradient(90deg,#d9a75f,#f1d79d)}
.reward-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;padding:2px 14px 16px}
.reward-group.folded .reward-tiles{display:none}
.reward-group-empty{grid-column:1/-1;font-size:12px;color:var(--muted);padding:4px 2px 2px}
.reward-tile{appearance:none;display:flex;flex-direction:column;gap:6px;min-width:0;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;font:inherit;text-align:center}
.tile-art{--tint:132,199,226;position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:14px;overflow:hidden;border:1px solid rgba(var(--tint),.28);background:radial-gradient(ellipse at 50% 62%,rgba(var(--tint),.22),transparent 66%),linear-gradient(150deg,#1d4660,#0d2537);transition:border-color .15s,transform .15s,box-shadow .15s}
.reward-tile[data-kind=ornament] .tile-art{--tint:223,186,119;background:radial-gradient(ellipse at 50% 62%,rgba(var(--tint),.2),transparent 66%),linear-gradient(150deg,#3a3a35,#1a2629)}
.reward-tile[data-kind=special] .tile-art{--tint:244,205,127;background:radial-gradient(ellipse at 50% 62%,rgba(var(--tint),.26),transparent 66%),linear-gradient(150deg,#3b3a2c,#1c2a2c)}
.tile-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:var(--reward-image-position,50% 50%);transform-origin:var(--reward-image-origin,50% 50%);transform:scale(var(--reward-image-scale,1.15)) rotate(var(--reward-image-rotate,0deg));filter:drop-shadow(0 6px 7px #020c2066)}
.tile-art .reward-image-fallback{font-size:34px;padding:0;color:rgb(var(--tint))}
.reward-tile:hover .tile-art{border-color:rgba(var(--tint),.7);transform:translateY(-2px);box-shadow:0 8px 18px #020e1755}
.reward-tile:focus-visible{outline:none}.reward-tile:focus-visible .tile-art{outline:2px solid var(--gold);outline-offset:2px}
.reward-tile.locked .tile-art img{filter:grayscale(.55) brightness(.62) drop-shadow(0 6px 7px #020c2066)}
.reward-tile.locked .tile-art{border-style:dashed;border-color:rgba(var(--tint),.22)}
.reward-tile.available .tile-art{border-color:#f0ca7e;box-shadow:0 0 0 1px #f0ca7e55,0 0 18px #f0ca7e2e}
.reward-tile.owned .tile-art{border-color:#7be3c899}
.tile-owned{position:absolute;top:6px;right:6px;z-index:2;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#2e7062;border:1px solid #7be3c8;color:#e2fff4;font-size:12px;font-weight:800;line-height:1}
.tile-price{position:absolute;left:6px;right:6px;bottom:6px;z-index:2;display:flex;align-items:center;justify-content:center;gap:4px;padding:3px 6px;border-radius:999px;background:#08182499;border:1px solid #ffffff1c;color:#f3d697;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;backdrop-filter:blur(6px);white-space:nowrap}
.reward-tile.available .tile-price{background:#f0ca7e;color:#213630;border-color:#f0ca7e}
.tile-lock{width:8px;height:7px;border-radius:1.5px;background:currentColor;position:relative;margin-top:3px;flex:none;opacity:.85}
.tile-lock:before{content:'';position:absolute;left:1px;right:1px;bottom:5px;height:5px;border:1.5px solid currentColor;border-bottom:0;border-radius:4px 4px 0 0}
.tile-name{font-size:11.5px;line-height:1.25;color:#d6e3e3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.5em}
.reward-tile.locked .tile-name{color:#9fb1b6}
/* the card a tile opens: a sheet from the bottom on a phone, a centred card on a wider screen */
.reward-detail{border:0;padding:0;background:none;color:var(--ink);max-width:none;max-height:none;width:100%;height:100%;margin:0;overflow:hidden}
.reward-detail::backdrop{background:#04151cc4;backdrop-filter:blur(5px)}
.reward-detail[open]{display:flex;align-items:flex-end;justify-content:center}
.detail-card{--tint:132,199,226;position:relative;width:100%;max-height:92vh;overflow-y:auto;overscroll-behavior:contain;border-radius:22px 22px 0 0;border:1px solid #3d5f6c;border-bottom:0;background:linear-gradient(165deg,#163548,#0c1f2d 70%);box-shadow:0 -20px 60px #0009;animation:detail-in .22s ease-out}
.detail-card[data-kind=ornament]{--tint:223,186,119}.detail-card[data-kind=special]{--tint:244,205,127}
@keyframes detail-in{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
.detail-top{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:8px;padding:12px 12px 10px 18px;background:linear-gradient(#163548f2,#163548cc 70%,transparent)}
.detail-kind{flex:1;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgb(var(--tint))}
.detail-nav{display:flex;gap:6px}
.detail-step,.detail-close{appearance:none;width:36px;height:36px;border-radius:50%;border:1px solid #ffffff26;background:#0a1e2ccc;color:var(--ink);font:600 20px/1 var(--ui-font);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 2px}
.detail-step:disabled{opacity:.3;cursor:default}.detail-close{font-size:24px}
.detail-step:focus-visible,.detail-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.detail-art{position:relative;margin:0 18px;aspect-ratio:1.25;border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid rgba(var(--tint),.3);background:radial-gradient(ellipse at 50% 64%,rgba(var(--tint),.28),transparent 64%),linear-gradient(150deg,#1d4660,#0b2131)}
.detail-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:var(--reward-image-position,50% 50%);transform-origin:var(--reward-image-origin,50% 50%);transform:scale(var(--reward-image-scale,1.2)) rotate(var(--reward-image-rotate,0deg));filter:drop-shadow(0 14px 16px #020c2077)}
.detail-card.locked .detail-art img{filter:grayscale(.35) brightness(.8) drop-shadow(0 14px 16px #020c2077)}
.detail-art .reward-image-fallback{font-size:70px;color:rgb(var(--tint))}
.detail-art .reward-owned-badge{position:absolute;top:12px;right:12px;z-index:2;padding:5px 10px;border-radius:999px;background:#2e7062;border:1px solid #7be3c8;color:#e2fff4;font-size:12px;font-weight:700}
.detail-body{padding:16px 20px calc(22px + env(safe-area-inset-bottom))}
.detail-body h2{font-size:26px;line-height:1.15;margin:0;color:#f4f0e4}
.detail-about{margin-top:8px;font-size:14px;line-height:1.55;color:#b8c9cf}
.detail-price{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid rgba(var(--tint),.2)}
.detail-amount{display:flex;align-items:center;gap:7px;font-size:20px;font-weight:700;color:#f3d697;font-variant-numeric:tabular-nums}
.detail-amount small{font-size:12px;font-weight:500;color:#a9bcc4}
.detail-stick{width:24px;height:24px}
.detail-state{font-size:13px;color:#b1c1ca}.detail-state.unlocked{color:#a5dfc9}.detail-state.reached{color:#f3d697}
.detail-progress{height:5px;border-radius:5px;background:#42607377;overflow:hidden;margin-top:10px}
.detail-progress i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#6cbdbd,var(--gold))}
.detail-body .reward-buy{margin-top:16px;min-height:48px;font-size:15px}
.detail-body .reward-places{margin-top:16px}
.detail-body .reward-place{padding:8px 14px;font-size:14px}
@media(min-width:700px){
 .reward-detail[open]{align-items:center}
 .detail-card{width:min(560px,calc(100vw - 48px));max-height:calc(100vh - 48px);border-radius:24px;border-bottom:1px solid #3d5f6c;box-shadow:0 30px 90px #000a}
 .reward-tiles{grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:14px;padding:4px 18px 20px}
 .reward-group-head{padding:16px 20px 14px}
 .tile-name{font-size:12.5px}
 .detail-body h2{font-size:30px}
}
@media(max-width:360px){.reward-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:2px 10px 14px}.tile-name{font-size:10.5px}.tile-price{font-size:10px}}
@media(prefers-reduced-motion:reduce){.detail-card{animation:none}.tile-art,.reward-group-chevron{transition:none}}

/* achievements: the same folding section, compact rows */
.store-achievements.reward-group{margin-top:12px}
.store-achievements.folded .reward-achievements{display:none}
.store-achievements .reward-achievements{margin:0;padding:2px 14px 16px;gap:8px}
.store-achievements .reward-achievement{padding:10px 12px;gap:10px}
.store-achievements .reward-achievement-symbol{width:34px;height:34px;font-size:18px}
@media(min-width:700px){.store-achievements .reward-achievements{padding:4px 18px 20px}}