.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;position:relative;border-radius:16px;background:radial-gradient(circle at 50% 45%,rgba(255,246,189,.34),rgba(255,255,255,0) 48%),linear-gradient(180deg,rgba(255,255,255,.78),rgba(233,240,231,.72));box-shadow:inset 0 0 0 1px rgba(76,117,87,.12),0 10px 24px rgba(30,70,48,.08)}
.box-cinematic::before,.box-cinematic::after{content:'';position:absolute;inset:14px;border:1px solid rgba(196,154,43,.18);border-radius:12px;pointer-events:none}
.box-cinematic::after{inset:26px;border-color:rgba(74,151,111,.14);animation:box-cinematic-pulse 1.2s steps(3,end) infinite}
@keyframes box-cinematic-pulse{50%{opacity:.42;transform:scale(1.018)}100%{opacity:.8;transform:scale(1)}}
.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-skip{position:relative;z-index:2;background:rgba(255,255,255,.82);box-shadow:0 2px 0 rgba(44,83,61,.12)}
.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 .32s steps(4,end) both;transform-origin:center bottom;box-shadow:none;border-radius:12px}
@keyframes box-result-arrive{0%{opacity:0;transform:translateY(12px) scale(.86)}75%{opacity:1;transform:translateY(-2px) scale(1.03)}100%{opacity:1;transform:translateY(0) scale(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:410px;min-height:410px;max-height:410px;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:400px;min-height:400px;max-height:400px}.home-layout #box #boxPicker{flex-basis:166px}.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}}

/* Batch reveal owns its layout. Site footer/button rules must not style it.
   Only the middle region scrolls; effects stay clipped inside that region. */
html:has(dialog.box-reveal-dialog[open]){overflow:hidden!important}
html dialog.box-reveal-dialog{
 position:fixed!important;inset:0!important;margin:auto!important;padding:0!important;
 box-sizing:border-box;width:min(960px,calc(100% - 32px))!important;max-width:960px!important;
 height:min(calc(264px + var(--reveal-rows,2)*236px),calc(100svh - 32px))!important;
 max-height:calc(100svh - 32px)!important;min-height:0;overflow:hidden!important;
 border:3px solid #aabd92;border-radius:0!important;color:#f7f3d9;background:#152f31;
 box-shadow:0 0 0 3px #233f37,0 0 0 5px #667e5a,8px 8px 0 #061b22a6;
 font:14px/1.5 system-ui,"Microsoft YaHei",sans-serif;isolation:isolate;
}
dialog.box-reveal-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
dialog.box-reveal-dialog::backdrop{background:#081e24cf;backdrop-filter:blur(4px)}
dialog.box-reveal-dialog *{box-sizing:border-box}
dialog.box-reveal-dialog .box-reveal-header{
 position:relative;display:block;min-height:88px;margin:0;padding:18px 176px 16px 22px;
 background:#183832;border-bottom:2px solid #718b62;color:#f7f3d9;
}
dialog.box-reveal-dialog h2{margin:0 0 4px;color:#fff5c9;font:24px/1.3 HashlingsPixel,system-ui,sans-serif;letter-spacing:2px;text-shadow:2px 2px #0c251e}
dialog.box-reveal-dialog .box-reveal-header p{margin:0;color:#c8d7bd;font:13px/1.5 system-ui,sans-serif}
dialog.box-reveal-dialog .box-reveal-header>div{position:absolute;right:20px;top:20px;display:flex;gap:8px}
dialog.box-reveal-dialog button{
 appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;
 min-height:44px;margin:0;padding:9px 14px;border:2px solid #829d70;border-radius:0!important;
 background:#28493d;color:#f2f5db;box-shadow:3px 3px 0 #0b221b;opacity:1;
 font:700 13px/1.4 system-ui,sans-serif;text-shadow:none;cursor:pointer;touch-action:manipulation;
}
dialog.box-reveal-dialog button:hover{background:#365b46}
dialog.box-reveal-dialog button:active{box-shadow:1px 1px 0 #0b221b}
dialog.box-reveal-dialog :is(button,.box-reveal-scroll):focus-visible{outline:3px solid #d4f85e;outline-offset:-4px}
dialog.box-reveal-dialog .box-reveal-close{width:44px;padding:0;font:26px/1 system-ui,sans-serif}
dialog.box-reveal-dialog .box-reveal-scroll{
 position:relative;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;
 overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#8da176 #163131;
 overflow-anchor:none;padding:20px 18px 22px 22px;contain:paint;
 background:linear-gradient(#cfe5ba04 1px,transparent 1px),linear-gradient(90deg,#cfe5ba04 1px,transparent 1px),#152f31;background-size:8px 8px;
}
dialog.box-reveal-dialog .box-reveal-grid{position:relative;display:grid;grid-template-columns:repeat(var(--count,5),minmax(0,1fr));grid-auto-rows:minmax(236px,auto);align-content:start;gap:12px;min-width:0}
dialog.box-reveal-dialog .box-reveal-card{
 --rarity:#91bc8e;position:relative;min-width:0;min-height:236px;margin:0;padding:16px 8px 12px;
 display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
 border:2px solid var(--rarity);border-radius:0;overflow:hidden;
 background:#213e3d;box-shadow:3px 3px 0 #091f23;
}
dialog.box-reveal-dialog .box-reveal-card::before{content:'';position:absolute;inset:5px;border:1px solid #c5d8b323;pointer-events:none}
dialog.box-reveal-dialog .box-reveal-card canvas{position:relative;display:block;flex:none;width:96px;max-width:100%;height:96px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(3px 3px 0 #102624)}
dialog.box-reveal-dialog .box-reveal-card strong{position:relative;margin:0;color:#fff6d9;font:700 16px/1.4 system-ui,sans-serif;overflow-wrap:anywhere}
dialog.box-reveal-dialog .box-reveal-card small{position:relative;color:#c4d7ca;font:12px/1.5 system-ui,sans-serif;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
dialog.box-reveal-dialog .box-reveal-traits{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:5px;min-height:25px}
dialog.box-reveal-dialog .box-reveal-traits span{padding:3px 6px;border:1px solid #bc96dd;border-radius:0;background:#463653;color:#f0ddff;font:12px/1.4 system-ui,sans-serif;overflow-wrap:anywhere}
dialog.box-reveal-dialog .box-reveal-traits [data-tier=gold]{color:#fff0b6;border-color:#e1c467;background:#56492a}
dialog.box-reveal-dialog .box-reveal-card[data-rarity=purple]{--rarity:#c298e8;box-shadow:3px 3px 0 #554164}
dialog.box-reveal-dialog .box-reveal-card[data-rarity=gold]{--rarity:#e8ca71;background:#3f422d;box-shadow:3px 3px 0 #7a6634}
dialog.box-reveal-dialog .box-reveal-footer{
 position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;
 min-height:116px;margin:0;padding:14px 20px max(18px,env(safe-area-inset-bottom));
 background:#173b30;border-top:2px solid #718b62;box-shadow:0 -4px 0 #0a241b55;
}
dialog.box-reveal-dialog .box-reveal-footer p{width:100%;margin:0;color:#e2ecd2;font:14px/1.5 system-ui,sans-serif;text-align:center}
dialog.box-reveal-dialog .box-reveal-done{min-width:220px;min-height:48px;color:#173126;background:#d6f866;border-color:#edffa8;box-shadow:3px 3px 0 #749244;font-size:15px;letter-spacing:1px}
dialog.box-reveal-dialog .box-reveal-done:hover{background:#e6ff83}
dialog.box-reveal-dialog [hidden]{display:none!important}
dialog.box-reveal-dialog .box-reveal-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
dialog.box-reveal-dialog .box-reveal-particles i{position:absolute;width:4px;height:4px;top:45%;left:50%;background:#e6d880;opacity:0}
dialog.box-reveal-dialog .box-reveal-particles i:nth-child(3n){background:#c9a4e8}
dialog.box-reveal-dialog[data-phase=reveal] .box-reveal-particles i{animation:box-reveal-sparks-444 .65s steps(8,end) var(--delay) both}
dialog.box-reveal-dialog[data-phase=charging] .box-reveal-card canvas{animation:box-reveal-charge-444 .9s steps(5,end) both}
dialog.box-reveal-dialog[data-phase=reveal] .box-reveal-card canvas{animation:box-reveal-appear-444 .35s steps(5,end) both}
@keyframes box-reveal-charge-444{50%{filter:brightness(1.35);transform:translateY(-3px)}}
@keyframes box-reveal-appear-444{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes box-reveal-sparks-444{0%{opacity:0}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
@media(max-width:650px){
 html dialog.box-reveal-dialog{width:calc(100% - 24px)!important;height:min(740px,calc(100svh - 24px))!important;max-height:calc(100svh - 24px)!important}
 dialog.box-reveal-dialog .box-reveal-header{min-height:86px;padding:15px 126px 13px 14px}
 dialog.box-reveal-dialog h2{font-size:21px;letter-spacing:1px}
 dialog.box-reveal-dialog .box-reveal-header p{font-size:12px}
 dialog.box-reveal-dialog .box-reveal-header>div{right:12px;top:17px;gap:6px}
 dialog.box-reveal-dialog .box-reveal-mute{padding:8px;font-size:12px}
 dialog.box-reveal-dialog .box-reveal-scroll{padding:14px 12px 18px 14px}
 dialog.box-reveal-dialog .box-reveal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 dialog.box-reveal-dialog .box-reveal-card{padding:13px 7px 10px}
 dialog.box-reveal-dialog .box-reveal-footer{min-height:110px;padding:12px 14px max(16px,env(safe-area-inset-bottom));gap:8px}
 dialog.box-reveal-dialog .box-reveal-done{width:100%;min-width:0}
}
@media(max-height:460px){
 dialog.box-reveal-dialog .box-reveal-header{min-height:72px;padding-top:10px;padding-bottom:10px}
 dialog.box-reveal-dialog .box-reveal-header>div{top:12px}
 dialog.box-reveal-dialog .box-reveal-footer{min-height:70px;flex-wrap:nowrap;padding:10px 16px}
 dialog.box-reveal-dialog .box-reveal-footer p{width:auto;flex:1;text-align:left}
 dialog.box-reveal-dialog .box-reveal-done{width:auto;min-width:130px}
}
@media(prefers-reduced-motion:reduce){dialog.box-reveal-dialog *,dialog.box-reveal-dialog *::before{animation:none!important;transition:none!important}}