/* ============================================================
   BASHCOIN — casino
   Games are executables in a directory; a round is a program running.
   ============================================================ */

/* ---------- the lobby: two columns of live cards ----------
   At 390px: two 173px columns, 12px gap. Cards 196px tall; the featured
   game spans both columns at 156px. Every card: a rotating light frame, an
   accent glow that follows the finger, a sheen that sweeps across now and
   then, and art that floats. */
@property --gc-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.lobby{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);perspective:900px}
.gc{--acc:var(--primary);--rx:0deg;--ry:0deg;--mx:50%;--my:30%;
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--sp-1);
  height:196px;padding:var(--sp-3);border:0;border-radius:var(--r-md);overflow:hidden;isolation:isolate;
  text-align:left;color:var(--text);background:var(--bg-1);
  transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;
  transition:transform .25s var(--e-out),box-shadow .25s var(--e-out);
  box-shadow:0 10px 24px -14px rgba(0,0,0,.9),inset 0 0 0 1px var(--stroke);
  animation:gc-in .5s var(--e-out) both;animation-delay:calc(var(--i) * 55ms)}
@keyframes gc-in{from{opacity:0;transform:translateY(14px) scale(.97)}}
.gc:active{transform:rotateX(var(--rx)) rotateY(var(--ry)) scale(.97)}

/* rotating light frame */
.gc__frame{position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:2;pointer-events:none;
  background:conic-gradient(from var(--gc-a),transparent 0 62%,var(--acc) 76%,#fff 80%,var(--acc) 84%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:gc-spin 5.5s linear infinite;animation-delay:calc(var(--i) * -0.9s);opacity:.85}
@keyframes gc-spin{to{--gc-a:360deg}}

/* accent glow + scanlines */
.gc__bg{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at var(--mx) var(--my),color-mix(in srgb,var(--acc) 30%,transparent),transparent 62%),
    radial-gradient(90% 60% at 50% 110%,color-mix(in srgb,var(--acc) 14%,transparent),transparent 70%),
    repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.22) 2px 3px),
    linear-gradient(180deg,var(--surface),var(--bg-0));
  transition:background-position .3s}

/* a sheen that crosses the card every few seconds */
.gc__sheen{position:absolute;inset:-40% -60%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.14) 50%,transparent 58%);
  transform:translateX(-60%);animation:gc-sheen 6s ease-in-out infinite;animation-delay:calc(var(--i) * .7s + 1s)}
@keyframes gc-sheen{0%,70%{transform:translateX(-60%)}100%{transform:translateX(60%)}}

.gc__art{position:absolute;left:50%;top:22px;width:84px;height:84px;margin-left:-42px;z-index:1;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.55)) drop-shadow(0 0 18px color-mix(in srgb,var(--acc) 40%,transparent));
  animation:gc-float 4s ease-in-out infinite;animation-delay:calc(var(--i) * -.6s);
  transform:translateZ(30px)}
.gc__art svg{width:100%;height:100%}
@keyframes gc-float{50%{translate:0 -6px}}

.gc__tag{position:absolute;top:var(--sp-3);left:var(--sp-3);z-index:3;height:20px;display:inline-flex;align-items:center;
  padding:0 7px;border-radius:2px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,var(--bg-0));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 60%,transparent)}
.gc__text{position:relative;z-index:3;display:flex;flex-direction:column;gap:2px;min-width:0;padding-right:28px}
.gc__t{font-size:var(--fs-body);font-weight:800;letter-spacing:.02em;line-height:20px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc__s{font-size:var(--fs-badge);font-weight:500;color:var(--text-3);line-height:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc__go{position:absolute;right:var(--sp-3);bottom:var(--sp-3);z-index:3;display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-badge);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.gc__go i{display:grid;place-items:center;width:24px;height:24px;border-radius:2px;font-style:normal;font-size:9px;
  color:var(--bg-0);background:var(--acc);box-shadow:0 0 14px -2px var(--acc)}

/* the featured game: full width, art to the right */
.gc--hero{grid-column:1 / -1;height:156px;justify-content:center;padding:var(--sp-4)}
.gc--hero .gc__art{left:auto;right:12px;top:50%;width:112px;height:112px;margin:-56px 0 0}
.gc--hero .gc__text{padding-right:120px;margin-top:22px}
.gc--hero .gc__t{font-size:var(--fs-h3);line-height:26px}
.gc--hero .gc__s{font-size:var(--fs-label);white-space:normal}
.gc--hero .gc__go{left:var(--sp-4);right:auto;bottom:var(--sp-4)}
.gc--hero .gc__text{margin-bottom:28px}

.gc--mine{--acc:#FFB347}
.gc--flip{--acc:var(--amber-500)}
.gc--dice{--acc:var(--plasma-400)}
.gc--slots{--acc:var(--flare-400)}
.gc--crash{--acc:var(--wire-400)}
.gc--mines{--acc:var(--phos-500)}
.gc--wheel{--acc:var(--amber-300)}

@media (prefers-reduced-motion:reduce){
  .gc,.gc__frame,.gc__sheen,.gc__art{animation:none}
  .gc{transform:none}
}

/* ---------- running a game ---------- */
.game{display:flex;flex-direction:column;gap:var(--sp-3)}
.game__head{display:flex;align-items:center;gap:var(--sp-2);
  padding-bottom:var(--sp-2);border-bottom:1px solid var(--stroke)}
.game__title{flex:1;font-size:var(--fs-sub);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  line-height:var(--lh-snug)}
.game__title::before{content:"./";color:var(--primary);font-weight:400}
.game__bal{display:flex;align-items:baseline;gap:.4ch;font-size:var(--fs-label);font-weight:700;color:var(--brand)}
.game__bal svg{width:0;height:0}
.game__stage{position:relative;border-radius:var(--r-sm);overflow:hidden;
  background:var(--bg-1);border:1px solid var(--stroke);box-shadow:none}

/* ---------- stake input ---------- */
.bet{padding:var(--sp-3);border-radius:var(--r-sm);background:var(--bg-1);border:1px solid var(--stroke)}
.bet__label{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.bet__label label,.bet__label>span:first-child{font-size:var(--fs-badge);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.bet__input{display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-1) 0 var(--sp-2);
  min-height:var(--tap-lg);border-radius:var(--r-sm);
  background:var(--bg-0);border:1px solid var(--stroke-control)}
.bet__input::before{content:">";color:var(--primary);font-weight:700}
.bet__input:focus-within{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.bet__input input{flex:1;min-width:0;align-self:stretch;min-height:var(--tap);
  background:none;border:0;outline:none;
  font-size:var(--fs-h3);font-weight:700;color:var(--brand)}
.bet__quick{display:flex;gap:var(--sp-1)}
.bet__quick button{min-width:var(--tap);min-height:var(--tap);padding:0 var(--sp-2);border-radius:2px;
  background:none;border:1px solid var(--stroke);text-align:center;
  font-size:var(--fs-label);font-weight:700;color:var(--text-2);
  transition:color var(--t-press) linear,border-color var(--t-press) linear}
.bet__quick button:active{color:var(--primary);border-color:var(--primary)}
.bet__chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-1);margin-top:var(--sp-2)}
.bet__chips button{flex:1;min-height:var(--tap);border-radius:2px;
  background:none;border:1px dashed var(--stroke-strong);text-align:center;
  min-width:0;padding:0 2px;font-size:10px;letter-spacing:-.02em;font-weight:500;color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:clip}
.bet__chips button:active{border-style:solid;color:var(--primary);border-color:var(--primary)}

/* ---------- exit code ---------- */
.payout{display:flex;align-items:center;gap:.8ch;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);
  font-size:var(--fs-sub);font-weight:700;animation:riseIn var(--t-fast) var(--e-out) both;
  border:1px solid;background:var(--bg-1)}
.payout svg{width:var(--icon-sm);height:var(--icon-sm);flex:none}
.payout b{font-weight:700}
.payout--win{border-color:var(--success);color:var(--success)}
.payout--win::before{content:"exit 0 ·";color:var(--text-3);font-weight:400}
.payout--lose{border-color:var(--danger);color:var(--danger)}
.payout--lose::before{content:"exit 1 ·";color:var(--text-3);font-weight:400}

/* ---------- round history ---------- */
.hist{display:flex;gap:var(--sp-1);overflow-x:auto;padding:2px 0;scrollbar-width:none}
.hist__i{flex:none;min-width:46px;min-height:26px;padding:0 var(--sp-2);border-radius:2px;
  display:grid;place-items:center;font-size:var(--fs-badge);font-weight:500;
  background:none;border:1px solid var(--stroke);color:var(--text-3)}
.hist__i--win{border-color:var(--success);color:var(--success)}
.hist__i--lose{border-color:var(--danger);color:var(--danger)}

/* ============================================================
   COINFLIP
   ============================================================ */
.flip-stage{display:grid;place-items:center;height:210px;perspective:900px}
.flip-coin{width:120px;height:120px;position:relative;transform-style:preserve-3d}
.flip-coin.is-spin{animation:flipSpin 2.1s cubic-bezier(.3,.05,.2,1) forwards}
@keyframes flipSpin{
  0%{transform:rotateY(0) translateY(0)}
  40%{transform:rotateY(1440deg) translateY(-56px)}
  100%{transform:rotateY(var(--end,2880deg)) translateY(0)}}
.flip-face{position:absolute;inset:0;border-radius:var(--r-sm);display:grid;place-items:center;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  font-size:40px;font-weight:700;box-shadow:none}
.flip-face--h{background:none;border:2px solid var(--brand);color:var(--brand);text-shadow:var(--glow-amber)}
.flip-face--t{background:none;border:2px solid var(--text-2);color:var(--text-2);transform:rotateY(180deg)}
.flip-pick{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.flip-pick button{min-height:56px;border-radius:var(--r-sm);background:none;border:1px solid var(--stroke-strong);
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.8ch;
  font-size:var(--fs-sub);font-weight:500;color:var(--text-2);
  transition:all var(--t-press) linear}
.flip-pick button i{font-style:normal;font-size:var(--fs-lead);font-weight:700;color:var(--text-3)}
.flip-pick button.is-sel{border-color:var(--primary);color:var(--primary);background:var(--surface-2)}
.flip-pick button.is-sel i{color:var(--primary)}

/* ============================================================
   DICE
   ============================================================ */
.dice-stage{padding:var(--sp-4) var(--sp-3)}
.dice-num{font-size:46px;font-weight:700;text-align:center;letter-spacing:-.02em;
  color:var(--text);transition:color var(--t-press) linear}
.dice-num.is-win{color:var(--success);text-shadow:var(--glow-phos)}
.dice-num.is-lose{color:var(--danger)}
.dice-track{position:relative;height:10px;border-radius:0;margin:var(--sp-4) 0 var(--sp-1);
  overflow:hidden;border:1px solid var(--stroke)}
.dice-marks{display:flex;justify-content:space-between;font-size:var(--fs-badge);font-weight:400;color:var(--text-3)}
.dice-slider{width:100%;-webkit-appearance:none;appearance:none;height:var(--tap);background:none;margin-top:var(--sp-1)}
.dice-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:30px;border-radius:2px;
  background:var(--primary);border:1px solid var(--bg-0);box-shadow:var(--glow-phos);cursor:grab}
.dice-slider::-moz-range-thumb{width:16px;height:30px;border-radius:2px;background:#4FE38F;border:1px solid #050806}
.dice-slider:focus-visible{outline-offset:-4px}
.dice-info{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:var(--sp-2);
  background:var(--stroke);border:1px solid var(--stroke)}
.dice-info div{padding:var(--sp-2);border-radius:0;background:var(--bg-1);text-align:center}
.dice-info b{display:block;font-size:var(--fs-sub);font-weight:700;margin-top:2px}
.dice-steps{display:flex;gap:var(--sp-2);align-items:center;justify-content:center;margin-top:var(--sp-1)}
.dice-steps button{min-width:var(--tap);min-height:var(--tap);border-radius:2px;
  background:none;border:1px solid var(--stroke);display:grid;place-items:center;color:var(--text-2)}
.dice-steps button svg{width:var(--icon-sm);height:var(--icon-sm)}

/* ============================================================
   SLOTS
   ============================================================ */
.slots-stage{padding:var(--sp-4)}
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);height:150px}
.reel{position:relative;border-radius:var(--r-sm);overflow:hidden;
  background:var(--bg-0);border:1px solid var(--stroke-strong);box-shadow:none}
.reel__strip{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;will-change:transform}
.reel__cell{height:150px;display:grid;place-items:center}
.reel__cell svg{width:52px;height:52px}
.reel::before,.reel::after{content:"";position:absolute;left:0;right:0;height:28px;z-index:2;pointer-events:none}
.reel::before{top:0;background:linear-gradient(180deg,var(--bg-0),transparent)}
.reel::after{bottom:0;background:linear-gradient(0deg,var(--bg-0),transparent)}
.reel.is-win{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.paytable{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:var(--sp-3);
  background:var(--stroke);border:1px solid var(--stroke)}
.paytable div{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-1);
  padding:var(--sp-1) var(--sp-2);border-radius:0;background:var(--bg-1);
  font-size:var(--fs-badge);font-weight:500;color:var(--text-3)}
.paytable span{display:inline-flex;align-items:center;gap:1px}
.paytable svg{width:16px;height:16px}
.paytable b{color:var(--brand);font-weight:700}

/* ============================================================
   CRASH
   ============================================================ */
.crash-stage{height:230px;position:relative;padding:0}
.crash-stage canvas{width:100%;height:100%;display:block}
.crash-mult{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.crash-mult span{font-size:40px;font-weight:700;letter-spacing:-.02em;color:var(--text);
  text-shadow:0 0 20px rgba(0,0,0,.9);transition:color var(--t-press) linear}
.crash-mult.is-crash span{color:var(--danger);animation:crashShake var(--t-fast) steps(3,end)}
@keyframes crashShake{0%,100%{transform:none}33%{transform:translateX(-5px)}66%{transform:translateX(5px)}}
.crash-status{position:absolute;left:var(--sp-3);top:var(--sp-2);display:flex;align-items:center;gap:.6ch;
  font-size:var(--fs-badge);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.crash-status i{width:6px;height:6px;border-radius:0;background:currentColor;display:block}

/* ============================================================
   MINES
   ============================================================ */
.mines-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-1);
  padding:var(--sp-3);max-width:320px;margin:0 auto}
.mcell{aspect-ratio:1;min-width:var(--tap);min-height:var(--tap);border-radius:2px;
  display:grid;place-items:center;background:var(--bg-0);border:1px solid var(--stroke-strong);
  color:var(--text-3);font-size:var(--fs-label);
  transition:background var(--t-press) linear,border-color var(--t-press) linear}
.mcell::before{content:"?";opacity:.45}
.mcell svg{width:22px;height:22px}
.mcell:active{background:var(--surface-2)}
.mcell.is-gem,.mcell.is-bomb{border-style:solid}
.mcell.is-gem::before,.mcell.is-bomb::before{content:none}
.mcell.is-gem{border-color:var(--success);background:var(--surface-2);animation:revealPop var(--t-fast) var(--e-out)}
.mcell.is-bomb{border-color:var(--danger);background:rgba(255,107,107,.14);animation:revealPop var(--t-fast) var(--e-out)}
.mcell.is-ghost{opacity:.3}
@keyframes revealPop{from{transform:scale(.8)}to{transform:none}}
.mines-top{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;padding:0;
  background:var(--stroke);border-bottom:1px solid var(--stroke)}
.mines-top div{padding:var(--sp-2);border-radius:0;background:var(--bg-1);text-align:center}
.mines-top b{display:block;font-size:var(--fs-sub);font-weight:700;margin-top:2px}

/* ============================================================
   WHEEL
   ============================================================ */
.wheel-stage{height:270px;display:grid;place-items:center;position:relative}
.wheel-wrap{position:relative;width:230px;height:230px}
.wheel-svg{width:100%;height:100%;transition:transform 4.6s cubic-bezier(.16,1,.3,1);filter:none}
.wheel-pin{position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:20px;height:20px;z-index:2;
  color:var(--primary)}
.wheel-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;background:var(--bg-0);display:grid;place-items:center;
  font-size:var(--fs-lead);font-weight:700;color:var(--brand);
  border:1px solid var(--brand);box-shadow:var(--glow-amber)}

/* ============================================================
   ШАХТА — an open quarry in daylight
   Stage at 390px: 356px wide. Tool frame 5×38px, the pit 5×46px blocks
   (6 rows) over a row of chests. Sprites are 16×16, shown pixelated.
   ============================================================ */
.mn{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-3) var(--sp-4);overflow:hidden;isolation:isolate;
  background:#E9C796}
.mn img{image-rendering:pixelated;-webkit-user-drag:none;user-select:none}

/* the sky: day drifts into golden hour and back; the scene sits on the bottom */
.mn__sky{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,#5AA8EE 0%,#8FCBF7 22%,#CDEBFC 40%,#F3E2B8 48%,#E9C796 100%);
  background-size:100% 100%}
.mn__sky::before{content:"";position:absolute;inset:0;opacity:0;
  background:linear-gradient(180deg,#F59E5B 0%,#F7C07A 24%,#FBE0A8 40%,#F3C98F 48%,#E2B07A 100%);
  animation:mn-golden 48s ease-in-out infinite}
@keyframes mn-golden{0%,35%,100%{opacity:0}55%,75%{opacity:.6}}

.mn__sun{position:absolute;right:30px;top:26px;width:36px;height:36px;background:#FFF6C8;
  box-shadow:0 0 0 4px rgba(255,246,200,.6),0 0 0 9px rgba(255,236,170,.3),0 0 70px 26px rgba(255,226,140,.55);
  animation:mn-sunbob 48s ease-in-out infinite}
@keyframes mn-sunbob{0%,35%,100%{transform:translateY(0)}55%,75%{transform:translateY(34px);background:#FFD08A}}
.mn__sunrays{position:absolute;right:-42px;top:-46px;width:180px;height:180px;opacity:.5;
  background:repeating-conic-gradient(rgba(255,250,220,.55) 0 7deg,transparent 7deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 62%);mask:radial-gradient(circle,#000 18%,transparent 62%);
  animation:mn-rays 60s linear infinite}

.mn__cloud{position:absolute;height:12px;background:#fff;opacity:.95;
  box-shadow:10px -8px 0 0 #fff,22px -12px 0 -2px #fff,34px -6px 0 0 #fff,46px 0 0 0 #fff,
    0 4px 0 0 #E2F0FC,46px 4px 0 0 #E2F0FC,22px 4px 0 0 #E2F0FC;animation:mn-drift 40s linear infinite}
.mn__cloud--1{left:-70px;top:44px;width:56px}
.mn__cloud--2{left:-70px;top:100px;width:40px;opacity:.8;transform:scale(.8);animation-duration:56s;animation-delay:-22s}
.mn__cloud--3{left:-70px;top:20px;width:30px;opacity:.65;animation-duration:70s;animation-delay:-44s}
@keyframes mn-drift{to{transform:translateX(500px)}}

/* birds: a two-frame flap made of pixels */
.mn__bird{position:absolute;left:-20px;width:2px;height:2px;background:transparent;color:#2B3A4A;
  box-shadow:-4px -2px 0 currentColor,-2px 0 0 currentColor,2px 0 0 currentColor,4px -2px 0 currentColor;
  animation:mn-fly 22s linear infinite,mn-flap .5s steps(1) infinite}
.mn__bird--1{top:70px;animation-delay:-3s,0s}
.mn__bird--2{top:58px;animation-delay:-5s,-.2s;transform:scale(.8)}
.mn__bird--3{top:84px;animation-duration:30s,.5s;animation-delay:-18s,-.1s}
@keyframes mn-fly{from{translate:0 0}50%{translate:200px -12px}to{translate:420px 4px}}
@keyframes mn-flap{50%{box-shadow:-4px 0 0 currentColor,-2px -2px 0 currentColor,2px -2px 0 currentColor,4px 0 0 currentColor}}

/* the painted scene and its live bits */
.mn__scene{position:absolute;left:0;right:0;bottom:0;aspect-ratio:178/296}
.mn__scene-img{display:block;width:100%;height:100%;image-rendering:pixelated}
.mn__lamp{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,214,110,.75),rgba(255,180,60,.25) 40%,transparent 70%);
  mix-blend-mode:screen;animation:mn-lamp 2.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.9s)}
@keyframes mn-lamp{30%{opacity:.7;transform:scale(.92)}60%{opacity:1;transform:scale(1.05)}}
.mn__twinkle{position:absolute;width:4px;height:4px;margin:-2px 0 0 -2px;background:#fff;opacity:0;
  box-shadow:0 0 6px 2px rgba(255,236,170,.9);animation:mn-twinkle 4.5s ease-in-out infinite;animation-delay:calc(var(--i) * -.7s)}
@keyframes mn-twinkle{0%,80%,100%{opacity:0;transform:scale(.4)}88%{opacity:1;transform:scale(1) rotate(45deg)}}

/* night, for the bonus round */
.mn__stars,.mn__moon,.mn__aurora{position:absolute;opacity:0;transition:opacity .8s ease}
.mn__stars{inset:0 0 50% 0;background-image:
  radial-gradient(1px 1px at 12% 18%,#fff 99%,transparent),radial-gradient(1px 1px at 28% 8%,#fff 99%,transparent),
  radial-gradient(2px 2px at 44% 22%,#fff 99%,transparent),radial-gradient(1px 1px at 63% 12%,#fff 99%,transparent),
  radial-gradient(1px 1px at 78% 30%,#fff 99%,transparent),radial-gradient(2px 2px at 88% 6%,#fff 99%,transparent),
  radial-gradient(1px 1px at 6% 36%,#fff 99%,transparent),radial-gradient(1px 1px at 54% 34%,#fff 99%,transparent);
  animation:mn-stars 3s ease-in-out infinite alternate}
@keyframes mn-stars{to{filter:brightness(.6)}}
.mn__moon{right:34px;top:26px;width:30px;height:30px;background:#F4F1DA;
  box-shadow:inset -8px -4px 0 #D9D4B4,0 0 30px 8px rgba(230,230,255,.35)}
.mn__aurora{left:-20%;right:-20%;top:30px;height:70px;filter:blur(10px);
  background:linear-gradient(90deg,transparent,rgba(111,233,250,.55),rgba(167,139,250,.5),rgba(79,227,143,.45),transparent);
  animation:mn-aurora 9s ease-in-out infinite alternate}
@keyframes mn-aurora{to{transform:translateX(12%) skewX(-12deg)}}
.mn.is-bonus .mn__sky{background:linear-gradient(180deg,#14143A 0%,#262A66 26%,#3B3C7E 42%,#5A4A7A 48%,#3A2E44 100%)}
.mn.is-bonus .mn__sky::before,.mn.is-bonus .mn__sun,.mn.is-bonus .mn__sunrays,.mn.is-bonus .mn__cloud,.mn.is-bonus .mn__bird{opacity:0}
.mn.is-bonus .mn__stars,.mn.is-bonus .mn__moon{opacity:1}
.mn.is-bonus .mn__aurora{opacity:.9}
.mn.is-bonus .mn__lamp{background:radial-gradient(circle,rgba(255,224,130,.95),rgba(255,180,60,.4) 40%,transparent 72%)}

/* floating dust in the sunlight */
.mn__motes{position:absolute;inset:0;z-index:0;pointer-events:none}
.mn__motes i{position:absolute;width:3px;height:3px;background:rgba(255,255,255,.75);
  animation:mn-mote 9s linear infinite}
.mn__motes i:nth-child(1){left:8%;top:62%;animation-delay:-1s}
.mn__motes i:nth-child(2){left:22%;top:80%;animation-delay:-3s}
.mn__motes i:nth-child(3){left:35%;top:55%;animation-delay:-5s}
.mn__motes i:nth-child(4){left:50%;top:90%;animation-delay:-2s}
.mn__motes i:nth-child(5){left:64%;top:70%;animation-delay:-7s}
.mn__motes i:nth-child(6){left:76%;top:58%;animation-delay:-4s}
.mn__motes i:nth-child(7){left:88%;top:84%;animation-delay:-6s}
.mn__motes i:nth-child(8){left:15%;top:40%;animation-delay:-8s}
.mn__motes i:nth-child(9){left:56%;top:46%;animation-delay:-2.5s}
.mn__motes i:nth-child(10){left:92%;top:36%;animation-delay:-5.5s}
@keyframes mn-mote{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(18px,-90px);opacity:0}}



/* head-up display */
.mn__hud{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;align-self:stretch;gap:var(--sp-2)}
.mn__win{display:flex;align-items:baseline;gap:var(--sp-2);height:34px;padding:0 12px;border-radius:3px;
  background:rgba(20,14,8,.72);box-shadow:inset 0 0 0 1px rgba(255,210,90,.55),0 4px 10px -4px rgba(0,0,0,.5)}
.mn__win-k{font-size:var(--fs-badge);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#E9DCC8;align-self:center}
.mn__win b{font-size:var(--fs-lead);font-weight:800;color:#FFD24A;line-height:34px}
.mn__win b.is-bump{animation:mn-bump .32s var(--e-spring)}
@keyframes mn-bump{40%{transform:scale(1.2);color:#fff}}
.mn__turbo{height:34px;padding:0 12px;border-radius:3px;background:rgba(20,14,8,.6);color:#E9DCC8;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);font-size:var(--fs-badge);font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.mn__turbo span{font-size:14px}
.mn__turbo.is-on{color:#fff;background:#2E9C5E;box-shadow:inset 0 0 0 1px #6FE3A0,0 0 14px -4px #4FE38F}

/* the tool frame: a stone panel */
.mn__tools{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,38px);grid-auto-rows:38px;gap:4px;padding:7px;
  border-radius:3px;background:linear-gradient(180deg,#9AA0A8,#7C828B);
  box-shadow:inset 0 0 0 2px #5D636B,inset 0 3px 0 rgba(255,255,255,.35),0 8px 18px -8px rgba(0,0,0,.55)}
.mn__slot{display:grid;place-items:center;border-radius:2px;background:#4A4F57;
  box-shadow:inset 0 2px 0 rgba(0,0,0,.35),inset 0 -1px 0 rgba(255,255,255,.15)}
.mn__slot img{width:30px;height:30px}
.mn__slot.is-in{animation:mn-pop .36s var(--e-spring) both;animation-delay:var(--d)}
@keyframes mn-pop{from{transform:scale(0) rotate(-40deg);opacity:0}}
.mn__slot.is-crystal{background:#2E5B6A;box-shadow:inset 0 0 0 1px #7CF4FF,0 0 12px -2px #7CF4FF}
.mn__slot.is-gold{background:#6A5426;box-shadow:inset 0 0 0 1px #FFD24A,0 0 10px -3px #FFD24A}
.mn__slot.is-tnt{background:#6A2A26;box-shadow:inset 0 0 0 1px #FF6F61,0 0 10px -3px #FF6F61}
.mn__slot.is-used img{opacity:.22;filter:grayscale(1)}

.mn__wave{position:absolute;left:50%;top:92px;z-index:6;transform:translateX(-50%);padding:7px 16px;border-radius:3px;
  font-size:var(--fs-label);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:#7C5CF0;box-shadow:0 0 0 2px #B7A6FF,0 8px 24px -6px #7C5CF0;pointer-events:none}
.mn__wave.is-on{animation:mn-banner .9s var(--e-out) both}
@keyframes mn-banner{0%{opacity:0;transform:translate(-50%,10px) scale(.9)}20%,75%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}

/* the pit: timber frame around the dig */
.mn__pit{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;padding:7px;border-radius:3px;
  background:#4B3420;
  box-shadow:inset 0 0 0 3px #7A5530,inset 0 0 0 4px #3A2614,inset 0 14px 22px -10px rgba(0,0,0,.55),
    0 10px 22px -10px rgba(0,0,0,.6)}
.mn__board{display:grid;grid-template-columns:repeat(5,46px);grid-auto-rows:46px;gap:2px}
.mn__block{position:relative;display:block;background:var(--tex) center/100% 100% no-repeat;image-rendering:pixelated;
  box-shadow:0 2px 0 rgba(0,0,0,.25);
  animation:mn-drop .46s cubic-bezier(.3,1.45,.6,1) both;animation-delay:var(--d)}
@keyframes mn-drop{from{transform:translateY(-46px);opacity:0}}
.mn__crack{position:absolute;inset:0;background:center/100% 100% no-repeat;image-rendering:pixelated;pointer-events:none}
/* ore catches the light now and then */
.mn__block--copper::after,.mn__block--gold::after,.mn__block--crystal::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%) -60px 0/200% 100% no-repeat;
  mix-blend-mode:overlay;animation:mn-glint 6s ease-in-out infinite;animation-delay:var(--g)}
@keyframes mn-glint{0%,82%{background-position:-60px 0}100%{background-position:60px 0}}
.mn__block--crystal{animation:mn-drop .46s cubic-bezier(.3,1.45,.6,1) both,mn-glow 2.4s ease-in-out infinite;
  animation-delay:var(--d),var(--g)}
@keyframes mn-glow{50%{filter:drop-shadow(0 0 6px rgba(124,244,255,.85))}}
.mn__block.is-hit{animation:mn-hit .16s linear}
@keyframes mn-hit{25%{transform:translate(2px,-2px) scale(.96)}50%{transform:translate(-2px,1px);filter:brightness(1.6)}75%{transform:translate(1px,0)}}
.mn__block.is-gone{animation:mn-gone .2s ease-in forwards}
@keyframes mn-gone{40%{transform:scale(1.08);filter:brightness(2.2)}100%{transform:scale(.3);opacity:0}}

.mn__chests{display:grid;grid-template-columns:repeat(5,46px);gap:2px;padding-top:7px;border-top:3px solid #7A5530}
.mn__chest{position:relative;display:grid;place-items:center;height:46px}
.mn__chest-img{position:relative;z-index:1;width:42px;height:42px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.4))}
.mn__chest b{position:absolute;z-index:2;left:0;right:0;top:-6px;text-align:center;font-size:var(--fs-label);font-weight:800;
  color:#fff;opacity:0;text-shadow:0 2px 0 #000,0 0 8px #000}
.mn__rays{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;opacity:0;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,226,122,.55) 0 12deg,transparent 12deg 30deg);
  -webkit-mask:radial-gradient(circle,#000 20%,transparent 68%);mask:radial-gradient(circle,#000 20%,transparent 68%)}
.mn__chest.is-open .mn__rays{opacity:1;animation:mn-rays 6s linear infinite,mn-raysin .5s ease-out}
.mn__chest.is-rich .mn__rays{background:repeating-conic-gradient(rgba(124,244,255,.7) 0 12deg,transparent 12deg 30deg)}
@keyframes mn-rays{to{transform:rotate(360deg)}}
@keyframes mn-raysin{from{opacity:0;transform:scale(.3)}}
.mn__chest.is-open .mn__chest-img{animation:mn-bounce .5s var(--e-spring)}
@keyframes mn-bounce{30%{transform:translateY(-8px) scale(1.12)}}
.mn__chest.is-open b{opacity:1;animation:mn-pop .45s var(--e-spring) both}
.mn__chest.is-rich b{color:#7CF4FF}

/* effects layer */
.mn__fx{position:absolute;inset:0;z-index:5;pointer-events:none}
.mn__bit{position:absolute;box-shadow:inset -1px -1px 0 rgba(0,0,0,.35)}
.mn__puff{position:absolute;width:12px;height:12px;border-radius:2px;background:rgba(214,198,176,.85)}
.mn__spark{position:absolute;width:2px;height:7px;margin:-3px 0 0 -1px;background:linear-gradient(#fff,#FFD24A);
  box-shadow:0 0 6px #FFB833}
.mn__fly{position:absolute;width:40px;height:40px;filter:drop-shadow(0 6px 4px rgba(0,0,0,.45))}
.mn__fly img{width:100%;height:100%}
.mn__fly.is-lit::after{content:"";position:absolute;right:6px;top:0;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle,#fff,#FFB833 50%,transparent 70%);animation:mn-fuse .12s linear infinite alternate}
@keyframes mn-fuse{to{transform:scale(1.6)}}
.mn__coin{position:absolute;width:22px;height:22px}
.mn__coin img{width:100%;height:100%}
.mn__float{position:absolute;font-size:var(--fs-sub);font-weight:800;color:#FFE27A;white-space:nowrap;
  text-shadow:0 2px 0 #3A2414,-1px 0 0 #3A2414,1px 0 0 #3A2414,0 0 10px rgba(0,0,0,.5)}
.mn__float.is-copper{color:#FFB27A}
.mn__float.is-crystal{color:#BFFBFF;font-size:var(--fs-body)}
.mn__float.is-chest{font-size:var(--fs-h2);color:#fff;text-shadow:0 3px 0 #6B3A00,0 0 18px #FFB347}
.mn__boom{position:absolute;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;
  background:radial-gradient(circle,#fff 0,#FFF2B0 18%,#FFB24A 40%,rgba(216,67,58,.5) 60%,transparent 72%);
  animation:mn-boom .55s ease-out forwards}
@keyframes mn-boom{from{transform:scale(.15);opacity:1}to{transform:scale(1.5);opacity:0}}
.mn__ring{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;
  border:4px solid rgba(255,240,200,.9);animation:mn-ring .6s ease-out forwards}
@keyframes mn-ring{to{transform:scale(5);opacity:0;border-width:1px}}
.mn__smoke{position:absolute;width:22px;height:22px;border-radius:4px;background:rgba(120,110,100,.75)}
.mn.is-flash::after{content:"";position:absolute;inset:0;z-index:4;background:#FFF6DA;pointer-events:none;
  animation:mn-flash .38s ease-out forwards}
@keyframes mn-flash{from{opacity:.75}to{opacity:0}}

/* big win */
.mn__big[hidden],.mn__wave[hidden]{display:none}
.mn__big{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  overflow:hidden;background:radial-gradient(60% 45% at 50% 50%,rgba(30,18,4,.9),rgba(30,18,4,.6));pointer-events:none}
.mn__big-rays{position:absolute;left:50%;top:50%;width:640px;height:640px;margin:-320px 0 0 -320px;z-index:-1;
  background:repeating-conic-gradient(rgba(255,200,80,.22) 0 10deg,transparent 10deg 24deg);animation:mn-rays 9s linear infinite}
.mn__big.is-on{animation:mn-big 2.8s var(--e-out) both}
@keyframes mn-big{0%{opacity:0}10%,82%{opacity:1}100%{opacity:0}}
.mn__big-t{font-size:var(--fs-label);font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:#FFE27A}
.mn__big b{font-size:56px;line-height:60px;font-weight:800;color:#fff;
  text-shadow:0 0 28px rgba(255,190,80,.9),0 5px 0 #6B3A00;animation:mn-pop .5s var(--e-spring) both}
.mn__big span:last-child{font-size:var(--fs-body);font-weight:700;color:#FFE27A}

/* controls */
.mn__actions{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--sp-2)}
.mn__bonus .btn__sub{font-size:var(--fs-badge)}
.mn__rules{padding:var(--sp-3);border-radius:var(--r-sm);background:var(--bg-1);border:1px solid var(--stroke);
  font-size:var(--fs-label);color:var(--text-2);line-height:1.5}
.mn__rules summary{cursor:pointer;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text);min-height:24px}
.mn__rules p{margin:var(--sp-2) 0}
.mn__legend{display:grid;grid-template-columns:1fr 1fr;gap:6px var(--sp-3);margin:var(--sp-2) 0}
.mn__legend span{display:grid;grid-template-columns:24px 1fr auto;align-items:center;column-gap:6px;font-size:var(--fs-badge)}
.mn__legend b{color:var(--brand)}
.mn__legend em{grid-column:2 / -1;font-style:normal;color:var(--text-3)}
.mn__px{display:block;width:24px;height:24px;grid-row:span 2;image-rendering:pixelated}

@media (prefers-reduced-motion:reduce){
  .mn__cloud,.mn__motes i,.mn__block,.mn__block::after,.mn__slot.is-in,.mn__rays,.mn__big-rays{animation:none}
}

/* ---------- reels 5×3: a stone frame, each reel a window onto a strip ---------- */
.mn__reels{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,40px);gap:4px;padding:6px;
  border-radius:3px;background:linear-gradient(180deg,#9AA0A8,#7C828B);
  box-shadow:inset 0 0 0 2px #5D636B,inset 0 3px 0 rgba(255,255,255,.35),0 8px 18px -8px rgba(0,0,0,.55)}
.mn__reel{position:relative;height:120px;overflow:hidden;border-radius:2px;background:#3E434A;
  box-shadow:inset 0 3px 6px rgba(0,0,0,.55),inset 0 -3px 6px rgba(0,0,0,.45)}
.mn__reel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 18%,transparent 82%,rgba(0,0,0,.35))}
.mn__strip{display:flex;flex-direction:column}
.mn__cell{display:grid;place-items:center;height:40px;flex:none;transition:background .2s}
.mn__cell img{width:30px;height:30px}
.mn__cell.is-used img{opacity:.25;filter:grayscale(1)}
.mn__cell.is-heart{background:radial-gradient(circle,rgba(255,90,130,.55),transparent 70%);animation:mn-heart .9s ease-in-out infinite}
@keyframes mn-heart{50%{transform:scale(1.12)}}
.mn__cell.is-book{background:radial-gradient(circle,rgba(255,210,90,.6),transparent 70%)}
.mn__cell.is-upgraded{animation:mn-up .5s var(--e-spring)}
@keyframes mn-up{0%{transform:scale(.4) rotate(-40deg);filter:brightness(3)}}
.mn__reel.is-enchanted{box-shadow:inset 0 0 0 2px #E39BFF,0 0 16px -2px #A955E8,inset 0 3px 6px rgba(0,0,0,.55)}

/* free-spin counter and the extra-chance switch */
.mn__fs{display:flex;align-items:baseline;gap:6px;height:34px;padding:0 10px;border-radius:3px;
  background:#7C5CF0;color:#fff;box-shadow:0 0 0 2px #B7A6FF,0 6px 16px -6px #7C5CF0}
.mn__fs[hidden]{display:none}
.mn__fs span{font-size:var(--fs-badge);font-weight:700;letter-spacing:.12em;text-transform:uppercase;align-self:center}
.mn__fs b{font-size:var(--fs-lead);font-weight:800;line-height:34px}
.mn__ante{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--tap-lg);
  border-radius:var(--r-sm);background:var(--bg-1);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--stroke-strong)}
.mn__ante b{font-size:var(--fs-sub);font-weight:800;letter-spacing:.06em}
.mn__ante span{font-size:var(--fs-badge);color:var(--text-3)}
.mn__ante.is-on{color:#fff;background:linear-gradient(180deg,#E14B7A,#B32A58);box-shadow:0 0 0 1px #FF8FB1,0 0 18px -4px #E14B7A}
.mn__ante.is-on span{color:#FFD3E0}
.mn__buy{margin-top:var(--sp-2)}

/* the line that sums a spin up */
.mn__spinsum{position:relative;z-index:2;min-height:22px;padding:0 10px;border-radius:3px;font-size:var(--fs-label);
  color:#fff;line-height:22px;text-align:center;background:rgba(20,14,8,.6)}
.mn__spinsum:empty{background:none}
.mn__spinsum b{color:#FFD24A}
.mn__spinsum.is-on{animation:mn-pop .4s var(--e-spring) both}

/* banners */
.mn__wave{display:flex;flex-direction:column;align-items:center;gap:2px;top:150px}
.mn__wave b{font-size:var(--fs-h3);font-weight:800;letter-spacing:.04em}
.mn__wave span{font-size:var(--fs-badge);letter-spacing:.14em;opacity:.9}
.mn__wave.is-heart{background:#C8274F;box-shadow:0 0 0 2px #FF8FB1,0 10px 30px -6px #E14B7A}
.mn__wave.is-fs{background:#7C5CF0;box-shadow:0 0 0 2px #B7A6FF,0 10px 30px -6px #7C5CF0}
.mn__wave.is-on{animation:mn-banner 1.3s var(--e-out) both}

/* the 5×7 mine */
.mn__board{grid-template-columns:repeat(5,42px);grid-auto-rows:42px}
.mn__chests{grid-template-columns:repeat(5,42px)}
.mn__chest{height:42px}
.mn__chest-img{width:38px;height:38px}
.mn__block.is-dug{animation:none;opacity:0}
.mn__block--obsidian{animation:mn-drop .46s cubic-bezier(.3,1.45,.6,1) both,mn-obs 3s ease-in-out infinite;
  animation-delay:var(--d),var(--g)}
@keyframes mn-obs{50%{filter:drop-shadow(0 0 6px rgba(169,85,232,.8))}}
.mn__block--diamond::after,.mn__block--ore::after,.mn__block--obsidian::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%) -60px 0/200% 100% no-repeat;
  mix-blend-mode:overlay;animation:mn-glint 6s ease-in-out infinite;animation-delay:var(--g)}
.mn__float.is-ore{color:#F2BFA6}
.mn__float.is-diamond{color:#E4FBFF;font-size:var(--fs-body)}
.mn__float.is-obsidian{color:#E3C8FF;font-size:var(--fs-h3);text-shadow:0 0 14px #A955E8,0 2px 0 #1E1430}

/* a pick in hand: it hovers, strikes, bounces; pips show the strikes it has left */
.mn__held{width:40px;height:40px;z-index:6}
.mn__dur{position:absolute;left:50%;top:-10px;display:flex;gap:2px;transform:translateX(-50%) rotate(60deg);
  transform-origin:50% 26px;pointer-events:none}
.mn__dur i{width:5px;height:5px;border-radius:1px;background:rgba(20,14,8,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.mn__dur i.is-on{background:#FFD24A;box-shadow:0 0 4px rgba(255,210,74,.9)}
.mn__held.is-jolt img{animation:mn-jolt .14s ease-out}
@keyframes mn-jolt{40%{filter:brightness(1.8) drop-shadow(0 0 4px #fff)}}