/* Animated feature cards use the same symbols and scenery as the machine. */
.sl-welcome{--sw-accent:#8ee3f5;--sw-edge:#5e9db8;--sw-ink:#0b1a25;position:absolute;inset:0;z-index:29;isolation:isolate;display:flex;flex-direction:column;padding:22px clamp(15px,3.8vw,66px) 16px;color:#f1f9ff;background:#07121ae8;overflow:hidden;container-type:inline-size;transition:opacity .4s,transform .4s}
.sl-welcome-active>:not(.sl-welcome):not(.sl-loader):not(.dv-bg){visibility:hidden}
.sl-welcome .sw-scene{position:absolute;inset:0;z-index:-2;background:linear-gradient(#09132130,#0913219e),url(../assets/slots/mobvault/bg_vault.jpg) center/cover;animation:swScene 1.4s ease-out both}
.sw-divide{--sw-accent:#f1c58c;--sw-edge:#aa8256;--sw-ink:#10282b;background:#112a31d9}
.sw-divide .sw-scene{background:radial-gradient(ellipse at 50% 20%,#72cdc92e,transparent 60%),linear-gradient(90deg,#07171be6,transparent 28% 72%,#07171be6);border:12px solid #72554045;box-shadow:inset 0 0 0 2px #d7aa7055}
.sw-scroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column;justify-content:center;padding:5px 8px 20px}
.sw-heading{text-align:center;margin:0 auto 24px;flex-shrink:0;animation:swRise .75s .08s both}
.sw-brand{font:700 9px/1.3 Inter,Arial,sans-serif;letter-spacing:.3em;color:var(--sw-accent)}
.sw-heading h2{display:flex;flex-direction:column;font:700 clamp(26px,4.7cqw,60px)/1 'Silkscreen',monospace;letter-spacing:-.045em;margin:12px 0;text-shadow:0 3px #071018,0 6px #071018;filter:drop-shadow(0 4px 12px #0008)}
.sw-heading h2 span{color:var(--sw-accent)}
.sw-heading h2 strong{font:700 .42em/1.5 'Silkscreen',monospace;letter-spacing:.13em;color:#e6f6fc}
.sw-divide .sw-heading h2{font-size:clamp(26px,4.3cqw,52px)}
.sw-divide .sw-heading h2 strong{font-size:.85em;line-height:1.2;letter-spacing:.025em;color:#9fe2d9}
.sw-heading p{font:500 clamp(11px,1.2cqw,14px)/1.4 Inter,Arial,sans-serif;color:#b1c7d0;margin:8px 0 0}
.sw-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2.2cqw,30px);width:min(100%,1050px);margin:0 auto}
.sw-feature{position:relative;padding:14px clamp(12px,1.8cqw,24px) 22px;text-align:center;border:1px solid var(--sw-edge);background:linear-gradient(#122b37e8,#07151de8);box-shadow:inset 0 0 0 5px #07101785,0 12px 28px #0006;animation:swRise .65s calc(.2s + var(--n)*.12s) both}
.sw-divide .sw-feature{background:linear-gradient(#1d3d3de8,#11282beF);border-width:3px;box-shadow:inset 0 0 0 2px #dfb77c38,0 10px 30px #0005}
.sw-corner{position:absolute;width:13px;height:13px;border:2px solid var(--sw-accent);background:var(--sw-ink);transform:rotate(45deg);z-index:2}
.sw-corner.tl{left:-7px;top:-7px}.sw-corner.tr{right:-7px;top:-7px}.sw-corner.bl{left:-7px;bottom:-7px}.sw-corner.br{right:-7px;bottom:-7px}
.sw-demo{height:clamp(100px,14cqw,185px);position:relative;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;max-width:260px}
.sw-demo img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 7px 5px #0007)}
.sw-feature h3{font:800 clamp(14px,1.65cqw,20px)/1.2 Inter,Arial,sans-serif;margin:0 0 10px;color:var(--sw-accent)}
.sw-feature p{font:500 clamp(11px,1.16cqw,14px)/1.55 Inter,Arial,sans-serif;margin:0;color:#ccdae0}
.sw-footer{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;width:100%;padding:12px 8px 0;flex-shrink:0;animation:swRise .6s .65s both}
.sw-continue{display:flex;align-items:center;justify-content:center;gap:22px;min-width:230px;height:52px;padding:0 30px;border:1px solid var(--sw-accent);border-radius:4px;color:#07161c;background:var(--sw-accent);box-shadow:0 4px #35677d;font:800 17px Inter,Arial,sans-serif;transition:filter .2s,transform .2s;cursor:pointer}
.sw-divide .sw-continue{box-shadow:0 4px #846641}
.sw-continue:hover{filter:brightness(1.1);transform:translateY(-2px)}
.sw-continue:focus-visible{outline:2px solid #fff;outline-offset:5px}
.sw-remember{display:flex;align-items:center;gap:8px;font:500 11px/1.4 Inter,Arial,sans-serif;color:#adc3cc;cursor:pointer}
.sw-remember input{width:16px;height:16px;accent-color:var(--sw-accent);margin:0;cursor:pointer}
.sw-max{justify-self:end;font:700 10px/1.8 Inter,Arial,sans-serif;letter-spacing:.12em;color:#adc3cc;text-align:right}.sw-max b{display:block;font-size:17px;letter-spacing:0;color:var(--sw-accent)}
.sw-collect-heads{position:absolute;inset:3% 8% 48%;display:flex;gap:12px;align-items:center;justify-content:center}.sw-collect-heads img{width:26%;height:90%;animation:swHead 3.4s ease-in-out infinite}.sw-collect-heads img:nth-child(2){animation-delay:.15s}.sw-collect-heads img:nth-child(3){animation-delay:.3s}
.sw-collector{position:absolute;inset:42% 29% 0;animation:swFloat 3.4s ease-in-out infinite}
.sw-coin{position:absolute;width:12px;height:12px;background:#f9cf75;border:2px solid #9c6726;box-shadow:inset 2px 2px #fff0af;left:50%;top:32%;animation:swCollect 3.4s ease-in-out infinite;opacity:0}.sw-coin.one{--coin-x:-60px}.sw-coin.two{--coin-x:0px;animation-delay:.18s}.sw-coin.three{--coin-x:60px;animation-delay:.36s}
.sw-donuts{position:absolute;inset:4% 0 25%;display:flex;align-items:center;justify-content:center}.sw-donuts img{width:36%;height:90%;animation:swFloat 3.3s ease-in-out infinite}.sw-donuts img:first-child{transform:rotate(-16deg);margin-right:-6%;animation-delay:-.4s}.sw-donuts img:last-child{transform:rotate(16deg);margin-left:-6%;animation-delay:.4s}.sw-donuts img:nth-child(2){z-index:1;width:43%}
.sw-trigger{position:absolute;bottom:3%;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:6px;font:700 clamp(8px,1cqw,11px)/1.5 Inter,Arial,sans-serif;color:#b1d1d9;white-space:nowrap}.sw-trigger b{font-size:1.4em;color:var(--sw-accent)}.sw-trigger i{height:20px;width:1px;background:var(--sw-edge);margin:0 4px}
.sw-tiles{width:clamp(96px,12.5cqw,158px);aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.sw-tiles span{border:1px solid #608aa04d;border-radius:4px;background:#142636;display:grid;place-items:center}.sw-tiles .charged{animation:swCharge 3.8s ease-in-out infinite}.sw-tiles b{font:800 clamp(14px,2cqw,22px)/1 Inter,sans-serif;color:#9fecff}.sw-tiles img{width:140%;height:140%;z-index:1}
.sw-cutter{position:absolute;top:2%;left:33%;width:34%;height:45%;z-index:2;animation:swCut 4s ease-in-out infinite}.sw-split-stars{position:absolute;inset:45% 0 0;display:flex;justify-content:center;align-items:center}.sw-split-stars img{width:40%;height:100%;animation:swSplitL 4s ease-in-out infinite}.sw-split-stars img+img{animation-name:swSplitR}.sw-cut-line{position:absolute;width:1px;top:22%;bottom:0;left:50%;background:linear-gradient(transparent,#f9d39f,transparent);animation:swCharge 4s ease-in-out infinite}
.sw-wild-stack{width:65%;height:78%;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:-15%}.sw-wild-stack span{border:1px solid #dbb07666;background:#16363c;display:grid;place-items:center;animation:swWild 4s ease-in-out infinite}.sw-wild-stack span:nth-child(2){animation-delay:.15s}.sw-wild-stack span:nth-child(3){animation-delay:.3s}.sw-wild-stack span:nth-child(4){animation-delay:.45s}.sw-wild-stack img{width:75%;height:75%}
.sw-motes{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}.sw-motes i{position:absolute;left:calc(var(--i)*7.1%);bottom:-10px;width:3px;height:3px;background:var(--sw-accent);animation:swMote calc(5s + var(--i)*.3s) calc(var(--i)*-.8s) linear infinite;opacity:0}
.sl-welcome.leaving{opacity:0;transform:scale(1.035);pointer-events:none}
@keyframes swRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes swScene{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes swFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes swHead{0%,100%{translate:0 0}30%{translate:0 -4px}55%{translate:0 0}}
@keyframes swCollect{0%,20%{opacity:0;transform:translate(var(--coin-x),0) scale(.6)}30%{opacity:1;transform:translate(var(--coin-x),-7px) scale(1)}60%,100%{opacity:0;transform:translate(0,52px) scale(.4)}}
@keyframes swCharge{0%,20%,95%,100%{opacity:.45}45%,75%{opacity:1;background-color:#28617880;box-shadow:0 0 12px #83dbff38}}
@keyframes swCut{0%,20%,100%{transform:translateY(-5%) rotate(-14deg)}40%,55%{transform:translateY(65%) rotate(8deg)}75%{transform:translateY(-5%) rotate(-14deg)}}
@keyframes swSplitL{0%,30%,100%{transform:translateX(50%) scale(.85)}50%,80%{transform:translateX(-8%) scale(.85)}}
@keyframes swSplitR{0%,30%,100%{transform:translateX(-50%) scale(.85);opacity:0}45%{opacity:1}50%,80%{transform:translateX(8%) scale(.85);opacity:1}95%{opacity:0}}
@keyframes swWild{0%,15%,100%{transform:scale(.9);border-color:#dbb07644}40%,75%{transform:scale(1);border-color:#e6c58b;box-shadow:0 0 15px #e6c58b20}}
@keyframes swMote{0%{transform:translate(0,0);opacity:0}15%,70%{opacity:.6}100%{transform:translate(35px,-600px);opacity:0}}
/* Restrained illustrated trim, sized to the machine rather than the browser window. */
.sl-welcome{--sw-panel-h:clamp(255px,calc(100cqh - 178px),490px);container-type:size;padding-top:14px;cursor:pointer}
.sw-scroll{padding-bottom:5px;justify-content:safe center}
.sw-heading{margin-bottom:4px}
.sw-heading h2{margin:0 0 12px;font-size:clamp(28px,min(5.5cqw,8cqh),60px);text-shadow:0 2px #17405d,0 5px #081321,0 7px #020811;letter-spacing:-.06em}
.sl-welcome:focus{outline:none}
.sw-mobvault .sw-heading h2 span{color:#a4eafa;text-shadow:0 2px #3982a6,0 5px #163f5b,0 8px #061220}
.sw-mobvault .sw-heading h2 strong{font-size:.35em;letter-spacing:.18em;text-shadow:0 3px #03101b}
.sw-divide{--sw-accent:#ffe1a0;--sw-edge:#bd8b53;background:#24160ed4}
.sw-divide .sw-scene{background:radial-gradient(ellipse at 50% 25%,#ffc67826,transparent 60%),linear-gradient(90deg,#241208d9,transparent 28% 72%,#241208d9);border:0;box-shadow:inset 0 0 90px #0c090b99}
.sw-divide .sw-heading h2{font-size:clamp(27px,min(4.7cqw,6.8cqh),52px);transform:rotate(-2deg);text-shadow:0 2px #9c5e27,0 5px #633917,0 8px #25170d;letter-spacing:-.045em}
.sw-divide .sw-heading h2 span{color:#ffdfa0;letter-spacing:.08em}
.sw-divide .sw-heading h2 strong{color:#9fe7e1;font-size:1.1em;line-height:1.03;letter-spacing:0}
.sw-features{width:min(100%,calc(var(--sw-panel-h)*2.25));gap:clamp(8px,1.3cqw,20px);align-items:stretch;flex-shrink:0}
.sw-feature,.sw-divide .sw-feature{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:3/4;min-height:0;padding:13% 12% 14%;border:0;box-shadow:none;background:transparent;text-align:center;isolation:isolate;filter:drop-shadow(0 7px 9px #0005)}
.sw-feature:before{content:"";position:absolute;inset:0;z-index:-1;background:url(../assets/slots/mobvault/welcome-frame-v3.png) center/100% 100% no-repeat;pointer-events:none}
.sw-divide .sw-feature:before{background-image:url(../assets/slots/divide/welcome-frame-v3.png)}
.sw-divide .sw-feature{padding:13% 12% 14%}
.sw-demo{flex:0 0 auto;width:100%;height:clamp(94px,min(14cqw,23cqh),178px);margin:0 0 12px;max-width:250px}
.sw-feature h3{font:700 clamp(13px,1.35cqw,18px)/1.28 'Silkscreen',monospace;text-transform:uppercase;text-shadow:0 2px #000;margin:0 0 10px}
.sw-feature p{font:650 clamp(11px,1.08cqw,14px)/1.45 Inter,Arial,sans-serif;color:#ecf5ff;text-shadow:0 1px 2px #000;max-width:240px}
.sw-divide .sw-feature p{color:#ffedcc}.sw-divide .sw-trigger{color:#e6d0ae}
.sw-footer{padding-top:8px;grid-template-columns:1fr auto 1fr}
.sw-continue,.sw-divide .sw-continue{background:none;color:var(--sw-accent);border:0;box-shadow:none;min-width:0;height:auto;min-height:48px;padding:7px 16px;font:700 clamp(17.5px,2.5cqw,30px)/1.25 'Silkscreen',monospace;text-transform:uppercase;text-shadow:0 3px #051421;animation:swInvite 2.6s ease-in-out infinite}
.sw-divide .sw-continue{text-shadow:0 3px #40220e}
.sw-continue:hover{transform:none;filter:brightness(1.17)}
.sw-remember,.sw-max{position:relative;z-index:1}
@keyframes swInvite{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
@container (max-width:600px){
 .sw-scroll{justify-content:flex-start;padding-bottom:12px}.sw-heading{margin-bottom:16px}.sw-heading h2{font-size:34px}.sw-heading p{font-size:11px}.sw-brand{font-size:8px}
 .sw-features{grid-template-columns:1fr;gap:12px;max-width:400px}.sw-feature{display:grid;grid-template-columns:92px 1fr;grid-template-rows:auto auto;column-gap:14px;text-align:left;padding:12px;align-content:center;min-height:122px}.sw-feature .sw-demo{grid-row:1/3;width:92px;height:94px;margin:0;align-self:center}.sw-feature h3{font-size:15px;align-self:end;margin-bottom:5px}.sw-feature p{font-size:11px;line-height:1.4}.sw-trigger{font-size:6px;gap:2px}.sw-trigger b{font-size:9px}.sw-trigger i{margin:0 2px}.sw-tiles{width:85px;gap:3px}.sw-tiles b{font-size:13px}
 .sw-footer{grid-template-columns:1fr 1fr;gap:12px;padding-top:8px}.sw-continue{grid-column:1/3;grid-row:1;min-width:0;height:46px;font-size:16px}.sw-max{font-size:8px;display:flex;gap:5px;align-items:center}.sw-max b{font-size:12px}.sw-remember{font-size:10px}.sw-remember input{width:15px;height:15px}
 .sl-welcome{padding:14px 10px 12px}.sw-features{max-width:285px;gap:8px}.sw-heading{margin-bottom:5px}
 .sw-feature,.sw-divide .sw-feature{display:flex;aspect-ratio:3/4;padding:13% 12% 14%;text-align:center;min-height:0;gap:0}
 .sw-feature .sw-demo{width:100%;height:145px;margin:0 0 12px}.sw-feature h3{font-size:16px;align-self:center;margin-bottom:10px}.sw-feature p{font-size:13px;line-height:1.5}.sw-trigger{font-size:9px}.sw-trigger b{font-size:13px}.sw-tiles{width:124px;gap:4px}.sw-tiles b{font-size:18px}
 .sw-footer{background:linear-gradient(transparent,#08111ac9);margin-top:4px}.sw-continue{font-size:17.5px;height:auto;min-height:38px;padding:4px}
}
@media (prefers-reduced-motion:reduce){.sl-welcome,.sl-welcome *{animation:none!important;transition:none!important}.sw-split-stars img{transform:none;opacity:1}.sw-motes{display:none}.sw-tiles .charged{background:#28617880}.sw-continue:hover{transform:none}}
