/* Scoped to containers and reveal screens. No shared economy or profile styles. */
#home{--opening-gold:#f8d47c;--opening-purple:#bd74fa}
#home .section-head{margin-bottom:14px}#home .section-head h1{font-size:24px}
#home .roll-center{position:relative;display:grid;grid-template-columns:1fr auto;gap:12px;padding:14px;border:1px solid #786134;border-radius:24px;background:radial-gradient(ellipse at 90% 20%,#70379224,transparent 55%),linear-gradient(145deg,#171615,#060709 70%);box-shadow:inset 0 1px #fff2,0 12px 30px #0006}
#home #rollStage{grid-column:1/-1;min-height:0;padding:0;overflow:hidden;border:0;border-radius:16px;background:#08080b;box-shadow:none}
.container-hero{position:relative;isolation:isolate;min-height:310px;padding:20px 18px 28px;overflow:hidden;background:#08070d url('/static/assets/roll/container-open.webp') 58% center/cover no-repeat}
.container-label{display:inline-block;color:#efd69c;font-size:9px;letter-spacing:1.2px;border:1px solid #b8964b80;border-radius:6px;padding:7px 9px;background:#16130fa0}
.container-hero h2{position:relative;z-index:2;margin:16px 0 8px;font-size:clamp(27px,8vw,39px);line-height:1;letter-spacing:-.5px;font-weight:950;color:#fff7df;text-shadow:0 2px 14px #000}.container-hero h2 em{color:#ffd775;font-style:normal}
.container-hero>p{position:relative;z-index:2;margin:0;max-width:170px;color:#c1bec9;font-size:12px;line-height:1.6}
.container-scene{position:absolute;inset:42px 0 20px 32%;z-index:1;pointer-events:none}.container-scene>img{position:absolute;bottom:2px;right:0;width:110%;height:155px;object-fit:contain;filter:drop-shadow(0 17px 10px #000) drop-shadow(0 0 12px #e2b65455)}
.container-note{position:absolute;bottom:12px;left:18px;right:12px;z-index:3;font-size:9px;color:#a8a1aa}
#home .roll-price-line{grid-column:1;display:flex;flex-wrap:wrap;align-content:center;justify-content:flex-start;gap:4px 8px;margin:0;padding:10px 0;min-width:0;border:0;background:none}#home .roll-price-line>span:first-child{font-size:10px;color:#afa89a}#home #rollCost{flex:1 1 100%;font-size:clamp(15px,4.5vw,22px);line-height:1.3;overflow-wrap:anywhere;color:#ffdfa0}#home .free-rolls{font-size:10px;color:#c0aecf}
#home .roll-count-switch{grid-column:2;display:flex;align-self:center;width:auto;margin:0;padding:4px;gap:3px;border:1px solid #685435;border-radius:14px;background:#09090d}#home .roll-count-switch button{min-width:42px;min-height:44px;padding:6px;font-size:16px;border-radius:10px}#home .roll-count-switch button.active{background:linear-gradient(135deg,#3c2e16,#12100e);color:#ffe3a0;border:1px solid #e9c774;box-shadow:inset 0 0 8px #efb64944}
#home .roll-buttons{grid-column:1/-1;margin:0}#home #roll1{min-height:66px;border:1px solid #ffe49b;border-radius:19px;background:linear-gradient(125deg,#b77818,#ffdb78 38%,#f4cd68 53%,#bd841f);color:#171006;box-shadow:inset 0 2px 1px #fff7,0 0 20px #e9b64a20}#home #roll1 b{font-size:23px}#home #roll1 small{font-size:11px;line-height:1.35}#home #roll1:disabled{filter:saturate(.35);opacity:.65}
#home .roll-filter-drawer{grid-column:1/-1;margin:2px 0 0;border:0;background:none;padding:0}#home .roll-filter-drawer summary{font-size:13px;padding:10px 0}#home .roll-filter-drawer summary small{display:none}#home .roll-selector-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}#home .selector-pill{min-width:0;min-height:68px;border-radius:13px;border:1px solid #49414f;background:linear-gradient(135deg,#202026,#0c0c10);padding:11px;text-align:left}#home .selector-pill small{color:#bba4cf;font-size:10px}#home .selector-pill b{font-size:12px;white-space:normal;overflow-wrap:anywhere}
.opening-explainer{margin:16px 0;padding:16px 10px;border:1px solid #776038;border-radius:18px;background:linear-gradient(130deg,#191713,#0c0c10)}.opening-explainer h3{font-size:12px;letter-spacing:.6px;margin:0 6px 16px}.opening-explainer p{font-size:10px;color:#a7a0ae;text-align:center;margin-bottom:0}
.opening-steps{list-style:none;display:flex;justify-content:space-between;padding:0;margin:18px 0 24px;width:100%;isolation:isolate}.opening-steps li{position:relative;flex:1;min-width:0;text-align:center;color:#7a7286}.opening-steps li:not(:last-child)::after{content:'';position:absolute;top:22px;left:65%;width:70%;height:3px;background:#3a2a4c;z-index:-1}.opening-steps li.complete::after{background:linear-gradient(90deg,#c59336,#ffdd8b)}.step-orb{position:relative;display:grid;place-items:center;width:44px;height:44px;margin:0 auto 12px;border:1px solid #615269;border-radius:50%;background:linear-gradient(140deg,#27202b,#070709);box-shadow:inset 0 0 8px #000}.step-orb svg{width:24px;height:24px}.step-orb .step-icon{width:30px;height:30px;max-width:100%;max-height:100%;object-fit:contain}.step-orb small{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);display:grid;place-items:center;min-width:18px;height:19px;padding:0 3px;border:1px solid currentColor;background:#08090b;border-radius:7px;font-size:10px}.opening-steps b{font-size:10px;font-weight:500}.opening-steps .current,.opening-steps .complete{color:#f8d47c}.opening-steps .current .step-orb,.opening-steps .complete .step-orb{border-color:#f1cf7d;box-shadow:inset 0 0 12px #d7a13026,0 0 14px #d7a13033}.opening-steps .current b{font-weight:800}.opening-steps .rarity-step.current{color:var(--drop)}.opening-steps .rarity-step.current .step-orb{border-color:var(--drop);box-shadow:0 0 16px var(--drop)}.opening-steps .rarity-step.current::after{background:var(--drop)}
.opening-heading{text-align:center;padding:16px 8px 0}.opening-heading>small{font-size:8px;letter-spacing:2px;color:#b9a173}.opening-heading h2{font-size:clamp(18px,5.2vw,24px);line-height:1.15;text-transform:uppercase;margin:10px 0 6px;letter-spacing:.5px;color:#fff4d9}.opening-heading p{font-size:12px;color:#b7afbe;margin:0}
#revealProgress{width:100%;max-width:440px}
/* Full-bleed reveal scene: background art is the single shared canvas. */
#revealOverlay{--drop:#c477ff;--stage-accent:#f8d47c;position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;height:100dvh!important;z-index:1000!important;display:block!important;overflow:hidden!important;padding:0!important;margin:0!important;background:#050407!important;isolation:isolate}
#revealOverlay.hidden{display:none!important}
#revealOverlay .reveal-scene{position:absolute;inset:0;z-index:0;background:#050407 url('/static/assets/roll/single-stage.webp?v=2') center/cover no-repeat;pointer-events:none}
#revealOverlay .reveal-scene::before,#revealOverlay .reveal-scene::after{display:none!important;content:none!important}
#revealOverlay>.reveal-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#05030a38,transparent 38%,#05030920 72%,#05030972)}
#revealOverlay>.opening-heading{position:absolute;z-index:3;top:max(1.5%,env(safe-area-inset-top));left:4%;width:92%;max-width:none;margin:0;padding:0;text-align:center;text-shadow:0 2px 10px #000}
#revealOverlay>.opening-heading>small{font-size:clamp(7px,2vw,10px);letter-spacing:.22em;color:#f3d17c}
#revealOverlay>.opening-heading h2{margin:3px 0;font-size:clamp(17px,5vw,25px);line-height:1.05}
#revealOverlay>.opening-heading p{margin:3px 0;font-size:clamp(9px,2.8vw,13px);color:#ddd3c7}
#revealOverlay>#revealProgress{position:absolute;z-index:3;top:9.5%;left:4%;width:92%;max-width:none;margin:0}
#revealOverlay #revealProgress .opening-steps{width:100%;max-width:none;margin:0;padding:0;background:transparent;border-radius:0;backdrop-filter:none}
#revealOverlay #revealProgress .step-orb{width:clamp(32px,9vw,45px);height:clamp(32px,9vw,45px);margin-bottom:4px}
#revealOverlay #revealProgress .step-orb .step-icon{width:clamp(24px,7.2vw,32px);height:clamp(24px,7.2vw,32px);object-fit:contain}
#revealOverlay #revealProgress .opening-steps b{font-size:clamp(8px,2.4vw,11px);text-shadow:0 2px 5px #000}
#revealOverlay[data-step="3"]{--stage-accent:var(--drop)}
#revealOverlay .opening-theatre{position:absolute;z-index:2;inset:19% 0 28%;width:100%;height:auto;max-width:none;min-height:0;display:block;padding:0;perspective:none}
#revealOverlay .opening-theatre::before,#revealOverlay .opening-theatre::after{display:none!important}
#revealOverlay .reveal-card{position:absolute;inset:0;width:100%;height:100%;max-width:none;min-height:0;display:block;padding:0 12%;border:0;border-radius:0;background:transparent;box-shadow:none!important;backdrop-filter:none;text-align:center}
#revealOverlay #revealStepLabel{position:absolute;top:3%;left:14%;width:72%;font-size:clamp(9px,2.8vw,13px);letter-spacing:.22em;color:#f0d38b;text-shadow:0 2px 8px #000}
#revealOverlay .reveal-visual{position:absolute;top:20%;left:12%;width:76%;height:43%;margin:0;display:grid;place-items:center}
#revealOverlay .reveal-flag-img{width:min(45vw,180px);height:min(27vw,108px);object-fit:contain;filter:drop-shadow(0 6px 16px #f3c25866)}
#revealOverlay .reveal-logo{max-width:min(45vw,180px);max-height:min(35vw,145px);object-fit:contain;filter:drop-shadow(0 6px 16px #fff3)}
#revealOverlay .reveal-class-icon{width:clamp(84px,27vw,142px);height:clamp(84px,27vw,142px);color:var(--drop);filter:drop-shadow(0 0 18px var(--drop))}
#revealOverlay .reveal-class-icon svg{width:100%;height:100%}
#revealOverlay .opening-gem{width:clamp(130px,35vw,170px);height:clamp(130px,35vw,170px);filter:drop-shadow(0 0 18px var(--drop))}
#revealOverlay .opening-gem img{display:block;width:100%;height:100%;object-fit:contain}
#revealOverlay #revealTitle{position:absolute;top:66%;left:5%;width:90%;margin:0;font-size:clamp(20px,7vw,34px);line-height:1.1;color:var(--stage-accent);text-shadow:0 2px 10px #000;overflow-wrap:anywhere}
#revealOverlay #revealHint{position:absolute;top:81%;left:8%;width:84%;margin:0;font-size:clamp(9px,2.6vw,12px);line-height:1.3;color:#e4d5c1;text-shadow:0 1px 5px #000}
#revealOverlay .opening-theatre>.opening-podium{display:none}
#revealOverlay #revealNext{position:absolute;z-index:4;left:12%;bottom:max(10%,calc(env(safe-area-inset-bottom) + 68px));width:76%;max-width:360px;min-height:clamp(44px,12vw,56px);margin:0;border:2px solid #f6d88d;border-radius:30px;background:linear-gradient(130deg,#342513,#09090c 60%);color:#ffdf86;font-size:clamp(14px,4vw,18px);font-weight:850;box-shadow:inset 0 0 12px #b58d3544,0 0 14px #d2a74733}
#revealOverlay #revealSkip{position:absolute!important;z-index:4;left:12%;bottom:max(2%,env(safe-area-inset-bottom));width:76%;min-height:44px;padding:8px;margin:0;border:0;background:transparent;color:#eee0cd;font-size:clamp(9px,2.6vw,12px);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 5px #000}
#revealOverlay[data-step="3"] #revealStepLabel,#revealOverlay[data-step="3"] #revealTitle{color:var(--drop)}
#revealOverlay[data-step="3"] #revealProgress .opening-steps li.current .step-orb{color:var(--drop);border-color:var(--drop);box-shadow:0 0 20px var(--drop)}
#revealOverlay[data-step="3"] #revealProgress .opening-steps li.current b{color:var(--drop)}

/* One-car result. Every field lives inside the background's central frame. */
#home .opening-result,#home .opening-batch{position:fixed;inset:0;width:100vw!important;height:100vh;height:100dvh;max-width:none!important;max-height:none;min-height:100dvh;margin:0;padding:0;overflow:hidden;border:0;border-radius:0;z-index:1000;background-color:#050407;background-position:center;background-size:cover;background-repeat:no-repeat}
#home .opening-result{background-image:linear-gradient(#06040a20,#06040a22),url('/static/assets/roll/single-stage.webp?v=2')}
#home .opening-result::before,#home .opening-result::after{content:none!important;display:none!important}
#home .opening-result>.opening-heading{position:absolute;z-index:3;top:max(1.5%,env(safe-area-inset-top));left:4%;width:92%;max-width:none;margin:0;padding:0;text-align:center;text-shadow:0 2px 10px #000}
#home .opening-result .opening-heading>small{font-size:clamp(7px,2vw,10px);letter-spacing:.22em;color:#f3d17c}
#home .opening-result .opening-heading h2{margin:3px 0;font-size:clamp(17px,5vw,25px);line-height:1.05}
#home .opening-result .opening-heading p{display:block;margin:3px 0;font-size:clamp(9px,2.8vw,13px);color:#ddd3c7}
#home .opening-result>.opening-steps{position:absolute;z-index:3;top:9.5%;left:4%;width:92%;margin:0;padding:0;background:transparent}
#home .opening-result .step-orb{width:clamp(32px,9vw,45px);height:clamp(32px,9vw,45px);margin-bottom:4px}
#home .opening-result .opening-steps b{font-size:clamp(8px,2.4vw,11px);text-shadow:0 2px 5px #000}
#home .opening-result .single-reveal-card{position:absolute;z-index:2;top:19%;left:18%;width:64%;height:46%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;align-items:stretch;min-width:0;padding:2% 3% 1%;color:#fff;background:linear-gradient(180deg,#08060940,#100b0a30 64%,#08060955);box-shadow:inset 0 0 28px color-mix(in srgb,var(--drop) 13%,transparent)}
#home .opening-result .single-reveal-identity{display:flex;align-items:center;justify-content:space-between;gap:3px;min-width:0;overflow:hidden;font-size:clamp(9px,2.5vw,12px);font-weight:700;color:#f6e9d1;text-shadow:0 1px 4px #000}
#home .opening-result .single-reveal-identity>span{display:flex;align-items:center;gap:3px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#home .opening-result .single-reveal-identity img{width:18px;height:15px;object-fit:contain}
#home .opening-result .single-reveal-identity i{color:#b78943;font-style:normal}
#home .opening-result .single-reveal-identity .opening-badge{flex:none;font-size:clamp(7px,2vw,10px);padding:2px 5px;color:var(--drop);border-color:var(--drop);white-space:nowrap}
#home .opening-result .final-car-stage{position:relative;width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;padding:0;margin:0;background:radial-gradient(ellipse at 50% 82%,color-mix(in srgb,var(--drop) 22%,transparent),transparent 58%)}
#home .opening-result .final-car-stage .stage-backplate{display:none}
#home .opening-result .final-car-stage .hero-image{position:relative;z-index:2;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain;object-position:center;margin:0!important;filter:drop-shadow(0 10px 10px #000d);animation:car-final-enter .72s cubic-bezier(.18,.72,.25,1) both}
#home .opening-result .final-car-stage .opening-podium{position:absolute;left:5%;right:5%;bottom:1%;height:8%;border-top:1px solid color-mix(in srgb,var(--drop) 85%,#ffd36a);border-radius:50%;background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--drop) 26%,transparent),transparent 70%);box-shadow:0 -2px 10px color-mix(in srgb,var(--drop) 40%,transparent)}
#home .opening-result .opening-specs{position:static;width:auto;max-height:none;overflow:visible;padding:0;border:0;background:transparent;box-shadow:none}
#home .opening-result .opening-car-title{justify-content:center;margin:0 0 2px;gap:0}
#home .opening-result .opening-car-title h2{width:100%;font-size:clamp(12px,3.4vw,16px);line-height:1.05;text-align:center;color:#fff4d9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#home .opening-result .opening-badge{display:none}
#home .opening-result .opening-facts{display:grid;grid-template-columns:1fr 1fr;border:0;border-top:1px solid #b9924c80;padding:3px 0 0;gap:2px 5px}
#home .opening-result .opening-facts>div{display:flex;align-items:center;justify-content:center;gap:3px;min-width:0;overflow:hidden}
#home .opening-result .opening-facts small{display:none}
#home .opening-result .opening-facts b{display:flex;align-items:center;gap:2px;min-width:0;overflow:hidden;font-size:clamp(9px,2.5vw,11px);line-height:1.1;white-space:nowrap;text-overflow:ellipsis}
#home .opening-result .opening-facts img{width:10px;height:9px;object-fit:contain}
#home .opening-result .opening-stats{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin:2px 0 0;padding-top:2px;border-top:1px solid #b9924c55}
#home .opening-result .opening-stats>div,#home .opening-result .opening-stats>div:first-child{grid-column:auto;min-width:0;padding:0;border:0;text-align:center}
#home .opening-result .opening-stats small{display:inline;margin:0;font-size:clamp(8px,2.2vw,10px);color:#c9b99f}
#home .opening-result .opening-stats b,#home .opening-result .opening-stats>div:first-child b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(9px,2.5vw,11px);letter-spacing:0;color:#fff1d3}
#home .opening-result .opening-serial{margin:2px 0 0;font-size:clamp(8px,2vw,9px);line-height:1;color:var(--drop)}
#home #rollStage:has(.opening-result) .opening-result .single-actions{position:absolute!important;z-index:5;left:8%!important;right:auto!important;bottom:max(2.5%,env(safe-area-inset-bottom))!important;width:84%!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin:0!important;padding:0!important;background:transparent!important}
#home #rollStage:has(.opening-result) .opening-result .single-actions button{display:flex;align-items:center;justify-content:center;min-width:0;min-height:clamp(44px,12vw,56px)!important;padding:6px 9px!important;border-radius:28px!important;font-size:clamp(10px,3vw,14px)!important;font-weight:850;line-height:1.1;text-align:center;white-space:normal;box-shadow:0 0 12px #e8b84755}
#home .opening-result .single-actions .keep-car{gap:4px;border:1px solid #f6d16c!important;background:linear-gradient(125deg,#32240c,#100d08)!important;color:#ffe084!important}
#home .opening-result .single-actions .sell-car{border:1px solid #d17af6!important;background:linear-gradient(125deg,#31143e,#110919)!important;color:#e4adff!important}
#home .opening-result .opening-action-success{grid-column:1/-1;display:grid;place-items:center;min-height:clamp(44px,12vw,56px);padding:8px 12px;border:1px solid #6cd99b;border-radius:28px;background:linear-gradient(120deg,#0d2819ee,#09170fee);color:#8df0b0;font-size:clamp(12px,3.5vw,16px);font-weight:850;text-align:center;box-shadow:0 0 18px #54d88766}
#home .opening-result .opening-action-success.is-sold{border-color:#d17af6;background:linear-gradient(120deg,#291038ee,#10091aee);color:#e4adff}

/* Five-car result keeps its dedicated five-card artwork and mass actions. */
#home .opening-batch{background-image:linear-gradient(#08060a38,#08060a40),var(--batch-scene);background-position:center;background-size:cover}
#home .opening-batch .opening-heading{position:absolute;z-index:3;top:max(1.5%,env(safe-area-inset-top));left:4%;width:92%;max-width:none;padding:0;text-shadow:0 2px 8px #000}
#home .opening-batch .opening-heading h2{margin:3px;font-size:clamp(15px,4.5vw,22px)}
#home .opening-batch .opening-heading p{display:none}
#home .opening-batch .opening-steps{position:absolute;z-index:3;top:9.5%;left:4%;width:92%;margin:0;padding:0;background:transparent}
#home .opening-batch .step-orb{width:clamp(29px,8vw,38px);height:clamp(29px,8vw,38px);margin-bottom:4px}
#home .opening-batch .opening-steps b{font-size:clamp(7px,2vw,9px);text-shadow:0 1px 4px #000}
#home .opening-batch .opening-rewards{position:absolute;inset:24% 3% 17%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:1fr 1fr;gap:2% 2%;padding:0;align-items:stretch}
#home .opening-batch .opening-reward,#home .opening-batch .opening-reward:nth-child(4){grid-column:span 2;min-height:0;padding:4px 3px 5px;border:1px solid var(--drop);border-radius:8px 3px 8px 3px;background:linear-gradient(145deg,#09080ddc,#0b0910c9);box-shadow:inset 0 0 10px color-mix(in srgb,var(--drop) 25%,transparent),0 3px 8px #0008}
#home .opening-batch .opening-reward:nth-child(4){grid-column:2/span 2}
#home .opening-batch .opening-reward:nth-child(5){grid-column:4/span 2}
#home .opening-batch .opening-reward .opening-badge{font-size:clamp(6px,1.6vw,8px);padding:1px 3px}
#home .opening-batch .opening-reward .opening-badge{display:inline-block;max-width:100%;border:1px solid var(--drop);border-radius:6px;color:var(--drop);background:#09080cb3;overflow-wrap:anywhere}
#home .opening-batch .opening-reward>img{width:100%;height:36%;min-height:32px;max-height:70px;object-fit:contain}
#home .opening-batch .opening-reward h3{font-size:clamp(8px,2.5vw,11px);line-height:1.1;margin:1px 0;color:#fff}
#home .opening-batch .opening-reward h3 span{font-size:clamp(7px,2.1vw,9px);margin-top:1px}
#home .opening-batch .opening-reward>p{font-size:7px;color:#cdbb9f;margin:1px 0}
#home .opening-batch .batch-car-facts{font-size:clamp(6px,1.8vw,8px);line-height:1.15;color:#ddd2c7;margin:1px 0;overflow-wrap:anywhere}
#home .opening-batch .opening-reward>p:not(.batch-car-facts){font-size:7px;margin:1px 0}
#home .opening-batch .opening-reward .opening-podium{display:none}
#home .opening-batch .opening-reward .opening-card-actions{display:flex;gap:3px;margin-top:auto}
#home .opening-batch .opening-card-actions button{min-width:0;min-height:23px;padding:2px;border:1px solid #75603b;border-radius:6px;background:#151219;color:#f4dc9a;font-size:7px;font-weight:700}
#home .opening-batch .opening-card-actions button:first-child{color:#e4b8ff;border-color:#76528a}
#home .opening-batch .batch-status{position:absolute;bottom:12%;left:0;width:100%;margin:0;text-shadow:0 1px 5px #000}
#home #rollStage .batch-actions{position:fixed;z-index:1002;left:6%;bottom:max(8px,env(safe-area-inset-bottom));width:88%;display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0;padding:0;background:transparent}
#home #rollStage .batch-actions button{min-height:44px;font-size:clamp(10px,3vw,13px);border-radius:24px}
#home #rollStage .batch-actions .keep-car{border:1px solid #f6d16c;background:linear-gradient(125deg,#32240c,#100d08);color:#ffe084}
#home #rollStage .batch-actions .sell-car{border:1px solid #d17af6;background:linear-gradient(125deg,#31143e,#110919);color:#e4adff}
#home .opening-reward{position:relative;min-width:0;text-align:center;isolation:isolate;animation:opening-enter .35s ease both;animation-delay:calc(var(--i)*60ms)}
#home #rollStage .opening-state{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;z-index:1000;min-height:0;display:flex;align-items:center;justify-content:center;padding:0;background:#050407 url('/static/assets/roll/single-stage.webp?v=2') center/cover no-repeat}
#home #rollStage .opening-state::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#05030a35,transparent 35%,#05030934 73%,#05030977);pointer-events:none}
#home #rollStage .opening-ring{position:absolute;top:37%;left:50%;width:clamp(58px,18vw,78px);height:clamp(58px,18vw,78px);margin:0 0 0 clamp(-39px,-9vw,-29px);z-index:1}
#home #rollStage .opening-copy{position:absolute;top:55%;left:8%;width:84%;z-index:1;text-align:center;text-shadow:0 2px 8px #000}
#home #rollStage .opening-copy b{display:block;color:#ffe4a0;font-size:clamp(18px,5vw,25px)}
#home #rollStage .opening-copy span{display:block;margin-top:6px;color:#e5d7c3;font-size:clamp(10px,3vw,14px)}
.opening-badge{display:inline-block;max-width:100%;padding:4px 7px;border:1px solid var(--drop);border-radius:6px;color:var(--drop);font-size:9px;background:#09080cb3;overflow-wrap:anywhere}
@keyframes car-final-enter{from{opacity:0;transform:translateY(18px) scale(.88);filter:brightness(2) drop-shadow(0 0 18px var(--drop))}to{opacity:1;transform:translateY(0) scale(1);filter:drop-shadow(0 10px 10px #000d)}}
@keyframes opening-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body:has(#home .opening-result) .toast,body:has(#home .opening-batch) .toast{z-index:1200;top:auto!important;bottom:max(12%,calc(env(safe-area-inset-bottom) + 86px))!important;left:50%;max-width:88%}
body:has(#revealOverlay:not(.hidden)) .toast{display:none!important}
.modal,.dialog{z-index:1100}
.drop-fx{z-index:1001}
#confetti{z-index:1002}
@media(max-height:720px){#revealOverlay>.opening-heading{top:max(1%,env(safe-area-inset-top))}#revealOverlay>#revealProgress{top:9%}#revealOverlay .opening-theatre{inset:18% 0 26%}#revealOverlay #revealNext{bottom:max(9%,calc(env(safe-area-inset-bottom) + 58px))}#home .opening-result .single-reveal-card{top:18%;height:47%}#home .opening-batch .opening-rewards{inset:23% 2% 17%}}
@media(max-width:360px){#revealOverlay #revealProgress,#home .opening-result .opening-steps,#home .opening-batch .opening-steps{left:2%;width:96%}#revealOverlay #revealProgress .opening-steps b,#home .opening-result .opening-steps b{font-size:7px}#home .opening-result .single-reveal-card{left:16%;width:68%}#home .opening-result .opening-car-title h2{font-size:clamp(10px,3.4vw,13px)}#home .opening-batch .opening-reward h3{font-size:8px}}
@media(max-width:350px){#home .roll-center{padding:10px}.container-hero{min-height:290px;padding-left:12px}.container-hero>p{max-width:140px;font-size:11px}}
@media(prefers-reduced-motion:reduce){#revealOverlay *,#home .opening-reward,#home .opening-result .final-car-stage .hero-image{animation:none!important;transition:none!important}}
body.no-animations #revealOverlay *,body.no-animations #home .opening-reward{animation:none!important}

/* Reveal overlay: hard reset legacy card dimensions and inherited blur treatments. */
#revealOverlay .opening-theatre{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;filter:none!important}
#revealOverlay .reveal-card{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;min-width:0!important;min-height:0!important;padding:0 12%!important;overflow:visible!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;filter:none!important;animation:none!important}
#revealOverlay .reveal-card.step-pop{animation:reveal-content-enter .32s ease-out both!important}
#revealOverlay .opening-steps li:not(:last-child)::after{top:25px;height:6px;border:1px solid #f0cc68;border-radius:99px;background:#120c1d;box-shadow:0 0 7px #e5be5a45;transition:background .28s ease,box-shadow .28s ease}
#revealOverlay .opening-steps li.complete::after,#home .opening-result .opening-steps li.complete::after,#home .opening-batch .opening-steps li.complete::after{background:linear-gradient(90deg,#7435b7,#c08aff);border-color:#f4d77c;box-shadow:0 0 10px #bd7bff75;transform-origin:left center;animation:reveal-track-fill .42s ease-out both}
#revealOverlay .step-orb,#home .opening-result .step-orb,#home .opening-batch .step-orb{width:clamp(46px,13vw,58px)!important;height:clamp(46px,13vw,58px)!important;margin-bottom:5px!important}
#revealOverlay #revealProgress .step-orb .step-icon,#home .opening-result .step-orb .step-icon,#home .opening-batch .step-orb .step-icon{display:block;width:clamp(42px,12vw,54px)!important;height:clamp(42px,12vw,54px)!important;max-width:100%!important;max-height:100%!important;object-fit:contain;object-position:center;transform:translateY(-1px)}
#revealOverlay .step-orb small,#home .opening-result .step-orb small,#home .opening-batch .step-orb small{display:none!important}
#revealOverlay .opening-steps b,#home .opening-result .opening-steps b,#home .opening-batch .opening-steps b{font-size:clamp(8px,2.7vw,12px)!important;white-space:nowrap}
@keyframes reveal-track-fill{from{transform:scaleX(.03)}to{transform:scaleX(1)}}
@keyframes reveal-content-enter{from{opacity:.2;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}

/* Single result identity: country at left, large dynamic brand mark at right. */
#home .opening-result .single-reveal-card{top:19%!important;left:14%!important;width:72%!important;height:49%!important;padding:2% 3% 1%!important;grid-template-rows:auto minmax(0,1fr) auto!important}
#home .opening-result .single-reveal-identity{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;min-height:40px!important;overflow:visible!important}
#home .opening-result .identity-country,#home .opening-result .identity-brand{display:flex;align-items:center;min-width:0;gap:7px;overflow:hidden}
#home .opening-result .identity-country{flex:1 1 55%;justify-content:flex-start}
#home .opening-result .identity-brand{flex:0 1 45%;justify-content:flex-end}
#home .opening-result .identity-country img{width:clamp(28px,8vw,42px)!important;height:clamp(20px,5.5vw,30px)!important;flex:none;object-fit:contain}
#home .opening-result .identity-country b{font-size:clamp(14px,4.2vw,20px)!important;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#home .opening-result .identity-brand img{width:clamp(42px,13vw,72px)!important;height:clamp(34px,10vw,54px)!important;max-width:100%;flex:none;object-fit:contain;filter:drop-shadow(0 2px 8px #fff6)}
#home .opening-result .identity-brand b{font-size:clamp(11px,3vw,15px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#home .opening-result .identity-brand:not(:has(img)){font-size:clamp(14px,4vw,19px)}

/* Aligned action buttons with separate labels and amounts. */
#home #rollStage:has(.opening-result) .opening-result .single-actions{left:6%!important;width:88%!important;bottom:max(2.5%,calc(env(safe-area-inset-bottom) + 8px))!important;gap:12px!important}
#home #rollStage:has(.opening-result) .opening-result .single-actions button{min-height:clamp(54px,14vw,66px)!important;gap:9px!important;padding:8px 12px!important;border-radius:20px!important;white-space:nowrap!important;line-height:1.05!important;font-size:clamp(12px,3.5vw,16px)!important;letter-spacing:.01em;box-shadow:0 5px 22px #0009,0 0 15px #d8b34c27!important}
#home #rollStage:has(.opening-result) .opening-result .single-actions .keep-car{border:1px solid #e8c663!important;background:linear-gradient(145deg,#251b0d,#0d0b0c 72%)!important;color:#ffe394!important}
#home #rollStage:has(.opening-result) .opening-result .single-actions .sell-car{border:1px solid #c784f2!important;background:linear-gradient(145deg,#38164c,#120b1a 72%)!important;color:#f1d7ff!important}
#home .opening-result .single-actions .sell-car span{display:grid;gap:4px}
#home .opening-result .single-actions .sell-car b{font-size:clamp(12px,3.5vw,16px)}
#home .opening-result .single-actions .sell-car small{font-size:clamp(10px,2.8vw,13px);color:#d3a6f1}
#home .opening-result .single-actions button{height:clamp(54px,14vw,66px)!important;max-height:66px!important;min-height:54px!important}
#home .opening-result .single-actions .keep-car img{display:block;width:clamp(20px,6vw,26px)!important;height:clamp(20px,6vw,26px)!important;max-width:26px!important;max-height:26px!important;object-fit:contain;flex:0 0 auto}

/* Five-card finale: larger readable cards and always-visible pack actions. */
#home .opening-batch .opening-rewards{inset:20% 3% 23%!important;gap:2% 2%!important}
#home .opening-batch .opening-reward,#home .opening-batch .opening-reward:nth-child(4){padding:7px 5px!important;border-radius:14px!important;background:linear-gradient(155deg,#09080deF,#120c1edb)!important;box-shadow:inset 0 0 16px color-mix(in srgb,var(--drop) 30%,transparent),0 6px 16px #000b!important}
#home .opening-batch .opening-reward .opening-badge{font-size:clamp(7px,1.9vw,10px)!important;padding:3px 7px!important}
#home .opening-batch .opening-reward>img{height:38%!important;min-height:42px!important;max-height:100px!important}
#home .opening-batch .opening-reward h3{font-size:clamp(9px,2.8vw,13px)!important;line-height:1.13!important;margin:3px 0!important}
#home .opening-batch .opening-reward h3 span{font-size:clamp(8px,2.35vw,11px)!important;line-height:1.1!important}
#home .opening-batch .batch-car-facts{font-size:clamp(7px,2vw,10px)!important;line-height:1.2!important}
#home .opening-batch .opening-reward>p:not(.batch-car-facts){font-size:clamp(8px,2vw,10px)!important;margin:2px 0!important;color:#f2d996}
#home .opening-batch .opening-reward .opening-card-actions{gap:5px!important;margin-top:auto!important}
#home .opening-batch .opening-reward .opening-card-actions button{min-height:30px!important;flex:1 1 0;padding:4px 3px!important;border-radius:9px!important;font-size:clamp(8px,2vw,10px)!important}
#home .opening-batch .batch-status{bottom:17%!important;text-align:center;font-size:clamp(10px,2.8vw,13px);color:#f2e4c6}
#home .opening-batch .batch-actions{position:absolute!important;z-index:6!important;left:6%!important;right:auto!important;bottom:max(2.5%,calc(env(safe-area-inset-bottom) + 8px))!important;width:88%!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin:0!important;padding:0!important;background:transparent!important}
#home .opening-batch .batch-actions button{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:clamp(48px,13vw,60px)!important;padding:7px!important;border-radius:22px!important;font-size:clamp(10px,3vw,14px)!important;font-weight:850;line-height:1.1;white-space:normal;box-shadow:0 5px 20px #0009!important}
#home .opening-batch .batch-actions .keep-car{border:1px solid #efd175!important;background:linear-gradient(140deg,#372a0e,#0e0b08)!important;color:#ffe397!important}
#home .opening-batch .batch-actions .sell-car{border:1px solid #cc82f5!important;background:linear-gradient(140deg,#401653,#100916)!important;color:#f0d3ff!important}
@media(max-width:360px){#home .opening-result .single-reveal-card{left:10%!important;width:80%!important}#home .opening-result .identity-country{flex-basis:58%}#home .opening-result .identity-brand{flex-basis:42%}#home .opening-batch .opening-rewards{inset-inline:2%!important}}
@media(prefers-reduced-motion:reduce){#revealOverlay .opening-steps li.complete::after{animation:none!important}}

/* The legacy fixed skip button retained top and blur, stretching it over the scene. */
#revealOverlay #revealSkip{top:auto!important;right:auto!important;height:44px!important;max-height:44px!important;border-radius:10px!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
#revealOverlay .reveal-visual{width:76%!important;height:43%!important;min-height:0!important;padding:0!important;overflow:visible!important}
#revealOverlay .reveal-flag{width:100%!important;height:100%!important;min-height:0!important}

/* Clear center frame with a compact, readable information plaque. */
#home .opening-result .single-reveal-card{top:18%!important;left:14%!important;width:72%!important;height:47%!important;padding:2% 3% 2%!important;grid-template-rows:minmax(37px,auto) minmax(0,1fr) auto!important;background:linear-gradient(180deg,#08060908,#100b0a0c 66%,#08060930)!important;box-shadow:none!important}
#home .opening-result .single-reveal-identity{min-height:37px!important}
#home .opening-result .identity-country,#home .opening-result .identity-brand{position:relative;left:clamp(7px,2.1vw,12px)}
#home .opening-result .identity-brand{flex:0 0 auto;min-width:0;left:clamp(-28px,-6vw,-18px)}
#home .opening-result .identity-brand{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#home .opening-result .identity-brand::before,#home .opening-result .identity-brand::after{content:none!important;display:none!important}
#home .opening-result .identity-brand img{background:none!important;border:0!important;box-shadow:none!important;filter:none!important}
#home .opening-result .final-car-stage{background:none!important}
#home .opening-result .final-car-stage .hero-image{width:108%!important;max-width:108%!important;object-fit:contain!important}
#home .opening-result .opening-specs{align-self:end;min-width:0;padding:6px 4px 5px!important;border-top:1px solid #eac46c9c!important;border-radius:0 0 9px 9px;background:linear-gradient(180deg,#08050c23,#08050c98 30%,#08050ca8)!important;text-shadow:0 1px 4px #000,0 0 8px #000!important}
#home .opening-result .opening-car-title{margin-bottom:5px}
#home .opening-result .opening-car-title h2{font-size:clamp(14px,3.8vw,18px)!important;line-height:1.12;color:#fff4df!important}
#home .opening-result .opening-facts{padding-top:4px;gap:3px 7px;border-top-color:#d3a7528c}
#home .opening-result .opening-facts>div,#home .opening-result .opening-stats>div{display:grid;justify-items:center;align-content:center;gap:2px;min-width:0}
#home .opening-result .opening-facts small{display:block;font-size:clamp(8px,2.15vw,10px);line-height:1;color:#e3c98d}
#home .opening-result .opening-facts b{display:block;max-width:100%;font-size:clamp(10px,2.7vw,12px);line-height:1.1;color:#fff6e8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#home .opening-result .opening-stats{margin-top:4px;padding-top:4px;border-top-color:#d3a7528c}
#home .opening-result .opening-stats small{display:block;font-size:clamp(8px,2.15vw,10px);line-height:1;color:#e3c98d}
#home .opening-result .opening-stats b,#home .opening-result .opening-stats>div:first-child b{max-width:100%;font-size:clamp(10px,2.7vw,12px);line-height:1.12;color:#fff6e8}
#home .opening-result .opening-stats b small{display:inline;font-size:inherit;color:inherit}
#home .opening-result .opening-serial{margin-top:4px;color:#ffe09b}

/* Five rewards share the same clear scene and stay above the podium. */
#home .opening-batch .opening-rewards{inset:20% 4% 33%!important;grid-template-rows:repeat(2,minmax(0,1fr));gap:2% 2%!important}
#home .opening-batch .opening-reward,#home .opening-batch .opening-reward:nth-child(4){display:flex;flex-direction:column;align-items:center;min-width:0;min-height:0;overflow:hidden;padding:6px 4px!important;border:1px solid color-mix(in srgb,var(--drop) 78%,#f2d17e)!important;border-radius:10px!important;background:transparent!important;box-shadow:0 0 10px color-mix(in srgb,var(--drop) 24%,transparent),inset 0 0 10px #05030a25!important;color:#fff5df;text-shadow:0 1px 4px #000,0 0 7px #000}
#home .opening-batch .opening-reward>img{flex:0 0 auto;width:100%;height:34%!important;min-height:0!important;max-height:none!important;margin:3px 0 1px;object-fit:contain!important;filter:drop-shadow(0 5px 5px #000b)}
#home .opening-batch .opening-reward-info{width:100%;min-width:0;padding:4px 1px 3px;border-top:1px solid color-mix(in srgb,var(--drop) 70%,#f4d483);border-bottom:1px solid #d8ac5e73;border-radius:3px;background:linear-gradient(180deg,#07040aa8,#07040ad9);color:#fff5df}
#home .opening-batch .opening-reward h3{display:block;width:100%;margin:2px 0!important;font-size:clamp(9px,2.55vw,12px)!important;line-height:1.08!important;overflow-wrap:anywhere}
#home .opening-batch .opening-reward h3 span{display:block;margin-top:2px;font-size:clamp(8px,2.25vw,10px)!important;line-height:1.08!important;overflow-wrap:anywhere}
#home .opening-batch .batch-car-facts{color:#f1e6d6!important;font-size:clamp(8px,2.15vw,10px)!important;line-height:1.15!important}
#home .opening-batch .opening-reward-info p{margin:2px 0!important}
#home .opening-batch .opening-reward-info .batch-car-price{color:#ffe2a1!important;font-size:clamp(8px,2.1vw,10px)!important;font-weight:800}
#home .opening-batch .opening-reward .opening-card-actions{width:100%;gap:3px!important}
#home .opening-batch .opening-reward .opening-card-actions button{min-height:27px!important;padding:3px 1px!important;font-size:clamp(8px,2vw,10px)!important;line-height:1!important}
#home .opening-batch .batch-status{bottom:25%!important}
@media(max-width:360px){#home .opening-result .single-reveal-card{left:11%!important;width:78%!important}#home .opening-batch .opening-rewards{left:2%!important;right:2%!important}}
@media(max-height:720px){
  #revealOverlay .opening-theatre{inset:23% 0 28%!important}
  #home .opening-result .single-reveal-card{top:22%!important;height:44%!important}
  #home .opening-batch .opening-rewards{top:23%!important;bottom:14%!important}
  #home .opening-batch .opening-reward{padding:4px 3px!important}
  #home .opening-batch .opening-reward>img{height:30%!important;margin:1px 0!important}
  #home .opening-batch .opening-reward-info{padding:2px 1px!important}
  #home .opening-batch .opening-reward .opening-card-actions button{min-height:23px!important}
  #home .opening-batch .batch-status{display:none}
}

/* Keep the reveal labels centered within the card, including the shared h2 overrides. */
#revealOverlay #revealTitle{left:5%!important;width:90%!important;margin:0!important;padding:0!important;text-align:center!important}
#revealOverlay #revealStepLabel{left:14%!important;width:72%!important;margin:0!important;padding:0!important;text-align:center!important}
#revealOverlay #revealNext{display:flex;align-items:center;justify-content:center;text-align:center}

/* The controls are already interactive; the settings drawer needs no chevrons. */
#home .roll-filter-drawer summary{grid-template-columns:1fr!important}
#home .roll-filter-drawer summary::-webkit-details-marker{display:none}
#home .selector-pill{padding-right:11px!important}
#home .selector-pill>b{max-width:100%!important}

/* The class artwork includes its own gold frame; keep the stage clear. */
#revealOverlay[data-step="2"] .reveal-class-medallion{
  display:block;
  width:min(56vw,22dvh,220px);
  height:min(56vw,22dvh,220px);
  max-width:100%;max-height:100%;
  object-fit:contain;
  background:none;border:0;
  filter:drop-shadow(0 0 16px #e8ad4770) drop-shadow(0 0 18px #9a4be388);
  animation:revealClassMedallionIn .62s cubic-bezier(.2,.8,.2,1) both;
}
#revealOverlay[data-step="2"] #revealTitle{text-transform:uppercase;letter-spacing:.055em;color:#ffe2a0}
@keyframes revealClassMedallionIn{
  from{opacity:0;transform:scale(.86);filter:drop-shadow(0 0 0 #e8ad4700) drop-shadow(0 0 0 #9a4be300)}
  to{opacity:1;transform:scale(1);filter:drop-shadow(0 0 16px #e8ad4770) drop-shadow(0 0 18px #9a4be388)}
}
@media(prefers-reduced-motion:reduce){#revealOverlay[data-step="2"] .reveal-class-medallion{animation:none}}