.shop-crate { --crate-paper: #e7dfc5; --crate-line: #66654e; --sc-card-width: clamp(164px, 22vw, 216px); position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: clamp(12px, 3vw, 40px); border: 0; overflow: auto; overscroll-behavior: contain; color: var(--crate-paper); background: #0b100ef2; font: 14px/1.4 monospace; color-scheme: dark; }
.shop-crate[open] { display: grid; place-items: center; }
.shop-crate::backdrop { background: #090c0bde; }
.shop-crate, .shop-crate * { box-sizing: border-box; }
.shop-crate[hidden], .shop-crate [hidden] { display: none !important; }
.shop-crate .sc-panel { width: min(1180px, 100%); min-width: 0; min-height: min(720px, calc(100dvh - 80px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--crate-line); background: #1a201a; box-shadow: 0 24px 90px #0009, inset 0 0 0 5px #272d23; }
.shop-crate button { min-height: 48px; padding: 12px 28px; border: 1px solid #9b916b; border-radius: 2px; color: var(--crate-paper); background: #313a2b; font: 18px/1.2 'Street Terminal', monospace; cursor: pointer; }
.shop-crate button:hover:not(:disabled) { background: #45513a; border-color: #e9d291; }
.shop-crate button:disabled { cursor: default; opacity: .6; }
.shop-crate button:focus-visible { outline: 3px solid #f0dba6; outline-offset: -5px; }
.shop-crate .sc-header { display: flex; align-items: center; gap: 18px; padding: clamp(18px, 3vw, 36px); border-bottom: 1px solid #55583f; }
.shop-crate h2 { flex: 1; min-width: 0; margin: 0; font: clamp(36px, 5vw, 64px)/.95 'Street Terminal', monospace; letter-spacing: .03em; }
.shop-crate .sc-local { font-size: 10px; color: #b9a779; white-space: nowrap; }
.shop-crate .sc-close { width: 48px; flex-shrink: 0; padding: 0; background: transparent; border-color: #686c53; font-size: 30px; }
.shop-crate .sc-stage { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; background: repeating-linear-gradient(0deg, #aaa08005 0 1px, transparent 1px 4px), radial-gradient(ellipse at center, #3b4930, #161d16 78%); }
.shop-crate .sc-reel { position: relative; min-height: 310px; overflow: hidden; border-block: 1px solid #b7a26830; }
.shop-crate .sc-reel::before, .shop-crate .sc-reel::after { content: ''; position: absolute; top: 0; bottom: 0; width: clamp(18px, 7vw, 96px); z-index: 2; pointer-events: none; }
.shop-crate .sc-reel::before { left: 0; background: linear-gradient(90deg, #171e17, transparent); }
.shop-crate .sc-reel::after { right: 0; background: linear-gradient(-90deg, #171e17, transparent); }
.shop-crate .sc-strip { position: relative; min-height: 310px; display: flex; align-items: center; gap: 16px; }
.shop-crate .sc-marker { position: absolute; top: 0; left: calc(50% - 1px); width: 2px; height: 100%; background: linear-gradient(#f1d19a, transparent 12%, transparent 88%, #f1d19a); pointer-events: none; }
.shop-crate .sc-marker::before, .shop-crate .sc-marker::after { content: ''; position: absolute; left: -7px; border: 8px solid transparent; }
.shop-crate .sc-marker::before { top: 0; border-top: 11px solid #f1d19a; }
.shop-crate .sc-marker::after { bottom: 0; border-bottom: 11px solid #f1d19a; }
.shop-crate .sc-card { flex: 0 0 var(--sc-card-width); width: var(--sc-card-width); height: 266px; padding: 10px; background: #242c22; border: 1px solid #687254; border-bottom: 4px solid var(--drop-ink); box-shadow: 4px 6px 0 #0b0e0970; }
.shop-crate .sc-prize-name { display: block; margin-top: 12px; text-align: center; font: 22px/1.05 'Street Terminal', monospace; overflow-wrap: anywhere; }
.shop-crate .sc-prize-artist { display: block; margin-top: 7px; color: #c5c6ad; text-align: center; font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
.shop-crate .sc-duplicate { display: block; margin-top: 7px; color: #f0dba6; text-align: center; font-size: 12px; }
.shop-crate .sc-card-art { height: 158px; position: relative; overflow: hidden; background: #343e2d; }
.shop-crate .sc-card-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.shop-crate .sc-card-art-cassette { display: grid; place-items: center; padding: 3px; background: radial-gradient(ellipse, #88926a26, transparent 72%); overflow: visible; }
.shop-crate .sc-card-art-cassette > .cassette-art { width: 100%; }
.shop-crate .sc-art-fallback { position: absolute; inset: 22px 8px; display: grid; place-content: center; text-align: center; font: 23px/1 'Street Terminal', monospace; color: #1b1e16; background: var(--drop-ink); border: 3px double #35382b; box-shadow: 3px 3px 0 #10130da0; }
.shop-crate .sc-art-cassette { inset: 24px 9px; background: repeating-linear-gradient(-4deg, transparent 0 8px, #0001 9px 10px), var(--drop-ink); border: 7px solid #161d16; font-size: 42px; }
.shop-crate .sc-art-cassette::after { content: '◉ ━ ◉'; display: block; margin-top: 8px; letter-spacing: 3px; font-size: 21px; }
.shop-crate .sc-art-cash { transform: rotate(-7deg); background: #97ab7d; font-size: 44px; box-shadow: 3px 4px 0 #566147, 5px 7px 0 #9eac80; }
.shop-crate .sc-sealed { display: grid; place-content: center; width: 240px; height: 200px; margin: auto; border: 8px double #b9ab77; background: repeating-linear-gradient(0deg, #50583b 0 42px, #303a27 43px 47px); color: #e3d7af; font: 86px/1 'Street Terminal', monospace; box-shadow: 8px 10px 0 #0a0d0860; }
.shop-crate[data-state='won'] .sc-card[data-reward='true'] { border-color: var(--drop-ink); background: #35402c; box-shadow: 0 0 36px #c7b37730; }
.shop-crate[data-state='won'] .sc-card[data-rarity='ultra-legendary'] { background: linear-gradient(145deg, #142b32, #261c34); box-shadow: 0 0 30px #dcfaff66, inset 0 0 0 1px #c5afff; }
.shop-crate .sc-ultra-rarity { display: block; margin-top: 6px; color: #dcfaff; text-align: center; text-transform: uppercase; font: 11px/1.2 monospace; letter-spacing: 1px; }
.shop-crate .sc-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(18px, 3vw, 32px); min-height: 100px; border-top: 1px solid #55583f; }
.shop-crate .sc-status { min-width: 0; max-width: 760px; color: #ddd5b6; font-size: 14px; overflow-wrap: anywhere; }
.shop-crate .sc-odds { margin: 18px 24px; color: #c9ac89; text-align: center; font: 12px/1.8 monospace; }
.shop-crate[data-mode='halloween'] { --crate-line: #a57248; }
.shop-crate[data-mode='halloween'] .sc-stage { background: radial-gradient(ellipse, #67462f, #1c211d 78%); }
.shop-crate[data-mode='halloween'] .sc-sealed { border-color: #d49b62; background: repeating-linear-gradient(0deg, #805334 0 42px, #493323 43px 47px); }
.shop-crate .sc-actions button { flex-shrink: 0; min-width: 128px; }
@media (max-width: 600px) { .shop-crate { padding: 12px; } .shop-crate .sc-panel { min-height: calc(100dvh - 24px); } .shop-crate .sc-header { gap: 10px; padding: 22px 16px; } .shop-crate .sc-local { max-width: 36px; white-space: normal; font-size: 9px; } .shop-crate .sc-actions { flex-direction: column; align-items: stretch; gap: 16px; padding: 22px 16px; text-align: center; } .shop-crate .sc-status { font-size: 12px; } .shop-crate .sc-actions button { min-height: 48px; } }
@media (max-height: 550px) and (min-width: 601px) { .shop-crate { padding: 10px; } .shop-crate .sc-panel { min-height: 0; } .shop-crate .sc-header, .shop-crate .sc-actions { padding: 12px 20px; min-height: 0; } .shop-crate h2 { font-size: 34px; } .shop-crate .sc-reel, .shop-crate .sc-strip { min-height: 270px; } .shop-crate .sc-card { height: 242px; } .shop-crate .sc-card-art { height: 136px; } }
@media (prefers-reduced-motion: reduce) { .shop-crate *, .shop-crate *::before, .shop-crate *::after { scroll-behavior: auto; transition: none; animation: none; } }