/* Mine Drop: generated pixel art, drawn on the client from canvas textures */
.sd{position:relative;width:100%;max-width:none;flex:1;align-self:stretch;min-height:520px;margin:0;padding:48px 10px 22px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:8px;border-radius:0;overflow:hidden;
  background:linear-gradient(180deg,#5ec1ff 0%,#a9e3ff 55%,#d8f3ff 100%);transition:background .8s;--w:min(100%,300px)}
.sd.night{background:linear-gradient(180deg,#150a30 0%,#2a1450 60%,#3a2160 100%)}
.sd::before{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,#5fb83f 0 7px,#8a5a2c 7px 100%);opacity:.95;z-index:0}
.sd.night::before{background:linear-gradient(180deg,#6d6a52 0 7px,#4a4630 7px 100%)}
.sd>*{position:relative;z-index:1}
.sd-sky{position:absolute!important;inset:0;z-index:0!important;pointer-events:none;background:
  radial-gradient(40px 14px at 18% 16%,rgba(255,255,255,.9) 60%,transparent 62%),radial-gradient(54px 16px at 78% 10%,rgba(255,255,255,.85) 60%,transparent 62%),radial-gradient(36px 12px at 62% 26%,rgba(255,255,255,.8) 60%,transparent 62%)}
.sd.night .sd-sky{background:radial-gradient(2px 2px at 20% 18%,#fff,transparent),radial-gradient(2px 2px at 70% 12%,#fff,transparent),radial-gradient(2px 2px at 44% 30%,#cdb8ff,transparent),radial-gradient(2px 2px at 86% 34%,#fff,transparent)}
.sd-top{position:absolute!important;top:10px;left:10px;right:10px;pointer-events:none;display:flex;justify-content:space-between;align-items:center;z-index:5!important;min-height:28px}
.sd-badge{padding:5px 11px;border-radius:999px;background:rgba(10,14,30,.78);color:#fff;font-weight:800;font-size:12.5px;border:1px solid rgba(255,255,255,.2)}
.sd-badge[hidden]{display:none}
.sd-skip{pointer-events:auto;padding:5px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(10,14,30,.78);color:#fff;font-weight:800;font-size:12.5px;cursor:pointer}
.sd-skip[hidden]{display:none}
.sd-reel{width:var(--w);display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:4px;box-sizing:border-box;background:#c3c3c3;border:3px solid;border-color:#f2f2f2 #6b6b6b #6b6b6b #f2f2f2;border-radius:3px}
.sd-r{aspect-ratio:1;background:#8b8b8b center/78% no-repeat;border:2px solid;border-color:#5d5d5d #f0f0f0 #f0f0f0 #5d5d5d;image-rendering:pixelated;position:relative}
.sd-r.in{animation:sdDrop .3s cubic-bezier(.2,.9,.3,1.1) both}
.sd-r.eye{box-shadow:0 0 0 2px #35e6f0,0 0 14px #35e6f0 inset}
.sd-r.hot{outline:3px solid #ffe04a;outline-offset:-3px;z-index:2}
@keyframes sdDrop{from{transform:translateY(-26px);opacity:0}to{transform:none;opacity:1}}
.sd-grid{width:var(--w);display:grid;grid-template-columns:repeat(5,1fr);background:#2a1d33;border:3px solid #1a1222;box-sizing:border-box;margin-top:4px}
.sd-b{aspect-ratio:1;background-size:100% 100%;background-repeat:no-repeat;image-rendering:pixelated;position:relative;transition:filter .1s}
.sd-b>i{position:absolute;inset:0;background-size:100% 100%;image-rendering:pixelated;pointer-events:none}
.sd-b.gone{background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.2))!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.sd-b.hit{filter:brightness(1.7);transform:scale(.94)}
.sd-b.tnt::after{content:"";position:absolute;inset:12%;background:var(--tnt) center/100% no-repeat;image-rendering:pixelated;animation:sdTnt .32s ease-in both}
@keyframes sdTnt{from{transform:translateY(-120%) scale(.7);opacity:.2}to{transform:none;opacity:1}}
.sd-chests{width:var(--w);display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:2px}
.sd-ch{aspect-ratio:1;background:center/84% no-repeat;image-rendering:pixelated;position:relative;transition:filter .3s}
.sd-ch:not(.open){filter:saturate(.8) brightness(.9)}
.sd-ch.open{filter:drop-shadow(0 0 8px #ffd24a)}
.sd-ch b{position:absolute;left:50%;top:-8%;transform:translateX(-50%);font-size:clamp(12px,3.4vw,17px);font-weight:900;color:#fff;text-shadow:0 2px 0 #000,0 0 6px #000;white-space:nowrap}
.sd-bar{width:var(--w);display:flex;gap:8px;margin-top:2px}
.sd-win,.sd-mult{flex:1;min-width:0;padding:7px 10px;border-radius:10px;background:rgba(10,14,30,.86);border:1px solid rgba(255,255,255,.2);color:#fff;text-align:center}
.sd-win small,.sd-mult small{display:block;font-size:10.5px;font-weight:700;opacity:.75;text-transform:uppercase;letter-spacing:.5px}
.sd-win b,.sd-mult b{font-size:clamp(15px,4.4vw,20px);font-weight:900;font-variant-numeric:tabular-nums}
.sd-win b{color:#7dffb4}.sd-mult{flex:.6}.sd-mult b{color:#ffd24a}
.sd-ban{position:absolute!important;left:0;right:0;top:34%;z-index:8!important;text-align:center;padding:16px 10px;background:rgba(5,6,16,.82);color:#fff;animation:sdBan .35s ease-out}
.sd-ban[hidden]{display:none}
.sd-ban b{display:block;font-size:clamp(22px,6.4vw,34px);font-weight:900;letter-spacing:1px;text-shadow:0 3px 0 #000,0 0 18px #35e6f0}
.sd-ban span{display:block;margin-top:4px;font-size:clamp(12px,3.2vw,15px);opacity:.85;font-weight:700}
@keyframes sdBan{from{opacity:0;transform:scaleY(.4)}to{opacity:1;transform:none}}
.sd-ov{position:absolute;inset:0;pointer-events:none;z-index:7;overflow:hidden}
.sd-px{position:absolute;width:5px;height:5px;margin:-2px;animation:sdPx .65s ease-out forwards;image-rendering:pixelated}
@keyframes sdPx{to{transform:translate(var(--dx),var(--dy));opacity:0}}
.sd-pop{position:absolute;transform:translate(-50%,-50%);font-style:normal;font-weight:900;font-size:clamp(12px,3.2vw,16px);color:#fff;text-shadow:0 2px 0 #000;animation:sdPop 1s ease-out forwards;white-space:nowrap}
.sd-pop.pay{color:#7dffb4}
@keyframes sdPop{from{opacity:1;transform:translate(-50%,-30%)}to{opacity:0;transform:translate(-50%,-190%)}}
.sd-quake{animation:sdQuake .4s linear}
@keyframes sdQuake{0%,100%{transform:none}20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-3px)}60%{transform:translate(-3px,-2px)}80%{transform:translate(3px,3px)}}
.sd-chip{margin:8px 0 0;padding:8px 12px;border-radius:12px;background:rgba(53,230,240,.12);border:1px solid rgba(53,230,240,.4);font-size:12.5px;font-weight:700;text-align:center}
.sd-chip[hidden]{display:none}
.sd-menu{max-width:760px;width:calc(100% - 24px);max-height:88vh;overflow:auto;position:relative}
.sd-fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;margin-top:12px}
.sd-fc{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 10px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line,#2a3550)}
.sd-fc.on{border-color:#35e6f0;box-shadow:0 0 14px rgba(53,230,240,.35)}
.sd-fi{width:52px;height:52px;background:center/contain no-repeat;image-rendering:pixelated;margin-bottom:6px}
.sd-fc h4{margin:0;font-size:15px}.sd-fc p{margin:6px 0 8px;font-size:12px;line-height:1.35;color:var(--muted,#9aa7b5);flex:1}
.sd-fc b{margin-bottom:8px;font-size:15px;color:#7dffb4}.sd-fc .btn{width:100%}
@media(max-width:560px){.sd{padding-top:44px;border-radius:12px}}
@media(prefers-reduced-motion:reduce){.sd-r.in,.sd-ban,.sd-quake,.sd-b.tnt::after{animation:none}.sd-pop,.sd-px{animation-duration:.01s}}

/* the backdrop fills the whole stage, with drifting clouds and moving items */
.stage.sd-host{padding:0!important;align-items:stretch;justify-content:stretch;background:#5ec1ff}
.sd-sky{background:none!important}
.sd-sky::before,.sd-sky::after{content:"";position:absolute;left:0;right:0;height:64px;background-image:var(--cloud);background-repeat:repeat-x;background-size:256px 64px;image-rendering:pixelated}
.sd-sky::before{top:7%;animation:sdCloud 90s linear infinite}
.sd-sky::after{top:26%;background-size:192px 48px;height:48px;opacity:.9;animation:sdCloud 140s linear infinite reverse}
.sd-sun{position:absolute;right:9%;top:6%;width:46px;height:46px;background:#fff7b8;box-shadow:inset 0 0 0 7px #ffe45c,0 0 38px 10px rgba(255,236,120,.55);image-rendering:pixelated}
.sd.night .sd-sun{background:#e9ecf5;box-shadow:inset -12px -8px 0 0 #c4c9d8,inset 0 0 0 4px #dde1ee,0 0 24px 4px rgba(200,210,255,.35);width:40px;height:40px}
.sd.night .sd-sky::before,.sd.night .sd-sky::after{opacity:0}
.sd.night .sd-sky{background:radial-gradient(2px 2px at 20% 18%,#fff,transparent),radial-gradient(2px 2px at 70% 12%,#fff,transparent),radial-gradient(2px 2px at 44% 30%,#cdb8ff,transparent),radial-gradient(2px 2px at 86% 34%,#fff,transparent),radial-gradient(2px 2px at 8% 40%,#fff,transparent),radial-gradient(2px 2px at 94% 20%,#cdb8ff,transparent)!important;animation:sdTwinkle 3s ease-in-out infinite alternate}
@keyframes sdCloud{to{background-position-x:-1024px}}
@keyframes sdTwinkle{from{opacity:.6}to{opacity:1}}
.sd::before{height:30%}
/* flying pickaxes and TNT */
.sd-fly{position:absolute;margin:0;background:center/contain no-repeat;image-rendering:pixelated;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 2px rgba(0,0,0,.45));z-index:6;will-change:left,top}
.sd-fly.swing{animation:sdSwing .19s cubic-bezier(.3,.7,.5,1)}
.sd-fly.out{animation:sdOut .34s ease-in forwards}
.sd-fly.fuse{animation:sdFuse .26s linear infinite}
@keyframes sdSwing{0%{transform:translate(-50%,-50%)}38%{transform:translate(-50%,-150%) rotate(-28deg)}72%{transform:translate(-50%,-38%) rotate(16deg) scale(1.08,.88)}100%{transform:translate(-50%,-50%)}}
@keyframes sdOut{to{transform:translate(-50%,-10%) rotate(40deg) scale(.5);opacity:0}}
@keyframes sdFuse{0%,100%{transform:translate(-50%,-50%) scale(1);filter:brightness(1)}50%{transform:translate(-50%,-50%) scale(1.18);filter:brightness(1.9) drop-shadow(0 0 8px #ff5a1a)}}
/* idle motion on the reel items and ores */
.sd-r:not(.in){animation:sdBob 2.4s ease-in-out infinite}
.sd-r.eye{animation:sdEye 1s ease-in-out infinite}
@keyframes sdBob{50%{background-position:center 44%}}
@keyframes sdEye{50%{box-shadow:0 0 0 2px #35e6f0,0 0 22px #35e6f0 inset;filter:brightness(1.3)}}
.sd-b::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);background-size:260% 100%;background-position:130% 0;opacity:0}
.sd-b[data-shine]::after{opacity:1;animation:sdShine 3.6s ease-in-out infinite;animation-delay:var(--sh,0s)}
@keyframes sdShine{0%,60%{background-position:130% 0}100%{background-position:-30% 0}}
.sd-ch.open{animation:sdChest .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes sdChest{from{transform:scale(.7)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.sd-sky::before,.sd-sky::after,.sd-r:not(.in),.sd-r.eye,.sd-b[data-shine]::after,.sd-fly.fuse,.sd-ch.open{animation:none!important}}

/* slot-style spin: a blurred, scrolling cell until its column stops */
.sd-r.spin{animation:sdSpin .11s linear infinite;filter:blur(1.4px) brightness(.95)}
@keyframes sdSpin{from{background-position:center -30%}to{background-position:center 130%}}
@media(prefers-reduced-motion:reduce){.sd-r.spin{animation:none!important}}

/* more Minecraft-like: textured grass and dirt ground, bevelled blocks */
.sd::before,.sd.night::before{background:var(--gr) 0 0/56px 56px repeat-x,var(--di) 0 0/56px 56px repeat;image-rendering:pixelated;height:30%;opacity:1}
.sd.night::before{filter:none}
.sd-b{box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.sd-grid{background:#1b1424;border:4px solid #0e0914;box-shadow:0 0 0 2px #3a2c4a,0 8px 0 rgba(0,0,0,.25)}
.sd-reel{box-shadow:0 6px 0 rgba(0,0,0,.28)}
.sd-win b,.sd-mult b,.sd-pop,.sd-ch b{text-shadow:2px 2px 0 rgba(0,0,0,.65)}

/* game info button + info/feature overlays */
.sd-info-btn{pointer-events:auto;margin-left:auto;width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:rgba(10,14,30,.78);color:#fff;font:800 16px/1 Georgia,serif;font-style:italic;cursor:pointer}
.sd-info-btn:hover{background:rgba(53,230,240,.35)}
.sd-fo{position:fixed;inset:0;z-index:2000;background:rgba(6,9,20,.94);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center}
.sd-fx{position:absolute;top:12px;right:12px;width:42px;height:42px;border-radius:12px;border:0;background:#111827;color:#fff;font-size:20px;cursor:pointer;z-index:2}
.sd-fscroll{width:100%;max-width:1000px;overflow:auto;padding:64px 16px 24px;flex:1;display:flex;flex-direction:column;align-items:center}
.sd-fscroll>h3{margin:0 0 16px;font-size:22px;color:#35e6f0;text-align:center}
.sd-fgrid2{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;width:100%}
.sd-fc2{width:200px;border-radius:14px;overflow:hidden;background:#e9edf2;color:#10161f;border:2px solid transparent;display:flex;flex-direction:column;box-shadow:0 8px 22px rgba(0,0,0,.4)}
.sd-fc2.on{border-color:#35e6f0;box-shadow:0 0 18px rgba(53,230,240,.5)}
.sd-fart{height:86px;display:flex;align-items:flex-end;justify-content:center;gap:2px;padding-bottom:6px;background:linear-gradient(#5ec3ff,#a9e2ff 60%,#6bbf4a 60%,#6bbf4a 66%,#8a5a2e 66%)}
.sd-fc2.t-ice .sd-fart{background:linear-gradient(#27406b,#4f86c8 60%,#6bbf4a 60%,#6bbf4a 66%,#8a5a2e 66%)}
.sd-fc2.t-void .sd-fart{background:linear-gradient(#1c1032,#4b2a8a 60%,#2a1d33 60%)}
.sd-fc2.t-sun .sd-fart{background:linear-gradient(#ffd27a,#ffb347 60%,#6bbf4a 60%,#6bbf4a 66%,#8a5a2e 66%)}
.sd-fc2.t-stone .sd-fart{background:linear-gradient(#59616b,#8b949e 60%,#3c4249 60%)}
.sd-fart i{width:36px;height:36px;background:center/contain no-repeat;image-rendering:pixelated;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.sd-fart i.big{width:50px;height:50px}.sd-fart i.q{display:grid;place-items:center;font:900 34px/1 Georgia,serif;color:#fff;background:#9a3fe6;border-radius:4px}
.sd-fbody{padding:8px 10px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;flex:1}
.sd-bolts{font-size:13px;letter-spacing:1px}.sd-bolts span{opacity:.22}.sd-bolts span.on{opacity:1;color:#18b6c9}
.sd-fbody h4{margin:2px 0 4px;font-size:15px;text-transform:uppercase;letter-spacing:.2px}
.sd-fbody p{margin:0 0 6px;font-size:11.5px;line-height:1.3;color:#4a5565;flex:1}
.sd-fbody b{font-size:17px;margin-bottom:8px}
.sd-fbtn{width:100%;padding:9px 6px;border:0;border-radius:8px;background:#21a366;color:#eaffee;font-weight:900;text-transform:uppercase;letter-spacing:.4px;cursor:pointer}
.sd-fbtn.buy{background:#2a9fb8}.sd-fbtn.off{background:#b34b4b}.sd-fbtn.poor{opacity:.55}
.sd-fbtn:hover{filter:brightness(1.1)}
.sd-fbar{display:flex;gap:22px;justify-content:center;padding:10px 26px;margin:0 0 12px;border-radius:14px;background:#0d1322;border:1px solid rgba(255,255,255,.12)}
.sd-fbar small{display:block;color:#35e6f0;font-size:11px;font-weight:800;text-transform:uppercase}.sd-fbar b{font-size:18px;color:#fff}
.sd-itext{align-items:stretch;max-width:760px;color:#e5ecf5}.sd-itext h3{text-align:center;margin:22px 0 8px;font-size:22px;color:#35e6f0}.sd-itext p{font-size:14px;line-height:1.5;margin:6px 0;color:#cdd7e4}
.sd-note{text-align:center;color:#9aa7b5!important}
.sd-ptg{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:10px 0}.sd-ptg .sd-pt{width:112px}
.sd-pt{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);text-align:center}
.sd-pt span{font-size:12px;font-weight:700}.sd-pt b{font-size:14px;color:#7dffb4}.sd-pt small{font-size:11px;color:#9aa7b5}
.sd-pb{width:52px;height:52px;background:center/100% 100% no-repeat;image-rendering:pixelated;display:block}
.sd-ft{display:flex;gap:12px;align-items:center;padding:8px 10px;margin:6px 0;border-radius:12px;background:rgba(255,255,255,.05)}
.sd-fi2{flex:0 0 46px;width:46px;height:46px;background:center/100% 100% no-repeat;image-rendering:pixelated}.sd-ft h5{margin:0 0 2px;font-size:14px}.sd-ft p{margin:0!important;font-size:12.5px!important}
.sd-info .sd-fscroll{padding-bottom:40px}
@media(max-width:560px){.sd-fc2{width:calc(50% - 7px)}.sd-fart{height:70px}.sd-fart i{width:28px;height:28px}.sd-fart i.big{width:38px;height:38px}.sd-fbody p{font-size:11px}.sd-ptg .sd-pt{width:calc(33.333% - 7px)}.sd-fbar{gap:16px}}

/* layout like a slot cabinet: inventory on top, blocks, chests, a multiplier box underneath; no boxes above the inventory */
.sd{padding-top:46px;gap:0}
.sd-grid{background:transparent!important;border:0!important;margin-top:6px}
.sd-b.gone{background:none!important;box-shadow:none!important}
.sd-chests{margin-top:6px}
.sd-mbox{width:var(--w);margin-top:6px;padding:5px 8px;box-sizing:border-box;text-align:center;background:#c3c3c3;border:3px solid;border-color:#f2f2f2 #6b6b6b #6b6b6b #f2f2f2;border-radius:3px;color:#2b2b2b;display:flex;align-items:center;justify-content:center;gap:8px}
.sd-mbox small{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#555}
.sd-mbox b{font-size:clamp(16px,4.6vw,22px);font-weight:900;font-variant-numeric:tabular-nums;color:#1d1d1d;text-shadow:1px 1px 0 #f5f5f5}
.sd-top{gap:6px;flex-wrap:wrap;justify-content:flex-start}
.sd-tw{padding:3px 12px;border-radius:10px;background:rgba(10,14,30,.86);border:1px solid rgba(255,255,255,.22);color:#fff;text-align:center;line-height:1.1}
.sd-tw small{display:block;font-size:9.5px;font-weight:800;opacity:.75;text-transform:uppercase;letter-spacing:.5px}
.sd-tw b{font-size:15px;font-weight:900;color:#7dffb4;font-variant-numeric:tabular-nums}
.sd-skip,.sd-info-btn{margin-left:auto}.sd-skip:not([hidden])+.sd-info-btn{margin-left:0}
.sd-badge{background:#fff;color:#16202e;border:2px solid #16202e;border-radius:8px;text-transform:uppercase;letter-spacing:.3px}
/* the bonus backdrop: purple night with stars and a pale end-stone floor */
.sd.night{background:linear-gradient(180deg,#0d0620 0%,#26104a 55%,#3b1f66 100%)}
.sd.night::before{background:var(--en) 0 0/96px 96px repeat;opacity:1}
.sd.night .sd-sky{background:radial-gradient(2px 2px at 8% 12%,#fff,transparent),radial-gradient(2px 2px at 22% 38%,#cdb8ff,transparent),radial-gradient(3px 3px at 35% 8%,#fff,transparent),radial-gradient(2px 2px at 52% 24%,#fff,transparent),radial-gradient(2px 2px at 68% 14%,#cdb8ff,transparent),radial-gradient(3px 3px at 82% 30%,#fff,transparent),radial-gradient(2px 2px at 92% 10%,#fff,transparent),radial-gradient(2px 2px at 14% 62%,#fff,transparent),radial-gradient(2px 2px at 88% 58%,#cdb8ff,transparent)}
.sd.night .sd-sun{display:none}

/* board pop-in and feature screens */
.sd-b.pre{opacity:0;transform:scale(.5) translateY(-14px);filter:none}
.sd-b.popping{transition:opacity .34s ease-out,transform .46s cubic-bezier(.2,1.5,.4,1),filter .1s}
.sd-intro{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px;text-align:center;background:rgba(5,6,16,.84);color:#fff;cursor:pointer;animation:sdIn .3s ease-out}
.sd-intro.out{opacity:0;transition:opacity .25s}
@keyframes sdIn{from{opacity:0}to{opacity:1}}
.sd-it{font:900 clamp(26px,7vw,46px)/1.05 "Press Start 2P",ui-monospace,Menlo,monospace;letter-spacing:1px;text-shadow:0 4px 0 #000,0 0 22px #35e6f0;animation:sdTitle .5s cubic-bezier(.2,1.4,.4,1)}
.sd-ib{font:900 clamp(22px,6vw,38px)/1.1 ui-monospace,Menlo,monospace;text-shadow:0 3px 0 #000;margin-top:8px}
.sd-is{font-size:clamp(12px,3.2vw,16px);font-weight:700;opacity:.88;line-height:1.5;max-width:420px}
.sd-ic{position:absolute;left:0;right:0;bottom:18px;font:700 14px ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:2px;animation:sdBlink 1.2s infinite}
@keyframes sdTitle{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes sdBlink{50%{opacity:.35}}
/* confirm card on the features page */
.sd-cfbg{position:absolute;inset:0;z-index:5;background:rgba(3,5,12,.7);display:flex;align-items:center;justify-content:center;padding:16px}
.sd-cf{width:min(340px,100%);border-radius:16px;overflow:hidden;background:#fff;color:#10161f;box-shadow:0 16px 50px rgba(0,0,0,.6);animation:sdTitle .3s cubic-bezier(.2,1.3,.4,1)}
.sd-cf .sd-fart{height:120px}.sd-cf .sd-fart i{width:48px;height:48px}.sd-cf .sd-fart i.big{width:68px;height:68px}
.sd-cf .sd-fbody p{font-size:13px}.sd-cf .sd-fbody b{font-size:24px}
.sd-fbtn.confirm{background:#2fd0ec;color:#05212a;font-size:16px;padding:12px}.sd-fbtn.ghost{background:transparent;color:#4a5565;margin-top:4px}
.sd-cf .sd-fart{background:linear-gradient(#5ec3ff,#a9e2ff 60%,#6bbf4a 60%,#6bbf4a 66%,#8a5a2e 66%)}.sd-cf.t-ice .sd-fart{background:linear-gradient(#27406b,#4f86c8 60%,#6bbf4a 60%,#6bbf4a 66%,#8a5a2e 66%)}.sd-cf.t-void .sd-fart{background:linear-gradient(#1c1032,#4b2a8a 60%,#2a1d33 60%)}.sd-cf.t-sun .sd-fart{background:linear-gradient(#ffd27a,#ffb347 60%,#6bbf4a 60%,#6bbf4a 66%,#8a5a2e 66%)}.sd-cf.t-stone .sd-fart{background:linear-gradient(#59616b,#8b949e 60%,#3c4249 60%)}
/* background critters */
.sd-mob{position:absolute;left:0;width:var(--sz);height:var(--sz);background-size:100% 100%;background-repeat:no-repeat;image-rendering:pixelated;opacity:1;animation:sdFly linear infinite;pointer-events:none}
.sd-mob.bird{background-image:var(--m-bird)}.sd-mob.jelly{background-image:var(--m-jelly)}.sd-mob.puff{background-image:var(--m-puff)}
.sd-mob.bird{animation-name:sdFlyBob}.sd-mob.jelly{animation-name:sdFlyJelly}
@keyframes sdFly{from{transform:translateX(-120px)}to{transform:translateX(calc(100vw + 120px))}}
@keyframes sdFlyBob{0%{transform:translate(-80px,0)}25%{transform:translate(25vw,-10px)}50%{transform:translate(50vw,6px)}75%{transform:translate(75vw,-8px)}100%{transform:translate(calc(100vw + 80px),2px)}}
@keyframes sdFlyJelly{0%{transform:translate(-120px,0) scale(1)}25%{transform:translate(25vw,-14px) scale(1.06,.94)}50%{transform:translate(50vw,8px) scale(.95,1.05)}75%{transform:translate(75vw,-10px) scale(1.06,.94)}100%{transform:translate(calc(100vw + 120px),0) scale(1)}}
.sd.night .sd-mob{filter:brightness(.85) saturate(.9)}
.sd.th-diamond .sd-mob{filter:hue-rotate(10deg) brightness(.95)}.sd.th-super .sd-mob{filter:hue-rotate(150deg) saturate(1.2)}.sd.th-obsidian .sd-mob{filter:hue-rotate(250deg) brightness(1.1) drop-shadow(0 0 6px #9b5cff)}.sd.th-epic .sd-mob{filter:hue-rotate(60deg) saturate(1.4) brightness(1.1)}.sd.th-mystery .sd-mob{filter:hue-rotate(230deg) saturate(1.3)}
@media(prefers-reduced-motion:reduce){.sd-mob{animation:none!important;left:30%}}
/* a backdrop for each feature */
.sd.th-diamond{background:linear-gradient(180deg,#04222b 0%,#0a4a5a 55%,#127a8c 100%)}
.sd.th-diamond::before{background:var(--g-dia) 0 0/96px 96px repeat}
.sd.th-obsidian{background:linear-gradient(180deg,#07030f 0%,#1a0a2e 55%,#3a1450 100%)}
.sd.th-obsidian::before{background:var(--g-obs) 0 0/96px 96px repeat;box-shadow:inset 0 6px 0 #ff7a1a,inset 0 14px 18px rgba(255,90,0,.35)}
.sd.th-super{background:linear-gradient(180deg,#2a0606 0%,#6e1a0b 55%,#d1561b 100%)}
.sd.th-super::before{background:var(--g-sup) 0 0/96px 96px repeat}
.sd.th-epic{background:linear-gradient(180deg,#1a0a2e 0%,#7a2f6e 50%,#ffb347 100%)}
.sd.th-epic::before{background:var(--g-epic) 0 0/96px 96px repeat}
.sd.th-mystery{background:linear-gradient(180deg,#14052b 0%,#4a1d73 55%,#8a3fc0 100%)}
.sd.th-mystery::before{background:var(--g-mys) 0 0/96px 96px repeat}

/* cartoon pass: pixel font for numbers + saturated outlined blocks */
.sd-mbox b,.sd-tw b,.sd-badge,.sd-pop{font-family:"Press Start 2P","Chakra Petch",monospace;font-weight:400}
.sd-mbox b{font-size:clamp(13px,3.6vw,18px);color:#fff;text-shadow:2px 2px 0 #1d1d1d,-1px -1px 0 #1d1d1d,1px -1px 0 #1d1d1d,-1px 1px 0 #1d1d1d}
.sd-mbox small{font-family:"Press Start 2P","Chakra Petch",monospace;font-size:8px;font-weight:400;color:#444}
.sd-tw b{font-size:12px}
.sd-tw small{font-family:"Press Start 2P","Chakra Petch",monospace;font-size:7px;font-weight:400}
.sd-badge{font-size:10px;padding:7px 10px}
.sd-b{box-shadow:none;filter:saturate(1.15)}
.sd-b.hit{filter:brightness(1.7) saturate(1.15)}

/* stop-auto button on the stage */
.sd-stop{pointer-events:auto;padding:7px 14px;border-radius:999px;border:2px solid #fff;background:#e5373f;color:#fff;font-weight:900;font-size:13px;cursor:pointer;margin-left:auto;box-shadow:0 2px 0 #7a1016,0 0 14px rgba(229,55,63,.6);animation:sdStopP 1.4s ease-in-out infinite}
.sd-stop[hidden]{display:none}
.sd-stop:not([hidden])~.sd-skip,.sd-stop:not([hidden])~.sd-info-btn{margin-left:0}
@keyframes sdStopP{0%,100%{box-shadow:0 2px 0 #7a1016,0 0 6px rgba(229,55,63,.4)}50%{box-shadow:0 2px 0 #7a1016,0 0 18px rgba(229,55,63,.9)}}
@media(prefers-reduced-motion:reduce){.sd-stop{animation:none}}