/* Group B only: official opening, acquired cards and the existing shop. */
body:is([data-view=opening],[data-view=summary],[data-view=boutique],[data-view=products]) #app>.header{background:linear-gradient(#103c55ed,#06223ae8),url('/assets/premium-pass-one/naval-leather-v1.png') center/340px;border-bottom:1px solid #d8c28c}
/* Independent illustrated halo behind the real packet/card, never a replacement UI. */
body[data-view=opening] .open-layout{isolation:isolate;background:linear-gradient(#05243a11,#04182d55),url('/assets/group-two/reveal-storm-v1.jpg') center/cover}
body[data-view=opening] .opening-top{background:linear-gradient(#123d55ed,#06243bd9),url('/assets/premium-pass-one/naval-leather-v1.png') center/300px;border-bottom:1px solid #cbb781;box-shadow:0 4px 10px #001e3e66}
body[data-view=opening] .opening-lot{flex:0 0 auto;position:relative;z-index:2;padding:6px 12px 0;text-align:center;color:#e6f5f5;font:13px 'Carto Condensed';text-shadow:0 1px #002d4e}
body[data-view=opening] .opening-lot>span{display:inline-block;padding:3px 10px;border:1px solid #a9c5c466;background:#06283dcc;border-radius:20px}
body[data-view=opening] .opening-slots{display:flex;justify-content:center;gap:4px;margin:7px auto 0;max-width:260px}
body[data-view=opening] .opening-slots i{display:block;height:4px;flex:1;border:1px solid #9bd6e777;border-radius:3px;background:#082940}
body[data-view=opening] .opening-slots i.discovered{background:linear-gradient(#fff0ad,#51d8f0);box-shadow:0 0 5px #7eeaff77}
body[data-view=opening] .open-stage{position:relative;isolation:isolate;overflow:visible!important}
body[data-view=opening] .open-stage::after{content:'';position:absolute;inset:-6% -3%;z-index:-1;pointer-events:none;background:url('/assets/premium-cards-shop/reveal-halo-v1.png') center/contain no-repeat;opacity:.72;animation:foil-halo-breathe 7s ease-in-out infinite}
body[data-view=opening] .open-layout[data-opening-stage=reveal][data-rarity-score='1'] .open-stage::after{opacity:.25;animation:none}
body[data-view=opening] .open-layout[data-opening-stage=reveal]:is([data-rarity-score='6'],[data-rarity-score='7'],[data-rarity-score='8']) .open-stage::after{filter:hue-rotate(325deg) saturate(1.25);opacity:1}
body[data-view=opening] .pack{filter:drop-shadow(0 10px 13px #001d3799) drop-shadow(0 0 10px #63d7ff33)}
body[data-view=opening] .foil-body::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,#e8faff66 48%,transparent 64%);transform:translateX(-140%);animation:packet-specular 7s ease-in-out infinite;mix-blend-mode:screen}
body[data-view=opening] .tear-line{filter:drop-shadow(0 0 5px #a6f3ff)}
body[data-view=opening] .opening-info{position:relative;z-index:3;padding:8px 12px max(12px,env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,#052339b3 32%,#031e33ec);border-top:1px solid #c9e7ec22}
body[data-view=opening] .opening-info .rarity-tag{font:600 14px 'Carto Condensed';color:#ffe9b4;letter-spacing:.05em;text-shadow:0 1px #01243c}
body[data-view=opening] .opening-info h2{font:600 27px 'Carto Condensed';text-shadow:0 2px #012a45}
body[data-view=opening] .opening-info .reveal-price{display:inline-block;margin-left:6px;padding:3px 7px;background:#07283f;border:1px solid #ceb97f;border-radius:4px;color:#ffe19c;font:600 19px 'Carto Condensed'}
body[data-view=opening] .skip-opening{background:linear-gradient(#fff1bf,#ddb967 60%,#b98940);border:1px solid #ffe9b2;box-shadow:inset 0 0 0 3px #fff2,0 3px 7px #00243e99;font:600 21px 'Carto Condensed';color:#30291e;min-height:48px;border-radius:9px}
/* Results: one actual featured slot and every other acquired slot; fixed decision bar. */
body[data-view=summary] #app>.layout.summary{display:flex;flex-direction:column;gap:7px;padding-bottom:calc(77px + env(safe-area-inset-bottom,0px));background:linear-gradient(#07243b33,#04182bc9),url('/assets/group-two/reveal-storm-v1.jpg') center/cover}
body[data-view=summary] .collection-heading{min-height:42px;margin:0;flex-shrink:0}
body[data-view=summary] .collection-heading h1{font:600 26px 'Carto Condensed';margin:0;color:#ffebbe}
body[data-view=summary] .summary-count{margin:0;font-size:11px;color:#d7ebee;text-shadow:0 1px #01233a}
body[data-view=summary] .summary-featured{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;flex-shrink:0;min-height:0}
body[data-view=summary] .summary-featured::before{content:'';position:absolute;inset:-10px -8px;z-index:-1;pointer-events:none;background:url('/assets/premium-cards-shop/reveal-halo-v1.png') center/contain no-repeat;opacity:.8}
body[data-view=summary] .featured-caption{padding:3px 12px;border:1px solid #e3c48788;border-radius:12px;background:#082a42cc;font:600 12px 'Carto Condensed';color:#fff0bc;letter-spacing:.05em;margin-bottom:5px}
body[data-view=summary] .summary-featured>.card-tile{width:auto;max-width:68%;padding:5px 6px 4px;border:0;background:radial-gradient(ellipse,#43c8e42b,transparent 72%);box-shadow:none;overflow:visible;position:relative}
body[data-view=summary] .summary-featured .image-wrap{height:clamp(190px,28dvh,265px);width:auto;aspect-ratio:2/2.8;border:2px solid #f3d38d;border-radius:7px;box-shadow:0 0 0 2px #0a3b54,0 0 21px #57d8ff70,0 5px 10px #001d35aa}
body[data-view=summary] .summary-featured .image-wrap img{object-fit:contain;width:100%;height:100%}
body[data-view=summary] .summary-featured .card-label{font:600 19px 'Carto Condensed'!important;color:#fff0c7;text-align:center;display:block;line-height:1.1;margin-top:5px}
body[data-view=summary] .summary-featured .card-meta{display:block;text-align:center;font-size:10px!important;color:#d4e9ec}
body[data-view=summary] #app .summary-featured .card-price{display:block!important;text-align:center;font:600 21px 'Carto Condensed'!important;color:#ffe4a3;text-shadow:0 1px #00253d}
body[data-view=summary] .summary-featured .new-badge{left:-9px;top:12px;transform:rotate(-10deg);border:1px solid #ffe1a2;background:linear-gradient(#ff7255,#bd301b);color:#fff1c7;box-shadow:0 3px 6px #00243d80;font:600 17px 'Carto Condensed';padding:4px 12px}
body[data-view=summary] .summary-sort{flex-shrink:0;min-height:36px;padding:2px;background:#06263bd9;border:1px solid #b1af81;border-radius:6px}
body[data-view=summary] .summary-sort button{min-height:36px;font:600 14px 'Carto Condensed'}
body[data-view=summary] .summary-gallery{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;overscroll-behavior-x:contain;padding:7px 3px 8px;min-height:128px;flex-shrink:0;background:linear-gradient(transparent,#072b4099);border-bottom:1px solid #d9c28c66}
body[data-view=summary] .summary-gallery .card-tile{flex:0 0 72px;min-width:72px;max-width:72px;padding:3px;border:1px solid #bba778;border-radius:5px;background:linear-gradient(#153f57,#061d33);scroll-snap-align:start;box-shadow:0 4px 6px #00152699;position:relative}
body[data-view=summary] .summary-gallery .image-wrap{height:auto;width:100%;aspect-ratio:2/2.8;border-radius:3px}
body[data-view=summary] .summary-gallery .card-label{display:block;font:600 10px 'Carto Condensed'!important;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;color:#f3e4bd}
body[data-view=summary] .summary-gallery .card-meta{display:none}
body[data-view=summary] #app .summary-gallery .card-price{display:block!important;color:#ffe1a4;font:600 13px 'Carto Condensed'!important}
body[data-view=summary] .summary-gallery .qty{top:3px;right:3px;font-size:8px;padding:1px 2px}
body[data-view=summary] .summary-gallery :is(.new-badge,.auto-badge){font-size:8px;padding:2px;left:2px;top:3px}.summary-gallery .auto-badge{top:18px!important}
body[data-view=summary] .summary-sale-options{flex-shrink:0;border:1px solid #c4ae79;border-radius:6px;background:linear-gradient(#123b50eb,#06243aea),url('/assets/premium-pass-one/naval-leather-v1.png') center/300px}
body[data-view=summary] .summary-sale-options>summary{min-height:44px;padding:8px 10px;color:#ffe8b7;font:600 14px 'Carto Condensed'}
body[data-view=summary] .summary-sale-options>summary span{display:block;font:12px 'Carto Condensed';color:#c6dfe2}
body[data-view=summary] .summary-footer{position:fixed;z-index:12;left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));bottom:calc(70px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:6px;background:linear-gradient(#12394cf0,#041f35f5);border:1px solid #d6bd7f;border-radius:9px;box-shadow:0 -4px 12px #001c3599}
body[data-view=summary] .summary-footer button{min-height:44px;padding:7px 4px;font:600 18px 'Carto Condensed';white-space:normal}
body[data-view=summary] .summary-footer button:first-child{background:linear-gradient(#ffedb4,#cfaa5d);color:#34291d;border-color:#ffe6a5}
body[data-view=summary] .summary-reopen{flex-shrink:0;background:linear-gradient(#17465d,#08263d);font:600 16px 'Carto Condensed';min-height:44px}
/* Shop: real official pack illustrations stand on a carved shelf inside the cabin. */
body[data-view=boutique] #app{background:linear-gradient(#05273b11,#041b2c55),url('/assets/premium-cards-shop/trading-cabin-v1.png') center/cover}
body[data-view=boutique] #app>.layout.boutique{background:none;gap:7px}
body[data-view=boutique] .shop-heading{order:0;padding:3px 6px!important;background:linear-gradient(90deg,#082b3bd9,#082b3b66);border-radius:6px}
body[data-view=boutique] .shop-heading h1{color:#fff0c5;text-shadow:0 2px #06283e}
body[data-view=boutique] .shop-wallet{background:linear-gradient(#17445de8,#06283be8);border:1px solid #e1c78f;border-radius:7px;box-shadow:inset 0 1px #fff3}
body[data-view=boutique] .shop-reference-links{order:1;background:#06243ce6;padding:3px;border:1px solid #baa97b;border-radius:6px}
body[data-view=boutique] .shop-format-tabs{order:2;display:flex;gap:5px;background:#08283cbd;padding:3px;border:1px solid #a7b1a0;border-radius:6px;flex-shrink:0}
body[data-view=boutique] .shop-format-tabs button{flex:1;min-height:40px;border:1px solid #9ea58c;border-radius:4px;background:linear-gradient(#234d60,#08253d);color:#e5ebdd;font:600 15px 'Carto Condensed'}
body[data-view=boutique] .shop-format-tabs button[aria-pressed=true]{background:linear-gradient(#fff0bc,#c8a35b);color:#322c21;border-color:#ffe3a5;box-shadow:inset 0 1px #fff8}
body[data-view=boutique] #app .shop-showcase{order:4;position:relative;isolation:isolate;padding:9px 6px 14px;gap:7px;border:1px solid #c3a46d;border-bottom:8px solid #8e633c;background:linear-gradient(#06344a66,#052638a6);box-shadow:inset 0 -5px #d2ac6855,0 6px 8px #00192780;overflow:visible}
body[data-view=boutique] #app .shop-product{padding:5px 3px 7px;background:linear-gradient(#153f5144,#05243be0);border:1px solid #c6b58599;box-shadow:inset 0 1px #fff2,0 3px 5px #001a2f66;position:relative;overflow:hidden}
body[data-view=boutique] .product-plinth{display:block;position:relative;perspective:500px;padding-bottom:8px}
body[data-view=boutique] .product-plinth::after{content:'';position:absolute;left:4%;right:4%;bottom:1px;height:9px;background:linear-gradient(#d8b375,#936a40);border-radius:50%;box-shadow:0 3px 5px #00152580;transform:perspective(200px) rotateX(40deg)}
body[data-view=boutique] #app .shop-product .real-pack-art{height:146px;width:100%;margin:0 auto;filter:drop-shadow(0 3px 3px #001e2c99);transform:rotateY(-4deg)}
body[data-view=boutique] .shop-product strong{display:block;font:600 20px 'Carto Condensed';color:#fff0c5}
body[data-view=boutique] .shop-product>small{display:block;font:600 18px 'Carto Condensed';color:#ffe2a0;padding:2px 0}
body[data-view=boutique] .shop-unit-label{display:block;font:11px 'Carto Condensed';color:#d0e4e8}
body[data-view=boutique] .shop-art-note{order:4;font:11px 'Carto Condensed';padding:4px 6px;margin:0;background:#08283cdd;color:#d6e9e8}
body[data-view=boutique] #app>.layout.boutique>.shop-card-shelf{order:5;min-height:142px!important;border:1px solid #d0b77d;background:linear-gradient(#174354e8,#08263ee8),url('/assets/premium-pass-one/naval-leather-v1.png') center/300px;box-shadow:inset 0 1px #fff3}
body[data-view=boutique] #app>.layout.boutique>.shop-card-shelf>div,body[data-view=boutique] #app .shop-card-shelf .image-wrap{height:96px!important}
body[data-view=boutique] .shop-cosmetics-link{order:6;background:linear-gradient(#143d51e8,#06253be8);border:1px solid #c8af74}
body[data-view=boutique] .shop-accounts{order:7;flex-shrink:0;background:linear-gradient(#133c50ed,#06233bed);border:1px solid #b9ab80;border-radius:6px}
body[data-view=boutique] .shop-accounts>summary{min-height:44px;padding:10px;color:#ffe6ad;font:600 15px 'Carto Condensed'}
body[data-view=boutique] .shop-accounts .money-cards{padding:5px;gap:5px}
body[data-view=boutique] .sell-main{order:8;min-height:44px}
body[data-view=boutique] .layout.boutique>.text-btn{order:9;background:#08263be6;min-height:44px}
body[data-view=boutique] .layout.boutique>.btn.secondary{order:10;background:linear-gradient(#164258e6,#08263be6);min-height:44px}
body[data-view=boutique] .micro-note{order:11;background:#08273cdd;padding:5px;border-radius:4px;color:#d3e6e8}
body:is([data-view=summary],[data-view=boutique],[data-view=products]) #modal .transaction-total{background:linear-gradient(#18445b,#08283e);border:1px solid #b9ba93;box-shadow:inset 0 1px #fff3}
body:is([data-view=summary],[data-view=boutique],[data-view=products]) #modal .purchase-detail{background:linear-gradient(#163f54dd,#07243bdd),url('/assets/premium-pass-one/naval-leather-v1.png') center/300px;border:1px solid #c4ad76;border-radius:6px;padding:10px}
@keyframes packet-specular{0%,65%{transform:translateX(-140%)}90%,100%{transform:translateX(140%)}}
@keyframes foil-halo-breathe{0%,100%{opacity:.5;transform:scale(.97)}50%{opacity:.9;transform:scale(1.03)}}
@media(max-height:710px){body[data-view=opening] .opening-lot{padding-top:3px;font-size:12px}body[data-view=opening] .opening-info{padding-top:4px}body[data-view=opening] .opening-info h2{font-size:23px}body[data-view=summary] .summary-featured .image-wrap{height:185px}body[data-view=summary] .summary-featured .card-label{font-size:16px!important}body[data-view=summary] #app .summary-featured .card-price{font-size:18px!important}body[data-view=summary] .featured-caption{font-size:11px;margin-bottom:2px}body[data-view=summary] .summary-gallery{min-height:116px}body[data-view=summary] .summary-gallery .card-tile{flex-basis:64px;min-width:64px;max-width:64px}body[data-view=boutique] #app .shop-product .real-pack-art{height:120px}body[data-view=boutique] .shop-product strong{font-size:18px}body[data-view=boutique] .shop-product>small{font-size:16px}}
@media(prefers-reduced-motion:reduce){body[data-view=opening] .open-stage::after,body[data-view=opening] .foil-body::after{animation:none!important}}
body.reduced[data-view=opening] .open-stage::after,body.reduced[data-view=opening] .foil-body::after{animation:none!important}
body:is([data-view=opening],[data-view=summary],[data-view=boutique]) button:focus-visible{outline:2px solid #b1f5ff;outline-offset:2px}
/* Fade the independent overlay edges instead of revealing its rectangular bounds. */
body[data-view=opening] .open-stage::after{background-size:100% 100%;mask-image:radial-gradient(ellipse at center,#000 40%,transparent 83%)}
body[data-view=summary] .summary-featured::before{background-size:100% 100%;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);opacity:.72}
body[data-view=summary] #app .layout.summary .collection-heading h1{font-size:26px}
/* Cropped official images are absolutely positioned and need an explicit host width. */
body[data-view=boutique] .product-plinth{width:100%;flex-shrink:0}
body[data-view=boutique] #app>.layout.boutique>.shop-cosmetics-link{order:6}
body[data-view=boutique] #app>.layout.boutique>.shop-accounts{order:7}
body[data-view=boutique] #app>.layout.boutique>.sell-main{order:8}
body[data-view=boutique] #app>.layout.boutique>.micro-note{order:11}
body[data-view=boutique] #app .shop-product .real-pack-art{height:136px;width:auto;max-width:100%;aspect-ratio:var(--pack-ratio,.64)}
@media(max-height:710px){body[data-view=boutique] #app .shop-product .real-pack-art{height:112px}}
body[data-view=opening] .open-layout[data-opening-stage=reveal]:is([data-rarity-score='6'],[data-rarity-score='7']) .open-stage::after{filter:hue-rotate(35deg) saturate(1.15)}
body[data-view=opening] .open-layout[data-opening-stage=reveal][data-rarity-score='8'] .open-stage::after,body[data-view=summary] .summary-featured[data-hit='8']::before{filter:hue-rotate(170deg) saturate(1.2)}
body[data-view=boutique] #app .shop-product{gap:2px}
@media(max-height:710px){body[data-view=boutique] #app>.layout.boutique{gap:5px}}
/* The gesture is already explained in the header and bottom control area. */
body[data-view=opening] .pack-caption{display:none}
/* Classification is secondary to the actual cards and keep/sell controls. */
body[data-view=summary] .summary-display-options{flex-shrink:0;border:1px solid #b8b487;border-radius:6px;background:linear-gradient(#123a4ee8,#06283ce8)}
body[data-view=summary] .summary-display-options>summary{min-height:44px;padding:10px;color:#ffe8b4;font:600 14px 'Carto Condensed'}
body[data-view=summary] .summary-display-options .summary-sort{margin:0 5px 5px}
@media(max-height:710px){body[data-view=summary] .summary-featured .image-wrap{height:150px}body[data-view=summary] .summary-gallery{min-height:108px;padding-top:5px;padding-bottom:5px}body[data-view=summary] .summary-gallery .card-tile{flex-basis:58px;min-width:58px;max-width:58px}}
body[data-view=summary] .summary-footer{box-shadow:0 -4px 12px #001c3599,0 14px 0 #061f35}