.shop-intro { margin: 0 0 16px; color: var(--text); background: var(--panel); border-radius: 14px; padding: 12px 16px; max-width: 80ch; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.item { background: var(--panel); border-radius: 16px; overflow: hidden; display: grid; }
.item .preview { background: #0c0726; padding: 26px 12px; text-align: center; font-size: 24px; min-height: 92px; display: grid; place-items: center; }
.item .info { padding: 12px 14px 14px; display: grid; gap: 8px; }
.item .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.item h2 { margin: 0; font: 400 18px var(--display); color: #fff; }
.rarity { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; background: var(--panel-2); }
.r-common { color: #c9c3e6; } .r-uncommon { color: #7dff9b; } .r-rare { color: #3ee6ff; } .r-epic { color: #c9a8ff; }
.r-legendary { color: #ffd84d; } .r-mythic { color: #ff5fa2; } .r-free { color: var(--muted); }
.price { font: 700 18px ui-monospace, Consolas, monospace; color: #7dff9b; }
.price.cant { color: #ff8aa8; }
.item .btn { width: 100%; }
.item.equipped { box-shadow: 0 0 0 3px var(--gold); }

/* ---- tabs ---- */
.shop-tabs { display: flex; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.casino .shop-tabs [aria-selected="true"] { background: var(--pink); color: #fff; }
.casino .shop-tabs [aria-selected="true"]:hover { background: #ff79b3; }
.item .preview.frame-prev .av { width: 64px; height: 64px; font-size: 26px; }
.item .preview.frame-prev .avf::after { inset: -5px; border-width: 5px; }
.item.rar-legendary .preview, .tile.rar-legendary { box-shadow: inset 0 -4px 0 #ffd84d; }
.item.rar-mythic .preview, .tile.rar-mythic { box-shadow: inset 0 -4px 0 #ff5fa2; }

/* ---- cases ---- */
.shop-grid.cases { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.collection { grid-column: 1 / -1; background: var(--panel); border-radius: 14px; padding: 10px 14px; display: grid; gap: 6px; color: #fff; }
.collection .prog { height: 10px; }
.case { background: var(--panel); border-radius: 16px; padding: 14px; display: grid; gap: 12px; align-content: start; }
.case-art { border-radius: 12px; padding: 18px 10px; display: grid; place-items: center; gap: 8px; font: 400 20px var(--display); color: #fff; text-shadow: 2px 2px 0 rgba(0, 0, 0, .35); }
.case-basic .case-art { background: linear-gradient(135deg, #3d6bd8, #5a44c9); }
.case-premium .case-art { background: linear-gradient(135deg, #9b3bd8, #ff5fa2); }
.case-elite .case-art { background: linear-gradient(135deg, #e0a400, #ff5f3a 60%, #c2309c); }
.case-art img { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .3)); }
.odds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.odds li { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #fff; }
.dupe-note { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--muted); background: var(--panel); border-radius: 10px; padding: 8px 12px; }

/* ---- the opening reel ---- */
.case-open { width: min(760px, calc(100vw - 24px)); border: 0; border-radius: 18px; padding: 16px; background: #120b33; color: #fff; }
.case-open::backdrop { background: rgba(5, 3, 20, .75); }
.case-open h2 { margin: 0 0 12px; font: 400 22px var(--display); text-align: center; }
.reel-window { position: relative; overflow: hidden; border-radius: 12px; background: #0a0620; padding: 10px 0; }
.reel { display: flex; gap: 8px; width: max-content; will-change: transform; }
.reel-mark { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.tile { width: 128px; height: 96px; flex: none; border-radius: 10px; background: var(--panel-2); display: grid; place-items: center; align-content: center; gap: 6px;
        padding: 6px; text-align: center; overflow: hidden; }
.tile-look { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 16px; }
.tile .av { width: 44px; height: 44px; }
.tile small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.tile.rar-common { border-bottom: 3px solid #c9c3e6; } .tile.rar-uncommon { border-bottom: 3px solid #7dff9b; } .tile.rar-rare { border-bottom: 3px solid #3ee6ff; }
.tile.rar-epic { border-bottom: 3px solid #c9a8ff; } .tile.rar-legendary { border-bottom: 3px solid #ffd84d; } .tile.rar-mythic { border-bottom: 3px solid #ff5fa2; }
.tile.hit { outline: 3px solid var(--gold); background: #2b1d63; animation: tile-pop .5s ease-out; }
@keyframes tile-pop { 40% { transform: scale(1.08); } }
.op-result { min-height: 86px; text-align: center; display: grid; gap: 6px; justify-items: center; padding-top: 12px; }
.op-result p { margin: 0; color: var(--muted); }
.won { display: flex; align-items: center; gap: 8px; font-size: 20px; }
.won.rar-legendary b, .won.rar-mythic b { color: var(--gold); }
.op-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 560px) { .tile { width: 104px; height: 84px; } .tile-look { font-size: 14px; } }

.chip-prev { display: grid; place-items: center; }