/* The sticker shop. */
.tab.locked { opacity: .45; }
/* shop */
#shop { background: #f6ecff; }
.tabs { position: absolute; top: 130px; left: 0; right: 0; display: flex; justify-content: center; gap: 20px; }
.tab { border: none; border-radius: 28px; padding: 14px 30px; font-family: inherit; font-size: 34px; font-weight: 800;
  background: #fff; color: #7d3fbf; box-shadow: 0 5px 0 #dccbef; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.tab .p { font-size: 22px; color: #a58bc4; }
.tab.on { background: #b06cf0; color: #fff; box-shadow: 0 5px 0 #7d3fbf; }
.tab.on .p { color: #eedcff; }
.grid { position: absolute; top: 240px; left: 90px; right: 90px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 26px; }
.sk { position: relative; height: 230px; border-radius: 28px; border: none; background: #fff; box-shadow: 0 7px 0 #dccbef; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: inherit; }
.sk .e { font-size: 110px; line-height: 1.1; }
.sk.locked .e { filter: grayscale(1) brightness(.35); opacity: .5; }
.sk .price { font-size: 32px; font-weight: 800; color: #b5770b; }
.sk .have { position: absolute; top: 8px; left: 12px; min-width: 46px; height: 46px; border-radius: 23px; background: #3bb26b; color: #fff;
  font-size: 28px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 10px; }
.sk.rare { background: linear-gradient(135deg, #fff 30%, #fff3c4 50%, #fff 70%); background-size: 300% 300%; animation: shine 3s linear infinite; }
.sk.special { background: linear-gradient(135deg, #ffe3f5, #e3f0ff, #e6ffe3); }
@keyframes shine { from { background-position: 100% 100%; } to { background-position: 0 0; } }
.badge { position: absolute; top: 10px; right: 14px; font-size: 26px; }
.need { height: 26px; border-radius: 13px; background: #eee; overflow: hidden; margin: 0 auto 26px; width: 360px; }
.need i { display: block; height: 100%; background: #ffb800; }

/* Sticker shop: paper cards, foil rarities, and chunky set selectors. */
#shop { background: radial-gradient(ellipse at 50% -20%, #e0d5ef 0 42%, transparent 42.2%), radial-gradient(#b7a1c621 1.2px, transparent 1.6px), #f7f0f6; background-size: auto, 24px 24px, auto; }
.tabs { top: 126px; gap: 18px; }
.tab { min-height: 84px; padding: 12px 28px; border: 3px solid #fff; border-radius: 28px; font-size: 32px; color: #614575; background: #fffdf6; box-shadow: 0 5px 0 #d7c6df; }
.tab .p { color: #7f6b89; font-variant-numeric: tabular-nums; }
.tab.on { background: #77568f; border-color: #9b7ab4; box-shadow: 0 5px 0 #513667; }
.tab.on .p { color: #f7e7ff; }
.tab.locked { opacity: .65; }
.grid { top: 244px; left: 72px; right: 72px; gap: 24px; }
.sk { height: 230px; border-radius: 30px; border: 3px solid #fff; background: linear-gradient(#fffdf8, #fcf5e9);
  gap: 14px; box-shadow: 0 7px 0 #d4c3d1, 0 12px 20px #70567e12; }
.sk .e { filter: drop-shadow(0 6px 2px #8e745518); }
.sk .price { font-size: 28px; min-width: 100px; padding: 5px 10px; border-radius: 20px; background: #f5e9cc; color: #815a21; }
.sk .have { left: 8px; top: 8px; min-width: 42px; height: 42px; font-size: 25px; background: #3d8068; border: 3px solid #fff; }
.sk.rare { border-color: #efce76; background: linear-gradient(120deg, #fff8df 25%, #fffdf5 43%, #ffe9a6 50%, #fffdf5 57%, #fff8df 75%); background-size: 300% 300%; animation: shine 9s ease-in-out infinite; box-shadow: 0 7px 0 #c7a654, 0 12px 20px #ab8a3020; }
.sk.special { border-color: #bc9bd4; background: linear-gradient(135deg, #f6d8e7, #e4dcff 50%, #d8eee5); box-shadow: 0 7px 0 #9e84b5, 0 12px 22px #9671b02b; }
.sk.special .price { background: #fffbefcc; }
.badge { top: 9px; right: 9px; }

.tabs { gap: 12px; }
.tab { padding: 10px 18px; font-size: 40px; }