.home-layout #box .box-open{width:100%}
.home-layout #box .mystery-box{display:block;width:100%;height:auto;margin:0;border:0;background:none;box-shadow:none;animation:none;transform:none;opacity:1}
.home-layout #box .mystery-box::before,.home-layout #box .mystery-box::after{display:none}
.box-cinematic{width:100%;display:grid;justify-items:center;gap:8px;overflow:hidden}
.box-cinematic canvas{width:min(384px,100%);height:auto;image-rendering:pixelated}
.box-cinematic p{font:18px/1.5 HashlingsPixel,sans-serif;color:#25344b;margin:0;min-height:27px}
.box-skip,.box-done{min-height:44px;padding:10px 18px;border:1px solid #d4dcd6;border-radius:9px;background:#eef0e7;color:#25344b;font:600 13px "Segoe UI",sans-serif;cursor:pointer}
.box-done{background:#2f9e6b;color:#fff;border:0;width:100%}
.home-layout #box .reveal-row{width:100%;gap:10px;justify-content:center}
.home-layout #box .reveal-wrap{animation:box-result-arrive .24s ease-out both;box-shadow:none;border-radius:12px}
@keyframes box-result-arrive{from{opacity:0}to{opacity:1}}
.home-layout #box .reveal-stage{flex:none}
.home-layout #box .box-card[data-tier=green].active{border-color:#2f9e6b;box-shadow:inset 0 0 0 1px #2f9e6b}
.home-layout #box .box-card[data-tier=blue].active{border-color:#3976ae;box-shadow:inset 0 0 0 1px #3976ae}
.home-layout #box .box-card[data-tier=purple].active{border-color:#8260bc;box-shadow:inset 0 0 0 1px #8260bc}
/* Picker, cinematic and reveal share one reserved frame. State changes only
   replace its contents, so opening a box never resizes the whole card. */
.home-layout #box .mint-card{height:500px;min-height:500px;max-height:500px;box-sizing:border-box;flex-wrap:nowrap;gap:14px;overflow:hidden}
.home-layout #box #boxPicker{flex:0 0 204px}
.home-layout #box .box-open{height:300px;min-height:300px;max-height:300px;overflow:hidden}
.home-layout #box .box-cinematic{height:300px;grid-template-rows:200px 27px 44px;align-content:center}
.home-layout #box .box-cinematic canvas{width:240px;max-width:100%;height:200px;object-fit:contain}
.home-layout #box .reveal-row{flex:0 0 260px;height:260px;min-height:260px;margin:0}
.home-layout #box .box-done{flex:0 0 44px}
@media(max-width:600px){.home-layout #box .reveal-row{flex-wrap:wrap}.home-layout #box .reveal-stage{order:-1;flex-basis:100%}.home-layout #box .reveal-side{max-width:45%;flex:1}.box-cinematic canvas{width:min(288px,100%)}}
@media(max-width:600px){.home-layout #box .mint-card{height:500px;min-height:500px;max-height:500px}.home-layout #box #boxPicker{flex-basis:240px}.home-layout #box .box-open{height:280px;min-height:280px;max-height:280px}.home-layout #box .box-cinematic{height:280px;grid-template-rows:180px 27px 44px}.home-layout #box .box-cinematic canvas{width:216px;height:180px}.home-layout #box .reveal-row{height:276px;min-height:276px;flex-basis:276px}}
.box-card[data-tier=purple]{position:relative}
.box-pity{--box-pity-color:#815cb1;--box-pity-shade:color-mix(in srgb,var(--box-pity-color) 66%,#2c2034);position:absolute;z-index:4;top:-10px;left:50%;right:auto;width:40px;height:40px;color:var(--box-pity-color);filter:drop-shadow(0 3px 0 var(--box-pity-shade)) drop-shadow(0 5px 3px rgba(49,33,58,.24));transform:translateX(-50%);pointer-events:none}
.box-pity-icon{display:block;width:40px;height:40px;overflow:visible;image-rendering:pixelated;shape-rendering:crispEdges}
.box-pity-track,.box-pity-value{fill:#fffaf0;stroke-width:3;stroke-linejoin:miter;shape-rendering:crispEdges}
.box-pity-track{stroke:#d6cce0;filter:drop-shadow(0 -1px 0 #fff) drop-shadow(0 1px 0 #776582)}
.box-pity-value{stroke:currentColor;stroke-linecap:butt;stroke-dasharray:var(--box-pity-progress,0) 100;transform:rotate(-90deg);transform-origin:18px 18px;transition:stroke-dasharray .25s steps(5,end),stroke .25s steps(5,end)}
.box-pity-star{fill:currentColor;stroke:var(--box-pity-shade);stroke-width:1;paint-order:stroke fill;shape-rendering:crispEdges;filter:drop-shadow(0 -1px 0 rgba(255,255,255,.72)) drop-shadow(0 2px 0 var(--box-pity-shade))}
.box-pity[data-syncing=true]{opacity:.45}
.box-pity[data-guaranteed=true]{filter:drop-shadow(0 3px 0 var(--box-pity-shade)) drop-shadow(0 0 5px rgba(215,173,50,.52))}
.box-pity[data-guaranteed=true] .box-pity-icon{animation:box-luck-ready 1.35s steps(2,end) infinite}
@keyframes box-luck-ready{50%{transform:scale(1.08);filter:brightness(1.16)}}
.box-card[data-tier=purple][data-pity-ready=true] .box-icon{background:#fff8df}
.home-layout #box .box-card[data-tier=purple][data-pity-ready=true].active{border-color:#bc901f;box-shadow:inset 0 0 0 1px #bc901f}
.box-pity-summary{flex:none;width:100%;margin:0;padding:8px 10px;box-sizing:border-box;border:1px solid #dfd2ee;border-radius:8px;background:#f5effb;color:#684895;font:12px/1.5 system-ui,sans-serif;text-align:left;overflow-wrap:anywhere}
.box-pity-summary[hidden]{display:none}
@media(max-width:600px){.box-card[data-tier=purple]>.box-pity{top:-8px;left:50%;right:auto;width:30px;height:30px;transform:translateX(-50%)}.box-pity-icon{width:30px;height:30px}.home-layout #box #boxBtn{margin-top:0}}
@media(prefers-reduced-motion:reduce){.home-layout #box .reveal-wrap,.box-pity[data-guaranteed=true] .box-pity-icon{animation:none!important}.box-pity-value{transition:none!important}}