/* Pre-result presentation only. Reel widths, strip geometry and motion belong to app.js. */
.opening:not(.has-result){border:1px solid #ffffff10;border-radius:24px;background:#171a1e;box-shadow:none}
.opening:not(.has-result)>.opening-topline{align-items:center;flex-wrap:wrap;gap:10px;padding:0 0 16px;margin-bottom:6px;border-bottom:1px solid #ffffff09;color:#b7bec6;font-size:12px;font-weight:600;letter-spacing:.025em;line-height:1.6}
.opening:not(.has-result)>.opening-topline>span:first-child{color:var(--case-accent,var(--gold))}
.opening:not(.has-result)>.showcase{background:radial-gradient(ellipse at 50% 65%,color-mix(in srgb,var(--case-accent,var(--gold)) 18%,transparent),transparent 62%)}
.opening:not(.has-result) .showcase-title{opacity:.045;letter-spacing:.025em;pointer-events:none}
.opening:not(.has-result) .showcase-orbit{border-color:#ffffff08;box-shadow:none;pointer-events:none}
.opening:not(.has-result)>#case-result{max-width:740px;margin:14px auto 0;padding:10px 16px;border-radius:8px;color:#c4cad1;font-size:12px;line-height:1.7;font-weight:500;overflow-wrap:anywhere}
.opening:not(.has-result)>.opening-budget{max-width:680px;margin:12px auto 20px;border-radius:0;border:0;border-block:1px solid #ffffff0c;background:transparent;box-shadow:none}
.opening:not(.has-result)>.opening-budget>div{padding:14px 18px}
.opening:not(.has-result)>.opening-budget>div+div{border-left-color:#ffffff0d}
.opening:not(.has-result)>.opening-budget span{font-size:12px;letter-spacing:.025em;color:#a4a5ae;line-height:1.65}
.opening:not(.has-result)>.opening-budget strong{font:700 27px 'Barlow Condensed',Impact,sans-serif;line-height:1.2;font-variant-numeric:tabular-nums;color:#edca87;margin-top:6px}
.opening:not(.has-result)>.opening-budget>div:first-child strong{color:#e6e4df}
.opening:not(.has-result)>.opening-budget.insufficient{border-color:#e6a4a238}
.opening:not(.has-result)>.opening-budget.insufficient>div:last-child{background:#e6a4a207}
.opening:not(.has-result)>.opening-budget.insufficient>div:last-child strong{color:#efb2ae}
.opening:not(.has-result)>.opening-shortfall{max-width:650px;margin:0 auto 20px;padding:12px 16px;border:1px solid #e6a4a225;border-radius:10px;background:#e6a4a206;color:#c9bec3;font-size:12px;line-height:1.8}
.opening:not(.has-result)>.opening-shortfall>a{color:#f0ce91;text-decoration:underline;text-underline-offset:4px}
.opening:not(.has-result)>.openingcontrols{gap:9px;flex-wrap:wrap;max-width:900px;margin:0 auto;padding:16px 0 8px}
.opening:not(.has-result)>.openingcontrols>.chip{min-width:46px;min-height:46px;padding:11px;border:1px solid #ffffff15;border-radius:7px;background:#23252b;color:#bfc0c8;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.opening:not(.has-result)>.openingcontrols>.chip.active{border-color:#e6bc7070;color:#f2d49a;background:#e6bc7012;box-shadow:inset 0 -2px 0 #e6bc70}
.opening:not(.has-result)>.openingcontrols>.btn{min-height:52px;border-radius:12px;padding:14px 28px;font-size:12px;line-height:1.5}
.opening:not(.has-result)>.openingcontrols>[data-open]{background:#e9bc76;color:#211b12;font-weight:800;box-shadow:none;min-width:230px}
.opening:not(.has-result)>.openingcontrols>.btn.secondary{background:#23252b;border-color:#ffffff14;color:#d0d0d7;box-shadow:none}
.opening:not(.has-result)>.openingcontrols>label{display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:11px 14px;margin:0;background:#202228;border:1px solid #ffffff0b;border-radius:7px;color:#bfc0c8;font-size:12px;cursor:pointer}
.opening:not(.has-result)>.openingcontrols>label>input{width:17px;height:17px;margin:0;accent-color:#e6bc70;flex-shrink:0}
.opening:not(.has-result)>.openingcontrols :is(button,a,input):focus-visible,.opening:not(.has-result)>.opening-shortfall>a:focus-visible{outline:2px solid #f3d69d;outline-offset:3px}
.opening:not(.has-result)>.openingcontrols>button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
/* Surface framing never changes reel/card sizes, gap, transform or timing. */
.opening:not(.has-result) .roulette{background:linear-gradient(180deg,#ffffff03,#0000000d);border-radius:12px;box-shadow:inset 0 1px 0 #ffffff0b,inset 0 -1px 0 #ffffff0b}
.opening:not(.has-result) .roulette:after{border-left-color:#f3d598;box-shadow:0 0 15px #e6bc704d;pointer-events:none}
@media(hover:hover){.opening:not(.has-result)>.openingcontrols>.chip:not(.active):not(:disabled):hover{background:#2d3037;border-color:#ffffff29;color:#f0ede6}.opening:not(.has-result)>.openingcontrols>.btn.secondary:hover{background:#2d3037;border-color:#ffffff26}.opening:not(.has-result)>.openingcontrols>[data-open]:not(:disabled):hover{background:#f6d593;box-shadow:0 5px 20px #e6bc7020}}
@media(max-width:760px){.opening:not(.has-result){border-radius:12px}.opening:not(.has-result)>.opening-budget>div{padding:14px 13px}.opening:not(.has-result)>.opening-budget strong{font-size:25px}.opening:not(.has-result)>.openingcontrols>.btn{padding-inline:18px}}
@media(max-width:560px){.opening:not(.has-result){border-radius:10px}.opening:not(.has-result)>.opening-topline{font-size:11px;letter-spacing:.025em;padding-bottom:12px;gap:6px}.opening:not(.has-result)>#case-result{font-size:11px;margin-top:10px;padding:9px 4px}.opening:not(.has-result)>.opening-budget{grid-template-columns:repeat(3,minmax(0,1fr));margin:16px auto;border-radius:11px}.opening:not(.has-result)>.opening-budget>div{padding:12px 9px}.opening:not(.has-result)>.opening-budget span{font-size:11px;letter-spacing:.02em}.opening:not(.has-result)>.opening-budget strong{font-size:22px;margin-top:8px}.opening:not(.has-result)>.openingcontrols{gap:8px}.opening:not(.has-result)>.openingcontrols>.chip{flex:1 1 25%;min-height:46px}.opening:not(.has-result)>.openingcontrols>[data-open]{flex:1 1 100%;min-height:52px}.opening:not(.has-result)>.openingcontrols>label,.opening:not(.has-result)>.openingcontrols>.btn.secondary{flex:1 1 42%;min-height:46px;padding:12px 9px;margin:0;font-size:12px}.opening:not(.has-result)>.opening-shortfall{max-width:none;font-size:12px;padding:12px;margin-bottom:16px}}
@media(max-width:360px){.opening:not(.has-result)>.opening-budget{grid-template-columns:1fr}.opening:not(.has-result)>.opening-budget>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px}.opening:not(.has-result)>.opening-budget>div+div{border-left:0;border-top:1px solid #ffffff0d}.opening:not(.has-result)>.opening-budget strong{margin:0;text-align:right}.opening:not(.has-result)>.opening-budget span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.opening:not(.has-result)>.openingcontrols :is(button,a),.opening:not(.has-result) .showcase-sprite{transition:none!important;animation:none!important}}

/* Container scene composition adapted from MusorDrop Container / AmountPicker. */
.opening:not(.has-result)>.showcase:has(>.showcase-sprite){min-height:330px;border-radius:18px;background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--case-accent,var(--gold)) 12%,transparent),transparent 65%)}
.opening:not(.has-result)>.showcase>.showcase-sprite{width:340px;max-width:90%}
.opening:not(.has-result)>#preference-status{text-align:center;max-width:680px;margin:12px auto 0;font-size:11px;line-height:1.7;color:#aeb7b9}
.opening:not(.has-result)>.openingcontrols>label:has(input:disabled){opacity:.5;cursor:not-allowed}
@media(max-width:560px){.opening:not(.has-result)>.showcase:has(>.showcase-sprite){min-height:260px}.opening:not(.has-result)>.showcase>.showcase-sprite{width:270px}.opening:not(.has-result)>.openingcontrols>[data-open]{min-width:0}.opening:not(.has-result)>.openingcontrols{padding-top:8px}}
.reduce-motion .opening:not(.has-result)>.openingcontrols :is(button,a),.reduce-motion .opening:not(.has-result) .showcase-sprite{transition:none!important;animation:none!important}