*{box-sizing:border-box} :root{color-scheme:dark;--gold:#d7bd81;--muted:#969c99;--line:#ffffff18}body{margin:0;background:#090d10;color:#ece8dc;font:14px/1.5 system-ui,sans-serif}button,a,select,input{ -webkit-tap-highlight-color:transparent}button,select{font:inherit;color:inherit;background:#171d20;border:1px solid #ffffff26;border-radius:4px;padding:10px 16px}button{cursor:pointer}button:hover:not(:disabled){border-color:var(--gold);background:#242a2c}button:disabled{opacity:.4;cursor:default}a{color:var(--gold);text-decoration:none}a:hover{text-decoration:underline}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #ead5a1;outline-offset:4px}header{height:84px;max-width:1600px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 36px;gap:20px}.back{color:#afb3b1;font-size:12px}.brand{font:23px Georgia,serif;letter-spacing:3px;text-align:center}.brand span{display:block;font:8px system-ui;letter-spacing:5px;color:var(--gold);margin-top:2px}.badge{font-size:9px;letter-spacing:2px;color:var(--muted)}main{max-width:1530px;padding:0 28px;margin:auto}#stage{position:relative;height:min(69vw,720px);min-height:480px;overflow:hidden;background:#101b20;border:1px solid #c8b47c33;border-radius:5px}#scene{width:100%;height:100%;display:block}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#03090eaa,transparent 26%,transparent 65%,#03090ee8),radial-gradient(ellipse,transparent 45%,#02060a77)}.chapter{position:absolute;top:27px;left:32px;pointer-events:none;transition:opacity .4s}.chapter span{font-size:9px;letter-spacing:2.7px;color:var(--gold)}h1{font:26px Georgia,serif;font-weight:400;margin:7px 0}.stage-bottom{position:absolute;bottom:39px;left:0;right:0;text-align:center;pointer-events:none}.stage-bottom button{pointer-events:auto}#hint{font:16px Georgia,serif;letter-spacing:.6px;text-shadow:0 2px 6px #000}.primary{min-width:206px;padding:13px 28px;border:1px solid #ddc28c;background:linear-gradient(120deg,#615131,#302e26);box-shadow:0 0 25px #c7aa5f20;color:#fff3d4;letter-spacing:1px}.primary span{margin-left:30px;color:var(--gold)}.stage-note{position:absolute;bottom:13px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:2px;color:#a8aba4}#loading{position:absolute;inset:0;background:#0a111bf2;display:flex;flex-direction:column;align-items:center;justify-content:center;font:20px Georgia,serif;color:var(--gold);z-index:10}#loading small{font:12px system-ui;color:var(--muted);margin-top:15px}#loading[hidden]{display:none}#flash{position:absolute;inset:0;background:#fff4d1;opacity:0;pointer-events:none}#cards{position:absolute;inset:100px 20% 134px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:18px 24px;perspective:1200px;pointer-events:none}.card{justify-self:center;position:relative;height:100%;aspect-ratio:.69;padding:0;border:0;background:none!important;transform-style:preserve-3d;pointer-events:auto;filter:drop-shadow(0 8px 10px #0009);will-change:transform}.card:disabled{opacity:1}.card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.7,.2,1)}.card.revealed .card-inner{transform:rotateY(180deg)}.card-front,.card-back{position:absolute;inset:0;backface-visibility:hidden;border:2px solid #b6a47c;border-radius:6px;overflow:hidden;background:#172c37}.card-back{background:radial-gradient(ellipse,#366879,#101929 68%);box-shadow:inset 0 0 0 5px #0d1c2b,inset 0 0 0 6px #b49d63}.card-back:before{content:'✦';position:absolute;inset:16% 12%;border:1px solid #ab9764;display:grid;place-content:center;font:50px Georgia;color:#d6c180;border-radius:50%;box-shadow:0 0 20px #74cede44,inset 0 0 18px #74cede44}.card-back:after{content:'';position:absolute;inset:8%;border:1px solid #8b845e;transform:rotate(3deg)}.card-front{transform:rotateY(180deg);box-shadow:0 0 12px var(--card-glow,#bfdce3)}.card-front img{width:100%;height:100%;object-fit:cover}.card-front:after{content:'';position:absolute;inset:4px;border:1px solid #f8e5b7a0;border-radius:2px;background:linear-gradient(135deg,#fff4 0%,transparent 25%,transparent 75%,#baa26755)}.card.revealed:hover{filter:drop-shadow(0 0 12px #f3ce75)}.controls{padding:20px 2px 16px;border-bottom:1px solid var(--line)}.control-row{display:flex;align-items:center;gap:10px}.title{margin-right:auto}.title strong{display:block;font:18px Georgia,serif}.title span{font-size:11px;color:var(--muted)}label{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:10px}select{padding:9px 12px;font-size:12px}.timeline{display:flex;gap:16px;align-items:center;margin-top:18px}output{font:10px ui-monospace,monospace;color:var(--muted);min-width:105px}input[type=range]{flex:1;accent-color:var(--gold);height:3px}footer{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;padding:13px 2px 24px;color:var(--muted);font-size:11px}footer p{margin:0}details{max-width:520px}details summary{color:#d8cba9;cursor:pointer;text-align:right}details p{margin:12px 0;line-height:1.7}body.results .chapter{opacity:0}[hidden]{display:none!important}@media(max-width:700px){header{height:70px;padding:0 16px}.brand{font-size:17px}.badge{display:none}main{padding:0 10px}#stage{height:650px;min-height:0}.chapter{left:20px;top:20px}h1{font-size:21px}#cards{inset:126px 18px 152px;gap:14px 9px}.card{height:auto;width:100%;align-self:center;max-height:100%;aspect-ratio:.69}.card-back:before{font-size:30px}.control-row{flex-wrap:wrap}.title{width:100%;margin-bottom:8px}.control-row button{font-size:11px;padding:9px 11px}.control-row label{margin-right:auto;gap:5px}footer{display:block}details{margin-top:14px}details summary{text-align:left}.timeline{gap:10px}.stage-note{font-size:7px}.stage-bottom{bottom:40px}}@media(prefers-reduced-motion:reduce){.card-inner{transition:none}}
.card-back{background:#18242d url('external/sleeve/Materials/sleeve_200000001_M.png') center / 100% 100% no-repeat;border:0;box-shadow:none}.card-back:before,.card-back:after{display:none}body.results .vignette{background:linear-gradient(180deg,#03090eaa,transparent 26%,transparent 65%,#03090ee8),#03090e55}
#cards{inset:0;display:block;perspective:none}.card{position:absolute;aspect-ratio:auto;max-height:none;transform-origin:center;transition:filter .2s}.card-inner{transition-duration:var(--flip-time,.4s)}body.results .vignette{background:linear-gradient(180deg,#03090e55,transparent 26%,transparent 65%,#03090eaa)}body.waiting .chapter{opacity:0}.stage-bottom{z-index:3}

/* Reference recording uses a landscape game viewport. */
#stage{height:auto;min-height:0;aspect-ratio:16/9;border-radius:0}
.vignette,body.results .vignette{background:radial-gradient(ellipse,transparent 45%,#02020480)}
.stage-bottom{bottom:6.5%}#hint{font-size:13px}body.waiting #hint{display:none}
body.waiting #open{border:0;background:transparent;box-shadow:none;font:clamp(16px,2.2vw,32px) Georgia,serif;text-shadow:0 0 9px #000;color:#ece5cc;padding:0}
#stage-skip{position:absolute;right:2%;top:4%;font:24px Georgia;background:#2228;border:1px solid #b7afa066;box-shadow:inset 0 0 7px #c7b99e55;padding:10px;z-index:4}
#pack-count{position:absolute;left:2%;bottom:5%;font:22px Georgia;color:#efe9d5;text-shadow:0 2px 4px #000}
.card-front{border:0;border-radius:0;background:transparent;box-shadow:none}.card-front:after{display:none}
.card-front{overflow:visible}
.card-front .card-face{position:absolute;left:50%;top:50%;width:var(--face-width);height:var(--face-height);max-width:none;transform:translate(-50%,-50%);object-fit:fill}
.reveal-ring{position:absolute;inset:-19%;border:1px solid var(--card-glow);border-radius:50%;opacity:0;pointer-events:none;box-shadow:0 0 14px var(--card-glow),inset 0 0 8px var(--card-glow);transform:rotate(-25deg) scaleX(.85)}
.rare-reveal .reveal-ring{opacity:calc(var(--reveal-focus)*.8)}
@media(max-width:700px){#stage{aspect-ratio:16/9;height:auto}.stage-bottom{bottom:4%}#stage-skip{font-size:12px;padding:5px}#hint{font-size:9px;margin:3px 0}#pack-count{font-size:12px}.primary{min-width:90px;padding:4px 10px;font-size:10px}body.waiting #open{font-size:14px}}

/* Motion is sampled from the game curves on the playback clock. */
.card-inner{transition:none}.reveal-ring{display:none}.card{touch-action:none;user-select:none}.card img{pointer-events:none}body.results #stage{touch-action:none}#stage.sweeping{cursor:grabbing}.card:not(.revealed){cursor:grab}

.reveal-effects{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}.stage-bottom{z-index:45}

.reveal-effects{mix-blend-mode:screen}#stage{isolation:isolate}
.timeline input[type=range]{min-width:0}
@media(max-width:400px){header{gap:10px}.brand{font-size:15px;letter-spacing:2px}.brand span{letter-spacing:3px}.timeline output{min-width:90px}.timeline{gap:8px}}

.ray-controls{display:flex;flex-wrap:wrap;gap:12px 24px;margin:14px 0}.ray-controls label{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}.ray-controls select{padding:8px;max-width:100%}@media(max-width:440px){.ray-controls label{width:100%;justify-content:space-between}.ray-controls select{max-width:68%}}

/* Source camera-volume vignette is applied in linear HDR, before grading. */
.vignette,body.results .vignette{display:none}

/* Persistent native rarity glows sit behind the opaque card faces. */
#cards{z-index:2}
.card-glow-effects{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;mix-blend-mode:screen}

/* Keep the projected buttons for mouse/touch/keyboard input; their artwork is
   drawn in WebGL with room/particle depth instead of composited a second time. */
.shared-compositing .card-inner{visibility:hidden}
.shared-compositing .card{filter:none}