/* The same printed face is used on the shelf and the animated wrapper. */
.skin-based { --foil: #d0fc70; --seam: #a4d442; --ink: #142009; --paper: #d0fc70; }
.skin-fallout { --foil: #e5c660; --seam: #c6a64e; --ink: #f8df79; --paper: #254e7a; }
.skin-mystery { --foil: #4a5045; --seam: #393f34; --ink: #a5ad9c; --paper: #22291e; }
#pack { padding: 0; border-top-color: var(--seam); border-bottom-color: var(--seam); }
.pack-face { position: absolute; inset: 0; overflow: hidden; padding: 16px; background: var(--paper); color: var(--ink); isolation: isolate; }
.pack-face::before { content: ''; position: absolute; inset: 0; z-index: 5; background: repeating-linear-gradient(90deg,#0001 0 1px,transparent 1px 5px),linear-gradient(105deg,transparent 25%,#ffffff29 39%,transparent 49%,#0001 88%); pointer-events: none; }
.face-series { display: flex; justify-content: space-between; border-bottom: 1px solid currentColor; padding-bottom: 8px; font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.face-title { position: relative; z-index: 2; margin-top: 12px; font-size: 38px; line-height: .95; font-weight: 900; letter-spacing: -2px; }
.face-title small { display: block; font-size: 19px; letter-spacing: -.6px; margin-top: 5px; }
.face-subtitle { position: relative; z-index: 2; margin-top: 8px; font-size: 6px; font-weight: 800; letter-spacing: 1px; }
.face-art { position: absolute; width: 132px; height: 132px; right: 10px; bottom: 45px; border: 3px solid var(--ink); border-radius: 50%; overflow: hidden; transform: rotate(-8deg); box-shadow: 4px 5px 0 #0003; }
.face-art img { width: 100%; height: 100%; display: block; object-fit: contain; }
.face-emblem { position: absolute; left: 14px; bottom: 85px; z-index: 3; font-size: 24px; font-weight: 900; letter-spacing: -2px; transform: rotate(-12deg); }
.face-spark { position: absolute; left: 17px; bottom: 48px; font-size: 38px; }
.face-footer { position: absolute; bottom: 13px; left: 16px; right: 12px; font-size: 6px; font-weight: 800; line-height: 1.6; letter-spacing: .4px; }
.face-serial { position: absolute; bottom: 13px; right: 12px; font-size: 6px; font-weight: 800; writing-mode: vertical-rl; }
.radiation-mark { display: block; width: 100%; height: 100%; }
.skin-fallout .pack-face { background: repeating-linear-gradient(110deg,#ffffff03 0 2px,transparent 2px 11px),linear-gradient(100deg,#173b61,#315e8b 55%,#234867); }
.skin-fallout .pack-face::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 6; box-shadow: inset 3px 0 10px #e7b65c66,inset -4px 0 10px #15140b66; background: repeating-linear-gradient(165deg,transparent 0 29px,#e8c87b22 30px,transparent 31px 43px); }
.skin-fallout .face-title { font-size: 31px; letter-spacing: -1px; }
.skin-fallout .face-title small { color: #f4dc86; font-size: 18px; }
.skin-fallout .face-art { border-radius: 10px 10px 36px 10px; width: 125px; height: 125px; right: 14px; bottom: 45px; transform: rotate(5deg); }
.skin-fallout .face-emblem { width: 52px; height: 52px; bottom: 106px; left: 12px; transform: rotate(-8deg); }
.skin-fallout .face-footer { color: #f8e7ac; }
.skin-fallout .face-subtitle { color: #f4dc86; }
.bottle-cap { position: absolute; z-index: 3; display: grid; place-items: center; width: 31px; height: 31px; border: 4px dashed #d2ab69; background: #a74133; color: #ffe5b8; border-radius: 50%; font-size: 12px; box-shadow: 2px 3px 0 #0006; }
.cap-one { left: 22px; bottom: 52px; transform: rotate(-18deg); }
.cap-two { left: 43px; bottom: 68px; transform: rotate(20deg); }
.wrapper-body { background: var(--paper); border-bottom-color: var(--seam); }
.tear-strip { background: linear-gradient(100deg,var(--seam),var(--foil),var(--seam)); border-top-color: var(--seam); color: #19230c; }
.skin-fallout .card-stack i { border-color: #e5c660; background: repeating-linear-gradient(45deg,#e5c66012 0 2px,transparent 2px 12px),linear-gradient(140deg,#244f7a,#14283c); }
.skin-fallout .card-stack i::after { content: 'FO / 002'; color: #f4d879; font-size: 28px; letter-spacing: -1px; }
.fallout-theme .card.unrevealed { border-color: #d1b662; background: repeating-linear-gradient(45deg,#d6bd6412 0 2px,transparent 2px 12px),radial-gradient(ellipse,#285077,#122538); }
.fallout-theme .unrevealed::before { content: 'FO / 002'; color: #edcf75; font-size: 28px; letter-spacing: -1px; }
.pack-mini { position: relative; flex: 0 0 48px; width: 48px; height: 66px; background: var(--paper); color: var(--ink); border: 1px solid var(--seam); box-shadow: 2px 3px 0 #0006; transform: rotate(-5deg); overflow: hidden; }
.mini-seam { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: repeating-linear-gradient(90deg,var(--seam) 0 2px,var(--foil) 2px 3px); }
.mini-seam.bottom { top: auto; bottom: 0; }
.mini-brand { position: absolute; top: 12px; width: 100%; text-align: center; font-size: 8px; font-weight: 900; letter-spacing: -.5px; }
.mini-mark { position: absolute; width: 25px; height: 25px; left: 10px; top: 28px; text-align: center; font-size: 16px; font-weight: 900; line-height: 25px; }
.skin-mystery { background: repeating-linear-gradient(135deg,#ffffff04 0 1px,transparent 1px 7px),#1d2419; }
.skin-mystery .mini-brand { opacity: .4; }
.skin-mystery .mini-mark { color: #a5ae9b; font-size: 27px; text-shadow: 0 0 10px #b3d77c44; }
@media(max-width:650px) { .face-art { width: 112px; height: 112px; }.face-title { font-size: 33px; }.face-title small { font-size: 17px; }.skin-fallout .face-title { font-size: 28px; }.skin-fallout .face-art { width: 112px; height: 112px; }.skin-fallout .face-emblem { width: 45px; height: 45px; }.wrapper-body .face-art { width: 125px; height: 125px; } }