.pack-shelf{--shelf-text:#f3f4eb;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;min-width:0;border:0;margin:0;padding:0}
.shelf-pack{--accent:#c5e58a;--ink:#353c33;position:relative;isolation:isolate;min-width:0;display:grid;grid-template-columns:1fr auto;grid-template-rows:minmax(0,1fr) auto;align-items:end;gap:0 6px;padding:8px clamp(12px,1.45vw,22px) 18px;border:1px solid #46504a;border-radius:5px;color:var(--shelf-text);background:radial-gradient(ellipse at 51% 42%,var(--ink),#141918 79%);text-align:left;cursor:pointer;overflow:hidden}
.shelf-pack.away{--accent:#ff9b67;--ink:#534439}.shelf-pack.night{--accent:#81bfff;--ink:#263e67}.shelf-pack.gold{--accent:#f8db86;--ink:#554d35}
.shelf-pack:has(input:checked),.shelf-pack[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 -3px var(--accent)}
.shelf-pack:focus-visible,.shelf-pack:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}
.shelf-pack input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2}
.shelf-foil{grid-column:1/-1;display:grid;place-items:center;position:relative;height:clamp(165px,16.2vw,244px);pointer-events:none}
.shelf-foil::before{content:"";position:absolute;bottom:9%;height:8%;width:53%;border-radius:50%;background:#050806bb;filter:blur(6px)}
.shelf-foil img{position:relative;width:100%;height:100%;min-height:0;object-fit:contain;filter:drop-shadow(2px 7px 5px #0007);transition:transform .2s cubic-bezier(.23,1,.32,1)}
.shelf-title{font:800 clamp(20px,2.2vw,31px)/.98 "Barlow Condensed",BarlowCondensed,"Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:-.025em;align-self:center}

.shelf-heading p{color:#b5c0b4;font:400 17px/1.45 Barlow,sans-serif;margin:10px 0 0}
.pack-lobby{margin:0 0 30px}.pack-lobby .shelf-heading h1{margin:0;font:800 clamp(42px,6vw,83px)/.93 BarlowCondensed,sans-serif;text-transform:uppercase;letter-spacing:-.035em}
.pack-lobby .pack-shelf{margin-top:20px}.reel-mode .pack-lobby{display:none}
@media(hover:hover) and (pointer:fine){.shelf-pack:hover{border-color:var(--accent)}.shelf-pack:hover .shelf-foil img{transform:translateY(-4px) rotate(-1deg)}}
@media(max-width:660px){.pack-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.shelf-foil{height:clamp(112px,34vw,172px)}.shelf-pack{padding:5px 10px 12px}.shelf-title{font-size:20px}}
@media(prefers-reduced-motion:reduce){.shelf-foil img{transition:none}.shelf-pack:hover .shelf-foil img{transform:none}}

.shelf-selection{display:grid;place-items:center;width:15px;height:15px;border:1px solid #859087;border-radius:50%;align-self:center;pointer-events:none}
.shelf-pack:has(input:checked) .shelf-selection,.shelf-pack[aria-pressed=true] .shelf-selection{border-color:var(--accent)}
.shelf-pack:has(input:checked) .shelf-selection::after,.shelf-pack[aria-pressed=true] .shelf-selection::after{content:"";width:7px;height:7px;background:var(--accent);border-radius:50%}
#test-animations{margin:8px 0 14px}#test-animations[open]>summary{margin-bottom:18px}#test-grade{margin-bottom:16px}