.scene-sculpture{position:absolute;inset:0;pointer-events:none;color:var(--case-tone,var(--loot-tone,#ba95ec));isolation:isolate}
.scene-sculpture svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sculpture-cloud{position:absolute;left:22%;top:30%;width:56%;height:40%;border-radius:50%;background:radial-gradient(ellipse,currentColor,transparent 65%);opacity:.13;filter:blur(25px);z-index:-1;animation:sculpture-mist 9s ease-in-out infinite alternate}.cloud-b{left:40%;top:15%;width:35%;opacity:.08;animation-delay:-4s}
.sculpture-fragments{animation:sculpture-float 7s ease-in-out infinite alternate;transform-origin:center}.sculpture-arcs{animation:sculpture-light 6s ease-in-out infinite alternate}
/* A single illuminated surface, without header/content panel seams. */
.loot-dialog{background:radial-gradient(ellipse at 50% 28%,color-mix(in srgb,var(--loot-tone) 16%,#131b29),#101824 75%);border-color:color-mix(in srgb,var(--loot-tone) 24%,#263246);box-shadow:0 35px 110px #000b,0 0 80px color-mix(in srgb,var(--loot-tone) 9%,transparent)}
.loot-header{background:none;border:0;position:relative;z-index:2}.loot-header>span{font-size:9px;letter-spacing:2px}.loot-header i{background:none}
.loot-stage{height:245px;background:none;overflow:visible}.loot-stage:after{display:none}.loot-stage .scene-sculpture{inset:-25px -3% -10px;z-index:-1}.loot-ring{display:none}.loot-halo{opacity:.6}.loot-stage img{width:78%;height:190px;filter:drop-shadow(0 20px 15px #0009) drop-shadow(0 0 15px color-mix(in srgb,var(--loot-tone) 15%,transparent))}
.loot-stage-label{top:4px;color:#8191ab;letter-spacing:3px}.loot-category{bottom:7px;background:none;border:0;color:color-mix(in srgb,var(--loot-tone) 45%,#d6ddeb);font-size:10px;letter-spacing:2px}
.loot-body{background:none;padding-top:10px}.loot-dialog h2{font-size:28px;letter-spacing:-.6px;margin-bottom:12px}.loot-value{border:0;flex-direction:column;gap:6px;padding:0 0 23px}.loot-value>span{font-size:9px;letter-spacing:.6px}.loot-value strong{font-size:28px;color:#f5d6ac}.loot-actions{gap:10px}.loot-actions .loot-keep{border:0;min-height:32px}.loot-dialog #loot-saved{margin-top:8px}
/* Graphic stage surrounds the original compact case and continuous reel. */
#detail-view{position:relative;isolation:isolate;background:radial-gradient(ellipse 60% 350px at 50% 270px,#53517b14,transparent)}
.selected-case-stage>.scene-sculpture{left:50%;top:-9%;width:min(290%,calc(100vw - 240px));height:118%;transform:translateX(-50%);z-index:-3}
.selected-case-stage .case-atmosphere{opacity:.55}.selected-case-stage .ambient-orbit,.selected-case-stage .ambient-floor{display:none}
.selected-case-stage .stage-art{filter:drop-shadow(0 18px 17px #0009)}
.selected-case-stage .machine-cavity .roulette{background:radial-gradient(ellipse at 50% 50%,#15213585,transparent 73%),linear-gradient(90deg,transparent,#0c14245e 25%,#0c14245e 75%,transparent);box-shadow:none;border-radius:0}
.selected-case-stage .machine-cavity{mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.selected-case-stage .lens-top,.selected-case-stage .lens-bottom{opacity:.45;width:24%;left:38%}
#detail-view .detail-heading h1{font-size:25px;letter-spacing:1.1px;color:#f0e8fb;text-shadow:0 0 28px #b999ed20}
#detail-view .economy-note{color:#96a4b7;font-size:10px;max-width:760px;margin-left:auto;margin-right:auto;padding:0 15px}
#detail-view .open-controls .primary{border-radius:10px;background:linear-gradient(115deg,#f7cd94,#e6a45e);box-shadow:0 5px 28px #e9b67720;border:1px solid #f9d4a473;color:#302216}
#detail-view>.section-heading{padding:18px 26px 12px;border:0;position:relative}#detail-view>.section-heading:before{content:'';position:absolute;top:0;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,#b5a2d12b,transparent)}
#detail-view #contents .item{background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--tone) 10%,transparent),transparent 72%),linear-gradient(180deg,#1c25303d,#141c2729);border:1px solid #ffffff06;box-shadow:none;border-radius:12px}
#detail-view #contents .item img{filter:drop-shadow(0 12px 10px #0007)}
@keyframes sculpture-mist{to{transform:translate(8%,-8%) scale(1.1);opacity:.2}}@keyframes sculpture-float{to{transform:translateY(-9px)}}@keyframes sculpture-light{to{opacity:.5}}
@media(max-width:1100px) and (min-width:721px){.selected-case-stage>.scene-sculpture{width:calc(100vw - 185px)}}
@media(max-width:720px){.selected-case-stage>.scene-sculpture{width:calc(100vw - 22px);top:-5%;height:108%}.loot-stage{height:215px}.loot-stage img{height:165px}.loot-dialog h2{font-size:25px}.loot-value strong{font-size:25px}.loot-value{padding-bottom:18px}#detail-view .detail-heading h1{font-size:21px}#detail-view .economy-note{font-size:9px}.sculpture-cloud{filter:blur(15px)}}
@media(max-height:640px){.loot-stage{height:155px}.loot-stage img{height:115px}.loot-stage-label{display:none}.loot-dialog h2{font-size:23px}.loot-value{padding-bottom:12px}.loot-value strong{font-size:23px}}
body:has(#short-animation:checked) .scene-sculpture *,.loot-dialog.quiet .scene-sculpture *{animation:none!important}
@media(prefers-reduced-motion:reduce){.scene-sculpture *{animation:none!important}}

.loot-dialog{overflow-x:hidden}.loot-stage .scene-sculpture{overflow:hidden}


/* The opening screen starts directly with the case artwork. */
#detail-view > .back,#detail-view > .detail-heading,#detail-view > .economy-note{display:none}
#detail-view{padding-top:20px}


.selected-case-stage:not(.case-unlocking):not(.case-running):not(.case-awarded) .machine-status{visibility:hidden}


/* Smaller artwork within the existing continuous reel. */
.selected-case-stage .reel-card img{width:85%;height:calc(76% - 28px)}
@media(max-width:720px){.selected-case-stage .reel-card img{width:85%;height:calc(85% - 27px)}}

/* Borderless reward presentation and one continuous item flight. */
.loot-dialog{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;animation:none}
.loot-dialog::backdrop{background:radial-gradient(ellipse at 50% 42%,#101525d9,#040811e8);backdrop-filter:blur(12px);animation:loot-backdrop-in .7s ease-out}
.loot-dialog:before{content:'';position:absolute;inset:8% -12% 10%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--loot-tone) 15%,transparent),transparent 65%);filter:blur(22px);animation:reward-aura-in 1s ease-out both}
.loot-dialog .loot-header,.loot-dialog .loot-body{background:transparent}
.loot-dialog .loot-close{border:0;background:#ffffff05;border-radius:50%}
.loot-dialog .loot-stage{overflow:visible}
.loot-dialog.shared-reward .loot-stage img{animation:none;transform-origin:center}
.loot-dialog .loot-body{animation:reward-copy-in .65s .35s both}
.loot-dialog .loot-header,.loot-dialog .loot-category,.loot-dialog .loot-stage-label{animation:reward-copy-in .6s .2s both}
.loot-dialog .scene-sculpture{animation:reward-aura-in 1.1s ease-out both}
.reward-in-flight{visibility:hidden}
@keyframes reward-copy-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes reward-aura-in{from{opacity:0;scale:.85}to{opacity:1;scale:1}}
@media(max-height:580px){.loot-dialog{overflow-x:hidden;overflow-y:auto}}
@media(prefers-reduced-motion:reduce){.loot-dialog:before{animation:none}}

.loot-dialog.quiet:before{animation:none}

/* Compact case contents, six columns on desktop. */
#detail-view #contents{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:0 26px}
#detail-view #contents .item{min-width:0;padding:12px 8px;border-radius:9px}
#detail-view #contents .item img{height:85px;width:100%;object-fit:contain}
#detail-view #contents .item h3{font-size:12px;line-height:1.3;margin:5px 0;overflow-wrap:anywhere}
#detail-view #contents .item small{font-size:9px}
#detail-view #contents .item p{font-size:12px;margin:7px 0 0}
#detail-view #contents .item .chance{font-size:9px}
@media(max-width:1100px){#detail-view #contents{grid-template-columns:repeat(4,minmax(0,1fr));padding:0 18px}}
@media(max-width:720px){#detail-view #contents{grid-template-columns:repeat(3,minmax(0,1fr));padding:0 12px;gap:7px}#detail-view #contents .item{padding:10px 6px}#detail-view #contents .item img{height:65px}#detail-view #contents .item h3{font-size:10px}}
@media(max-width:360px){#detail-view #contents{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Draw directly on the contract; paper transforms are handled in SVG coordinates. */
#contract-paper{min-height:260px;padding-bottom:14px}
#contract-paper>p{margin:12px 0 8px;font-size:11px;line-height:1.5}
#contract-paper .signature-pad{display:block;position:relative;inset:auto;width:100%;height:85px;max-width:250px;margin:4px auto 0;border:1px dashed #58452b44;border-radius:6px;background:#fff7df35;touch-action:none;user-select:none;cursor:crosshair;overflow:hidden}
#contract-paper .signature-pad path{stroke:#26374c;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;fill:none;pointer-events:none}
#contract-paper .signature-pad.manual-signature path{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
#contract-paper .signature-pad:not(.manual-signature) path{opacity:.3;stroke-dashoffset:0}
.signing #contract-paper .signature-pad:not(.manual-signature) path{opacity:1;stroke-dasharray:1;animation:sign-contract 1s ease forwards}
.signature-tools{display:flex;flex-direction:column;gap:6px;margin-top:7px;text-align:center;position:relative;z-index:3}
.signature-tools>span{font:9px var(--font-ui);color:#776244;line-height:1.3}
.signature-tools>div{display:flex;justify-content:center;gap:10px}
.signature-tools button{font:9px var(--font-ui);padding:4px 7px;border:1px solid #58452b33;border-radius:4px;background:#fff8e12b;color:#59462f;cursor:pointer}
.signature-tools button:hover{background:#fff4cf99}.signature-tools button:focus-visible{outline:2px solid #725637;outline-offset:2px}
.motion-busy .signature-tools,.motion-busy .signature-pad{pointer-events:none}
#contract-theater.signing .signature-tools,#contract-theater.sealed .signature-tools{opacity:0}
#contract-view .contract-theater{min-height:350px}
@media(max-width:720px){#contract-view .contract-theater{height:350px}.signature-tools button{min-height:30px;padding:6px 10px}#contract-paper .signature-pad{height:88px}}
/* The complete sheet becomes the signing surface after the first click. */
#contract-paper{position:relative;min-height:270px}
#contract-paper .signature-pad.full-paper-signature{position:absolute;inset:0;display:block;max-width:none;width:100%;height:100%;margin:0;border:0;border-radius:inherit;background:none;z-index:5;pointer-events:none}
#contract-paper.awaiting-signature .full-paper-signature{pointer-events:auto;cursor:crosshair}
#contract-paper.awaiting-signature{box-shadow:0 0 0 2px #ddc99a80,0 20px 35px #0007}
#contract-paper.awaiting-signature>p{opacity:.55}
#contract-paper .full-paper-signature path{stroke:#213955;stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:none;stroke-dashoffset:0}
#contract-theater .signature-tools{position:absolute;left:10px;right:10px;bottom:10px;margin:0;z-index:8;gap:5px}
#contract-theater .signature-tools>span{color:#ddc99f;font-size:10px}
#contract-theater .signature-tools button{color:#e0c99e;border-color:#b79b6344;background:#161f2c;font-size:10px;padding:5px 9px}
#contract-view .contract-theater{height:390px;min-height:390px;padding-bottom:55px;box-sizing:border-box}
.motion-busy #contract-paper .full-paper-signature{pointer-events:none}
@media(max-width:720px){#contract-view .contract-theater{height:410px}#contract-theater .signature-tools button{min-height:32px}}
#contract-theater .signature-tools{bottom:10px;left:14px;right:14px;padding:10px 12px;border:1px solid #d6b77933;border-radius:10px;background:linear-gradient(120deg,#343022,#19232f);box-shadow:0 5px 20px #0003;gap:6px}
.signature-instruction{font:600 10px var(--font-ui);letter-spacing:1.2px;color:#f3d79f}
#contract-theater .signature-tools>span{font-size:11px;line-height:1.5;color:#dae1ec}
#contract-theater .signature-tools #signature-auto{background:linear-gradient(110deg,#f4ce91,#deac62);border-color:#edc68b;color:#342615;font-weight:700;padding:7px 12px}
#contract-theater .signature-tools>div{gap:7px;flex-wrap:wrap}
#contract-view .contract-theater{height:440px;min-height:440px;padding-bottom:112px}
@media(max-width:720px){#contract-view .contract-theater{height:470px;min-height:470px;padding-bottom:142px}#contract-theater .signature-tools{left:8px;right:8px}#contract-theater .signature-tools>span{font-size:10px}}
#contract-theater .signature-tools>span{max-width:430px;align-self:center;line-height:1.5}
#contract-view .contract-theater{height:465px;min-height:465px;padding-bottom:137px}
@media(max-width:720px){#contract-view .contract-theater{height:495px;min-height:495px;padding-bottom:165px}}